/* self-hosted Latin subsets of Source Serif 4, Source Sans 3 and JetBrains Mono (SIL OFL) */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/fonts/source-sans-3.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* A self-hosted subset of Noto Serif CJK SC (SIL OFL 1.1): the board's and the court page's CJK glyphs only. */
@font-face {
  font-family: 'Sansheng Serif SC';
  src: url('/fonts/noto-serif-sc.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E09, U+4E0B, U+4E2D, U+4E66, U+4E8B, U+505C, U+516D, U+51C6, U+529E, U+5370, U+5386, U+53F2, U+542F, U+5802, U+58A8, U+591C, U+5B8C, U+5BA1, U+5C1A, U+5DE5, U+5E9F, U+5EAD, U+5F85, U+5FA1, U+603B, U+6210, U+6237, U+6267, U+6279, U+6536, U+6587, U+663C, U+6682, U+66F8, U+671D, U+672A, U+6731, U+6B62, U+6C47, U+6C60, U+767D, U+7701, U+793C, U+7ED9, U+8349, U+884C, U+8BAE, U+8BCF, U+8D77, U+8FD0, U+90E8, U+9580, U+95E8, U+9A73;
}
/* THEME:BEGIN */
:root, :root[data-theme="night"] {
  --scheme: dark;
  --paper: #0d1220;
  --text: #c9cfdc;
  --cinnabar: #c3272b;
  --ink: color-mix(in srgb, var(--text) 56%, var(--paper));
  --seal-ink: var(--text);
  --card: color-mix(in srgb, var(--text) 6%, var(--paper));
  --wash: color-mix(in srgb, var(--text) 3%, var(--paper));
}
:root[data-theme="day"] {
  --scheme: light;
  --paper: #f5efe0;
  --text: #1f1c18;
  --cinnabar: #b02a1d;
  --ink: #6b655b;
  --seal-ink: var(--paper);
  --card: var(--paper);
  --wash: color-mix(in srgb, var(--text) 5.5%, var(--paper));
}
/* THEME:END */
/* The derived tones and the five project tints (`court.css`'s formulas), then the M42 names the
   board's rules read, each resolved to a court tone (M48 D2); the scale tokens are the board's. */
:root {
  --mist: color-mix(in srgb, var(--text) 68%, var(--paper));
  --ink-soft: color-mix(in srgb, var(--text) 16%, var(--paper));
  --seal-wash: color-mix(in srgb, var(--cinnabar) 9%, var(--paper));
  --cinnabar-text: color-mix(in srgb, var(--cinnabar) 60%, var(--text));
  --tint-0: #7f978a;
  --tint-1: #a8956f;
  --tint-2: #7e8b9b;
  --tint-3: #937f90;
  --tint-4: #a67d6c;
  --ghost-op: 0.15;
  --wait-op: 0.55;
  --bg: var(--paper);
  --panel: var(--paper);
  --surface: var(--card);
  --surface-2: var(--wash);
  --text-dim: var(--mist);
  --text-mute: var(--mist);
  --line: var(--ink);
  --line-soft: var(--ink-soft);
  --cinnabar-soft: var(--cinnabar);
  --crimson: var(--cinnabar);
  --crimson-text: var(--cinnabar-text);
  --gold: var(--text);
  --amber: var(--text);
  --jade: var(--text);
  --indigo: var(--ink);
  --indigo-text: var(--mist);
  --stone: var(--ink);
  --stone-text: var(--mist);
  --tint-cinnabar: var(--seal-wash);
  --tint-crimson: var(--seal-wash);
  --tint-jade: var(--wash);
  --tint-amber: var(--wash);
  --tint-gold: var(--wash);
  --tint-indigo: var(--wash);
  --tint-stone: var(--wash);
  --edge-cinnabar: var(--cinnabar);
  --edge-gold: var(--ink);
  /* flat paper: elevation is the 1px ink frame */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-lift: none;
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 3px var(--text);
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --font-display: 'Source Serif 4', 'Sansheng Serif SC', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans Mono CJK SC', 'SFMono-Regular', Consolas, monospace;
  /* spacing: a 4px grid with two half-steps */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 24px; --sp-8: 32px;
  /* type scale (px; root stays 14) */
  --fs-micro: 12px; --fs-xs: 12px; --fs-s: 13px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 20px; --fs-hero: 28px;
  --lh-tight: 1.25; --lh-body: 1.45; --lh-mono: 1.5;
  /* layering */
  --z-sticky: 2; --z-dock-handle: 3; --z-panel: 10; --z-drag: 40; --z-popover: 50; --z-toast: 60;
  /* radius */
  --radius-pill: 999px;
  /* motion (§6.2) */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms;
  --dur-deliberate: 560ms; --dur-ambient: 2400ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1); --ease-stamp: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: var(--scheme);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}
/* M48 D2: the focused project's tint, on the board and the panel (court.css's rules). */
.pj-0 { --pj: var(--tint-0); }
.pj-1 { --pj: var(--tint-1); }
.pj-2 { --pj: var(--tint-2); }
.pj-3 { --pj: var(--tint-3); }
.pj-4 { --pj: var(--tint-4); }

* { box-sizing: border-box; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: var(--text);
  background: var(--bg);
  transition: background-color 0.6s ease, color 0.6s ease;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text-dim);
  padding: 4px 12px;
  transition: border-color 0.15s, background 0.15s;
}

button:hover { border-color: var(--text-mute); }
button:disabled { cursor: default; opacity: 0.6; }
/* §9.2: a focused card wrapper rings its card; `:where` keeps the old `.card:focus-visible` weight. */
button:focus-visible, .card-wrap:focus-visible > :where(.card) { outline: none; box-shadow: var(--focus-ring); }
.card-wrap:focus-visible { outline: none; }

/* M48 D2: the court-carved primary; the cinnabar fill is the momentary `:active` state. */
button[type="submit"], .gate-actions button:first-child, button.primary {
  background: var(--seal-wash);
  border-color: var(--cinnabar);
  color: var(--text);
  font-weight: 600;
}

button[type="submit"]:active, .gate-actions button:first-child:active, button.primary:active {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: var(--seal-ink);
}

textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 6px 8px;
  resize: vertical;
}

textarea::placeholder { color: var(--text-mute); }
textarea:focus { outline: none; border-color: var(--cinnabar-soft); }
textarea:focus-visible { box-shadow: var(--focus-ring); }

/* §4.1: one 48px row; the popovers and the compose sheet hang below it. */
.top {
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--ink-soft);
  background: var(--panel);
  position: relative;
  z-index: var(--z-popover);
}

.top h1 {
  font: 600 var(--fs-xl)/1.2 var(--font-display);
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--text);
  white-space: nowrap;
}

