/* Developer docs (/developers, /developers/changelog): a three-column reference layout inside the site's own chrome.
   Rides on /host/brand.css for tokens, type and the header and footer; adds nothing outside .dv, so no bare element
   rule here can reach the nav, the mobile menu or the footer (CLAUDE.md: never two design systems on one page).
   NOTHING HERE HIDES CONTENT. The only things that start hidden are controls that need JavaScript to do anything
   (search, the copy buttons), and they use the HTML hidden attribute, removed by /host/docs.js once it runs. */

.dv{--dv-top:63px;--dv-bar:58px;--dv-code:#0E1B3D;--dv-code-ink:#E7EBF6;--dv-code-faint:#9BA8CC;display:block}

/* ── the docs bar under the site header ─────────────────────────────────────────────────────────────────────── */
.dv .dv-bar{border-bottom:1px solid var(--rule-2);background:var(--paper);position:sticky;top:var(--dv-top);z-index:50}
.dv .dv-bar__in{max-width:1360px;margin:0 auto;padding:0 40px;height:var(--dv-bar);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
.dv .dv-bar__home{display:flex;align-items:baseline;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}
.dv .dv-bar__home:hover{text-decoration:none;color:var(--ink)}
.dv .dv-bar__brand{font-family:var(--logo);font-weight:700;font-size:15.5px;letter-spacing:-0.02em}
.dv .dv-bar__docs{font-size:14.5px;color:var(--body)}
.dv .dv-bar__links{display:flex;gap:22px;justify-content:flex-end}
.dv .dv-bar__links a{font-size:14px;font-weight:500;color:var(--body);white-space:nowrap}
.dv .dv-bar__links a:hover,.dv .dv-bar__links a[aria-current="page"]{color:var(--ink);text-decoration:none}
.dv .dv-bar__links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}

.dv .dv-search{position:relative;justify-self:center;width:100%;max-width:440px;margin:0}
.dv .dv-search[hidden]{display:none}
.dv .dv-search__box{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--rule);border-radius:9px;background:var(--white);color:var(--faint);cursor:text}
.dv .dv-search__box:focus-within{border-color:var(--ink-2);box-shadow:0 0 0 3px var(--accent-soft)}
.dv .dv-search__box svg{width:16px;height:16px;flex:none}
.dv .dv-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:0}
.dv .dv-search input::-webkit-search-cancel-button{display:none}
.dv .dv-search kbd{font-family:var(--mono);font-size:11px;line-height:1;color:var(--faint);border:1px solid var(--rule);border-bottom-width:2px;border-radius:5px;padding:3px 6px;background:var(--paper)}
.dv .dv-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;list-style:none;margin:0;padding:6px;background:var(--white);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);max-height:min(60vh,420px);overflow:auto}
.dv .dv-results[hidden]{display:none}
.dv .dv-results li{margin:0}
.dv .dv-results a{display:block;padding:8px 10px;border-radius:7px;color:var(--ink);font-size:14px;line-height:1.35;text-decoration:none}
.dv .dv-results a small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.dv .dv-results a:hover,.dv .dv-results a[aria-selected="true"]{background:var(--paper-2);text-decoration:none}
.dv .dv-results .dv-results__none{padding:8px 10px;font-size:14px;color:var(--faint)}
.dv .dv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── three columns ──────────────────────────────────────────────────────────────────────────────────────────── */
.dv .dv-grid{max-width:1360px;margin:0 auto;padding:0 40px 96px;display:grid;grid-template-columns:220px minmax(0,1fr) 210px;gap:56px;align-items:start}
.dv .dv-mtoc{display:none}

.dv .dv-side--d{position:sticky;top:calc(var(--dv-top) + var(--dv-bar) + 28px);max-height:calc(100vh - var(--dv-top) - var(--dv-bar) - 48px);overflow:auto;padding:36px 4px 24px 0}
.dv .dv-side__grp{margin:0 0 22px}
.dv .dv-side__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.dv .dv-side ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule-2)}
.dv .dv-side li{margin:0}
.dv .dv-side a{display:block;margin-left:-1px;padding:5px 0 5px 14px;border-left:1px solid transparent;font-size:14.5px;line-height:1.4;color:var(--body);text-decoration:none}
.dv .dv-side a:hover{color:var(--ink);text-decoration:none}
.dv .dv-side a.is-current,.dv .dv-side a[aria-current="page"]{border-left-color:var(--accent);color:var(--ink);font-weight:500}

