/* ==========================================================================
   rbterm — BLUEPRINT DESIGN SYSTEM  v1.0
   Shared stylesheet for every page of rbterm.com.  Linked as:
     <link rel="stylesheet" href="/blueprint.css">

   Aesthetic: an engineering drawing sheet. Drafting-blue ground, hairline
   linework, a title block, numbered callouts, annotation orange for anything
   dimensioned or measured.

   Fonts are loaded by the page shell with ONE Google Fonts <link>
   (Archivo 400/500/600/700 + Space Mono 400/700). Never @import here — an
   @import inside the stylesheet serialises the font fetch behind the CSS.

   CONTRAST (verified, WCAG 2.1 relative luminance, against ground #0c2340):
     --ink    #e8f1fb  13.84:1   body / headings
     --dim    #9fbcd8   8.01:1   secondary body text  <- PASSES, unchanged
     --cyan   #8fd3f4   9.62:1   links, linework
     --accent #ff9f45   7.74:1   annotation / dimensions
     --ok     #6ee7a8  10.27:1
     --warn   #ffd75f  11.38:1
     --bad    #ff6b6b   5.69:1
     --line   #2f5c8a   2.27:1   DECORATIVE HAIRLINES ONLY. Never use --line
                                 as the only boundary of an interactive
                                 control; those use --cyan or --accent.
   On the panel fill the same colours sit within 0.4 of these figures
   (dim/panel = 7.32:1), so every combination clears 4.5:1 everywhere.

   TABLE OF CONTENTS
     01  tokens
     02  reset + base typography
     03  layout utilities  (.wrap .scrollx .grid* helpers)
     04  site header + nav + title block
     05  site footer
     06  hero + section scaffolding
     07  buttons
     08  pills / badges
     09  panels, cards, disclosure cards
     10  parts list (definition rows) + spec grid + stat row
     11  data table (bill of materials) + comparison matrix
     12  code / terminal blocks + inline code + kbd
     13  drawing-view figure frame, callouts, media, gif grid
     14  measurement bar chart
     15  release entries (changelog)
     16  step list (counters)
     17  notes / callout boxes
     18  embeds (PDF iframe) + demo canvas frame
     19  prose (long-form pages)
     20  motion
     21  responsive  (900px, 640px)
     22  print
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root{
  /* --- ground + surfaces ------------------------------------------------ */
  --ground:#0c2340;              /* page ground — drafting blue            */
  --panel:#0e2a4d;               /* solid panel                            */
  --panel-fill:rgba(14,42,77,.62);   /* panel over the grid, grid shows    */
  --panel-fill-strong:rgba(14,42,77,.86);
  --code-fill:rgba(12,35,64,.9);
  --zebra:rgba(143,211,244,.035);    /* table odd rows                     */
  --hover-fill:rgba(143,211,244,.07);

  /* --- linework --------------------------------------------------------- */
  --line:#2f5c8a;                /* hairline / grid — DECORATIVE ONLY      */
  --line-soft:rgba(47,92,138,.55);

  /* --- ink -------------------------------------------------------------- */
  --ink:#e8f1fb;                 /* primary text                           */
  --dim:#9fbcd8;                 /* secondary text — 8.01:1, verified      */
  --accent:#ff9f45;              /* annotation orange: dimensions, CTAs    */
  --cyan:#8fd3f4;                /* pale cyan: links, frames, leaders      */

  /* --- semantic status (distinct hues from --accent) -------------------- */
  --ok:#6ee7a8;                  /* yes / signed / done / pass             */
  --warn:#ffd75f;                /* partial / unsigned / attention         */
  --bad:#ff6b6b;                 /* no / failed                            */
  --ok-fill:rgba(110,231,168,.12);
  --warn-fill:rgba(255,215,95,.12);
  --bad-fill:rgba(255,107,107,.12);
  --accent-fill:rgba(255,159,69,.12);
  --cyan-fill:rgba(143,211,244,.12);

  /* --- type ------------------------------------------------------------- */
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-micro:9.5px;              /* title-block field labels               */
  --fs-label:10.5px;             /* table heads, eyebrows                  */
  --fs-xs:11.5px;                /* spec strip, foot links                 */
  --fs-sm:12.5px;                /* mono labels, part codes                */
  --fs-code:13px;
  --fs-md:14.5px;                /* list items, notes                      */
  --fs-body:17px;
  --fs-lg:19px;                  /* lede on hero                           */
  --fs-h3:21px;
  --fs-h2:clamp(23px,3vw,32px);
  --fs-h1:clamp(30px,5.4vw,60px);
  --fs-display:clamp(34px,6vw,64px);   /* stat numerals                    */

  --lh-tight:1.12;
  --lh-snug:1.4;
  --lh-body:1.62;
  --lh-code:1.75;

  --ls-wide:.14em;               /* mono nav / button lettering            */
  --ls-wider:.2em;               /* eyebrows, table heads                  */

  /* --- space (4px base) ------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:22px;
  --sp-6:32px; --sp-7:46px; --sp-8:64px; --sp-9:88px;

  /* --- geometry --------------------------------------------------------- */
  --maxw:1240px;                 /* sheet width                            */
  --maxw-text:74ch;              /* long-form measure                      */
  --gutter:26px;
  --bw-hair:1px;                 /* hairline                               */
  --bw-frame:2px;                /* corner ticks, emphasis                 */
  --tick:14px;                   /* corner-tick arm length                 */
  --tick-out:5px;                /* how far ticks sit outside the frame     */
  --r-0:0;                       /* blueprint is square. Radii exist only  */
  --r-1:1px;                     /* to soften focus rings + pills.         */
  --r-2:2px;
  --table-min:640px;             /* per-page override on .scrollx          */

  /* --- z-index ---------------------------------------------------------- */
  --z-base:0;
  --z-raised:10;
  --z-sticky:100;
  --z-header:120;
  --z-overlay:200;

  /* --- motion (only applied under prefers-reduced-motion:no-preference) -- */
  --dur-fast:120ms;
  --dur:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}


