/* ============================================================
   ProcessWorkbench — IDE chrome variant
   Palette inherits the EU CRA brand's "spec band" surfaces
   (deep plum-navy + cream) so this reads as the same product
   family as the CRA Assessment Workbench, not a generic IDE.

   TWO THEMES. Bare :root is LIGHT — the default, because the
   audit reader opens this next to a printed procedure, and
   because a document-authoring surface is paper first.
   :root[data-theme="dark"] restores the original spec band.
   Deliberately NO prefers-color-scheme block: a dark-OS user
   still gets light unless they ask for dark, which is what
   "default light" means.

   Every theme-dependent value is a token below. A raw colour
   in a rule is a bug — it will be right in one theme only.
   ============================================================ */

:root {
  /* brand anchors — same scale as website/styles/theme.css.
     These do NOT flip: the brand is the brand in both themes. */
  --blue-950: #06122f;
  --blue-900: #08205c;
  --blue-800: #062a78;
  --blue-700: #003399;
  --blue-600: #1a4cb5;
  --blue-500: #2f63cc;
  --blue-400: #5a84db;
  --blue-200: #b3c5ea;
  --gold-500: #ffd617;
  --gold-600: #e0ad00;
  --gold-700: #9c7600;

  /* ---- LIGHT (default) ---- */
  --s-0: #ffffff;          /* deepest — window ground / editor page */
  --s-1: #f3f5fa;          /* rails, bars */
  --s-2: #e9edf6;          /* raised panels */
  --s-3: #dde3f1;          /* hover */
  --s-4: #ccd8ef;          /* active/selected */
  --fg: #0b1730;           /* navy ink */
  --fg-2: rgba(11, 23, 48, 0.76);
  --fg-3: rgba(11, 23, 48, 0.64);      /* 5.1:1 on --s-1 — same AA bar the dark theme holds */
  --fg-4: rgba(11, 23, 48, 0.34);      /* rules, dividers, disabled glyphs only - never text */
  --line: rgba(11, 23, 48, 0.13);
  --line-2: rgba(11, 23, 48, 0.22);

  /* status colours are DARKENED for light: the dark-theme values are
     tuned to sit on navy and drop to ~2:1 on white */
  --ok: #10693f;
  --ok-bg: rgba(16, 105, 63, 0.12);
  --warn: #8a5800;
  --warn-bg: rgba(224, 173, 0, 0.20);
  --bad: #bc2a14;
  --bad-bg: rgba(188, 42, 20, 0.10);
  --info: #1a4cb5;
  --info-bg: rgba(26, 76, 181, 0.10);
  --judge: #7a5b00;
  --judge-bg: rgba(255, 214, 23, 0.30);

  /* gold as TEXT vs gold as FILL are different jobs. --gold-500 keeps
     the fills (dark ink on gold reads in both themes); --gold-ink is
     the text/rule form and must darken on light or it vanishes. */
  --gold-ink: #6d5000;      /* 4.6:1 on --s-4, the darkest surface it lands on */
  --on-accent: #06122f;    /* ink on a gold or cream fill */
  --on-ok: #ffffff;        /* ink on a filled --ok swatch */
  --on-blue: #ffffff;      /* ink on a --blue-700 fill */
  --accent-ink: #08205c;   /* blue used as text on a panel */
  --focus-ring: var(--blue-600);   /* gold rings vanish on light — see the note at :focus-visible */

  /* neutral tints — the ink colour at low alpha, for chips, pills,
     scrollbars and hairlines that used to be hardcoded cream */
  --ink-05: rgba(11, 23, 48, 0.07);
  --ink-07: rgba(11, 23, 48, 0.06);
  --ink-08: rgba(11, 23, 48, 0.07);
  --ink-10: rgba(11, 23, 48, 0.09);
  --ink-14: rgba(11, 23, 48, 0.20);
  --ink-26: rgba(11, 23, 48, 0.34);

  --tint-gold: rgba(255, 214, 23, 0.34);
  --tint-gold-line: rgba(154, 118, 0, 0.45);
  --tint-gold-hover: rgba(255, 214, 23, 0.26);
  --sel-bg: rgba(255, 214, 23, 0.45);

  --ok-soft: rgba(16, 105, 63, 0.10);
  --ok-soft-hover: rgba(16, 105, 63, 0.18);
  --ok-line: rgba(16, 105, 63, 0.40);
  --ok-faint: rgba(16, 105, 63, 0.07);
  --ok-hl: rgba(16, 105, 63, 0.16);
  --ok-hl-line: rgba(16, 105, 63, 0.34);
  --bad-line: rgba(188, 42, 20, 0.40);      /* control borders */
  --bad-line-2: rgba(188, 42, 20, 0.35);    /* inline error rules — one step softer */
  --bad-hl: rgba(188, 42, 20, 0.12);
  --bad-hl-line: rgba(188, 42, 20, 0.65);
  --warn-soft: rgba(224, 173, 0, 0.12);
  --info-soft: rgba(26, 76, 181, 0.06);
  --accent-soft: rgba(0, 51, 153, 0.07);
  --bridge-bg: linear-gradient(180deg, rgba(0, 51, 153, 0.09), rgba(0, 51, 153, 0.02));
  --rev-bg: rgba(26, 76, 181, 0.12);
  --rev-fg: var(--blue-700);
  --rev-bg-hover: rgba(26, 76, 181, 0.22);

  --kbd-bg: rgba(11, 23, 48, 0.05);
  --map-dot: rgba(11, 23, 48, 0.11);
  --shadow-md: 0 6px 16px rgba(11, 23, 48, 0.16);
  --shadow-lg: 0 28px 70px rgba(11, 23, 48, 0.26);
  --scrim: rgba(11, 23, 48, 0.34);

  --r-lg: 10px;
  --r-md: 7px;
  --r-sm: 4px;
  --r-xs: 2px;

  /* ---- motion ----
     Two curves, two durations, and nothing else names a number.
     The browser default `ease` is symmetric: it leaves rest as
     slowly as it settles, which on chrome that is meant to answer
     instantly reads as lag. --ease-out leaves at once and
     decelerates into place. --ease-in-out is only for the things
     that move BOTH ways — a caret rotating open and shut, a panel
     sliding in and back — where a one-way curve looks wrong on the
     return trip. Anything that needs a third curve is probably
     animating something it should not. */
  --dur-1: 110ms;   /* hover, press, focus, colour */
  --dur-2: 160ms;   /* anything that changes size or position */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "SF Mono", monospace;

  /* six-step type scale - the stylesheet previously used 14 ad-hoc sizes */
  --t-xs: 10px;    /* mono labels, chips */
  --t-sm: 11.5px;  /* dense secondary */
  --t-md: 13px;    /* UI default */
  --t-lg: 14px;    /* body copy */
  --t-xl: 17px;    /* section headings */
  --t-2xl: 24px;   /* page title */

  --topbar-h: 44px;
  --tabbar-h: 36px;
  --status-h: 26px;
}

/* ---- DARK — the original spec-band surface, opt-in ---- */
:root[data-theme="dark"] {
  --s-0: #070f24;          /* deepest — window ground */
  --s-1: #0a1530;          /* rails, bars */
  --s-2: #0f1f47;          /* raised panels */
  --s-3: #16295a;          /* hover */
  --s-4: #1d3470;          /* active/selected */
  --fg: #f4eedd;           /* cream */
  --fg-2: rgba(244, 238, 221, 0.66);
  --fg-3: rgba(244, 238, 221, 0.55);   /* 5.46:1 on --s-1 - was 0.40 / 3.4:1, below AA */
  --fg-4: rgba(244, 238, 221, 0.40);   /* rules, dividers, disabled glyphs only - never text */
  --line: rgba(244, 238, 221, 0.11);
  --line-2: rgba(244, 238, 221, 0.19);

  --ok: #52c98b;
  --ok-bg: rgba(82, 201, 139, 0.14);
  --warn: #f0b429;
  --warn-bg: rgba(240, 180, 41, 0.14);
  --bad: #ff7a66;
  --bad-bg: rgba(255, 122, 102, 0.14);
  --info: #6fa8ff;
  --info-bg: rgba(111, 168, 255, 0.14);
  --judge: #ffd617;
  --judge-bg: rgba(255, 214, 23, 0.12);

  --gold-ink: var(--gold-500);
  --on-accent: #06122f;
  --on-ok: #06122f;
  --on-blue: #ffffff;
  --accent-ink: var(--blue-200);
  --focus-ring: var(--gold-500);

  --ink-05: rgba(244, 238, 221, 0.05);
  --ink-07: rgba(244, 238, 221, 0.07);
  --ink-08: rgba(244, 238, 221, 0.08);
  --ink-10: rgba(244, 238, 221, 0.10);
  --ink-14: rgba(244, 238, 221, 0.14);
  --ink-26: rgba(244, 238, 221, 0.26);

  --tint-gold: rgba(255, 214, 23, 0.10);
  --tint-gold-line: rgba(255, 214, 23, 0.30);
  --tint-gold-hover: rgba(255, 214, 23, 0.14);
  --sel-bg: rgba(255, 214, 23, 0.30);

  --ok-soft: rgba(82, 201, 139, 0.13);
  --ok-soft-hover: rgba(82, 201, 139, 0.22);
  --ok-line: rgba(82, 201, 139, 0.38);
  --ok-faint: rgba(82, 201, 139, 0.06);
  --ok-hl: rgba(82, 201, 139, 0.20);
  --ok-hl-line: rgba(82, 201, 139, 0.30);
  --bad-line: rgba(255, 122, 102, 0.40);
  --bad-line-2: rgba(255, 122, 102, 0.35);
  --bad-hl: rgba(255, 122, 102, 0.16);
  --bad-hl-line: rgba(255, 122, 102, 0.70);
  --warn-soft: rgba(240, 180, 41, 0.06);
  --info-soft: rgba(111, 168, 255, 0.06);
  --accent-soft: rgba(0, 51, 153, 0.16);
  --bridge-bg: linear-gradient(180deg, rgba(0, 51, 153, 0.20), rgba(0, 51, 153, 0.06));
  --rev-bg: rgba(90, 132, 219, 0.16);
  --rev-fg: var(--blue-200);
  --rev-bg-hover: rgba(90, 132, 219, 0.28);

  --kbd-bg: rgba(0, 0, 0, 0.25);
  --map-dot: rgba(244, 238, 221, 0.07);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.60);
  --scrim: rgba(3, 8, 22, 0.62);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--s-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
