/* Ultraviolet docs — layered on top of ../styles.css (same tokens, chrome and type) */

.docs-tag {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-text); border: 1px solid var(--border-strong); padding: 4px 8px;
}

.docs-wrap {
  max-width: 1320px; margin: 0 auto;
  padding-left: max(var(--space-7), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-7), env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8);
}

/* Table of contents */
.toc { position: relative; }
.toc__list { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; padding: var(--space-8) 0 var(--space-7); max-height: calc(100vh - 96px); overflow: auto; }
.toc__group { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: var(--space-5) 0 var(--space-2); }
.toc__group:first-child { margin-top: 0; }
.toc__list a { font-size: .875rem; color: var(--text-2); padding: 6px 0 6px 14px; border-left: 1px solid var(--border); transition: color var(--dur-fast), border-color var(--dur-fast); }
.toc__list a:hover { color: var(--text); }
.toc__list a.on { color: var(--text); border-left-color: var(--brand-text); }
.toc__toggle { display: none; }

/* Document column */
.doc { min-width: 0; max-width: 760px; padding: var(--space-8) 0 var(--space-9); }
.doc__head { padding-bottom: var(--space-7); border-bottom: var(--hairline); margin-bottom: var(--space-4); }
.doc__head .eyebrow .idx { min-width: 44px; }
.doc__title { font-size: clamp(2.2rem, 5.4vw, 4.4rem); margin-bottom: var(--space-5); }
.doc__title span { color: var(--brand-text); }
.doc__lede { font-size: 1.1875rem; color: var(--text-2); max-width: 60ch; margin: 0; }

.doc__sec { padding: var(--space-7) 0; border-bottom: var(--hairline); scroll-margin-top: 80px; }
.doc__sec:last-of-type { border-bottom: 0; }
.sec__kicker { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-text); margin: 0 0 var(--space-3); }
.doc h2 {
  font-family: var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 640;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 var(--space-5);
}
.doc h3 { font-size: 1.125rem; font-weight: 560; letter-spacing: -0.01em; margin: var(--space-5) 0 var(--space-2); }
.doc p { color: var(--text-2); line-height: 1.7; margin: 0 0 var(--space-4); max-width: 68ch; }
.doc p b, .doc li b { color: var(--text); font-weight: 560; }
.doc a:not(.btn) { color: var(--brand-text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.doc a:not(.btn):hover { text-decoration-color: var(--brand-text); }
.doc code { font-family: var(--font-mono); font-size: .875em; color: var(--text); background: var(--surface-2); border: var(--hairline); padding: 1px 6px; }
.fine { font-size: .875rem; color: var(--text-3) !important; }
.muted { color: var(--text-3); }

.doc__list { margin: 0 0 var(--space-4); padding-left: 1.2em; color: var(--text-2); line-height: 1.7; }
.doc__list li { margin-bottom: 6px; }
.doc__list li::marker { color: var(--brand-text); content: "▪  "; }
.doc__list.cols { columns: 2; column-gap: var(--space-6); font-family: var(--font-mono); font-size: .8125rem; }
.doc__links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.callout { border: 1px solid var(--border-strong); border-left: 2px solid var(--brand-text); background: var(--surface); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; }
.callout p { margin: 0; }
.callout__label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text) !important; margin-bottom: 6px !important; }

/* Quickstart steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 0; border: var(--hairline); }
.steps li { counter-increment: s; position: relative; padding: var(--space-5) var(--space-5) var(--space-5) 72px; border-top: var(--hairline); }
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: var(--space-5); top: var(--space-5);
  font-family: var(--font-mono); font-size: .75rem; color: var(--brand-text); letter-spacing: .08em;
}
.steps h3 { margin: 0 0 6px; }
.steps p { margin: 0; }

/* Definitions */
.defs { margin: var(--space-4) 0; border-top: var(--hairline); }
.defs > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4); padding: 12px 0; border-bottom: var(--hairline); }
.defs dt { font-family: var(--font-mono); font-size: .8125rem; color: var(--text); letter-spacing: .02em; }
.defs dd { margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }

/* Fee KPIs */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); border: var(--hairline); width: max-content; max-width: 100%; margin-bottom: var(--space-5); }
.kpis > div { padding: 14px 18px; border-left: var(--hairline); display: flex; flex-direction: column; gap: 6px; }
.kpis > div:first-child { border-left: 0; }
.kpis span { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.kpis b { font-family: var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 600; font-size: 1.8rem; line-height: 1; }
.kpis > div:first-child b { color: var(--signal); }
.kpis small { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); margin-left: 2px; }

/* Tables reuse .ds__table from styles.css; tighten for docs */
.doc .ds__table td { white-space: normal; }
.doc .ds__table td:first-child { width: 38%; }

/* Trust model */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tcard { border: var(--hairline); background: var(--surface); padding: var(--space-5); }
.tcard ul { margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.tcard li { margin-bottom: 8px; }
.tcard__label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--space-3) !important; display: flex; align-items: center; gap: 8px; }
.tcard__label::before { content: ""; width: 7px; height: 7px; }
.tcard__label.ok { color: var(--signal) !important; } .tcard__label.ok::before { background: var(--signal); }
.tcard__label.warn { color: var(--uv-amber) !important; } .tcard__label.warn::before { border: 1px solid var(--uv-amber); }

/* FAQ */
.doc details { border-bottom: var(--hairline); }
.doc details:first-of-type { border-top: var(--hairline); }
.doc summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; font-weight: 500; color: var(--text); }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--font-mono); color: var(--brand-text); }
.doc details[open] summary::after { content: "−"; }
.doc details p { margin: 0 0 16px; }

.doc__foot { padding-top: var(--space-6); border-top: var(--hairline); margin-top: var(--space-6); }
.doc__foot p { font-size: .8125rem; color: var(--text-3); }

/* Responsive */
@media (max-width: 1100px) {
  .docs-wrap { grid-template-columns: 1fr; gap: 0; }
  .toc { position: sticky; top: 49px; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--hairline); margin: 0 calc(-1 * max(var(--space-7), env(safe-area-inset-left, 0px))); padding: 0 max(var(--space-7), env(safe-area-inset-left, 0px)); }
  .toc__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; padding: 12px 0; cursor: pointer; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
  .toc__toggle::after { content: "+"; color: var(--brand-text); }
  .toc__toggle[aria-expanded="true"]::after { content: "−"; }
  .toc__list { display: none; position: static; max-height: 60vh; padding: 0 0 var(--space-4); }
  .toc__list.open { display: flex; }
  .doc { padding-top: var(--space-6); }
}
@media (max-width: 760px) {
  .docs-wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .toc { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
  .docs-tag { display: none; }
  .defs > div { grid-template-columns: 1fr; gap: 4px; }
  .split2 { grid-template-columns: 1fr; }
  .doc__list.cols { columns: 1; }
  .steps li { padding-left: 56px; }
  .kpis { width: 100%; grid-template-columns: 1fr 1fr; }
}
.doc code.addr { overflow-wrap: anywhere; user-select: all; }