/* ==========================================================================
   02  RESET + BASE TYPOGRAPHY
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,pre{margin:0}
ul[class],ol[class]{list-style:none;padding:0}

body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background-color:var(--ground);
  /* --- drafting grid: 80px majors over 8px minors, both very faint ------ */
  background-image:
    repeating-linear-gradient(0deg, rgba(143,211,244,.055) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg,rgba(143,211,244,.055) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(143,211,244,.019) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg,rgba(143,211,244,.019) 0 1px, transparent 1px 8px);
  background-attachment:fixed;
  /* NO overflow-x:hidden here. On <body> it propagates to the viewport, which
     silently CLIPS anything wider than the screen instead of letting it
     scroll — the comparison matrix would lose columns on a phone with no way
     to reach them. Wide content is contained at the source, in .scrollx. */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;line-height:var(--lh-tight)}
h1{font-size:var(--fs-h1);letter-spacing:-.028em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-md)}
h2[id],h3[id],section[id]{scroll-margin-top:var(--sp-6)}

a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--ink)}

img,svg,video,canvas{max-width:100%}
img,video{height:auto;display:block}

strong,b{font-weight:600;color:var(--ink)}
em{font-style:italic}
hr{border:0;border-top:var(--bw-hair) solid var(--line);margin:var(--sp-6) 0}

::selection{background:var(--accent);color:var(--ground)}

/* Focus: one visible ring everywhere, never removed. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1)}
:focus:not(:focus-visible){outline:none}

/* Skip link — first element in <body> on every page. */
.skip{
  position:absolute;left:var(--sp-3);top:-64px;z-index:var(--z-overlay);
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:var(--ls-wide);
  text-transform:uppercase;text-decoration:none;
  background:var(--accent);color:var(--ground);padding:var(--sp-2) var(--sp-4);
}
.skip:focus{top:var(--sp-3)}

/* Screen-reader-only text (matrix cell meanings, icon labels). */
.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ==========================================================================
   03  LAYOUT UTILITIES                                    [every page]
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:920px}

/* Text helpers */
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.dimtext{color:var(--dim)}
.hi{color:var(--accent)}
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--dim);
}
.measure-text{max-width:var(--maxw-text)}

/* --- .scrollx -------------------------------------------------------------
   THE horizontal-overflow rule for the whole site. ANY content wider than
   its column (tables, <pre>, wide SVG diagrams, the exploded view) must be
   wrapped in <div class="scrollx"> … </div>.  The page body must never
   scroll sideways at 390px.

   min-width:0 is load-bearing: a grid/flex CHILD defaults to min-width:auto
   and refuses to shrink below its content, which pushes the page wide even
   though the inner element scrolls.  If .scrollx sits inside .grid-2/.grid-3
   or any flex row, that parent item needs min-width:0 too — .panel, .grid >
   *, and .card already set it.
   ------------------------------------------------------------------------ */
.scrollx{
  overflow-x:auto;
  /* Containing block for absolutely-positioned descendants. Without this, a
     .vh screen-reader span inside a 1400px-wide matrix cell escapes the clip
     (a static ancestor doesn't contain it), lands at its table x-coordinate
     against the initial containing block, and drags the DOCUMENT ~860px wide
     even though the table itself scrolls correctly. */
  position:relative;
  min-width:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-color:var(--line) transparent;
}
.scrollx.framed{border:var(--bw-hair) solid var(--line-soft);background:var(--panel-fill)}
.scrollx::-webkit-scrollbar{height:10px}
.scrollx::-webkit-scrollbar-thumb{background:var(--line)}
.scrollx::-webkit-scrollbar-track{background:transparent}

/* Grids. Children always get min-width:0 so .scrollx works inside them. */
.grid-2,.grid-3,.grid-4,.grid-auto{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-2>*,.grid-3>*,.grid-4>*,.grid-auto>*{min-width:0}

/* Asymmetric split used by the flagship module (text | code). */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.split>*{min-width:0}


/* ==========================================================================
   04  SITE HEADER + NAV + TITLE BLOCK                     [every page]
   --------------------------------------------------------------------------
   Header is NOT sticky: on a drawing sheet the title block belongs to the
   sheet, not to the viewport. Nav is plain links + one primary button.
   Current page is marked with aria-current="page" (styling also accepts
   .is-current) — bold weight AND an orange rule, so it is never colour-only.
   ========================================================================== */
.site-head{padding-top:var(--sp-7);border-bottom:var(--bw-hair) solid var(--line-soft)}
.head-in{
  display:flex;gap:var(--sp-6);align-items:flex-start;justify-content:space-between;
  padding-bottom:var(--sp-5);flex-wrap:wrap;
}
.head-nav{min-width:0}

.brand{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3);text-decoration:none}
.brand b{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--ink)}
.brand span{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.16em;
  color:var(--dim);text-transform:uppercase;
}
.brand:hover b{color:var(--accent)}

.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5)}
.nav a:not(.btn){
  font-family:var(--mono);font-size:12px;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--dim);text-decoration:none;
  padding:var(--sp-1) 0;border-bottom:var(--bw-frame) solid transparent;
}
.nav a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav a:not(.btn)[aria-current="page"],
.nav a:not(.btn).is-current{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}