/* M47 D1: the link to the court page, beside the wordmark. */
.court-link { color: var(--text-dim); font-size: var(--fs-s); text-decoration: none; white-space: nowrap; }
.court-link:hover { color: var(--text); text-decoration: underline; }

.switcher, .overflow { position: relative; }
/* M48 D6: the switcher wears the court page's pressed chip, with the focused project's tint dot. */
.project-switch { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 32px; padding: 5px 12px 5px 10px;
  border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--card); color: var(--text); font-size: 13px; }
.project-switch::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--pj, var(--ink)); }
.popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  padding: var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-3);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.popover[hidden] { display: none; }
.overflow .popover { left: auto; right: 0; }
.pop-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.included-paths { margin: 0; font-size: var(--fs-s); white-space: pre-wrap; overflow-wrap: anywhere; }
.overflow-button { font-size: var(--fs-l); line-height: 1; padding: 2px 10px; }
.menu-item { text-align: left; background: none; border-color: transparent; }
.menu-item:hover { background: var(--surface); }
.menu-item[aria-pressed="true"] { color: var(--indigo-text); }
/* M53 D4.2: the Agents feed radiogroup, Auto / Open / Closed. */
.menu-radios { display: flex; align-items: center; gap: 4px; padding: 2px 12px; }
.menu-radios-label { margin-right: auto; font-size: var(--fs-xs); color: var(--mist); }
.menu-radios [role="radio"] { padding: 1px 8px; background: none; border-color: transparent; color: var(--mist); font-size: 12px; }
.menu-radios [role="radio"][aria-checked="true"] { color: var(--text); border-color: var(--indigo); }
.overflow-menu .onboarding { max-width: 340px; padding: 0 12px; }
.overflow-menu .onboarding summary { cursor: pointer; color: var(--text-dim); padding: 4px 0; }
.shortcuts { min-width: 340px; }
.shortcuts h2 { margin: 0; font-size: var(--fs-m); }
.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); margin: 0; }
.shortcuts dd { margin: 0; color: var(--text-dim); }
.shortcuts p { margin: 0; font-size: var(--fs-s); }
kbd { font: var(--fs-micro) var(--font-mono); color: var(--text-mute); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-s); padding: 0 4px; }

/* M53 D3a: the compose chip in the header and its sheet; the 印 chop is the sheet's one cinnabar mark. */
.composer { position: relative; flex: 1; margin-right: auto; }
.compose-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 10px 5px 8px;
  border: 1px solid var(--ink-soft); border-radius: var(--radius-pill); background: var(--card); color: var(--mist); font-size: 13px; }
.compose-chip:hover:not(:disabled), .compose-chip[aria-expanded="true"] { color: var(--text); border-color: var(--ink); }
.compose-chip .glyph { font-family: var(--font-display); color: var(--text); }
.compose-chip kbd { margin-left: 4px; }
.compose-sheet { width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; border-color: var(--ink-soft); }
.compose-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.compose-title { margin: 0; font: 600 var(--fs-m) var(--font-display); color: var(--text); }
.compose-field, .charter-field { display: flex; flex-direction: column; gap: 4px; }
.compose-label, .charter-label { font-size: var(--fs-xs); color: var(--mist); }
.compose-field input, .compose-field textarea, .charter-field input, .charter-field textarea { width: 100%; box-sizing: border-box; padding: 4px 0; border: 0; border-bottom: 1px solid var(--ink-soft);
  border-radius: 0; background: transparent; color: var(--text); font: inherit; }
.compose-field textarea { resize: none; max-height: calc(6lh + 8px); overflow-y: auto; }
.compose-field input:focus, .compose-field textarea:focus, .charter-field input:focus, .charter-field textarea:focus { border-color: var(--text); }
.compose-error, .charter-error { font-size: var(--fs-s); }
.compose-error:empty, .charter-error:empty { display: none; }
.compose-foot, .charter-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-4); }
.compose-cancel, .charter-cancel { background: none; border-color: transparent; color: var(--text-dim); }
.compose-cancel:hover, .charter-cancel:hover { color: var(--text); background: var(--surface); }
.compose-foot .compose-issue, .compose-foot .compose-issue:active, .charter-foot .charter-confirm, .charter-foot .charter-confirm:active { display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; background: none; border-color: transparent; color: var(--text); }
.compose-issue .chop, .charter-confirm .chop { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; font: 600 14px var(--font-display);
  color: var(--seal-ink); background: var(--cinnabar); box-shadow: inset 0 0 0 1px var(--cinnabar), inset 0 0 0 2px var(--paper); transform: rotate(-4deg); }
#edict-active { align-self: center; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }

/* M53 D3b: the charter form, one look in the switcher popover and in the first-run hero; it
   shares the compose sheet's fields, foot and chop. */
.project-pop { width: 340px; max-width: calc(100vw - 32px); box-sizing: border-box; border-color: var(--ink-soft); }
.charter { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.charter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.charter-title { margin: 0; font: 600 var(--fs-l) var(--font-display); color: var(--text); }
.charter-chop { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; font: 600 11px var(--font-display);
  color: var(--seal-ink); background: var(--cinnabar); box-shadow: inset 0 0 0 1px var(--cinnabar), inset 0 0 0 2px var(--paper); transform: rotate(-4deg); }
.charter-field textarea { resize: none; }
.charter-hint, .charter-check { margin-top: calc(-1 * var(--sp-2)); font: var(--fs-xs) var(--font-mono); color: var(--mist); }
.charter-check.bad { color: var(--cinnabar-text); }
.charter-stamp { position: absolute; right: var(--sp-4); bottom: var(--sp-8); width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center;
  font: 600 26px var(--font-display); color: var(--seal-ink); background: var(--cinnabar); box-shadow: inset 0 0 0 3px var(--cinnabar), inset 0 0 0 5px var(--paper);
  transform: rotate(-4deg); pointer-events: none; }
.charter-stamp[hidden] { display: none; }

/* M53 D5: the Register, a ruled project roll in the switcher popover. Cinnabar marks only the
   focused project's seal (S7); the active row is a --wash band with a 2px tint rule. */
.register-view, .project-charter { display: flex; flex-direction: column; gap: var(--sp-3); }
.register-view[hidden], .project-charter[hidden] { display: none; }
.register-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.register-title { font: 600 var(--fs-m) var(--font-display); color: var(--text); }
.register-count { font: var(--fs-xs) var(--font-mono); color: var(--mist); }
.register-count[hidden], .register-find[hidden], .register-empty[hidden], .leaf[hidden] { display: none; }
.register-find { display: flex; align-items: center; gap: var(--sp-2); border-bottom: 1px solid var(--ink-soft); }
.register-find:focus-within { border-color: var(--text); }
.find-glyph { color: var(--mist); }
.register-find input { flex: 1; min-width: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
/* D5.7: the empty and no-match line reads above the roll, over its Charter row. */
.register-empty { order: 1; margin: 0; font-size: var(--fs-s); color: var(--mist); }
.register { order: 2; list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; background: var(--panel);
  border-top: 1px solid var(--ink-soft); }
.register:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.register-row { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 6px 8px 6px 10px;
  border-bottom: 1px solid var(--ink-soft); color: var(--text); cursor: pointer; user-select: none; }
.register-row.active { background: var(--wash); }
.register-row.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--pj, var(--ink)); }
.register-seal { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 2px; font: 600 10px/1 var(--font-mono);
  color: var(--text); background: color-mix(in srgb, var(--pj, var(--ink)) 24%, var(--paper)); box-shadow: inset 0 0 0 1px var(--pj, var(--ink));
  transform: rotate(var(--tilt, 0deg)); }
