:root{
  color-scheme: light;

  --ground:#F3F4F9;
  --surface:#FFFFFF;
  --surface-2:#E7E9F2;
  --sunk:#DEE1EC;
  --ink:#11131C;
  --ink-2:#414861;
  --ink-3:#6D7492;
  --rule:#D3D7E4;
  --rule-2:#B4BACC;
  --shadow-1:rgba(17,19,28,.09);
  --shadow-2:rgba(17,19,28,.16);

  --l1:#7C5CE6; --l1-bg:#EDE8FC;
  --l2:#0D8F86; --l2-bg:#DDF0EE;
  --l3:#3B4FD8; --l3-bg:#E3E6FB;
  --l4:#A96C05; --l4-bg:#F8EED6;
  --l5:#B32A93; --l5-bg:#FAE3F3;
  --l6:#B0402A; --l6-bg:#FAE4DE;

  --accent:#3B4FD8;

  /* General Sans is the Crema face. It is not on Google Fonts, which is the only
     stylesheet host artifacts may load from, so it resolves locally where installed
     and falls back to Plus Jakarta Sans, the nearest available match, elsewhere. */
  --sans:"General Sans","GeneralSans-Variable","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:var(--sans);
  --serif:var(--sans);

  --r:12px;
  --r-sm:7px;
  --r-pill:999px;
  --page:1440px;

  /* Type scale. Fifty-two ad-hoc sizes had accumulated; these are the nine that
     survived, on a roughly 1.15 ratio. Sizes are in px so the steps stay put
     regardless of the root size, which matters because most of these label a
     diagram rather than set prose. */
  --t0:10px;  --t1:11px;  --t2:12px;  --t3:13px;  --t4:14px;
  --t5:16px;  --t6:18px;  --t7:21px;  --t8:28px;  --t9:42px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0B0D14;
    --surface:#141824;
    --surface-2:#1C2131;
    --sunk:#0F131D;
    --ink:#E9EBF4;
    --ink-2:#AFB6CC;
    --ink-3:#7B8399;
    --rule:#242A3A;
    --rule-2:#384054;
    --shadow-1:rgba(0,0,0,.46);
    --shadow-2:rgba(0,0,0,.64);

    --l1:#A78BFA; --l1-bg:#241C3D;
    --l2:#2DD4BF; --l2-bg:#0B2E2B;
    --l3:#818CF8; --l3-bg:#1A1F42;
    --l4:#F0B429; --l4-bg:#332510;
    --l5:#F472D0; --l5-bg:#341334;
    --l6:#F2836A; --l6-bg:#361711;

    --accent:#818CF8;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0B0D14;
  --surface:#141824;
  --surface-2:#1C2131;
  --sunk:#0F131D;
  --ink:#E9EBF4;
  --ink-2:#AFB6CC;
  --ink-3:#7B8399;
  --rule:#242A3A;
  --rule-2:#384054;
    --shadow-1:rgba(0,0,0,.46);
    --shadow-2:rgba(0,0,0,.64);

  --l1:#A78BFA; --l1-bg:#241C3D;
  --l2:#2DD4BF; --l2-bg:#0B2E2B;
  --l3:#818CF8; --l3-bg:#1A1F42;
  --l4:#F0B429; --l4-bg:#332510;
  --l5:#F472D0; --l5-bg:#341334;
  --l6:#F2836A; --l6-bg:#361711;

  --accent:#818CF8;
}

*{box-sizing:border-box}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t4);
  line-height:1.55;
  margin:0;
  padding:0 0 90px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--page);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{margin:0;line-height:1.08;text-wrap:balance;font-family:var(--sans)}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem);font-weight:800;letter-spacing:-.036em}
h2{font-size:clamp(1.4rem,2.5vw,1.92rem);font-weight:700;letter-spacing:-.024em}
h3{font-size:var(--t5);font-weight:700;letter-spacing:-.012em}
p{margin:0 0 .9em}
a{color:var(--accent)}
button{font-family:inherit;color:inherit}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--mono);font-size:var(--t1);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;
}

/* ---------- masthead ---------- */
.mast{padding:44px 0 26px}
.spectrum{height:6px;display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:28px;border-radius:var(--r-pill);overflow:hidden}
.spectrum i{display:block}
.mast .lede{
  font-family:var(--serif);font-size:var(--t6);line-height:1.6;color:var(--ink-2);
  max-width:62ch;margin-top:20px;
}
.mast .lede b{color:var(--ink);font-weight:600}
.meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- instrument ---------- */
.rig{
  display:grid;grid-template-columns:minmax(0,1fr) 352px;
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;
  margin:8px 0 0;
}
.stage{background:var(--ground);display:flex;flex-direction:column;min-width:0}
.inspector{background:var(--surface);display:flex;flex-direction:column;min-width:0;position:relative}

/* inspector collapse */
.insp-toggle{
  position:absolute;top:12px;right:13px;z-index:2;
  width:26px;height:26px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--rule-2);color:var(--ink-3);
}
.insp-toggle:hover{color:var(--ink);border-color:var(--ink-3)}
.insp-toggle svg{transition:transform .18s}
.insp-rail{display:none}
.rig.insp-off{grid-template-columns:minmax(0,1fr) 44px}
.rig.insp-off .insp-head,.rig.insp-off .insp-body,.rig.insp-off .insp-toggle{display:none}
.rig.insp-off .insp-rail{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  writing-mode:vertical-rl;padding:16px 0;cursor:pointer;
  background:none;border:0;color:var(--ink-3);
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.17em;text-transform:uppercase;
}
.rig.insp-off .insp-rail:hover{color:var(--ink)}
.rig.insp-off .insp-toggle svg{transform:rotate(180deg)}

.lbl{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-right:2px;
}
.pill{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;
  padding:8px 15px;cursor:pointer;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);
  transition:background .13s,color .13s,border-color .13s;
  white-space:nowrap;
}
.pill:hover{border-color:var(--ink-3);color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
/* A dot carries the layer colour so the button itself can be plain text. */

/* Plain ground under a transparent canvas. This was a dot grid, on the idea that
   the map is a drafting surface. With forty pills and a trace path over it the
   grid was one more thing competing for the same attention, so it came off. */
.canvas-hold{position:relative;background:var(--ground)}
canvas#map{display:block;width:100%;touch-action:pan-y}
.hint{
  position:absolute;left:14px;bottom:9px;pointer-events:none;
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);opacity:.85;
}

/* transport */
.transport{
  background:var(--surface);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
}
.tport-left{padding:11px 14px;min-width:0}
.tport-right{
  padding:13px 16px;border-left:1px solid var(--rule);
  display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap;
}
.scen-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
.ctrl-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.icb{
  width:30px;height:28px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);
}
.icb:hover{border-color:var(--ink-3);color:var(--ink)}
.icb[disabled]{opacity:.35;cursor:default}
.icb.play{background:var(--accent);border-color:var(--accent);color:var(--surface);width:36px}
.icb.play:hover{filter:brightness(1.08)}
.stepcount{font-family:var(--mono);font-size:var(--t2);color:var(--ink-3);letter-spacing:.06em}
.track{
  flex:1 1 140px;min-width:100px;height:5px;background:var(--sunk);border-radius:var(--r-pill);
  border:1px solid var(--rule);position:relative;overflow:hidden;
}
.track i{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0;transition:width .25s}

.meter{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.meter .k{
  font-family:var(--mono);font-size:var(--t0);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:block;line-height:1.4;white-space:nowrap;
}
.meter .v{
  font-family:var(--mono);font-size:var(--t5);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);display:block;
  line-height:1.25;white-space:nowrap;
}
.meter .v small{font-size:var(--t1);font-weight:400;color:var(--ink-3);letter-spacing:.02em}
.winbar{display:block;width:112px;height:5px;background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r-pill);overflow:hidden;margin-top:4px;position:relative;flex:none}
.winbar i{position:absolute;inset:0 auto 0 0;background:var(--l1);width:0;transition:width .3s}

/* inspector */
.insp-head{padding:17px 20px 15px;border-bottom:1px solid var(--rule)}
.insp-tag{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.15em;text-transform:uppercase;
  color:var(--lc,var(--ink-3));display:block;margin-bottom:6px;
}
.insp-head h3{font-size:var(--t7);font-variation-settings:'wdth' 118;letter-spacing:-.02em}
.insp-aka{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);margin:6px 0 0;line-height:1.6}
.insp-body{padding:14px 18px 22px;overflow-y:auto;flex:1}
.insp-body p{font-family:var(--serif);font-size:var(--t5);line-height:1.6;color:var(--ink-2)}
.insp-body p b{color:var(--ink);font-weight:600}
.insp-body h4{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--rule);
}
.insp-body h4:first-child{margin-top:0;padding-top:0;border-top:none}
/* An analogy has to look like an analogy, or it reads as a claim about how the
   thing actually works. Set apart with a rule and italics rather than dropped
   into the run of the text. */
.bridge{
  color:var(--ink-2);font-size:var(--t4);line-height:1.6;font-style:italic;
  border-left:2px solid var(--rule-2);padding-left:11px;margin:0;
}

/* Sources: publisher and date in mono so the eye can sort them at a glance,
   then a plain note saying what kind of source it is. */
.srcs{display:flex;flex-direction:column;gap:11px}
.src-row{display:flex;flex-direction:column;gap:2px;min-width:0}
a.src{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;
  text-decoration:none;color:var(--ink);overflow-wrap:anywhere;
}
a.src:hover .s-title{text-decoration:underline}
.src .s-pub{font-family:var(--mono);font-size:var(--t2);font-weight:600;color:var(--ink-3)}
.src .s-title{font-size:var(--t4);font-weight:600;line-height:1.45}
.src .s-when{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);white-space:nowrap}
.s-note{color:var(--ink-3);font-size:var(--t3);line-height:1.5}

.reals{display:flex;flex-direction:column;gap:12px}
/* Names are now lists of separate links, so they get their own line and are
   allowed to wrap. Side by side, a long list starved the description column. */
.real{display:flex;flex-direction:column;gap:3px;min-width:0}
.real .n{
  font-family:var(--mono);font-size:var(--t2);font-weight:600;color:var(--ink);
  white-space:normal;line-height:1.5;overflow-wrap:anywhere;
}
.real .d{color:var(--ink-3);font-size:var(--t4);line-height:1.5;overflow-wrap:break-word}
.real .n .gloss{font-weight:600}
/* Marks lead the name they belong to, sized down to sit on the same line as the
   mono type rather than pushing it around. */
.real .n .rl{display:inline-flex;align-items:center;gap:4px;margin-right:7px;vertical-align:-3px}
.real .n .rl .lg{width:14px;height:14px;border-radius:3px}
.insp-head .dg-brand{margin-top:10px;gap:6px 9px}
.insp-head .dg-brand .lg{width:15px;height:15px}
.insp-head .dg-brand .bn{margin-right:0}
.breaks{
  font-family:var(--mono);font-size:var(--t2);line-height:1.55;color:var(--l6);
  background:var(--l6-bg);border:1px solid color-mix(in srgb,var(--l6) 26%,transparent);
  padding:10px 13px;border-radius:var(--r-sm);
}
.links{display:flex;flex-wrap:wrap;gap:5px}
.lnk{
  font-family:var(--mono);font-size:var(--t2);font-weight:500;padding:5px 11px;cursor:pointer;
  border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid transparent;color:var(--ink-2);text-align:left;
}
.lnk:hover{border-color:var(--rule-2);color:var(--ink)}
.lnk em{font-style:normal;color:var(--ink-3);font-size:var(--t1)}
.lnk.strong{font-weight:700;color:var(--ink);background:var(--surface-2);border-color:var(--rule-2)}
.lnk.also{background:transparent;border:1px dashed color-mix(in srgb,var(--lc) 55%,transparent);color:var(--lc)}
.lnk.also:hover{background:var(--lc);color:var(--surface);border-style:solid}
.lnk.l1{--lc:var(--l1)} .lnk.l2{--lc:var(--l2)} .lnk.l3{--lc:var(--l3)}
.lnk.l4{--lc:var(--l4)} .lnk.l5{--lc:var(--l5)} .lnk.l6{--lc:var(--l6)}
.alsohint{font-size:var(--t3);line-height:1.5;color:var(--ink-3);margin:-2px 0 9px}
.stepnote{
  font-family:var(--mono);font-size:var(--t2);line-height:1.55;
  color:var(--ink-2);background:var(--surface-2);padding:10px 13px;
  border:1px solid var(--rule);border-radius:var(--r-sm);
}
.stepnote b{color:var(--ink)}
.costnote{
  font-family:var(--mono);font-size:var(--t2);line-height:1.5;color:var(--ink-3);
  margin:0 0 12px;padding:9px 0 0;border-top:1px dashed var(--rule-2);
}
.scenfoot{font-size:var(--t4)}
.scenfoot .m{font-family:var(--mono);font-size:var(--t2);color:var(--ink-3);display:block;margin-top:3px}