/* --- title block ----------------------------------------------------------
   The drawing-sheet identity box. Sits top-right of the header on every
   page; each page fills SHEET with its own number (see _SHELL.md).
   -------------------------------------------------------------------------- */
.titleblock{border:var(--bw-hair) solid var(--line);background:var(--panel-fill-strong);min-width:322px}
.tb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tb-row+.tb-row{border-top:var(--bw-hair) solid var(--line)}
.tb-cell{padding:7px var(--sp-3);font-family:var(--mono);font-size:12px;line-height:1.3;min-width:0}
.tb-cell+.tb-cell{border-left:var(--bw-hair) solid var(--line)}
.tb-cell i{
  display:block;font-style:normal;font-size:var(--fs-micro);letter-spacing:.18em;
  color:var(--dim);text-transform:uppercase;margin-bottom:2px;
}
.tb-cell b{font-weight:700;letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere}
.tb-cell b.hi{color:var(--accent)}


/* ==========================================================================
   05  SITE FOOTER                                         [every page]
   ========================================================================== */
.site-foot{border-top:var(--bw-hair) solid var(--line);padding:var(--sp-7) 0 var(--sp-8);margin-top:var(--sp-6)}
.foot-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-6);padding-bottom:var(--sp-6);
  border-bottom:var(--bw-hair) solid var(--line-soft);
}
.foot-col h2{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--accent);font-weight:400;margin-bottom:var(--sp-3);
}
.foot-col ul{list-style:none;padding:0;display:grid;gap:var(--sp-2)}
.foot-col a{
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.08em;
  color:var(--dim);text-decoration:none;border-bottom:var(--bw-hair) solid transparent;
}
.foot-col a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.foot-meta{
  margin-top:var(--sp-5);font-family:var(--mono);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.foot-meta a{color:var(--dim);text-decoration:none;border-bottom:var(--bw-hair) solid var(--line)}
.foot-meta a:hover{color:var(--ink);border-bottom-color:var(--accent)}


/* ==========================================================================
   06  HERO + SECTION SCAFFOLDING                          [every page]
   ========================================================================== */
main{display:block}
section{padding:var(--sp-9) 0}
section+section{padding-top:0}          /* sechead supplies the top rhythm */

.hero{padding:var(--sp-8) 0 var(--sp-2)}
.hero h1{max-width:19ch}
.hero.compact{padding:var(--sp-7) 0 0}
.hero.compact h1{max-width:24ch}
.pitch{margin-top:var(--sp-5);max-width:60ch;color:var(--dim);font-size:clamp(16px,2vw,19px)}
.pitch b{color:var(--ink);font-weight:600}

.ctas{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.ctas .btn{padding:13px 22px;font-size:13px}

/* Spec strip — the four-fact line under a hero. */
.specstrip{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-5);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--dim);
}
.specstrip span::before{content:"\25C7\00a0";color:var(--cyan)}

/* Section header: SEC NN eyebrow + rule that runs to the sheet edge. */
.sechead{display:flex;align-items:baseline;gap:18px;margin-bottom:var(--sp-6)}
.sechead .no{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  color:var(--accent);white-space:nowrap;
}
.sechead h2{min-width:0}
.sechead .fill{flex:1 1 auto;min-width:0;height:1px;background:var(--line);align-self:center}

.lede{color:var(--dim);max-width:66ch;margin-top:calc(var(--sp-4) * -1);margin-bottom:var(--sp-6)}
.caption{margin-top:var(--sp-5);color:var(--dim);max-width:var(--maxw-text)}
.caption b{color:var(--ink);font-weight:600}


/* ==========================================================================
   07  BUTTONS                                             [every page]
   ========================================================================== */
.btn{
  display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:var(--ls-wide);text-transform:uppercase;text-decoration:none;
  padding:9px 16px;border:var(--bw-hair) solid var(--accent);
  background:var(--accent);color:var(--ground);font-weight:700;
  cursor:pointer;text-align:center;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn:active{background:var(--accent);border-color:var(--accent)}

.btn-ghost{background:transparent;color:var(--cyan);border-color:var(--cyan);font-weight:400}
.btn-ghost:hover{background:var(--cyan);color:var(--ground);border-color:var(--cyan)}

.btn-sm{padding:7px 12px;font-size:11px}
.btn-block{display:block;width:100%}


/* ==========================================================================
   08  PILLS / BADGES                        [download, changelog, features]
   Signed / Unsigned / Latest / New / status. Every pill carries a WORD, so
   meaning never rides on colour alone.
   ========================================================================== */
.pill{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  padding:3px 9px;border:var(--bw-hair) solid var(--line);border-radius:var(--r-2);
  color:var(--dim);background:transparent;white-space:nowrap;
}
.pill-ok{color:var(--ok);border-color:var(--ok);background:var(--ok-fill)}
.pill-warn{color:var(--warn);border-color:var(--warn);background:var(--warn-fill)}
.pill-bad{color:var(--bad);border-color:var(--bad);background:var(--bad-fill)}
.pill-accent{color:var(--accent);border-color:var(--accent);background:var(--accent-fill)}
.pill-cyan{color:var(--cyan);border-color:var(--cyan);background:var(--cyan-fill)}
.pill-solid{background:var(--accent);border-color:var(--accent);color:var(--ground);font-weight:700}


/* ==========================================================================
   09  PANELS, CARDS, DISCLOSURE CARDS
   .panel  — module panel with a part code (RB-01 …)   [index, claude, api]
   .card   — plain grid card                           [why, testing, api,
                                                        herdr, demo]
   details.card — expandable feature card              [features]
   ========================================================================== */
.panel{
  border:var(--bw-hair) solid var(--line);background:var(--panel-fill);
  padding:var(--sp-5);position:relative;min-width:0;
}
/* Two corner ticks (TL + BR) mark it as a drawn part. */
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none}
.panel::before{left:-1px;top:-1px;border-left:var(--bw-frame) solid var(--cyan);border-top:var(--bw-frame) solid var(--cyan)}
.panel::after{right:-1px;bottom:-1px;border-right:var(--bw-frame) solid var(--cyan);border-bottom:var(--bw-frame) solid var(--cyan)}
.panel h3{font-size:var(--fs-h3);margin:var(--sp-2) 0 var(--sp-3)}
.panel p{color:var(--dim);font-size:15.5px}
.panel p+p{margin-top:var(--sp-3)}

