/* ══════════════════════════════════════════════════════════════════════════
   TMX · the shared design system for every demo
   ──────────────────────────────────────────────────────────────────────────
   The rulebook's own rule, and the reason this file exists:

     "do not invent new styling per page"  ·  "compose from primitives"

   Nine demo pages were each carrying their own palette — nine dark themes,
   nine slightly different greys, nine accent colours chosen one at a time.
   That is the thing the rule forbids, and it is also why they did not look
   like one product.

   ── THE TOKENS ARE READ OFF thetmxgroup.com, NOT CHOSEN ────────────────────
   Every value below was taken from the live site's own custom properties on
   2026-09-03. They are not an interpretation of the brand; they are the brand's
   own numbers. Merriweather and IBM Plex Mono are the site's two faces, loaded
   from the same Google Fonts URL it uses.

   White ground, dark ink. The demos were dark and the site is not.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground and ink — verbatim from thetmxgroup.com */
  --bg:#ffffff;
  --surface:#f7f7fa;
  --surface2:#eeeef3;
  --txt:#0d0d16;
  --mute:#43435a;
  --label:#0b6f80;
  --line:rgba(16,16,28,.14);
  --line2:rgba(16,16,28,.08);

  /* the accent set */
  --accent:#0891b2;   /* cyan — the primary */
  --gold:#f5e642;
  --y:#9a7a00;        /* gold, legible on white */
  --green:#0d9e5b;
  --purple:#8b2fd0;
  --amber:#c2670a;
  --red:#c0392b;      /* not on the site; added for refusals, tuned to sit with it */
  /* MCL-2567 — the ink variants: the same four semantic colours and the accent, darkened so 10–12px TEXT in them passes WCAG AA on white and on a card
     (measured 2026-09-13: green 3.47 · amber 4.01 · y 4.07 · accent 3.68 on white; the inks 5.4 · 5.86 · 6.0 · 5.69). The originals stay for bars, rings,
     borders and washes (UI components need 3:1). Text in a semantic colour uses the ink. */
  --green-ink:#0b7a46;
  --amber-ink:#9a5208;
  --y-ink:#7a6000;
  --accent-ink:#06708a;  /* MCL-2688 · every TEXT use of the accent and the button fill moved onto the ink: the design audit measured 3.68:1 on white for the accent itself, and 10.5px labels, on every app */

  --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Merriweather",ui-serif,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,16,28,.04), 0 8px 24px rgba(16,16,28,.06);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--font); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.dim{color:var(--mute)}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* ── header ─────────────────────────────────────────────────────────────── */
header{
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
}
.hrow{display:flex;align-items:center;gap:16px;padding:14px 0}
.logo{font-family:var(--mono);font-weight:500;letter-spacing:.16em;font-size:13px;text-transform:uppercase}
.logo b{color:var(--accent-ink);font-weight:500}
.hmeta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--mute)}

/* ── page furniture ─────────────────────────────────────────────────────── */
.hero{padding:32px 0 12px}
h1{font-size:clamp(28px,4vw,40px);margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.btag{color:var(--mute);font-size:16px;margin-top:10px;max-width:68ch;font-weight:300}
section{padding:26px 0;border-top:1px solid var(--line2)}
.sh{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--label);
    text-transform:uppercase;margin-bottom:12px}
.card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);
      padding:22px;box-shadow:var(--shadow)}
.note{font-size:13.5px;color:var(--mute);margin-top:10px;font-weight:300}
footer{padding:32px 0;color:var(--mute);font-size:13px;border-top:1px solid var(--line2);
       margin-top:24px;font-weight:300}

/* ── controls ───────────────────────────────────────────────────────────── */
input[type=text],input[type=search],input[type=number],select,textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font-family:var(--mono);font-size:13px;padding:11px 13px;
}
textarea{font-family:var(--font);font-size:15px;line-height:1.6;width:100%;min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(8,145,178,.25);
  box-shadow:0 0 0 3px rgba(8,145,178,.12)}
.btn{
  background:var(--accent-ink);color:#fff;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;
  padding:11px 18px;cursor:pointer;transition:all .18s var(--ease);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--accent-ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface2);transform:translateY(-1px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.row input[type=text]{flex:1;min-width:240px}

/* ── content blocks ─────────────────────────────────────────────────────── */
.item{background:var(--bg);border:1px solid var(--line2);border-left:3px solid var(--accent);
      border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px}
.item .h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--label);
         text-transform:uppercase}
.item .b{margin-top:8px;white-space:pre-wrap;font-size:15px;line-height:1.65}
.src{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:8px}

.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
      text-transform:uppercase;border-radius:999px;padding:4px 11px;
      border:1px solid var(--line);color:var(--mute);background:var(--bg)}
.pill.ok{color:var(--green-ink);border-color:rgba(13,158,91,.4)}
.pill.warn{color:var(--amber-ink);border-color:rgba(194,103,10,.4)}
.pill.bad{color:var(--red);border-color:rgba(192,57,43,.4)}
/* The organ states, which every ported app reports and none of them should
   render differently: live is not empty is not unreachable. */
.pill.live{color:var(--green-ink);border-color:rgba(13,158,91,.4)}
.pill.empty{color:var(--amber-ink);border-color:rgba(194,103,10,.4)}

/* `.item .f` — where a block came from, under its heading. */
.item .f{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:3px}
.out{margin-top:14px}

/* ── the atom · the estate's core noun, so it is a primitive here ───────────
   Every app that answers from a corpus renders one of these: a claim, the tags
   that place it, and the source it came from. It was being redefined per page,
   which is exactly what "compose from primitives" is against. */
.atom{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);
      padding:13px 15px;margin-bottom:10px}
.atom .claim{font-size:15px;line-height:1.65}
.atom .meta{margin-top:8px;display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
     border:1px solid var(--line2);border-radius:5px;padding:2px 7px;color:var(--mute)}
.tag.who{color:var(--accent-ink);border-color:rgba(8,145,178,.35)}
.tag.mod{color:var(--purple);border-color:rgba(139,47,208,.35)}
.tag.neg{color:var(--red);border-color:rgba(192,57,43,.3)}
.ptr{font-family:var(--mono);font-size:11px;color:var(--mute);margin-left:auto}

/* ── data ───────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;
      border:1px solid var(--line2);border-radius:var(--r-md);overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--label);
   text-transform:uppercase;background:var(--surface2);font-weight:500}
tr:last-child td{border-bottom:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.scroll{overflow-x:auto;max-height:360px}

/* KPI row — the shape the Brand Brain panel uses, on white */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.kpi{border:1px solid var(--line2);border-radius:var(--r-md);padding:14px;background:var(--bg)}
.kpi .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--label);text-transform:uppercase}
.kpi .v{margin-top:8px;font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .s{margin-top:4px;font-size:12.5px;color:var(--mute);font-weight:300}

.gauge{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden;margin-top:10px}
.gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--amber))}

/* ── failure is loud, and never mistaken for an empty result ───────────── */
.err{border:1px solid rgba(192,57,43,.35);border-left:3px solid var(--red);
     border-radius:var(--r-md);padding:12px 15px;color:var(--red);
     font-family:var(--mono);font-size:12.5px;background:rgba(192,57,43,.04);margin-top:12px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── charts · the primitives site/_tmx/charts.js draws into ────────────────
   Promoted from the Brand Brain panel, which drew its own. Four ported apps
   render tables where a chart reads better, and each would otherwise grow its
   own card, legend and tooltip. */
.chartgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:900px){.chartgrid{grid-template-columns:1fr}}
/* the console at phone width (MCL-2580): a 1080-wide strip or bar chart scaled into a 295px card renders its 9.5–11px SVG text at under 3.5px —
   unreadable. Wide content scrolls inside its own container, never the page: at ≤600px a chart keeps a minimum drawing width so its
   smallest text stays ≥ 7.5px (860/1080 × 9.5 = 7.6px) and the card scrolls sideways. Measured from the stylesheet, not a device. */
@media(max-width:600px){.chart{overflow-x:auto;-webkit-overflow-scrolling:touch}.chart svg[viewBox="0 0 1080 240"]{min-width:860px}.chart svg[viewBox="0 0 520 220"]{min-width:520px}.minichart{overflow-x:auto}.minichart svg{min-width:360px}}
.chart{border:1px solid var(--line2);border-radius:var(--r-md);padding:16px;background:var(--bg)}
.chart.wide{grid-column:1/-1}
.charthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.charthead .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--label);text-transform:uppercase}
.legend{display:flex;gap:7px;flex-wrap:wrap}
.leg{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line2);color:var(--mute)}
.chart svg{width:100%;height:auto;display:block}

/* An empty chart says so. Drawing a flat line at zero would read as a
   measurement, which is the same absent-vs-empty error in a picture. */
.chart .nodata{font-size:13.5px;color:var(--mute);font-weight:300;padding:24px 0;text-align:center}

.tmx-tip{
  position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-115%);
  background:var(--txt);color:var(--bg);border-radius:var(--r-sm);padding:8px 11px;
  min-width:120px;box-shadow:0 8px 24px rgba(16,16,28,.22);opacity:0;
  transition:opacity .12s var(--ease);
}
.tmx-tip .a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.tmx-tip .b{margin-top:3px;font-size:13.5px;font-weight:700}

/* ── decision primitives (MCL-411 · added for tofz-hr) ──────────────────────
   A verdict pill, a rule row with its fired/quiet state, a proof gate, and an
   impact-ratio row. Every demo that shows a ruleset outcome wants these, and
   tests/tmx-style.mjs caps a page's own block at 28 lines precisely so they
   land here instead of being redrawn per app. Colour comes from the tokens
   above — nothing below introduces a new one. */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:18px 0 22px;border-bottom:1px solid var(--line2)}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 13px;border:none;background:none;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s var(--ease)}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.panel{display:none}
