/* GAUGE docs — shared shell styling. Loaded by every page in docs/.
   Light "bench" datasheet system, matching the homepage: warm bone ground,
   ink chassis, amber calibration, teal = the live/structural accent,
   redline for danger only. */
:root{
  --paper:#F2EEE3;      /* bone ground */
  --paper-2:#EAE4D6;    /* recessed fill: code, pre, addr */
  --rule:#D8D2C4;       /* warm hairline */
  --rule-strong:#C6BFAE;
  --ink:#14232B;        /* structure + text */
  --pencil:#4A5C64;     /* secondary text */
  --minium:#5FC9B4;     /* live / structural accent (teal) */
  --cyan:#14232B;       /* sidebar field + link ink */
  --cyan-deep:#1E6E58;  /* deep teal: accent text that must stay readable on bone */
  --panel:#F7F4EC;      /* raised figure field */
  --on-dark:#C9CFC9;    /* labels on the ink sidebar / footer */
  --amber:#E2A73E;      /* calibration marks */
  --redline:#C0392B;    /* danger only */

  --display:"Archivo Expanded","Archivo Expanded Trial",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sidebar:280px;--toc:220px;

  /* legacy token aliases — inline styles on page fragments still reference these */
  --bone:#14232B;--muted:#4A5C64;--muted-dim:#5C6E74;
  --brass:#14232B;--brass-deep:#1E6E58;--signal:#1E6E58;--danger:#C0392B;
  --line:#D8D2C4;--line-strong:#C6BFAE;--ink-2:#EAE4D6;--ink-3:#F7F4EC;
  --grid:rgba(20,35,43,.042);--grid-major:rgba(20,35,43,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.64;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  background-position:-1px -1px;}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.012em;line-height:1.05}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--minium);outline-offset:3px}
::selection{background:var(--minium);color:var(--ink)}
.skip{position:absolute;left:8px;top:8px;z-index:100;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;padding:9px 13px;transform:translateY(-160%);transition:transform .12s}
.skip:focus{transform:none}

/* TOPBAR : ink chassis with a teal underline */
.topbar{position:sticky;top:0;z-index:60;height:56px;display:flex;align-items:center;
  justify-content:space-between;padding:0 22px;background:var(--ink);
  border-bottom:2px solid var(--minium)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
  font-size:18px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.brand .gauge{width:24px;height:24px}
.brand .docs-tag{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  color:var(--on-dark);border:1px solid rgba(242,238,227,.34);padding:3px 7px;margin-left:4px}
.topbar-right{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark)}
.topbar-right a{color:var(--paper)}
.topbar-right a:hover{color:#fff}
.topbar-right .pending{color:var(--on-dark)}
.side-toggle{display:none;background:none;border:1px solid rgba(242,238,227,.4);color:var(--paper);
  width:40px;height:36px;font-size:17px;cursor:pointer}

/* LAYOUT */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--toc);
  max-width:1440px;margin:0 auto;align-items:start}

/* SIDEBAR : solid ink field with an amber ruler-tick edge */
aside.side{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  background:var(--ink);color:var(--paper);padding:24px 20px 60px;
  box-shadow:-100vw 0 0 100vw var(--ink), inset -1px 0 0 rgba(242,238,227,.12)}
aside.side::after,aside.side::before{content:"";position:absolute;top:0;bottom:0;right:0;
  pointer-events:none}
aside.side::after{width:5px;background:repeating-linear-gradient(to bottom,
  color-mix(in srgb,var(--amber) 60%,transparent) 0 1px,transparent 1px 22px)}
aside.side::before{width:12px;background:repeating-linear-gradient(to bottom,
  rgba(242,238,227,.22) 0 1.5px,transparent 1.5px 110px)}
.search{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(242,238,227,.28);
  color:var(--paper);font-family:var(--mono);font-size:13px;padding:10px 12px;margin-bottom:22px}
.search::placeholder{color:var(--on-dark)}
.search:focus-visible{outline-color:var(--paper)}
.nav-group{margin-bottom:20px}
.nav-group > .g-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);padding:0 8px 10px}
.nav-group a{display:block;font-size:13.5px;color:var(--on-dark);padding:6px 10px;
  border-left:2px solid transparent;transition:.14s}