/* Part code — RB-01 · Agents */
.pcode{
  display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:var(--ls-wider);color:var(--accent);text-transform:uppercase;
}

/* Parts bullet list inside a panel: hairline rules + a leader dash. */
.plist{list-style:none;margin:var(--sp-4) 0 0;padding:0}
.plist li{
  position:relative;padding:7px 0 7px 22px;
  border-top:var(--bw-hair) solid var(--line-soft);
  font-size:var(--fs-md);color:var(--dim);
}
.plist li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:1px;background:var(--cyan)}
.plist b{color:var(--ink);font-weight:600}

/* Plain card */
.card{
  border:var(--bw-hair) solid var(--line-soft);background:var(--panel-fill);
  padding:var(--sp-4) var(--sp-5);min-width:0;
}
.card h3{font-size:16px;margin-bottom:var(--sp-2)}
.card h3 .pcode{display:block;margin-bottom:var(--sp-1)}
.card p{color:var(--dim);font-size:var(--fs-md)}
.card p+p{margin-top:var(--sp-2)}
.card>:last-child{margin-bottom:0}

/* Disclosure card — features.html renders ~100 of these. */
details.card{padding:0}
details.card>summary{
  list-style:none;cursor:pointer;padding:var(--sp-4) var(--sp-5);
  display:block;position:relative;padding-right:var(--sp-8);
}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{
  content:"+";position:absolute;right:var(--sp-5);top:var(--sp-4);
  font-family:var(--mono);font-size:18px;color:var(--accent);line-height:1;
}
details.card[open]>summary::after{content:"\2013"}   /* en dash */
details.card>summary:hover{background:var(--hover-fill)}
details.card>summary h3{margin:0 0 var(--sp-1)}
details.card .summary-text{color:var(--dim);font-size:var(--fs-md)}
details.card .detail{
  padding:var(--sp-5);border-top:var(--bw-hair) solid var(--line-soft);
  display:grid;gap:var(--sp-5);
}


/* ==========================================================================
   10  PARTS LIST (definition rows) · SPEC GRID · STAT ROW
   .parts — <dl> spec rows                    [api, download, manual, herdr]
   .specs — small labelled facts grid         [index, api, testing]
   .stats — big measured numerals             [testing, index]
   ========================================================================== */
.parts{border-top:var(--bw-hair) solid var(--line);margin:0}
.parts div{                       /* wrap each dt/dd pair in a <div> */
  display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:var(--sp-4);padding:var(--sp-3) 0;
  border-bottom:var(--bw-hair) solid var(--line-soft);align-items:baseline;
}
.parts dt{
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.parts dd{margin:0;color:var(--ink);font-size:15.5px;min-width:0;overflow-wrap:anywhere}

.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--bw-hair);background:var(--line-soft);border:var(--bw-hair) solid var(--line)}
/* gap:1px over a --line-soft background is what draws the internal hairlines,
   so .spec must be OPAQUE or the rule colour tints every cell. */
.spec{background:var(--panel);padding:var(--sp-4);min-width:0}
.spec .label{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--sp-1);
}
.spec .value{font-family:var(--mono);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-5)}
.stat{border-left:var(--bw-frame) solid var(--accent);padding-left:var(--sp-4);min-width:0}
.stat .num{
  font-family:var(--mono);font-weight:700;font-size:var(--fs-display);
  line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
}
.stat .label{
  margin-top:var(--sp-2);font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--dim);
}
.stat .sub{margin-top:var(--sp-1);color:var(--dim);font-size:var(--fs-md)}


/* ==========================================================================
   11  DATA TABLE (bill of materials) + COMPARISON MATRIX
   .bom    — parts list / spec table            [index, download, api, manual]
   .matrix — feature comparison, 6 columns      [why (27 rows), features]
   Always wrap in <div class="scrollx"> and set --table-min if wider.
   ========================================================================== */
table{border-collapse:collapse;width:100%}
.scrollx>table,.scrollx>.bom,.scrollx>.matrix{min-width:var(--table-min)}
caption{
  caption-side:top;text-align:left;padding:var(--sp-3) var(--sp-4);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wider);
  color:var(--dim);text-transform:uppercase;
}
th,td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw-hair) solid var(--line-soft);vertical-align:baseline}
thead th{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--dim);font-weight:400;
  border-bottom:var(--bw-hair) solid var(--line);padding-top:10px;padding-bottom:10px;
}
tbody tr:nth-child(odd){background:var(--zebra)}
tbody tr:hover{background:var(--hover-fill)}

/* Bill-of-materials column roles */
td.part,th.part{
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;width:22%;
}
td.num,td.spec{
  font-family:var(--mono);font-weight:700;font-size:15px;text-align:right;
  white-space:nowrap;color:var(--accent);font-variant-numeric:tabular-nums;width:17%;
}
th.num,th.spec{text-align:right}
td.note{color:var(--dim);font-size:15px}

