/* Engines screen — the per-engine home (tracker: engine-as-home IA reorg).
 *
 * Three structural pieces this screen introduces:
 *   .eng-cockpit   — cross-engine band (total · mood · allocation · running)
 *   .eng-tabs      — big top-level engine selector (Swing/Scalp/Hedge/Insurance)
 *   .eng-subtabs   — per-engine Winston-first sub-tab row
 * Plus the Winston's-view body chrome (read callout, today columns, perf strip)
 * and the dormant-engine preview. Tokens from tokens.css — sleeve identity
 * colors are single-sourced via --sleeve-*.
 */

/* NOTE: deliberately NO bare `#screen-engines { display: block }` — an ID
   selector (specificity 1,0,0) beats `.screen[hidden]` (0,2,0) in layout.css,
   so it kept this screen painted even when the router set [hidden]. Once the
   operator visited Engines (populating its innerHTML), returning to Today
   showed Engines bleeding in below the footer. Sections are display:block by
   default; the router's [hidden] toggle is the single source of visibility. */

/* ── Cross-engine cockpit ─────────────────────────────────────────── */
.eng-cockpit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.eng-ck-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eng-ck-eyebrow {
  font-size: var(--type-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-faint); font-weight: var(--weight-semi);
}
.eng-ck-num {
  font-family: var(--font-mono); font-size: var(--type-xl); font-weight: var(--weight-bold);
  color: var(--ink); line-height: 1.1; letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.eng-ck-sub { font-size: var(--type-sm); color: var(--ink-muted); }
.eng-ck-sub.up   { color: var(--money-up); }
.eng-ck-sub.down { color: var(--money-down); }
.eng-ck-divider { width: 1px; align-self: stretch; background: var(--border); }

.eng-mood {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 11px; border-radius: var(--radius-full);
  font-size: var(--type-sm); font-weight: var(--weight-bold);
}
.eng-mood[data-mood="upbeat"]   { background: var(--money-up-soft); color: var(--money-up); }
.eng-mood[data-mood="neutral"]  { background: var(--surface-3);     color: var(--ink-3); }
.eng-mood[data-mood="cautious"] { background: var(--warn-soft);     color: var(--warn); }
.eng-mood[data-mood="crisis"]   { background: var(--money-down-soft); color: var(--money-down); }

.eng-alloc { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.eng-alloc-track {
  height: 12px; border-radius: 6px; overflow: hidden; display: flex; background: var(--surface-3);
}
.eng-alloc-seg { height: 100%; }
.eng-alloc-seg.swing    { background: var(--sleeve-swing); }
.eng-alloc-seg.scalp    { background: var(--sleeve-scalp); }
.eng-alloc-seg.rotation { background: var(--sleeve-rotation); }
.eng-alloc-seg.short    { background: var(--sleeve-short); }
.eng-alloc-seg.options  { background: var(--sleeve-options); }
.eng-alloc-seg.reversion { background: var(--sleeve-reversion); }
.eng-alloc-seg.trend     { background: var(--sleeve-trend); }
.eng-alloc-seg.income    { background: var(--sleeve-income); }
.eng-alloc-seg.pead      { background: var(--sleeve-pead); }
.eng-alloc-seg.cta      { background: var(--sleeve-cta); }
.eng-alloc-seg.momentum { background: var(--sleeve-momentum); }
.eng-alloc-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--type-xs); color: var(--ink-muted); }
.eng-alloc-legend .li { display: inline-flex; align-items: center; gap: 5px; }
.eng-sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.eng-sw.swing    { background: var(--sleeve-swing); }
.eng-sw.scalp    { background: var(--sleeve-scalp); }
.eng-sw.rotation { background: var(--sleeve-rotation); }
.eng-sw.short    { background: var(--sleeve-short); }
.eng-sw.options  { background: var(--sleeve-options); }
.eng-sw.reversion { background: var(--sleeve-reversion); }
.eng-sw.trend     { background: var(--sleeve-trend); }
.eng-sw.income    { background: var(--sleeve-income); }
.eng-sw.pead      { background: var(--sleeve-pead); }
.eng-sw.cta      { background: var(--sleeve-cta); }
.eng-sw.momentum { background: var(--sleeve-momentum); }

.eng-running { display: inline-flex; align-items: center; gap: 7px; font-size: var(--type-sm); color: var(--ink-3); font-weight: var(--weight-semi); }
.eng-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mode-paper); }

/* ── Engine tabs ──────────────────────────────────────────────────── */
.eng-tabs {
  /* ALL engines on a single row at desktop (operator requirement: no wrapping,
     like the original 5-engine cockpit) — and AUTO-ADAPTING to the engine count
     so a new sleeve never wraps to a second row and never needs a column-count
     bump here. grid-auto-flow:column lays every engines.js ENGINES card out in
     one row; grid-auto-columns:minmax(0,1fr) makes them equal-width and shrink
     to fit (8 today, 9 with PEAD, N tomorrow). */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
/* Only step down (and wrap) on genuinely small screens (canonical --bp-lg 1024
   / --bp-sm 600); desktop keeps every engine on one line regardless of count. */
@media (max-width: 1024px) { .eng-tabs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .eng-tabs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Card is now a CONTAINER (was a <button>) so the autonomy toggles can nest
   legally. The top select-area is its own button (.eng-tab-select); the
   autonomy footer (.eng-auto) sits below it inside the same card. */
.eng-tab {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); border-top: 3px solid transparent;
  display: flex; flex-direction: column; overflow: hidden;
}
.eng-tab-select {
  text-align: left; cursor: pointer; font: inherit;
  background: transparent; border: none; width: 100%;
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 6px;
}
.eng-tab-select:hover { background: var(--surface-hover); }
.eng-tab-head { display: flex; align-items: center; gap: 8px; }
.eng-tab-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.eng-tab-dot.swing    { background: var(--sleeve-swing); }
.eng-tab-dot.scalp    { background: var(--sleeve-scalp); }
.eng-tab-dot.rotation { background: var(--sleeve-rotation); }
.eng-tab-dot.short    { background: var(--sleeve-short); }
.eng-tab-dot.options  { background: var(--sleeve-options); }
.eng-tab-dot.reversion { background: var(--sleeve-reversion); }
.eng-tab-dot.trend     { background: var(--sleeve-trend); }
.eng-tab-dot.income    { background: var(--sleeve-income); }
.eng-tab-dot.pead      { background: var(--sleeve-pead); }
.eng-tab-dot.cta      { background: var(--sleeve-cta); }
.eng-tab-dot.momentum { background: var(--sleeve-momentum); }
.eng-tab-name { font-weight: var(--weight-bold); font-size: var(--type-md); color: var(--ink); }
.eng-tab-eyebrow {
  font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-faint); font-weight: var(--weight-semi);
}
.eng-tab-amt {
  font-family: var(--font-mono); font-size: var(--type-lg); font-weight: var(--weight-bold);
  color: var(--ink); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums;
}
.eng-tab-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eng-pill { font-size: var(--type-xs); font-weight: var(--weight-bold); padding: 2px 9px; border-radius: var(--radius-full); }
.eng-pill.on  { background: var(--mode-paper-soft); color: var(--mode-paper); }
.eng-pill.off { background: var(--surface-3); color: var(--ink-muted); }
.eng-tab-pnl { font-family: var(--font-mono); font-size: var(--type-sm); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; }
.eng-tab-pnl.up   { color: var(--money-up); }
.eng-tab-pnl.down { color: var(--money-down); }
.eng-tab-pnl.flat { color: var(--ink-faint); }

.eng-tab.is-active { background: var(--surface); box-shadow: var(--shadow-sm); }
.eng-tab.is-active.swing    { border-top-color: var(--sleeve-swing); }
.eng-tab.is-active.scalp    { border-top-color: var(--sleeve-scalp); }
.eng-tab.is-active.rotation { border-top-color: var(--sleeve-rotation); }
.eng-tab.is-active.short    { border-top-color: var(--sleeve-short); }
.eng-tab.is-active.options  { border-top-color: var(--sleeve-options); }
.eng-tab.is-active.reversion { border-top-color: var(--sleeve-reversion); }
.eng-tab.is-active.trend     { border-top-color: var(--sleeve-trend); }
.eng-tab.is-active.income    { border-top-color: var(--sleeve-income); }
.eng-tab.is-active.pead      { border-top-color: var(--sleeve-pead); }
.eng-tab.is-active.cta      { border-top-color: var(--sleeve-cta); }
.eng-tab.is-active.momentum { border-top-color: var(--sleeve-momentum); }
.eng-tab.is-dormant .eng-tab-amt { color: var(--ink-muted); }