.panel.on{display:block}
.who{display:flex;gap:6px;align-items:center;margin-left:auto}
.whob{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);color:var(--mute);cursor:pointer;transition:all .18s var(--ease)}
.whob.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fbtn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--mute);cursor:pointer;transition:all .18s var(--ease)}
.fbtn.on{background:var(--surface2);color:var(--txt);border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.verdict{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:999px;white-space:nowrap}
.verdict[data-o="PROCEED"],.verdict[data-o="CONDITIONAL_MATCH"]{background:rgba(13,158,91,.12);color:var(--green-ink)}
.verdict[data-o="REFER"],.verdict[data-o="CLARIFY"]{background:rgba(194,103,10,.12);color:var(--amber-ink)}
.verdict[data-o="REJECT"]{background:rgba(192,57,43,.12);color:var(--red)}
.rule{padding:9px 0;border-bottom:1px dashed var(--line2)}
.rule:last-child{border-bottom:none}
.rtop{display:flex;gap:8px;align-items:baseline}
.rcode{font-family:var(--mono);font-size:11px;font-weight:500;min-width:34px}
.rule[data-f="1"] .rcode{color:var(--accent-ink)}
.rule[data-f="0"] .rcode{color:var(--label)}
.rname2{font-weight:700;font-size:13px}
.rule[data-f="0"] .rname2{font-weight:400;color:var(--mute)}
.rnote{font-size:13px;color:var(--mute);margin-top:4px;font-weight:300;line-height:1.55}
.rcite{font-family:var(--mono);font-size:11px;color:var(--label);margin-top:5px}
.rcite a{color:var(--accent-ink);text-decoration:none;border-bottom:1px dotted var(--accent)}
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:10px}
.gate{border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px}
.gate[data-p="true"]{border-left:3px solid var(--green)}
.gate[data-p="false"]{border-left:3px solid var(--red)}
.gate[data-p="null"]{border-left:3px solid var(--line2);opacity:.6}
.gname{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--label)}
.gdet{font-size:12px;color:var(--mute);margin-top:5px;font-weight:300;line-height:1.5}
.ratio{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line2)}
.rgname{flex:1;font-size:14px}
.rgbar{width:120px;height:7px;background:var(--surface2);border-radius:4px;overflow:hidden}
.rgbar i{display:block;height:100%;background:var(--green)}
.ratio[data-below="true"] .rgbar i{background:var(--red)}
.rgnum{font-family:var(--mono);font-size:12px;min-width:74px;text-align:right}
.small{font-family:var(--mono);font-size:11px;color:var(--amber-ink)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 14px;font-size:13px}
.kv dt{font-family:var(--mono);font-size:11px;color:var(--label);letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.kv dd{margin:0;font-weight:300}
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);padding:8px;border-bottom:1px solid var(--line2)}
.matrix td{padding:10px 8px;border-bottom:1px dashed var(--line2);font-weight:300;vertical-align:top}
.matrix tr:hover td{background:var(--surface2)}
.yes{color:var(--green-ink);font-family:var(--mono);font-size:11px}
.no{color:var(--red);font-family:var(--mono);font-size:11px}
.na{color:var(--label);font-family:var(--mono);font-size:11px}
.empty{padding:26px;text-align:center;color:var(--mute);font-weight:300}
.chatlog{max-height:440px;overflow-y:auto;padding-right:6px}
.msg{margin-bottom:14px}
.msg .from{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--label);margin-bottom:4px}
.msg .txt{font-size:14px;line-height:1.65;font-weight:300}
.msg.me .txt{background:var(--surface2);padding:9px 12px;border-radius:var(--r-sm);display:inline-block}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.chip{font-size:12px;padding:6px 11px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);cursor:pointer;color:var(--mute);transition:all .18s var(--ease);font-family:inherit}
.card[hidden]{display:none}
.chip:hover{border-color:var(--accent);color:var(--txt)}
.askrow{display:flex;gap:8px;margin-top:12px}
.askrow input{flex:1;font-family:var(--font);font-size:14px;padding:11px 13px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);color:var(--txt)}
.askrow input:focus{outline:none;border-color:var(--accent)}

/* ── insight cards (MCL-452) ───────────────────────────────────────────────
   A finding, what it means, and what to do about it — severity down the left
   edge. Promoted here rather than drawn per app for the reason the chart
   primitives were: four apps render findings as paragraphs today and each
   would otherwise invent its own card. Colour comes from the tokens; nothing
   below introduces one. */
.ins{border:1px solid var(--line2);border-left:3px solid var(--line2);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;background:var(--bg)}
.ins[data-s="act"]{border-left-color:var(--red)}
.ins[data-s="watch"]{border-left-color:var(--amber)}
.ins[data-s="ok"]{border-left-color:var(--green)}
.insh{font-weight:700;font-size:15px;margin-bottom:6px}
.insw{font-size:13.5px;color:var(--mute);font-weight:300;line-height:1.6}
.insn{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2);font-size:13.5px}
.insn b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--label);text-transform:uppercase;display:block;margin-bottom:3px}
.insfig{font-family:var(--mono);font-size:11px;color:var(--label);margin-top:8px}
.chartbox{margin-top:10px}
.chartbox svg{display:block;width:100%;height:auto}

/* ── MCL-459 · the next action, and the job seal ─────────────────────────
   An outcome is a state; an action is a move. These carry the visual weight
   because they are the first thing a recruiter needs and the last thing the
   old screen told them. Blocked work is present but visibly not theirs —
   removing it would hide what they are waiting on, and styling it the same
   would put somebody else's queue on their list. */
.act{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;margin-bottom:7px;
  background:var(--bg);border:1px solid var(--line2);border-left:3px solid var(--accent);
  border-radius:var(--r-md)}
.act[data-mine="0"]{border-left-color:var(--line);opacity:.72}
.actn{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--accent-ink);
  min-width:26px;text-align:right;font-variant-numeric:tabular-nums}
.act[data-mine="0"] .actn{color:var(--mute)}
.acta{font-size:14px;line-height:1.45;color:var(--txt)}

.nextact{background:var(--surface);border:1px solid var(--line2);
  border-left:3px solid var(--accent);border-radius:var(--r-md);
  padding:13px 15px;margin-bottom:16px}
.nextact[data-mine="0"]{border-left-color:var(--y);background:rgba(154,122,0,.05)}
.nextact .acta{font-size:14.5px;font-weight:500;margin-bottom:3px}

.seal{background:var(--bg);border:1px solid var(--line2);
  border-left:3px solid var(--green);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:16px}
.seal[data-ok="0"]{border-left-color:var(--y);background:rgba(154,122,0,.05)}
.sealhash{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--txt);word-break:break-all;line-height:1.6;margin:2px 0 6px}

/* ── MCL-463 · the decision in words, before the evidence ────────────────
   Set at reading size rather than the metadata size around it: this is the
   part a person actually reads, and the trace below is what they check when
   they want to. */
.plain{margin-bottom:16px}
.plainh{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--txt);margin-bottom:8px}
.plain p{font-size:14px;line-height:1.62;color:var(--mute);margin:0 0 8px;max-width:64ch}
.plain p:last-child{margin-bottom:0}

/* ── MCL-470 · a ratio is not a finding ───────────────────────────────────
   Four verdicts, and the colour carries the same meaning everywhere: the
   accent for something real, gold for undecided, muted for a cell whose
   number is about the reference group rather than about itself. */
.vchip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;margin-left:8px;white-space:nowrap;
  border:1px solid var(--line2);color:var(--mute);background:var(--bg)}
.vchip[data-v="significant"]{color:#b3261e;border-color:rgba(179,38,30,.35);background:rgba(179,38,30,.06)}
.vchip[data-v="below-but-inconclusive"]{color:var(--y-ink);border-color:rgba(154,122,0,.35);background:rgba(154,122,0,.06)}
.vchip[data-v="reference-effect"]{color:var(--accent-ink);border-color:rgba(8,145,178,.3);background:rgba(8,145,178,.05)}

.vsum{margin-top:14px}
/* a measured row — a label and its value, the value in the mono face with tabular figures (MCL-2545: promoted from the marketing cards so the console can compose it) */
.mrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.mrow b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;text-align:right;max-width:70%}
/* a ranked move with its working: rank · name · score, then the first move, why here, the score's terms, the preconditions (MCL-2548) */
.move{padding:10px 0;border-top:1px solid var(--line)}
.move .mrow{border-bottom:0;padding:0;justify-content:flex-start;align-items:baseline}
.move .mrow .k{margin:0;min-width:5.5em}
.move .mrow .mono{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--mute)}
.move[data-rank="first"] strong{color:var(--accent-ink)}
.move .pfrom{margin-top:3px}
.vbar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--surface2);margin-bottom:10px}
.vbar i{display:block;height:100%}
.vbar i[data-v="real"]{background:#b3261e}
.vbar i[data-v="undecided"]{background:var(--y)}
.vbar i[data-v="reference"]{background:var(--accent)}
.vbar i[data-v="quiet"]{background:var(--line)}
.vlegend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--mute);margin-bottom:6px}
.vlegend b{color:var(--txt);font-variant-numeric:tabular-nums}
.vlegend em{font-style:normal;color:var(--mute);opacity:.8}

/* ── wireframe primitives (MCL-751) ─────────────────────────────────────────
   The shapes a design uses to show what an app will do: a step rail, a grid of
   counted cells, a ladder of rungs, a set of bricks, a mode row, a pill tab bar,
   an inbox row. Composed from the tokens above; a page adds nothing but grid
   columns. The Marketing Mothership wireframe is the first page on them. */