/* Side by side, the panel should be exactly as tall as the map beside it and
   scroll inside that height.

   The difficulty is that a grid row is as tall as its tallest item, so a long
   entry makes the panel set the row height and the map column fills with dead
   space below the canvas. `contain:size` is what prevents that: it tells the
   browser this element's size does not depend on its contents, so it
   contributes nothing to the row and simply takes the height the map sets.
   `min-height:0` then lets the body shrink inside that height and scroll,
   rather than overflowing it.

   Both only in two-column mode. Stacked, there is no map beside it to match,
   so the panel sizes to its content and the page scrolls as normal. */
@media (min-width:1041px){
  .inspector{contain:size}
  .insp-body{min-height:0}
}

@media (max-width:1040px){
  .rig,.rig.insp-off{grid-template-columns:1fr}
  .transport{grid-template-columns:1fr}
  .tport-right{border-left:0;border-top:1px solid var(--rule);flex-wrap:wrap;gap:20px}
  .rig.insp-off .insp-head{display:block}
  .rig.insp-off .insp-toggle{display:grid}
  .rig.insp-off .insp-rail{display:none}
}

/* ---------- collapsible reference panels ---------- */
.panelbar{
  position:sticky;top:0;z-index:6;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0;margin-top:36px;
  background:var(--ground);border-bottom:1px solid var(--rule);
}
.panelbar a.pill{text-decoration:none;display:inline-block}
.panelbar .sep{flex:1 1 auto}

.panel{display:block;margin-top:28px}
.sec-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 16px;align-items:baseline;
  padding:13px 0 14px;margin:0;
  cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none;
}
.sec-head::-webkit-details-marker{display:none}
.sec-head::marker{content:""}
.sec-head:hover .chev{color:var(--ink)}
.chev{align-self:center;color:var(--ink-3);display:flex}
.chev svg{transition:transform .18s}
.panel[open] .chev svg{transform:rotate(180deg)}
.panel-body{padding:12px 0 60px}
.sec-head .n{
  font-family:var(--mono);font-size:var(--t2);font-weight:600;letter-spacing:.12em;
  color:var(--ink-3);padding-top:.5em;
}
.sec-head .sub{
  font-family:var(--mono);font-size:var(--t2);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:7px 0 0;
}

/* topology gallery */
.topo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media (max-width:900px){.topo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.topo{grid-template-columns:1fr}}
.topo > div{background:var(--surface);padding:15px 17px 16px}
.topo h4{font-family:var(--mono);font-size:var(--t2);letter-spacing:.06em;color:var(--ink);margin:0 0 3px}
.topo .use{font-family:var(--mono);font-size:var(--t0);letter-spacing:.1em;text-transform:uppercase;color:var(--l5)}
.topo svg{display:block;width:100%;height:auto;margin:12px 0 10px;color:var(--ink-3)}
.topo p{font-size:var(--t4);line-height:1.5;color:var(--ink-2);margin:0}
.topo .seen{font-family:var(--mono);font-size:var(--t2);color:var(--ink-3);margin-top:8px;display:block}

/* vocab */
.vtools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
input[type=search]{
  font-family:var(--mono);font-size:var(--t3);padding:9px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--rule-2);color:var(--ink);min-width:230px;
}
.tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:700px;font-size:var(--t4)}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--rule);vertical-align:top}
th{
  font-family:var(--mono);font-size:var(--t0);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);
}
td:first-child{font-family:var(--mono);font-size:var(--t3);font-weight:600;color:var(--ink);white-space:nowrap}
td:nth-child(2){font-family:var(--mono);font-size:var(--t2);color:var(--ink-3)}
td:nth-child(3){font-family:var(--serif);color:var(--ink-2);line-height:1.5}
tr:last-child td{border-bottom:none}
tr[hidden]{display:none}
.noresult{font-family:var(--mono);font-size:var(--t3);color:var(--ink-3);padding:16px 2px 0}
#vbody td:nth-child(2){max-width:240px;white-space:normal}
#vbody td:nth-child(3){min-width:370px}
.vdef{margin:0;font-size:var(--t4);line-height:1.58;color:var(--ink-2);max-width:62ch}
.vdef .gloss{color:var(--ink)}
.vbridge{margin:9px 0 0;font-size:var(--t4);line-height:1.5;color:var(--ink-3);max-width:62ch}
.vbridge b{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:3px;opacity:.75;
}

/* diagnostic */
.diag{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media (max-width:900px){.diag{grid-template-columns:1fr}}
.diag-list{background:var(--surface)}
.diag-side{background:var(--surface);padding:18px}
.chk{display:grid;grid-template-columns:auto 1fr;gap:0 13px;padding:13px 18px;border-bottom:1px solid var(--rule);cursor:pointer;align-items:start}
.chk:last-child{border-bottom:none}
.chk input{margin:5px 0 0;width:16px;height:16px;border-radius:5px;accent-color:var(--l2);cursor:pointer}
.chk .q{font-weight:600;font-size:var(--t5);color:var(--ink);line-height:1.35}
.chk .why{font-size:var(--t4);color:var(--ink-3);line-height:1.5;margin-top:4px;font-family:var(--serif)}
.chk .lay{font-family:var(--mono);font-size:var(--t0);letter-spacing:.11em;text-transform:uppercase;color:var(--lc);margin-top:5px;display:block}
.chk input:checked ~ div .q{color:var(--ink-3)}
.score{font-family:var(--mono);font-size:var(--t9);font-weight:600;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.score small{font-size:var(--t5);color:var(--ink-3);font-weight:400}
.thin{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.thinrow{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;font-family:var(--mono);font-size:var(--t2)}
.thinrow i{width:9px;height:9px;background:var(--lc);display:block;border-radius:var(--r-pill)}
.thinrow b{color:var(--ink);font-weight:500}
.thinrow span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.diag-side .verdict{font-size:var(--t3);color:var(--ink-3);line-height:1.5;margin:16px 0 0}

/* index */
.maplist{
  position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.maplist:focus-within{
  right:0;width:auto;height:auto;max-height:100%;overflow:auto;
  clip:auto;clip-path:none;white-space:normal;z-index:3;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px;background:var(--rule);
}
.ix{background:var(--surface);padding:11px 13px;text-align:left;cursor:pointer;border:none}
.ix:hover{background:var(--surface-2)}
.ix .t{font-family:var(--mono);font-size:var(--t3);font-weight:600;color:var(--ink);display:block;line-height:1.3}
.ix .l{font-family:var(--mono);font-size:var(--t0);letter-spacing:.1em;text-transform:uppercase;color:var(--lc);display:block;margin-top:4px}

.pull{
  padding:0;margin:26px 0 0;
  font-family:var(--serif);font-size:var(--t6);line-height:1.52;color:var(--ink);max-width:56ch;
}
.horizon{border:1px solid var(--rule-2);border-radius:var(--r);background:var(--surface);padding:16px 20px;margin:28px 0 0;max-width:74ch}
.horizon h4{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px;
}
.horizon p{font-size:var(--t4);line-height:1.55;color:var(--ink-2);margin:0}



/* ---------- alternate views of the same forty concepts ----------
   Four ways to look at one stack: the flow map (canvas), the runtime drawn as an
   architecture, the data path against its deployment environments, and the business
   process. Every box that names a concept opens the same definition the map opens,
   so the wiki holds across all four. Diagrams are grid and flex, never absolute
   positioning, so nothing collides and everything reflows. */
.viewbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--rule);
}
.viewbar .lbl{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-right:2px;
}
/* Text tabs, not capsules. Four filled pills competing with six layer pills and
   a page nav was most of why the chrome read as louder than the map. */
.vwtab{
  font-family:var(--sans);font-size:var(--t3);font-weight:500;
  padding:9px 2px;margin:0 6px;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);
  transition:color .14s,border-color .14s;
}
.vwtab:hover{color:var(--ink-2)}
.vwtab[aria-pressed="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

.vw{padding:26px 20px 30px;background:var(--ground)}
.vw-intro{font-size:var(--t4);line-height:1.6;color:var(--ink-2);max-width:74ch;margin:0 0 20px}
.vw-intro b{color:var(--ink);font-weight:600}

/* bands: a numbered rail on the left, the diagram body on the right */
.dg{display:flex;flex-direction:column;gap:4px}
.dg-band{display:block}
/* A section header is a line of type, not an object. No container, no fill and no
   layer colour, so the cards underneath are the only things on the ground asking
   to be looked at. */
.dg-rail{
  border:0;background:none;padding:0 2px 11px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 14px;
}
.dg-rail .num{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);flex:none;
}
.dg-rail h4{font-size:var(--t5);margin:0;color:var(--ink);letter-spacing:-.016em;line-height:1.3;flex:none}
.dg-rail p{font-size:var(--t3);line-height:1.5;color:var(--ink-3);margin:0;flex:1 1 340px;min-width:0}
.dg-body{background:none;border:0;border-radius:0;padding:0 0 4px}
.dg-gtitle{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;display:block;
}
.dg-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.dg-row + .dg-row{margin-top:10px}

.dg-box{
  flex:1 1 158px;min-width:150px;max-width:250px;text-align:left;cursor:default;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:13px 14px;
  display:flex;flex-direction:column;gap:3px;
  box-shadow:0 1px 2px var(--shadow-1);
  transition:box-shadow .15s,transform .15s,border-color .15s;
}
button.dg-box{cursor:pointer}
button.dg-box:hover{border-color:var(--rule-2);box-shadow:0 6px 16px -8px var(--shadow-2);transform:translateY(-1px)}
/* Layer colour appears when a trace lights the card, rather than sitting on every
   card all the time. */
.dg-box.on{border-color:var(--lc);box-shadow:0 0 0 1px var(--lc),0 8px 22px -12px var(--shadow-2)}
.dg-box .t{font-size:var(--t4);font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.dg-box .s{font-size:var(--t2);color:var(--ink-3);line-height:1.42}
.dg-box.plain{background:none;border-style:dashed;box-shadow:none}
@media (prefers-reduced-motion:reduce){button.dg-box:hover{transform:none}}

/* logo slot: the real mark when one has shipped, a monogram until then */
.dg-brand{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}
.lg{
  width:17px;height:17px;border-radius:4px;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--ink-3);
  font-family:var(--mono);font-size:var(--t0);font-weight:700;
}
.lg img{width:100%;height:100%;object-fit:contain;display:block}
.lg.mark{background:none;border-radius:0}
.lg svg{width:100%;height:100%;display:block}
.dg-brand .lg.mark{color:var(--ink-2)}
.echip .lg.mark{color:inherit}
.dg-brand .bn{font-family:var(--mono);font-size:var(--t0);color:var(--ink-3);margin-right:3px}

/* the connector between two bands */
.dg-flow{display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 0 0}
.dg-flow .cap{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:4px 0 3px;
}
.dg-flow .stem{width:0;height:13px;border-left:1px dashed var(--rule-2)}
.dg-flow .head{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--rule-2);margin-bottom:4px;
}
.dg-flow.up .head{border-top:0;border-bottom:6px solid var(--rule-2);margin:0 0 0}
.dg-flow.both .cap{color:var(--ink-2)}

/* the cross-cutting column, for the business view */
.dg-split{display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:16px;align-items:start}
@media (max-width:980px){.dg-split{grid-template-columns:1fr}}
.dg-aside{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 16px;position:sticky;top:64px;
}
.dg-aside h4{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
.dg-aside .ci{padding:9px 0;border-top:1px solid var(--rule)}
.dg-aside .ci:first-of-type{border-top:0;padding-top:0}
.dg-aside .ci .t{font-size:var(--t3);font-weight:700;color:var(--ink);display:block}
.dg-aside .ci .s{font-size:var(--t2);line-height:1.45;color:var(--ink-3);display:block;margin-top:2px}

/* the environment matrix, for the data view */
.envwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}

/* ---------- UML deployment diagram ----------
   The environment question is a deployment question, so it is drawn the way UML
   draws one: execution environments as nodes, the things that run inside them as
   artifacts and components, and communication paths between them carrying a
   stereotype and a payload. The perimeter is the dashed line, and the whole point
   of the drawing is which paths cross it. Positions are computed, not placed. */