.dv .dv-rail{position:sticky;top:calc(var(--dv-top) + var(--dv-bar) + 28px);padding:36px 0 24px}
.dv .dv-rail__btns{display:flex;flex-direction:column;gap:8px;margin:0 0 26px}
.dv .dv-btn{display:inline-flex;align-items:center;gap:8px;width:100%;padding:7px 11px;border:1px solid var(--rule);border-radius:8px;background:var(--white);color:var(--ink-2);font:inherit;font-size:13px;font-weight:500;line-height:1.3;text-decoration:none;cursor:pointer}
.dv .dv-btn[hidden]{display:none}
.dv .dv-btn svg{width:15px;height:15px;flex:none;color:var(--faint)}
.dv .dv-btn:hover{border-color:var(--rule-strong);color:var(--ink);text-decoration:none}
.dv .dv-btn.is-done{border-color:var(--ok);color:var(--ok)}
.dv .dv-btn.is-done svg{color:var(--ok)}
.dv .dv-rail__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.dv .dv-rail__list{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule-2)}
.dv .dv-rail__list li{margin:0}
.dv .dv-rail__list a{display:block;margin-left:-1px;padding:4px 0 4px 12px;border-left:1px solid transparent;font-size:13.5px;line-height:1.4;color:var(--body);text-decoration:none}
.dv .dv-rail__list a:hover{color:var(--ink);text-decoration:none}
.dv .dv-rail__list a.is-current{border-left-color:var(--accent);color:var(--ink)}

/* ── the content column ─────────────────────────────────────────────────────────────────────────────────────── */
.dv .dv-doc{min-width:0;max-width:72ch;padding:40px 0 0;font-size:16.5px;line-height:1.7;color:var(--body)}
.dv .dv-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);margin:0 0 12px}
.dv .dv-doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.2vw,52px);line-height:1.05;letter-spacing:-0.022em;color:var(--ink);max-width:none;margin:0 0 12px}
.dv .dv-updated{font-size:13.5px;color:var(--faint);margin:0 0 28px}
.dv .dv-doc > p:not(.dv-eyebrow):not(.dv-updated){max-width:68ch}
.dv .dv-doc h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;letter-spacing:-0.018em;color:var(--ink);max-width:none;margin:56px 0 16px;padding-top:40px;border-top:1px solid var(--rule)}
.dv .dv-doc h3{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);margin:36px 0 10px}
.dv .dv-doc h2,.dv .dv-doc h3{scroll-margin-top:calc(var(--dv-top) + var(--dv-bar) + 20px)}
.dv .dv-doc p{margin:0 0 14px}
.dv .dv-doc ul,.dv .dv-doc ol{margin:0 0 18px;padding-left:22px}
.dv .dv-doc li{margin:0 0 7px;padding-left:2px}
.dv .dv-doc li::marker{color:var(--faint)}
/* numbered steps: brand.css .points--steps, tightened for reference reading */
.dv .dv-doc .points{margin:6px 0 22px;padding:0}
.dv .dv-doc .points li{padding:9px 0;margin:0;border-color:var(--rule-2)}
.dv .dv-doc .points--steps li{gap:12px}
.dv .dv-doc .points--steps .n{padding-top:5px}
.dv .dv-doc .points p{font-size:inherit;line-height:1.6;margin:0}
.dv .dv-doc strong{color:var(--ink);font-weight:600}
.dv .dv-doc a{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.dv .dv-doc a:hover{text-decoration-color:var(--accent)}

/* inline code: a quiet monospace chip */
.dv .dv-doc code{font-family:var(--mono);font-size:.84em;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--rule-2);border-radius:5px;padding:1px 5px}
.dv .dv-doc a code{color:inherit}

/* tables: uppercase small headers, hairline rows, their own sideways scroll on a phone */
.dv .dv-tbl{margin:8px 0 22px;overflow-x:auto;border-top:1px solid var(--rule)}
.dv .dv-tbl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dv .dv-tbl table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.dv .dv-tbl th,.dv .dv-tbl td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule-2)}
.dv .dv-tbl thead th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding-top:12px;white-space:nowrap}
.dv .dv-tbl tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.dv .dv-tbl td:first-child code{white-space:nowrap}
.dv .dv-tbl td{color:var(--body)}