/* --- comparison matrix ----------------------------------------------------
   yes / partial / no cells. The glyph is real text and is announced by
   screen readers, so the colour is redundant reinforcement, never the
   message. Add a <span class="vh"> when the cell text alone is ambiguous.
   -------------------------------------------------------------------------- */
.matrix{--table-min:900px}
.matrix td:first-child,.matrix th:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.matrix td{font-size:var(--fs-md);color:var(--dim)}
.c-yes,.c-part,.c-no{font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap}
.c-yes{color:var(--ok)}
.c-part{color:var(--warn)}
.c-no{color:var(--dim)}
.c-yes::before{content:"\2713\00a0\00a0"}    /* ✓ */
.c-part::before{content:"\007E\00a0\00a0"}   /* ~ */
.c-no::before{content:"\2014\00a0\00a0"}     /* — */


/* ==========================================================================
   12  CODE / TERMINAL BLOCKS + INLINE CODE + KBD
   [index, api, download, claude, testing, changelog, herdr, manual]
   ========================================================================== */
pre{
  margin:0;font-family:var(--mono);font-size:var(--fs-code);line-height:var(--lh-code);
  color:var(--cyan);white-space:pre;overflow-x:auto;min-width:0;
}
.codeblock{
  position:relative;border:var(--bw-hair) solid var(--line);
  background:var(--code-fill);padding:var(--sp-4) 18px;min-width:0;
}
.codeblock .cmt{color:var(--dim)}                 /* # comment lines        */
.codeblock .out{color:var(--dim)}                 /* echoed program output  */
.codeblock .ok{color:var(--ok)}
.codeblock .bad{color:var(--bad)}
.codeblock+.codeblock{margin-top:var(--sp-3)}

/* Terminal block = codeblock with a labelled header bar. */
.termblock{border:var(--bw-hair) solid var(--line);background:var(--code-fill);min-width:0}
.term-title{
  display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;
  padding:var(--sp-2) var(--sp-4);border-bottom:var(--bw-hair) solid var(--line);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--dim);
}
.termblock pre{padding:var(--sp-4) 18px}

/* Optional copy button (needs ~6 lines of inline JS; styling lives here). */
.copy{
  position:absolute;top:var(--sp-2);right:var(--sp-2);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--dim);background:var(--panel);
  border:var(--bw-hair) solid var(--line);padding:3px 8px;cursor:pointer;
}
.copy:hover{color:var(--ground);background:var(--cyan);border-color:var(--cyan)}
.copy[data-copied]{color:var(--ground);background:var(--ok);border-color:var(--ok)}

/* Inline code */
code{font-family:var(--mono);font-size:.92em;color:var(--cyan);overflow-wrap:anywhere}
pre code{color:inherit;font-size:inherit}
a code{color:inherit}

kbd{
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);
  background:var(--panel);border:var(--bw-hair) solid var(--line);
  border-bottom-width:var(--bw-frame);padding:1px 7px;border-radius:var(--r-2);
  white-space:nowrap;
}
/* Keybinding list: kbd | description                       [features, manual] */
.keys{list-style:none;margin:0;padding:0}
.keys li{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:var(--sp-4);
  align-items:baseline;padding:7px 0;border-bottom:var(--bw-hair) solid var(--line-soft);
}
.keys .desc{color:var(--dim);font-size:var(--fs-md)}


/* ==========================================================================
   13  DRAWING-VIEW FIGURE FRAME · CALLOUTS · MEDIA · GIF GRID
   .figframe  — 4 corner ticks + hairline border   [index, claude, testing,
                                                    features, herdr]
   .calloutfig/.cmark/.calloutlist — numbered leaders over a screenshot
   .gifgrid   — 320x200 cinema previews            [index, features]
   ========================================================================== */
.figframe{
  position:relative;border:var(--bw-hair) solid var(--cyan);
  padding:6px;background:var(--panel-fill);min-width:0;margin:0;
}
/* Four L-shaped corner ticks drawn as one background layer — no extra markup.
   The ticks sit OUTSIDE the frame edge (drawing convention), so the frame
   reserves that space as margin; without it the pseudo-element's painted box
   pushes the document ~5px wider than the viewport on narrow screens. */
.figframe{margin:var(--tick-out)}
.figframe::before{
  content:"";position:absolute;inset:calc(-1 * var(--tick-out));pointer-events:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0/var(--tick) var(--bw-frame) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 0/var(--bw-frame) var(--tick) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/var(--tick) var(--bw-frame) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/var(--bw-frame) var(--tick) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/var(--tick) var(--bw-frame) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/var(--bw-frame) var(--tick) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/var(--tick) var(--bw-frame) no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/var(--bw-frame) var(--tick) no-repeat;
}
.figframe>img,.figframe>a>img,.figframe>svg,.figframe>video{display:block;width:100%;height:auto}

figcaption{
  margin-top:var(--sp-3);font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  color:var(--dim);text-transform:uppercase;
}
figcaption b{color:var(--cyan);font-weight:400}
.figframe>figcaption{margin:var(--sp-2) 2px 2px}

/* Dashed "detail" frame for a cropped enlargement (DETAIL A / DETAIL B). */
.detailfig{border:var(--bw-hair) dashed var(--line);padding:var(--sp-3);min-width:0;margin:0}
.detailfig img{width:100%;height:auto}

/* --- numbered callouts ----------------------------------------------------
   Put .cmark absolutely over a screenshot with --x/--y percentages, and
   repeat the same numbers in .calloutlist below so the information is not
   trapped in a position-only overlay (and survives at 390px).
   -------------------------------------------------------------------------- */
