/* Architecture model app.
 *
 * Design position, so the next person does not "fix" it by accident:
 *
 * 1. TWO TONES, EACH A WHOLE PALETTE. Stone and Graphite (the last section
 *    of this file) set the chrome and the drawings together: the server
 *    styles a drawing with the engine's palette for the tone the page asks
 *    for, so a box on the sheet and the swatch beside its layer in the
 *    sidebar are the same color in either. The sheet stays light in both;
 *    only Graphite's sidebar is dark, and it is a neutral dark, not navy.
 *
 * 2. ONE COLOR FOR THE CHROME, AND IT IS THE SYSTEM HUE. The diagram palette
 *    spends a hue per entity type on meaning, so the interface does not add
 *    another. Each tone's accent is its system hue: teal in Stone, amber in
 *    Graphite. The first version kept the chrome at 0.002 chroma and read as
 *    gray on gray; the second was a deep indigo bar that read as every other
 *    generated dashboard.
 *
 * 3. THE SHEET SITS ABOVE THE CHROME. The drawing is the object; the app is
 *    the table it lies on. Hence the canvas is the lightest surface and casts
 *    a shadow, rather than the usual white-content-on-gray-chrome.
 *
 * 4. ONE MEANING PER CHANNEL ON THE MAP. Hue and shape are the entity type,
 *    everywhere. The view's own dimension is a border weight and a tint
 *    (ordered data), a border style (status), or the boundary a node sits in
 *    (anything nominal). Line style is the kind of relationship. The first
 *    version handed one nine-hue ramp to every dimension, and "green" came to
 *    mean Low, Active and data asset at once. The rule lives in
 *    50_ENGINE/terrane/palette.py and graphStyle() in app.js; the CSS only has to
 *    stay out of its way.
 */

/* ---- fonts ------------------------------------------------------------
   Self-hosted. The page runs under `default-src 'self'`, so Google Fonts is
   blocked outright; fonts/README.md says where each file came from. */

@font-face { font-family: "Geist"; src: url("fonts/geist-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Surfaces, lightest first. The sheet is the top of the stack. */
  --sheet: #ffffff;
  --panel: #f8f9fc;
  --ground: #f4f6fa;
  --sunk: #e9edf4;
  /* The ink: the sidebar, the primary action, the selection ring. */
  --ink-900: #0b1020;
  --ink-800: #141a2b;
  --ink-700: #1f2740;
  --ink-line: #2a3350;
  --on-ink: #ffffff;
  --on-ink-2: #b9c2d6;
  --on-ink-3: #7e89a3;
  /* The old title-block names, kept for whatever still reads them. */
  --brand: var(--ink-900);
  --brand-2: var(--ink-700);
  --brand-ink: var(--on-ink);
  --brand-ink-2: var(--on-ink-2);
  --brand-rule: var(--ink-line);

  /* Ink ramp. --ink-3 clears 4.5:1 on --panel; the usual "elegant light
     gray" fails that and is the single biggest reason interfaces like this
     are hard to read. */
  --ink: #10141f;
  --ink-2: #4a5368;
  --ink-3: #6b7489;

  --rule: #dce1ea;
  --rule-2: #c7cedb;
  --rule-3: #9aa3b5;

  /* One accent, for links, focus and the row you are on. Actions are ink. */
  --accent: #0a6cff;
  --accent-2: #0548b8;
  --accent-ink: #ffffff;
  --accent-wash: #e8f1ff;
  --accent-wash-2: #cfe0ff;
  --focus: #0a6cff;

  /* Semantics, matched to the diagram so a chip and a node agree. */
  --high: #d92d3a;
  --high-wash: #fdecee;
  --med: #b45309;
  --med-wash: #fef3e2;
  --ok: #0e7c55;
  --ok-wash: #e2f4ec;

  /* Radii: small for chips and inputs, medium for buttons, large for cards. */
  --r-s: 6px;
  --r-m: 8px;
  --r-l: 12px;

  --sans: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --display: "Libre Franklin", "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fixed rem scale, ~1.15 ratio. Product UI is read at one DPI; fluid type
     that shrinks inside a sidebar looks worse, not more responsive. */
  --t-micro: 0.6875rem; /* 11px  ids, counts, units */
  --t-small: 0.75rem;   /* 12px  labels */
  --t-base: 0.8125rem;  /* 13px  UI body */
  --t-body: 0.875rem;   /* 14px  prose */
  --t-lg: 1rem;
  --t-xl: 1.1875rem;

  --rail: 256px;
  --insp: 360px;
  /* No title block any more: the shell is the whole window. */
  --head: 0px;

  --shadow-sheet: 0 1px 2px oklch(0.24 0.015 255 / 0.07), 0 8px 24px -14px oklch(0.24 0.015 255 / 0.22);
  --shadow-float: 0 1px 2px oklch(0.24 0.015 255 / 0.10), 0 10px 28px -12px oklch(0.24 0.015 255 / 0.28);

  /* Semantic z-scale. No 999s. */
  --z-canvas: 1;
  --z-overlay: 10;
  --z-chrome: 20;
  --z-popover: 25;
  --z-scrim: 30;
  --z-drawer: 40;
  --z-toast: 50;

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
}

* { box-sizing: border-box; }

/* `hidden` is only display:none in the UA sheet, so any author `display` rule
   beats it. This has to precede everything that sets display. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.006em; }

button, input, select, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- buttons ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--panel);
  --btn-ink: var(--ink);
  --btn-rule: var(--rule-2);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-rule);
  border-radius: var(--r-s);
  padding: 5px 11px;
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.btn:hover { --btn-bg: var(--sunk); --btn-rule: var(--rule-3); }
.btn:active { --btn-bg: var(--rule); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn.primary {
  --btn-bg: var(--accent);
  --btn-ink: var(--accent-ink);
  --btn-rule: var(--accent);
}
.btn.primary:hover { --btn-bg: var(--accent-2); --btn-rule: var(--accent-2); }
.btn.primary:active { --btn-bg: oklch(0.33 0.15 268); }

.btn.small { padding: 4px 9px; font-size: var(--t-small); min-height: 24px; line-height: 1.2; }
.btn.toggle[aria-pressed="false"] { --btn-ink: var(--ink-3); --btn-bg: transparent; }
.btn.toggle[aria-pressed="true"] { --btn-bg: var(--accent-wash); --btn-rule: var(--accent-wash-2); }
.btn.back { --btn-bg: transparent; --btn-rule: transparent; color: var(--ink-2); padding-left: 4px; }
.btn.back:hover { --btn-bg: var(--sunk); }
.btn.danger { --btn-ink: var(--high); --btn-rule: var(--rule-2); }
.btn.danger:hover { --btn-bg: var(--high-wash); --btn-rule: var(--high); }

.icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-3);
  padding: 3px 6px;
  border-radius: var(--r-s);
  line-height: 1;
  font-size: 18px;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--sunk); }

/* ---- shell ------------------------------------------------------------ */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--insp);
  /* Each panel has its own area. A folded panel is `display: none` and no
     longer a grid item, and without areas the stage slid into the emptied
     first column: fold the rail and the drawing was 28px wide, which read
     as the app going blank. */
  grid-template-areas: "rail stage insp";
  height: calc(100vh - var(--head));
}
.rail { grid-area: rail; }
.stage { grid-area: stage; }
.inspector { grid-area: insp; }
/* Either side folds away so the drawing can have the width. On a laptop the
   two fixed panels were taking half the screen from the one thing that
   needed it. */
.shell.rail-shut { grid-template-columns: 0 minmax(0, 1fr) var(--insp); }
.shell.insp-shut { grid-template-columns: var(--rail) minmax(0, 1fr) 0; }
.shell.rail-shut.insp-shut { grid-template-columns: 0 minmax(0, 1fr) 0; }
.shell.rail-shut .rail, .shell.insp-shut .inspector { display: none; }
/* A panel replaces the sheet and the inspector both, and takes their width:
   a report used to end at two thirds of the window with the inspector's
   empty column beside it. */
.shell.panel-open { grid-template-columns: var(--rail) minmax(0, 1fr) 0; }
.shell.panel-open.rail-shut { grid-template-columns: 0 minmax(0, 1fr) 0; }
.shell.panel-open .inspector { display: none; }
.shell { position: relative; }

.insp-close { display: none; position: absolute; top: 9px; right: 9px; z-index: 1; }

/* On a narrow window the inspector is a sheet over the right edge of the
   stage rather than a column the stage cannot spare, and rather than gone:
   it opens when something is selected and closes with its own button, the
   Inspector toggle, or Escape. */
@media (max-width: 1240px) {
  .shell, .shell.insp-shut, .shell.panel-open { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-areas: "rail stage"; }
  .shell.rail-shut, .shell.rail-shut.insp-shut, .shell.panel-open.rail-shut { grid-template-columns: 0 minmax(0, 1fr); }
  .inspector {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--insp), 92vw);
    /* Above the sheet, below the title bar and its menu. */
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-float);
    border-left: 1px solid var(--rule-2);
  }
  .shell.insp-over .inspector { display: block; }
  .shell.panel-open .inspector { display: none; }
  .insp-close { display: inline-block; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage"; }
  .rail { display: none; }
}

/* ---- stage ------------------------------------------------------------ */

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* A grid item defaults to min-height:auto, so a tall child pushes the stage
     past its row instead of scrolling inside it. */
  min-height: 0;
  background: var(--ground);
  padding: 14px;
  gap: 12px;
}

.stage-head { display: flex; align-items: flex-start; gap: 16px; padding: 0 2px; }
.stage-head h1 { font-size: var(--t-xl); line-height: 1.25; }
.stage-head .sub {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: var(--t-base);
  max-width: 88ch;
  text-wrap: pretty;
  /* One line until asked: the full account is a click (or a hover) away,
     and the drawing gets the height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  cursor: pointer;
}
.stage-head .sub.open { -webkit-line-clamp: unset; }
.stage-head .sub:empty { display: none; }
.stage-title { min-width: 0; }

.stage-meta {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

/* The sheet: the lightest surface, lifted off the table. The drawing fills
   it; the legend and the controls sit in a strip underneath rather than
   floating over the drawing's bottom corners, so a fitted diagram is never
   half under its own key. */
.sheet {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}

.canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  z-index: var(--z-canvas);
  /* A faint drafting grid under the drawing, lighter than the lightest
     boundary fill so it never competes with containment. The PNG export
     passes its own white background, so exports stay clean. */
  background-image: radial-gradient(circle, oklch(0.9 0.005 255 / 0.45) 1px, transparent 1px);
  background-size: 26px 26px;
  outline: none;
}
.canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }

.sheet-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  min-height: 44px;
  padding: 7px 14px;
  border-top: 1px solid var(--rule);
  background: var(--panel);
  z-index: var(--z-overlay);
}

.overlay {
  position: absolute;
  z-index: var(--z-overlay);
  background: oklch(1 0 0 / 0.93);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-float);
}

.legend {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  font-size: var(--t-micro);
  color: var(--ink-2);
}
.legend:empty { display: none; }
.lg-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.legend .cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.legend .key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .key.is-faded { opacity: 0.6; }
.legend .lg-note { color: var(--ink-3); }
.sw-shape, .sw-line { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.sw-blank { display: inline-block; width: 20px; height: 14px; flex: none; }
.legend .note { color: var(--ink-3); flex-basis: 100%; }

.controls { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.zoom-pct {
  font-size: var(--t-micro);
  color: var(--ink-3);
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.controls .sep { width: 1px; height: 18px; background: var(--rule); }
.controls select {
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 3px 6px;
  font-size: var(--t-small);
}

.stage-empty {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sheet);
  text-align: center;
  padding: 24px;
}
.stage-empty h2 { font-size: var(--t-lg); }
.stage-empty p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.stage-empty .acts { display: flex; gap: 9px; margin-top: 10px; }

/* ---- inspector -------------------------------------------------------- */

.inspector {
  background: var(--panel);
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  min-height: 0;
}

.insp-idle { padding: 16px; font-size: var(--t-base); }

.brief-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 18px 0 8px;
}
.brief-h:first-child { margin-top: 2px; }
.brief-p { margin: 0 0 10px; color: var(--ink-2); font-size: var(--t-body); text-wrap: pretty; }
.brief-meta { margin: 0 0 4px; font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.brief-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.brief-row .sw { width: 9px; height: 9px; border-radius: 2px; border: 1px solid; flex: none; }
.brief-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.brief-note { margin: 8px 0 0; font-size: var(--t-small); color: var(--med); }
.brief-hint {
  margin: 16px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-3);
}

.insp-head { padding: 16px 16px 14px; border-bottom: 1px solid var(--rule); background: var(--accent-wash); }
.insp-head h2 { font-size: var(--t-lg); line-height: 1.3; text-wrap: balance; }
.insp-head .id {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  word-break: break-all;
}
.insp-head .acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.insp-head .acts .btn { padding: 4px 8px; }

.insp-sec { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.insp-sec h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 9px;
}

/* Placement leads, because "which account, which region, which zone" is the
   first question asked of anything on an infrastructure diagram. */
.placement { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  padding: 2px 7px;
  font-size: var(--t-micro);
  max-width: 100%;
}
.chip .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chip .v { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.chip.is-high { background: var(--high-wash); border-color: var(--high); }
.chip.is-high .v { color: var(--high); }
.chip.is-med { background: var(--med-wash); border-color: var(--med); }
.chip.is-med .v { color: var(--med); }
.chip.is-ok { background: var(--ok-wash); border-color: var(--ok); }
.chip.is-ok .v { color: var(--ok); }

.desc { color: var(--ink-2); font-size: var(--t-body); text-wrap: pretty; }

.rels { display: flex; flex-direction: column; gap: 1px; }
.rel {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding: 4px 0;
}
.rel .dir { font-family: var(--mono); color: var(--ink-3); font-size: var(--t-micro); }
.rel button {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rel button:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.rel .via {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
}

/* The full field table is real but secondary; it opens when asked for. */
details.fields > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
  padding: 2px 0;
}
details.fields > summary::-webkit-details-marker { display: none; }
details.fields > summary::before { content: "▸ "; }
details[open].fields > summary::before { content: "▾ "; }
details.fields > summary:hover { color: var(--ink); }

.kv {
  display: grid;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
  gap: 3px 10px;
  margin-top: 9px;
  font-size: var(--t-small);
}
.kv dt {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  padding-top: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }

.link-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: var(--sunk);
  border-radius: var(--r-s);
}
.link-main { min-width: 0; flex: 1; }
.link-rel {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.link-other { display: block; font-size: var(--t-base); overflow-wrap: anywhere; }
.link-q { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.link-locked {
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.picker {
  width: 100%;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 4px;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: var(--t-small);
}

.flow-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  padding: 12px 13px;
  margin-bottom: 11px;
  background: var(--sheet);
}
.flow-head { display: flex; align-items: baseline; gap: 10px; }
.flow-name { font-weight: 600; font-size: var(--t-body); }
.flow-meta { margin-left: auto; font-size: var(--t-micro); color: var(--ink-3); }
.flow-desc { margin: 6px 0 9px; color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }
.flow-steps {
  list-style: decimal;
  margin: 10px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.flow-steps li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--t-small);
}
.flow-hop {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.flow-hop:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.flow-arrow { color: var(--ink-3); }
.flow-proto { margin-left: auto; font-size: 9.5px; color: var(--ink-3); }

/* ---- the landing page --------------------------------------------------- */

.home-find { position: relative; margin: 6px 0 22px; max-width: 640px; }
.home-search {
  width: 100%;
  font-size: var(--t-body);
  padding: 10px 14px;
  background: var(--sheet);
  border: 1.5px solid var(--rule-2);
  border-radius: var(--r-s);
  transition: border-color 140ms var(--ease);
}
.home-search:focus-visible { border-color: var(--accent); }
.home-hits { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.home-hit {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--sheet);
}
.home-hit:hover { border-color: var(--accent); background: var(--accent-wash); }
.hh-name { font-weight: 500; }
.hh-id { font-size: var(--t-micro); color: var(--ink-3); margin-left: auto; white-space: nowrap; }

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 36px;
  margin-bottom: 12px;
}
.door { min-width: 0; }
.door + .door { border-left: 1px solid var(--rule); padding-left: 32px; }
.door h2 { font-size: var(--t-lg); color: var(--ink); }
.door-lede { margin: 4px 0 10px; color: var(--ink-2); font-size: var(--t-base); text-wrap: pretty; max-width: 42ch; }
@media (max-width: 900px) {
  .door + .door { border-left: 0; padding-left: 0; }
}
.door-rows { display: flex; flex-direction: column; gap: 4px; }
.door-row {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-s); background: none;
  transition: background 130ms var(--ease), border-color 130ms var(--ease);
}
.door-row:hover { background: var(--accent-wash); border-color: var(--accent-wash-2); }
.door-row.is-primary .dr-label { color: var(--accent-2); }
.door-row[disabled] { opacity: 0.5; cursor: not-allowed; }
.dr-label { font-weight: 600; font-size: var(--t-base); }
.dr-note { color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }

.home-hero { padding: 6px 0 14px; }
.home-hero h1 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero-lede {
  margin: 9px 0 0;
  max-width: 68ch;
  color: var(--ink-2);
  font-size: var(--t-body);
  text-wrap: pretty;
}

.home-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
.home-fact { display: flex; flex-direction: column; gap: 1px; }
.home-deck { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.home-deck:empty { display: none; }
.home-deck a { color: var(--accent); font-weight: 600; }
.hf-n {
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.home-fact.is-bad .hf-n { color: var(--high); }
.hf-k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 500; }

.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
  margin-bottom: 6px;
}
.start-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 14px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.start-card:hover { border-color: var(--accent); background: var(--accent-wash); }
.sc-title { font-size: var(--t-body); font-weight: 600; color: var(--accent-2); }
.sc-why { color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }
.sc-n { margin-top: auto; padding-top: 4px; font-size: var(--t-micro); color: var(--ink-3); }

.home-shelves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 11px;
  margin-bottom: 6px;
}
.home-shelf { min-width: 0; }
.hs-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-2);
}
.hs-name { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.hs-n { margin-left: auto; font-size: 10px; color: var(--ink-3); }
.home-shelf-list { display: flex; flex-direction: column; }
.home-view {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 6px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.home-view:hover { background: var(--accent-wash); color: var(--ink); }
.hv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-n { margin-left: auto; font-size: 10px; color: var(--ink-3); }

.make-list { display: flex; flex-direction: column; gap: 6px; }
.make-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.make-row:hover:not(:disabled) { border-color: var(--accent); }
.make-row:disabled { opacity: 0.55; cursor: default; }
.mr-label { font-size: var(--t-body); font-weight: 600; white-space: nowrap; }
.mr-note { color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }
@media (max-width: 720px) {
  .make-row { flex-direction: column; gap: 4px; }
  .mr-label { white-space: normal; }
}

.panel {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 2px 40px;
  display: flex;
  flex-direction: column;
}
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 13px;
}
.panel-head h1 { font-size: var(--t-xl); letter-spacing: -0.01em; }
.panel-head .sub { margin: 4px 0 0; max-width: 74ch; color: var(--ink-2); font-size: var(--t-body); text-wrap: pretty; }
.panel-head .icon-btn { margin-left: auto; }
.panel-head + .group-title, .panel-head + * > .group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.table-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 12px;
}
.tp-label {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 6px 0 0;
}
.tp-label + .tp-label, .table-chip + .tp-label { margin-left: 12px; }
.table-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  background: var(--sheet);
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-2);
  cursor: pointer;
}
.table-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.table-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.table-chip.is-on .tc-n { color: rgba(255, 255, 255, 0.75); }
.table-chip.is-rel .tc-name { font-family: var(--mono); font-size: 10px; }
.table-chip.is-empty { opacity: 0.55; }
.tc-n { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }

.table-host { display: flex; flex-direction: column; min-height: 0; }
.table-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.table-filter {
  width: min(280px, 40vw);
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 5px 9px;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
}
.table-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-small);
  color: var(--ink-2);
  cursor: pointer;
}
.table-count { margin-left: auto; font-size: var(--t-micro); color: var(--ink-3); }

.table-scroll {
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
}
/* A table fills the stage and scrolls inside itself, so the sticky header
   stays put. The coverage report is a document and scrolls as one. */
.panel.is-table { overflow: hidden; padding-bottom: 0; }
.panel.is-table .table-host { flex: 1; min-height: 0; }
.panel.is-table .table-scroll { flex: 1; min-height: 140px; }
.data-table { border-collapse: collapse; font-size: var(--t-small); width: max-content; min-width: 100%; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sunk);
  border-bottom: 1px solid var(--rule-2);
  padding: 0 10px 5px;
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;
}
.data-table th.is-sorted { background: var(--panel); }
.th-btn {
  display: block;
  background: none;
  border: 0;
  padding: 7px 0 0;
  font: inherit;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.th-btn:hover { color: var(--ink); }
.th-req { color: var(--high); margin-left: 2px; }
.th-arrow { margin-left: 5px; color: var(--accent); }
.th-fill { display: block; font-size: 8.5px; color: var(--ink-3); }
.data-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--rule);
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}
.data-table tbody tr:hover td { background: var(--sunk); }
.data-table td.is-key { font-family: var(--mono); font-size: 10px; color: var(--ink); }
.data-table td.is-blank { color: var(--ink-3); }
.cell-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}
.cell-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.cov-totals { display: flex; flex-wrap: wrap; gap: 22px; padding: 4px 0 16px; }
.cov-total { display: flex; flex-direction: column; gap: 2px; }
.ct-n { font-size: var(--t-xl); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ct-k { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.meter {
  display: inline-block;
  width: 90px;
  height: 4px;
  border-radius: 2px;
  background: var(--rule-2);
  overflow: hidden;
  flex: none;
}
.meter-fill { display: block; height: 100%; background: var(--ok); }
.meter.is-gap .meter-fill { background: var(--high); }

.gap-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
  margin-bottom: 8px;
  padding: 3px 0 0;
}
.gap-head {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 12px 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gap-head::before {
  content: "\25B8";
  color: var(--ink-3);
  font-size: 9px;
  transition: transform 140ms var(--ease);
}
.gap-head.is-open::before { transform: rotate(90deg); }
.gap-count { font-size: var(--t-micro); color: var(--ink-3); min-width: 52px; }
.gap-title { font-size: var(--t-body); color: var(--ink); }
.gap-head .meter { margin-left: auto; }
.gap-why { margin: 0; padding: 0 12px 10px 44px; color: var(--ink-2); font-size: var(--t-small); max-width: 82ch; text-wrap: pretty; }
.gap-items {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 12px 11px 44px;
}
.gap-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  background: var(--sunk);
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-2);
  cursor: pointer;
}
.gap-item:hover { border-color: var(--accent); color: var(--ink); }
.gi-id { font-size: 9px; color: var(--ink-3); }