.umlwrap{
  overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);box-shadow:0 1px 2px var(--shadow-1);padding:4px 0;
}
.uml{display:block;height:auto}
.uml-face{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.3}
.uml-top,.uml-side{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1.3}
.uml-st{font-family:var(--mono);font-size:var(--t0);letter-spacing:.04em;fill:var(--ink-3)}
.uml-nname{font-family:var(--sans);font-size:var(--t2);font-weight:700;letter-spacing:-.01em;fill:var(--ink)}
.uml-nnote{font-family:var(--sans);font-size:var(--t0);fill:var(--ink-3)}
.uml-part{fill:var(--ground);stroke:var(--rule-2);stroke-width:1}
.uml-pname{font-family:var(--sans);font-size:var(--t0);font-weight:600;fill:var(--ink)}
.uml-prod{font-family:var(--mono);font-size:var(--t0);fill:var(--ink-3)}
.uml-marks{color:var(--ink-3)}
.uml-path{fill:none;stroke:var(--ink-3);stroke-width:1.3}
.uml-path.crosses{stroke:var(--l6);stroke-dasharray:none;stroke-width:1.8}
.uml-plabel{font-family:var(--mono);font-size:var(--t0);letter-spacing:.04em;fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.uml-ppay{font-family:var(--sans);font-size:var(--t0);fill:var(--ink-3);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.uml-plabel.crosses{fill:var(--l6)}
.uml-perim{fill:none;stroke:var(--l6);stroke-width:1.2;stroke-dasharray:5 4}
.uml-perim-t{font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;fill:var(--l6);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.uml-node[data-env="managed"] .uml-face{stroke:var(--l6)}
.uml-node[data-env="managed"] .uml-top,.uml-node[data-env="managed"] .uml-side{stroke:var(--l6);fill:var(--l6-bg)}
.uml-node[data-env="selfhosted"] .uml-face{stroke:var(--l2)}
.uml-node[data-env="selfhosted"] .uml-top,.uml-node[data-env="selfhosted"] .uml-side{stroke:var(--l2);fill:var(--l2-bg)}
.uml-node[data-env="local"] .uml-face{stroke:var(--l3)}
.uml-node[data-env="local"] .uml-top,.uml-node[data-env="local"] .uml-side{stroke:var(--l3);fill:var(--l3-bg)}
.uml-el[data-vn]{cursor:pointer}
.uml-el[data-vn]:hover .uml-part{stroke:var(--ink-3)}
.uml-el[data-vn]:focus-visible .uml-part{stroke:var(--accent);stroke-width:2}
.uml-el.on .uml-part{stroke:var(--lc);stroke-width:2;fill:var(--surface)}
.uml-el.on .uml-pname{fill:var(--lc)}
.umlkey{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;
  font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);align-items:center;
}
.umlkey span{display:inline-flex;align-items:center;gap:6px}
.umlkey i{width:13px;height:13px;border-radius:3px;border:1.4px solid var(--k);display:block;flex:none}
.envgrid{display:grid;gap:1px;background:var(--rule);min-width:780px}
.envgrid > div{background:var(--surface);padding:11px 12px}
.envgrid .hd{
  background:var(--surface-2);font-family:var(--mono);font-size:var(--t0);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.envgrid .rh{background:var(--surface-2)}
.envgrid .rh .t{font-size:var(--t4);font-weight:700;color:var(--ink);display:block}
.envgrid .rh .s{font-size:var(--t2);line-height:1.4;color:var(--ink-3);display:block;margin-top:3px}
.envgrid .cell{display:flex;flex-direction:column;gap:6px}
.envgrid .cell.none{background:var(--ground)}
.envgrid .cell .na{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);opacity:.6}
.echip{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:var(--mono);font-size:var(--t1);font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--ec) 45%,transparent);
  background:color-mix(in srgb,var(--ec) 11%,transparent);color:var(--ec);
}
.env-managed{--ec:var(--l6)} .env-selfhosted{--ec:var(--l2)} .env-local{--ec:var(--l3)}
.perim{
  display:block;margin:30px 0 12px;
  font-size:var(--t5);font-weight:700;letter-spacing:-.016em;color:var(--ink);
}
.perim i{display:none}
.dg-note{font-size:var(--t3);line-height:1.55;color:var(--ink-3);margin:12px 0 0;max-width:76ch}
.dg-legend{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0;align-items:center}

/* ---------- masthead row, trace rail, help modal, playing state ---------- */
.mast-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:18px}
.mast-row .lede{margin:0;flex:1 1 380px}
.mast-row .pill{flex:none}

.tracerail{
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  padding:18px 0 20px;margin:14px 0 10px;
}

/* The start-here strip runs on a neutral ramp of its own: true black, true white and
   grey, rather than the blue-grey the rest of the page uses. Redeclaring the tokens on
   the container reaches every descendant, so the strip stays neutral without touching
   any other section. */
.tracerail{
  --surface:#FFFFFF; --surface-2:#FFFFFF; --ground:#F6F6F7;
  --ink:#0A0A0B; --ink-2:#3E3E45; --ink-3:#6E6E77;
  --rule:#E2E2E6; --rule-2:#B6B6BE;
  --shadow-1:rgba(0,0,0,.07); --shadow-2:rgba(0,0,0,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tracerail{
    --surface:#17171A; --surface-2:#1E1E22; --ground:#111113;
    --ink:#FFFFFF; --ink-2:#C7C7CE; --ink-3:#85858E;
    --rule:#2B2B30; --rule-2:#47474F;
    --shadow-1:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] .tracerail{
  --surface:#17171A; --surface-2:#1E1E22; --ground:#111113;
  --ink:#FFFFFF; --ink-2:#C7C7CE; --ink-3:#85858E;
  --rule:#2B2B30; --rule-2:#47474F;
  --shadow-1:rgba(0,0,0,.5); --shadow-2:rgba(0,0,0,.7);
}
.tr-head{padding:0 20px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tr-head-txt{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.tr-all{
  flex:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:none;border:0;padding:2px 0;color:var(--ink);
  font-family:var(--mono);font-size:var(--t2);font-weight:700;letter-spacing:.07em;
  border-bottom:1px solid transparent;
}
.tr-all:hover{border-bottom-color:currentColor}
@media (max-width:640px){.tr-head{flex-direction:column;gap:8px}}
.tr-label{
  font-family:var(--mono);font-size:var(--t3);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);
}
.tr-sub{font-size:var(--t5);color:var(--ink-2);line-height:1.6}
.glsub{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.gl-new{
  margin-left:8px;font-family:var(--mono);font-size:var(--t1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent, var(--ink));border:1px solid currentColor;
  border-radius:3px;padding:1px 4px;
}
.tr-strip{
  display:flex;align-items:stretch;gap:12px;overflow-x:auto;padding:4px 20px 6px;
  scrollbar-width:thin;
}
.trc{
  flex:0 0 auto;width:284px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-start;
  background:var(--ground);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 17px;
  box-shadow:0 1px 1px var(--shadow-1);
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s;
}
.trc:hover{
  background:var(--surface);
}
.trc[aria-current="true"]{
  background:var(--surface);
}
.trc .d{
  font-family:var(--mono);font-size:var(--t3);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);display:block;
}
.trc .n{font-size:var(--t5);font-weight:700;color:var(--ink);display:block;margin-top:3px;letter-spacing:-.014em}
.trc .s{font-size:var(--t5);color:var(--ink-2);line-height:1.6;margin-top:7px;display:block}
.trc .go{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-top:8px;display:flex;align-items:center;gap:5px;
}

.layerbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:14px 16px;background:var(--surface);border-top:1px solid var(--rule);
}
.layerbar .grp{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.layerbar .sep{flex:1 1 auto}
.rig.running .layerbar{display:none}

.playing{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-right:2px;
}
.playing i{
  width:3px;height:9px;background:var(--accent);display:block;border-radius:2px;
  animation:eq .9s ease-in-out infinite;
}
.playing i:nth-child(2){animation-delay:.15s}
.playing i:nth-child(3){animation-delay:.3s;margin-right:5px}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.steptimer{height:3px;background:var(--sunk);border-radius:var(--r-pill);overflow:hidden;margin-top:9px}
.steptimer i{display:block;height:100%;width:0;background:var(--accent);opacity:.55}
@media (prefers-reduced-motion:reduce){
  .playing i{animation:none;transform:none}
  .steptimer i{transition:none!important}
}

.hmodal{
  position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(560px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 26px 70px rgba(6,8,14,.3);
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
}
.hmodal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.hm-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 22px 14px;border-bottom:1px solid var(--rule);flex:none;
}
.hm-head h2{font-size:var(--t7);letter-spacing:-.026em}
.hm-body{overflow-y:auto;padding:20px 24px 8px}
.hm-body p{font-size:var(--t5);line-height:1.62;color:var(--ink-2);max-width:56ch;margin:0 0 .85em}
.hm-body p:last-child{margin-bottom:0}
.hm-body p b{color:var(--ink);font-weight:600}
.hm-lede{font-size:var(--t5)!important;line-height:1.58!important;color:var(--ink)!important}
.hm-code{
  font-family:var(--mono);font-size:.86em;font-weight:500;
  background:var(--surface-2);padding:1px 7px;border-radius:var(--r-pill);color:var(--ink-2);
}
.hm-body h4{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--rule);
}
.hm-steps{margin:0 0 4px;padding:0;list-style:none;counter-reset:hs;display:flex;flex-direction:column;gap:14px}
/* one wrapper div per item, so the grid never splits a sentence from its lead-in */
.hm-steps li{counter-increment:hs;display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 13px;align-items:start}
.hm-steps li::before{
  content:counter(hs);
  font-family:var(--mono);font-size:var(--t1);font-weight:700;color:var(--surface);
  background:var(--accent);border-radius:var(--r-pill);
  width:22px;height:22px;display:grid;place-items:center;margin-top:1px;
}
.hm-steps li > div{font-size:var(--t5);line-height:1.58;color:var(--ink-2);max-width:52ch}
.hs-t{display:block;font-weight:700;color:var(--ink);font-size:var(--t5);letter-spacing:-.012em;margin-bottom:2px}
.hm-quiet{color:var(--ink-3);font-size:var(--t4)!important}
.hm-foot{padding:14px 24px 20px;flex:none;border-top:1px solid var(--rule);margin-top:18px}
#helpScrim{z-index:50}


/* ---------- header, map bar, callouts, shapes modal, tools ---------- */
.mast{padding:28px 0 10px}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:14px}
.mast h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.spectrum{height:5px;margin-bottom:18px}

.tr-acts{display:flex;align-items:center;gap:20px;flex:none}

.mapbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--rule);
}
.mb-left{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto}
.mb-left .track{flex:1 1 90px;max-width:340px}
.mb-right{display:flex;align-items:center;gap:9px;flex:none}
.icb.caret{border-radius:var(--r-pill);width:32px;height:30px}
.mb-lbl{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-right:2px;white-space:nowrap;
}
.mb-div{width:1px;height:18px;background:var(--rule);display:block;margin:0 4px}
.mapclear{
  cursor:pointer;flex:none;
  font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-3);
}
.mapclear:hover{color:var(--ink);border-color:var(--ink-3)}
@media (max-width:720px){.mb-lbl{display:none}}
.transport{grid-template-columns:1fr}
.tport-right{border-left:0}
.tport-right .sep{flex:1 1 auto}
.tport-right .scen-now{align-self:center;padding:0}

.insp-tagrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aboutbtn{
  width:20px;height:20px;flex:none;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface-2);border:1px solid transparent;color:var(--ink-3);
  font-size:var(--t2);font-weight:700;font-style:italic;line-height:1;
}
.aboutbtn:hover{color:var(--ink);border-color:var(--rule-2)}
.hpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hpill{
  font-family:var(--mono);font-size:var(--t0);font-weight:600;letter-spacing:.05em;
  padding:6px 12px;border-radius:var(--r-pill);
}
.hpill.shape{background:var(--l5-bg);color:var(--l5);border:1px solid transparent;cursor:pointer}
.hpill.shape:hover{border-color:var(--l5)}

.costcall{
  display:flex;flex-direction:column;gap:3px;margin:0 0 12px;
  background:var(--l2-bg);border:1px solid color-mix(in srgb,var(--l2) 26%,transparent);
  border-radius:var(--r-sm);padding:9px 13px;
}
.cc-k{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--l2);
}
.cc-v{font-family:var(--mono);font-size:var(--t2);line-height:1.5;color:var(--ink-2)}

