/* ═══════════════════════════════════════════════════════════════════════
   hymn.css — the one hymn sheet of the EIGEN ENGINE's interface.

   HIS ROOM (2026-07-22, the final authorship): the identity is the
   author's own — the gold-on-midnight of his front door, one identity
   from the website to the instrument. Deep night ground, glass panels a
   breath lighter, warm gold as the one working ink, the sky-blue of his
   links as the judgment voice, Lora carrying the composed prose, Outfit
   carrying display names, JetBrains Mono as the machine's small hand.
   The faces are VENDORED (fonts/ — offline like katex, never a CDN).
   The :root tokens below are the CANONICAL palette; every component
   rides them, so the identity is one decision applied everywhere
   (DESIGN_LANGUAGE.md is the governing spec).

   Served by src/laplace/shared_ui.py at GET /shared/hymn.css.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Lora";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/lora-var.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/lora-italic-var.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600 800;font-display:swap;
  src:url(fonts/outfit-var.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url(fonts/jetbrains-mono-var.woff2) format("woff2")}
:root{
  --bg:#0a0e1a; --panel:#111827; --panel2:#18202f; --edge:#1f2734; --edge2:#2d3547;
  --ink:#e8e6e3; --ink2:#9ca3af; --dim:#6b7280;
  --accent:#c9a96e; --teal:#a89a7a; --warn:#b8894a; --bad:#c0392b; --ok:#8aa86a; --keystone:#7eb8da;
  --gold-light:#dfc599;                             /* the accent's raised voice */
  --chipink:#0a0e1a;                                /* text set ON a colored ground */
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --display:"Outfit","Avenir Next","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hy-shell-h:36px;
  --hy-pop-shadow:0 12px 36px rgba(0,0,0,.5);       /* the popover depth var (the .hy-ladder family stays color-literal-free) */
  --hy-zero-dim:.5;                                 /* THE ONE zero-count dimming law — every zero-count token dims to this (finding 7) */
}
/* the room's ground + the voices (the one identity sheet may reach across pane
   modules — it IS the look; semantics stay in the modules) */
body{background:var(--bg);color:var(--ink)}
[data-role="brief-prose"],.dash-prose,.sb-brief-prose,.ck-brief-prose{
  font-family:var(--serif);font-size:15.5px;line-height:1.68;letter-spacing:.002em}
.hy-card-name,.art-rev-kind,.sb-focus-title,.ck-focus-title,.art-inspect-title,
.dk-arch-head{font-family:var(--serif)}
.sc-head,#hy-shell .hy-stage .st-t,.hy-proj .pj-name{font-family:var(--display)}

/* ─── THE SHELL — the orienting instrument (2026-07-22, the final authorship).
   Two registers, one chrome. The MASTHEAD: the mark · THE ACTIVE PAPER with its
   live position · the switch+find cluster. Beneath it THE JOURNEY: the process
   spine — Home · Grow → Shape → Read · Judge → Machine · Desk — each stage
   wearing its live state word in small type, you-are-here lit, and a hover card
   holding what the stage is and the doors it keeps. Not a strip: the room the
   orientation needs, and no more. ─── */
#hy-shell{position:fixed;top:0;left:0;right:0;z-index:4000;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-bottom:1px solid var(--edge2);
  box-shadow:0 2px 0 0 color-mix(in srgb,var(--accent) 30%,transparent),
    0 10px 26px -14px color-mix(in srgb,black 74%,transparent);
  font:12px/1.45 -apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink2)}
#hy-shell .hy-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 16px 6px}
/* the Eigen mark — HOME (→ /), quiet keystone */
#hy-shell .hy-mark{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.4px;
  color:var(--keystone);cursor:pointer;text-decoration:none;
  padding:3px 8px;border-radius:7px;border:1px solid transparent}
#hy-shell .hy-mark:hover{color:var(--accent);border-color:var(--edge2);background:var(--bg)}
#hy-shell .hy-mark small{color:var(--dim);font-weight:400;margin-left:1px;font-size:9px}
#hy-shell .hy-badge{background:var(--accent);color:var(--bg);font-family:var(--mono);
  font-weight:700;font-size:9.5px;line-height:1;padding:2px 5px;border-radius:9px;
  min-width:8px;text-align:center;margin-left:2px}
#hy-shell .hy-badge[hidden]{display:none}
/* THE ACTIVE PAPER — front and centre: name + live position words. A door home. */
#hy-shell .hy-proj{display:inline-flex;align-items:center;gap:8px;flex:none;
  min-width:0;max-width:38vw;text-decoration:none;
  padding:4px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--edge2)}
#hy-shell .hy-proj:hover{border-color:var(--accent)}
#hy-shell .hy-proj[hidden]{display:none}
#hy-shell .hy-proj .pj-name{font-weight:650;color:var(--ink);font-size:13px;
  letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hy-shell .hy-proj .pj-pos{font-family:var(--mono);font-size:9px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.05em;flex:none;white-space:nowrap}
/* ── THE JOURNEY ROW — the process spine. Wraps before it overflows (375px law). ── */
#hy-shell .hy-journey{display:flex;align-items:stretch;flex-wrap:wrap;gap:0 2px;
  padding:0 12px;border-top:1px solid var(--edge);min-height:46px}
#hy-shell .hy-stage-wrap{position:relative;display:flex}
#hy-shell .hy-stage{display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:6px 14px 7px;min-width:0;text-decoration:none;
  border-bottom:2px solid transparent;border-radius:9px 9px 0 0}
#hy-shell .hy-stage .st-t{font-size:13.5px;font-weight:640;color:var(--ink2);
  letter-spacing:.01em;white-space:nowrap}
#hy-shell .hy-stage .st-w{font-family:var(--mono);font-size:10.5px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
#hy-shell .hy-stage .st-w.is-ask{color:var(--warn)}
#hy-shell .hy-stage .st-w[hidden]{display:none}
/* the reserved caption placeholder (finding 4): a wordless stage keeps the caption line's
   height so the roster never jumps between one- and two-line states; the line renders empty. */
#hy-shell .hy-stage .st-w.is-placeholder{color:transparent;user-select:none}
#hy-shell .hy-stage:hover{background:var(--panel)}
#hy-shell .hy-stage:hover .st-t{color:var(--ink)}
/* you-are-here — unmistakable: accent title on the lit baseline */
#hy-shell .hy-stage.on{border-bottom-color:var(--accent);background:var(--bg)}
#hy-shell .hy-stage.on .st-t{color:var(--accent);font-weight:680}
/* standing inside one of this stage's doors — the baseline lit brighter + a faint accent
   wash, and the door-surface named on the stage, so the spine alone answers where-am-I */
#hy-shell .hy-stage.on-door{border-bottom-color:color-mix(in srgb,var(--accent) 78%,transparent);
  border-bottom-style:dashed;background:color-mix(in srgb,var(--bg) 88%,var(--accent))}
#hy-shell .hy-stage.on-door .st-t{color:var(--ink)}
/* the door-surface you are standing in (Assets/Analytics/Altitude/Guide), named ON the lit
   parent stage in the working gold (shell.js stageEl → .st-door-here) — finding 8 */
#hy-shell .hy-stage .st-door-here{font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--accent);white-space:nowrap;letter-spacing:.01em}
#hy-shell .hy-stage .st-door-here::before{content:"› ";color:var(--dim)}
#hy-shell .hy-flow{align-self:center;color:var(--dim);font-size:11px;padding:0 3px;
  user-select:none;flex:none}
#hy-shell .hy-flow[data-quiet]{opacity:.5;padding:0 6px}
/* THE STAGE CARD — hover reveals, focus reveals; out of flow, geometrically stable.
   What this stage is, its live word, and the doors it keeps (the More-menu's grave). */
#hy-shell .hy-stage-card{position:absolute;top:100%;left:0;z-index:4002;
  display:flex;flex-direction:column;gap:8px;width:min(330px,92vw);
  visibility:hidden;opacity:0;
  transition:opacity .13s ease .14s,visibility 0s linear .27s;
  background:var(--panel);border:1px solid var(--edge2);border-radius:0 10px 10px 10px;
  box-shadow:var(--hy-pop-shadow);padding:12px 14px}