.cov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 11px;
}
.cov-block {
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
  padding: 10px 12px 12px;
}
.cb-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.cb-name { font-weight: 600; font-size: var(--t-body); }
.cb-n { margin-left: auto; font-size: var(--t-micro); color: var(--ink-3); }
.cov-fields { display: flex; flex-direction: column; gap: 3px; }
.cov-field { display: flex; align-items: center; gap: 9px; font-size: var(--t-small); }
.cf-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cf-n { font-size: 9.5px; color: var(--ink-3); min-width: 42px; text-align: right; }

.pick-row { display: flex; align-items: stretch; gap: 7px; margin-bottom: 7px; }
.pick-row .pick { flex: 1; margin-bottom: 0; }
.pick-row .btn { align-self: center; white-space: nowrap; }

.produces { margin-top: 11px; }
.produces-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
}
.produces-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 9px;
  font-size: var(--t-small);
}
.produces-list li + li { border-top: 1px solid var(--rule); }
.produces-list .mono { font-size: 10px; color: var(--ink); }
.produces-name { margin-left: auto; color: var(--ink-3); font-size: var(--t-micro); }

.rail-head .icon-btn.tiny {
  float: right;
  width: 24px;
  height: 24px;
  margin-top: -3px;
  font-size: 14px;
  line-height: 1;
}

.drawer.wide { width: min(1080px, 100vw); }

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr); }
}
.editor-main { min-width: 0; }

.code-area {
  width: 100%;
  height: min(52vh, 520px);
  resize: vertical;
  background: var(--sunk);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 12px 13px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.code-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor-status {
  margin: 9px 0 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  text-wrap: pretty;
}
.editor-status.is-ok { color: var(--ok); }
.editor-status.is-bad { color: var(--high); }

.editor-acts { display: flex; gap: 8px; margin-top: 11px; }
.editor-acts .danger { margin-left: auto; }

.editor-help { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.help-box {
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
}
.help-box summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: var(--t-small);
  list-style: none;
}
.help-box summary::-webkit-details-marker { display: none; }
.help-box summary::before {
  content: "\25B8";
  color: var(--ink-3);
  font-size: 9px;
  transition: transform 140ms var(--ease);
}
.help-box[open] summary::before { transform: rotate(90deg); }
.help-where { margin-left: auto; font-size: 9px; color: var(--ink-3); }
.help-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 10px 9px;
}
.help-chip {
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--sunk);
  color: var(--ink-2);
}
.help-ops { margin: 0; padding: 0 10px 9px; }
.help-ops dt { font-size: 9.5px; color: var(--ink); margin-top: 6px; }
.help-ops dd { margin: 1px 0 0; font-size: var(--t-micro); color: var(--ink-3); text-wrap: pretty; }

.src-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.src-tabs { display: flex; gap: 2px; }
.src-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  padding: 4px 10px;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-3);
  cursor: pointer;
}
.src-tab:hover { color: var(--ink); }
.src-tab.is-on {
  color: var(--ink);
  background: var(--sunk);
  border-color: var(--rule);
}
.src-head .btn { margin-left: auto; }
.src-pane {
  margin: 0;
  padding: 11px 12px;
  max-height: 58vh;
  overflow: auto;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre;
  tab-size: 2;
}

.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 9px;
  margin-bottom: 6px;
}
.block-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.block-card:hover { border-color: var(--accent); }
.bc-head { display: flex; align-items: baseline; gap: 9px; }
.bc-name { font-size: var(--t-body); font-weight: 600; }
.bc-cat {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bc-why { margin: 0; color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }
.bc-parts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; padding-top: 4px; }

.lib-list { display: flex; flex-wrap: wrap; gap: 3px; }
/* The landing-zone shelf: one row per kind, the service beside it, and who
   asks for it underneath. A kind with no service is the row to read. */
.lz-list { display: flex; flex-direction: column; }
.lz-row {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 1px 10px;
  padding: 5px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small, 12px);
}
.lz-row:first-child { border-top: 0; }
.lz-kind { color: var(--ink-2); }
.lz-svc { color: var(--ink-1, inherit); }
.lz-none { font-weight: 600; color: var(--accent); }
.lz-asked { grid-column: 2; color: var(--ink-3); font-size: var(--t-micro); }
.lz-code { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-left: 8px; }
.drift-findings .lz-row { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.drift-findings .lz-code { display: block; margin: 1px 0 0; }

/* Drift rows: one system a line, the difference beside it. The chips the
   coverage gaps use wrapped a system's name mid-word next to its id. */
.drift-rows { display: flex; flex-direction: column; margin-bottom: 4px; }
.drift-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
}
.drift-row:first-child { border-top: 0; }
.drift-row .dr-sys { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.drift-row .dr-sys button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
.drift-row .dr-sys button:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.drift-row .dr-sys .gi-id { font-family: var(--mono); }
.drift-row .dr-what { color: var(--ink-2); overflow-wrap: anywhere; }
.drift-row.is-gone .dr-sys { color: var(--ink-3); }

/* The timeline: a label column and one column per quarter. A bar spans its
   quarters; what the work reaches sits under it. */
.tl-grid { display: grid; gap: 4px 0; align-items: center; margin-top: 10px; }
.tl-quarter {
  font-size: var(--t-micro);
  color: var(--ink-3);
  text-align: center;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--rule);
}
.tl-quarter.is-year { border-left: 1px solid var(--rule); }
.tl-section {
  font-weight: 600;
  color: var(--ink-2);
  font-size: var(--t-small, 12px);
  padding: 12px 0 4px;
}
.tl-label {
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 8px 4px 0;
  color: inherit;
  font: inherit;
  font-size: var(--t-small, 12px);
  cursor: pointer;
}
.tl-label:hover { color: var(--accent); }
.tl-bar {
  height: 22px;
  border-radius: 4px;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}
.tl-bar.is-active { background: var(--accent); color: var(--accent-ink); }
.tl-bar.is-planned, .tl-bar.is-proposed { border-style: dashed; }
.tl-bar.is-deprecated, .tl-bar.is-retired { opacity: 0.5; }
.tl-bar-text { font-size: var(--t-micro); }
.tl-under { font-size: var(--t-micro); color: var(--ink-3); padding: 0 0 6px 8px; }

/* The changes panel: two revisions to compare, and what moved between them. */
.chg-form { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.chg-form label { font-size: var(--t-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.chg-form input { width: 160px; font-family: var(--mono); font-size: 12px; }
.gap-item.is-gone { opacity: 0.6; text-decoration: line-through; cursor: default; }
.gi-diff { flex-basis: 100%; font-size: var(--t-micro); color: var(--ink-3); }
.lib-comp {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  background: var(--sunk);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.lc-n { font-size: 9px; color: var(--accent); }
.bc-in { margin: 0; font-size: 9.5px; color: var(--ink-3); }

/* ---- patterns ----------------------------------------------------------
   A pattern is prose with a status, so it is a card that reads top to
   bottom rather than a chip. The status carries the one accent the library
   allows itself: approved is quiet, a candidate is marked, a deprecated one
   is struck through where the eye lands first. */

.pattern-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.pattern-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
}
.pattern-card.is-deprecated,
.pattern-card.is-retired { background: var(--panel); }
.pattern-card.is-deprecated .pc-name,
.pattern-card.is-retired .pc-name { text-decoration: line-through; color: var(--ink-3); }
.pc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pc-name { font-size: var(--t-body); font-weight: 600; }
.pc-status {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--sunk);
  color: var(--ink-2);
}
.is-approved .pc-status { background: var(--ok-wash); color: var(--ok); }
.is-candidate .pc-status { background: var(--med-wash); color: var(--med); }
.pc-cat, .pc-ref {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pc-ref { margin-left: auto; text-transform: none; letter-spacing: 0; }
/* A card from the organization's own library, and what it stands in for. */
.lib-from {
  font-size: var(--t-small);
  padding: 1px 7px;
  border-radius: var(--r-s);
  background: var(--accent-wash);
  color: var(--accent);
}
.lib-comp .lib-from { padding: 0 5px; }
.block-card > .lib-from { align-self: flex-start; }
.lib-sources { margin: 8px 0 0; max-width: 74ch; color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }
.pc-text { margin: 0; font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; line-height: 1.5; }
.pc-text b { color: var(--ink); font-weight: 600; }
.pc-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.pc-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 6px;
}
.pc-k:first-child { margin-left: 0; }
.pc-none { font-size: var(--t-micro); color: var(--ink-3); font-style: italic; }
.help-chip.as-btn {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.3;
}
.help-chip.as-btn:hover { border-color: var(--accent); color: var(--ink); }

.produces-list li.is-clash .produces-name { color: var(--high); }
.field-why {
  display: block;
  margin-top: 4px;
  font-size: var(--t-micro);
  color: var(--ink-3);
  text-wrap: pretty;
}

.subject-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 11px;
  margin-top: 10px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
}
.subject-tag {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.subject-pick { display: inline-flex; align-items: center; gap: 7px; }
.sp-name {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
}
.subject-pick select {
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 3px 6px;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  max-width: min(340px, 40vw);
}
.subject-why {
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--ink-3);
  text-wrap: pretty;
}

.focus-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 11px;
  margin-top: 10px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
}
.focus-tag {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.focus-on {
  font-size: var(--t-small);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-step {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.focus-step .mono {
  font-size: var(--t-micro);
  color: var(--ink-2);
  min-width: 44px;
  text-align: center;
}

/* The sketch bar: the same strip as focus, a different verb. */
.sketch-bar { flex-wrap: wrap; row-gap: 6px; }
.sketch-bar .focus-tag { color: var(--ink-2); }
.sketch-acts { flex-wrap: wrap; row-gap: 6px; }
.sketch-acts .sep { width: 1px; height: 16px; background: var(--rule); }
.btn.small.on { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); }
.pick-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--r-s); font-size: var(--t-small); }
.pick-row input { margin: 0; }
.pick-row .via { color: var(--ink-3); font-size: 10.5px; margin-left: auto; }
.pick-row.is-in { color: var(--ink-3); }
.pick-row.as-btn { cursor: pointer; background: var(--sheet); text-align: left; font: inherit; color: inherit; width: 100%; }
.pick-row.as-btn:hover { border-color: var(--accent); }
.field.into { padding: 8px 10px; border: 1px solid var(--accent); border-radius: var(--r-s); background: var(--accent-wash); }
.field.into label.part-head { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.field.into .brief-hint { margin: 4px 0 0 22px; }
.pick-list.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; }
.pick-list.two-col .pick-row { cursor: pointer; }
.sketch-report { font-size: var(--t-small); color: var(--ink-2); margin: 6px 0 10px; }
.sketch-report code { margin-right: 4px; }
/* Five actions no longer fit one row of the inspector; they wrap. */
.insp-head .acts { flex-wrap: wrap; row-gap: 4px; }
textarea.mono.wide { width: 100%; min-height: 260px; font-size: 11.5px; line-height: 1.45; }

.impact-list { display: flex; flex-direction: column; gap: 1px; }
.impact-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
}
/* Consequence weakens with distance, so the type does too. */
.impact-row .conf {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 2px;
}
.impact-row.conf-direct .conf { color: var(--high); }
.impact-row.conf-likely .conf { color: var(--med); }
.impact-row.conf-possible .conf { color: var(--ink-3); }
.impact-row.conf-possible .impact-main button { color: var(--ink-2); }
.impact-main { min-width: 0; }
.impact-main button {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.impact-main button:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.impact-main .via {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
}

.banner {
  background: var(--accent-wash);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 9px 11px;
  font-size: var(--t-small);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- drawer ----------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: oklch(0.24 0.015 255 / 0.28);
  animation: fade 160ms var(--ease);
}

.drawer {
  position: fixed;
  inset: var(--head) 0 0 auto;
  width: min(560px, 100vw);
  z-index: var(--z-drawer);
  background: var(--panel);
  border-left: 1px solid var(--rule-2);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  animation: slide-in 220ms var(--ease);
}

@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { translate: 12px 0; opacity: 0; } }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
}
.drawer-head h2 { font-size: var(--t-lg); color: var(--accent-2); }
.drawer-head .icon-btn { margin-left: auto; }

.drawer-body { flex: 1; overflow-y: auto; padding: 16px; }

.drawer-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
  background: var(--sunk);
}
.drawer-foot .hint { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); }
.drawer-foot .spacer { flex: 1; }

.explain { color: var(--ink-2); font-size: var(--t-body); margin: 0 0 15px; max-width: 68ch; text-wrap: pretty; }

.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 3px; font-size: var(--t-small); color: var(--ink-2); }
.field label .req { color: var(--high); margin-left: 2px; }
.field label .hint { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); margin-left: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 6px 9px;
  transition: border-color 140ms var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--rule-3); }
.field textarea { min-height: 66px; resize: vertical; font-family: inherit; }
.field.mono-in input { font-family: var(--mono); }

.group-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 22px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Archetype picker: each option states what it costs you, which is the thing
   the person choosing actually needs to know. */
.pick {
  width: 100%;
  text-align: left;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 11px 13px;
  cursor: pointer;
  margin-bottom: 9px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.pick:hover { border-color: var(--accent); background: var(--accent-wash); }
.pick .top { display: flex; align-items: baseline; gap: 10px; }
.pick .t { font-weight: 600; font-size: var(--t-body); }
.pick .n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  white-space: nowrap;
}
.pick .d { margin: 5px 0 0; color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }

/* ---- findings --------------------------------------------------------- */

.findings { display: flex; flex-direction: column; gap: 5px; }
.finding {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 9px;
  border-radius: var(--r-s);
  background: var(--sunk);
  font-size: var(--t-small);
}
.finding.err { background: var(--high-wash); }
.finding .code { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); padding-top: 2px; }
.finding.err .code { color: var(--high); }
.finding .msg { color: var(--ink-2); overflow-wrap: anywhere; }
.finding .ref {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.finding .ref:hover { color: var(--accent); }
.finding .where {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ---- toasts ----------------------------------------------------------- */

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
}

.toast {
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 9px 12px;
  box-shadow: var(--shadow-float);
  font-size: var(--t-base);
  animation: slide-in 200ms var(--ease);
}
.toast .t { font-weight: 600; display: block; }
.toast .d { color: var(--ink-2); font-size: var(--t-small); overflow-wrap: anywhere; }
.toast.ok .t { color: var(--ok); }
.toast.warn .t { color: var(--med); }
.toast.err .t { color: var(--high); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- density pass ------------------------------------------------------
   The floor for a label is 10.5px. Sixteen rules had settled between 8.5 and
   9.5px uppercase tracked mono, which is a texture rather than a label:
   contrast passed and legibility did not. Overridden here in one place so
   the intent is visible, rather than edited into each rule. */

.rail-head, .shelf > summary, .chip .k, .brief-h,
.hf-k, .ct-k, .hs-name, .tp-label, .bc-cat, .pc-status, .pc-cat, .pc-ref,
.pc-k, .cb-head .cb-n, .focus-tag, .subject-tag, .sp-name, .results .rid,
.help-where, .help-chip, .help-chip.as-btn, .lc-n, .bc-in,
.insp-sec h3, .group-title, .finding .code, .finding .where, .link-rel,
.link-q, .link-locked, .rel .via, details.fields > summary, .kv dt, .gi-id,
.help-ops dt, .cf-n, .flow-proto, .field label .hint, .tc-n {
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
.th-fill { font-size: 10px; }
.viewlist .vcount, .zoom-pct, .stage-meta { font-size: 11px; }

.insp-danger { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--rule-2); }

/* Reading order for the brief's legend rows. */
.brief-row { display: flex; align-items: center; gap: 8px; }
.brief-row.is-faded { opacity: 0.6; }
.brief-row .brief-count { margin-left: auto; }

/* ---- parts (modules) in the New form ---------------------------------- */
.part-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.part { padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--sheet); }
.part.is-off { background: var(--panel); }
.part.is-off .part-desc, .part.is-off .part-field { display: none; }
.part-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.part-head input { margin: 0; }
.part-name { font-weight: 500; }
.part-cat { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.part-n { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.part-desc { margin: 5px 0 0 22px; font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.part-why { display: block; margin: 3px 0 0 22px; font-size: 10.5px; color: var(--ink-3); font-style: italic; }
.part-why:empty { display: none; }
.part-field { margin: 8px 0 0 22px; }
.help-chip.is-fixed { background: var(--accent-wash); color: var(--ink); }
.block-card.is-part { cursor: default; }
.block-card.is-part:hover { border-color: var(--rule); }

/* ---- connected, grouped by relation ------------------------------------ */
.rel-group { border: 1px solid var(--rule); border-radius: var(--r-s); margin-bottom: 5px; }
.rel-group > summary {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none;
  padding: 5px 9px; font-size: var(--t-small); color: var(--ink-2);
}
.rel-group > summary::-webkit-details-marker { display: none; }
.rel-group > summary::before { content: "▸"; font-size: 8px; color: var(--ink-3); transition: transform 140ms var(--ease); }
.rel-group[open] > summary::before { transform: rotate(90deg); }
.rel-group[open] > summary { border-bottom: 1px solid var(--rule); color: var(--ink); }
.rg-n { margin-left: auto; font-size: var(--t-micro); color: var(--ink-3); }
.rel-list { padding: 4px 6px 6px; }
/* Legend keys are buttons now: the same look, plus a hand and a fade. */
.legend .key.as-key { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-s); }
.legend .key.as-key:hover { color: var(--accent-2); }

/* A kit in the New form: a heading over the members it stands for. */
.part.is-kit { background: var(--sunk); }
.part.is-kit .part-head { font-weight: 600; }
.part.in-kit { margin-left: 18px; }

/* ---- assemble: a project from chunks -----------------------------------
   Three columns: the project's own answers, the chunk gallery, and the
   drawing with the small edits under it. The gallery scrolls on its own so
   the drawing stays put while the list is browsed. */
.asm {
  display: grid;
  grid-template-columns: minmax(230px, 270px) minmax(300px, 400px) minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}
.asm-col { min-width: 0; }
.asm-chunks { max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 6px; }
.asm-chunks-head { display: flex; align-items: baseline; gap: 12px; }
.asm-chunks-head .group-title { flex: 1; }
.asm-chunks-head .table-filter { width: 150px; margin-top: 10px; }
.chunk-list { display: flex; flex-direction: column; gap: 6px; }
.chunk-cat {
  margin: 12px 0 2px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
}
.chunk-cat:first-child { margin-top: 0; }
.chunk {
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--sheet);
  padding: 8px 10px 8px 8px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.chunk:hover { border-color: var(--rule-3); }
.chunk.is-on { border-color: var(--accent); background: var(--accent-wash); }
.chunk-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: start; cursor: pointer; }
.chunk-head input { margin: 3px 0 0; }
.chunk-thumb { display: block; width: 112px; height: 67px; border: 1px solid var(--rule); border-radius: 2px; background: var(--sheet); overflow: hidden; }
.chunk-thumb svg { width: 112px; height: 67px; display: block; }
.chunk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chunk-name { font-weight: 600; font-size: var(--t-base); }
.chunk-desc {
  font-size: var(--t-small);
  color: var(--ink-2);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chunk.is-on .chunk-desc { display: block; }
.chunk-badges { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.chunk-n { font-size: 10.5px; color: var(--ink-3); }
.chunk-fields { margin: 6px 0 0 28px; }
.kit-members { margin: 4px 0 0 6px; display: flex; flex-direction: column; gap: 2px; }
.kit-members .part-why { margin-left: 22px; }
.kit-member { display: flex; align-items: center; gap: 6px; margin-left: 22px; font-size: 12px; cursor: pointer; }
.kit-member input { margin: 0; }
.kit-member.is-off .km-name { text-decoration: line-through; color: var(--ink-3); }
.km-note { font-size: 10px; color: var(--ink-3); }
.km-note:empty { display: none; }
.chunk-fields .part-field { margin-left: 0; }
.asm-sheet {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.asm-canvas {
  height: min(52vh, 560px);
  background-image: radial-gradient(circle, oklch(0.9 0.005 255 / 0.45) 1px, transparent 1px);
  background-size: 26px 26px;
}
.asm-legend { padding: 6px 12px; border-top: 1px solid var(--rule); background: var(--panel); min-height: 28px; }
.asm-legend:empty { display: flex; }
.asm-status { margin: 10px 0 0; font-size: var(--t-small); color: var(--ink-2); min-height: 18px; text-wrap: pretty; }
.asm-status.is-ok { color: var(--ink-2); }
.asm-status.is-bad { color: var(--high); }
.asm-status.is-busy { color: var(--ink-3); }
.asm-edits { width: 100%; border-collapse: collapse; font-size: var(--t-small); table-layout: fixed; }
.asm-edits col.c-sw { width: 30px; }
.asm-edits col.c-from { width: 118px; }
.asm-edits col.c-keep { width: 44px; }
.asm-edits col.c-set { width: 46%; }
.asm-edits th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 500;
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--rule);
}
.asm-edits td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.asm-edits td:first-child { width: 28px; }
.asm-edits .gi-id { display: block; font-size: 10.5px; }
.asm-edit.is-dropped .asm-name, .asm-edit.is-dropped .asm-from { text-decoration: line-through; color: var(--ink-3); }
.asm-edit.is-hit td { background: var(--accent-wash); }
.asm-name { width: 100%; background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r-s); padding: 3px 6px; font: inherit; }
.asm-edits .gi-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-from { color: var(--ink-3); font-size: 10.5px; white-space: nowrap; }
.asm-set { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* ---- list answers as rows ---------------------------------------------- */
.rows { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; }
.rows-line { display: flex; gap: 4px; align-items: center; width: 100%; }
.rows-line input { flex: 1; min-width: 0; }
.rows-rec { width: 100%; display: grid; gap: 4px; padding: 6px 8px 8px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--sheet); }
.rows-rec-head { display: flex; justify-content: space-between; align-items: center; }
.rows-rec-n { font-size: 10.5px; color: var(--ink-3); }
.rows-rec-field { display: grid; grid-template-columns: 84px 1fr; gap: 6px; align-items: center; margin: 0; }
.rows-rec-key { font-size: 10.5px; color: var(--ink-3); }
.rows-rec-field input { width: 100%; min-width: 0; }
.rows-rm { padding: 1px 7px; line-height: 1.2; }
.chunk-bind { margin: 4px 0 0; font-size: 10.5px; color: var(--ink-3); }
.asm-set-form { display: inline-flex; gap: 4px; align-items: center; }
.asm-set-form select, .asm-set-form input { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r-s); padding: 3px 6px; font: inherit; font-size: var(--t-small); }
.asm-set-form input { width: 110px; }
.asm-set-form select { max-width: 150px; }
.asm-file { margin-top: 14px; }
.asm-file summary { cursor: pointer; font-size: var(--t-small); color: var(--ink-2); }
.asm-text {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  font-size: 11.5px;
  line-height: 1.45;
  max-height: 360px;
  overflow: auto;
  white-space: pre;
}
.asm-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.asm-keep { display: flex; gap: 8px; }
.asm-keep input { flex: 1; background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r-s); padding: 5px 8px; font: inherit; }
.asm-foot .acts { display: flex; justify-content: flex-end; }
.pick.is-lead { border-color: var(--accent); }
.gt-act { margin-left: 12px; letter-spacing: 0; text-transform: none; font-family: var(--sans); }
@media (max-width: 1240px) {
  .asm { grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); }
  .asm-preview { grid-column: 1 / -1; }
  .asm-chunks { max-height: none; }
}