.k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--label);text-transform:uppercase}
.btn.gold{background:var(--gold);color:var(--txt)}
.mini{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.bn{font-size:15px;font-weight:700}
.bneed{font-size:12.5px;color:var(--mute);font-weight:300;line-height:1.5}
.bar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.fill{height:8px;border-radius:999px;background:var(--accent)}
.big{font-size:26px;font-weight:900}
.sample{font-size:11px;font-weight:300;color:var(--mute)}
.dotrow{display:flex;gap:12px;align-items:flex-start}
.dot{width:10px;height:10px;border-radius:999px;margin-top:8px;flex-shrink:0}
.mtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;border-bottom:1px solid var(--line2);padding-bottom:12px}
.mtab{background:transparent;border:1px solid transparent;border-radius:var(--r-sm);font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;padding:11px 16px;min-height:44px;cursor:pointer;color:var(--mute)}
.mtab:hover{background:var(--surface2)} .mtab.on{background:var(--accent);color:#fff}
.msubs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.msub{background:var(--bg);border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:8px 14px;min-height:44px;cursor:pointer;color:var(--mute)}
.msub:hover{background:var(--surface2)} .msub.on{border-color:var(--accent);color:var(--accent-ink);background:rgba(8,145,178,.06)}
.phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pname{font-size:20px;font-weight:700}
.pfrom{font-family:var(--mono);font-size:11px;color:var(--mute)}
.pwhat{font-size:15px;line-height:1.65;max-width:70ch}
.sub-card{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.6}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:44px;font-size:13.5px}
.step .n{font-family:var(--mono);font-size:11px;color:var(--mute)} .step.on{border-color:var(--accent)} .step.on .n{color:var(--accent-ink)}
.askrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.askrow input{flex:1;min-width:260px;min-height:44px}
.cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cell{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;min-height:64px;display:flex;flex-direction:column;justify-content:space-between}
.cell .k{font-size:11px;letter-spacing:.1em} .cell .v{font-size:15px;font-weight:700}
.modes{display:flex;gap:8px;flex-wrap:wrap}
.mode{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;color:var(--mute);cursor:pointer}
.mode.on{border-color:var(--accent);color:var(--accent-ink)}
.rungs{display:flex;flex-direction:column;gap:6px}
.rung{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.55}
.rung .rn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);width:110px;flex-shrink:0;padding-top:3px}
.bricks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.brick{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.bacts{display:flex;gap:6px;flex-wrap:wrap} .bacts span{font-family:var(--mono);font-size:11px;color:var(--accent-ink);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.behind{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md);padding:12px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brain{font-family:var(--mono);font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.bnote{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--mute)}
.inrow{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line2);padding:8px 0;font-size:14px}
.ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ccard{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;font-size:14px;line-height:1.6}
.ccard.open{border-color:var(--accent)}
.ctop{display:flex;align-items:center;gap:12px}
.logo-mark{width:44px;height:44px;border-radius:12px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent-ink)}
.bell{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:44px;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--txt)}
.bell .count{background:var(--red);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px}
.nokhead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.nokcounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1;min-width:520px}
.nc{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:12px 14px}
.nc.dark{background:var(--txt);color:#fff}
.nokrows{display:flex;flex-direction:column;gap:10px}
.nokrow{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-md);padding:16px 18px;display:flex;gap:16px;align-items:flex-start;font-size:14px;line-height:1.6}
.nokrow.done{opacity:.55}
.nokbody{display:flex;flex-direction:column;gap:4px;flex:1}
.nokmeta{display:flex;gap:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.nokacts{display:flex;gap:8px;flex-shrink:0}

/* ── the guide (MCL-751) ────────────────────────────────────────────────────
   "What does this do?" Somebody circles the screen in crayon and writes on it.
   The one unserious thing in the system, doing serious work: a hand drawing
   over a dense screen is read where a tooltip is ignored. The page holds the
   stops; the marks are drawn in document coordinates from the live elements.
   Same mechanism as the outcome studio's guide; Caveat is the handwriting.
   Namespaced guide-*: the first cut named these .pen/.ink/.note and .note is
   the plain explanatory paragraph ten apps use — every one of them rendered
   as orange handwriting with no pen to put it away (Marty, 2026-09-13). */
.guide-pen{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:44px;cursor:pointer;font-family:"Caveat",cursive;font-size:19px;font-weight:700;color:var(--txt)}
.guide-pen.on{background:#e8471f;border-color:#e8471f;color:#fff;box-shadow:3px 3px 0 #8f2a0e}
.guide-ink{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:80;display:none}
.guide-ink.on{display:block}
.guide-ink svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.guide-ink path{fill:none;stroke:#e8471f;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.guide-ink .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .62s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.guide-note{position:absolute;font-family:"Caveat",cursive;font-size:27px;font-weight:700;color:#e8471f;line-height:1.2;max-width:250px;white-space:pre-line;background:rgba(255,255,255,.93);border-radius:12px;padding:7px 12px;box-shadow:0 2px 14px rgba(13,13,22,.1);animation:noteIn .3s var(--ease) backwards}
@keyframes noteIn{from{opacity:0;transform:translateY(6px) rotate(-2deg)}}
.guide-hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--txt);color:#fff;padding:11px 20px;border-radius:30px;z-index:81;font-family:"Caveat",cursive;font-size:21px;font-weight:700}
@media (prefers-reduced-motion:reduce){.guide-ink .draw,.guide-note{animation:none;stroke-dashoffset:0}}

/* ── writing primitives · MCL-1130 ─────────────────────────────────────────
   Promoted here for WriteArm, the first writing app on the system: a
   two-column workspace, a drop zone that reports what was indexed, a reading
   view for a finished piece, a version row, and a measured-dimension row.
   Composed from the tokens above; nothing below introduces a colour. */
.ws{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start;margin-top:14px}
@media(max-width:960px){.ws{grid-template-columns:1fr}}
.ws aside{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto}
/* Stacked on a phone, the brief must scroll away with the page — a sticky panel that fills the screen hides the piece under it. Declared after the base rule so it wins. */
@media(max-width:960px){.ws aside{position:static;max-height:none}}
.field{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.field label,.flabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--label);text-transform:uppercase}
.field input[type=text],.field select{width:100%;min-height:42px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drop{border:1px dashed var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--bg);cursor:pointer;font-size:13px;color:var(--mute);transition:all .18s var(--ease);margin-top:6px}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(8,145,178,.04)}
.drop.loaded{border-style:solid;border-color:rgba(13,158,91,.45);color:var(--txt)}
.drop .flab{font-family:var(--mono);font-size:11px;color:var(--label);display:block;margin-top:4px;line-height:1.5}
.prose{font-size:16.5px;line-height:1.75;max-width:70ch;font-weight:300}
.prose h2{font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:1.25;margin:26px 0 8px}
.prose h3{font-size:17px;font-weight:700;margin:20px 0 6px}
.prose p{margin:0 0 14px}
.prose strong{font-weight:700}
.prose.edit{width:100%;min-height:420px;font-family:var(--font);border:1px solid var(--accent);border-radius:var(--r-md);padding:16px}
.ptitle{font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.pmeta{font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:6px;letter-spacing:.04em}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.ver{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-md);margin-bottom:8px;background:var(--bg);font-size:13.5px}
.ver.on{border-color:var(--accent)}
.ver .vn{font-family:var(--mono);font-size:11px;color:var(--accent-ink);min-width:30px}
.ver .vk{flex:1;font-weight:300}
.ver .vs{font-family:var(--mono);font-size:11px;color:var(--mute)}
.dimrow{display:grid;grid-template-columns:200px 1fr 90px;gap:12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line2);font-size:13px}
.dimrow .dn{font-weight:400}.dimrow .dn small{display:block;font-family:var(--mono);font-size:11px;color:var(--label);font-weight:400}
.dimrow .dv{font-family:var(--mono);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
.dimrow[data-r="true"] .dv{color:var(--green-ink)}.dimrow[data-r="false"] .dv{color:var(--red)}.dimrow[data-r="null"] .dv{color:var(--label)}
.dimrow .di{font-size:12.5px;color:var(--mute);font-weight:300;line-height:1.5}
.stage{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:5px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--mute)}
.stage[data-s="ok"]{color:var(--green-ink);border-color:rgba(13,158,91,.4)}.stage[data-s="run"]{color:var(--accent-ink);border-color:rgba(8,145,178,.4)}.stage[data-s="watch"]{color:var(--amber-ink);border-color:rgba(194,103,10,.4)}.stage[data-s="fail"]{color:var(--red);border-color:rgba(192,57,43,.4)}.stage[data-s="skip"]{opacity:.6}
.stages{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.decision{border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:13px 15px;margin-bottom:10px;background:var(--bg)}
.decision .dl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--label);text-transform:uppercase}
.decision .dh{font-weight:700;font-size:15px;margin:3px 0 6px}
.decision .dw{font-size:14px;line-height:1.6;font-weight:300}
.decision .db{font-size:13.5px;line-height:1.6;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line2)}
.decision .db b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--label);text-transform:uppercase;display:block;margin-bottom:2px}
.decision[data-l="nudge"]{border-left-color:var(--purple)}.decision[data-l="psychology"],.decision[data-l="emotion"],.decision[data-l="frame"],.decision[data-l="angle"]{border-left-color:var(--amber)}
.decision[data-l="quality"],.decision[data-l="revision"],.decision[data-l="validation"]{border-left-color:var(--green)}.decision[data-l="grounding"],.decision[data-l="brains"]{border-left-color:var(--label)}
/* the craft floor (MCL-2567, WCAG 2.2 from the register): a visible focus ring on every control, a skip link that appears on focus, section labels as real headings */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:8px;top:-48px;z-index:50;padding:10px 14px;background:var(--txt);color:#fff;border-radius:var(--r-sm);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none}
.skip:focus{top:8px}
h2.k{margin:0;font-weight:500}
/* a small chart inside a tile (MCL-2592): the receipts by type in the meter */
.minichart{margin-top:8px}.minichart svg{width:100%;height:auto;display:block;max-width:360px}
/* the five conversations as a coverage grid (MCL-2579): a role per row, a question per column, a cell a door to answering */
.rgrid{display:grid;grid-template-columns:minmax(120px,1.6fr) repeat(3,minmax(56px,1fr));gap:6px;margin-top:10px;align-items:center}
.rhead span,.rrow span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}
.rrow span.heard{color:var(--txt)}
.rcell{font:inherit;font-family:var(--mono);font-size:13px;padding:8px 0;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);color:var(--mute);cursor:pointer;text-align:center}
.rcell[data-state="answered"]{background:rgba(13,158,91,.10);border-color:rgba(13,158,91,.4);color:var(--green-ink);font-weight:700}
.rcell:hover,.rcell:focus-visible{border-color:var(--accent);color:var(--txt)}
/* the twelve barriers as a board (MCL-2578): a tile per rule, its state a left edge and a pill — never a colour alone */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.tile{background:var(--bg);border:1px solid var(--line2);border-left-width:4px;border-radius:var(--r-sm);padding:10px 12px}
.tile[data-state="fired"]{border-left-color:var(--amber)}
.tile[data-state="on an absence"]{border-left-color:var(--line2);border-left-style:dotted}
.tile[data-state="unassessed"]{border-left-color:var(--mute)}
.tile[data-state="clear"]{border-left-color:var(--green)}
.tile[data-state="not assessed"]{border-left-color:var(--line2)}
.tile .pfrom{margin-top:4px}
/* a word on a card opens its glossary entry (MCL-2570) */
.wordlink{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--label);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.wordlink:hover,.wordlink:focus-visible{text-decoration-style:solid;color:var(--txt)}
.words{margin-top:4px}
/* a chart card's status row: the pill that says live · closed · unreached · waiting (promoted from the marketing console, MCL-2558 — the plan's strip renders it from script) */
.chart .status{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
/* a connectable system's card (MCL-2553): name · state, the key by name, the three steps, Test / Pull */
.sys .steps{margin:8px 0 0 18px;padding:0;font-size:13.5px;line-height:1.55}
.sys .steps li{margin:3px 0}
.sys .askrow{margin-top:8px}
/* the weekly pack (MCL-2550, the kit's print-view block): the console printed as it reads now — the pack header shows, the controls and the diagnostics do not, a card never breaks across a page */
.packhead{display:none}
@media print{
  html[data-pack] .packhead{display:block;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--txt)}
  html[data-pack] header,html[data-pack] .strip details,html[data-pack] .askrow,html[data-pack] .btn,html[data-pack] .bell,html[data-pack] #brand,html[data-pack] #connsec,html[data-pack] #noksec,html[data-pack] footer,html[data-pack] #goal .card:not(.chart){display:none!important}
  html[data-pack] .strip{background:transparent;color:var(--txt);border:1px solid var(--txt);border-radius:0;padding:10px 14px}
  html[data-pack] .strip .k{color:var(--txt)}
  html[data-pack] .card,html[data-pack] section{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  html[data-pack] .wrap{max-width:none}
  html[data-pack] svg{max-width:100%}
}

/* ── academy primitives · MCL-2600 ──────────────────────────────────────────
   The TMX Academy composes from the system and adds what a course needs: a
   campus of coloured schools, lesson rows keyed by kind, a round with answer
   states, an XP bar, badges, a certificate. Kind colours are the system's own
   tokens; no page redefines the ground, the ink or the accent. */
.ac-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line2);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--surface),var(--bg));margin-bottom:14px}
.ac-xp{flex:1;min-width:180px;height:12px;border-radius:999px;background:var(--surface2);overflow:hidden;position:relative}
.ac-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--purple),var(--gold));transition:width .8s var(--ease)}
.ac-lvl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);white-space:nowrap}
.ac-num{font-weight:700;font-size:22px;letter-spacing:-.02em}
.ac-streak{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(194,103,10,.1);color:var(--amber-ink);font-weight:700;font-size:13px}
.ac-badges{display:flex;gap:6px;flex-wrap:wrap}
.ac-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);font-size:12px;background:var(--bg)}
.ac-badge[data-on="1"]{border-color:var(--gold);background:rgba(245,230,66,.22);font-weight:700}
.ac-campus{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ac-school{position:relative;border:1px solid var(--line2);border-top:5px solid var(--accent);border-radius:var(--r-lg);padding:16px 16px 14px;background:var(--bg);box-shadow:var(--shadow);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ac-school:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(16,16,28,.12)}
.ac-school h3{margin:0 0 6px;font-size:17px}.ac-school p{margin:0;font-size:13.5px;line-height:1.55;font-weight:300;color:var(--mute)}
.ac-school .ac-ring{position:absolute;top:12px;right:12px;width:52px;height:52px}
[data-c="accent"]{border-top-color:var(--accent)}[data-c="purple"]{border-top-color:var(--purple)}[data-c="green"]{border-top-color:var(--green)}[data-c="amber"]{border-top-color:var(--amber)}[data-c="red"]{border-top-color:var(--red)}[data-c="gold"]{border-top-color:var(--gold)}[data-c="label"]{border-top-color:var(--label)}[data-c="mute"]{border-top-color:var(--mute)}
.ac-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.ac-tile{text-align:left;border:1px solid var(--line2);border-radius:var(--r-md);padding:12px 13px;background:var(--surface);cursor:pointer;font:inherit;color:inherit;transition:background .2s}
.ac-tile:hover{background:var(--surface2)}
.ac-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px} /* the learner's progress as a ring on the tile (MCL-2581) */
.ac-ring{flex:none}.ac-tile b{display:block;font-size:14px;margin-bottom:3px}.ac-tile small{color:var(--mute);font-size:12px}
.ac-grade{float:right;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface2)}
.ac-grade[data-g="A"]{background:rgba(13,158,91,.18);color:var(--green-ink)}.ac-grade[data-g="B"],.ac-grade[data-g="C"]{background:rgba(8,145,178,.14);color:var(--accent-ink)}.ac-grade[data-g="Pass"]{background:rgba(194,103,10,.14);color:var(--amber-ink)}.ac-grade[data-g="Not yet"]{background:rgba(192,57,43,.12);color:var(--red)}.ac-grade[data-g="start"]{background:rgba(124,58,237,.14);color:var(--purple)}
.ac-lessons{display:grid;gap:8px;margin-top:12px}
.ac-lesson{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line2);border-left:5px solid var(--accent);border-radius:var(--r-md);padding:11px 13px;background:var(--bg);cursor:pointer;text-align:left;font:inherit;color:inherit}
.ac-lesson:hover{background:var(--surface)}.ac-lesson .ac-n{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--label)}.ac-lesson b{display:block;font-size:14.5px}.ac-lesson small{color:var(--mute);font-size:12.5px}
[data-k="hook"]{border-left-color:var(--accent)}[data-k="words"]{border-left-color:var(--purple)}[data-k="how"]{border-left-color:var(--green)}[data-k="numbers"]{border-left-color:var(--amber)}[data-k="story"]{border-left-color:var(--gold)}[data-k="method"]{border-left-color:var(--label)}[data-k="debate"]{border-left-color:var(--red)}[data-k="boss"]{border-left-color:var(--txt)}
.ac-kind{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--surface2);color:var(--mute)}
.ac-graphic{border:1px solid var(--line2);border-radius:var(--r-lg);padding:12px;background:var(--surface);margin:14px 0}.ac-graphic svg{width:100%;height:auto;display:block}.ac-graphic .k{margin-bottom:6px}
.ac-node{cursor:pointer}.ac-node:hover circle{stroke-width:3}.ac-edge{stroke:var(--line);stroke-width:1.2}.ac-edge[data-on="1"]{stroke:var(--purple);stroke-width:2.4}
.ac-key{display:grid;gap:8px;margin:12px 0}.ac-key .item{border-left:3px solid var(--gold)}
.ac-q{border:1px solid var(--line2);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;background:var(--bg);box-shadow:var(--shadow)}
.ac-q .ac-prompt{font-size:16px;line-height:1.6;margin:6px 0 12px}.ac-opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ac-opt{border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px 12px;background:var(--bg);cursor:pointer;font:inherit;color:inherit;text-align:left;transition:all .2s}
.ac-opt:hover{border-color:var(--accent)}.ac-opt[data-on="1"]{border-color:var(--purple);background:rgba(139,47,208,.08)}.ac-opt[data-s="right"]{border-color:var(--green);background:rgba(13,158,91,.12)}.ac-opt[data-s="wrong"]{border-color:var(--red);background:rgba(192,57,43,.1)}
.ac-input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-md);font:inherit;font-size:15px;background:var(--bg);color:var(--txt)}
.ac-why{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);font-size:13.5px;line-height:1.55}.ac-why[data-s="right"]{border-left:3px solid var(--green)}.ac-why[data-s="wrong"]{border-left:3px solid var(--red)}
.ac-order{display:grid;gap:6px}.ac-order .ac-opt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ac-result{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(139,47,208,.08),rgba(245,230,66,.18));border:1px solid var(--line2);margin-bottom:14px}
.ac-big{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}.ac-xplines{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.8}
.ac-cert{border:2px solid var(--gold);border-radius:var(--r-lg);padding:26px;text-align:center;background:linear-gradient(180deg,var(--bg),rgba(245,230,66,.12))}.ac-cert h2{margin:6px 0;font-size:26px}
.ac-table{width:100%;border-collapse:collapse;font-size:13.5px}.ac-table th,.ac-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line2)}.ac-table th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.ac-rule{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line2);font-size:13.5px}.ac-rule b{font-family:var(--mono);font-size:12px;color:var(--label)}
.ac-heat{display:grid;grid-template-columns:repeat(14,1fr);gap:3px}.ac-day{aspect-ratio:1;border-radius:3px;background:var(--surface2)}.ac-day[data-v="1"]{background:rgba(13,158,91,.35)}.ac-day[data-v="2"]{background:rgba(13,158,91,.65)}.ac-day[data-v="3"]{background:var(--green)}
.ac-pop{animation:acpop .6s var(--ease)}@keyframes acpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* ── compass primitives · MCL-2601 ──────────────────────────────────────────
   Sector cards with a live figure, a role brief with coverage states, a needs
   × organs matrix, a ranked plan. Coverage colours are the system's tokens. */