.hmodal.wide{width:min(760px,94vw)}
.hm-sub{font-size:var(--t4);color:var(--ink-3);margin:5px 0 0}
.shcard{border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px;margin-bottom:10px}
.shcard.on{border-color:var(--l5);background:var(--l5-bg)}
.shhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.shname{font-weight:700;color:var(--ink);font-size:var(--t5)}
.shuse,.shtag{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.shuse{color:var(--ink-3)}
.shtag{color:var(--surface);background:var(--l5);padding:3px 9px;border-radius:var(--r-pill)}
.shcard svg{display:block;width:100%;max-width:260px;height:auto;margin:10px 0 8px;color:var(--ink-3)}
.shcap{font-size:var(--t4);line-height:1.5;color:var(--ink-2);margin:0}
@media (min-width:680px){
  #shapeBody{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .shcard{margin-bottom:0}
}

.tl-intro{font-size:var(--t4);color:var(--ink-3);line-height:1.5;max-width:64ch;margin:0 0 16px}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.tl-group{background:var(--surface);padding:15px 16px 16px}
.tl-lay{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--lc);display:block;
}
.tl-h{font-size:var(--t5);font-weight:700;color:var(--ink);margin:5px 0 10px;letter-spacing:-.012em}
.tl-items{display:flex;flex-direction:column;gap:7px}
.tl-item{display:flex;flex-direction:column;gap:1px}
.tl-n{font-family:var(--mono);font-size:var(--t2);font-weight:600;color:var(--ink)}
.tl-d{font-size:var(--t3);line-height:1.4;color:var(--ink-3)}


/* ---------- brand + return-to-step ---------- */
.brand{display:inline-block;color:var(--ink);line-height:0}
.brand svg{display:block;height:26px;width:auto}

.backbar{padding:10px 14px 0}
.backbtn.lesson{
  background:color-mix(in srgb, var(--l1) 13%, transparent);
  border-color:color-mix(in srgb, var(--l1) 40%, transparent);
  color:var(--l1);
}
.backbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--l5-bg);border:1px solid color-mix(in srgb,var(--l5) 40%,transparent);
  border-radius:var(--r-sm);padding:8px 12px;color:var(--l5);
}
.backbtn:hover{border-color:var(--l5)}
.bb-ico{font-size:var(--t5);line-height:1;flex:none}
.bb-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.bb-k{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;
}
.bb-v{
  font-family:var(--mono);font-size:var(--t2);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rig.insp-off .backbar{display:none}


/* ---------- where a step runs ---------- */
.envtag{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;cursor:help;
}
.envtag.managed{background:var(--l6-bg);color:var(--l6)}
.envtag.selfhosted{background:var(--l2-bg);color:var(--l2)}
.envtag.local{background:var(--l3-bg);color:var(--l3)}
.tmeta .e-managed{background:var(--l6-bg);color:var(--l6)}
.tmeta .e-selfhosted{background:var(--l2-bg);color:var(--l2)}
.tmeta .e-local{background:var(--l3-bg);color:var(--l3)}


/* ---------- card actions, revise bar ---------- */
.tcard-main{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:13px 15px 12px;color:inherit;
}
.tcard-acts{
  display:flex;gap:6px;padding:0 15px 12px;flex-wrap:wrap;
}
.minibtn{
  font-family:var(--mono);font-size:var(--t1);font-weight:700;letter-spacing:.07em;
  padding:4px 11px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface-2);border:1px solid transparent;color:var(--ink-3);
}
.minibtn:hover{color:var(--ink);border-color:var(--rule-2)}
.minibtn.danger:hover{color:var(--l6);border-color:var(--l6)}
.minibtn.armed{background:var(--l6);border-color:var(--l6);color:var(--surface)}
.minibtn.armed:hover{color:var(--surface);filter:brightness(1.08)}

.revbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--l5-bg);border-radius:var(--r-sm);padding:9px 12px;margin:0 0 3px;
}
.rev-k{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--l5);display:block;
}
.rev-v{font-size:var(--t4);font-weight:700;color:var(--ink);display:block;margin-top:1px}


/* ---------- one pill per fact ---------- */
.hpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;align-items:center}
.hpills.trace{margin-top:11px;padding-top:11px;border-top:1px dashed var(--rule)}
.hpill{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.08em;
  padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--surface-2);color:var(--ink-3);border:1px solid transparent;
}
.hpill.quiet{background:none;color:var(--ink-3);font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-left:0}
.hpill.node{cursor:pointer;background:var(--ink);color:var(--ground)}
.hpill.node:hover{filter:brightness(1.25)}

/* The layer is where the step sits, not a fact about it, so it reads as a plain
   breadcrumb rather than a pill competing with the term. */
.step-crumb{
  font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.05em;
  color:var(--ink-3);white-space:nowrap;
}
/* Who performs a step and where it runs are metadata about the step, not facts
   as prominent as the term itself, so each gets a small label instead of
   looking like an unlabelled pill of the same weight. */
.metatag{
  display:inline-flex;align-items:baseline;gap:5px;cursor:help;
  font-size:var(--t1);color:var(--ink-3);white-space:nowrap;
}
.metatag b{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);opacity:.7;
}
.metatag.actor{color:var(--ink-2)}
.metatag.env.managed{color:var(--l6)} .metatag.env.managed b{color:var(--l6);opacity:.85}
.metatag.env.selfhosted{color:var(--l2)} .metatag.env.selfhosted b{color:var(--l2);opacity:.85}
.metatag.env.local{color:var(--l3)} .metatag.env.local b{color:var(--l3);opacity:.85}
.metatag.wts.openweights,.metatag.wts.opensource{color:var(--l2)}
.metatag.wts.openweights b,.metatag.wts.opensource b{color:var(--l2);opacity:.85}


.deftrace{
  font-size:var(--t5);line-height:1.6;color:var(--ink-2);max-width:72ch;margin:14px 0 0;
}
.deftrace b{color:var(--ink);font-weight:700}
.tr-acts{display:flex;align-items:center;gap:18px;flex:none}


/* ---------- what else is running, and why ---------- */
.alsolist{display:flex;flex-direction:column;gap:11px}
.alsorow{padding:0}
.alsorow.l1{--lc:var(--l1)} .alsorow.l2{--lc:var(--l2)} .alsorow.l3{--lc:var(--l3)}
.alsorow.l4{--lc:var(--l4)} .alsorow.l5{--lc:var(--l5)} .alsorow.l6{--lc:var(--l6)}
.alsohead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.alsowhy{
  font-family:var(--mono);font-size:var(--t1);font-weight:700;letter-spacing:.06em;
  color:var(--lc);
}
.alsofull{
  font-size:var(--t4);line-height:1.5;color:var(--ink-3);margin:5px 0 0;max-width:46ch;
}


/* ---------- stepping: highlight and hint ---------- */
.icb.nudge{
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);
  animation:nudge 1.9s ease-out infinite;
}
@keyframes nudge{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .icb.nudge{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
}
#stepScrim{z-index:52}
#stepModal{z-index:53;width:min(500px,92vw)}
.hintrows{list-style:none;margin:2px 0 14px;padding:0;display:flex;flex-direction:column;gap:14px}
.hintrows li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 13px;align-items:start}
.hintkey{
  width:30px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--accent);color:var(--accent);margin-top:1px;
}
.hintkey.solid{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.hintrows li > div{font-size:var(--t5);line-height:1.55;color:var(--ink-2);max-width:48ch}
.hintrows b{color:var(--ink);font-weight:600}


/* ---------- inline glossary links ---------- */
.gloss{
  font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px dotted color-mix(in srgb,var(--accent) 60%,transparent);
  line-height:inherit;display:inline;text-align:left;
}
.gloss:hover{border-bottom-style:solid;border-bottom-color:var(--accent)}
.stepnote .gloss,.cc-v .gloss{color:inherit;border-bottom-color:currentColor;opacity:.95}
.stepnote .gloss:hover,.cc-v .gloss:hover{color:var(--accent);border-bottom-color:var(--accent);opacity:1}
#glossScrim{z-index:54}
#glossModal{z-index:55;width:min(520px,92vw)}
.gloss-kind{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px;
}


.vmap{white-space:nowrap}
.vmap .lnk{font-size:var(--t2)}
.vnone{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);opacity:.6}
td:nth-child(3) .gloss{font-family:var(--serif)}


.g-def{font-size:var(--t5)!important;line-height:1.6!important;color:var(--ink)!important;max-width:56ch}
.g-bridge{
  font-size:var(--t5)!important;line-height:1.6!important;color:var(--ink-2)!important;max-width:54ch;
  border:1px solid color-mix(in srgb,var(--l2) 26%,transparent);background:var(--l2-bg);
  border-radius:var(--r-sm);padding:10px 14px;margin:0!important;
}
.g-none{font-size:var(--t4);color:var(--ink-3);margin:0}
#glossBody h4:first-child{margin-top:0;padding-top:0;border-top:none}


/* A sentence, not a pill: it needs to be able to break, and it reads as
   running text rather than a label. */
.modelline{
  font:inherit;font-size:var(--t4);line-height:1.6;color:var(--ink-2);
  white-space:normal;max-width:100%;min-width:0;text-align:left;overflow-wrap:anywhere;
}
.hpills.models{margin-top:9px;padding-top:0;border-top:0;align-items:flex-start}
.hpills.trace:empty,.hpills.models:empty{display:none}
.hpills.models .hpill.quiet{padding-top:5px}
/* Maker's mark in front of the model link it names. */
.modelmark{display:inline-flex;align-items:center;gap:5px;vertical-align:-3px}
.modelmark .lg{width:14px;height:14px}


/* The product name sits beside the Crema mark rather than beneath it. */
.brandline{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap}
.brandsep{width:1px;height:22px;background:var(--rule-2);display:block;flex:none}
.mast .brandline h1{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0;letter-spacing:-.03em}
.mast .brand svg{height:22px}
.mast-row{align-items:center}
@media (max-width:560px){.brandsep{display:none}.brandline{gap:10px}}

/* ---------- trace library drawer ---------- */
.pill.solid{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}
.pill.solid:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--surface)}
.pill .cnt{opacity:.7;margin-left:6px;font-variant-numeric:tabular-nums}
.scen-now{
  font-family:var(--mono);font-size:var(--t2);font-weight:600;color:var(--ink);
  padding:0 4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.scen-now.empty{color:var(--ink-3);font-weight:400}

.scrim{
  position:fixed;inset:0;z-index:40;background:rgba(6,8,14,.52);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.scrim.on{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(430px,94vw);
  background:var(--surface);border-left:1px solid var(--rule);
  border-radius:var(--r) 0 0 var(--r);
  box-shadow:-20px 0 60px rgba(6,8,14,.22);
  display:flex;flex-direction:column;
  transform:translateX(102%);visibility:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;
}
.drawer.on{transform:translateX(0);visibility:visible}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px 15px;border-bottom:1px solid var(--rule);flex:none;
}
.drawer-eyebrow{
  font-family:var(--mono);font-size:var(--t0);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px;
}
.drawer-head h3{font-size:var(--t7);letter-spacing:-.022em}
.drawer-x{
  width:30px;height:30px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--r-pill);background:var(--surface-2);border:1px solid transparent;color:var(--ink-2);
}
.drawer-x:hover{color:var(--ink);border-color:var(--rule-2)}
.drawer-body{overflow-y:auto;padding:16px 20px 28px;display:flex;flex-direction:column;gap:9px}