/* ---- walking a flow ------------------------------------------------------- */
.walk-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 5px 8px; margin: 2px 0; border: 1px solid var(--rule); border-radius: var(--r-s);
  background: var(--sheet); font: inherit; font-size: var(--t-small); color: var(--ink-2);
  text-align: left; cursor: pointer;
}
.walk-row:hover { border-color: var(--accent); color: var(--ink); }
.walk-row.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); }
.walk-name { font-weight: 500; }
.walk-n { margin-left: auto; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.walk-steps { margin: 6px 0 8px; padding: 0 0 0 4px; list-style: none; }
.walk-steps li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: var(--t-small); border-bottom: 1px solid var(--rule); }
.walk-steps li.is-off { color: var(--ink-3); }
.walk-step {
  flex: none; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 18px;
  font-size: 10.5px; font-weight: 700; color: #1c1917; background: #fef3c7; border: 1px solid #b45309;
}
.walk-steps li.is-off .walk-step { background: var(--sunk); border-color: var(--rule-2); color: var(--ink-3); }
.walk-proto { margin-left: 6px; font-size: 10.5px; color: var(--ink-3); }
.walk-off { margin-left: 6px; font-size: 10.5px; color: var(--ink-3); font-style: italic; }

/* ---- captions pass ----------------------------------------------------
   Uppercase tracked mono is kept for what is an identifier: ids, chip keys,
   finding codes, the title block's facts. Section heads are sentence-case
   sans, so a heading reads as a heading and a code as a code. One caption
   style for both had made the inspector a wall of small capitals. */
.rail-head, .shelf > summary, .brief-h, .insp-sec h3, .legend .cap, .group-title,
.hs-name, .tp-label {
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--ink-2);
}
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; color: var(--ink-3); }
.shelf > summary { padding: 8px 2px 6px; color: var(--ink-2); }
.shelf > summary:hover { color: var(--ink); }
.shelf > summary::before { color: var(--ink-3); }
.brief-h { margin: 16px 0 6px; }
.insp-sec h3 { margin-bottom: 8px; }
.legend .cap { font-size: var(--t-micro); color: var(--ink-3); font-weight: 600; }
.group-title { color: var(--ink-2); }

/* ---- tile maps --------------------------------------------------------
   A map with no edges is a set of things sorted into boxes, and a graph
   layout has nothing to say about where each goes. Drawn as HTML: crisp at
   any size, wrapped to the width of the sheet, scrolled rather than shrunk,
   every tile a button. A band per top-level boundary where the field has a
   reading order (the tiers of a capability map); a card per boundary
   otherwise. The tint and the border weight are the view's dimension, from
   the same palette the canvas uses, so the legend under the sheet applies. */
.tiles {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 28px;
  background: var(--sheet);
  font-family: var(--sans);
  font-size: var(--t-base);
  color: var(--ink);
  z-index: var(--z-canvas);
}
.tiles[hidden] { display: none; }
.tiles.is-export { padding: 20px 24px 28px; }

.tband {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--rule);
}
.tband:first-child { border-top: 0; padding-top: 4px; }
.tband-h { margin: 0; padding-top: 2px; min-width: 0; }
.tband-name { display: block; font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.tband-gloss { display: block; margin-top: 3px; font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.tband-n { display: block; margin-top: 6px; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tband-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(198px, 100%), 1fr)); gap: 10px; }
.tcards.is-nested { margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.tcard {
  min-width: 0;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--panel);
  padding: 9px 9px 9px;
}
.tcard-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 8px;
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}
.tcard-h > span:first-child { min-width: 0; text-wrap: balance; }
.tcard-n { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); font-weight: 400; color: var(--ink-3); }

/* min(…, 100%) keeps a tile inside a card narrower than the tile's own
   minimum, which a wide window with many columns produces. */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr)); gap: 7px; }
.tgrid.is-list { grid-template-columns: minmax(0, 1fr); gap: 4px; }

.tile {
  --tf: var(--panel);
  --ts: var(--rule-3);
  --tw: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  padding: 7px 10px;
  background: var(--tf);
  border: var(--tw) solid var(--ts);
  border-radius: var(--r-s);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: box-shadow 140ms var(--ease), opacity 140ms var(--ease);
}
.tgrid.is-list .tile { min-height: 34px; padding: 5px 9px; }
.tile-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tile-sub { font-size: 10.5px; color: var(--ink-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover { box-shadow: 0 0 0 2px var(--accent-wash-2), var(--shadow-sheet); }
.tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tile.is-sel { box-shadow: 0 0 0 2.5px var(--accent); }
.tile.is-faded { opacity: 0.6; }
.tile.is-dim { opacity: 0.28; }
.tile.is-sk { box-shadow: inset 0 0 0 2px #2563eb; }
.tile.conf-direct { outline: 2px solid var(--high); outline-offset: 1px; }
.tile.conf-likely { outline: 2px dashed var(--med); outline-offset: 1px; }
.tile.conf-possible { outline: 1.5px dotted var(--ink-3); outline-offset: 1px; }
@media (max-width: 900px) {
  .tband { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---- the landing page: start with a picture ---------------------------- */
.home-h2 { font-size: var(--t-base); font-weight: 600; color: var(--ink-2); margin: 0 0 9px; }
.start-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}
.start-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 0 12px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--sheet);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), translate 140ms var(--ease);
}
.start-card:hover { border-color: var(--accent); box-shadow: var(--shadow-float); translate: 0 -1px; }
.start-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-thumb {
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  color: var(--accent);
  padding: 12px 16px;
  box-sizing: border-box;
}
.sc-thumb svg { width: 100%; height: 100%; display: block; }
.sc-thumb .th-f { fill: var(--accent-wash-2); stroke: var(--accent); stroke-width: 1.2; }
.sc-thumb .th-o { fill: var(--sheet); stroke: var(--accent); stroke-width: 1.2; }
.sc-thumb .th-l { fill: none; stroke: var(--rule-3); stroke-width: 1; }
.sc-thumb .th-g { fill: var(--sheet); stroke: var(--rule-3); stroke-width: 1; stroke-dasharray: 3 2; }
.sc-thumb .th-t { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 0.9; }
.sc-thumb .th-t.is-deep { fill: var(--accent-wash-2); }
.sc-thumb .th-b { fill: var(--accent); opacity: 0.75; }
.sc-thumb .th-r { fill: none; stroke: var(--rule-3); stroke-width: 1.2; }
.start-card .sc-title { padding: 10px 14px 0; color: var(--ink); }
.start-card .sc-why { padding: 0 14px; }
.start-card .sc-n { padding: 4px 14px 0; }
.door-lede { max-width: 48ch; }

/* ---- the Help page ------------------------------------------------------ */
.guide { max-width: 980px; }
.guide-h { font-size: var(--t-lg); font-weight: 600; margin: 0 0 10px; }
.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.guide-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 11px;
  padding: 13px 15px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--sheet);
}
.gs-n {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 11px;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.gs-t { font-weight: 600; color: var(--ink); }
.gs-p { margin: 0; color: var(--ink-2); font-size: var(--t-small); text-wrap: pretty; }
.guide-rows {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  margin: 0 0 30px;
  max-width: 76ch;
}
.gr-sw { display: flex; gap: 4px; align-items: center; justify-content: center; }
.gr-t { margin: 0; font-size: var(--t-base); color: var(--ink-2); text-wrap: pretty; }
.gr-t b { color: var(--ink); font-weight: 600; }
.gr-mark {
  width: 22px; height: 16px; border-radius: 2px; position: relative;
  background: #eef2ff; border: 1px solid #6366f1;
}
.gr-mark::after { content: ""; position: absolute; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 1px; background: #4338ca; }
.guide-keys {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  margin: 0 0 30px;
  font-size: var(--t-base);
  color: var(--ink-2);
}
kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid var(--rule-2);
  border-bottom-width: 2px;
  border-radius: var(--r-s);
  background: var(--sheet);
  color: var(--ink);
  white-space: nowrap;
  justify-self: start;
}
.guide-p { margin: 0 0 14px; max-width: 72ch; color: var(--ink-2); font-size: var(--t-body); text-wrap: pretty; }

/* ---- type pass ----------------------------------------------------------
   Monospace is for code: the YAML editor, the Source panel, finding codes.
   Every label, id, count and caption is set in the sans, in sentence case,
   so a panel reads like a form rather than a terminal. Tabular numerals
   keep the counts aligned without the mono. */
.mono, .stage-meta, .zoom-pct, .brief-meta, .brief-count, .viewlist .vcount, .shelf-n,
.insp-head .id, .chip .k, .chip .v, .kv dt, details.fields > summary,
.rel .dir, .rel .via, .link-rel, .link-q, .link-locked, .results .rid, .hf-n, .hf-k, .sc-n, .hh-id,
.tcard-n, .tband-n, .gs-n, .tc-n, .table-count, .table-chip.is-rel .tc-name,
.data-table td.is-key, .th-btn, .lz-code, .gi-id, .drawer-foot .hint, .field label .hint, .pick .n,
.part-n, .part-cat, .lc-n, .flow-meta, .flow-proto, .help-where, .help-chip, .help-chip.as-btn,
.subject-tag, .sp-name, .focus-tag, .tl-quarter, .tl-bar-text, .th-fill, .th-arrow, .walk-step,
.walk-proto, .walk-n, .rg-n, .cb-n, .lz-kind, .chunk-n, .bc-in, .bc-cat, .pc-status, .pc-ref, .pc-cat,
.pc-k, .rows-rec-n, .km-note, .gap-count, .ct-k, .tp-label, .chg-form label, .legend .cap,
.impact-row .conf, .impact-main .via, .asm-edits th, .picker, .finding .where, kbd {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.code-area, .src-pane, textarea.mono, .field.mono-in input, .finding .code { font-family: var(--mono); }

/* A word that is a label is set as a word. */
.chip .k, .kv dt, details.fields > summary, .link-rel, .link-locked, .hf-k, .ct-k,
.tp-label, .chg-form label, .part-cat, .bc-cat, .pc-cat, .pc-status, .pc-k, .pc-ref, .subject-tag,
.focus-tag, .help-where, .lz-kind, .th-fill, .walk-step, .impact-row .conf, .hs-name, .group-title {
  text-transform: none;
  letter-spacing: 0;
}
.hf-k { font-size: var(--t-small); color: var(--ink-3); font-weight: 400; text-transform: capitalize; }

/* The inspector as a form: a label, a colon, a value. */
.insp-head .id { font-size: var(--t-small); color: var(--ink-3); word-break: normal; overflow-wrap: anywhere; }
.chip { gap: 4px; padding: 3px 8px; font-size: var(--t-small); }
.chip .k { font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; }
.chip .k::after { content: ":"; }
.chip .v { font-weight: 500; }
details.fields > summary { font-size: var(--t-small); color: var(--ink-2); font-weight: 600; }
.kv { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); gap: 5px 12px; font-size: var(--t-small); }
.kv dt { font-size: var(--t-small); color: var(--ink-3); overflow-wrap: normal; padding-top: 0; }
.kv dd { color: var(--ink); }
.rel .via, .link-rel, .link-q, .impact-main .via { font-size: var(--t-micro); }
.rel .dir { font-size: var(--t-small); }
.subject-tag, .focus-tag { font-size: var(--t-small); font-weight: 600; }

/* ---- build types in the Assemble panel -------------------------------- */
.chunk-group { margin: 12px 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.chunk-group:first-child { margin-top: 0; }
.chunk-fold { margin-top: 12px; }
.chunk-fold > summary { cursor: pointer; font-size: var(--t-small); font-weight: 600; color: var(--ink-3); padding: 4px 0; }
.chunk-fold > summary:hover { color: var(--ink); }
.chunk-fold > .chunk-list { margin-top: 6px; }
.chunk-n.is-role { color: var(--accent-2); }
.asm-devs { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--sheet); }
.asm-devs[hidden] { display: none; }
.asm-dev-h { margin: 0 0 4px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.asm-dev { margin: 0; font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.asm-dev.is-bad { color: var(--high); }
.asm-dev.is-warn { color: var(--med); }
.asm-dev.is-ok { color: var(--ok); }
.asm-zone { margin: -4px 0 12px; font-size: var(--t-small); }
.asm-zone[hidden] { display: none; }
.asm-zone > summary { cursor: pointer; color: var(--ink-3); }
.asm-zone > summary:hover { color: var(--ink); }
.asm-zone-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; }
.asm-zone-list .zk { color: var(--ink-3); }
.asm-zone-list .zv { color: var(--ink); }

/* ---- art direction pass ------------------------------------------------
   One face for the name of a thing and another for everything else. This
   pass set a serif for page names; the redesign at the end of the file
   replaced it with the heavy sans, and --display is what the rules below
   read. The landing page gets a picture, drawn from the model as the page
   opens; each layer on the rail wears the color of its entity; and a
   drawing arrives on the sheet rather than appearing on it. */

:root {
  --t-page: 1.5rem;    /* 24px  the name of a page */
  --t-display: 2.5rem; /* 40px  the landing page */
}

.panel-head h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-page);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Each layer on the rail wears the color of the entity its views are
   mostly about: a swatch from the drawings' own palette. */
.shelf-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--lf, var(--accent-wash));
  border: 1px solid var(--ls, var(--accent));
  vertical-align: 0;
}


/* ---- the landing page, with a picture ---- */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 44px;
  align-items: start;
  padding: 6px 0 26px;
}
.home-hero .home-find { margin: 18px 0 0; max-width: 560px; }
.hero-copy { min-width: 0; max-width: 820px; }
.home-hero .hero-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--ink);
}
.home-hero .hero-lede {
  margin: 12px 0 0;
  max-width: 50ch;
  font-size: var(--t-lg);
  line-height: 1.5;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.hero-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 20px 10px 0;
  margin-right: 20px;
  border-right: 1px solid var(--rule);
}
.hero-fact:last-child { border-right: 0; margin-right: 0; }
.hero-fact .hf-n {
  font-family: var(--sans);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hero-fact.is-bad .hf-n { color: var(--high); }
.hero-fact .hf-k {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.spectrum { margin: 10px 0 0; }
.spectrum-bar { display: flex; gap: 1px; height: 6px; border-radius: 2px; overflow: hidden; }
.spectrum-seg {
  display: block;
  min-width: 2px;
  border: 0;
  padding: 0;
  background: var(--seg-ink);
  cursor: pointer;
  transition: filter 140ms var(--ease);
}
.spectrum-seg:hover { filter: brightness(1.2); }
.spectrum-seg:focus-visible { outline-offset: 1px; }
.spectrum-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: var(--t-small);
  color: var(--ink-3);
}
.spectrum-key button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.spectrum-key button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.spectrum-key button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--seg);
  border: 1px solid var(--seg-ink);
}
.spectrum-key button.is-more::before { display: none; }
.spectrum-key b { font-weight: 600; color: var(--ink-2); }

@keyframes plate-fade { to { opacity: 1; } }

/* A drawing arrives rather than appears. */
.sheet.is-in { animation: sheet-in 240ms var(--ease) both; }
@keyframes sheet-in {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

.start-card { transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), translate 160ms var(--ease); }
.start-card:hover { translate: 0 -1px; box-shadow: var(--shadow-float); }

/* ---- the sheet is the stage ----------------------------------------------
   The drawing fills the working area edge to edge and the chrome sits on
   it: a slim strip above for the name of the view, the key and the
   controls as floating cards in the bottom corners, the first-visit steps
   and the subject, focus and sketch bars as strips that push the sheet
   down rather than cover it. The fit leaves the corners clear, so a
   fitted drawing is never half under its own key. */

.stage { padding: 0; gap: 0; background: var(--sheet); }
.stage-head {
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}
.stage-head h1 { font-size: 15px; line-height: 1.3; letter-spacing: -0.008em; white-space: nowrap; }
.stage-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.stage-head .sub { margin: 0; font-size: var(--t-small); }
.stage-title .sub:not(.open) { display: block; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-meta { padding-top: 0; font-family: var(--sans); }

.coach, .subject-bar, .focus-bar {
  margin: 0;
  border-radius: 0;
  border-width: 0 0 1px;
  box-shadow: none;
  padding: 8px 16px;
}
.coach { background: var(--panel); border-color: var(--rule); }
.controls .more { position: relative; display: flex; }
.controls .more > summary { list-style: none; min-width: 28px; justify-content: center; font-size: 15px; line-height: 1; padding: 2px 6px; }
.controls .more > summary::-webkit-details-marker { display: none; }
.controls .more[open] > summary { background: var(--accent-wash); border-color: var(--accent-wash-2); }
.controls .more-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 212px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 6px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: var(--shadow-float);
  z-index: var(--z-popover);
}
.controls .more-list .btn { --btn-bg: transparent; --btn-rule: transparent; justify-content: flex-start; text-align: left; }
.controls .more-list .btn:hover { --btn-bg: var(--accent-wash); }
.controls .more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 9px 6px; font-size: var(--t-small); color: var(--ink-2); }
.controls .more-row select { max-width: 130px; }

.sheet { border: 0; border-radius: 0; box-shadow: none; }
.sheet-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 0 14px 14px;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.sheet-foot > * { pointer-events: auto; }
.legend {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(62%, 820px);
  padding: 8px 12px;
  background: oklch(1 0 0 / 0.94);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: var(--shadow-float);
}
.controls {
  margin-left: auto;
  padding: 5px 6px;
  background: oklch(1 0 0 / 0.96);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: var(--shadow-float);
}
.tiles { padding-bottom: 80px; }
.panel { padding: 18px 28px 48px; }

.palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: oklch(0.2 0.03 265 / 0.28);
}
.palette[hidden] { display: none; }
.palette-card {
  width: min(640px, calc(100vw - 32px));
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  box-shadow: 0 24px 64px -24px oklch(0.2 0.03 265 / 0.5), var(--shadow-float);
  overflow: hidden;
  animation: palette-in 160ms var(--ease) both;
}
@keyframes palette-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
.palette-card input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 14px 18px;
  font-size: var(--t-lg);
  background: transparent;
  outline: none;
}
.palette-card input::placeholder { color: var(--ink-3); }
.palette-list { max-height: min(56vh, 520px); overflow-y: auto; padding: 6px; }
.pal-group {
  padding: 8px 10px 4px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pal-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pal-row[aria-selected="true"] { background: var(--accent-wash); }
.pal-row .pr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pal-row .pr-hint { font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; }
.pal-row .pr-k { width: 10px; height: 10px; border-radius: 2px; border: 1px solid; justify-self: center; }
.pal-row .pr-a { justify-self: center; color: var(--ink-3); font-size: 16px; line-height: 1; }
.pal-row .vglyph { justify-self: center; color: var(--ink-3); }
.palette-foot {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro);
  color: var(--ink-3);
}
.palette-foot kbd {
  font: 500 10px/1 var(--sans);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  padding: 2px 5px;
  background: var(--panel);
  margin-right: 3px;
}
.pal-empty { padding: 18px 12px; color: var(--ink-3); text-align: center; }

/* ---- miniatures: the atlas, and the rail's hover card -------------------- */

.mini {
  display: block;
  aspect-ratio: 16 / 9;
  padding: 8px;
  background: var(--ground);
  border-radius: var(--r-s);
  overflow: hidden;
  color: var(--accent);
}
.mini svg { display: block; width: 100%; height: 100%; }
.mini.is-live svg, .sc-thumb.is-live svg { animation: plate-fade 320ms var(--ease) both; }
.mini .th-f { fill: var(--accent-wash-2); stroke: var(--accent); stroke-width: 1.2; }
.mini .th-o { fill: var(--sheet); stroke: var(--accent); stroke-width: 1.2; }
.mini .th-l { fill: none; stroke: var(--rule-3); stroke-width: 1; }
.mini .th-g { fill: var(--sheet); stroke: var(--rule-3); stroke-width: 1; stroke-dasharray: 3 2; }
.mini .th-t { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 0.9; }
.mini .th-t.is-deep { fill: var(--accent-wash-2); }
.mini .th-b { fill: var(--accent); opacity: 0.75; }
.mini .th-r { fill: none; stroke: var(--rule-3); stroke-width: 1.2; }