::selection { background: var(--sel-bg); }

/* thin dark scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-14); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-26); background-clip: content-box; }

/* focus visibility - the UA default outline is near-black and vanishes on
   these surfaces, which made the whole app unusable without a mouse */
:where(button, a, [tabindex], input, textarea, select):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}
.tree-item:focus-visible,
.node:focus-visible,
.palette-row:focus-visible,
.tab:focus-visible { outline-offset: -2px; }

.mono { font-family: var(--mono); }
.lbl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================ shell ============================ */
.ide {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--status-h);
  height: 100%;
}

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: var(--s-1);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold-500) 0 120px, transparent 120px);
  opacity: 0.9;
}
.brand { display: flex; align-items: center; gap: 9px; padding-right: 12px; }
.brand img { width: 22px; height: 22px; display: block; }
.brand b {
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg);
}
.brand span {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-ink);
  display: block; margin-top: 1px;
}
.topbar .org {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 12px; color: var(--fg-2); background: var(--s-2);
}
.topbar .org b { color: var(--fg); font-weight: 600; }
.topbar .spacer { flex: 1; }

.kbd {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: var(--r-xs); padding: 1px 5px; color: var(--fg-3);
  background: var(--kbd-bg);
}
.topbtn {
  appearance: none; background: transparent; border: 1px solid transparent;
  color: var(--fg-2); font-family: var(--sans); font-size: 12.5px;
  padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.topbtn:hover { background: var(--s-3); color: var(--fg); }
.topbtn.on { background: var(--s-4); color: var(--fg); border-color: var(--line-2); }

/* ---- account bubble + menu ---- */
.acctmenu { position: relative; }
.acct-bubble {
  appearance: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-700); color: var(--on-blue);
  border: 2px solid var(--gold-500);
  font-family: var(--display); font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.acct-bubble:hover { background: var(--blue-600); }
.acct-bubble:active { transform: scale(0.96); }
.acct-bubble[aria-expanded="true"] { background: var(--blue-600); }
.acct-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 950;
  min-width: 240px; padding: 6px;
  background: var(--s-0); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.acct-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct-who .acct-email { font-size: var(--t-md); font-weight: 600; color: var(--fg); word-break: break-all; }
.acct-who .acct-role { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-3); margin-top: 2px; letter-spacing: 0.06em; }
.acct-item {
  appearance: none; display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--r-sm);
  padding: 7px 10px; font-family: var(--sans); font-size: var(--t-md); color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.acct-item:hover { background: var(--s-3); color: var(--fg); }
.acct-item.out { color: var(--bad); }
.acct-sep { height: 1px; background: var(--line); margin: 4px 0; }

.srcbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.srcbadge.baked { background: var(--warn-bg); color: var(--warn); }
.srcbadge.db, .srcbadge.hybrid { background: var(--ok-bg); color: var(--ok); }
.srcbadge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- main split ---- */
.main { display: flex; min-height: 0; min-width: 0; }
.main > .pane { flex: none; display: flex; min-height: 0; min-width: 0; }
.main > .pane > * { flex: 1; min-width: 0; }
.main > .editorcol { flex: 1; }

.gutter {
  width: 5px; cursor: col-resize; background: transparent;
  position: relative; z-index: 5; margin: 0 -3px;
}
.gutter:hover::after, .gutter.drag::after {
  content: ""; position: absolute; inset: 0 2px; background: var(--blue-500);
}
.gutter-h {
  height: 5px; cursor: row-resize; position: relative; z-index: 5; margin: -3px 0;
}
.gutter-h:hover::after, .gutter-h.drag::after {
  content: ""; position: absolute; inset: 2px 0; background: var(--blue-500);
}

/* ---- explorer ---- */
.explorer {
  background: var(--s-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.explorer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 7px; border-bottom: 1px solid var(--line);
}
.explorer-head .lbl { flex: 1; }
.iconbtn {
  appearance: none; background: transparent; border: none; color: var(--fg-3);
  cursor: pointer; padding: 3px; border-radius: var(--r-xs); line-height: 0;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.iconbtn:hover { color: var(--fg); background: var(--s-3); }

.filterbox { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.filterbox input {
  width: 100%; background: var(--s-0); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--fg); font-family: var(--sans);
  font-size: 12.5px; padding: 6px 9px; outline: none;
}
.filterbox input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 2px rgba(47,99,204,0.25); }
.filterbox input::placeholder { color: var(--fg-3); }

.groupbar { display: flex; gap: 2px; padding: 7px 10px 4px; }
.groupbar button {
  appearance: none; flex: 1; background: transparent; border: 1px solid var(--line);
  color: var(--fg-3); font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 0;
  border-radius: var(--r-xs); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.groupbar button.on { background: var(--s-4); color: var(--fg); border-color: var(--line-2); }

.tree { flex: 1; overflow: auto; padding: 4px 0 14px; }
.tree-group {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 12px 6px 8px; background: transparent; border: none;
  color: var(--fg-2); font-family: var(--sans); font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-align: left;
}
.tree-group:hover { background: var(--s-2); color: var(--fg); }
.tree-group .caret { width: 12px; color: var(--fg-3); transition: transform var(--dur-2) var(--ease-in-out); flex: none; }
.tree-group.open .caret { transform: rotate(90deg); }
.tree-group .code {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--gold-ink); background: var(--tint-gold);
  padding: 1px 5px; border-radius: var(--r-xs); flex: none;
}
.tree-group .gname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-group .gcount { font-family: var(--mono); font-size: 10px; color: var(--fg-3); flex: none; }

.tree-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 12px 4px 27px; background: transparent; border: none;
  border-left: 2px solid transparent;
  color: var(--fg-2); font-family: var(--sans); font-size: 12.5px;
  cursor: pointer; text-align: left;
}
.tree-item:hover { background: var(--s-2); color: var(--fg); }
.tree-item.sel { background: var(--s-4); color: var(--fg); border-left-color: var(--gold-500); }
.tree-item .rid {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--fg-3); flex: none; width: 50px;
}
.tree-item.sel .rid { color: var(--accent-ink); }
.tree-item .rt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dot-status { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-status.empty { background: transparent; border: 1.5px solid var(--fg-3); }
.dot-status.draft { background: var(--warn); }
.dot-status.review { background: var(--info); }
.dot-status.approved { background: var(--ok); }

/* ---- editor column ---- */
.editorcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.editorstack { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.tabbar {
  display: flex; align-items: stretch; height: var(--tabbar-h);
  background: var(--s-1); border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; flex: none;
}
.tabbar::-webkit-scrollbar { height: 0; }
.tab {
  display: inline-flex; align-items: center;
  padding: 0 8px 0 0; background: transparent;
  border: none; border-right: 1px solid var(--line);
  color: var(--fg-3); font-family: var(--sans); font-size: var(--t-md);
  white-space: nowrap; position: relative;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.tab-label {
  display: inline-flex; align-items: center; gap: 8px;
  height: 100%; padding: 0 8px 0 12px;
  background: transparent; border: none; cursor: pointer;
  color: inherit; font: inherit;
}
.tab .tname { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tab:hover { background: var(--s-2); color: var(--fg-2); }
.tab.on { background: var(--s-0); color: var(--fg); }
.tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--gold-500);
}
.tab .tid { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.tab .x {
  appearance: none; border: none; background: transparent; cursor: pointer;
  visibility: hidden; opacity: 0;
  border-radius: var(--r-xs); padding: 3px; line-height: 0;
  color: var(--fg-3); transition: opacity var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), visibility var(--dur-1) var(--ease-out);
}
.tab:hover .x, .tab.on .x, .tab:focus-within .x { visibility: visible; opacity: 1; }
.tab .x:hover { background: var(--s-4); color: var(--fg); }
.tab.pinned .tid { color: var(--gold-ink); }

.editor { flex: 1; overflow: auto; min-height: 0; }
.editor-inner { max-width: 880px; margin: 0 auto; padding: 26px 32px 80px; }

/* The one entrance in this file. A tab switch replaces a whole document,
   and swapping 900px of text in a single frame reads as a flicker rather
   than a navigation — the eye cannot tell whether the page changed or the
   browser stuttered. 4px is deliberately below the threshold where it
   looks like a slide: it is enough to give the swap a direction and not
   enough to be an effect. transform and opacity only, so it stays on the
   compositor. The offset is NEGATIVE on purpose: .editor is overflow:auto,
   and a transform that pushes content DOWN adds 4px to the scrollable
   area, which pops a scrollbar in and out for the length of the
   animation on any document short enough not to have one. That flicker
   is worse than the thing this animation was added to fix. Upward costs
   nothing: browsers do not make scroll area above the origin.
   The pane carries key={active} in App.jsx; without that key React
   reuses the node and this never replays. */
@keyframes pw-enter {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
  to   { opacity: 1; transform: none; }
}
.editor > * { animation: pw-enter var(--dur-2) var(--ease-out) both; }

/* ---- requirement header ---- */
.rq-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 22px; }
.rq-crumb {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-3);
}
.rq-crumb .sep { opacity: 0.4; }
.rq-title { display: flex; align-items: flex-start; gap: 14px; }
.rq-id {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--on-accent); background: var(--gold-500);
  padding: 5px 9px; border-radius: var(--r-sm); flex: none; margin-top: 2px;
}
.rq-title h1 {
  margin: 0; font-family: var(--display); font-size: 25px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; flex: 1;
}
.rq-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
}
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.gold { background: var(--judge-bg); color: var(--judge); }
.chip.mute { background: var(--ink-07); color: var(--fg-3); }