.tgroup{
  font-family:var(--mono);font-size:var(--t0);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:14px 0 0;
}
.tgroup:first-child{margin-top:0}
.tnote{
  font-size:var(--t4);line-height:1.55;color:var(--ink-2);
  background:var(--surface-2);border-radius:var(--r-sm);padding:11px 13px;margin:0 0 3px;
}
.tnote b{color:var(--ink);font-weight:600}
/* A container, not a control: the clickable region and the actions live inside. */
.tcard{
  display:block;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:0;transition:border-color .13s,background .13s;
}
.tcard:hover{border-color:var(--accent);background:var(--surface-2)}
.tcard[aria-current="true"]{border-color:var(--accent);background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
.tcard .tname{font-size:var(--t5);font-weight:700;color:var(--ink);letter-spacing:-.015em;display:block}
.tcard .tdom{
  font-family:var(--mono);font-size:var(--t0);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:4px;
}
.tcard .tsum{font-size:var(--t4);line-height:1.5;color:var(--ink-3);margin:6px 0 0}
.tcard .tmeta{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;
  font-family:var(--mono);font-size:var(--t1);font-weight:600;
}
.tmeta span{padding:3px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tcard:hover .tmeta span,.tcard[aria-current="true"] .tmeta span{background:var(--ground)}
.tmeta .m-model{background:var(--l1-bg);color:var(--l1)}
.tmeta .m-system{background:var(--l3-bg);color:var(--l3)}
.tmeta .m-human{background:var(--l4-bg);color:var(--l4)}

.drawer-tabs{display:flex;gap:6px;padding:11px 20px 12px;border-bottom:1px solid var(--rule);flex:none}
.tnote.quiet{background:transparent;border:1px dashed var(--rule-2);color:var(--ink-3)}
.cinput,.cta{
  width:100%;font-family:var(--sans);font-size:var(--t4);color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-sm);
  padding:10px 13px;line-height:1.5;
}
.cinput{border-radius:var(--r-pill);font-size:var(--t3)}
.cta{resize:vertical;min-height:86px}
.cinput:focus,.cta:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.crow{display:flex;gap:7px;flex-wrap:wrap}
.pill.wide{flex:1 1 auto;text-align:center;padding:9px 16px}
.pill[disabled]{opacity:.6;cursor:default}
.cprog{background:var(--surface-2);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.cprog-h{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin:0;
}
.cstep{
  display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:baseline;
  font-size:var(--t4);line-height:1.45;color:var(--ink-2);
}
.cstep b{
  font-family:var(--mono);font-size:var(--t1);color:var(--accent);font-variant-numeric:tabular-nums;
}
.cstep.quiet{color:var(--ink-3);grid-template-columns:1fr}
.cerr{
  font-size:var(--t4);line-height:1.5;color:var(--l6);background:var(--l6-bg);
  border-radius:var(--r-sm);padding:10px 13px;margin:0;
}
.actor{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;
}
.actor.model{background:var(--l1-bg);color:var(--l1)}
.actor.system{background:var(--l3-bg);color:var(--l3)}
.actor.human{background:var(--l4-bg);color:var(--l4)}

footer{
  border-top:2px solid var(--ink);margin-top:72px;padding-top:18px;
  font-family:var(--mono);font-size:var(--t1);letter-spacing:.06em;color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:6px 26px;
}
:where(a,button,input,summary,label):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}


/* Page nav. A level above .viewbar, which switches views of the map, so it sits
   in the masthead rather than above the canvas and borrows .pill to read as
   navigation rather than as another filter row. */
.pagenav{display:flex;gap:7px;flex:none}
@media (max-width:560px){ .pagenav{order:3;width:100%} .pagenav .pill{flex:1 1 auto;text-align:center} }

/* Who is signed in. Injected by the hosted app at runtime, so it never appears
   in the artifact or the mailable build. */
.whoami{display:flex;align-items:center;gap:8px;flex:none;font-size:var(--t2);color:var(--ink-3)}
.whoami .who{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ============================== SHELL ==============================
   A sticky left rail instead of a masthead. Navigation, the explainer and who
   is signed in all lived as pills across the top; collecting them down the side
   gives the map the full width of the page and leaves one row of chrome above
   it instead of three. Light text throughout: a pill now means an action you
   take, not a place you are. */

.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100dvh}

.sidenav{
  position:sticky;top:0;align-self:start;height:100dvh;
  display:flex;flex-direction:column;gap:26px;
  padding:26px 16px 18px;
  border-right:1px solid var(--rule);background:var(--ground);
}
.sn-top{display:flex;flex-direction:column;gap:11px;padding:0 8px}
.sn-top .brand{display:block;width:74px;color:var(--ink)}
.sn-top .brand svg{width:100%;height:auto;display:block}
.sn-title{
  margin:0;font-size:var(--t2);font-weight:600;letter-spacing:.01em;color:var(--ink-2);
  display:flex;align-items:center;gap:6px;
}
/* The AI Brew Guide pour-over mark. Inline SVG in currentColor, so it takes the
   text colour around it and themes for dark mode with no second asset. */
.bw-mark{width:18px;height:18px;flex:none;color:var(--ink)}
.bw-head{display:flex;align-items:center;gap:10px}
.bw-head .bw-mark{width:24px;height:24px}

.sn-search{
  display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;
  padding:7px 9px;border-radius:var(--r-sm);border:1px solid var(--rule-2);
  background:var(--surface);color:var(--ink-3);font:inherit;font-size:var(--t3);cursor:pointer;
}
.sn-search:hover{color:var(--ink);border-color:var(--rule-2);background:var(--surface-2)}
.sn-search span{flex:1 1 auto;text-align:left}
.sn-search kbd{
  font-family:var(--mono);font-size:var(--t0);color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;padding:1px 5px;
}

.hmodal.search{width:min(560px,92vw);max-height:min(420px,70vh)}
.srch-head{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  flex:none;color:var(--ink-3);
}
.srch-head input{
  flex:1 1 auto;border:0;background:none;font:inherit;font-size:var(--t6);color:var(--ink);
}
.srch-head input:focus{outline:none}
.srch-head kbd{
  font-family:var(--mono);font-size:var(--t0);color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:4px;padding:1px 6px;
}
.srch-results{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1 1 auto}
.srch-row{
  display:flex;align-items:baseline;gap:10px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;
}
.srch-row[aria-selected="true"]{background:var(--surface-2)}
.srch-row .st{font-size:var(--t5);font-weight:600;color:var(--ink);white-space:nowrap;flex:0 0 auto;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.srch-row .sk{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 34px;
}
.srch-row .sd{
  font-size:var(--t3);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;
}
.srch-none{font-family:var(--mono);font-size:var(--t3);color:var(--ink-3);padding:4px 18px 18px}

/* term submission + review */
.tr-count{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--l3);color:var(--surface);font-family:var(--mono);font-size:var(--t0);
  font-variant-numeric:tabular-nums;
}
.term-field{margin-bottom:14px}
.term-field label{
  display:block;font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.term-field label .opt{text-transform:none;letter-spacing:0;font-weight:400}
.term-field input,.term-field textarea{width:100%;box-sizing:border-box}

.hmodal.wide .hm-body{padding:16px 24px 20px}
.term-rev-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 24px;border-bottom:1px solid var(--rule);flex:none;
}
.term-check{display:flex;align-items:center;gap:8px;font-size:var(--t3);color:var(--ink-2);cursor:pointer}
.term-rev-acts{display:flex;gap:8px}
.term-row{
  display:flex;flex-direction:column;gap:8px;padding:16px 0;border-bottom:1px solid var(--rule);
}
.term-row:last-child{border-bottom:none}
.term-row-head{display:flex;align-items:flex-start;gap:10px}
.term-row-head input[type=checkbox]{margin-top:4px}
.term-row-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.term-row-title h4{font-size:var(--t6);letter-spacing:-.014em;margin:0}
.term-badge{
  font-family:var(--mono);font-size:var(--t0);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);border-radius:var(--r-pill);padding:2px 8px;
}
.term-badge.new{color:var(--surface);background:var(--l4)}
.term-row-body{margin-left:26px;display:flex;flex-direction:column;gap:8px}
.term-row-body p{font-size:var(--t4);line-height:1.55;color:var(--ink-2);margin:0}
.term-row-body .tk{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:2px;
}
.term-placement{font-size:var(--t3);color:var(--ink-3)}
.term-placement b{color:var(--ink);font-weight:600}
.term-row.done{opacity:.45}
.term-row.rejected .term-row-body{text-decoration:line-through}
.term-none{font-family:var(--mono);font-size:var(--t3);color:var(--ink-3);padding:24px 0}

.sn-group{display:flex;flex-direction:column;gap:1px}
.sn-lbl{
  margin:0 0 7px;padding:0 8px;
  font-size:var(--t0);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);opacity:.7;
}
.sn-item{
  font:inherit;font-size:var(--t4);font-weight:500;text-align:left;
  padding:7px 8px;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:none;color:var(--ink-2);
  transition:background .12s,color .12s;
}
.sn-item:hover{background:var(--surface-2);color:var(--ink)}
.sn-item[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600}

.sn-sep{flex:1 1 auto}
.sn-foot:empty{display:none}

/* Who is signed in. Stacked and quiet: it is a status line, not a control. */
.sidenav .whoami{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:0 8px;font-size:var(--t2);color:var(--ink-3);
}
.sidenav .whoami .who{max-width:100%}
.sidenav .whoami .pill{
  padding:0;border:0;background:none;color:var(--ink-3);
  font-family:var(--sans);font-size:var(--t2);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--rule-2);
}
.sidenav .whoami .pill:hover{color:var(--ink)}

.stage-col{min-width:0;padding:0 34px;max-width:1280px}

/* The map card carried a border, a radius and its own padding inside a page
   that already had a border and a radius. One frame is enough. */
.tracerail{border:0;border-radius:0;padding:0;margin:26px 0 10px;background:none}
.viewbar{padding:4px 0 0;background:none;border-bottom:1px solid var(--rule);gap:0}
.viewbar .lbl{display:none}
.layerbar{padding:16px 2px 0;background:none;border-top:0;gap:0 4px}
.layerbar .lbl{margin-right:12px}
.rig{margin-top:18px}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidenav{
    position:static;height:auto;flex-direction:row;align-items:center;gap:18px;
    flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--rule);padding:14px 18px;
  }
  .sn-top{flex-direction:row;align-items:center;gap:12px;padding:0}
  .sn-group{flex-direction:row;align-items:center;gap:2px}
  .sn-lbl{display:none}
  .sn-sep{flex:1 1 auto}
  .sidenav .whoami{flex-direction:row;align-items:center;gap:10px}
  .stage-col{padding:0 18px}
}


/* Reclaiming the vertical space above the map. The graph was starting 345px
   down a 900px viewport, so a third of the screen was chrome before any of the
   thing you came to look at. */
.tracerail{margin:18px 0 6px}
.tr-head{padding-bottom:10px}
.tr-strip{gap:10px}
.trc{padding:11px 13px}
.trc p{margin:5px 0 0;line-height:1.45}
.viewbar{padding:2px 0 0}
.mapbar{padding:10px 2px}
.layerbar{padding:12px 2px 2px;flex-wrap:nowrap;align-items:baseline}
.layerbar .grp{flex-wrap:nowrap;gap:0}
.rig{margin-top:12px}


/* ============================== APP SHELL ==============================
   The page stopped being a document and became an application: one viewport
   tall, nothing below the fold, and the map taking every pixel the trace strip
   and the inspector do not need. The footer went with it, since a chrome bar
   pinned under a fixed-height app is dead space. Overlays are position:fixed,
   so they escape the clipping. */

html,body{height:100%}
body{overflow:hidden}

.shell{height:100dvh;overflow:hidden}
.stage-col{
  height:100dvh;max-width:none;
  display:flex;flex-direction:column;overflow:hidden;
  padding:0 28px;
}

#pageMap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#pageMap[hidden]{display:none}           /* display:flex would beat [hidden] */

/* The glossary is long-form, so it keeps its own scroll inside the shell. */
#pageGloss{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 44px}
#pageGloss[hidden]{display:none}
/* Same for Tools and Brands. Without it the grid ran past the bottom of the
   shell, which is overflow:hidden, and could not be scrolled at all. */
#pageTools{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 44px}
#pageTools[hidden]{display:none}

.tracerail{flex:none;margin:16px 0 0}
.rig{flex:1 1 auto;min-height:0;margin-top:12px;margin-bottom:16px}
.stage{min-height:0;overflow:hidden}
.viewbar,.mapbar,.layerbar{flex:none}
.canvas-hold{flex:1 1 auto;min-height:0;overflow-y:auto}
/* The other three views (runtime architecture, data and environments, business
   process) sit in the same clipped .stage as the canvas but don't size
   themselves the way the canvas does, so without their own scroll they got cut
   off at smaller window heights instead of scrolling. */
.vw{flex:1 1 auto;min-height:0;overflow-y:auto}
/* The canvas sets its own height in resize(). It matches the box while the
   graph fits, and exceeds it once the legibility floor stops the graph
   shrinking any further, at which point this container scrolls. */
canvas#map{height:auto}

/* Once the container scrolls, an absolutely positioned hint scrolls away with
   the drawing and ends up somewhere in the middle of it. Sticky pins it to the
   bottom of what is actually on screen instead, and the negative margin lifts
   it back over the canvas rather than adding a row under it. */
.hint{
  position:sticky;left:auto;bottom:9px;
  display:block;width:max-content;margin:-20px 0 0 14px;
}

/* The inspector grows with the window; its body already scrolls on its own. */
.inspector{min-height:0}

@media (max-width:900px){
  body{overflow:auto}
  .shell,.stage-col{height:auto;overflow:visible}
  #pageMap{min-height:0}
  .rig{min-height:70vh}
}


/* Chrome pays for the map. Every pixel these bars keep is one the graph does
   not get, so they are trimmed to their content and the trace summaries are
   clamped rather than allowed to set the height of the strip. */
.tr-head{padding:0 0 8px;min-height:0}
.trc{padding:9px 12px;gap:3px}
.trc .s{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.4;
}
.layerbar{padding:8px 2px 0}
.mapbar{padding:7px 2px}

/* Short windows give the map its space back first: the trace summaries go, and
   the strip becomes a row of labels. */
@media (max-height:900px){
  .trc .s{-webkit-line-clamp:1}
  .tr-head{padding-bottom:6px}
}
@media (max-height:700px){
  .trc .s{display:none}
  .trc{padding:8px 12px}
}


/* ============================== BREATHING ROOM ==============================
   Flattening the map card took its horizontal padding with it, so the tabs and
   the trace controls ended up hard against the edge. The containers are bigger
   now, so the padding scales with them rather than staying at the values that
   suited a 780px card. */