/* ── Per-engine autonomy footer (auto-pick + Winston-managed) ───────
   Two compact toggles per card: "Let Winston… pick the playbook / manage it
   fully". V3-only (the kit cards have no autonomy controls) — net-additive on
   the kit-styled card per the design-port decision canon. */
.eng-auto {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex; flex-direction: column; gap: 6px;
}
.eng-auto-head {
  font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-faint); font-weight: var(--weight-bold);
}
.eng-auto-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.eng-auto-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.eng-auto-title { font-size: var(--type-xs); font-weight: var(--weight-semi); color: var(--ink-2); }
.eng-auto-sub { font-size: 10px; color: var(--ink-muted); }
/* Toggle — small pill switch matching the playbooks .pb-toggle look. */
.eng-auto-toggle {
  flex-shrink: 0; cursor: pointer; border: none; padding: 0;
  width: 32px; height: 18px; border-radius: var(--radius-full);
  background: var(--surface-3); position: relative;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}
.eng-auto-toggle .eng-auto-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast, 120ms) var(--ease-out, ease);
}
.eng-auto-toggle.is-on { background: var(--ai); }
.eng-auto-toggle.is-on .eng-auto-knob { transform: translateX(14px); }
.eng-auto-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.eng-auto-toggle:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }

/* Master engine on/off switch — top row of the autonomy footer, separated
   from the "Let Winston…" grants by a hairline. It's the running-state
   control, so its ON state uses the same paper/running color as .eng-pill.on
   rather than the cobalt --ai the autonomy toggles use. */
.eng-master-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline); margin-bottom: 2px;
}
.eng-master-title { font-size: var(--type-xs); font-weight: var(--weight-bold); color: var(--ink); }
.eng-master-toggle {
  flex-shrink: 0; cursor: pointer; border: none; padding: 0;
  width: 32px; height: 18px; border-radius: var(--radius-full);
  background: var(--surface-3); position: relative;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease);
}
.eng-master-toggle .eng-auto-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast, 120ms) var(--ease-out, ease);
}
.eng-master-toggle.is-on { background: var(--mode-paper); }
.eng-master-toggle.is-on .eng-auto-knob { transform: translateX(14px); }
.eng-master-toggle:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
/* Autonomy grants greyed when the engine is off — they only apply once it runs. */
.eng-auto-row.is-disabled .eng-auto-title,
.eng-auto-row.is-disabled .eng-auto-sub { opacity: 0.45; }

/* ── Per-engine sub-tab row ───────────────────────────────────────── */
.eng-subtabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  /* overflow-x:auto lets the strip scroll horizontally on narrow viewports.
     overflow-y MUST be pinned hidden: per CSS spec a `visible` cross-axis
     coerces to `auto` when the other axis is `auto`, so leaving it default
     turns this one-line row into a vertical scroll container too — a stray
     vertical scrollbar appears the instant a horizontal scrollbar reserves
     space (or content is a subpixel tall over). */
  margin-bottom: var(--space-5); overflow-x: auto; overflow-y: hidden;
}
.eng-subtab {
  padding: 9px 14px; border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--type-base); font-weight: var(--weight-semi); color: var(--ink-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.eng-subtab:hover:not(.is-na) { color: var(--ink-2); }
.eng-subtab.is-active { color: var(--ink); border-bottom-color: var(--ai); }
.eng-subtab.is-na { color: var(--ink-faint); cursor: not-allowed; }
.eng-subtab.is-na::after {
  content: "n/a"; font-size: var(--type-xs); font-weight: var(--weight-medium);
  color: var(--ink-faint); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 0 6px;
}
.eng-w-mini {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ai); color: var(--ink-inverse);
  font-size: 10px; font-weight: var(--weight-black); display: inline-flex; align-items: center; justify-content: center;
}

/* ── Winston's-view body ──────────────────────────────────────────── */
.eng-read {
  position: relative; background: var(--ai-soft); border: 1px solid var(--ai-line);
  border-left: 4px solid var(--ai); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4) var(--space-4) 56px; margin-bottom: var(--space-4);
}
.eng-read-avatar {
  position: absolute; left: var(--space-4); top: var(--space-4);
  width: 28px; height: 28px; border-radius: 50%; background: var(--ai); color: var(--ink-inverse);
  font-weight: var(--weight-black); font-size: var(--type-base);
  display: flex; align-items: center; justify-content: center;
}
.eng-read-eyebrow {
  font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ai); font-weight: var(--weight-bold); margin-bottom: 6px;
}
.eng-read p { margin: 0; color: var(--ink-2); font-size: var(--type-md); line-height: var(--leading-base); }
.eng-read .tk { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--ink); }
.eng-read .pos { color: var(--money-up); font-weight: var(--weight-bold); font-family: var(--font-mono); }
.eng-read .neg { color: var(--money-down); font-weight: var(--weight-bold); font-family: var(--font-mono); }

.eng-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .eng-cols { grid-template-columns: 1fr; } }
.eng-col {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.eng-col h4 { margin: 0 0 var(--space-3); font-size: var(--type-sm); font-weight: var(--weight-bold); color: var(--ink); }
.eng-col h4 .cnt { color: var(--ink-faint); font-weight: var(--weight-semi); font-family: var(--font-mono); }
.eng-line {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 9px 0; border-bottom: 1px dashed var(--border);
}
.eng-line:last-child { border-bottom: none; }
.eng-line-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eng-line .tk { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--type-base); color: var(--ink); }
.eng-line .meta { font-size: var(--type-xs); color: var(--ink-muted); }
.eng-line-r { text-align: right; font-family: var(--font-mono); font-size: var(--type-base); font-variant-numeric: tabular-nums; }
.eng-line-r .pnl.up   { color: var(--money-up); font-weight: var(--weight-bold); }
.eng-line-r .pnl.down { color: var(--money-down); font-weight: var(--weight-bold); }
.eng-line-r .px { color: var(--ink-3); font-size: var(--type-xs); }
.eng-line-r .upside { color: var(--money-up); font-weight: var(--weight-bold); }
.eng-dot-mini { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.eng-dot-mini.ok    { background: var(--mode-paper); }
.eng-dot-mini.owned { background: var(--ai); }
.eng-empty { color: var(--ink-muted); font-size: var(--type-sm); padding: var(--space-2) 0; }

.eng-perf {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.eng-perf .ps { display: flex; flex-direction: column; gap: 2px; }
.eng-perf .ps .n { font-family: var(--font-mono); font-size: var(--type-lg); font-weight: var(--weight-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.eng-perf .ps .n.up   { color: var(--money-up); }
.eng-perf .ps .n.down { color: var(--money-down); }
.eng-perf .ps .l { font-size: var(--type-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semi); }

.eng-foot { margin-top: var(--space-4); font-size: var(--type-sm); color: var(--ink-muted); }
.eng-foot a { color: var(--ai); text-decoration: none; font-weight: var(--weight-semi); }
.eng-foot a:hover { text-decoration: underline; }

/* ── Dormant-engine preview ───────────────────────────────────────── */
.eng-dormant {
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl); padding: var(--space-5);
}
.eng-dormant-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--type-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-muted); background: var(--surface-3);
  padding: 4px 11px; border-radius: var(--radius-full); margin-bottom: var(--space-3);
}
.eng-dormant h3 { margin: 0 0 6px; font-size: var(--type-xl); font-weight: var(--weight-black); color: var(--ink); }
.eng-dormant-sub { color: var(--ink-3); font-size: var(--type-md); margin: 0 0 var(--space-4); max-width: 640px; }
.eng-whywhen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 720px) { .eng-whywhen { grid-template-columns: 1fr; } }
.eng-wbox { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.eng-wbox .h { font-size: var(--type-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); margin-bottom: 6px; }
.eng-wbox p { margin: 0; font-size: var(--type-base); color: var(--ink-2); line-height: var(--leading-snug); }
.eng-wbox .tk { font-family: var(--font-mono); font-weight: var(--weight-bold); }

/* ── Embedded child surfaces ──────────────────────────────────────── */
/* Playbooks (and later Thesis/Performance) render their body inside the
 * engine sub-tab container; the engine shell already supplies the page
 * head + tabs, so strip the child's own outer chrome margins. */
.playbooks-screen.is-embedded { margin: 0; padding: 0; }
.playbooks-screen.is-embedded .playbooks-head,
.playbooks-screen.is-embedded .playbooks-sleeve-tabs,
.playbooks-screen.is-embedded [data-role="mood"] { display: none; }

/* Embedded per-engine performance: period chip row spacing (the standalone
 * performance.css layout context isn't present inside the engine shell). */
.perf-embedded .period-row {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: var(--space-4);
}
.perf-embedded .period-row .label {
  font-size: var(--type-xs); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semi);
}
.perf-embedded .period-chip {
  padding: 5px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--type-sm); color: var(--ink-3); cursor: pointer; font: inherit;
}
.perf-embedded .period-chip.active { background: var(--ai-soft); color: var(--ai); border-color: var(--ai-line); font-weight: var(--weight-semi); }