.cp-sectors{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cp-sector{border:1px solid var(--line2);border-top:5px solid var(--accent);border-radius:var(--r-lg);padding:14px;background:var(--bg);box-shadow:var(--shadow);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .25s var(--ease)}
.cp-sector:hover{transform:translateY(-3px)}.cp-sector b{display:block;font-size:15px;margin-bottom:4px}.cp-sector .cp-fig{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:6px}.cp-sector .cp-up{color:var(--green-ink)}.cp-sector .cp-down{color:var(--red)}
.cp-sector[data-on="1"]{outline:2px solid var(--purple)}
[data-c="accent"]{border-top-color:var(--accent)}[data-c="purple"]{border-top-color:var(--purple)}[data-c="green"]{border-top-color:var(--green)}[data-c="amber"]{border-top-color:var(--amber)}[data-c="red"]{border-top-color:var(--red)}[data-c="gold"]{border-top-color:var(--gold)}[data-c="label"]{border-top-color:var(--label)}[data-c="mute"]{border-top-color:var(--mute)}
.cp-state{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--surface2);color:var(--mute)}
.cp-state[data-s="covered"]{background:rgba(13,158,91,.16);color:var(--green-ink)}.cp-state[data-s="partial"]{background:rgba(194,103,10,.16);color:var(--amber-ink)}.cp-state[data-s="gap"]{background:rgba(192,57,43,.14);color:var(--red)}.cp-state[data-s="human"],.cp-state[data-s="generic"]{background:rgba(139,47,208,.12);color:var(--purple)}
.cp-need{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line2);font-size:13.5px}.cp-need small{color:var(--mute);font-size:12px}
.cp-plan{border:1px solid var(--line2);border-left:5px solid var(--amber);border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;background:var(--bg)}.cp-plan[data-s="gap"]{border-left-color:var(--red)}
.cp-plan .cp-score{float:right;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--purple)}.cp-plan b{display:block;font-size:14.5px}.cp-plan p{margin:4px 0 0;font-size:13px;color:var(--mute);line-height:1.5}
.cp-matrix{width:100%;border-collapse:collapse;font-size:12px}.cp-matrix th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);padding:6px 4px;text-align:left}.cp-matrix td{padding:6px 4px;border-top:1px solid var(--line2)}
.cp-cell{display:inline-block;width:100%;height:18px;border-radius:4px;background:var(--surface2)}.cp-cell[data-v="1"]{background:rgba(139,47,208,.25)}.cp-cell[data-v="2"]{background:rgba(139,47,208,.5)}.cp-cell[data-v="3"]{background:var(--purple)}
.cp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0}.cp-kpi{border:1px solid var(--line2);border-radius:var(--r-md);padding:10px 12px;background:var(--surface)}.cp-kpi b{display:block;font-size:22px;letter-spacing:-.02em}.cp-kpi small{color:var(--mute);font-size:11.5px}
.cp-skill{display:inline-block;margin:3px 4px 0 0;padding:4px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line2);background:var(--bg)}.cp-skill[data-s="covered"]{border-color:var(--green)}.cp-skill[data-s="partial"]{border-color:var(--amber)}.cp-skill[data-s="gap"]{border-color:var(--red)}.cp-skill[data-s="human"],.cp-skill[data-s="generic"]{border-color:var(--purple);opacity:.75}
.cp-pop{animation:cppop .5s var(--ease)}@keyframes cppop{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}
.cp-input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-md);font:inherit;font-size:15px;background:var(--bg);color:var(--txt)}
.cp-graphic{border:1px solid var(--line2);border-radius:var(--r-lg);padding:12px;background:var(--surface);margin:0 0 14px}.cp-graphic svg{width:100%;height:auto;display:block}.cp-graphic .k{margin-bottom:6px}
.ac-guide{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--line2);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(139,47,208,.07),rgba(245,230,66,.16));margin-bottom:12px}
.ac-avatar{width:44px;height:44px;border-radius:50%;background:var(--txt);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:18px;font-family:var(--mono)}
.ac-guidebody{min-width:0}.ac-line{font-size:16.5px;line-height:1.55}
.ac-drawer{max-height:280px;overflow:auto;margin-top:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-md);background:var(--bg)}
.ac-stats{display:flex;gap:16px;align-items:flex-start}.ac-stat{text-align:center;min-width:64px}.ac-stat b{display:block;font-size:20px;letter-spacing:-.02em}.ac-stat small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ac-goal{width:44px;height:44px;display:block;margin:0 auto 2px}
.ac-path{display:grid;gap:8px;margin-top:12px}
.ac-step{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line2);border-left:5px solid var(--accent);border-radius:var(--r-md);padding:11px 13px;background:var(--bg);cursor:pointer;text-align:left;font:inherit;color:inherit}
.ac-step:hover{background:var(--surface)}.ac-step .ac-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;background:var(--surface2);color:var(--txt)}
.ac-step[data-done="1"] .ac-dot{background:var(--green);color:var(--bg)}.ac-step[data-next="1"]{box-shadow:0 0 0 3px rgba(139,47,208,.25)}
.ac-step b{display:block;font-size:14.5px}.ac-step small{color:var(--mute);font-size:12.5px}
.ac-float{position:fixed;left:50%;top:38%;transform:translateX(-50%);font-size:44px;font-weight:700;color:var(--purple);animation:acfloat 1.6s ease forwards;pointer-events:none;z-index:9}
@keyframes acfloat{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.ac-banner{padding:14px 18px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--purple),var(--accent));color:var(--bg);font-weight:700;margin:0 0 12px;animation:acpop .6s var(--ease)}
@media(max-width:820px){.ac-guide{grid-template-columns:auto 1fr}.ac-stats{grid-column:1/-1;justify-content:space-around}}
.cp-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cp-type{border:1.5px solid var(--line2);border-top:4px solid var(--accent);border-radius:var(--r-md);padding:10px 11px;background:var(--bg);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:all .2s}
.cp-type b{display:block;font-size:14px;margin-bottom:3px}.cp-type small{font-size:11.5px;color:var(--mute);line-height:1.4;display:block}.cp-type[data-on="1"]{background:rgba(139,47,208,.08);border-color:var(--purple);box-shadow:0 0 0 2px rgba(139,47,208,.2)}
.chips .chip[data-on="1"]{border-color:var(--purple);color:var(--txt);background:rgba(139,47,208,.08)}
.cp-result{border:1px solid var(--line2);border-radius:var(--r-lg);padding:22px 24px;background:linear-gradient(135deg,rgba(139,47,208,.06),rgba(245,230,66,.14));box-shadow:var(--shadow)}
.cp-result h2{margin:0 0 4px;font-size:26px;letter-spacing:-.02em}.cp-pitch{font-size:17px;line-height:1.65;margin:12px 0}
.cp-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:12px}
.cp-part{border:1px solid var(--line2);border-left:5px solid var(--green);border-radius:var(--r-md);padding:10px 12px;background:var(--bg)}.cp-part[data-s="build"]{border-left-color:var(--red)}.cp-part[data-s="partly"]{border-left-color:var(--amber)}.cp-part b{display:block;font-size:14px}.cp-part small{color:var(--mute);font-size:12.5px;line-height:1.5}
.cp-tabs{display:flex;gap:4px;margin:14px 0 8px;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}.cp-tabs .tab{white-space:nowrap;flex-shrink:0}.cp-pane{display:none}.cp-pane.on{display:block}
.cp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px}
.cp-tile{text-align:left;border:1px solid var(--line2);border-top:4px solid var(--green);border-radius:var(--r-md);padding:12px 13px;background:var(--bg);cursor:pointer;font:inherit;color:inherit;transition:transform .2s var(--ease)}
.cp-tile:hover{transform:translateY(-2px)}.cp-tile[data-s="partly"]{border-top-color:var(--amber)}.cp-tile[data-s="build"]{border-top-color:var(--red)}
.cp-tile b{display:block;font-size:14.5px;margin:6px 0 3px}.cp-tile small{color:var(--mute);font-size:12.5px;line-height:1.45;display:block}.cp-tile .cp-more{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line2);font-size:12.5px;line-height:1.6}
.cp-rank{display:flex;align-items:baseline;gap:12px;margin:6px 0 10px}.cp-rank b{font-family:var(--font);font-size:24px}.cp-rank span{font-size:13px;color:var(--mute)}
.cp-stamps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.cp-stamp{border:1.5px dashed var(--line2);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--mute);background:var(--bg);transition:all .3s}.cp-stamp[data-on="1"]{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg));color:var(--txt);font-weight:600}.cp-stamp[data-on="1"][data-c="red"]{border-color:var(--red)}.cp-stamp[data-on="1"][data-c="green"]{border-color:var(--green)}.cp-stamp[data-on="1"][data-c="purple"]{border-color:var(--purple)}.cp-stamp[data-on="1"][data-c="amber"]{border-color:var(--amber)}.cp-stamp[data-on="1"][data-c="gold"]{border-color:var(--y)}
.ac-match{display:grid;grid-template-columns:1fr 2fr;gap:10px}.ac-match>div{display:grid;gap:6px;align-content:start}.ac-match .ac-opt{font-size:13px;position:relative}.ac-opt[data-pair]:not([data-pair=""]){border-color:var(--gold);background:rgba(232,194,58,.12)}.ac-opt[data-pair]:not([data-pair=""])::after{content:attr(data-pair);font:600 11px/1 var(--mono);background:var(--gold);color:var(--txt);border-radius:999px;padding:3px 6px;margin-left:auto}
.working-prose .sen{border-bottom:2px solid transparent;cursor:help;border-radius:2px}.working-prose .sen[data-s="traced"]{border-bottom-color:var(--green);background:rgba(13,158,91,.07)}.working-prose .sen[data-s="untraced"]{border-bottom-color:var(--amber);background:rgba(194,103,10,.08)}.working-prose .sen[data-s="plain"]{border-bottom-color:var(--line2)}
.nbadge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:rgba(139,47,208,.12);color:var(--purple);vertical-align:middle;margin:0 4px 0 2px;cursor:help}
.pbadge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--surface2);color:var(--label);margin-right:6px;vertical-align:middle}
.legend2{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12px}.legend2 .sen{padding:2px 6px;border-bottom:2px solid var(--line2)}.legend2 .sen[data-s="traced"]{border-bottom-color:var(--green)}.legend2 .sen[data-s="untraced"]{border-bottom-color:var(--amber)}
.piecemap{margin:0 0 14px}.piecemap .hint{margin-bottom:4px}.piecemap svg{display:block}
.craft{border:1px solid var(--line2);border-radius:var(--r-md);padding:12px 14px;margin-bottom:12px;background:var(--bg)}.craft-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}.craft-head b{font-family:var(--font);font-size:22px}.craft-head span{font-size:13px;color:var(--mute)}.craft-badges{display:flex;flex-wrap:wrap;gap:6px}.craft-badge{border:1.5px dashed var(--line2);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--mute)}.craft-badge[data-on="1"]{border-style:solid;border-color:var(--y);background:rgba(245,230,66,.18);color:var(--txt);font-weight:600}
.changed{margin:10px 0}.changed .k{font-size:12px;color:var(--mute);margin-bottom:4px}.changed-prose{font-size:14px;line-height:1.7}.chg{border-radius:3px;padding:0 2px}.chg[data-c="went"]{background:rgba(192,57,43,.12);text-decoration:line-through;text-decoration-color:var(--red);color:var(--mute)}.chg[data-c="came"]{background:rgba(13,158,91,.14)}.legend2 .chg{padding:1px 8px}
.ac-askblock{display:block}.ac-guide[data-mode="compact"]{padding:10px 14px;gap:12px;align-items:center}.ac-guide[data-mode="compact"] .ac-avatar{width:34px;height:34px;font-size:15px}.ac-guide[data-mode="compact"] .ac-line{font-size:14px}.ac-guide[data-mode="compact"] .ac-stats .ac-stat:first-child{display:none}.ac-guide[data-mode="compact"] .ac-stat b{font-size:16px}.ac-guide[data-mode="compact"] .ac-xp{display:none}.ac-guide[data-mode="compact"] .ac-stat small:last-child{display:none}
body:not([data-view="rules"]):not([data-view="transcript"]) .ac-badges{display:none}
.ac-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 6px}.ac-progress{flex:1;min-width:140px;height:8px;border-radius:999px;background:var(--surface2)}.ac-progress div{height:100%;border-radius:999px;background:var(--green);transition:width .4s}
.ac-opening{margin-top:12px}.ac-stagelist{list-style:none;padding:0;margin:0;display:flex;gap:14px;flex-wrap:wrap}.ac-stagelist li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.ac-stagelist li::before{content:"○ ";color:var(--mute)}.ac-stagelist li[data-s="doing"]{color:var(--txt)}.ac-stagelist li[data-s="doing"]::before{content:"◉ ";color:var(--accent-ink)}.ac-stagelist li[data-s="done"]::before{content:"● ";color:var(--green-ink)}
.ac-continue{display:block;width:100%;text-align:left;border:2px solid var(--gold);border-radius:var(--r-lg);padding:14px 18px;background:rgba(245,230,66,.14);cursor:pointer;font:inherit;color:inherit;margin-bottom:16px}.ac-continue .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.ac-continue b{display:block;font-size:18px;margin:4px 0}.ac-continue small{color:var(--mute)}
.ac-explain{width:100%;font-family:var(--font);font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);resize:vertical}.ac-explain:focus{outline:none;border-color:var(--accent)}
.ac-view .ac-link{border-left:4px solid var(--purple);padding:8px 12px;margin-top:10px;font-size:13.5px;background:var(--bg);border-radius:0 var(--r-md) var(--r-md) 0}.ac-view .ac-link>b{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
.cro-grid{display:grid;gap:8px}.cro{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2);border-left:4px solid var(--green);border-radius:var(--r-md);padding:9px 12px;background:var(--bg);font-size:13.5px}.cro[data-ok="0"]{border-left-color:var(--red)}.cro-mark{font-family:var(--mono);font-weight:700;color:var(--green-ink)}.cro[data-ok="0"] .cro-mark{color:var(--red)}.cro b{display:block}
.bar{border:1px solid var(--line2);border-radius:var(--r-md);padding:9px 12px;margin-top:8px;font-size:13.5px;background:var(--bg)}.bar[data-s="cleared"]{border-left:4px solid var(--green)}.bar[data-s="confirmed"]{border-left:4px solid var(--red)}.bar[data-s="measured"]{border-left:4px solid var(--amber)}
.brief-row{display:flex;gap:10px;align-items:flex-start;margin-top:8px;font-size:13.5px}.brief-row .tag{flex-shrink:0;margin-top:2px}.numbers{margin-top:12px}.numbers summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.work-flash{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:8px 0 2px;min-height:28px}.flash-in{animation:flashIn .45s var(--ease) both}@keyframes flashIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.working .fill[data-run="1"]{background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}