.atlas-wrap { margin-top: 28px; }
.atlas-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.atlas-h h2 { font-family: var(--display); font-weight: 500; font-size: var(--t-page); letter-spacing: -0.012em; }
.atlas-h .n { color: var(--ink-3); font-size: var(--t-small); }
.atlas-layer { margin: 0 0 20px; }
.atlas-layer h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.atlas-layer h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lf);
  border: 1px solid var(--ls);
}
.atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.atlas-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 9px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), translate 160ms var(--ease);
}
.atlas-card:hover { border-color: var(--accent); box-shadow: var(--shadow-float); translate: 0 -1px; }
.ac-title { font-size: var(--t-small); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-kind { font-size: var(--t-micro); color: var(--ink-3); }

.rail-peek {
  position: fixed;
  z-index: var(--z-popover);
  width: 300px;
  padding: 10px 12px 12px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: var(--shadow-float);
  pointer-events: none;
  animation: palette-in 140ms var(--ease) both;
}
.rail-peek[hidden] { display: none; }
.rail-peek .mini { margin-bottom: 9px; }
.rp-title { font-weight: 600; font-size: var(--t-base); }
.rp-desc {
  margin: 3px 0 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-wrap: pretty;
}
.rp-n { margin-top: 6px; font-size: var(--t-micro); color: var(--ink-3); }

/* A miniature keeps its box whatever shape the drawing is: the card row
   stays level, and the drawing sits centered inside. */
.mini { height: 96px; aspect-ratio: auto; }
.rail-peek .mini { height: 150px; }


/* ---- the shell, redrawn ----------------------------------------------------
   Designed in the design file and built from it. The
   sidebar is ink and carries the name, the pages and every view by layer;
   the sheet beside it is the lightest thing on the screen; the inspector
   stays a light column. One heavy sans for the name of a thing (Libre
   Franklin 800), one quiet sans for everything else (Geist), and the mono
   only where there is code. Actions are ink; the one accent is for links,
   focus and the row you are on. Everything below this line wins over the
   rules above it on purpose, so a page's rule can be read in one place. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The inline icons: a stroke the color of the text they sit beside. */
.i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.012em; }

/* ---- buttons: ink for the one that matters, a hairline for the rest ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--r-m);
  padding: 7px 14px;
  font-weight: 500;
  line-height: 1.25;
}
.btn.small { padding: 5px 10px; min-height: 28px; font-size: var(--t-base); }
.btn.primary { --btn-bg: var(--ink-900); --btn-ink: var(--on-ink); --btn-rule: var(--ink-900); font-weight: 600; }
.btn.primary:hover { --btn-bg: var(--ink-700); --btn-rule: var(--ink-700); }
.btn.primary:active { --btn-bg: var(--ink-800); }
.btn.toggle[aria-pressed="true"] { --btn-bg: var(--sunk); --btn-rule: var(--rule-2); --btn-ink: var(--ink); }
.btn.toggle[aria-pressed="false"] { --btn-ink: var(--ink-3); --btn-bg: transparent; --btn-rule: var(--rule-2); }
.btn.ghost { --btn-bg: transparent; --btn-rule: transparent; --btn-ink: var(--ink-2); }
.btn.ghost:hover { --btn-bg: var(--sunk); --btn-rule: transparent; --btn-ink: var(--ink); }
.btn.icon { padding: 0; width: 32px; height: 32px; }
.btn.small.icon { width: 28px; height: 28px; min-height: 28px; }
.btn .i { width: 15px; height: 15px; }
.icon-btn { border-radius: var(--r-m); }

/* ---- the sidebar ---------------------------------------------------------- */

.rail {
  background: var(--ink-900);
  color: var(--on-ink-2);
  border-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 10px 16px;
  color: var(--on-ink);
}
.sb-mark { display: inline-flex; flex: none; color: var(--on-ink); }
.sb-mark svg { display: block; }
.sb-wordmark {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.sb-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--r-m);
  color: var(--on-ink-3);
  cursor: pointer;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.sb-icon:hover { background: var(--ink-800); color: var(--on-ink); }
.sb-icon.tiny { width: 22px; height: 22px; }
.sb-icon.tiny .i { width: 14px; height: 14px; }

.sb-ws {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 12px 10px;
  padding: 8px 10px;
  border-radius: var(--r-m);
  background: var(--ink-800);
}
.sb-ws-name { color: var(--on-ink); font-weight: 600; font-size: var(--t-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ws-note { color: var(--on-ink-3); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.sb-ws-note:empty { display: none; }

.sb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  padding: 7px 10px;
  background: none;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-m);
  color: var(--on-ink-3);
  font: inherit;
  font-size: var(--t-small);
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms var(--ease), color 130ms var(--ease);
}
.sb-search:hover { border-color: var(--on-ink-3); color: var(--on-ink-2); }
.sb-search .i { width: 14px; height: 14px; }
.sb-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-search kbd {
  font: 500 10.5px/1 var(--sans);
  border: 1px solid var(--ink-line);
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--on-ink-3);
}

.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 0; }
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: 0;
  border-radius: var(--r-m);
  color: var(--on-ink-2);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.sb-item:hover { background: var(--ink-800); color: var(--on-ink); }
.sb-item[aria-current="page"] { background: var(--ink-700); color: var(--on-ink); font-weight: 600; }
.sb-item > span:first-of-type { flex: 1; min-width: 0; }
.sb-badge {
  flex: none;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--ink-700);
  color: var(--on-ink-2);
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sb-item[aria-current="page"] .sb-badge { background: var(--ink-line); color: var(--on-ink); }
.sb-badge:empty { display: none; }

/* The Check menu opens beside its row, over the sheet. */
.sb-menu { position: relative; }
.sb-menu > summary { list-style: none; }
.sb-menu > summary::-webkit-details-marker { display: none; }
.sb-menu[open] > summary { background: var(--ink-800); color: var(--on-ink); }
.sb-menu > .sb-menu-list {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 244px;
  padding: 6px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
}
.sb-menu-list .btn {
  --btn-bg: transparent; --btn-rule: transparent; --btn-ink: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
}
.sb-menu-list .btn:hover { --btn-bg: var(--accent-wash); --btn-rule: transparent; }
.sb-menu-list .mi-label { font-weight: 600; }
.sb-menu-list .mi-note { font-size: var(--t-micro); color: var(--ink-3); font-weight: 400; white-space: nowrap; }

.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 16px 16px 4px 22px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-ink-3);
}

.viewlist { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; }
.shelf { border: 0; }
.shelf > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-m);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-ink);
  cursor: pointer;
  list-style: none;
}
.shelf > summary:hover { background: var(--ink-800); color: var(--on-ink); }
.shelf > summary::before { content: "\25B8"; width: 10px; font-size: 9px; color: var(--on-ink-3); transition: transform 140ms var(--ease); }
.shelf[open] > summary::before { transform: rotate(90deg); }
.shelf-n { margin-left: auto; font-size: var(--t-micro); font-weight: 400; color: var(--on-ink-3); }
.shelf > ul { margin: 2px 0 6px; padding: 0; list-style: none; }
.viewlist button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 30px;
  background: none;
  border: 0;
  border-radius: var(--r-m);
  color: var(--on-ink-2);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
.viewlist button:hover { background: var(--ink-800); color: var(--on-ink); }
.viewlist button[aria-current="true"] { background: var(--ink-700); color: var(--on-ink); font-weight: 600; }
.viewlist .vname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewlist .vcount { font-size: var(--t-micro); color: var(--on-ink-3); }
.viewlist button.broken .vcount { color: oklch(0.86 0.12 85); }
.vglyph { display: inline-flex; width: 14px; height: 10px; color: var(--on-ink-3); flex: none; }
.vglyph svg { width: 14px; height: 10px; display: block; }
.viewlist button:hover .vglyph { color: var(--on-ink-2); }
.viewlist button[aria-current="true"] .vglyph { color: var(--on-ink); }

.sb-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ink-line);
}
.sb-new {
  --btn-bg: var(--on-ink); --btn-ink: var(--ink-900); --btn-rule: var(--on-ink);
  width: 100%;
  padding: 9px 14px;
  font-weight: 600;
}
.sb-new:hover { --btn-bg: var(--sunk); --btn-rule: var(--sunk); }
.sb-foot-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.sb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: none;
  border: 0;
  border-radius: var(--r-s);
  color: var(--on-ink-3);
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
}
.sb-link:hover, .sb-link[aria-current="page"] { color: var(--on-ink); }
.sb-link .i { width: 14px; height: 14px; }

/* ---- the strip over the sheet ------------------------------------------- */

.stage-head {
  min-height: 56px;
  padding: 0 16px 0 20px;
  gap: 12px;
}
.stage-head h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.stage-title { align-items: center; gap: 10px; }
.stage-head .sub { color: var(--ink-3); }
.kind-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-s);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
.kind-tag[hidden] { display: none; }
.stage-meta { margin-left: 0; color: var(--ink-3); font-size: var(--t-small); }
.stage-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
/* The way back to a hidden sidebar sits on the stage, over every page
   alike. It was the first thing in the drawing's head, which every page
   over the drawing hides, and the choice is remembered: a sidebar hidden
   on Home stayed hidden, reload and all. The head and the pages make room
   for it; the sheet does not, so a drawing is laid out on the sheet it
   always was. */
.stage-rail-open {
  display: none;
  position: absolute;
  z-index: var(--z-chrome);
  top: 32px;
  left: 22px;
  color: var(--ink-3);
}
.stage-rail-open:hover { background: var(--sunk); color: var(--ink); }
.shell.panel-open .stage-rail-open { top: 18px; }
.shell.rail-shut .stage-rail-open { display: inline-grid; }
.shell.rail-shut .stage-head { padding-left: 62px; }
.shell.rail-shut .panel { padding-left: 62px; }
/* A narrow window has no sidebar at all, hidden or not. */
@media (max-width: 860px) {
  .shell.rail-shut .stage-rail-open { display: none; }
  .shell.rail-shut .stage-head { padding-left: 32px; }
  .shell.rail-shut .panel { padding-left: 28px; }
}

/* Floating key and controls: rounded cards, no more. */
.legend, .controls { border-radius: 10px; }
.controls { gap: 4px; }
.controls .btn.small.icon { --btn-rule: transparent; }
.controls .btn.small.icon:hover { --btn-rule: transparent; --btn-bg: var(--sunk); }
.controls .more > summary { height: 28px; }
.controls .more-list { border-radius: 10px; }

/* The first-visit strip, in ink like the sidebar it points at. */
.coach { background: var(--ink-900); color: var(--on-ink-2); border: 0; padding: 12px 20px; }
.coach-steps li { color: var(--on-ink-2); }
.coach-t b { color: var(--on-ink); }
.coach-sub { color: var(--on-ink-2); }
.coach-n { background: var(--on-ink); color: var(--ink-900); font-family: var(--sans); font-weight: 700; }
.coach .btn { --btn-bg: var(--on-ink); --btn-ink: var(--ink-900); --btn-rule: var(--on-ink); font-weight: 600; }
.coach .btn:hover { --btn-bg: var(--sunk); --btn-rule: var(--sunk); }

/* ---- the inspector ------------------------------------------------------- */

.insp-head { background: var(--sheet); padding: 18px 20px 14px; }
.insp-head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.insp-head .id { font-family: var(--sans); font-size: var(--t-small); color: var(--ink-3); margin-top: 6px; }
.insp-head .kind-tag { margin-bottom: 10px; }
.insp-head .kind-tag .sw { width: 9px; height: 9px; border-radius: 2px; border: 1px solid; }
.insp-head .acts { gap: 2px; margin-top: 12px; }
.insp-head .acts .btn { --btn-bg: transparent; --btn-rule: transparent; --btn-ink: var(--ink-2); padding: 6px 9px; font-weight: 500; }
.insp-head .acts .btn:hover { --btn-bg: var(--sunk); --btn-ink: var(--ink); }
.insp-head .acts .btn.on { --btn-bg: var(--sunk); --btn-ink: var(--ink); }
.insp-sec h3, .brief-h, .legend .cap, .hs-name, .pal-group, .tp-label, .rail-head, .group-title {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3);
}
.chip {
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--sunk);
  font-size: var(--t-small);
}
.chip .k { color: var(--ink-2); }
.chip .v { font-weight: 600; color: var(--ink); }
.chip.is-high { background: var(--high-wash); } .chip.is-high .v { color: var(--high); }
.chip.is-med { background: var(--med-wash); } .chip.is-med .v { color: var(--med); }
.chip.is-ok { background: var(--ok-wash); } .chip.is-ok .v { color: var(--ok); }

/* ---- the pages -------------------------------------------------------------- */

.panel-head h1, .home-hero .hero-title, .atlas-h h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.panel-head h1 { font-size: 28px; line-height: 1.1; }
.home-hero .hero-title { font-size: 38px; line-height: 1.05; }
.atlas-h h2 { font-size: 20px; }
.home-h2 { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }

/* The numbers on the home page as tiles, the label above the number. */
.hero-facts { gap: 12px; border: 0; margin-top: 22px; }
.hero-fact {
  flex: 1 1 140px;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 16px 20px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
}
.hero-fact .hf-n { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.hero-fact .hf-k { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.hero-fact.is-bad .hf-n { color: var(--high); }
.hero-fact.is-warn .hf-n { color: var(--med); }

.start-card, .atlas-card, .pattern-card, .block-card, .gap-card, .flow-card, .make-row, .door-row,
.home-hit, .table-scroll, .palette-card, .rail-peek, .drawer, .cov-block, .chunk, .part, .tcard, .asm-devs {
  border-radius: var(--r-l);
}
.start-card { padding: 0 0 14px; overflow: hidden; }
.start-card .sc-thumb { border-radius: 0; }
.start-card .sc-title, .start-card .sc-why, .start-card .sc-n { padding: 0 16px; }
.start-card .sc-title { margin-top: 12px; color: var(--ink); }
.sc-title { font-weight: 700; }
.start-card:hover { border-color: var(--rule-3); background: var(--sheet); }
.atlas-card:hover { border-color: var(--rule-3); }
.door h2 { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.door-row.is-primary .dr-label { color: var(--ink); }
.door-row:hover { background: var(--sunk); border-color: transparent; }
.home-hit:hover { border-color: var(--rule-3); background: var(--sunk); }
.home-deck a { color: var(--accent-2); }
.mini { color: var(--accent-2); }
.table-chip.is-on { background: var(--ink-900); border-color: var(--ink-900); }

.palette-card { border-radius: 14px; }
.palette-card input { font-family: var(--sans); }
.toast { border-radius: 10px; }
.drawer-head h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }

/* ---- the home page, redrawn ---------------------------------------------
   The name and the lede with the three actions beside them; the numbers as
   tiles, a note under each; the spectrum with its own heading; four views to
   start from; then three panels, what the rules found, what is missing and
   what changed, each filled as its answer arrives; and the atlas. The three
   columns of links that used to be here repeated the sidebar. */

.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 6px 0 0; }
.home-head-text { min-width: 0; max-width: 760px; }
.home-eyebrow { margin: 0 0 8px; font-size: var(--t-small); font-weight: 500; color: var(--ink-3); }
.home-acts { display: flex; gap: 8px; flex: none; padding-bottom: 4px; }
/* The estates the demo publishes, over the head: tabs as the Checks page
   draws them, the one being read underlined, the others links to their own
   copy. Empty everywhere but the hosted copy, which has a file naming them. */
.home-estates { display: flex; align-items: flex-end; gap: 28px; margin: 0 0 30px; border-bottom: 1px solid var(--rule); }
.home-estates:empty { display: none; }
.he-lead { padding: 0 0 31px; font-size: var(--t-small); font-weight: 500; color: var(--ink-3); }
.home-estates .page-tab { cursor: default; }
.home-estates a.page-tab { cursor: pointer; text-decoration: none; }
.home-estates a.page-tab .pt-label { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-2); font-weight: 600; }
.home-estates a.page-tab:hover .pt-label { text-decoration: underline; }
.he-go { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .home-estates { flex-wrap: wrap; gap: 0 20px; }
  .he-lead { flex-basis: 100%; padding: 0 0 6px; }
}
.home-hero .hero-lede, .home-head .hero-lede { margin: 10px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hero-facts { margin-top: 26px; }
.hero-fact { flex-direction: column; justify-content: flex-start; gap: 4px; }
.hero-fact .hf-note { font-size: var(--t-small); color: var(--ink-3); }
.hero-fact .hf-note:empty { display: none; }

.spectrum-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 8px; }
.spectrum-head h2 { font-size: var(--t-body); font-weight: 700; }
.spectrum { margin: 0; }
.spectrum-bar { height: 12px; gap: 2px; border-radius: 4px; }
.spectrum-seg { border-radius: 2px; }

.home-sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 30px 0 12px; }
.home-sec-head .home-h2 { margin: 0; }
.start-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  margin: 28px 0 8px;
}
.home-panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.hp-title { margin: 0; font-family: var(--sans); font-size: var(--t-body); font-weight: 700; letter-spacing: 0; }
.hp-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--accent-2);
  cursor: pointer;
  white-space: nowrap;
}
.hp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.hp-row:hover { background: var(--panel); }
.hp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hp-desc { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.hp-note { font-size: var(--t-micro); color: var(--ink-3); }
.hp-bar { flex: none; width: 96px; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.hp-fill { display: block; height: 100%; border-radius: 3px; background: var(--med); }
.home-panel.is-gaps .hp-fill { background: var(--ink-3); }
.hp-row.is-bad .hp-fill { background: var(--high); }
.hp-row.is-bad .hp-desc { color: var(--high); }
.hp-count { flex: none; min-width: 52px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.hp-more, .hp-empty {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 16px 12px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: left;
}
.hp-more { color: var(--accent-2); cursor: pointer; font-weight: 500; }
.hp-commit { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--rule); }
.hp-date { flex: none; width: 74px; font-size: var(--t-micro); color: var(--ink-3); padding-top: 2px; }
.hp-subject { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.hp-sha { flex: none; font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); padding-top: 2px; }
.atlas-wrap { margin-top: 32px; }
@media (max-width: 1100px) {
  .home-head { flex-direction: column; align-items: flex-start; }
}

/* ---- the Checks page, and Flows -----------------------------------------
   Four checks under one head with a row of tabs, each tab saying in a line
   what it answers. Validate is a page now rather than a drawer: the totals
   and the rules on the left, the findings grouped by rule on the right.
   Flows is a page too: the flows on the left, the one chosen drawn as a
   sequence on the right, from the steps the model records. */

.page-head { display: flex; flex-direction: column; gap: 14px; padding: 0 0 0; margin: 0 0 20px; border-bottom: 1px solid var(--rule); }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-head-text { min-width: 0; max-width: 760px; }
.page-head h1 { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; }
.page-head .sub { margin: 6px 0 0; color: var(--ink-2); font-size: var(--t-body); text-wrap: pretty; }
.page-acts { display: flex; align-items: center; gap: 8px; flex: none; padding-bottom: 2px; }
.page-tabs { display: flex; gap: 24px; }
.page-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 12px;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
}
.page-tab:hover { color: var(--ink); }
.page-tab.is-on { color: var(--ink); border-bottom-color: var(--ink-900); }
.pt-label { font-size: 13.5px; font-weight: 500; }
.page-tab.is-on .pt-label { font-weight: 700; }
.pt-note { font-size: var(--t-micro); color: var(--ink-3); }

.checks-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .checks-cols { grid-template-columns: minmax(0, 1fr); } }
.checks-side { display: flex; flex-direction: column; gap: 16px; }
.checks-side .hero-facts { margin: 0; gap: 12px; }
.checks-side .hero-fact { flex: 1 1 120px; padding: 14px 16px; }
.checks-side .hero-fact .hf-n { font-size: 26px; }
.checks-rules .hp-row.is-on { background: var(--sunk); }
.checks-rules .hp-row.is-on .hp-desc { font-weight: 700; }
.checks-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.fgroup { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.fgroup-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}
.fgroup-head::-webkit-details-marker { display: none; }
.fgroup-head::before { content: "\25B8"; width: 10px; font-size: 10px; color: var(--ink-3); transition: transform 140ms var(--ease); }
.fgroup[open] > .fgroup-head::before { transform: rotate(90deg); }
.fg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--med); flex: none; }
.fgroup.is-bad .fg-dot { background: var(--high); }
.fg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fg-title { font-size: 13.5px; font-weight: 600; }
.fg-code { font-size: var(--t-micro); color: var(--ink-3); }
.fg-n { background: var(--med-wash); color: var(--med); }
.fg-n.is-bad { background: var(--high-wash); color: var(--high); }
.sb-badge.is-bad { background: var(--high); color: var(--on-ink); }
.fgroup .findings { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.fgroup .finding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 9px 16px 9px 44px;
  border-top: 1px solid var(--rule);
  background: none;
  border-radius: 0;
  margin: 0;
}
.fgroup .finding:first-child { border-top: 0; }
.fgroup .finding .code { display: none; }
.fgroup .finding .msg { font-size: var(--t-base); }
.fgroup .finding .where { grid-column: 2; grid-row: 1; font-size: var(--t-small); color: var(--accent-2); white-space: nowrap; }