/* ---- CRA overlay strip: the 62443 <-> CRA bridge ---- */
.bridge {
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--bridge-bg);
  padding: 13px 15px; margin-bottom: 22px;
}
.bridge-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.bridge-head .lbl { color: var(--accent-ink); }
.bridge-head .rule { flex: 1; height: 1px; background: var(--line); }
.bridge-list { display: flex; flex-direction: column; gap: 7px; }
.bridge-row {
  display: grid; grid-template-columns: 104px 1fr auto; gap: 11px;
  row-gap: 4px; align-items: center; font-size: var(--t-md);
  padding-bottom: 8px;
}
.bridge-note {
  grid-column: 2 / -1; margin: 0;
  font-size: var(--t-sm); line-height: 1.5; color: var(--fg-2);
}
.bridge-note.pending { font-style: italic; color: var(--fg-3); }
.bridge-row .inst {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-blue); background: var(--blue-700);
  padding: 3px 6px; border-radius: var(--r-xs); text-align: center;
}
.bridge-row .ref { color: var(--fg-2); }
.bridge-row .str {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
}
.bridge-row .str.direct { color: var(--gold-ink); }
.bridge-row .str.partial { color: var(--warn); }
.bridge-row .str.supporting { color: var(--info); }
.bridge-empty {
  font-size: 12.5px; color: var(--bad);
  display: flex; align-items: center; gap: 8px;
}

/* ---- sections ---- */
.sec { border-top: 1px solid var(--line); padding: 18px 0; }
.sec:first-of-type { border-top: none; }
.sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sec-head h3 {
  margin: 0; font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
}
.sec-head .req-mark {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--fg-3);
}
.sec-head .spacer { flex: 1; }
/* visibility, not opacity alone - opacity:0 buttons stay focusable and clickable */
.sec-actions {
  display: flex; gap: 6px;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2) var(--ease-out);
}
.sec:hover .sec-actions,
.sec:focus-within .sec-actions,
.sec.active .sec-actions { visibility: visible; opacity: 1; }

.btn {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--s-2); border: 1px solid var(--line-2); color: var(--fg-2);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--s-3); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: default; }
/* Fill is demoted to an outline control: human sign-off is the product's
   non-negotiable and must not lose the visual hierarchy to the AI action. */
.btn.gold { background: transparent; border-color: var(--tint-gold-line); color: var(--gold-ink); }
.btn.gold:hover { background: var(--tint-gold-hover); }
.btn.signoff {
  background: var(--ok-soft); border-color: var(--ok-line);
  color: var(--ok); font-size: 12px; padding: 5px 11px; font-weight: 700;
}
.btn.signoff:hover:not(:disabled) { background: var(--ok-soft-hover); }
.btn.withdraw { border-color: var(--bad-line); color: var(--bad); }
.approval-stamp {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ok);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn.primary { background: var(--blue-700); border-color: var(--blue-600); color: #fff; }
.btn.primary:hover { background: var(--blue-600); }
.btn.sm { font-size: 11px; padding: 3px 8px; }

.sec-body {
  font-size: 14px; line-height: 1.65; color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
}
.sec-body.empty {
  color: var(--fg-3); font-style: italic;
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  padding: 14px 16px; white-space: normal;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sec-body textarea {
  width: 100%; min-height: 150px; resize: vertical;
  background: var(--s-1); border: 1px solid var(--blue-500);
  border-radius: var(--r-md); color: var(--fg);
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  padding: 12px 14px; outline: none;
}
/* guidance block — deliberately NOT styled like drafted body text */
.sec-guide {
  border: 1px dashed var(--line-2); border-left: 3px solid var(--info);
  border-radius: var(--r-md); background: var(--info-soft);
  padding: 13px 15px;
}
.sec-guide-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--info);
}
.sec-guide-body {
  font-size: var(--t-md); line-height: 1.6; color: var(--fg-2);
  white-space: pre-wrap; margin-bottom: 12px;
}

.ai-mark {
  display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--judge); background: var(--judge-bg);
  padding: 3px 8px; border-radius: 999px;
}

/* inline fill prompt — the ChatGPT-canvas style in-place ask */
.fillbox {
  margin: 10px 0 4px; border: 1px solid var(--blue-500);
  border-radius: var(--r-md); background: var(--accent-soft);
  padding: 10px 11px;
}
.fillbox .row { display: flex; gap: 8px; align-items: center; }
.fillbox input {
  flex: 1; background: var(--s-0); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--fg); font-family: var(--sans);
  font-size: 13px; padding: 8px 11px; outline: none;
}
.fillbox input:focus { border-color: var(--blue-400); }
.fillbox input::placeholder { color: var(--fg-3); }
.fill-error {
  display: flex; align-items: center; gap: 10px; margin: 10px 0;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--bad-bg); color: var(--bad);
  font-size: var(--t-md); border: 1px solid var(--bad-line-2);
}
.fill-error .spacer { flex: 1; }

.fillbox .hint {
  margin-top: 7px; font-family: var(--mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.04em;
}
.caret-blink {
  display: inline-block; width: 7px; height: 15px; margin-left: 1px;
  background: var(--gold-ink); vertical-align: text-bottom;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* ---- records / RACI blocks ---- */
.block { border-top: 1px solid var(--line); padding: 18px 0; }
.block > .lbl { display: block; margin-bottom: 11px; }
.rec {
  appearance: none; width: 100%; text-align: left; font-family: var(--sans);
  font-size: var(--t-md); color: var(--fg);
  display: flex; align-items: center; gap: 11px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 7px; background: var(--s-1); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.rec:hover { border-color: var(--line-2); background: var(--s-2); }
.rec .box {
  width: 16px; height: 16px; border-radius: var(--r-xs); flex: none;
  border: 1.5px solid var(--fg-3); display: grid; place-items: center;
  color: transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.rec.on .box { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.rec .rid { font-family: var(--mono); font-size: 11px; color: var(--fg-3); flex: none; width: 96px; }
.rec .rlab { flex: 1; font-size: 13px; }
.rec.on .rlab { color: var(--fg-2); }

/* ---- record -> system of record ----
   The source line sits UNDER its record and is visually quieter than it:
   where evidence comes from is a hint; whether it exists is the claim. */
.rec-row { margin-bottom: 7px; }
.rec-row .rec { margin-bottom: 0; }
.rec-src {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 6px 11px 2px 38px; font-size: var(--t-sm); color: var(--fg-3);
}
.rec-src.pending { font-style: italic; }
.rec-src .src-note { line-height: 1.5; max-width: 62ch; }
/* ---- toolchain pane ---- */
.tc { padding: 14px 18px 24px; }
.tc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tc-head .spacer { flex: 1; }
.tc-note {
  margin: 0 0 14px; max-width: 96ch;
  font-size: var(--t-md); line-height: 1.6; color: var(--fg-2);
}
.tc-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.tc-stat {
  display: flex; align-items: baseline; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--s-1); padding: 9px 13px; min-width: 240px;
}
.tc-stat b { font-family: var(--display); font-size: 21px; color: var(--fg); }
.tc-stat span { font-size: var(--t-sm); color: var(--fg-3); line-height: 1.45; }

.tc-add {
  border: 1px solid var(--blue-500); border-radius: var(--r-md);
  background: var(--accent-soft); padding: 11px 12px; margin-bottom: 16px;
}
.tc-add .row { display: flex; gap: 8px; align-items: center; }
.tc-add input {
  flex: 1; background: var(--s-0); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--fg); font-family: var(--sans);
  font-size: var(--t-md); padding: 8px 11px; outline: none;
}
.tc-add input:focus { border-color: var(--blue-400); }
.tc-add .hint { margin-top: 7px; font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-3); }
.tc-kinds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tc-kinds .chip { appearance: none; border: none; cursor: pointer; }

.tc-group { margin-bottom: 15px; }
.tc-group > .lbl { display: block; margin-bottom: 7px; }
.tc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 7px;
}
.tc-tool {
  appearance: none; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 16px 1fr; gap: 4px 11px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--s-1); color: var(--fg); padding: 9px 11px;
  font-family: var(--sans); font-size: var(--t-md);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.tc-tool:hover { border-color: var(--line-2); background: var(--s-2); }
.tc-tool.on { border-color: var(--ok-line); background: var(--ok-faint); }
.tc-tool .box {
  width: 16px; height: 16px; border-radius: var(--r-xs); grid-row: 1;
  border: 1.5px solid var(--fg-3); display: grid; place-items: center;
  color: transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.tc-tool.on .box { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.tc-tool .tc-name { font-weight: 600; display: flex; align-items: center; }
.tc-tool .tc-produces {
  grid-column: 2; font-family: var(--mono); font-size: var(--t-xs);
  color: var(--fg-3); line-height: 1.5;
}

.raci { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.raci .cell {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 11px; background: var(--s-1);
}
.raci .cell .k {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--gold-ink); margin-bottom: 5px;
}
.raci .cell input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--fg); font-family: var(--sans); font-size: 13px;
  border-bottom: 1px solid var(--line-2); padding: 3px 0;
}
.raci .cell input::placeholder { color: var(--fg-3); }
.raci .cell input:focus { border-bottom-color: var(--blue-400); }

/* ---- agent pane ---- */
.agent {
  background: var(--s-1); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.agent-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
}
.agent-head .lbl { flex: 1; }
.agent-body { flex: 1; overflow: auto; padding: 14px 13px; }
.msg { margin-bottom: 15px; }
.msg .who {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 5px;
}
.msg.cora .who { color: var(--gold-ink); }
.msg .txt { font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.msg.cora .txt {
  background: var(--s-2); border: 1px solid var(--line);
  border-left: 2px solid var(--gold-500);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 10px 12px; color: var(--fg);
}
.agent-sugg { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.agent-sugg button {
  appearance: none; text-align: left; background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--fg-2); font-family: var(--sans); font-size: 12px;
  padding: 7px 10px; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.agent-sugg button:hover { background: var(--s-3); color: var(--fg); border-color: var(--blue-500); }
.agent-foot { padding: 10px 12px; border-top: 1px solid var(--line); }
.agent-foot input {
  width: 100%; background: var(--s-0); border: 1px solid var(--line-2);
  border-radius: var(--r-md); color: var(--fg); font-family: var(--sans);
  font-size: 12.5px; padding: 9px 11px; outline: none;
}
.agent-foot input:focus { border-color: var(--blue-500); }
.agent-foot input::placeholder { color: var(--fg-3); }

/* ---- bottom pane ---- */
.bottom {
  background: var(--s-1); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; flex: none;
}
.bottom-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 0 8px; border-bottom: 1px solid var(--line); flex: none;
}
.bottom-tabs button {
  appearance: none; background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-3); font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 11px 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.bottom-tabs button:hover { color: var(--fg-2); }
.bottom-tabs button.on { color: var(--fg); border-bottom-color: var(--gold-500); }
.bottom-tabs .n {
  font-size: 9.5px; padding: 1px 5px; border-radius: 999px;
  background: var(--ink-10); color: var(--fg-3); letter-spacing: 0;
}
.bottom-tabs button.on .n { background: var(--gold-500); color: var(--on-accent); }
.bottom-tabs .spacer { flex: 1; }
.bottom-body { flex: 1; overflow: auto; min-height: 0; }

.prob-group {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 14px; background: var(--s-2); border: none;
  border-top: 1px solid var(--line); color: var(--fg);
  font-family: var(--sans); font-size: var(--t-md); font-weight: 600;
  cursor: pointer; text-align: left;
}
.prob-group:hover { background: var(--s-3); }
.prob-group .caret { color: var(--fg-3); transition: transform var(--dur-2) var(--ease-in-out); line-height: 0; }
.prob-group.open .caret { transform: rotate(90deg); }
.prob-group .n {
  font-family: var(--mono); font-size: var(--t-xs); padding: 2px 7px;
  border-radius: 999px; background: var(--ink-10); color: var(--fg-3);
}
.prob-filter { display: flex; gap: 4px; padding-right: 6px; }
.prob-filter button {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); background: transparent; color: var(--fg-3);
  padding: 3px 8px; border-radius: 999px; cursor: pointer;
}
.prob-filter button.on { background: var(--s-4); color: var(--fg); border-color: var(--line-2); }

/* problems list */
.prob {
  display: grid; grid-template-columns: 16px 62px 1fr auto;
  gap: 11px; align-items: center;
  padding: 6px 14px; cursor: pointer; font-size: 12.5px;
  border-bottom: 1px solid var(--ink-05);
}
.prob:hover { background: var(--s-2); }
.prob .sev { line-height: 0; }
.prob .sev.gap { color: var(--bad); }
.prob .sev.warn { color: var(--warn); }
.prob .sev.info { color: var(--info); }
.prob .pid { font-family: var(--mono); font-size: 11px; color: var(--gold-ink); }
.prob .pmsg { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prob .pdet { font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); }

/* ---- process map canvas ---- */
.map-legend {
  position: sticky; bottom: 0; left: 0; right: 0; z-index: 3;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 8px 20px; background: var(--s-1);
  border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-3);
}
.map { position: relative; height: 100%; overflow: auto; background:
  radial-gradient(circle at 1px 1px, var(--map-dot) 1px, transparent 0) 0 0 / 22px 22px;
}
.map-inner { position: relative; padding: 16px 20px 20px; min-width: 0; }
.map-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; align-items: start;
}
.lane { min-width: 0; }
.lane-head {
  display: flex; align-items: baseline; gap: 7px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line-2); margin-bottom: 11px;
}
.lane-head .lname { font-family: var(--display); font-size: 12.5px; font-weight: 700; }
.lane-head .lshort { font-family: var(--mono); font-size: 9.5px; color: var(--gold-ink); letter-spacing: 0.1em; }
.lane-head .lcount { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--fg-3); }
.node {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--s-2); color: var(--fg); cursor: pointer;
  padding: 6px 8px; margin-bottom: 5px;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.node:hover { transform: translateY(-1px); border-color: var(--blue-400); background: var(--s-3); box-shadow: var(--shadow-md); }