/* ── dev-bible · reading primitives (MCL-1370) ─────────────────────────────
   A lesson page that shows what the four stores returned, with the receipt.
   Shared so the next teaching surface renders a live read the same way. */
.db-toc{position:sticky;top:14px}
.db-toc h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px}
.db-toc button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;font-size:14px;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--txt)}
.db-toc button.on{background:var(--accent);color:#fff}
.db-toc button small{display:block;font-size:12px;color:var(--mute);font-weight:300}
.db-toc button.on small{color:#fff;opacity:.85}
.db-lessons{display:grid;gap:10px;margin-top:14px}
.db-lesson{border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.db-lesson:hover{border-color:var(--accent)}
.db-lesson b{font-size:15px}
.db-lesson small{display:block;color:var(--mute);font-weight:300;margin-top:3px}
.db-brain{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.db-brain h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:10px}
.db-brain h4 .st{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mute);text-align:right}
.db-brain .db-row{font-size:13.5px;line-height:1.5;padding:6px 0;border-top:1px dashed var(--line);font-weight:300}
.db-brain .db-row:first-of-type{border-top:0}
.db-brain .db-row code{font-family:var(--mono);font-size:11px;color:var(--mute)}
.db-empty{font-size:13px;color:var(--mute);font-weight:300;font-style:italic}
.db-receipt{font-family:var(--mono);font-size:12px;line-height:1.7;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.db-receipt .ok{color:var(--green-ink)}.db-receipt .no{color:var(--amber-ink)}
.db-habit{border-left:4px solid var(--accent);padding:8px 12px;margin:10px 0;background:var(--surface);border-radius:0 10px 10px 0}
.db-part{font-size:12.5px;color:var(--mute);margin-top:8px;font-family:var(--mono)}
.db-stamp{font-family:var(--mono);font-size:11.5px;color:var(--mute)}

/* ── resonance primitives · MCL-2641 ────────────────────────────────────────
   Music, heard and drawn: a keyboard, a scope, a spectrum, a circle of fifths,
   a round of eight, an XP ring. Marty, 2026-09-15: "the most visual and
   interactive app we've ever done". The canvases draw with the tokens above
   (graphics.js reads them); nothing here invents a colour. */
.rs-studio{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;align-items:start}
@media(max-width:980px){.rs-studio{grid-template-columns:1fr}}
.rs-keys{width:100%;height:118px;display:block;border-radius:var(--r-sm);cursor:pointer;touch-action:none}
.rs-scopes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.rs-scope{width:100%;height:84px;display:block;border-radius:var(--r-sm);border:1px solid var(--line2)}
.rs-now{display:flex;gap:14px;align-items:baseline;margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--mute);flex-wrap:wrap}
.rs-now b{font-family:var(--font);font-size:22px;color:var(--txt)}
.rs-timbres{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rs-circle{width:100%;max-width:340px;display:block;margin:0 auto}
.rs-key{cursor:pointer}.rs-key:hover path:first-child{filter:brightness(.92)}
.rs-ring{width:84px;height:84px;display:block}
.rs-top{display:flex;gap:16px;align-items:center}
.rs-top .rs-say{flex:1;font-size:15px;line-height:1.55;font-weight:300}
@media(max-width:640px){.rs-top{flex-wrap:wrap}.rs-top .rs-say{flex-basis:calc(100% - 100px)}.rs-top .btn{width:100%}.rs-round{grid-template-columns:repeat(4,1fr)}}
.rs-modes{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.rs-modes .btn{padding:8px 14px}
.rs-round{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:12px 0}
.rs-q{aspect-ratio:1;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--bg);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--mute);cursor:pointer}
.rs-q.on{border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px rgba(8,145,178,.18)}
.rs-q.ok{background:rgba(13,158,91,.14);color:var(--green-ink);border-color:transparent}
.rs-q.no{background:rgba(192,57,43,.12);color:var(--red);border-color:transparent}
.rs-q.done{background:var(--surface2)}
.rs-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.rs-opt{padding:12px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.rs-opt:hover{border-color:var(--accent)}.rs-opt.on{border-color:var(--accent);background:rgba(8,145,178,.08)}
.rs-ladder{width:100%;max-width:240px;display:block}
.rs-why{margin-top:10px;font-size:14px;line-height:1.6;font-weight:300}
.rs-why b{color:var(--green-ink)}.rs-why i{color:var(--red);font-style:normal}
.rs-lines{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.7;white-space:pre-wrap;margin-top:8px}
.rs-melody{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-family:var(--mono);font-size:12px}
.rs-melody span{padding:6px 10px;border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
.rs-melody em{font-style:normal}
.rs-res{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.rs-work{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px}
.rs-work img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.rs-chords{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rs-flash{font-family:var(--mono);font-size:11px;color:var(--accent-ink);letter-spacing:.06em;animation:rsflash 1.2s var(--ease) infinite alternate}
.rs-strip{width:100%;max-width:320px;display:block;margin-top:8px}
.rs-pad{width:100%;height:110px;border-radius:var(--r-lg);border:2px solid var(--accent);background:rgba(8,145,178,.06);font:inherit;font-size:18px;color:var(--accent-ink);cursor:pointer;margin-top:10px;user-select:none;touch-action:manipulation}
.rs-pad:active,.rs-pad.hit{background:var(--accent);color:#fff}
.rs-pad:disabled{opacity:.5}
.rs-radar{width:100%;max-width:300px;display:block;margin:0 auto}
.rs-heat{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;margin-top:10px}
.rs-cell{border-radius:6px;padding:6px 0;text-align:center;font-family:var(--mono);font-size:11px;line-height:1.3}
.rs-cell b{display:block;font-weight:500}.rs-cell small{color:var(--mute);font-size:11px}
.rs-card{display:flex;gap:14px;align-items:center;margin-top:12px;padding:12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg)}
.rs-card .rs-cardtxt{font-size:13px;line-height:1.5}
.rs-roll{width:100%;height:150px;display:block;border-radius:var(--r-sm);border:1px solid var(--line2);margin-top:10px}
.rs-abc{font-family:var(--mono);font-size:11px;white-space:pre-wrap;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px;margin-top:8px;color:var(--mute)}
.rs-pieces{display:grid;gap:10px;margin-top:12px}
.rs-piece{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg)}
.rs-piece img{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;flex:none}
@keyframes rsflash{from{opacity:.35}to{opacity:1}}

/* ── skylight primitives · MCL-2650 ─────────────────────────────────────────
   The sky above you, tonight: a dome drawn from the engine, a time slider, the
   place, the story of what you tapped. The dome is dark because the sky is;
   the page around it keeps the white ground (the rule). */
.sk-studio{display:grid;grid-template-columns:1.3fr .8fr;gap:18px;align-items:start}
@media(max-width:980px){.sk-studio{grid-template-columns:1fr}}
.sk-dome{width:100%;aspect-ratio:1;max-height:78vh;display:block;border-radius:50%;cursor:grab;touch-action:none;background:var(--surface)}
.sk-dome:active{cursor:grabbing}
.sk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.sk-bar input[type=range]{flex:1;min-width:160px;accent-color:var(--accent)}
.sk-bar b{font-family:var(--font);font-size:15px;color:var(--txt)}
.sk-place{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sk-place select{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.sk-say{font-size:15px;line-height:1.6;font-weight:300}
.sk-say p{margin:6px 0}
.sk-story{margin-top:10px}
.sk-story h3{margin:0 0 4px;font-size:18px}
.sk-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid var(--line)}
.sk-list{display:grid;gap:6px;margin-top:8px}
.sk-row{display:flex;gap:10px;align-items:baseline;font-size:14px;padding:6px 0;border-bottom:1px solid var(--line2)}
.sk-row b{min-width:110px}.sk-row .dim{margin-left:auto;font-family:var(--mono);font-size:11px}
.sk-target{margin-top:10px;padding:12px;border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--bg)}
.sk-target b{font-size:17px}
.sk-lines{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.7;white-space:pre-wrap;margin-top:8px}
.sk-flash{font-family:var(--mono);font-size:11px;color:var(--accent-ink);letter-spacing:.06em;animation:rsflash 1.2s var(--ease) infinite alternate}
/* ── horizon primitives · MCL-2661 ─────────────────────────────────────────
   Futurice's strategists' cockpit: an engagement on a phase track, the world
   as a radar, the insight brief, the canvas, the next engagement, the report.
   Imagery is generative and the engagement's own; every picture is the data. */
.hz-portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:14px}
.hz-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);padding:14px;cursor:pointer;display:grid;grid-template-columns:1fr 70px;gap:10px;align-items:center;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.hz-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.hz-card h3{margin:0 0 3px;font-size:17px}.hz-card .hz-kv{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
.hz-card .hz-next{font-size:13px;margin-top:6px;font-weight:300}
.hz-card.example{border-style:dashed}
.hz-projhead{display:flex;gap:14px;align-items:center;justify-content:space-between}
.hz-projtitle h1{margin:4px 0 2px;font-size:24px}
.hz-phasebar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hz-cockpit{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,300px);gap:12px;align-items:start}
.hz-cockpit>*{min-width:0}
@media(max-width:1180px){.hz-cockpit{grid-template-columns:1fr 1fr}.hz-centre{grid-column:1/-1;order:-1}}
@media(max-width:760px){.hz-cockpit{grid-template-columns:1fr}}
.hz-pulse{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:12px;align-items:start}
.hz-pulse>*{min-width:0}
.hz-pulse .hz-buckets{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media(max-width:1380px){.hz-pulse{grid-template-columns:1fr}.hz-pulse .hz-buckets{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.hz-pulse{grid-template-columns:1fr}}
.hz-task{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line2);font-size:13.5px;line-height:1.45}
.hz-task input{margin-top:3px}.hz-task.done span{text-decoration:line-through;color:var(--mute)}
.hz-stake{padding:7px 0;border-bottom:1px solid var(--line2);font-size:13px;line-height:1.45}
.hz-stake b{display:block}.hz-stake .pill{margin-top:4px;cursor:pointer}
.hz-dec{padding:6px 0;border-bottom:1px solid var(--line2);font-size:13px;line-height:1.45}.hz-dec .dim{font-family:var(--mono);font-size:11px}
.hz-tl{width:100%;display:block}
.hz-rail{display:block;min-width:0}
.hz-centre{min-width:0}
.hz-ringbox{width:70px;height:70px}
.hz-ringbox .hz-ring{width:70px;height:70px}
.hz-form{display:grid;gap:10px}
.hz-form label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--label);text-transform:uppercase;display:block;margin-bottom:4px}
.hz-form select,.hz-form input,.hz-form textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
.hz-form textarea{min-height:96px;resize:vertical}
.hz-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hz-track{width:100%;display:block;margin:6px 0 4px}
.hz-ring{width:76px;height:76px;display:block}
.hz-top{display:flex;gap:14px;align-items:center}
.hz-top .hz-say{flex:1;font-size:15px;line-height:1.55;font-weight:300}
.hz-radar{width:100%;max-width:280px;display:block;margin:0 auto}
.hz-buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;min-width:0}
.hz-bucket{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);font-size:12px;line-height:1.4;min-width:0;overflow:hidden}
.hz-bucket>div{min-width:0;overflow-wrap:anywhere}
.hz-glyph{width:44px;height:44px;flex:none}
.hz-signal{padding:8px 0;border-bottom:1px solid var(--line2);font-size:14px;line-height:1.55}
.hz-signal .src{font-family:var(--mono);font-size:11px;color:var(--mute);display:block;margin-top:3px}
.hz-signal[data-w="evidence"]{border-left:3px solid var(--green);padding-left:10px}
.hz-signal[data-w="lead"]{border-left:3px solid var(--amber);padding-left:10px}
.hz-brief{font-size:15px;line-height:1.65;font-weight:300}.hz-brief p{margin:8px 0}.hz-brief strong{font-weight:700}
.hz-silence{margin-top:10px;padding:10px 12px;border:1px dashed var(--amber);border-radius:var(--r-sm);font-size:12.5px;line-height:1.5;background:rgba(194,103,10,.05)}
.hz-silence b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--amber-ink)}
.hz-matrix{width:100%;max-width:380px;display:block;margin:6px auto}
.hz-cover-svg{width:100%;display:block;border-radius:var(--r-sm)}
.hz-shape{padding:10px 12px;border:1px solid var(--line2);border-left:3px solid var(--purple);border-radius:var(--r-sm);background:var(--bg);margin-top:8px;font-size:14px;line-height:1.55}
.hz-flash{font-family:var(--mono);font-size:11px;color:var(--accent-ink);letter-spacing:.06em;animation:rsflash 1.2s var(--ease) infinite alternate}
.hz-report{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);padding:28px;margin-top:12px}
.hz-report h1{font-size:30px;margin:6px 0}.hz-report h2{font-size:18px;margin:22px 0 6px;border-bottom:1px solid var(--line2);padding-bottom:4px}
.hz-report .hz-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent-ink);text-transform:uppercase}
.hz-report .hz-sub{color:var(--mute);font-size:15px}.hz-report .src{font-family:var(--mono);font-size:11px;color:var(--mute)}
.hz-report ol{padding-left:20px}.hz-report li{margin:6px 0;font-size:14px;line-height:1.55}
.hz-report p{font-size:14.5px;line-height:1.65}.hz-cover{margin-bottom:10px}