.flows-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .flows-cols { grid-template-columns: minmax(0, 1fr); } }
.flows-list { display: flex; flex-direction: column; gap: 6px; }
.flow-pick {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 10px 12px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.flow-pick:hover { border-color: var(--rule-3); }
.flow-pick.is-on { background: var(--sunk); border-color: var(--rule-2); }
.fp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fp-name { font-size: var(--t-base); font-weight: 600; }
.fp-n { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.fp-trigger { font-size: var(--t-small); color: var(--ink-2); line-height: 1.4; }
.fp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--t-micro); color: var(--ink-3); }
.flows-stage { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.flow-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.flow-title { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.flow-top .flow-desc { flex-basis: 100%; margin: 0; font-size: var(--t-body); color: var(--ink-2); max-width: 80ch; }
.flow-sheet { overflow: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 12px; }
.seq { display: block; font-family: var(--sans); max-width: 100%; height: auto; }
.seq-part { cursor: pointer; }
.seq-part:hover rect, .seq-part:focus-visible rect { stroke-width: 2.4; }
.seq-part:focus-visible { outline: none; }
.seq-name { font-size: 12px; font-weight: 700; fill: var(--ink); }
.seq-life { stroke: var(--rule-2); stroke-width: 2; }
.seq-arrow { stroke: var(--ink-900); stroke-width: 1.6; }
.seq-arrow.is-dashed { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.seq-head { fill: var(--ink-900); }
.seq-num { fill: var(--ink-900); }
.seq-num-t { font-size: 10px; font-weight: 700; fill: var(--on-ink); }
.seq-label { font-size: 11.5px; font-weight: 500; fill: var(--ink-2); }
.flow-hops .flow-steps { margin-top: 6px; }
.flow-hops .brief-hint { margin-top: 10px; border: 0; padding: 0; }


/* The Library's shelves as tabs, under the page head. */
.lib-tabs { margin: -4px 0 18px; border-bottom: 1px solid var(--rule); }
.lib-tabs .page-tab { flex-direction: row; align-items: baseline; gap: 6px; }
.pt-count { font-size: var(--t-small); color: var(--ink-3); }
.lib-pane[hidden] { display: none; }
.pane-acts { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.pane-acts:empty { display: none; }

/* ---- Assemble as a stepper, and the Data page's list of types ------------
   The one button that writes sits in the head beside four steps read off
   the state. The kinds of thing are rows with a radio each; the landing
   zone is a row of segments; a picked part wears an ink border. The Data
   page lists its tables down the left, with the entity's own swatch, and
   names the table over the grid. */

.asm-head .page-head-row { align-items: flex-end; }
.asm-steps { display: flex; align-items: center; gap: 6px; padding: 0 0 14px; }
.asm-step { display: inline-flex; align-items: center; gap: 8px; }
.asm-step-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: var(--t-micro);
  font-weight: 700;
  background: var(--ink-900);
  color: var(--on-ink);
}
.asm-step.is-todo .asm-step-n { background: var(--sheet); color: var(--ink-3); border: 1px solid var(--rule-2); }
.asm-step-label { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.asm-step.is-on .asm-step-label { font-weight: 700; }
.asm-step.is-todo .asm-step-label { color: var(--ink-3); }
.asm-step-line { width: 28px; height: 1px; background: var(--rule-2); }

.kind-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; }
.kind-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.kind-row:hover { border-color: var(--rule-3); }
.kind-row.is-on { background: var(--accent-wash); border-color: var(--accent); }
.kind-dot { flex: none; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 1.2px solid var(--rule-2); background: var(--sheet); }
.kind-row.is-on .kind-dot { border: 4.5px solid var(--accent); }
.kind-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kind-name { font-size: 12.5px; font-weight: 600; }
.kind-note {
  font-size: var(--t-micro);
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.kind-row.is-on .kind-note { -webkit-line-clamp: unset; }

.zone-segs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.zone-seg {
  padding: 6px 10px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.zone-seg:hover { border-color: var(--rule-3); color: var(--ink); }
.zone-seg.is-on { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-ink); }

.chunk { border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); }
.chunk.is-on { border-color: var(--ink-900); box-shadow: inset 0 0 0 0.5px var(--ink-900); }
.chunk-name { font-weight: 600; }

.data-cols { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; flex: 1; min-height: 0; }
.data-types { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding-right: 4px; padding-bottom: 24px; }
.dt-group { margin: 10px 8px 4px; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.dt-group:first-child { margin-top: 0; }
.data-type {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: 7px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.data-type:hover { background: var(--sunk); }
.data-type.is-on { background: var(--sunk); }
.data-type.is-on .dt-name { font-weight: 600; }
.data-type.is-empty { opacity: 0.55; }
.dt-sw { flex: none; width: 10px; height: 10px; border-radius: 2px; border: 1px solid; }
.dt-sw.is-rel { width: 10px; height: 2px; border: 0; background: var(--rule-3); border-radius: 1px; }
.dt-name { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-type.is-rel .dt-name { color: var(--ink-2); }
.dt-n { flex: none; font-size: var(--t-micro); color: var(--ink-3); }
.data-main { min-height: 0; display: flex; flex-direction: column; }
.data-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.data-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.data-main .table-bar { border-top: 0; }

.kind-more { border: 0; padding: 4px 2px 0; font-size: var(--t-small); }

/* ---- the roadmap, as a roadmap -------------------------------------------
   Years over quarters, the current quarter lit down the sheet, each roadmap
   a band, each work package a bar in its status's own line style saying
   how many systems it builds and changes, the systems as chips under it. */

.tl-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; font-size: var(--t-small); color: var(--ink-2); }
.tl-key-item { display: inline-flex; align-items: center; gap: 7px; }
.tl-key-bar { width: 26px; height: 10px; border-radius: 3px; background: var(--ink-900); border: 1.5px solid var(--ink-900); }
.tl-key-bar.is-planned { background: var(--sheet); border-style: dashed; border-color: var(--ink-700); }
.tl-key-bar.is-proposed { background: var(--sheet); border-style: dotted; border-color: var(--ink-3); }
.tl-key-now { width: 14px; height: 14px; border-radius: 3px; background: var(--accent-wash); border: 1px solid var(--accent-wash-2); }
.tl-wrap { overflow: auto; }
.tl-grid {
  display: grid;
  gap: 0;
  align-items: stretch;
  margin: 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  overflow: hidden;
}
.tl-corner { border-bottom: 1px solid var(--rule); }
.tl-year {
  padding: 10px 0 2px;
  text-align: center;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-2);
  border-left: 1px solid var(--rule);
}
.tl-quarter {
  padding: 0 0 8px;
  text-align: center;
  font-size: var(--t-micro);
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--sunk);
}
.tl-quarter.is-year { border-left-color: var(--rule); }
.tl-quarter.is-now { color: var(--accent-2); font-weight: 700; background: var(--accent-wash); }
.tl-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px 6px;
  background: var(--page);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tl-section .name { font-size: var(--t-base); font-weight: 700; color: var(--ink); }
.tl-section .n { font-size: var(--t-micro); color: var(--ink-3); }
.tl-cell { min-height: 44px; border-left: 1px solid var(--sunk); }
.tl-cell.is-year { border-left-color: var(--rule); }
.tl-cell.is-now { background: var(--accent-wash); }
.tl-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 12px 6px 16px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tl-label .name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tl-label .st { font-size: var(--t-micro); color: var(--ink-3); }
.tl-label:hover .name { color: var(--accent-2); }
.tl-bar {
  position: relative;
  z-index: 1;
  align-self: center;
  height: 26px;
  margin: 0 6px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--ink-900);
  color: var(--on-ink);
  border: 1.5px solid var(--ink-900);
  border-radius: 7px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.tl-bar:hover { border-color: var(--accent); }
.tl-bar.is-planned { background: var(--sheet); color: var(--ink); border-style: dashed; border-color: var(--ink-700); }
.tl-bar.is-proposed { background: var(--sheet); color: var(--ink-2); border-style: dotted; border-color: var(--ink-3); }
.tl-bar.is-deprecated, .tl-bar.is-retired { opacity: 0.5; }
.tl-bar-text { overflow: hidden; text-overflow: ellipsis; }
.tl-under { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 10px 14px; }
.tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--sunk);
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: var(--t-micro);
  color: var(--ink-2);
  cursor: pointer;
}
.tl-chip:hover { background: var(--accent-wash); color: var(--ink); }
.tl-chip.is-more { background: none; color: var(--accent-2); font-weight: 500; }
.tl-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sys); flex: none; }
.tl-chip-dot.is-changes { background: transparent; border: 1.5px solid var(--sys); }

/* ---- on this view: pins, hides and the menu on a box ---------------------
   A pin and a hide are decisions about one drawing, so they are listed with
   the drawing's summary rather than tucked into its file; the menu is the
   inspector's buttons where the box is. */

.on-view { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.on-view-note { flex: 1 1 100%; margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }
.brief-pin { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--t-base); }
.brief-pin .bp-name {
  flex: 1; min-width: 0; padding: 0; background: none; border: 0;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brief-pin .bp-name:hover { color: var(--accent-2); }
.brief-pin.is-gone .bp-name { color: var(--ink-3); text-decoration: line-through; cursor: default; }
.brief-pin .bp-act { flex: none; }
.brief-add { margin-top: 12px; }
.toast .toast-act { margin-top: 8px; }

.ctx-menu {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 210px;
  max-width: 280px;
  padding: 4px;
  background: var(--sheet);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-float);
}
.ctx-menu .ctx-head {
  padding: 6px 10px 5px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-menu button {
  display: block; width: 100%;
  padding: 7px 10px;
  background: none; border: 0; border-radius: var(--r-s);
  font: inherit; font-size: var(--t-base); color: var(--ink);
  text-align: left; cursor: pointer;
}
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--accent-wash); outline: none; }
.ctx-menu .ctx-sep { height: 1px; margin: 4px 6px; background: var(--rule); }
.guide-changes { display: flex; flex-direction: column; gap: 10px; max-width: 72ch; }

/* ---- connecting two things ----------------------------------------------
   The chooser is the menu's box with a sentence per way the two can be
   joined; what is recorded already is listed under a rule, quieter. */

.connect-menu { min-width: 300px; max-width: 420px; max-height: min(70vh, 560px); overflow: auto; }
.connect-menu .connect-opt { display: flex; flex-direction: column; gap: 1px; }
.connect-menu .co-s { font-weight: 500; color: var(--ink); }
.connect-menu .co-h { font-size: var(--t-small); color: var(--ink-3); }
.connect-menu .connect-opt.is-done { cursor: default; }
.connect-menu .connect-opt.is-done .co-s { color: var(--ink-2); font-weight: 400; }
.connect-menu .connect-opt.is-done:hover { background: none; }
.connect-menu .connect-more { color: var(--accent-2); }
.connect-none, .connect-ask { margin: 4px 10px 8px; font-size: var(--t-base); color: var(--ink-2); line-height: 1.45; }
.connect-values { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; }
.connect-menu .connect-values .btn { width: auto; display: inline-flex; }
.connect-input {
  display: block; width: calc(100% - 20px); margin: 0 10px 8px; padding: 6px 8px;
  border: 1px solid var(--rule-2); border-radius: var(--r-s); font: inherit; font-size: var(--t-base);
}
.connect-input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.connect-acts { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 6px; }
.connect-menu .connect-acts .btn { width: auto; display: inline-flex; }
/* The menu's rule flattens every button in it; the answers here are buttons. */
.ctx-menu .connect-values .btn, .ctx-menu .connect-acts .btn {
  width: auto;
  padding: 4px 10px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-rule);
  border-radius: var(--r-s);
  font-size: var(--t-small);
}
.ctx-menu .connect-values .btn:hover, .ctx-menu .connect-acts .btn:hover { background: var(--sunk); }
/* The one answer that writes keeps the ink the menu's rule would flatten. */
.ctx-menu .connect-acts .btn.primary { color: var(--btn-ink); }
.ctx-menu .connect-acts .btn.primary:hover { background: var(--btn-bg); }

/* ---- moving a box into another boundary ----------------------------------
   The connect chooser's box, saying what a drop writes before it writes it:
   the field from and to, then the other drawings the box moves on. */

.regroup-change { margin: 2px 10px 8px; font-size: var(--t-base); color: var(--ink); line-height: 1.45; }
.regroup-change b { font-weight: 600; }
.regroup-where { margin: 0 10px 6px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.regroup-views {
  list-style: none; margin: 0 10px 10px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.regroup-views li { display: flex; flex-direction: column; gap: 1px; font-size: var(--t-base); }
.regroup-views .co-s { color: var(--ink); }
.regroup-views .co-h { font-size: var(--t-small); color: var(--ink-3); }

/* ---- the view composer ----------------------------------------------------
   The query as parts, each a card of choices; the drawing behind the panel is
   the preview. Plain words for every label, the file one click away. */

.composer-body { display: flex; flex-direction: column; gap: 12px; }
.cmp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cmp-top .explain { margin: 0; }
.cmp-sec {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
}
.cmp-h { margin: 0; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.cmp-hint { margin: 0; font-size: var(--t-small); color: var(--ink-3); line-height: 1.45; }
.cmp-hint.inline { display: inline; }
.cmp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmp-row.tight { gap: 6px; }
.cmp-k { flex: none; width: 112px; font-size: var(--t-small); color: var(--ink-2); }
.cmp-k.inline { width: auto; margin-left: 10px; }
.cmp-w { font-size: var(--t-base); color: var(--ink-2); }
.cmp-input, .cmp-select {
  padding: 5px 8px;
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  font: inherit;
  font-size: var(--t-base);
}
.cmp-input:focus, .cmp-select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.cmp-input.wide { flex: 1 1 260px; min-width: 0; }
.cmp-input.narrow { width: 76px; }
textarea.cmp-input { resize: vertical; line-height: 1.45; }
.cmp-select { max-width: 340px; padding: 4px 6px; }
.cmp-select.ghost { border-style: dashed; color: var(--accent-2); }
.cmp-clause {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  background: var(--panel);
  border-radius: var(--r-s);
}
.cmp-conds { display: flex; flex-direction: column; gap: 6px; padding-left: 120px; }
.cmp-conds:empty { display: none; }
.cmp-clause > .cmp-row.tight { padding-left: 120px; }
.cmp-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: relative; padding-right: 26px; }
/* The condition's own remove button, at its end and out of the run of values,
   so it does not read as removing the box that adds one. */
.cmp-cond > .cmp-cond-x { position: absolute; right: 0; top: 4px; }
.cmp-cond.is-raw span { color: var(--ink-2); }
.cmp-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cmp-chips:empty { display: none; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 2px 1px 9px;
  background: var(--accent-wash);
  color: var(--ink);
  border-radius: 999px;
  font-size: var(--t-small);
}
.cmp-x {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink-3); font-size: 15px; line-height: 1;
  cursor: pointer;
}
.cmp-x:hover { background: var(--sunk); color: var(--ink); }
.cmp-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.cmp-check { display: flex; align-items: center; gap: 8px; font-size: var(--t-base); color: var(--ink); }
.cmp-check input { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r-s); overflow: hidden; }
.seg-b {
  padding: 4px 10px;
  background: var(--sheet); color: var(--ink-2);
  border: 0; border-left: 1px solid var(--rule-2);
  font: inherit; font-size: var(--t-small);
  cursor: pointer;
}
.seg-b:first-child { border-left: 0; }
.seg-b.on { background: var(--ink-900); color: var(--on-ink); }
.seg-b:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The composer sits beside the sheet: the shell gives it the inspector's
   column, widened, and the drawing fits the rest. */
.drawer.composer { width: min(620px, 100vw); box-shadow: none; }
@media (min-width: 1241px) {
  .shell.composing { grid-template-columns: var(--rail) minmax(0, 1fr) min(620px, 100vw); }
  .shell.composing.rail-shut { grid-template-columns: 0 minmax(0, 1fr) min(620px, 100vw); }
  .shell.composing .inspector { visibility: hidden; }
  /* The strip keeps the name; the rest is the panel's to say while it is open. */
  .shell.composing #viewDesc, .shell.composing #viewMeta, .shell.composing .stage-acts { display: none; }
}

/* ---- tones: Stone and Graphite -------------------------------------------
   Drawn in the design file (its V2 frames) and built from it. The navy shell is gone: it read as every other generated
   dashboard. Two tones instead, chosen in the sidebar's foot and kept per
   browser. Stone is warm grays with a teal accent and a light sidebar a shade
   under the page; Graphite is neutral grays with an amber accent and a dark
   sidebar with no blue in it. In each the accent is the tone's system hue, so
   the commonest box on a drawing is the color the chrome already uses; the
   drawings themselves come from the engine's palette for the tone
   (50_ENGINE/terrane/palette.py), which an estate can override.

   Stone is :root, so a page paints in it before the script has run;
   Graphite overrides the same names. Everything above reads these names,
   so the tones are values, not a second set of rules. */

:root {
  --sheet: #ffffff;
  --panel: #faf8f4;
  --ground: #f6f4f0;
  --sunk: #ece8e1;
  --ink-900: #1c1917;
  --ink-800: #292524;
  --ink-700: #3a3531;
  --ink-line: #44403c;
  --on-ink: #ffffff;
  --on-ink-2: #d6d3d1;
  --on-ink-3: #a8a29e;
  --ink: #1c1917;
  --ink-2: #57534e;
  --ink-3: #6f6a63;
  --rule: #e4dfd5;
  --rule-2: #d6cfc2;
  --rule-3: #a69d8f;
  --accent: #0f766e;
  --accent-2: #0b5952;
  --accent-ink: #ffffff;
  --accent-wash: #dcede9;
  --accent-wash-2: #bfdcd5;
  --focus: #0f766e;
  --high: #b42318;
  --high-wash: #fbe9e6;
  --med: #9a6b12;
  --med-wash: #f7eed8;
  --ok: #2e7d4a;
  --ok-wash: #e3f0e4;
  --shadow-sheet: 0 1px 2px rgb(41 37 36 / 0.06), 0 8px 24px -14px rgb(41 37 36 / 0.20);
  --shadow-float: 0 1px 2px rgb(41 37 36 / 0.10), 0 12px 28px -12px rgb(41 37 36 / 0.28);

  /* The sidebar's own surfaces, a shade under the page in Stone. */
  --side-bg: #ece8e1;
  --side-line: #ddd7cc;
  --side-hover: #e3ded5;
  --side-sel: #dfd9ce;
  --side-ws: #e3ded5;
  --side-search: #f6f4f0;
  --side-text: #1c1917;
  --side-text-2: #57534e;
  --side-text-3: #78716a;
  --side-new: #1c1917;
  --side-new-ink: #ffffff;

  /* What the drawing code reads for the parts of a drawing the model does
     not color: the lines, their labels, the selection. */
  --draw-edge: #8a8174;
  --draw-edge-ink: #4a4238;
  --draw-label-bg: #ffffff;
  --draw-label-rule: #ddd7cc;
  --draw-select: #1c1917;
  --draw-hl: #3a3531;

  /* The illustrations on the cards: two inks and paper, as the design draws
     them. */
  --illo-plate: #f0ece4;
  --illo-dot: rgb(46 42 37 / 0.13);
  --illo-ink: #2e2a25;
  --illo-line: #6e655a;
  --illo-paper: #fffdf8;
  --illo-wash: #b7dad3;
  --illo-mute: #e1dacd;
  --illo-accent: #0f766e;
  --illo-label: rgb(46 42 37 / 0.28);
}

:root[data-tone="graphite"] {
  --panel: #fafaf8;
  --ground: #f5f5f2;
  --sunk: #ecebe6;
  --ink-900: #1f2023;
  --ink-800: #2a2b2f;
  --ink-700: #323438;
  --ink-line: #3a3c40;
  --on-ink-2: #c9c7c1;
  --on-ink-3: #8e8c86;
  --ink: #1c1d20;
  --ink-2: #4f5055;
  --ink-3: #66676c;
  --rule: #e4e3de;
  --rule-2: #d6d5cf;
  --rule-3: #a3a29c;
  --accent: #b45a0e;
  --accent-2: #8a4a0b;
  --accent-wash: #fae8d4;
  --accent-wash-2: #f4d2a8;
  --focus: #b45a0e;
  --high: #b3261e;
  --high-wash: #fbe8e6;
  --med: #8f7300;
  --med-wash: #f7f0d4;
  --ok: #187a4c;
  --ok-wash: #e1f1e8;
  --shadow-sheet: 0 1px 2px rgb(28 29 32 / 0.06), 0 8px 24px -14px rgb(28 29 32 / 0.22);
  --shadow-float: 0 1px 2px rgb(28 29 32 / 0.10), 0 12px 28px -12px rgb(28 29 32 / 0.30);

  --side-bg: #1f2023;
  --side-line: #313236;
  --side-hover: #2a2b2f;
  --side-sel: #323438;
  --side-ws: #2a2b2f;
  --side-search: #26272a;
  --side-text: #f2f1ee;
  --side-text-2: #c9c7c1;
  --side-text-3: #8e8c86;
  --side-new: #f2f1ee;
  --side-new-ink: #1f2023;

  --draw-edge: #85847e;
  --draw-edge-ink: #3e3f43;
  --draw-label-rule: #e0dfda;
  --draw-select: #1c1d20;
  --draw-hl: #323438;

  --illo-plate: #edece8;
  --illo-dot: rgb(31 32 35 / 0.13);
  --illo-ink: #1f2023;
  --illo-line: #5f5e59;
  --illo-paper: #ffffff;
  --illo-wash: #f4d2a8;
  --illo-mute: #dddbd4;
  --illo-accent: #c2600f;
  --illo-label: rgb(31 32 35 / 0.28);
}

/* A scrollbar the color of what it scrolls. The browser's default was a
   white bar on the navy sidebar. */
* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.rail, .rail * { scrollbar-color: var(--side-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.rail ::-webkit-scrollbar-thumb { background: var(--side-line); border: 2px solid transparent; background-clip: padding-box; }

/* ---- the sidebar, in the tone ---- */

.rail { background: var(--side-bg); color: var(--side-text-2); border-right: 1px solid var(--side-line); }
.sb-brand, .sb-mark { color: var(--side-text); }
.sb-mark svg path { stroke: var(--side-bg); }
.sb-icon { color: var(--side-text-3); }
.sb-icon:hover { background: var(--side-hover); color: var(--side-text); }
.sb-ws { background: var(--side-ws); }
.sb-ws-name { color: var(--side-text); }
.sb-ws-note { color: var(--side-text-3); }
.sb-search { background: var(--side-search); border-color: var(--side-line); color: var(--side-text-3); }
.sb-search:hover { border-color: var(--side-text-3); color: var(--side-text-2); }
.sb-search kbd { border-color: var(--side-line); color: var(--side-text-3); }
.sb-item { color: var(--side-text-2); }
.sb-item:hover { background: var(--side-hover); color: var(--side-text); }
.sb-item[aria-current="page"] { background: var(--side-sel); color: var(--side-text); }
/* Only errors earn a badge: they are what blocks a merge. A hundred and ten
   warnings in red beside the nav read as an alarm, which they are not. */
.sb-badge { background: var(--high); color: #ffffff; }
.sb-item[aria-current="page"] .sb-badge { background: var(--high); color: #ffffff; }
.sb-head { color: var(--side-text-3); letter-spacing: 0.02em; padding: 18px 16px 4px 22px; }
.shelf > summary { color: var(--side-text); font-weight: 500; }
.shelf > summary:hover { background: var(--side-hover); color: var(--side-text); }
.shelf > summary::before { color: var(--side-text-3); }
.shelf-n { color: var(--side-text-3); }
.viewlist button { color: var(--side-text-2); }
.viewlist button:hover { background: var(--side-hover); color: var(--side-text); }
.viewlist button[aria-current="true"] { background: var(--side-sel); color: var(--side-text); }
.vglyph, .viewlist button:hover .vglyph { color: var(--side-text-3); }
.viewlist button[aria-current="true"] .vglyph { color: var(--side-text); }
.viewlist button.broken .vcount { color: var(--med); }
/* Flows sit with the layers: a flow is a kind of diagram, drawn from the
   same connections, so it is listed where the diagrams are. */
.viewlist .shelf-flows {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  grid-template-columns: none;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--side-text);
}
.viewlist .shelf-flows::before { content: ""; width: 10px; }
.viewlist .shelf-flows .shelf-name { flex: 1; }
.viewlist .shelf-flows[aria-current="page"] { background: var(--side-sel); color: var(--side-text); }
.sb-foot { border-top-color: var(--side-line); }
.sb-new { --btn-bg: var(--side-new); --btn-ink: var(--side-new-ink); --btn-rule: var(--side-new); }
.sb-new:hover { --btn-bg: var(--side-text-2); --btn-rule: var(--side-text-2); }
.sb-new[aria-expanded="true"] { --btn-bg: var(--side-text-2); --btn-rule: var(--side-text-2); }
.sb-link { color: var(--side-text-3); }
.sb-link:hover, .sb-link[aria-current="page"] { color: var(--side-text); }

/* The tone switch: two swatches, the page's own colors in each. */
.tone-switch { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 999px; }
.tone-switch button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--side-line);
  cursor: pointer;
  display: grid;
  place-items: center;
  background: none;
}
.tone-switch button .tsw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 0.18);
}
.tone-switch button[data-tone="stone"] .tsw { background: linear-gradient(135deg, #ece8e1 0 50%, #0f766e 50% 100%); }
.tone-switch button[data-tone="graphite"] .tsw { background: linear-gradient(135deg, #1f2023 0 50%, #c2600f 50% 100%); }
.tone-switch button[aria-pressed="true"] { border-color: var(--side-text); box-shadow: 0 0 0 1px var(--side-text); }
.tone-switch button:hover { border-color: var(--side-text-2); }

/* The New menu: one list of everything that can be made, over the page,
   above the button that opened it. */
.new-menu {
  position: fixed;
  z-index: var(--z-popover);
  width: 360px;
  padding: 6px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.new-menu .nm-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.new-menu .nm-row:hover, .new-menu .nm-row:focus-visible { background: var(--ground); }
.new-menu .nm-row[disabled] { opacity: 0.5; cursor: not-allowed; }
.new-menu .nm-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--sunk);
  color: var(--ink);
}
.new-menu .nm-icon .i { width: 15px; height: 15px; }
.new-menu .nm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.new-menu .nm-title { font-weight: 600; font-size: var(--t-base); }
.new-menu .nm-desc { font-size: var(--t-small); color: var(--ink-2); line-height: 1.4; }
.new-menu .nm-rule { height: 1px; margin: 4px 6px; background: var(--rule); }

/* ---- the drawing's head ---- */

.stage-head { background: var(--ground); border-bottom: 1px solid var(--rule); min-height: 92px; padding: 14px 20px 14px 32px; }
.stage-title { flex-direction: column; align-items: flex-start; gap: 2px; }
.crumb { margin: 0; font-size: var(--t-small); color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.crumb button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); cursor: pointer; }
.crumb button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb .sep { color: var(--rule-3); }
.stage-head h1 { font-size: 22px; }
.stage-head .sub { max-width: 80ch; }
.stage-acts .btn { --btn-bg: var(--sheet); --btn-rule: var(--rule); }
.stage-acts .btn:hover { --btn-bg: var(--sunk); --btn-rule: var(--rule-2); }
.acts-menu { position: relative; }
.acts-menu > summary { list-style: none; }
.acts-menu > summary::-webkit-details-marker { display: none; }
.acts-menu .acts-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
}
.acts-menu .acts-list .btn {
  --btn-bg: transparent; --btn-rule: transparent;
  justify-content: flex-start;
  width: 100%;
  padding: 7px 10px;
}
.acts-menu .acts-list .btn:hover { --btn-bg: var(--ground); }
.acts-menu .acts-list .note { display: block; font-size: var(--t-micro); color: var(--ink-3); font-weight: 400; }

/* The sheet the drawing lies on, and its floating key and controls. */
.sheet { background: var(--ground); }
.legend, .controls { background: var(--sheet); border-color: var(--rule); }

/* The first-visit strip is gone: Help holds the same three steps, and a
   strip over every drawing was one more thing to read before the picture. */
.coach { display: none !important; }

/* ---- the Diagrams page: every diagram, by layer, as a picture ---- */

.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 0; }
.gallery-head h1 { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; }
.gallery-head .lede { margin: 10px 0 0; max-width: 62ch; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.gallery-head .acts { display: flex; gap: 8px; flex: none; padding-bottom: 2px; }
.gallery-head .btn { --btn-bg: var(--sheet); --btn-rule: var(--rule); }
.gallery-head .btn.primary { --btn-bg: var(--ink-900); --btn-rule: var(--ink-900); --btn-ink: var(--on-ink); }
.layer-tabs { display: flex; gap: 22px; margin: 24px 0 26px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.layer-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: inherit;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.layer-tab .n { font-size: var(--t-small); color: var(--ink-3); font-weight: 400; }
.layer-tab:hover { color: var(--ink); }
.layer-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding-bottom: 32px; }
.gcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 14px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease);
}
.gcard:hover { border-color: var(--rule-2); box-shadow: var(--shadow-sheet); transform: translateY(-1px); }
.gcard .g-title { margin: 10px 8px 0; font-weight: 600; font-size: var(--t-body); }
.gcard .g-desc {
  margin: 0 8px;
  font-size: var(--t-base);
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard .g-meta { margin: 4px 8px 0; font-size: var(--t-small); color: var(--ink-3); }
.gcard.is-broken { cursor: default; }
.gcard.is-broken .g-meta { color: var(--med); }
.gallery-foot { margin: 0 0 24px; font-size: var(--t-small); color: var(--ink-3); }
.gallery-foot a { color: var(--accent-2); }

/* The pictures: drawn, not shot. Two inks and paper on a dotted plate, an
   offset shadow under what matters, one accent per picture where the eye
   should go. The same set at every size and in either tone. */
.illo { display: block; width: 100%; aspect-ratio: 330 / 176; border-radius: 6px; background: var(--illo-plate); overflow: hidden; }
.illo svg { display: block; width: 100%; height: 100%; }
.illo .p { fill: var(--illo-paper); stroke: var(--illo-ink); }
.illo .w { fill: var(--illo-wash); stroke: var(--illo-ink); }
.illo .m { fill: var(--illo-mute); stroke: var(--illo-ink); }
.illo .a { fill: var(--illo-accent); stroke: var(--illo-ink); }
.illo .k { fill: var(--illo-ink); }
.illo .bare { stroke: none; }
.illo .mute { fill: var(--illo-mute); }
.illo .lbl { fill: var(--illo-label); }
.illo .on { fill: var(--illo-paper); }
.illo .ln { fill: none; stroke: var(--illo-line); stroke-linecap: round; stroke-linejoin: round; }
.illo .ik { fill: none; stroke: var(--illo-ink); stroke-linecap: round; stroke-linejoin: round; }
.illo .al { fill: none; stroke: var(--illo-accent); stroke-linecap: round; }
.illo .dots { fill: url(#il-dots); }
#il-dots rect { fill: var(--illo-dot); }

/* ---- Flows ---- */

.flows-head { padding: 18px 0 22px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.flows-head h1 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.flows-head .lede { margin: 10px 0 0; max-width: 66ch; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.flows-head .btn.primary { --btn-bg: var(--ink-900); --btn-rule: var(--ink-900); --btn-ink: var(--on-ink); flex: none; }
.flows-cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.flows-list { display: flex; flex-direction: column; gap: 4px; }
.flow-pick {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.flow-pick:hover { background: var(--sunk); }
.flow-pick.is-on { background: var(--sunk); }
.flow-pick .fp-name { font-weight: 600; }
.flow-pick .fp-meta { font-size: var(--t-small); color: var(--ink-3); }
.flow-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.flow-top h2 { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.flow-top .flow-desc { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-base); max-width: 70ch; }
.flow-top .acts { display: flex; gap: 8px; flex: none; }
.flow-top .btn { --btn-bg: var(--sheet); --btn-rule: var(--rule); }
.flow-sheet { background: var(--illo-plate); border: 1px solid var(--rule); border-radius: 10px; padding: 0; overflow-x: auto; }
.flow-sheet svg { display: block; }
.seq .dots { fill: url(#il-dots); }
.seq .life { stroke: var(--illo-line); stroke-width: 1.25; stroke-dasharray: 4.5 4.5; stroke-linecap: round; }
.seq .head { stroke-width: 1.5; }
.seq .shade { fill: var(--illo-ink); }
.seq .head-name { font: 600 11px/1.25 var(--sans); }
.seq .act { fill: var(--illo-wash); stroke: var(--illo-ink); stroke-width: 1.25; }
.seq .msg { stroke: var(--illo-ink); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.seq .msg.async { stroke-dasharray: 6 4; }
.seq .tip { fill: var(--illo-ink); }
.seq .num { fill: var(--illo-ink); }
.seq .num-t { fill: var(--illo-paper); font: 600 10px var(--sans); }
.seq .how { fill: var(--illo-ink); font: 500 11px var(--sans); }
.flow-steps-h { margin: 22px 0 6px; font-weight: 600; font-size: var(--t-body); }
.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-base); }
.flow-steps .n { color: var(--ink-3); font-size: var(--t-small); }
.flow-steps .hop { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.flow-steps .hop:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.flow-steps .arrow { color: var(--ink-3); margin: 0 8px; }
.flow-steps .proto { color: var(--ink-3); font-size: var(--t-small); }
@media (max-width: 1100px) { .flows-cols { grid-template-columns: 1fr; } }
.acts-menu .acts-list .btn { flex-direction: column; align-items: flex-start; gap: 1px; }
.stage-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Patterns the pictures share, kept out of the layout but not display:none,
   which some browsers take to mean the pattern does not exist. */
.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The page is a flex column that scrolls; a child that scrolls on its own
   axis would otherwise shrink to nothing under a tall gallery, which is
   what happened to the layer tabs. */
.gallery-head, .layer-tabs, .gallery, .gallery-foot, .flows-head, .flows-cols { flex: none; }
/* A long title gives way to the actions and the counts rather than running
   into them: "Installment Lending — Onboarding" wrote its kind tag over its
   node count. */
.stage-title { flex: 1 1 auto; min-width: 0; }
.stage-title-row { max-width: 100%; }
.stage-title-row h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-title-row .kind-tag { flex: none; }
.stage-meta { flex: none; white-space: nowrap; }

/* ---- frameworks: the lens on the map, and the matrix ----------------------
   The marks are categorical, one color per framework, in the tone's own
   hues; the counts in the matrix are capabilities, so they wear the tone's
   capability hue. */

:root {
  --mark-0: #0f766e; --mark-1: #b4532a; --mark-2: #7a4a87; --mark-3: #56781e;
  --mark-4: #9a6b12; --mark-5: #4b53a0; --mark-6: #a8474a; --mark-7: #2a6496;
  --cap-fill: #e6d7ea; --cap-stroke: #7a4a87;
}
:root[data-tone="graphite"] {
  --mark-0: #b45a0e; --mark-1: #2f57b8; --mark-2: #187a4c; --mark-3: #6b45b8;
  --mark-4: #b3261e; --mark-5: #16707a; --mark-6: #b0306e; --mark-7: #8f7300;
  --cap-fill: #e4daf6; --cap-stroke: #6b45b8;
}

/* Inside the tile, out of its flow: a tile keeps the size the Python
   layout is held equal to. */
.tile[data-marks] { position: relative; }
.tile-marks { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; pointer-events: none; }
.tile-marks i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--mc); box-shadow: 0 0 0 1px var(--sheet); }
.tile-marks i.is-other, #tiles[data-lens="none"] .tile-marks { display: none; }
.tile.is-lens-off { opacity: 0.25; }

.lens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lens-tag { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.lens-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
}
.lens-pill > span:first-of-type, .lens-pill > span:not(.n) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lens-pill .n { color: var(--ink-3); font-size: var(--t-micro); }
.lens-pill .lens-sw { width: 8px; height: 8px; border-radius: 2px; background: var(--mc); flex: none; }
.lens-pill:hover { border-color: var(--rule-2); color: var(--ink); }
.lens-pill[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-ink); }
.lens-pill[aria-pressed="true"] .n { color: var(--on-ink-2); }

.matrix-host { overflow: auto; padding: 4px 0 24px; }
.matrix { border-collapse: collapse; width: 100%; min-width: 980px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.matrix th, .matrix td { padding: 0 8px; height: 30px; border-bottom: 1px solid var(--rule); font-size: var(--t-base); }
.matrix thead th { height: 58px; vertical-align: bottom; padding-bottom: 8px; background: var(--panel); }
.matrix .mx-head { text-align: center; width: 84px; }
.matrix .mx-head button, .matrix .mx-head > span { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.matrix .mx-head > span { cursor: default; }
.matrix .mx-head button:hover .mx-col { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.matrix .mx-col { font-weight: 600; font-size: var(--t-small); line-height: 1.15; }
.matrix .mx-kind { font-size: var(--t-micro); color: var(--ink-3); font-weight: 400; }
.matrix .mx-name { text-align: left; white-space: nowrap; }
.matrix th.mx-name { font-weight: 600; color: var(--ink-2); font-size: var(--t-small); }
.matrix .mx-row { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.matrix .mx-row:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.matrix .mx-size { margin-left: 6px; font-size: var(--t-micro); color: var(--ink-3); }
.matrix .mx-total { text-align: right; font-weight: 600; width: 64px; }
.matrix .mx-group td { height: 34px; padding-top: 10px; font-weight: 700; font-size: var(--t-small); color: var(--ink); background: var(--sheet); }
.matrix .mx-cell { text-align: center; white-space: nowrap; }
.matrix tbody tr:not(.mx-group):hover td { background: var(--panel); }
.matrix .mx-foot td { font-weight: 600; color: var(--ink-2); border-bottom: 0; }
.mx-none { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--rule-2); vertical-align: middle; }
.mx-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin: 0 3px; }
.mx-mark.is-governed { background: var(--ink); }
.mx-mark.is-aligned { background: var(--sheet); box-shadow: inset 0 0 0 1.75px var(--ink); }
.mx-mark.is-informed { background: var(--sheet); box-shadow: inset 0 0 0 1.75px var(--rule-3); }
.mx-count {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  line-height: 16px;
  border-radius: 8px;
  border: 1px solid var(--cap-stroke);
  background: color-mix(in srgb, var(--cap-fill) 55%, white);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  vertical-align: middle;
  margin: 0 3px;
}
button.mx-count { cursor: pointer; }
button.mx-count:hover { box-shadow: 0 0 0 2px var(--cap-fill); }
.mx-count.is-mid { background: var(--cap-fill); }
.mx-count.is-deep { background: color-mix(in srgb, var(--cap-stroke) 45%, var(--cap-fill)); }
.mx-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 2px 0; font-size: var(--t-small); color: var(--ink-2); }

/* ---- the sidebar's submenus, a layer's page, and Home ---------------------- */

/* The chevron is its own target: it opens and closes a layer, while the
   layer's name opens the layer's page. */
.viewlist .shelf > summary::before { content: none; }
.shelf-chev {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: -4px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  color: var(--side-text-3);
}
.shelf-chev::before { content: "\25B8"; font-size: 9px; transition: transform 140ms var(--ease); }
.shelf[open] > summary .shelf-chev::before { transform: rotate(90deg); }
.shelf-chev:hover { background: var(--side-sel); color: var(--side-text); }
.shelf > summary.is-here { background: var(--side-sel); }
.shelf-body { padding: 0 0 4px; }
.sub-shelf > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 30px;
  border-radius: var(--r-m);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--side-text-2);
  cursor: pointer;
  list-style: none;
}
.sub-shelf > summary::-webkit-details-marker { display: none; }
.sub-shelf > summary::before { content: "\25B8"; width: 8px; font-size: 8px; color: var(--side-text-3); transition: transform 140ms var(--ease); }
.sub-shelf[open] > summary::before { transform: rotate(90deg); }
.sub-shelf > summary:hover { background: var(--side-hover); color: var(--side-text); }
.sub-shelf > summary .shelf-n { margin-left: auto; }
.sub-shelf .sub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-shelf > ul { margin: 0 0 4px; padding: 0; list-style: none; }
.sub-shelf .viewlist button, .viewlist .sub-shelf button { padding-left: 44px; }

.gallery-sec { margin: 6px 0 12px; font-family: var(--sans); font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.gallery-sec ~ .gallery { padding-bottom: 28px; }

.start-head h1 { font-size: 38px; }
.start-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 14px; }
.start-sec h2 { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.start-recent { padding-bottom: 0; }
.start-layers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.start-layer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.start-layer:hover { border-color: var(--rule-2); box-shadow: var(--shadow-sheet); }
.start-layer .sl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: var(--t-body); }
.start-layer .sl-n { font-size: var(--t-small); color: var(--ink-3); font-weight: 400; }
.start-layer .sl-what { font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.start-model { margin: 0 0 32px; font-size: var(--t-body); color: var(--ink-2); }
.start-model .hp-link { font-size: var(--t-body); }
.start-dot { color: var(--ink-3); }
/* The grid fits the page: the names their width, the frameworks share the
   rest, a long name wraps in its column. */
.matrix { min-width: 0; table-layout: fixed; }
.matrix th.mx-name { width: 280px; }
.matrix th.mx-total, .matrix td.mx-total { width: 58px; }
.matrix .mx-head { width: auto; padding: 0 3px 8px; }
.matrix .mx-col { font-size: var(--t-micro); }
.matrix td.mx-name { overflow: hidden; text-overflow: ellipsis; }
/* Where a capability is placed now, above the form that places it again. */
.placed-now { margin: 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--ink-2); }
.placed-now li { padding: 3px 0; }
.placed-now strong { color: var(--ink); font-weight: 600; }
/* The subject bar says what a drawing is drawn for in sentence case: it was a
   9px capitalized "subject" over the parameter's own name. */
.subject-bar .subject-tag { text-transform: none; letter-spacing: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.subject-bar .sp-name { font-family: inherit; font-size: var(--t-small); color: var(--ink-3); }

/* ---- Settings ---------------------------------------------------------------
   Drawn from the V3 Settings frames in design/architecture-model.pen: a page
   head, tabs, a main column and a quiet side column of what it means. */
.settings { display: flex; flex-direction: column; min-height: calc(100vh - 66px); }
.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 0; }
.st-head h1 { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.st-head .crumb + h1 { margin-top: 6px; font-size: 28px; }
.st-head .lede { margin: 10px 0 0; max-width: 64ch; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.st-tabs { display: flex; gap: 22px; margin: 22px 0 0; border-bottom: 1px solid var(--rule); }
.st-tab { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 0 10px; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: var(--t-body); font-weight: 500;
  color: var(--ink-2); cursor: pointer; }
.st-tab .n { font-size: var(--t-small); color: var(--ink-3); font-weight: 400; }
.st-tab:hover { color: var(--ink); }
.st-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.st-body { display: flex; gap: 40px; padding: 26px 0 28px; align-items: flex-start; flex: 1; }
.st-body.flow { padding-top: 16px; }
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.st-side { width: 300px; flex: none; padding-left: 24px; border-left: 1px solid var(--rule); display: flex;
  flex-direction: column; gap: 14px; }
.st-side h2, .st-sec-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.st-sec-head { display: flex; flex-direction: column; gap: 4px; }
.st-sec-head.row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; }
.st-lede { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.st-hint { color: var(--ink-3); font-size: var(--t-small); line-height: 1.5; margin: 0; }
.st-hint.pad { padding: 16px 18px; }
.st-rule { height: 1px; background: var(--rule); margin: 2px 0; }
.st-note-block { display: flex; flex-direction: column; gap: 6px; }
.st-note-block h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.st-note-block.accent h3 { color: var(--accent-2); }
.st-note-block h3 .i { width: 15px; height: 15px; }
.st-note-block p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.st-callout { margin: 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--sunk); border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.st-callout p { margin: 0; }
.st-callout.ok { background: var(--accent-wash); border-color: var(--accent-wash); color: var(--accent-2); }
.st-callout.warn { background: var(--med-wash); border-color: var(--med-wash); color: var(--ink); }
.st-foot { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: var(--t-small); }
.st-foot .i { width: 14px; height: 14px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.linkish.small { font-size: var(--t-small); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 168px;
  border-radius: 12px; background: var(--sunk); border: 1.5px dashed var(--rule-2); cursor: pointer; text-align: center;
  color: var(--ink); }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--accent); background: var(--accent-wash); outline: none; }
.drop strong { font-size: 14px; font-weight: 600; }
.drop-badge { width: 44px; height: 44px; border-radius: 22px; background: var(--accent-wash); color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center; }
.drop-badge .i { width: 20px; height: 20px; }
.drop-or { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; }
.drop-hint { color: var(--ink-3); font-size: 12px; }
.src-list { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.src-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.src-row + .src-row { border-top: 1px solid var(--rule); }
.src-icon { width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--sunk); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; }
.src-icon .i { width: 18px; height: 18px; }
.src-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.src-top { display: flex; align-items: center; gap: 8px; }
.src-top strong { font-size: 14px; font-weight: 600; }
.kind-chip { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; background: var(--sunk); color: var(--ink-2); }
.kind-chip.accent { background: var(--accent-wash); color: var(--accent-2); }
.src-files { color: var(--ink-3); font-size: 12px; }
.src-what { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.src-state { width: 150px; flex: none; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-3); }
.src-state strong { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.src-state strong.ok { color: var(--accent-2); }
.src-acts { display: flex; gap: 8px; flex: none; }
.src-acts .btn .i, .src-bar .btn .i { width: 14px; height: 14px; }
.src-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0 0 4px; flex: none; }
.src-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px;
  background: var(--sunk); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.src-steps li + li { margin-left: 20px; position: relative; }
.src-steps li + li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 14px; height: 1.5px; background: var(--rule); }
.src-steps .num { width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rule); font-size: 11px; font-weight: 700; }
.src-steps .num .i { width: 12px; height: 12px; }
.src-steps li.done { background: var(--accent-wash); color: var(--accent-2); }
.src-steps li.done .num { background: var(--accent-2); color: var(--sheet); }
.src-steps li.now { background: var(--ink-900); color: var(--on-ink); }
.src-steps li.now .num { background: var(--on-ink); color: var(--ink-900); }
.src-each { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; flex-wrap: wrap; }
.src-select { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-2);
  border-radius: 7px; padding: 5px 8px; max-width: 100%; }
.src-select.strong { font-size: 13.5px; font-weight: 600; padding: 6px 10px; }
.src-select.out { color: var(--ink-3); background: transparent; border-color: var(--rule); }
.src-select.open { border: 1.5px solid var(--accent); color: var(--accent-2); font-weight: 600; }
.src-select.small { font-size: 12px; padding: 3px 6px; margin-top: 4px; }
.src-table { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.src-tr { display: grid; grid-template-columns: 170px minmax(0, 1fr) 300px; gap: 16px; align-items: center; padding: 8px 16px; }
.src-tr + .src-tr { border-top: 1px solid var(--rule); }
.src-tr.head { background: var(--sunk); color: var(--ink-3); font-size: 11.5px; font-weight: 600; padding-top: 9px; padding-bottom: 9px; }
.src-tr > strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.src-sample { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.src-goes { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.src-pick { display: flex; align-items: center; gap: 8px; width: 100%; }
.src-pick .src-select { flex: 1; min-width: 0; }
/* Offered on the row in hand, not under every select: a column filling two
   fields is the exception. Still reached by Tab, and shown when it is. */
.src-goes .linkish.small { opacity: 0; transition: opacity 0.12s; }
.src-tr:hover .src-goes .linkish.small, .src-goes .linkish.small:focus-visible { opacity: 1; }
.match-chip { flex: none; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; background: var(--accent-wash); color: var(--accent-2); }
.needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.needs li { display: flex; gap: 9px; align-items: flex-start; }
.needs .tick { width: 18px; height: 18px; flex: none; border-radius: 9px; background: var(--accent-wash); color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center; }
.needs .tick .i { width: 11px; height: 11px; }
.needs li.missing .tick { background: var(--med-wash); color: var(--ink); }
.needs li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.needs strong { font-size: 13px; font-weight: 600; }
.needs span { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.needs span.warn { color: var(--ink-2); }
.st-also { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.st-also h3 { margin: 0; font-size: 13px; font-weight: 600; }
.st-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.st-check input { margin-top: 3px; accent-color: var(--ink-900); }
.word-card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.word-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; background: var(--sunk); }
.word-head strong { font-size: 13.5px; font-weight: 700; }
.word-head span { color: var(--ink-3); font-size: 12.5px; }
.word-row { display: flex; align-items: center; gap: 14px; padding: 7px 16px; border-top: 1px solid var(--rule); }
.word-row.open { background: var(--accent-wash); }
.word-row .word { width: 180px; flex: none; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.word-row .rows { width: 70px; flex: none; font-size: 12px; color: var(--ink-3); }
.word-row .i { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.word-row .src-select { width: 220px; flex: none; }
.word-row .same { color: var(--ink-3); font-size: 12.5px; }
.word-row .waits { color: var(--accent-2); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-word { border-radius: 999px; padding: 3px 9px; background: var(--sunk); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.figs { display: flex; gap: 12px; }
.fig { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 10px;
  background: var(--sheet); border: 1px solid var(--rule); }
.fig.accent { background: var(--accent-wash); border-color: var(--accent-wash); color: var(--accent-2); }
.fig-top { display: flex; align-items: baseline; gap: 8px; }
.fig-top strong { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.1; }
.fig-top span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fig.accent .fig-top span, .fig.accent .fig-sub { color: var(--accent-2); }
.fig-sub { font-size: 12px; color: var(--ink-3); }
.added { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.added-head { padding: 9px 16px; background: var(--sunk); font-size: 12.5px; font-weight: 700; }
.added-row { display: grid; grid-template-columns: 13px 210px 190px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 6px 16px; border-top: 1px solid var(--rule); font-size: 12.5px; }
.added-row .i { width: 13px; height: 13px; color: var(--accent-2); }
.added-row .nm { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.added-row .bits { color: var(--ink-2); }
.added-row .own { color: var(--ink-3); overflow-wrap: anywhere; }
.added-row.more { display: block; color: var(--ink-3); }
.src-notes { display: flex; flex-direction: column; gap: 4px; }
.src-notes h3 { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.src-notes p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.found { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.found li.error { color: var(--high); }
.st-keep { display: flex; flex-direction: column; gap: 8px; }
.st-input { font: inherit; font-size: 13px; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule-2);
  border-radius: 7px; padding: 7px 10px; }
.st-input:disabled { color: var(--ink-3); background: transparent; }
.src-bar { position: sticky; bottom: 0; box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.18); display: flex; align-items: center; gap: 10px; padding: 14px 0 18px;
  border-top: 1px solid var(--rule); background: var(--ground); margin-top: auto; }
.src-bar .grow { flex: 1; }
.facts { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.tones { display: flex; gap: 14px; flex-wrap: wrap; }
.tone-card { width: 240px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 14px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); font: inherit; color: var(--ink-2);
  font-size: 12.5px; cursor: pointer; }
.tone-card strong { color: var(--ink); font-size: 14px; }
.tone-card[aria-pressed="true"] { border: 2px solid var(--accent); padding: 13px; }
.tone-strip { display: flex; width: 100%; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.tone-strip i { flex: 1; }
.tone-card.t-stone .tone-strip i:nth-child(1) { background: #ece8e1; }
.tone-card.t-stone .tone-strip i:nth-child(2) { background: #f6f4f0; }
.tone-card.t-stone .tone-strip i:nth-child(3) { background: #0f766e; }
.tone-card.t-stone .tone-strip i:nth-child(4) { background: #1c1917; }
.tone-card.t-graphite .tone-strip i:nth-child(1) { background: #1f2023; }
.tone-card.t-graphite .tone-strip i:nth-child(2) { background: #f5f5f2; }
.tone-card.t-graphite .tone-strip i:nth-child(3) { background: #b45309; }
.tone-card.t-graphite .tone-strip i:nth-child(4) { background: #2a2b2f; }
.sb-foot-links { display: flex; flex-direction: column; gap: 2px; }
.sb-foot-links .sb-link { width: 100%; justify-content: flex-start; padding: 6px 8px; border-radius: 6px; }
.sb-foot-links .sb-link[aria-current="page"] { background: var(--side-sel); color: var(--side-text); font-weight: 600; }
@media (max-width: 1100px) {
  .st-body { flex-direction: column; }
  .st-side { width: auto; padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; }
  .src-tr { grid-template-columns: 140px minmax(0, 1fr) 220px; }
}

/* ---- the canvas: a diagram drawn by placing things ----
   Designed as the V4 canvas frames in design/architecture-model.pen. The
   sheet is a plate with the tools floating over it; the details of what is
   selected take the inspector's column. */

.shell.canvas-mode #inspIdle, .shell.canvas-mode #inspBody,
.shell.canvas-mode #btnInspClose { display: none !important; }
.shell.canvas-mode #sketchBar, .shell.canvas-mode #subjectBar, .shell.canvas-mode #focusBar,
.shell.canvas-mode #btnEditView, .shell.canvas-mode #actsMenu, .shell.canvas-mode #legend { display: none !important; }
.shell.canvas-mode .sheet { margin: 20px; border: 1px solid var(--rule); border-radius: 10px; background: var(--illo-plate); }
.shell.canvas-mode .canvas { background-image: none; }

.cv-tools {
  position: absolute; top: 16px; left: 16px; z-index: var(--z-chrome);
  display: flex; align-items: center; gap: 4px; padding: 5px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-float);
}
.cv-tools[hidden] { display: none; }
.cv-tools .sep { width: 1px; height: 22px; background: var(--rule); margin: 0 4px; }
.cv-tools .cv-add { --btn-bg: var(--ink-900); --btn-rule: var(--ink-900); --btn-ink: var(--on-ink); font-weight: 600; padding: 6px 12px; }
.cv-tools .cv-add .i, .cv-tool .i { width: 15px; height: 15px; }
.cv-tool {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: none; border: 0; border-radius: 7px; font: inherit; font-size: var(--t-base); color: var(--ink-2); cursor: pointer;
}
.cv-tool:hover { background: var(--ground); color: var(--ink); }
.cv-tool[aria-pressed="true"] { background: var(--sunk); color: var(--ink); font-weight: 500; }
.cv-hint {
  position: absolute; top: 66px; left: 16px; z-index: var(--z-chrome); margin: 0; max-width: 420px;
  padding: 6px 10px; border-radius: 7px; background: var(--ink-900); color: var(--on-ink); font-size: var(--t-small);
}
.cv-hint[hidden] { display: none; }

.cv-chips { position: absolute; top: 16px; right: 16px; z-index: var(--z-chrome); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cv-chips[hidden] { display: none; }
.cv-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; cursor: pointer;
  background: var(--sheet); border: 1.5px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow-sheet);
  font: inherit; color: var(--ink);
}
.cv-chip > .i { width: 15px; height: 15px; color: var(--accent-2); }
.cv-chip .n { font-weight: 700; font-size: var(--t-base); }
.cv-chip .k { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-2); font-size: var(--t-small); font-weight: 600; }
.cv-chip .k .i { width: 12px; height: 12px; }
.cv-chip.is-on { box-shadow: 0 0 0 3px var(--accent-wash-2); }

.cv-fold {
  display: inline-flex; align-items: center; gap: 14px; padding: 7px 10px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-float);
  font-size: var(--t-base); color: var(--ink-2);
}
.cv-fold[hidden] { display: none; }
/* Beside the zoom, which it pushes nothing away from: the two are one
   cluster of what the sheet is showing and how. */
.cv-layout {
  margin-left: auto; align-self: stretch; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-float);
  font-size: var(--t-base); color: var(--ink-2); white-space: nowrap;
}
.cv-layout[hidden] { display: none; }
/* Under the sheet, V14's status bar: a strip, not a card, the sheet's
   margin above it given to it. */
.cv-status {
  display: flex; align-items: center; gap: 16px; min-height: 40px; margin: 0 20px; padding: 0 2px;
  font-size: var(--t-small); color: var(--ink-2); white-space: nowrap;
}
.cv-status[hidden], .shell:not(.canvas-mode) .cv-status { display: none; }
.shell.canvas-mode .sheet:has(+ .cv-status:not([hidden])) { margin-bottom: 0; }
.cv-status .cv-layout { margin: 0; align-self: auto; padding: 0; background: none; border: 0; box-shadow: none;
  font-size: var(--t-small); }
.cv-status .cv-layout .sep { height: 14px; }
.cv-status-gap { flex: 1; }
.cv-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-2); font: inherit; cursor: pointer;
}
.cv-toggle:hover { background: var(--sunk); color: var(--ink); }
.cv-toggle[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-2); }
.cv-toggle .i { width: 14px; height: 14px; }
.cv-count { display: inline-flex; align-items: center; gap: 6px; }
.cv-locked { display: flex; align-items: center; gap: 6px; }
.cv-locked .i { width: 13px; height: 13px; flex: none; }
.cv-status { position: relative; }
.cv-toggle kbd, .cv-keys kbd {
  display: inline-block; min-width: 16px; padding: 0 4px; border: 1px solid var(--rule-2); border-bottom-width: 2px;
  border-radius: 4px; background: var(--sheet); font: 600 11px/15px var(--sans); color: var(--ink); text-align: center;
}
/* Every key the canvas takes, over the status bar's corner. */
.cv-keys {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: var(--z-overlay); width: 660px; max-width: calc(100vw - 48px);
  padding: 14px 16px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px 22px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-float);
  white-space: normal; color: var(--ink-2);
}
.cv-keys[hidden] { display: none; }
.cv-keys h3 { margin: 0 0 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.cv-keys dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; }
.cv-keys dt { margin: 0; white-space: nowrap; }
.cv-keys dd { margin: 0; }
.cv-count .i { width: 14px; height: 14px; color: var(--ink-3); }
.cv-layout > .i { width: 14px; height: 14px; }
.cv-layout .k { color: var(--ink); font-weight: 600; }
.cv-layout .sep { width: 1px; height: 18px; background: var(--rule); }
.cv-again { display: inline-flex; align-items: center; gap: 5px; }
.cv-again .i { width: 13px; height: 13px; }
.cv-guide { position: absolute; z-index: var(--z-overlay); pointer-events: none; background: var(--accent); }
.cv-guide.is-x { width: 1px; }
.cv-guide.is-y { height: 1px; }
.cv-guide[hidden] { display: none; }
/* An equal gap measured, V14's red: a run with a tick at each end and its
   size in units beside it. */
.cv-gap { position: absolute; z-index: var(--z-overlay); pointer-events: none; color: var(--high); }
.cv-gap.is-y { width: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.cv-gap.is-x { height: 7px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.cv-gap::before { content: ""; position: absolute; background: currentColor; }
.cv-gap.is-y::before { left: 3px; top: 0; bottom: 0; width: 1px; }
.cv-gap.is-x::before { top: 3px; left: 0; right: 0; height: 1px; }
.cv-gap-n { position: absolute; background: var(--high); color: #ffffff; font: 600 10px/14px var(--sans);
  padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.cv-gap.is-y .cv-gap-n { left: 11px; top: 50%; transform: translateY(-50%); }
.cv-gap.is-x .cv-gap-n { top: 11px; left: 50%; transform: translateX(-50%); }
.cv-fold-one { display: inline-flex; gap: 8px; align-items: baseline; }
.cv-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-2); font-weight: 600; cursor: pointer; text-align: left; }
.cv-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.cv-empty { position: absolute; inset: 70px 20px 70px; z-index: var(--z-overlay); display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 1.5px solid transparent; border-radius: 12px; }
.cv-empty[hidden] { display: none; }
.cv-empty-card { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cv-empty-plus { width: 52px; height: 52px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent-2); }
.cv-empty-plus .i { width: 22px; height: 22px; }
.cv-empty h2 { margin: 6px 0 0; font-size: var(--t-xl); font-weight: 700; }
.cv-empty p { margin: 0; color: var(--ink-2); font-size: var(--t-base); line-height: 1.55; }
.cv-empty-acts { display: flex; gap: 8px; margin-top: 8px; }
.cv-empty-acts .btn { --btn-bg: var(--sheet); --btn-rule: var(--rule-2); }
.cv-empty-acts .btn .i { width: 15px; height: 15px; }
.cv-empty-drop { display: none; }
.cv-empty.is-drop { border-color: var(--accent); background: var(--accent-wash); }
.cv-empty.is-drop .cv-empty-card { display: none; }
.cv-empty.is-drop .cv-empty-drop { display: block; margin: 0; color: var(--accent-2); font-weight: 600; font-size: var(--t-body); }

.cv-picker {
  position: absolute; top: 66px; left: 16px; z-index: var(--z-popover); width: 384px; max-height: calc(100% - 90px);
  display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow-float); overflow: hidden;
}
.cv-picker[hidden] { display: none; }
.cv-search-row { display: flex; align-items: center; gap: 8px; margin: 10px 10px 4px; padding: 7px 10px;
  border: 1px solid var(--rule-2); border-radius: 8px; background: var(--ground); }
.cv-search-row .i { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.cv-search { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--t-base); color: var(--ink); outline: none; }
.cv-tabs { display: flex; gap: 16px; margin: 6px 12px 0; border-bottom: 1px solid var(--rule); }
.cv-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 0 8px;
  font: inherit; font-size: var(--t-base); color: var(--ink-2); cursor: pointer; }
.cv-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.cv-pick-head { margin: 6px 14px 0; font-size: var(--t-small); color: var(--ink-2); }
.cv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 6px; }
.cv-group { margin: 10px 8px 4px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.cv-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: grab; }
.cv-row:hover, .cv-row:focus-visible { background: var(--ground); outline: none; }
.cv-row.is-dragging { background: var(--accent-wash); }
.cv-picker.is-carrying { opacity: 0.18; pointer-events: none; transition: opacity 120ms var(--ease); }
.cv-name-menu { width: 300px; }
.cv-name-menu .cv-name-label { display: block; margin: 6px 10px 4px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.cv-name-menu .connect-input { width: calc(100% - 20px); margin: 0 10px; }
.cv-same { margin: 8px 10px 0; font-size: var(--t-small); color: var(--med); line-height: 1.45; }
.cv-same[hidden] { display: none; }
.cv-grip .i { width: 14px; height: 14px; color: var(--rule-3); }
.cv-ico { width: 30px; height: 30px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunk); color: var(--ink-2); }
.cv-ico .i { width: 16px; height: 16px; }
.cv-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-row-text b { font-size: var(--t-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-row-text span { font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); font-size: var(--t-micro); font-weight: 600; }
.cv-tag.is-boundary { background: var(--accent-wash); color: var(--accent-2); }
.cv-foot { margin: 0; padding: 9px 14px 11px; border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink-3); line-height: 1.45; }
.cv-none { margin: 8px; font-size: var(--t-base); color: var(--ink-3); }

.cv-tip {
  position: fixed; z-index: var(--z-toast); pointer-events: none; max-width: 340px;
  padding: 7px 10px; border-radius: 7px; background: var(--ink-900); color: var(--on-ink); font-size: var(--t-small); line-height: 1.45;
}
.cv-tip[hidden] { display: none; }

.cv-details { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 12px; font-size: var(--t-base); }
.cv-details[hidden] { display: none; }
.cv-h { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.cv-sub { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--t-base); font-weight: 600; }
.cv-lede { margin: -4px 0 0; color: var(--ink-2); line-height: 1.5; }
.cv-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  background: var(--sunk); color: var(--ink-2); font-size: var(--t-small); font-weight: 600; }
.cv-badge.is-new { background: var(--med-wash); color: var(--med); }
.cv-badge.is-link { background: var(--accent-wash); color: var(--accent-2); }
.cv-badge .i { width: 12px; height: 12px; }
.cv-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cv-label { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); margin: 0; }
.cv-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 7px;
  background: var(--sheet); font: inherit; font-size: var(--t-base); color: var(--ink); }
textarea.cv-input { resize: vertical; line-height: 1.45; }
.cv-input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.cv-input.is-open { border: 1.5px solid var(--accent); }
.cv-input:disabled { background: var(--ground); color: var(--ink-2); }
.cv-pair, .cv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cv-form .cv-field:not(.is-half) { grid-column: 1 / -1; }
.cv-on-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-on-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cv-what { color: var(--ink-3); font-size: var(--t-small); }
.cv-note, .cv-check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; color: var(--ink-2); line-height: 1.5; }
.cv-note .i, .cv-check .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cv-note { padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.cv-check.is-open .i { color: var(--med); }
.cv-check.is-ok .i { color: var(--ok); }
.cv-small { margin: 0; font-size: var(--t-small); color: var(--ink-3); line-height: 1.5; }
.cv-chips-in { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-in { padding: 4px 9px; border-radius: 6px; background: var(--sunk); color: var(--ink-2); font-size: var(--t-small); }
.cv-in b { color: var(--ink); font-weight: 600; }
.cv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cv-acts .btn { --btn-bg: var(--sheet); --btn-rule: var(--rule-2); }
.cv-acts .btn .i { width: 14px; height: 14px; }
.cv-toggle { display: flex; gap: 12px; align-items: flex-start; }
.cv-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.cv-toggle-text span { font-size: var(--t-small); color: var(--ink-3); }
.cv-switch { flex: none; width: 36px; height: 20px; border-radius: 10px; border: 0; padding: 2px; cursor: pointer;
  background: var(--rule-2); display: inline-flex; transition: background 120ms var(--ease); }
.cv-switch .knob { width: 16px; height: 16px; border-radius: 8px; background: var(--sheet); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 120ms var(--ease); }
.cv-switch[aria-checked="true"] { background: var(--accent); }
.cv-switch[aria-checked="true"] .knob { transform: translateX(16px); }
.cv-folds { display: flex; flex-direction: column; gap: 7px; }
.cv-fold-row { display: flex; gap: 9px; align-items: center; font-size: var(--t-base); cursor: pointer; }
.cv-fold-row input { width: 15px; height: 15px; accent-color: var(--ink-900); }
.cv-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-base); color: var(--ink-2); white-space: nowrap; }
.cv-status .i { width: 15px; height: 15px; }
.cv-status.is-saved .i { color: var(--ok); }
.cv-status.is-failed { color: var(--high); }
.cv-status.is-fresh { color: var(--ink-3); }

/* ---- what the diagrams need, and starting an estate ----------------------
   The V6 frames in design/architecture-model.pen: an empty or thin drawing
   says what would fill it, the one list under Checks, a field set on many
   records at once, the estate menu and the first hour of an estate. */

button.sb-ws { width: calc(100% - 24px); border: 0; text-align: left; font: inherit; cursor: pointer; }
button.sb-ws:hover { background: var(--side-hover); }
button.sb-ws:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.estate-menu { position: fixed; z-index: 60; min-width: 232px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-float); }
.em-head { margin: 4px 8px 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.em-list { display: flex; flex-direction: column; gap: 2px; }
.em-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 0; border-radius: 6px;
  background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.em-item:hover { background: var(--sunk); }
.em-item.is-on { background: var(--sunk); }
.em-item .i { width: 15px; height: 15px; flex: none; color: var(--ink-2); }
.em-item.is-on > .i:last-child { color: var(--accent-2); }
.em-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.em-text strong { font-size: 13px; font-weight: 600; }
.em-text span { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-rule { height: 1px; background: var(--rule); margin: 4px 2px; }

.need-strip { position: absolute; top: 14px; left: 20px; right: 20px; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px; border-radius: 8px; background: var(--med-wash);
  border: 1px solid color-mix(in srgb, var(--med) 30%, transparent);
  color: var(--ink); font-size: 13px; box-shadow: var(--shadow-sheet); }
.need-strip[hidden] { display: none; }
.need-strip .i { width: 16px; height: 16px; flex: none; color: var(--med); }
.need-strip .grow { flex: 1; min-width: 0; }
.need-strip .icon-btn { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; font-size: 18px;
  line-height: 1; color: var(--ink-2); cursor: pointer; }
.need-strip .icon-btn:hover { background: color-mix(in srgb, var(--med) 14%, transparent); }
/* A tile map leaves room under the note, so the first band's name is read. */
.sheet.has-strip .tiles { padding-top: 64px; }

.se-plain[hidden], .se-needs[hidden] { display: none; }
.se-plain { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.se-needs { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: min(560px, 100%); text-align: left; }
.se-needs h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.se-needs .nd-lede { max-width: none; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.se-needs .acts { margin-top: 2px; flex-wrap: wrap; }
.se-needs .acts .i { width: 15px; height: 15px; }
.nd-lanes { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.nd-lane { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
.nd-lane strong { width: 120px; flex: none; color: var(--ink-2); font-weight: 600; }
.nd-foot { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.nd-brief { margin-top: 6px; }
.nd-need { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); }
.nd-top { display: flex; align-items: baseline; gap: 8px; }
.nd-top strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.nd-top span { font-size: 12px; color: var(--ink-3); }
.nd-bar { display: block; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.nd-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.nd-bar.is-short i { background: var(--med); }
.nd-said { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.nd-said.is-short { color: var(--med); }
.nd-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; text-decoration: none; align-self: flex-start; }
.nd-act .i { width: 13px; height: 13px; }

.nd-sum { margin: 0; font-size: 14px; color: var(--ink); }
.nd-head { padding-top: 12px; }
.nd-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.nd-row { display: grid; grid-template-columns: 190px 170px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--rule); }
.nd-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nd-what strong { font-size: 13.5px; font-weight: 600; }
.nd-what span { font-size: 12px; color: var(--ink-3); }
.nd-count { display: flex; flex-direction: column; gap: 5px; }
.nd-n { font-size: 12px; color: var(--ink-2); }
.nd-n.is-short { color: var(--med); }
.nd-views { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.nd-row .nd-act { justify-self: end; }

.nd-sub { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.nd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-pill { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--rule-2); background: var(--sheet);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.nd-pill:hover { border-color: var(--rule-3); }
.nd-pill[aria-checked="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-ink); }
.nd-pick { display: flex; }
.nd-free { width: 320px; }
.nd-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.nd-search { flex: 1; min-width: 160px; }
.nd-table { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px;
  max-height: max(220px, calc(100vh - 430px)); overflow-y: auto; }
.nd-table .nd-tr.head { position: sticky; top: 0; z-index: 1; }
.nd-filters .src-select { max-width: 190px; }
.nd-views .linkish { text-align: left; }
.nd-save { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--panel);
  border: 1px solid var(--rule); }
.nd-save .grow { flex: 1; }
.nd-tr { display: grid; gap: 10px; align-items: center; padding: 6px 12px; min-height: 32px; box-sizing: border-box;
  font-size: 12.5px; color: var(--ink); border-top: 1px solid var(--rule); cursor: pointer; }
.nd-tr.head { border-top: 0; background: var(--panel); color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: default; }
.nd-tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-tr input { margin: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.nd-tr.is-off { color: var(--ink-3); cursor: not-allowed; }
.nd-name { font-weight: 500; }
.nd-effects { display: flex; flex-direction: column; gap: 12px; }
.nd-effect { display: flex; gap: 10px; align-items: flex-start; }
.nd-big { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--accent-2); line-height: 1.1; min-width: 26px; }
.nd-effect > div { display: flex; flex-direction: column; gap: 2px; }
.nd-eh { font-size: 13px; font-weight: 600; color: var(--ink); }
.nd-ep { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.est-options { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.est-option { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.est-option + .est-option { border-top: 1px solid var(--rule); }
.est-option.is-on { background: var(--panel); }
.est-top { display: flex; align-items: center; gap: 12px; }
.est-top > .i { width: 18px; height: 18px; flex: none; color: var(--ink-2); align-self: flex-start; margin-top: 2px; }
.est-option.is-on .est-top > .i { color: var(--accent-2); }
.est-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.est-text strong { font-size: 14px; font-weight: 600; }
.est-text span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.est-fields { display: flex; align-items: flex-end; gap: 12px; padding-left: 30px; }
.est-field { display: flex; flex-direction: column; gap: 5px; width: 220px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.est-field.wide { flex: 1; width: auto; min-width: 0; }
.est-field .st-input { width: 100%; box-sizing: border-box; }
.est-foot { padding-left: 30px; }
.est-step { display: flex; gap: 10px; align-items: flex-start; }
.est-step strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.est-step p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.fh { gap: 0; }
.fh-step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.fh-n { width: 28px; height: 28px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunk); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.fh-n.small { width: 22px; height: 22px; font-size: 12px; background: var(--accent-wash); color: var(--accent-2); }
.fh-step.is-now .fh-n { background: var(--accent); color: var(--sheet); }
.fh-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fh-col h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.fh-step.is-now .fh-col h2 { color: var(--ink); }
.fh-col p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.fh-col .drop { width: 100%; box-sizing: border-box; }
.sample-note { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 8px; }
.sample-acts { display: flex; flex: none; gap: 8px; }

/* ---- the overview ---------------------------------------------------------
   The whole drawing, small, in the sheet's corner over the controls, with
   the part on the sheet marked; there only while some of it is off the
   sheet (openReadable in app.js). */
.overview {
  position: absolute;
  right: 14px;
  bottom: 64px;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
}
.overview[hidden] { display: none; }
.ov-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 188px;
  height: 112px;
  padding: 6px;
  box-sizing: content-box;
  background: var(--ground);
  border-radius: 6px;
}
.overview canvas { display: block; cursor: grab; touch-action: none; }
.overview canvas:active { cursor: grabbing; }
.overview .btn { justify-content: center; }
.read-prompt { width: 206px; gap: 8px; padding: 12px; }
.read-prompt p { margin: 0; line-height: 1.4; }
.read-prompt .rp-why { font-size: var(--t-small); color: var(--ink-2); }
.read-prompt .rp-hint { font-size: var(--t-micro); color: var(--ink-3); }
.read-prompt .rp-top { display: flex; align-items: flex-start; gap: 6px; }
.read-prompt .rp-top .rp-why { flex: 1; min-width: 0; }
.read-prompt .rp-close {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -4px -6px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
}
.read-prompt .rp-close:hover { background: var(--sunk); color: var(--ink); }
.read-prompt .rp-never {
  align-self: flex-start;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-micro);
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.read-prompt .rp-never:hover { color: var(--ink); }

/* ---- the tour --------------------------------------------------------------
   A pointer, a ring and a card over the page, none of them blocking it: the
   ring and the pointer let every press through, and the card is the only
   thing that takes one. Drawn as V11 in the design file. */
.tour-card {
  position: fixed;
  z-index: 46;
  width: 324px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 20, 31, 0.18);
}
/* The offer sits on Home, under any drawer or menu opened over it. */
.tour-offer { width: 440px; bottom: 88px; z-index: var(--z-chrome); }
.tour-card .tc-top { display: flex; align-items: center; justify-content: space-between; }
.tour-card .tc-step { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.tour-card .tc-close {
  width: 24px;
  height: 24px;
  margin: -4px -6px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tour-card .tc-close:hover { background: var(--sunk); color: var(--ink); }
.tour-card .tc-title { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.tour-card .tc-body { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.tour-card .tc-away { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: var(--t-small); color: var(--ink-3); }
.tour-card .tc-away[hidden] { display: none; }
.tour-card .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.tour-card .tc-dots { display: flex; align-items: center; gap: 5px; }
.tour-card .tc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); }
.tour-card .tc-dots i.is-past { background: var(--ink-3); }
.tour-card .tc-dots i.is-on { width: 8px; height: 8px; background: var(--accent); }
.tour-card .tc-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tour-card .tc-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tour-card .tc-link:hover { color: var(--ink); }
.tour-ring {
  position: fixed;
  z-index: 45;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
}
.tour-ring[hidden] { display: none; }
.tour-ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  opacity: 0.28;
  animation: tour-pulse 1.1s ease-out 2;
}
@keyframes tour-pulse {
  from { transform: scale(0.94); opacity: 0.7; }
  to { transform: scale(1.06); opacity: 0; }
}
.tour-pointer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 47;
  width: 22px;
  height: 31px;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(16, 20, 31, 0.3));
}
.tour-pointer path { fill: var(--ink-900); stroke: #ffffff; stroke-width: 1.4; stroke-linejoin: round; }
.tour-press {
  position: fixed;
  z-index: 46;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tour-ring::after { animation: none; }
}

/* ---- the levels ------------------------------------------------------------
   The diagrams about a box, about what it sits in and about its domain, as a
   list per subject; the other views about a subject as tabs beside its
   picker; the one on screen marked rather than linked. */

.lv-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.lv-head { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink-3); }
.lv-list { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.lv-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 10px;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  font: inherit; font-size: var(--t-base); color: var(--ink); text-align: left;
}
.lv-row:last-child { border-bottom: 0; }
button.lv-row { cursor: pointer; }
button.lv-row:hover, button.lv-row:focus-visible { background: var(--accent-wash); outline: none; }
.lv-row .vglyph { color: var(--ink-3); flex: none; }
.lv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-n { flex: none; font-size: var(--t-micro); color: var(--ink-3); }
.lv-row.is-here { background: var(--accent-wash); font-weight: 600; }
.lv-row.is-here .vglyph, .lv-row.is-here .lv-n { color: var(--accent-2); }
.lv-row.is-thin .lv-name { color: var(--ink-3); }
.lv-hint { margin: 2px 0 0; font-size: var(--t-small); color: var(--ink-3); }
#inspIdle .lv-list { margin-bottom: 4px; }

/* The tabs keep to the picker's line: beside a long system name they scroll
   rather than wrap to a second row of their own. */
.subject-bar:has(.subject-across) { flex-wrap: nowrap; gap: 10px; }
.subject-bar:has(.subject-across) .subject-tag, .subject-bar:has(.subject-across) .subject-pick { flex: none; white-space: nowrap; }
.subject-bar:has(.subject-across) .subject-pick select { max-width: 190px; }
.subject-across {
  display: inline-flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; flex-shrink: 1;
  overflow-x: auto; scrollbar-width: none;
  padding: 3px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m);
}
.sa-tab {
  flex: none; padding: 4px 9px; background: none; border: 0; border-radius: var(--r-s);
  font: inherit; font-size: var(--t-small); font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.sa-tab:hover { color: var(--ink); background: var(--sunk); }
.sa-tab[aria-pressed="true"] { background: var(--sheet); color: var(--ink); font-weight: 600; cursor: default; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08); }

.ctx-menu .ctx-sub { padding: 6px 10px 2px; font-size: var(--t-small); font-weight: 600; color: var(--ink-3); }

/* ---- A drawing brought in (V7 frames) ---------------------------------------
 * The drop on the canvas, and the page that says what adopting it would add:
 * the engine's change picture given the column, the counts, the owner and
 * the corrections beside it. */
.cv-empty-file { margin: 6px 0 0 !important; max-width: 440px; color: var(--ink-3) !important; font-size: 12.5px !important; }
.cv-file-drop { position: absolute; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; border: 2px solid var(--accent); border-radius: inherit;
  background: var(--accent-wash); pointer-events: none; }
.cv-file-drop[hidden] { display: none; }
.cv-file-drop strong { font-size: 15px; font-weight: 600; color: var(--accent-2); }
.cv-file-drop span:last-child { font-size: 12.5px; color: var(--ink-2); }
.cv-file-badge { width: 52px; height: 52px; border-radius: 26px; background: var(--sheet); color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center; }
.cv-file-badge .i { width: 24px; height: 24px; }
.adopt .st-head { align-items: flex-end; }
/* A page with the sticky bar of steps at its foot ends at the panel's edge:
 * the panel's own padding below it showed the page scrolling under the bar,
 * a drawing's notes read beneath Adopt and a long export's rows beneath
 * Bring in. */
.panel:has(> .settings) { padding-bottom: 0; }
.adopt-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--sheet); border: 1px solid var(--rule); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.adopt-chip .i { width: 14px; height: 14px; }
.adopt-picture { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px;
  background: #ffffff; border: 1px solid var(--rule); border-radius: 10px; }
.adopt-drawing { height: min(62vh, 560px); min-height: 280px; display: flex; align-items: center; justify-content: center;
  cursor: zoom-in; }
.adopt-drawing img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adopt-picture.is-busy .adopt-drawing { opacity: 0.35; }
.adopt-picture.is-busy:not(:has(.adopt-drawing)) { height: min(62vh, 560px); align-items: center; justify-content: center; }
.adopt-busy { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: center;
  justify-content: center; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.adopt-busy span { font-weight: 400; color: #6b7280; }
.adopt-failed { min-height: 280px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: #374151; font-size: 13px; }
.adopt-failed .i { width: 22px; height: 22px; color: var(--high); }
.adopt-failed p { margin: 0; max-width: 60ch; line-height: 1.5; }
.adopt-nothing { margin: 0; padding: 40px 12px; text-align: center; color: var(--ink-2); font-size: 13px; }
.adopt-key { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 12px; color: #4b5563; }
.adopt-key .grow { flex: 1; }
.adopt-key-item { display: inline-flex; align-items: center; gap: 7px; }
.adopt-key .sw { width: 20px; height: 13px; border-radius: 3px; background: #c7d2fe; border: 1.5px solid #4338ca; }
.adopt-key .sw.here { opacity: 0.45; }
.adopt-key .sw.heavy { border-width: 3px; }
.adopt-pages { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adopt-pages .say { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.adopt-page { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 7px;
  background: var(--sheet); border: 1px solid var(--rule); font-size: 12.5px; }
.adopt-page .i { width: 13px; height: 13px; color: var(--ink-2); }
.adopt-page span { color: var(--ink-3); font-size: 12px; }
.adopt-counts { display: flex; flex-direction: column; gap: 10px; }
.adopt-count { display: flex; gap: 12px; align-items: flex-start; }
.adopt-count strong { width: 24px; flex: none; font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.1; }
.adopt-count .words { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; min-width: 0; }
.adopt-count .label { font-size: 13px; font-weight: 600; color: var(--ink); }
.adopt-count .sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.adopt-count.accent strong, .adopt-count.accent .label { color: var(--accent-2); }
.adopt-block { padding-top: 16px; border-top: 1px solid var(--rule); gap: 8px; }
.adopt-block .st-input { width: 100%; }
.adopt-changes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px;
  color: var(--ink-2); line-height: 1.5; }

/* ---- the canvas drawn by maxGraph (canvas/engine.js) ----------------------
 * While the gestures are still Cytoscape's, maxGraph draws over Cytoscape's
 * own drawing, which stays laid out and takes the pointer, made invisible
 * beneath. The surface lets every event through to it. */
.under-mirror > div > canvas, .under-mirror > canvas.tech-layer { opacity: 0; }
/* Laid over #cy by engine.js, at the canvas's own layer: over the drawing,
 * under the tools, guides and overview that float above it. */
.mg-surface { position: absolute; z-index: var(--z-canvas); pointer-events: none; overflow: hidden; }
.mg-surface.takes-pointer { pointer-events: auto; touch-action: none; }
/* Icon tiles are drawn on white, as the clouds draw theirs. */
.mg-surface.look-tiles { background: #ffffff; }
.cv-icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 214px; overflow-y: auto; }
.cv-icons img { display: block; }
.cv-icons-none { grid-column: 1 / -1; margin: 4px 0; font-size: var(--t-small); color: var(--ink-3); }
.cv-icon-find { margin: 6px 0; }
.cv-icon-b { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border: 1px solid var(--rule);
  border-radius: 7px; background: var(--sheet); color: var(--ink-2); cursor: pointer; }
.cv-icon-b[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.mg-surface svg { overflow: visible; }

/* ---- the diagram's own shapes, drawn with the tools (canvas/engine.js) */
.mg-surface.is-drawing { cursor: crosshair; }
.mg-ghost { position: absolute; pointer-events: none; border: 1.5px dashed var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mg-ghost.is-line { height: 0; border: 0; border-top: 1.5px dashed var(--accent); border-radius: 0; background: none; transform-origin: 0 0; }
/* Typed in where it is drawn: over the shape, outside maxGraph's sheet. */
.mg-edit { position: absolute; z-index: var(--z-overlay); box-sizing: border-box; margin: 0; resize: none; overflow: hidden;
  border: 0; border-radius: 3px; outline: 2px solid var(--accent); outline-offset: 0; background: rgba(255, 255, 255, 0.94);
  font-family: Geist, system-ui, sans-serif; line-height: 1.32; color: #272b33; }
.mg-edit.is-note { background: #fdf0b8; }
.cv-tool.is-icon { padding: 6px 8px; }
.cv-tool:disabled { opacity: 0.38; cursor: default; background: none; }
.cv-tool .cv-caret { width: 12px; height: 12px; margin-left: -3px; color: var(--ink-3); }
.cv-tools.no-own .cv-own { display: none; }
/* Room for the chips on a narrower sheet: the drawing tools say their names
 * in their titles. */
@media (max-width: 1480px) { .cv-tools .cv-tool.cv-own > span { display: none; } .cv-tools .cv-tool.cv-own { padding: 6px 8px; } }
.cv-empty { pointer-events: none; }
.cv-empty-card { pointer-events: auto; }
.cv-shape-menu {
  position: absolute; top: 62px; left: 16px; z-index: var(--z-chrome); width: 268px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-float);
}
.cv-shape-menu[hidden] { display: none; }
.cv-shape-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: var(--t-base); color: var(--ink); cursor: pointer; text-align: left; }
.cv-shape-item:hover, .cv-shape-item:focus-visible, .cv-shape-item[aria-pressed="true"] { background: var(--ground); outline: none; }
.cv-shape-pic { width: 28px; height: 21px; flex: none; fill: var(--sheet); stroke: var(--ink-2); stroke-width: 1.4; }
.cv-badge.is-own { background: var(--ground); color: var(--ink-2); }
.cv-swatches { display: flex; gap: 8px; }
.cv-swatch { width: 26px; height: 26px; padding: 0; border-radius: 13px; border: 1.5px solid var(--sw-edge); background: var(--sw); cursor: pointer; }
.cv-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--accent); }
/* No fill: the sheet showing through, struck across. */
.cv-swatch.is-none { background: linear-gradient(135deg, transparent 46%, var(--sw-edge) 46%, var(--sw-edge) 54%, transparent 54%); }
.cv-look-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* The Style and Arrange tabs (V16): a section a heading over what it
   heads, a hint or a control at the heading's right. */
.cv-tabs { display: flex; width: 100%; box-sizing: border-box; margin: 0; }
.cv-tabs .cv-seg-b { flex: 1; }
.cv-sec { display: flex; flex-direction: column; gap: 7px; }
.cv-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.cv-sec-r { display: inline-flex; align-items: center; gap: 8px; }
.cv-aside { font-size: var(--t-small); color: var(--ink-3); }
.cv-fill-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-fill-row .cv-swatches { gap: 6px; }
.cv-opacity-box { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.cv-opacity { width: 50px; padding-left: 6px; padding-right: 4px; text-align: right; }
.cv-unit { font-size: var(--t-small); color: var(--ink-3); }
.cv-corners { display: flex; align-items: center; gap: 10px; }
.cv-range { flex: 1; accent-color: var(--accent); }
.cv-range-v { min-width: 2ch; text-align: right; font-size: var(--t-small); color: var(--ink); }
.btn.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
/* While a look is being painted, the sheet says so under the pointer. */
body.cv-painting .mg-surface, body.cv-painting .mg-surface * { cursor: copy !important; }
.cv-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--ground); border: 1px solid var(--rule); }
.cv-seg-b { padding: 4px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--t-small); color: var(--ink-2); cursor: pointer; }
.cv-seg-b[aria-checked="true"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cv-shape-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cv-shape-b { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border: 1px solid var(--rule);
  border-radius: 7px; background: var(--sheet); cursor: pointer; }
.cv-shape-b[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cv-keys { padding-top: 12px; border-top: 1px solid var(--rule); }
/* A line drawn between two records, asked what it is: the answer that
 * keeps it the diagram's own, set apart from the connections. */
.connect-opt.is-line .co-s { color: var(--ink-2); }

/* ---- several picked, and the hand (canvas/engine.js) */
/* Quick connect's arrows about a hovered box (V14). */
.mg-qc-set { position: absolute; inset: 0; pointer-events: none; }
.mg-qc-set[hidden] { display: none; }
.mg-qc { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--accent); background: var(--accent-wash); color: var(--accent-2); cursor: crosshair;
  pointer-events: auto; display: grid; place-items: center; }
.mg-qc svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.mg-qc.is-e svg { transform: rotate(90deg); }
.mg-qc.is-s svg { transform: rotate(180deg); }
.mg-qc.is-w svg { transform: rotate(270deg); }
.mg-qc:hover { background: var(--accent); color: #fff; }
.cv-pick-link { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px 0; font-size: 12px;
  color: var(--ink-2); }
.cv-pick-link .i { width: 13px; height: 13px; flex: none; color: var(--accent-2); }
.mg-ghost.is-marquee { border-style: solid; border-width: 1px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mg-surface.is-panning { cursor: grab; }
.mg-surface.is-grabbing { cursor: grabbing; }
.cv-bar {
  position: absolute; z-index: var(--z-chrome); display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 9px; box-shadow: var(--shadow-float);
}
.cv-bar[hidden] { display: none; }
.cv-bar .sep { width: 1px; height: 18px; margin: 0 3px; background: var(--rule); }
.cv-bar-b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.cv-bar-b:hover:not(:disabled) { background: var(--ground); color: var(--ink); }
.cv-bar-b:disabled { opacity: 0.35; cursor: default; }
.cv-bar-b .i { width: 16px; height: 16px; }
.cv-picks { display: flex; flex-direction: column; gap: 6px; }
.cv-pick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: var(--ground);
  font: inherit; font-size: var(--t-base); color: var(--ink); text-align: left; cursor: pointer; }
.cv-pick:hover { background: var(--sunk); }
.cv-pick-dot { width: 8px; height: 8px; flex: none; border-radius: 4px; background: var(--accent); }
.cv-pick.is-own .cv-pick-dot { background: var(--ink-3); }
.cv-pick-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-pick-id { flex: none; font-size: var(--t-small); color: var(--ink-3); }
/* The Line menu: three routes, one column. */
.cv-shape-menu.is-lines { grid-template-columns: 1fr; width: 168px; }
.cv-shape-pic.is-line { fill: none; stroke-width: 1.6; }
/* What a cloud calls a part, offered when it is dropped into one of its
 * accounts: the product it is recorded as. */
.cv-offers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 10px; }
.cv-offer { padding: 4px 10px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--sheet);
  font: inherit; font-size: var(--t-small); color: var(--ink-2); cursor: pointer; }
.cv-offer[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }