/* ==========================================================================
   Document pages (privacy, terms, NDPR, SDK licence, security) and the 404 page.
   Loads after veris.css + home.css. Laid out like a manual page: a slim bar with
   previous / next, a very large title beside a specification card and contents list,
   then each numbered section with its heading in the left column and its text on
   the right. The site header and footer are untouched.
   Generated structure: marketing/website-rebrand/tools/build-doc-pages.py
   ========================================================================== */

/* ---- Bar under the header ---- */
.mbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; border-bottom: 1px solid var(--line-2); }
.mbar__l, .mbar__r { display: flex; align-items: center; gap: 20px; min-width: 0; }
.mbar__back { display: inline-flex; align-items: center; gap: 10px; font: 500 14.5px/1 var(--f-body); color: var(--ink-2); text-decoration: none; transition: color 160ms var(--out); }
.mbar__back svg, .mbar__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mbar__sec { font: 500 14.5px/1 var(--f-body); color: var(--ink); }
.mbar__pos { font: 500 12.5px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; }
.mbar__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 160ms var(--out), transform 160ms var(--out); }
.mbar__arrow:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .mbar__back:hover { color: var(--ink); } .mbar__arrow:hover { background: var(--bg-3); } }

/* ---- Title + specification ---- */
.mhero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 6vw, 96px); padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 88px); align-items: start; }
.mhero__t { font: 700 clamp(44px, 7.2vw, 96px)/.98 var(--f-display); letter-spacing: -.045em; color: var(--ink); max-width: 9ch; text-wrap: balance; }
.mhero__lead { margin-top: clamp(20px, 3vw, 36px); max-width: 38em; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--ink-2); }
.mlabel { margin: 0 0 12px; font: 600 14.5px/1.2 var(--f-body); color: var(--ink); }
.mspec { margin: 0 0 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.mspec > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 13px 16px; }
.mspec > div + div { border-top: 1px solid var(--line); }
.mspec dt { font: 500 12px/1.4 var(--f-mono); letter-spacing: .02em; color: var(--ink-3); }
.mspec dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.mspec a { color: var(--ink); text-decoration-color: var(--mint); text-underline-offset: 3px; }
.mtoc ol { list-style: none; margin: 0; padding: 0; display: grid; }
.mtoc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; padding: 7px 0; text-decoration: none; font-size: 15px; line-height: 1.4; color: var(--ink-2); transition: color 160ms var(--out); }
.mtoc a span { font: 500 12px/1.9 var(--f-mono); color: var(--ink-3); }
.mtoc a.is-on { color: var(--ink); }
.mtoc a.is-on span { color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .mtoc a:hover { color: var(--ink); } }

/* ---- Sections ---- */
.msecs { border-top: 1px solid var(--line-2); }
.msec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding: 56px 0 60px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.msec__h { align-self: start; position: sticky; top: 96px; margin: 0; font: 700 clamp(24px, 2.5vw, 31px)/1.12 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.msec__n { display: block; margin-bottom: 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--mint); }
.msec__b { min-width: 0; max-width: 780px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.msec__b > :first-child { margin-top: 0; }
.msec__b > :last-child { margin-bottom: 0; }
.msec__b h3 { margin: 32px 0 10px; font: 700 18px/1.3 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.msec__b p { margin: 0 0 16px; }
.msec__b ul, .msec__b ol { margin: 0 0 18px; padding-left: 22px; }
.msec__b li { margin: 6px 0; padding-left: 4px; }
.msec__b li::marker { color: var(--ink-3); }
.msec__b strong, .msec__b b { color: var(--ink); font-weight: 600; }
.msec__b a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
@media (hover: hover) and (pointer: fine) { .msec__b a:hover { color: var(--mint); } }
.msec__b code { font: 500 .88em/1 var(--f-mono); padding: 2px 6px; border-radius: 6px; background: var(--bg-3); color: var(--ink); }

.msec__b .callout { margin: 0 0 24px; padding: 18px 22px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--ink-3); }
.msec__b .callout.mint { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--mint); }
.msec__b .callout.warn { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--warn); }
.msec__b .callout p:last-child { margin-bottom: 0; }
.msec__b .table-wrap { margin: 8px 0 24px; overflow-x: auto; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-2); }
.msec__b table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.msec__b th { text-align: left; padding: 12px 16px; font: 600 12px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); }
.msec__b td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.msec__b td:first-child { color: var(--ink); font-weight: 500; }
.msec__b .principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.msec__b .principle-card { padding: 18px 20px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 12px; }
.msec__b .principles-grid .principle-card { margin-bottom: 0; }
.msec__b .principle-num { font: 600 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--mint); }
.msec__b .principle-title { margin-top: 10px; font: 700 16.5px/1.3 var(--f-display); color: var(--ink); }
.msec__b .principle-body { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* ---- Help card ---- */
.mhelp { margin: 56px 0 96px; padding: 24px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.mhelp p { margin: 0; color: var(--ink-2); }
.mhelp b { display: block; color: var(--ink); font: 700 17px/1.3 var(--f-display); }

@media (max-width: 960px) {
  .mhero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mhero__t { max-width: 12ch; }
  .msec { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 40px 0 44px; }
  .msec__h { position: static; }
}
@media (max-width: 560px) {
  .mbar { min-height: 56px; }
  .mbar__sec, .mbar__pos { display: none; }
  .mspec > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---- 404 ---- */
.lost { padding: 96px 0 120px; }
.lost__code { font: 600 13px/1 var(--f-mono); letter-spacing: .14em; color: var(--mint); }
.lost__t { margin-top: 18px; font: 700 clamp(36px, 5vw, 64px)/1.03 var(--f-display); letter-spacing: -.035em; color: var(--ink); max-width: 16ch; }
.lost__p { margin-top: 18px; max-width: 54ch; font-size: 17.5px; color: var(--ink-2); }
.lost__go { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.lost__links { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lost__links a { display: block; padding: 18px 20px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: background-color 160ms var(--out); }
.lost__links b { display: block; color: var(--ink); font: 700 16px/1.3 var(--f-display); }
.lost__links span { font-size: 14px; color: var(--ink-2); }
.lost__links a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .lost__links a:hover { background: var(--bg-3); } }

/* Kick label (same as capture.css, so document pages need not load it) */
.kick { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kick__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(46,255,213,.14); }