.nav-group a:hover{color:var(--paper);background:rgba(242,238,227,.07);text-decoration:none}
.nav-group a.active{color:var(--paper);border-left-color:var(--minium);background:rgba(242,238,227,.09);font-weight:600}
.nav-group a.sub{padding-left:22px;font-size:13px}

/* collapsible sub-page branches */
.nav-parent{display:flex;align-items:center}
.nav-parent > a{flex:1;min-width:0}
.nav-toggle{flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:30px;margin-right:2px;padding:0;background:none;border:0;cursor:pointer;
  color:var(--on-dark);transition:.14s}
.nav-toggle:hover{color:var(--paper);background:rgba(242,238,227,.07)}
.nav-toggle svg{transition:transform .15s}
.nav-branch[data-open="true"] > .nav-parent .nav-toggle svg{transform:rotate(90deg)}
.nav-children{display:none}
.nav-branch[data-open="true"] > .nav-children,
.side.search-active .nav-children{display:block}

/* CONTENT */
main.doc{padding:42px 56px 120px;min-width:0}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pencil);margin-bottom:20px}
.crumbs span{color:var(--ink)}
main.doc h1{font-size:clamp(30px,4.4vw,46px);margin:0 0 14px;color:var(--ink);
  border-bottom:3px solid var(--ink);padding-bottom:12px}
main.doc h1::after{content:"";display:block;width:64px;height:2px;background:var(--minium);margin-top:12px;margin-bottom:-14px}
main.doc .subtitle{color:var(--pencil);font-size:18px;margin:-4px 0 10px;font-family:var(--body);
  text-transform:none;font-weight:400}
main.doc h2{font-size:22px;margin:44px 0 14px;scroll-margin-top:80px;color:var(--ink);
  border-bottom:1px solid var(--rule-strong);padding-bottom:6px}
main.doc h3{font-family:var(--body);font-size:16px;font-weight:700;text-transform:none;
  letter-spacing:0;margin:26px 0 8px;scroll-margin-top:80px;color:var(--ink)}
main.doc p{color:var(--ink);margin:0 0 16px;max-width:70ch}
main.doc a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule-strong)}
main.doc a:hover{text-decoration-color:currentColor}
main.doc p.note-muted{color:var(--pencil);font-size:14px}
main.doc ul,main.doc ol{color:var(--ink);max-width:70ch;padding-left:22px;margin:0 0 16px}
main.doc li{margin:7px 0}
main.doc li::marker{color:var(--amber)}
main.doc strong{color:var(--ink);font-weight:600}
code{font-family:var(--mono);font-size:.85em;background:var(--paper-2);color:var(--cyan-deep);
  border:1px solid var(--rule-strong);padding:1px 5px}
main.doc pre{background:var(--paper-2);border:1px solid var(--ink);
  padding:15px 18px;margin:20px 0;overflow-x:auto;font-family:var(--mono);font-size:13px;
  line-height:1.7;color:var(--ink);max-width:100%}
main.doc pre code{background:none;border:0;padding:0;color:inherit}
main.doc pre .cm{color:var(--pencil)}

.callout{border:1px solid var(--ink);border-left:4px solid var(--minium);
  background:var(--panel);padding:16px 18px;margin:22px 0;max-width:74ch}
.callout .c-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-deep);display:block;margin-bottom:7px}
.callout p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.55}
.callout.danger{border-color:var(--redline);border-left-color:var(--redline);
  background:color-mix(in srgb,var(--redline) 7%,transparent)}
.callout.danger .c-label{color:var(--redline)}

main.doc figure{margin:24px 0;max-width:860px}
main.doc figure img{display:block;width:100%;height:auto;border:1px solid var(--ink);
  background:var(--panel);box-shadow:0 0 0 1px var(--rule-strong)}
main.doc figure figcaption{font-family:var(--mono);font-size:11px;line-height:1.55;
  letter-spacing:.02em;color:var(--pencil);margin-top:9px}
main.doc figure figcaption b{color:var(--ink);font-weight:600}

table{width:100%;border-collapse:collapse;margin:20px 0;font-family:var(--mono);font-size:13px;
  background:var(--panel);box-shadow:0 0 0 1px var(--rule-strong)}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--rule-strong)}
th{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pencil);font-weight:600;
  border-bottom:2px solid var(--ink)}
