/* CHARA POC — app shell + components (light theme, V18 visual language).
   Chrome ported from CHARA_Product_UX_Mockup_V18_CONSOLIDATED (topnav · 72px C·H·A·R·A
   leftnav · 380px slide-out layer panel · #content main view). Component CSS for the
   live cockpit / returns / gate is preserved verbatim from the proven loop. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* B5 (UX_KIT s10): --brand is the per-vertical accent seam. vertical.js stamps
   data-vertical on <html> at boot; a vertical that earns its own ratified palette overrides
   --brand under html[data-vertical="..."] here. Until then every vertical resolves to the
   SUIO accent, which is what the existing var(--brand, var(--accent)) fallbacks already did -
   this makes the alias real without changing a pixel. Per-vertical VALUES are a Kai-ratified
   brand decision; do not invent one here. */
:root { --brand: var(--accent); }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  display: flex; flex-direction: column; min-height: 100vh;
  /* DM Mono only ships 300/400/500; many labels ask for 600/700, which the browser
     faux-bolds — the uneven, slightly-off heavy mono text that reads as "whacky".
     Disable WEIGHT synthesis so mono falls back to its real heaviest weight (500),
     uniformly. Sans has real 400-700 so it is unaffected; italic synthesis is kept. */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mono { font-family: var(--font-mono); }
a { color: var(--blue); text-decoration: none; }
button {
  font: inherit; font-weight: 600; cursor: pointer;
  /* A bare control is neutral. Primary intent must be explicit; local shell and segment
     selectors below keep their own paint and geometry. */
  border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-900);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
/* Shared action roles, including legacy aliases. app.css is the kit's final app layer.
   `ghost` historically meant secondary; btn-ghost is the quiet, borderless kit role. */
button.primary, .btn-primary { background: var(--navy); color: var(--on-accent-ink); border-color: var(--navy); }
button.primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
button.secondary, button.ghost, .btn-secondary { background: var(--surface); color: var(--grey-700); border-color: var(--grey-200); font-weight: 500; }
button.secondary:hover:not(:disabled), button.ghost:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { border-color: var(--grey-300); }
button.quiet, .btn-ghost { background: transparent; color: var(--grey-700); border-color: transparent; }
button.quiet:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--accent-tint); }
.btn { font-size: var(--text-md); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-05); }
button:disabled { cursor: not-allowed; }
:is(button.primary, button.secondary, button.ghost, button.quiet, .btn):disabled { opacity: .5; filter: none; }
select, input { font: inherit; background: var(--surface); color: var(--ink);
  border: 1px solid var(--grey-200); border-radius: 6px; padding: 5px 8px; }
select:disabled, input:disabled { opacity: .5; cursor: not-allowed; background: var(--grey-50); }

/* ── Top nav (V18) ───────────────────────────────────────── */
.topnav {
  height: 56px; background: var(--navy); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-5);
  position: sticky; top: 0; z-index: var(--z-chrome);
}
.topnav .logo { font-weight: 700; font-size: var(--text-2xl); letter-spacing: .4px; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; color: #fff; }
.topnav .logo .logo-mark { width: auto; height: 26px; color: #fff; flex-shrink: 0; }
.topnav .logo:hover .logo-mark { color: #cdd6ea; }
.topnav .logo-o { width: 32px; justify-content: center; gap: 0; }   /* O-only mark, centered to line up with the C·H·A·R·A rail below */
/* Home affordance: the SUIO waterline-O spins while hovered (it is the home button; "home"
   is still being defined). transform-origin centered on the 100x100 viewBox; reduced-motion opts out. */
.topnav .logo-o .wo { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .topnav .logo-o:hover .wo, .topnav .logo-o:focus-visible .wo { animation: suio-spin 1.5s linear infinite; }
}
@keyframes suio-spin { to { transform: rotate(360deg); } }
.topnav .sub { color: #aab6d6; font-size: var(--text-sm); font-weight: 400; }
.topnav-search { flex: 0 1 360px; display: flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,.08); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-md); }
.topnav-search input { background: transparent; border: none; outline: none; color: #fff; flex: 1; font-family: inherit; padding: 0; }
/* Keyboard focus must stay visible on the navy bar: the inner outline is removed above, so the
   wrapper draws the ring (W3; pinned by shell/jumpbar.focus_ring.test.mjs). */
.topnav-search:focus-within { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.topnav-search input::placeholder { color: rgba(255,255,255,.4); }
.topnav-search-key { border: 1px solid var(--grey-500); border-radius: var(--radius-sm); color: var(--on-accent-ink); flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; line-height: 1; padding: 2px 5px; }
.topnav-spacer { flex: 1; }
.topnav-action { background: transparent; border: none; color: #fff; font-size: var(--text-md);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: var(--space-2); font-family: inherit; font-weight: 500; }
.topnav-action:hover { background: rgba(255,255,255,.1); }
/* Global Back button: sits between the brand mark and the search box, appears once
   there is navigation history to return to. */
.topnav-back { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: var(--text-md); font-weight: 600; font-family: inherit; cursor: pointer;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-1);
  margin-right: var(--space-1); flex-shrink: 0; transition: background var(--motion-1), transform var(--motion-1); }
.topnav-back:hover { background: rgba(255,255,255,.16); transform: translateX(-2px); }
.topnav-back[hidden] { display: none; }
.topnav-back span { font-size: var(--text-xl); line-height: var(--leading-none); }
/* Admin-only nav entries (e.g. Under the Hood): hidden unless the SUIO admin view is on.
   `html.var-keys-on` already tracks the chara.admin flag (set on boot + on the var-keys toggle). */
.topnav-action.admin-only { display: none; }
html.var-keys-on .topnav-action.admin-only { display: flex; }
.user-menu-section.admin-only { display: none; }
html.var-keys-on .user-menu-section.admin-only { display: block; }
.tn-ctl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cdd6ea; }
.chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--navy-3);
  color: #aab6d6; background: var(--navy-2); white-space: nowrap; }
.chip.ok { color: #8fe6bd; border-color: #1d7a52; }
.chip.bad { color: #ffb4b4; border-color: var(--tag-red-fg); }
.tn-api-sum { cursor: pointer; color: #cdd6ea; font-size: 12px; list-style: none; }

/* ── Priority + overflow topnav (shell/topnav.js; U-RESP-01, decision card D4-D6) ──────────
   The bar never wraps (layer panel + copilot hang at top:96px). Below ~1100px action labels
   drop to icons; items that still do not fit retreat into the More disclosure; below ~640px
   the search box swaps for a button that opens a full-bar search. */
.topnav.tn-icons .topnav-action .lbl { display: none; }
.topnav.tn-icons .topnav-action { padding: 8px 10px; }
.topnav-searchbtn { display: none; background: rgba(255,255,255,.08); border: 0; color: #fff;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.topnav.tn-narrow .topnav-search { display: none; }
.topnav.tn-narrow .topnav-searchbtn { display: flex; }
.topnav.tn-searchopen .topnav-search { display: flex; flex: 1; }
.topnav.tn-searchopen .topnav-searchbtn, .topnav.tn-searchopen .topnav-action,
.topnav.tn-searchopen .tn-more, .topnav.tn-searchopen > .chip,
.topnav.tn-searchopen .tn-ctl { display: none; }
.tn-more { position: relative; flex-shrink: 0; }
.tn-more[hidden] { display: none; }
#tnMoreBtn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font: 600 12.5px var(--font-sans); padding: 7px 12px; border-radius: 6px;
  cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#tnMoreBtn:hover { background: rgba(255,255,255,.16); }
.tn-more-badge { background: var(--red); color: #fff; font-size: 9.5px; font-weight: 700;
  border-radius: 8px; padding: 1px 5px; }
.tn-more-badge[hidden] { display: none; }
.tn-more-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 250px;
  background: var(--surface); color: var(--grey-700); border: 1px solid var(--grey-200);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: none;
  z-index: var(--z-dropdown); max-height: min(70vh, 420px); overflow: auto; }
.tn-more-menu.open { display: block; }
/* retreated items restyle for the menu surface; labels always show here (the label rule
   below outranks the .tn-icons hide by specificity) */
.tn-more-menu .topnav-action { color: var(--grey-700); width: 100%; justify-content: flex-start; padding: 9px 12px; }
.tn-more-menu .topnav-action:hover { background: var(--grey-100); }
.topnav.tn-icons .tn-more-menu .topnav-action .lbl { display: inline; }
.tn-more-menu .tn-mm-label { font-size: 10px; font-family: var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-600); padding: 8px 12px 4px; }
.tn-more-menu .chip { display: block; margin: 6px 8px; text-align: center;
  background: var(--grey-100); border-color: var(--grey-200); color: var(--grey-600); }
.tn-more-menu .tn-ctl { display: block; padding: 4px 8px; }
.tn-more-menu .tn-api-sum { color: var(--grey-700); padding: 5px 4px; }

/* ── Empty states (components/empty-state.js; WS3 decision card 2026-07-09) ─────────────────
   The three honest data-states (hardening axis 1): confirmed-empty / error / locked. The O
   art strokes currentColor (set here to the dim ramp); the badge strokes its state token. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 20px; text-align: center; color: var(--grey-400); }
.empty-state svg { opacity: .85; }
.empty-state-title { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.empty-state-hint { font-size: 12.5px; color: var(--grey-500); max-width: 44ch; line-height: 1.5; }
.empty-state-action { margin-top: 4px; font: 600 12.5px var(--font-sans); color: var(--accent);
  background: transparent; border: 1px solid var(--grey-200); border-radius: var(--radius-sm);
  padding: 7px 16px; cursor: pointer; }
.empty-state-action:hover { border-color: var(--accent); }
/* loading state: a quiet pulse on the dots, motion-gated at the rule (not only globally) so
   the atom is reduced-motion-safe wherever it is dropped (ux/A11Y_CONTRACT.md). */
@media (prefers-reduced-motion: no-preference) {
  .empty-state[data-state="loading"] .es-load-dots { animation: es-load-pulse 1.2s var(--ease-in-out, ease-in-out) infinite; }
  @keyframes es-load-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
}
.empty-state[data-state="loading"] .es-load-dots { opacity: .55; }

/* topnav user avatar + menu */
.user-menu-wrap { position: relative; }
.topnav-user { width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  display: grid; place-items: center; font-weight: 600; font-size: 12px; color: #fff; cursor: pointer; }
.user-menu { position: absolute; right: 0; top: 42px; width: 256px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--grey-200); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 50; display: none; }
.user-menu.open { display: block; }
.user-menu-head { padding: 10px 10px 8px; }
.user-menu-head .name { font-weight: 700; font-size: 14px; color: var(--text-strong); }
.user-menu-head .role { font-size: 11px; color: var(--dim); font-family: var(--font-mono); margin-top: 2px; }
.user-menu-section { border-top: 1px solid var(--grey-100); padding: 6px 0; }
.user-menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); padding: 4px 10px; font-weight: 700; }
.user-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--grey-700); }
.user-menu-item:hover { background: var(--grey-50); }
.user-menu-item.active { background: var(--grey-50); }
.user-menu-item-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.user-menu-item .check { margin-left: auto; color: var(--green); font-weight: 700; display: none; }
.user-menu-item.active .check { display: inline; }
.user-menu-item .sub { font-size: 10px; color: var(--dim); font-family: var(--font-mono); }

/* ── Second-tier topnav (role-aware; minimal in increment 1) ── */
.topnav2 { height: 40px; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0;
  display: flex; align-items: center; gap: 4px; padding: 0 18px; font-size: 13px; position: sticky; top: 56px; z-index: 30; }
.t2-item { background: transparent; border: none; padding: 8px 12px; font-family: inherit; font-size: 13px;
  color: var(--grey-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.t2-item.active { color: var(--text-strong); border-bottom-color: var(--grey-300); font-weight: 600; }
.t2-item:hover:not(.active) { color: var(--grey-700); }
.t2-spacer { flex: 1; }
.t2-persona { font-size: 11px; color: var(--dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .5px; }

/* ── Project bar (second-tier strip) — global project scope ─────────────────── */
.pb-filter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; color: var(--grey-500); cursor: pointer; flex-shrink: 0; }
.pb-filter:hover { color: var(--text-strong); border-color: var(--grey-300); }
.pb-scope { display: inline-flex; align-items: center; gap: 8px; padding: 4px 7px 4px 10px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; background: var(--surface); }
.pb-scope:hover { border-color: var(--grey-300); }
.pb-scope.base { border-style: dashed; }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,171,106,.14); flex-shrink: 0; }
.pb-stack { color: var(--grey-400); font-size: 13px; }
.pb-name { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.pb-name.muted { font-weight: 500; color: var(--grey-500); }
.pb-gate { font-size: 10px; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--grey-200); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.pb-tag { font-size: 10px; color: var(--grey-600); background: var(--grey-50); border: 1px solid var(--grey-200); padding: 1px 8px; border-radius: 5px; max-width: 130px; overflow: hidden; cursor: default; }
.pb-tag-inner { display: inline-block; white-space: nowrap; }
.pb-chev { color: var(--grey-400); font-size: 11px; }
.pb-clear { border: none; background: transparent; color: var(--grey-400); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.pb-clear:hover { color: var(--red); }
/* B10 (UX Kit): the pinned-tab strip shrinks and scrolls INSIDE itself - it may never push
   the page into horizontal scroll (found overflowing at the 768 regression width). */
.pb-tabs { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px;
  min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pb-tabs::-webkit-scrollbar { display: none; }
.pb-tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: var(--grey-50); cursor: pointer; font-size: 12px; color: var(--grey-700); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pb-tab:hover { background: var(--surface); }
.pb-tab.on { background: var(--surface); color: var(--text-strong); border-bottom-color: var(--teal); font-weight: 600; }
.pb-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-300); flex-shrink: 0; }
.pb-tab.on .pb-tab-dot { background: var(--green); }
.pb-tab-lbl { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.pb-tab-x { border: none; background: transparent; color: var(--grey-400); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.pb-tab-x:hover { color: var(--red); }
.pb-stat { display: inline-flex; flex-direction: column; gap: 3px; min-width: 96px; margin-left: 12px; }
.pb-stat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pb-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-400); }
.pb-stat-val { font-size: 11px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.pb-stat-bar { height: 4px; background: var(--grey-100); border-radius: 2px; overflow: hidden; }
.pb-stat-fill { height: 100%; background: var(--green); border-radius: 2px; }
.pb-stat-stale { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--yellow); margin-left: 12px; }
.pb-stale-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
/* ── Scope-bar trackers (user-pinned VARs) ──────────────────────────────── */
.pb-trackers { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.pb-tracker { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 3px 20px 3px 9px; background: var(--grey-50); border: 1px solid var(--line); border-radius: 7px;
  cursor: pointer; font-family: inherit; text-align: left; min-width: 58px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.pb-tracker:hover { border-color: var(--accent); background: var(--surface); box-shadow: var(--shadow); }
.pb-tracker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-tracker-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pb-tracker-unit { font-size: 9px; color: var(--grey-500); margin-left: 2px; font-weight: 500; }
.pb-tracker-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-500); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.pb-tracker-x { position: absolute; top: 1px; right: 2px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: var(--grey-400); border-radius: 4px; opacity: 0; transition: opacity .12s ease; }
.pb-tracker:hover .pb-tracker-x, .pb-tracker:focus-within .pb-tracker-x { opacity: 1; }
.pb-tracker-x:hover { color: var(--red); background: rgba(220,64,64,.10); }
.pb-trk-add { padding: 5px 9px; font-size: 11px; font-weight: 600; color: var(--accent-deep, var(--accent));
  background: transparent; border: 1px dashed var(--line); border-radius: 7px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.pb-trk-add:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep, var(--accent)); }
/* VAR-key reveal toggle in the project bar */
.pb-var-toggle { padding: 3px 8px; font: 600 11px ui-monospace,monospace; color: var(--dim);
  background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; flex-shrink: 0; letter-spacing: .02em; }
.pb-var-toggle:hover { color: var(--accent); border-color: var(--accent); }
.pb-var-toggle.on { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
/* tracker picker popover */
.pb-trk-picker { position: fixed; width: 320px; max-height: 70vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: var(--z-popover-top); }
.pb-trk-pick-search { padding: 8px; border-bottom: 1px solid var(--grey-100); position: sticky; top: 0; background: var(--surface); }
.pb-trk-pick-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 13px; }
.pb-trk-pick-list { padding: 6px; }
.pb-trk-grp { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-400); padding: 8px 8px 4px; }
.pb-trk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; }
.pb-trk-row:hover { background: var(--grey-50); }
.pb-trk-row-name { font-size: 13px; color: var(--text-strong); }
.pb-trk-row-unit { font-size: 10px; color: var(--grey-500); }
.pb-trk-row-btn { padding: 3px 12px; font-size: 11px; font-weight: 600; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent-ink, #fff); border-radius: 6px; cursor: pointer; font-family: inherit; }
.pb-trk-row-btn.on { background: transparent; color: var(--grey-700); border-color: var(--line); }
.pb-trk-row-btn:hover { filter: brightness(.96); }
.pb-trk-empty { padding: 16px; text-align: center; color: var(--grey-500); font-size: 12px; }
.pb-trk-pick-foot { padding: 8px 10px; border-top: 1px solid var(--grey-100); font-size: 10.5px; color: var(--grey-500); }
.pb-picker { position: fixed; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 250; overflow: hidden; }
.pb-picker-search { padding: 8px; border-bottom: 1px solid var(--grey-100); }
.pb-picker-search input { width: 100%; box-sizing: border-box; padding: 6px 9px; font-size: 12px; border: 1px solid var(--grey-200); border-radius: 6px; font-family: inherit; outline: none; }
.pb-picker-search input:focus { border-color: var(--teal); }
.pb-picker-list { max-height: 300px; overflow-y: auto; padding: 4px; }
.pb-picker-grp { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-400); padding: 7px 8px 3px; }
.pb-picker-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.pb-picker-item:hover { background: var(--grey-50); }
.pb-picker-item.on { background: rgba(20,184,166,.08); }
.pb-pick-name { flex: 1; color: var(--grey-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-pick-gate { font-size: 10px; color: var(--grey-400); font-family: var(--font-mono); }
.pb-picker-base { padding: 9px 12px; border-top: 1px solid var(--grey-100); font-size: 12px; color: var(--grey-600); cursor: pointer; }
.pb-picker-base:hover { background: var(--grey-50); color: var(--text-strong); }
.pb-picker-empty { padding: 14px; text-align: center; color: var(--grey-400); font-size: 12px; }

/* ── Warp — fuzzy command + nav palette (body-appended popover behind #topsearch) ── */
.jumpbar { position: fixed; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); z-index: var(--z-popover-top); overflow: hidden; display: flex; flex-direction: column; }
.jumpbar-list { max-height: min(58vh, 460px); overflow-y: auto; padding: 5px; }
.jumpbar-grp { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-400); padding: 9px 9px 3px; }
.jumpbar-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.jumpbar-item:hover { background: var(--grey-50); }
.jumpbar-item.active { background: var(--accent-tint); }
.jumpbar-ico { display: inline-flex; color: var(--accent-deep); flex: 0 0 auto; }
.jumpbar-ico svg { width: 15px; height: 15px; }
.jumpbar-label { color: var(--grey-900); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.jumpbar-sub { color: var(--grey-400); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.jumpbar-kind { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey-500); background: var(--grey-100); border-radius: 999px; padding: 2px 7px; }
.jumpbar-empty { padding: 16px; text-align: center; color: var(--grey-400); font-size: 12px; line-height: 1.5; }
.jumpbar-foot { display: flex; align-items: center; gap: 12px; padding: 7px 11px; border-top: 1px solid var(--grey-100);
  font-size: 10px; color: var(--grey-500); background: var(--grey-50); }
.jumpbar-foot b { font-family: var(--font-mono); color: var(--grey-700); font-weight: 500; }
.jumpbar-foot-sp { margin-left: auto; }
/* scope picker filter chips */
.pb-picker-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--grey-100); }
.pb-filter-chip { padding: 2px 9px; font-size: 11px; font-weight: 500; color: var(--grey-600); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 99px; cursor: pointer; font-family: inherit; }
.pb-filter-chip:hover { border-color: var(--teal); color: var(--teal); }
.pb-filter-chip.on { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }
.pb-filter-sep { width: 1px; height: 14px; background: var(--grey-200); margin: 0 2px; flex-shrink: 0; }
/* tech/state meta badge in picker rows */
.pb-pick-meta { font-size: 9px; color: var(--grey-400); font-family: var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
/* tracker picker: live-value preview */
.pb-trk-row-preview { display: inline-block; margin-left: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--green); background: rgba(31,171,106,.10); border-radius: 4px; padding: 0 5px; vertical-align: middle; }

/* ── Artifact inline preview (engagement view) ──────────────────────────── */
.art-docx-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; max-height: 540px; overflow-y: auto; font-size: 13px; line-height: 1.65; color: var(--ink); }
.art-docx-preview h1, .art-docx-preview h2, .art-docx-preview h3 { color: var(--text-strong); margin: 1.1em 0 .4em; font-weight: 700; }
.art-docx-preview h1 { font-size: 18px; }
.art-docx-preview h2 { font-size: 15px; }
.art-docx-preview h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-600); }
.art-docx-preview p { margin: .5em 0; }
.art-docx-preview table { width: 100%; border-collapse: collapse; font-size: 12px; margin: .8em 0; }
.art-docx-preview td, .art-docx-preview th { padding: 5px 8px; border: 1px solid var(--grey-200); text-align: left; }
.art-docx-preview th { background: var(--grey-50); font-weight: 600; color: var(--text-strong); }
.art-docx-preview ul, .art-docx-preview ol { padding-left: 1.4em; margin: .4em 0; }
.art-docx-preview li { margin: .2em 0; }
.art-docx-preview strong { font-weight: 700; }

/* ── Activation Command Center ─────────────────────────────────────────────── */
.acc-page { padding: 0 0 30px; }
.acc-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; flex-wrap: wrap; }
.acc-title { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.acc-scope { margin: 0 22px 12px; font-size: 12px; color: var(--grey-600); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 7px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.acc-scope.on { background: rgba(31,171,106,.07); border-color: rgba(31,171,106,.25); }
.acc-scope-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.acc-scope-stack { color: var(--grey-400); }
.acc-scope b { color: var(--text-strong); font-weight: 600; }
.acc-scope-tag { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-400); border: 1px solid var(--grey-200); border-radius: 4px; padding: 1px 6px; }
.acc-filterbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 22px 14px; }
.acc-filter-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-400); margin-right: 2px; }
.acc-chip { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); cursor: pointer; }
.acc-chip:hover { border-color: var(--grey-300); }
.acc-chip.on { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.acc-inbox { margin: 0 22px 18px; border: 1px solid var(--grey-200); border-radius: 9px; overflow: hidden; }
.acc-inbox-head { font-size: 12px; font-weight: 600; color: var(--grey-700); padding: 9px 14px; background: var(--grey-50); border-bottom: 1px solid var(--grey-200); }
.acc-inbox-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--grey-100); }
.acc-inbox-row:last-child { border-bottom: none; }
.acc-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.acc-inbox-info { flex: 1; min-width: 0; }
.acc-inbox-name { font-size: 13px; font-weight: 500; color: var(--grey-900); }
.acc-inbox-detail { font-size: 11px; color: var(--grey-500); }
.acc-inbox-meta { text-align: right; flex-shrink: 0; }
.acc-cat-tag { font-size: 11px; font-weight: 600; }
.acc-inbox-when { font-size: 10px; color: var(--grey-500); margin-top: 1px; }
.acc-library { padding: 0 22px; }
.acc-cat { margin-bottom: 18px; }
.acc-cat-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px; }
.acc-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.acc-cat-ct { font-size: 11px; color: var(--grey-400); font-weight: 500; }
.acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.acc-card { border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.acc-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.acc-card-name { font-size: 13px; font-weight: 600; color: var(--grey-900); flex: 1; min-width: 0; }
.acc-card-status { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-400); }
.acc-card-line { font-size: 11.5px; color: var(--grey-700); line-height: 1.5; margin-bottom: 2px; }
.acc-card-line b { font-weight: 600; color: var(--grey-500); font-size: 10px; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.acc-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--grey-500); gap: 8px; }
.acc-icon-btn { border: 1px solid var(--grey-200); background: var(--surface); border-radius: 5px; font-size: 10px; padding: 2px 8px; color: var(--grey-600); cursor: pointer; flex-shrink: 0; }
.acc-icon-btn:hover { border-color: var(--grey-300); color: var(--text-strong); }
.acc-empty { padding: 16px; text-align: center; color: var(--grey-400); font-size: 12px; }
/* A feed that could not be READ - deliberately styled apart from .acc-empty ("nothing to show"), so
   the two states are not mistakable for each other at a glance. */
.acc-load-err { border: 1px solid var(--orange); border-left-width: 3px; border-radius: 6px;
  padding: 8px 12px; margin: 6px 0; font-size: 12px; line-height: 1.45; color: var(--text-strong);
  background: var(--surface); text-align: left; }