/* Horizon · the business case (MCL-2676): the strategist's sliders, four drawings, the assembly line under her answers */
.hz-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; margin: 6px 0 10px; }
.hz-slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12px; color: var(--mute); align-items: center; }
.hz-slider span { grid-column: 1 / -1; } .hz-slider em { font-style: normal; color:var(--accent-ink); }
.hz-slider input { width: 100%; accent-color: var(--accent); } .hz-slider b { font-family: var(--mono); color: var(--txt); min-width: 3ch; text-align: right; }
.hz-casegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 10px; }
.hz-casegrid svg { display: block; }
.hz-qc{margin-top:8px;padding:8px 10px;border:1px dashed var(--amber);border-radius:var(--r-sm);font-size:12.5px;color:var(--amber-ink)}
.hz-assembly { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11px; }
.chip[data-t="VERIFIED"] { border-color: var(--green); color:var(--green-ink); } .chip[data-t^="WARNING"] { border-color: var(--amber); color:var(--amber-ink); } .chip[data-t="no"] { border-color: var(--line); color: var(--mute); }
@media print{header,.hz-studio,.hz-noprint{display:none!important}.hz-report{border:0;padding:0}}

/* ── fairness-story primitives · MCL-2670 ───────────────────────────────────
   A fairness page that teaches: Thea reads first (.story / .tread), the cell
   the company is built to show (.story2 / .stat), the lesson (.teach / .lesson
   / .steps as a numbered list), and the card the story lives in ([data-story]).
   The chart colours are the verdict chips' colours, read off :root by
   charts.js, so a bar and a pill never disagree. */