td{color:var(--ink);vertical-align:top}
tbody tr:last-child td{border-bottom:2px solid var(--ink)}
td .sym,td a.sym{font-family:var(--mono);color:var(--cyan-deep);font-weight:600}
.stamp{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 6px;white-space:nowrap}
.stamp.pre{background:var(--ink);color:var(--paper)}
.stamp.prop{border:1px solid var(--pencil);color:var(--pencil)}

.addr{font-family:var(--mono);font-size:13px;background:var(--paper-2);border:1px solid var(--ink);
  padding:10px 12px;color:var(--ink);overflow-x:auto;white-space:nowrap}
.faq-q{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink);margin:24px 0 6px}
.table-wrap{overflow-x:auto;margin:20px 0}
.table-wrap table{margin:0}

/* PREV / NEXT (injected by shell.js) */
.page-nav{display:flex;justify-content:space-between;gap:14px;margin-top:56px;
  padding-top:26px;border-top:2px solid var(--ink)}
.page-nav a{display:flex;flex-direction:column;gap:5px;border:1px solid var(--ink);
  padding:12px 16px;flex:1;min-width:0;transition:.14s;background:var(--panel)}
.page-nav a:hover{background:var(--paper-2);text-decoration:none}
.page-nav .page-nav-next{text-align:right;align-items:flex-end}
.page-nav .d{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pencil)}
.page-nav .t{color:var(--ink);font-weight:600;font-size:13.5px;font-family:var(--mono)}
.page-nav > span{flex:1}

/* TOC : the reference rail */
nav.toc{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  border-left:1px solid var(--rule-strong);padding:42px 22px}
nav.toc .t-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pencil);margin-bottom:14px}
nav.toc a{display:block;font-family:var(--mono);font-size:12px;color:var(--pencil);padding:5px 0;transition:.14s;
  border-left:2px solid transparent;padding-left:12px;margin-left:-2px}
nav.toc a.lvl3{padding-left:24px;font-size:11.5px}
nav.toc a:hover,nav.toc a.active{color:var(--ink);border-left-color:var(--minium);text-decoration:none}

@media(max-width:1180px){
  .shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}
  nav.toc{display:none}
  main.doc{padding:42px 40px 120px}
}
@media(max-width:900px){ .brand .docs-tag{display:none} }
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  aside.side{position:fixed;top:56px;left:0;width:300px;z-index:55;
    transform:translateX(-102%);transition:transform .2s;box-shadow:0 20px 60px rgba(0,0,0,.4)}
  aside.side.open{transform:none}
  aside.side::after,aside.side::before{display:none}
  .side-toggle{display:inline-flex;align-items:center;justify-content:center}
  main.doc{padding:30px 22px 100px}
}
@media(max-width:620px){
  .topbar-right{gap:12px}
  .topbar-right .tb-x{display:none}
  main.doc th,main.doc td{white-space:nowrap}
}
.side-scrim{position:fixed;inset:56px 0 0;z-index:54;background:rgba(20,35,43,.5);
  opacity:0;pointer-events:none;transition:opacity .2s}
.side-scrim.show{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media print{
  body{background:#fff;background-image:none;color:#000}
  .topbar,aside.side,nav.toc,.page-nav,.doc-foot,.side-toggle,.skip{display:none}
  .shell{display:block;max-width:none}
  main.doc{padding:0;max-width:none}
  main.doc h1,main.doc h2,main.doc h3{color:#000;border-color:#000}
  main.doc h1::after{display:none}
  main.doc p,main.doc li,main.doc strong{color:#000}
  a{color:#000;text-decoration:underline}
  table,.callout,.addr,pre,.table-wrap{box-shadow:none;background:#fff;border-color:#000}
  main.doc h2{break-after:avoid}
  table,figure,.callout{break-inside:avoid}
}

/* PAGE FOOTER — markup lives in docs-src/template.html; shell.js inserts .shell before it */
.doc-foot{border-top:2px solid var(--minium);background:var(--ink);color:var(--on-dark);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.doc-foot-in{max-width:1440px;margin:0 auto;padding:18px 56px;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:10px 26px}
.doc-foot .df-mark{color:var(--paper);letter-spacing:.14em;text-transform:uppercase;font-family:var(--display);font-weight:800}
.doc-foot .df-nav a{color:var(--paper);margin-right:16px}
.doc-foot .df-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.doc-foot .df-fine{color:var(--on-dark)}
@media(max-width:860px){.doc-foot-in{padding:16px 22px}}