@seanmars/tospec 0.22.0 → 0.24.0

package/assets/dashboard/style.css

@@ -1,956 +1,3395 @@
-/* tospec dashboard — light/dark via [data-theme] (JS-resolved), no webfonts. */
-
-:root {
-  --bg: #f6f7f9;
+/* tospec dashboard: every project as a transit line on a shared station grid.
+   The world (Taipei Metro wayfinding) lends type, palette, density and one
+   move; navigation and controls stay ordinary web controls. Themes are
+   resolved by app.js into [data-theme]; no webfonts, no external resources. */
+
+/* -- tokens ------------------------------------------------------------------ */
+
+/* Line colours are categorical identity, validated per theme with the dataviz
+   palette checks (OKLCH lightness band, chroma floor, adjacent-pair CVD
+   separation under protan/deutan, normal-vision floor, 3:1 against the
+   surface). The order is part of the validation: slot N stays slot N.
+   Red is not a line colour in any theme: it is reserved for a stopped train. */
+:root,
+:root[data-theme='light'] {
+  color-scheme: light;
+  --ground: #f1f3f1;
   --surface: #ffffff;
-  --border: #e2e5ea;
-  --text: #1c2024;
-  --muted: #6b7280;
-  --accent: #2563eb;
-  --done: #16a34a;
-  --ready: #d97706;
-  --blocked: #9ca3af;
-  --error: #dc2626;
-  --error-bg: #fef2f2;
-  --badge-req-bg: #e0edff;
-  --badge-req-fg: #1d4ed8;
-  --badge-issue-bg: #ffedd5;
-  --badge-issue-fg: #c2410c;
-  --badge-applying-bg: #cffafe;
-  --badge-applying-fg: #0e7490;
-  --badge-archiving-bg: #ede9fe;
-  --badge-archiving-fg: #6d28d9;
-  --badge-ready-bg: #dcfce7;
-  --badge-ready-fg: #15803d;
-  /* chart series (CVD-validated pair per theme, see ADR 001) */
-  --chart-1: #2563eb;
-  --chart-2: #0d9488;
-  --ok: #16a34a;
-  --ok-bg: #f0fdf4;
-  --warn-bg: #fffbeb;
-  --flash-bg: #dbeafe;
-  --radius: 8px;
+  --surface-2: #f5f6f5;
+  --ink: #15181b;
+  --ink-2: #3a4147;
+  --muted: #5a6269;
+  --rule: #dcdfdc;
+  --rule-strong: #b3b9b5;
+  --sign: #262b30;
+  --sign-2: #343a40;
+  --sign-ink: #ffffff;
+  --sign-muted: #b9c1c8;
+  --focus: #0b63ce;
+  --stop: #e3002c;
+  /* Text on a --stop fill. The dark themes' brighter reds give white only
+     ~3:1, so they take the ground's near-black instead (>= 5:1). */
+  --stop-ink: #ffffff;
+  --error: #c4001f;
+  --error-bg: #fdecee;
+  /* Session state, never a line colour's job: working, and waiting on you. */
+  --live: #0a8a4a;
+  --wait: #b46a00;
+  --line-1: #0070bd;
+  --line-2: #b07a22;
+  --line-3: #008fa3;
+  --line-4: #d97706;
+  --line-5: #8246af;
+  --line-6: #008659;
+  --shadow-tip: 0 6px 18px rgb(0 0 0 / 0.18);
 }
 
 :root[data-theme='dark'] {
-  --bg: #0f1115;
-  --surface: #171a20;
-  --border: #2a2f38;
-  --text: #e6e8eb;
-  --muted: #9199a3;
-  --accent: #60a5fa;
-  --done: #4ade80;
-  --ready: #fbbf24;
-  --blocked: #6b7280;
-  --error: #f87171;
-  --error-bg: #2a1414;
-  --badge-req-bg: #16263f;
-  --badge-req-fg: #93c5fd;
-  --badge-issue-bg: #3a2411;
-  --badge-issue-fg: #fdba74;
-  --badge-applying-bg: #0b2e33;
-  --badge-applying-fg: #67e8f9;
-  --badge-archiving-bg: #241a3a;
-  --badge-archiving-fg: #c4b5fd;
-  --badge-ready-bg: #0d2b1a;
-  --badge-ready-fg: #86efac;
-  --chart-1: #3b82f6;
-  --chart-2: #0d9488;
-  --ok: #4ade80;
-  --ok-bg: #10241a;
-  --warn-bg: #2a2210;
-  --flash-bg: #1e3a5f;
-}
-
+  color-scheme: dark;
+  --ground: #0e1012;
+  --surface: #1a1d21;
+  --surface-2: #22262b;
+  --ink: #e8ebed;
+  --ink-2: #c4cacf;
+  --muted: #9aa3ab;
+  --rule: #2b3036;
+  --rule-strong: #434a51;
+  --sign: #24292e;
+  --sign-2: #30363c;
+  --sign-ink: #f4f6f7;
+  --sign-muted: #aab3bb;
+  --focus: #6cb2ff;
+  --stop: #ff5a6a;
+  --stop-ink: #0e1012;
+  --error: #ff7a86;
+  --error-bg: #3b1b21;
+  --live: #3ec27e;
+  --wait: #f0a43a;
+  --line-1: #328edd;
+  --line-2: #b47d25;
+  --line-3: #0c9aaf;
+  --line-4: #ca6e01;
+  --line-5: #a26dce;
+  --line-6: #319f71;
+  --shadow-tip: 0 6px 18px rgb(0 0 0 / 0.5);
+}
+
+/* Dracula's own accents sit above the dark lightness band and fail the chroma
+   floor (cyan), so its lines keep Dracula's hues at validated lightness. */
 :root[data-theme='dracula'] {
-  --bg: #282a36;
+  color-scheme: dark;
+  --ground: #282a36;
   --surface: #343746;
-  --border: #44475a;
-  --text: #f8f8f2;
-  --muted: #6272a4;
-  --accent: #bd93f9;
-  --done: #50fa7b;
-  --ready: #ffb86c;
-  --blocked: #6272a4;
-  --error: #ff5555;
-  --error-bg: #402a33;
-  --badge-req-bg: #313552;
-  --badge-req-fg: #bd93f9;
-  --badge-issue-bg: #3d3348;
-  --badge-issue-fg: #ffb86c;
-  --badge-applying-bg: #1e3a3f;
-  --badge-applying-fg: #8be9fd;
-  --badge-archiving-bg: #3d2b38;
-  --badge-archiving-fg: #ff79c6;
-  --badge-ready-bg: #1f3d2b;
-  --badge-ready-fg: #50fa7b;
-  --chart-1: #a76ef5;
-  --chart-2: #0d9488;
-  --ok: #50fa7b;
-  --ok-bg: #1e3327;
-  --warn-bg: #3a3120;
-  --flash-bg: #2d3455;
-}
-
-* {
+  --surface-2: #3c3f51;
+  --ink: #f8f8f2;
+  --ink-2: #e2e2dc;
+  --muted: #bac0db;
+  --rule: #44475a;
+  --rule-strong: #5c6079;
+  --sign: #21222c;
+  --sign-2: #2d2f3c;
+  --sign-ink: #f8f8f2;
+  --sign-muted: #bac0db;
+  --focus: #bd93f9;
+  --stop: #ff5555;
+  --stop-ink: #21222c;
+  --error: #ff8080;
+  --error-bg: #4a2a33;
+  --live: #50fa7b;
+  --wait: #ffb86c;
+  --line-1: #a076da;
+  --line-2: #37a953;
+  --line-3: #d261a2;
+  --line-4: #919720;
+  --line-5: #738ad8;
+  --line-6: #c17e2f;
+  --shadow-tip: 0 6px 18px rgb(0 0 0 / 0.45);
+}
+
+:root {
+  --font-sans: system-ui, -apple-system, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
+  --signbar-h: 52px;
+  --sidebar-w: 224px;
+  --line: var(--ink-2);
+  --line-soft: color-mix(in oklab, var(--line) 14%, var(--surface));
+}
+
+/* -- base -------------------------------------------------------------------- */
+
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
+html {
+  scrollbar-color: var(--rule-strong) var(--ground);
+  -webkit-text-size-adjust: 100%;
+}
+
 body {
   margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: var(--ground);
+  color: var(--ink);
+  font-family: var(--font-sans);
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.55;
 }
 
