/* CAPAS Gate App — theme overlay.
   Loaded as an EXTERNAL stylesheet (allowed by CSP style-src 'self'), so it never
   changes an inline hash. It overrides the design tokens to the shared magenta
   palette and adds styling for the deterministic rule-ledger injected by
   app-ledger.js. Pure presentation — no logic, no decision behavior. */

:root {
  --accent: #e8185d;
  --accent-hover: #ff2d6f;
  --accent-glow: rgba(232, 24, 93, 0.15);
  --accent-start: #e8185d;
  --accent-end: #c4125a;
}

/* keep the light theme accent aligned too, if the app exposes one */
@media (prefers-color-scheme: light) {
  :root { --accent: #c4125a; --accent-hover: #e8185d; }
}

/* ─── Deterministic rule-ledger (Falta 3: "show the engine") ─── */
.capas-ledger {
  margin-top: 14px;
  border: 1px solid rgba(232, 24, 93, 0.32);
  border-radius: 10px;
  background: rgba(232, 24, 93, 0.05);
  padding: 14px 16px;
  font-family: ui-monospace, "Space Mono", SFMono-Regular, Menlo, monospace;
}
.capas-ledger-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.capas-ledger-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8185d;
  background: rgba(232, 24, 93, 0.12);
  border: 1px solid rgba(232, 24, 93, 0.35);
  border-radius: 5px;
  padding: 4px 9px;
}
.capas-ledger-type { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.capas-ledger-meta { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-left: auto; }
.ledger-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}
.ledger-rule:last-of-type { border-bottom: none; }
.ledger-rule .rule-id { color: rgba(255, 255, 255, 0.32); font-size: 11px; min-width: 52px; }
.ledger-rule .rule-name { flex: 1; color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }
.ledger-rule .rule-status { white-space: nowrap; font-weight: 700; }
.ledger-rule .ok { color: #22c55e; }
.ledger-rule .fail { color: #e8185d; }
.ledger-obligation {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 7px;
  background: rgba(232, 24, 93, 0.1);
  border: 1px solid rgba(232, 24, 93, 0.28);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}
.ledger-obligation b { color: #e8185d; }
.ledger-decision {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.ledger-decision .ld-badge {
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.ld-badge.ACCEPT { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.ld-badge.REWRITE { color: #e8185d; background: rgba(232, 24, 93, 0.12); }
.ld-badge.REJECT { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.ld-badge.HOLD { color: #94a3b8; background: rgba(148, 163, 184, 0.12); }
.ledger-nonclaim { margin-top: 10px; font-size: 10.5px; color: rgba(255, 255, 255, 0.32); letter-spacing: 0.02em; }

/* Collapsed rule-ledger disclosure — keeps the DECISION card clean (mock parity)
   while the deterministic engine stays one click away. */
.ledger-details { margin-top: 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.02); overflow: hidden; }
.ledger-summary { padding: 11px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.42); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.ledger-summary::-webkit-details-marker { display: none; }
.ledger-summary::before { content: '\203a'; font-size: 15px; line-height: 1; transition: transform .2s; color: #e8185d; }
.ledger-details[open] .ledger-summary::before { transform: rotate(90deg); }
.ledger-summary:hover { color: rgba(255,255,255,0.7); }
.ledger-details .capas-ledger { margin-top: 0; border: none; border-top: 1px solid rgba(255,255,255,0.06); border-radius: 0; background: transparent; padding-top: 12px; }

/* Collapsed operational-resolution disclosure (mock parity — clean DECISION) */
details.action-block > summary.action-head { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; margin: 0; }
details.action-block > summary.action-head::-webkit-details-marker { display: none; }
details.action-block > summary.action-head::after { content: '\203a'; font-size: 15px; line-height: 1; color: #7c7fff; transition: transform .2s; margin-left: auto; }
details.action-block[open] > summary.action-head::after { transform: rotate(90deg); }
details.action-block:not([open]) > summary.action-head { margin-bottom: 0; }
details.action-block > *:not(summary) { margin-top: 10px; }

/* Step 2 · EVIDENCE CONTRACT as a horizontal card above the form (mock parity) */
.phase-pane[data-phase="complete"] .builder-shell { display: flex; flex-direction: column; gap: 16px; }
.phase-pane[data-phase="complete"] .builder-rail { order: -1; background: rgba(79,94,247,0.05); border: 1px solid rgba(79,94,247,0.16); border-radius: 10px; padding: 13px 16px; }
.phase-pane[data-phase="complete"] .builder-rail h3 { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(124,127,255,0.78); margin: 0 0 10px; }
.phase-pane[data-phase="complete"] .builder-contract { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.phase-pane[data-phase="complete"] .builder-rail ul,
.phase-pane[data-phase="complete"] .builder-preview { display: none; }

/* ─── Brand mark in the gate-app topbar ─── */
.topbar-mark { height: 26px; width: auto; display: block; border-radius: 4px; }
.topbar-by { font-size: 8px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-left: 5px; }

/* ─── Consistency with the rest of the site ─── */
:root { --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-body { max-width: 1200px; padding-left: 48px; padding-right: 48px; }  /* match the canonical 1200 column (Home/Benchmark/Methodology); was 1400 — the one page that stuck out wider + further left */
.topbar { padding-left: 48px; padding-right: 48px; }

/* ─── Persistent 3D logo background (VISIBLE, matches the mock stacking) ─── */
.bg-logo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.65; }
.bg-logo iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; transform: scale(3.35); transform-origin: center center; }
.bg-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 68% 40%, transparent 0%, rgba(5,5,7,0.28) 46%, rgba(5,5,7,0.70) 100%),
              linear-gradient(rgba(5,5,7,0.42), rgba(5,5,7,0.12) 30%, rgba(5,5,7,0.58)); }
/* content above the background/veil (mock uses .page{z-index:2}) */
nav, main.app-body, .app-body { position: relative; z-index: 2; }

/* ─── Contrast + RGYB homogenization (logo: Black>Magenta>Cyan>Gold>Green) ─── */
:root { --text-2: #cbd5e1; --text-3: #94a3b8; }
.verdict-badge.REWRITE { background: rgba(0,200,200,0.10); color: #00c8c8; border-color: rgba(0,200,200,0.45); }
.verdict-badge.HOLD { background: rgba(200,150,10,0.12); color: #d4a820; border-color: rgba(200,150,10,0.45); }
.verdict-badge.REJECT { background: rgba(232,24,90,0.12); color: #e8185a; border-color: rgba(232,24,90,0.5); }
.verdict-badge.ACCEPT { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.45); }
.ld-badge.REWRITE { color: #00c8c8; background: rgba(0,200,200,0.12); }
.ld-badge.HOLD { color: #d4a820; background: rgba(200,150,10,0.12); }
.ld-badge.REJECT { color: #e8185a; background: rgba(232,24,90,0.12); }
.ledger-rule .fail { color: #e8185a; }
/* topbar normalized to the shared site nav (black bar + 48px side margins) */
.topbar { background: rgba(5,5,7,0.82); border-bottom: 1px solid rgba(255,255,255,0.06); }
.topbar-subtitle, .topbar-divider { display: none; }
.topbar-site-link { border: none; background: transparent; color: rgba(255,255,255,0.55); font-weight: 600; }
.topbar-site-link:hover { color: #fff; background: rgba(255,255,255,0.07); }
.topbar-current { color: #fff; border: 1px solid rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.05) !important; }

/* ─── Shared shell finish: de-red panels + shared-nav CTA/wordmark ─── */
:root { --accent-glow: rgba(255,255,255,0.045); }
.topbar-wm { display: inline-flex; flex-direction: column; line-height: 1.05; gap: 2px; }
.topbar-wm .topbar-by { margin-left: 0; }
.topbar-cta { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 6px; background: linear-gradient(135deg,#e8185d,#c4125a); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .02em; }
.topbar-cta:hover { opacity: .9; }

/* Match Home: full-width shell so the shared nav/logo align (content stays bounded by .app-body). */
body { max-width: none; margin: 0; }

/* ─── Gate App mock reskin · mode cards + iconography ─── */
.workflow-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.workflow-mode-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.workflow-mode-card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.workflow-mode-card[aria-checked="true"] { border-color: #e8185d; background: rgba(232,24,93,0.06); }
.workflow-mode-card strong { font-size: 13.5px; font-weight: 700; color: #fff; }
.workflow-mode-card span { font-size: 12px; color: rgba(255,255,255,0.52); line-height: 1.45; }
.workflow-mode-card[aria-checked="true"]::after { content: "ACTIVE"; position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 700; letter-spacing: .06em; background: #e8185d; color: #fff; padding: 2px 7px; border-radius: 3px; }
.mode-card-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.mode-card-icon svg { width: 17px; height: 17px; display: block; }
.mode-icon-guided { color: #e8185d; background: rgba(232,24,93,0.12); }
.mode-icon-raw { color: #f6ad55; background: rgba(246,173,85,0.10); }
.mode-icon-batch { color: #48bb78; background: rgba(72,187,120,0.10); }
.mode-icon-ingestion { color: #7c7fff; background: rgba(124,127,255,0.12); }
@media (max-width: 720px) { .workflow-mode-grid { grid-template-columns: 1fr; } }

/* ═══ GATE APP — FULL MOCK RESKIN (simplicity). Maps mock styles to
   real classes. Verdict colors stay on site-wide RGYB. JS untouched. ═══ */
body { background: #080810; }
.product-hero { display: grid; grid-template-columns: 1fr minmax(0,480px); gap: 48px; align-items: center; padding: 44px 48px 32px; }
.hero-shot { background: rgba(14,14,24,0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.shot-body { padding: 14px; display: grid; gap: 5px; }
.shot-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); font-size: 12px; }
.workflow-step { padding: 16px 22px; border: 1px solid rgba(255,255,255,0.06); background: rgba(5,5,7,0.4); cursor: pointer; transition: background .15s; }
.workflow-step:hover { background: rgba(255,255,255,0.03); }
.workflow-step strong { font-size: 13px; font-weight: 700; color: #fff; display: block; margin-bottom: 3px; }
.workflow-step span { font-size: 11px; color: rgba(255,255,255,0.32); line-height: 1.5; }
.panel, .phase-pane, .guided-shell { background: rgba(14,14,24,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; backdrop-filter: blur(8px); }
.panel-title { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.flow-step-badge { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); }
.starter-step { border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.02); }
.starter-step.active { border-color: rgba(232,24,93,0.4); background: rgba(232,24,93,0.05); }
.starter-step.active .flow-step-badge { background: rgba(232,24,93,0.2); color: #e8185d; }
.phase-indicator { font-size: 10px; color: rgba(255,255,255,0.25); letter-spacing: .07em; text-transform: uppercase; }
.decide-btn, .draft-btn, #phase-run, .hero-primary { background: linear-gradient(135deg,#e8185d,#c4125a); color: #fff; border: none; border-radius: 8px; font-weight: 700; box-shadow: 0 4px 18px rgba(232,24,93,.3); cursor: pointer; }
.copy-btn { border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.55); font-size: 12px; }
.copy-btn:hover { color: #fff; border-color: rgba(232,24,93,0.45); }
.sample-btn { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 5px; border: 1px solid transparent; }
.sample-btn.accept { color: #22c55e; border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.08); }
.sample-btn.rewrite { color: #00c8c8; border-color: rgba(0,200,200,0.25); background: rgba(0,200,200,0.08); }
.sample-btn.invalid, .sample-btn.hold { color: #d4a820; border-color: rgba(200,150,10,0.25); background: rgba(200,150,10,0.08); }
.builder-rail { background: rgba(79,94,247,0.05); border: 1px solid rgba(79,94,247,0.15); border-radius: 8px; }
.contract-pill { font-size: 11px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 5px; }
.contract-pill strong { color: rgba(255,255,255,0.8); }
.guided-field label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4); }
.guided-field input, .guided-field select, .guided-field textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #e2e2f0; }
.guided-field input:focus, .guided-field select:focus, .guided-field textarea:focus { border-color: rgba(232,24,93,0.4); outline: none; }
#verdict-area { border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
.exec-card { background: rgba(14,14,24,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
.exec-card strong { color: #fff; }
.history-section { background: rgba(14,14,24,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; backdrop-filter: blur(8px); }

/* ─── Hero verdict-preview (mock parity) ─── */
.shot-top{display:flex;align-items:center;gap:6px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02)}
.shot-dot{width:9px;height:9px;border-radius:50%;background:#33343a}
.shot-dot:nth-child(1){background:#ff5f57}.shot-dot:nth-child(2){background:#febc2e}.shot-dot:nth-child(3){background:#28c840}
.shot-title{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.3)}
.shot-schema{margin-left:auto;font-size:10px;font-weight:700;color:#7c7fff;border:1px solid rgba(124,127,255,0.3);padding:3px 8px;border-radius:4px;letter-spacing:.05em}
.shot-row.accept{background:rgba(34,197,94,0.07)!important;border-color:rgba(34,197,94,0.18)!important}
.shot-row.rewrite{background:rgba(0,200,200,0.07)!important;border-color:rgba(0,200,200,0.18)!important}
.shot-row.reject{background:rgba(232,24,90,0.07)!important;border-color:rgba(232,24,90,0.18)!important}
.shot-row.hold{background:rgba(200,150,10,0.07)!important;border-color:rgba(200,150,10,0.18)!important}

/* ═══ MOCK 2-COLUMN LAYOUT + RIGHT SIDEBAR (Bloomberg-terminal shell) ═══
   Main workflow on the left, a sticky operational sidebar on the right —
   Local Audit Trail metrics, Pilot capacity model (ROI), Workspace Settings.
   Pure presentation: every element keeps its original id, so the engine's
   getElementById() bindings are unchanged. */
/* app.app-body is a flex column whose sections carry explicit `order`
   (hero=1, workflow-strip=2, footer high). The wrapper must sit between the
   strip and the footer, so it needs an explicit order too. */
.app-layout { order: 5; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; padding: 8px 0 48px; }
.app-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.app-main > section, .app-main > .history-section { margin: 0 !important; }
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.side-card { background: rgba(14,14,24,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; backdrop-filter: blur(8px); }
.side-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.3); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.schema-badge { font-size: 9px; font-weight: 700; color: #7c7fff; border: 1px solid rgba(124,127,255,0.3); padding: 2px 7px; border-radius: 4px; letter-spacing: .05em; }
.audit-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.audit-row:last-child { border-bottom: none; }
.audit-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.5); }
.audit-val { font-size: 14px; font-weight: 800; color: #fff; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.2); }
.dot-neutral { background: rgba(255,255,255,0.2); }
.dot-accept { background: #22c55e; } .val-accept { color: #22c55e; }
.dot-rewrite { background: #00c8c8; } .val-rewrite { color: #00c8c8; }
.dot-reject { background: #e8185a; } .val-reject { color: #e8185a; }
.dot-hold { background: #d4a820; }
.side-card .roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.roi-field { display: flex; flex-direction: column; gap: 4px; }
.roi-field label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3); letter-spacing: .03em; }
.roi-field input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-weight: 700; color: #e2e2f0; outline: none; width: 100%; }
.roi-field input:focus { border-color: rgba(232,24,93,0.4); }
.side-card .roi-result { background: rgba(232,24,93,0.06); border: 1px solid rgba(232,24,93,0.16); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.roi-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roi-result-label { font-size: 11px; color: rgba(255,255,255,0.45); }
.roi-result-num { font-size: 24px; font-weight: 800; color: #e8185d; line-height: 1; }
.roi-result-sub { font-size: 10px; color: rgba(255,255,255,0.4); line-height: 1.5; }
.roi-result-sub strong { color: rgba(255,255,255,0.6); font-weight: 700; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: 12px; color: rgba(255,255,255,0.45); }
.settings-val { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
.settings-val.val-none { color: #e8185a; background: rgba(232,24,90,0.08); }
.side-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.side-btn { font-size: 11px; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 5px; background: transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.side-btn:hover { color: #fff; border-color: rgba(232,24,93,0.4); }
/* Keep the sidebar on the RIGHT down to 560px, exactly like the mock
   (the mock's only app-layout breakpoint is 560px). Below that it stacks. */
@media (max-width: 560px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: column; }
}

/* ═══ MOCK STEP-TABS (1 Select Mode · 2 Build Evidence · 3 Run Gate) ═══
   Replaces the verbose starter-guide. Active/done states are driven purely
   by the engine's existing body[data-flow-phase] attribute — no JS added. */
.starter-guide { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; }
.step-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid rgba(255,255,255,0.08); margin: 4px 0 0; flex-wrap: wrap; }
.step-tab { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.32); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s; margin-bottom: -1px; }
.step-tab:hover { color: rgba(255,255,255,0.7); }
.step-num { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.07); color: inherit; flex-shrink: 0; }
/* active step (current phase) */
body[data-flow-phase="choose"] .step-tab[data-step="choose"],
body[data-flow-phase="complete"] .step-tab[data-step="complete"],
body[data-flow-phase="gate"] .step-tab[data-step="gate"] { color: #fff; border-bottom-color: #e8185d; }
body[data-flow-phase="choose"] .step-tab[data-step="choose"] .step-num,
body[data-flow-phase="complete"] .step-tab[data-step="complete"] .step-num,
body[data-flow-phase="gate"] .step-tab[data-step="gate"] .step-num { background: rgba(232,24,93,0.2); color: #e8185d; }
/* completed steps (earlier than current phase) */
body[data-flow-phase="complete"] .step-tab[data-step="choose"],
body[data-flow-phase="gate"] .step-tab[data-step="choose"],
body[data-flow-phase="gate"] .step-tab[data-step="complete"] { color: #22c55e; border-bottom-color: rgba(34,197,94,0.3); }
body[data-flow-phase="complete"] .step-tab[data-step="choose"] .step-num,
body[data-flow-phase="gate"] .step-tab[data-step="choose"] .step-num,
body[data-flow-phase="gate"] .step-tab[data-step="complete"] .step-num { background: rgba(34,197,94,0.15); color: #22c55e; }

/* Big full-width run button + clean phase-controls bar (mock parity) */
.phase-controls { display: flex; align-items: center; gap: 10px; padding: 14px 0 2px; border-top: none; flex-wrap: wrap; }
.phase-controls .phase-indicator { margin-right: auto; }
.phase-control-group { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#phase-next { flex: 0 0 auto; font-size: 12px; padding: 9px 16px; }
#phase-back { font-size: 12px; padding: 9px 16px; }
#phase-run { flex: 1 1 auto; justify-content: center; padding: 14px 24px; font-size: 15px; border-radius: 9px; box-shadow: 0 6px 22px rgba(232,24,93,.38); }


/* App hero title equivalent to the marketing page heroes (canonical 36-58 / 900 Inter).
   Was 28px/750; the onboarded-compact override on mobile is preserved. */
#product-hero-title { font-size: clamp(36px,4.5vw,58px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
@media (max-width: 560px) { body.onboarded #product-hero-title { font-size: 15px; font-weight: 600; } }

/* Hero accent gradient on a key word — consistent with the marketing heroes. */
#product-hero-title em { font-style: normal; background: linear-gradient(135deg,#e8185d,#a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* === Gate App container hygiene: ONE frame, not boxes-inside-boxes ===
   The guided/workflow panel stacked up to four bordered+filled layers between its outer frame
   and the leaf cards (phase-viewport > phase-pane > flow-section), reading as concentric boxes.
   That killed the clean, transparent feel of the rest of the site. Collapse the MIDDLE layers to
   transparent so each panel is a single frame holding clean leaf cards/fields. Scoped so a panel
   that legitimately stands alone keeps its one border. (External file -> no inline-CSP-hash change.) */
.phase-viewport,
.flow-section,
.panel .phase-pane,
.guided-panel .phase-pane,
.workflow-panel .phase-pane,
.phase-track > .phase-pane {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* the inner layers no longer need their own inset padding stacking up */
.phase-viewport { padding: 0 !important; }

/* ─── Mobile hardening — found by ui_lab (gate-app overflowed to 912px @390w) ─── */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }                      /* the decorative bg iframe never makes h-scroll */
  .app-body { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .app-layout { grid-template-columns: 1fr !important; }  /* main pane + right rail stack */
  .product-hero { grid-template-columns: 1fr !important; }/* hero + recent-decisions panel stack */
  .workflow-strip { grid-template-columns: 1fr !important; }
  .history-item, .audit-row, .audit-table, .side-card, .panel { max-width: 100%; }
  .history-item { flex-wrap: wrap; }
  .history-id, .history-badge { word-break: break-word; }
}

/* ─── Decision panel ghost state: teach what a verdict contains before one exists (audit #7) ─── */
.no-decision { font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.62; }
.ghost-list { list-style: none; margin: 12px 0 12px; padding: 0; display: grid; gap: 7px; }
.ghost-list li { font-size: 12.5px; color: rgba(255,255,255,0.5); padding-left: 18px; position: relative; line-height: 1.5; }
.ghost-list li::before { content: '\2192'; position: absolute; left: 0; color: #e8185d; font-weight: 700; }

/* ─── Evidence Contract as protagonist, not a side panel (audit #5 — this is the moat) ─── */
.builder-rail { border-left: 2px solid rgba(232,24,93,0.5) !important; }
.builder-rail h3 { color: #e8185d !important; letter-spacing: 0.07em; font-size: 11px !important; }

/* ─── Option B: seeded EXAMPLE banner — only while the demo decision is showing (body[data-demo]) ─── */
.demo-banner { display: none; }
body[data-demo="1"] .demo-banner { display: block; margin-bottom: 12px; padding: 9px 13px;
  border: 1px solid rgba(232,24,93,0.4); border-radius: 8px; background: rgba(232,24,93,0.08);
  font-size: 12px; color: rgba(255,255,255,0.78); line-height: 1.5; }
body[data-demo="1"] .demo-banner strong { color: #e8185d; letter-spacing: 0.06em; }

/* ─── Simple vs Advanced inputs: Guided is the simple default; Raw JSON / Batch / Extraction hide until toggled ─── */
.mode-advanced { display: none; }
.workflow-mode-grid:has(.adv-toggle:checked) .mode-advanced { display: flex; }
.adv-toggle-label { grid-column: 1 / -1; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,0.42); display: flex; align-items: center; gap: 8px; padding: 9px 2px 2px; }
.adv-toggle-label::before { content: '\203a'; color: #e8185d; font-size: 16px; line-height: 1; transition: transform .2s; }
.workflow-mode-grid:has(.adv-toggle:checked) .adv-toggle-label::before { transform: rotate(90deg); }
.adv-toggle-label:hover { color: rgba(255,255,255,0.72); }