/* The focused project's seal takes the .seal-stamp double cinnabar ring, scaled to 16px. */
.register-seal.seal-ring { box-shadow: inset 0 0 0 1px var(--cinnabar), 0 0 0 1px var(--paper), 0 0 0 2px var(--cinnabar); }
.register-seal.charter-seal { font: 600 11px/1 var(--font-display); background: none; box-shadow: inset 0 0 0 1px var(--ink-soft); }
.register-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-id { font: var(--fs-xs) var(--font-mono); color: var(--mist); white-space: nowrap; }
.register-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pj, var(--ink)); }
.register-dot.filled { background: var(--pj, var(--ink)); }
.register-charter { color: var(--text-dim); border-bottom: 0; }
.register-charter.active { color: var(--text); }
.leaf { order: 3; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ink-soft); }
.leaf-name { margin: 0; font: 600 var(--fs-m) var(--font-display); color: var(--text); overflow-wrap: anywhere; }
.project-leaf { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.leaf-row { display: contents; }
.project-leaf dt { padding-top: 2px; font: var(--fs-xs) var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.project-leaf dd { margin: 0; min-width: 0; }
.charter-back { align-self: flex-start; padding: 0 2px; background: none; border-color: transparent; color: var(--text-dim); }
.charter-back:hover { color: var(--text); }

select, input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 4px 6px;
}

input { width: 7em; }
input::placeholder { color: var(--text-mute); }
select:focus, input:focus { outline: none; border-color: var(--cinnabar-soft); }
select:focus-visible, input:focus-visible { box-shadow: var(--focus-ring); }

.error { color: var(--crimson-text); }

/* §7.9: the dot's colour patches instantly; only M17's ring and M22 move. */
.connection { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-s); white-space: nowrap; --dot: var(--stone); }
.connection.live { --dot: var(--jade); }
.connection.reconnecting { --dot: var(--amber); }
.connection.offline { --dot: var(--crimson); color: var(--crimson-text); }
.connection .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.connection .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--dot); opacity: 0; }
.connection.pending .dot { animation: pending-shimmer calc(var(--dur-ambient) / 2) var(--ease-inout) infinite alternate; }

/* M48 D3: the court page's 昼 Day / 夜 Night pill (`court.css` `.toggle`). */
.toggle { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 3px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--text); white-space: nowrap; transition: border-color 0.2s; }
.toggle:hover { border-color: var(--text); }
.toggle .opt { padding: 3px 12px; border-radius: 999px; font-size: 13px; color: var(--mist); transition: background-color 0.6s, color 0.6s; }
.toggle .opt.on { color: var(--paper); background: var(--text); }
.toggle .glyph { font-family: var(--font-display); margin-right: 5px; }

.conn-strip { flex: none; height: 28px; display: flex; align-items: center; padding: 0 var(--sp-6); font-size: var(--fs-s); color: var(--amber); background: var(--tint-amber); }
.conn-strip.offline { color: var(--crimson-text); background: var(--tint-crimson); }
.conn-strip[hidden] { display: none; }
#board-error { padding: var(--sp-2) var(--sp-6); font-size: var(--fs-s); }

/* §7.7: above the dock at the right, newest at the bottom. */
.toasts { position: fixed; right: var(--sp-6); bottom: calc(var(--feed-height, 22vh) + 16px); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); z-index: var(--z-toast); }
.toast { display: flex; align-items: center; gap: var(--sp-4); max-width: 380px; padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--tone, var(--stone)); border-radius: var(--radius-m); box-shadow: var(--shadow-3); font-size: var(--fs-s); }
.toast.success { --tone: var(--jade); }
.toast.error { --tone: var(--crimson); }
.toast button { padding: 0 8px; font-size: var(--fs-s); }
.toast-close { background: none; border-color: transparent; }
.toast-error:empty { display: none; }

/* §8 item 8: the board-level error card. */
.board { position: relative; }
/* §8 item 8: over a last good board the card floats above it; the board stays rendered. */
.error-card.overlay { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: var(--shadow-2); }
.panel-error { width: auto; margin: 6px 0; }
.error-card { flex: none; align-self: flex-start; width: 360px; padding: var(--sp-6); background: var(--panel); border: 1px solid var(--crimson); border-radius: var(--radius-m); }
.error-card p { margin: 0 0 var(--sp-4); }
.error-title { color: var(--crimson-text); font-weight: 600; }
.debug-older button { margin: 2px 0 6px; font-size: var(--fs-xs); }

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* M48 D6: the two regions stack, the user region in a short row over the court's four columns. */
.board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  min-width: 0;
  overflow: auto;
  flex: 1;
}

/* M48 D6: hairline frames; the pipeline's top edge is the structure ink. */
.column {
  flex: none;
  width: 260px;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.column h2 {
  font: 600 15px/1.3 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 2px 4px 0;
}

.column h2 .count { font: 12px var(--font-mono); letter-spacing: 0; color: var(--mist); }
.column.user-column h2 { font: 600 13px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text); }
.column.user-column { background: var(--wash); }
.column.pipeline { border-top-color: var(--ink); }
.show-older { font: 11px var(--font-mono); color: var(--text-mute); background: none; border-style: dashed; }

/* §7.5: the drop states while a drag is live. */
.drop-note { display: none; font: 11px var(--font-mono); color: var(--text-mute); margin: 0 4px; }
.board.dragging .column.drop-move { border: 1px dashed var(--stone-text); }
.board.dragging .column.drop-send { border: 1px dashed var(--cinnabar); }
.board.dragging .column.drop-send .drop-note { display: block; color: var(--cinnabar-soft); }
.board.dragging .column.drop-refuse { opacity: 0.5; cursor: not-allowed; }
.board.dragging .column.drop-refuse .drop-note { display: block; }
.card.drag-origin { border-style: dashed; box-shadow: none; opacity: 0.5; }
.card.insert-before { box-shadow: 0 -3px 0 var(--stone-text); }