/* Embedded Rules: global-scope note (rules aren't engine-specific). */
.rules-scope-note {
  background: var(--ai-soft); border: 1px solid var(--ai-line);
  border-left: 3px solid var(--ai); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  font-size: var(--type-sm); color: var(--ink-2); line-height: var(--leading-snug);
}
.rules-scope-note strong { color: var(--ink); }

/* ── Rotation spec (#319, kit RotationSpec.jsx) — verbatim from kit
   screens.css ROTATION SPEC block, prefixed to the engines screen. ── */
#screen-engines .rot { max-width:1000px; }
#screen-engines .rot-src { font-family:var(--font-mono); font-size:11px; line-height:1.4; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-xs); padding:2px 6px; display:inline-block; }
#screen-engines .rot-banner { display:flex; align-items:flex-start; gap:var(--space-3); flex-wrap:wrap; background:var(--sleeve-rotation-soft); border:1px solid var(--sleeve-rotation); border-left-width:4px; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); font-size:var(--type-sm); color:var(--ink-2); }
#screen-engines .rot-banner-badge { font-size:var(--type-xs); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--sleeve-rotation); white-space:nowrap; }
#screen-engines .rot-intro { font-size:var(--type-md); line-height:var(--leading-base); color:var(--ink); margin-bottom:var(--space-2); }
#screen-engines .rot-canon { font-family:var(--font-mono); font-size:var(--type-xs); color:var(--ink-muted); margin-bottom:var(--space-5); }
#screen-engines .rot-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-5); margin-bottom:var(--space-4); }
#screen-engines .rot-h { display:flex; align-items:center; gap:var(--space-2); font-size:var(--type-md); font-weight:700; margin-bottom:var(--space-4); }
#screen-engines .rot-n { width:24px; height:24px; border-radius:50%; background:var(--sleeve-rotation); color:#fff; font-family:var(--font-mono); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
#screen-engines .rot-n.done { background:#fff; color:var(--ink); }
#screen-engines .rot-sub { font-weight:400; font-size:var(--type-xs); color:var(--ink-faint); }
#screen-engines .rot-status-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
@media (max-width:760px){ #screen-engines .rot-status-grid { grid-template-columns:repeat(2,1fr); } }
#screen-engines .rot-cell { background:var(--surface); padding:var(--space-3); display:flex; flex-direction:column; gap:3px; }
#screen-engines .rot-cell-k { font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--ink-faint); font-weight:700; }
#screen-engines .rot-cell-v { font-size:var(--type-lg); font-weight:700; }
#screen-engines .rot-cell .rot-src { margin-top:4px; }
#screen-engines .rot-pill { display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:var(--radius-xs); }
#screen-engines .rot-pill.off { background:var(--money-down-soft); color:var(--money-down); }
#screen-engines .rot-pill.dormant { background:var(--warn-soft); color:var(--warn); }
#screen-engines .rot-warn { background:var(--warn-soft); border:1px solid var(--warn-line); border-left-width:3px; border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:var(--type-sm); color:var(--ink-2); margin-top:var(--space-3); line-height:1.5; }
#screen-engines .rot-note { background:var(--sleeve-rotation-soft); border:1px solid var(--sleeve-rotation); border-left-width:3px; border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:var(--type-sm); color:var(--ink-2); margin-top:var(--space-3); line-height:1.5; }
#screen-engines .rot-note .rot-src { margin-top:var(--space-2); }
#screen-engines .rot-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
@media (max-width:760px){ #screen-engines .rot-steps { grid-template-columns:1fr 1fr; } }
#screen-engines .rot-step { background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); }
#screen-engines .rot-step-s { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--sleeve-rotation); letter-spacing:0.04em; }
#screen-engines .rot-step h4 { font-size:var(--type-sm); margin:6px 0 4px; }
#screen-engines .rot-step p { font-size:var(--type-xs); color:var(--ink-muted); line-height:1.45; }
#screen-engines .rot-h4 { font-size:var(--type-sm); font-weight:700; margin-bottom:var(--space-1); }
#screen-engines .rot-table { margin-top:var(--space-2); }
#screen-engines .rot-table tr.rot-in td { background:var(--sleeve-rotation-soft); }
#screen-engines .rot-table tr.rot-hurdle td { font-size:var(--type-xs); color:var(--ink-muted); border-top:2px dashed var(--sleeve-rotation); border-bottom:none; padding-top:8px; }
#screen-engines .rot-rk { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--surface-3); font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink-muted); }
#screen-engines .rot-rk.top { background:var(--sleeve-rotation); color:#fff; }
#screen-engines .rot-legend { font-size:var(--type-xs); margin-top:var(--space-2); }
#screen-engines .rot-act { font-family:var(--font-mono); font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--radius-xs); }
#screen-engines .rot-act.buy { background:var(--money-up-soft); color:var(--money-up); }
#screen-engines .rot-act.sell { background:var(--money-down-soft); color:var(--money-down); }
#screen-engines .rot-act.keep { background:var(--surface-3); color:var(--ink-muted); }
#screen-engines .rot-knobs { display:flex; flex-direction:column; }
#screen-engines .rot-knob { display:grid; grid-template-columns:230px 1fr; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1px solid var(--hairline); }
#screen-engines .rot-knob:last-child { border-bottom:none; }
@media (max-width:680px){ #screen-engines .rot-knob { grid-template-columns:1fr; gap:var(--space-1); } }
#screen-engines .rot-knob-name { font-weight:700; font-size:var(--type-sm); }
#screen-engines .rot-knob-val { font-size:var(--type-md); font-weight:700; color:var(--sleeve-rotation); margin-top:3px; }
#screen-engines .rot-knob-desc { font-size:var(--type-sm); color:var(--ink-2); line-height:1.45; }
#screen-engines .rot-knob-meta { font-size:11px; color:var(--ink-faint); margin-top:5px; }
#screen-engines .rot-uni { margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--hairline); }
#screen-engines .rot-chips { display:flex; flex-wrap:wrap; gap:6px; }
#screen-engines .rot-chip { font-family:var(--font-mono); font-size:12px; font-weight:600; padding:4px 9px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); }
#screen-engines .rot-chip.safe { background:var(--ai-soft); border-color:var(--ai-line); color:var(--ai); }
#screen-engines .rot-chip.cash { background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
#screen-engines .rot-ctrl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
@media (max-width:680px){ #screen-engines .rot-ctrl-grid { grid-template-columns:1fr; } }
#screen-engines .rot-ctrl-grid .rot-cell { border:1px solid var(--border); border-radius:var(--radius-md); }
#screen-engines .rot-actions { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4); }

/* ── Engine Overview / flow diagram (kit EngineFlow) ─────────────────── */
#screen-engines .eng-ov { display:grid; grid-template-columns:1fr 1.15fr; gap:var(--space-6); align-items:start; }
@media (max-width:880px){ #screen-engines .eng-ov { grid-template-columns:1fr; } }
#screen-engines .eng-ov-desc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); position:sticky; top:var(--space-3); }
#screen-engines .eng-ov-title { font-size:var(--type-lg); font-weight:800; margin-bottom:var(--space-3); }
#screen-engines .eng-ov-desc p { font-size:var(--type-base); color:var(--ink-2); line-height:var(--leading-base); margin-bottom:var(--space-3); }
#screen-engines .eng-ov-desc p:last-child { margin-bottom:0; }
#screen-engines .eng-ov-map { align-self:start; }
#screen-engines .fmap-intro { font-size:var(--type-md); color:var(--ink-2); margin-bottom:var(--space-5); text-align:center; max-width:640px; }
#screen-engines .fmap-tier { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); width:100%; }
#screen-engines .fmap-tier-label { font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--ink-faint); font-weight:700; }
#screen-engines .fmap-nodes { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }
#screen-engines .fmap-node { display:flex; align-items:flex-start; gap:var(--space-3); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--ink-faint); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); min-width:0; box-shadow:var(--shadow-xs); }
#screen-engines .fmap-node-ic { width:30px; height:30px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--surface-2); color:var(--ink-3); }
#screen-engines .fmap-node-t { font-weight:700; font-size:var(--type-sm); }
#screen-engines .fmap-node-s { font-size:var(--type-xs); margin-top:1px; }
#screen-engines .fmap-node.k-ai { border-left-color:var(--ai); }
#screen-engines .fmap-node.k-ai .fmap-node-ic { background:var(--ai-soft); color:var(--ai); }
#screen-engines .fmap-node.k-data { border-left-color:var(--sleeve-scalp); }
#screen-engines .fmap-node.k-data .fmap-node-ic { background:var(--sleeve-scalp-soft); color:var(--sleeve-scalp); }
#screen-engines .fmap-node.k-engine { border-left-color:var(--sleeve-swing); }
#screen-engines .fmap-node.k-engine .fmap-node-ic { background:var(--sleeve-swing-soft); color:var(--sleeve-swing); }
#screen-engines .fmap-node.k-warn { border-left-color:var(--warn); }
#screen-engines .fmap-node.k-warn .fmap-node-ic { background:var(--warn-soft); color:var(--warn); }
#screen-engines .fmap-node.k-broker { border-left-color:var(--sleeve-options); }
#screen-engines .fmap-node.k-broker .fmap-node-ic { background:var(--sleeve-options-soft); color:var(--sleeve-options); }
#screen-engines .fmap-conn { width:2px; height:26px; background:var(--border-strong); position:relative; margin:0 auto; }
#screen-engines .fmap-conn::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--border-strong); }

/* ── Playbook tuner (#319, kit PlaybookEditor) — inline knob sliders.
   Ported verbatim from the kit screens.css .pbk/.eng-col block, prefixed
   to the engines screen. Renders above the embedded picker. ── */
#screen-engines .pbk { margin-bottom: var(--space-5); }
#screen-engines .pbk-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4); }
#screen-engines .eng-pb-badge { font-size:var(--type-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-weight:700; color:var(--ai); background:var(--ai-soft); padding:3px 9px; border-radius:999px; }
#screen-engines .pbk-version { font-size:var(--type-lg); font-weight:800; margin-top:4px; }
#screen-engines .pbk-owner { font-weight:500; font-size:var(--type-sm); }
#screen-engines .pbk-stats { display:flex; gap:var(--space-5); }
#screen-engines .pbk-stat { display:flex; flex-direction:column; }
#screen-engines .pbk-stat-v { font-family:var(--font-mono); font-size:var(--type-lg); font-weight:700; }
#screen-engines .pbk-stat-rr .pbk-stat-v { color:var(--ai); }
#screen-engines .pbk-stat-l { font-size:var(--type-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--ink-muted); font-weight:600; }
#screen-engines .pbk-groups { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
@media (max-width:760px){ #screen-engines .pbk-groups { grid-template-columns:1fr; } }

/* Unified Playbook Save bar (#346.2) — STICKY so it stays reachable while
   editing. The Playbook tab stacks the Universe editor ABOVE the Risk-knobs
   section (~1500px combined); a static save bar sits a full screen below the
   universe edits, so an operator tuning the universe saw no Save button and
   read the surface as "there is no save button" (operator UAT 2026-06-04). It
   sticks to the viewport bottom whenever it's in view, and rides above the
   mobile bottom-nav. The button itself is still disabled until something is
   dirty (engines.js syncSave), so a pristine playbook shows a quiet bar. */
#screen-engines .pb-unified-save {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 -2px 12px rgba(20, 18, 14, 0.06);
}
@media (max-width: 768px) {
  #screen-engines .pb-unified-save { bottom: var(--bottom-stack-h, var(--bottom-nav-h)); }
}
#screen-engines .pbk-group { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); }
#screen-engines .pbk-group-title { font-size:var(--type-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--ai); font-weight:700; margin-bottom:var(--space-3); }
#screen-engines .pbk-knob { margin-bottom:var(--space-4); }
#screen-engines .pbk-knob:last-child { margin-bottom:0; }
#screen-engines .pbk-knob-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
#screen-engines .pbk-knob-label { font-size:var(--type-sm); font-weight:600; }
#screen-engines .pbk-knob-val { font-size:var(--type-md); font-weight:700; }
#screen-engines .pbk-knob-val.is-changed { color:var(--ai); }
#screen-engines .pbk-knob input[type=range] { width:100%; accent-color:var(--ai); }
#screen-engines .pbk-knob-foot { display:flex; justify-content:space-between; font-size:10px; margin-top:2px; }
#screen-engines .pbk-default-changed { color:var(--ai); font-weight:600; }
/* #346.3 — per-knob hint (Advanced knobs are expert-only, so they carry a one-liner). */
#screen-engines .pbk-knob-hint { font-size:11px; line-height:1.4; margin-top:var(--space-2); }
/* #346.3 — Advanced disclosure: collapsed by default, keeps the curated view glance-able. */
#screen-engines .pbk-advanced { margin-top:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
#screen-engines .pbk-advanced > .pbk-advanced-summary { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); cursor:pointer; list-style:none; user-select:none; }
#screen-engines .pbk-advanced > .pbk-advanced-summary::-webkit-details-marker { display:none; }
#screen-engines .pbk-advanced-label { font-weight:600; font-size:var(--type-sm); }
#screen-engines .pbk-advanced-note { font-size:var(--type-xs); flex:1; }
#screen-engines .pbk-advanced-chev { transition:transform var(--motion-fast); color:var(--ink-muted); }
#screen-engines .pbk-advanced[open] > .pbk-advanced-summary .pbk-advanced-chev { transform:rotate(90deg); }
#screen-engines .pbk-advanced-body { border:0; border-top:1px solid var(--border); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { #screen-engines .pbk-advanced-chev { transition:none; } }
#screen-engines .pbk-toggle { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; cursor:pointer; }
#screen-engines .pbk-switch { width:38px; height:22px; border-radius:999px; background:var(--surface-3); border:1px solid var(--border); position:relative; cursor:pointer; flex-shrink:0; transition:background var(--motion-fast); padding:0; }
#screen-engines .pbk-switch.on { background:var(--ai); border-color:var(--ai); }
#screen-engines .pbk-switch-dot { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left var(--motion-fast) var(--ease-out); }
#screen-engines .pbk-switch.on .pbk-switch-dot { left:18px; }
#screen-engines .pbk-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--border); }
/* Clear the fixed "Ask Winston" pill (winston-chip, bottom-right FAB at
   z-index var(--z-fab)) so it never covers the bottom action rows — e.g. the
   Playbook tuner's "Save playbook" or the universe editor's "Save universe".
   The pill floats ~60px above the scroll bottom; pad the sub-tab content below
   it so the flush-right buttons sit ABOVE the pill when scrolled to the end. */
#screen-engines [data-role="sub"] { padding-bottom: calc(var(--space-8) * 3); }
#screen-engines .eng-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:760px){ #screen-engines .eng-cols { grid-template-columns:1fr; } }
#screen-engines .eng-col { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4); }
#screen-engines .eng-col h4 { margin:0 0 var(--space-3); font-size:var(--type-sm); font-weight:700; }
#screen-engines .eng-rule { display:flex; align-items:flex-start; gap:var(--space-2); padding:8px 0; border-bottom:1px dashed var(--hairline); font-size:var(--type-sm); color:var(--ink-2); line-height:1.45; }
#screen-engines .eng-rule:last-child { border-bottom:none; }
#screen-engines .eng-rule-ic { color:var(--ai); flex-shrink:0; font-weight:700; }

/* ── Engine Performance kit features (#319, kit EnginePerf): inline
   cumulative-P&L chart, outcome pill, closed-trades table. ── */
#screen-engines .eng-perf-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); position: relative; height: 220px; }
#screen-engines .eng-perf-chart canvas { width: 100% !important; height: 100% !important; }
#screen-engines .eng-deal-table { width: 100%; border-collapse: collapse; font-size: var(--type-sm); }
#screen-engines .eng-deal-table th { text-align: left; font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); font-weight: var(--weight-bold); padding: 6px 8px; border-bottom: 1px solid var(--border); }
#screen-engines .eng-deal-table th.num { text-align: right; }
#screen-engines .eng-deal-table td { padding: 7px 8px; border-bottom: 1px dashed var(--hairline); }
#screen-engines .eng-deal-table td.num { text-align: right; }
#screen-engines .eng-deal-table tr:last-child td { border-bottom: none; }
#screen-engines .eng-deal-table .tk { font-family: var(--font-mono); font-weight: var(--weight-bold); }
#screen-engines .eng-deal-table .pnl.up { color: var(--money-up); }
#screen-engines .eng-deal-table .pnl.down { color: var(--money-down); }
#screen-engines .eng-outcome-pill { display: inline-block; font-size: var(--type-xs); font-weight: var(--weight-semi); padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-3); color: var(--ink-muted); }
#screen-engines .eng-outcome-pill.up { background: var(--money-up-soft); color: var(--money-up); }
#screen-engines .eng-outcome-pill.down { background: var(--money-down-soft); color: var(--money-down); }

/* ── Thesis sub-tab (kit ThesisView) ────────────────────────────────
   Collapsible per-position cards: head (sym · catalyst · upside · verdict)
   + body (2-col feeds grid + breaker checklist + Desk link). Ported from
   the kit screens.css .thx-* block; V3 didn't carry these. */
.thx-intro { font-size: var(--type-sm); margin-bottom: var(--space-3); }
.thx-card { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); background: var(--surface); overflow: hidden; }
.thx-card.is-open { border-color: var(--ai-line); }
.thx-head { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); cursor: pointer; font: inherit; background: transparent; text-align: left; border: none; }
.thx-head:hover { background: var(--surface-2); }
.thx-sym { font-weight: var(--weight-bold); font-size: var(--type-md); flex-shrink: 0; min-width: 54px; }
.thx-catalyst { font-size: var(--type-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thx-upside { font-weight: var(--weight-bold); flex-shrink: 0; }
.thx-upside.up { color: var(--money-up); }
.thx-verdict { font-size: var(--type-xs); font-weight: var(--weight-bold); padding: 2px 9px; border-radius: var(--radius-full); flex-shrink: 0; }
.thx-verdict.ok { background: var(--money-up-soft); color: var(--money-up); }
.thx-verdict.watch { background: var(--warn-soft); color: var(--warn); }
.thx-verdict.fail { background: var(--money-down-soft); color: var(--money-down); }
.thx-verdict.none { background: var(--surface-3); color: var(--ink-muted); }
.thx-chev { flex-shrink: 0; color: var(--ink-muted); font-size: var(--type-xs); }
.thx-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-4); border-top: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 780px) { .thx-body { grid-template-columns: 1fr; } }
/* The ID-scoped display:grid above beats the UA [hidden]{display:none}, so the
   collapse toggle had no visual effect — an explicit override is required. */
.thx-body[hidden] { display: none; }
.thx-feeds { display: flex; flex-direction: column; gap: 0; }
.thx-feed { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-bottom: 1px dashed var(--hairline); }
.thx-feed:last-child { border-bottom: none; }
.thx-feed-l { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); font-weight: var(--weight-bold); }
.thx-feed-v { font-size: var(--type-sm); font-weight: var(--weight-semi); text-align: right; }
.thx-breakers { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.thx-breakers-title { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.thx-breaker { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: var(--space-2); padding: 5px 0; font-size: var(--type-sm); }
.thx-breaker-ic { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--surface-3); color: var(--ink-muted); }
.thx-breaker[data-state="ok"] .thx-breaker-ic { background: var(--money-up-soft); color: var(--money-up); }
.thx-breaker[data-state="watch"] .thx-breaker-ic { background: var(--warn-soft); color: var(--warn); }
.thx-breaker[data-state="fail"] .thx-breaker-ic { background: var(--money-down-soft); color: var(--money-down); }
.thx-breaker[data-state="fail"] .thx-breaker-label { color: var(--money-down); font-weight: var(--weight-bold); }
.thx-breaker-label { font-weight: var(--weight-semi); }
.thx-breaker-def { font-size: var(--type-xs); text-align: right; }
/* Evidence drill-down under a fired/watch breaker — the actual quote +
   computed detail + source date + SEC link the operator asked to see, so a
   flagged breaker shows WHY it fired, not just THAT it did. Left-rule keyed
   to the breaker state via the parent .thx-breakers context. */
.thx-breaker-detail { margin: 2px 0 var(--space-2) 26px; padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--hairline); border-left: 3px solid var(--money-down); border-radius: var(--radius-sm); }
.thx-breaker[data-state="watch"] + .thx-breaker-detail { border-left-color: var(--warn); }
.thx-ev-quote { margin: 0 0 var(--space-2); padding: 0; font-style: italic; font-size: var(--type-sm); line-height: 1.45; color: var(--ink); border: none; }
.thx-ev-quote::before { content: "\201C"; }
.thx-ev-quote::after { content: "\201D"; }
.thx-ev-detail { margin: 0 0 var(--space-2); font-size: var(--type-sm); line-height: 1.45; color: var(--ink); }
.thx-ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--type-xs); color: var(--ink-muted); }
.thx-ev-dot { color: var(--ink-faint, var(--ink-muted)); }
.thx-ev-link { color: var(--ai); font-weight: var(--weight-semi); text-decoration: none; }
.thx-ev-link:hover { text-decoration: underline; }
.thx-ev-note { margin: var(--space-2) 0 0; font-size: var(--type-xs); line-height: 1.4; color: var(--ink-muted); }
/* Action row spans both body columns; holds the Trading Desk link + any
   injected action (e.g. the Today review section's Flatten button). */