.calloutfig{position:relative;margin:0;min-width:0}
.calloutfig>img{width:100%;height:auto}
.cmark{
  position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--ground);
  border:var(--bw-frame) solid var(--ground);
  font-family:var(--mono);font-weight:700;font-size:14px;line-height:26px;
  text-align:center;z-index:var(--z-raised);
}
.calloutlist{list-style:none;margin:var(--sp-5) 0 0;padding:0;counter-reset:callout}
.calloutlist li{
  display:flex;gap:var(--sp-3);align-items:flex-start;counter-increment:callout;
  padding:9px 0;border-top:var(--bw-hair) solid var(--line-soft);
  font-size:var(--fs-md);color:var(--dim);
}
.calloutlist li::before{
  content:counter(callout);flex:0 0 auto;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-code);color:var(--accent);
  min-width:1.6em;
}

/* Cinema GIF grid — every gif is exactly 320x200. */
.gifgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}
.gifitem{margin:0;border:var(--bw-hair) solid var(--line-soft);background:var(--panel-fill);min-width:0}
.gifitem img{width:100%;height:auto;aspect-ratio:320/200;background:#000;display:block}
.gifitem figcaption{
  margin:0;padding:var(--sp-2) var(--sp-3);text-align:center;
  font-size:var(--fs-xs);letter-spacing:.08em;
}

/* Flow strip — the loop written out as text for narrow screens / SR users. */
.flow{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:var(--sp-5) 0 0;padding:0;
  font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.06em;
}
.flow li{white-space:nowrap}
.flow li::after{content:"\00a0\2192";color:var(--cyan)}
.flow li:last-child::after{content:""}

/* SVG helper classes for hand-drawn views (exploded diagram, dimensions). */
.svg-lab{font-family:var(--mono);font-size:30px;letter-spacing:2px;fill:var(--ink)}
.svg-lab.d{fill:var(--dim);font-size:26px}
.svg-num{font-family:var(--mono);font-weight:700;font-size:38px;fill:var(--ground)}
.svg-dim{font-family:var(--mono);font-weight:700;font-size:46px;fill:var(--accent);letter-spacing:1px}
.svg-cap{font-family:var(--mono);font-size:24px;letter-spacing:3px;fill:var(--dim)}
.svg-box{fill:var(--panel-fill-strong);stroke:var(--cyan);stroke-width:2}
.svg-t{font-family:var(--mono);font-size:24px;fill:var(--ink)}
.svg-s{font-family:var(--mono);font-size:19px;fill:var(--dim)}
.svg-c{font-family:var(--mono);font-size:17px;fill:var(--accent);letter-spacing:2px}
.lead{fill:none;stroke:var(--cyan);stroke-width:3}
.dimline{stroke:var(--accent);stroke-width:4;fill:none}
.extline{stroke:var(--dim);stroke-width:2;fill:none;opacity:.75}
.frame{fill:none;stroke:var(--cyan);stroke-width:4}
.arrow{stroke:var(--accent);stroke-width:3;fill:none}
.dashline{stroke:var(--line);stroke-width:2;stroke-dasharray:10 12;fill:none}


/* ==========================================================================
   14  MEASUREMENT BAR CHART                        [index, why, testing]
   Horizontal bars on a ruled scale with tick marks and value labels.
   Markup:
     <div class="measure">
       <div class="mrow is-subject">
         <span class="mname">rbterm</span>
         <div class="rule"><i class="mk" style="--p:7.3%"></i></div>
         <span class="mval tnum">0.018</span>
       </div>
       … <div class="maxis" aria-hidden="true"> … </div>
     </div>
   --major / --minor set the ruling; defaults are the log-decade ruling used
   on the latency chart (4 decades = 28.5714% majors).
   ========================================================================== */
.measure{border-top:var(--bw-hair) solid var(--line);margin-top:var(--sp-2)}
.mrow{
  display:grid;grid-template-columns:150px minmax(0,1fr) 92px;gap:var(--sp-4);
  align-items:center;padding:15px 0;border-bottom:var(--bw-hair) solid var(--line-soft);
}
.mname{font-family:var(--mono);font-size:var(--fs-code);letter-spacing:.08em;color:var(--dim)}
.mrow.is-subject .mname{color:var(--ink);font-weight:700}

.rule{
  --major:28.5714%;--minor:2.85714%;
  position:relative;height:26px;
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px var(--major)),
    repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px var(--minor));
  background-size:100% 17px,100% 8px;
  background-position:left bottom,left bottom;
  background-repeat:no-repeat,no-repeat;
  border-bottom:var(--bw-hair) solid var(--line);
}
.mk{position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:var(--cyan);opacity:.85}
.mk::after{content:"";position:absolute;right:0;bottom:0;width:2px;height:21px;background:var(--cyan)}
.mrow.is-subject .mk{height:5px;background:var(--accent);opacity:1}
.mrow.is-subject .mk::after{background:var(--accent);width:3px;height:26px}

.mval{
  font-family:var(--mono);font-weight:700;font-size:14px;text-align:right;
  color:var(--dim);font-variant-numeric:tabular-nums;
}
.mrow.is-subject .mval{color:var(--accent)}

.maxis{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;gap:var(--sp-4);padding-top:10px}
.axisline{position:relative;height:18px}
.axisline span{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;
}
.axisline span:first-child{transform:none}
.method{margin-top:var(--sp-5);color:var(--dim);font-size:var(--fs-md);max-width:78ch}
.method strong{color:var(--ink);font-weight:600}


/* ==========================================================================
   15  RELEASE ENTRIES                                        [changelog]
   One .rel per version — 35 of them. Reads as a revision block on the sheet.
   ========================================================================== */