.board-empty { color: var(--text-mute); margin: 4px; }

/* §9.1: the two board regions and each column's card list. */
.region { display: flex; gap: 12px; flex: none; overflow-x: auto; }
.region-user { align-items: flex-start; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-soft); }
.region-court { flex: 1 0 auto; align-items: flex-start; }
.region-court .column { flex: 1 1 0; width: auto; min-width: 216px; }
.card-list { display: flex; flex-direction: column; gap: 8px; }

/* §8 items 1–4: the first-run hero, the Inbox ghost card, the empty columns' lines and the
   skeletons. */
.hero { margin: auto; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-8); }
.hero-seal { width: 72px; height: 72px; border-radius: 14px; background: var(--cinnabar); color: var(--seal-ink); display: grid; place-items: center; font: 600 40px var(--font-display); box-shadow: inset 0 0 0 4px var(--cinnabar), inset 0 0 0 6px var(--paper); transform: rotate(-4deg); }
.hero-title { font: 600 var(--fs-hero) var(--font-display); margin: 0; }
.hero-line { color: var(--text-dim); margin: 0; }
.hero-form { width: 360px; max-width: 100%; box-sizing: border-box; padding: var(--sp-4); background: var(--panel); border: 1px solid var(--ink-soft); border-radius: var(--radius-m); }
.hero > h3 { margin: 0; font-size: var(--fs-m); }
.hero-steps { text-align: left; color: var(--text-dim); font-size: var(--fs-s); line-height: 1.6; margin: 0; }
.ghost-card { border: 1px dashed var(--line); border-radius: var(--radius-l); padding: var(--sp-5); color: var(--text-mute); font-size: var(--fs-s); }
.column-empty, .drop-here, .still-loading { color: var(--text-mute); font-size: var(--fs-s); margin: 4px; }
.skeleton { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius-l); }
.skeleton-card { height: 64px; }
.skeleton-line { height: 12px; margin: 6px 0; border-radius: var(--radius-s); }
.skeleton .sweep { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-2), transparent); transform: translateX(-100%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 8px 10px 9px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.4s;
}

/* M48 D6: hover is a border change, selection a 1px outline in the text ink. */
.card:hover { border-color: var(--text); }
.card.selected { outline: 1px solid var(--text); outline-offset: 2px; }

/* §4.6: the 3px rule in the focused project's tint (M48 D2), dashed or doubled by the card's
   `rule-*` style. */
.card .rule { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pj, var(--ink)); transform-origin: top; }
.card.rule-stone { --rule: var(--stone); }
.card.rule-stone-text { --rule: var(--stone-text); }
.card.rule-gold { --rule: var(--gold); }
.card.rule-cinnabar { --rule: var(--cinnabar); --seal: var(--cinnabar-soft); --seal-tint: var(--tint-cinnabar); }
/* M48 D2: every gate is the operator's seal, so each gate family's ribbon and ring are cinnabar. */
.card.rule-jade { --rule: var(--jade); --seal: var(--cinnabar-soft); --seal-tint: var(--tint-cinnabar); }
.card.rule-amber { --rule: var(--amber); --seal: var(--cinnabar-soft); --seal-tint: var(--tint-cinnabar); }
.card.rule-crimson { --rule: var(--crimson); }
.card.rule-indigo { --rule: var(--indigo); }
.card.rule-dashed .rule { background: repeating-linear-gradient(var(--pj, var(--ink)) 0 6px, transparent 6px 10px); }
.card.rule-double .rule { width: 5px; background: linear-gradient(90deg, var(--pj, var(--ink)) 0 2px, transparent 2px 3px, var(--pj, var(--ink)) 3px 5px); }
.card.archived .rule { opacity: 0.6; }
.card.corrupt { border-style: dashed; border-color: var(--crimson); }
/* M22: a request in flight breathes the rule; reduced motion keeps the label's `…` alone. */
.card.pending .rule { animation: pending-shimmer calc(var(--dur-ambient) / 2) var(--ease-inout) infinite alternate; }
@keyframes pending-shimmer { from { opacity: 0.5; } to { opacity: 1; } }
.card .ring, .card .glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; }
.card .ring { border: 2px solid var(--seal, var(--cinnabar)); }
.card .glow { box-shadow: inset 0 0 0 1px var(--jade), inset 0 0 24px color-mix(in srgb, var(--text) 30%, transparent); }
.card .ribbon {
  margin: -8px -10px 6px -14px;
  padding: 3px 12px;
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--seal);
  background: var(--seal-tint);
  border-bottom: 1px solid var(--seal);
}

/* M48 D1: the art state over the rule family (the court's token states at card size).
   running: the pulse layer breathes on a 2.4s cycle with a slight swell, resting at 0.7 under
            reduced motion;
   waiting: the card at the waiting opacity, faded over 0.4s;
   halted:  the cinnabar border on the seal wash, held still;
   failed:  the cinnabar border on the card fill;
   done:    quiet words. Plain and gate cards stand at full strength. */
.card.s-running::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--text); border-radius: inherit; background: color-mix(in srgb, var(--text) 10%, transparent); opacity: 0.7; pointer-events: none; animation: pulse 2.4s ease-in-out infinite, swell 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.12; } 50% { opacity: 1; } }
@keyframes swell { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012, 1.03); } }
.card.s-waiting { opacity: var(--wait-op); }
.card.s-halted { border-color: var(--cinnabar); background: var(--seal-wash); }
.card.s-failed { border-color: var(--cinnabar); }
.card.s-done .rule { opacity: 0.6; }
.card.s-done .card-title { color: var(--mist); font-weight: 400; }

/* M48 D5: a finished card's seal at its top-right, carved as the court's: 准 solid, 驳 outline. */
.card-seal { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; font: 600 12px/1 var(--font-display); transform: rotate(-4deg); pointer-events: none; }
.card-seal.approve { background: var(--cinnabar); color: var(--seal-ink); }
.card-seal.reject { background: var(--card); border: 1.5px solid var(--cinnabar); color: var(--cinnabar); }
.card-title.sealed { padding-right: 26px; }

.card-title {
  font-weight: 600;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 4px;
}

.card-meta .badge.agent { margin-left: auto; }