.story{border-left:3px solid var(--accent)}
.stitle{font-family:var(--font);font-size:24px;font-weight:900;letter-spacing:-.01em;line-height:1.2;margin:8px 0 6px}
.sclaim{font-size:15px;color:var(--txt);line-height:1.55;margin:0 0 14px;max-width:70ch}
.tread{font-size:14.5px;line-height:1.65;color:var(--txt);margin:0 0 10px;max-width:74ch;padding-left:14px;border-left:2px solid var(--line2)}
.story2{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:12px}
.stat{border:1px solid var(--line2);border-radius:var(--r-md);padding:12px 14px;background:var(--bg)}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.stat .v{margin-top:6px;font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .s{margin-top:4px;font-size:12.5px;color:var(--mute);font-weight:300}
.funnelrow{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1.2fr);gap:18px;align-items:center;margin-top:14px}
@media (max-width:760px){.funnelrow{grid-template-columns:1fr}}
.card[data-story="1"]{border-color:rgba(8,145,178,.45);box-shadow:0 0 0 3px rgba(8,145,178,.08)}
.teach{background:var(--surface2)}
.lesson{margin-top:12px}
.lesson .lh{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.lesson p{font-size:14.5px;line-height:1.65;color:var(--txt);margin:0;max-width:74ch}
.lesson .steps{display:block;margin:4px 0 0 18px;padding:0}
.lesson .steps li{font-size:14.5px;line-height:1.6;color:var(--txt);margin-bottom:6px;max-width:70ch}
.swatch{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px}
/* ── wander primitives · MCL-2667 ─────────────────────────────────────────
   The city, told: a vector map drawn from OpenStreetMap on one canvas, the
   stories as dots, a walk of five you find, Thea as the guide. */
.wd-studio{display:grid;grid-template-columns:1.3fr .8fr;gap:18px;align-items:start}
@media(max-width:980px){.wd-studio{grid-template-columns:1fr}}
.wd-map{width:100%;height:520px;display:block;border-radius:var(--r-sm);cursor:grab;touch-action:none;background:#f4f1ec;border:1px solid var(--line2)}
.wd-map:active{cursor:grabbing}
.wd-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.wd-place{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line2);font-size:14px;cursor:pointer}
.wd-place:hover b{color:var(--accent-ink)}.wd-place .dim{margin-left:auto;font-family:var(--mono);font-size:11px;white-space:nowrap}
.wd-story img{width:100%;max-height:220px;object-fit:cover;border-radius:var(--r-sm);margin:8px 0}
.wd-story h3{margin:0 0 4px;font-size:18px}.wd-story p{font-size:14.5px;line-height:1.6;font-weight:300}
.wd-target{margin-top:10px;padding:12px;border:1px solid var(--line2);border-left:3px solid var(--purple);border-radius:var(--r-sm);background:var(--bg);font-size:14px;line-height:1.55}
.wd-lines{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.7;white-space:pre-wrap;margin-top:8px}
.wd-flash{font-family:var(--mono);font-size:11px;color:var(--accent-ink);letter-spacing:.06em;animation:rsflash 1.2s var(--ease) infinite alternate}


/* MCL-2688 · the design audit (AO-77) measured on every app: a keyboard focus must be seen; a control at phone width is a finger's target; no text under 11px anywhere in the system (every 10.5px label and pill raised) */
button:focus-visible,a:focus-visible,[role=button]:focus-visible,summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px}
@media(max-width:700px){.chip,.btn,.tab,.fbtn,.whob{min-height:36px;min-width:36px}.chip{padding-top:8px;padding-bottom:8px}}

/* ── Salon · the eye, trained (sl-*) ─────────────────────────────────────────────────────── */
.sl-rooms{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sl-studio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}
@media (max-width:900px){.sl-studio{grid-template-columns:1fr}}
.sl-wall{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding:14px;background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:var(--r-sm);max-height:560px;overflow:auto}
.sl-frame{margin:0;width:calc(var(--ar) * 92px);height:92px;flex:0 0 auto;position:relative;cursor:pointer;padding:5px;background:var(--mat);border:1px solid rgba(0,0,0,.18);box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .15s}
.sl-frame:hover{transform:translateY(-2px) scale(1.03);z-index:2}
.sl-frame img{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface2)}
.sl-frame figcaption{display:none}.sl-frame:hover figcaption{display:block;position:absolute;left:0;right:0;bottom:-38px;font-size:11px;line-height:1.25;background:var(--bg);border:1px solid var(--line);padding:4px 6px;z-index:3}
.sl-frame figcaption b{display:block;font-weight:700}.sl-frame figcaption span{color:var(--mute)}
.sl-frame.on{outline:3px solid var(--accent);outline-offset:2px}.sl-frame.veiled img{filter:blur(3px)}.sl-frame img[data-src]{filter:blur(2px)}.sl-frame img.missing{opacity:.5}
.sl-big img[data-src]{filter:blur(4px)}
.sl-rank{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:13px;margin-bottom:8px}.sl-rank .btn{margin-left:auto}
.sl-look{margin-top:10px}.sl-ask{font-family:var(--serif);font-size:19px;font-weight:700;margin:6px 0 12px}
.sl-big{margin:0 0 12px;padding:8px;background:var(--mat);display:inline-block;max-width:100%;box-shadow:0 3px 10px rgba(0,0,0,.2)}.sl-big img{display:block;max-width:100%;max-height:360px;background:var(--surface2)}
.sl-years{display:flex;gap:14px;align-items:center;margin:8px 0 12px}.sl-years input{flex:1;accent-color:var(--accent)}.sl-years b{font-family:var(--mono);font-size:26px;min-width:4ch}
.sl-opts .chip{font-size:14px;padding:8px 14px}
.sl-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sl-pick{background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;cursor:pointer;font:inherit;color:var(--txt)}.sl-pick:hover{border-color:var(--accent)}.sl-pick span{display:block;font-family:var(--mono);font-size:12px;color:var(--accent-ink)}
.sl-wheelrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.sl-wheel{touch-action:none;cursor:crosshair;border-radius:50%}
.sl-result{padding:7px 0;border-top:1px solid var(--line);font-size:14px}.sl-result b{font-family:var(--mono);margin-right:6px}.sl-result.ok b{color:var(--green-ink)}.sl-result.no b{color:var(--amber-ink)}.sl-result span{color:var(--mute)}
.sl-score{font-family:var(--serif);font-size:22px;font-weight:700;margin:6px 0 10px}
.sl-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line);vertical-align:middle}
.sl-story .sl-big{display:block;max-width:100%}.sl-title{font-family:var(--serif);font-size:18px;margin:6px 0}
.sl-fields{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:8px 0}.sl-fields dt{color:var(--mute);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.sl-fields dd{margin:0}
.sl-extract{font-size:14px;line-height:1.6}
.sl-atoms{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--mute);line-height:1.5}.sl-atoms li{margin:3px 0}
.sl-timeline svg{display:block}
.sl-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);padding:10px 0;animation:slPulse 1.2s ease-in-out infinite}@keyframes slPulse{50%{opacity:.45}}
.sl-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.chip[data-t="VERIFIED"]{border-color:var(--green);color:var(--green-ink)}.chip[data-t="no"]{border-color:var(--amber);color:var(--amber-ink)}