.thx-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.thx-desk-link { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ai); font: inherit; font-size: var(--type-sm); font-weight: var(--weight-semi); cursor: pointer; text-decoration: none; }
.thx-desk-link:hover { background: var(--ai-soft); border-color: var(--ai-line); }
.thx-actions .btn { flex: 0 0 auto; }
/* "Why this is flagged" note at the top of a review card body (Today). */
.thx-review-note { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--type-xs); color: var(--ink-2); }
.thx-review-note .thx-review-reasons { color: var(--ink-muted); }

/* ── Watching · conviction-ranked (Thesis sub-tab) ──────────────────
   Winston's highest-conviction non-held watchlist names. The conviction
   score is the advisory 0-100 roll-up from winston/conviction_score.py;
   the badge ALWAYS pairs the number with the band label so meaning never
   rides on color alone (audit: P&L/score color must carry a sign/label). */
.thx-watching { margin-top: var(--space-5); }
.thx-watching-title { font-size: var(--type-sm); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.thx-watching-title .muted { font-weight: normal; font-size: var(--type-xs); }
.conv-badge { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border-radius: var(--radius-full); flex-shrink: 0; font-weight: var(--weight-bold); }
.conv-badge .conv-num { font-size: var(--type-sm); font-variant-numeric: tabular-nums; }
.conv-badge .conv-lab { font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.conv-badge.strong { background: var(--money-up-soft); color: var(--money-up); }
.conv-badge.constructive { background: var(--ai-soft); color: var(--ai); }
.conv-badge.moderate { background: var(--surface-3); color: var(--ink-2); }
.conv-badge.soft { background: var(--warn-soft); color: var(--warn); }
.conv-badge.avoid { background: var(--money-down-soft); color: var(--money-down); }
.conv-badge.none { background: var(--surface-3); color: var(--ink-muted); }
/* drill-down rows: factor · detail · points (spans both body columns) */
.conv-rows { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0; }
.conv-row { display: grid; grid-template-columns: minmax(120px, auto) 1fr auto; align-items: baseline; gap: var(--space-3); padding: 7px 0; border-bottom: 1px dashed var(--hairline); }
.conv-row:last-child { border-bottom: none; }
.conv-row-factor { font-size: var(--type-sm); font-weight: var(--weight-semi); }
.conv-row-detail { font-size: var(--type-xs); color: var(--ink-muted); }
.conv-row-pts { font-size: var(--type-sm); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); text-align: right; }
.conv-row-pts.pos { color: var(--money-up); }
.conv-row-pts.neg { color: var(--money-down); }
.conv-row.penalty .conv-row-factor { color: var(--money-down); }

/* ── Library sub-tab (kit LibraryView) ──────────────────────────────
   Version-card grid. Ported from kit screens.css .lib-* — these were
   missing (Library rendered as unstyled text). */
#screen-engines .eng-lib-intro { font-size: var(--type-sm); margin-bottom: var(--space-4); }
#screen-engines .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
#screen-engines .lib-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
#screen-engines .lib-card.is-active { border-color: var(--ai-line); box-shadow: inset 3px 0 0 var(--ai); }
#screen-engines .lib-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
#screen-engines .lib-card-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
#screen-engines .lib-card-name { font-weight: var(--weight-bold); font-size: var(--type-md); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
#screen-engines .eng-lib-active-pill { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--money-up); background: var(--money-up-soft); padding: 2px 7px; border-radius: var(--radius-full); }
/* #420: backtest-confirmed money-losing playbook — flagged + not selectable. */
#screen-engines .eng-lib-losing-pill { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--money-down); background: var(--money-down-soft); padding: 2px 7px; border-radius: var(--radius-full); }
#screen-engines .lib-card.is-losing { opacity: 0.72; border-color: var(--money-down-soft); }
#screen-engines .lib-card-owner { font-size: var(--type-xs); margin-top: 2px; }
#screen-engines .lib-card-desc { font-size: var(--type-sm); color: var(--ink-2); line-height: 1.5; }
#screen-engines .lib-stats { display: flex; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
#screen-engines .lib-stat { display: flex; flex-direction: column; }
#screen-engines .lib-stat-v { font-weight: var(--weight-bold); font-size: var(--type-base); }
#screen-engines .lib-stat-l { font-size: var(--type-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
#screen-engines .lib-params { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#screen-engines .lib-param { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 3px 9px; }
#screen-engines .lib-param-l { font-size: var(--type-xs); color: var(--ink-muted); }
#screen-engines .lib-param-v { font-size: var(--type-xs); font-weight: var(--weight-bold); }
#screen-engines .lib-param-d { font-size: 10px; font-weight: var(--weight-bold); }
#screen-engines .lib-param-d.up { color: var(--money-up); }
#screen-engines .lib-param-d.down { color: var(--money-down); }

/* ── Library type-to-confirm activation modal ───────────────────────
   NOT scoped under #screen-engines: library-view.js appends the
   backdrop to document.body, so it lives outside the screen subtree.
   Mirrors components/modal.css (.modal-backdrop / .modal). Without
   these rules the modal renders inline at page bottom with no backdrop,
   and repeat Activate clicks stack uncloseable copies. */
.eng-lib-modal-back {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(20, 18, 14, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: modal-fade var(--motion-base) var(--ease-out);
}
.eng-lib-modal {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.eng-lib-modal-title { font-size: var(--type-lg); font-weight: var(--weight-bold); margin: 0; }
.eng-lib-modal-body { font-size: var(--type-sm); line-height: 1.5; margin: 0; }
.eng-lib-modal-warn {
  font-size: var(--type-sm);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--ink);
}
.eng-lib-modal-input {
  width: 100%;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--type-base);
  color: var(--ink);
}
.eng-lib-modal-input:focus { outline: none; border-color: var(--ai-line); }
.eng-lib-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ── Rules sub-tab list rows (kit RuleComposer) ─────────────────────
   screen-rules.css carries the composer + draft CSS, but NOT the rule-row
   list classes the kit uses — add them so rules render as carded rows, not
   plain text. */
#screen-engines .rc-list-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-2) var(--space-1) var(--space-3); }
#screen-engines .rc-list-head h4 { font-size: var(--type-md); font-weight: var(--weight-bold); margin: 0; }
#screen-engines .rc-rule { display: flex; align-items: center; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
#screen-engines .rc-rule.is-off { opacity: 0.6; }
#screen-engines .rc-rule-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#screen-engines .rc-rule-side { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* ── Winston's Strategy sub-tab (#322) — two-column decide + guardrails.
   LEFT = what Winston decides (mood/mode/playbook/machine); RIGHT = the
   guardrails (always-on rails filtered to the engine + the operator's rules).
   Scoped under #screen-engines like the rest of this file. ── */
#screen-engines .ws-loading { color: var(--ink-muted); padding: var(--space-4); }
#screen-engines .ws-title { font-size: var(--type-md); font-weight: var(--weight-bold); color: var(--ink); margin: 0 0 var(--space-3); }

#screen-engines .ws-dormant-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn); border-radius: var(--radius-md);
}
#screen-engines .ws-dormant-banner p { margin: 0 0 2px; color: var(--ink-2); font-size: var(--type-sm); }
#screen-engines .ws-dormant-badge {
  flex: none; font-size: var(--type-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--warn);
  border: 1px solid var(--warn); border-radius: var(--radius-full); padding: 2px 9px;
}