-.mono {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 0.9em;
+::selection {
+  background: color-mix(in oklab, var(--focus) 30%, var(--surface));
+  color: var(--ink);
 }
 
-.muted {
-  color: var(--muted);
+a {
+  color: inherit;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--rule-strong);
 }
 
-/* -- top bar -- */
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 20px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 10;
+a:hover {
+  text-decoration-color: currentColor;
 }
 
-.topbar-left {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  min-width: 0;
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: 3px;
 }
 
-.brand {
-  font-size: 18px;
-  margin: 0;
-  font-weight: 650;
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
 }
 
-.tabs {
-  display: flex;
-  gap: 4px;
+.mono {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
 }
 
-.tab {
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: var(--radius);
+.num {
+  font-variant-numeric: tabular-nums;
 }
 
-.tab:hover {
-  color: var(--text);
+.muted {
+  color: var(--muted);
 }
 
-.tab-active {
-  color: var(--accent);
-  background: var(--bg);
+.note {
+  color: var(--muted);
+  font-size: 13px;
+  margin: 8px 0;
 }
 
-.root-path {
-  color: var(--muted);
-  white-space: nowrap;
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 40vw;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.topbar-right {
+.icon {
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* -- sign bar: the station-name panel ---------------------------------------- */
+
+.signbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 18px;
+  height: var(--signbar-h);
+  padding: 0 20px;
+  background: var(--sign);
+  color: var(--sign-ink);
 }
 
-.conn {
-  color: var(--error);
-  font-size: 12px;
+/* On a project's pages the panel carries that line's colour along its foot,
+   the way a platform sign names the line it serves. */
+.signbar.has-line {
+  box-shadow: inset 0 -4px 0 var(--line);
 }
 
-.conn.disconnected::before {
-  content: "\25cf ";
+.wordmark {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  color: var(--sign-ink);
+  text-decoration: none;
+  flex: none;
 }
 
-button,
-#theme-select,
-.range-select {
-  font: inherit;
-  color: var(--text);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 5px 12px;
-  cursor: pointer;
+.wordmark::before {
+  content: '';
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 3.5px solid var(--sign-ink);
+  background: var(--sign);
 }
 
-button:hover,
-#theme-select:hover,
-.range-select:hover {
-  border-color: var(--accent);
+.crumbs-nav {
+  min-width: 0;
+  flex: 1;
 }
 
-.range-select {
-  float: right;
-  font-size: 11px;
-  text-transform: none;
-  letter-spacing: normal;
-  padding: 1px 6px;
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  color: var(--sign-muted);
+  min-width: 0;
 }
 
-/* -- layout -- */
-.view {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 20px;
+.crumbs li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  white-space: nowrap;
 }
 
-.cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 24px;
+.crumbs li + li::before {
+  content: '/';
+  color: var(--sign-muted);
+  opacity: 0.6;
 }
 
-.card {
-  flex: 1 1 140px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+/* Every crumb may shrink; the text inside it ellipsizes rather than running
+   into the next crumb on a narrow bar. */
+.crumbs li > * {
+  min-width: 0;
 }
 
-.card-count {
-  font-size: 26px;
-  font-weight: 700;
+.crumb-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.card-label {
-  color: var(--muted);
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+.crumbs a {
+  color: var(--sign-muted);
+  text-decoration: none;
 }
 
-/* -- health strip -- */
-.health {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 20px;
-  padding: 10px 14px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  margin-bottom: 16px;
-  font-size: 13px;
+.crumbs a:hover {
+  color: var(--sign-ink);
 }
 
-.health-ok {
-  background: var(--ok-bg);
-  border-color: var(--ok);
-  color: var(--ok);
+.crumbs [aria-current] {
+  color: var(--sign-ink);
+  font-weight: 600;
 }
 
-.health-warn {
-  background: var(--warn-bg);
-  border-color: var(--ready);
+.crumb-project a,
+.crumb-project > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
 }
 
-.health-warn .health-item::before {
-  content: "\26a0 ";
-  color: var(--ready);
+.crumbs .line-swatch,
+.crumb-back .line-swatch {
+  width: 16px;
+  height: 5px;
 }
 
-a.health-item {
-  color: inherit;
+/* Narrow bars only: one step up, in place of the trail. */
+.crumb-back {
+  display: none;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--sign-ink);
   text-decoration: none;
 }
 
-a.health-item:hover {
-  text-decoration: underline;
+.crumb-back .icon {
+  color: var(--sign-muted);
 }
 
-/* -- charts -- */
-.charts-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 12px;
-  margin-bottom: 24px;
+.signbar-tools {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: none;
 }
 
-.charts-grid-3 {
-  grid-template-columns: 1fr 1fr 1fr;
+.hub-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  color: var(--sign-muted);
 }
 
-@media (max-width: 720px) {
-  .charts-grid,
-  .charts-grid-3 {
-    grid-template-columns: 1fr;
-  }
+.hub-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 2px solid var(--sign-ink);
+  background: var(--sign-ink);
 }
 
-.chart-panel {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px 14px;
-  min-width: 0;
-  margin-bottom: 0;
+.hub-status.is-down {
+  color: var(--sign-ink);
 }
 
-/* -- task progress -- */
-details.task-change,
-.row.task-none {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 6px;
+.hub-status.is-down .hub-dot {
+  border-radius: 1.5px;
+  border-color: var(--stop);
+  background: var(--stop);
 }
 
-details.task-change summary {
+.sign-control {
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid color-mix(in oklab, var(--sign-ink) 22%, transparent);
+  border-radius: 6px;
+  background: var(--sign-2);
+  color: var(--sign-ink);
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  list-style: none;
 }
 
-/* display:flex drops the native marker, so draw our own caret. */
-details.task-change summary::-webkit-details-marker {
-  display: none;
+.sign-control:hover {
+  border-color: color-mix(in oklab, var(--sign-ink) 55%, transparent);
 }
 
-details.task-change summary::before {
-  content: '';
-  flex: none;
-  width: 0;
-  height: 0;
-  border-left: 5px solid var(--muted);
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  transition: transform 0.15s ease;
+.sign-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
-details.task-change[open] summary::before {
-  transform: rotate(90deg);
+.sign-button:disabled {
+  cursor: progress;
+  opacity: 0.65;
 }
 
-details.task-change summary:hover {
-  color: var(--accent);
+.sign-button:disabled .icon {
+  animation: spin 0.9s linear infinite;
 }
 
-.task-bar {
-  margin-left: auto;
-  width: 140px;
-  height: 8px;
-  flex: none;
-  border: none;
-  border-radius: 4px;
-  background: var(--border);
-  /* Firefox styles the bar through the element itself. */
-  appearance: none;
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.task-bar::-webkit-progress-bar {
-  background: var(--border);
-  border-radius: 4px;
-}
+/* -- page frame: the sidebar beside the page --------------------------------- */
 
-.task-bar::-webkit-progress-value {
-  background: var(--done);
-  border-radius: 4px;
+.shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
+  align-items: start;
 }
 
-.task-bar::-moz-progress-bar {
-  background: var(--done);
-  border-radius: 4px;
+/* The page reflows on its own width, not the window's: the sidebar takes a
+   share of the window, and the map needs what is left for its four columns. */
+.view {
+  container: view / inline-size;
+  width: 100%;
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: 28px 24px 72px;
 }
 
-.task-count {
-  font-variant-numeric: tabular-nums;
-  font-size: 12px;
-  color: var(--muted);
-  min-width: 44px;
-  text-align: right;
+.view:focus {
+  outline: none;
 }
 
-.task-body {
-  padding: 2px 12px 10px 29px;
+/* Only below 960px, where the sidebar is a drawer. */
+.nav-toggle {
+  display: none;
 }
 
-.task-file {
-  font-size: 11px;
-  color: var(--muted);
-  margin: 8px 0 4px;
+.sidebar {
+  position: sticky;
+  top: var(--signbar-h);
+  height: calc(100vh - var(--signbar-h));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 14px 10px 24px;
+  background: var(--surface);
+  border-right: 1px solid var(--rule);
 }
 
-.task-item {
+.side-home {
   display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 4px 0;
-  cursor: pointer;
-}
-
-.task-item:hover .task-text {
-  color: var(--accent);
+  align-items: center;
+  gap: 9px;
+  padding: 7px 10px;
+  border-radius: 7px;
+  font-weight: 650;
+  text-decoration: none;
+  color: var(--ink-2);
 }
 
-.task-box {
-  accent-color: var(--done);
-  cursor: pointer;
+.side-home:hover {
+  background: var(--surface-2);
+  color: var(--ink);
 }
 
-.task-box:disabled {
-  cursor: progress;
+.side-home[aria-current='page'] {
+  background: var(--surface-2);
+  color: var(--ink);
+  box-shadow: inset 3px 0 0 var(--ink);
 }
 
-.task-item-done .task-text {
+.side-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 18px 10px 6px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
   color: var(--muted);
-  text-decoration: line-through;
 }
 
-.task-item-locked {
-  opacity: 0.55;
-  cursor: not-allowed;
+.side-projects,
+.side-changes {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.task-locked-note {
-  font-size: 11px;
-  color: var(--muted);
-  margin: 8px 0;
+.side-project + .side-project {
+  margin-top: 2px;
 }
 
-.task-error {
-  color: var(--error);
-  font-size: 12px;
+.side-row {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 2px;
+  border-radius: 7px;
 }
 
-.chart-wrap {
-  position: relative;
+.side-project.is-current > .side-row {
+  background: var(--line-soft);
 }
 
-.chart-note {
-  margin: 0;
+.side-toggle {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
 }
 
-/* -- dynamics -- */
-@keyframes row-flash {
-  0% {
-    background: var(--flash-bg);
-  }
-  100% {
-    background: var(--surface);
-  }
+.side-toggle:hover {
+  color: var(--ink);
 }
 
-.row.flash {
-  animation: row-flash 1.6s ease-out;
+.side-toggle .icon {
+  transform: rotate(-90deg);
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Live phase: a persistent breathing glow, distinct from the one-shot flash.
-   The inset bar reads even at rest; the outer glow pulses. Hue and cadence
-   separate applying (cyan, ~2s) from archiving (violet, ~3.2s) from ready
-   (green, ~4.4s). Cadence tracks how much the row wants your attention, not
-   lifecycle order: archiving is transient and worth a look, ready is a standing
-   reminder that should not nag, so it breathes slowest of the three. */
-@keyframes pulse-applying {
-  0%,
-  100% {
-    box-shadow: inset 3px 0 0 var(--badge-applying-fg), 0 0 0 0 transparent;
-  }
-  50% {
-    box-shadow: inset 3px 0 0 var(--badge-applying-fg), 0 0 7px 0 var(--badge-applying-fg);
-  }
+.side-toggle[aria-expanded='true'] .icon {
+  transform: none;
 }
 
-.row-applying {
-  animation: pulse-applying 2s ease-in-out infinite;
+.side-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 5px 4px;
+  font-weight: 650;
+  text-decoration: none;
 }
 
-@keyframes pulse-archiving {
-  0%,
-  100% {
-    box-shadow: inset 3px 0 0 var(--badge-archiving-fg), 0 0 0 0 transparent;
-  }
-  50% {
-    box-shadow: inset 3px 0 0 var(--badge-archiving-fg), 0 0 9px 0 var(--badge-archiving-fg);
-  }
+.side-link:hover .side-name {
+  text-decoration: underline;
 }
 
-.row-archiving {
-  animation: pulse-archiving 3.2s ease-in-out infinite;
+.side-link[aria-current='page'] .side-name {
+  font-weight: 800;
 }
 
-@keyframes pulse-ready {
-  0%,
-  100% {
-    box-shadow: inset 3px 0 0 var(--badge-ready-fg), 0 0 0 0 transparent;
-  }
-  50% {
-    box-shadow: inset 3px 0 0 var(--badge-ready-fg), 0 0 9px 0 var(--badge-ready-fg);
-  }
+.side-link .line-swatch {
+  width: 16px;
+  height: 6px;
 }
 
-.row-ready {
-  animation: pulse-ready 4.4s ease-in-out infinite;
+.side-name,
+.side-change-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* No prior reduced-motion handling existed; a persistent animation needs this
-   accessibility floor. Degrade the breathing glow to a static left colour bar. */
-@media (prefers-reduced-motion: reduce) {
-  .row-applying,
-  .row-archiving,
-  .row-ready {
-    animation: none;
-  }
-  .row-applying {
-    box-shadow: inset 3px 0 0 var(--badge-applying-fg);
-  }
-  .row-archiving {
-    box-shadow: inset 3px 0 0 var(--badge-archiving-fg);
-  }
-  .row-ready {
-    box-shadow: inset 3px 0 0 var(--badge-ready-fg);
-  }
+.is-offline .side-name {
+  color: var(--muted);
 }
 
-/* -- panels & rows -- */
-.panel {
-  margin-bottom: 24px;
+.side-sessions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 9px 0 6px;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--ink-2);
 }
 
-.section-title,
-.panel h3 {
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted);
-  margin: 0 0 8px;
+.side-changes {
+  margin: 2px 0 6px 24px;
+  border-left: 2px solid color-mix(in oklab, var(--line) 40%, var(--surface));
 }
 
-.row {
+.side-change {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 6px;
+  gap: 7px;
+  min-width: 0;
+  padding: 4px 8px 4px 10px;
+  border-radius: 0 6px 6px 0;
+  font-size: 13px;
+  color: var(--ink-2);
   text-decoration: none;
-  color: inherit;
 }
 
-a.row:hover {
-  border-color: var(--accent);
+.side-change:hover {
+  background: var(--surface-2);
+  color: var(--ink);
 }
 
-.row-name {
-  font-weight: 600;
+.side-change[aria-current='page'] {
+  margin-left: -2px;
+  border-left: 2px solid var(--line);
+  background: var(--line-soft);
+  color: var(--ink);
+  font-weight: 650;
 }
 
-.row-meta {
-  color: var(--muted);
+.side-empty {
+  margin: 4px 10px;
+  padding: 2px 0;
   font-size: 12px;
-}
-
-.row-time {
-  margin-left: auto;
   color: var(--muted);
-  font-size: 12px;
-  white-space: nowrap;
 }
 
-.row-error {
-  border-color: var(--error);
-  background: var(--error-bg);
+.side-changes .side-empty {
+  margin-left: 12px;
 }
 
-.parse-error {
-  color: var(--error);
+.side-foot {
+  margin: 18px 10px 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--rule);
   font-size: 12px;
+  color: var(--muted);
 }
 
-/* Ticket text wraps instead of being clipped. overflow-wrap: anywhere, not
-   break-word: only anywhere shrinks a flex item's min-content size, so a long
-   token breaks instead of widening the row. Inherits to title, link, summary. */
-.ticket-row {
-  flex-wrap: wrap;
-  overflow-wrap: anywhere;
+.nav-scrim {
+  position: fixed;
+  inset: var(--signbar-h) 0 0;
+  z-index: 25;
+  background: rgb(0 0 0 / 0.32);
 }
 
-/* The leading date reuses .row-time (margin-left:auto); cancel it so ticket
-   content stays packed to the left instead of being pushed to the right. */
-.ticket-row .row-time {
-  margin-left: 0;
+.nav-scrim[hidden] {
+  display: none;
 }
 
-.ticket-summary {
-  color: var(--muted);
-}
+@media (max-width: 959px) {
+  .shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
 
-.ticket-change {
-  color: var(--accent);
-  text-decoration: none;
-  font-size: 12px;
-}
+  .nav-toggle {
+    display: inline-flex;
+    width: 34px;
+    padding: 0;
+    justify-content: center;
+    flex: none;
+  }
 
-.ticket-change:hover {
-  text-decoration: underline;
+  .sidebar {
+    position: fixed;
+    top: var(--signbar-h);
+    bottom: 0;
+    left: 0;
+    z-index: 30;
+    width: min(300px, 86vw);
+    height: auto;
+    box-shadow: var(--shadow-tip);
+    transform: translateX(-102%);
+    visibility: hidden;
+    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.24s;
+  }
+
+  .sidebar.is-open {
+    transform: none;
+    visibility: visible;
+    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
+  }
 }
 
-/* -- badges -- */
-.badge {
-  font-size: 11px;
-  font-weight: 600;
-  padding: 1px 7px;
-  border-radius: 999px;
-  text-transform: lowercase;
+/* -- session activity: shape and motion, colour reinforcing ----------------------- */
+
+.activity-dot {
+  position: relative;
+  flex: none;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
 }
 
-.badge-requirement,
-.badge-sdd {
-  background: var(--badge-req-bg);
-  color: var(--badge-req-fg);
+.activity-working {
+  background: var(--live);
 }
 
-.badge-issue {
-  background: var(--badge-issue-bg);
-  color: var(--badge-issue-fg);
+/* A ring spreading from the disc: work is happening now. */
+.activity-working::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--live);
+  animation: activity-pulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
 }
 
-.badge-applying {
-  background: var(--badge-applying-bg);
-  color: var(--badge-applying-fg);
+@keyframes activity-pulse {
+  from {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2.6);
+  }
 }
 
-.badge-archiving {
-  background: var(--badge-archiving-bg);
-  color: var(--badge-archiving-fg);
+/* Half filled, blinking: the session is blocked on the person. */
+.activity-waiting {
+  border: 2px solid var(--wait);
+  background: linear-gradient(90deg, var(--wait) 50%, transparent 50%);
+  animation: activity-blink 1.2s steps(2, jump-none) infinite;
 }
 
-.badge-ready {
-  background: var(--badge-ready-bg);
-  color: var(--badge-ready-fg);
+@keyframes activity-blink {
+  50% {
+    opacity: 0.35;
+  }
 }
 
-.badge-unknown,
-.badge-artifact {
-  background: var(--border);
-  color: var(--muted);
+.activity-idle {
+  border: 2px solid var(--muted);
 }
 
-/* health-signal badges on rows */
-.badge-stale {
-  background: var(--warn-bg);
-  color: var(--ready);
+.activity-offline {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--rule-strong);
 }
 
-.badge-blocked-warn {
-  background: var(--error-bg);
-  color: var(--error);
+.icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--rule);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink-2);
+  cursor: pointer;
 }
 
-/* A change whose .tospec.yaml would not parse: every count beside it is a zero
-   rather than a measurement, so it is marked as an error, not a progress state. */
-.badge-unreadable {
-  background: var(--error-bg);
-  color: var(--error);
+.icon-button:hover {
+  border-color: var(--rule-strong);
+  color: var(--ink);
 }
 
-/* -- artifact blocks & status -- */
-.blocks {
-  display: inline-flex;
-  gap: 3px;
+.page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px 24px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
 }
 
-.block {
-  width: 12px;
-  height: 12px;
-  border-radius: 2px;
-  border: 1px solid var(--blocked);
+.page-title {
+  margin: 0;
+  font-size: 26px;
+  line-height: 1.25;
+  font-weight: 750;
+  letter-spacing: -0.01em;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
-.block-done {
-  background: var(--done);
-  border-color: var(--done);
+.page-sub {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 13px;
 }
 
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+.count {
   display: inline-block;
-  flex: none;
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  border: 1px solid var(--rule);
+  color: var(--ink-2);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
 }
 
-.dot-done {
-  background: var(--done);
-}
-.dot-ready {
-  background: var(--ready);
-}
-.dot-blocked {
-  background: var(--blocked);
+/* -- markers: shape carries the signal, colour only reinforces it ------------- */
+
+.marker {
+  flex: none;
+  overflow: visible;
 }
 
-.artifact-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 0;
+.marker-moving circle,
+.marker-running circle {
+  fill: var(--line);
 }
 
-.artifact-status {
-  color: var(--muted);
-  font-size: 12px;
+.marker-call circle {
+  fill: var(--surface);
+  stroke: var(--line);
+  stroke-width: 2.6;
 }
 
-.blocked-by {
-  color: var(--blocked);
-  font-size: 12px;
+.marker-idle circle {
+  fill: none;
+  stroke: var(--muted);
+  stroke-width: 2;
+  stroke-dasharray: 2.6 2.2;
 }
 
-/* -- detail views -- */
-.back {
-  display: inline-block;
-  margin-bottom: 12px;
-  color: var(--accent);
-  text-decoration: none;
+.marker-stop rect {
+  fill: var(--stop);
 }
 
-.back:hover {
-  text-decoration: underline;
+.marker-parked rect {
+  fill: var(--muted);
 }
 
-.meta {
+.legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 16px;
-  margin-bottom: 12px;
+  gap: 6px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  color: var(--ink-2);
 }
 
-.meta-item {
+.legend-item {
   display: inline-flex;
+  align-items: center;
   gap: 6px;
-  align-items: baseline;
 }
 
-.meta-label {
-  color: var(--muted);
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+.line-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
 }
 
-.task-progress {
-  font-weight: 600;
+.line-swatch {
+  flex: none;
+  display: inline-block;
+  width: 22px;
+  height: 7px;
+  border-radius: 4px;
+  background: var(--line);
+}
+
+.line-name {
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--ink-2);
 }
 
-details.file,
-details.archive {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
+/* -- notices: what needs the user, across every project ---------------------- */
+
+.notices {
+  margin-bottom: 20px;
+  padding: 14px 18px 6px;
   background: var(--surface);
-  margin-bottom: 6px;
-  padding: 4px 12px;
+  border: 1px solid var(--rule);
+  border-radius: 10px;
 }
 
-details.file summary,
-details.archive summary {
-  cursor: pointer;
+.notices-title {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 6px 0;
+  gap: 8px;
+  margin: 0 0 6px;
+  font-size: 15px;
+  font-weight: 700;
 }
 
-.rendered {
-  padding: 4px 2px 12px;
-  overflow-x: auto;
+.notices-clear {
+  padding: 10px 18px;
+  background: transparent;
+  border-style: dashed;
 }
 
-.rendered pre {
-  background: var(--bg);
-  padding: 12px;
-  border-radius: var(--radius);
-  overflow-x: auto;
+.notices-clear .notices-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
 }
 
-.rendered code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+.notice-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.rendered h1,
-.rendered h2,
-.rendered h3 {
-  line-height: 1.3;
+.notice {
+  display: grid;
+  grid-template-columns: 16px minmax(120px, max-content) minmax(0, max-content) minmax(0, 1fr);
+  align-items: center;
+  gap: 4px 12px;
+  padding: 9px 0;
+  border-top: 1px solid var(--rule);
+}
+
+.notice:first-child {
+  border-top: 0;
+}
+
+.notice-subject {
+  font-weight: 650;
+  overflow-wrap: anywhere;
 }
 
-.empty {
+.notice-text {
   color: var(--muted);
-  padding: 8px 2px;
+  font-size: 13px;
+  text-wrap: pretty;
 }
 
-.error {
+.notice-stop .notice-text {
   color: var(--error);
-  padding: 8px 12px;
-  border: 1px solid var(--error);
-  background: var(--error-bg);
-  border-radius: var(--radius);
+  font-weight: 600;
 }
 
-/* -- decisions tab -- */
+/* -- the route map ------------------------------------------------------------- */
+
+/* --terminal-room: past the last station the line ends, but the trains
+   waiting there still need a full column's width to read. */
+.map {
+  --label-w: 260px;
+  --terminal-room: 120px;
+  background: var(--surface);
+  border: 1px solid var(--rule);
+  border-radius: 12px;
+}
 
-/* The index floats over the page instead of scrolling with it: always
-   reachable while reading a long decision on the right. */
-.view-decisions {
-  max-width: none;
-  padding-left: 300px;
+.map-head {
+  position: sticky;
+  top: var(--signbar-h);
+  z-index: 4;
+  display: grid;
+  grid-template-columns: var(--label-w) repeat(4, minmax(0, 1fr)) var(--terminal-room);
+  align-items: end;
+  padding: 14px 0 10px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--rule);
+  border-radius: 12px 12px 0 0;
 }
 
-.decisions-index {
-  position: fixed;
-  left: 20px;
-  top: 12%;
-  height: 70vh;
-  width: 260px;
+.map-head-label {
+  padding-left: 22px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.map-head-station {
   display: flex;
   flex-direction: column;
-  padding: 12px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-  z-index: 5;
+  align-items: center;
+  gap: 1px;
+  text-align: center;
 }
 
-.decisions-search {
-  font: inherit;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 6px 10px;
-  margin-bottom: 8px;
-  flex: none;
+.map-head-station strong {
+  font-size: 15px;
+  font-weight: 750;
+  letter-spacing: 0.01em;
 }
 
-.decisions-list {
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
+.map-head-hint {
+  font-size: 12px;
+  color: var(--muted);
 }
 
-.decision-row {
-  display: block;
-  padding: 8px 10px;
-  margin-bottom: 4px;
-  border: 1px solid transparent;
-  border-radius: var(--radius);
-  text-decoration: none;
-  color: inherit;
+.map-head-count {
+  margin-top: 3px;
+  min-width: 22px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--ink);
+  color: var(--surface);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
 }
 
-.decision-row:hover {
-  border-color: var(--accent);
+.map-head-count.is-zero {
+  background: transparent;
+  color: var(--muted);
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 
-.decision-row-active {
-  border-color: var(--accent);
-  background: var(--bg);
+.line-row {
+  display: grid;
+  grid-template-columns: var(--label-w) minmax(0, 1fr) var(--terminal-room);
+  align-items: start;
+  padding: 20px 0 22px;
+  border-top: 1px solid var(--rule);
 }
 
-.decision-title {
-  font-weight: 600;
-  display: block;
+.map-head + .line-row {
+  border-top: 0;
 }
 
-.decision-meta {
-  display: flex;
+.line-label {
+  padding: 0 18px 0 22px;
+  min-width: 0;
+}
+
+.line-title {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.line-title a {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 9px;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.line-title a:hover span:last-child {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.line-title .line-swatch {
+  width: 28px;
+  height: 9px;
+  border-radius: 5px;
+}
+
+.line-status,
+.line-terminal {
+  margin: 4px 0 0;
+  font-size: 12px;
   color: var(--muted);
-  font-size: 11px;
-  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--line);
 }
 
-.decisions-content {
-  min-height: 200px;
+.status-word {
+  font-weight: 700;
+  color: var(--ink-2);
 }
 
-.badge-proposed {
-  background: var(--warn-bg);
-  color: var(--ready);
+.stations {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.badge-accepted {
-  background: var(--ok-bg);
-  color: var(--done);
+/* The line runs from the first station's centre to the last one's. */
+.track,
+.run-segment {
+  position: absolute;
+  top: 9px;
+  height: 8px;
+  border-radius: 4px;
 }
 
-.badge-superseded {
-  background: var(--border);
-  color: var(--muted);
+.track {
+  left: 12.5%;
+  right: 12.5%;
+  background: var(--line);
 }
 
-/* 決策過程 Q&A cards (client-side enhancement of the last section). */
-.qa-cards {
+/* A change being worked on right now: the segment it is about to travel
+   flows toward sync. */
+.run-segment {
+  display: none;
+  left: 37.5%;
+  width: 25%;
+  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--surface) 85%, transparent) 0 5px, transparent 5px 15px);
+  animation: run-flow 1.1s linear infinite;
+}
+
+.has-running .run-segment {
+  display: block;
+}
+
+@keyframes run-flow {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 15px 0;
+  }
+}
+
+/* No session runs the line: a thin, faded rail. Dashes are left to the one
+   segment that means "being worked on now". */
+.is-offline .track {
+  top: 11px;
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in oklab, var(--line) 38%, var(--surface));
+}
+
+.station {
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-top: 12px;
+  align-items: center;
+  min-width: 0;
+  padding: 0 10px;
 }
 
-.qa-card {
+.station-dot {
+  position: relative;
+  z-index: 1;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 4px solid var(--line);
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px 14px;
 }
 
-.qa-q {
-  font-weight: 600;
-  color: var(--accent);
-  margin-bottom: 6px;
+/* A terminal is drawn as the route map draws one: a longer stop at the line's end. */
+.station:last-child .station-dot {
+  width: 42px;
+  border-radius: 13px;
 }
 
-.qa-a {
-  color: var(--text);
-  white-space: pre-line; /* keep intentional line breaks in multi-line answers */
+.station.is-occupied .station-dot {
+  background: var(--line);
+  box-shadow: 0 0 0 3px var(--surface);
 }
 
-/* Narrow viewports: the fixed 70vh side panel would eat the whole screen —
-   drop it back into the normal document flow above the content. */
-@media (max-width: 900px) {
-  .view-decisions {
-    padding-left: 20px;
-  }
-  .decisions-index {
-    position: static;
-    width: auto;
-    height: auto;
-    max-height: 40vh;
-    margin-bottom: 16px;
+/* From an occupied station down to its first train. */
+.station.is-occupied::after {
+  content: '';
+  position: absolute;
+  top: 26px;
+  left: calc(50% - 1px);
+  width: 2px;
+  height: 18px;
+  background: var(--line);
+}
+
+.is-offline .station-dot {
+  border-color: color-mix(in oklab, var(--line) 45%, var(--surface));
+}
+
+.is-offline .station.is-occupied .station-dot {
+  background: color-mix(in oklab, var(--line) 45%, var(--surface));
+}
+
+.is-offline .station.is-occupied::after {
+  background: color-mix(in oklab, var(--line) 45%, var(--surface));
+}
+
+/* Trains hang from their station: each marker's centre sits on the station's
+   x (8px padding + half a 14px marker), and the block runs right as far as
+   the next station's x, where that station's own trains begin. */
+.trains {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-self: flex-start;
+  width: 100%;
+  margin: 14px 0 0 calc(50% - 15px);
+  padding: 0;
+  list-style: none;
+}
+
+/* Reaches into the label column's padding: a stopped train's name is the
+   row's most important text and should not break inside it. */
+.depot {
+  margin: 14px -14px 0;
+  padding-top: 10px;
+  border-top: 1px dashed var(--rule-strong);
+}
+
+.depot-title {
+  padding: 0 14px;
+}
+
+.depot-title {
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--ink-2);
+}
+
+.depot .trains {
+  width: auto;
+  margin: 0;
+}
+
+.station:last-child .trains {
+  width: calc(50% + var(--terminal-room) - 6px);
+}
+
+.train {
+  padding: 7px 8px 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease-out;
+}
+
+.train:hover {
+  background: var(--surface-2);
+}
+
+.train.signal-stop {
+  background: var(--error-bg);
+}
+
+.train.just-arrived {
+  animation: arrived 2.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes arrived {
+  from {
+    background-color: var(--line-soft);
+  }
+}
+
+.train-head {
+  display: grid;
+  grid-template-columns: 14px minmax(0, max-content) 24px;
+  justify-content: start;
+  align-items: center;
+  gap: 8px;
+}
+
+.train-name {
+  font-weight: 650;
+  line-height: 1.3;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.train-name:hover {
+  text-decoration: underline;
+}
+
+.train-toggle {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.train-toggle:hover {
+  background: var(--rule);
+  color: var(--ink);
+}
+
+.train-toggle .icon {
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.train-toggle[aria-expanded='true'] .icon {
+  transform: rotate(180deg);
+}
+
+.train-gap {
+  margin: 2px 0 0 22px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--muted);
+  text-wrap: pretty;
+}
+
+/* A phrase that must not split: CJK text breaks between any two characters,
+   which left a lone 析 on its own line. */
+.keep {
+  white-space: nowrap;
+}
+
+.signal-call .train-gap {
+  color: var(--ink-2);
+  font-weight: 600;
+}
+
+.train-reason {
+  display: block;
+  margin-top: 2px;
+  color: var(--ink-2);
+  overflow-wrap: anywhere;
+}
+
+.notice-hint {
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.drawer-goal code,
+.change-unreadable code {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+  overflow-wrap: anywhere;
+}
+
+.train-drawer {
+  margin: 8px 0 2px 22px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--rule-strong);
+  font-size: 12px;
+  color: var(--ink-2);
+}
+
+.drawer-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0;
+}
+
+.drawer-key {
+  width: 32px;
+  color: var(--muted);
+}
+
+.drawer-goal {
+  margin: 6px 0 0;
+  color: var(--muted);
+}
+
+.artifact-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin: 0 0 6px;
+  padding: 0;
+  list-style: none;
+}
+
+.artifact-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+}
+
+.chip-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 2px solid var(--line);
+}
+
+.status-done .chip-dot {
+  background: var(--line);
+}
+
+.status-blocked .chip-dot {
+  border-color: var(--rule-strong);
+  border-style: dashed;
+}
+
+.status-stub .chip-dot {
+  background: linear-gradient(90deg, var(--line) 50%, transparent 50%);
+}
+
+.meter {
+  display: inline-block;
+  width: 72px;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: color-mix(in oklab, var(--line) 20%, var(--surface));
+  vertical-align: middle;
+}
+
+.meter-fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  background: var(--line);
+}
+
+.mini-route {
+  display: none;
+}
+
+.line-note {
+  grid-column: 2;
+  margin: 12px 0 0;
+  text-align: center;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.line-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--error);
+}
+
+.badge-unreadable {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 3px;
+  background: var(--error-bg);
+  color: var(--error);
+  font-size: 11px;
+  font-weight: 750;
+  line-height: 18px;
+}
+
+.signal-stop .badge-unreadable {
+  background: var(--stop);
+  color: var(--stop-ink);
+}
+
+/* A page narrower than the map was drawn for (a 1280px window beside the
+   sidebar): the label column and the terminal give up width before the
+   station columns do, so change names keep whole words. */
+@container view (max-width: 1099px) {
+  .map {
+    --label-w: 210px;
+    --terminal-room: 100px;
+  }
+}
+
+/* Below the width four station columns can hold, each train carries its own
+   four-stop strip and the shared grid steps aside. Measured on the page, not
+   the window: beside the sidebar a 1280px window leaves the page ~1000px. */
+@container view (max-width: 959px) {
+  .map-head,
+  .track,
+  .run-segment,
+  .station-dot,
+  .station:not(.is-occupied) {
+    display: none;
+  }
+
+  .line-row {
+    grid-template-columns: minmax(0, 1fr);
+    padding: 16px 16px 12px;
+  }
+
+  .line-label {
+    padding: 0 0 8px;
+  }
+
+  .stations {
+    display: block;
+  }
+
+  .station {
+    display: block;
+    padding: 0;
+  }
+
+  .station.is-occupied::after {
+    display: none;
+  }
+
+  .trains,
+  .station:last-child .trains {
+    width: auto;
+    margin: 0;
+    gap: 0;
+  }
+
+  .train {
+    display: grid;
+    grid-template-columns: 108px minmax(0, 1fr);
+    grid-template-areas: 'route head' 'route gap' 'drawer drawer';
+    column-gap: 14px;
+    padding: 10px 6px;
+    border-top: 1px solid var(--rule);
+    border-radius: 0;
+  }
+
+  .train-head {
+    grid-area: head;
+  }
+
+  .train-gap {
+    grid-area: gap;
+  }
+
+  .train-drawer {
+    grid-area: drawer;
+    margin-left: 122px;
+  }
+
+  .mini-route {
+    grid-area: route;
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(4, 12px);
+    column-gap: 13px;
+    align-content: start;
+    padding-top: 3px;
+  }
+
+  .mini-route::before {
+    content: '';
+    position: absolute;
+    top: 7px;
+    left: 6px;
+    width: 75px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--line);
+  }
+
+  .mini-stop {
+    position: relative;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2.5px solid var(--line);
+    background: var(--surface);
+  }
+
+  .mini-stop.is-passed {
+    background: color-mix(in oklab, var(--line) 45%, var(--surface));
+  }
+
+  .mini-stop.is-here {
+    background: var(--line);
+    box-shadow: 0 0 0 3px var(--line-soft);
+  }
+
+  .mini-route.is-unknown::before {
+    background: var(--rule-strong);
+  }
+
+  .mini-route.is-unknown .mini-stop {
+    border-color: var(--rule-strong);
+    border-style: dashed;
+  }
+
+  .mini-label {
+    grid-column: 1 / -1;
+    margin-top: 5px;
+    font-size: 11px;
+    font-weight: 650;
+    color: var(--ink-2);
+  }
+
+  .line-note {
+    grid-column: 1;
+    text-align: left;
+  }
+
+  .line-error {
+    justify-content: flex-start;
+  }
+}
+
+/* Beside a terminal (a 620-959px page) the strip has room to read as a route. */
+@container view (min-width: 620px) and (max-width: 959px) {
+  .train {
+    grid-template-columns: 176px minmax(0, 1fr);
+  }
+
+  .mini-route {
+    column-gap: 30px;
+  }
+
+  .mini-route::before {
+    width: 126px;
+  }
+
+  .train-drawer {
+    margin-left: 190px;
+  }
+}
+
+/* -- onboarding ------------------------------------------------------------------ */
+
+.onboard {
+  max-width: 680px;
+  margin: 48px auto;
+}
+
+.onboard-lead {
+  font-size: 15px;
+  color: var(--ink-2);
+  max-width: 62ch;
+}
+
+.onboard-stations {
+  --line: var(--ink-2);
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 28px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.onboard-stations::before {
+  content: '';
+  position: absolute;
+  top: 9px;
+  left: 12.5%;
+  right: 12.5%;
+  height: 6px;
+  border-radius: 3px;
+  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 12px, transparent 12px 20px);
+}
+
+.onboard-stations li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  text-align: center;
+}
+
+.onboard-stations .station-dot {
+  display: block;
+  margin-bottom: 8px;
+  border-color: var(--rule-strong);
+}
+
+/* -- project page ------------------------------------------------------------------ */
+
+.project-head {
+  margin-bottom: 18px;
+}
+
+.project-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.project-title .line-swatch {
+  width: 34px;
+  height: 11px;
+  border-radius: 6px;
+}
+
+.project-root {
+  margin: 6px 0 0;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--ink-2);
+}
+
+.subnav {
+  display: flex;
+  gap: 4px;
+  margin-top: 16px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.subnav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px 10px;
+  margin-bottom: -1px;
+  font-weight: 650;
+  color: var(--muted);
+  text-decoration: none;
+  border-bottom: 3px solid transparent;
+}
+
+.subnav-link:hover {
+  color: var(--ink);
+}
+
+.subnav-link[aria-current='page'] {
+  color: var(--ink);
+  border-bottom-color: var(--line);
+}
+
+.map-single .line-row {
+  padding-top: 18px;
+}
+
+.drift-note {
+  margin: 16px 0 0;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px dashed var(--rule-strong);
+  color: var(--ink-2);
+  font-size: 13px;
+}
+
+/* -- charts ---------------------------------------------------------------------- */
+
+.charts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin: 28px 0 36px;
+}
+
+.chart {
+  position: relative;
+  min-width: 0;
+  margin: 0;
+  padding: 16px 18px 12px;
+  background: var(--surface);
+  border: 1px solid var(--rule);
+  border-radius: 12px;
+}
+
+.chart-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 750;
+}
+
+.chart-summary {
+  margin: 2px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.chart-plot {
+  margin-top: 14px;
+  min-height: 24px;
+}
+
+.chart-svg {
+  display: block;
+  overflow: visible;
+}
+
+.chart-svg text {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  fill: var(--muted);
+}
+
+.chart-svg .tick {
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-svg .row-label {
+  fill: var(--ink-2);
+}
+
+.chart-svg .value {
+  fill: var(--ink);
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-svg .grid {
+  stroke: var(--rule);
+  stroke-width: 1;
+}
+
+.chart-svg .axis {
+  stroke: var(--rule-strong);
+  stroke-width: 1;
+}
+
+.chart-svg .hit {
+  fill: transparent;
+}
+
+.chart-svg [data-tip]:hover .hit {
+  fill: var(--surface-2);
+}
+
+.chart-svg .threshold {
+  stroke: var(--ink-2);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+}
+
+.chart-svg .threshold-label {
+  fill: var(--ink-2);
+  font-size: 11px;
+}
+
+.chart-svg .run {
+  stroke: var(--line);
+  stroke-width: 6;
+  stroke-linecap: round;
+}
+
+.chart-svg .idle {
+  stroke: var(--muted);
+  stroke-width: 2;
+  stroke-dasharray: 2 4;
+  stroke-linecap: round;
+}
+
+.chart-svg .seen {
+  fill: var(--line);
+  stroke: var(--surface);
+  stroke-width: 2;
+}
+
+/* A stale change's last-seen dot takes the idle marker's dashed ring. */
+.chart-svg .is-stale .seen {
+  fill: var(--surface);
+  stroke: var(--muted);
+  stroke-dasharray: 2.4 2;
+}
+
+.chart-svg .is-stale .row-label {
+  fill: var(--ink);
+  font-weight: 700;
+}
+
+.chart-svg .bar {
+  fill: var(--line);
+}
+
+.chart-svg .bar.is-other {
+  fill: color-mix(in oklab, var(--line) 45%, var(--surface));
+}
+
+.adr-accepted {
+  fill: var(--line);
+  stroke: var(--surface);
+  stroke-width: 2;
+}
+
+.adr-proposed {
+  fill: var(--surface);
+  stroke: var(--line);
+  stroke-width: 2.2;
+}
+
+.adr-superseded {
+  fill: none;
+  stroke: var(--muted);
+  stroke-width: 1.8;
+  stroke-linecap: round;
+}
+
+.adr-other {
+  fill: var(--muted);
+}
+
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  color: var(--ink-2);
+}
+
+.chart-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-swatch {
+  overflow: visible;
+}
+
+.chart-tip {
+  position: absolute;
+  z-index: 6;
+  max-width: 260px;
+  padding: 6px 9px;
+  border-radius: 6px;
+  background: var(--sign);
+  color: var(--sign-ink);
+  font-size: 12px;
+  line-height: 1.45;
+  pointer-events: none;
+  box-shadow: var(--shadow-tip);
+}
+
+.chart-tip.is-flipped {
+  transform: translateX(-100%);
+}
+
+.chart-table {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.chart-table summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  color: var(--muted);
+  list-style: none;
+}
+
+.chart-table summary::-webkit-details-marker {
+  display: none;
+}
+
+.chart-table summary .icon {
+  transform: rotate(-90deg);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.chart-table[open] summary .icon {
+  transform: none;
+}
+
+.chart-table summary:hover {
+  color: var(--ink);
+}
+
+.data-table {
+  width: 100%;
+  margin-top: 8px;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+.data-table th {
+  text-align: left;
+  font-weight: 650;
+  color: var(--ink-2);
+  border-bottom: 1px solid var(--rule-strong);
+  padding: 4px 8px 4px 0;
+}
+
+.data-table td {
+  padding: 4px 8px 4px 0;
+  border-bottom: 1px solid var(--rule);
+  overflow-wrap: anywhere;
+}
+
+/* -- lists ------------------------------------------------------------------------- */
+
+.project-lists {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 28px 40px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 750;
+}
+
+.plain-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--rule);
+}
+
+.row-name {
+  font-weight: 650;
+}
+
+a.row-name {
+  text-decoration: none;
+}
+
+a.row-name:hover {
+  text-decoration: underline;
+}
+
+.row-meta,
+.row-time {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.row-time {
+  white-space: nowrap;
+}
+
+/* Ticket text wraps instead of being clipped. overflow-wrap: anywhere, not
+   break-word: only anywhere shrinks a flex item's min-content size, so a long
+   token breaks instead of widening the row. Inherits to title, link, summary. */
+.ticket-row {
+  flex-wrap: wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The leading date reuses .row-time (margin-left:auto); cancel it so ticket
+   content stays packed to the left instead of being pushed to the right. */
+.ticket-row .row-time {
+  margin-left: 0;
+}
+
+.ticket-summary {
+  flex-basis: 100%;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.ticket-change {
+  font-size: 12px;
+}
+
+.row-error {
+  background: var(--error-bg);
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 6px;
+}
+
+/* -- the project's sessions -------------------------------------------------------- */
+
+.sessions-board {
+  margin: 20px 0 0;
+  padding: 14px 18px 8px;
+  background: var(--surface);
+  border: 1px solid var(--rule);
+  border-radius: 10px;
+}
+
+/* Session ids are full UUIDs: the id column takes the slack and wraps rather
+   than push the time and the buttons off a narrow screen. */
+.session-row {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 8px 0;
+  border-top: 1px solid var(--rule);
+}
+
+.session-row:first-child {
+  border-top: 0;
+}
+
+.session-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--ink-2);
+}
+
+.session-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.session-id {
+  overflow-wrap: anywhere;
+}
+
+.session-detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.session-row.is-waiting .session-detail {
+  font-weight: 600;
+  color: var(--ink-2);
+}
+
+.session-actions {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.tag {
+  display: inline-block;
+  padding: 0 7px;
+  border-radius: 4px;
+  border: 1px solid var(--rule);
+  background: var(--surface-2);
+  color: var(--ink-2);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.tag-strong {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: var(--surface);
+}
+
+.tag.status-proposed {
+  border-color: var(--ink-2);
+  color: var(--ink);
+}
+
+.tag.status-superseded {
+  text-decoration: line-through;
+  color: var(--muted);
+}
+
+/* -- change page ------------------------------------------------------------------- */
+
+.page-change,
+.page-doc {
+  max-width: 1080px;
+}
+
+.change-head .page-title {
+  font-size: 28px;
+}
+
+.change-signal {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  margin: 10px 0 0;
+  font-size: 14px;
+  color: var(--ink-2);
+}
+
+.change-signal strong {
+  color: var(--ink);
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 3px 16px;
+  margin: 16px 0 0;
+  font-size: 13px;
+}
+
+.meta dt {
+  color: var(--muted);
+}
+
+.meta dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.change-goal,
+.change-unreadable {
+  margin: 12px 0 0;
+  max-width: 75ch;
+  color: var(--ink-2);
+}
+
+.change-unreadable p {
+  margin: 0;
+}
+
+.change-unreadable .stop-reason {
+  margin-top: 6px;
+  overflow-wrap: anywhere;
+}
+
+.change-unreadable .stop-fix {
+  margin-top: 4px;
+  color: var(--muted);
+}
+
+.station-strip {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  max-width: 640px;
+  margin: 24px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.station-strip::before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 12.5%;
+  right: 12.5%;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--line);
+}
+
+.strip-stop {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.strip-dot {
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  border: 3.5px solid var(--line);
+  background: var(--surface);
+}
+
+.strip-stop.is-passed .strip-dot {
+  background: color-mix(in oklab, var(--line) 45%, var(--surface));
+}
+
+.strip-stop.is-here .strip-dot {
+  background: var(--line);
+  box-shadow: 0 0 0 4px var(--line-soft);
+}
+
+.strip-stop.is-here {
+  color: var(--ink);
+  font-weight: 750;
+}
+
+.detail-section {
+  margin-top: 36px;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.section-head .section-title {
+  margin: 0;
+}
+
+.meter-wide {
+  width: 220px;
+  height: 8px;
+  border-radius: 4px;
+}
+
+.artifact-route {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 16px;
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.artifact-stop {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 140px;
+  padding: 26px 16px 0 0;
+}
+
+.artifact-stop:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 8px;
+  right: 0;
+  height: 4px;
+  background: var(--line);
+}
+
+.artifact-dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 3.5px solid var(--line);
+  background: var(--surface);
+}
+
+.artifact-stop.status-done .artifact-dot {
+  background: var(--line);
+}
+
+.artifact-stop.status-stub .artifact-dot {
+  background: linear-gradient(90deg, var(--line) 50%, var(--surface) 50%);
+}
+
+.artifact-stop.status-blocked .artifact-dot {
+  border-color: var(--rule-strong);
+  border-style: dashed;
+}
+
+.artifact-stop.status-ready .artifact-state {
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.artifact-id {
+  font-weight: 650;
+}
+
+.artifact-state {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.lock-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0 4px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--rule);
+  color: var(--ink-2);
+  font-size: 13px;
+}
+
+.task-file {
+  margin: 18px 0 4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.task-list {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.task-item {
+  border-bottom: 1px solid var(--rule);
+}
+
+.task-label {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 7px 0;
+  cursor: pointer;
+}
+
+.task-box {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--line);
+  transform: translateY(3px);
+  cursor: pointer;
+}
+
+.task-item.is-done .task-text {
+  color: var(--muted);
+  text-decoration: line-through;
+  text-decoration-color: var(--rule-strong);
+}
+
+.task-item.is-locked .task-label,
+.task-item.is-locked .task-box {
+  cursor: default;
+}
+
+.task-item.is-saving {
+  opacity: 0.6;
+}
+
+.task-error {
+  display: block;
+  margin: 0 0 8px 26px;
+  color: var(--error);
+  font-size: 12px;
+}
+
+details.file {
+  border-bottom: 1px solid var(--rule);
+}
+
+.file-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  cursor: pointer;
+  list-style: none;
+}
+
+.file-summary::-webkit-details-marker {
+  display: none;
+}
+
+.file-summary .icon {
+  color: var(--muted);
+  transform: rotate(-90deg);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+details.file[open] > .file-summary .icon {
+  transform: none;
+}
+
+.file-path {
+  overflow-wrap: anywhere;
+}
+
+details.file > .rendered {
+  padding: 4px 0 20px 22px;
+}
+
+/* -- reading ------------------------------------------------------------------------- */
+
+.rendered {
+  max-width: 75ch;
+  overflow-wrap: anywhere;
+}
+
+.rendered h1,
+.rendered h2,
+.rendered h3,
+.rendered h4 {
+  line-height: 1.3;
+  margin: 1.8em 0 0.5em;
+  text-wrap: balance;
+}
+
+.rendered h1 {
+  font-size: 22px;
+}
+
+.rendered h2 {
+  font-size: 19px;
+}
+
+.rendered h3 {
+  font-size: 16px;
+}
+
+.rendered h4 {
+  font-size: 14px;
+}
+
+.rendered > :first-child {
+  margin-top: 0;
+}
+
+.rendered code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  background: var(--surface-2);
+}
+
+.rendered pre {
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--rule);
+  overflow-x: auto;
+}
+
+.rendered pre code {
+  padding: 0;
+  background: none;
+}
+
+.rendered table {
+  border-collapse: collapse;
+  font-size: 13px;
+  display: block;
+  overflow-x: auto;
+}
+
+.rendered th,
+.rendered td {
+  border: 1px solid var(--rule);
+  padding: 5px 9px;
+  text-align: left;
+}
+
+.rendered blockquote {
+  margin: 1em 0;
+  padding: 2px 0 2px 14px;
+  border-left: 1px solid var(--rule-strong);
+  color: var(--ink-2);
+}
+
+.running-head {
+  position: sticky;
+  top: var(--signbar-h);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 16px 0 12px;
+  padding: 8px 0;
+  background: var(--ground);
+  border-bottom: 1px solid var(--rule);
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--ink-2);
+}
+
+.running-head::before {
+  content: '';
+  flex: none;
+  width: 18px;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--line);
+}
+
+.running-head.is-empty {
+  visibility: hidden;
+}
+
+.doc-layout {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 40px;
+  align-items: start;
+}
+
+.doc-toc {
+  position: sticky;
+  top: calc(var(--signbar-h) + 52px);
+  max-height: calc(100vh - var(--signbar-h) - 72px);
+  overflow-y: auto;
+}
+
+.toc-title {
+  margin: 0 0 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.toc-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.toc-link {
+  display: block;
+  width: 100%;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 5px;
+  background: none;
+  text-align: left;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--ink-2);
+  cursor: pointer;
+}
+
+.toc-link:hover {
+  background: var(--surface-2);
+  color: var(--ink);
+}
+
+.doc-layout:has(.doc-toc[hidden]) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.decision-layout {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 40px;
+  align-items: start;
+  margin-top: 20px;
+}
+
+.decision-index {
+  position: sticky;
+  top: calc(var(--signbar-h) + 16px);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--signbar-h) - 32px);
+}
+
+.search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  border: 1px solid var(--rule-strong);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--muted);
+}
+
+.search-wrap:focus-within {
+  outline: 2px solid var(--focus);
+  outline-offset: 1px;
+}
+
+.search {
+  width: 100%;
+  padding: 8px 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+}
+
+.search::placeholder {
+  color: var(--muted);
+}
+
+.decision-list {
+  min-height: 0;
+  margin: 10px 0 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.decision-link {
+  display: block;
+  padding: 8px 10px;
+  border-radius: 8px;
+  text-decoration: none;
+}
+
+.decision-link:hover {
+  background: var(--surface-2);
+}
+
+.decision-link[aria-current='page'] {
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--rule-strong);
+}
+
+.decision-title {
+  display: block;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+.decision-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 3px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.reader-title {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1.3;
+  text-wrap: balance;
+}
+
+.qa-list {
+  margin: 0;
+  max-width: 75ch;
+}
+
+.qa-q {
+  margin-top: 16px;
+  font-weight: 700;
+}
+
+.qa-a {
+  margin: 4px 0 0;
+  color: var(--ink-2);
+  white-space: pre-line;
+}
+
+/* -- buttons ------------------------------------------------------------------------ */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--rule-strong);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.button:hover:not(:disabled) {
+  border-color: var(--ink-2);
+}
+
+.button-primary {
+  border-color: var(--ink);
+  background: var(--ink);
+  color: var(--surface);
+}
+
+.button-primary:hover:not(:disabled) {
+  border-color: var(--ink-2);
+  background: var(--ink-2);
+}
+
+.button-small {
+  min-height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* -- a project line's sessions, and a line with a session at work --------------------- */
+
+.line-sessions {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 6px 0 0 -6px;
+  padding: 0;
+  list-style: none;
+}
+
+.session-chip {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 3px 6px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.session-chip:hover {
+  background: var(--surface-2);
+}
+
+.session-chip-state {
+  flex: none;
+  font-weight: 650;
+  color: var(--ink-2);
+}
+
+.session-chip-detail {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+}
+
+.session-chip.is-working .session-chip-detail {
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-2);
+}
+
+.session-chip.is-waiting .session-chip-state {
+  color: var(--ink);
+}
+
+/* The whole line flows while a session works: a moving sheen along the track,
+   in the line's own colour, so motion and not a new colour says "now". */
+.line-row.is-working .track {
+  background-image: repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in oklab, var(--surface) 55%, transparent) 18px 26px);
+  background-size: 26px 100%;
+  animation: run-flow-wide 0.9s linear infinite;
+}
+
+@keyframes run-flow-wide {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 26px 0;
+  }
+}
+
+.line-row.is-working .line-title .line-swatch {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--live) 35%, transparent);
+}
+
+.notice-wait {
+  margin: 0 -10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--wait) 9%, var(--surface));
+}
+
+.notice-wait .activity-dot {
+  justify-self: center;
+}
+
+button.notice-subject {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-weight: 650;
+  text-align: left;
+  text-decoration: underline;
+  text-decoration-color: var(--rule-strong);
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+button.notice-subject:hover {
+  text-decoration-color: currentColor;
+}
+
+.notice-wait .notice-text {
+  color: var(--ink-2);
+  font-weight: 600;
+}
+
+/* -- the session panel: beside the page, never over the part being read ------------- */
+
+.session-panel {
+  position: fixed;
+  top: var(--signbar-h);
+  right: 0;
+  bottom: 0;
+  z-index: 28;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  width: min(460px, 100vw);
+  background: var(--surface);
+  border-left: 1px solid var(--rule);
+  box-shadow: var(--shadow-tip);
+}
+
+.session-panel[hidden] {
+  display: none;
+}
+
+/* Wide windows make room for it instead of letting it cover the page. */
+@media (min-width: 1200px) {
+  .has-session-panel .shell {
+    margin-right: 460px;
+  }
+}
+
+.sp-head {
+  padding: 12px 14px 10px 16px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.sp-head-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.sp-dot {
+  display: inline-flex;
+}
+
+.sp-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 750;
+}
+
+.sp-title:focus {
+  outline: none;
+}
+
+.sp-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin: 6px 0 0;
+  font-size: 13px;
+}
+
+.sp-detail {
+  min-width: 0;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.sp-scroll {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 8px 0 12px;
+}
+
+.sp-log-note {
+  margin: 8px 16px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sp-log-note:empty {
+  display: none;
+}
+
+.sp-log {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sp-entry {
+  display: grid;
+  grid-template-columns: 58px 64px minmax(0, 1fr);
+  gap: 8px;
+  padding: 5px 16px;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.sp-time {
+  padding-top: 1px;
+  font-size: 11.5px;
+  color: var(--muted);
+}
+
+.sp-who {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  color: var(--ink-2);
+}
+
+.sp-body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+}
+
+.sp-entry.kind-prompt {
+  background: var(--surface-2);
+}
+
+.sp-entry.kind-prompt .sp-who {
+  color: var(--ink);
+}
+
+.sp-entry.kind-tool .sp-who {
+  font-size: 11.5px;
+}
+
+.sp-entry.kind-tool .sp-body {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  white-space: normal;
+}
+
+.sp-target {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ink-2);
+}
+
+.sp-mark {
+  flex: none;
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.sp-entry.is-fail .sp-mark {
+  font-weight: 700;
+  color: var(--error);
+}
+
+.sp-entry.kind-ask,
+.sp-entry.kind-permission {
+  box-shadow: inset 3px 0 0 var(--wait);
+}
+
+.sp-ask {
+  max-height: 46vh;
+  overflow-y: auto;
+  padding: 12px 16px;
+  border-top: 1px solid var(--rule);
+  background: color-mix(in oklab, var(--wait) 8%, var(--surface));
+}
+
+.sp-ask-hint {
+  margin: -4px 0 10px;
+}
+
+.sp-ask-title {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.sp-question {
+  margin: 0 0 12px;
+  padding: 0;
+  border: 0;
+}
+
+.sp-question legend {
+  margin-bottom: 6px;
+  padding: 0;
+  font-weight: 650;
+}
+
+.sp-option {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+  padding: 5px 4px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.sp-option:hover {
+  background: var(--surface);
+}
+
+.sp-option input {
+  margin: 3px 0 0;
+}
+
+.sp-option-desc {
+  display: block;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sp-option-other {
+  align-items: center;
+}
+
+.sp-other {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--rule-strong);
+  border-radius: 6px;
+  background: var(--surface);
+}
+
+.sp-permission {
+  margin: 0 0 6px;
+  overflow-wrap: anywhere;
+}
+
+.sp-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Says what the panel will not do: the terminal stays where a session is told what to do. */
+.sp-foot {
+  margin: 0;
+  padding: 10px 16px 12px;
+  border-top: 1px solid var(--rule);
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sp-form-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.sp-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* -- toasts: a session needs you, or has finished ------------------------------------ */
+
+/* Bottom right, clear of the session panel: beside it on a wide window, on
+   the other side of the screen where the panel covers the page. */
+.toasts {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  width: min(380px, calc(100vw - 32px));
+  pointer-events: none;
+}
+
+.has-session-panel .toasts {
+  right: auto;
+  left: 16px;
+}
+
+@media (min-width: 1200px) {
+  .has-session-panel .toasts {
+    left: auto;
+    right: 476px;
+  }
+}
+
+.toast {
+  pointer-events: auto;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 6px;
+  width: 100%;
+  padding: 10px 8px 10px 12px;
+  border: 1px solid var(--rule-strong);
+  border-left-width: 4px;
+  border-radius: 10px;
+  background: var(--surface);
+  box-shadow: var(--shadow-tip);
+  animation: toast-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.toast-wait {
+  border-left-color: var(--wait);
+}
+
+.toast-idle {
+  border-left-color: var(--muted);
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+.toast-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.toast-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  font-size: 13px;
+}
+
+.toast-main:hover strong {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.toast-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  font-size: 12.5px;
+  color: var(--ink-2);
+  overflow-wrap: anywhere;
+}
+
+.toast-close {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.toast-close:hover {
+  background: var(--surface-2);
+  color: var(--ink);
+}
+
+/* The notification switch reads as on by its fill, not only by its icon. */
+.sign-button[aria-pressed='true'] {
+  border-color: color-mix(in oklab, var(--sign-ink) 55%, transparent);
+  background: color-mix(in oklab, var(--sign-ink) 14%, var(--sign-2));
+}
+
+/* -- narrow: the page's own width, then the window's ------------------------------- */
+
+@container view (max-width: 820px) {
+  .charts,
+  .project-lists {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .doc-layout,
+  .decision-layout {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 20px;
+  }
+
+  .doc-toc {
+    display: none;
+  }
+
+  .decision-index {
+    position: static;
+    max-height: 42vh;
+  }
+
+  .notice {
+    grid-template-columns: 16px minmax(0, 1fr);
+  }
+
+  .notice > :nth-child(n + 3) {
+    grid-column: 2;
+  }
+
+  .session-row {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+
+  .session-row .session-main {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@container view (max-width: 600px) {
+  .page-title {
+    font-size: 22px;
+  }
+
+  .train {
+    grid-template-columns: 96px minmax(0, 1fr);
+    column-gap: 10px;
+  }
+
+  .mini-route {
+    column-gap: 9px;
+  }
+
+  .mini-route::before {
+    width: 63px;
+  }
+
+  .train-drawer {
+    margin-left: 0;
+  }
+
+  /* The inner line turns vertical: wrapped rows left connectors pointing at
+     empty space. */
+  .artifact-route {
+    flex-direction: column;
+    row-gap: 0;
+  }
+
+  .artifact-stop {
+    flex-direction: row;
+    align-items: baseline;
+    gap: 10px;
+    min-width: 0;
+    padding: 0 0 14px 30px;
+  }
+
+  .artifact-stop:not(:last-child)::before {
+    top: 18px;
+    left: 7px;
+    right: auto;
+    width: 4px;
+    height: calc(100% - 18px);
+  }
+}
+
+/* The sign bar and the page's own padding follow the window: a container
+   query styles what is inside the page, never the page box itself. */
+@media (max-width: 640px) {
+  .signbar {
+    gap: 12px;
+    padding: 0 12px;
+  }
+
+  .btn-text,
+  .crumbs {
+    display: none;
+  }
+
+  .hub-status {
+    gap: 5px;
+  }
+
+  /* The station-dot mark alone still leads home and is labelled; the words
+     give their width to the back link. */
+  .wordmark {
+    font-size: 0;
+    gap: 0;
+  }
+
+  .crumb-back:not([hidden]) {
+    display: inline-flex;
+  }
+
+  .theme-field select {
+    max-width: 84px;
+    padding: 0 6px;
+  }
+
+  .sign-button {
+    width: 32px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .view {
+    padding: 20px 14px 56px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .run-segment,
+  .sign-button:disabled .icon,
+  .activity-working::after,
+  .activity-waiting,
+  .line-row.is-working .track,
+  .toast {
+    animation: none;
+  }
+
+  .train-toggle .icon,
+  .side-toggle .icon,
+  .sidebar,
+  .sidebar.is-open,
+  .file-summary .icon,
+  .chart-table summary .icon {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .track,
+  .station-dot,
+  .line-swatch {
+    forced-color-adjust: none;
   }
 }