.progress { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pips { display: flex; gap: 3px; }
.pip { width: 14px; height: 5px; border-radius: 2px; background: var(--ink-soft); }
.pip.working { background: var(--ink); }
.pip.result_review { background: var(--cinnabar-soft); }
.pip.approved { background: var(--jade); }
.progress .bar { height: 2px; background: var(--line-soft); border-radius: 1px; overflow: hidden; }
.progress .fill { display: block; height: 100%; background: var(--jade); transform: scaleX(var(--fill, 0)); transform-origin: left; }

/* §4.3: Send ▸ shows on hover or focus. */
.send-quick {
  position: absolute;
  right: 6px;
  top: 6px;
  font: 11px var(--font-mono);
  padding: 1px 8px;
  opacity: 0;
  color: var(--cinnabar-soft);
  border-color: var(--edge-cinnabar);
  background: var(--tint-cinnabar);
  transition: opacity var(--dur-fast);
}
.card:hover .send-quick, .card:focus-within .send-quick, .card-wrap:focus .send-quick { opacity: 1; }

.card-id {
  font: inherit;
  color: var(--stone-text);
  background: none;
  border: none;
  border-radius: var(--radius-s);
  padding: 0 3px;
  min-width: 8ch;
  text-align: left;
}

.card-id:hover { background: var(--surface-2); color: var(--text); }
.card-id.copied { color: var(--jade); }

.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  border-radius: var(--radius-pill);
  padding: 0 8px;
  border: 1px solid var(--line);
  color: var(--stone-text);
  background: var(--surface-2);
}

.badge.gate {
  background: var(--tint-cinnabar);
  border-color: var(--edge-cinnabar);
  color: var(--cinnabar-soft);
}

.badge.agent {
  background: var(--tint-gold);
  border-color: var(--edge-gold);
  color: var(--gold);
}

.agent-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.agent-pulse { animation: agent-pulse var(--dur-ambient) var(--ease-inout) infinite; }

@keyframes agent-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.badge.lost, .badge.interrupted {
  background: var(--tint-amber);
  border-color: var(--amber);
  color: var(--amber);
}

.badge.halted, .badge.corrupt {
  background: var(--tint-crimson);
  border-color: var(--crimson);
  color: var(--crimson-text);
}

.badge.resynced { color: var(--stone); }
.badge.cause { color: var(--amber); border-color: var(--amber); background: var(--tint-amber); }
.badge.replan, .badge.brief { color: var(--indigo-text); border-color: var(--indigo); background: var(--tint-indigo); }
.badge.pending { color: var(--text-dim); border-style: dashed; }
.badge.more { cursor: help; }

.badge.paused {
  background: var(--tint-indigo);
  border-color: var(--indigo);
  color: var(--indigo-text);
}

/* M44: S26's hold wait in the stone-text family; the priority and workspace marks. M53 D1.13:
   `deferred` recedes below `low`, and `urgent` takes the user's cinnabar. */
.badge.awaiting { color: var(--stone-text); border-color: var(--stone-text); background: var(--tint-stone); }
.badge.priority.urgent { color: var(--cinnabar-text); border-color: var(--cinnabar); background: var(--seal-wash); }
.badge.priority.high { color: var(--gold); border-color: var(--edge-gold); background: var(--tint-gold); }
.badge.priority.low { color: var(--stone); }
.badge.priority.deferred { color: var(--stone); opacity: 0.75; }
.badge.read-only, .badge.scope-chip.read-only { color: var(--jade); border-color: var(--jade); background: var(--tint-jade); }
.plan-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0; }
.declared-docs { flex-basis: 100%; margin: 0; padding-left: 18px; font-family: var(--font-mono); font-size: 12px; }

.preview {
  margin: 6px 0 0;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 4.8em;
  overflow: hidden;
}

.subtasks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

.subcard {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--stone);
  border-radius: var(--radius-s);
  padding: 4px 6px;
  font-size: 12px;
}

.subcard.working { border-left-color: var(--amber); }
.subcard.result_review { border-left-color: var(--cinnabar-soft); }
.subcard.approved { border-left-color: var(--jade); }

/* M48 D6: the panel on the card fill behind an ink-soft hairline (A9's panel). */
.panel {
  flex: 0 0 420px;
  border-left: 1px solid var(--ink-soft);
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel[hidden] { display: none; }

.panel-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-4); padding: 10px 16px 0 19px; border-bottom: 1px solid var(--ink-soft); background: var(--card); }
/* M48 D6: the header's 3px band in the focused project's tint, the structure ink with none. */
.panel-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pj, var(--ink)); }

.panel-title { flex: 1; font-family: var(--font-display); font-size: var(--fs-l); font-weight: 600; overflow-wrap: anywhere; }
.panel-title:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* §4.4 item 1: the stage chip shares the card's rule family (§5.6 rule 1), set on the panel. */
.panel.rule-stone { --rule: var(--stone); }
.panel.rule-stone-text { --rule: var(--stone-text); }
.panel.rule-gold { --rule: var(--gold); }
.panel.rule-cinnabar { --rule: var(--cinnabar-soft); }
.panel.rule-jade { --rule: var(--jade); }
.panel.rule-amber { --rule: var(--amber); }
.panel.rule-crimson { --rule: var(--crimson-text); }
.panel.rule-indigo { --rule: var(--indigo-text); }
/* M48 D6: the stage chip is mono on the ink border; the halted family (S16–S19) borders it in cinnabar. */
.panel-chip { font: 12px var(--font-mono); white-space: nowrap; padding: 1px 9px; border-radius: var(--radius-pill); border: 1px solid var(--ink); color: var(--text); }
.panel.rule-crimson .panel-chip { border-color: var(--cinnabar); }
.panel-chip:empty, .panel-hash:empty { display: none; }

/* M50 D1: the bar's second row, the Edict and Court tabs. The active tab is underlined in ink on
   the bar's hairline, never cinnabar: a tab is navigation, not a seal (M48 D2). */
.panel-tabs { flex-basis: 100%; display: flex; gap: 18px; margin-top: 10px; }
.panel-tab { position: relative; display: inline-flex; align-items: center; padding: 4px 0 9px; border: 0; border-radius: 0; background: none; color: var(--mist); font-size: 13px; }
.panel-tab:hover { color: var(--text); background: none; }
.panel-tab .glyph { font-family: var(--font-display); font-size: 14px; margin-right: 5px; }
.panel-tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.panel-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); }
.panel-tab:focus-visible { box-shadow: none; outline: 1px solid var(--text); outline-offset: 2px; }
/* One hint at most per tab; the seal dot is the bar's only cinnabar. The busy ring breathes on the
   court page's 5.6s cycle and holds at 0.55 under reduced motion. */
