/* TRANT docs — shared shell styling. Loaded by every page in docs/.
   Datasheet visual system, matching the homepage: pale graticule ground,
   dark Datum topbar, solid Cyanotype sidebar, Minium for attention. */
:root{
  --paper:#ECEFE9;      /* Graticule  */
  --paper-2:#E4E8DF;    /* panel fill */
  --rule:#D7DCD2;       /* Faint Rule */
  --rule-strong:#C2C9BC;
  --ink:#151A14;        /* Datum      */
  --pencil:#565F53;     /* Pencil     */
  --minium:#B23A2E;     /* live / attention */
  --cyan:#2B5D70;       /* reference / structure / links */
  --cyan-deep:#234E5E;
  --panel:#DCE7E9;      /* cool figure field */
  --on-dark:#C9D5D3;    /* labels on Cyanotype / Datum : >= 4.8:1 */

  --display:"Big Shoulders Stencil Display","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sidebar:280px;--toc:220px;

  /* legacy token aliases — inline styles on page files still reference these */
  --bone:#151A14;--muted:#565F53;--muted-dim:#6B7A77;
  --brass:#2B5D70;--brass-deep:#234E5E;--signal:#234E5E;--danger:#B23A2E;
  --line:#D7DCD2;--line-strong:#C2C9BC;--ink-2:#E4E8DF;--ink-3:#E4E8DF;
  --grid:rgba(21,26,20,.045);--grid-major:rgba(21,26,20,.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.66;
  -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:27px 27px,27px 27px,135px 135px,135px 135px;
  background-position:-1px -1px;}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;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(--paper)}
.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 : dark Datum field */
.topbar{position:sticky;top:0;z-index:60;height:60px;display:flex;align-items:center;
  justify-content:space-between;padding:0 22px;background:var(--ink);
  border-bottom:3px solid var(--minium)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
  font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper)}
.brand .gauge{width:23px;height:23px}
.brand .docs-tag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  color:var(--on-dark);border:1px solid rgba(236,239,233,.38);padding:3px 7px;margin-left:4px}
.topbar-right{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;
  letter-spacing:.02em;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(236,239,233,.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 Cyanotype field, with a ruler-tick edge against the content */
aside.side{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;
  background:var(--cyan);color:var(--paper);padding:24px 20px 60px;
  /* left half bleeds the Cyanotype to the viewport edge when the 1440 grid is
     centred; right edge of the bleed is clamped to the sidebar, never the content */
  box-shadow:-100vw 0 0 100vw var(--cyan), inset -1px 0 0 rgba(21,26,20,.28)}
aside.side::after,aside.side::before{content:"";position:absolute;top:0;bottom:0;right:0;
  pointer-events:none}
aside.side::after{width:6px;background:repeating-linear-gradient(to bottom,
  rgba(236,239,233,.20) 0 1px,transparent 1px 11px)}
aside.side::before{width:13px;background:repeating-linear-gradient(to bottom,
  rgba(236,239,233,.34) 0 1.5px,transparent 1.5px 110px)}
.search{width:100%;background:rgba(11,17,15,.22);border:1px solid rgba(236,239,233,.32);
  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(236,239,233,.08);text-decoration:none}
.nav-group a.active{color:var(--paper);border-left-color:var(--minium);background:rgba(236,239,233,.10);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(236,239,233,.08)}
.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 .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:84px;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:84px;color:var(--ink)}
main.doc p{color:var(--ink);margin:0 0 16px;max-width:70ch}
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(--pencil)}
main.doc strong{color:var(--ink);font-weight:700}
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:5px solid var(--cyan);
  background:var(--paper);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(--minium);border-left-color:var(--minium)}
.callout.danger .c-label{color:var(--minium)}

table{width:100%;border-collapse:collapse;margin:20px 0;font-family:var(--mono);font-size:13px;
  background:var(--paper);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);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(--minium);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(--paper)}
.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(--minium)}
.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:60px;height:calc(100vh - 60px);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(--cyan);border-left-color:var(--cyan);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:60px;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}
  /* stop cells wrapping so a wide table is a clean single-axis scroll inside .table-wrap */
  main.doc th,main.doc td{white-space:nowrap}
}
.side-scrim{position:fixed;inset:60px 0 0;z-index:54;background:rgba(11,17,15,.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 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:3px 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}
.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}}