.rel{
  border:var(--bw-hair) solid var(--line);background:var(--panel-fill);
  border-left:3px solid var(--line);
  padding:var(--sp-5);margin-bottom:var(--sp-4);min-width:0;
}
.rel.is-latest{border-left-color:var(--accent)}
.rel-head{
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);
  border-bottom:var(--bw-hair) solid var(--line-soft);
}
.rel-head h2{font-family:var(--mono);font-size:var(--fs-h3);letter-spacing:.02em;margin:0}
.rel-head h2 span{color:var(--accent)}
.rel-date{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--dim);margin-left:auto;
}
.kicker{
  font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:var(--sp-3);
}
ul.changes{list-style:none;margin:0;padding:0}
ul.changes li{
  position:relative;padding:0 0 0 22px;margin-bottom:var(--sp-3);
  font-size:15.5px;color:var(--dim);
}
ul.changes li::before{content:"\203A";position:absolute;left:6px;color:var(--accent);font-family:var(--mono)}
ul.changes li b{color:var(--ink);font-weight:600}
ul.changes li:last-child{margin-bottom:0}


/* ==========================================================================
   16  STEP LIST (CSS counters)                       [claude, api, download]
   Numbered setup instructions — 01, 02, 03 in the drawing hand.
   ========================================================================== */
.steps{counter-reset:step;display:grid;gap:var(--sp-5);margin:0;padding:0;list-style:none}
.step{
  counter-increment:step;position:relative;
  padding:0 0 0 var(--sp-8);min-width:0;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-weight:700;font-size:var(--fs-h3);
  color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums;
}
.step::after{
  content:"";position:absolute;left:13px;top:calc(var(--fs-h3) + 8px);bottom:calc(var(--sp-5) * -1);
  width:1px;background:var(--line-soft);
}
.step:last-child::after{display:none}
.step h3{font-size:17px;margin-bottom:var(--sp-2)}
.step p{color:var(--dim);font-size:15.5px}
.step>*+*{margin-top:var(--sp-3)}


/* ==========================================================================
   17  NOTES / CALLOUT BOXES                                  [every page]
   The label is real text ("NOTE" / "WARNING"), so the colour is redundant.
   ========================================================================== */
.note{
  border:var(--bw-hair) solid var(--line);border-left:3px solid var(--cyan);
  background:var(--panel-fill);padding:var(--sp-4) var(--sp-5);
  color:var(--dim);font-size:var(--fs-md);min-width:0;
}
.note::before{
  content:"NOTE";display:block;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--ls-wider);
  color:var(--cyan);margin-bottom:var(--sp-2);
}
.note-warn{border-left-color:var(--warn)}
.note-warn::before{content:"WARNING";color:var(--warn)}
.note strong{color:var(--ink)}
.note>*+*{margin-top:var(--sp-2)}


/* ==========================================================================
   18  EMBEDS — PDF VIEWER + DEMO CANVAS                    [manual, demo]
   ========================================================================== */
.embed{
  border:var(--bw-hair) solid var(--cyan);background:var(--panel);
  padding:6px;min-width:0;height:85vh;min-height:640px;
}
.embed>object,.embed>iframe{width:100%;height:100%;border:0;background:#1f1f1f;display:block}
.embed-fallback{padding:var(--sp-6);text-align:center;color:var(--dim);font-size:var(--fs-md)}

/* WASM demo canvas: fixed 960x560 intrinsic, scales down, never overflows. */
.demoframe{
  position:relative;border:var(--bw-hair) solid var(--cyan);padding:6px;
  background:var(--panel);width:min(100%,972px);margin:0 auto;min-width:0;
}
.demoframe canvas{display:block;width:100%;max-width:960px;height:auto;aspect-ratio:960/560;background:#0b0d12}
.demoframe .loader{
  position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;
  background:var(--code-fill);color:var(--dim);
  font-family:var(--mono);font-size:var(--fs-md);letter-spacing:.08em;pointer-events:none;
}
.demoframe .loader.gone{opacity:0}


/* ==========================================================================
   19  PROSE                                    [why, changelog, api, herdr]
   Wrap long-form editorial copy in <div class="prose">. Everything inside
   gets the site's rhythm without per-page CSS.
   ========================================================================== */
.prose{max-width:var(--maxw-text);color:var(--dim)}
.prose>*+*{margin-top:var(--sp-4)}
.prose h3{color:var(--ink);margin-top:var(--sp-6)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:0;list-style:none;margin-top:var(--sp-4)}
.prose li{
  position:relative;padding:6px 0 6px 22px;
  border-top:var(--bw-hair) solid var(--line-soft);
}
.prose li::before{content:"";position:absolute;left:0;top:17px;width:11px;height:1px;background:var(--cyan)}
.prose ol{counter-reset:pitem}
.prose ol li{counter-increment:pitem}
.prose ol li::before{
  content:counter(pitem,decimal-leading-zero);top:6px;width:auto;height:auto;background:none;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);
}
.prose a{text-decoration:underline}


/* ==========================================================================
   20  MOTION — every animation/transition lives inside this wrapper
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  a,.btn,.copy,.nav a,.foot-col a,details.card>summary,tbody tr{
    transition:color var(--dur-fast) var(--ease),
               background-color var(--dur-fast) var(--ease),
               border-color var(--dur-fast) var(--ease);
  }
  .demoframe .loader{transition:opacity 250ms var(--ease)}
  html{scroll-behavior:smooth}

  /* Drawn-in linework for SVG views: add class="draw" (+ .d2 … .d5 to stagger)
     and pathLength="1" on the path. */
  .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:drawin .9s var(--ease) forwards}
  .draw.d2{animation-delay:.12s}
  .draw.d3{animation-delay:.24s}
  .draw.d4{animation-delay:.36s}
  .draw.d5{animation-delay:.55s}
  @keyframes drawin{to{stroke-dashoffset:0}}
}