.acc-modsel { font-size: 12px; padding: 4px 8px; border: 1px solid var(--grey-200); border-radius: 6px; font-family: inherit; color: var(--grey-700); background: var(--surface); cursor: pointer; }
.acc-card-mod { color: var(--grey-400); }
.acc-card.custom { border-color: var(--teal); }
.acc-card-custom { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--teal); border: 1px solid var(--teal); border-radius: 4px; padding: 0 4px; }
.acc-card.off { opacity: .6; }
.acc-card.off .acc-card-name { color: var(--grey-500); }
.acc-sw { position: relative; width: 30px; height: 16px; border-radius: 999px; border: none; background: var(--grey-300); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .15s; }
.acc-sw.on { background: var(--green); }
.acc-sw-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); transition: left .15s; }
.acc-sw.on .acc-sw-knob { left: 16px; }
.acc-bulk { font-size: 11px; padding: 4px 11px; border-radius: 6px; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); cursor: pointer; white-space: nowrap; }
.acc-bulk:hover { border-color: var(--text-strong); color: var(--text-strong); }
/* recommended-kit staging tray: a kit bred in the HOT Planner Hive, handed to the Command Center for review/accept (engine gated) */
.acc-staged { margin: 0 22px 18px; border: 1px solid var(--layer-hot); border-radius: 9px; overflow: hidden; background: rgba(249,115,22,.04); }
.acc-staged-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--grey-900); padding: 9px 14px; background: rgba(249,115,22,.10); border-bottom: 1px solid rgba(249,115,22,.30); }
.acc-staged-head svg { color: var(--layer-hot); }
.acc-staged-sub { font-size: 11.5px; color: var(--grey-700); line-height: 1.5; padding: 8px 14px; }
.acc-staged-bar { display: flex; gap: 8px; padding: 0 14px 10px; }
.acc-staged-bar .acc-bulk[disabled] { opacity: .5; cursor: default; }
.acc-staged-cat { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-500); padding: 8px 14px 4px; }
.acc-staged-cat .acc-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.acc-staged-cat .acc-cat-ct { color: var(--grey-400); font-weight: 500; }
.acc-staged-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--grey-100); }
.acc-staged-row.covered { opacity: .6; }
.acc-staged-info { flex: 1; min-width: 0; }
.acc-staged-name { font-size: 13px; font-weight: 600; color: var(--grey-900); }
.acc-staged-line { font-size: 11.5px; color: var(--grey-700); margin-top: 2px; }
.acc-staged-line b { color: var(--grey-500); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.acc-staged-foot { font-size: 10.5px; color: var(--grey-500); margin-top: 3px; }
.acc-staged-act { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex-shrink: 0; }
.acc-staged-act .acc-icon-btn { font-size: 11px; padding: 4px 12px; }
.acc-staged-act .acc-icon-btn.primary { background: var(--layer-hot); border-color: var(--layer-hot); color: #fff; }
.acc-staged-act .acc-icon-btn.primary:hover { filter: brightness(1.06); }
.acc-staged-dedup { font-size: 10px; color: var(--grey-500); border: 1px dashed var(--grey-300); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }

/* Sentinel (codename Overlord) — watch-rule detector surface (buildable-now manual sweep;
   the autonomous runner + out-of-app push are gated, Execution Spec B3). Accent = the
   Activation layer color (--layer-action). Severity reuses the red/amber/blue ramp. */
.sentinel-panel { margin: 0 22px 18px; border: 1px solid var(--layer-action); border-radius: 9px; overflow: hidden; background: rgba(240,168,40,.05); }
.sentinel-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--grey-900); padding: 9px 14px; background: rgba(240,168,40,.12); border-bottom: 1px solid rgba(240,168,40,.30); }
.sentinel-head svg { color: var(--layer-action); }
.sentinel-run { background: var(--layer-action); border-color: var(--layer-action); color: var(--text-strong); font-weight: 600; }
.sentinel-run:hover { filter: brightness(1.04); border-color: var(--layer-action); color: var(--text-strong); }
.sentinel-run[disabled] { opacity: .5; cursor: default; filter: none; }
.sentinel-sub { font-size: 11.5px; color: var(--grey-700); line-height: 1.5; padding: 8px 14px; }
.sentinel-results { padding: 0 0 4px; }
.sentinel-hint { font-size: 11.5px; color: var(--grey-500); padding: 6px 14px 10px; font-style: italic; }
.sentinel-summary { font-size: 11.5px; color: var(--grey-700); padding: 8px 14px; border-top: 1px solid var(--grey-100); }
.sentinel-summary b { color: var(--grey-900); }
.sentinel-summary .sev-critical { color: var(--red); font-weight: 600; }
.sentinel-summary .sev-warn { color: #B8860B; font-weight: 600; }
.sentinel-summary .sev-info { color: var(--accent-deep); font-weight: 600; }
.sentinel-gap { color: var(--grey-500); font-style: italic; }
.sentinel-clear { font-size: 12px; color: var(--layer-report); padding: 8px 14px 12px; font-weight: 600; }
.sentinel-group { border-top: 1px solid var(--grey-100); }
.sentinel-group-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-500); padding: 8px 14px 4px; }
.sentinel-group-head .acc-cat-ct { color: var(--grey-400); font-weight: 500; }
.sentinel-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 14px; }
.sentinel-row.covered { opacity: .6; }
.sentinel-row .acc-status-dot { margin-top: 4px; flex-shrink: 0; }
.sentinel-row-info { flex: 1; min-width: 0; }
.sentinel-row-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--grey-900); }
.sentinel-row-detail { font-size: 11.5px; color: var(--grey-700); margin-top: 2px; line-height: 1.45; }
.sentinel-dedup { font-size: 10.5px; color: var(--grey-500); margin-top: 3px; border-left: 2px solid var(--grey-300); padding-left: 7px; }
.acc-cat-desc { font-size: 11px; color: var(--grey-400); font-weight: 400; }
/* card flip — audit-trail "nutrition label" on the back */
.acc-card-flip { perspective: 1000px; cursor: pointer; }
.acc-card-inner { position: relative; transition: transform .5s; transform-style: preserve-3d; }
.acc-card-flip.flipped .acc-card-inner { transform: rotateY(180deg); }
.acc-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.acc-face.back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 7px; overflow: auto; }
.acc-back-head { font-size: 11px; font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.acc-back-id { font-family: var(--font-mono); font-size: 9px; color: var(--grey-400); margin-left: auto; }
.acc-back-row { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--grey-700); }
.acc-back-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-300); margin-top: 4px; flex-shrink: 0; }
.acc-back-who { font-weight: 600; color: var(--grey-800); }
.acc-back-ts { font-size: 10px; color: var(--grey-400); font-family: var(--font-mono); }
.acc-back-hint { margin-top: auto; font-size: 9px; color: var(--grey-400); text-align: right; }
.acf-desc { font-size: 11px; color: var(--grey-500); font-style: italic; margin-top: 5px; line-height: 1.4; }
.acc-sev { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.sev-critical { color: var(--red); background: rgba(220,64,64,.10); }
.sev-warn { color: #b45309; background: rgba(240,168,40,.16); }
.sev-info { color: var(--blue); background: rgba(45,127,249,.10); }
.acc-inbox-name .acc-sev { margin-left: 6px; vertical-align: middle; }
.acc-card-fire { font-size: 10px; color: var(--grey-500); margin-top: 6px; }
.acc-card-fire b { color: var(--grey-600); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 9px; margin-right: 3px; }
.acc-card-foot-r { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.acc-scope2 { font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--grey-400); border: 1px solid var(--grey-200); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.acc-scope2.proj { color: var(--teal); border-color: rgba(20,184,166,.4); text-transform: none; letter-spacing: 0; }

/* Activation authoring modal */
/* (.acf-overlay/.acf-modal/.acf-head/.acf-title/.acf-x shells removed 2026-07-09 - the create
   form mounts on shell/modal.js openModal; inner body classes below stay live; U-DEAD-05) */
.acf-body { padding: 14px 16px; overflow-y: auto; }
.acf-l { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-500); margin: 10px 0 4px; }
.acf-l:first-child { margin-top: 0; }
.acf-body select, .acf-body input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--grey-200); border-radius: 6px; color: var(--grey-800); background: var(--surface); outline: none; }
.acf-body select:focus, .acf-body input:focus { border-color: var(--teal); }
.acf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acf-row3 { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 6px; }
.acf-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--grey-700); }
.acf-inline select, .acf-inline input { width: auto; flex: 1; min-width: 88px; }
.acf-btn { font-size: 13px; padding: 7px 14px; border-radius: 7px; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); cursor: pointer; }
.acf-btn:hover { border-color: var(--grey-300); }
.acf-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); font-weight: 600; }

/* ── App body: left rail + slide panel + content ─────────── */
.app-body { display: flex; flex-direction: row; flex: 1; min-height: 0; position: relative; }
#content { flex: 1; min-width: 0; overflow-y: auto; }
.page { padding: 22px 30px; max-width: 1440px; margin: 0 auto; width: 100%; }

.leftnav { width: var(--rail-w); flex-shrink: 0; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: 16px 0 12px;
  position: sticky; top: 96px; height: calc(100vh - 96px); z-index: var(--z-rail); border-right: 1px solid rgba(255,255,255,.06); }
/* Folder-tab spine: each pillar is a tab rounded on the LEFT and flush to the right
   edge of the 72px nav, where the white layer panel (position:fixed; left:72px) begins.
   The active tab turns white and merges with that panel like a file-folder tab. */
.chara-blocks { display: flex; flex-direction: column; gap: 5px; padding: 0 0 0 12px; }
.chara-block { width: 100%; height: 52px; border-radius: 12px 0 0 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-right: none;
  color: rgba(255,255,255,.82); font-family: var(--font-mono);
  letter-spacing: .5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding-bottom: 5px; transition: background .12s, color .12s, transform .12s, box-shadow .12s;
  position: relative; }
.cb-letter { font-size: 15px; font-weight: 600; line-height: 1; }
.cb-label { font-family: var(--font-sans); font-size: 8px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .04em; opacity: .68; }
.chara-block:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateX(2px); }
.chara-block.active { background: var(--surface); color: var(--text-strong); border-color: #fff;
  transform: none; box-shadow: -3px 0 12px rgba(0,0,0,.16); }
/* Layer identity: a 6px dot at the bottom center — calmer than the old 3px left bar */
.chara-block.layer-cold::after,
.chara-block.layer-hot::after,
.chara-block.layer-action::after,
.chara-block.layer-report::after,
.chara-block.layer-archive::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; opacity: .75; pointer-events: none; }
.chara-block.layer-cold::after    { background: var(--teal); }
.chara-block.layer-hot::after     { background: var(--orange); }
.chara-block.layer-action::after  { background: var(--green); }
.chara-block.layer-report::after  { background: var(--purple); }
.chara-block.layer-archive::after { background: var(--grey-300); }
.leftnav-spacer { flex: 1; }
.leftnav-footer { padding: 0 10px 70px; } /* bottom pad lifts the Co-pilot launcher above the bottom-left Capture launcher */
/* Left-rail AI Co-pilot launcher (replaces the old reserved "soon" pill; the floating FAB is retired) */
.copilot-rail { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0; border: none; cursor: pointer; border-radius: 12px;
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.78);
  transition: background .12s, color .12s, transform .12s, box-shadow .12s; }
.copilot-rail[hidden] { display: none; } /* parked launcher: [hidden] must beat the base display:flex (mirrors .topnav-back[hidden]) */
/* D7 pick 2026-07-09: the scripted co-pilot is an Admin-view tool - hidden from the client
   surface, shown when the admin view is on (same html.var-keys-on flag as the topnav rows).
   The chara.copilot=1 revival flag (boot() strips the class) un-parks it for everyone once a
   real AI seam is wired. */
.copilot-rail.admin-only { display: none; }
html.var-keys-on .copilot-rail.admin-only { display: flex; }
.copilot-rail:hover { background: rgba(124,58,237,.30); color: #fff; transform: translateY(-1px); }
.copilot-rail.open { background: linear-gradient(135deg, var(--purple), var(--blue)); color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,.40); }
.copilot-rail-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.active-project-pill { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.active-project-pill.rich { display: block; }
.apl-head { display: flex; align-items: center; gap: 8px; }
.apl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,171,106,.15); flex-shrink: 0; }
.apl-text { font-size: 10px; line-height: 1.25; min-width: 0; }
.apl-name { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apl-meta { color: rgba(255,255,255,.55); font-family: var(--font-mono); font-size: 9px; margin-top: 1px; }
.apl-kicker { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.apl-stats { margin-top: 10px; }
.apl-stat { margin-bottom: 8px; }
.apl-stat-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.apl-stat-num { color: #fff; font-weight: 500; font-size: 11px; }
.apl-bar { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.apl-bar-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .25s; }
.apl-stale { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--yellow); margin-top: 2px; }
.apl-stale-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.apl-switch { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: #6fd3a6; cursor: pointer; }
.apl-switch:hover { color: #8ee0bb; }
.apl-switch-ic { font-size: 13px; }

/* ── Layer slide-out panel (V18) ─────────────────────────── */
.layer-panel-backdrop { position: fixed; top: 96px; left: var(--rail-w); right: 0; bottom: 0;
  background: rgba(15,27,61,.18); z-index: var(--z-panel); opacity: 0; pointer-events: none; transition: opacity .18s; }
.layer-panel-backdrop.open { opacity: 1; pointer-events: auto; }
.layer-panel { position: fixed; top: 96px; left: var(--rail-w); width: 380px; height: calc(100vh - 96px);
  background: var(--surface); border-right: 1px solid var(--grey-200); box-shadow: 6px 0 24px rgba(15,27,61,.10);
  z-index: 36; transform: translateX(calc(-100% - var(--rail-w))); transition: transform .22s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; overflow: hidden; }
.layer-panel.open { transform: translateX(0); }
.layer-panel.hot-expanded { width: calc(100vw - var(--rail-w)); max-width: none; }
.layer-panel-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--grey-100);
  display: flex; align-items: start; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.layer-panel-title { font-size: 11px; font-weight: 600; font-family: var(--font-mono); letter-spacing: .6px; text-transform: uppercase; color: var(--grey-500); margin-bottom: 4px; }
.layer-panel-name { font-size: 17px; font-weight: 700; color: var(--text-strong); letter-spacing: -.2px; }
.layer-panel-sub { font-size: 12px; color: var(--grey-500); margin-top: 3px; }
.layer-panel-close { background: transparent; border: none; width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; color: var(--grey-500); font-size: 16px; display: grid; place-items: center; flex-shrink: 0; }
.layer-panel-close:hover { background: var(--grey-100); color: var(--grey-900); }
.lp-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.lp-stub { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 28px; color: var(--grey-500); gap: 10px; }
.lp-stub .emoji { font-size: 30px; }
.lp-stub .ttl { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.lp-stub .body { font-size: 13px; line-height: 1.5; max-width: 280px; }
.lp-stub .tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--orange); background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.25); border-radius: 5px; padding: 3px 9px; }
.lp-stub button { margin-top: 6px; }

/* ── Banner / page heads ─────────────────────────────────── */
.banner { display: none; background: rgba(220,64,64,.08); border: 1px solid rgba(220,64,64,.3);
  color: #9b2c2c; padding: 9px 13px; border-radius: 8px; margin: 14px 30px 0; font-size: 13px; }
.banner.show { display: block; }
.page-h { font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -.3px; margin: 0 0 2px; }
.page-sub { font-size: 13px; color: var(--dim); margin-bottom: 18px; }

/* ── Crumb + Portfolio (V18) ─────────────────────────────── */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-500); margin-bottom: 18px; }
.crumb a { color: var(--grey-500); cursor: pointer; }
.crumb a:hover { color: var(--blue); }
.crumb .sep { color: var(--grey-300); }
.crumb .current { color: var(--grey-900); font-weight: 500; }
.portfolio-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.portfolio-header h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.5px; color: var(--text-strong); }
.portfolio-header .subtitle { color: var(--grey-500); font-size: 14px; margin-top: 4px; }
.portfolio-filters { display: flex; gap: 8px; font-size: 13px; align-items: center; }
.filter-btn { background: var(--surface); border: 1px solid var(--grey-200); padding: 8px 14px; border-radius: 6px; cursor: pointer; color: var(--grey-700); font-family: inherit; font-size: 13px; }
.filter-btn.active { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.portfolio-view-toggle { display: inline-flex; gap: 0; }
.portfolio-view-toggle button { background: var(--surface); border: 1px solid var(--grey-200); padding: 6px 10px; font-size: 11px; cursor: pointer; font-family: inherit; color: var(--grey-700); font-weight: 500; }
.portfolio-view-toggle button:first-child { border-radius: 6px 0 0 6px; border-right: none; }
.portfolio-view-toggle button:last-child { border-radius: 0 6px 6px 0; }
.portfolio-view-toggle button.active { background: var(--navy); color: #fff; border-color: var(--text-strong); }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.project-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 12px; padding: 20px;
  cursor: pointer; transition: background var(--motion-1) var(--ease-out), color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out), box-shadow var(--motion-1) var(--ease-out), transform var(--motion-1) var(--ease-out); display: flex; flex-direction: column; gap: 14px; }
.project-card:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(45,127,249,.10); transform: translateY(-1px); }
.project-card.pending { cursor: default; opacity: .72; background: var(--grey-50); border-style: dashed; }
.project-card.pending:hover { border-color: var(--grey-300); box-shadow: none; transform: none; }
.project-card-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.project-card-title { font-weight: 600; font-size: 16px; color: var(--grey-900); }
.project-card-meta { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.project-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--grey-100); border-bottom: 1px solid var(--grey-100); }
.stat { display: flex; flex-direction: column; }
.stat-label { font-size: 11px; color: var(--grey-500); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
.stat-value { font-size: 16px; font-weight: 600; color: var(--grey-900); margin-top: 2px; }
.stat-value.live { color: var(--blue); }
.gate-progress-bar { height: 6px; background: var(--grey-100); border-radius: 3px; overflow: hidden; display: flex; }
.gate-seg { flex: 1; margin-right: 2px; background: var(--grey-200); }
.gate-seg:last-child { margin-right: 0; }
.gate-seg.done { background: var(--green); }
.gate-seg.active { background: var(--yellow); }
.gate-progress-label { font-size: 11px; color: var(--grey-500); margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.badge.active { background: rgba(31,171,106,.12); color: var(--green); }
.badge.attention { background: rgba(240,168,40,.12); color: var(--yellow); }
.badge.blocked { background: rgba(220,64,64,.12); color: var(--red); }
.badge.construction { background: rgba(249,115,22,.12); color: var(--orange); }
.badge.ops { background: rgba(124,58,237,.12); color: var(--purple); }
.badge.pending { background: var(--grey-100); color: var(--grey-500); }
.badge.showcase { background: rgba(20,184,166,.12); color: var(--teal); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.risk-pred-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-family: var(--font-mono); font-weight: 600; }
.risk-pred-badge.on-time { background: rgba(31,171,106,.10); color: var(--green); }
.risk-pred-badge.slight { background: rgba(240,168,40,.14); color: var(--yellow); }
.risk-pred-badge.late { background: rgba(220,64,64,.10); color: var(--red); }

/* ── Reports Hub (layer panel) ───────────────────────────── */
.report-cat-select { width: 100%; padding: 7px 10px; border: 1px solid var(--grey-200); border-radius: 6px; background: var(--surface); font-family: inherit; font-size: 13px; color: var(--grey-900); cursor: pointer; margin-bottom: 10px; }
.report-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--grey-500); padding: 0 20px 6px; }
.report-list { padding: 0 12px 4px; }
.report-row { padding: 11px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.report-row:hover { background: var(--grey-50); border-color: var(--grey-200); }
.report-row.live { background: rgba(45,127,249,.05); border-color: rgba(45,127,249,.2); }
.report-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-row-name { font-size: 13px; font-weight: 600; color: var(--grey-900); }
.report-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; }
.report-status.current { background: rgba(31,171,106,.12); color: var(--green); }
.report-status.stale { background: rgba(240,168,40,.14); color: #B8860B; }
.report-status.draft { background: rgba(45,127,249,.10); color: var(--blue); }
.report-status.live { background: rgba(45,127,249,.12); color: var(--blue); }
.report-status.sample { background: var(--grey-100); color: var(--grey-500); }
/* availability: a card with no live data ("no meat on the bones") is greyed; data-backed cards are full opacity */
.report-row.dim { opacity: .5; }
.report-row.dim:hover { opacity: .72; background: var(--grey-50); border-color: var(--grey-200); }
.report-row-meta { display: flex; gap: 10px; font-size: 11px; color: var(--grey-500); margin-top: 4px; flex-wrap: wrap; }
.report-row-id { font-size: 10px; color: var(--grey-400); font-family: var(--font-mono); margin-top: 4px; }
.report-stale-warn { background: rgba(240,168,40,.08); border: 1px solid rgba(240,168,40,.20); border-radius: 6px; padding: 8px 12px; margin: 0 12px 10px; font-size: 11px; color: #B8860B; }
.lrn-report-link { display: flex; align-items: center; gap: 8px; margin: 6px 12px 12px; padding: 10px 12px; border-radius: 8px; background: rgba(124,58,237,.05); border: 1px solid rgba(124,58,237,.15); color: var(--purple); font-size: 12px; font-weight: 600; cursor: pointer; }
.report-crumb { max-width: 1100px; margin: 16px auto 0; padding: 0 32px; font-size: 13px; color: var(--grey-500); }
.report-crumb a { color: var(--grey-500); cursor: pointer; } .report-crumb a:hover { color: var(--blue); }
.report-crumb span { color: var(--grey-900); font-weight: 500; }

/* ── Report detail pages (report-*) — ported from V18 ────── */
.report-page { padding: 24px 32px; max-width: 1100px; margin: 0 auto; }
.report-header { margin-bottom: 24px; }
.report-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.report-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-strong); }
.report-header-sub { color: var(--grey-500); font-size: 12px; font-family: var(--font-mono); margin-top: 4px; line-height: 1.5; }
.report-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.report-actions button { padding: 7px 14px; border-radius: 6px; border: 1px solid var(--grey-200); background: var(--surface); font-family: inherit; font-size: 12px; cursor: pointer; color: var(--grey-700); display: flex; align-items: center; gap: 5px; }
.report-actions button:hover { background: var(--grey-50); border-color: var(--grey-300); }
.report-actions button.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.report-actions button.primary:hover { background: var(--navy-2); }
.report-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.report-kpi-tile { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 8px; padding: 14px 16px; }
.report-kpi-value { font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.5px; }
.report-kpi-label { font-size: 10px; color: var(--grey-500); font-family: var(--font-mono); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.report-section { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.report-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--grey-500); font-family: var(--font-mono); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--grey-100); }
.report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.report-table th { text-align: left; font-size: 10px; font-weight: 600; color: var(--grey-500); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border-bottom: 2px solid var(--grey-200); }
.report-table td { padding: 8px 10px; border-bottom: 1px solid var(--grey-100); color: var(--grey-900); vertical-align: middle; }
.report-table tr:last-child td { border-bottom: none; }
.report-table .mono { font-family: var(--font-mono); }
.report-table .right { text-align: right; }
.report-table .center { text-align: center; }
.report-table .positive { color: var(--green); }
.report-table .negative { color: var(--red); }
.report-table .neutral { color: var(--grey-500); }
.report-risk-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); display: inline-block; }
.report-risk-badge.low { background: rgba(31,171,106,0.10); color: var(--green); }
.report-risk-badge.med { background: rgba(240,168,40,0.10); color: #B8860B; }
.report-risk-badge.high { background: rgba(220,64,64,0.10); color: var(--red); }
.report-gate-dist { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.report-gate-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.report-gate-bar { width: 60px; height: 8px; border-radius: 4px; background: var(--grey-100); overflow: hidden; }
.report-gate-fill { height: 100%; border-radius: 4px; }
.report-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.report-progress-label { width: 100px; font-size: 11px; color: var(--grey-700); }
.report-progress-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--grey-100); overflow: hidden; }
.report-progress-fill { height: 100%; border-radius: 5px; transition: width 0.3s; }
.report-progress-pct { width: 48px; text-align: right; font-size: 11px; font-family: var(--font-mono); font-weight: 600; }
.report-cp-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 12px; line-height: 1.4; }
.report-cp-icon { flex-shrink: 0; font-size: 14px; }
.report-cp-text { flex: 1; color: var(--grey-900); }
.report-cp-detail { color: var(--grey-500); font-size: 10px; font-family: var(--font-mono); }
.report-confidence { margin-top: 20px; padding: 14px 16px; background: var(--grey-50); border-radius: 8px; border: 1px solid var(--grey-100); font-size: 11px; color: var(--grey-500); line-height: 1.6; }
.report-confidence strong { color: var(--grey-900); }
.report-conf-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.report-conf-badge.high { color: var(--green); }
.report-conf-badge.med { color: #B8860B; }
.report-draw-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--grey-200); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.report-draw-row { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--grey-100); font-size: 12px; }
.report-draw-row:last-child { border-bottom: none; }
.report-draw-label { color: var(--grey-500); }
.report-draw-value { font-family: var(--font-mono); font-weight: 600; color: var(--text-strong); }
.report-draw-highlight { background: var(--navy); color: #fff; padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.report-draw-highlight-amount { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.report-draw-highlight-label { font-size: 10px; opacity: 0.7; font-family: var(--font-mono); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.report-draw-details { background: var(--surface); }

/* ── Hot 3-panel execution surface (ported from V18) ─────── */
.hot-nav-hdr { padding: 10px 12px 8px; border-bottom: 1px solid var(--grey-100); background: var(--grey-50); flex-shrink: 0; }
.hot-nav-proj-select { width: 100%; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-strong); background: var(--surface); border: 1px solid var(--grey-200); border-radius: 5px; padding: 5px 8px; cursor: pointer; margin-bottom: 6px; }
.hot-nav-gate-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--grey-700); margin-bottom: 3px; }
.hot-nav-gate-bar { height: 4px; background: var(--grey-200); border-radius: 2px; overflow: hidden; }
.hot-nav-gate-fill { height: 100%; border-radius: 2px; background: var(--orange); }
.hot-nav-compact-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--grey-500); }
.hot-nav-tree { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.hn-sg { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #fff; position: relative; overflow: hidden; border-radius: 4px; margin: 2px 6px; }
.hn-sg-chev { font-size: 9px; transition: transform 0.18s; flex-shrink: 0; opacity: 0.85; }
.hn-sg-chev.open { transform: rotate(90deg); }
.hn-sg-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-sg-pct { font-size: 10px; opacity: 0.85; font-weight: 600; flex-shrink: 0; }
.hn-row { display: flex; align-items: center; gap: 5px; padding: 4px 8px; cursor: pointer; border-radius: 4px; margin: 1px 4px; font-size: 12px; color: var(--grey-700); transition: background 0.12s; min-height: 26px; }
.hn-row:hover { background: var(--grey-100); }
.hn-row.sel { background: rgba(249,115,22,0.10); color: var(--orange); font-weight: 600; }
.hn-row.sel .hn-code { color: var(--orange); }
.hn-chev { font-size: 8px; color: var(--grey-400); flex-shrink: 0; width: 10px; text-align: center; transition: transform 0.15s; }
.hn-chev.leaf { opacity: 0; pointer-events: none; }
.hn-chev.open { transform: rotate(90deg); }
.hn-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--grey-300); background: var(--surface); }
.hn-dot.complete { background: var(--green); border-color: var(--green); }
.hn-dot.active { background: var(--yellow); border-color: var(--yellow); }
.hn-dot.todo { background: var(--surface); border-color: var(--grey-300); }
.hn-minibar { flex: 0 0 32px; height: 3px; background: var(--grey-200); border-radius: 2px; overflow: hidden; }
.hn-minibar-f { height: 100%; background: var(--teal); border-radius: 2px; }
.hn-code { font-size: 10.5px; color: var(--grey-400); font-family: var(--font-mono); flex-shrink: 0; }
.hn-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.hot-tws-focusbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--grey-100); background: var(--grey-50); font-size: 12px; color: var(--grey-500); flex-shrink: 0; }
.hot-tws-pos { margin-left: auto; font-size: 11px; }
.hot-tws-nav-btn { background: none; border: 1px solid var(--grey-200); border-radius: 4px; color: var(--grey-600); cursor: pointer; padding: 2px 7px; font-size: 12px; }
.hot-tws-nav-btn:hover { background: var(--grey-100); }
.hot-tws-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
.hot-tws-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--grey-400); font-size: 13px; gap: 8px; }
.tws-progress-header { font-size: 11.5px; font-weight: 500; color: var(--grey-600); font-family: var(--font-mono); background: var(--grey-50); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-bottom: 12px; }
.tws-progress-header.error { color: var(--orange); font-style: italic; }
.tws-code { font-size: 11px; color: var(--grey-400); font-family: var(--font-mono); margin-bottom: 2px; }
.tws-title { font-size: 17px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.2px; margin-bottom: 8px; line-height: 1.3; }
.tws-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.tws-pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; letter-spacing: 0.2px; }
.tws-pill-sg0 { background: var(--tag-violet-bg); color: var(--tag-violet-fg); }
.tws-pill-sg1 { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.tws-pill-sg2 { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tws-pill-sg3 { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.tws-pill-sg4 { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.tws-pill-sg5 { background: var(--tag-grape-bg); color: var(--tag-grape-fg); }
.tws-pill-open { background: var(--tag-orange-bg); color: var(--orange); }
.tws-pill-closed { background: var(--grey-100); color: var(--grey-500); }
.tws-desc-block { margin-bottom: 14px; }
.tws-desc { font-size: 13px; line-height: 1.65; color: var(--grey-700); margin-bottom: 6px; }
.tws-done-line { font-size: 12px; color: var(--grey-600); background: var(--grey-50); border-left: 3px solid var(--green); padding: 5px 10px; border-radius: 0 4px 4px 0; }
.tws-done-label { font-weight: 600; color: var(--green); }
.tws-sec { margin-bottom: 18px; }
.tws-sec-h { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--grey-400); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tws-sec-h-ct { background: var(--grey-100); color: var(--grey-500); padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.tws-vrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; background: var(--grey-50); border-radius: 5px; margin-bottom: 4px; position: relative; max-width: 540px; }
.tws-vrow:hover { background: var(--grey-100); }
/* Project Values view (flat list of every value the project has on file) */
.tws-vv-head { font-size: 15px; font-weight: 700; color: var(--text-strong); margin: 2px 0 4px; }
.tws-vv-sub { font-size: 11.5px; line-height: 1.5; margin-bottom: 14px; max-width: 540px; }
.tws-vv-group { margin-bottom: 16px; }
.tws-vv-gh { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--grey-500); padding: 4px 2px 7px; border-bottom: 1px solid var(--line); margin-bottom: 7px; }
.tws-vname { font-size: 12.5px; font-weight: 500; color: var(--grey-900); display: flex; align-items: center; gap: 5px; }
/* VAR key spans — always in the DOM, hidden by default; html.var-keys-on reveals them live */
.tws-vkey { font: 600 9px ui-monospace,monospace; color: var(--accent); opacity: .7; display: none; }
html.var-keys-on .tws-vkey { display: inline; }
/* generic admin-only raw-id block (same reveal mechanism, block-level rows: engagement ids etc.) */
.admin-key { display: none; }
html.var-keys-on .admin-key { display: block; }
.tws-vreq { font-size: 11px; line-height: 1; flex-shrink: 0; }
.tws-vreq.empty { color: var(--orange); }
.tws-vreq.filled { color: var(--grey-300); }
.tws-vreq.none { color: transparent; }
.tws-vdate { font-family: var(--font-sans); font-size: 10px; font-weight: 500; color: var(--grey-400); margin-right: 7px; }
.tws-vdate.stale { color: var(--orange); }
.tws-vpass { font-size: 11px; color: var(--grey-400); margin-top: 1px; }
.tws-vval { font-size: 12px; color: var(--grey-700); font-family: var(--font-mono); text-align: right; align-self: center; }
.tws-vval.empty { color: var(--blue); font-weight: 600; font-family: var(--font-sans); }
.tws-deliv-card { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 7px; padding: 12px 14px; margin-bottom: 10px; }
.tws-deliv-prov { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; margin-bottom: 8px; }
.tws-deliv-prov.none { background: var(--grey-100); color: var(--grey-500); }
.tws-deliv-custody-note { font-size: 11px; color: var(--grey-400); font-style: italic; border-top: 1px dashed var(--grey-200); padding-top: 6px; margin-top: 8px; }
.tws-btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tws-btn { font-size: 12px; font-family: var(--font-sans); font-weight: 500; padding: 5px 10px; border-radius: 5px; cursor: pointer; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); transition: background 0.12s; }
.tws-btn:hover { background: var(--grey-100); }
.tws-btn.orc { background: var(--purple); color: #fff; border-color: var(--purple); }
.tws-btn.orc:hover { background: #6530c8; }
.tws-notes { width: 100%; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: var(--grey-700); border: 1px solid var(--grey-200); border-radius: 5px; padding: 8px 10px; resize: vertical; min-height: 72px; background: var(--grey-50); }
.tws-notes:focus { outline: none; border-color: var(--orange); background: var(--surface); }
.tws-no-values { font-size: 12px; color: var(--grey-400); font-style: italic; }
.hi-sec { margin-bottom: 14px; }
.hi-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--grey-400); margin-bottom: 7px; }
.hi-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--grey-100); gap: 8px; }
.hi-row:last-child { border-bottom: none; }
.hi-k { color: var(--grey-500); font-size: 11.5px; flex-shrink: 0; }
.hi-v { color: var(--grey-900); font-weight: 500; font-size: 11.5px; text-align: right; }
.hi-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--grey-200); color: var(--grey-700); cursor: pointer; margin: 2px 2px 2px 0; }
.hi-chip:hover { background: var(--grey-300); }
.hi-chip .nm { font-size: 10px; opacity: 0.7; }
.hi-chips { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.hi-empty { color: var(--grey-400); font-size: 11.5px; font-style: italic; }
.hi-action-btn { width: 100%; text-align: left; font-family: var(--font-sans); font-size: 12px; font-weight: 500; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--grey-200); background: var(--surface); cursor: pointer; color: var(--grey-700); margin-bottom: 5px; transition: background 0.12s; display: flex; align-items: center; gap: 6px; }
.hi-action-btn:hover { background: var(--grey-100); }
.hi-action-btn.primary { background: var(--green); color: #fff; border-color: var(--green); }
.hi-action-btn.primary:hover { background: #189a5e; }
.hi-footer { font-size: 10.5px; color: var(--grey-400); text-align: center; margin-top: 4px; font-style: italic; }

/* ── Cockpit returns bar (frozen above the two work columns) ─────────────── */
/* HOT-01 — Returns moves from a sticky side column to a top bar that spans full width.
   The bar is sticky so it stays in view while the editors / gate below scroll. */
.cockpit-report-bar { margin-bottom: 16px; position: sticky; top: 0; z-index: 8; }
.rt-bar { padding: 10px 14px; }
.rt-bar-inner { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.rt-bar-tiles { display: flex; gap: 6px; flex-wrap: wrap; }
.rt-bar-tile {
  padding: 8px 12px; min-width: 84px;
  background: var(--grey-50); border: 1px solid var(--line); border-radius: 8px;
}
.rt-bar-tile.rt-bar-hero { min-width: 110px; }
.rt-bar-tile-k {
  font-size: 10px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .4px; white-space: nowrap;
}
.rt-bar-tile-v {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-strong); line-height: 1.12; margin-top: 3px;
}
.rt-bar-tile.rt-bar-hero .rt-bar-tile-v { font-size: 26px; }
.rt-bar-tile-v .rt-sub {
  display: block; font-size: 10px; font-weight: 500;
  color: var(--dim); margin-top: 2px; font-variant-numeric: normal;
}
.rt-bar-tile.is-pos { background: var(--sev-positive-tint); border-color: var(--sev-positive); }
.rt-bar-tile.is-pos .rt-bar-tile-v { color: var(--sev-positive); }
.rt-bar-tile.is-warn { background: var(--sev-high-tint); border-color: var(--sev-high); }
.rt-bar-tile.is-warn .rt-bar-tile-v { color: var(--sev-high); }
.rt-bar-tile.is-neg { background: var(--sev-deal-killer-tint); border-color: var(--sev-deal-killer); }
.rt-bar-tile.is-neg .rt-bar-tile-v { color: var(--sev-deal-killer); }
.rt-bar-sentence {
  font-size: 12px; line-height: 1.5; color: var(--grey-700);
  flex: 1; min-width: 200px; align-self: center;
  background: var(--accent-tint); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 8px 10px;
}
.rt-bar-sentence.rt-sentence-verify { background: var(--sev-high-tint); border-left-color: var(--sev-high); color: var(--text-strong); }

/* ── Workspace grid (Hot cockpit — 2 equal columns below the returns bar) ── */
.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .workspace { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 16px; }

/* ── Cards (cockpit — preserved) ─────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card > h2 { margin: 0; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--dim);
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--grey-50);
  display: flex; align-items: center; gap: 8px; }
.card > h2 .note { margin-left: auto; font-size: 11px; text-transform: none; letter-spacing: 0; }
.card > .body { padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; }

/* ── Field rows (Hot editors — preserved) ────────────────── */
.secttl { font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 2px; }
.fld { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--grey-100); }
.fld:last-child { border-bottom: 0; }
.fld label { font-size: 12.5px; color: var(--grey-700); }
.fld .unit { color: var(--dim); font-size: 11px; }
.fld input[type=number], .fld input[type=text] { width: 120px; text-align: right; }
.fld .rng { grid-column: 1/3; display: flex; align-items: center; gap: 8px; }
.fld .rng input[type=range] { flex: 1; accent-color: var(--blue); }
.fld .val { font-variant-numeric: tabular-nums; color: var(--blue); font-size: 12px; min-width: 70px; text-align: right; font-weight: 600; }
.lock { color: var(--dim); font-size: 10.5px; font-weight: 500; }

/* ── HOT-04: scenario frame bar (toggles hoisted above the workspace) ───────── */
.scenario-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 14px; margin-bottom: 16px; }
.scenario-bar .sb-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--dim); }
.scenario-bar .tg-item { display: flex; align-items: center; gap: 7px; }
.scenario-bar .tg-item label { font-size: 11.5px; color: var(--grey-700); white-space: nowrap; }
.scenario-bar .tg-item select { font-size: 12px; padding: 2px 4px; }

/* ── HOT-05: editor density (Expanded / Compact) + section accordion ── */
.editor-toolbar { display: flex; justify-content: flex-end; padding: 9px 14px 0; }
.editor-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.editor-modes .seg { font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  padding: 3px 10px; background: var(--surface); border: 0; border-left: 1px solid var(--line); color: var(--dim); cursor: pointer; }
.editor-modes .seg:first-child { border-left: 0; }
.editor-modes .seg.on { background: var(--navy); color: #fff; }
/* HOT-10 — the same segmented toggle on the (narrow) SOP Navigator: split the column full-width */
.hot-nav-modes { display: flex; }
.hot-nav-modes .seg { flex: 1; text-align: center; padding: 4px 6px; }
.secttl { display: flex; align-items: center; gap: 5px; }
.secttl.clickable { cursor: pointer; user-select: none; }
.secttl .caret { color: var(--dim); font-size: 9px; width: 10px; display: inline-block; }
.secttl .sec-count { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--dim); }

/* ── HOT-07: inline-SVG icons (replace OS emoji) ───────────────────────────── */
.icn { flex: none; vertical-align: -0.15em; }
.ico { display: inline-flex; align-items: center; vertical-align: -0.15em; }
.lock { display: inline-flex; align-items: center; gap: 3px; }
.t2-item { display: inline-flex; align-items: center; gap: 6px; }

/* ── HOT-08: pending (source-unset) fields — muted, never read as a real 0 ──── */
.fld-pending label { color: var(--dim); display: inline-flex; align-items: center; gap: 5px; }
.fld-pending .icn { color: var(--dim); }
.pending-pill { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: var(--dim);
  background: var(--grey-50); border: 1px dashed var(--line); border-radius: 5px; padding: 2px 8px; }

/* ── Report: returns readout (HOT-02 — headline trio + supporting row) ───────── */
.returns-block { display: flex; flex-direction: column; gap: 12px; }
.rt-headline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-tile { background: var(--grey-50); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.rt-tile.rt-hero { grid-column: 1 / 3; }
.rt-tile .k { font-size: 11px; color: var(--dim); }
.rt-tile .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--text-strong); line-height: 1.12; }
.rt-tile.rt-hero .v { font-size: 34px; }
.rt-tile .v .rt-sub { font-size: 11px; font-weight: 500; color: var(--dim); margin-left: 7px; font-variant-numeric: normal; white-space: nowrap; }
/* severity uses the ring-fenced Okabe-Ito tokens; reserved for sign (NPV) and the
   project's own DSCR target — never a hardcoded IRR hurdle. */
.rt-tile.is-pos  { background: var(--sev-positive-tint);    border-color: var(--sev-positive); }
.rt-tile.is-pos  .v { color: var(--sev-positive); }
.rt-tile.is-warn { background: var(--sev-high-tint);        border-color: var(--sev-high); }
.rt-tile.is-warn .v { color: var(--sev-high); }
.rt-tile.is-neg  { background: var(--sev-deal-killer-tint); border-color: var(--sev-deal-killer); }
.rt-tile.is-neg  .v { color: var(--sev-deal-killer); }
.rt-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rt-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 11px; background: var(--surface); }
.rt-cell .k { font-size: 11px; color: var(--dim); }
.rt-cell .v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong); }

/* ── Returns Run Reveal: count-up, card stagger, IRR-chart clip-sweep (tokens only) ───────── */
.rt-num { font-variant-numeric: tabular-nums; }
.rt-chart { background: var(--grey-50); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px 7px; }
.rt-chart-cap { font-size: 11px; color: var(--dim); margin-bottom: 3px; }
.rt-chart-svg { display: block; }
.rt-chart-verify { font-family: var(--font-mono); font-size: 11.5px; color: var(--sev-high); padding: 7px 2px; }
/* Levered vs unlevered comparison panel: metric | levered | unlevered. Levered = the headline case. */
.rt-compare { background: var(--grey-50); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.rt-compare-cap { font-size: 11px; color: var(--dim); margin-bottom: 7px; }
.rt-compare-grid { display: grid; grid-template-columns: 1fr auto auto; column-gap: 18px; row-gap: 7px; align-items: baseline; }
.rt-compare-h { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-400); text-align: right; }
.rt-compare-h.rt-compare-lev { color: var(--accent-deep); }
.rt-compare-k { font-size: 12px; color: var(--grey-700); }
.rt-compare-v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dim); text-align: right; }
.rt-compare-v.rt-compare-lev { color: var(--text-strong); }
.rt-sentence { font-size: 13px; line-height: 1.5; color: var(--grey-700); background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 9px 12px; }
.rt-sentence-verify { background: var(--sev-high-tint); border-left-color: var(--sev-high); color: var(--text-strong); }
.rt-replay { display: flex; justify-content: flex-end; }
.rt-replay-btn { font-family: var(--font-mono); font-size: 11px; color: var(--accent-deep); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.rt-replay-btn:hover { background: var(--accent-tint); border-color: var(--accent); }
.rt-replay-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Cards hide only once JS arms the reveal (.rt-reveal); reduced-motion / no-JS keeps them visible. */
.rt-reveal .rt-card { opacity: 0; transform: translateY(7px); }
.rt-reveal .rt-card.is-in { opacity: 1; transform: none; transition: opacity .34s ease, transform .34s ease; }
@media (prefers-reduced-motion: reduce) {
  .rt-reveal .rt-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Action: gate readiness (preserved) ──────────────────── */
.greq { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--grey-100); font-size: 13px; }
.greq:first-child { border-top: 0; }
.greq .mk { width: 16px; flex: 0 0 16px; text-align: center; font-weight: 700; }
.greq.met .mk { color: var(--green); } .greq.unmet .mk { color: var(--red); } .greq.evidence .mk { color: #B8860B; }
.greq.pending .mk { color: var(--grey-500); }   /* fix_gate: model-bound metric not yet computable - neutral, not a red FAIL */
.greq.model { background: rgba(45,127,249,.06); border: 1px solid rgba(45,127,249,.3); border-radius: 7px; padding: 8px; }
.greq .lbl { flex: 1; color: var(--grey-700); }
.greq .cur { color: var(--dim); font-size: 12px; margin-top: 2px; }
.gate-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 4px 2px 14px; border-bottom: 1px solid var(--grey-100); margin-bottom: 10px; }
.gs-count { font-size: 30px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gs-label { font-size: 12.5px; color: var(--grey-700); }
.gs-bar { grid-column: 1/3; height: 8px; background: var(--grey-100); border-radius: 999px; overflow: hidden; border: 1px solid var(--grey-200); }
.gs-bar > i { display: block; height: 100%; transition: width .3s; }
.gs-pct { font-size: 13px; font-weight: 700; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.gate-pass { background: rgba(31,171,106,.08); border: 1px solid rgba(31,171,106,.35); border-radius: 9px;
  padding: 12px 14px; margin-bottom: 12px; font-size: 13px; color: #157a4c; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-advance { margin-left: auto; background: var(--green); border: none; color: #fff; font-weight: 700; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.btn-advance:disabled { background: #8fceb3; opacity: .8; cursor: default; }
.gate-domain { margin-top: 10px; }
.gd-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin-bottom: 2px; }
.btn-mark { margin-left: auto; align-self: center; background: var(--surface); border: 1px solid var(--grey-300); color: var(--grey-700);
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.btn-mark:hover { border-color: var(--blue); color: var(--blue); }

/* ── Stub (content surfaces not yet wired) ───────────────── */
.stub { max-width: 720px; }
.stub .badge2 { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--orange); background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.25);
  border-radius: 5px; padding: 2px 8px; margin-bottom: 10px; }
.stub .row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-100); font-size: 13px; }
.stub .row .key { width: 150px; flex-shrink: 0; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; }
.muted { color: var(--dim); font-size: 12px; }

/* ── Access gate (preserved) ─────────────────────────────── */
.auth-overlay { position: fixed; inset: 0; z-index: var(--z-gate); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #1B2A52, var(--navy)); }
.auth-overlay.hidden { display: none; }
.auth-card { background: var(--surface); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.4); padding: 30px 32px;
  width: 360px; max-width: 90vw; text-align: center; }
.auth-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; color: var(--text-strong); margin-bottom: 14px; }
.auth-logo .mark { width: auto; height: 32px; color: var(--text-strong); flex-shrink: 0; }
.auth-title { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.auth-sub { font-size: 12.5px; color: var(--dim); margin: 6px 0 18px; }
.auth-card input { width: 100%; text-align: center; font-size: 15px; padding: 10px; margin-bottom: 10px; }
.auth-card button { width: 100%; padding: 10px; font-size: 14px; }
.auth-err { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 8px; }
.auth-foot { color: var(--grey-300); font-size: 11px; margin-top: 16px; }

/* ── Field-edit modal BODY (the dialog shell is shell/modal.js openModal since the migration;
      the old hand-rolled .pit-modal-overlay/.pit-modal/.pit-modal-head* shells were removed
      2026-07-09 - zero emitters; U-DEAD-05) ──────────────────── */
.pit-modal-body { padding: 16px 18px; }
/* Field-edit modal Option B: 50/50 two-column body — entry form left, full-height reference/guardrail rail right. */
.pit-edit-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.pit-edit-main { min-width: 0; box-sizing: border-box; }
.pit-edit-rail-col { min-width: 0; box-sizing: border-box; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 8px; padding: 12px 14px; }
@media (max-width: 640px) { .pit-edit-split { grid-template-columns: 1fr; } }
.pit-edit-label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--grey-400); margin-bottom: 4px; margin-top: 12px; }
.pit-edit-label:first-child { margin-top: 0; }
.pit-edit-current { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 6px; padding: 8px 10px; font-size: 13px; color: var(--grey-700); }
.pit-edit-input { width: 100%; font-family: var(--font-sans); font-size: 13px; padding: 8px 10px; border: 1px solid var(--grey-300); border-radius: 6px; color: var(--grey-800); outline: none; box-sizing: border-box; }
.pit-edit-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,0.10); }
.pit-conf-picker { display: flex; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.pit-conf-btn { padding: 5px 12px; border-radius: 5px; border: 2px solid transparent; background: var(--surface); font-family: var(--font-sans); font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.pit-conf-btn.high { border-color: var(--green); color: var(--green); }
.pit-conf-btn.high:hover, .pit-conf-btn.high.active { background: rgba(31,171,106,0.12); }
.pit-conf-btn.med { border-color: #d97706; color: #b45309; }
.pit-conf-btn.med:hover, .pit-conf-btn.med.active { background: rgba(240,168,40,0.14); }
.pit-conf-btn.low { border-color: var(--red); color: var(--red); }
.pit-conf-btn.low:hover, .pit-conf-btn.low.active { background: rgba(220,64,64,0.10); }
.pit-conf-btn.review { border-color: var(--purple); color: var(--purple); }
.pit-conf-btn.review:hover, .pit-conf-btn.review.active { background: rgba(124,58,237,0.10); }
.pit-source-drop { border: 2px dashed var(--grey-300); border-radius: 7px; padding: 14px; text-align: center; font-size: 12px; color: var(--grey-400); background: var(--grey-50); cursor: pointer; }
.pit-source-drop:hover { border-color: var(--teal); color: var(--teal); }
/* Real captured-source provenance link (T9). Local-only operator chrome: the @media print rule keeps
   the filed source path out of any client export, on top of the export-root print isolation. */
.pit-src-wrap:empty { display: none; }
.pit-src-real { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--blue);
  text-decoration: none; padding: 6px 0; word-break: break-all; }
.pit-src-real:hover { text-decoration: underline; }
@media print { .pit-src-real, .pit-src-wrap { display: none !important; } }
.pit-notes { width: 100%; font-family: var(--font-sans); font-size: 12px; padding: 8px 10px; border: 1px solid var(--grey-300); border-radius: 6px; color: var(--grey-800); resize: vertical; min-height: 60px; outline: none; box-sizing: border-box; }
.pit-notes:focus { border-color: var(--teal); }
.pit-audit-trail { margin-top: 2px; }
.pit-audit-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--grey-100); font-size: 11px; color: var(--grey-500); }
.pit-audit-row:last-child { border-bottom: none; }
.pit-audit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-300); margin-top: 3px; flex-shrink: 0; }
.pit-audit-who { font-weight: 600; color: var(--grey-700); }
.pit-audit-change { color: var(--grey-400); font-family: var(--font-mono); font-size: 10px; }
.pit-modal-foot { padding: 12px 18px; border-top: 1px solid var(--grey-100); display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; background: var(--surface); }
.pit-modal-btn-cancel { padding: 7px 14px; border-radius: 6px; border: 1px solid var(--grey-300); background: var(--surface); font-family: inherit; font-size: 12px; cursor: pointer; color: var(--grey-700); }
.pit-modal-btn-save { padding: 7px 16px; border-radius: 6px; border: none; background: var(--teal); color: #fff; font-family: inherit; font-size: 12px; cursor: pointer; font-weight: 700; }
.pit-modal-btn-save:hover { background: #0d9c87; }
/* entered-draft value chip in the Hot TWS + the reset affordance */
.tws-vval.entered { color: var(--green); font-family: var(--font-mono); font-weight: 600; }
.tws-draft-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--orange); background: rgba(249,115,22,.10); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.tws-draft-tag.saved { color: var(--green); background: rgba(34,197,94,.10); }
.tws-draft-tag.stored { color: var(--grey-500); background: var(--grey-100); }   /* value from the stored PIT, not a session draft */

.hot-draft-reset { font-size: 10px; color: var(--orange); cursor: pointer; }
.hot-draft-reset:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --rail-w: 56px; }            /* narrow rail on phones; panel offsets follow the var */
  .chara-block { width: 100%; height: 40px; gap: 0; padding-bottom: 4px; }
  .cb-letter { font-size: 14px; }
  .cb-label { display: none; }         /* no room for captions at 56px */
  .leftnav-footer { display: none; }
  .topnav { padding: 0 14px; gap: 12px; }
  .topnav-search { display: none; }
  .topnav-action { padding: 6px 8px; font-size: 12px; }
  .topnav2 { overflow-x: auto; }
  .layer-panel, .layer-panel.hot-expanded { width: 92vw; }
  .project-grid { grid-template-columns: 1fr; }
}

/* ── Project Dashboard (ported from V18 renderDashboard) ─────
   `.card` is already taken by the cockpit, so dashboard panels use `.dash-card*`. */
.dash-hero { background: var(--surface); border-radius: 12px; padding: 24px 28px; border: 1px solid var(--grey-200); margin-bottom: 20px; }
.dash-hero-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.dash-hero-title { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.dash-hero h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-strong); }
.dash-hero-loc { font-size: 14px; color: var(--grey-500); margin-bottom: 14px; }
.dash-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.dash-hero-stat .label { font-size: 11px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.dash-hero-stat .value { font-size: 18px; font-weight: 600; color: var(--grey-900); margin-top: 2px; }
.dash-hero-stat .value.mono { font-family: var(--font-mono); }
.dash-hero-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }

/* SG0→SG5 stepper */
.sg-stepper { background: var(--surface); border-radius: 12px; padding: 20px 28px; border: 1px solid var(--grey-200); margin-bottom: 20px; }
.sg-stepper-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; }
.sg-stepper-top h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.sg-stepper-top .overall { font-size: 13px; color: var(--grey-500); }
.sg-stepper-track { display: flex; gap: 12px; }
.sg-step { flex: 1; }
.sg-step-bar { height: 8px; background: var(--grey-100); border-radius: 4px; position: relative; overflow: hidden; }
.sg-step-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.sg-step.done .sg-step-fill { width: 100%; background: var(--green); }
.sg-step.active .sg-step-fill { background: var(--yellow); }
.sg-step.future .sg-step-bar { background: var(--grey-100); }
.sg-step-label { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--grey-700); gap: 6px; }
.sg-step-label .sg-name { font-weight: 600; }
.sg-step-label .sg-pct { color: var(--grey-500); }
.sg-step.active .sg-step-label .sg-pct { color: #B8860B; font-weight: 600; }

/* main grid */
.dash-main { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
@media (max-width: 1000px) { .dash-main { grid-template-columns: 1fr; } }

/* dashboard cards (namespaced) */
.dash-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.dash-card-header { padding: 14px 20px; border-bottom: 1px solid var(--grey-100); display: flex; justify-content: space-between; align-items: center; }
.dash-card-header h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--grey-900); }
.dash-card-action { font-size: 12px; color: var(--blue); cursor: pointer; font-weight: 500; }
.dash-card-body { padding: 14px 20px; }
.dash-card-body.tight { padding: 0; }
.ix { color: var(--grey-500); font-weight: 400; }
.dash-illus { font-size: 11px; font-style: italic; color: var(--grey-400); }

/* attention items */
.attention-item { padding: 12px 20px; border-bottom: 1px solid var(--grey-100); cursor: default; transition: background 0.15s; display: flex; gap: 12px; align-items: start; }
.attention-item[data-gate] { cursor: pointer; }
.attention-item:hover { background: var(--grey-50); }
.attention-item:last-child { border-bottom: none; }
.attention-icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.attention-icon.urgent { background: rgba(220, 64, 64, 0.12); color: var(--red); }
.attention-icon.warn { background: rgba(240, 168, 40, 0.12); color: #B8860B; }
.attention-icon.info { background: rgba(45, 127, 249, 0.12); color: var(--blue); }
.attention-icon.dash-ok { background: rgba(31, 171, 106, 0.12); color: var(--green); }
.attention-text { flex: 1; min-width: 0; }
.attention-title { font-weight: 500; color: var(--grey-900); font-size: 14px; }
.attention-meta { font-size: 12px; color: var(--grey-500); margin-top: 2px; }
.attention-meta .due-soon { color: var(--red); font-weight: 500; }
.dash-model-tag { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px; background: rgba(45,127,249,.1); color: var(--blue); }

/* activity timeline */
.activity { padding: 10px 20px; }
.activity-item { padding: 10px 0; display: flex; gap: 10px; border-bottom: 1px solid var(--grey-100); }
.activity-item:last-child { border-bottom: none; }
.activity-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; }
.activity-text { flex: 1; min-width: 0; font-size: 13px; }
.activity-text .who { font-weight: 600; }
.activity-text .action { color: var(--grey-700); }
.activity-text .value { color: var(--grey-900); font-weight: 500; }
.activity-time { font-size: 11px; color: var(--grey-500); margin-top: 2px; }

/* metric widgets */
.metric-widget { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.metric-widget-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.metric-widget-top h4 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--grey-900); }
.metric-widget-top .domain-tag { font-size: 11px; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.metric-widget-top .domain-tag.engineering { background: rgba(124, 58, 237, 0.1); color: var(--purple); }
.metric-widget-top .domain-tag.finance { background: rgba(249, 115, 22, 0.1); color: var(--orange); }
.metric-widget-top .domain-tag.commercial { background: rgba(240, 168, 40, 0.1); color: #B8860B; }
.metric-widget-top .domain-tag.site { background: rgba(31, 171, 106, 0.1); color: var(--green); }
.metric-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grey-100); }
.metric-row:last-child { border-bottom: none; }
.metric-row .label { font-size: 13px; color: var(--grey-700); }
.metric-row .value { font-size: 14px; font-weight: 600; color: var(--grey-900); }
.metric-row .value.mono { font-family: var(--font-mono); font-size: 13px; }
.metric-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.ms-active { background: rgba(31, 171, 106, 0.12); color: var(--green); }
.ms-pending { background: rgba(240, 168, 40, 0.12); color: #B8860B; }
.ms-future { background: var(--grey-100); color: var(--grey-700); }
.dash-widget-cap { font-size: 10px; color: var(--grey-400); margin-top: 8px; font-style: italic; }
.metric-widget-top .domain-tag.report { background: rgba(31, 171, 106, 0.1); color: var(--green); }
.metric-widget-top .domain-tag.demo { background: var(--grey-100); color: var(--grey-500); }

/* ── Operating overlay: inline-SVG charts + Operations panel ─────────────────── */
.suio-chart { overflow: visible; }
.suio-chart-legend { display: flex; gap: 16px; font-size: 11px; color: var(--grey-600); margin: 2px 0 2px; }
.suio-chart-legend .lg-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.suio-chart-legend .lg-sw.lg-tick { width: 14px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--navy); vertical-align: 3px; background: none; }
.ops-chart-block { margin: 6px 0 16px; }
.ops-chart-block:last-child { margin-bottom: 2px; }
.ops-chart-title { font-size: 12px; font-weight: 600; color: var(--grey-700); margin-bottom: 6px; }

/* document shelf */
.doc-shelf { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.doc-shelf-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.doc-shelf-top h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.doc-card { border: 1px solid var(--grey-200); border-radius: 8px; padding: 12px; cursor: pointer; transition: background var(--motion-1) var(--ease-out), color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out), box-shadow var(--motion-1) var(--ease-out), transform var(--motion-1) var(--ease-out); }
.doc-card:hover { border-color: var(--blue); }
.doc-card-icon { width: 32px; height: 32px; border-radius: 6px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.doc-card-icon.pdf { background: var(--red); }
.doc-card-icon.xlsx { background: var(--green); }
.doc-card-icon.docx { background: var(--blue); }
.doc-card-icon.misc { background: var(--grey-500); }
.doc-card-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; line-height: 1.3; }
.doc-card-meta { font-size: 10px; color: var(--grey-500); }

/* Instantiation panel — ACT-INSTANTIATE-DOC: dry-run resolve → fill the gaps → export the draft */
/* (inst overlay / modal / head / title / sub / x shells removed 2026-07-09 - the
   instantiation panel mounts on shell/modal.js openModal (see instantiate.js:17);
   the live body classes continue below; U-DEAD-05) */

.inst-meter { padding: 12px 20px; border-bottom: 1px solid var(--grey-100); background: var(--grey-50); }
.inst-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.inst-meter-count { font-size: 13px; color: var(--grey-700); }
.inst-meter-count b { color: var(--text-strong); font-size: 15px; }
.inst-meter-bd { font-size: 11px; color: var(--grey-500); }
.inst-meter-bar { height: 7px; border-radius: 999px; background: var(--grey-200); overflow: hidden; }
.inst-meter-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .2s ease; }
.inst-meter-fill.done { background: var(--green); }

.inst-body { flex: 1 1 auto; padding: 6px 20px 14px; overflow-y: auto; }
.inst-group { margin-top: 16px; }
.inst-group-h { display: flex; align-items: baseline; gap: 8px; }
.inst-group-t { font-size: 12px; font-weight: 700; color: var(--text-strong); text-transform: uppercase; letter-spacing: .04em; }
.inst-group-c { font-size: 11px; color: var(--grey-400); }
.inst-group-d { font-size: 11px; color: var(--grey-500); margin: 2px 0 8px; }

.inst-field { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: center; padding: 4px 0; }
.inst-field-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.inst-field-name { font-size: 12.5px; color: var(--grey-800); font-weight: 500; }
.inst-field-hint { font-size: 10.5px; color: var(--grey-400); }
.inst-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--grey-200); border-radius: 6px; color: var(--grey-800); background: var(--surface); outline: none; }
.inst-input:focus { border-color: var(--teal); }
.inst-field.resolved .inst-field-v { font-size: 13px; color: var(--grey-900); font-weight: 600;
  background: rgba(31,171,106,.07); border: 1px solid rgba(31,171,106,.2); border-radius: 6px; padding: 6px 10px; }

.inst-chip { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; margin-left: 7px; vertical-align: middle; }
.inst-chip.pit { color: var(--blue); background: rgba(45,127,249,.12); }
.inst-chip.proj { color: var(--green); background: rgba(31,171,106,.12); }
.inst-chip.derived { color: #8a6d12; background: rgba(240,168,40,.16); }

.inst-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px; border-top: 1px solid var(--grey-100); }
.inst-note { flex: 1; min-width: 200px; font-size: 11px; color: var(--grey-500); line-height: 1.4; }
.inst-export { flex-shrink: 0; background: var(--accent); color: var(--on-accent-ink, #fff); border: 1px solid var(--accent);
  border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.inst-export:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.inst-export:disabled { opacity: .6; cursor: wait; }
.inst-err { flex-basis: 100%; order: -1; font-size: 11.5px; color: var(--red); font-weight: 500; }

/* Instantiation panel — project-picker bar + loading state (shared component, opened from Cold) */
.inst-projbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 20px; border-bottom: 1px solid var(--grey-100); }
.inst-projbar-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-500); }
.inst-proj { font-size: 13px; padding: 5px 9px; border: 1px solid var(--grey-200); border-radius: 6px; background: var(--surface); color: var(--grey-800); font-family: inherit; }
.inst-proj:focus { border-color: var(--teal); outline: none; }
.inst-projbar-hint { font-size: 11px; color: var(--grey-400); }
.inst-loading { padding: 44px 24px; text-align: center; color: var(--grey-500); font-size: 13px; }
.inst-loading.err { color: var(--red); }

/* Counterparty directory picker (autofills the external party's fields; SAMPLE-badged) */
.inst-cp-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; padding: 8px 10px; background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: 7px; }
.inst-cp-pick-l { font-size: 11.5px; color: var(--grey-600); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.inst-sample { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.4px; color: #B8860B; background: rgba(240,168,40,0.16); padding: 1px 5px; border-radius: 3px; font-weight: 700; }
.inst-cp-select { flex: 1; min-width: 220px; padding: 6px 9px; border: 1px solid var(--grey-200); border-radius: 6px; font-family: inherit; font-size: 12.5px; color: var(--grey-800); background: var(--surface); cursor: pointer; }
.inst-cp-select:focus { border-color: var(--teal); outline: none; }

/* Cold → Legal → Templates — the real, instantiable rows */
.cold-live { color: var(--green); font-weight: 600; }
.lp-row.is-real:hover { background: var(--accent-tint); }
.lp-row-use { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint);
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px; }

/* ── VDR-Sorter wizard + path-selector modal (ported from V18) ───────────────── */
/* + New Project CTA in the navy topnav */
.topnav-cta { background: rgba(31,171,106,.18); border: 1px solid rgba(31,171,106,.45); font-weight: 600; }
.topnav-cta:hover { background: rgba(31,171,106,.28); }

/* honest demo banner (every wizard stage carries it) */
.wiz-demo-banner { background: rgba(249,115,22,.10); border: 1px solid rgba(249,115,22,.30); color: #9a4a13;
  padding: 8px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 18px; font-family: var(--font-mono); }
.wiz-demo-banner b { color: #7a3a10; }

/* path-selector cards (render inside the shell/modal.js dialog) */
.path-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.path-card { border: 1px solid var(--grey-200); border-radius: 10px; padding: 20px; cursor: pointer; transition: background var(--motion-1) var(--ease-out), color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out), box-shadow var(--motion-1) var(--ease-out), transform var(--motion-1) var(--ease-out); display: flex; flex-direction: column; gap: 8px; text-align: left; font-family: inherit; background: var(--surface); }
.path-card:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgba(45,127,249,0.08); transform: translateY(-1px); }
.path-card .icon { font-size: 28px; }
.path-card .name { font-weight: 600; font-size: 15px; color: var(--grey-900); }
.path-card .desc { font-size: 11px; color: var(--grey-500); line-height: 1.5; }
.path-card .stub-tag { margin-top: auto; display: inline-block; align-self: flex-start; padding: 2px 7px; border-radius: 4px; background: var(--grey-100); color: var(--grey-700); font-size: 9px; font-family: var(--font-mono); }
.path-card.recommended { border-color: var(--blue); background: rgba(45,127,249,0.03); }

/* wizard page + stage bar */
.wizard-page { max-width: 1200px; margin: 0 auto; padding: 28px 32px; }
.wizard-stages { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.wiz-stage { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.wiz-stage-num { width: 28px; height: 28px; border-radius: 50%; background: var(--grey-100); color: var(--grey-500); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.wiz-stage.active .wiz-stage-num { background: var(--navy); color: #fff; }
.wiz-stage.done .wiz-stage-num { background: var(--green); color: #fff; }
.wiz-stage-label { font-size: 12px; color: var(--grey-500); font-weight: 500; }
.wiz-stage.active .wiz-stage-label, .wiz-stage.done .wiz-stage-label { color: var(--grey-900); }
.wiz-stage-bar { flex: 1; height: 2px; background: var(--grey-200); }
.wiz-stage.done + .wiz-stage .wiz-stage-bar, .wiz-stage.active .wiz-stage-bar { background: var(--green); }
.wiz-stage:last-child .wiz-stage-bar { display: none; }
.wiz-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; margin: 0 0 6px; color: var(--text-strong); }
.wiz-sub { color: var(--grey-500); font-size: 14px; margin-bottom: 24px; }
.wiz-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 24px; margin-bottom: 16px; }

/* stage 1 — drop zone + metadata */
.drop-zone { border: 2px dashed var(--grey-300); border-radius: 12px; padding: 56px; text-align: center; background: var(--grey-50); cursor: pointer; transition: background var(--motion-1) var(--ease-out), color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out), box-shadow var(--motion-1) var(--ease-out), transform var(--motion-1) var(--ease-out); }
.drop-zone:hover { border-color: var(--blue); background: rgba(45,127,249,0.04); }
.drop-zone .icon { font-size: 36px; margin-bottom: 12px; opacity: 0.7; }
.drop-zone .label { font-size: 16px; font-weight: 500; color: var(--grey-900); margin-bottom: 6px; }
.drop-zone .hint { font-size: 12px; color: var(--grey-500); }
.drop-zone .source-tag { display: inline-block; margin-top: 14px; padding: 4px 10px; background: rgba(45,127,249,0.10); color: var(--blue); border-radius: 5px; font-size: 11px; font-family: var(--font-mono); }
.meta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 20px; }
.meta-form .form-row { display: flex; flex-direction: column; gap: 4px; }
.meta-form label { font-size: 11px; color: var(--grey-500); font-family: var(--font-mono); letter-spacing: 0.4px; text-transform: uppercase; }
.meta-form input, .meta-form select { padding: 8px 12px; border: 1px solid var(--grey-200); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--grey-900); background: var(--surface); }
.meta-form input:focus, .meta-form select:focus { outline: none; border-color: var(--blue); }

/* stage 2 — classification stream */
.clf-progress { height: 6px; background: var(--grey-100); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.clf-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--teal)); border-radius: 3px; transition: width 0.3s; }
/* live progress bar (driven by N-of-total) + the spinning CHARA mark that signals active work */
.clf-prog { height: 7px; background: var(--grey-100); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.clf-prog-fill { height: 100%; background: var(--blue); border-radius: 4px; transition: width 0.4s ease; }
.clf-prog-fill.done { background: var(--green); }
.clf-prog.indet .clf-prog-fill { width: 35% !important; animation: clf-indet 1.3s ease-in-out infinite; }
@keyframes clf-indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.chara-spin { display: inline-flex; transform-origin: 50% 50%; animation: chara-spin 2s linear infinite; }
@keyframes chara-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chara-spin { animation-duration: 4s; } .clf-prog.indet .clf-prog-fill { animation: none; } .clf-prog-fill { transition: none; } .acc-card-inner { transition: none; } .acc-card-flip.flipped .acc-card-inner { transform: none; } .acc-sw, .acc-sw-knob { transition: none; } .apl-bar-fill { transition: none; } .layer-panel { transition: none; } .copilot-fab { animation: none; } .copilot-thinking span { animation: none; } .snap-live-dot, .save-indicator.saving .save-dot { animation: none; } }
.clf-stats { display: flex; gap: 18px; font-size: 12px; color: var(--grey-500); margin-bottom: 16px; flex-wrap: wrap; }
.clf-stats b { color: var(--grey-900); font-weight: 600; }
.clf-stream { max-height: 360px; overflow-y: auto; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px; font-family: var(--font-mono); font-size: 11px; }
.clf-row { display: grid; grid-template-columns: 1fr 220px 90px; gap: 10px; padding: 6px 10px; border-bottom: 1px solid rgba(0,0,0,0.04); align-items: center; }
.clf-row:last-child { border-bottom: none; }
.clf-row .fname { color: var(--grey-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clf-row .route { color: var(--grey-700); font-size: 10px; }
.clf-conf { text-align: right; padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.3px; }
.clf-conf.high { background: rgba(31,171,106,0.12); color: var(--green); }
.clf-conf.med { background: rgba(240,168,40,0.14); color: #B8860B; }
.clf-conf.low { background: rgba(220,64,64,0.10); color: var(--red); }
.clf-conf.review { background: rgba(124,58,237,0.10); color: var(--purple); }

/* stage 3 — extraction review split */
.review-split { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
.review-doctree { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 8px; max-height: 560px; overflow-y: auto; }
.review-doctree-section { font-size: 11px; font-family: var(--font-mono); color: var(--grey-500); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.review-doctree-row { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.review-doctree-row:hover { background: var(--grey-50); }
.review-doctree-row.selected { background: rgba(45,127,249,0.06); color: var(--blue); font-weight: 500; }
.review-doctree-row .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-fields { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 18px; }
.review-fields-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.rf-doc-name { font-size: 15px; font-weight: 600; color: var(--grey-900); }
.rf-doc-meta { font-size: 11px; color: var(--grey-500); margin-top: 3px; font-family: var(--font-mono); }
.rf-field { display: grid; grid-template-columns: 1.2fr 1.4fr 80px 60px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-100); align-items: center; font-size: 12px; }
.rf-field-name { color: var(--grey-700); font-family: var(--font-mono); font-size: 10px; }
.rf-field-value { color: var(--grey-900); font-weight: 500; font-size: 12px; }

/* stage 4 — approve summary */
.approve-summary { background: linear-gradient(135deg, rgba(31,171,106,0.06), rgba(20,184,166,0.04)); border: 1px solid rgba(31,171,106,0.20); border-radius: 10px; padding: 24px; }
.approve-summary h3 { margin: 0 0 8px; font-size: 17px; color: var(--text-strong); }
.approve-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
.approve-stat { padding: 10px; background: var(--surface); border-radius: 8px; border: 1px solid var(--grey-200); }
.approve-stat .v { font-size: 22px; font-weight: 700; color: var(--text-strong); }
.approve-stat .l { font-size: 10px; color: var(--grey-500); margin-top: 2px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.4px; }

/* wizard footer + buttons */
.wiz-foot { display: flex; justify-content: space-between; margin-top: 20px; }
.wiz-btn { padding: 10px 18px; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); }
.wiz-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.wiz-btn.primary:hover { background: var(--navy-2); }
.wiz-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ap-btn { padding: 5px 12px; border-radius: 5px; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); cursor: pointer; font-size: 11px; font-family: inherit; }
.ap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 1000px) { .review-split { grid-template-columns: 1fr; } .meta-form, .approve-stat-grid { grid-template-columns: 1fr 1fr; } .path-grid { grid-template-columns: 1fr; } }

/* ── Cold reference library: C panel + doc preview (ported from V18) ──────────── */
/* full-bleed inside the padded .lp-body */
.cold-panel { margin: -16px -20px; }
.cold-illus { padding: 10px 20px; font-size: 11px; font-style: italic; color: var(--grey-500); background: var(--grey-50); border-bottom: 1px solid var(--grey-100); }
.layer-panel-controls { padding: 12px 20px; border-bottom: 1px solid var(--grey-100); display: flex; flex-direction: column; gap: 8px; }
.lp-dept-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.lp-dept-label { color: var(--grey-500); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.lp-dept-select { flex: 1; padding: 6px 10px; border: 1px solid var(--grey-200); border-radius: 6px; background: var(--surface); font-family: inherit; font-size: 13px; color: var(--grey-900); cursor: pointer; }
.lp-tabs { display: flex; gap: 4px; padding: 8px 20px 0; border-bottom: 1px solid var(--grey-100); }
.lp-tab { background: transparent; border: none; padding: 8px 12px; font-family: inherit; font-size: 12px; color: var(--grey-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lp-tab.active { color: var(--text-strong); border-bottom-color: var(--teal); font-weight: 600; }
.lp-tab:hover:not(.active) { color: var(--grey-700); }
.lp-list { padding: 8px 0; }
.lp-row { padding: 10px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent; transition: background 0.1s; }
.lp-row:hover { background: var(--grey-50); border-left-color: var(--teal); }
.lp-row-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--grey-100); color: var(--grey-700); display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; }
.lp-row-body { min-width: 0; flex: 1; }
.lp-row-name { font-size: 13px; font-weight: 500; color: var(--grey-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-row-meta { font-size: 11px; color: var(--grey-500); margin-top: 2px; font-family: var(--font-mono); }

/* doc preview (main #content) */
.doc-preview-page { padding: 20px 28px 40px; max-width: 1180px; margin: 0 auto; }
.doc-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.doc-preview-crumb { font-size: 12px; color: var(--grey-500); display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); flex-wrap: wrap; }
.doc-preview-crumb .layer-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: rgba(20,184,166,0.10); color: var(--teal); font-weight: 600; cursor: pointer; }
.doc-preview-crumb .sep { color: var(--grey-300); }
.doc-preview-close { background: var(--surface); border: 1px solid var(--grey-200); padding: 6px 12px 6px 10px; border-radius: 6px; font-family: inherit; font-size: 12px; color: var(--grey-700); cursor: pointer; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.doc-preview-close:hover { border-color: var(--grey-300); background: var(--grey-50); }
.doc-preview-title { font-size: 24px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.3px; margin: 0 0 6px; }
.doc-preview-sub { font-size: 13px; color: var(--grey-500); margin-bottom: 18px; }
.doc-preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.doc-preview-canvas { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; box-shadow: 0 8px 32px rgba(15,27,61,0.06); overflow: hidden; min-height: 540px; display: flex; flex-direction: column; }
.doc-preview-canvas-head { padding: 8px 14px; background: var(--grey-50); border-bottom: 1px solid var(--grey-100); font-size: 11px; font-family: var(--font-mono); color: var(--grey-500); display: flex; align-items: center; justify-content: space-between; }
.doc-preview-canvas-body { padding: 18px; flex: 1; display: flex; align-items: flex-start; justify-content: center; background: var(--grey-50); }
.doc-preview-source-tag { background: rgba(45,127,249,0.10); color: var(--blue); padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; }

/* HTML doc mockup (serif "paper") */
.doc-mockup { background: var(--surface); width: 100%; max-width: 520px; box-shadow: 0 4px 18px rgba(15,27,61,0.12); border: 1px solid var(--grey-200); padding: 40px 44px; font-family: 'Times New Roman', Georgia, serif; color: #222; line-height: 1.5; font-size: 12px; }
.doc-mockup-title { text-align: center; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin: 6px 0 4px; }
.doc-mockup-subtitle { text-align: center; font-size: 11px; color: #666; font-style: italic; margin-bottom: 26px; }
.doc-mockup-meta { font-size: 11px; color: #444; margin-bottom: 18px; }
.doc-mockup-meta-row { margin: 4px 0; }
.doc-mockup-meta-label { display: inline-block; width: 110px; color: #777; }
.doc-mockup-clause-num { font-weight: 700; margin-top: 14px; margin-bottom: 4px; font-size: 11.5px; }
.doc-mockup-clause { margin-bottom: 6px; color: #333; }
.doc-mockup-fill { display: inline-block; min-width: 100px; border-bottom: 1px solid #888; padding: 0 4px; color: #2D7FF9; font-style: italic; }
.doc-mockup-blank { display: inline-block; min-width: 90px; border-bottom: 1px solid #888; }
/* A [TOKEN] that "Use for project" resolves at instantiation — amber, to read as "to fill". */
.doc-mockup-token { display: inline-block; padding: 0 5px; border-radius: 3px; background: rgba(240,168,40,.16); color: #9a6a00; font-style: italic; font-family: var(--font-sans); font-size: 11px; }
.doc-mockup-section-divider { border-top: 1px solid #ddd; margin: 18px 0 16px; }
/* Real-content template preview (components/template_preview.js): a tab in the source text renders as a gap. */
.rt-pv-tab { display: inline-block; width: 2em; }
.doc-mockup-sig { margin-top: 22px; display: flex; gap: 28px; font-size: 11px; }
.doc-mockup-sig-block { flex: 1; }
.doc-mockup-sig-line { border-bottom: 1px solid #444; height: 1px; margin-bottom: 4px; }
.doc-mockup-footer { text-align: center; font-size: 9px; color: #999; margin-top: 24px; padding-top: 10px; border-top: 1px solid #eee; font-family: var(--font-mono); }

/* preview sidebar — Thaw Cycle + actions */
.doc-preview-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.dp-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 16px 18px; }
.dp-card-label { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.6px; color: var(--grey-500); margin-bottom: 8px; }
.dp-thaw-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dp-thaw-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(31,171,106,0.10); color: var(--green); padding: 5px 10px; border-radius: 5px; font-size: 12px; font-family: var(--font-mono); font-weight: 500; }
.dp-thaw-pill.due-soon { background: rgba(240,168,40,0.12); color: #B8860B; }
.dp-thaw-pill.stale { background: rgba(220,64,64,0.10); color: var(--red); }
.dp-thaw-pill .tcb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dp-meta { font-size: 12px; color: var(--grey-700); line-height: 1.7; }
.dp-meta b { color: var(--grey-900); font-weight: 500; }
.dp-meta-key { color: var(--grey-500); display: inline-block; width: 108px; }
.dp-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.dp-btn { padding: 10px 14px; border-radius: 7px; font-family: inherit; font-size: 13px; cursor: pointer; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
.dp-btn:hover { border-color: var(--grey-300); }
.dp-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.dp-btn.primary:hover { background: var(--navy-2); }
.dp-routing { font-size: 11px; color: var(--grey-500); margin-top: 8px; padding: 10px 12px; background: var(--grey-50); border-radius: 6px; line-height: 1.5; }
.dp-routing b { color: var(--grey-700); font-weight: 600; }
@media (max-width: 1000px) { .doc-preview-layout { grid-template-columns: 1fr; } .doc-preview-side { position: static; } }

/* Counterparty & Vendor Directory (ENTITY_DIRECTORY) detail */
.cold-sample { color: #B8860B; font-weight: 700; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.4px; }
.ed-aboutbar { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: 8px; padding: 9px 14px; margin-bottom: 2px; }
.ed-aboutbar-txt { font-size: 12px; color: var(--grey-600); line-height: 1.5; }
.ed-aboutbar-txt b { color: var(--grey-900); }
/* (.ed-tablewrap/.ed-table removed 2026-07-09 - superseded by .l3-table in the COLD rolodex; zero emitters; U-DEAD-05) */
.ed-name { font-weight: 600; color: var(--grey-900); min-width: 150px; }
.ed-sub { display: block; font-weight: 400; font-size: 11px; color: var(--grey-500); margin-top: 1px; }
.ed-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-status { display: inline-block; font-size: 10px; font-family: var(--font-mono); font-weight: 600; padding: 2px 7px; border-radius: 4px; white-space: nowrap; background: var(--grey-100); color: var(--grey-600); }
.ed-status.ok { background: rgba(31,171,106,0.12); color: var(--green); }
.ed-status.warn { background: rgba(240,168,40,0.16); color: #B8860B; }
.ed-status.bad { background: rgba(220,64,64,0.12); color: var(--red); }
.ed-comp { white-space: nowrap; }
.ed-flag { display: inline-block; font-size: 9px; font-family: var(--font-mono); font-weight: 600; padding: 1px 4px; border-radius: 3px; margin-right: 3px; }
.ed-flag.on { background: rgba(31,171,106,0.12); color: var(--green); }
.ed-flag.off { background: var(--grey-100); color: var(--grey-400); text-decoration: line-through; }

/* real delivered-template detail (Cold → Templates, instantiable): honest metadata, not a clause mockup */
.rt-sheet { background: var(--surface); width: 100%; max-width: 580px; border: 1px solid var(--grey-200); border-radius: 8px; padding: 26px 30px; font-family: var(--font-sans); color: var(--grey-800); box-shadow: 0 4px 18px rgba(15,27,61,0.06); }
.rt-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--teal); font-weight: 600; }
.rt-title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 6px 0 4px; letter-spacing: -0.2px; }
.rt-meta { font-size: 12px; color: var(--grey-500); margin-bottom: 14px; }
.rt-desc { font-size: 13px; line-height: 1.6; color: var(--grey-700); margin: 0 0 18px; }
.rt-fields-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--grey-700); border-top: 1px solid var(--grey-100); padding-top: 14px; }
.rt-total { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--grey-500); white-space: nowrap; }
.rt-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.rt-bar { font-size: 12.5px; color: var(--grey-700); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rt-bar b { color: var(--grey-900); font-weight: 600; }
.rt-bar.muted { color: var(--grey-500); }
.rt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rt-dot.proj { background: var(--teal); }
.rt-dot.cp { background: var(--blue); }
.rt-dot.man { background: var(--grey-400); }
.rt-bar-d { color: var(--grey-500); font-size: 11.5px; flex-basis: 100%; padding-left: 14px; line-height: 1.4; }
.rt-note { margin-top: 18px; font-size: 11.5px; color: var(--grey-500); background: var(--grey-50); border-radius: 6px; padding: 9px 12px; line-height: 1.5; }
.rt-note b { color: var(--grey-700); font-weight: 600; }
/* Scrollable document preview shown below the field-summary card (delivered templates). */
.rt-doc-preview { width: 100%; }
.rt-doc-preview-tab { font: 700 10px var(--font-mono); letter-spacing: .6px; text-transform: uppercase; color: var(--grey-400); margin: 4px 0 8px; }

/* ===== Capture Box (Action layer · least-friction PIT ingestion) ===== */
.cap-launcher { position: fixed; left: 10px; bottom: 22px; z-index: var(--z-dropdown); width: 52px; height: 52px;
  border-radius: 50%; border: none; cursor: pointer; background: var(--layer-action); color: #fff;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s; }
.cap-launcher:hover { transform: translateY(-2px); background: #6d28d9; }
.cap-launcher.active { background: var(--navy); }
.cap-launch-ico { font-size: 22px; line-height: 1; }
.cap-launch-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

.cap-panel { position: fixed; left: 16px; bottom: 84px; z-index: var(--z-dropdown); width: 392px; max-width: calc(100vw - 32px);
  max-height: 74vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity .16s, transform .16s; }
.cap-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.cap-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--navy); color: #fff; }
.cap-title { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.cap-proj { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 12px; padding: 4px 6px;
  border-radius: 6px; border: 1px solid var(--navy-3); background: var(--navy-2); color: #fff; }
.cap-x { background: transparent; border: none; color: #cdd6ea; font-size: 16px; cursor: pointer; padding: 2px 4px; }
.cap-x:hover { color: #fff; }

.cap-body { padding: 12px; overflow-y: auto; }
.cap-note { font-size: 10.5px; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; }
.cap-textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-sans); font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--grey-300); border-radius: 8px; color: var(--ink); }
.cap-textarea:focus { outline: none; border-color: var(--blue); }
.cap-drop { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--grey-300); border-radius: 8px;
  font-size: 11px; color: var(--grey-500); display: flex; align-items: center; gap: 6px; background: var(--grey-50); cursor: pointer; }
.cap-drop:hover { border-color: var(--layer-action); color: var(--grey-700); }
.cap-drop.drag { border-color: var(--blue); background: rgba(45,127,249,.06); color: var(--blue); }
.cap-drop-tag { font-size: 9px; font-family: var(--font-mono); background: var(--grey-200); color: var(--grey-700);
  padding: 1px 6px; border-radius: 8px; margin-left: auto; }
.cap-try { font-size: 11px; margin: 10px 0 5px; }
.cap-samples { display: flex; flex-wrap: wrap; gap: 5px; }
.cap-samples-empty { font-size: 11px; }
.cap-chip { font-size: 11px; padding: 4px 9px; border-radius: 14px; border: 1px solid var(--grey-300);
  background: var(--surface); color: var(--grey-700); cursor: pointer; }
.cap-chip:hover { border-color: var(--layer-action); color: var(--layer-action); }
.cap-chip.unbound { border-style: dashed; color: var(--grey-500); }

.cap-actions { display: flex; gap: 8px; margin-top: 12px; }
.cap-btn { flex: 1; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; padding: 8px 10px;
  border-radius: 8px; border: 1px solid var(--grey-300); background: var(--surface); color: var(--grey-700); cursor: pointer; }
.cap-btn:hover { border-color: var(--grey-500); }
.cap-btn.primary { background: var(--layer-action); border-color: var(--layer-action); color: #fff; }
.cap-btn.primary:hover { background: #6d28d9; }
.cap-btn:disabled { opacity: .55; cursor: default; }

.cap-review { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.cap-review-head { font-size: 12px; font-weight: 700; color: var(--grey-900); display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 8px; }
.cap-mode { font-size: 9px; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase;
  background: var(--grey-200); color: var(--grey-700); padding: 2px 7px; border-radius: 8px; }
.cap-mode.live { background: rgba(31,171,106,.14); color: var(--green); }
.cap-mode.scripted { background: rgba(240,168,40,.16); color: #9a6a10; }
.cap-pw { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--grey-100); }
.cap-pw.ow { background: rgba(240,168,40,.07); }
.cap-pw.done { opacity: .68; }
.cap-pw-acc { flex-shrink: 0; }
.cap-pw-main { flex: 1; min-width: 0; }
.cap-pw-label { font-size: 12px; font-weight: 600; color: var(--grey-900); }
.cap-pw-key { font-size: 9px; font-family: var(--font-mono); color: var(--grey-500); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cap-pw-ow { font-size: 9.5px; color: var(--yellow); font-weight: 600; }
.cap-pw-span { font-size: 10px; color: var(--grey-500); font-style: italic; margin-top: 2px; }
.cap-pw-val { font-size: 12px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); flex-shrink: 0; }
.cap-pw-unit { font-size: 9px; color: var(--grey-500); font-weight: 400; }
.cap-pw-applied { font-size: 9.5px; font-weight: 700; flex-shrink: 0; }
.cap-pw-applied.live { color: var(--green); }
.cap-pw-applied.recorded { color: var(--blue); }
.cap-pw-applied.needs_schema { color: var(--yellow); }
.cap-pw-applied.needs_value { color: var(--yellow); }
.cap-mini { font-size: 10px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--grey-300);
  background: var(--surface); color: var(--grey-700); cursor: pointer; flex-shrink: 0; }
.cap-mini:hover { border-color: var(--blue); color: var(--blue); }
.cap-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--grey-500);
  margin: 10px 0 4px; display: flex; align-items: center; gap: 6px; }
.cap-cat { font-family: var(--font-mono); font-weight: 600; background: var(--grey-100); color: var(--grey-700);
  padding: 1px 6px; border-radius: 6px; text-transform: none; }
.cap-unr { font-size: 11.5px; color: var(--grey-700); padding: 5px 0; }
.cap-unr b { color: var(--purple); }
.cap-unr-q { font-size: 10.5px; color: var(--grey-500); margin-top: 2px; }
.cap-note-body { font-size: 11.5px; color: var(--grey-700); background: var(--grey-50); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 9px; }
.cap-oos { margin-top: 8px; font-size: 11px; color: var(--grey-500); }
.cap-oos summary { cursor: pointer; }
.cap-oos div { padding: 3px 0 0 12px; }
.cap-none { padding: 6px 0; font-size: 12px; }
@media (max-width: 520px) { .cap-panel { right: 8px; left: 8px; width: auto; bottom: 78px; } }

/* Capture Box · document-routing surface (auto-file destination; dark-safe via token pairs) */
.cap-route { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.cap-route-head { font-size: 11px; font-weight: 700; color: var(--text-strong); display: flex; align-items: center;
  gap: 6px; margin-bottom: 7px; }
.cap-route-file { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--grey-700);
  background: var(--grey-100); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px;
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-route-dest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-route-label { font-size: 11px; color: var(--grey-500); }
.cap-route-pill { font-size: 11.5px; font-weight: 700; color: var(--tag-green-fg); background: var(--tag-green-bg);
  border-radius: 12px; padding: 3px 10px; }
.cap-route-change { font-size: 10px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--grey-300);
  background: var(--surface); color: var(--grey-700); cursor: pointer; }
.cap-route-change:hover { border-color: var(--blue); color: var(--blue); }
.cap-route-ask { font-size: 11.5px; color: var(--grey-700); margin-bottom: 7px; }
.cap-route-verify { font-size: 11px; font-weight: 700; color: var(--tag-amber-fg); background: var(--tag-amber-bg);
  border-radius: 6px; padding: 3px 8px; display: inline-block; }
.cap-route-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cap-route-chip { font-size: 11px; padding: 4px 9px; border-radius: 14px; border: 1px solid var(--grey-300);
  background: var(--surface); color: var(--grey-700); cursor: pointer; }
.cap-route-chip:hover { border-color: var(--layer-action); color: var(--layer-action); }
.cap-route-chip.sug { border-style: dashed; border-color: var(--layer-action); color: var(--grey-900); }
.cap-route-chip.sel { background: var(--tag-green-bg); color: var(--tag-green-fg); border-color: transparent; font-weight: 700; }
.cap-route-file-btn { margin-top: 9px; width: 100%; font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--layer-action); background: var(--layer-action);
  color: var(--navy); cursor: pointer; }
.cap-route-file-btn:hover { filter: brightness(.96); }
.cap-route-file-btn:disabled { opacity: .55; cursor: default; background: var(--surface); color: var(--grey-500);
  border-color: var(--grey-300); filter: none; }
.cap-route-gate { font-size: 10.5px; color: var(--tag-amber-fg); background: var(--tag-amber-bg); border-radius: 6px;
  padding: 5px 8px; margin: 8px 0 2px; }
.cap-route.filed .cap-route-pill { color: var(--tag-blue-fg); background: var(--tag-blue-bg); }
.cap-route-path { font-family: var(--font-mono); font-size: 10px; color: var(--grey-500); word-break: break-all; }
.cap-route-view { display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--blue);
  text-decoration: none; }
.cap-route-view:hover { text-decoration: underline; }
.cap-learned-link { background: transparent; border: 1px solid var(--navy-3); color: #cdd6ea; font-size: 10px;
  font-weight: 600; padding: 2px 8px; border-radius: 10px; cursor: pointer; flex-shrink: 0; }
.cap-learned-link:hover { color: #fff; border-color: #fff; }

/* Capture Box - Learned corrections (admin curation surface) */
.cl-summary { font-size: 12px; color: var(--grey-500); margin-bottom: 12px; font-family: var(--font-mono); }
.cl-empty { font-size: 13px; color: var(--grey-500); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; text-align: center; }
.cl-group { margin-bottom: 18px; }
.cl-group-h { font-size: 12px; font-weight: 700; color: var(--text-strong); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px; }
.cl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); margin-bottom: 6px; }
.cl-row.off { opacity: .55; }
.cl-corr { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cl-kind { font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; background: var(--grey-100);
  color: var(--grey-700); padding: 1px 6px; border-radius: 6px; }
.cl-ai { font-size: 12px; color: var(--grey-500); text-decoration: line-through; }
.cl-arrow { color: var(--grey-400); }
.cl-human { font-size: 12px; font-weight: 700; color: var(--tag-green-fg); background: var(--tag-green-bg);
  padding: 2px 8px; border-radius: 10px; }
.cl-excerpt { flex: 1; min-width: 140px; font-size: 11px; color: var(--grey-500); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-btn { margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--grey-300);
  background: var(--surface); color: var(--grey-700); cursor: pointer; flex-shrink: 0; }
.cl-btn:hover { border-color: var(--blue); color: var(--blue); }
.cl-btn:disabled { opacity: .5; cursor: default; }

/* ===== Action layer (A) — live gate section + V18 trigger inbox/library + orc shelf =====
   Ported from V18 (.act-* / .trig-*). Live wiring is the gate section only; the trigger
   + orc surfaces are clearly-badged static shells (.act-shell-badge). --grey-400/600 are
   defined as interpolated aliases in tokens.css since AUD-D-007 — use them directly. */
.act-sec-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-700); display: flex; align-items: center; gap: 7px; margin: 0 0 9px; }
.act-sec-head.act-sec-shell { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grey-100); color: var(--grey-500); }
.act-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,171,106,.18); flex-shrink: 0; }
.act-gate-host { margin-bottom: 4px; }
.act-portfolio-link { background: none; border: none; color: var(--blue); cursor: pointer; font: inherit; font-size: 12px; padding: 0; text-decoration: underline; }
.act-shell-badge { font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #92400E; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.30); padding: 2px 8px; border-radius: 10px; }
.act-live-badge  { font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #065F46; background: rgba(31,171,106,.12); border: 1px solid rgba(31,171,106,.30); padding: 2px 8px; border-radius: 10px; }

.act-alert-banner { display: flex; align-items: center; gap: 8px; background: rgba(220,64,64,.10); border: 1px solid rgba(220,64,64,.30); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; cursor: pointer; transition: background .15s; }
.act-alert-banner:hover { background: rgba(220,64,64,.16); }
.act-alert-banner .act-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.act-alert-banner .act-banner-label { font-size: 13px; font-weight: 600; color: var(--tag-red-fg); flex: 1; }
.act-alert-banner .act-banner-arrow { font-size: 12px; color: var(--tag-red-fg); }

.act-dept-group { margin-bottom: 16px; }
.act-dept-title { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-500); padding: 0 0 6px; margin-bottom: 6px; border-bottom: 1px solid var(--grey-100); }
.act-trigger-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; transition: border-color .15s; }
.act-trigger-card:hover { border-color: var(--grey-300); }
.act-trigger-card.firing { border-left: 3px solid var(--red); }
.act-trigger-card.upcoming { border-left: 3px solid var(--yellow); }
.act-trigger-card.dormant { border-left: 3px solid var(--grey-300); }
.act-trigger-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.act-trigger-name { font-size: 13px; font-weight: 600; color: var(--text-strong); flex: 1; }
.act-status-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: .03em; white-space: nowrap; }
.act-status-chip.firing { background: rgba(220,64,64,.12); color: var(--tag-red-fg); }
.act-status-chip.upcoming { background: rgba(245,158,11,.12); color: #92400E; }
.act-status-chip.dormant { background: var(--grey-100); color: var(--grey-500); }
.act-trigger-var { font-family: var(--font-mono); font-size: 10px; color: var(--grey-500); margin-bottom: 3px; }
.act-trigger-meta { font-size: 11px; color: var(--grey-700); }
.act-trigger-owner { font-size: 11px; color: var(--grey-500); margin-top: 2px; }

.act-footer { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grey-100); }
.act-footer-btn { flex: 1; padding: 7px 0; font-size: 12px; font-weight: 600; border-radius: 6px; border: 1px solid var(--grey-300); background: var(--surface); color: var(--text-strong); cursor: pointer; text-align: center; transition: background .15s; }
.act-footer-btn:hover { background: var(--grey-50); }
.act-footer-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.act-footer-btn.primary:hover { background: var(--navy-2); }

.act-orc-shelf { display: flex; flex-direction: column; gap: 7px; }
.act-orc-btn { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--surface); border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; }
.act-orc-btn:hover { border-color: var(--layer-action); background: rgba(124,58,237,.04); }
.act-orc-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.act-orc-desc { font-size: 11px; color: var(--grey-700); }
.act-orc-meta { font-size: 10px; color: var(--grey-500); font-family: var(--font-mono); margin-top: 2px; }

/* Trigger library full-page (go("action-triggers")) */
.trig-page { max-width: 1000px; margin: 0 auto; padding: 28px 24px; }
.trig-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.trig-page-title { font-size: 22px; font-weight: 700; color: var(--text-strong); flex: 1; }
.trig-inbox { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }
.trig-inbox-header { background: var(--navy); color: #fff; padding: 12px 18px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.trig-inbox-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.trig-inbox-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--grey-100); }
.trig-inbox-row:last-child { border-bottom: none; }
.trig-inbox-row.firing-row { background: rgba(220,64,64,.03); }
.trig-inbox-row.upcoming-row { background: rgba(245,158,11,.03); }
.trig-inbox-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.trig-inbox-icon.firing { background: rgba(220,64,64,.12); }
.trig-inbox-icon.upcoming { background: rgba(245,158,11,.12); }
.trig-inbox-info { flex: 1; min-width: 0; }
.trig-inbox-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.trig-inbox-detail { font-size: 11px; color: var(--grey-500); margin-top: 1px; }
.trig-inbox-var { font-family: var(--font-mono); font-size: 10px; color: var(--grey-500); }
.trig-inbox-due { text-align: right; font-size: 11px; color: var(--grey-700); white-space: nowrap; }
.trig-inbox-actions { display: flex; gap: 6px; }
.trig-inline-btn { font-size: 11px; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--grey-300); background: var(--surface); color: var(--text-strong); cursor: pointer; white-space: nowrap; transition: background .15s; }
.trig-inline-btn:hover { background: var(--grey-50); }
.trig-inline-btn.resolve { border-color: var(--green); color: var(--green); }
.trig-inline-btn.resolve:hover { background: rgba(31,171,106,.07); }
.trig-library { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; }
.trig-library-header { padding: 12px 18px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--grey-100); }
.trig-library-title { font-size: 14px; font-weight: 700; color: var(--text-strong); padding-bottom: 12px; flex: 1; }
.trig-dept-section { padding: 14px 18px; border-bottom: 1px solid var(--grey-100); }
.trig-dept-section:last-child { border-bottom: none; }
.trig-dept-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 10px; }
.trig-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--grey-50); border-radius: 7px; margin-bottom: 6px; }
.trig-card:last-child { margin-bottom: 0; }
.trig-card-body { flex: 1; min-width: 0; }
.trig-card-name { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 3px; }
.trig-card-cond { font-size: 11px; color: var(--grey-700); margin-bottom: 3px; }
.trig-card-var { font-family: var(--font-mono); font-size: 10px; color: var(--grey-500); }
.trig-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.trig-card-owner { font-size: 11px; color: var(--grey-500); flex: 1; }
.trig-card-actions { display: flex; gap: 4px; }
.trig-icon-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--grey-500); padding: 2px 4px; border-radius: 4px; }
.trig-icon-btn:hover { background: var(--grey-200); color: var(--text-strong); }
.trig-modal-btn { padding: 8px 18px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid var(--grey-300); background: var(--surface); color: var(--text-strong); }
.trig-modal-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.trig-modal-btn.primary:hover { background: var(--navy-2); }
.trig-modal-btn:hover { background: var(--grey-100); }

/* ===== Hot SOP Navigator — value-row tightening + entered-value inspect modal =====
   (UX cleanup: hide machine VAR_KEYs inline, bring the value beside its label, and give
   entered values a read-first inspect view with a source sanity snapshot.) */
.tws-sec-h-ct.has { background: rgba(31,171,106,.12); color: var(--green); }
.tws-conf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }

/* Inspect modal — value hero, provenance, illustrative source snapshot */
.pit-modal-head-title { font-size: 15px; font-weight: 700; color: inherit; }
.pit-fieldkey { font-family: var(--font-mono); font-size: 10px; color: var(--grey-400); display: none; }
html.var-keys-on .pit-fieldkey { display: inline; }
.pit-val-hero { font-size: 22px; font-weight: 700; color: var(--grey-900); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.pit-conf-pill { font-size: 9px; font-weight: 700; letter-spacing: .3px; padding: 2px 7px; border-radius: 99px; }
.pit-conf-pill.high { background: rgba(31,171,106,.12); color: var(--green); }
.pit-conf-pill.med { background: rgba(240,168,40,.16); color: #9a6a00; }
.pit-conf-pill.low { background: var(--grey-100); color: var(--grey-500); }
.pit-conf-pill.review { background: rgba(249,115,22,.12); color: var(--orange); }
.pit-prov { font-size: 11px; color: var(--grey-500); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pit-prov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: inline-block; flex-shrink: 0; }
.pit-prov-tag { font-family: var(--font-mono); font-size: 9px; background: rgba(249,115,22,.10); color: var(--orange); padding: 1px 5px; border-radius: 3px; }
.pit-inspect-notes { font-size: 12px; color: var(--grey-700); background: var(--grey-50); border-radius: 5px; padding: 7px 10px; }
.pit-snap { position: relative; border: 1px dashed var(--grey-300); border-radius: 7px; padding: 12px; background: repeating-linear-gradient(45deg, var(--grey-50), var(--grey-50) 10px, var(--surface) 10px, var(--surface) 20px); }
.pit-snap-tag { position: absolute; top: 8px; right: 8px; font-size: 8px; font-weight: 700; letter-spacing: .4px; color: var(--grey-500); background: var(--grey-100); border: 1px solid var(--grey-200); padding: 2px 6px; border-radius: 3px; }
.pit-snap-page { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 4px; box-shadow: 0 1px 4px rgba(15,27,61,.06); padding: 14px 16px; max-width: 320px; }
.pit-snap-line { height: 7px; border-radius: 3px; background: var(--grey-100); margin: 7px 0; }
.pit-snap-line.s { width: 62%; }
.pit-snap-hl { font-size: 11px; color: var(--grey-700); background: rgba(240,168,40,.22); border-radius: 3px; padding: 3px 6px; display: inline-block; margin: 4px 0; }
.pit-snap-cap { font-size: 10.5px; color: var(--grey-500); margin-top: 9px; line-height: 1.5; }
.pit-snap-link { color: var(--blue); cursor: pointer; white-space: nowrap; }
.pit-snap-link:hover { text-decoration: underline; }
/* Field modal — enum select, unit-locked input + validation, hint text */
.pit-input-wrap { display: flex; align-items: stretch; border: 1px solid var(--grey-300); border-radius: 6px; overflow: hidden; }
.pit-input-wrap:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,0.10); }
.pit-input-wrap.err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,64,64,0.12); }
.pit-input-wrap .pit-edit-input { flex: 1; min-width: 0; border: none; border-radius: 0; }
.pit-input-wrap .pit-edit-input:focus { border: none; box-shadow: none; }
.pit-unit-inline { display: flex; align-items: center; padding: 0 11px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--grey-600); background: var(--grey-50); border-left: 1px solid var(--grey-200); white-space: nowrap; }
.pit-unit-label { display: flex; align-items: center; padding: 0 10px; font-family: var(--font-sans); font-size: 10px; font-style: italic; color: var(--grey-500); background: var(--grey-50); border-left: 1px solid var(--grey-200); white-space: nowrap; }
.pit-enum-picker { display: flex; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.pit-enum-btn { padding: 5px 12px; border-radius: 5px; border: 2px solid var(--grey-300); background: var(--surface); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--grey-700); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.pit-enum-btn:hover { border-color: var(--teal); color: var(--teal); }
.pit-enum-btn.active { border-color: var(--teal); background: rgba(20,184,166,0.12); color: var(--teal); }
.pit-enum-btn.empty { border-style: dashed; color: var(--grey-400); }
.pit-enum-btn.empty:hover, .pit-enum-btn.empty.active { border-style: solid; }
.pit-input-err { font-size: 11.5px; color: var(--red); margin-top: 6px; align-items: center; gap: 5px; }
.pit-unit-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; background: var(--grey-100); color: var(--grey-700); white-space: nowrap; flex-shrink: 0; }
.pit-unit-hero { font-size: 13px; }
.pit-option-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.pit-option-chip { padding: 5px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--grey-700); cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
.pit-option-chip.active, .pit-option-chip:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.pit-hint { font-size: 10.5px; color: var(--grey-500); margin: 4px 0 6px; line-height: 1.4; font-style: italic; }

/* ===== Daily-driver views: My Tasks / Today / Schedule / Audit Trail (Tier-1 #2) =====
   All 4 are clearly-badged static shells — no live API calls. Badge: act-shell-badge. */

.dd-page { max-width: 1000px; margin: 0 auto; padding: 28px 24px; }
.dd-page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.dd-page-title { font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -.3px; }
.dd-page-sub { font-size: 13px; color: var(--grey-500); margin-top: 4px; }
.dd-footer-note { font-size: 11px; color: var(--grey-400); margin-top: 8px; }

/* Shared table (My Tasks / Today / Audit Trail) */
.dd-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; font-size: 13px; }
.dd-table th { background: var(--grey-50); text-align: left; padding: 9px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-600); border-bottom: 1px solid var(--grey-200); }
.dd-table td { padding: 10px 12px; border-bottom: 1px solid var(--grey-100); color: var(--grey-800); vertical-align: top; }
.dd-table tr:last-child td { border-bottom: none; }
.dd-table tbody tr:hover td { background: var(--grey-50); }
.dd-code { font-family: var(--font-mono); font-size: 10px; color: var(--blue); font-weight: 600; white-space: nowrap; }
.dd-meta { font-size: 11px; color: var(--grey-500); white-space: nowrap; }
.dd-status-chip { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }

/* Today — section heads */
.dd-section-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-600); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.dd-section-icon-firing   { font-size: 14px; color: var(--red); }
.dd-section-icon-blocked  { font-size: 14px; color: var(--orange); }
.dd-section-icon-activity { font-size: 14px; color: var(--blue); }

/* Today — firing triggers */
.dd-firing-list { background: rgba(220,64,64,.05); border: 1px solid rgba(220,64,64,.22); border-radius: 10px; padding: 4px 0; margin-bottom: 10px; }
.dd-firing-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(220,64,64,.10); }
.dd-firing-row:last-child { border-bottom: none; }
.dd-firing-body { flex: 1; min-width: 0; }
.dd-firing-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.dd-firing-dept { font-size: 11px; font-weight: 400; color: var(--grey-500); }
.dd-firing-detail { font-size: 11px; color: var(--grey-600); margin-top: 2px; }
.dd-firing-var { font-family: var(--font-mono); font-size: 9px; color: var(--grey-400); margin-top: 2px; }
.dd-review-btn { font-size: 11px; padding: 4px 11px; background: var(--red); color: #fff; border: none; border-radius: 5px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity .15s; }
.dd-review-btn:hover { opacity: .82; }

/* Today — recent activity */
.dd-activity-list { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; }
.dd-activity-row { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--grey-100); }
.dd-activity-row:last-child { border-bottom: none; }
.dd-activity-when { font-size: 10px; color: var(--grey-400); font-family: var(--font-mono); min-width: 130px; white-space: nowrap; padding-top: 1px; flex-shrink: 0; }
.dd-activity-body { flex: 1; min-width: 0; }
.dd-activity-who { font-size: 12px; font-weight: 600; color: var(--grey-800); }
.dd-activity-proj { font-size: 11px; color: var(--blue); margin-left: 6px; }
.dd-activity-text { font-size: 12px; color: var(--grey-600); margin-top: 2px; }

/* Schedule — Gantt */
.dd-sched-wrap { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.dd-sched-row { display: grid; grid-template-columns: 190px 1fr; align-items: center; border-bottom: 1px solid var(--grey-100); }
.dd-sched-row:last-child { border-bottom: none; }
.dd-sched-row-info { padding: 10px 12px; border-right: 1px solid var(--grey-100); }
.dd-sched-axis-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-500); background: var(--grey-50); padding: 8px 12px; }
.dd-sched-axis-months { display: flex; overflow: hidden; background: var(--grey-50); padding: 8px 4px; }
.dd-sched-axis-months span { flex: 1; font-size: 8.5px; color: var(--grey-500); text-align: center; font-family: var(--font-mono); min-width: 0; overflow: hidden; }
.dd-sched-row-label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.dd-sched-row-sub { font-size: 10px; color: var(--grey-500); margin-top: 2px; }
.dd-sched-bar-wrap { position: relative; height: 38px; }
.dd-sched-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 19px; border-radius: 4px; display: flex; align-items: center; padding: 0 6px; font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.dd-sched-bar.complete  { background: rgba(31,171,106,.18); color: var(--green); }
.dd-sched-bar.active    { background: rgba(45,127,249,.14); color: var(--blue); }
.dd-sched-bar.at-risk   { background: rgba(220,64,64,.14); color: var(--red); }
.dd-sched-bar.scheduled { background: var(--grey-100); color: var(--grey-500); }
.dd-sched-legend { display: flex; gap: 14px; font-size: 11px; color: var(--grey-500); margin-bottom: 4px; }
.dd-sched-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Audit Trail — type chips + date column */
.dd-audit-type { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.dd-audit-type.ai       { background: rgba(20,184,166,.12); color: var(--teal); }
.dd-audit-type.pm       { background: rgba(45,127,249,.12); color: var(--blue); }
.dd-audit-type.approval { background: rgba(31,171,106,.12); color: var(--green); }
.dd-audit-type.orc      { background: rgba(124,58,237,.12); color: var(--purple); }
.dd-audit-field { font-family: var(--font-mono); font-size: 9.5px; color: var(--grey-400); margin-top: 3px; }
.dd-audit-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--grey-400); white-space: nowrap; }

/* ===== Archive layer panel + detail page (arc-*) =====
   Ported from V18 (lines 973-1054). Panel + full-page archive-project view. */

.arc-filter-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.arc-tab { padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 20px; border: 1px solid var(--grey-300); background: var(--surface); color: var(--grey-600); cursor: pointer; transition: background var(--motion-1) var(--ease-out), color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out), box-shadow var(--motion-1) var(--ease-out), transform var(--motion-1) var(--ease-out); font-family: inherit; }
.arc-tab.active { background: var(--navy); color: white; border-color: var(--text-strong); }
.arc-tab:hover:not(.active) { background: var(--grey-50); }

.arc-project-row { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: flex; align-items: flex-start; gap: 10px; }
.arc-project-row:hover { border-color: var(--text-strong); box-shadow: 0 2px 10px rgba(15,27,61,.08); }

.arc-status-chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.arc-status-chip.sold       { background: rgba(20,184,166,.12); color: #0D6E63; }
.arc-status-chip.terminated { background: rgba(239,68,68,.12);  color: var(--tag-red-fg); }
.arc-status-chip.cod        { background: rgba(16,185,129,.12); color: #065F46; }

.arc-row-body { flex: 1; min-width: 0; }
.arc-row-name { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 3px; }
.arc-row-meta { font-size: 11px; color: var(--grey-500); margin-bottom: 4px; }
.arc-row-metric { font-size: 12px; font-weight: 600; color: var(--grey-700); }
.arc-row-metric.sold-metric       { color: #0D6E63; }
.arc-row-metric.terminated-metric { color: var(--tag-red-fg); }
.arc-row-metric.cod-metric        { color: #065F46; }
.arc-row-ll { font-size: 11px; color: var(--grey-400); margin-top: 3px; }

.arc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--grey-100); font-size: 11px; color: var(--grey-500); }
.arc-ll-btn { background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--purple); font-family: inherit; padding: 0; }
.arc-ll-btn:hover { text-decoration: underline; }

/* Archive detail page */
.arc-detail-page { max-width: 1000px; margin: 0 auto; padding: 28px 24px; }
.arc-banner { display: flex; align-items: center; gap: 10px; border: 1px solid; border-radius: 8px; padding: 10px 16px; margin-bottom: 20px; flex-wrap: wrap; }
.arc-banner-lock { font-size: 16px; flex-shrink: 0; }
.arc-banner-label { font-size: 13px; font-weight: 700; flex: 1; }
.arc-banner-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px; }
.arc-project-header { margin-bottom: 20px; }
.arc-project-header h1 { font-size: 24px; font-weight: 800; color: var(--text-strong); margin: 0 0 6px; }
.arc-project-header-meta { font-size: 13px; color: var(--grey-600); display: flex; gap: 14px; flex-wrap: wrap; }
.arc-project-header-meta span { display: flex; align-items: center; gap: 4px; }

.arc-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.arc-metric-tile { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 8px; padding: 14px 16px; }
.arc-metric-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 6px; }
.arc-metric-value { font-size: 20px; font-weight: 800; color: var(--text-strong); margin-bottom: 2px; }
.arc-metric-sub { font-size: 11px; color: var(--grey-500); }
.arc-section-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin: 0 0 14px; }

/* Gate timeline */
.arc-gate-timeline { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 20px; margin-bottom: 24px; overflow-x: auto; }
.arc-gate-track { display: flex; align-items: center; min-width: 500px; }
.arc-gate-node { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.arc-gate-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid; }
.arc-gate-circle.passed           { background: var(--navy); border-color: var(--text-strong); color: white; }
.arc-gate-circle.terminated-stop  { background: rgba(239,68,68,.12); border-color: #EF4444; color: #EF4444; }
.arc-gate-circle.unreached        { background: var(--grey-100); border-color: var(--grey-300); color: var(--grey-400); }
.arc-gate-label { font-size: 11px; font-weight: 600; color: var(--text-strong); margin-top: 6px; text-align: center; }
.arc-gate-connector { flex: 1; height: 2px; background: var(--grey-200); margin-top: -20px; min-width: 24px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.arc-gate-connector.passed { background: var(--navy); }
.arc-gate-conn-dur { position: absolute; bottom: 6px; font-size: 9px; color: var(--grey-400); font-family: var(--font-mono); white-space: nowrap; }

/* Exit-timing replay */
.arc-er { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.arc-er-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.arc-er-sub { font-size: 12px; color: var(--grey-500); margin-bottom: 16px; line-height: 1.5; }
.arc-er-bars { display: flex; align-items: flex-end; gap: 10px; }
.arc-er-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer; }
.arc-er-val { font-size: 11px; font-weight: 700; color: var(--grey-400); margin-bottom: 4px; font-family: var(--font-mono); }
.arc-er-col.sel .arc-er-val { color: var(--text-strong); }
.arc-er-actual { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; color: #0D6E63; margin-bottom: 3px; }
.arc-er-bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--grey-200); transition: background .15s; }
.arc-er-col:hover .arc-er-bar { background: var(--grey-300); }
.arc-er-col.sel .arc-er-bar { background: var(--navy); }
.arc-er-col.sel:hover .arc-er-bar { background: var(--navy); }
.arc-er-glabel { font-size: 12px; color: var(--grey-500); margin-top: 6px; }
.arc-er-col.sel .arc-er-glabel { color: var(--text-strong); font-weight: 700; }
.arc-er-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 14px; }
.arc-er-tile { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 8px; padding: 11px 13px; }
.arc-er-tile-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 4px; }
.arc-er-tile-val { font-size: 19px; font-weight: 800; color: var(--text-strong); font-family: var(--font-mono); }
.arc-er-verdict { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; border: 1px solid var(--grey-200); background: var(--grey-50); border-radius: 8px; padding: 11px 13px; color: var(--grey-800); }
.arc-er-verdict.ok { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); color: #065F46; }
.arc-er-verdict.warn { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); color: #92400E; }

/* Lens library: closest analogs */
.arc-an { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.arc-an-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.arc-an-sub { font-size: 12px; color: var(--grey-500); margin-bottom: 14px; line-height: 1.5; }
.arc-an-modes { display: inline-flex; gap: 4px; background: var(--grey-100); border-radius: 8px; padding: 3px; margin-bottom: 14px; }
.arc-an-mode { border: none; background: transparent; color: var(--grey-500); font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.arc-an-mode.sel { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(15,27,61,.1); }
.arc-an-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.arc-an-row { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid var(--grey-200); border-radius: 7px; opacity: .55; }
.arc-an-row.top { opacity: 1; border-color: var(--grey-300); }
.arc-an-eye { font-size: 12px; color: var(--blue); flex-shrink: 0; }
.arc-an-name { font-size: 13px; font-weight: 600; color: var(--text-strong); min-width: 148px; }
.arc-an-chip { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 8px; letter-spacing: .03em; flex-shrink: 0; }
.arc-an-chip.sold       { background: rgba(20,184,166,.12); color: #0D6E63; }
.arc-an-chip.cod        { background: rgba(16,185,129,.12); color: #065F46; }
.arc-an-chip.terminated { background: rgba(239,68,68,.12);  color: var(--tag-red-fg); }
.arc-an-tag { font-size: 11px; color: var(--grey-500); font-family: var(--font-mono); white-space: nowrap; }
.arc-an-bar { flex: 1; height: 6px; background: var(--grey-100); border-radius: 3px; overflow: hidden; min-width: 40px; }
.arc-an-fill { display: block; height: 100%; background: var(--grey-300); }
.arc-an-fill.top { background: var(--blue); }
.arc-an-pct { font-size: 12px; font-weight: 700; color: var(--grey-500); min-width: 34px; text-align: right; font-family: var(--font-mono); }
.arc-an-prior { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 8px; padding: 12px 14px; }
.arc-an-prior-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px; }
.arc-an-prior-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--grey-600); padding: 3px 0; }
.arc-an-prior-row b { color: var(--text-strong); font-weight: 600; text-align: right; }

/* What-If console (live oracle counterfactual) */
.wi-page { padding: 24px 32px; max-width: 1100px; margin: 0 auto; }
.wi-head { margin-bottom: 18px; }
.wi-title { font-size: 22px; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 10px; }
.wi-live { font-size: 11px; font-weight: 700; color: var(--blue); background: rgba(45,127,249,.1); padding: 3px 9px; border-radius: 10px; }
.wi-sub { font-size: 13px; color: var(--grey-500); margin-top: 5px; }
.wi-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.wi-drivers { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 14px 16px; }
.wi-panel-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px; }
.wi-reset { border: none; background: none; color: var(--purple); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.wi-reset:hover { text-decoration: underline; }
.wi-group-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-400); margin: 14px 0 6px; }
.wi-driver { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.wi-driver-label { font-size: 12px; color: var(--grey-700); flex: 1; min-width: 0; }
.wi-unit { color: var(--grey-400); font-size: 10px; }
.wi-input, .wi-toggle { width: 112px; flex-shrink: 0; padding: 5px 8px; font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--grey-200); border-radius: 6px; outline: none; background: var(--surface); color: var(--text-strong); }
.wi-input:focus, .wi-toggle:focus { border-color: var(--blue); }
.wi-toggle { font-family: inherit; }
.wi-run { width: 100%; margin-top: 14px; padding: 9px; font-size: 13px; font-weight: 700; font-family: inherit; color: white; background: var(--navy); border: none; border-radius: 7px; cursor: pointer; }
.wi-run:hover { background: var(--blue); }
.wi-run:disabled { opacity: .6; cursor: default; }
.wi-results { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 16px 18px; }
.wi-hyp { font-size: 12px; font-weight: 600; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 7px; padding: 8px 12px; margin-bottom: 14px; }
.wi-hyp.on { color: #92400E; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
.wi-table { width: 100%; border-collapse: collapse; }
.wi-table th { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-400); text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--grey-200); }
.wi-table th:first-child { text-align: left; }
.wi-o-label { font-size: 13px; color: var(--grey-700); padding: 8px 10px; }
.wi-o-base, .wi-o-wi, .wi-o-delta { font-size: 13px; font-family: var(--font-mono); text-align: right; padding: 8px 10px; }
.wi-o-base { color: var(--grey-500); }
.wi-o-wi { color: var(--text-strong); font-weight: 700; }
.wi-o-delta { font-weight: 700; color: var(--grey-400); }
.wi-o-delta.good { color: var(--green); }
.wi-o-delta.bad { color: var(--red); }
.wi-table tbody tr { border-bottom: 1px solid var(--grey-100); }
.wi-prov { margin-top: 14px; }
.wi-prov-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-500); margin: 10px 0 5px; }
.wi-prov-h.warn { color: var(--orange); }
.wi-prov-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-family: var(--font-mono); color: var(--grey-600); padding: 2px 0; }
.wi-prov-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-prov-row b { color: var(--text-strong); }
.wi-prov-row.warn { color: var(--orange); }

/* Simulacrum — Monte Carlo schedule simulator (mirrors wi-* two-panel grid) */
.wr-page { padding: 24px 32px; max-width: 1200px; margin: 0 auto; }
.wr-head { margin-bottom: 18px; }
.wr-title { font-size: 22px; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 10px; }
.wr-badge { font-size: 11px; font-weight: 700; color: var(--blue); background: rgba(45,127,249,.1); padding: 3px 9px; border-radius: 10px; }
.wr-sub { font-size: 13px; color: var(--grey-500); margin-top: 5px; }
.wr-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.wr-controls { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 14px 16px; }
.wr-panel-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px; }
.wr-group-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-400); margin: 14px 0 6px; }
.wr-ctrl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.wr-ctrl-col { display: flex; flex-direction: column; gap: 5px; margin-bottom: 7px; }
.wr-ctrl-label { font-size: 12px; color: var(--grey-700); flex: 1; min-width: 0; }
.wr-hint { color: var(--grey-400); font-size: 10px; font-weight: 400; }
.wr-input { width: 112px; flex-shrink: 0; padding: 5px 8px; font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--grey-200); border-radius: 6px; outline: none; background: var(--surface); color: var(--text-strong); }
.wr-input:focus { border-color: var(--blue); }
.wr-select { width: 112px; flex-shrink: 0; padding: 5px 8px; font-size: 12px; font-family: inherit; border: 1px solid var(--grey-200); border-radius: 6px; outline: none; background: var(--surface); color: var(--text-strong); }
.wr-select:focus { border-color: var(--blue); }
.wr-select-full { width: 100%; }
.wr-run { width: 100%; margin-top: 14px; padding: 9px; font-size: 13px; font-weight: 700; font-family: inherit; color: white; background: var(--navy); border: none; border-radius: 7px; cursor: pointer; }
.wr-run:hover { background: var(--blue); }
.wr-run:disabled { opacity: .6; cursor: default; }
.wr-reset { display: block; width: 100%; margin-top: 6px; border: none; background: none; color: var(--purple); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; }
.wr-reset:hover { text-decoration: underline; }
.wr-results { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 16px 18px; }
.wr-hyp { font-size: 12px; font-weight: 600; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 7px; padding: 8px 12px; margin-bottom: 14px; }
.wr-hyp.on { color: #92400E; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }
.wr-hyp.warn { color: var(--red); background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); }
.wr-hist-wrap { margin-bottom: 12px; }
.wr-pct-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; padding: 10px 12px; background: var(--grey-50); border-radius: 8px; border: 1px solid var(--grey-200); }
.wr-pct-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wr-pct-label { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-400); }
.wr-pct-val { font-size: 14px; font-weight: 700; font-family: var(--font-mono); color: var(--text-strong); }
.wr-pct-p50 { color: var(--blue); }
.wr-pct-sep { width: 1px; height: 32px; background: var(--grey-200); margin: 0 4px; }
.wr-pert-label { color: #92400E; }
.wr-pert-val { color: #92400E; }
.wr-delta-val { color: var(--grey-600); font-size: 14px; font-weight: 700; font-family: var(--font-mono); }
.wr-delta-val.warn { color: var(--red); }
.wr-delta-val.good { color: var(--green); }
.wr-finish-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; padding: 10px 12px; background: var(--grey-50); border-radius: 8px; border: 1px solid var(--grey-200); }
.wr-fin-label { font-size: 11px; font-weight: 700; color: var(--grey-400); width: 100%; margin-bottom: 2px; }
.wr-fin-item { display: flex; align-items: center; gap: 5px; }
.wr-fin-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--grey-500); background: var(--grey-200); padding: 1px 5px; border-radius: 4px; }
.wr-fin-tag-p50 { background: rgba(45,127,249,.15); color: var(--blue); }
.wr-fin-tag-pert { background: rgba(245,158,11,.15); color: #92400E; }
.wr-fin-date { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-strong); }
.wr-fin-date-p50 { color: var(--blue); }
.wr-fin-days { font-size: 11px; color: var(--grey-500); }
.wr-fin-sep { width: 1px; height: 24px; background: var(--grey-200); margin: 0 4px; }
.wr-accel-wrap { margin: 0 0 16px; }
.wr-accel-wrap:empty { display: none; }
.wr-accel-h { font-size: 12px; font-weight: 700; color: var(--grey-700); margin-bottom: 8px; }
.wr-accel-badge { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.wr-accel-sub { display: block; font-size: 10px; font-weight: 400; color: var(--grey-400); margin-top: 4px; }
.wr-accel-mode { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--grey-400); margin-bottom: 8px; }
.wr-accel-empty, .wr-accel-loading { font-size: 11px; color: var(--grey-500); background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 7px; padding: 10px 12px; }
.wr-accel-ready { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wr-accel-btn { font-size: 12px; font-weight: 700; font-family: inherit; color: white; background: var(--teal); border: none; border-radius: 7px; padding: 8px 14px; cursor: pointer; }
.wr-accel-btn:hover { filter: brightness(1.08); }
.wr-accel-ready-note { font-size: 10px; color: var(--grey-400); }
.wr-accel-cards { display: flex; flex-direction: column; gap: 8px; }
.wr-accel-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 8px; }
.wr-accel-rank { font-size: 15px; font-weight: 800; font-family: var(--font-mono); color: var(--teal); min-width: 28px; text-align: center; }
.wr-accel-body { flex: 1; min-width: 0; }
.wr-accel-task { font-size: 12px; font-weight: 700; color: var(--grey-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-accel-stage { font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--grey-400); margin-left: 4px; }
.wr-accel-bar-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.wr-accel-bar-track { flex: 1; height: 7px; background: var(--grey-200); border-radius: 4px; overflow: hidden; }
.wr-accel-bar { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.wr-accel-pull { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; }
.wr-accel-cost { font-size: 12px; font-weight: 700; font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; }
.wr-accel-cost.na { color: var(--grey-400); font-weight: 600; }
.wr-accel-perday { font-size: 10px; font-weight: 400; color: var(--grey-400); }
.wr-crit-wrap { margin-top: 4px; }
.wr-crit-h { font-size: 12px; font-weight: 700; color: var(--grey-600); margin-bottom: 6px; }
.wr-crit-sub { font-size: 10px; font-weight: 400; color: var(--grey-400); margin-left: 4px; }
.wr-crit-table { width: 100%; border-collapse: collapse; }
.wr-crit-table thead th { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-400); text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--grey-200); }
.wr-crit-table thead th.right { text-align: right; }
.wr-crit-table tbody tr { border-bottom: 1px solid var(--grey-100); }
.wr-crit-name { font-size: 12px; color: var(--grey-800); padding: 6px 8px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-crit-stage { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--grey-400); padding: 6px 8px; white-space: nowrap; }
/* Criticality cell: fixed-width % on the LEFT (right-aligned digits), bar fills the rest of the
   cell — so the value never spills outside the box, even in the narrow in-shell width. */
.wr-crit-idx { padding: 6px 8px; white-space: nowrap; display: flex; align-items: center; gap: 8px; min-width: 0; }
.wr-crit-pct { flex: 0 0 52px; text-align: right; font-size: 12px; font-family: var(--font-mono); color: var(--text-strong); font-weight: 700; }
.wr-crit-track { flex: 1 1 auto; min-width: 24px; height: 6px; background: var(--grey-100); border-radius: 2px; overflow: hidden; }
.wr-crit-bar { display: block; height: 100%; background: rgba(45,127,249,.45); border-radius: 2px; }
.wr-crit-rest { font-size: 11px; color: var(--grey-400); padding: 8px 8px 0; }
.wr-warn { font-size: 11px; color: var(--orange); background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2); border-radius: 6px; padding: 7px 10px; margin-top: 12px; }
.wr-warn:empty { display: none; }

/* PIT fields grid */
.arc-pit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.arc-pit-field { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 7px; padding: 10px 14px; }
.arc-pit-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.arc-pit-lock { font-size: 10px; color: var(--grey-400); }
.arc-pit-value { font-size: 14px; font-weight: 600; color: var(--text-strong); font-family: var(--font-mono); }
.arc-pit-value.text-val { font-family: inherit; font-size: 13px; }

.arc-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-strong); background: none; border: none; cursor: pointer; padding: 0 0 16px; font-family: inherit; }
.arc-back-btn:hover { color: var(--blue); }

/* LEARNING_LAYER insights within archive-project */
.lrn-section { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.lrn-section-header { background: linear-gradient(135deg, #0F1B3D 0%, #1B2A52 100%); color: white; padding: 14px 18px; }
.lrn-section-title { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.lrn-section-sub { font-size: 12px; opacity: .75; }
.lrn-cards { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.lrn-card { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 7px; padding: 12px 14px; }
.lrn-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.lrn-insight-text { font-size: 13px; color: var(--grey-800); line-height: 1.5; flex: 1; }
.lrn-confidence { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: .04em; flex-shrink: 0; margin-top: 2px; }
.lrn-confidence.high { background: rgba(16,185,129,.12); color: #065F46; }
.lrn-confidence.med  { background: rgba(245,158,11,.12);  color: #92400E; }
.lrn-confidence.low  { background: rgba(239,68,68,.12);   color: var(--tag-red-fg); }
.lrn-applicable { font-size: 11px; color: var(--grey-500); }

/* ===== LEARNING_LAYER full-page dashboard (lrn-page-*) =====
   Ported from V18 (lines 1056-1128). */

.lrn-page { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }
.lrn-page-header { margin-bottom: 24px; }
.lrn-page-title { font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lrn-page-meta { font-size: 12px; color: var(--grey-500); font-family: var(--font-mono); display: flex; gap: 16px; flex-wrap: wrap; }
.lrn-page-meta-item { display: flex; align-items: center; gap: 6px; }
.lrn-page-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.lrn-add-btn { padding: 7px 13px; border-radius: 6px; border: 1px solid var(--grey-200); background: var(--grey-100); color: var(--grey-400); font-family: inherit; font-size: 12px; cursor: not-allowed; }

.lrn-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }

.lrn-rec-section { }
.lrn-rec-title { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--grey-500); font-family: var(--font-mono); margin-bottom: 12px; }
.lrn-rec-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; position: relative; overflow: hidden; }
.lrn-rec-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.lrn-rec-card.warn::before      { background: var(--orange); }
.lrn-rec-card.forecast::before  { background: var(--yellow); }
.lrn-rec-card.planning::before  { background: var(--blue); }
.lrn-rec-card.confirmed::before { background: var(--green); }
.lrn-rec-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lrn-rec-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-family: var(--font-mono); }
.lrn-rec-label.warn      { color: var(--orange); }
.lrn-rec-label.forecast  { color: var(--yellow); }
.lrn-rec-label.planning  { color: var(--blue); }
.lrn-rec-label.confirmed { color: var(--green); }
.lrn-rec-urgency { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); font-weight: 500; }
.lrn-rec-urgency.high   { background: rgba(249,115,22,.12); color: var(--orange); }
.lrn-rec-urgency.medium { background: rgba(240,168,40,.12); color: var(--yellow); }
.lrn-rec-urgency.low    { background: var(--grey-100);      color: var(--grey-500); }
.lrn-rec-urgency.clear  { background: rgba(31,171,106,.10); color: var(--green); }
.lrn-rec-title-text { font-size: 14px; font-weight: 600; color: var(--grey-900); margin-bottom: 6px; }
.lrn-rec-body { font-size: 12px; color: var(--grey-700); line-height: 1.55; margin-bottom: 10px; }
.lrn-rec-source { font-size: 11px; color: var(--grey-500); font-family: var(--font-mono); margin-bottom: 8px; }
.lrn-rec-source span { color: var(--text-strong); font-weight: 500; }
.lrn-rec-actions { display: flex; gap: 8px; }
.lrn-rec-btn { padding: 5px 10px; border-radius: 5px; font-family: inherit; font-size: 11px; cursor: pointer; border: 1px solid var(--grey-200); background: var(--surface); color: var(--grey-700); }
.lrn-rec-btn:hover { border-color: var(--grey-300); background: var(--grey-50); }

.lrn-bench-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.lrn-bench-title { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 14px; }
.lrn-bench-row { margin-bottom: 12px; }
.lrn-bench-label { font-size: 11px; color: var(--grey-500); font-family: var(--font-mono); margin-bottom: 4px; display: flex; justify-content: space-between; }
.lrn-bench-label .val { color: var(--grey-900); font-weight: 500; }
.lrn-bar-track { height: 8px; background: var(--grey-100); border-radius: 4px; position: relative; overflow: visible; }
.lrn-bar-fill { height: 100%; border-radius: 4px; background: var(--blue); }
.lrn-bar-fill.orange { background: var(--orange); }
.lrn-bar-you { position: absolute; top: -3px; height: 14px; width: 3px; background: var(--navy); border-radius: 2px; }
.lrn-bar-you-label { position: absolute; top: -18px; font-size: 9px; font-family: var(--font-mono); color: var(--text-strong); white-space: nowrap; transform: translateX(-50%); }
.lrn-bench-sub { font-size: 10px; color: var(--grey-500); margin-top: 4px; }

.lrn-pattern-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 14px 18px; }
.lrn-pattern-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lrn-pattern-title { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.lrn-domain-select { padding: 4px 8px; border: 1px solid var(--grey-200); border-radius: 5px; font-family: inherit; font-size: 12px; background: var(--surface); color: var(--grey-700); cursor: pointer; }
.lrn-pattern-row { padding: 9px 0; border-bottom: 1px solid var(--grey-100); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.lrn-pattern-row:last-child { border-bottom: none; }
.lrn-pattern-row:hover { background: var(--grey-50); margin: 0 -4px; padding: 9px 4px; border-radius: 6px; }
.lrn-conf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.lrn-conf-dot.high { background: var(--green); }
.lrn-conf-dot.med  { background: var(--yellow); }
.lrn-conf-dot.low  { background: var(--grey-300); }
.lrn-pattern-name { font-size: 12px; font-weight: 500; color: var(--grey-900); line-height: 1.4; }
.lrn-pattern-meta { font-size: 10px; color: var(--grey-500); font-family: var(--font-mono); margin-top: 2px; }
.lrn-pattern-expanded { font-size: 11px; color: var(--grey-700); line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--grey-100); }
.lrn-conf-badge { font-size: 9px; font-family: var(--font-mono); font-weight: 600; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; }
.lrn-conf-badge.high { background: rgba(31,171,106,.12); color: var(--green); }
.lrn-conf-badge.med  { background: rgba(240,168,40,.10);  color: #B8860B; }
.lrn-conf-badge.low  { background: var(--grey-100);        color: var(--grey-500); }

/* ===== Calibration (cal-*) — the Archive→Cold learning-loop surface (Crucible) ===== */
.cal-page { padding: 24px 32px; max-width: 1200px; margin: 0 auto; }
.cal-header { margin-bottom: 22px; }
.cal-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cal-title { font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cal-sub { font-size: 13px; color: var(--grey-600); }
.cal-header-badges { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cal-meta { font-size: 12px; color: var(--grey-500); font-family: var(--font-mono); display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.cal-meta-item { display: flex; align-items: center; gap: 6px; }
.cal-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-500); flex-shrink: 0; }
.cal-honesty { font-size: 11.5px; color: var(--grey-700); line-height: 1.55; background: var(--accent-tint); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 14px; }
.cal-honesty b { color: var(--text-strong); font-weight: 600; }

.cal-section-h { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--grey-500); font-family: var(--font-mono); display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; }
.cal-section-tag { font-size: 9px; font-weight: 600; color: var(--grey-500); background: var(--grey-100); border-radius: 3px; padding: 1px 6px; letter-spacing: .3px; }
.cal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

.cal-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 16px 18px; }
.cal-card.hero { grid-column: 1 / -1; border-color: var(--accent); box-shadow: 0 2px 10px rgba(79,139,217,.08); }
.cal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-card-title { font-size: 14px; font-weight: 600; color: var(--grey-900); }
.cal-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; }
.cal-stage { font-weight: 700; color: var(--accent-deep); background: var(--accent-tint); border-radius: 3px; padding: 1px 6px; }
.cal-code { color: var(--grey-600); }
.cal-code.muted { color: var(--grey-400); font-style: italic; }
.cal-unit { color: var(--grey-400); }
.cal-card-now { text-align: right; flex-shrink: 0; }
.cal-now-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--grey-500); font-family: var(--font-mono); margin-bottom: 3px; }
.cal-now { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cal-now-v { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.cal-tag { font-size: 9px; font-weight: 600; font-family: var(--font-mono); padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; }
.cal-tag.live { color: var(--accent-deep); background: var(--accent-tint); }
.cal-tag.illus { color: var(--grey-500); background: var(--grey-100); }

.cal-band { margin-bottom: 12px; }
.cal-band-track { position: relative; height: 12px; background: var(--grey-100); border-radius: 6px; }
.cal-band-range { position: absolute; top: 0; height: 100%; border-radius: 6px; }
.cal-band-range.prior { background: var(--grey-200); }
.cal-band-range.now { background: var(--accent); opacity: .55; }
.cal-band-mark { position: absolute; top: -2px; height: 16px; width: 2px; border-radius: 1px; }
.cal-band-mark.prior { background: var(--grey-400); }
.cal-band-mark.now { background: var(--accent-deep); }
.cal-band-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; color: var(--grey-500); font-family: var(--font-mono); margin-top: 7px; }
.cal-band-legend b { color: var(--grey-900); font-weight: 600; }
.cal-band-prior-key { color: var(--grey-400); margin-left: auto; }

.cal-chart { margin-top: 8px; }
.cal-chart-h { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--grey-500); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10px; color: var(--grey-600); font-family: var(--font-mono); margin-top: 4px; }
.cal-legend i.cal-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cal-sw.prior { background: var(--accent-deep); }
.cal-sw.now { background: var(--accent-light); }
.cal-sw.tick { width: 2px; background: var(--navy); border-radius: 0; margin: 0 8px 0 4px; }

.cal-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--grey-700); line-height: 1.5; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grey-100); }
.cal-note .icn { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

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

/* Layer-title feature strip (lp-feat-*) — consistent feature launchers anchored under each layer title */
.lp-feat-strip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.lp-feat { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 12px; cursor: pointer; line-height: 1.2; }
.lp-feat:hover { background: var(--accent); color: var(--on-accent-ink, #fff); }
.lp-feat.on { background: var(--accent); color: var(--on-accent-ink, #fff); box-shadow: inset 0 0 0 1px var(--accent-deep); }   /* active in-shell feature */
.lp-feat.on .lp-feat-arr { opacity: .9; }
.lp-feat-arr { font-weight: 400; opacity: .7; }

/* ===== Action Queue (aq-*) — the My-Tasks daily-driver (Pattern C + Radar) ===== */
.aq-wrap { max-width: 920px; }
.aq-toolbar { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.aq-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--green); }
.aq-toggle { display: inline-flex; border: 1px solid var(--grey-200); border-radius: 8px; overflow: hidden; }
.aq-toggle button { border: none; background: var(--surface); color: var(--grey-600); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.aq-toggle button.active { background: var(--navy); color: #fff; }
.aq-toggle button:not(.active):hover { background: var(--grey-50); }
.aq-mobile-note { display: none; font-size: 12px; color: #92400E; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.30); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }

/* urgency groups */
.aq-group { margin-bottom: 18px; background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden; border-left: 3px solid var(--grey-300); }
.aq-tier-blocking  { border-left-color: var(--red); }
.aq-tier-blocked   { border-left-color: var(--purple); }
.aq-tier-overdue   { border-left-color: var(--orange); }
.aq-tier-thisweek  { border-left-color: var(--yellow); }
.aq-tier-advisory  { border-left-color: var(--blue); }
.aq-group-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-700); border-bottom: 1px solid var(--grey-100); }
.aq-group-icon { font-size: 14px; }
.aq-group-count { margin-left: auto; background: var(--grey-100); color: var(--grey-600); font-size: 11px; padding: 1px 9px; border-radius: 10px; }
.aq-tier-blocking .aq-group-count { background: rgba(220,64,64,.12); color: var(--tag-red-fg); }
.aq-tier-overdue  .aq-group-count { background: rgba(249,115,22,.14); color: #9A3412; }

/* an action item */
.aq-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--grey-100); }
.aq-item:last-child { border-bottom: none; }
.aq-item:hover { background: var(--grey-50); }
.aq-item-main { flex: 1; min-width: 0; }
.aq-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.aq-item-proj { font-size: 10px; font-weight: 700; color: var(--text-strong); background: var(--grey-100); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.aq-item-label { font-size: 13.5px; font-weight: 600; color: var(--grey-900); }
.aq-item-sub { font-size: 11px; color: var(--grey-500); margin-top: 2px; }
.aq-dim { color: var(--grey-500); }
.aq-code { font-family: var(--font-mono); font-size: 10px; color: var(--blue); font-weight: 600; }
.aq-var { font-family: var(--font-mono); font-size: 10px; color: var(--grey-400); }
.aq-hot { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--orange); background: rgba(249,115,22,.10); padding: 1px 5px; border-radius: 3px; }
.aq-when { font-weight: 600; color: var(--grey-700); }
.aq-when.late { color: var(--red); }
.aq-esc-badge { font-size: 9.5px; font-weight: 700; color: var(--red); background: rgba(220,64,64,.10); border: 1px solid rgba(220,64,64,.28); padding: 1px 7px; border-radius: 10px; }

.aq-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.aq-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; border: 1px solid var(--grey-300); background: var(--surface); color: var(--text-strong); transition: background .15s, border-color .15s; }
.aq-btn:hover { background: var(--grey-50); }
.aq-btn.primary { background: var(--navy); color: #fff; border-color: var(--text-strong); }
.aq-btn.primary:hover { background: var(--navy-2); }
.aq-btn.ghost { background: var(--surface); color: var(--grey-600); }

/* ClearanceSignal + EmptyState */
.aq-clear { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; color: var(--green); background: rgba(31,171,106,.05); }
.aq-clear span { font-weight: 700; }
.aq-empty { text-align: center; padding: 56px 24px; background: var(--surface); border: 1px solid var(--grey-200); border-radius: 12px; }
.aq-empty-mark { font-size: 34px; color: var(--green); }
.aq-empty-ttl { font-size: 18px; font-weight: 700; color: var(--text-strong); margin-top: 8px; }
.aq-empty-sub { font-size: 13px; color: var(--grey-500); margin-top: 4px; }

/* SnoozedFooter */
.aq-snoozed { margin-top: 6px; background: var(--surface); border: 1px dashed var(--grey-300); border-radius: 10px; padding: 4px 14px; }
.aq-snoozed summary { font-size: 12px; font-weight: 600; color: var(--grey-600); cursor: pointer; padding: 8px 0; }
.aq-snoozed-item { font-size: 12px; color: var(--grey-700); padding: 6px 0; border-top: 1px solid var(--grey-100); }

/* Pattern A: portfolio radar */
.aq-radar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aq-radar-card { background: var(--surface); border: 1px solid var(--grey-200); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.aq-radar-card:hover { border-color: var(--text-strong); box-shadow: 0 2px 10px rgba(15,27,61,.08); }
.aq-radar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.aq-radar-name { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.aq-radar-bar { height: 7px; background: var(--grey-100); border-radius: 4px; overflow: hidden; }
.aq-radar-bar i { display: block; height: 100%; border-radius: 4px; }
.aq-radar-stats { font-size: 12px; color: var(--grey-600); margin-top: 7px; }
.aq-radar-next { font-size: 11px; color: var(--grey-500); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--grey-100); }

/* form fields (render inside the shell/modal.js dialog) */
.aq-modal-input { width: 100%; box-sizing: border-box; border: 1px solid var(--grey-300); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; }
.aq-modal-input.aq-input-err { border-color: var(--red); }

@media (max-width: 700px) {
  .aq-item-actions { display: none; }   /* mobile = read-only */
  .aq-mobile-note { display: block; }
  .aq-radar { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .lrn-grid { grid-template-columns: 1fr; }
  .arc-metrics { grid-template-columns: repeat(2, 1fr); }
  .arc-pit-grid { grid-template-columns: 1fr; }
}

/* ── Nav badge (My Tasks topnav button) ──────────────────────────────────── */
.aq-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 1;
}

/* ── Project filter chips ─────────────────────────────────────────────────── */
.aq-filter-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; padding: 0 2px; }
.aq-filter-chip {
  border: 1px solid var(--line); background: none; border-radius: 12px;
  padding: 3px 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--dim); transition: border-color .12s, color .12s;
}
.aq-filter-chip.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.aq-filter-chip:hover:not(.active) { border-color: var(--purple); color: var(--purple); }

/* ── Today view extras ────────────────────────────────────────────────────── */
.aq-today-link { color: var(--blue); cursor: pointer; text-decoration: underline; font-size: 12px; }
.aq-today-link:hover { opacity: .8; }
/* "Needs attention" when all-clear gets green left border */
.aq-tier-attn-clear { border-left-color: var(--green) !important; }
/* Activity feed tier */
.aq-tier-activity { border-left-color: #94a3b8; }

/* ── Activity feed ─────────────────────────────────────────────────────────── */
.aq-activity-feed { padding: 4px 0; }
.aq-act-row {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 4px;
  border-bottom: 1px solid var(--line);
}
.aq-act-row:last-child { border-bottom: none; }
.aq-act-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; margin-top: 1px;
}
.aq-act-av.sys {
  background: var(--bg); border: 1px solid var(--line);
  color: var(--dim); font-size: 13px;
}
.aq-act-body  { flex: 1; min-width: 0; }
.aq-act-text  { font-size: 12px; color: var(--ink); line-height: 1.45; }
.aq-act-proj  { color: var(--purple); font-weight: 600; font-size: 11px; }
.aq-act-time  { font-size: 11px; color: var(--dim); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }

/* ── Capture Box — pre-bind additions ────────────────────────────────────── */
.cap-prebound-bar {
  background: rgba(245,158,11,.10); border-bottom: 1px solid rgba(245,158,11,.28);
  padding: 7px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: #92400E;
}
.cap-prebound-icon { font-size: 14px; flex-shrink: 0; }
.cap-prebound-text { flex: 1; min-width: 0; }
.cap-prebound-proj { color: var(--purple); font-weight: 600; }
.cap-prebound-var  {
  font-family: var(--font-mono); font-size: 10px;
  background: rgba(45,127,249,.08); color: var(--blue);
  padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(45,127,249,.18);
  flex-shrink: 0;
}
.cap-prebound-clear {
  font-size: 11px; color: var(--dim); cursor: pointer; background: none;
  border: none; text-decoration: underline; flex-shrink: 0;
}
.cap-quick-entry {
  background: var(--surface); border: 1px solid rgba(245,158,11,.25);
  border-radius: 7px; padding: 12px; margin-bottom: 10px;
}
.cap-quick-label {
  display: block; font-size: 11px; color: var(--dim); font-weight: 600;
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: .04em;
}
.cap-quick-input {
  width: 100%; border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  background: var(--surface); margin-bottom: 8px; display: block;
}
.cap-quick-accept {
  width: 100%; background: var(--blue); border: none; border-radius: 6px;
  color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  padding: 9px 14px; cursor: pointer; display: block;
}
.cap-quick-accept:hover { opacity: .9; }
.cap-divider-or {
  text-align: center; position: relative; margin: 10px 0;
}
.cap-divider-or::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px solid var(--line);
}
.cap-divider-or span {
  position: relative; background: var(--surface); padding: 0 10px;
  font-size: 11px; color: var(--dim);
}

/* ── Welcome overlay (first-visit, post-auth) ──────────────────────────── */
.welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(15,27,61,0.70); z-index: 70;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.welcome-overlay.hidden { display: none; }
.welcome-card {
  width: 520px; max-width: 92vw; background: var(--surface); border-radius: 14px;
  padding: 32px 36px; box-shadow: 0 20px 60px rgba(15,27,61,0.22);
}
.welcome-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.welcome-mark { width: 30px; height: 34px; color: var(--text-strong); flex-shrink: 0; }
.welcome-card h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text-strong); }
.welcome-lede { color: var(--grey-700); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.welcome-card ul { padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--grey-900); margin: 0 0 20px; }
.welcome-card ul li { margin-bottom: 3px; }
.welcome-cta {
  display: block; width: 100%; padding: 12px 0;
  background: var(--navy); color: #fff; border: none; border-radius: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.2px;
}
.welcome-cta:hover { background: var(--navy-3); }
.welcome-foot { font-size: 11px; color: var(--grey-400); margin-top: 12px; text-align: center; }

/* ── Bookmark chips (topnav2 right side) ────────────────────────────────── */
.t2-bmarks { display: flex; align-items: center; gap: 5px; margin-right: 6px; }
.t2-bmark {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(45,127,249,0.08); border: 1px solid rgba(45,127,249,0.22);
  color: var(--blue); border-radius: 20px; padding: 3px 7px 3px 9px;
  font-size: 11px; cursor: pointer; white-space: nowrap; max-width: 164px;
  transition: background 0.12s; font-family: var(--font-sans);
}
.t2-bmark:hover { background: rgba(45,127,249,0.15); border-color: var(--blue); }
.t2-bmark-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.t2-bmark-x {
  font-size: 13px; color: var(--grey-400); background: none; border: none;
  cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
}
.t2-bmark-x:hover { color: var(--red); }

/* ── AI Co-pilot ────────────────────────────────────────────────────────── */
/* The launcher is the left-rail .copilot-rail button (see leftnav-footer); the
   old fixed bottom-right FAB was retired to keep the right edge uncluttered. */
.copilot-sidebar {
  position: fixed; top: 96px; right: 0; bottom: 0; width: 400px;
  background: var(--surface); border-left: 1px solid var(--grey-200);
  box-shadow: -6px 0 24px rgba(15,27,61,.10); z-index: 34;
  transform: translateX(110%); transition: transform 0.22s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.copilot-sidebar.open { transform: translateX(0); }
.copilot-head {
  padding: 14px 18px; border-bottom: 1px solid var(--grey-100);
  display: flex; align-items: center; justify-content: space-between;
}
.copilot-head-title { display: flex; align-items: center; gap: 8px; }
.copilot-head-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.copilot-head-name { font-weight: 600; font-size: 14px; }
.copilot-head-sub { font-size: 10px; color: var(--grey-500); font-family: var(--font-mono); }
.copilot-head-actions { display: flex; gap: 4px; }
.copilot-head-actions button {
  background: transparent; border: none; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; color: var(--grey-500); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.copilot-head-actions button:hover { background: var(--grey-100); color: var(--grey-900); }
.copilot-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.copilot-empty { text-align: center; padding: 24px 12px; }
.copilot-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.45; }
.copilot-empty-title { font-size: 14px; font-weight: 600; color: var(--grey-700); margin-bottom: 4px; }
.copilot-empty-body { font-size: 12px; line-height: 1.5; color: var(--grey-500); max-width: 280px; margin: 0 auto 16px; }
.copilot-suggestions { display: flex; flex-direction: column; gap: 6px; }
.copilot-suggestion-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--grey-500); font-family: var(--font-mono); margin-bottom: 4px;
}
.copilot-suggestion {
  background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; font-size: 12px; color: var(--grey-700);
  text-align: left; transition: background var(--motion-1) var(--ease-out), color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out), box-shadow var(--motion-1) var(--ease-out), transform var(--motion-1) var(--ease-out); font-family: var(--font-sans);
  display: block; width: 100%;
}
.copilot-suggestion:hover { background: var(--surface); border-color: var(--blue); color: var(--text-strong); transform: translateX(2px); }
.copilot-suggestion .cat {
  display: inline-block; font-size: 9px; font-family: var(--font-mono);
  padding: 1px 5px; border-radius: 3px; margin-right: 6px;
  background: var(--grey-100); color: var(--grey-500);
}
.copilot-message { margin-bottom: 14px; display: flex; gap: 8px; }
.copilot-message.user { justify-content: flex-end; }
.copilot-bubble {
  max-width: 88%; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap;
}
.copilot-message.user .copilot-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.copilot-message.ai .copilot-bubble { background: var(--grey-50); color: var(--grey-900); border: 1px solid var(--grey-100); border-bottom-left-radius: 4px; }
.copilot-bubble b { font-weight: 600; }
.copilot-input-wrap { border-top: 1px solid var(--grey-100); padding: 12px 18px; display: flex; align-items: center; gap: 8px; }
.copilot-input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--grey-200);
  border-radius: 8px; font-family: var(--font-sans); font-size: 13px; background: var(--grey-50);
}
.copilot-input:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.copilot-send {
  background: var(--navy); color: #fff; border: none; width: 36px; height: 36px;
  border-radius: 8px; cursor: pointer; font-size: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.copilot-send:hover { background: var(--navy-3); }
.copilot-foot-hint { font-size: 10px; color: var(--grey-500); padding: 4px 18px 10px; text-align: center; font-family: var(--font-mono); }
.copilot-thinking { display: flex; gap: 5px; align-items: center; padding: 4px 0; }
.copilot-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-300); animation: cp-think 1.1s ease-in-out infinite; }
.copilot-thinking span:nth-child(2) { animation-delay: 0.18s; }
.copilot-thinking span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cp-think { 0%,80%,100% { transform: scale(0.7); opacity: 0.35; } 40% { transform: scale(1.1); opacity: 1; } }
@media (max-width: 720px) { .copilot-sidebar { width: 90vw; top: 56px; } }

/* ===== Build Board — kanban for the meta-work of building SUIO/CHARA ===== */
.bb-page { max-width: 1600px; }
.bb-search { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 13px; width: 170px; background: var(--surface); color: var(--ink); }
.bb-search:focus { outline: none; border-color: var(--accent); }
.bb-filebadge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-strong); background: var(--grey-100); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; }

.bb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.bb-chip { display: inline-flex; align-items: center; gap: 6px; }
.bb-lane-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.bb-board { overflow-x: auto; padding-bottom: 8px; --bb-gutter: 132px; }
.bb-colhead-row, .bb-lane-row { display: grid; grid-template-columns: var(--bb-gutter) repeat(var(--bb-cols, 5), minmax(180px, 1fr)); gap: 10px; min-width: 760px; }
.bb-colhead-row { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 6px; }
.bb-colhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding: 6px 4px; }

.bb-lane-row { margin-bottom: 10px; align-items: stretch; }
.bb-lane-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-strong); padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); position: sticky; left: 0; }
.bb-lane-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--dim); background: var(--grey-100); border-radius: 20px; padding: 0 7px; }

.bb-cell { background: var(--grey-50); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; min-height: 64px; display: flex; flex-direction: column; gap: 8px; }
.bb-cell.bb-drop-hover { border-color: var(--accent); border-style: dashed; background: var(--accent-tint); }