#hy-shell .hy-stage-wrap.is-right .hy-stage-card{left:auto;right:0;border-radius:10px 0 10px 10px}
#hy-shell .hy-stage-wrap:hover .hy-stage-card,
#hy-shell .hy-stage-wrap:focus-within .hy-stage-card{visibility:visible;opacity:1;transition-delay:.14s,.14s}
#hy-shell .sc-head{display:flex;align-items:baseline;gap:9px;font-size:13.5px;
  font-weight:660;color:var(--ink)}
#hy-shell .sc-here{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.07em;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:5px;padding:1px 6px}
#hy-shell .sc-word{font-family:var(--mono);font-size:10.5px;color:var(--warn)}
#hy-shell .sc-purpose{font-size:12px;line-height:1.55;color:var(--ink2)}
#hy-shell .sc-doors{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--edge);
  padding-top:9px}
#hy-shell .sc-door{display:flex;flex-direction:column;gap:1px;text-decoration:none;
  border:1px solid var(--edge);border-radius:8px;padding:6px 10px;background:var(--bg)}
#hy-shell .sc-door:hover{border-color:var(--accent)}
#hy-shell .sc-door .scd-t{font-size:12px;font-weight:640;color:var(--ink)}
#hy-shell .sc-door .scd-t.on{color:var(--accent)}
#hy-shell .sc-door .scd-p{font-size:10.5px;color:var(--dim);line-height:1.45}
/* THE RIGHT CLUSTER — switch + find, merged into ONE instrument and pushed right */
#hy-shell .hy-cluster{display:inline-flex;align-items:center;align-self:center;
  margin-left:auto;flex:1 1 auto;justify-content:flex-end;min-width:0;
  background:var(--bg);border:1px solid var(--edge);border-radius:8px;
  max-width:min(460px,54vw);overflow:visible}
#hy-shell .hy-cluster:focus-within{border-color:var(--accent)}
/* J5 — the searchable/keyboardable project quick-switch (shell.js wireSwitch) */
#hy-shell .hy-switch{position:relative;flex:none;min-width:0}
#hy-shell .hy-switch input{width:132px;max-width:28vw;background:transparent;color:var(--ink);
  border:none;border-right:1px solid var(--edge2);padding:5px 9px;font:inherit;font-size:11.5px}
#hy-shell .hy-switch input::placeholder{color:var(--dim)}
#hy-shell .hy-switch input:focus{outline:none}
#hy-shell .hy-switch-list{position:absolute;top:calc(100% + 6px);left:0;z-index:4001;
  display:none;min-width:170px;max-height:60vh;overflow:auto;padding:4px;
  background:var(--panel);border:1px solid var(--edge2);border-radius:7px;
  box-shadow:0 12px 40px rgba(0,0,0,.45)}
#hy-shell .hy-switch.open .hy-switch-list{display:block}
#hy-shell .hy-switch-row{padding:4px 9px;border-radius:5px;cursor:pointer;font-size:11.5px;
  color:var(--ink2);font-family:var(--mono);white-space:nowrap}
#hy-shell .hy-switch-row:hover,#hy-shell .hy-switch-row.active{background:var(--panel2);color:var(--ink)}
#hy-shell .hy-switch-row.cur{color:var(--accent)}
#hy-shell .hy-switch-none{padding:5px 9px;font-size:11px;color:var(--dim);font-style:italic}
#hy-shell .hy-search{position:relative;flex:1 1 auto;min-width:88px}
#hy-shell .hy-search input{width:100%;background:transparent;color:var(--ink);
  border:none;padding:5px 9px;font:inherit;font-size:11.5px}
#hy-shell .hy-search input::placeholder{color:var(--dim)}
#hy-shell .hy-search input:focus{outline:none}
#hy-shell .hy-sres{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:4001;
  background:var(--panel);border:1px solid var(--edge2);border-radius:7px;
  max-height:60vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.45);display:none}
#hy-shell .hy-sres.on{display:block}
#hy-shell .hy-sres .hy-srow{padding:6px 9px;cursor:pointer;font-size:11.5px;color:var(--ink)}
#hy-shell .hy-sres .hy-srow:hover{background:var(--panel2)}
#hy-shell .hy-sres .hy-srow .sid{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:2px}

/* ─── KEYBOARD FOCUS RINGS (finding 4) — every shared-chrome control answers keyboard focus
   with a visible ring in the working gold (the per-surface panes already do; the chrome was
   the lone exception, falling back to the UA near-black outline invisible on the night
   ground). :focus-visible only, so a mouse click never draws the ring; declared AFTER the
   inputs' :focus{outline:none} so keyboard focus wins the source order. Judgment-bearing
   triggers (the ladder token) wear the keystone ring the rung family already uses. ─── */
#hy-shell .hy-mark:focus-visible,
#hy-shell .hy-stage:focus-visible,
#hy-shell .sc-door:focus-visible,
#hy-shell .hy-tour-btn:focus-visible,
#hy-shell #hy-guide-btn:focus-visible,
#hy-shell .hy-switch input:focus-visible,
#hy-shell .hy-search input:focus-visible,
#hy-shell .hy-switch-row:focus-visible,
.hy-sres .hy-srow:focus-visible,
.hy-from:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hy-context .hy-ctx-ladder:focus-visible{outline:2px solid var(--keystone);outline-offset:2px}

/* ─── L1 · THE CONTEXT HEADER ATOM (W0, shell.js injectContext) — the ONE shared line
   under the bar on every surface that boots the shell: <surface> — a view of <purpose>
   · <project> · <selection>. Mono for the mechanism tokens (project id, selection), sans
   for the prose purpose label; the honest scope (`all projects`) stands in when no project
   is in view (R1). A surface that hand-authors its own line opts out with body[data-l1=
   "own"] and the atom skips injection (per-surface adoption is Waves 1..n). ─── */
.hy-context{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin:0;padding:9px 14px;border-bottom:1px solid var(--edge);background:var(--bg);
  color:var(--ink2);font:12.5px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif}