/* code blocks: dark, monospace, and only the block scrolls sideways */
.dv .dv-code{margin:8px 0 22px;border-radius:10px;background:var(--dv-code);overflow:hidden}
.dv .dv-code__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px 7px 14px;border-bottom:1px solid var(--dark-rule)}
.dv .dv-code__bar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dv-code-faint)}
.dv .dv-code__copy{font:inherit;font-size:12px;font-weight:500;color:var(--dv-code-ink);background:transparent;border:1px solid var(--dark-rule);border-radius:6px;padding:3px 9px;cursor:pointer}
.dv .dv-code__copy[hidden]{display:none}
.dv .dv-code__copy:hover{border-color:var(--dv-code-faint)}
.dv .dv-code pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:13.25px;line-height:1.6;color:var(--dv-code-ink);tab-size:2}
.dv .dv-code pre:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dv .dv-code code{font:inherit;color:inherit;background:none;border:0;padding:0;white-space:pre}

/* ── narrower screens ───────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1240px){
  .dv .dv-grid{grid-template-columns:210px minmax(0,1fr);gap:48px}
  .dv .dv-rail{display:none}
}
@media (max-width:1000px){
  .dv .dv-bar{position:static}
  .dv .dv-bar__in{grid-template-columns:minmax(0,1fr) auto;row-gap:0;height:auto;padding-top:10px;padding-bottom:10px}
  .dv .dv-search{grid-column:1 / -1;grid-row:2;max-width:none;margin-top:8px}
  .dv .dv-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .dv .dv-side--d{display:none}
  .dv .dv-mtoc{display:block;margin:20px 0 0;border:1px solid var(--rule);border-radius:10px;background:var(--white)}
  .dv .dv-mtoc summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:14.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between}
  .dv .dv-mtoc summary::-webkit-details-marker{display:none}
  .dv .dv-mtoc summary::after{content:"+";font-weight:400;font-size:20px;line-height:1;color:var(--faint)}
  .dv .dv-mtoc[open] summary::after{content:"\2212"}
  .dv .dv-side--m{padding:4px 14px 6px}
  .dv .dv-doc{max-width:none;padding-top:28px}
  .dv .dv-doc h2,.dv .dv-doc h3{scroll-margin-top:calc(var(--dv-top) + 16px)}
}
@media (max-width:760px){
  /* the site's own phone gutter (brand.css .wrap), so the docs line up with the header above them */
  .dv .dv-bar__in,.dv .dv-grid{padding-left:22px;padding-right:22px}
  .dv .dv-bar__brand{display:none} /* the header right above already says SiteViewer */
  .dv .dv-bar__docs{font-size:14px;color:var(--ink);font-weight:500}
  .dv .dv-bar__links{gap:16px}
  .dv .dv-bar__links a{font-size:13.5px}
  .dv .dv-doc{font-size:16px}
  .dv .dv-doc h2{font-size:27px;margin-top:44px;padding-top:32px}
  .dv .dv-tbl table{font-size:14px}
  .dv .dv-code pre{font-size:12.5px;padding:12px 14px}
}
/* On a phone every table is a list of rows, not a sideways scroll (owner, 2026-10-31). Each row becomes a block:
   its first cell is the row's heading, every other cell shows its column's name (data-label, written at build time)
   in the header style above its value. The header row is kept for screen readers but not drawn. Key/value tables
   (no column headers) stack the same way, the row's own header as the heading. Code blocks keep their own scroll. */
@media (max-width:640px){
  .dv .dv-tbl{overflow:visible;border-top:0;margin-bottom:26px}
  .dv .dv-tbl table,.dv .dv-tbl tbody,.dv .dv-tbl tr,.dv .dv-tbl th,.dv .dv-tbl td{display:block;width:auto}
  .dv .dv-tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .dv .dv-tbl tr{border-top:1px solid var(--rule);padding:14px 0 12px}
  .dv .dv-tbl tbody tr:last-child{border-bottom:1px solid var(--rule)}
  .dv .dv-tbl th,.dv .dv-tbl td{border:0;padding:0}
  .dv .dv-tbl td + td{margin-top:10px}
  .dv .dv-tbl td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);line-height:1.4;margin:0 0 2px}
  .dv .dv-tbl td:first-child,.dv .dv-tbl tbody th{font-size:16px;font-weight:600;color:var(--ink);white-space:normal}
  .dv .dv-tbl td:first-child::before{content:none}
  .dv .dv-tbl td:first-child code,.dv .dv-tbl tbody th code{white-space:normal}
  .dv .dv-tbl--kv th + td{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.dv *{scroll-behavior:auto}}