/* Ethics workbench — additions on top of styles.css (VUI/12 tokens, six themes, engagement chip, calm tray, lifecycle timeline,
   help grid, clarify, theme swatches, pin control, responsive breakpoints, reduced motion, PWA safe areas). */

/* ── VUI/12 mandatory token names, aliased onto the palette of styles.css ─────────────────────── */
:root {
  --nbg-blue: var(--am-truth); --nbg-blue-700: var(--am-truth-700); --nbg-blue-50: var(--am-truth-50);
  --color-focus-ring: #2563eb;
  --cmdbar-h: 64px;
}

/* ── Six themes (light/dark from styles.css; latte, frappe, macchiato, mocha here) ─────────────── */
html[data-theme="latte"]     { --bg: #EFF1F5; --surface: #FFFFFF; --surface-2: #E6E9EF; --surface-3: #DCE0E8; --border: #CCD0DA; --border-strong: #ACB0BE; --text: #4C4F69; --text-2: #5C5F77; --text-3: #6C6F85; --text-4: #9CA0B0; --am-truth: #179299; --am-truth-700: #0F6D72; --am-truth-50: #DDEFF0; --am-ink: #1E66F5; --am-ink-700: #1449B0; --am-ink-50: #E1EAFD; --healthy: #40A02B; --healthy-bg: #E4F1E0; --degraded: #DF8E1D; --degraded-bg: #F9EEDB; --critical: #D20F39; --critical-bg: #F8DCE2; }
html[data-theme="frappe"]    { --bg: #303446; --surface: #292C3C; --surface-2: #414559; --surface-3: #51576D; --border: #51576D; --border-strong: #626880; --text: #C6D0F5; --text-2: #B5BFE2; --text-3: #A5ADCE; --text-4: #838BA7; --am-truth: #81C8BE; --am-truth-700: #5AA79D; --am-truth-50: #2B4A47; --am-ink: #8CAAEE; --am-ink-700: #6A8AD0; --am-ink-50: #2F3B58; --healthy: #A6D189; --healthy-bg: #2F4A2C; --degraded: #E5C890; --degraded-bg: #4C4230; --critical: #E78284; --critical-bg: #4E2E30; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); }
html[data-theme="macchiato"] { --bg: #24273A; --surface: #1E2030; --surface-2: #363A4F; --surface-3: #494D64; --border: #494D64; --border-strong: #5B6078; --text: #CAD3F5; --text-2: #B8C0E0; --text-3: #A5ADCB; --text-4: #8087A2; --am-truth: #8BD5CA; --am-truth-700: #63B3A7; --am-truth-50: #2A4744; --am-ink: #8AADF4; --am-ink-700: #6A8AD0; --am-ink-50: #2C3A5A; --healthy: #A6DA95; --healthy-bg: #2E4A2C; --degraded: #EED49F; --degraded-bg: #4C4430; --critical: #ED8796; --critical-bg: #4E2E36; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); }
html[data-theme="mocha"]     { --bg: #1E1E2E; --surface: #181825; --surface-2: #313244; --surface-3: #45475A; --border: #45475A; --border-strong: #585B70; --text: #CDD6F4; --text-2: #BAC2DE; --text-3: #A6ADC8; --text-4: #7F849C; --am-truth: #94E2D5; --am-truth-700: #6BC1B3; --am-truth-50: #294844; --am-ink: #89B4FA; --am-ink-700: #6A8AD0; --am-ink-50: #2A3A5A; --healthy: #A6E3A1; --healthy-bg: #2C4A2C; --degraded: #F9E2AF; --degraded-bg: #4C4430; --critical: #F38BA8; --critical-bg: #4E2E3A; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); }
/* "presentation": the look of the PostMatch panel presentation — Catppuccin Latte used by role (Base, Mantle and Crust for backgrounds,
   Surface for elements and borders, Overlay and Subtext for muted text, Text for text), one accent (Mauve), square corners, flat surfaces. */
html[data-theme="presentation"] { --bg: #EFF1F5; --surface: #EFF1F5; --surface-2: #E6E9EF; --surface-3: #DCE0E8; --border: #CCD0DA; --border-strong: #BCC0CC; --text: #4C4F69; --text-2: #5C5F77; --text-3: #5C5F77; --text-4: #8C8FA1; --am-truth: #8839EF; --am-truth-700: #6A1FD0; --am-truth-50: #ECE2FD; --am-ink: #4C4F69; --am-ink-700: #3B3D52; --am-ink-50: #E6E9EF; --healthy: #40A02B; --healthy-bg: #E4F1E0; --degraded: #DF8E1D; --degraded-bg: #F9EEDB; --critical: #D20F39; --critical-bg: #F8DCE2; --att-low: #1E66F5; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --color-focus-ring: #8839EF; }
html[data-theme="presentation"] *, html[data-theme="presentation"] *::before, html[data-theme="presentation"] *::after { border-radius: 0 !important; }

/* ── Accessibility ───────────────────────────────────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--surface); color: var(--text); padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); }
.skip-link:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
/* The VUI's own fields draw their focus themselves and set no outline (styles.css): the command bar's pill, the flag input and the customisation field. The ring above must never override that design. */
.cmdbar__input:focus-visible, .flag-input:focus-visible, .cu-field__ctrl:focus-visible { outline: 0; }
:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Chrome additions ────────────────────────────────────────────────────────────────────────── */
.eng-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.eng-chip:hover { border-color: var(--border-strong); }
.eng-chip__ring { width: 22px; height: 22px; flex: none; }
.eng-chip__name { color: var(--text); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-chip__stage { color: var(--am-truth); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.eng-chip__pending { background: var(--degraded-bg); color: var(--degraded); padding: 1px 6px; border-radius: 999px; font-size: 10px; }
.calm-tray { position: fixed; top: 72px; right: 28px; display: flex; flex-direction: column; gap: 6px; z-index: 18; pointer-events: none; }
.calm-tray .badge { pointer-events: auto; }
.boot-error { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--bg); z-index: 50; }
.boot-error .card { max-width: 560px; }

/* ── Artifact chrome extras ──────────────────────────────────────────────────────────────────── */
.art-toolbar { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; z-index: 3; }
.art-tool { border: 1px solid var(--border); background: var(--surface); color: var(--text-3); border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; font-size: 12px; }
.art-tool[data-on="true"] { color: var(--am-truth); border-color: var(--am-truth); }
.art-wrap { position: relative; }
.art-ttl { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--am-truth-50); overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.art-ttl__bar { height: 100%; background: var(--am-truth); transform-origin: left; }
.art-wrap[data-pinned="true"] .art-ttl { display: none; }

/* badge */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); font-family: var(--font-mono); font-size: 12px; }
.badge__label { color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.badge__value { font-weight: 600; }
.badge__sub { color: var(--text-3); }
.badge[data-color="green"] { border-color: #B8DCC6; background: var(--healthy-bg); color: var(--healthy); }
.badge[data-color="amber"] { border-color: #E6CFA0; background: var(--degraded-bg); color: var(--degraded); }
.badge[data-color="red"]   { border-color: #E5B7C0; background: var(--critical-bg); color: var(--critical); }
.badge[data-color="neutral"] { color: var(--text-2); }

/* card rows / actions */
.art-rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; padding: 0 26px 12px; font-size: 13px; }
.art-rows__label { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.art-body { padding: 0 26px 16px; color: var(--text-2); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.art-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 26px 20px; }
.art-footer { padding: 0 26px 16px; color: var(--text-4); font-family: var(--font-mono); font-size: 11px; }
.card[data-tone="positive"] { border-left: 3px solid var(--healthy); }
.card[data-tone="warning"]  { border-left: 3px solid var(--degraded); }
.card[data-tone="critical"] { border-left: 3px solid var(--critical); }

/* table */
.art-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.art-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.art-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.art-table tr[data-highlight="true"] td { background: var(--am-truth-50); }
.art-table-wrap { overflow-x: auto; padding: 0 14px 16px; }

/* lifecycle timeline */
.tl { padding: 8px 26px 20px; }
.tl__track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 8px 0 4px; }
.tl__stage { position: relative; flex: 1 1 0; min-width: 96px; text-align: center; padding: 0 6px; outline: none; }
.tl__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--border); }
.tl__stage:first-child::before { left: 50%; } .tl__stage:last-child::before { right: 50%; }
.tl__dot { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.tl__stage[data-state="done"] .tl__dot { background: var(--am-truth); border-color: var(--am-truth); color: #fff; }
.tl__stage[data-state="current"] .tl__dot { border-color: var(--am-truth); color: var(--am-truth); box-shadow: 0 0 0 5px var(--am-truth-50); font-weight: 600; }
.tl__stage[data-state="blocked"] .tl__dot { border-color: var(--degraded); color: var(--degraded); }
.tl__stage[data-state="next"] .tl__dot { border-style: dashed; }
.tl__label { margin-top: 8px; font-size: 11.5px; color: var(--text-2); line-height: 1.25; }
.tl__stage[data-state="current"] .tl__label { color: var(--text); font-weight: 600; }
.tl__stage[data-state="future"] .tl__label { color: var(--text-4); }
.tl__pct { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }
.tl__stage:focus-visible .tl__dot, .tl__stage[data-selected="true"] .tl__dot { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.tl__detail { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; }
.tl__detail b { display: block; margin-bottom: 4px; }
.tl__blockers { color: var(--degraded); font-family: var(--font-mono); font-size: 11.5px; margin: 4px 0 8px; }
.tl__ring { width: 46px; height: 46px; }
.tl__summary { display: flex; align-items: center; gap: 14px; padding: 4px 26px 6px; }
.tl__summary-text { font-size: 13px; color: var(--text-2); }

/* help grid */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 0 26px 22px; }
.help-ns { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: 10px 12px; }
.help-ns__head { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--am-truth); margin-bottom: 6px; }
.help-cmd { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.help-cmd:hover, .help-cmd:focus-visible { background: var(--surface); }
.help-cmd[data-allowed="false"] { opacity: .45; cursor: not-allowed; }
.help-cmd__display { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.help-cmd__title { font-size: 12px; color: var(--text-2); grid-column: 1 / -1; }
.help-cmd__voice { font-size: 11.5px; color: var(--text-3); font-style: italic; grid-column: 1 / -1; }

/* clarify extras */
.art-clarify__options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.art-clarify__canon { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); background: var(--surface-2); padding: 6px 10px; border-radius: var(--r-sm); margin-top: 8px; word-break: break-all; }
.art-clarify__timer { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); margin-top: 8px; }

/* theme swatches */
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 26px 22px; }
.theme-swatch { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; cursor: pointer; background: var(--surface); text-align: left; font: inherit; color: inherit; }
.theme-swatch[data-current="true"] { border-color: var(--am-truth); box-shadow: 0 0 0 3px var(--am-truth-50); }
.theme-swatch__dots { display: flex; gap: 4px; margin-bottom: 6px; }
.theme-swatch__dots i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
.theme-swatch__name { font-family: var(--font-mono); font-size: 11px; text-transform: capitalize; }

/* command detail panel (below the palette) */
.cmd-detail { position: fixed; left: 50%; bottom: calc(var(--cmdbar-h) + 12px); transform: translateX(-50%); width: min(720px, 96vw); max-height: 42vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px 18px; z-index: 30; font-size: 13px; }
.cmd-detail__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cmd-detail__display { font-family: var(--font-mono); font-weight: 600; }
.cmd-detail__grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin-top: 8px; }
.cmd-detail__k { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.cmd-detail__ex { font-family: var(--font-mono); font-size: 12px; color: var(--am-truth); cursor: pointer; }
.cmd-detail__ex:hover { text-decoration: underline; }

/* transcript interim */
.transcript[data-interim="true"] { color: var(--text-3); }

/* ── Responsive (VUI/12 §12) ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .artifact-stage { padding: 88px 20px 28px; }
  .artifact-stage > * { max-width: calc(100vw - 32px) !important; width: auto !important; }
}
@media (max-width: 767px) {
  .gov-orb__label, .gov-orb__divider { display: none; }
  .user-chip__meta { display: none; }
  .eng-chip { display: none; }
  .artifact-stage { padding: 72px 12px 24px; align-items: safe flex-start; }
  .cmdbar__input { font-size: 16px; }
  .cmdbar__hint { display: none; }
  .palette { max-height: 50vh; }
  .hint-chip { padding: 5px 10px; font-size: 11px; }
  .help-grid { grid-template-columns: 1fr; }
  .cmd-detail { max-height: 36vh; }
}
@media (max-width: 480px) {
  .ambient-grid, .ambient-rule { display: none; }
  .welcome__greet { font-size: 17px; } .welcome__sub { font-size: 11px; }
  .artifact-stage { padding: 64px 8px 20px; }
  .art-table thead { display: none; }
  .art-table tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .art-table td { display: block; border: 0; padding: 2px 12px; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .tl__track { flex-direction: column; align-items: stretch; }
  .tl__stage { min-width: 0; text-align: left; display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  .tl__stage::before { display: none; }
  .tl__dot { margin: 0; }
  .tl__label { margin-top: 0; }
}
@media (max-height: 520px) {
  .artifact-stage { padding-top: 56px; padding-bottom: 16px; }
  .top-bar { top: 10px; }
}
@media (pointer: coarse) {
  .hint-chip, .cmdbar__mic, .btn, .palette__item, .help-cmd, .theme-swatch, .art-tool { min-height: 40px; min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body { min-height: 100dvh; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); }
@media (display-mode: standalone), (display-mode: window-controls-overlay) { body { overscroll-behavior: none; } }

/* ── reply swap + disabled mic ───────────────────────────────────────────────────────────────── */
@keyframes reply-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.cmdbar__mic[data-state="disabled"] { background: var(--surface-3); color: var(--text-4); cursor: not-allowed; }
.cmdbar__mic[data-state="disabled"]::before, .cmdbar__mic[data-state="disabled"]::after { display: none; }

/* ── cockpit board ───────────────────────────────────────────────────────────────────────────── */
.cockpit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 0 26px 22px; }
.cockpit-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: 12px 14px; min-height: 96px; }
.cockpit-card[data-stale="true"] { opacity: .7; }
.cockpit-card__label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 8px; }
.cockpit-card__value { font-size: 14px; color: var(--text); }
.cockpit-card__prov { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }

/* ── layouts (TDD-90 §3): professional (default), participant, projector ─────────────────────── */
#app[data-layout="projector"] { font-size: 20px; }
#app[data-layout="projector"] .gov-orb, #app[data-layout="projector"] .mode-badge, #app[data-layout="projector"] .user-chip, #app[data-layout="projector"] .hint-row, #app[data-layout="projector"] .ambient-grid { display: none; }
#app[data-layout="projector"] .artifact-stage > * { max-width: min(1600px, calc(100vw - 48px)) !important; }
#app[data-layout="projector"] .card__title { font-size: 1.6em; } #app[data-layout="projector"] .tl__label { font-size: 15px; }
#app[data-layout="participant"] .gov-orb, #app[data-layout="participant"] .mode-badge { display: none; }
#app[data-layout="participant"] .artifact-stage > * { max-width: 720px !important; }

/* ── graph artifacts (TDD-93 §E1) ─────────────────────────────────────────────────────────────── */
/* Only theme tokens here: semantic colours (lane kinds, control, state, vulnerable) are inline styles from visual_semantics and are never
   set by these rules. Every graph text pairs with a token that keeps AA contrast (4.5:1) on its actual background in all six themes —
   secondary text uses --text-2 (it sits on --surface and --surface-2 lanes); --gr-accent is a teal that reads as text on the card surface
   and carries the surface colour as text on the core (am-truth stays dark teal on the dark theme and is too light for text on latte). */
:root { --gr-accent: var(--am-truth); }
html[data-theme="dark"] { --gr-accent: #5DB8A9; }
html[data-theme="latte"] { --gr-accent: var(--am-truth-700); }
html[data-theme="presentation"] { --gr-accent: var(--am-truth-700); }
html[data-theme="presentation"] .tg-node[data-state="confirmed"] .tg-box, html[data-theme="presentation"] .tg-node[data-state="deployed"] .tg-box, html[data-theme="presentation"] .tg-card .chip[data-complete="true"] { stroke: var(--am-truth); border-color: var(--am-truth); }
.gr-card { max-width: 980px; }
.gr-scroll { overflow-x: auto; padding: 0 14px 6px; }
.gr-svg { display: block; font-family: var(--font-sans); outline: none; }
.gr-svg:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--r-md); }
.gr-colhead { font-family: var(--font-mono); font-size: 10px; fill: var(--text-2); letter-spacing: .06em; }
.gr-lane { fill: var(--surface); } .gr-lane[data-odd="true"] { fill: var(--surface-2); }
.gr-lanelabel { font-size: 12px; font-weight: 600; fill: var(--text); }
.gr-lanekind { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.gr-edge { fill: none; stroke: var(--text-3); stroke-width: 1.4; }
.gr-edge[data-kind="interaction"] { stroke-dasharray: 3 3; stroke: var(--gr-accent); }
.gr-edge[data-kind="control"] { stroke: #2E6E8E; stroke-dasharray: 5 3; }
.gr-edge[data-kind="feeds"], .gr-edge[data-kind="enabling"] { stroke: #6E7785; }
.gr-marker { fill: var(--text-3); } .gr-marker[data-kind="interaction"] { fill: var(--gr-accent); }
.gr-edgelabel { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-2); }
.gr-node { cursor: pointer; }
.gr-nodebox { fill: var(--surface); stroke-width: 2; }
.gr-node[data-kind="adm"] .gr-nodebox { stroke-width: 2.5; }
.gr-nodetext { font-size: 11.5px; fill: var(--text); }
.gr-nodeai { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--gr-accent); }
.gr-vulnmark { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: #FFFFFF; }   /* on the fixed vulnerable red (5.99:1 in every theme) */
.gr-focus { fill: none; stroke: var(--color-focus-ring); stroke-width: 2.5; }
.gr-boundary { fill: var(--am-truth-50); fill-opacity: .55; stroke: var(--gr-accent); stroke-width: 1.6; stroke-dasharray: 7 5; }
.gr-boundarylabel { font-family: var(--font-mono); font-size: 10.5px; fill: var(--gr-accent); letter-spacing: .08em; text-transform: uppercase; }
.gr-ring { fill: none; stroke: var(--border); stroke-width: 1.4; } .gr-ring[data-ring="direct"] { stroke: var(--gr-accent); stroke-opacity: .45; }
.gr-core { fill: var(--gr-accent); } .gr-coretext { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: var(--surface); }
.gr-ringlabel { font-family: var(--font-mono); font-size: 10px; fill: var(--text-2); text-transform: uppercase; letter-spacing: .08em; }
.gr-detail { display: flex; align-items: center; gap: 12px; margin: 8px 26px 6px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; min-height: 42px; }
.gr-detail b { color: var(--text); }
.gr-detail__meta { color: var(--text-2); font-family: var(--font-mono); font-size: 11px; flex: 1; }
.gr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 26px 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.gr-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.gr-legend__item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.btn--sm { padding: 4px 10px; font-size: 12px; }
@media (max-width: 767px) { .gr-detail { margin: 8px 14px; } .gr-legend { padding: 4px 14px 12px; } }

/* ── values artifacts (TDD-93 §E2): circumplex, value_map, ontology_tree ─────────────────────────── */
/* Same rules as the graph section: direction colours (fostered, undermined, mixed, gap) and the vulnerable marker are inline styles from
   visual_semantics; these rules set theme tokens only. Text pairs: --text and --text-2 on --surface, --surface-2, --am-truth-50 and
   --degraded-bg (≥ 4.5:1 in all six themes); counts are white on the fixed fostered/undermined fills (≥ 6:1). The layouts measure text
   in the font sizes and weights below, so a size changed here must change in values-graphs.jsx too. */
.vg-filters { display: flex; flex-direction: column; gap: 6px; padding: 0 26px 10px; }
.vg-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vg-filters__label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); min-width: 48px; }
.vg-chip { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-chip:hover { border-color: var(--border-strong); }
.vg-chip[aria-pressed="true"] { background: var(--am-truth-50); border-color: var(--gr-accent); color: var(--text); }
.vg-note { margin: 4px 26px 0; font-size: 12px; color: var(--text-2); }
.vg-detail { flex-wrap: wrap; row-gap: 4px; } .vg-detail b { flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere; } .vg-detail .gr-detail__meta { flex: 1 1 380px; min-width: 0; }   /* a long title takes its own line */
/* circumplex */
.vg-sector { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; } .vg-sector[data-odd="true"] { fill: var(--surface-3); }
.vg-spoke { stroke: var(--border); stroke-width: 1; }
.vg-arc { fill: none; stroke-width: 4; stroke-linecap: round; }
.vg-archit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.vg-arcfocus { fill: none; stroke: var(--color-focus-ring); stroke-width: 11; stroke-opacity: .35; stroke-linecap: round; }
.vg-vdot { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.6; } .vg-vdot[data-empty="true"] { stroke: var(--border-strong); }
.vg-markcand { fill: none; stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 3 2; }
.vg-markcount { font-size: 10px; font-weight: 700; fill: #FFFFFF; pointer-events: none; }   /* on the fixed fostered / undermined fills */
.vg-vlabel { font-size: 11px; fill: var(--text); } .vg-vlabel[data-empty="true"] { fill: var(--text-2); }
.vg-sectorlabel { font-family: var(--font-mono); font-size: 10px; font-weight: 600; fill: var(--text-2); }
.vg-centre { font-size: 10.5px; fill: var(--text-2); }
/* value map */
.vg-colhead { font-size: 12px; font-weight: 600; fill: var(--text); }
.vg-headmeta { font-size: 10px; fill: var(--text-2); }
.vg-rowhead { fill: var(--surface-2); }
.vg-rowlabel { font-size: 12px; font-weight: 600; fill: var(--text); }
.vg-cellnone { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.vg-cellbox { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; } .vg-cellbox[data-gap="true"] { fill: var(--degraded-bg); stroke-width: 1.6; }
.vg-celltitle { font-size: 11px; font-weight: 600; fill: var(--text); }
.vg-cellmeta { font-size: 10.5px; fill: var(--text-2); }
.vg-bartrack { fill: var(--surface-3); }
.vg-vchipbox { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.vg-vchiptext { font-size: 10px; fill: var(--text); }
/* ontology tree */
.vg-tnode { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; } .vg-tnode[data-root="true"] { fill: var(--am-truth-50); stroke: var(--gr-accent); stroke-width: 2; }
.vg-tlabel { font-size: 11.5px; fill: var(--text); }
.vg-badgebox { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; } .vg-badgebox[data-more="true"] { fill: var(--am-truth-50); stroke: var(--gr-accent); }
.vg-badgetext { font-size: 10px; fill: var(--text-2); } .vg-badgebox[data-more="true"] + .vg-badgetext { fill: var(--text); }
@media (max-width: 767px) { .vg-filters { padding: 0 14px 10px; } .vg-note { margin: 4px 14px 0; } }
@media (pointer: coarse) { .vg-chip { min-height: 36px; } }

/* ── impact heat map (TDD-80 heatmap_matrix) ─────────────────────────────────────────────────── */
.hm-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 6px; padding: 4px 2px 8px; }
.hm-axis { color: var(--text-2); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.hm-axis--y { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
.hm-axis--x { grid-column: 2; text-align: center; }
.hm-grid { display: grid; gap: 6px; outline: none; min-width: 0; }
.hm-grid:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 10px; }
.hm-row { display: grid; grid-template-columns: 56px repeat(3, minmax(0, 1fr)); gap: 6px; }
.hm-rowhead, .hm-colhead { color: var(--text-2); font-size: 11.5px; display: flex; align-items: center; justify-content: center; }
.hm-cell { background: var(--surface); border: 1px solid var(--border); border-top-width: 4px; border-radius: 10px; padding: 8px; min-height: 84px; min-width: 0; }
.hm-cell[data-level="HI"] { border-top-color: var(--critical); }
.hm-cell[data-level="MI"] { border-top-color: var(--degraded); }
.hm-cell[data-level="LI"] { border-top-color: var(--healthy); }
.hm-cell__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.hm-cell__coord { color: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.hm-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hm-entry { border-radius: 6px; padding: 4px 6px; background: var(--surface-2); cursor: pointer; display: grid; min-width: 0; }
.hm-entry[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.hm-entry__label { color: var(--text); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.hm-entry__meta { color: var(--text-2); font-size: 11px; overflow-wrap: anywhere; }
.hm-more { color: var(--text-2); font-size: 11px; padding: 2px 6px; }
.hm-card .art-footer { color: var(--text-2); }
.hm-level { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-strong); white-space: nowrap; }
.hm-level::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.hm-level[data-level="HI"] { border-color: var(--critical); } .hm-level[data-level="HI"]::before { background: var(--critical); }
.hm-level[data-level="MI"] { border-color: var(--degraded); } .hm-level[data-level="MI"]::before { background: var(--degraded); }
.hm-level[data-level="LI"] { border-color: var(--healthy); }  .hm-level[data-level="LI"]::before { background: var(--healthy); }
@media (max-width: 520px) {
  .hm-row { grid-template-columns: 1fr; }
  .hm-rowhead, .hm-row--foot, .hm-axis { display: none; }
  .hm-wrap { grid-template-columns: 1fr; }
}

/* ── traceability graph (E5) ─────────────────────────────────────────────────────────────────── */
.tg-rank { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-2); letter-spacing: .04em; text-transform: uppercase; }
.tg-box { stroke: var(--text-3); }
.tg-node[data-state="confirmed"] .tg-box, .tg-node[data-state="deployed"] .tg-box { stroke: #0E5C50; }
.tg-node[data-state="edited"] .tg-box { stroke: #2E6E8E; }
.tg-node[data-gap="true"] .tg-box, .tg-node[data-orphan="true"] .tg-box { stroke: #B53245; }
.tg-label { font-size: 11.5px; fill: var(--text); }
.tg-meta { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-2); }
.tg-card .chip[data-complete="true"] { border-color: #0E5C50; }

/* ── Assessment grid and readiness gauge (E6, TDD-84/85/93). State is always a glyph and a word; the colour only repeats it.
   Text colours are --text and --text-2 on --surface / --surface-2 (≥ 4.5:1 in all six themes). */
.ag-card, .rg-card { max-width: 980px; }
.ag-card .art-footer, .rg-card .art-footer { color: var(--text-2); padding-top: 10px; }
.ag-body { padding: 4px 26px 0; min-width: 0; }
.ag-summary { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ag-mark { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: 12px; font-weight: 600; }
.ag-glyph { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--text-3); font-size: 10px; line-height: 1; color: var(--text); }
.ag-mark[data-adequacy="adequate"] .ag-glyph { border-color: var(--healthy); }
.ag-mark[data-adequacy="partially_adequate"] .ag-glyph { border-color: var(--degraded); }
.ag-mark[data-adequacy="inadequate"] .ag-glyph, .ag-mark[data-adequacy="absent"] .ag-glyph { border-color: var(--critical); }
.ag-list { display: grid; gap: 10px; outline: none; max-height: 560px; overflow-y: auto; padding: 2px; min-width: 0; align-content: start; }
.ag-list:focus-visible, .rg-checks:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 10px; }
.ag-group { display: grid; gap: 4px; min-width: 0; }
.ag-group__name { color: var(--text-2); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 4px; }
.ag-group__n { font-variant-numeric: tabular-nums; font-weight: 400; }
.ag-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(132px, auto); gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; cursor: pointer; min-width: 0; }
.ag-row[data-tone="good"] { border-left-color: var(--healthy); } .ag-row[data-tone="warn"] { border-left-color: var(--degraded); } .ag-row[data-tone="bad"] { border-left-color: var(--critical); }
.ag-row[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.ag-row__main { display: grid; gap: 3px; min-width: 0; }
.ag-row__label { color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ag-row__meta, .ag-row__needs, .ag-none { color: var(--text-2); font-size: 11.5px; overflow-wrap: anywhere; }
.ag-row__needs { color: var(--text); }
.ag-row__evidence { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-chip { background: var(--surface-2); color: var(--text); border-radius: 4px; padding: 1px 6px; font-size: 11.5px; overflow-wrap: anywhere; }
.ag-row__smart { display: grid; grid-template-columns: repeat(5, 22px); gap: 3px; }
.ag-dot { display: grid; justify-items: center; gap: 1px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 0; background: var(--surface); }
.ag-dot__l { color: var(--text-2); font-size: 10px; font-weight: 600; line-height: 1; }
.ag-dot__g { color: var(--text); font-size: 11px; line-height: 1; }
.ag-dot[data-result="met"] { border-bottom: 3px solid var(--healthy); } .ag-dot[data-result="partly"] { border-bottom: 3px solid var(--degraded); } .ag-dot[data-result="not"] { border-bottom: 3px solid var(--critical); }
.ag-row__state { display: grid; gap: 3px; justify-items: start; }
.ag-outcome { color: var(--text-2); font-size: 11.5px; }
.ag-outcome[data-tone="good"], .ag-outcome[data-tone="warn"], .ag-outcome[data-tone="bad"] { color: var(--text); font-weight: 600; }
.rg-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 16px; align-items: start; padding: 4px 26px 0; }
.rg-gauges { display: grid; gap: 10px; min-width: 0; }
.rg-gauge { display: grid; gap: 4px; min-width: 0; }
.rg-gauge__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rg-gauge__label { color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rg-gauge__fig { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-gauge__meta { color: var(--text-2); font-size: 11.5px; }
.rg-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; border: 1px solid var(--border); }
.rg-bar__fill { height: 100%; background: var(--am-ink); border-radius: 4px 0 0 4px; }
.rg-conditions { border-top: 1px solid var(--border); padding-top: 8px; }
.rg-conditions__head { color: var(--text-2); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.rg-conditions ul { margin: 4px 0 0; padding-left: 18px; color: var(--text); font-size: 12px; }
.rg-checks { display: grid; gap: 4px; outline: none; min-width: 0; }
.rg-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.rg-check[data-state="pass"] { border-left-color: var(--healthy); } .rg-check[data-state="fail"] { border-left-color: var(--critical); } .rg-check[data-state="provisional"], .rg-check[data-state="pending"] { border-left-color: var(--degraded); }
.rg-check[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.rg-check__glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-3); color: var(--text); font-size: 11px; line-height: 1; margin-top: 1px; }
.rg-check__body { display: grid; gap: 1px; min-width: 0; }
.rg-check__label { color: var(--text); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.rg-check__state { color: var(--text-2); font-size: 11.5px; overflow-wrap: anywhere; }
.rg-ready { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); border: 1.5px solid var(--border-strong); background: var(--surface); white-space: nowrap; }
.rg-ready::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.rg-ready[data-readiness="ready"] { border-color: var(--healthy); } .rg-ready[data-readiness="ready"]::before { background: var(--healthy); }
.rg-ready[data-readiness="ready_with_conditions"], .rg-ready[data-readiness="provisional"] { border-color: var(--degraded); } .rg-ready[data-readiness="ready_with_conditions"]::before, .rg-ready[data-readiness="provisional"]::before { background: var(--degraded); }
.rg-ready[data-readiness="not_ready"] { border-color: var(--critical); } .rg-ready[data-readiness="not_ready"]::before { background: var(--critical); }
@media (max-width: 640px) {
  .ag-body, .rg-wrap { padding-left: 14px; padding-right: 14px; }
  .ag-row { grid-template-columns: minmax(0, 1fr); }
  .ag-row__smart { grid-template-columns: repeat(5, 28px); }
  .rg-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* E7: the QMS bridge on the traceability graph — one hue per kind, every kind also carries its word (never colour alone) */
.tg-node[data-kind="record"] .tg-box { stroke: #4C4F69; }
.tg-node[data-kind="procedure"] .tg-box { stroke: #1E66F5; }
.tg-node[data-kind="art17_point"] .tg-box { stroke: #8839EF; stroke-width: 2; }
.tg-node[data-kind="hazard"] .tg-box { stroke: #D20F39; }
.tg-node[data-kind="hazard"][data-state="critical"] .tg-box { stroke-width: 3; }
.tg-node[data-kind="obligation"] .tg-box { stroke: #DF8E1D; }
.tg-node[data-state="not_started"] .tg-box, .tg-node[data-state="planned"] .tg-box { stroke-dasharray: 4 3; }

/* sign-in and the user menu (IEEE demo day: the shell signs in through the tenant's identity provider) */
.user-chip-wrap { position: relative; }
button.user-chip { font: inherit; color: var(--text); text-align: left; }
button.user-chip:focus-visible { outline: 2px solid var(--color-focus-ring, var(--am-truth)); outline-offset: 2px; }
.user-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 260px; max-width: min(360px, 90vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.user-menu__eyebrow { font: 600 10.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.user-menu__name { font: 500 15px/1.3 var(--font-serif); color: var(--text); }
.user-menu__line { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.user-menu__line b { font-weight: 600; color: var(--text-2); }
.user-menu__out { margin-top: 10px; align-self: flex-start; }
.signin-card { max-width: min(460px, 90vw); }

/* ── The owner's rule (22 October 2026): no artifact is wider than 90 % of the viewport ─────────────────────────────────────────
   The stage centres one artifact and lets it shrink to 90 vw; a wide table wraps its long cells and scrolls sideways inside its card,
   a graph scrolls inside its own frame, and the page never scrolls sideways. scripts/demo_day/width_check.py measures it. */
.artifact-stage { overflow-x: hidden; }
.artifact-stage > *, .artifact-stage > .art-wrap { max-width: 90vw !important; min-width: 0; flex-shrink: 1; }
.art-wrap > * { max-width: 100%; box-sizing: border-box; }
.art-wrap .card, .art-wrap .gr-card { max-width: 100%; }
.art-table-wrap, .gr-scroll { max-width: 100%; overflow-x: auto; }
.art-table td { overflow-wrap: anywhere; }
.art-table td:not(:first-child) { max-width: 52ch; }
.tl, .tl__track { max-width: 100%; }
.tl__track { overflow-x: auto; }
@media (max-width: 1023px) { .artifact-stage > * { max-width: 90vw !important; } }
#app[data-layout="projector"] .artifact-stage > * { max-width: min(1600px, 90vw) !important; }

/* ── The pipeline board: a rail of the method (about a tenth), the sub-step's artifact, its numbered actions; 90 % of the viewport ──── */
.artifact-stage[data-pipeline="open"] { align-items: stretch; }
.pl-frame { width: 90vw; max-width: 90vw; height: calc(100vh - 262px); min-height: 420px; display: grid; grid-template-columns: minmax(128px, 10%) minmax(0, 1fr) minmax(150px, 13%);
  gap: 20px; align-self: center; box-sizing: border-box; }
.pl-rail { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); padding-right: 14px; }
.pl-rail__head { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 4px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rail__steps { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; position: relative; }
.pl-step { position: relative; }
.pl-step + .pl-step { margin-top: 2px; }
.pl-step__btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 4px; background: transparent; border: 0; border-radius: var(--r-sm, 6px); cursor: pointer;
  font: 500 13px/1.25 var(--font-sans); color: var(--text-2); text-align: left; }
.pl-step__btn:hover:not(:disabled) { background: var(--surface-2); }
.pl-step__btn:focus-visible, .pl-sub:focus-visible, .pl-act:focus-visible { outline: 2px solid var(--color-focus-ring, var(--am-truth)); outline-offset: 1px; }
.pl-step__btn:disabled { cursor: default; opacity: .45; }
.pl-step[data-open="true"] .pl-step__btn { color: var(--text); font-weight: 600; }
.pl-step__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 10.5px var(--font-mono);
  border: 1.5px solid var(--border-strong); color: var(--text-3); background: var(--surface); }
.pl-dot[data-state="done"] { background: var(--am-truth); border-color: var(--am-truth); color: var(--surface); }
.pl-dot[data-state="here"] { border-color: var(--am-truth); color: var(--gr-accent, var(--am-truth)); box-shadow: 0 0 0 3px var(--am-truth-50); }
.pl-dot[data-state="available"] { border-color: var(--am-truth); color: var(--gr-accent, var(--am-truth)); }
.pl-dot[data-state="blocked"] { border-style: dashed; color: var(--text-3); }
.pl-subs { list-style: none; margin: 2px 0 8px 14px; padding: 0 0 0 16px; border-left: 1.5px solid var(--border); }
.pl-sub { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 4px 6px; margin: 1px 0; border-radius: var(--r-sm, 6px);
  font: 500 12.5px var(--font-sans); color: var(--text-2); cursor: pointer; position: relative; }
.pl-sub:hover { background: var(--surface-2); }
.pl-sub[data-here="true"] { color: var(--gr-accent, var(--am-truth)); font-weight: 600; background: var(--am-truth-50); }
.pl-sub[data-here="true"]::before { content: ""; position: absolute; left: -18.5px; top: 6px; bottom: 6px; width: 3px; background: var(--am-truth); border-radius: 2px; }
.pl-rail__keys { font: 500 10.5px var(--font-mono); color: var(--text-3); padding-top: 10px; line-height: 1.5; }
.pl-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pl-pane__head { padding: 2px 0 14px; display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.pl-pane__lead { min-width: 0; flex: 1 1 320px; }
.pl-fig { display: flex; gap: 14px; align-items: center; flex: 0 1 auto; max-width: 100%; }
.pl-fig__key { font: 300 46px/1 var(--font-serif); color: var(--gr-accent, var(--am-truth)); letter-spacing: -.01em; white-space: nowrap; }
.pl-fig__take { font: 600 12px/1.3 var(--font-sans); color: var(--text); max-width: 26ch; }
.pl-fig__points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.pl-fig__points li { font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
.pl-fig__points li::before { content: "·"; color: var(--gr-accent, var(--am-truth)); font-weight: 700; margin-right: 6px; }
.pl-pane__eyebrow { font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pl-pane__state { font: 600 10px var(--font-mono); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); letter-spacing: .04em; }
.pl-pane__state[data-state="done"] { background: var(--am-truth-50); color: var(--gr-accent, var(--am-truth)); }
.pl-pane__state[data-state="here"] { background: var(--am-truth); color: var(--surface); }
.pl-pane__title { font: 400 22px/1.25 var(--font-serif); color: var(--text); margin-top: 6px; }
.pl-pane__note { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.pl-pane__body { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding-bottom: 8px; }
.pl-pane__body > .art-wrap { max-width: 100% !important; width: 100%; }
.pl-pane__body > .art-wrap > * { margin: 0 auto; }
.pl-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 34px; min-width: 0; }
.pl-act { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px 9px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: 500 12.5px/1.25 var(--font-sans); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); }
.pl-act:hover:not(:disabled) { border-color: var(--border-strong); }
.pl-act:disabled { opacity: .45; cursor: not-allowed; }
.pl-act__n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 10.5px var(--font-mono); background: var(--surface-2); color: var(--text-2); }
.pl-act--primary { background: var(--am-truth); border-color: var(--am-truth); color: var(--surface); }
.pl-act--primary .pl-act__n { background: rgba(255,255,255,.22); color: var(--surface); }
.pl-act--quiet { box-shadow: none; background: transparent; color: var(--text-2); margin-top: auto; }
.pl-act--quiet .pl-act__n { width: auto; padding: 0 6px; border-radius: 999px; }
@media (max-width: 1023px) {
  .pl-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: auto; min-height: 0; }
  .pl-rail { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 8px; }
  .pl-rail__steps { display: flex; gap: 4px; overflow-x: auto; }
  .pl-step { flex: none; }
  .pl-step__label { display: none; }
  .pl-step[data-open="true"] .pl-step__label { display: inline; }
  .pl-subs { display: flex; gap: 4px; margin: 0; padding: 0; border: 0; }
  .pl-sub[data-here="true"]::before { display: none; }
  .pl-rail__keys { display: none; }
  .pl-actions { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .pl-act--quiet { margin-top: 0; }
}

/* ── presentation-style panes of the pipeline board (the panel deck's visuals, in every theme's tokens) ─────────────────────────────── */
:root { --pp-neg: var(--critical); --pp-pos: var(--am-ink); --pp-hi: var(--critical); --pp-mi: var(--degraded); --pp-li: var(--healthy); }
html[data-theme="dark"], html[data-theme="frappe"], html[data-theme="macchiato"], html[data-theme="mocha"] { --pp-pos: var(--am-ink); }
html[data-theme="presentation"] { --pp-pos: var(--att-low); }
.pp { width: 100%; max-width: 1040px; margin: 0 auto; font-size: 13px; color: var(--text); }
.pp-empty { color: var(--text-3); padding: 40px 0; text-align: center; }
.pp-note { color: var(--text-2); font-size: 12.5px; margin: 14px 0 0; }
.pp-legend { display: flex; gap: 18px; font-size: 12px; color: var(--text-2); margin-bottom: 10px; flex-wrap: wrap; }
.pp-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.pp-legend i[data-k="neg"] { background: var(--pp-neg); } .pp-legend i[data-k="pos"] { background: var(--pp-pos); }
.pp-legend i[data-k="unit"] { background: var(--pp-pos); } .pp-legend i[data-k="unit-hollow"] { border: 2px solid var(--pp-pos); box-sizing: border-box; }
.pp-legend i[data-k="unit-done"] { background: var(--am-truth); }
/* value bars: undermined to the left, fostered to the right, Schwartz order, grouped by higher-order value */
.pp-values { columns: 2 340px; column-gap: 32px; }
.pp-values .pp-legend { column-span: all; }
.pp-vgroup { break-inside: avoid; margin-bottom: 14px; }
.pp-vgroup h4 { margin: 0 0 6px; font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pp-vrow { display: grid; grid-template-columns: minmax(0, 1fr) 12em minmax(0, 1fr); align-items: center; gap: 8px; height: 21px; }
.pp-vrow[data-zero="true"] .pp-vlabel { color: var(--text-3); }
.pp-vlabel { text-align: center; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-vbar { position: relative; height: 12px; display: flex; align-items: center; }
.pp-vbar i { display: block; height: 100%; border-radius: 2px; }
.pp-vbar--neg { justify-content: flex-end; } .pp-vbar--neg i { background: var(--pp-neg); }
.pp-vbar--pos i { background: var(--pp-pos); }
.pp-vbar b { font: 600 11px var(--font-mono); color: var(--text-2); padding: 0 5px; }
.pp-vbar--neg b { order: -1; }
/* the 3 × 3 matrix with its counts */
.pp-mx { display: grid; grid-template-columns: 2.2em 1.6em repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(84px, auto)) 22px 22px; gap: 8px; max-width: 760px; margin: 0 auto; }
.pp-mx__axis { font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.pp-mx__axis--y { grid-row: 1 / span 3; writing-mode: vertical-rl; transform: rotate(180deg); }
.pp-mx__axis--x { grid-column: 3 / span 3; grid-row: 5; min-height: 0; }
.pp-mx__row, .pp-mx__col { font: 600 12px var(--font-mono); color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.pp-mx__row { grid-column: 2; } .pp-mx__col { min-height: 0; }
.pp-mx__cell { border: 1px solid var(--border); border-top: 4px solid var(--border-strong); background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.pp-mx__cell[data-l="HI"] { border-top-color: var(--pp-hi); } .pp-mx__cell[data-l="MI"] { border-top-color: var(--pp-mi); } .pp-mx__cell[data-l="LI"] { border-top-color: var(--pp-li); }
.pp-mx__cell span { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.pp-mx__cell b { font: 300 38px/1 var(--font-serif); text-align: right; font-variant-numeric: tabular-nums; }
.pp-mx__cell[data-n="0"] b { color: var(--text-3); }
/* suite relevance against the threshold */
.pp-suites { max-width: 900px; }
.pp-srow { display: grid; grid-template-columns: 13em minmax(0, 1fr) 3.4em; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pp-slabel { font-weight: 600; }
.pp-srow[data-selected="false"] .pp-slabel { color: var(--text-3); }
.pp-strack { position: relative; height: 14px; background: var(--surface-2); border-radius: 3px; }
.pp-strack i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--am-truth); border-radius: 3px; }
.pp-strack em { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text); }
.pp-srow b { font: 600 13px var(--font-mono); text-align: right; }
.pp-sreason { grid-column: 2 / span 2; font-size: 11.5px; color: var(--text-2); margin-top: 4px; }
/* requirement units, suite by suite */
.pp-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px 28px; }
.pp-units .pp-legend { grid-column: 1 / -1; }
.pp-ugroup h4 { margin: 0 0 8px; font: 600 13px var(--font-sans); display: flex; justify-content: space-between; }
.pp-ugroup h4 span { font: 500 11px var(--font-mono); color: var(--text-3); }
.pp-usq { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-unit { min-width: 38px; height: 30px; padding: 0 6px; display: grid; place-items: center; font: 600 10.5px var(--font-mono); border: 2px solid var(--pp-pos); background: var(--pp-pos); color: var(--surface); border-radius: 3px; box-sizing: border-box; }
.pp-unit[data-k="inhibitor"] { background: transparent; color: var(--pp-pos); }
.pp-unit[data-done="true"] { border-color: var(--am-truth); }
.pp-unit[data-done="true"][data-k="driver"] { background: var(--am-truth); }
/* control classes */
.pp-class { max-width: 900px; }
.pp-stack { display: flex; gap: 3px; height: 34px; margin: 6px 0 16px; }
.pp-stack i { display: block; border-radius: 3px; min-width: 4px; }
.pp-stack i[data-k="inherently_safe_design"], .pp-stackleg [data-k="inherently_safe_design"] b { background: var(--am-truth-700); }
.pp-stack i[data-k="protective_measure"] { background: var(--am-truth); }
.pp-stack i[data-k="information"] { background: var(--degraded); }
.pp-stackleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pp-stackleg > div { display: grid; gap: 2px; border-top: 3px solid var(--border); padding-top: 8px; }
.pp-stackleg > div[data-k="protective_measure"] { border-top-color: var(--am-truth); } .pp-stackleg > div[data-k="information"] { border-top-color: var(--degraded); } .pp-stackleg > div[data-k="inherently_safe_design"] { border-top-color: var(--am-truth-700); }
.pp-stackleg b { font: 300 34px/1 var(--font-serif); background: none !important; } .pp-stackleg span { font-weight: 600; } .pp-stackleg em { color: var(--text-3); font: 500 11px var(--font-mono); font-style: normal; }
/* a deliberation's options and its record */
.pp-question { font: 400 17px/1.4 var(--font-serif); margin: 0 0 14px; }
.pp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.pp-opt { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.pp-opt[data-chosen="true"] { border-color: var(--am-truth); box-shadow: inset 0 3px 0 var(--am-truth); }
.pp-opt header { display: flex; justify-content: space-between; font: 600 11px var(--font-mono); color: var(--text-3); text-transform: uppercase; }
.pp-opt header em { font-style: normal; color: var(--gr-accent, var(--am-truth)); }
.pp-opt h5 { margin: 0; font: 600 14px/1.35 var(--font-sans); }
.pp-pc { display: grid; gap: 3px; font-size: 12px; color: var(--text-2); background: var(--surface-2); padding: 8px 10px; border-radius: var(--r-sm, 6px); }
.pp-pc b { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--am-truth-700); }
.pp-pc--con b { color: var(--critical); }
.pp-record { margin: 12px 0 0; font-size: 13px; } .pp-record b { font-weight: 600; }
/* readiness checks */
.pp-checks { max-width: 820px; display: grid; gap: 2px; }
.pp-check { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.pp-check i { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.pp-check[data-state="pass"] i { background: var(--healthy); } .pp-check[data-state="fail"] i { background: var(--critical); }
.pp-check em { font: 600 11px var(--font-mono); font-style: normal; text-transform: uppercase; color: var(--text-2); }
.pp-check[data-state="fail"] em { color: var(--critical); }
/* the decision layer (VUI2-08): the decision card, the next-step line, the decision counts, the inbox badge and the "just opened" note */
.dec-card { max-width: 720px; }
.dec-card__chips { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dec-card__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; padding: 0 26px 14px; }
.dec-card__option { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 4px; }
.dec-card__option[data-chosen="true"] { border-color: var(--am-truth); }
.dec-card__option[data-outcome="true"] { border-color: var(--am-truth); box-shadow: inset 0 3px 0 var(--am-truth); }
.dec-card__label { display: flex; align-items: center; gap: 6px; font: 600 14px/1.35 var(--font-sans); }
.dec-card__votes { margin-left: auto; font: 500 12px var(--font-mono); color: var(--text-3); }
.dec-card__sentence { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.dec-card__standing { list-style: none; margin: 0; padding: 0 26px 12px; display: grid; gap: 4px; font-size: 13px; }
.dec-card__standing li { padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-2); }
.dec-card__standing li[data-kind="veto"] { border-color: var(--critical); }
.dec-card__standing li[data-kind="concern"], .dec-card__standing li[data-kind="escalated"] { border-color: var(--degraded); }
.next-line { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 10px; width: min(960px, calc(100% - 32px)); padding: 4px 4px; font-size: 13px; color: var(--text-2); }
@media (max-width: 720px) { .next-line { top: 74px; } }
#app:has(.next-line) .artifact-stage { padding-top: 128px; }
.next-line__label { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); flex: none; }
.next-line__say { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-line__go { flex: none; }
.dec-counts { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 2px; cursor: pointer; }
.dec-counts button { border: 0; background: none; padding: 3px 8px; font: 500 11px var(--font-mono); color: var(--text-2); cursor: pointer; border-radius: calc(var(--r-md) - 2px); }
.dec-counts button b { font-weight: 600; color: var(--text); margin-left: 4px; }
.dec-counts button[data-hot="true"] b { color: var(--am-truth); }
.user-chip__count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 8px; background: var(--am-truth); color: var(--surface); font: 600 10px var(--font-mono); }
.dec-toast { position: fixed; z-index: 40; right: 16px; bottom: 96px; max-width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--am-truth); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; display: grid; gap: 8px; box-shadow: var(--shadow-md); }
.dec-toast__eyebrow { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--am-truth); }
/* the work item (VUI2-11, artifact 1): the decision beside its context */
.wi { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1120px; width: 100%; }
@media (min-width: 1100px) { .wi { grid-template-columns: minmax(0, 1fr) 320px; } .wi__side { border-left: 1px solid var(--border); } }
.wi__main { min-width: 0; }
.wi__side { padding: 18px 20px; display: grid; gap: 14px; align-content: start; background: var(--surface-2); font-size: 12.5px; }
.wi__h { display: block; font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; }
.wi__group { display: grid; gap: 4px; }
.wi__line, .wi__muted { color: var(--text-2); line-height: 1.45; } .wi__muted { color: var(--text-4); }
.wi__link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; text-align: left; background: none; border: 0; border-left: 2px solid var(--border); padding: 2px 0 2px 8px; color: var(--text); font: inherit; cursor: pointer; }
.wi__link:hover { border-left-color: var(--am-truth); }
.wi__state { grid-column: 2; color: var(--text-3); font: 500 10.5px var(--font-mono); }
.wi__person { display: grid; gap: 1px; } .wi__person span { color: var(--text-3); } .wi__person[data-you="true"] b { color: var(--am-truth); }
.wi__why span { display: block; font: 600 10.5px var(--font-mono); color: var(--am-truth-700); }
.wi__withheld .wi__line { color: var(--text-3); }
.wi__guide { margin: 0 26px 14px; padding: 10px 12px; border-left: 3px solid var(--am-truth); background: var(--am-truth-50); font-size: 13px; line-height: 1.45; color: var(--text); }
.wi__texts { padding: 0 26px 12px; display: grid; gap: 6px; } .wi__texts blockquote { margin: 0; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; } .wi__texts b { display: block; font: 600 10.5px var(--font-mono); color: var(--text-3); margin-bottom: 4px; }
.wi__bar { height: 4px; background: var(--surface-2); } .wi__bar i { display: block; height: 100%; background: var(--am-truth); }
.wi { max-height: calc(100vh - 250px); overflow: hidden; }
.wi__main, .wi__side { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1099px) { .wi { max-height: none; overflow: visible; } .wi__main, .wi__side { overflow: visible; } }
/* the step rail (VUI2-11, artifact 3) */
.stage-rail { display: none; }
@media (min-width: 1200px) {
  .stage-rail { position: absolute; z-index: 8; top: 132px; left: 22px; bottom: 128px; width: 196px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
  #app:has(.stage-rail) .artifact-stage { padding-left: 238px; }
}
.stage-rail__step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; text-align: left; background: var(--surface); border: 1px solid var(--border); padding: 7px 10px; font: inherit; color: var(--text); cursor: pointer; }
.stage-rail__step:disabled { cursor: default; background: transparent; }
.stage-rail__step[data-focus="true"] { border-color: var(--am-truth); box-shadow: inset 3px 0 0 var(--am-truth); }
.stage-rail__label { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; min-width: 0; }
.stage-rail__yours { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--am-truth); color: var(--surface); font: 600 10px var(--font-mono); }
.stage-rail__bar { grid-column: 1; height: 3px; background: var(--surface-2); } .stage-rail__bar i { display: block; height: 100%; background: var(--am-truth); }
.stage-rail__count { grid-column: 2; grid-row: 1 / span 2; font: 500 11px var(--font-mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.stage-rail__hidden { grid-column: 1 / -1; font-size: 11px; color: var(--text-4); }
/* the decision map (VUI2-11, artifact 4) */
.dg { max-width: 1120px; width: 100%; }
.dg__frame { overflow: auto; max-height: calc(100vh - 330px); padding: 0 16px 16px; }
.dg__node { cursor: pointer; } .dg__node:focus-visible rect { stroke: var(--am-truth); stroke-width: 3; } .dg__node:hover rect { stroke: var(--am-truth); }
/* proposals to review (VUI2-11, artifact 6) */
.pz { max-width: 880px; width: 100%; }
.pz__list { list-style: none; margin: 0; padding: 0 26px 16px; display: grid; gap: 10px; max-height: calc(100vh - 330px); overflow-y: auto; }
.pz__item { border: 1px solid var(--border); background: var(--surface); padding: 10px 12px; display: grid; gap: 6px; }
.pz__text { font-weight: 500; font-size: 14px; }
.pz__source { margin: 0; padding: 4px 0 4px 10px; border-left: 3px solid var(--am-truth); color: var(--text-2); font: 400 13px/1.45 var(--font-serif, Georgia, serif); }
.pz__why { font-size: 12.5px; color: var(--text-3); }
.pz__actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* a stage's diagram (VUI2-11, artifact 8) */
.sd { max-width: 1040px; width: 100%; } .sd__pane { padding: 0 26px 12px; overflow: auto; max-height: calc(100vh - 340px); }