.node.sel { border-color: var(--gold-500); background: var(--s-4); }
.node.dim { opacity: 0.55; }
.node.lit { border-color: var(--blue-400); box-shadow: 0 0 0 1px var(--blue-500); }
.node-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.node-top .nid { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--gold-ink); }
.node-top .spacer { flex: 1; }
.node .ntitle { font-size: 11.5px; line-height: 1.35; color: var(--fg-2); }
.node.sel .ntitle { color: var(--fg); }
.node-cra { display: flex; gap: 3px; margin-top: 5px; }
.node-cra i {
  height: 3px; flex: 1; border-radius: 2px; background: var(--blue-500); opacity: 0.75;
}
.node-cra i.a2 { background: var(--gold-500); }
.node-cra i.a13 { background: var(--info); }
.node-cra i.a14 { background: var(--bad); }

/* ---- coverage matrix ---- */
.cov { padding: 14px 18px; }
.cov table { border-collapse: collapse; width: 100%; font-size: 12px; }
.cov th, .cov td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; }
.cov th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
  background: var(--s-2); position: sticky; top: 0;
}
.cov td.reflab { font-family: var(--mono); font-size: 11px; color: var(--fg-2); }
.cov td.hits { font-family: var(--mono); font-size: 11px; }
.cov td.hits a { color: var(--gold-ink); text-decoration: none; cursor: pointer; margin-right: 7px; }
.cov td.hits a:hover { text-decoration: underline; }
.cov tr.orphan td { background: var(--bad-bg); }
.cov tr.orphan td.reflab { color: var(--bad); }


/* ============================================================
   Revisions — sign-off dialog, history pane, diff view
   ============================================================ */

/* change bar in the gutter, git-style: this section differs from the
   last approved revision */
.sec.changed { position: relative; }
.sec.changed::before {
  content: ""; position: absolute; left: -14px; top: 16px; bottom: 12px;
  width: 3px; border-radius: 2px; background: var(--warn);
}
.chg-mark {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--warn); background: var(--warn-bg);
  padding: 1px 5px; border-radius: var(--r-xs);
}

.chip.rev-chip {
  appearance: none; border: none; cursor: pointer;
  background: var(--rev-bg); color: var(--rev-fg);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.chip.rev-chip:hover { background: var(--rev-bg-hover); color: var(--fg); }
.chip.rev-chip.dirty { background: var(--warn-bg); color: var(--warn); }

/* ---- right pane tab strip ---- */
.rightpane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.rightpane > .agent { flex: 1; min-height: 0; }
.right-tabs {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 0 6px; background: var(--s-1); border-bottom: 1px solid var(--line);
}
.right-tabs button {
  appearance: none; background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-3); font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 10px 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.right-tabs button:hover { color: var(--fg-2); }
.right-tabs button.on { color: var(--fg); border-bottom-color: var(--gold-500); }
.right-tabs .n {
  font-size: 9.5px; letter-spacing: 0; padding: 1px 5px; border-radius: 999px;
  background: var(--ink-10); color: var(--fg-3);
}
.right-tabs button.on .n { background: var(--gold-500); color: var(--on-accent); }
.right-tabs .spacer { flex: 1; }

/* ---- history list ---- */
.revlist { display: flex; flex-direction: column; gap: 10px; }
.rev {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--s-1); padding: 11px 12px;
}
.rev.current { border-color: var(--line-2); background: var(--s-2); }
.rev.working { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }
.rev-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rev-top .spacer { flex: 1; }
.rev-n {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold-ink);
}
.rev.working .rev-n { color: var(--warn); }
.rev-at { font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); }
.rev-by { font-size: 12.5px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.rev-reason { font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
.rev-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.chip.cls-editorial { background: var(--ink-08); color: var(--fg-3); }
.chip.cls-substantive { background: var(--info-bg); color: var(--info); }
.chip.cls-conformity-affecting { background: var(--bad-bg); color: var(--bad); }

/* ---- sign-off dialog ---- */
.dialog {
  width: min(600px, 92vw); background: var(--s-1);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 84vh;
}
.dialog-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line); flex: none; }
.dialog-head h3 {
  margin: 8px 0 0; font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px;
}
.dialog-head .from { font-family: var(--mono); font-size: 11px; color: var(--fg-3); font-weight: 400; }
.dialog-body { padding: 18px 22px; overflow: auto; flex: 1; }
.dialog-summary {
  background: var(--s-2); border-left: 2px solid var(--blue-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 13px; font-size: 13px; color: var(--fg-2); margin-bottom: 18px;
}
.dialog-summary b { color: var(--fg); }
.dialog-summary .cra-flag { color: var(--bad); }

.dialog-field { display: block; margin-bottom: 17px; }
.dialog-field > span {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 7px;
}
.dialog-field input, .dialog-field textarea {
  width: 100%; background: var(--s-0); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--fg);
  font-family: var(--sans); font-size: 14px; padding: 10px 12px; outline: none;
}
.dialog-field textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.dialog-field input:focus, .dialog-field textarea:focus { border-color: var(--blue-500); }
.dialog-field input::placeholder, .dialog-field textarea::placeholder { color: var(--fg-3); }

.clsrow { display: flex; gap: 7px; }
.clsbtn {
  appearance: none; flex: 1; cursor: pointer;
  background: var(--s-2); border: 1px solid var(--line); color: var(--fg-2);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  padding: 10px 8px; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.clsbtn:hover { background: var(--s-3); color: var(--fg); }
.clsbtn.on { background: var(--s-4); border-color: var(--blue-400); color: var(--fg); }
.clsbtn.danger.on { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.clsbtn em {
  font-style: normal; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink);
}
.clsnote { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }

.dialog-foot {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--s-2);
}
.dialog-foot .note { flex: 1; font-size: 11.5px; line-height: 1.4; color: var(--fg-3); }

/* ---- diff ---- */
.diff-body {
  font-size: 14px; line-height: 1.7; color: var(--fg-2);
  white-space: pre-wrap; word-break: break-word;
}
.diff-body .d-add {
  background: var(--ok-hl); color: var(--fg);
  border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--ok-hl-line);
}
.diff-body .d-del {
  background: var(--bad-hl); color: var(--fg-2);
  text-decoration: line-through; text-decoration-color: var(--bad-hl-line);
  border-radius: var(--r-xs);
}