.bb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(16,38,58,.05); transition: box-shadow .12s, transform .12s; }
.bb-card:hover { box-shadow: 0 3px 10px rgba(16,38,58,.12); transform: translateY(-1px); }
.bb-card.bb-dragging { opacity: .45; }
.bb-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.bb-pri { font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.bb-card-id { font-family: var(--font-mono); font-size: 10px; color: var(--grey-300); margin-left: auto; }
.bb-card-title { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.bb-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.bb-tag { font-size: 10px; font-family: var(--font-mono); color: var(--text-strong); background: var(--grey-100); border-radius: 4px; padding: 1px 5px; }
.bb-card-blocked { font-size: 10.5px; color: var(--red); margin-top: 6px; }
.bb-prompt-btn { font-size: 9.5px; font-family: var(--font-mono); background: var(--navy); color: #fff; border: none; border-radius: 3px; padding: 1px 6px; margin-top: 5px; cursor: pointer; display: inline-block; }
.bb-prompt-btn:hover { opacity: .8; }
.bb-chk-badge { font-size: 9.5px; font-family: var(--font-mono); background: var(--grey-100); color: var(--text-strong); border-radius: 3px; padding: 1px 5px; margin-left: auto; }
.bb-chk-badge.bb-chk-all { background: var(--teal, #0d9488); color: #fff; }
.bb-due { font-size: 9.5px; font-family: var(--font-mono); color: var(--dim); margin-left: 4px; }
.bb-due.bb-overdue { color: var(--red); font-weight: 600; }
.bb-chk-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.bb-chk-row .bb-chk-done { flex-shrink: 0; cursor: pointer; }
.bb-chk-row .bb-chk-text { flex: 1; font-size: 12px; padding: 3px 6px; }
.bb-chk-row .bb-chk-del { padding: 0 5px; font-size: 11px; min-width: unset; }
.bb-chk-add-row { display: flex; gap: 6px; margin-top: 6px; }
.bb-field-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--grey-500); margin-bottom: 6px; }

.bb-cell-add { align-self: flex-start; border: 1px dashed var(--grey-300); background: transparent; color: var(--dim); border-radius: var(--radius-sm); width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 14px; padding: 0; opacity: .45; transition: opacity .12s, border-color .12s, color .12s; }
.bb-cell:hover .bb-cell-add { opacity: 1; }
.bb-cell-add:hover { border-color: var(--accent); color: var(--accent); }

.bb-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bb-field > span { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.bb-field-row { display: flex; gap: 10px; }
.bb-field-row .bb-field { flex: 1; }
.bb-field-sm { max-width: 120px; flex: 0 0 auto; }
.bb-danger { color: var(--red); }
.bb-danger:hover { background: var(--tag-red-bg); }

.bb-done { opacity: .45; }
.bb-done:hover { opacity: .75; }
.bb-p0 .bb-card-title { font-weight: 600; }
.bb-cell[data-col="blocked"] { background: var(--tag-amber-bg); }

@media (max-width: 900px) { .bb-board { --bb-gutter: 96px; } }

/* ── Theme B: expressive polish ─────────────────────────────────────────────
   Adds fluid type, gradient meters, richer card lift, and a few accent washes
   to the Portfolio / Dashboard / Report surfaces. Hot SOP tree and field-row
   density surfaces are intentionally left at cockpit density. */

/* Fluid type scale — major page-level headings */
.portfolio-header h1 { font-size: clamp(22px, 3.5vw, 36px); letter-spacing: -.6px; }
.page-h              { font-size: clamp(18px, 2.8vw, 24px); }
.wiz-title           { font-size: clamp(20px, 3vw, 28px); }
.dash-hero h1        { font-size: clamp(20px, 3.2vw, 30px); }

/* Portfolio header: gradient text on the main title */
@supports (-webkit-background-clip: text) {
  .portfolio-header h1 {
    background: var(--grad-water);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
}

/* Project cards: more expressive hover lift */
.project-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.project-card:hover {
  border-color: var(--accent-light);
  box-shadow: 0 8px 28px rgba(79,139,217,.16), 0 2px 6px rgba(22,38,58,.06);
  transform: translateY(-3px);
}

/* Portfolio gate-seg: gradient on completed segments */
.gate-seg.done {
  background: var(--grad-water-h);
}

/* Dashboard hero: subtle water wash behind the heading area */
.dash-hero {
  background: linear-gradient(160deg, var(--surface) 65%, var(--accent-tint) 100%);
  border-color: rgba(79,139,217,.18);
}

/* SG stepper: gradient on done + active fills */
.sg-step.done  .sg-step-fill { background: var(--grad-water-h); }
.sg-step.active .sg-step-fill { background: var(--grad-orange); }
.sg-step.active .sg-step-bar  { box-shadow: 0 0 0 3px rgba(240,168,40,.12); }

/* Dashboard cards: lift transition */
.dash-card {
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dash-card:hover {
  border-color: rgba(79,139,217,.28);
  box-shadow: 0 6px 22px rgba(79,139,217,.10);
  transform: translateY(-2px);
}

/* Metric widgets (inside project dash) */
.metric-widget {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.metric-widget:hover {
  border-color: rgba(79,139,217,.28);
  box-shadow: 0 4px 16px rgba(79,139,217,.08);
}

/* Active folder-tab depth shadow (consolidated with the base .chara-block.active rule). */
.chara-block.active {
  background: var(--surface);
  color: var(--text-strong);
  border-color: #fff;
  box-shadow: -3px 0 12px rgba(22,38,58,.18);
}

/* Returns hero tile: gradient on the big IRR number */
@supports (-webkit-background-clip: text) {
  .rt-tile.rt-hero .v:not([class]) {
    background: var(--grad-water);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* Never override severity-coloured tiles */
.rt-tile.is-pos .v, .rt-tile.is-warn .v, .rt-tile.is-neg .v {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}

/* Report KPI tiles: hover lift */
.report-kpi-tile {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.report-kpi-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(79,139,217,.10);
  transform: translateY(-1px);
}

/* ── Report polish pass — craft refinements shared across the core detail reports.
   Alignment, depth, hierarchy only; the SAMPLE badge + live/export rail are untouched. */
/* Financial figures use tabular figures so columns line up cleanly */
.report-table .mono, .report-table .right, .report-kpi-value,
.report-draw-value, .report-draw-highlight-amount, .report-progress-pct { font-variant-numeric: tabular-nums; }

/* KPI tiles — a subtle surface + a hair of depth (keeps the existing hover lift) */
.report-kpi-tile { background: linear-gradient(180deg, var(--surface), var(--grey-50)); box-shadow: 0 1px 2px rgba(16,38,58,.04); }
.report-kpi-value { font-size: 23px; line-height: 1.12; }
.report-kpi-label { margin-top: 4px; }

/* Section cards — lift them a touch off the white page */
.report-section { box-shadow: 0 1px 2px rgba(16,38,58,.04); }

/* Tables — header tint, row hover, footer tint */
.report-table thead th { background: var(--grey-50); border-bottom-color: var(--grey-300); }
.report-table tbody tr { transition: background .12s ease; }
.report-table tbody tr:hover { background: var(--accent-tint); }
.report-table tfoot td { background: var(--grey-50); }

/* Report header — anchor the title with a short gradient rule */
.report-header { padding-bottom: 14px; border-bottom: 1px solid var(--grey-100); position: relative; }
.report-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent); }

/* Confidence footer — read as a left-accent callout */
.report-confidence { border-left: 3px solid var(--accent); }

/* Hot nav gate-fill: orange gradient to match the layer color */
.hot-nav-gate-fill {
  background: var(--grad-orange);
}

/* Hot SOP navigator: completion minibar with teal gradient */
.hn-minibar-f {
  background: var(--grad-green);
}

/* Leftnav project pill: green gradient on completion bar */
.apl-bar-fill {
  background: var(--grad-green);
}

/* Scope bar stat fill: water gradient */
.pb-stat-fill {
  background: var(--grad-water-h);
}

/* Gate readiness bar */
.gs-bar > i {
  background: var(--grad-water-h);
}

/* Gate pass banner: accent left strip */
.gate-pass {
  border-left: 3px solid var(--green);
}

/* Primary action buttons: gradient fill (water) */
.btn-advance,
.pit-modal-btn-save,
.hi-action-btn.primary,
.acf-btn.primary,
.wiz-btn.primary,
.dp-btn.primary,
.act-footer-btn.primary,
.aq-btn.primary,
.report-actions button.primary {
  background: var(--grad-water);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(46,94,158,.26);
  transition: filter .14s ease, box-shadow .14s ease;
}
.btn-advance:hover,
.pit-modal-btn-save:hover,
.hi-action-btn.primary:hover,
.acf-btn.primary:hover,
.wiz-btn.primary:hover,
.dp-btn.primary:hover,
.act-footer-btn.primary:hover,
.aq-btn.primary:hover,
.report-actions button.primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 4px 14px rgba(46,94,158,.36);
}
/* Keep the existing navy topnav default button style; only gradient the explicit .primary */
/* btn-advance is disabled when gate not ready — preserve that state */
.btn-advance:disabled {
  background: #8fceb3;
  box-shadow: none;
  filter: none;
}

/* Scope bar tracker chips: accent-tint wash on hover */
.pb-tracker:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
}

/* Portfolio view-toggle active: water gradient */
.portfolio-view-toggle button.active {
  background: var(--grad-water);
  border-color: transparent;
}

/* Archive project row: accent hover */
.arc-project-row:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(79,139,217,.10);
}

/* Persistent layer panel: backdrop is decorative only — clicks pass through */
.layer-panel-backdrop.open {
  pointer-events: none;
  opacity: 0;
}

/* Scroll-reveal stub — class toggled by IntersectionObserver in main.js.
   Elements with .rv start hidden; .rv-in is added when they enter viewport. */
.rv {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1),
              transform .42s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.rv.rv-in {
  opacity: 1;
  transform: translateY(0);
}
.rv-stagger .rv:nth-child(1) { transition-delay: 0s; }
.rv-stagger .rv:nth-child(2) { transition-delay: .06s; }
.rv-stagger .rv:nth-child(3) { transition-delay: .12s; }
.rv-stagger .rv:nth-child(4) { transition-delay: .18s; }
.rv-stagger .rv:nth-child(5) { transition-delay: .24s; }
.rv-stagger .rv:nth-child(6) { transition-delay: .30s; }

/* ============================================================ VAR Planner (mind-map decision tree) */
/* The "Plan" chip on a VAR editor row — reflects saved plan status. */
.plan-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px 1px 5px;
  font: 600 10px/1.5 var(--font-sans); color: var(--accent-deep); background: var(--accent-tint);
  border: 1px solid var(--accent-light); border-radius: 999px; cursor: pointer; vertical-align: middle;
  transition: background .12s, border-color .12s, color .12s; }
.plan-chip .icn { width: 12px; height: 12px; }
.plan-chip:hover { background: var(--accent); color: var(--on-accent-ink, #fff); border-color: var(--accent); }
.plan-chip.plan-pinned    { background: var(--accent); color: var(--on-accent-ink, #fff); border-color: var(--accent); }
.plan-chip.plan-submitted { background: var(--gap-bg); color: var(--gap-text); border-color: var(--gap-border); }
.plan-chip.plan-final     { background: rgba(31,171,106,.14); color: #157a4b; border-color: var(--green); }
.plan-chip.plan-draft     { background: var(--grey-100); color: var(--grey-600); border-color: var(--grey-300); }
.plan-chip.plan-shared    { background: var(--surface); color: var(--grey-600); border: 1px dashed var(--grey-300); }
.plan-chip.plan-shared:hover { background: var(--accent); color: var(--on-accent-ink, #fff); border-style: solid; border-color: var(--accent); }

/* Widen the shared modal shell for the planner */
.pit-modal.planner-modal { width: 980px; max-width: 96vw; }
.pln { display: flex; flex-direction: column; max-height: 88vh; }
.pln-head { background: var(--navy); color: #fff; padding: 14px 18px; display: flex; align-items: flex-start; gap: 10px; }
.pln-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pln-title .icn { color: var(--accent-light); }
.pln-sub { font-size: 11px; color: rgba(255,255,255,.62); margin-top: 3px; }
.pln-close { margin-left: auto; cursor: pointer; font-size: 22px; line-height: 1; color: rgba(255,255,255,.7); }
.pln-close:hover { color: #fff; }
.pln-context { font-size: 11px; color: var(--grey-600); background: var(--grey-50); border-bottom: 1px solid var(--line);
  padding: 9px 18px; line-height: 1.5; }
.pln-illus { display: inline-block; font: 700 9px/1 var(--font-sans); letter-spacing: .5px; color: var(--gap-text);
  background: var(--gap-bg); border: 1px solid var(--gap-border); border-radius: 4px; padding: 3px 5px; margin-right: 7px; vertical-align: middle; }

/* Stepping-stone rail */
.pln-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.pln-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font: 600 11px var(--font-sans);
  color: var(--grey-700); background: var(--grey-100); border: 1px solid var(--grey-200); border-radius: 999px; cursor: pointer;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pln-step .icn { color: var(--accent); flex: none; }
.pln-step:hover { border-color: var(--accent); color: var(--accent-deep); }
.pln-step.current { background: var(--accent); color: var(--on-accent-ink, #fff); border-color: var(--accent); }
.pln-step.current .icn { color: #fff; }
.pln-step.free { font-style: italic; }
.pln-step-next { background: transparent; border-style: dashed; color: var(--grey-500); cursor: default; }
.pln-step-next:hover { border-color: var(--grey-300); color: var(--grey-500); }
.pln-sep { color: var(--grey-300); display: inline-flex; }

/* Stage + option cards */
.pln-stage { padding: 14px 18px; overflow-y: auto; flex: 1; }
.pln-prompt { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.pln-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 11px; align-items: start; }
.pln-card { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface);
  border: 1px solid var(--grey-200); border-radius: 10px; cursor: pointer; font-family: inherit;
  transition: border-color .12s, box-shadow .12s, transform .08s; }
.pln-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(79,139,217,.14); transform: translateY(-1px); }
.pln-card-leaf { border-left: 3px solid var(--green); }
.pln-card-h { display: flex; align-items: flex-start; gap: 6px; }
.pln-card-t { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; }
.pln-card-go { color: var(--grey-400); display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; flex: none; }
.pln-card-leaf .pln-card-go { color: var(--green); }
.pln-card-tag { font-size: 11px; color: var(--grey-500); margin-top: -2px; }
.pln-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.pln-stat { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--grey-100); color: var(--grey-700); white-space: nowrap; }
.pln-stat i { font-style: normal; color: var(--grey-500); margin-right: 4px; }
.pln-stat sup { color: var(--grey-400); margin-left: 1px; font-weight: 700; }
.pln-stat--good { background: rgba(31,171,106,.12); color: #157a4b; } .pln-stat--good i { color: #1a9460; }
.pln-stat--warn { background: var(--gap-bg); color: var(--gap-text); } .pln-stat--warn i { color: #a9802a; }
.pln-stat--bad  { background: rgba(220,64,64,.10); color: #c0392b; } .pln-stat--bad i { color: #cf5b4e; }
.pln-stat--info { background: var(--accent-tint); color: var(--accent-deep); } .pln-stat--info i { color: var(--accent); }
.pln-stat--gated { background: repeating-linear-gradient(45deg, var(--gap-bg), var(--gap-bg) 5px, var(--tag-amber-bg) 5px, var(--tag-amber-bg) 10px);
  color: var(--gap-text); border: 1px dashed var(--gap-border); }
.pln-stat--dated { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.pln-card-detail { font-size: 11px; color: var(--grey-600); line-height: 1.45; }
.pln-card.pln-rec { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pln-rec-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-tint); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.pln-spine-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); margin: 0 0 12px; }
.pln-spine-note svg { color: var(--accent); flex: 0 0 auto; }
.pln-spine-stage { color: var(--accent-deep); font-weight: 600; }
.pln-spine-verify { font-size: 11px; color: var(--grey-500); font-style: italic; margin: 0 0 12px; }
.pln-state-note { font-size: 11px; color: var(--grey-500); font-style: italic; margin: 0 0 10px; }
.pln-divergence, .pln-sibling-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px;
  background: var(--gap-bg); color: var(--gap-text); border: 1px solid var(--gap-border); border-radius: 8px; font-size: 12px; line-height: 1.5; }
.pln-divergence { margin: 0 0 14px; }
.pln-sibling-note { margin: 10px 18px 0; }
.pln-divergence svg, .pln-sibling-note svg { color: var(--gap-text); flex: 0 0 auto; margin-top: 2px; }
.pln-divergence ul { margin: 5px 0 0; padding-left: 16px; }
.pln-sibling-acts { display: flex; gap: 8px; margin-top: 7px; }
.pln-act-sm { font: 600 11px var(--font-sans); padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--gap-border); background: var(--surface); color: var(--gap-text); }
.pln-act-sm:hover { border-color: var(--accent); color: var(--accent-deep); }
.pln-act-ghost { background: transparent; border-color: transparent; text-decoration: underline; }
/* Pre-answered chain (spine-milestones S5): an OFFER, never a decision. Tinted with the accent
   family rather than the gap/warning family - it is help, not a problem to fix. */
.pln-pre { border: 1px solid var(--accent-light); background: var(--accent-tint); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px; font-size: 12px; line-height: 1.5; }
.pln-pre-h { display: flex; gap: 7px; align-items: flex-start; color: var(--ink); }
.pln-pre-h svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.pln-pre-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pln-pre-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 5px 8px; background: var(--surface); border-radius: 6px; }
.pln-pre-q { color: var(--dim); font-size: 11.5px; }
.pln-pre-a { font-weight: 600; color: var(--accent-deep); grid-column: 1; }
.pln-pre-why { grid-row: 1 / span 2; grid-column: 2; font: 500 10.5px var(--font-mono);
  color: var(--grey-500); text-align: right; align-self: center; }
.pln-pre-acts { display: flex; gap: 8px; margin-top: 9px; }
.pln-pre-btn { font: 600 11.5px var(--font-sans); padding: 5px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent-ink); }
.pln-pre-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.pln-pre-skip { font: 500 11.5px var(--font-sans); padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--dim); text-decoration: underline; }
.pln-pre-skip:hover { color: var(--accent-deep); }
.pln-card-free { cursor: default; border-style: dashed; }
.pln-card-free:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.pln-free-row { display: flex; gap: 6px; margin-top: 2px; }
.pln-free-in { flex: 1; min-width: 0; padding: 6px 8px; font: inherit; font-size: 12px; border: 1px solid var(--grey-300); border-radius: 6px; }
.pln-free-btn { padding: 6px 12px; font: 600 12px var(--font-sans); color: var(--on-accent-ink, #fff); background: var(--accent); border: none; border-radius: 6px; cursor: pointer; }
.pln-free-btn:hover { background: var(--accent-deep); }

/* Objective summary */
.pln-obj { max-width: 640px; }
.pln-obj-flag { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--font-sans); text-transform: uppercase;
  letter-spacing: .4px; color: var(--green); margin-bottom: 6px; }
.pln-obj-name { font-size: 18px; font-weight: 700; color: var(--ink); }
.pln-obj-path { font-size: 12px; color: var(--grey-600); margin: 8px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pln-sum-sep { color: var(--grey-300); display: inline-flex; }
.pln-obj-sub { font-size: 11.5px; color: var(--grey-500); line-height: 1.5; margin: 7px 0 14px; }
/* Decided-path flow diagram: stacked decision boxes joined by down-arrows */
.pln-flow { list-style: none; margin: 0 0 16px; padding: 0; max-width: 540px; }
.pln-flow-step { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 11px 13px; box-shadow: 0 1px 2px rgba(22,38,58,.04); }
.pln-flow-step + .pln-flow-step { margin-top: 28px; }
.pln-flow-step + .pln-flow-step::before { content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 15px; background: var(--grey-300); transform: translateX(-50%); }
.pln-flow-step + .pln-flow-step::after { content: ""; position: absolute; left: 50%; top: -13px; width: 9px; height: 9px;
  border-right: 2px solid var(--grey-300); border-bottom: 2px solid var(--grey-300); transform: translate(-50%, 0) rotate(45deg); }
.pln-flow-step.obj { border-color: var(--green); background: rgba(31,171,106,.05); }
.pln-flow-q { font-size: 11.5px; color: var(--grey-600); line-height: 1.4; margin-bottom: 8px; }
.pln-flow-pick { display: flex; align-items: center; gap: 10px; }
.pln-flow-marker { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent-deep); }
.pln-flow-step.obj .pln-flow-marker { background: rgba(31,171,106,.14); color: #157a4b; }
.pln-flow-pbody { flex: 1; min-width: 0; }
.pln-flow-pick-l { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pln-flow-step.obj .pln-flow-pick-l { color: #157a4b; }
.pln-flow-step.free .pln-flow-pick-l { font-style: italic; }
.pln-flow-pick-t { display: block; font-size: 11px; color: var(--grey-500); margin-top: 2px; }
.pln-flow-edit { flex: none; align-self: center; font: 600 11px var(--font-sans); color: var(--grey-500); background: transparent;
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.pln-flow-edit:hover { border-color: var(--accent); color: var(--accent-deep); }
.pln-flow-note { margin: 9px 0 0 36px; }
.pln-flow-note-lbl { display: inline-flex; align-items: center; gap: 4px; font: 700 9px var(--font-sans); letter-spacing: .4px;
  text-transform: uppercase; color: var(--grey-400); margin-bottom: 3px; }
.pln-flow-note-lbl .icn { width: 11px; height: 11px; }
.pln-flow-note-in { width: 100%; box-sizing: border-box; padding: 6px 9px; font: inherit; font-size: 12px; line-height: 1.45;
  color: var(--grey-700); background: var(--grey-50); border: 1px solid var(--line); border-radius: 7px; resize: vertical; min-height: 30px; }
.pln-flow-note-in:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pln-flow-note-in::placeholder { color: var(--grey-400); }
.pln-act-export { color: var(--grey-600); }
.pln-act-export:hover { border-color: var(--accent); color: var(--accent-deep); }
/* Plan → value binding: write the objective into the VAR so plan + value stay in lockstep */
.pln-apply { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 16px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--grey-50); }
.pln-apply.on { border-color: var(--green); background: rgba(31,171,106,.06); }
.pln-apply-lbl { font: 700 9.5px var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--grey-500); }
.pln-apply-val { font-size: 13px; font-weight: 700; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.pln-apply-btn { display: inline-flex; align-items: center; gap: 3px; font: 600 12px var(--font-sans); cursor: pointer;
  background: var(--accent); color: var(--on-accent-ink, #fff); border: 1px solid var(--accent); border-radius: 7px; padding: 5px 12px; white-space: nowrap; }
.pln-apply-btn:hover { background: var(--accent-deep); }
.pln-apply-ok { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px var(--font-sans); color: #157a4b; white-space: nowrap; }
.pln-apply-ok .icn { width: 13px; height: 13px; }
.pln-apply-hint { font-size: 11px; color: var(--grey-500); font-style: italic; white-space: nowrap; }
.pln-obj-lbl { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--grey-400); }
.pln-rationale { width: 100%; min-height: 64px; margin-top: 5px; padding: 8px 10px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--grey-300); border-radius: 8px; resize: vertical; box-sizing: border-box; }
.pln-obj-note { font-size: 11px; color: var(--grey-500); line-height: 1.5; margin-top: 10px; }

/* SUIO.AI advisory section — opt-in, read-only AI read on the decided plan (Layer 2) */
.pln-adv { margin: 4px 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--layer-ai) 5%, transparent); }
.pln-adv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pln-adv-title { display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px var(--font-sans);
  letter-spacing: .5px; text-transform: uppercase; color: var(--layer-ai); }
.pln-adv-title .icn { width: 13px; height: 13px; }
.pln-adv-grow { flex: 1 1 auto; }
.pln-adv-btn { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px var(--font-sans); cursor: pointer;
  color: #fff; background: var(--layer-ai); border: 1px solid var(--layer-ai); border-radius: 8px; padding: 4px 11px; }
.pln-adv-btn:hover { filter: brightness(1.06); }
.pln-adv-btn .icn { width: 12px; height: 12px; }
.pln-adv-prem { color: var(--layer-ai); background: color-mix(in srgb, var(--layer-ai) 12%, transparent);
  border-color: color-mix(in srgb, var(--layer-ai) 34%, transparent); }
.pln-adv-prem:hover { background: color-mix(in srgb, var(--layer-ai) 18%, transparent); filter: none; }
.pln-adv-empty { font-size: 12px; color: var(--dim); line-height: 1.5; font-style: italic; }
.pln-adv-loading { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--layer-ai); font-style: italic; }
.pln-adv-loading .icn { width: 13px; height: 13px; }
/* Refusal / failure panel (advisory_result.js). Deliberately NOT styled like .pln-adv-empty: a
   custody stop reading as a quiet italic empty state is the defect this exists to fix. Tokens +
   color-mix only, so it themes with the rest (hardening axis 9, audit_darkmode). */
.pln-adv-blocked { font-size: 12px; line-height: 1.5; border-radius: 8px; padding: 9px 11px;
  color: var(--text-strong); background: color-mix(in srgb, var(--red) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent); }
.pln-adv-blocked-t { font: 600 11.5px var(--font-sans); color: var(--red); margin-bottom: 3px; }
.pln-adv-blocked-m { color: var(--text-strong); }
.pln-adv-blocked-n { margin-top: 5px; font-size: 11px; color: var(--dim); }
.pln-adv-remedy { margin-top: 5px; font-size: 11px; color: var(--dim); }
.pln-adv-remedy code { font-family: var(--font-mono); font-size: 10.5px;
  background: color-mix(in srgb, var(--dim) 14%, transparent); border-radius: 4px; padding: 1px 4px; }

/* SUIO.AI generative draft modal (Hive) */
.pk-aidraft { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.pk-aidraft-lbl { font: 700 9.5px var(--font-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--grey-500); margin-top: 6px; }
.pk-aidraft-opt { color: var(--grey-400); font-weight: 500; }
.pk-aidraft-in { width: 100%; padding: 7px 10px; font: inherit; font-size: 13px; box-sizing: border-box;
  border: 1px solid var(--grey-300); border-radius: 8px; resize: vertical; }
.pk-aidraft-in:focus { outline: none; border-color: var(--layer-ai); }
.pk-aidraft-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.pk-aidraft-note { font-size: 11px; color: var(--grey-500); font-style: italic; }
.pk-aidraft-prev { margin-top: 12px; }
.pk-aidraft-prevh { display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px var(--font-mono);
  letter-spacing: .5px; text-transform: uppercase; color: var(--layer-ai); margin-bottom: 6px; }
.pk-aidraft-prevh .icn { width: 13px; height: 13px; }

/* Foot: status badge + governance actions */
.pln-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--grey-100);
  background: var(--surface); flex-wrap: wrap; }
.pln-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 11px var(--font-sans); padding: 4px 10px; border-radius: 999px; }
.pln-badge .icn { width: 12px; height: 12px; }
.pln-none { color: var(--grey-500); background: var(--grey-100); }
.pln-draft { color: var(--grey-700); background: var(--grey-100); }
.pln-pinned { color: var(--on-accent-ink, #fff); background: var(--accent); }
.pln-submitted { color: var(--gap-text); background: var(--gap-bg); border: 1px solid var(--gap-border); }
.pln-final { color: #157a4b; background: rgba(31,171,106,.14); border: 1px solid var(--green); }
.pln-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pln-foot-hint { font-size: 11px; color: var(--grey-500); }
.pln-act { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; font: 600 12px var(--font-sans);
  border-radius: 7px; cursor: pointer; border: 1px solid var(--grey-300); background: var(--surface); color: var(--grey-700); }
.pln-act .icn { width: 13px; height: 13px; }
.pln-act:hover { border-color: var(--accent); color: var(--accent-deep); }
.pln-act-pin { background: var(--accent); border-color: transparent; color: var(--on-accent-ink, #fff); }
.pln-act-pin:hover { background: var(--accent-deep); color: #fff; }
.pln-act-final { border-color: var(--green); color: #157a4b; }
.pln-act-final:hover { background: rgba(31,171,106,.12); color: #157a4b; }
.pln-act-draft { font-size: 11px; }
@media (max-width: 640px) { .pln-cards { grid-template-columns: 1fr; } .pln-acts { margin-left: 0; } }

/* ── Planner indicators on the SOP spine (hot-exec) ──────────────────────────── */
.hn-plan { display: inline-flex; align-items: center; margin-left: 6px; color: var(--accent); opacity: .8; flex: 0 0 auto; }
.hn-plan svg { width: 11px; height: 11px; }
.hn-plan-pinned, .hn-plan-submitted, .hn-plan-final { opacity: 1; }
.hn-plan-final { color: var(--green); }
.hn-plan-shared { opacity: 1; color: var(--grey-500); }
.tws-planners { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.tws-plan-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11.5px; font-weight: 600;
  border: 1px solid rgba(108,92,231,.35); background: rgba(108,92,231,.08); color: var(--accent); border-radius: 8px; padding: 4px 9px; }
.tws-plan-chip:hover { background: rgba(108,92,231,.16); }
.tws-plan-name { color: var(--ink, inherit); }
.tws-plan-st { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 6px;
  background: rgba(108,92,231,.16); color: var(--accent); }
.tws-plan-new .tws-plan-st { background: var(--grey-100); color: var(--grey-500); }
.tws-plan-pinned .tws-plan-st, .tws-plan-final .tws-plan-st { background: rgba(31,171,106,.16); color: #157a4b; }
.tws-plan-chip.tws-plan-shared { border-style: dashed; border-color: var(--grey-300); background: var(--surface); color: var(--grey-600); }
.tws-plan-shared .tws-plan-st { background: var(--grey-100); color: var(--grey-500); }
/* Marching orders — read-only directive from an approved (Final) plan pegged to this task */
.tws-dir { border: 1px solid var(--green); border-left: 3px solid var(--green); background: rgba(31,171,106,.05);
  border-radius: 9px; padding: 11px 13px; margin: 0 0 14px; }
.tws-dir-h { display: flex; align-items: center; gap: 7px; font: 700 11px var(--font-sans); letter-spacing: .4px;
  text-transform: uppercase; color: #157a4b; }
.tws-dir-h .icn { width: 13px; height: 13px; }
.tws-dir-tag { font-size: 9px; font-weight: 700; background: #157a4b; color: #fff; border-radius: 5px; padding: 1px 6px; letter-spacing: .06em; }
.tws-dir-src { margin-left: auto; font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--grey-500); }
.tws-dir-obj { font-size: 14px; font-weight: 700; color: var(--ink); margin: 7px 0 8px; }
.tws-dir-path { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: dir; }
.tws-dir-path li { position: relative; padding: 3px 0 3px 22px; counter-increment: dir; }
.tws-dir-path li::before { content: counter(dir); position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  font: 700 9px var(--font-sans); display: inline-flex; align-items: center; justify-content: center;
  background: rgba(31,171,106,.16); color: #157a4b; border-radius: 50%; }
.tws-dir-step { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.tws-dir-note { display: block; font-size: 11.5px; color: var(--grey-600); margin-top: 2px; white-space: pre-wrap; }
.tws-dir-open { display: inline-flex; align-items: center; gap: 3px; font: 600 11.5px var(--font-sans); cursor: pointer;
  background: var(--surface); color: #157a4b; border: 1px solid var(--green); border-radius: 7px; padding: 4px 11px; }
.tws-dir-open:hover { background: rgba(31,171,106,.1); }
/* SUIO.AI read inside the marching-orders directive (Layer 2, read-only) */
.tws-dir-ai:empty { display: none; }
.tws-dir-ai { margin-top: 11px; }
.tws-dir-ai-h { display: inline-flex; align-items: center; gap: 5px; font: 700 9px var(--font-mono);
  letter-spacing: .6px; text-transform: uppercase; color: var(--layer-ai); margin-bottom: 6px; }
.tws-dir-ai-h .icn { width: 12px; height: 12px; }
/* Plan-alignment guardrail — soft on-plan / pending / check signal (deterministic, Layer 1) */
.tws-align { display: inline-flex; align-items: center; gap: 3px; font: 700 9.5px var(--font-sans); letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-left: 7px; white-space: nowrap; }
.tws-align .icn { width: 11px; height: 11px; }
.tws-align-on { background: rgba(31,171,106,.14); color: #157a4b; }
.tws-align-pending { background: var(--accent-tint); color: var(--accent-deep); }
.tws-align-check { background: var(--gap-bg); color: var(--gap-text); border: 1px solid var(--gap-border); }
.tws-dir-align { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px var(--font-sans); margin: 0 0 9px;
  padding: 5px 9px; border-radius: 7px; }
.tws-dir-align .icn { width: 12px; height: 12px; }
.tws-dir-align.tws-align-on { background: rgba(31,171,106,.1); color: #157a4b; }
.tws-dir-align.tws-align-pending { background: var(--accent-tint); color: var(--accent-deep); }
.tws-dir-align.tws-align-check { background: var(--gap-bg); color: var(--gap-text); }

/* Task inputs: compact audit grid. Evidence is task-scoped and deliberately does not attribute files to a field. */
.sop-inputs-panel { margin: 0 0 16px; }
.sop-inputs-panel__header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sop-inputs-panel__header h3 { margin: 0; font-size: 14px; color: var(--text-strong); }
.sop-inputs-panel__evidence { margin-left: auto; font: 700 9.5px var(--font-sans); letter-spacing: .03em; color: var(--tag-blue-fg); background: var(--tag-blue-bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }
.sop-inputs-panel__evidence--error { color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--surface)); border-color: color-mix(in srgb, var(--orange) 35%, var(--line)); }
.sop-inputs-panel__grid { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.sop-inputs-panel__columns, .sop-inputs-panel__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(96px, .8fr) minmax(64px, .42fr) minmax(80px, .5fr); align-items: center; }
.sop-inputs-panel__columns { padding: 6px 9px; background: var(--grey-50); border-bottom: 1px solid var(--line); font: 700 9px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500); }
.sop-inputs-panel__row { min-height: 38px; border-bottom: 1px solid var(--line); }
.sop-inputs-panel__row:last-child { border-bottom: 0; }
.sop-inputs-panel__row--missing { background: var(--tag-blue-bg); }
.sop-inputs-panel__row--not-applicable { background: var(--grey-50); }
.sop-inputs-panel__row--editable { cursor: pointer; transition: background var(--motion-1); }
.sop-inputs-panel__row--editable:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.sop-inputs-panel__row--missing.sop-inputs-panel__row--editable:hover { background: color-mix(in srgb, var(--accent) 14%, var(--tag-blue-bg)); }
.sop-inputs-panel__input-cell { min-width: 0; }
.sop-inputs-panel__input { width: 100%; min-width: 0; padding: 8px 9px; border: 0; background: transparent; color: var(--text-strong); text-align: left; font: 600 12px var(--font-sans); cursor: pointer; }
.sop-inputs-panel__input:hover:not(:disabled), .sop-inputs-panel__row--editable:hover .sop-inputs-panel__input { color: var(--accent-deep); text-decoration: underline; }
.sop-inputs-panel__input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sop-inputs-panel__input:disabled { cursor: default; color: var(--grey-600); }
.sop-inputs-panel__value, .sop-inputs-panel__unit, .sop-inputs-panel__status { padding: 8px 9px; font-size: 12px; color: var(--grey-700); overflow-wrap: anywhere; }
.sop-inputs-panel__unit { font: 500 10.5px/1.3 var(--font-mono); color: var(--grey-600); letter-spacing: .01em; }
.sop-inputs-panel__unit--unset, .sop-inputs-panel__unit--unresolved { font-family: var(--font-sans); font-size: 10.5px; font-style: italic; color: var(--grey-500); }
.sop-inputs-panel__unit--none { font-family: var(--font-sans); color: var(--grey-400); }
.sop-inputs-panel__status { font-size: 11px; color: var(--grey-500); }
.sop-inputs-panel__row--missing .sop-inputs-panel__value, .sop-inputs-panel__row--missing .sop-inputs-panel__status { color: var(--tag-blue-fg); }
.sop-inputs-panel__row--read-only .sop-inputs-panel__status { color: var(--grey-600); }
.sop-inputs-panel__hint, .sop-inputs-panel__empty { margin: 7px 0 0; font-size: 11px; line-height: 1.45; color: var(--grey-500); }
.sop-inputs-panel__error:empty { display: none; }
.sop-inputs-panel__error { margin: 7px 0 0; font-size: 12px; color: var(--orange); }
@media (max-width: 640px) {
  .sop-inputs-panel__columns { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sop-inputs-panel__row { grid-template-columns: 1fr; gap: 1px; padding: 7px 9px; }
  .sop-inputs-panel__input, .sop-inputs-panel__value, .sop-inputs-panel__unit, .sop-inputs-panel__status { padding: 0; }
  .sop-inputs-panel__value::before { content: 'Recorded value: '; color: var(--grey-500); }
  .sop-inputs-panel__unit::before { content: 'Unit: '; font-family: var(--font-sans); color: var(--grey-500); }
  .sop-inputs-panel__status { font-size: 10.5px; }
}

/* ── Dark-mode component overrides ──────────────────────────────────────────────────────────────
   Status pills / badges hardcode a dark ink chosen for a pale tint; in dark mode the tint (or the
   surface beneath it) goes dark, so the ink must lift to a light tone. Solid pale-hex pills are also
   re-tinted translucent. These only apply under [data-theme="dark"], so light mode is untouched.
   NOTE: the .tws-pill-sg* and .conf.high/med/low dark overrides formerly here were removed once
   those rules were rewired to the --tag-* token pairs (tokens.css), which flip on their own. */
[data-theme="dark"] .permit-status-pill.approved,
[data-theme="dark"] .audit-type-chip.approval,
[data-theme="dark"] .report-detail-badge-live,
[data-theme="dark"] .dscr-cell-val.pass,
[data-theme="dark"] .milestone-status.complete,
[data-theme="dark"] .act-live-badge,
[data-theme="dark"] .arc-status-chip.cod,
[data-theme="dark"] .arc-row-metric.cod-metric,
[data-theme="dark"] .gate-pass,
[data-theme="dark"] .tws-align-on,
[data-theme="dark"] .tws-dir-align.tws-align-on { color:#6ee7b7; }
[data-theme="dark"] .arc-status-chip.sold,
[data-theme="dark"] .arc-row-metric.sold-metric { color:#5fd3c4; }
[data-theme="dark"] .act-shell-badge { color:#f3cd84; }
[data-theme="dark"] .arc-status-chip.terminated,
[data-theme="dark"] .arc-row-metric.terminated-metric { color:#f3a0a0; }
/* the "paper" document mockup stays white paper in dark (it represents a printed page) */
[data-theme="dark"] .doc-mockup { background:#fff; }