/* ==========================================================================
   21  RESPONSIVE — real reflow at 900px, single column at 640px
   ========================================================================== */
@media (max-width:1000px){
  .split{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  :root{--gutter:20px;--fs-body:16px}
  .head-in{gap:var(--sp-5)}
  .titleblock{min-width:0;width:100%;order:2}
  .head-nav{order:1;width:100%}
  .grid-3,.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
  section{padding:var(--sp-8) 0}
  .hero{padding:var(--sp-7) 0 0}
  .parts div{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--sp-3)}
  .embed{height:75vh;min-height:520px}
}

@media (max-width:640px){
  :root{--gutter:16px;--fs-body:16px;--sp-9:var(--sp-7)}
  body{font-size:16px}
  .site-head{padding-top:var(--sp-5)}
  .brand{margin-bottom:var(--sp-2)}

  /* Touch targets. Nav links were 25x28 — under every platform's ~44px
     guidance, and the row of five sits close together. Pad them to a
     44px tap height (the text stays the same size) and give the row
     room so the boxes don't touch. */
  .nav{gap:var(--sp-2) var(--sp-3);align-items:center}
  .nav a:not(.btn){
    font-size:11.5px;
    min-height:44px;display:inline-flex;align-items:center;
    padding-inline:6px;
  }
  .nav a.btn{min-height:44px;display:inline-flex;align-items:center}

  /* The title block is drawing-sheet identity, not information anyone
     needs on a phone: at full size it ate 37% of a 390x844 fold before
     the headline. Keep the two identifying cells, drop the rest. */
  .titleblock{margin-top:var(--sp-3)}
  .titleblock .tb-row:not(:first-child){display:none}

  /* Smallest type on the page was 9.5px (labels, spec strip, pills).
     Lift the mobile floor to 11px — still small, but legible on glass. */
  :root{--fs-label:11px}
  .specstrip,.pill,.caption,.tb-cell i{font-size:11px}

  .grid-2,.grid-3,.grid-4,.grid-auto,.specs,.stats{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}

  .hero h1,.hero.compact h1{max-width:none}
  .ctas .btn{width:100%}
  .sechead{gap:var(--sp-3);flex-wrap:wrap}
  .sechead .fill{display:none}
  .lede{margin-top:calc(var(--sp-3) * -1)}

  .panel{padding:var(--sp-4)}
  .card,.rel{padding:var(--sp-4)}
  details.card>summary{padding:var(--sp-4)}
  details.card>summary::after{right:var(--sp-4)}
  details.card .detail{padding:var(--sp-4)}

  /* Measurement chart: tighter columns so the rule keeps usable width. */
  .mrow,.maxis{grid-template-columns:100px minmax(0,1fr) 72px;gap:10px}
  .mname{font-size:11.5px}
  .mval{font-size:12.5px}

  .parts div{grid-template-columns:minmax(0,1fr);gap:var(--sp-1);padding:var(--sp-3) 0}
  .keys li{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .step{padding-left:var(--sp-7)}
  .step::after{left:11px}

  .rel-date{margin-left:0}
  .gifgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
  .embed{height:70vh;min-height:440px;padding:4px}
  .figframe,.demoframe{padding:4px}
  .cmark{width:24px;height:24px;font-size:12px;line-height:20px}
  pre{font-size:12px}
}


/* ==========================================================================
   22  PRINT — the manual page in particular has to be sane on paper
   ========================================================================== */
@media print{
  :root{
    --ground:#fff;--panel:#fff;--panel-fill:#fff;--panel-fill-strong:#fff;
    --code-fill:#f5f5f5;--zebra:#f2f2f2;--hover-fill:transparent;
    --ink:#000;--dim:#333;--line:#999;--line-soft:#c8c8c8;
    --cyan:#005a8c;--accent:#8a4b00;
  }
  body{
    background:#fff!important;background-image:none!important;
    color:#000;font-size:10.5pt;line-height:1.45;
  }
  .skip,.site-foot,.ctas,.copy,.nav,.demoframe,.gifgrid,.cmark{display:none!important}
  .site-head{padding-top:0;border-bottom:1px solid #999}
  .titleblock{min-width:0;width:100%;border-color:#999}
  .tb-cell,.tb-row+.tb-row,.tb-cell+.tb-cell{border-color:#999}
  section{padding:12pt 0;break-inside:auto}
  .sechead .fill{background:#999}
  .panel,.card,.rel,.note,.codeblock,.termblock,.figframe{
    border-color:#999;background:#fff;break-inside:avoid;
  }
  .panel::before,.panel::after,.figframe::before{display:none}
  h1,h2,h3{break-after:avoid}
  table{break-inside:auto}
  tr,figure,.step,.mrow{break-inside:avoid}
  thead{display:table-header-group}
  .scrollx{overflow:visible}
  pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#000}
  /* The PDF viewer cannot print — show the download line instead. */
  .embed>object,.embed>iframe{display:none}
  .embed{height:auto;min-height:0;border:1px solid #999}
  .embed-fallback{display:block}
  /* Reveal destinations of real links only. */
  a[href^="http"]::after,a[href^="/"]::after{
    content:" (" attr(href) ")";font-family:var(--mono);font-size:8.5pt;color:#555;
  }
  a{color:#000;text-decoration:underline}
}