/* ---- baselines pane ---- */
.bl { padding: 14px 18px 24px; }
.bl-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 11px;
}
.bl-head .spacer { flex: 1; }
.bl-empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  padding: 18px 20px; font-size: 13px; line-height: 1.6; color: var(--fg-3);
  max-width: 760px;
}
.bl-table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-bottom: 6px; }
.bl-table th, .bl-table td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
}
.bl-table th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3);
  background: var(--s-2);
}
.bl-table td.mono { font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); }
.bl-table tr.active td { background: var(--ok-faint); }
.bl-table tr.unbound td { background: var(--bad-bg); }
.bl-note { font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); margin-top: 3px; }
.bl-note.bad { color: var(--bad); }
.bl-select {
  width: 100%; background: var(--s-0); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--fg);
  font-family: var(--sans); font-size: 12.5px; padding: 6px 8px; outline: none;
  cursor: pointer;
}
.bl-select:focus { border-color: var(--blue-500); }

.dialog-summary.warn {
  border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn);
}
.dialog-summary.warn b { color: var(--warn); }

.linkid {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--gold-ink); padding: 0;
}
.linkid:hover { text-decoration: underline; }

/* ---- status bar ---- */
.statusbar {
  display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: var(--blue-700); color: #fff;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden;   /* one line, always */
}
/* segments shrink and ellipsise rather than wrapping the bar to two rows */
.statusbar .sb {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.statusbar .warnpill, .statusbar .meter { flex: none; }
.statusbar .spacer { flex: 1; }
.statusbar .warnpill {
  background: var(--gold-500); color: var(--on-accent); font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.meter { width: 84px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--gold-500); }

/* ---- command palette ---- */
.palette-scrim {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(2px); z-index: 900;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.palette {
  width: min(620px, 92vw); background: var(--s-1);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.palette input {
  width: 100%; background: transparent; border: none; outline: none;
  border-bottom: 1px solid var(--line); color: var(--fg);
  font-family: var(--sans); font-size: 16px; padding: 15px 18px;
}
.palette input::placeholder { color: var(--fg-3); }
.palette-list { max-height: 340px; overflow: auto; padding: 6px 0; }
.palette-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 18px;
  cursor: pointer; font-size: 13px;
}
.palette-row.on { background: var(--s-4); }
.palette-row .pk {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--gold-ink); width: 54px; flex: none;
}
.palette-row .pt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-row .pg {
  flex: 0 0 44%; text-align: right; font-family: var(--mono);
  font-size: var(--t-xs); color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-foot {
  display: flex; gap: 14px; padding: 8px 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; color: var(--fg-3);
}

/* ---- welcome ---- */
.welcome { display: grid; place-items: center; height: 100%; padding: 40px; }
.welcome-in { max-width: 560px; text-align: center; }
.welcome-in img { width: 54px; height: 54px; opacity: 0.9; }
.welcome-in h2 {
  font-family: var(--display); font-size: 25px; font-weight: 700;
  letter-spacing: -0.02em; margin: 16px 0 8px;
}
.welcome-in p { color: var(--fg-2); font-size: 14px; line-height: 1.65; margin: 0 0 22px; }
.welcome-keys { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.welcome-keys div { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--fg-2); }

/* ============================================================
   PROCESS DOCUMENTS
   The document is the authoring surface; the requirement stays the
   unit of conformance. These styles carry that distinction visually:
   a document reads as a controlled document, a requirement node still
   reads as a node.
   ============================================================ */

/* ---- explorer: the document is itself a node, so the caret and the
   open target are separate hit areas rather than one ambiguous row ---- */
.tree-group.docgroup { display: flex; align-items: stretch; padding: 0; }
.tree-group.docgroup .caret-btn {
  appearance: none; background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; padding: 0 4px 0 10px; color: var(--fg-3);
}
.tree-group.docgroup .caret-btn:hover { color: var(--fg); }
.tree-group.docgroup .caret { transition: transform var(--dur-2) var(--ease-in-out); }
.tree-group.docgroup.open .caret { transform: rotate(90deg); }
.tree-group.docgroup .docopen {
  appearance: none; background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 7px 10px 7px 0; text-align: left; color: inherit;
  font-family: var(--sans); font-size: var(--t-md); font-weight: 600;
}
.tree-group.docgroup:hover { background: var(--s-2); color: var(--fg); }
.tree-group.docgroup.sel { background: var(--s-4); color: var(--fg); }
.tree-group.docgroup .gcount.bad { color: var(--bad); }

/* which step in the document discharges this requirement — "no step" is
   the finding the document view exists to surface */
.tree-item .steptag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; flex: none;
  color: var(--fg-3); letter-spacing: .04em;
}
.tree-item .steptag.bad { color: var(--bad); }

/* ---- tab ---- */
.tab.doc .tid { color: var(--gold-ink); }

/* ---- the banner on a requirement node ---- */
.docbanner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
  padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold-500);
  border-radius: var(--r-md); background: var(--tint-gold); color: var(--fg-2);
  font-size: 12.5px; line-height: 1.55;
}
.docbanner.bad { border-left-color: var(--bad); background: var(--bad-bg); color: var(--fg-2); }
.docbanner > svg { flex: none; color: var(--gold-ink); }
.docbanner.bad > svg { color: var(--bad); }
.docbanner .db-txt { max-width: 62ch; }
.docbanner .chip { margin-left: 4px; }
.docbanner b { color: var(--fg); }

/* ---- document head ---- */
.pd-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 22px; }
.pd-note { color: var(--fg-3); font-size: 12.5px; line-height: 1.6; margin: 0 0 14px; max-width: 74ch; }
.pd-empty {
  color: var(--fg-2); font-size: 13px; line-height: 1.65; margin: 0 0 16px; max-width: 74ch;
  padding: 12px 15px; border-left: 3px solid var(--bad); background: var(--bad-bg);
  border-radius: var(--r-sm);
}
.pd-prose p { color: var(--fg-2); font-size: 13.5px; line-height: 1.68; margin: 0 0 12px; max-width: 74ch; }
.pd-prose p:last-child { margin-bottom: 0; }
.pd-prose b { color: var(--fg); }
.pd-list { margin: 0; padding-left: 20px; max-width: 74ch; }
.pd-list li { color: var(--fg-2); font-size: 13px; line-height: 1.6; margin-bottom: 7px; }

/* ---- steps ---- */
.pdstep {
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin: 0 0 16px; overflow: hidden; background: var(--s-1);
}
.pdstep > header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 15px; background: var(--s-2); border-bottom: 1px solid var(--line);
}
.pdstep > header .sid {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold-ink);
  flex: none;
}
.pdstep > header .stitle {
  font-family: var(--display); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.012em; color: var(--fg);
}
.pdstep > header .spacer { flex: 1; }
.pdstep > header .satisfies {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
}

.pdfields { margin: 0; padding: 4px 15px 12px; }
.pdfield {
  display: grid; grid-template-columns: 132px 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.pdfield:last-child { border-bottom: none; }
.pdfield > dt {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
  padding-top: 2px;
}
.pdfield > dd { margin: 0; }
.pdfield > dd p {
  margin: 0 0 9px; color: var(--fg-2); font-size: 13px; line-height: 1.65; max-width: 68ch;
}
.pdfield > dd p:last-child { margin-bottom: 0; }
/* the verification act is the field that separates a step from an
   intention, so it is the field the eye lands on */
.pdfield.verify { background: var(--tint-gold); margin: 0 -15px; padding-left: 15px; padding-right: 15px; }
.pdfield.verify > dt { color: var(--gold-ink); }
@media (max-width: 760px) { .pdfield { grid-template-columns: 1fr; gap: 4px; } }

/* ---- chips used by the document surface ---- */
.chip.req {
  appearance: none; border: none; cursor: pointer;
  background: var(--info-bg); color: var(--info); font-weight: 700;
}
.chip.req:hover { filter: brightness(1.08); }
.chip.recid { background: var(--ink-07); color: var(--fg-3); font-family: var(--mono); margin-right: 5px; }
.chip.direct { background: var(--ok-bg); color: var(--ok); }
.chip.partial { background: var(--warn-bg); color: var(--warn); }
.chip.supporting { background: var(--info-bg); color: var(--info); }

/* ---- tables ---- */
.pd-tablewrap { overflow-x: auto; }
.pd-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.pd-table th, .pd-table td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
  color: var(--fg-2);
}
.pd-table th {
  background: var(--s-2); font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
}
.pd-table td.mono { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.pd-table td.note { color: var(--fg-3); }
.pd-table tr.uncovered td { background: var(--bad-bg); }
.pd-table .unwritten { color: var(--fg-3); font-style: italic; }
.pd-table .linkish {
  appearance: none; background: transparent; border: none; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--info);
}
.pd-table .linkish:hover { text-decoration: underline; }

/* ---- recorded absence ----
   This was gold, and gold was wrong twice over. It made document CONTENT
   (the resourcing arithmetic, the escalation path, the sustaining owner)
   look like an aside, while green <Coach> already meant "the workbench
   talking to the author" — two tinted treatments for advice with no way
   to tell which was which. And gold means the CRA layer everywhere else
   in this stylesheet, which none of it was.

   Those five uses are now .pd-prose (content — which is how the export
   has always rendered them) or <Coach> (advice). What is left is the one
   real banner: a stated absence, in red, because it is a hole. The base
   is neutral so .bad carries the whole signal. */
.pd-callout {
  margin-top: 16px; padding: 12px 15px; border-left: 3px solid var(--line-2);
  background: var(--s-1); border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 12.5px; line-height: 1.6; max-width: 74ch;
}
.pd-callout b { color: var(--fg); }

/* ---- interview record ----
   The section that says which sentences in this document the customer
   wrote. It sits BELOW the procedure and is deliberately quieter than a
   step: it explains the steps, so it must not compete with them. Two
   things carry colour and nothing else does — the unanswered question,
   in red because it is a hole, and the assumption, in gold because gold
   is the workbench's own voice everywhere else in this stylesheet and
   the assumption is the one line a reviewer has to check. */