/* ── Gambit · the puzzle arena (gb-*) ────────────────────────────────────────────────────── */
:root{--gb-light:#efe6d2;--gb-dark:#8a9a78}
.gb-studio{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}.gb-studio>*{min-width:0}
@media(max-width:980px){.gb-studio{grid-template-columns:1fr}}
.gb-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.gb-clock{font-family:var(--mono);font-size:18px;color:var(--txt);font-weight:500}
.gb-board{max-width:560px;margin:8px auto 0;min-width:0}.gb-board svg{display:block;border-radius:var(--r-sm);overflow:hidden}
.gb-sq{cursor:pointer}.gb-sq:focus{outline:none}.gb-sq:focus-visible rect:first-child{stroke:var(--accent-ink);stroke-width:4}
.gb-piece{font-size:46px;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",serif;pointer-events:none}.gb-w{fill:#fff;stroke:#1a1a24;stroke-width:1.2px;paint-order:stroke}.gb-b{fill:#1a1a24;stroke:#fff;stroke-width:.8px;paint-order:stroke}
.gb-coord{font-family:var(--mono);font-size:11px;fill:#3c4a34;opacity:.8}
.gb-status{margin-top:8px;font-size:13.5px;min-height:22px}.gb-ok{color:var(--green-ink)}.gb-miss{color:var(--amber-ink)}
.gb-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);animation:gbPulse 1.2s ease-in-out infinite}@keyframes gbPulse{50%{opacity:.45}}
.gb-cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:8px}.gb-cell{background:var(--surface2);border-radius:var(--r-sm);padding:8px 6px;text-align:center;min-width:0}.gb-cell b{display:block;font-family:var(--serif);font-size:18px}.gb-cell span{display:block;font-size:11px;color:var(--mute);overflow-wrap:anywhere}
.gb-cell-ok{border:1px solid var(--green)}.gb-cell-miss{border:1px solid var(--amber)}.gb-cell-now{border:1px dashed var(--accent-ink)}
@media(max-width:700px){.gb-cells{grid-template-columns:repeat(5,minmax(0,1fr))}.gb-cell span{font-size:11px}}
.gb-meta{display:flex;gap:6px;flex-wrap:wrap}
.gb-table{width:100%;border-collapse:collapse;font-size:13.5px}.gb-table th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);padding:6px 6px;border-bottom:1px solid var(--line)}.gb-table td{padding:7px 6px;border-bottom:1px solid var(--line2);overflow-wrap:anywhere}.gb-me td{background:var(--surface2)}
.gb-score{font-family:var(--serif);font-size:16px}.gb-score b{font-size:22px;color:var(--accent-ink)}
.gb-letter{font-size:14.5px;line-height:1.65;padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm);margin-top:8px}.gb-letter p{margin:0 0 10px}
.gb-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.gb-race{min-width:0}.gb-coach{min-width:0}.gb-leader{min-width:0;overflow-x:auto}.gb-puzzle{min-width:0}.gb-receipt{min-width:0}
/* ── Ampere · the plant's power desk (am-*) ───────────────────────────────────────────────── */
.am-studio{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}.am-studio>*{min-width:0}
@media(max-width:980px){.am-studio{grid-template-columns:1fr}}
.am-ribbon{margin-top:10px;min-width:0;overflow-x:auto}.am-ribbon svg{display:block;min-width:520px}
.am-tick{font-family:var(--mono);font-size:11px;fill:var(--mute)}.am-axis{font-family:var(--mono);font-size:11px;fill:var(--label)}.am-band{font-family:var(--mono);font-size:11px;fill:var(--accent-ink)}.am-big{font-family:var(--mono);font-size:22px;fill:var(--txt);font-weight:500}
.am-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--mute)}.am-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.am-jobs{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;min-width:0}
.am-job{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:var(--surface2);border-radius:var(--r-sm);font-size:13.5px}.am-job b{font-size:14px}.am-job span{color:var(--mute);font-size:12.5px;flex:1 1 160px;min-width:0}
.am-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px;margin-top:6px}
.am-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute);min-width:0}.am-form input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);min-width:0}.am-form input[type=range]{padding:0;border:0;min-height:36px}
.am-wide{grid-column:1/-1}
.am-mixrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.am-mixrow svg{flex:0 0 auto}
.am-mixlist{list-style:none;margin:0;padding:0;font-size:13px;color:var(--mute);flex:1 1 140px;min-width:0}.am-mixlist li{margin:3px 0}.am-mixlist i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}.am-mixlist b{color:var(--txt)}
.am-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:10px}.am-totals div{background:var(--surface2);border-radius:var(--r-sm);padding:10px 12px;min-width:0}.am-totals b{display:block;font-family:var(--serif);font-size:18px}.am-totals span{display:block;font-size:12px;color:var(--mute)}
.am-item{border-top:1px solid var(--line2);padding:8px 0;font-size:14px;min-width:0}.am-item b{font-size:15px}.am-window{font-family:var(--mono);font-size:12.5px;color:var(--accent-ink);margin-left:6px}.am-wait b{color:var(--amber-ink)}
.am-gates{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.am-letter{font-size:14.5px;line-height:1.65;padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm);margin-top:8px}.am-letter p{margin:0 0 10px}
.am-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.am-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);padding:10px 0;animation:amPulse 1.2s ease-in-out infinite}@keyframes amPulse{50%{opacity:.45}}
.am-plan{min-width:0}.am-watch{min-width:0}.am-brief{min-width:0}.am-mix{min-width:0}
/* ── Kerb · the comparables desk (kb-*) ──────────────────────────────────────────────────── */
.kb-studio{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}.kb-studio>*{min-width:0}
@media(max-width:980px){.kb-studio{grid-template-columns:1fr}}
.kb-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px;margin-top:6px}
.kb-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute);min-width:0}.kb-form input,.kb-form select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);min-width:0}
.kb-map{margin-top:10px;min-width:0}.kb-map svg{display:block;max-width:640px;margin:0 auto}
.kb-time{margin-top:6px;min-width:0;overflow-x:auto}.kb-time svg{display:block;min-width:520px}
.kb-tick{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.kb-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--mute)}.kb-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.kb-bandrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.kb-bandrow div{background:var(--surface2);border-radius:var(--r-sm);padding:10px 8px;text-align:center;min-width:0}.kb-bandrow b{display:block;font-family:var(--serif);font-size:17px;overflow-wrap:anywhere}.kb-bandrow span{display:block;font-size:11.5px;color:var(--mute)}.kb-mid b{font-size:21px;color:var(--accent-ink)}
.kb-range{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:6px;flex-wrap:wrap;gap:6px}
.kb-thin{border:1px dashed var(--amber-ink);color:var(--amber-ink);border-radius:var(--r-sm);padding:8px 10px;font-size:13px;margin-top:8px}
.kb-sale{border-top:1px solid var(--line2);padding:8px 0;font-size:14px;min-width:0}.kb-sale b{font-size:14.5px;text-transform:capitalize}.kb-price{font-family:var(--mono);font-size:13px;color:var(--accent-ink);margin-left:6px;white-space:nowrap}
.kb-gates{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.kb-letter{font-size:14.5px;line-height:1.65;padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm);margin-top:8px}.kb-letter p{margin:0 0 10px}
.kb-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.kb-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);padding:10px 0;animation:kbPulse 1.2s ease-in-out infinite}@keyframes kbPulse{50%{opacity:.45}}
.kb-band{min-width:0}.kb-six{min-width:0}.kb-watch{min-width:0}.kb-note{min-width:0}
/* ── Counter · the returns desk (ct-*) ────────────────────────────────────────────────────── */
.ct-studio{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}.ct-studio>*{min-width:0}
@media(max-width:980px){.ct-studio{grid-template-columns:1fr}}
.ct-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}
@media(max-width:700px){.ct-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ct-col{background:var(--surface2);border-radius:var(--r-sm);padding:8px;min-height:120px;min-width:0}
.ct-colhead{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-bottom:8px;display:flex;justify-content:space-between}
.ct-count{background:var(--bg);border-radius:999px;padding:0 7px}
.ct-card{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:8px;cursor:pointer;font:inherit;color:var(--txt);min-width:0}
.ct-card b{display:block;font-size:14px}.ct-card span{display:block;font-size:12px;color:var(--mute);overflow-wrap:anywhere}.ct-card.on{outline:2px solid var(--accent-ink);outline-offset:1px}.ct-hold{color:var(--accent-ink)}
.ct-empty{color:var(--mute);text-align:center;padding:12px 0}
.ct-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-top:6px}
.ct-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute);min-width:0}.ct-form input,.ct-form select,.ct-form textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);min-width:0}
.ct-check{flex-direction:row!important;align-items:center;gap:8px!important}.ct-wide{grid-column:1/-1}
.ct-title{font-family:var(--serif);font-size:18px;margin:4px 0 8px}
.ct-verdict{font-family:var(--serif);font-size:16px;line-height:1.5;padding:10px 12px;border-left:4px solid var(--accent-ink);background:var(--surface2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.ct-because{font-size:13.5px;color:var(--mute);margin:8px 0}.ct-meta{margin:8px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ct-needs{border:1px dashed var(--amber-ink);color:var(--amber-ink);border-radius:var(--r-sm);padding:8px 10px;font-size:13px;margin:8px 0}
.ct-timeline{list-style:none;padding:0;margin:8px 0;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}.ct-timeline span{font-family:var(--mono);color:var(--txt)}
.ct-law{margin-top:8px}.ct-section{border-top:1px solid var(--line2);padding:6px 0}.ct-section summary{cursor:pointer;font-size:13.5px}.ct-paras p{font-size:13px;line-height:1.55;margin:6px 0}
.ct-clock svg{display:block;margin:0 auto}
.ct-inboxrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2);font-size:13.5px;flex-wrap:wrap}
.ct-letter{font-size:14.5px;line-height:1.65;padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm);margin-top:8px}.ct-letter p{margin:0 0 10px}
.ct-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.ct-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);padding:10px 0;animation:ctPulse 1.2s ease-in-out infinite}@keyframes ctPulse{50%{opacity:.45}}
.ct-case{min-width:0}.ct-inbox{min-width:0}.ct-reply{min-width:0}
.ct-src{display:inline-block;padding:8px 0;font-size:13px}
/* ── Image DNA · the brand intelligence engine (dn-*) ───────────────────────────────────── */
.dn-studio{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}.dn-studio>*{min-width:0}
@media(max-width:980px){.dn-studio{grid-template-columns:1fr}}
.dn-brain{margin-top:10px;min-width:0}.dn-name{font-family:var(--serif);font-size:20px;font-weight:700}.dn-line{font-size:14px;color:var(--mute);margin:4px 0 8px}
.dn-swatches{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.dn-swatch{display:inline-flex;align-items:flex-end;width:64px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line2);padding:3px;min-width:0}.dn-swatch i{font-family:var(--mono);font-style:normal;font-size:11px;background:#fff;color:#111;border-radius:3px;padding:0 3px}.dn-ground{border-style:dashed}
.dn-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:10px}.dn-product{font:inherit;background:var(--surface2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:6px;cursor:pointer;text-align:left;color:var(--txt);min-width:0;min-height:36px}.dn-product img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:4px}.dn-product span{display:block;font-size:12.5px;margin-top:4px;overflow-wrap:anywhere;line-height:1.3}.dn-noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:11px;color:var(--mute)}
.dn-so{margin-top:8px}
.dn-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;margin-top:6px}.dn-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mute);min-width:0}.dn-form select{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--txt);min-width:0}
.dn-ad{margin-top:12px;min-width:0}.dn-frame{width:100%;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;background:#fff}.dn-frame svg{display:block;width:100%;height:100%}
.dn-renderers{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dn-score{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}.dn-score b{font-family:var(--serif);font-size:34px;color:var(--accent-ink)}.dn-score span{font-size:13px;color:var(--mute)}
.dn-steps{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.dn-steps li{margin:3px 0}.dn-delta{font-family:var(--mono);font-size:12px;display:inline-block;min-width:36px}.dn-delta.up{color:var(--green-ink)}.dn-delta.down{color:var(--amber-ink)}
.dn-dim{display:grid;grid-template-columns:78px minmax(0,1fr);gap:4px 10px;align-items:center;padding:5px 0;border-top:1px solid var(--line2);font-size:12.5px}.dn-dimname{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}.dn-bar{display:block;height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}.dn-bar i{display:block;height:100%;background:var(--accent-ink)}.dn-dim .sub{grid-column:2}
.dn-breach{border:1px dashed var(--amber-ink);color:var(--amber-ink);border-radius:var(--r-sm);padding:6px 10px;font-size:13px;margin-top:6px}.dn-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dn-route{border-top:1px solid var(--line2);padding:6px 0;font-size:13.5px}
.dn-brief{font-family:var(--mono);font-size:11px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface2);border-radius:var(--r-sm);padding:10px;margin:0;max-height:420px;overflow:auto}
.dn-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);padding:10px 0;animation:dnPulse 1.2s ease-in-out infinite}@keyframes dnPulse{50%{opacity:.45}}
.dn-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.dn-cool{min-width:0}.dn-gov{min-width:0}.dn-guard{min-width:0}.dn-routes{min-width:0}

/* ── Meridian · the board report (md-*) ─────────────────────────────────────────────────── */
.md-cover{background:var(--txt);color:var(--bg);border-color:var(--txt)}.md-cover .sub{color:rgba(255,255,255,.72)}.md-cover .sh{color:rgba(255,255,255,.6)}
.md-coverrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}
.md-declared{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.md-title{font-family:var(--serif);font-size:clamp(24px,4vw,40px);margin:4px 0 4px;font-weight:900;letter-spacing:-.02em;color:var(--bg)}
.md-headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;min-width:0;flex:1 1 360px}.md-headline div{min-width:0}.md-headline b{display:block;font-family:var(--serif);font-size:22px;color:var(--bg);overflow-wrap:anywhere}.md-headline span{display:block;font-size:11.5px;color:rgba(255,255,255,.72)}
.md-scrub{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.md-scrub input[type=range]{flex:1 1 200px;min-height:36px;accent-color:var(--gold)}.md-scrub input[type=number]{font:inherit;font-size:14px;padding:6px 8px;width:90px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);background:transparent;color:var(--bg)}.md-scrub .mono{color:var(--gold)}
.md-cover .btn.ghost{border-color:rgba(255,255,255,.4);color:var(--bg)}
.md-moved{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.md-movedlabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}.md-cover .chip{background:rgba(255,255,255,.08);color:var(--bg)}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px}
.md-poster{min-width:0;display:flex;flex-direction:column;gap:6px}.md-hot{outline:2px solid var(--amber);outline-offset:-1px}
.md-posterhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.md-big{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.md-delta{font-family:var(--mono);font-size:12px;color:var(--mute)}.md-delta.up{color:var(--green-ink)}.md-delta.down{color:var(--amber-ink)}
.md-tick{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.md-picto{margin-top:4px}.md-picto svg{display:block}
.md-basis{line-height:1.45}.md-drivers{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}.md-drivers b{color:var(--txt)}
.md-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}@media(max-width:980px){.md-two{grid-template-columns:1fr}}
.md-chaps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.md-chaps .chip.on{border-color:var(--accent-ink);color:var(--accent-ink)}
.md-letter{font-size:14.5px;line-height:1.65;padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm);margin-top:8px}.md-letter p{margin:0 0 10px}
.md-audit{margin-top:8px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.md-audit.no{color:var(--amber-ink)}
.md-assembly{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px}
.md-flash{font-family:var(--mono);font-size:12px;color:var(--accent-ink);padding:10px 0;animation:mdPulse 1.2s ease-in-out infinite}@keyframes mdPulse{50%{opacity:.45}}
.md-fan{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;margin-top:10px}.md-fanbar{flex:1;height:10px;background:var(--surface2);border-radius:5px;position:relative;overflow:hidden}.md-fanbar i{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.5}
.md-alloc{margin-top:10px;display:grid;gap:6px}.md-alloc div{display:grid;grid-template-columns:130px minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:12.5px}.md-bar{display:block;height:8px;background:var(--surface2);border-radius:4px;overflow:hidden}.md-bar i{display:block;height:100%;background:var(--accent-ink)}
.md-story{min-width:0}.md-case{min-width:0}