.tab-hint { display: inline-grid; place-items: center; margin-left: 7px; font: 400 11px var(--font-mono); color: var(--mist); }
.tab-hint:empty { display: none; }
.tab-hint .ring { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); }
.tab-hint .ring.dashed { border-style: dashed; }
.tab-hint .busy { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.tab-hint .busy::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--text); opacity: 0.55; animation: tab-breath 5.6s ease-in-out infinite alternate; }
@keyframes tab-breath { from { opacity: 0.2; } to { opacity: 0.7; } }
.tab-hint .solid { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.tab-hint .seal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cinnabar); }
.tab-hint .mini-seal { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 2px; background: var(--cinnabar); color: var(--seal-ink); font: 600 9px/1 var(--font-display); transform: rotate(-4deg); }
.panel-tabpanel[hidden] { display: none; }
/* The line pinned under the bar on the Court tab while a gate waits for the user's seal. */
.panel-seal { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--ink-soft); font-size: 12px; background: var(--seal-wash); }
.panel-seal[hidden] { display: none; }
.panel-seal .seal-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cinnabar); }
.panel-seal button { margin-left: auto; padding: 1px 10px; font-size: 12px; border-color: var(--cinnabar); color: var(--text); background: transparent; }
.panel-decision[hidden] { display: none; }
/* M53 D1.14: outside the edit window the priority reads as the seal row, read-only. */
.priority-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mist); }
/* M53 D1.9: the five-seal priority row. A filled seal is the court's carved cinnabar (the hero
   seal's double inset ring), an empty one a 1px ink outline on the wash; each keeps its own tilt.
   Cinnabar marks the user's own choice (M48 D2). */
.pscale { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: var(--radius-s); cursor: pointer; touch-action: none; user-select: none; }
.pscale:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pscale-seal { flex: none; width: 14px; height: 14px; border-radius: 2px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--ink-soft); transform: rotate(var(--tilt, 0deg)); }
.pscale-seal.on { background: var(--cinnabar); box-shadow: inset 0 0 0 1px var(--cinnabar), inset 0 0 0 2px var(--paper); }
.pscale.compact .pscale-seal { width: 12px; height: 12px; }
.pscale-label { margin-left: 4px; font: var(--fs-xs) var(--font-mono); color: var(--mist); }
.pscale[aria-valuenow="5"] .pscale-label { color: var(--cinnabar-text); }
.pscale.readonly { cursor: default; }
.pscale.disabled { cursor: default; opacity: 0.5; }

/* M50 D3: the Court tab's journey lane (the court page's `.lane`, idle and open rings and `.bead`):
   a station per section on a 1px ink line at the court page's 0.7. Each station draws its own
   stretch of the lane, so a hovered or focused placeholder row raises its ring and stretch to
   `--text`; nothing else moves at rest, and a live ring breathes only where the court works. */
.await-head { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0 0; }
.await-glyph { flex: none; font: 600 22px/1.15 var(--font-display); color: var(--mist); writing-mode: vertical-rl; letter-spacing: 0.12em; padding-top: 2px; }
.panel .await-title { margin: 0; font: 600 16px/1.3 var(--font-display); letter-spacing: 0.02em; }
.await-line { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--mist); max-width: 32em; }
.lane-track { position: relative; margin-top: 18px; }
.lane { position: relative; list-style: none; margin: 0; padding: 0; }
.lane.live { margin-top: 10px; }
.station { --st-gap: 0px; position: relative; padding: 0 0 18px 26px; border-radius: var(--radius-s); }
.lane.live .station { padding-bottom: 6px; }
.lane.live .station + .station { --st-gap: 14px; }
.station::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: 0.7; transition: background-color var(--dur-fast), opacity var(--dur-fast); }
.station:first-child::before { top: calc(var(--st-gap) + 9px); }
.station:last-child::before { bottom: auto; height: calc(var(--st-gap) + 9px); }
.station:only-child::before { display: none; }
.station .ring { position: absolute; left: 0; top: calc(var(--st-gap) + 4px); width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); background: var(--card); transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.station .ring.open { background: var(--text); border-color: var(--text); }
.station .ring.busy::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--text); opacity: 0.55; animation: tab-breath 5.6s ease-in-out infinite alternate; }
.station .ring.wait { border-style: dashed; }
.lane.await .station:hover .ring, .lane.await .station:focus-visible .ring { border-color: var(--text); }
.lane.await .station:hover::before, .lane.await .station:focus-visible::before { background: var(--text); opacity: 1; }
.lane.await .station:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.st-head { display: flex; align-items: baseline; gap: 8px; margin-top: var(--st-gap); }
.panel .st-head h3 { margin: 0; font-size: 14px; }
.st-seat { margin-left: auto; font: 13px var(--font-display); color: var(--mist); letter-spacing: 0.06em; white-space: nowrap; }
.st-body { margin-top: 6px; }
.lane.await .st-body { margin-top: 2px; }
.st-attr { font-size: 12px; line-height: 1.45; color: var(--mist); }
/* The hand-off's step 2 fades the attribution lines with the heading block and the foot (M25's 220ms). */
.lane-track.folding .st-attr { opacity: 0; transition: opacity var(--dur-base) var(--ease-in); }
.bead { position: absolute; left: 2px; top: -12px; width: 7px; height: 7px; border-radius: 50%; background: var(--pj, var(--ink)); opacity: 0; pointer-events: none; }
.bead.resting { opacity: 1; }
.await-foot { margin: 6px 0 0 26px; padding-top: 12px; border-top: 1px dashed var(--ink-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.await-foot p { margin: 0; font-size: 12px; color: var(--mist); }
.go-send { font-size: 12px; padding: 3px 12px; border: 1px solid var(--ink); border-radius: var(--radius-pill); background: transparent; color: var(--text); }
.go-send:hover { border-color: var(--text); }

/* §4.4 item 2: the decision zone, sticky under the header. */
.panel-decision { position: relative; padding: 0 16px; background: var(--card); }
.panel-decision:empty { display: none; }
.panel-decision .review-sheet { margin: 10px 0; position: relative; }
.sheet-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.review-sheet.danger-sheet { --seal-color: var(--crimson); --seal-tint: var(--tint-crimson); }

/* §6.4 M7: the seal stamp over the decided sheet's content (the mockup's `.stamp`), carved as
   the court's (M48 D5): 准 solid with the paper inner ring, 驳 outline. */
.seal-stamp { position: absolute; right: 18px; top: 14px; width: 64px; height: 64px; border-radius: 10px; display: grid; place-items: center; font: 600 34px var(--font-display); color: var(--seal-ink); background: var(--cinnabar); box-shadow: inset 0 0 0 3px var(--cinnabar), inset 0 0 0 5px var(--paper); transform: rotate(-4deg); pointer-events: none; }
.seal-stamp.reject { color: var(--cinnabar); background: var(--card); border: 2px solid var(--cinnabar); box-shadow: none; }
.gate-actions button.pending { animation: pending-shimmer calc(var(--dur-ambient) / 2) var(--ease-inout) infinite alternate; }

/* §4.4 item 3: the jump rail. */
.panel-rail { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) 16px; border-bottom: 1px solid var(--ink-soft); }
.panel-rail:empty { display: none; }
.rail-chip { font: var(--fs-xs) var(--font-mono); padding: 0 8px; border-radius: var(--radius-pill); }
.rail-chip.on { color: var(--text); border-color: var(--cinnabar-soft); }

.panel-body { position: relative; overflow: auto; padding: 8px 16px; flex: 1; }
.status { position: relative; padding-left: 10px; }
.status-rule { position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--rule, var(--line)); transform-origin: top; }