:root{ --gut:24px; }
@media (min-width:1500px){ :root{ --gut:32px; } }

.stage-col{padding:0 var(--gut)}

/* Header strip */
.tr-head{padding:22px 4px 14px;min-height:0}
.tracerail{margin:0 0 4px}
.tr-strip{gap:14px;padding:0 4px 2px}
.trc{padding:13px 16px;gap:5px}

/* Map chrome: the bars sit inside the rig, so they carry their own gutter. */
.viewbar{padding:0 var(--gut);gap:0}
.mapbar{padding:13px var(--gut)}
.layerbar{padding:14px var(--gut) 14px}
.canvas-hold{padding:0 8px}

/* The readout under the map was flush left against the rig border too. */
.rig{margin-top:14px;margin-bottom:var(--gut)}

/* Sidebar: same idea, a little more air now that it is the only navigation. */
.sidenav{padding:30px 18px 22px;gap:30px}
.sn-top,.sn-lbl,.sn-item,.sidenav .whoami{padding-left:10px;padding-right:10px}
.sn-item{padding-top:8px;padding-bottom:8px}

/* A 900px-tall window is the common laptop, and it cannot afford the roomy
   header: every pixel it takes comes straight off the map. The generous
   spacing above is for windows that can actually spare it. */
@media (max-height:980px){
  .tr-head{padding:14px 4px 10px}
  .trc{padding:9px 14px}
  .tr-strip{gap:10px}
  .mapbar{padding:9px var(--gut)}
  .layerbar{padding:10px var(--gut)}
  .rig{margin-top:10px;margin-bottom:14px}
}


/* ============================== LEARNING ==============================
   The learning path. Every colour, radius and type size here is a token the
   rest of the page already defines, and every layer accent comes through --lc
   the same way the map, the inspector and the diagram views set it. Nothing new
   is introduced, so the path themes with the rest for free.

   Built by src/learn/ui.js and stripped from both shipped files, so these rules
   are dead weight in artifact.html. They are a few hundred bytes and keeping
   the stylesheet in one piece is worth more than saving them. */

#pageLearn{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 64px}
#pageLearn[hidden]{display:none}

.lp{max-width:760px;margin:0 auto}
/* The module grid only. Prose keeps the 760px measure. */
.lp.wide{max-width:1180px}
.sn-count{
  display:block;font-size:var(--t1);font-weight:500;color:var(--ink-3);
  margin-top:1px;font-variant-numeric:tabular-nums;
}
.sn-item[aria-pressed="true"] .sn-count{color:var(--ink-2)}

.lp-eyebrow{
  display:block;font-size:var(--t0);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;
}
.lp h1{margin:0 0 12px;font-size:var(--t8);line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.lp-lede{margin:0;font-size:var(--t5);line-height:1.6;color:var(--ink-2)}
.lp-hero,.lp-mhead,.lp-lhead,.lp-qhead,.lp-rhead{padding:34px 0 10px}
.lp-rhead.ok h1{color:var(--l2)}

.lp-back{
  font:inherit;font-size:var(--t2);font-weight:500;color:var(--ink-3);
  background:none;border:0;padding:22px 0 0;cursor:pointer;
}
.lp-back::before{content:"\2190";margin-right:7px}
.lp-back:hover{color:var(--ink)}

/* ---- home ---- */
.lp-stats{display:flex;gap:10px;margin:22px 0 4px;flex-wrap:wrap}
.lp-stat{
  flex:1 1 150px;display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
}
.lp-stat .k{font-size:var(--t1);color:var(--ink-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lp-stat .v{font-size:var(--t6);font-weight:600;color:var(--ink)}

.lp-resume{margin:22px 0 10px;display:flex}
.lp-resume .pill.wide{flex:none;padding:12px 22px;font-size:var(--t4)}

/* Two columns at desk width: the mark, then the text. Below that the mark goes
   full width above the text, the way a course card works everywhere else. */
/* Across rather than down. Eight full-width rows made the list a scroll, and
   the shape of the whole path is the thing the home view is for. The mark sits
   above the text here, since a card this narrow has no room beside it. */
.lp-mods{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;margin:24px 0 26px;align-items:start;
}
.lp-mod{
  position:relative;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;height:100%;
}
.lp-modbody{padding:17px 19px 19px;min-width:0;display:flex;flex-direction:column;flex:1 1 auto}
.lp-mod .lp-acts{margin-top:auto;padding-top:15px}

/* The card's action, over the mark. Same corner on every card whatever the
   blurb length, so the row reads as a row. */
.lp-go{
  position:absolute;top:12px;right:12px;z-index:1;
  font-family:var(--mono);font-size:var(--t2);font-weight:600;
  padding:7px 15px;border-radius:var(--r-pill);cursor:pointer;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  border:1px solid var(--rule-2);color:var(--ink-2);
  backdrop-filter:blur(3px);
  transition:background .13s,color .13s,border-color .13s;
}
.lp-go:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface)}
.lp-go.solid{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lp-go.solid:hover{background:var(--ink-2);border-color:var(--ink-2)}
.lp-mod.empty{background:none;border-style:dashed}
.lp-mod.empty .lp-tile{opacity:.45}

/* The mark. A tint of the module's own layer colour behind geometry drawn in
   that colour, which is the whole palette: six hues, two opacities, no hex. */
.lp-tile{
  background:color-mix(in srgb, var(--lc) 9%, var(--surface));
  border-bottom:1px solid var(--rule);
  display:grid;place-items:center;padding:12px 14px;min-width:0;
}
.lp-tile svg{display:block;width:100%;height:auto}
.lp-tile.wide{
  border:1px solid var(--rule);border-radius:var(--r);margin:22px 0 4px;padding:22px;
}
.lp-tile.wide svg{max-height:184px}
/* On a lesson, the same mark shrunk to a badge, so a lesson is visibly part of
   its module without repeating the whole composition. */
.lp-tile.mark{
  width:56px;height:56px;padding:7px;border:1px solid var(--rule);
  border-radius:var(--r-sm);margin-bottom:14px;
}
.lp-tile.mark svg{max-height:none}
.lp-mod.passed{border-color:color-mix(in srgb,var(--l2) 40%,var(--rule))}
.lp-modhead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.lp-modhead .num{
  font-size:var(--t2);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.lp-mod h2{margin:0;font-size:var(--t6);font-weight:600;color:var(--ink);letter-spacing:-.005em}
.lp-blurb{margin:9px 0 0;font-size:var(--t3);line-height:1.6;color:var(--ink-2)}

.lp-chip,.lp-badge{
  margin-left:auto;font-size:var(--t1);font-weight:600;padding:3px 10px;
  border-radius:var(--r-pill);white-space:nowrap;
}
.lp-chip{background:var(--surface-2);color:var(--ink-2)}
.lp-chip.quiet{background:none;color:var(--ink-3);border:1px dashed var(--rule-2)}
.lp-badge{background:var(--l2-bg);color:var(--l2)}
.lp-badge.big{
  margin:0;font-size:var(--t3);padding:7px 15px;display:inline-block;
  border:1px solid color-mix(in srgb,var(--l2) 35%,transparent);
}
.lp-badges{
  margin:26px 0;padding:20px 22px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);display:flex;flex-wrap:wrap;gap:9px;align-items:center;
}
.lp-badges h3{margin:0 10px 0 0;width:100%;font-size:var(--t4);font-weight:600;color:var(--ink)}
.lp-badges .lp-note{width:100%;margin:6px 0 0}

.lp-acts{display:flex;align-items:center;gap:13px;margin-top:15px;flex-wrap:wrap}
.lp-skip{font-size:var(--t2);color:var(--ink-3)}

/* ---- module and lesson ---- */
.lp-lessons{list-style:none;margin:24px 0;padding:0;counter-reset:lp}
.lp-lessons li{counter-increment:lp;border-bottom:1px solid var(--rule)}
.lp-lessons li:first-child{border-top:1px solid var(--rule)}
.lp-lrow{
  display:flex;align-items:center;gap:14px;width:100%;
  font:inherit;font-size:var(--t4);text-align:left;color:var(--ink);
  background:none;border:0;padding:15px 4px;cursor:pointer;
}
.lp-lrow::before{
  content:counter(lp);font-size:var(--t2);font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:14px;
}
.lp-lrow:hover{background:var(--surface-2)}
.lp-lrow .t{flex:1 1 auto}
.lp-lrow .s{font-size:var(--t1);font-weight:600;color:var(--l2);text-transform:uppercase;letter-spacing:.06em}
.lp-lessons li.done .lp-lrow::before{color:var(--l2)}
.lp-lessons li.last .lp-lrow{box-shadow:inset 3px 0 0 var(--l2);padding-left:12px}

.lp-body{margin:20px 0 0}
.lp-p{margin:0 0 17px;font-size:var(--t5);line-height:1.68;color:var(--ink)}
.lp-h{margin:40px 0 13px;font-size:var(--t7);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lp-sh{margin:28px 0 11px;font-size:var(--t5);font-weight:600;color:var(--ink)}

/* Which module this is, pinned to the top of the scrolling section on every
   lesson and quiz page. Long lessons made it easy to lose track. */
.lp-where{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 0;margin-bottom:4px;background:var(--ground);
  border-bottom:1px solid var(--rule);
}
.lp-where .lp-back{padding:0}
.lp-wmod{
  font:inherit;font-size:var(--t3);font-weight:600;color:var(--ink);cursor:pointer;
  background:none;border:0;padding:0 0 0 12px;border-left:3px solid var(--lc);
}
.lp-wmod:hover{text-decoration:underline}
.lp-wpos{margin-left:auto;font-size:var(--t2);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Written analogy and example cards. Same kind label as a figure, because an
   example is the fourth step of every concept whether it is drawn or written. */
.lp-card{
  margin:22px 0;padding:16px 20px;border-radius:var(--r);border:1px solid var(--rule);
  background:color-mix(in srgb, var(--lc, var(--l1)) 5%, var(--surface));
}
.lp-card h4{margin:10px 0 6px;font-size:var(--t4);font-weight:600;color:var(--ink)}
.lp-card p{margin:8px 0 0;font-size:var(--t4);line-height:1.64;color:var(--ink)}
.lp-code{
  margin:10px 0 0;padding:11px 13px;border-radius:var(--r-sm);background:var(--sunk);
  font-family:var(--mono);font-size:var(--t2);line-height:1.6;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.lp-list{margin:0 0 18px;padding-left:20px}
.lp-list li{font-size:var(--t4);line-height:1.66;color:var(--ink);margin-bottom:8px}
.lp-note{
  margin:18px 0;padding:13px 16px;border-radius:var(--r-sm);background:var(--sunk);
  font-size:var(--t3);line-height:1.6;color:var(--ink-2);
}

/* A concept lifted straight out of N. Bordered on its layer colour so the
   layer is visible before the words are read. */
.lp-def{
  margin:22px 0;padding:19px 21px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--lc);
}
.lp-tag{
  display:block;font-size:var(--t0);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lc);margin-bottom:6px;
}
.lp-def h4{margin:0;font-size:var(--t6);font-weight:600;color:var(--ink)}
.lp-def h5{margin:17px 0 6px;font-size:var(--t2);font-weight:700;color:var(--ink-3);
  letter-spacing:.05em;text-transform:uppercase}
.lp-aka{margin:3px 0 0;font-size:var(--t2);color:var(--ink-3)}
.lp-literal{margin:13px 0 0;font-size:var(--t4);line-height:1.66;color:var(--ink)}
.lp-def p{margin:0;font-size:var(--t4);line-height:1.64;color:var(--ink-2)}
.lp-deffoot{margin-top:15px}
.lp-defhead .dg-brand{margin-top:11px}
.lp-defhead .dg-brand .bn{font-size:var(--t1)}

.lp-brands{margin:20px 0}
.lp-brands .cap{margin:9px 0 0;font-size:var(--t2);line-height:1.6;color:var(--ink-3)}

.lp-pager{display:flex;gap:10px;margin:34px 0 10px;flex-wrap:wrap}
.lp-pager .pill{padding:10px 17px;font-size:var(--t3)}

/* ---- figures ---- */
/* A figure is a framed object with its kind declared above it, because a reader
   who takes an analogy for the mechanism has been taught something false. The
   tint behind it is the same nine per cent of the layer colour the module marks
   use, so a figure reads as part of the same system. */
.lp-fig{
  margin:26px 0;padding:18px 20px 16px;border:1px solid var(--rule);
  border-radius:var(--r);background:color-mix(in srgb, var(--lc) 6%, var(--surface));
}
.lp-fig svg{display:block;width:100%;height:auto}
.lp-fig figcaption{
  margin-top:13px;padding-top:12px;border-top:1px solid color-mix(in srgb, var(--lc) 22%, transparent);
  font-size:var(--t2);line-height:1.6;color:var(--ink-2);
}
.lp-kind{
  display:inline-block;margin-bottom:12px;
  font-size:var(--t0);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
  color:var(--lc);background:color-mix(in srgb, var(--lc) 14%, transparent);
}
/* An analogy is marked differently from a diagram on purpose. It is the one
   kind that is not a picture of the real thing. */
.lp-kind[data-k="analogy"]{
  background:none;border:1px dashed color-mix(in srgb, var(--lc) 45%, transparent);
}
.lp-fig .lp-tbl{margin-top:2px}
.lp-fig .lp-cta{margin:0}
.lp-fig:not(.kinded){border:0;background:none;padding:0;margin:20px 0}

.lp-kind[data-k="video"]{background:none;border:1px solid color-mix(in srgb, var(--lc) 45%, transparent)}
.lp-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--sunk)}
.lp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.lp-tbl{width:100%;border-collapse:collapse;font-size:var(--t3)}
.lp-tbl th{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-2);
  font-size:var(--t1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.lp-tbl td{padding:10px 12px;border-bottom:1px solid var(--rule);color:var(--ink)}
.lp-tbl td.tnum{text-align:right;color:var(--ink-2)}

.lp-layers{display:flex;flex-direction:column;gap:6px}
.lp-layer{
  display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--lc) 9%,transparent);
  border-left:3px solid var(--lc);
}
.lp-layer .num{font-size:var(--t2);font-weight:700;color:var(--lc);font-variant-numeric:tabular-nums}
.lp-layer .nm{flex:1 1 auto;font-size:var(--t4);font-weight:600;color:var(--ink)}
.lp-layer .ct{font-size:var(--t2);color:var(--ink-3)}
.lp-layers.wide{gap:10px;margin:22px 0}
.lp-layer.col{flex-direction:column;align-items:flex-start;gap:9px}
.lp-layer.col .nm{font-size:var(--t5)}