.pd-ivw {
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin: 0 0 14px; overflow: hidden; background: var(--s-0);
}
.pd-ivwhead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding: 8px 14px; background: var(--s-1); border-bottom: 1px solid var(--line);
}
.pd-ivwhead .sid { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--accent-ink); }
.pd-ivwhead .ttl { font-size: 13.5px; font-weight: 650; color: var(--fg); }
.pd-ivwhead .grow { flex: 1; }
.pd-qa { padding: 11px 14px; border-bottom: 1px dashed var(--line); }
.pd-qa:last-child { border-bottom: 0; }
.pd-qa .q { display: flex; gap: 9px; align-items: baseline; }
.pd-qa .qkey {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3); flex: none; min-width: 84px;
}
.pd-qa .qtxt { font-size: 13px; font-weight: 600; color: var(--fg); max-width: 70ch; }
.pd-qa .qwhy { margin: 5px 0 0 93px; font-size: 12px; line-height: 1.6; color: var(--fg-3); max-width: 70ch; }
.pd-qa .qans { margin: 7px 0 0 93px; font-size: 13px; line-height: 1.6; color: var(--fg-2); max-width: 70ch; }
.pd-qa .qans.none { color: var(--bad); }
.pd-qa .qnote {
  margin: 8px 0 0 93px; padding-left: 11px; max-width: 70ch;
  border-left: 2px solid var(--line-2);
  font-size: 12.5px; line-height: 1.6; color: var(--fg-2);
}
.pd-qa .qnote b { color: var(--fg); }
.pd-qa .qasm {
  margin: 8px 0 0 93px; padding: 8px 12px; max-width: 70ch;
  border-left: 3px solid var(--gold-500); background: var(--judge-bg); border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.6; color: var(--gold-ink);
}
.pd-qa .qasm b { color: var(--gold-ink); }
@media (max-width: 820px) {
  .pd-qa .qwhy, .pd-qa .qans, .pd-qa .qnote, .pd-qa .qasm { margin-left: 0; }
}

/* ---- guidance ----
   Green, and marked, so a reader can see at a glance which sentences
   are the workbench talking to the author and which are the document.
   None of this reaches an exported file — see <Coach> in procdoc.jsx. */
.coach {
  position: relative;
  margin: 10px 0; padding: 8px 12px 8px 30px;
  border-left: 2px solid var(--ok);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  color: var(--ok-ink, var(--ok));
  font-size: 12.5px; line-height: 1.6; max-width: 78ch;
}
.coach::before {
  content: "GUIDE";
  position: absolute; left: 8px; top: 9px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .06em;
  writing-mode: vertical-rl; text-orientation: mixed;
  opacity: .65;
}
.coach b { color: inherit; font-weight: 700; }

/* ---- the company row at the head of the tree ----
   Deliberately not styled as a tree item: it is the parent of every
   document below it, not a sibling. */
.orgrow {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 9px 12px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--s-1); color: var(--fg-2); font-family: var(--sans); font-size: 12.5px;
}
.orgrow:hover { background: var(--s-2); color: var(--fg); }
.orgrow.sel { background: var(--s-4); color: var(--fg); border-color: var(--gold-500); }
.orgk { font-weight: 700; }
.orgn {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}

/* ---- company configuration ----
   Each field carries a line saying which section it feeds. That line is
   the reason the form gets filled in, so it is styled as content rather
   than as a hint that fades away. */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.cfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.clabel { display: flex; align-items: center; gap: 8px; min-height: 15px; }
.cstate {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .04em;
}
.cstate.dirty { color: var(--gold-ink); }
.cstate.ok { color: var(--ok); }
.cfield.dirty input, .cfield.dirty textarea { border-color: var(--gold-500); }

/* the one line that answers "how do I make it take?" */
.csave {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0; padding: 10px 13px;
  border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: var(--r-sm); background: var(--s-1);
  color: var(--fg-2); font-size: 12.5px; line-height: 1.55;
}
.csave b { color: var(--fg); }
.csave .kbd { margin: 0 2px; }
.cfield.wide { grid-column: 1 / -1; }
.cfield label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-3);
}
.cfield input, .cfield textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--s-0); color: var(--fg);
  font-family: var(--sans); font-size: var(--t-md); line-height: 1.55; resize: vertical;
}
.cfield input.mono, .cfield textarea.mono { font-family: var(--mono); font-size: 12px; }
.cfield input:focus, .cfield textarea:focus { outline: none; border-color: var(--gold-500); }
.cuse { font-size: var(--t-sm); line-height: 1.5; color: var(--fg-3); }

.cradio { display: flex; gap: 10px; flex-wrap: wrap; }
.copt {
  appearance: none; cursor: pointer; text-align: left; flex: 1 1 260px;
  display: flex; flex-direction: column; gap: 4px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--s-1); font-family: var(--sans);
}
.copt:hover { background: var(--s-2); }
.copt.on { border-color: var(--gold-500); background: var(--tint-gold); }
.coptk { font-size: var(--t-md); font-weight: 700; color: var(--fg); }
.coptw { font-size: var(--t-sm); line-height: 1.5; color: var(--fg-3); }

button.org {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  background: none; text-align: left;
}
button.org:hover b { text-decoration: underline; }

@media (max-width: 900px) { .cgrid { grid-template-columns: 1fr; } }

/* ---- editable front-matter section ----
   Same interaction as a requirement section, so it reuses .fillbox,
   .fill-error, .sec-guide and .ai-mark. Only the header and the
   textarea are new — the block label has to sit on a row with its
   own Fill and Edit controls. */
.docsec { margin-bottom: 4px; }
.docsec.active { border-left: 2px solid var(--gold-500); padding-left: 12px; margin-left: -14px; }
.docsec-head {
  display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 6px;
}
.docsec-head .lbl { margin: 0; }
.docsec-ta {
  width: 100%; min-height: 132px; resize: vertical;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--s-0); color: var(--fg);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.65;
}
.docsec-ta:focus { outline: none; border-color: var(--gold-500); }
.pd-prose.streaming { color: var(--fg-2); }

/* ---- export menu ----
   Four formats and only one round-trips, so each row carries its own
   extension and a chip saying whether it comes back. */
.pd-exp { position: relative; }
.pd-expmenu {
  position: fixed; z-index: 400;
  width: 340px; padding: 5px; background: var(--s-0);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  display: flex; flex-direction: column; gap: 2px;
}
.pd-expitem {
  appearance: none; background: none; border: 0; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 8px 10px; border-radius: var(--r-sm); text-align: left;
  font-family: var(--sans);
}
.pd-expitem:hover { background: var(--s-2); }
.pd-expk {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--fg);
}
.pd-expk code {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--fg-3);
}
.pd-expn { font-size: var(--t-sm); line-height: 1.5; color: var(--fg-3); }

/* ---- coverage rows on an unauthored document ---- */
.pd-cov { display: flex; flex-direction: column; gap: 4px; }
.pd-covrow {
  appearance: none; background: var(--s-1); border: 1px solid var(--line); cursor: pointer;
  border-radius: var(--r-sm); display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; text-align: left; color: var(--fg-2); font-family: var(--sans);
  font-size: 12.5px;
}
.pd-covrow:hover { background: var(--s-2); color: var(--fg); }
.pd-covrow .rid { font-family: var(--mono); font-size: 11px; font-weight: 700; width: 54px; flex: none; }
.pd-covrow .rt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- document sign-off ---- */
/* ---- document issue control ---- */
.vc-strip { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.vc-strip a.chip { text-decoration: none; }
.vc-pick { display: flex; align-items: center; gap: 6px; }
.vc-pick > span {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.vc-pick select {
  background: var(--s-0); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--fg); font-family: var(--sans); font-size: 11.5px; padding: 3px 6px;
}
.vc-scrim {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); z-index: 900;
  display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 0; overflow: auto;
}
.vc-dialog {
  width: 100%; max-width: 640px; padding: 18px 20px 16px; background: var(--s-0);
  border: 1px solid var(--line-2); border-top: 2px solid var(--gold-500); border-radius: var(--r-md);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); margin-bottom: 10vh;
}
.vc-dialog.wide { max-width: 960px; }
.vc-dialog > .lbl { display: block; margin-bottom: 10px; }
.vc-dialog .pd-form { max-width: none; }
.vc-hist .vc-table td { vertical-align: middle; }
.vc-rowactions { display: flex; flex-wrap: wrap; gap: 4px; white-space: nowrap; }
.vc-rowactions a.btn { text-decoration: none; }
.vc-diff { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; margin-bottom: 12px; }
.vc-diffrow { border-top: 1px solid var(--line); padding-top: 8px; }
.vc-diffrow > .lbl { display: block; margin-bottom: 4px; }

/* ---- document version tree (right pane History tab) ---- */
.vt { display: flex; flex-direction: column; }
.vt-row { position: relative; padding-left: 22px; }
.vt-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; }
.vt-rail::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.vt-row:first-child .vt-rail::before { top: 13px; }
.vt-row:last-child .vt-rail::before { bottom: auto; height: 13px; }
.vt-row:only-child .vt-rail::before { display: none; }
.vt-dot {
  position: absolute; left: 3px; top: 8px; width: 10px; height: 10px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--fg-3); background: var(--s-1);
}
.vt-dot.ok { border-color: var(--ok); background: var(--ok); }
.vt-dot.warn { border-color: var(--warn); background: var(--warn); }
.vt-dot.info { border-color: var(--info); background: var(--info); }
.vt-dot.bad { border-color: var(--bad); background: var(--bad); }
.vt-dot.mute { border-color: var(--fg-4); }
.vt-dot.working { border-color: var(--warn); border-style: dashed; }
.vt-head {
  appearance: none; display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 4px 6px; border: none; border-radius: var(--r-sm); background: transparent;
  color: var(--fg); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.vt-head:hover, .vt-row.open > .vt-head { background: var(--s-2); }
.vt-head.static { cursor: default; }
.vt-head.static:hover { background: transparent; }
.vt-caret { display: inline-flex; color: var(--fg-3); transition: transform var(--dur-2) var(--ease-out); }
.vt-row.open .vt-caret { transform: rotate(90deg); }
.vt-msg { flex: 1; min-width: 0; font-size: var(--t-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-head .chip { font-size: 9.5px; padding: 1px 6px; }
.vt-sub { display: flex; gap: 8px; padding: 0 6px 8px 23px; font-size: var(--t-sm); color: var(--fg-3); }
.vt-sub .vt-at { margin-left: auto; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.vt-detail {
  margin: -2px 6px 10px 23px; padding: 8px 10px; font-size: var(--t-sm);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-0);
}
.vt-detail .note { color: var(--fg-3); }
.vt-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; }
.vt-kv dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-top: 1px; }
.vt-kv dd { margin: 0; color: var(--fg-2); line-height: 1.45; }
.vt-kv + .vt-files, .vt-kv + .note { display: block; margin-top: 8px; }
.vt-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vt-files li { display: flex; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 11px; color: var(--fg-2); }
.vt-files .st { width: 10px; font-weight: 700; }
.vt-files .st.M { color: var(--warn); }
.vt-files .st.A { color: var(--ok); }
.vt-files .st.D { color: var(--bad); }
.vt-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.vt-actions a.btn { text-decoration: none; }
.vt-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: var(--t-sm); color: var(--fg-3); }
.vt-foot a { color: var(--accent-ink); }
.statusbar .warnpill.ok { background: var(--ok); color: var(--on-ok); }
.statusbar .warnpill.info { background: var(--blue-600); color: var(--on-blue); }
.statusbar .warnpill.warn { background: var(--gold-500); color: var(--on-accent); }
.statusbar .warnpill.bad { background: var(--bad); color: #fff; }
.statusbar .warnpill.mute { background: rgba(255,255,255,0.18); color: inherit; }
.pd-form { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; max-width: 620px; }
.pd-form label { display: flex; flex-direction: column; gap: 5px; }
.pd-form label > span {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.pd-form input, .pd-form select {
  background: var(--s-0); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--fg); font-family: var(--sans); font-size: 13px; padding: 7px 10px;
}
.pd-form input:focus, .pd-form select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.pd-actions { display: flex; gap: 8px; justify-content: flex-end; }
.chip.plain { background: var(--ink-07); color: var(--fg-2); }

.pd-targets { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.pd-tgroup { display: grid; grid-template-columns: 210px 1fr; gap: 12px; align-items: baseline; }
.pd-tgroup .k { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.pd-tgroup.ok .k { color: var(--ok); }
.pd-tgroup.bad .k { color: var(--bad); }
.pd-tgroup .v { display: flex; flex-wrap: wrap; gap: 5px; color: var(--fg-3); font-size: 12.5px; }
.pd-tgroup .v .chip { appearance: none; border: none; cursor: pointer; }
@media (max-width: 760px) { .pd-tgroup { grid-template-columns: 1fr; gap: 4px; } }
.pd-clsnote { font-family: var(--sans); font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-3); line-height: 1.5; }

/* ============================================================
   METHOD SURFACES — provenance, ETVX bands, SIPOC, resourcing
   Authored against /Process/WRITING-PROCESSES.html.

   The palette IS the provenance system. Three semantic hues, each
   meaning one class of statement, and they must not be reused for
   anything else on this surface:
     oxide red  = STD             (the clause; deleting it removes conformance)
     ochre      = EXPECTED OUTPUT (the scheme; deleting it loses the certificate)
     verdigris  = HOUSE           (ours; deletable freely)
   ============================================================ */
:root {
  --std:     #9b2f1f;  --std-bg:  #f2dfd9;
  --sch:     #97701a;  --sch-bg:  #f0e5ce;
  --hse:     #2f6157;  --hse-bg:  #d8e4df;
}
:root[data-theme="dark"] {
  --std:     #e58a72;  --std-bg:  #3a211b;
  --sch:     #ddb259;  --sch-bg:  #362b14;
  --hse:     #74bbaa;  --hse-bg:  #16302c;
}

/* ---- the provenance tag ----
   At the FRONT of the line, never trailing. A tag after the full stop
   cannot tell you whether it covers the clause, the sentence or the
   paragraph. */
.srctag {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .09em; padding: 2px 6px; border-radius: var(--r-xs);
  white-space: nowrap; margin-top: 2px;
}
.srctag.std    { background: var(--std-bg); color: var(--std); }
.srctag.scheme { background: var(--sch-bg); color: var(--sch); }
.srctag.house  { background: var(--hse-bg); color: var(--hse); }
.srctag .cite  { font-weight: 500; opacity: .82; }
.srctag .unver { color: var(--bad); font-weight: 800; }

.pd-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0 4px; }
.pd-legend .lgd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); }
.pd-legend .lgdtxt { max-width: 42ch; }
.pd-legend .lgdn {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--fg-2);
  background: var(--ink-07); border-radius: 999px; padding: 1px 7px;
}

/* ---- ETVX bands ---- */
.pdbands { padding: 4px 15px 12px; }
.pdband { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pdband:last-child { border-bottom: none; }
/* the V band is visually separated on purpose: a labelled band
   survives a schedule trim, activity 21 does not */
.pdband.verify { background: var(--tint-gold); margin: 0 -15px; padding-left: 15px; padding-right: 15px; }
.bandhead { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bandhead .letter {
  font-family: var(--mono); font-size: 11px; font-weight: 800; flex: none;
  color: var(--blue-700); background: var(--ink-07); border-radius: var(--r-xs); padding: 1px 6px;
}
.pdband.verify .bandhead .letter { background: var(--gold-500); color: #3a2c00; }
.bandhead .letter.rec { background: var(--hse-bg); color: var(--hse); }
.bandhead .blabel {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
}
.pdband.verify .bandhead .blabel { color: var(--gold-ink); }
.bandhead .bkind { font-family: var(--mono); font-size: 9px; color: var(--fg-3); opacity: .72; }

.stmts { list-style: none; margin: 0; padding: 0; }
.stmt {
  display: flex; gap: 9px; align-items: flex-start; margin: 0 0 7px;
  font-size: 13px; line-height: 1.6;
}
.stmt .stxt { color: var(--fg-2); max-width: 68ch; }
.stmt .formref {
  font-family: var(--mono); font-size: 9.5px; color: var(--fg-3); margin-left: 8px;
}
.stmt .formref.none { color: var(--bad); }

/* a step that does not behave like the others says why */
.pdstep.cadence { border-left: 3px solid var(--warn); }
.pd-trigger {
  padding: 9px 15px; background: var(--warn-bg); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--fg-2); line-height: 1.55;
}
.pd-trigger b { color: var(--fg); }

/* ---- linter findings, in place on the step ---- */
.pd-lint { border-top: 1px solid var(--line); padding: 9px 15px; background: var(--s-2); }
.lintrow {
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 5px;
  font-size: 11.5px; color: var(--fg-3); line-height: 1.5;
}
.lintrow:last-child { margin-bottom: 0; }
.lintrow > svg { flex: none; margin-top: 2px; color: var(--warn); }
.lintrow.no-verification > svg, .lintrow.no-record > svg, .lintrow.no-exit > svg { color: var(--bad); }
.lintrow .lslot {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; flex: none; width: 92px; color: var(--fg-3);
}
.lintrow .lmsg { max-width: 66ch; }

/* ---- resourcing legs ---- */
.pd-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 6px 0 4px; }
.pd-legs .leg { background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 15px; }
.pd-legs .legk {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px;
}
.pd-legs .pd-list { padding-left: 17px; }
.pd-legs .pd-list li { font-size: 12.5px; }

/* ---- blank forms ---- */
.pd-forms { display: flex; flex-direction: column; gap: 10px; }
.frm { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 15px; background: var(--s-1); }
.frmhead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 13px; }
.frmfields { margin: 0; padding-left: 19px; columns: 2; column-gap: 26px; }
.frmfields li { font-size: 12px; color: var(--fg-3); break-inside: avoid; margin-bottom: 4px; }
@media (max-width: 780px) { .frmfields { columns: 1; } }

/* both axes accountable on one row — the row a single-A RACI would
   have forced a lie about */
/* ---- the RACI matrix ----
   The modifier is pd-raci, NOT raci. `.raci` was already taken, by the
   two-column input grid in the requirement editor above, and it sets
   display:grid. A <table class="pd-table raci"> therefore became a grid
   container: thead and tbody turned into grid items, the column model
   was discarded, and the rows painted 750px to the right of the table
   with every cell the wrong size. The DOM was correct throughout, which
   is why it survived every headless check and only appeared in a
   browser.
   Letters are the data here, so they get the monospace, the weight and
   the centring; everything else on the row is support. */
.pd-table.pd-raci th.seatcol { text-align: center; white-space: nowrap; }
.pd-table.pd-raci th.seatcol .seatname {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--fg-3);
  max-width: 13ch; white-space: normal; margin-inline: auto;
}
.pd-table.pd-raci td.raciCell {
  text-align: center; font-family: var(--mono); font-size: 12px;
  font-weight: 700; color: var(--fg-2); white-space: nowrap;
}
/* Accountable is the letter a reader is looking for. */
.pd-table.pd-raci td.raciCell.isA { color: var(--fg); background: var(--s-2); }
/* An empty cell is "not involved", and it should recede, not read as a
   value somebody typed. */
.pd-table.pd-raci td.raciCell .none { color: var(--fg-4); font-weight: 400; }
.pd-table.pd-raci td.raciCell.unassigned {
  font-family: var(--sans); font-weight: 400; font-style: italic; color: var(--fg-3);
}
.pd-table.pd-raci td.note div + div { margin-top: 3px; }
.pd-table.pd-raci td.note b { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--fg-3); margin-right: 4px; }

.racikey {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 9px 2px 0; font-size: 11.5px; color: var(--fg-3);
}
.racikey b { font-family: var(--mono); font-weight: 700; color: var(--fg-2); margin-right: 4px; }
.racikey i { font-style: normal; opacity: .8; }

/* Two Accountables on one row. Notable, NOT asserted as a defect: in a
   matrixed org the function can be accountable for one thing and the
   project for another (SR-P5 — that the review met the clause, and that
   it happened before the gate). Neutral emphasis, not red. */
.pd-table tr.bothA td { background: var(--s-2); }
.pd-table td.stopcell { font-weight: 700; color: var(--bad); }
.pd-callout.bad { border-left-color: var(--bad); background: var(--bad-bg); }

/* ---- file I/O result — never a silent outcome ---- */
.iotoast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 42px; z-index: 60;
  display: flex; align-items: flex-start; gap: 10px; max-width: 640px;
  padding: 12px 15px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.55;
  background: var(--s-3); border: 1px solid var(--line-2); color: var(--fg-2);
  box-shadow: 0 12px 40px -14px rgba(0,0,0,.55);
}
.iotoast > svg { flex: none; margin-top: 1px; }
.iotoast.ok   { border-left: 3px solid var(--ok); }
.iotoast.ok > svg { color: var(--ok); }
.iotoast.warn { border-left: 3px solid var(--warn); background: var(--warn-bg); color: var(--fg); }
.iotoast.warn > svg { color: var(--warn); }
.iotoast.bad  { border-left: 3px solid var(--bad); background: var(--bad-bg); color: var(--fg); }
.iotoast.bad > svg { color: var(--bad); }
.iotoast button {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: inherit; opacity: .6; flex: none; padding: 0; margin-top: 2px;
}
.iotoast button:hover { opacity: 1; }

/* ============================================================
   The requirement interview — ask the ten questions, write the step
   ============================================================ */

.qa-loading { color: var(--fg-3); font-size: 12.5px; padding: 14px 0 22px; }

/* the write-through read-out: which document is being written, and
   what the last answer did to its coverage */
.wt {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 13px; margin: 0 0 14px;
  border: 1px solid var(--tint-gold-line); border-radius: var(--r-md);
  background: var(--tint-gold); color: var(--fg-2); font-size: 12.5px;
}
.wt-l { display: inline-flex; align-items: center; gap: 8px; }
.wt-l > svg { color: var(--gold-ink); flex: none; }
.wt b { color: var(--fg); }
.wt-state {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3);
}
.wt-state.on { color: var(--gold-ink); }

.qa-bar { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.qa-prog { font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.qa-steps { display: inline-flex; gap: 5px; }

.qa-intro {
  margin: 0 0 12px; color: var(--fg-2); font-size: 12.5px; line-height: 1.6; max-width: 74ch;
}
.qa-hole { color: var(--bad); }

.qa-scheme {
  margin: 0 0 16px; padding: 10px 13px; border-left: 3px solid var(--bad);
  background: var(--bad-bg); border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 12.5px; line-height: 1.6; max-width: 78ch;
}
.qa-scheme b { color: var(--fg); }
.qa-scheme code { font-family: var(--mono); font-size: 11.5px; }

/* one question */
.qa {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--s-0); padding: 13px 15px 15px; margin: 0 0 12px;
}
.qa.done { border-left: 3px solid var(--ok); padding-left: 13px; }
.qa-head { display: flex; align-items: center; gap: 9px; }
.qa-head h3 {
  margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--fg);
}
.qa-n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--s-2); color: var(--fg-3);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.qa.done .qa-n { background: var(--ok-bg); color: var(--ok); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-3); }
.btn.ghost:hover { background: var(--s-2); color: var(--fg-2); }
.qa-why {
  margin: 9px 0 0; padding: 9px 12px; border-left: 2px solid var(--line-2);
  background: var(--s-1); border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 12.5px; line-height: 1.6; max-width: 76ch;
}
.qa-hint { margin: 9px 0 5px; color: var(--fg-3); font-size: 11.5px; }
.qa-note { margin: 7px 0 0; color: var(--fg-3); font-size: 12px; line-height: 1.55; max-width: 72ch; }

.qa-text {
  display: block; width: 100%; margin-top: 8px; resize: vertical;
  background: var(--s-1); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--fg); font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  padding: 9px 11px;
}
.qa-text:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; background: var(--s-0); }

.qa-trigger { margin-top: 8px; }
.qa-seg { display: inline-flex; gap: 5px; margin-bottom: 8px; }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin-top: 9px; }
.qa-field { display: flex; flex-direction: column; gap: 4px; }
.qa-field.wide { grid-column: 1 / -1; }
.qa-field .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3);
}
.qa-field input {
  background: var(--s-1); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--fg); font-family: var(--sans); font-size: 13px; padding: 7px 10px;
}
.qa-field input:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; background: var(--s-0); }

/* what the standard supplies into this slot — read-only by design */
.qa-supplied { margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--line-2); }
.qa-supplied-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px;
}

.qa-findings { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.qa-finding {
  display: flex; align-items: flex-start; gap: 7px; padding: 6px 10px;
  border-radius: var(--r-sm); font-size: 12px; line-height: 1.5; max-width: 76ch;
}
.qa-finding > svg { flex: none; margin-top: 2px; }
.qa-finding.gap { background: var(--bad-bg); color: var(--bad); }
.qa-finding.advice { background: var(--warn-soft); color: var(--warn); }

/* the old eight paragraphs, demoted to what they are */
.notes { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.notes > summary {
  cursor: pointer; color: var(--fg-3); font-size: 12px; padding: 4px 0; list-style: revert;
}
.notes > summary:hover { color: var(--fg-2); }
.notes[open] > summary { margin-bottom: 12px; }

/* the accountable seat and the indicator, on the step that carries them */
.pd-seat {
  margin: 10px 14px 0; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--s-1);
  display: flex; flex-direction: column; gap: 5px;
}
.pd-seat .seatrow { display: flex; gap: 10px; font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
.pd-seat .k {
  flex: none; width: 150px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); padding-top: 2px;
}

/* the requirement's own framing, above the questions */
.qa-focus {
  margin: 0 0 12px; padding: 10px 13px; border-left: 3px solid var(--blue-700);
  background: var(--info-bg); border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 13px; line-height: 1.6; max-width: 78ch;
}
.qa-focus b { color: var(--fg); }
.qa-focus.derived { border-left-color: var(--fg-4); background: var(--s-1); color: var(--fg-3); font-size: 12.5px; }

/* what this question means for THIS requirement */
.qa-forthis {
  margin: 9px 0 0; padding: 8px 12px; border-left: 2px solid var(--tint-gold-line);
  background: var(--tint-gold); border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 12.5px; line-height: 1.55; max-width: 76ch;
}
.qa-forthis b { color: var(--fg); }

/* the record the node already declares, offered rather than assumed */
.qa-sugg {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  background: var(--s-1); color: var(--fg-2); font-size: 12.5px;
}
.qa-sugg > span { flex: 1; }
.qa-sugg b { color: var(--fg); font-family: var(--mono); font-size: 12px; }


/* ============================================================
   LOADING

   The first paint used to be the words "Loading process content…"
   centred on an empty window, which tells a reader nothing about what
   is arriving and makes a 300ms compile feel like a stall. This is the
   three-pane frame itself, drawn empty: the explorer rail, the tab
   strip and a page of text. The layout does not move when the content
   lands, because the skeleton is already the layout.

   No shimmer sweep. A gradient travelling across an audit tool is
   decoration pretending to be progress; a slow opacity breath says the
   same thing and does not draw the eye away from the work.
   ============================================================ */
@keyframes pw-pulse { 50% { opacity: 0.45; } }

.skel { position: relative; display: flex; height: 100%; animation: pw-pulse 1.6s var(--ease-in-out) infinite; }
.skel-rail { width: 268px; flex: none; border-right: 1px solid var(--line); background: var(--s-1); padding: 14px 12px; }
.skel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skel-tabs { height: 35px; border-bottom: 1px solid var(--line); background: var(--s-1); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.skel-body { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: 26px 32px; }

/* One primitive, sized by inline style at the call site — a dozen
   .skel-line-sm/.skel-line-lg classes would be the same bar renamed. */
.skel-bar { background: var(--s-3); border-radius: var(--r-xs); height: 9px; margin-bottom: 10px; }
.skel-bar.tall { height: 22px; margin-bottom: 20px; }

/* The label stays. A skeleton with no words is indistinguishable from a
   layout that failed to load, and a screen reader gets nothing at all. */
.skel-say {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3);
}

/* ============================================================
   REDUCED MOTION

   Not a nicety here: vestibular triggers are a real accessibility
   requirement and this is an enterprise tool. Everything above is
   transform/opacity on short durations, so the honest reduction is to
   collapse duration to nearly zero rather than to strip the rules —
   the end states stay identical, only the travel disappears. 0.01ms
   rather than 0 so transitionend still fires and nothing that waits on
   it hangs.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0.01ms; --dur-2: 0.01ms; }
  .editor > *, .skel { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   REMOVABLE SECTIONS

   The control is invisible until the pointer is over its section. A
   delete button parked beside every heading turns a document into a
   control panel, and this surface is read far more often than it is
   edited. It stays keyboard-reachable: :focus-within brings it back,
   so tabbing through finds it even though hovering never happens.
   ============================================================ */
.part { position: relative; }
.part > .part-x {
  position: absolute; top: 2px; right: 0; z-index: 1;
  appearance: none; cursor: pointer; line-height: 0;
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--s-1); color: var(--fg-3);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-1) var(--ease-out), visibility var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.part:hover > .part-x,
.part:focus-within > .part-x { opacity: 1; visibility: visible; }
.part > .part-x:hover { color: var(--bad); border-color: var(--bad); }
.part.inline > .part-x { top: -2px; }

/* The removed list is part of the document's own record, so it reads as
   a section rather than as a toolbar. */
.removedparts { border-top: 1px dashed var(--line-2); padding-top: 14px; }
.removedlist { list-style: none; margin: 0; padding: 0; }
.removedlist li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.removedlist li:last-child { border-bottom: none; }
.removedlist .rm-name { font-size: 13px; color: var(--fg-2); }
.removedlist .rm-name.req { color: var(--fg); font-weight: 600; }
/* A required section that has been taken out is a finding, and it says
   so here as well as in Problems — the person removing it and the
   person reading the list are not always the same person. */
.removedlist .rm-flag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bad); background: var(--bad-bg);
  padding: 2px 6px; border-radius: var(--r-xs);
}
.removedlist li .btn { margin-left: auto; }

/* Section introductions. A BOX, not loose prose: unbounded, the intro
   read as the section's own first paragraph and the boundary between
   "what this section is" and "the process itself" disappeared. Only one
   of those two is auditable, so the boundary is worth a border.

   Deliberately not the green Coach treatment. Coach is the workbench
   talking to the author and never reaches the export; this is the
   document talking to its reader and ships in the file. Blue rail keeps
   them apart at a glance, and gold stays reserved for the CRA layer. */
.pd-guide {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--s-1);
  padding: 10px 14px 2px;
  margin: 4px 0 16px;
  max-width: 78ch;
}
.pd-guidelabel {
  display: block; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 5px;
}
.pd-guide p {
  margin: 0 0 8px; color: var(--fg-2); font-size: 13px; line-height: 1.62;
}