/* The panel's section label in the serif (M48 D6); markdown's h4 and h5 (D14) take it too. */
.panel h3, .panel h4, .panel h5 {
  font: 600 13px var(--font-display);
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 16px 0 6px;
}

.panel pre, .panel code { font-family: var(--font-mono); font-size: 12px; }

.review-sheet {
  --seal-color: var(--cinnabar);
  --seal-tint: var(--tint-cinnabar);
  --primary-fill: var(--seal-wash);
  padding: 10px;
  margin-bottom: 10px;
  background: linear-gradient(var(--seal-tint), var(--seal-tint)), var(--panel);
  border: 1px solid var(--seal-color);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 65vh;
  overflow: auto;
}
/* M48 D2's gate rule: every gate sheet is cinnabar; its label names the gate. */
.review-sheet.signoff, .review-sheet.escalation { --seal-color: var(--cinnabar); --seal-tint: var(--tint-cinnabar); --primary-fill: var(--seal-wash); }
.review-sheet.paused { --seal-color: var(--ink); --seal-tint: var(--wash); margin-bottom: 0; }
.panel-actions:empty { display: none; }
/* §4.4 item 5: the footer's actions right-aligned; a destructive one sits left. */
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--ink-soft); background: var(--card); }
.panel-actions .danger { margin-right: auto; color: var(--cinnabar-text); border-color: var(--cinnabar); background: var(--seal-wash); }
.panel-actions .danger + .danger { margin-right: 0; }
.panel-actions .error:empty { display: none; }
.panel-actions .error { flex-basis: 100%; text-align: right; }
.review-kind { color: var(--seal-color); border-color: var(--seal-color); }
/* M48 D2: a gate sheet's primary is court-carved on the seal wash; the paused one rests on the card. */
.review-sheet .gate-actions button:first-child { background: var(--primary-fill, var(--seal-wash)); border-color: var(--seal-color); }
.review-sheet.paused .gate-actions button:first-child { background: var(--card); border-color: var(--ink); }
/* M48 D2: a pressed sheet primary takes the carved cinnabar fill, outranking both rests above. */
.review-sheet .gate-actions button:first-child:active { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--seal-ink); }
.review-sheet.paused .gate-actions button:first-child:active { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--seal-ink); }
.gate-actions .danger, .review-sheet .gate-actions button.danger { color: var(--crimson-text); border-color: var(--crimson); background: var(--tint-crimson); }
#seal-count[hidden] { display: none; }
.seal-count { cursor: pointer; }

.gate-actions { display: flex; gap: 6px; }

.plan-subtask { margin: 6px 0; padding-left: 8px; border-left: 2px solid var(--line); }

.turn {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  margin: 6px 0;
  padding: 6px 8px;
}

.turn-head { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--stone-text); }
.turn-head .end { font-weight: 400; color: var(--text-mute); }
.turn.open { border-color: var(--edge-gold); }
.turn.open .turn-head::after { content: " ● running"; color: var(--gold); font-weight: 400; }

.message { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }

.note { color: var(--text-mute); font-style: italic; white-space: pre-wrap; margin: 4px 0; }

details.thought {
  margin: 4px 0;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 12px;
}

details.thought summary { color: var(--indigo-text); cursor: pointer; }
details.thought[open] { background: var(--tint-indigo); color: var(--text-dim); }

details.thought pre, details.prompt pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 4px 0;
}

details.prompt { margin: 4px 0; color: var(--text-mute); }
details.prompt summary { cursor: pointer; }

details.prompt pre {
  padding: 6px 8px;
  background: var(--surface);
  border-radius: var(--radius-m);
  color: var(--text-dim);
}

.tool, details.tool {
  margin: 3px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--stone-text);
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 2px 6px;
}

details.tool summary { cursor: pointer; }

pre.diff {
  margin: 4px 0;
  padding: 6px 8px;
  overflow: auto;
  font-size: 11px;
  background: var(--bg);
  border-radius: var(--radius-m);
  color: var(--text-dim);
}

.diff .add { color: var(--jade); }
.diff .del { color: var(--crimson-text); }

.muted { color: var(--text-mute); }

.feed-wrap {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--panel);
  height: var(--feed-height, 22vh);
  flex: none;
  display: flex;
  flex-direction: column;
}

/* M53 D4.1: the two strip views shrink the band to its 24px tab row; `--feed-height` keeps the
   saved height for the next expand. */
.feed-wrap.collapsed { height: auto; }
.feed-wrap.collapsed .feed-tabs { height: 24px; cursor: pointer; }
.feed-wrap.collapsed .feed-tabs h2 { display: none; }
.feed-wrap.collapsed .feed-tab { margin-top: 0; margin-bottom: 0; }
.feed-resize[hidden] { display: none; }
/* D4.5–D4.6: the strip's dot (cinnabar while the project is in flight), label and toggle. */
.feed-dot { flex: none; width: 6px; height: 6px; margin-left: 16px; border-radius: 50%; background: var(--mist); }
.feed-dot.lit { background: var(--cinnabar); }
.feed-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fs-xs) var(--font-mono); color: var(--mist); }
.feed-wrap:not(.collapsed) .feed-dot, .feed-wrap:not(.collapsed) .feed-status { display: none; }
.feed-toggle { margin: 0 12px 0 auto; padding: 0 6px; border-color: transparent; background: none; color: var(--mist); font-size: 12px; line-height: 1; }

.feed-resize {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  touch-action: none;
  z-index: 1;
}

.feed-resize::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 2px;
  background: var(--cinnabar-soft);
  opacity: 0;
  transition: opacity 0.15s;
}

.feed-resize:hover::after, .feed-resize:active::after { opacity: 1; }

.feed-wrap h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 6px 16px 4px;
  color: var(--text-mute);
}