.lp-nodes{display:flex;flex-wrap:wrap;gap:5px}
.lp-node{
  font:inherit;font-size:var(--t2);font-weight:500;padding:5px 11px;cursor:pointer;
  border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--rule-2);color:var(--ink-2);
}
.lp-node:hover{border-color:var(--ink-3);color:var(--ink)}
.lp-node.flat{
  cursor:default;background:color-mix(in srgb,var(--lc) 13%,transparent);
  border-color:color-mix(in srgb,var(--lc) 30%,transparent);color:var(--lc);
}
.lp-nodes.small{margin-top:13px}

/* The tools a module is about. Marks only on a card, where there is no room to
   name them, and marks with names on the module page, where there is. */
.lp-mbrands{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}
.lp-mbrands .dg-brand{gap:8px}
.lp-mbrands:not(.wide) .dg-brand .bn{display:none}
.lp-mbrands.wide{margin-top:20px;padding-top:16px}
.lp-mbrands.wide .k{
  display:block;margin-bottom:10px;font-size:var(--t0);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}

.lp-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---- the vocabulary tables ---- */
.lp-vocab{margin:22px 0}
.lp-vhead{
  display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:var(--r-sm);
  background:var(--surface-2);margin-bottom:10px;
}
.lp-vhead[data-v="same"]{background:var(--l2-bg)}
.lp-vhead[data-v="care"]{background:var(--l4-bg)}
.lp-vhead[data-v="no"]{background:var(--l6-bg)}
.lp-vhead .vb{font-size:var(--t3);font-weight:700;color:var(--ink)}
.lp-vhead .vn{font-size:var(--t2);color:var(--ink-2)}
.lp-vrow{padding:14px 2px;border-bottom:1px solid var(--rule)}
.lp-vterm{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.lp-vterm b{font-size:var(--t4);color:var(--ink)}
.lp-vterm .alias{font-size:var(--t2);color:var(--ink-3)}
.lp-vrow p{margin:7px 0 9px;font-size:var(--t3);line-height:1.62;color:var(--ink-2)}

/* ---- quiz ---- */
.lp-track{display:block;height:3px;border-radius:var(--r-pill);background:var(--sunk);margin-top:12px}
.lp-track i{display:block;height:100%;background:var(--ink);border-radius:var(--r-pill);transition:width .2s}
.lp-q{margin:22px 0}
.lp-q h2{margin:0 0 18px;font-size:var(--t6);line-height:1.45;font-weight:600;color:var(--ink)}
/* The situation a scenario question is about. Set apart from the question, so
   it is clear which part is the case and which part is being asked. */
.lp-sit{
  margin:0 0 20px;padding:15px 18px;border-radius:var(--r);
  background:var(--sunk);border-left:3px solid var(--ink-3);
}
.lp-sitk{
  display:block;margin-bottom:7px;font-size:var(--t0);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.lp-sit p{margin:0;font-size:var(--t4);line-height:1.62;color:var(--ink)}
.lp-steps{margin:0 0 20px;padding:15px 18px 15px 36px;border-radius:var(--r);background:var(--sunk)}
.lp-steps li{font-size:var(--t3);line-height:1.6;color:var(--ink-2);margin-bottom:5px}

.lp-opts{display:flex;flex-direction:column;gap:8px}
.lp-opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  font:inherit;font-size:var(--t4);line-height:1.55;color:var(--ink);
  padding:14px 16px;border-radius:var(--r);cursor:pointer;
  background:var(--surface);border:1px solid var(--rule-2);
  transition:border-color .12s,background .12s;
}
.lp-opt:hover:enabled{border-color:var(--ink-3)}
.lp-opt[disabled]{cursor:default;opacity:.72}
.lp-opt .ltr{
  flex:0 0 20px;height:20px;border-radius:var(--r-pill);background:var(--surface-2);
  font-size:var(--t1);font-weight:700;color:var(--ink-3);text-align:center;line-height:20px;
}
.lp-opt.right{border-color:var(--l2);background:var(--l2-bg);opacity:1}
.lp-opt.right .ltr{background:var(--l2);color:var(--surface)}
.lp-opt.wrong{border-color:var(--l6);background:var(--l6-bg);opacity:1}
.lp-opt.wrong .ltr{background:var(--l6);color:var(--surface)}

.lp-feedback{
  margin:16px 0;padding:15px 18px;border-radius:var(--r);background:var(--surface-2);
}
.lp-feedback .vb{
  display:block;font-size:var(--t1);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:7px;
}
.lp-feedback .vb.ok{color:var(--l2)}
.lp-feedback .vb.no{color:var(--l6)}
.lp-feedback p{margin:0;font-size:var(--t3);line-height:1.64;color:var(--ink-2)}
.lp-q .pill.wide{margin-top:4px;text-align:center;padding:12px 18px;font-size:var(--t4);width:100%}

@media (max-width:900px){
  .lp{max-width:none}
  .lp h1{font-size:var(--t7)}
  .lp-mods{grid-template-columns:1fr}
  .lp-tile svg{max-height:120px}
}


/* ---- collapsing the nav rail ----
   A width change on the grid column, not display:none, so the rail keeps its
   place and the toggle stays reachable in both states. Everything inside it
   except the toggle is hidden by the rail being too narrow to hold it. */
.sn-toggle{
  position:absolute;top:22px;right:10px;
  display:grid;place-items:center;width:24px;height:24px;
  border:0;border-radius:var(--r-sm);background:none;color:var(--ink-3);cursor:pointer;
  transition:background .12s,color .12s,transform .16s;
}
.sn-toggle:hover{background:var(--surface-2);color:var(--ink)}
.sidenav{position:sticky;overflow:visible}
.sidenav{padding-right:42px}

body.nav-off .shell{grid-template-columns:44px minmax(0,1fr)}
body.nav-off .sidenav{padding:22px 0 18px;gap:0;align-items:center}
body.nav-off .sidenav > *:not(.sn-toggle){display:none}
body.nav-off .sn-toggle{right:10px;transform:rotate(180deg)}

@media (max-width:900px){
  /* The rail is already a horizontal strip here and collapsing it saves
     nothing worth the confusion of a second layout. */
  .sn-toggle{display:none}
  body.nav-off .shell{grid-template-columns:1fr}
  body.nav-off .sidenav > *{display:revert}
  body.nav-off .sidenav{padding:14px 18px;gap:18px}
}

/* ============================== HEADLINES ==============================
   A reading column, one day per block. The date is the only heading; a new
   term or version is a full item with its links, and a weekly-review change
   sits underneath as a single quieter line. */
#pageNews{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 56px}
#pageNews[hidden]{display:none}
.nw-head{flex-direction:column;align-items:flex-start;gap:6px}
.nw-feed{max-width:760px;padding:0 4px}
.nw-day{padding:22px 0 8px;border-top:1px solid var(--rule)}
.nw-day:first-child{border-top:0;padding-top:6px}
.nw-date{
  margin:0 0 14px;font-family:var(--mono);font-size:var(--t2);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.nw-item{padding:0 0 20px}
.nw-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.nw-kind{
  font-family:var(--mono);font-size:var(--t1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule-2);
  border-radius:3px;padding:1px 5px;
}
.nw-kind[data-kind="new_term"]{color:var(--l2);border-color:currentColor}
.nw-kind[data-kind="new_tool"]{color:var(--l4);border-color:currentColor}
.nw-kind[data-kind="new_version"]{color:var(--l1);border-color:currentColor}
.nw-kind[data-kind="deprecated"],.nw-kind[data-kind="shutdown"],.nw-kind[data-kind="risk"]{color:var(--l6);border-color:currentColor}
.nw-term{font-size:var(--t3);font-weight:600}
span.nw-term{color:var(--ink-2)}
.nw-title{margin:0 0 6px;font-size:var(--t6);font-weight:650;line-height:1.35;color:var(--ink);text-wrap:balance}
.nw-sum{margin:0 0 8px;font-size:var(--t4);line-height:1.6;color:var(--ink-2);max-width:66ch}
.nw-src{display:flex;flex-wrap:wrap;gap:4px 14px}
.nw-src a{
  font-family:var(--mono);font-size:var(--t2);color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid var(--rule-2);
}
.nw-src a:hover{color:var(--ink);border-bottom-color:currentColor}
.nw-src a::after{content:" \2197"}
.nw-minor{margin-top:2px;padding:12px 0 4px;border-top:1px dashed var(--rule)}
.nw-item.minor{padding-bottom:12px}
.nw-item.minor .nw-title{font-size:var(--t4);font-weight:600;margin-bottom:3px}
.nw-item.minor .nw-sum{font-size:var(--t3);margin-bottom:4px}

/* ============================== THE CATALOG ==============================
   Tools and Brands: a view switch, a filter, then one card per company or per
   kind. Versions sit under their tool as small chips, so the three levels
   read top to bottom without a second page. */
.tl-bar{padding:0 4px}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r-pill);padding:2px;background:var(--surface)}
.seg button{
  font:inherit;font-size:var(--t3);font-weight:600;color:var(--ink-3);background:none;border:0;
  border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)}
.tl-bar input[type=search]{flex:1 1 220px;max-width:360px}
.tl-group[hidden]{display:none}
.tl-item[hidden]{display:none}
.tl-item.off .tl-d{opacity:.7}
.tl-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px}
.tl-n .gloss{font-family:var(--mono);font-size:var(--t2);font-weight:600}
.tl-co{font-size:var(--t2);color:var(--ink-3)}
.tl-st{font-family:var(--mono);font-size:var(--t0);text-transform:uppercase;letter-spacing:.06em;color:var(--l6);border:1px solid currentColor;border-radius:3px;padding:0 4px}
.tl-vers{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.tl-ver{
  font:inherit;font-family:var(--mono);font-size:var(--t1);color:var(--ink-2);background:var(--sunk);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:1px 6px;cursor:pointer;
}
.tl-ver:hover{color:var(--ink);border-color:var(--ink-3)}
.tl-more{font-family:var(--mono);font-size:var(--t1);color:var(--ink-3);padding:1px 2px}
.tl-blurb{font-size:var(--t3);line-height:1.5;color:var(--ink-3);margin:-4px 0 10px}
.tl-cohead{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.tl-cohead .lg{flex:none}
.tl-coname{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;font-size:var(--t5);font-weight:700;color:var(--ink);text-align:left}
.tl-coname:hover{text-decoration:underline}
/* Modal additions: a catalog entry's status, detail line and kind subheads. */
.g-status{display:inline-block;font-family:var(--mono);font-size:var(--t1);text-transform:uppercase;letter-spacing:.06em;color:var(--l6);border:1px solid currentColor;border-radius:3px;padding:1px 5px;margin:0 0 8px}
.g-detail{font-family:var(--mono);font-size:var(--t2);color:var(--ink-2);margin:0 0 6px}
.g-kind{font-size:var(--t2);color:var(--ink-3);margin:8px 0 4px}
.g-site a{font-family:var(--mono);font-size:var(--t2);color:var(--ink-3)}


/* ============================== ADD A TERM ==============================
   One modal: the field, what the guide already has under that name, the
   result, and the review list folded underneath. */
#termReviewCount,.term-queue summary .sn-count{
  display:inline-block;margin:0 0 0 8px;padding:0 7px;border-radius:var(--r-pill);
  background:var(--l4);color:var(--surface);font-size:var(--t0);font-weight:700;line-height:17px;
  vertical-align:1px;
}
#termReviewCount[hidden]{display:none}
.term-live{display:flex;flex-direction:column;gap:2px;margin:-6px 0 12px}
.term-live:empty{display:none}
.term-live-h{
  font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px!important;
}
.term-hit{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:9px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface-2);
}
.term-hit:hover{border-color:var(--rule-2)}
.term-hit .sk{font-family:var(--mono);font-size:var(--t0);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.term-hit .st{font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-hit .go{font-size:var(--t2);font-weight:600;color:var(--accent)}
.term-more{margin:0 0 16px}
.term-more summary{
  cursor:pointer;font-size:var(--t3);font-weight:600;color:var(--ink-2);padding:4px 0;
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.term-more summary::-webkit-details-marker{display:none}
.term-more summary::before{content:"+";font-weight:700;color:var(--ink-3)}
.term-more[open] summary::before{content:"–"}
.term-more[open] summary{margin-bottom:10px}
.hm-body p.term-say{color:var(--ink);font-size:var(--t5);margin:0 0 12px}
.hm-body p.term-say.ok{color:var(--l2);font-weight:600}
.hm-body p.term-quiet{font-size:var(--t3);color:var(--ink-3);margin-top:12px}
.hm-body .crow{margin-top:14px}
.pill.quiet{border-color:transparent;padding-left:0;color:var(--ink-3)}
.term-badge.warn{color:var(--l6);background:var(--l6-bg)}
/* .hm-body h4 is a section label; a card's title is not one. */
.hm-body .term-row h4{
  font-family:var(--sans);font-size:var(--t6);font-weight:700;letter-spacing:-.014em;
  text-transform:none;color:var(--ink);margin:0;padding:0;border:0;
}
.term-row-body .tk + br{display:none}

.term-queue{margin:26px -24px 0;border-top:1px solid var(--rule)}
.term-queue summary{
  cursor:pointer;list-style:none;padding:14px 24px;
  font-family:var(--mono);font-size:var(--t1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;
}
.term-queue summary::-webkit-details-marker{display:none}
.term-queue summary::after{content:"";margin-left:auto;width:7px;height:7px;border:solid var(--ink-3);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);transition:transform .16s}
.term-queue[open] summary::after{transform:rotate(-135deg)}
.term-queue .term-rev-bar{border-top:1px solid var(--rule)}
.term-queue-rows{padding:0 24px}


/* ============================== PHONE ==============================
   Below 820px: no rail, a top bar that names the page, and a tab bar along
   the bottom. Sheets rise from the bottom instead of floating mid-screen,
   and the map is content only (see renderDeck() in app.js). */
.mtop,.mtabs,.mdeck,.srch-x{display:none}
.msheet{display:none}

@media (max-width:820px){
  :root{--gut:16px;--tabh:60px}
  body{overflow:auto;padding:0}
  .shell,.body-grid{display:block;height:auto;overflow:visible}
  .sidenav{display:none!important}
  .stage-col{height:auto;overflow:visible;padding:0 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 24px)}

  /* the top bar */
  .mtop{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:30;margin:0;
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:color-mix(in srgb,var(--ground) 88%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--rule);
  }
  .mtop-brand{display:flex;align-items:center;gap:8px;font-size:var(--t3);font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .mtop-brand .bw-mark{width:18px;height:18px}

  /* the tab bar */
  .mtabs{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;z-index:35;
    height:calc(var(--tabh) + env(safe-area-inset-bottom));
    padding:0 6px env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--rule);
  }
  .mtab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;cursor:pointer;color:var(--ink-3);padding:6px 0 4px;
    font-size:var(--t0);font-weight:600;letter-spacing:.02em;-webkit-tap-highlight-color:transparent;
  }
  .mtab .mt-ic{display:grid;place-items:center;width:44px;height:28px;border-radius:var(--r-pill);transition:background .15s,color .15s}
  .mtab svg{width:21px;height:21px}
  .mtab[aria-current="page"]{color:var(--ink)}
  .mtab[aria-current="page"] .mt-ic{background:var(--surface-2)}
  .mtab.add .mt-ic{background:var(--ink);color:var(--surface);width:46px;height:30px}
  .mtab.add{color:var(--ink)}
  .mt-badge{
    position:absolute;top:3px;left:calc(50% + 12px);min-width:17px;height:17px;padding:0 5px;
    border-radius:var(--r-pill);background:var(--l4);color:var(--surface);border:2px solid var(--surface);
    font-size:10px;font-weight:700;line-height:13px;text-align:center;box-sizing:border-box;
  }
  .mt-badge[hidden]{display:none}

  /* page headers and scroll: the body scrolls now, not each section */
  #pageNews,#pageGloss,#pageTools,#pageLearn{overflow:visible;padding-bottom:0}
  #pageMap{display:block}
  #pageMap[hidden]{display:none}
  .tr-head{padding:18px 0 10px!important;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  .tr-label{font-size:var(--t7)}

  /* bottom sheets */
  .hmodal,.hmodal.wide,#glossModal{
    left:0;right:0;top:auto;bottom:0;width:100%;max-height:92dvh;
    border-radius:18px 18px 0 0;border-bottom:0;
    transform:translateY(24px);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .hmodal.on{transform:translateY(0)}
  .hmodal::before{
    content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;
    border-radius:var(--r-pill);background:var(--rule-2);
  }
  .hm-head{padding:22px 18px 12px}
  .hm-body,.hmodal.wide .hm-body{padding:16px 18px 22px}
  .hm-body p{font-size:var(--t4)}
  .term-queue{margin:22px -18px 0}
  .term-queue summary,.term-queue-rows,.term-queue .term-rev-bar{padding-left:18px;padding-right:18px}
  .term-row-body{margin-left:0}
  .cinput{font-size:16px;padding:12px 16px}       /* 16px stops iOS zooming into the field */
  .cta{font-size:16px}
  .pill{padding:11px 16px;font-size:var(--t3)}
  .pill.wide{padding:13px 16px}

  /* search takes the whole screen, keyboard up, results under the thumb */
  .hmodal.search{
    top:0;bottom:0;width:100%;max-height:none;height:100dvh;border-radius:0;
    transform:translateY(12px);padding-top:env(safe-area-inset-top);
  }
  .hmodal.search.on{transform:none}
  .hmodal.search::before{display:none}
  .srch-head{padding:12px 16px;border-bottom:1px solid var(--rule)}
  .srch-head input{font-size:17px}
  .srch-head kbd{display:none}
  .srch-x{display:block;border:0;background:none;color:var(--accent);font-weight:600;font-size:var(--t4);cursor:pointer;padding:6px 0 6px 6px}
  .srch-results{padding:6px 8px calc(20px + env(safe-area-inset-bottom))}
  .srch-row{flex-wrap:wrap;gap:2px 10px;padding:12px 10px;border-bottom:1px solid var(--rule);border-radius:0}
  .srch-row .st{max-width:none;flex:1 1 auto;white-space:normal}
  .srch-row .sd{flex:1 1 100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .srch-row[aria-selected="true"]{background:none}
  .srch-add .st{color:var(--accent)}

  .drawer{width:100%;border-radius:0}

  /* More */
  .msheet{
    display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:51;
    max-height:80dvh;background:var(--surface);border-radius:18px 18px 0 0;
    box-shadow:0 -18px 50px rgba(6,8,14,.25);padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(102%);visibility:hidden;transition:transform .26s cubic-bezier(.4,0,.2,1),visibility .26s;
  }
  .msheet.on{transform:none;visibility:visible}
  .ms-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 8px}
  .ms-head h2{font-size:var(--t7)}
  .ms-body{overflow-y:auto;padding:0 10px 18px}
  .ms-lbl{font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:14px 8px 6px}
  .ms-list{display:flex;flex-direction:column}
  .ms-row{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
    border:0;background:none;padding:12px 8px;border-radius:var(--r-sm);
    font-size:var(--t5);font-weight:600;color:var(--ink);
  }
  .ms-row .mt-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-2);color:var(--ink-2)}
  .ms-row svg{width:19px;height:19px}
  .ms-row[aria-current="true"] .mt-ic{background:var(--ink);color:var(--surface)}
  .ms-who{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px;font-size:var(--t3);color:var(--ink-2)}
  .ms-who span{min-width:0;overflow:hidden;text-overflow:ellipsis}

  /* the map, as content */
  .rig{display:none}
  .mdeck{display:block;padding:4px 0 8px;scroll-margin-top:64px}
  .tracerail{margin:0}
  .tr-strip{padding:4px 16px 10px;margin:0 -16px;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
  .tr-strip::-webkit-scrollbar{display:none}
  .trc{width:78vw;max-width:300px;scroll-snap-align:start}
  .trc .s{-webkit-line-clamp:2!important;display:-webkit-box!important}
  .trc[aria-current="true"]{border-color:var(--ink)}
  .tr-acts{width:100%;display:flex;gap:8px}
  .tr-acts .pill{flex:1 1 auto}

  .md-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:18px 0 6px}
  .md-head h2{font-size:var(--t7)}
  .md-k{display:block;font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
  .md-q{font-size:var(--t4);color:var(--ink-2);line-height:1.55;margin:0 0 12px}
  .md-track{
    display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:4px 16px 8px;
    scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .md-track::-webkit-scrollbar{display:none}
  .md-card{
    flex:0 0 calc(100% - 22px);scroll-snap-align:start;scroll-snap-stop:always;
    background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--lc);
    border-radius:var(--r);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;
    box-shadow:0 1px 2px var(--shadow-1);
  }
  .md-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .md-n{color:var(--ink-3)}
  .md-layer{color:var(--lc)}
  .md-card h3{font-size:var(--t6);line-height:1.25}
  .md-card .hpill.node{align-self:flex-start;border:0;padding:5px 11px;border-radius:var(--r-pill);font-size:var(--t2);font-weight:600}
  .md-b{font-size:var(--t4);line-height:1.6;color:var(--ink-2);margin:0}
  .md-also-h{font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 -4px}
  .md-also{display:flex;flex-wrap:wrap;gap:6px}
  .md-meta{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:10px;margin-top:auto;border-top:1px dashed var(--rule);font-size:var(--t2);color:var(--ink)}
  .md-meta b{font-family:var(--mono);font-size:var(--t0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
  .md-nav{display:flex;align-items:center;gap:12px;margin:10px 0 0}
  .md-nav .icb{width:42px;height:38px;font-size:22px;line-height:1}
  .md-count{font-family:var(--mono);font-size:var(--t2);font-weight:600;color:var(--ink);min-width:44px}
  .md-bar{flex:1 1 auto;height:4px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
  .md-bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s}

  .md-layerset{margin:18px 0 0}
  .md-layerset h3{display:flex;align-items:baseline;gap:8px;font-size:var(--t4);color:var(--ink);margin:0 0 8px}
  .md-layerset h3 span{font-family:var(--mono);font-size:var(--t1);color:var(--lc)}
  .md-chips{display:flex;flex-wrap:wrap;gap:7px}
  .md-chip{
    border:1px solid color-mix(in srgb,var(--lc) 40%,var(--rule));background:var(--surface);color:var(--ink);
    border-radius:var(--r-pill);padding:8px 13px;font-size:var(--t3);font-weight:600;cursor:pointer;
  }

  /* glossary tables become cards */
  .tblwrap{border:0;background:none;overflow:visible}
  .tblwrap table{min-width:0}
  .tblwrap thead{display:none}
  .tblwrap table,.tblwrap tbody,.tblwrap tr,.tblwrap td{display:block;width:auto}
  .tblwrap tr{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px;margin-bottom:8px}
  .tblwrap tr[hidden]{display:none}
  .tblwrap td{padding:0;border:0}
  .tblwrap td:first-child{font-size:var(--t5);white-space:normal;font-family:var(--sans);font-weight:700}
  .tblwrap td:nth-child(2){margin:2px 0 6px}
  .tblwrap td p{margin:0}
  .vtools{flex-wrap:wrap;gap:8px}
  .vtools input[type=search]{width:100%;font-size:16px}

  .nw-feed{padding:0}
  .nw-title{font-size:var(--t5)}
}