#screen-engines .ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
#screen-engines .ws-col { display: flex; flex-direction: column; gap: var(--space-3); }
#screen-engines .ws-col-head {
  font-size: var(--type-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: var(--space-1); border-bottom: 1px solid var(--border);
}

#screen-engines .ws-cell {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
#screen-engines .ws-cell-head {
  margin: 0 0 var(--space-2); font-size: var(--type-sm); color: var(--ink);
  font-weight: var(--weight-bold); display: flex; align-items: center; gap: var(--space-2);
}
#screen-engines .ws-muted { color: var(--ink-muted); margin: 0; font-size: var(--type-sm); line-height: var(--leading-snug); }
#screen-engines .ws-link { color: var(--ai); text-decoration: none; font-weight: var(--weight-semi); font-size: var(--type-sm); }
#screen-engines .ws-link:hover { text-decoration: underline; }
#screen-engines .ws-count { color: var(--ink-faint); font-weight: var(--weight-semi); font-family: var(--font-mono); font-size: var(--type-xs); }
#screen-engines .ws-fixed { font-size: var(--type-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); background: var(--surface-3); padding: 1px 7px; border-radius: var(--radius-full); }

#screen-engines .ws-mood { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 4px; }
#screen-engines .ws-regime { font-weight: var(--weight-bold); text-transform: capitalize; padding: 2px 11px; border-radius: var(--radius-full); background: var(--surface-3); color: var(--ink-3); }
#screen-engines .ws-regime-risk_on { background: var(--money-up-soft); color: var(--money-up); }
#screen-engines .ws-regime-risk_off { background: var(--warn-soft); color: var(--warn); }
#screen-engines .ws-regime-crisis { background: var(--money-down-soft); color: var(--money-down); }
#screen-engines .ws-mood-mult { color: var(--ink-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

#screen-engines .ws-mode strong { color: var(--ink); display: block; }
#screen-engines .ws-mode .ws-muted { margin: 4px 0 6px; }

#screen-engines .ws-playbook-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
#screen-engines .ws-playbook-head strong { color: var(--ink); text-transform: capitalize; }
#screen-engines .ws-knobs { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 5px; }
#screen-engines .ws-knob { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--type-sm); color: var(--ink-2); }
#screen-engines .ws-knob span:last-child { color: var(--ink); font-weight: var(--weight-semi); font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

#screen-engines .ws-machine-intro { margin-bottom: var(--space-3); }
#screen-engines .ws-machine { display: flex; flex-direction: column; gap: 0; }
#screen-engines .ws-step { display: flex; gap: var(--space-3); align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--hairline); }
#screen-engines .ws-step:last-child { border-bottom: none; }
#screen-engines .ws-step-label { flex: none; width: 84px; font-size: var(--type-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ai); }
#screen-engines .ws-step-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#screen-engines .ws-step-body strong { font-size: var(--type-sm); color: var(--ink); }
#screen-engines .ws-fixed-note { margin-top: var(--space-3); font-size: var(--type-xs); color: var(--ink-muted); line-height: var(--leading-snug); }

#screen-engines .ws-rails-lede { margin-bottom: var(--space-2); }
#screen-engines .ws-rails { display: flex; flex-direction: column; gap: var(--space-2); }
#screen-engines .ws-rail { display: flex; gap: var(--space-2); align-items: flex-start; }
#screen-engines .ws-rail-no { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-xs); font-weight: var(--weight-bold); display: grid; place-items: center; }
#screen-engines .ws-rail-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#screen-engines .ws-rail-body strong { color: var(--ink); font-size: var(--type-sm); }

#screen-engines .ws-oprules { display: flex; flex-direction: column; gap: var(--space-2); }
#screen-engines .ws-oprule { padding-left: var(--space-2); border-left: 2px solid var(--border); }
#screen-engines .ws-oprule.is-conflict { border-left-color: var(--money-down); }
#screen-engines .ws-oprule strong { color: var(--ink-2); font-size: var(--type-sm); font-weight: var(--weight-semi); }
#screen-engines .ws-coach { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--type-xs); }
#screen-engines .ws-conflict { color: var(--money-down); font-size: var(--type-xs); margin: 3px 0 0; }

@media (max-width: 720px) {
  #screen-engines .ws-grid { grid-template-columns: 1fr; }
  #screen-engines .ws-col-decide { order: 0; }
  #screen-engines .ws-col-guard { order: 1; }
  #screen-engines .ws-step-label { width: 70px; }
}

/* ── Per-engine performance: honest-state banner, backtest curve, caveats
   (#321). Rendered inside the engine performance sub-tab. ── */
#screen-engines .eng-honest {
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4); font-size: var(--type-sm); line-height: var(--leading-snug);
  border: 1px solid var(--border); border-left: 3px solid var(--ink-faint);
  background: var(--surface-2); color: var(--ink-2);
}
#screen-engines .eng-honest-ok { border-left-color: var(--money-up); background: var(--money-up-soft); }
#screen-engines .eng-honest-bad { border-left-color: var(--money-down); background: var(--money-down-soft); }
#screen-engines .eng-honest-neutral { border-left-color: var(--ai); background: var(--ai-soft); }
#screen-engines .eng-bt-legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--type-xs); color: var(--ink-muted); }
#screen-engines .eng-bt-legend .li { display: inline-flex; align-items: center; gap: 6px; }
#screen-engines .eng-bt-legend .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
#screen-engines .eng-bt-legend .sw.strat { background: #2563eb; }
#screen-engines .eng-bt-legend .sw.bench { background: rgba(140,140,140,0.7); }
#screen-engines .eng-bt-stats td:first-child { color: var(--ink-2); }
#screen-engines .eng-caveats {
  margin-top: var(--space-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
#screen-engines .eng-caveats-title {
  font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--ink-muted); font-weight: var(--weight-bold); margin-bottom: var(--space-2);
}
#screen-engines .eng-caveats ul { margin: 0; padding-left: 18px; }
#screen-engines .eng-caveats li { font-size: var(--type-sm); color: var(--ink-2); line-height: var(--leading-snug); margin-bottom: 3px; }

/* ── #334 System rules — the code-enforced rulebook (Rules sub-tab) + the live
   value chip in the Winston view's guardrails column. Read-only by design. ── */
#screen-engines .ws-rail-val {
  flex: none; align-self: center; font-family: var(--font-mono); font-size: var(--type-xs);
  font-weight: var(--weight-bold); color: var(--ink-2); background: var(--surface-3);
  border-radius: var(--radius-sm); padding: 1px 7px; white-space: nowrap;
}

#screen-engines .sr-note {
  font-size: var(--type-sm); color: var(--ink-muted); line-height: var(--leading-snug);
  margin: 0 var(--space-1) var(--space-4);
}
#screen-engines .rc-yours-head {
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border);
}
#screen-engines .sr-groups { display: flex; flex-direction: column; gap: var(--space-5); }
#screen-engines .sr-group-head {
  font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--ink-muted); font-weight: var(--weight-bold); margin: 0 var(--space-1) var(--space-2);
}
#screen-engines .sr-rule {
  display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
}
#screen-engines .sr-rule-top { display: flex; align-items: center; gap: var(--space-4); }
#screen-engines .sr-rule-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#screen-engines .sr-rule-title {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--type-sm); font-weight: var(--weight-semi); color: var(--ink);
}
#screen-engines .sr-ruleno {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold);
  color: var(--ink-faint); background: var(--surface-3); border-radius: var(--radius-sm); padding: 0 5px;
}
#screen-engines .sr-rule-desc { font-size: var(--type-xs); color: var(--ink-muted); line-height: var(--leading-snug); }
#screen-engines .sr-rule-side { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
#screen-engines .sr-value {
  font-family: var(--font-mono); font-size: var(--type-sm); font-weight: var(--weight-bold);
  color: var(--ink); white-space: nowrap;
}
#screen-engines .sr-badge {
  font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; text-decoration: none;
}
#screen-engines .sr-badge-tunable { color: var(--ai); background: var(--ai-soft); border: 1px solid var(--ai-line); }
#screen-engines a.sr-badge-tunable:hover { background: var(--ai); color: var(--ink-inverse); }
#screen-engines .sr-badge-locked { color: var(--ink-muted); background: var(--surface-3); border: 1px solid var(--border); }

/* Live "how close to the limit" status row (#334) */
#screen-engines .sr-status { display: flex; align-items: center; gap: var(--space-3); }
#screen-engines .sr-bar {
  flex: 1; max-width: 200px; height: 6px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
#screen-engines .sr-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--money-up); }
#screen-engines .sr-status-text { font-size: var(--type-xs); font-family: var(--font-mono); color: var(--ink-muted); }
#screen-engines .sr-status-clear  .sr-bar-fill { background: var(--money-up); }
#screen-engines .sr-status-watch  .sr-bar-fill { background: var(--warn); }
#screen-engines .sr-status-watch  .sr-status-text { color: var(--warn); }
#screen-engines .sr-status-breach .sr-bar-fill { background: var(--money-down); }
#screen-engines .sr-status-breach .sr-status-text { color: var(--money-down); font-weight: var(--weight-bold); }
#screen-engines .sr-status-info .sr-status-text { color: var(--ai); }

@media (max-width: 560px) {
  #screen-engines .sr-rule-top { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  #screen-engines .sr-rule-side { justify-content: flex-end; }
  #screen-engines .sr-bar { max-width: none; }
}

/* ── Unified Playbook config sections (design-review v3-playbooks S1) ──
   The Playbook sub-tab stacks an engine's whole config — universe · risk &
   safety · rules · version bookshelf — as labelled sections in one scroll.
   Absorbed the former standalone Library + Rules sub-tabs. */
#screen-engines .pb-config { display: flex; flex-direction: column; gap: var(--space-6); }
#screen-engines .pb-sec { display: flex; flex-direction: column; gap: var(--space-3); }
#screen-engines .pb-sec + .pb-sec { padding-top: var(--space-5); border-top: 1px solid var(--line-soft, var(--line)); }
#screen-engines .pb-sec-h {
  margin: 0;
  font-size: var(--type-sm); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); color: var(--ink-2, var(--ink));
  display: flex; align-items: center; gap: var(--space-2);
}

#screen-engines .pb-sec-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
#screen-engines .pb-sec-actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }

/* Swing engine card — breaker-count auto-seller threshold <select> inline in
   the row sub-text. Mono digit, compact; greys with the row when disabled. */
.eng-auto-thresh {
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: 10px; color: var(--ink-2);
  padding: 0 2px; margin: 0 1px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-1, var(--surface-2));
  cursor: pointer; vertical-align: baseline;
}
.eng-auto-thresh:disabled { cursor: not-allowed; opacity: 0.6; }
.eng-auto-thresh:focus-visible { outline: 2px solid var(--ai); outline-offset: 1px; }

/* ── #320 Intraday P3-readiness scorecard (engine/intraday-gate-view.js) ──────
   Renders inside the Intraday engine's "Winston's Strategy" sub-tab in place of
   the generic Dormant banner: the engine logs would-be-trades and is earning its
   way to live against a bar locked in advance. */
#screen-engines .ws-gate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
#screen-engines .ws-gate[data-verdict="proceed"] { border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); }
#screen-engines .ws-gate[data-verdict="blocked"] { border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }

#screen-engines .ws-gate-hero { margin-bottom: var(--space-4); }
#screen-engines .ws-gate-badge {
  display: inline-block; font-size: var(--type-xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: var(--space-2);
}
#screen-engines .ws-gate-badge--thin    { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); }
#screen-engines .ws-gate-badge--proceed { background: color-mix(in oklab, var(--pos) 16%, transparent);  color: var(--pos); }
#screen-engines .ws-gate-badge--blocked { background: color-mix(in oklab, var(--neg) 16%, transparent);  color: var(--neg); }
#screen-engines .ws-gate-title {
  font-size: var(--type-md); font-weight: var(--weight-bold); color: var(--ink);
  margin: 0 0 4px; letter-spacing: var(--tracking-tight);
}
#screen-engines .ws-gate-sub { font-size: var(--type-sm); color: var(--ink-2); line-height: 1.5; margin: 0; max-width: 66ch; }
#screen-engines .ws-gate-sub strong { color: var(--ink); font-weight: var(--weight-bold); }

/* funnel: headlines read → would-be trades → filled & scored */
#screen-engines .ws-gate-funnel {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); margin-bottom: var(--space-4);
  background: var(--surface-2); border-radius: var(--radius-md);
}
#screen-engines .ws-gate-funnel-step { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
#screen-engines .ws-gate-funnel-step b { font-size: var(--type-md); color: var(--ink); font-variant-numeric: tabular-nums; }
#screen-engines .ws-gate-funnel-step span { font-size: var(--type-xs); color: var(--ink-muted); text-align: center; }
#screen-engines .ws-gate-funnel-arrow { color: var(--ink-faint); font-size: var(--type-md); }

/* sample-progress bars */
#screen-engines .ws-gate-progress { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
#screen-engines .ws-gate-prog-label {
  display: flex; justify-content: space-between; font-size: var(--type-xs);
  color: var(--ink-2); margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
#screen-engines .ws-gate-bar { height: 8px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
#screen-engines .ws-gate-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--ai); transition: width .3s ease; }