.hy-context .hy-ctx-surface{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink)}
.hy-context .hy-ctx-purpose{color:var(--ink2)}
.hy-context .hy-ctx-proj{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.hy-context .hy-ctx-proj.is-scope{color:var(--dim)}
.hy-context .hy-ctx-sel{font-family:var(--mono);font-size:11px;color:var(--dim)}
.hy-context .hy-ctx-sep{color:var(--dim)}

/* ─── R4/D15 · THE ARRIVAL ECHO ATOM (W0, shell.js) — a navigation that arrives from
   another surface carries a quiet dismissible door back to exactly where it came from:
   `← from <selection|surface>`. Dashed, dim mono (the approved mocks' .mk-from/.cx-from
   idiom collapsed into ONE shared class); the echo IS the return door — an addition that
   never hijacks browser Back. ─── */
.hy-fromwrap{display:inline-flex;align-items:center;gap:2px;min-width:0}
.hy-from{font-family:var(--mono);font-size:10px;color:var(--dim);text-decoration:none;
  border:1px dashed var(--edge);border-radius:6px;padding:2px 8px;margin-left:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.hy-from:hover{color:var(--ink2);border-color:var(--edge2)}
.hy-from-x{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;padding:0 2px;line-height:1}
.hy-from-x:hover{color:var(--ink)}

/* ─── THE RENDERED-ARTIFACT LAW (2026-07-22, the sweep) — a rendered page or figure is
   FRAMED AS AN OBJECT sitting on the desk, never a glaring full-white lightbox blasting the
   dark ground: a hairline edge, a soft paper shadow and a small radius on the HOST, and the
   raster toned to paper (a gentle warm dim). Any surface hosting a render adopts .hy-render
   on the host (the artefact reader's pages, the asset figure renders): the FRAME rides the
   host, the TONE rides the raster layer only, so positioned overlays (text layer, anchor
   bands) stay aligned to the untouched geometry. ─── */
.hy-render{border:1px solid var(--edge2);border-radius:7px;
  box-shadow:0 2px 12px -4px color-mix(in srgb,black 62%,transparent),
    0 0 0 1px color-mix(in srgb,var(--edge) 55%,transparent)}
.hy-render canvas,.hy-render img{filter:brightness(.9) sepia(.07) saturate(.95)}

/* ─── THE .hy-stale ATOM (W1.2) — the ONE stale-banner idiom over every derived
   read (shell.js hyStale/renderStale), replacing review's #stale, storyboard's
   #sb-stale, altitude's plan/prose badge. Three states render DISTINCTLY: is-fresh
   (in sync, quiet inline dot), is-stale (present but out of date, warn), is-absent
   (not built, bad). The strip shows itself only when something is degraded. ─── */
.hy-stale-strip{display:none;flex-direction:column;gap:6px;margin:8px 0}
.hy-stale-strip.on{display:flex}
.hy-stale{display:flex;align-items:center;gap:10px;padding:8px 13px;font-size:12px;
  border:1px solid var(--edge2);border-radius:7px;background:var(--panel);color:var(--ink2)}
.hy-stale.is-stale{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.hy-stale.is-absent{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.hy-stale .hy-stale-badge{flex:none;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;padding:2px 7px;border-radius:4px;color:var(--bg)}
.hy-stale.is-stale .hy-stale-badge{background:var(--warn)}
.hy-stale.is-absent .hy-stale-badge{background:var(--bad)}
.hy-stale .hy-stale-msg{flex:1;min-width:0}
.hy-stale .hy-stale-msg b{color:var(--ink)}
.hy-stale .hy-stale-ts,.hy-stale .hy-stale-prod{display:block;font-size:10px;color:var(--dim);margin-top:2px}
.hy-stale .hy-stale-fix{flex:none;font-family:var(--mono);font-size:10px;color:var(--teal);
  max-width:42%;white-space:normal;text-align:right}
.hy-stale.is-fresh{display:inline-flex;align-items:center;border:none;background:none;
  color:var(--dim);padding:2px 0;font-size:11px}
.hy-stale.is-fresh .hy-stale-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
  display:inline-block;margin-right:6px;flex:none}
@media (max-width:520px){
  .hy-stale{flex-wrap:wrap}
  .hy-stale .hy-stale-fix{max-width:100%;text-align:left}
}

/* ─── THE INSPECTOR — the shared node idiom (inspector.js) ─── */
.hy-ins{font:12.5px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
.hy-ins-head{padding:12px 14px 10px;border-bottom:1px solid var(--edge);background:var(--panel)}
.hy-ins-head .hy-titlerow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hy-term{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.hy-nid{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:5px;word-break:break-all}
.hy-roles{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.hy-role{font-size:9.5px;padding:1px 7px;border-radius:3px;font-weight:700;letter-spacing:.04em}
.hy-role.spine{background:var(--keystone);color:var(--chipink)}
.hy-role.post{background:var(--ok);color:var(--chipink)}
.hy-role.gap{background:var(--warn);color:var(--chipink)}
.hy-role.retired{background:var(--bad);color:var(--chipink)}
.hy-role.grade{background:var(--edge);color:var(--ink2);font-family:var(--mono);font-weight:400}

.hy-kbadge{flex:none;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--chipink);background:var(--ink2);border-radius:4px;padding:2px 6px;align-self:center}
.hy-kbadge.definition,.hy-kbadge.def{background:var(--accent)}
.hy-kbadge.result,.hy-kbadge.res{background:var(--ok)}
.hy-kbadge.theorem,.hy-kbadge.thm,.hy-kbadge.equation{background:var(--keystone)}
.hy-kbadge.lemma,.hy-kbadge.lem,.hy-kbadge.intermediate-result,.hy-kbadge.ires{background:var(--teal)}
.hy-kbadge.derivation-step,.hy-kbadge.step{background:var(--dim);color:var(--chipink)}
.hy-kbadge.postulate,.hy-kbadge.pos{background:var(--ok)}
.hy-kbadge.technique,.hy-kbadge.tech,.hy-kbadge.figure,.hy-kbadge.fig{background:var(--warn)}
.hy-kbadge.support,.hy-kbadge.sup{background:var(--ink2)}
.hy-kbadge.citation,.hy-kbadge.ref{background:var(--teal)}
.hy-kbadge.goal{background:linear-gradient(135deg,var(--accent),var(--keystone))}
.hy-kbadge.portal{background:var(--accent)}

.hy-sec{padding:10px 14px;border-bottom:1px solid var(--edge)}
.hy-sec-h{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
  font-weight:700;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.hy-sec-h .hy-act{font-size:10px;color:var(--accent);cursor:pointer;text-transform:none;
  letter-spacing:0;font-weight:400}
.hy-sec-h .hy-act:hover{text-decoration:underline}
.hy-ess-body{font-size:13px;line-height:1.55;overflow-x:auto}
.hy-ess-editor{display:none}
.hy-ess-editor.on{display:block}
.hy-ess-editor textarea{width:100%;min-height:90px;background:var(--bg);color:var(--ink);
  border:1px solid var(--accent);border-radius:7px;padding:8px 10px;
  font:12px var(--mono);resize:vertical;box-sizing:border-box}
.hy-ess-editor textarea:focus{outline:none}
.hy-ess-editor .hy-ess-btns{display:flex;gap:7px;margin-top:7px;align-items:center}
.hy-ess-editor button{font:inherit;font-size:11.5px;border:1px solid var(--edge);
  background:var(--panel);color:var(--ink);border-radius:5px;padding:4px 12px;cursor:pointer}
.hy-ess-editor button.pri{background:var(--accent);color:var(--chipink);border-color:var(--accent);font-weight:600}
.hy-ess-editor button:hover{border-color:var(--accent)}
.hy-ess-editor .hy-ess-msg{font-size:10.5px;color:var(--dim);font-family:var(--mono)}
.hy-ess-editor .hy-ess-msg.bad{color:var(--bad)}

.hy-edges{display:flex;flex-wrap:wrap;gap:5px}
.hy-echip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  font-family:var(--mono);font-size:10.5px;color:var(--ink2);
  background:var(--bg);border:1px solid var(--edge);border-radius:6px;
  padding:3px 8px;cursor:pointer}
.hy-echip:hover{border-color:var(--accent);color:var(--ink)}
.hy-echip .eid{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.hy-echip .eprov{font-size:8.5px;padding:0 4px;border-radius:3px;font-weight:700;
  letter-spacing:.04em;flex:none;font-family:-apple-system,"Segoe UI",sans-serif}
.hy-echip .eprov.explicit,.hy-echip .eprov.exp{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.hy-echip .eprov.confirmed,.hy-echip .eprov.cnf{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.hy-echip .eprov.semantic,.hy-echip .eprov.candidate{background:color-mix(in srgb,var(--keystone) 18%,transparent);color:var(--keystone)}
.hy-echip .ex{border:0;background:none;color:var(--dim);cursor:pointer;font-size:11px;
  padding:0 2px;line-height:1;flex:none}
.hy-echip .ex:hover{color:var(--bad)}
.hy-echip.add{border-style:dashed;color:var(--dim);cursor:pointer}
.hy-echip.add:hover{color:var(--accent);border-color:var(--accent)}
.hy-none{font-size:11px;color:var(--dim);font-style:italic}

.hy-slots{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px}
.hy-slots .sk{color:var(--dim);font-family:var(--mono);font-size:10px;white-space:nowrap;padding-top:1px}
.hy-slots .sv{color:var(--ink2);font-family:var(--mono);font-size:10.5px;word-break:break-all}
.hy-slots .sv.retired{color:var(--bad)}

.hy-anc{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:11px}
.hy-anc .hop{font-family:var(--mono);font-size:10px;color:var(--ink2);cursor:pointer;
  padding:2px 6px;border-radius:4px;background:var(--bg);border:1px solid var(--edge);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-anc .hop:hover{border-color:var(--accent);color:var(--ink)}
.hy-anc .hop.beat{border-color:var(--keystone);color:var(--ink)}
.hy-anc .sep{color:var(--dim);font-size:10px}
.hy-anc .hy-none{padding:0}

.hy-links{display:flex;gap:7px;flex-wrap:wrap}
.hy-links a{font-size:11px;color:var(--accent);text-decoration:none;
  border:1px solid var(--edge);border-radius:6px;padding:3px 10px;background:var(--panel)}
.hy-links a:hover{border-color:var(--accent)}

/* compact variant — the projection viewer's per-span node cards */
.hy-ins.compact{border:1px solid var(--edge2);border-radius:8px;background:var(--bg);
  margin:6px 0 0;overflow:hidden}
.hy-ins.compact .hy-ins-head{padding:8px 10px 7px}
.hy-ins.compact .hy-term{font-size:12px}
.hy-ins.compact .hy-sec{padding:7px 10px}
.hy-ins.compact .hy-ess-body{font-size:11.5px}
.hy-ins.compact .hy-echip .eid{max-width:150px}

/* ─── RESPONSIVE FLOOR (~550px): wrap, never clip; tabs never vanish ─── */
@media (max-width:640px){
  #hy-shell .hy-top{padding:5px 8px 4px;gap:6px}
  #hy-shell .hy-mark small{display:none}
  #hy-shell .hy-proj{max-width:46vw}
  /* narrow: the paper's NAME outranks its position chip (names matter) */
  #hy-shell .hy-proj .pj-pos{display:none}
  #hy-shell .hy-proj .hy-chip{display:none}
  /* the journey compacts: titles stay, state words yield, stages wrap freely */
  #hy-shell .hy-journey{padding:0 6px}
  #hy-shell .hy-stage{padding:5px 9px 6px}
  #hy-shell .hy-stage .st-t{font-size:11.5px}
  #hy-shell .hy-stage .st-w{display:none}
  /* every stage card opens from the right edge so an OPEN card can never push
     the narrow viewport into horizontal scroll (375px law, card-open case) */
  #hy-shell .hy-stage-card{right:0;left:auto;border-radius:10px 0 10px 10px;max-width:92vw}
  #hy-shell .hy-search{min-width:78px}
  #hy-shell .hy-cluster{max-width:66vw}
  #hy-shell .hy-switch input{max-width:34vw}
  /* applet top bars wrap instead of clipping */
  #topbar{flex-wrap:wrap;height:auto !important;min-height:0;padding:4px 8px;row-gap:4px}
  /* conceptric2 footer chips wrap; keyboard legend yields first */
  #footer{flex-wrap:wrap;height:auto !important;min-height:26px;row-gap:2px;padding:2px 10px}
  #footer .key{display:none}
  /* centre-pane tabs scroll horizontally, never vanish */
  #tabs{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:thin}
  #tabs .legend{display:none}
  /* conceptric2 side panes give ground (scoped via #body so other applets are untouched) */
  #body>#left{width:180px}
  #body>#right{width:250px}
}

/* ── node comments (the inspector's review-signal section, 2026-07-08) ── */
.hy-fb-row{font-size:11.5px;line-height:1.45;padding:6px 8px;margin-bottom:5px;
  background:var(--bg);border:1px solid var(--edge);border-radius:6px}
.hy-fb-row.resolved{opacity:.55}
.hy-fb-kind-tag{font-family:var(--mono);font-size:9.5px;color:var(--teal);
  border:1px solid var(--edge);border-radius:4px;padding:0 4px;margin-right:4px}
.hy-fb-meta{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:3px}
.hy-fb-editor select{width:100%;margin:4px 0;background:var(--bg);color:var(--fg);
  border:1px solid var(--edge);border-radius:5px;padding:3px 6px;font-size:11px}
.hy-fb-editor textarea{width:100%;min-height:56px;background:var(--bg);color:var(--fg);
  border:1px solid var(--edge);border-radius:6px;padding:6px;font-size:11.5px;resize:vertical}

/* ─── THE VERSION RAIL (W3.3) — the ONE version-history idiom (shell.js openRail),
   consumed by /review (a tray toggle), /guide (the project band), /analytics (the
   history cells deep-link in). A right-side drawer over a scrim; the .hy-rail-toggle
   is the shared button all three surfaces raise it with, so the affordance reads the
   same everywhere. Lazy: the body loads on OPEN, never at first paint. ─── */
.hy-rail-toggle{font-family:var(--mono);font-size:11px;color:var(--ink2);cursor:pointer;
  background:var(--panel2);border:1px solid var(--edge2);border-radius:6px;padding:3px 10px;
  white-space:nowrap}
.hy-rail-toggle:hover{border-color:var(--accent);color:var(--ink)}
.hy-rail-back{position:fixed;inset:0;z-index:4100;background:rgba(4,6,12,.55);display:none}
.hy-rail-back.open{display:block}
.hy-rail{position:fixed;top:0;right:0;bottom:0;z-index:4101;width:min(440px,94vw);
  display:none;flex-direction:column;background:var(--panel);border-left:1px solid var(--edge2);
  box-shadow:-16px 0 48px rgba(0,0,0,.45);
  font:12.5px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
.hy-rail.open{display:flex}
.hy-rail-head{flex:none;display:flex;align-items:baseline;gap:9px;padding:11px 14px;
  border-bottom:1px solid var(--edge2);background:var(--panel2)}
.hy-rail-title{font-weight:640;color:var(--keystone);letter-spacing:.2px}
.hy-rail-corpus{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.hy-rail-x{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:18px;line-height:1;padding:0 2px}
.hy-rail-x:hover{color:var(--ink)}
.hy-rail-body{flex:1;min-height:0;overflow:auto;padding:10px 12px}
.hy-rail-loading{color:var(--dim);font-style:italic;padding:8px 2px}
.hy-rail-empty{color:var(--ink2);padding:10px 4px;line-height:1.55}
.hy-rail-empty b{color:var(--ink)}
.hy-rail-empty code{font-family:var(--mono);font-size:11px;color:var(--warn)}
.hy-rail-group{margin-bottom:14px}
.hy-rail-gtitle{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  margin:0 0 7px;font-weight:700}
.hy-rail-gn{color:var(--ink2);font-family:var(--mono);margin-left:4px}
.hy-rail-row{border:1px solid var(--edge);border-radius:7px;background:var(--bg);
  padding:7px 9px;margin-bottom:6px}
.hy-rail-row.focus{border-color:var(--keystone);box-shadow:0 0 0 1px var(--keystone) inset}
.hy-rail-line{display:flex;align-items:center;gap:8px}
.hy-rail-kind{flex:none;font-family:var(--mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:4px;
  background:var(--edge);color:var(--ink2)}
.hy-rail-row.kind-snapshot .hy-rail-kind{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.hy-rail-row.kind-round .hy-rail-kind{background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal)}
.hy-rail-row.kind-release .hy-rail-kind{background:color-mix(in srgb,var(--keystone) 18%,transparent);color:var(--keystone)}
.hy-rail-label{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-rail-open{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--accent);
  text-decoration:none;white-space:nowrap}
.hy-rail-open:hover{text-decoration:underline}
.hy-rail-detail{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.hy-rail-meta{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:4px}
.hy-rail-state{color:var(--ink2)}
.hy-rail-paths{margin-top:4px}
.hy-rail-paths code{font-family:var(--mono);font-size:9.5px;color:var(--dim);
  word-break:break-all;display:inline-block}
.hy-rail-trunc{font-size:10.5px;color:var(--warn);font-family:var(--mono);
  margin-top:6px;padding:6px 2px;border-top:1px dashed var(--edge2)}
@media (max-width:520px){ .hy-rail{width:100vw} }

/* ═══════════════════════════════════════════════════════════════════════
   THE COMPONENT VOCABULARY (DESIGN_2026-07-15 §2) — the shared building
   blocks every rebuilt surface composes from, so the visual layer cannot
   re-accrete per-surface islands. CARD · CHIP · DOOR live here (the one
   place they grow); RAIL/inspector already above. W1 (dashboard) is the
   first consumer; W2–W6 reuse these, never re-declare them.
   Color is MEANING (state tokens only) — every value is a hymn variable,
   never a literal, so the one-palette clause holds.
   ═══════════════════════════════════════════════════════════════════════ */

/* CARD (§2.1) — a thing with state. Anatomy in order: identity line · state
   chips · fact rows · door row. Expands IN PLACE (never navigates on mere
   expansion); the door row navigates. */
.hy-card{display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--edge2);border-radius:10px;
  padding:12px 13px;font:12.5px/1.45 -apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink2);min-width:0}
.hy-card.is-clickable{cursor:pointer}
.hy-card.is-clickable:hover{border-color:var(--edge2)}
.hy-card.is-open{border-color:var(--accent)}
/* reduced-emphasis (§5: NEVER_RUN scaffolds) — quieter, never a peer of live work */
.hy-card.is-muted{background:var(--bg);border-style:dashed;opacity:.82}
.hy-card.is-muted:hover{opacity:1}
/* the LIVE PAPER — his lab bench; the name is typographically dominant (names matter),
   and the card wears its state as a coloured left edge (colour is meaning, §5). */
.hy-card.is-paper .hy-card-name{font-size:15.5px;font-weight:680;letter-spacing:-.01em}
.hy-card.edge-ok{border-left:3px solid var(--ok)}
.hy-card.edge-live{border-left:3px solid var(--accent)}
.hy-card.edge-warn{border-left:3px solid var(--warn)}
.hy-card.edge-bad{border-left:3px solid var(--bad)}
/* the COMPACT card — the reduced footprint scaffolds (and the new-project door) wear
   in the quiet shelf below the live work; never the visual weight of a live paper. */
.hy-card.is-compact{padding:9px 11px;gap:5px}
.hy-card.is-compact .hy-card-name{font-size:12px}
.hy-card-id{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.hy-card-name{font-size:13.5px;font-weight:640;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-card-kind{font-family:var(--mono);font-size:9.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;flex:none}
.hy-card-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.hy-card-facts{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink2)}
.hy-card-facts .fk{color:var(--dim)}
.hy-card-facts .fv{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hy-card-fold{display:none;flex-direction:column;gap:7px;
  border-top:1px solid var(--edge);padding-top:8px;margin-top:1px}
.hy-card.is-open .hy-card-fold{display:flex}
.hy-card-doors{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  border-top:1px solid var(--edge);padding-top:9px}

/* CHIP (§2.2) — a compact state token: one word + optional count, state-colored.
   >3 on a row fold into a "+N" disclosure (the alarm-wall dies). An offer/staleness
   chip carries its runnable, platform-normalized fix behind one click — it never
   fires; it reveals the command to copy. */
.hy-chip{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;border:1px solid var(--edge2);
  background:var(--panel2);color:var(--ink2);white-space:nowrap}
.hy-chip .hy-chip-n{font-weight:700;opacity:.85}
.hy-chip.is-ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok)}
.hy-chip.is-live{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.hy-chip.is-warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn)}
.hy-chip.is-bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad)}
.hy-chip.is-never{border-color:var(--edge);background:var(--bg);color:var(--dim)}
.hy-chip.is-scaffold{border-style:dashed;border-color:var(--edge2);background:var(--bg);color:var(--dim)}
/* is-offer is a BEHAVIOUR (clickable, reveals the fix), NOT a colour: a staleness/
   offer chip wears its STATE family (is-warn/is-bad) so a stale/absent read never
   reads green (his 2026-07-15 ruling; chip state semantics live in one place here). */
.hy-chip.is-offer{cursor:pointer}
.hy-chip.is-offer:hover{filter:brightness(1.15)}
.hy-chip-more{cursor:pointer;color:var(--ink2);border-style:dashed}
.hy-chip-more:hover{border-color:var(--accent);color:var(--ink)}
/* the fix a staleness/offer chip reveals on click — a copyable mono command, never a POST */
.hy-chip-fix{display:none;font-family:var(--mono);font-size:10px;color:var(--teal);
  background:var(--bg);border:1px solid var(--edge);border-radius:6px;
  padding:6px 9px;white-space:pre-wrap;word-break:break-all}
.hy-chip-fix.is-open{display:block}

/* DOOR (§2.7) — a navigation affordance: ALWAYS a real <a href> carrying the
   URL-canonical selection, so it is linkable/middle-clickable and the back
   button stays honest. Buttons mutate; doors navigate. */
.hy-door{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-family:var(--mono);font-size:10.5px;color:var(--accent);text-decoration:none;
  border:1px solid var(--edge);border-radius:6px;padding:4px 11px;background:var(--panel2)}
.hy-door:hover{border-color:var(--accent);color:var(--ink)}
.hy-door.is-primary{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:640}
.hy-door.is-primary:hover{color:var(--bg);opacity:.9}
.hy-door.is-dead{color:var(--dim);border-style:dashed;pointer-events:none;opacity:.6}

/* ─── D16 · THE RULE-IN-PLACE ATOM (W0; his steer 2026-07-16, "shown an issue = able to
   speak, right there, without leaving the surface") — hyRule.attach(el, ctx) marks a host
   .hy-rulable. Hover raises the quiet ✎ rule chip; click opens an inline capture (textarea
   + bank + destination line); bank POSTs the typed draft to the friction ledger door and
   NEVER navigates. Ported from the approved mocks' .rule-chip/.rule-cap/.rule-banked (every
   value a hymn var — no new literals); the per-surface hover-reveal (.hy-card:hover,
   .mk-frow:hover, .hy-ins:hover) is generalized to the one .hy-rulable host. ─── */
.hy-rulable{position:relative}
.rule-chip{display:none;margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dim);
  border:1px dashed var(--edge);border-radius:6px;padding:2px 8px;cursor:pointer;background:none;flex:none}
.hy-rulable:hover .rule-chip,.hy-rulable.rule-open .rule-chip{display:inline-flex}
.rule-chip:hover{color:var(--accent);border-color:var(--accent)}
.rule-cap{display:none;flex-direction:column;gap:6px;flex-basis:100%;min-width:0;
  border-top:1px dashed var(--edge2);padding-top:8px;margin-top:8px}
.rule-cap.on{display:flex}
.rule-cap textarea{background:var(--bg);color:var(--ink);border:1px solid var(--edge2);
  border-radius:6px;padding:6px 8px;font:11px var(--mono);min-height:44px;resize:vertical;
  width:100%;box-sizing:border-box}
.rule-cap textarea:focus{outline:none;border-color:var(--accent)}
.rule-cap .rule-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rule-cap .rule-bank{font:600 10.5px var(--mono);color:var(--bg);background:var(--accent);
  border:none;border-radius:6px;padding:4px 12px;cursor:pointer}
.rule-cap .rule-bank:hover{opacity:.9}
.rule-cap .rule-bank[disabled]{opacity:.5;cursor:default}
.rule-cap .rule-dest{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.rule-cap .rule-msg{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.rule-cap .rule-msg.bad{color:var(--warn)}
.rule-banked{font-family:var(--mono);font-size:10px;color:var(--teal)}
.rule-banked.bad{color:var(--warn)}

/* ─── L2 · THE VISIBLE-AFFORDANCE FAMILY (W0; visual conception L2) — every clickable
   answer wears the pointer affordance from ONE place, and every one answers hover with a
   visible state change. The per-component :hover color-shifts declared above (.hy-door,
   .hy-echip, .hy-anc .hop, .hy-rail-toggle, #hy-shell nav a, .hy-more-btn, .dk-card,
   .hy-card.is-clickable, .hy-chip.is-offer, .hy-chip-more) are the tuned STATE half of
   this family — left in place so nothing regresses (the "keep specificity identical" law);
   this block single-sources the cursor across the whole family and fills the one clickable
   that lacked a hover (.dk-chip). Inert elements gain nothing. ─── */
.hy-card.is-clickable,.hy-door,.hy-chip.is-offer,.hy-chip-more,.dk-card,.dk-chip,
.hy-echip,.hy-anc .hop,.hy-rail-toggle,#hy-shell .hy-stage,#hy-shell .sc-door,
.rule-chip,.hy-from{cursor:pointer}
.dk-chip:hover{border-color:var(--accent);color:var(--ink)}

/* ─── THE WIDE-VIEWPORT BRIEF COLUMN (finding 1, the polish sweep 2026-07-23) — every
   brief-class surface (dashboard · desk · cockpit · project · storyboard · lineage) renders
   its resting brief into .eng-brief. At rest that column sat left-anchored inside a wider
   centred wrapper, so on ≥1400px screens a 480–600px dead band opened on the right while the
   instruments correctly filled width. ONE shared rule centres the brief column over a reading-
   measure max-width (margin-inline:auto) so the whole block sits balanced; below 1400px the
   resting left-anchor is kept (the dead band is small there, and the praised 1280 layouts stay
   put). The reallocated (focus) geometry (.eng-root.reallocated → .eng-brief display:none) and
   any fixed-position right-band overlay (the hover-lens idiom, position:fixed) are untouched —
   this governs only the resting .eng-brief. A surface whose inner content is far narrower than
   the measure still centres its COLUMN here; widening that surface's own content is its owner's
   call (noted for storyboard / cockpit / project owners). ─── */
@media (min-width:1400px){
  .eng-brief{max-width:1000px;margin-inline:auto}
}

/* ─── THE SHARED NATIVE-CONTROL FAMILY (finding 6) — a text input / select that must read as
   part of the one identity, not the UA's default chrome on the night ground. .hy-input and
   .hy-select wear the deep ground, a hairline edge, and the working-gold focus the rest of the
   family answers with; .hy-select suppresses the native arrow and draws its own caret in the
   muted ink, so a dropdown is on-family on every platform. The dashboard's new-project + find
   controls are the first consumers (other surfaces' raw controls adopt these next). ─── */
.hy-input,.hy-select{font:inherit;font-size:12px;color:var(--ink);background:var(--bg);
  border:1px solid var(--edge2);border-radius:6px;padding:6px 9px;min-width:0;box-sizing:border-box}
.hy-input::placeholder{color:var(--dim)}
.hy-input:hover,.hy-select:hover{border-color:var(--edge2)}
.hy-input:focus,.hy-select:focus{outline:none;border-color:var(--accent)}
.hy-input:focus-visible,.hy-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hy-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),
    linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.hy-select option{background:var(--panel);color:var(--ink)}

/* ═══ THE DESK COCKPIT (conception §6) — the shared decision-cockpit idiom, so /desk
   and /artefact's findings tray render ONE pattern. All colors ride the palette vars
   above (this sheet IS the one palette; surfaces + their pane modules declare none). ═══ */

/* the strata chip = a filter toggle (the desk's filter row) */
.dk-chip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--edge2);background:var(--panel2);color:var(--ink2);white-space:nowrap;
  cursor:pointer;user-select:none}
.dk-chip.him{border-color:var(--accent);color:var(--ink)}
.dk-chip.zero{opacity:.42}
.dk-chip b{color:var(--ink);font-weight:700;margin-left:5px}
.dk-chip.him b{color:var(--accent)}
.dk-chip.active{border-color:var(--keystone);color:var(--ink);box-shadow:0 0 0 1px var(--keystone) inset}
.dk-chip.active b{color:var(--keystone)}

/* the decision CARD — a row that expands in place into the cockpit */
.dk-card{border:1px solid var(--edge);border-radius:8px;background:var(--panel2);
  padding:9px 11px;cursor:pointer}
.dk-card:hover{border-color:var(--accent)}
.dk-card.open{border-color:var(--keystone);cursor:default;background:var(--panel)}
.dk-card-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.dk-cls{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:1px 7px;border-radius:999px;background:var(--panel);
  color:var(--accent);border:1px solid var(--edge2)}
.dk-title{font-family:var(--mono);font-size:11.5px;font-weight:640;color:var(--ink)}
.dk-proj{color:var(--dim);font-size:10.5px}
.dk-ind{margin-left:auto;color:var(--dim);font-family:var(--mono);font-size:11px}
.dk-preview{color:var(--ink2);font-size:11px;margin-top:3px;line-height:1.4}

/* THE COCKPIT — the four zones, in place */
.dk-cockpit{margin-top:10px;padding-top:10px;border-top:1px dashed var(--edge2);
  display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.dk-cockpit .dk-zone{min-width:0}
.dk-zone-full{grid-column:1 / -1}
.dk-zone h4{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink2);
  margin:0 0 7px;font-family:var(--mono)}
.dk-absent{color:var(--dim);font-style:italic;font-size:11px}

/* ZONE 1 — context: the full renderable referent, inline (never a truncation) */
.dk-ref-doc{margin:0 0 9px}
.dk-ref-heading{font-size:12px;font-weight:640;color:var(--ink);margin-bottom:3px}
.dk-ref-path{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-bottom:5px;
  overflow-x:auto;white-space:nowrap}
.dk-ref-body{white-space:pre-wrap;font-family:var(--mono);font-size:11px;line-height:1.5;
  color:var(--ink2);max-height:300px;overflow:auto;background:var(--bg);
  border:1px solid var(--edge);border-radius:6px;padding:9px 11px}
.dk-ref-k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dim);margin:8px 0 3px}
.dk-ref-row{white-space:pre-wrap;font-family:var(--mono);font-size:10.5px;line-height:1.45;
  color:var(--ink2);background:var(--bg);border:1px solid var(--edge);border-radius:6px;
  padding:8px 10px;max-height:200px;overflow:auto}
.dk-ref-loading{color:var(--dim);font-size:11px;font-family:var(--mono)}

/* THE ARCHITECTURE PROFILE, RENDERED (Part 2, W-CRAP) — the typed profile made readable.
   Prose at glance; evidence behind a door; his fields marked; status prominent; no h-scroll. */
.dk-arch{margin:2px 0 4px}
.dk-arch-status{font-size:11px;line-height:1.5;color:var(--ink2);background:var(--bg);
  border:1px solid var(--edge);border-left:3px solid var(--dim);border-radius:6px;
  padding:8px 11px;margin-bottom:9px;white-space:normal;word-break:break-word}
.dk-arch-status.dk-arch-reco{border-left-color:var(--warn,#c9a227);color:var(--ink)}
.dk-arch-head{font-size:13px;font-weight:660;color:var(--ink);margin-bottom:2px}
.dk-arch-ver{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--dim)}
.dk-arch-lede{font-size:11px;line-height:1.5;color:var(--ink2);margin-bottom:11px;white-space:normal}
.dk-arch-field{margin:0 0 12px;padding-left:9px;border-left:2px solid var(--edge)}
.dk-arch-his-field{border-left-color:var(--warn,#c9a227)}
.dk-arch-fname{font-size:11.5px;font-weight:640;color:var(--ink);text-transform:capitalize;
  margin-bottom:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dk-arch-his{font-family:var(--mono);font-size:8.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--warn,#c9a227);border:1px solid var(--warn,#c9a227);
  border-radius:4px;padding:1px 5px;white-space:nowrap}
.dk-arch-summary{font-size:12px;line-height:1.6;color:var(--ink2);white-space:normal;word-break:break-word}
.dk-arch-ev{margin-top:6px}
.dk-arch-ev>summary{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--dim);cursor:pointer;padding:2px 0;list-style:revert}
.dk-arch-ev>summary:hover{color:var(--ink2)}
.dk-arch-ev-src{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:10px;
  line-height:1.5;color:var(--dim);background:var(--bg);border:1px solid var(--edge);
  border-radius:6px;padding:7px 9px;margin-top:5px;max-height:220px;overflow:auto}
.dk-arch-ev-obs{white-space:pre-wrap;word-break:break-word;font-size:11px;line-height:1.55;
  color:var(--ink2);margin-top:6px}

/* ZONE 2 — consequences: what changes per ruling */
.dk-conseq{margin:0 0 6px;font-size:11.5px;line-height:1.5}
.dk-conseq .cv{font-family:var(--mono);font-weight:700;color:var(--ink);margin-right:6px}
.dk-conseq .cw{color:var(--ink2)}

/* ZONE 3 — tools: every verb inline, arm-to-fire on destructive */
.dk-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dk-act{font-family:var(--mono);font-size:10.5px;font-weight:640;padding:3px 10px;border-radius:6px;
  border:1px solid var(--edge2);background:var(--panel2);color:var(--ink);cursor:pointer}
.dk-act:hover{border-color:var(--accent)}
.dk-act.destructive{border-color:var(--bad);color:var(--bad)}
.dk-act.destructive.armed{background:var(--bad);color:var(--bg);border-color:var(--bad)}
.dk-act.compose{border-style:dashed;color:var(--ink2);text-decoration:none}
.dk-act[disabled]{opacity:.5;cursor:default}
.dk-act.busy{opacity:.6;cursor:progress}
.dk-result{font-family:var(--mono);font-size:10.5px;margin-top:8px;line-height:1.45}
.dk-result.ok{color:var(--teal)}
.dk-result.err{color:var(--warn)}

/* ZONE 4 — deep-links: the exact spine location on the working surfaces */
.dk-links{display:flex;flex-direction:column;gap:4px}
.dk-links a{font-family:var(--mono);font-size:11px;color:var(--accent);text-decoration:none}
.dk-links a:hover{text-decoration:underline}

@media (max-width:720px){ .dk-cockpit{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════════
   THE LADDER (W0.5) — the selection token opens six rungs over ONE target.
   Trigger tokens (.hy-ctx-ladder) are real buttons with a caret; the anchored
   popover (.hy-ladder) overlays at z 4001 (below the rail's 4100/4101) and
   never displaces the page (glance-and-hop, L3). VARS ONLY — no color literal
   lives in this family; the popover depth rides --hy-pop-shadow.
   ═══════════════════════════════════════════════════════════════════════════ */
.hy-context .hy-ctx-ladder{font-family:var(--mono);font-size:11px;line-height:1.3;
  display:inline-flex;align-items:center;gap:3px;cursor:pointer;
  background:var(--bg);border:1px solid var(--edge);border-radius:6px;padding:1px 6px}
.hy-context .hy-ctx-proj.hy-ctx-ladder{color:var(--ink2)}
.hy-context .hy-ctx-sel.hy-ctx-ladder{color:var(--ink)}
.hy-context .hy-ctx-ladder:hover,
.hy-context .hy-ctx-ladder[aria-expanded='true']{border-color:var(--accent);color:var(--ink)}
.hy-context .hy-ctx-caret{font-size:8px;color:var(--dim)}
.hy-context .hy-ctx-ladder:hover .hy-ctx-caret{color:var(--accent)}
.hy-context .hy-ctx-proj.is-scope{color:var(--dim);cursor:default}   /* inert: no button, no cursor */

.hy-ladder{position:fixed;z-index:4001;top:48px;left:8px;width:min(360px,94vw);
  max-height:min(70vh,520px);overflow:auto;display:none;flex-direction:column;
  background:var(--panel);border:1px solid var(--edge2);border-radius:9px;
  box-shadow:var(--hy-pop-shadow);
  font:12px/1.4 -apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
.hy-ladder.open{display:flex}
.hy-ladder-head{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:9px 11px;
  border-bottom:1px solid var(--edge);position:relative}
.hy-ladder-target{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.hy-ladder-kind{font-size:9px}
.hy-ladder-head .rule-chip{display:inline-flex;margin-left:auto}
.hy-ladder-x{background:none;border:none;color:var(--dim);cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px}
.hy-ladder-x:hover{color:var(--ink)}

.hy-ladder-rungs{display:flex;flex-direction:column;padding:5px;gap:1px}
.hy-ladder-rung{display:grid;grid-template-columns:auto auto 1fr;align-items:center;
  gap:7px;padding:7px 8px;border-radius:7px;text-decoration:none;color:var(--ink);
  border:1px solid transparent}
a.hy-ladder-rung:hover{background:var(--panel2);border-color:var(--edge2)}
.hy-ladder-rung.active{background:var(--panel2);border-color:var(--accent)}
.hy-ladder-rung.is-absent{color:var(--ink2)}
.hy-ladder-rlabel{font-family:var(--mono);font-size:11px;font-weight:640;color:var(--ink);min-width:64px}
.hy-ladder-rung.is-absent .hy-ladder-rlabel{color:var(--dim)}
.hy-ladder-count{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--accent);
  min-width:16px;text-align:right}
.hy-ladder-count.is-zero{color:var(--dim)}
/* P10 clip law: a long absence-reason / stale-message / rail-empty prose line never
   clips or forces the fixed-width popover/rail to scroll sideways — it wraps in place. */
.hy-ladder-sub,.hy-stale-msg,.hy-rail-empty{overflow-wrap:anywhere}
.hy-ladder-sub{grid-column:1 / -1;font-size:10.5px;color:var(--ink2);line-height:1.4}
.hy-ladder-fix{grid-column:1 / -1;font-family:var(--mono);font-size:10px;color:var(--teal);
  text-decoration:none;justify-self:start}
.hy-ladder-fix:hover{text-decoration:underline}
.hy-ladder-stale{grid-column:1 / -1;font-size:9.5px;justify-self:start}

.hy-ladder-foot{padding:7px 11px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:10px;color:var(--warn)}
.hy-ladder-loading{padding:14px 12px;color:var(--dim);font-style:italic}
.hy-ladder-fail{padding:12px;display:flex;flex-direction:column;gap:8px}
.hy-ladder-fail-msg{font-size:11.5px;color:var(--ink2);line-height:1.5}
.hy-ladder-retry{align-self:start;font-family:var(--mono);font-size:10.5px;color:var(--accent);
  background:var(--bg);border:1px solid var(--edge2);border-radius:6px;padding:3px 12px;cursor:pointer}
.hy-ladder-retry:hover{border-color:var(--accent);color:var(--ink)}

/* the find-row ladder glyph — open the ladder for a hit WITHOUT navigating to it */
.hy-srow-ladder{font-family:var(--mono);font-size:9.5px;color:var(--dim);background:var(--bg);
  border:1px solid var(--edge);border-radius:5px;padding:1px 6px;cursor:pointer;
  float:right;margin-left:6px}
.hy-srow-ladder:hover{border-color:var(--accent);color:var(--accent)}

/* the 375px thumb test: on a narrow viewport the popover widens to ~92vw and JS clamps its
   left at open, so the right edge never spills and every close path stays reachable. */
@media (max-width:400px){
  .hy-ladder{width:92vw;max-width:none}
  .hy-ladder-target{max-width:150px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE LINEAGE SURFACE (W-lineage, 2026-07-22) — .lin-* components. Per-project
   views of the conceptric and its descendants. Every colour rides an existing
   token (no new palette); hue carries meaning only where load-bearing — the
   unresolved band and unresolved rows wear --warn, everything else the working
   gold-on-midnight. The focus/geometry (brief ⇄ reallocated) is engine.mjs.
   ═══════════════════════════════════════════════════════════════════════════ */
.lin-brief-loading,.lin-dim{color:var(--dim);font-size:12.5px;padding:6px 0}
.lin-err{color:var(--bad);font-size:13px;padding:14px;border:1px solid var(--edge2);
  border-radius:10px;background:var(--panel)}
/* the composed prose glance — the serif working voice */
.lin-glance{font-family:var(--serif);font-size:16px;line-height:1.66;color:var(--ink);
  letter-spacing:.002em;max-width:74ch;margin:2px 0 16px}
.lin-view-glance{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--ink2);
  max-width:74ch;margin:2px 0 16px}
/* the count chips */
.lin-counts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.lin-chip{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:11px;
  color:var(--ink2);background:var(--panel);border:1px solid var(--edge2);border-radius:8px;padding:5px 10px}
.lin-chip b{font-size:14px;font-weight:700;color:var(--accent)}
/* the unresolved band summary on the brief */
.lin-band{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--warn) 42%,var(--edge2));border-radius:10px;
  background:color-mix(in srgb,var(--warn) 8%,var(--panel))}
.lin-band-h{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--warn);font-weight:700;margin-right:2px}
.lin-bandbit{font-size:12px;color:var(--ink2)}
.lin-bandbit b{color:var(--warn);font-weight:700}
/* the staleness note in place */
.lin-stale{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 16px;font-size:12px}
.lin-stale.is-fresh{color:var(--dim)}
.lin-stale-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.lin-stale.is-stale{padding:9px 12px;border:1px solid color-mix(in srgb,var(--warn) 46%,var(--edge2));
  border-radius:9px;background:color-mix(in srgb,var(--warn) 9%,var(--panel))}
.lin-stale-badge{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--chipink);background:var(--warn);border-radius:5px;padding:2px 7px}
.lin-stale-msg{color:var(--ink2)}
/* the project switch on the brief — any project's lineage opens from here (the switch-project
   idiom, in place); a distinct class from .lin-picker (the concept/object/whole pickers). */
.lin-switch{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.lin-switch-l{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:700}
.lin-switch-sel{font:inherit;font-size:12.5px;background:var(--panel);color:var(--ink);border:1px solid var(--edge2);
  border-radius:8px;padding:5px 10px;cursor:pointer;max-width:min(72vw,340px)}
.lin-switch-sel:hover{border-color:var(--accent)}
.lin-switch-sel:focus{outline:none;border-color:var(--accent)}
/* the pickers on the brief */
.lin-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:6px}
.lin-picker{border:1px solid var(--edge2);border-radius:12px;background:var(--panel);padding:14px 15px}
.lin-picker-h{font-family:var(--display);font-size:14px;font-weight:700;color:var(--ink)}
.lin-picker-sub{color:var(--ink2);font-size:12px;line-height:1.5;margin:3px 0 10px}
.lin-picker-whole{display:flex;flex-direction:column}
.lin-find-input{width:100%;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--bg);
  border:1px solid var(--edge2);border-radius:8px;padding:7px 10px;outline:none}
.lin-find-input:focus{border-color:var(--accent)}
.lin-find-list{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:260px;overflow-y:auto}
.lin-find-none{color:var(--dim);font-size:11.5px;padding:4px 2px}
.lin-find-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;text-align:left;cursor:pointer;
  background:var(--panel2);border:1px solid var(--edge);border-radius:8px;padding:7px 10px;color:var(--ink)}
.lin-find-row:hover{border-color:var(--accent);background:var(--bg)}
.lin-find-lead{font-size:12.5px;color:var(--ink);flex:1 1 auto;min-width:0}
.lin-find-meta{font-family:var(--mono);font-size:9.5px;color:var(--dim);white-space:nowrap}
.lin-find-row.is-unres .lin-find-meta{color:var(--warn)}
/* the id chip — the register: the id rides as a small mono tail, never the sentence */
.lin-id{font-family:var(--mono);font-size:9.5px;color:var(--teal);background:var(--bg);
  border:1px solid var(--edge2);border-radius:5px;padding:1px 6px;white-space:nowrap}
/* doors + the whole-picture door */
.lin-doors{display:flex;flex-wrap:wrap;gap:8px}
.lin-door{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--accent);background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:6px 12px;
  text-decoration:none;cursor:pointer}
.lin-door:hover{background:var(--panel2);color:var(--gold-light)}
.lin-door-whole{align-self:flex-start;margin-top:auto}
.lin-remint{border-color:var(--warn);color:var(--warn)}
.lin-remint:hover{color:var(--chipink);background:var(--warn)}
/* the empty state teach */
.lin-empty{border:1px dashed var(--edge2);border-radius:12px;background:var(--panel);padding:16px 18px;max-width:66ch}
.lin-empty-h{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:700;margin-bottom:8px}
.lin-empty-list{margin:0 0 10px;padding-left:18px;color:var(--ink2);font-size:13px;line-height:1.7}
.lin-empty-build{color:var(--ink);font-size:12.5px;border-top:1px solid var(--edge);padding-top:10px}

/* ── a materialised view (node-outward / object-backward / whole) ── */
.lin-view{min-width:0}
.lin-sec{margin:0 0 20px}
.lin-sec h5{margin:0 0 10px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dim);font-weight:700;border-bottom:1px solid var(--edge);padding-bottom:6px}
/* realising objects — paragraphs, equations, asset */
.lin-para,.lin-eq,.lin-asset{border:1px solid var(--edge);border-radius:9px;background:var(--panel);
  padding:10px 12px;margin-bottom:8px}
.lin-para-h,.lin-eq-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:13px;
  font-weight:600;color:var(--ink)}
.lin-para-prop,.lin-step-detail{font-family:var(--serif);font-size:13px;line-height:1.55;color:var(--ink2);margin:6px 0}
.lin-join{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--keystone);border:1px solid color-mix(in srgb,var(--keystone) 40%,transparent);
  border-radius:5px;padding:1px 6px}
.lin-prov-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.lin-prov{font-family:var(--mono);font-size:10px;color:var(--ink2);background:var(--panel2);
  border:1px solid var(--edge);border-radius:6px;padding:3px 7px}
/* the descendants tree — relation-labelled edges, evidence one act deep */
.lin-tree{border-left:1px solid var(--edge2);padding-left:2px}
.lin-treelist{list-style:none;margin:0;padding:0 0 0 14px}
.lin-tree-node{position:relative;padding:3px 0}
.lin-tree-open{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:7px;cursor:pointer;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:7px;padding:4px 8px;color:var(--ink)}
.lin-tree-open:hover{background:var(--panel2);border-color:var(--edge2)}
.lin-rel{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:4px;padding:1px 5px}
.lin-tree-lead{font-size:12.5px;color:var(--ink2)}
.lin-ev{display:block;font-family:var(--serif);font-size:11.5px;font-style:italic;color:var(--dim);
  margin:1px 0 2px 14px}
.lin-tree-note{font-size:11px;color:var(--warn);margin-top:8px;font-family:var(--mono)}
/* the sections it touches */
.lin-sections{display:flex;flex-wrap:wrap;gap:7px}
.lin-secchip{font-size:11.5px;color:var(--ink2);background:var(--panel2);border:1px solid var(--edge2);
  border-radius:7px;padding:4px 10px}
.lin-kind{font-family:var(--mono);font-size:9.5px;color:var(--ink2);background:var(--panel2);
  border:1px solid var(--edge);border-radius:5px;padding:1px 6px}
/* the rail (context when reallocated) */
.lin-rail-id{font-family:var(--serif);font-size:13.5px;line-height:1.4;color:var(--ink);margin-bottom:7px}
.lin-rail-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lin-rail-sec{font-size:11px;color:var(--dim);margin-top:7px}
.lin-rail-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lin-rail-count{font-family:var(--mono);font-size:10px;color:var(--ink2);display:flex;flex-direction:column;gap:1px}
.lin-rail-count b{font-size:16px;font-weight:700;color:var(--accent)}
/* object-backward — the walk chain */
.lin-walk{display:flex;flex-direction:column;gap:0}
.lin-step{display:flex;gap:11px;border:1px solid var(--edge);border-radius:9px;background:var(--panel);padding:10px 12px}
.lin-step-badge{flex:none;align-self:flex-start;font-family:var(--mono);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;color:var(--chipink);background:var(--accent);border-radius:5px;padding:3px 7px}
.lin-stage-origin .lin-step-badge{background:var(--keystone)}
.lin-stage-object .lin-step-badge{background:var(--teal)}
.lin-step-body{min-width:0}
.lin-step-lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
.lin-step-note{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:4px}
.lin-step-cross{margin-top:7px;font-family:var(--mono);font-size:10px;color:var(--accent);background:var(--bg);
  border:1px solid var(--accent);border-radius:7px;padding:3px 9px;cursor:pointer}
.lin-step-cross:hover{background:var(--panel2)}
.lin-step-link{text-align:center;color:var(--dim);font-size:13px;line-height:1;padding:3px 0}
/* the whole — regions weighted, the unresolved band its own region */
.lin-regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
.lin-region{border:1px solid var(--edge);border-radius:10px;background:var(--panel);padding:11px 13px}
.lin-region.is-unplaced{border-style:dashed;opacity:.85}
.lin-region-h{font-family:var(--display);font-size:12.5px;font-weight:650;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px}
.lin-weight{height:7px;border-radius:4px;background:var(--edge);overflow:hidden;margin-bottom:8px}
.lin-weight-fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,var(--teal)),var(--accent))}
.lin-region-counts{display:flex;flex-wrap:wrap;gap:9px;font-family:var(--mono);font-size:9.5px;color:var(--ink2)}
.lin-unresolved h5{color:var(--warn);border-bottom-color:color-mix(in srgb,var(--warn) 40%,var(--edge))}
.lin-ur-group{border:1px solid color-mix(in srgb,var(--warn) 34%,var(--edge2));border-radius:9px;
  background:color-mix(in srgb,var(--warn) 7%,var(--panel));padding:10px 12px;margin-bottom:8px}
.lin-ur-h{font-size:12.5px;color:var(--ink2);margin-bottom:7px}
.lin-ur-h b{color:var(--warn);font-weight:700}
.lin-ur-samples{display:flex;flex-wrap:wrap;gap:6px}
.lin-ur-chip{font-family:var(--mono);font-size:9.5px;color:var(--warn);background:var(--bg);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--warn) 45%,var(--edge2));border-radius:5px;padding:2px 7px}
.lin-ur-chip:hover{background:color-mix(in srgb,var(--warn) 16%,var(--bg))}
.lin-msg .lin-view-glance{color:var(--ink2)}
/* the reallocated grid collapses to one column below the two-pane threshold (no h-scroll) */
@media (max-width:720px){
  .eng-root.reallocated{grid-template-columns:1fr}
  .lin-rail-counts{grid-template-columns:1fr 1fr}
}