.feed {
  list-style: none;
  margin: 0;
  padding: 0 16px 6px;
  overflow: auto;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.feed li { white-space: pre-wrap; overflow-wrap: anywhere; }
.feed .who { color: var(--gold); }
.feed .thought { color: var(--indigo-text); font-style: italic; }
.feed .tool { background: none; padding: 0; color: var(--text-mute); }
.feed .lifecycle { color: var(--stone); }

.onboarding { font-size: 12px; color: var(--text-dim); max-width: 32em; }
.onboarding summary { cursor: pointer; color: var(--stone-text); }
.onboarding p { margin: 4px 0; }
.board-empty.next { font-size: 12px; }

.card-now { font-size: 13px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
.badge.blocked { color: var(--amber); border-color: var(--amber); background: var(--tint-amber); }

.status .now { font-weight: 600; color: var(--text); }
.terminal-lead { border-left: 3px solid var(--crimson); padding-left: 8px; margin: 6px 0; }
.brief { border-left: 2px solid var(--amber); padding-left: 8px; color: var(--text-dim); }
.delivery { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.work-item.approved { border-left-color: var(--jade); }
.work-item.working { border-left-color: var(--amber); }
.work-item.result_review { border-left-color: var(--cinnabar-soft); }
.verdicts { margin: 2px 0; padding-left: 18px; color: var(--text-dim); }
.deliverable { margin: 4px 0; }
.deliverable-open { font-family: var(--font-mono); font-size: 12px; padding: 1px 8px; }
.deliverable-content, .plan-document, .plan-markdown, .tool-output, .memory-text pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 24em;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 6px 8px;
}
.plan-markdown h3, .plan-markdown h4, .plan-markdown h5, .plan-markdown ul, .plan-markdown ol, .plan-markdown .plan-code {
  margin: 6px 0;
  font-family: var(--font-mono);
}
.result { border-left: 2px solid var(--jade); padding-left: 8px; }
/* D14: a court message as markdown in the body face; code stays mono through .panel pre, code. */
.message-markdown { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.message-markdown h3, .message-markdown h4, .message-markdown h5, .message-markdown ul, .message-markdown ol, .message-markdown .plan-code {
  margin: 6px 0;
}
.debug-toggle { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; color: var(--text-mute); }
.debug-toggle.active { color: var(--indigo-text); border-color: var(--indigo); background: var(--tint-indigo); }
.feed-tabs { display: flex; align-items: center; gap: 4px; }
.feed-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 6px 0 4px 16px;
  padding: 1px 8px;
  color: var(--text-mute);
}
.feed-tab.active { color: var(--text); border-color: var(--indigo); }
.feed-tab[hidden], .feed[hidden], .debug-log[hidden] { display: none; }
.debug-log { flex: 1; overflow: auto; padding: 0 16px 6px; font-size: 12px; }
.debug-header { color: var(--text-dim); font-size: 12px; border-left: 2px solid var(--indigo); padding-left: 8px; }
.debug-header p { margin: 2px 0; }
.debug-filters { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.debug-frames { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); }
.debug-frames .live-only > details > summary { color: var(--indigo-text); }
.debug-frames pre, .debug-json { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0 6px; color: var(--text-dim); }
.debug-turn .badge { margin-right: 6px; }
.memory-block { background: var(--tint-gold); color: var(--text); outline: 1px solid var(--gold); }
.tool-entry.recall { border-left: 2px solid var(--gold); padding-left: 8px; }
.tool-entry.recall .tool { color: var(--gold); }
.turns-disclosure > summary { cursor: pointer; font: 600 13px var(--font-display); letter-spacing: 0.04em; color: var(--text); margin: 16px 0 6px; }

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

.archive-toggle[hidden] { display: none; }
#board-error:empty { display: none; }
.column.user-column { border-style: dashed; }
.column.archive { max-width: 640px; }
.column h2 .runs-note { text-transform: none; letter-spacing: 0; color: var(--text-mute); }
.column-controls, .column-rename, .column-add, .placement, .archive-actions, .brief-actions, .abort-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.column-controls button, .placement button { padding: 1px 8px; font-size: 12px; }
.column-rename input, .column-add input { flex: 1; min-width: 6em; }
.column-add {
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 180px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-l);
}
.column-add button[type="submit"], .column-rename button[type="submit"] {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-dim);
  font-weight: 400;
}
.card-wrap[draggable="true"] > .card { cursor: grab; }
.archive-item { display: flex; flex-direction: column; gap: 4px; }
.card-controls { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.brief-editor { display: flex; flex-direction: column; gap: 6px; }
.brief-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.brief-field input { width: 100%; }
.brief-view .message { margin-top: 0; }
.abort { display: flex; flex-direction: column; gap: 4px; }
.abort-actions .danger, .archive-actions .danger { color: var(--crimson-text); border-color: var(--crimson); background: var(--tint-crimson); }
.review-sheet.confirm { --seal-color: var(--cinnabar); --seal-tint: var(--tint-cinnabar); margin-bottom: 0; }
.brief-changed { color: var(--amber); font-style: normal; }
/* §7.4: the editor's heading, dirty marker, hints and notices. */
.brief-head { font: 500 var(--fs-xs) var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.dirty-mark { margin-left: 6px; color: var(--cinnabar-soft); }
.brief-hint { font: var(--fs-xs) var(--font-mono); color: var(--text-mute); }
.brief-hint:empty { display: none; }
.brief-foreign { color: var(--amber); }
.brief-foreign[hidden] { display: none; }
.brief-field textarea { resize: vertical; overflow: hidden; }
/* M53 D1.15: the editor's priority row leads the fields on one line, its hint saying it applies
   outside Save and Revert. */
.brief-field.priority-field { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.priority-hint { font-size: var(--fs-xs); color: var(--mist); }
.locked-line { margin: 0; font-size: var(--fs-s); color: var(--text-dim); }

/* M48 D6's breakpoints: a narrower panel; under 900px the panel moves under the board, the page
   scrolls and the header wraps; on a phone the margins tighten and the toggle drops its words. */
@media (max-width: 1199px) {
  .panel { flex-basis: 380px; }
}
@media (max-width: 899px) {
  body { height: auto; min-height: 100vh; }
  .layout { flex-direction: column; }
  .board { flex: none; }
  .panel { flex: none; max-width: none; border-left: 0; border-top: 1px solid var(--ink-soft); }
  .panel-body { overflow: visible; }
  /* The scroller's last column must not peek as a text sliver at the edge: at 768 three
     230px columns fill the region, so the fourth starts past it. */
  .region-court .column { min-width: 230px; }
  /* M48 D6's top reflow: the header wraps and the compose chip takes its own row, so the top bar fits 768. */
  .top { height: auto; min-height: 48px; flex-wrap: wrap; gap: 10px; padding: 8px 16px; }
  .composer { flex-basis: 100%; margin-right: 0; order: 3; }
}
@media (max-width: 640px) {
  .toggle .wd { display: none; }
  .board { padding: 12px 16px; }
  .column { width: 240px; }
}

.project-about-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.about-hint { flex-basis: 100%; font-size: var(--fs-s); }
.about-hint:empty { display: none; }
.project-about-pane { margin: 0; }
#project-about { margin: 0 0 var(--sp-2); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.project-about-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.project-about-form[hidden] { display: none; }