/* the four locked tests */
#screen-engines .ws-gate-checks { margin-bottom: var(--space-4); }
#screen-engines .ws-gate-checks-head {
  font-size: var(--type-xs); font-weight: var(--weight-bold); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-2);
}
#screen-engines .ws-gate-check-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
#screen-engines .ws-gate-check {
  display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center;
  gap: var(--space-3); padding: var(--space-3); background: var(--surface);
}
#screen-engines .ws-gate-check-icon { font-weight: var(--weight-bold); text-align: center; }
#screen-engines .ws-gate-check[data-state="pass"]    .ws-gate-check-icon { color: var(--pos); }
#screen-engines .ws-gate-check[data-state="fail"]    .ws-gate-check-icon { color: var(--neg); }
#screen-engines .ws-gate-check[data-state="pending"] .ws-gate-check-icon { color: var(--ink-faint); }
#screen-engines .ws-gate-check-body { display: flex; flex-direction: column; min-width: 0; }
#screen-engines .ws-gate-check-name { font-size: var(--type-sm); color: var(--ink); font-weight: var(--weight-semi); }
#screen-engines .ws-gate-check-hint { font-size: var(--type-xs); color: var(--ink-muted); }
#screen-engines .ws-gate-check-now {
  font-size: var(--type-sm); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
#screen-engines .ws-gate-check-now[data-trend="pass"] { color: var(--pos); }
#screen-engines .ws-gate-check-now[data-trend="fail"] { color: var(--neg); }
#screen-engines .ws-gate-check-need { font-size: var(--type-xs); color: var(--ink-muted); white-space: nowrap; }

/* weekly net strip */
#screen-engines .ws-gate-weeks { margin-bottom: var(--space-4); }
#screen-engines .ws-gate-weeks-head {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--type-xs); color: var(--ink-2); margin-bottom: 6px;
}
#screen-engines .ws-gate-weeks-bars { display: flex; gap: 4px; flex-wrap: wrap; }
#screen-engines .ws-gate-week { width: 16px; height: 22px; border-radius: var(--radius-xs); background: var(--surface-3); }
#screen-engines .ws-gate-week[data-pos="true"]  { background: var(--pos); }
#screen-engines .ws-gate-week[data-pos="false"] { background: var(--neg); }
#screen-engines .ws-gate-weeks-empty { font-size: var(--type-sm); }

/* edge-by-cell table */
#screen-engines .ws-gate-cells { margin-bottom: var(--space-3); }
#screen-engines .ws-gate-cells > summary {
  font-size: var(--type-sm); font-weight: var(--weight-semi); color: var(--ink-2);
  cursor: pointer; padding: var(--space-2) 0;
}
#screen-engines .ws-gate-cells > summary em { font-style: italic; color: var(--ink); }
#screen-engines .ws-gate-cells-note { font-size: var(--type-xs); margin: 0 0 var(--space-2); line-height: 1.5; max-width: 66ch; }
#screen-engines .ws-gate-cells-table { width: 100%; border-collapse: collapse; font-size: var(--type-xs); }
#screen-engines .ws-gate-cells-table th {
  text-align: left; color: var(--ink-muted); font-weight: var(--weight-semi);
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
#screen-engines .ws-gate-cells-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--ink-2); }
#screen-engines .ws-gate-cells-table tr[data-judgeable="false"] td { opacity: 0.62; }
#screen-engines .ws-gate-cell-n { font-variant-numeric: tabular-nums; }
#screen-engines .ws-gate-cell-net { font-variant-numeric: tabular-nums; font-weight: var(--weight-semi); text-align: right; }
#screen-engines .ws-gate-cell-net[data-pos="true"]  { color: var(--pos); }
#screen-engines .ws-gate-cell-net[data-pos="false"] { color: var(--neg); }

#screen-engines .ws-gate-manual { font-size: var(--type-xs); line-height: 1.5; margin: 0; max-width: 66ch; }

/* mobile: drop the per-row "needs" onto its own line so values stay readable at 390px */
@media (max-width: 600px) {
  #screen-engines .ws-gate-check { grid-template-columns: 20px 1fr auto; row-gap: 2px; }
  #screen-engines .ws-gate-check-need { grid-column: 2 / -1; text-align: right; }
}

/* ── Backtest Lab sub-tab (#015 follow-up) — js/engine/backtest-lab.js ──────── */
#screen-engines .bl-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
#screen-engines .bl-loading { color: var(--ink-muted); font-size: var(--type-sm); padding: var(--space-4); }

/* Winston's-evidence card + result cards share the bl-evidence/bl-result-card shell */
#screen-engines .bl-evidence,
#screen-engines .bl-result-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-2); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
#screen-engines .bl-good { border-left: 3px solid var(--pos); }
#screen-engines .bl-warn { border-left: 3px solid var(--warn); }
#screen-engines .bl-muted { opacity: 0.85; }
#screen-engines .bl-na { background: var(--surface); }
#screen-engines .bl-eyebrow {
  font-size: var(--type-xs); font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted);
}
#screen-engines .bl-headline { font-size: var(--type-base); font-weight: var(--weight-semi); color: var(--ink); margin: 0; }
#screen-engines .bl-note { font-size: var(--type-sm); color: var(--ink-2); margin: 0; line-height: 1.5; max-width: 72ch; }
#screen-engines .bl-caveat { font-size: var(--type-xs); color: var(--ink-muted); margin: 0; line-height: 1.5; }

/* stat grid */
#screen-engines .bl-statgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3); margin-top: var(--space-1);
}
#screen-engines .bl-stat { display: flex; flex-direction: column; gap: 2px; }
#screen-engines .bl-stat-l { font-size: var(--type-xs); color: var(--ink-muted); }
#screen-engines .bl-stat-v { font-size: var(--type-lg); font-weight: var(--weight-semi); color: var(--ink); font-variant-numeric: tabular-nums; }
#screen-engines .bl-stat-s { font-size: var(--type-xs); color: var(--ink-3); }

/* run form */
#screen-engines .bl-runner { display: flex; flex-direction: column; gap: var(--space-3); }
#screen-engines .bl-h { font-size: var(--type-base); font-weight: var(--weight-semi); margin: 0; color: var(--ink); }
#screen-engines .bl-sub { font-size: var(--type-sm); color: var(--ink-2); margin: 0; max-width: 72ch; }
#screen-engines .bl-form { display: flex; flex-direction: column; gap: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface); }
#screen-engines .bl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
#screen-engines .bl-field { display: flex; flex-direction: column; gap: 4px; }
#screen-engines .bl-field > label { font-size: var(--type-xs); font-weight: var(--weight-semi); color: var(--ink-2); }
#screen-engines .bl-hint { font-weight: 400; color: var(--ink-muted); }
#screen-engines .bl-field input[type="text"],
#screen-engines .bl-field input[type="number"],
#screen-engines .bl-field input[type="date"],
#screen-engines .bl-field select {
  font: inherit; font-size: var(--type-sm); padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink);
}
#screen-engines .bl-check { display: flex; align-items: center; gap: 6px; font-size: var(--type-xs); color: var(--ink-2); font-weight: 400; margin-top: 4px; }
#screen-engines .bl-actions { display: flex; align-items: center; gap: var(--space-3); }
#screen-engines .bl-status { font-size: var(--type-sm); color: var(--warn); }

/* progress */
#screen-engines .bl-progress { display: flex; flex-direction: column; gap: 6px; }
#screen-engines .bl-progress-bar { height: 6px; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
#screen-engines .bl-progress-fill { height: 100%; width: 0; background: var(--ai); transition: width var(--motion-base, 0.2s) var(--ease-out, ease); }
#screen-engines .bl-progress-label { font-size: var(--type-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* result tables */
#screen-engines .bl-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
#screen-engines .bl-table h4 { font-size: var(--type-sm); margin: 0 0 var(--space-2); color: var(--ink-2); }
#screen-engines .bl-table table { width: 100%; border-collapse: collapse; font-size: var(--type-xs); font-variant-numeric: tabular-nums; }
#screen-engines .bl-table th { text-align: left; color: var(--ink-muted); font-weight: var(--weight-semi); padding: 4px 8px; border-bottom: 1px solid var(--border); }
#screen-engines .bl-table td { padding: 5px 8px; border-bottom: 1px solid var(--hairline, var(--border)); color: var(--ink-2); }
#screen-engines .bl-table-wide { grid-column: 1 / -1; }
#screen-engines .bl-pos { color: var(--pos); font-weight: var(--weight-semi); }
#screen-engines .bl-neg { color: var(--neg); font-weight: var(--weight-semi); }