/* ============================================================
   EU CRA Compliance — Workbench styles (EU blue + gold theme)
   Lighter density: verdict-first, details on demand.
   ============================================================ */

:root {
  --topbar-h: 64px;
  --rail-w: 248px;
  --drawer-w: 392px;
  --pad-card: 26px;
  --gap-section: 28px;
  --fs-body: 14.5px;
}

body.compact {
  --pad-card: 18px;
  --gap-section: 18px;
  --fs-body: 13.5px;
}

body { background: var(--bg); }

#root { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.wb-topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}

.wb-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.wb-brand img { height: 34px; width: 34px; display: block; }
.wb-brand-text { display: flex; flex-direction: column; gap: 0; text-align: left; }
.wb-brand-text b { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.wb-brand-text span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }

.wb-product-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wb-product-chip:hover { border-color: var(--blue-400); box-shadow: 0 4px 14px rgba(16, 43, 69, 0.08); }
.wb-product-chip .pv { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600); }
.wb-product-chip .pn { font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wb-product-chip .swap { font-family: var(--mono); font-size: 10px; color: var(--gray-500); }

.wb-top-actions { display: flex; align-items: center; gap: 14px; }

/* back-to-website link (post-auth) */
.wb-site-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--gray-500); text-decoration: none;
  padding: 6px 10px; border-radius: var(--radius-sm);
  transition: color 160ms ease, background 160ms ease;
}
.wb-site-link:hover { color: var(--blue-700); background: var(--blue-050); }

/* auditor toggle */
.aud-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer; user-select: none;
  font: inherit;
  transition: background 180ms ease, border-color 180ms ease;
}
.aud-toggle.on { background: var(--judge-bg); border-color: rgba(138, 90, 0, 0.35); }
.aud-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--gray-300); transition: background 180ms ease; }
.aud-toggle.on .aud-track { background: var(--judge); }
.aud-thumb { position: absolute; top: 2.5px; left: 2.5px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 180ms ease; }
.aud-toggle.on .aud-thumb { transform: translateX(16px); }
.aud-label { font-size: 13px; font-weight: 600; color: var(--gray-700); white-space: nowrap; }
.aud-toggle.on .aud-label { color: var(--judge); }

/* ---------- intake ---------- */
.intake-wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding: 36px 28px 64px; }
.intake-head { max-width: 760px; margin-bottom: 28px; }
.intake-head .mono-label { color: var(--blue-600); }
.intake-head h1 { margin: 10px 0 0; font-family: var(--display); font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; color: var(--blue-900); text-wrap: pretty; }
.intake-head p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--gray-600); text-wrap: pretty; }

/* ---------- intake · research a new product ---------- */
.intake-research { margin: 22px 0 4px; padding: 18px 20px 20px; border: 1px solid var(--blue-100, #d6e0f5); border-radius: var(--radius-lg, 14px); background: linear-gradient(180deg, var(--blue-050, #f3f7ff), var(--paper, #fff)); }
.intake-research .ir-head { max-width: 720px; }
.intake-research .ir-head .mono-label { color: var(--blue-600); display: block; }
.ir-sub { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--gray-600); }
.ir-row { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
.ir-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm, 8px); font-size: 15px; font-family: inherit; color: var(--gov-ink, #0b0c0c); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.ir-input:focus { border-color: var(--blue-700); box-shadow: 0 0 0 3px var(--blue-050); }
.ir-input:disabled { background: var(--gray-050, #f6f7f9); color: var(--gray-500); }
.ir-btn { flex: 0 0 auto; white-space: nowrap; padding: 0 20px; height: 44px; }
.ir-note { margin-top: 12px; font-size: 13px; line-height: 1.5; border-radius: var(--radius-sm, 8px); padding: 10px 13px; }
.ir-loading { display: flex; align-items: center; gap: 10px; color: var(--blue-700); background: var(--blue-050, #f3f7ff); border: 1px solid var(--blue-100, #d6e0f5); }
.ir-err { color: var(--bad, #b40000); background: var(--bad-bg, #fdecec); border-left: 4px solid var(--bad, #b40000); font-weight: 600; }
.ir-spin { flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid var(--blue-200, #b9cbf0); border-top-color: var(--blue-700, #1d4ed8); border-radius: 50%; animation: ir-spin 0.7s linear infinite; }
@keyframes ir-spin { to { transform: rotate(360deg); } }

.intake-grid { display: grid; grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.intake-grid > * { min-width: 0; }

.catalog { display: flex; flex-direction: column; gap: 18px; }
.catalog-group .mono-label { color: var(--gray-500); display: block; margin-bottom: 8px; }
.catalog-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.catalog-cards.single { grid-template-columns: 1fr; }

.pcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--paper);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pcard:hover { transform: translateY(-2px); border-color: var(--blue-200); box-shadow: var(--shadow-1); }
.pcard.active { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-1); background: var(--blue-050); }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard .purdue { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--gray-500); padding: 2px 7px; border-radius: 999px; background: var(--gray-100); }
.pcard.active .purdue { background: var(--blue-100); color: var(--blue-700); }
.pcard .pname { font-family: var(--display); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--blue-900); }
.pcard .pcat { font-size: 11.5px; line-height: 1.35; color: var(--gray-500); }

/* record panel */
.record { padding: var(--pad-card); display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--topbar-h) + 20px); }
.record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.record-head .rv { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-600); }
.record-head h2 { margin: 4px 0 2px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); }
.record-head .rsub { font-size: 13.5px; color: var(--gray-600); }

.record-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.rmetric { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--gray-100); display: flex; flex-direction: column; gap: 5px; }
.rmetric .mk { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-500); }
.rmetric .mv { font-size: 13.5px; font-weight: 700; color: var(--blue-900); line-height: 1.25; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { padding: 4px 10px; border-radius: 999px; background: var(--blue-050); border: 1px solid var(--blue-100); color: var(--blue-700); font-family: var(--mono); font-size: 10.5px; font-weight: 700; }

.record-cta { display: flex; align-items: center; gap: 16px; }
.record-cta .cta-note { flex: 1; font-size: 12px; line-height: 1.5; color: var(--gray-500); }

/* ---------- loading ---------- */
.loading-wrap { max-width: 460px; margin: 18vh auto 0; text-align: center; padding: 0 24px; }
.loading-spinner { width: 44px; height: 44px; margin: 0 auto 16px; border: 3px solid var(--gray-200); border-top-color: var(--blue-500); border-radius: 50%; animation: wbspin 700ms linear infinite; }
@keyframes wbspin { to { transform: rotate(360deg); } }
.loading-wrap h2 { margin: 0 0 16px; font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--blue-900); }
.loading-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.loading-steps li { opacity: 0.25; font-family: var(--mono); font-size: 12px; color: var(--gray-600); transition: opacity 200ms ease, color 200ms ease; }
.loading-steps li.show { opacity: 1; }
.loading-steps li.done { color: var(--ok); }
.loading-live { margin: 18px 0 0; font-family: var(--mono); font-size: 12px; color: var(--gray-600); line-height: 1.5; }

/* ---------- data-provenance badge (live API vs demo data) ---------- */
.src-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.src-tag.src-live { background: var(--ok-bg); color: var(--ok); }
.src-tag.src-demo { background: var(--gray-100); color: var(--gray-500); }
.step-head-tag { margin-left: 10px; }
.step-head-tag .src-tag { font-size: 11px; }

/* ---------- results layout ---------- */
.results { flex: 1; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; }

.rail {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  padding: 24px 14px;
  border-right: 1px solid var(--gray-200);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 4px;
}
.rail .mono-label { color: var(--gray-400); padding: 0 10px 10px; }
.rail-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 10px;
  border: none; background: none; font: inherit; text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.rail-item:hover { background: var(--gray-100); }
.rail-item.active { background: var(--blue-050); }
.rail-num {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gray-100); color: var(--gray-600);
  font-family: var(--display); font-size: 13px; font-weight: 700;
}
.rail-item.active .rail-num { background: var(--blue-600); color: #fff; }
.rail-text { display: flex; flex-direction: column; gap: 2px; }
.rail-name { font-size: 13.5px; font-weight: 700; color: var(--gray-700); line-height: 1.2; }
.rail-item.active .rail-name { color: var(--blue-800); }
.rail-sub { font-family: var(--mono); font-size: 10px; color: var(--gray-400); }
.rail-spacer { flex: 1; }
.rail-foot { padding: 12px 10px; font-family: var(--mono); font-size: 10px; line-height: 1.7; color: var(--gray-400); border-top: 1px solid var(--gray-200); }

.content-col { padding: 30px 36px 80px; transition: padding-right 240ms ease; min-width: 0; }
.content { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-section); }
.results.drawer-open .content-col { padding-right: calc(var(--drawer-w) + 24px); }

/* step header */
.step-head { display: flex; flex-direction: column; gap: 6px; }
.step-head .mono-label { color: var(--blue-600); }
.step-head h1 { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--blue-900); }
.step-head .step-summary { margin: 4px 0 0; max-width: 680px; font-size: 15.5px; line-height: 1.55; color: var(--gray-600); text-wrap: pretty; }

/* generic panels */
.panel { padding: var(--pad-card); }
.panel h3 { margin: 0 0 14px; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--blue-900); }
.panel p { font-size: var(--fs-body); }

/* verdict banner */
.verdict-banner {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; overflow: hidden;
  background: var(--gray-200);
}
.vcell { background: var(--paper); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.vcell .mono-label { font-size: 10px; color: var(--gray-500); }
.vcell .vval { font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.vcell.tone-ok .vval { color: var(--ok); }
.vcell.tone-warn .vval { color: var(--warn); }

/* legal recommendation — risk-derived due-diligence judgment on the verdict screen */
.legal-rec { margin: 16px 0; padding: 18px 22px; border-left: 3px solid var(--gray-200); }
.legal-rec.tone-warn { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-bg), transparent 60%); }
.legal-rec.tone-ok { border-left-color: var(--ok); background: linear-gradient(90deg, var(--ok-bg), transparent 60%); }
.legal-rec-head { display: flex; align-items: center; gap: 10px; }
.legal-rec-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.legal-rec-headline { margin: 8px 0 10px; font-family: var(--display); font-size: 16px; line-height: 1.3; }
.legal-rec.tone-warn .legal-rec-headline { color: var(--warn); }
.legal-rec.tone-ok .legal-rec-headline { color: var(--ok); }
.legal-rec-body { margin: 0 0 9px; font-size: 13.5px; line-height: 1.6; color: var(--gray-700); max-width: 88ch; }
.legal-rec-cite { margin: 10px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--gray-500); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reason-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: 10px; font-size: var(--fs-body); line-height: 1.55; color: var(--gray-700); }
.reason-list li::marker { color: var(--blue-500); }
.reason-list b { color: var(--ink); }

/* disclosure (details on demand) */
.disclosure { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.disclosure + .disclosure { margin-top: 10px; }
.disclosure-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px;
  border: none; background: none; font: inherit; text-align: left; cursor: pointer;
}
.disclosure-btn:hover { background: var(--gray-100); }
.disclosure-btn .dt { font-size: 14px; font-weight: 700; color: var(--blue-800); display: flex; align-items: center; gap: 10px; }
.disclosure-btn .chev { font-family: var(--mono); font-size: 12px; color: var(--gray-400); transition: transform 200ms ease; }
.disclosure.open .disclosure-btn .chev { transform: rotate(90deg); }
.disclosure-body { padding: 4px 20px 20px; }

/* capture-safe entrance: transition, not keyframes */
.reveal { opacity: 0; transform: translateY(-4px); transition: opacity 220ms ease, transform 220ms ease; }
.reveal.entered { opacity: 1; transform: none; }

/* kv table */
.kv { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.kv td { padding: 9px 0; border-bottom: 1px solid var(--gray-100); vertical-align: top; line-height: 1.5; }
.kv tr:last-child td { border-bottom: none; }
.kv td.k { width: 150px; padding-right: 18px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.kv td.v { color: var(--gray-800); }

/* OSINT findings */
.osint-strip { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.osint-count { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--blue-800); }
.osint-count.clean { color: var(--ok); }
.osint-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.osint-meta b { font-size: 13.5px; color: var(--ink); }
.osint-meta span { font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); }

.finding { padding: 16px 18px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); display: flex; flex-direction: column; gap: 8px; }
.finding + .finding { margin-top: 10px; }
.finding-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finding-top .cve { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--blue-700); }
.finding b.ft { font-size: 14px; color: var(--ink); }
.finding p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.finding .fmeta { font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); line-height: 1.6; }
.pill.cvss-crit { background: var(--bad-bg); color: var(--bad); }
.pill.cvss-high { background: var(--warn-bg); color: var(--warn); }
.pill.cvss-med  { background: var(--blue-050); color: var(--blue-600); }

/* ---------- gaps screen ---------- */
.score-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.score-box {
  padding: 16px 18px; border-radius: var(--radius-md);
  border: 1px solid var(--gray-200); background: var(--paper);
  display: flex; flex-direction: column; gap: 3px;
  font: inherit; text-align: left; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.score-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.score-box .sn { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
.score-box .sl { font-size: 12.5px; font-weight: 600; color: var(--gray-600); }
.score-box.missing .sn { color: var(--bad); }
.score-box.partial .sn { color: var(--warn); }
.score-box.met .sn { color: var(--ok); }
.score-box.all .sn { color: var(--blue-700); }
.score-box.selected { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); }

.req-list { display: flex; flex-direction: column; gap: 10px; }
.req-row { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; }
.req-row.expanded { border-color: var(--blue-200); box-shadow: var(--shadow-1); }
.req-row.flagged { border-left: 3px solid var(--judge); }
.req-btn {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border: none; background: none; font: inherit; text-align: left; cursor: pointer;
}
.req-btn:hover { background: var(--gray-100); }
.req-btn .rid { flex: none; width: 56px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--blue-600); }
.req-btn .rname { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.req-btn .aud-flag { flex: none; font-size: 12px; color: var(--judge); }
.req-detail { padding: 0 18px 18px 88px; display: grid; gap: 12px; }
.req-detail .rd-block { display: flex; flex-direction: column; gap: 4px; }
.req-detail .rd-k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.req-detail .rd-v { font-size: 13.5px; line-height: 1.55; color: var(--gray-700); }
.req-detail .rd-judge { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--judge-bg); }
.req-detail .rd-judge .rd-k { color: var(--judge); }
.req-detail .rd-judge .rd-v { color: var(--gray-800); }
.req-detail .rd-cra { padding: 11px 14px; border-radius: var(--radius-sm); background: var(--blue-050); border-left: 3px solid var(--blue-600); }
.req-detail .rd-cra .rd-k { color: var(--blue-700); }
.req-detail .rd-quote { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 14px; line-height: 1.6; color: var(--gray-800); }
.empty-note { padding: 22px; text-align: center; font-size: 13.5px; color: var(--gray-500); border: 1px dashed var(--gray-300); border-radius: var(--radius-md); }

/* ---------- bridge screen ---------- */
.bridge-list { display: flex; flex-direction: column; gap: 12px; }
.bridge-card { padding: 18px 20px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.bridge-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bridge-cell .bk { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.bridge-cell .bv { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.bridge-cell .bsub { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
.bridge-arrow { align-self: center; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--blue-400); }
.bridge-why { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--gray-100); font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
.bridge-why b { color: var(--blue-700); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* ---------- vuln screen ---------- */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 18px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 5px; left: 4%; right: 30%; height: 2px; background: var(--blue-200); }
.tl-step { position: relative; display: flex; flex-direction: column; gap: 4px; }
.tl-step::before { content: ""; position: absolute; top: -17px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-600); }
.tl-t { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--blue-800); }
.tl-d { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
.timeline-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 4px; }
.timeline-block + .timeline-block { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--gray-100); }

/* ---------- package screen ---------- */
.readiness { padding: var(--pad-card); display: flex; align-items: center; gap: 24px; }
.readiness-num { font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--blue-800); line-height: 1; }
.readiness-meta { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.readiness-meta b { font-size: 14px; color: var(--ink); }
.readiness-meta span { font-size: 12.5px; color: var(--gray-500); }
.meter { height: 8px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1); }

.file-list { display: flex; flex-direction: column; }
.file-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.file-row:last-child { border-bottom: none; }
.file-row .fid { flex: none; width: 72px; padding-top: 1px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--blue-600); }
.file-row .fname { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.file-row .fdesc { display: block; font-size: 12px; font-weight: 400; color: var(--gray-500); margin-top: 3px; line-height: 1.5; max-width: 440px; text-wrap: pretty; }
.file-row .fnote { display: block; font-size: 11.5px; font-weight: 400; font-style: italic; color: var(--gray-400); margin-top: 3px; }
.file-row .file-tags { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 1px; }
.src-chip { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.src-chip.wb  { background: var(--blue-050); color: var(--blue-600); }
.src-chip.ai  { background: var(--blue-100); color: var(--blue-700); }
.src-chip.tpl { background: var(--gray-100); color: var(--gray-600); }
.file-gen-btn {
  appearance: none; display: inline-block; margin-top: 8px;
  border: 1px solid var(--blue-500); background: var(--paper); color: var(--blue-700);
  padding: 5px 13px; border-radius: 999px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background 160ms ease;
}
.file-gen-btn:hover { background: var(--blue-050); }

/* inline AI-draft panel */
.gen-panel {
  margin: 2px 0 12px 86px;
  padding: 18px 20px;
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-md);
  background: var(--blue-050);
  display: grid; gap: 14px;
}
.gen-head p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
.gen-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gen-field { display: flex; flex-direction: column; gap: 5px; }
.gen-field span { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-500); }
.gen-field input {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  background: var(--paper); font: inherit; font-size: 13px; color: var(--ink);
}
.gen-field input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--blue-100); }
.gen-actions { display: flex; align-items: center; gap: 14px; }
.gen-btn { padding: 10px 18px; font-size: 13.5px; }
.gen-working { font-family: var(--mono); font-size: 11px; color: var(--blue-600); }
.gen-excerpt { background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 8px; }
.gen-excerpt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gen-excerpt p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--gray-800); }
.gen-foot { font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--gray-500); }

@media (max-width: 760px) {
  .file-row { flex-wrap: wrap; }
  .file-row .file-tags { width: 100%; padding-left: 86px; }
  .gen-panel { margin-left: 0; }
  .gen-fields { grid-template-columns: 1fr; }
}

.tpl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpl-item { padding: 16px 18px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); display: flex; flex-direction: column; gap: 8px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.tpl-item.open { grid-column: 1 / -1; }
.tpl-item.added { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); background: var(--blue-050); }
.tpl-item .doc-num { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--blue-600); background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: 999px; padding: 2px 8px; margin-right: 8px; vertical-align: 2px; white-space: nowrap; }
.tpl-item.added .doc-num { background: var(--blue-100); }
.tpl-item .tpl-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tpl-item h4 { margin: 0; font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--blue-900); line-height: 1.3; }
.tpl-item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-600); flex: 1; }
.tpl-item .tpl-covers { font-family: var(--mono); font-size: 10px; color: var(--blue-600); }
.tpl-add {
  align-self: flex-start;
  appearance: none; border: 1px solid var(--blue-500); background: var(--paper); color: var(--blue-700);
  padding: 6px 14px; border-radius: 999px; font-family: var(--display); font-size: 12px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer; transition: background 160ms ease, color 160ms ease;
}
.tpl-add:hover { background: var(--blue-050); }

/* document generation flow inside a card */
.doc-flow { display: grid; gap: 14px; margin-top: 6px; padding: 16px 18px; border: 1px solid var(--blue-200); border-radius: var(--radius-md); background: var(--blue-050); }
.doc-research { display: grid; gap: 6px; }
.doc-research .rd-k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 2px; }
.doc-research-line { display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; line-height: 1.5; color: var(--gray-700); }
.doc-research-line b { flex: none; color: var(--ok); font-family: var(--mono); font-size: 11px; }
.doc-excerpt { position: relative; background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 8px; overflow: hidden; }
.doc-excerpt p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--gray-800); }
.doc-excerpt.locked::after {
  content: "PREVIEW — UNLOCK TO EXPORT";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(31, 78, 121, 0.13);
  transform: rotate(-14deg);
  pointer-events: none;
  white-space: nowrap;
}

/* payment box (assemble modal) */
.pay-box { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--bg); }
.pay-box.unlocked { background: var(--ok-bg); border-color: rgba(30, 126, 77, 0.25); }
.pay-line { display: flex; flex-direction: column; gap: 3px; }
.pay-line b { font-family: var(--display); font-size: 15px; color: var(--blue-900); }
.pay-line span { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
.pay-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-note { font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--gray-500); }
.pay-ok { font-size: 13.5px; font-weight: 700; color: var(--ok); }
.tpl-item.added .tpl-add { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

.assemble-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: #fff;
}
.assemble-bar .ab-text { display: flex; flex-direction: column; gap: 3px; }
.assemble-bar .ab-text b { font-family: var(--display); font-size: 16.5px; font-weight: 700; }
.assemble-bar .ab-text span { font-size: 12.5px; color: rgba(220, 235, 247, 0.78); }
.assemble-bar .btn-primary { background: #fff; color: var(--blue-800); box-shadow: none; flex: none; }

/* assemble modal */
.modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(12, 31, 51, 0.5); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity 200ms ease; }
.modal-scrim.entered { opacity: 1; }
.modal {
  width: min(680px, 100%); max-height: min(82vh, 760px); overflow: auto;
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: 30px 32px; display: flex; flex-direction: column; gap: 18px;
  transform: translateY(14px) scale(0.985);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-scrim.entered .modal { transform: none; }
.modal h2 { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--blue-900); letter-spacing: -0.015em; }
.modal .mono-label { color: var(--blue-600); }
.modal-section { display: flex; flex-direction: column; gap: 8px; }
.modal-section h4 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.modal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.modal-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gray-800); }
.modal-list li .tick { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.modal-list li .tick.tpl { background: var(--blue-050); color: var(--blue-600); }
.modal-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--gray-700); }
.modal-steps li::marker { color: var(--blue-500); font-weight: 700; }
.modal-disclaimer { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--gray-100); font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--gray-600); }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }

/* new product intake modal */
.np-modal { gap: 16px; }
.np-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gray-600); }
.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.np-field { display: flex; flex-direction: column; gap: 6px; }
.np-field > span { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.np-field > span em { color: var(--bad); font-style: normal; }
.np-col2 { grid-column: 1 / -1; }
.np-area { height: auto; min-height: 44px; padding: 10px 12px; line-height: 1.5; resize: vertical; font-family: inherit; }
.np-hint { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--gray-500); }
@media (max-width: 560px) { .np-grid { grid-template-columns: 1fr; } }

/* new product intake button (intake header) */
.intake-new-btn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1.5px solid var(--blue-500); border-radius: var(--radius-sm);
  background: var(--blue-050); color: var(--blue-700);
  font-family: "Public Sans", sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.intake-new-btn:hover { background: var(--blue-100); border-color: var(--blue-600); }
.intake-new-btn span { font-size: 16px; line-height: 1; font-weight: 800; }

/* ---------- auditor drawer ---------- */
.drawer {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 70;
  width: var(--drawer-w);
  background: var(--paper);
  border-left: 1px solid var(--gray-200);
  box-shadow: -16px 0 40px rgba(12, 31, 51, 0.1);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--judge-bg);
}
.drawer-head .dh-text { display: flex; flex-direction: column; gap: 2px; }
.drawer-head .dh-text b { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--judge); }
.drawer-head .dh-text span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.drawer-close { appearance: none; border: none; background: none; font-family: var(--mono); font-size: 16px; color: var(--gray-500); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.drawer-close:hover { background: rgba(138, 90, 0, 0.1); color: var(--judge); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.judge-card { border: 1px solid rgba(138, 90, 0, 0.16); border-radius: var(--radius-md); padding: 16px 18px; background: #fffdf8; display: flex; flex-direction: column; gap: 8px; }
.judge-card .jc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.judge-card .jc-cite { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--judge); }
.judge-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gray-800); }
.judge-card .jc-ask { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); padding-left: 12px; border-left: 2px solid var(--judge); }
.drawer-foot { flex: none; padding: 14px 20px; border-top: 1px solid var(--gray-200); font-family: var(--mono); font-size: 10px; line-height: 1.7; color: var(--gray-500); }

.drawer-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 65;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border: none; border-radius: 999px;
  background: var(--judge); color: #fff;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(138, 90, 0, 0.4);
  cursor: pointer;
}
.drawer-fab .count { background: rgba(255,255,255,0.22); border-radius: 999px; padding: 1px 8px; font-family: var(--mono); font-size: 11px; }

/* presenter cue */
.presenter-cue {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px;
  border: 1.5px dashed var(--blue-200);
  border-radius: var(--radius-md);
  background: var(--blue-050);
}
.presenter-cue .mono-label { flex: none; color: var(--blue-600); font-size: 9.5px; }
.presenter-cue p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--blue-800); }

/* step nav */
.step-nav { display: flex; justify-content: space-between; gap: 14px; padding-top: 6px; }

/* footer ticker */
.wb-footer { border-top: 1px solid var(--gray-200); background: var(--paper); padding: 14px 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between; }
.wb-footer .dates { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); }
.wb-footer .dates b { color: var(--blue-700); }
.wb-footer .disclaimer { font-family: var(--mono); font-size: 10px; color: var(--gray-400); }

/* screen transitions */
.screen-fade { opacity: 0; transform: translateY(8px); transition: opacity 280ms ease, transform 280ms ease; }
.screen-fade.entered { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 1020px) {
  .results { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto;
    flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; padding: 12px 16px;
    border-right: none; border-bottom: 1px solid var(--gray-200);
  }
  .rail > .mono-label, .rail-sub, .rail-foot { display: none; }
  .rail-item { flex: none; align-items: center; padding: 8px 12px 8px 9px; }
  .results.drawer-open .content-col { padding-right: 36px; }
}

/* intake: stack the two columns before the record card can overflow the pane */
@media (max-width: 1240px) {
  .intake-grid { grid-template-columns: 1fr; }
  .record { position: static; }
}

/* print: package only */
@media print {
  .ide-titlebar, .ide-activitybar, .ide-sidebar, .ide-tabs, .ide-statusbar,
  .wb-topbar, .rail, .drawer, .drawer-fab, .step-nav, .assemble-bar, .tpl-add,
  .presenter-cue, .wb-footer, .modal-actions, .palette-scrim { display: none !important; }
  body, #root { background: #fff !important; }
  .ide, .ide-body, .ide-editor, .editor-scroll, .editor-pane { display: block !important; height: auto !important; overflow: visible !important; }
  .editor-scroll { padding: 0 !important; }
  .results { display: block; }
  .content-col { padding: 0 !important; }
  .card, .panel { box-shadow: none !important; }
}

/* ============================================================
   VS Code-style dark IDE shell (workbench only).
   Scoped to #root so the licensed-access gate keeps the light
   EU-institutional look; theme tokens are remapped to dark here
   and propagate through every panel that uses var(--*).
   ============================================================ */

:root {
  --tb-h: 40px;     /* title bar */
  --act-w: 48px;    /* activity bar */
  --sb-w: 250px;    /* side bar */
  --sbar-h: 26px;   /* status bar */
  --right-w: 360px; /* right panel */
  --dock-h: 232px;  /* bottom status dock */
}

body.wb-authed { background: #181825; overflow: hidden; }
html:has(body.wb-authed) { overflow: hidden; }

#root {
  /* IDE chrome tokens — recurring hardcoded chrome colors, flipped wholesale
     in light mode via the `body.wb-light #root` block at the end of this file.
     Dark is the default; do not hardcode these hexes in chrome rules again. */
  --c-deep: #11111b;     /* deepest: input bg, hard borders/separators */
  --c-bar: #181825;      /* bars: title bar, tab strip, dock, activity bar */
  --c-panel: #1c1c2b;    /* panels: side bar, right panel, dock body */
  --c-elev: #232331;     /* elevated: cards, table head, chips */
  --c-elev2: #2a2a3c;    /* buttons, status dots track */
  --c-tabin: #21212f;    /* inactive editor tab */
  --c-border: #34344a;   /* chrome borders */
  --c-scroll: #3e3e55;   /* scrollbar thumb, faint rules */
  --c-docview: #15151f;  /* full-document view backdrop */
  --c-bright: #e7e7f2;   /* brightest chrome text + icons */
  --c-tx: #c4c4d6;       /* primary chrome text */
  --c-tx2: #b6b6c8;      /* secondary chrome text */
  --c-dim: #8686a1;      /* dim chrome text */
  --c-faint: #6a6a85;    /* faint chrome text */
  --c-faint2: #56566e;   /* faintest chrome text */
  --c-active-fg: #ffffff;/* active/hover text on NEUTRAL chrome surfaces */
  --c-hover: rgba(255, 255, 255, 0.05);  /* hover wash on neutral chrome */

  /* neutrals → dark */
  --ink: var(--c-bright);
  --bg: #1e1e2e;          /* editor surface */
  --paper: #252537;       /* cards / panels */
  --gray-800: #d9d9e6;
  --gray-700: var(--c-tx);
  --gray-600: #a3a3ba;
  --gray-500: var(--c-dim);
  --gray-400: var(--c-faint);
  --gray-300: var(--c-scroll);
  --gray-200: var(--c-border);
  --gray-100: var(--c-elev2);

  /* blue: tints → dark, text shades → light (real strong blues kept at 400/500) */
  --blue-050: #1d2746;
  --blue-100: #243056;
  --blue-200: #2d3b60;
  --blue-600: #86a6ee;
  --blue-700: #9bb6f2;
  --blue-800: #b7ccf6;
  --blue-900: #d3def9;

  /* status: dark tinted backgrounds, brighter foregrounds */
  --ok: #5ad19a; --ok-bg: #173a26;
  --warn: #e3bb55; --warn-bg: #3a2e12;
  --bad: #f2917f; --bad-bg: #3d1e19;
  --judge: #e3bb55; --judge-bg: #34290f;

  --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.5);

  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: var(--sans);
}

/* keep solid-blue SURFACES strong (token remap above lightened the high blues) */
#root .btn-primary { background: linear-gradient(135deg, #2f63cc, #1a4cb5); color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
#root .meter-fill { background: linear-gradient(90deg, #2f63cc, #5a84db); }
#root .assemble-bar { background: linear-gradient(135deg, #0e1b3d, #1a3a86); }
#root .assemble-bar .btn-primary { background: #fff; color: #0e1b3d; }
#root .tpl-item.added .tpl-add { background: #2f63cc; border-color: #2f63cc; color: #fff; }
#root .judge-card { background: var(--judge-bg); }

/* ---------- IDE frame ---------- */
.ide { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.ide-body { flex: 1; display: flex; min-height: 0; }

/* title bar */
.ide-titlebar {
  flex: none; height: var(--tb-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 12px 0 8px;
  background: var(--c-bar); border-bottom: 1px solid var(--c-deep);
}
.tb-brand { display: flex; align-items: baseline; gap: 8px; background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; font: inherit; }
.tb-brand:hover { background: var(--c-hover); }
.tb-brand img { width: 18px; height: 18px; align-self: center; }
.tb-brand-text { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--c-bright); }
.tb-brand-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); }

.tb-search {
  flex: 0 1 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 9px;
  height: 26px; padding: 0 8px 0 10px;
  background: var(--c-deep); border: 1px solid var(--c-elev2); border-radius: 6px;
  color: var(--c-dim); cursor: pointer; font: inherit;
}
.tb-search:hover { border-color: var(--blue-500); }
.tb-search svg { width: 14px; height: 14px; flex: none; }
.tb-search-label { flex: 1; text-align: left; font-size: 12px; color: var(--c-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-kbd { font-family: var(--mono); font-size: 10px; color: var(--c-faint); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 5px; }

.tb-actions { display: flex; align-items: center; gap: 10px; }
.tb-btn { background: none; border: 1px solid var(--c-border); color: var(--c-tx); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.tb-btn:hover { background: var(--c-hover); border-color: var(--blue-500); }
.tb-site { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--c-dim); text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.tb-site:hover { color: var(--blue-700); background: var(--c-hover); }

/* activity bar */
.ide-activitybar {
  flex: none; width: var(--act-w);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--c-bar); border-right: 1px solid var(--c-deep);
  padding: 8px 0;
}
.act-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.act-item {
  position: relative; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer; border-radius: 8px;
  color: var(--c-dim); border-left: 2px solid transparent;
}
.act-item:hover { color: var(--c-bright); }
.act-item.active { color: var(--c-active-fg); }
.act-item.active::before { content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--gold-500); }
.act-badge { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--blue-600); color: #0e1320; font-family: var(--mono); font-size: 9px; font-weight: 700; display: grid; place-items: center; }

/* side bar */
.ide-sidebar {
  flex: none; width: var(--sb-w);
  background: var(--c-panel); border-right: 1px solid var(--c-deep);
  display: flex; flex-direction: column; overflow-y: auto;
}
.sb-title { flex: none; padding: 12px 16px 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); }
.sb-tree { display: flex; flex-direction: column; padding-bottom: 12px; }
.tree-group { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: none; border: none; cursor: pointer; font: inherit; color: var(--c-tx); font-size: 12.5px; font-weight: 700; text-align: left; }
.tree-group.static { cursor: default; color: var(--c-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }
.tree-group svg { width: 14px; height: 14px; flex: none; }
.tree-group:not(.static):hover { color: var(--c-active-fg); }
.tree-group-tag { margin-left: auto; flex: none; white-space: nowrap; font-family: var(--mono); font-size: 9px; color: var(--c-faint); background: var(--c-deep); padding: 1px 6px; border-radius: 4px; }
.tree-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 12px; background: none; border: none; cursor: pointer; font: inherit; text-align: left; color: var(--c-tx2); border-left: 2px solid transparent; }
.tree-item:hover { background: var(--c-hover); color: var(--c-bright); }
.tree-item.active { background: rgba(123, 155, 230, 0.14); border-left-color: var(--blue-500); color: var(--c-active-fg); }
.tree-item.disabled { color: var(--c-faint2); cursor: default; }
.tree-lead { flex: none; width: 16px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--c-faint); }
.tree-item.active .tree-lead { color: var(--blue-700); }
.tree-name { flex: 1; font-size: 12.5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-hint { font-family: var(--mono); font-size: 9.5px; color: var(--c-faint); }
.sb-hint { margin: auto 14px 16px; font-size: 11.5px; line-height: 1.5; color: var(--c-faint); font-style: italic; }

/* sidebar — settings view */
.sb-section { padding: 6px 16px 10px; border-bottom: 1px solid var(--c-deep); }
.sb-section-h { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-faint); margin: 8px 0 10px; }
.sb-control { margin-bottom: 12px; }
.sb-label { font-size: 12.5px; color: var(--c-tx); }
.seg { display: flex; gap: 2px; margin-top: 6px; padding: 2px; background: var(--c-deep); border-radius: 7px; }
.seg-btn { flex: 1; padding: 5px 8px; background: none; border: none; border-radius: 5px; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--c-dim); text-transform: capitalize; }
.seg-btn.on { background: var(--c-border); color: var(--c-active-fg); }
.sb-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; background: none; border: none; cursor: pointer; font: inherit; }
.sb-tg-track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--c-border); flex: none; transition: background 160ms ease; }
.sb-toggle.on .sb-tg-track { background: var(--blue-600); }
.sb-tg-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-bright); transition: transform 160ms ease; }
.sb-toggle.on .sb-tg-thumb { transform: translateX(14px); }
.sb-link { display: block; width: 100%; text-align: left; padding: 7px 0; background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--blue-700); text-decoration: none; }
.sb-link:hover { color: var(--c-active-fg); }
.sb-foot { margin-top: auto; padding: 14px 16px; font-family: var(--mono); font-size: 9.5px; line-height: 1.7; color: var(--c-faint2); border-top: 1px solid var(--c-deep); }

/* editor */
.ide-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.ide-tabs { flex: none; display: flex; align-items: stretch; height: 36px; background: var(--c-bar); border-bottom: 1px solid var(--c-deep); overflow-x: auto; }
.tab { display: flex; align-items: center; border-right: 1px solid var(--c-deep); background: var(--c-tabin); }
.tab.active { background: var(--bg); }
.tab-label { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; height: 100%; background: none; border: none; cursor: pointer; font: inherit; font-family: var(--mono); font-size: 11.5px; color: var(--c-dim); white-space: nowrap; }
.tab.active .tab-label { color: var(--c-bright); }
.tab.active { box-shadow: inset 0 2px 0 var(--blue-500); }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-faint2); }
.tab.active .tab-dot { background: var(--gold-500); }
.tab-close { background: none; border: none; cursor: pointer; color: var(--c-faint); font-size: 11px; padding: 4px 8px; border-radius: 4px; }
.tab-close:hover { background: var(--c-hover); color: var(--c-bright); }
.editor-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.editor-pane { padding: 32px 40px 64px; }
.editor-pane .content { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-section); }

/* status bar */
.ide-statusbar {
  flex: none; height: var(--sbar-h);
  display: flex; align-items: center; gap: 0;
  padding: 0 6px;
  background: var(--blue-700); /* remapped light-blue → use real EU blue below */
  background: #0e3a8a;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--mono); font-size: 11px;
}
.st-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 100%; white-space: nowrap; }
.st-item svg { width: 13px; height: 13px; }
.st-accent { font-weight: 700; }
.st-muted { color: rgba(255, 255, 255, 0.62); }
.st-spacer { flex: 1; }
.st-btn { background: none; border: none; cursor: pointer; font: inherit; color: rgba(255, 255, 255, 0.92); }
.st-btn:hover { background: rgba(255, 255, 255, 0.12); }
.st-btn.on { background: var(--gold-600); color: #0e1320; }
.st-led { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.st-led.on { background: var(--gold-500); box-shadow: 0 0 6px var(--gold-500); }

/* ---------- command palette ---------- */
.palette-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palette { width: min(620px, 92vw); background: #252537; border: 1px solid var(--c-border); border-radius: 10px; box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column; max-height: 60vh; }
.palette-input { border: none; outline: none; background: var(--c-panel); color: var(--c-bright); font: inherit; font-size: 15px; padding: 15px 18px; border-bottom: 1px solid var(--c-border); }
.palette-input::placeholder { color: var(--c-faint); }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-empty { padding: 22px; text-align: center; color: var(--c-faint); font-size: 13px; }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; background: none; border: none; cursor: pointer; font: inherit; text-align: left; border-radius: 7px; color: var(--c-tx); }
.palette-item.sel { background: rgba(123, 155, 230, 0.16); color: #fff; }
.pi-cat { flex: none; width: 78px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-dim); }
.palette-item.sel .pi-cat { color: var(--blue-700); }
.pi-label { flex: 1; font-size: 13.5px; }
.pi-hint { font-family: var(--mono); font-size: 10px; color: var(--c-faint); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 6px; }

/* ---------- auditor panel as flex child of the IDE body ---------- */
.ide-body .drawer {
  position: static; top: auto; right: auto; bottom: auto;
  flex: none; width: var(--drawer-w); height: auto;
  transform: none; box-shadow: none;
  border-left: 1px solid var(--c-deep); background: var(--c-panel);
  animation: drawerIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes drawerIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ide-body .drawer-head { background: var(--judge-bg); border-bottom: 1px solid var(--c-deep); }
.ide-body .judge-card { background: var(--judge-bg); border-color: rgba(227, 187, 85, 0.22); }

/* dark scrollbars inside the workbench */
#root *::-webkit-scrollbar, .palette *::-webkit-scrollbar { width: 11px; height: 11px; }
#root *::-webkit-scrollbar-thumb, .palette *::-webkit-scrollbar-thumb { background: var(--c-scroll); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
#root *::-webkit-scrollbar-thumb:hover { background: #4e4e68; background-clip: content-box; }
#root *::-webkit-scrollbar-track { background: transparent; }

/* responsive: collapse sidebar/activitybar on narrow screens */
@media (max-width: 920px) {
  .ide-sidebar { display: none; }
  .ide-body .drawer { position: fixed; inset: var(--tb-h) 0 var(--sbar-h) auto; width: min(360px, 90vw); z-index: 80; box-shadow: -16px 0 40px rgba(0,0,0,0.5); }
  .editor-pane { padding: 22px 18px 56px; }
  .ide-right { position: fixed; inset: var(--tb-h) 0 var(--sbar-h) auto; width: min(340px, 92vw); z-index: 80; box-shadow: -16px 0 40px rgba(0,0,0,0.5); }
}

/* ============================================================
   Documents library, full-document view, right panel, status dock
   ============================================================ */

/* ---- approval status dots (shared) ---- */
.doc-st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 7px; vertical-align: middle; background: var(--c-faint); }
.doc-st-dot.draft     { background: var(--c-faint); }
.doc-st-dot.review    { background: var(--warn); box-shadow: 0 0 0 2px rgba(227,187,85,0.18); }
.doc-st-dot.approved  { background: var(--ok); box-shadow: 0 0 0 2px rgba(90,209,154,0.18); }
.doc-st-dot.baselined { background: #5a84db; box-shadow: 0 0 0 2px rgba(90,132,219,0.22); }

.doc-status-pill { display: inline-flex; align-items: center; padding: 2px 9px 2px 7px; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--c-elev2); color: var(--c-tx); border: 1px solid var(--c-border); white-space: nowrap; }
.doc-status-pill .doc-st-dot { margin-right: 5px; }
.doc-status-pill.review    { background: var(--warn-bg); color: var(--warn); border-color: rgba(227,187,85,0.28); }
.doc-status-pill.approved  { background: var(--ok-bg); color: var(--ok); border-color: rgba(90,209,154,0.28); }
.doc-status-pill.baselined { background: var(--blue-050); color: var(--blue-700); border-color: rgba(90,132,219,0.34); }

/* tab status dot */
.tab-dot.doc.draft { background: var(--c-faint); }
.tab-dot.doc.review { background: var(--warn); }
.tab-dot.doc.approved { background: var(--ok); }
.tab-dot.doc.baselined { background: #5a84db; }
.tab.active .tab-dot.doc { box-shadow: 0 0 0 2px rgba(255,255,255,0.12); }

/* ---- documents library sidebar ---- */
.doc-tree { padding-bottom: 12px; }
.doc-tree-item {
  display: flex; align-items: center; gap: 0; width: 100%;
  padding: 6px 12px 6px 18px; background: none; border: none; cursor: pointer; font: inherit;
  text-align: left; color: var(--c-tx2); border-left: 2px solid transparent;
}
.doc-tree-item:hover { background: var(--c-hover); color: var(--c-bright); }
.doc-tree-item.active { background: rgba(123,155,230,0.14); border-left-color: var(--blue-500); color: var(--c-active-fg); }
.doc-tree-item .doc-st-dot { margin-right: 8px; }
.dti-num { flex: none; width: 22px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--c-faint); }
.doc-tree-item.active .dti-num { color: var(--blue-700); }
.dti-name { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dti-pct { flex: none; font-family: var(--mono); font-size: 9.5px; color: var(--c-faint); margin-left: 8px; }

/* ---- assessment flow (explorer) ---- */
.flow-path { position: relative; padding: 4px 0 4px 0; }
.flow-path::before { content: ""; position: absolute; left: 23px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(var(--c-scroll), var(--c-elev2)); }
.flow-path.disabled { opacity: 0.5; }
.flow-step { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 12px; background: none; border: none; cursor: pointer; font: inherit; text-align: left; border-left: 2px solid transparent; }
.flow-step:not(:disabled):hover { background: var(--c-hover); }
.flow-step:disabled { cursor: default; }
.flow-node { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--c-dim); background: var(--c-panel); border: 1.5px solid var(--c-scroll); }
.flow-step.active .flow-node { color: #fff; background: var(--blue-700); border-color: var(--blue-500); }
.flow-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.flow-name { font-size: 12.5px; font-weight: 600; color: var(--c-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-step.active .flow-name { color: var(--c-active-fg); }
.flow-step:not(:disabled):hover .flow-name { color: var(--c-bright); }
.flow-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- collapsible folder headers (explorer) ---- */
.tree-group.collapsible { color: var(--c-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; cursor: pointer; }
.tree-group.collapsible:hover { color: var(--c-tx); }
.tree-group.collapsible .tg-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-group.collapsible svg { transition: transform 120ms ease; }
.tree-group.collapsible.closed svg { transform: rotate(0deg); }
.tree-group.collapsible.open svg { transform: rotate(90deg); }
.tree-group.collapsible.sub { margin-top: 2px; font-size: 9.5px; color: var(--c-faint); letter-spacing: 0.06em; }
.tree-group.collapsible.sub:hover { color: var(--c-tx2); }

/* ---- master-record docs nested under folders ---- */
.doc-tree-item.mr-doc { padding-left: 27px; }
.doc-tree-item.mr-doc.open { border-left-color: rgba(227, 187, 85, 0.55); }
.doc-tree-item.mr-doc.active { border-left-color: var(--blue-500); }
.doc-tree-item.mr-doc .dti-pct.done, .doc-tree-item.mr-doc.active .dti-pct { color: var(--ok); }

/* ---- right panel ---- */
.ide-right {
  flex: none; width: var(--right-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--c-panel); border-left: 1px solid var(--c-deep);
  animation: drawerIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.right-tabs { flex: none; display: flex; align-items: center; height: 36px; background: var(--c-bar); border-bottom: 1px solid var(--c-deep); padding: 0 4px 0 6px; }
.rt-tab { background: none; border: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--c-dim); padding: 8px 12px; border-bottom: 2px solid transparent; }
.rt-tab:hover { color: var(--c-bright); }
.rt-tab.on { color: var(--c-active-fg); border-bottom-color: var(--gold-500); }
.rt-spacer { flex: 1; }
.rt-close { background: none; border: none; cursor: pointer; color: var(--c-faint); font-size: 13px; padding: 5px 8px; border-radius: 5px; }
.rt-close:hover { background: var(--c-hover); color: var(--c-bright); }
.right-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 11px; }

.ra-head { display: flex; align-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-dim); }
.ra-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 6px var(--gold-500); margin-right: 8px; }
.ra-card { background: var(--c-elev); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 14px; }
.ra-card .ra-k { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 6px; }
.ra-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--c-tx); }
.ra-foot { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 9.5px; line-height: 1.6; color: var(--c-faint2); }

.insp-title { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--c-bright); margin-bottom: 12px; }
.insp-title span { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-dim); margin-top: 3px; }
.insp-empty .insp-note { font-size: 12px; line-height: 1.5; color: var(--c-dim); margin-top: 12px; }
.insp-meter { position: relative; height: 22px; border-radius: 6px; background: var(--c-deep); overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; }
.insp-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2f63cc, #5a84db); border-radius: 6px; }
.insp-meter span { position: relative; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: #fff; padding-left: 9px; }
.insp-approval { margin-top: 14px; border-top: 1px solid var(--c-elev2); padding-top: 12px; }
.ia-h { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 9px; }
.ia-step { display: flex; align-items: center; font-size: 12px; color: var(--c-faint2); padding: 4px 0; }
.ia-step.reached { color: var(--c-tx); }
.ia-step.current { color: var(--c-active-fg); font-weight: 700; }
.ia-step .doc-st-dot { margin-right: 9px; opacity: 0.4; }
.ia-step.reached .doc-st-dot { opacity: 1; }

/* ---- bottom status dock ---- */
.ide-dock { flex: none; display: flex; flex-direction: column; background: var(--c-bar); border-top: 1px solid var(--c-deep); }
.dock-bar { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 14px; background: none; border: none; cursor: pointer; font: inherit; color: var(--c-tx); width: 100%; text-align: left; }
.dock-bar:hover { background: var(--c-hover); }
.dock-title { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-tx2); }
.dock-chips { display: flex; gap: 12px; }
.dock-chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--c-dim); }
.dock-spacer { flex: 1; }
.dock-avg { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--blue-700); }
.dock-caret { font-size: 11px; color: var(--c-faint); width: 14px; text-align: center; }
.dock-body { height: calc(var(--dock-h) - 30px); overflow-y: auto; background: var(--c-panel); border-top: 1px solid var(--c-deep); }
.dock-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dock-table thead th { position: sticky; top: 0; background: var(--c-elev); text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-faint); padding: 8px 14px; border-bottom: 1px solid var(--c-deep); }
.dock-table td { padding: 8px 14px; border-bottom: 1px solid var(--c-elev); color: var(--c-tx2); vertical-align: middle; }
.dock-table tbody tr { cursor: pointer; }
.dock-table tbody tr:hover { background: var(--c-hover); }
.dock-table tbody tr.active { background: rgba(123,155,230,0.12); }
.dk-num { font-family: var(--mono); font-weight: 700; color: var(--blue-700); }
.dk-name { color: var(--c-bright); font-weight: 600; }
.dk-meter { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--c-deep); overflow: hidden; vertical-align: middle; }
.dk-meter-fill { height: 100%; background: linear-gradient(90deg, #2f63cc, #5a84db); border-radius: 999px; }
.dk-pct { font-family: var(--mono); font-size: 10.5px; color: var(--c-dim); margin-left: 9px; }

/* ---- full-document view (paper) ---- */
.doc-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--c-docview); }
.doc-toolbar { flex: none; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 18px; background: var(--c-panel); border-bottom: 1px solid var(--c-deep); }
.dtb-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dtb-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--blue-700); }
.dtb-name { font-size: 13px; font-weight: 700; color: var(--c-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtb-hint { font-family: var(--mono); font-size: 10px; color: var(--c-faint); white-space: nowrap; }
.dtb-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dtb-meter { position: relative; width: 120px; height: 18px; border-radius: 5px; background: var(--c-deep); overflow: hidden; display: flex; align-items: center; }
.dtb-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2f63cc, #5a84db); }
.dtb-meter span { position: relative; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; padding-left: 8px; }
.dtb-btn { background: var(--c-elev2); border: 1px solid var(--c-border); color: var(--c-tx); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 6px; cursor: pointer; }
.dtb-btn:hover { border-color: var(--blue-500); color: var(--c-active-fg); }
.dtb-btn.primary { background: linear-gradient(135deg, #2f63cc, #1a4cb5); border-color: transparent; color: #fff; }

.doc-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 32px 24px 72px; }
.doc-roadmap { max-width: 820px; margin: -8px auto 18px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--blue-050); border: 1px solid var(--blue-200); border-radius: 9px; }
.dr-tag { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0e1320; background: var(--gold-500); padding: 3px 9px; border-radius: 999px; }
.dr-text { font-size: 12px; line-height: 1.5; color: var(--c-tx); }
.dr-text b { color: var(--blue-800); }
.doc-page {
  max-width: 820px; margin: 0 auto; background: #fff; color: #1a1a22;
  padding: 64px 72px 72px; border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 2px 0 var(--c-hover);
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
}
.doc-logo { width: 168px; height: 52px; border: 1px dashed #c3c8d4; border-radius: 4px; display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: #9aa1b2; text-transform: uppercase; margin-bottom: 26px; }
.doc-class { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b08900; border-top: 1px solid #e5e8ee; border-bottom: 1px solid #e5e8ee; padding: 7px 0; margin-bottom: 26px; }
.doc-title { font-family: "Archivo", "Public Sans", sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #0b1f4d; margin: 0 0 8px; }
.doc-byline { font-family: var(--mono); font-size: 11px; color: #5a6275; margin-bottom: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.doc-byline .doc-st-dot { margin: 0 4px 0 6px; }

.doc-control { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 12.5px; }
.doc-control td { border: 1px solid #e1e5ec; padding: 8px 12px; color: #2a3142; }
.doc-control td:nth-child(odd) { background: #f5f7fb; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7488; width: 16%; white-space: nowrap; }

.doc-h1 { font-family: "Archivo", sans-serif; font-size: 18px; font-weight: 800; color: #0b1f4d; margin: 30px 0 8px; padding-bottom: 5px; border-bottom: 2px solid #eef1f6; }
.doc-h2 { font-family: "Public Sans", sans-serif; font-size: 14px; font-weight: 700; color: #2a3142; margin: 20px 0 6px; }
.doc-p { font-size: 13.5px; line-height: 1.62; color: #313847; margin: 0 0 12px; }
.doc-source-note { background: #f3f7ff; border: 1px solid #d6e2fb; border-left: 3px solid #2f63cc; border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 12px 0 18px; font-size: 13px; line-height: 1.55; color: #2a3142; }
.doc-source-note b { color: #1a4cb5; }
.doc-source-note p { margin: 0; }
.doc-fields { border: 1px solid #e1e5ec; border-radius: 8px; padding: 6px 16px; margin: 0 0 18px; }
.doc-fields .df-h { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a92a4; padding: 10px 0 6px; border-bottom: 1px solid #eef1f6; }
.df-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f1f3f8; font-size: 13px; }
.df-row:last-child { border-bottom: none; }
.df-k { color: #6b7488; }
.df-v { color: #0b1f4d; font-weight: 600; text-align: right; }
.df-v em { color: #b0869a; font-weight: 400; }
.doc-covers { font-size: 12.5px; color: #2a3142; background: #f5f7fb; border-radius: 6px; padding: 8px 12px; }
.doc-covers b { color: #1a4cb5; font-family: var(--mono); font-size: 11.5px; }

.doc-revtable { width: 100%; border-collapse: collapse; margin: 8px 0 26px; font-size: 12px; }
.doc-revtable th { background: #f5f7fb; text-align: left; padding: 7px 11px; border: 1px solid #e1e5ec; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7488; }
.doc-revtable td { padding: 7px 11px; border: 1px solid #e1e5ec; color: #2a3142; }
.doc-disclaimer { margin-top: 28px; padding-top: 16px; border-top: 1px solid #e5e8ee; font-size: 11px; line-height: 1.65; color: #7a8294; }

/* keep the paper light even though #root remaps tokens dark */
.doc-page ::selection { background: #cfe0ff; }

/* ---- editable section blocks + AI fill ---- */
.editable { position: relative; margin: 0 -10px 12px; padding: 2px 10px; border-radius: 7px; transition: background 120ms ease; }
.editable:hover { background: #f5f8ff; }
.editable.busy { background: #f3f7ff; }
.editable .eb-text { margin: 0; cursor: text; }
.editable .eb-text:hover { color: #1a2230; }
.editable.busy .eb-text { color: #5a6275; }
.editable.busy::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #2f63cc, transparent); background-size: 40% 100%; animation: ebscan 0.85s linear infinite; }
@keyframes ebscan { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.eb-tools { position: absolute; top: 4px; right: 6px; display: none; gap: 6px; }
.editable:hover .eb-tools, .editable.busy .eb-tools { display: inline-flex; }
.eb-btn { font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; border: 1px solid #d6dce8; background: #fff; color: #44506a; cursor: pointer; box-shadow: 0 2px 6px rgba(13,31,77,0.08); }
.eb-btn:hover { border-color: #2f63cc; color: #1a4cb5; }
.eb-btn.ai { border-color: #c7d6f7; color: #1a4cb5; background: #eef3ff; }
.eb-btn.ai:hover { background: #2f63cc; color: #fff; border-color: #2f63cc; }
.eb-btn:disabled { opacity: 0.7; cursor: default; }

.edit-area { width: 100%; box-sizing: border-box; font-family: "Public Sans", Arial, sans-serif; font-size: 13.5px; line-height: 1.62; color: #1a2230; border: 1.5px solid #2f63cc; border-radius: 7px; padding: 9px 11px; background: #fff; outline: none; resize: vertical; box-shadow: 0 0 0 3px rgba(47,99,204,0.12); }

.ai-badge { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: #1a4cb5; background: #eef3ff; border: 1px solid #c7d6f7; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }

.df-input { flex: none; width: 56%; text-align: right; font-family: "Public Sans", Arial, sans-serif; font-size: 13px; font-weight: 600; color: #0b1f4d; border: 1px solid transparent; border-radius: 5px; padding: 4px 8px; background: transparent; }
.df-input:hover { border-color: #e1e5ec; }
.df-input:focus { outline: none; border-color: #2f63cc; background: #fff; box-shadow: 0 0 0 3px rgba(47,99,204,0.12); text-align: left; }

/* ---- review workflow + paper trail ---- */
.dtb-btn.approved { background: var(--ok-bg); border-color: rgba(90,209,154,0.4); color: var(--ok); cursor: default; }
.rev-current td { background: #f5f8ff; }
.rev-current td b { color: #1a4cb5; }

.rv-input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1.5px solid var(--gray-300); border-radius: 8px; font: inherit; font-size: 14px; background: var(--bg); color: var(--ink); }
.rv-input:focus { outline: none; border-color: var(--blue-500); }
.rv-link { display: flex; align-items: center; gap: 8px; }
.rv-link code { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--blue-700); background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: 7px; padding: 9px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }
.rv-await { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--gray-600); }
.rv-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 11px; border-radius: 999px; }
.rv-badge.review { background: var(--warn-bg); color: var(--warn); }
.rv-badge.approved { background: var(--ok-bg); color: var(--ok); }
.rv-reviewer { border: 1px dashed var(--gray-300); border-radius: 10px; padding: 4px 16px 14px; }
.rv-demo { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); background: var(--gray-100); border-radius: 999px; padding: 2px 7px; margin-left: 8px; }

/* inspector paper trail */
.insp-trail { margin-top: 14px; border-top: 1px solid var(--c-elev2); padding-top: 12px; }
.it-empty { font-size: 12px; color: var(--c-faint); }
.it-ev { display: flex; gap: 10px; padding: 7px 0; position: relative; }
.it-ev:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 26px; bottom: -7px; width: 1px; background: var(--c-elev2); }
.it-ic { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--c-elev2); color: var(--c-tx); z-index: 1; }
.it-ic.sent { background: var(--warn-bg); color: var(--warn); }
.it-ic.approved { background: var(--ok-bg); color: var(--ok); }
.it-ic.changes { background: var(--bad-bg); color: var(--bad); }
.it-ic.created { background: var(--blue-050); color: var(--blue-700); }
.it-body { flex: 1; min-width: 0; }
.it-line { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.it-line b { font-size: 12.5px; color: var(--c-bright); }
.it-when { font-family: var(--mono); font-size: 10px; color: var(--c-faint); }
.it-detail { font-size: 11.5px; line-height: 1.45; color: var(--c-dim); margin-top: 1px; }

.dk-last { font-family: var(--mono); font-size: 10.5px; color: var(--c-dim); }

/* ============================================================
   Cora (assistant) + per-product Dossier
   ============================================================ */

/* ---- Dossier sidebar ---- */
.dossier-private { margin: 0 14px 8px; font-size: 11px; line-height: 1.45; color: var(--c-dim); background: var(--blue-050); border: 1px solid var(--blue-200); border-radius: 7px; padding: 7px 10px; }
.dossier-private .lock { margin-right: 4px; }
.ds-empty { font-size: 11.5px; color: var(--c-faint); font-style: italic; padding: 2px 0 6px; }
.ds-src { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.ds-src-ic { color: var(--blue-700); font-size: 12px; }
.ds-src-name { flex: 1; font-size: 12px; color: var(--c-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-x { flex: none; background: none; border: none; color: var(--c-faint2); cursor: pointer; font-size: 11px; padding: 2px 5px; border-radius: 4px; }
.ds-x:hover { background: var(--c-hover); color: var(--bad); }
.ds-add { width: 100%; margin-top: 6px; padding: 7px; background: none; border: 1px dashed var(--c-scroll); border-radius: 7px; color: var(--blue-700); font: inherit; font-size: 12px; cursor: pointer; }
.ds-add:hover { border-color: var(--blue-500); color: var(--c-active-fg); }
.ds-add:disabled { opacity: 0.55; cursor: default; }
.sb-section.ds-drag { outline: 1px dashed var(--blue-500); outline-offset: 3px; border-radius: 8px; }
.cora-bub.cora-pending p { color: var(--c-faint); font-style: italic; }
.ds-import { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.ds-input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 9px; background: var(--c-deep); border: 1px solid var(--c-border); border-radius: 6px; color: var(--c-bright); font: inherit; font-size: 12px; }
.ds-input:focus { outline: none; border-color: var(--blue-500); }
.ds-area { width: 100%; box-sizing: border-box; min-height: 84px; padding: 8px 9px; background: var(--c-deep); border: 1px solid var(--c-border); border-radius: 6px; color: var(--c-bright); font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; }
.ds-area:focus { outline: none; border-color: var(--blue-500); }
.ds-row { display: flex; justify-content: flex-end; gap: 7px; }
.ds-btn { padding: 5px 12px; background: var(--c-elev2); border: 1px solid var(--c-border); border-radius: 6px; color: var(--c-tx); font: inherit; font-size: 12px; cursor: pointer; }
.ds-btn:hover { border-color: var(--blue-500); color: var(--c-active-fg); }
.ds-btn.primary { background: linear-gradient(135deg, #2f63cc, #1a4cb5); border-color: transparent; color: #fff; }
.ds-btn:disabled { opacity: 0.5; cursor: default; }
.ds-busy { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--blue-700); }
.ds-err { font-size: 11.5px; line-height: 1.45; color: #ff9b9b; background: rgba(255,80,80,0.08); border-left: 3px solid #ff6b6b; padding: 6px 8px; border-radius: 0 4px 4px 0; }
.dossier-sb .ir-spin { width: 12px; height: 12px; border-color: var(--c-border); border-top-color: var(--blue-500, #4f86ff); }
.ds-learn { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-elev); }
.ds-learn-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); margin-top: 6px; }
.ds-learn-t { flex: 1; font-size: 12px; line-height: 1.45; color: var(--c-tx); }
.ds-learn-src { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--c-faint); margin-top: 2px; }
.ds-addrow { display: flex; gap: 6px; margin-top: 10px; }
.ds-addrow .ds-input { flex: 1; }

/* ---- Cora chat ---- */
.cora { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cora-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-deep); background: linear-gradient(135deg, var(--blue-050), var(--c-bar)); }
.cora-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #2f63cc, #5a84db); color: #fff; font-size: 13px; box-shadow: 0 4px 12px rgba(47,99,204,0.4); }
.cora-id b { display: block; font-family: var(--display); font-size: 14px; font-weight: 800; color: var(--c-bright); }
.cora-id span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--c-dim); }
.cora-body { flex: 1; overflow-y: auto; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cora-msg { flex: none; display: flex; gap: 8px; max-width: 100%; }
.cora-msg.you { justify-content: flex-end; }
.cora-av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2f63cc, #5a84db); color: #fff; font-size: 10px; }
.cora-bub { max-width: 86%; background: var(--c-elev); border: 1px solid var(--c-border); border-radius: 12px; padding: 10px 13px; }
.cora-msg.you .cora-bub { background: var(--blue-050); border-color: var(--blue-200); }
.cora-bub p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--gray-800); }
.cora-cites { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.cora-cite { font-size: 12px; line-height: 1.45; color: var(--c-tx2); padding-left: 10px; border-left: 2px solid var(--c-scroll); }
.cc-k { display: inline-block; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-right: 6px; background: var(--blue-050); color: var(--blue-700); }
.cc-k.source { background: var(--judge-bg); color: var(--judge); }
.cc-src { font-family: var(--mono); font-size: 10px; color: var(--c-faint); margin-left: 6px; }
.cora-draft { margin-top: 10px; background: var(--c-deep); border: 1px solid var(--blue-200); border-radius: 9px; padding: 11px; }
.cora-draft-t { font-size: 12.5px; line-height: 1.55; color: var(--c-tx); }
.cora-insert { margin-top: 9px; padding: 6px 12px; background: linear-gradient(135deg, #2f63cc, #1a4cb5); border: none; border-radius: 7px; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cora-insert:hover { filter: brightness(1.08); }
.cora-draft-note { font-size: 11px; color: var(--c-faint); font-style: italic; }
.cora-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.cora-chip { padding: 5px 10px; background: var(--c-elev); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-tx2); font: inherit; font-size: 11px; cursor: pointer; text-align: left; }
.cora-chip:hover { border-color: var(--blue-500); color: var(--c-active-fg); }
.cora-input { flex: none; display: flex; gap: 7px; padding: 10px 14px; border-top: 1px solid var(--c-deep); }
.cora-input input { flex: 1; height: 36px; padding: 0 12px; background: var(--c-deep); border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-bright); font: inherit; font-size: 13px; }
.cora-input input:focus { outline: none; border-color: var(--blue-500); }
.cora-input button { padding: 0 16px; background: linear-gradient(135deg, #2f63cc, #1a4cb5); border: none; border-radius: 8px; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cora-foot { flex: none; padding: 9px 14px; font-family: var(--mono); font-size: 9px; line-height: 1.6; color: var(--c-faint2); border-top: 1px solid var(--c-deep); }

/* ===================== Evidence intake (SBOM + threat model) ===================== */
.ev-disclaimer {
  margin: 4px 0 16px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warn-bg); border-left: 3px solid var(--warn);
  font-size: 12.5px; line-height: 1.55; color: var(--warn);
}
.ev-lanes { display: flex; gap: 8px; margin-bottom: 18px; }
.ev-lane-tab {
  flex: 1; padding: 12px 16px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  color: var(--gray-600); transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.ev-lane-tab:hover { color: var(--gray-700); }
.ev-lane-tab.on { color: var(--blue-700); border-color: var(--blue-600); box-shadow: 0 0 0 1px var(--blue-600); }

/* import affordance */
.ev-import-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ev-import-btn {
  padding: 8px 14px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--radius-sm); color: var(--blue-700);
}
.ev-import-hint { font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); }
.ev-import-done { flex-basis: 100%; font-size: 12.5px; color: var(--ok); line-height: 1.5; }
.ev-import { display: grid; gap: 10px; padding: 16px 18px; margin-bottom: 16px; }
.ev-input, .ev-area {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); color: var(--gray-700); font: inherit; font-size: 13px; padding: 9px 12px;
}
.ev-area { min-height: 92px; resize: vertical; font-family: var(--mono); font-size: 12px; }
.ev-input:focus, .ev-area:focus { outline: none; border-color: var(--blue-600); }
.ev-import-actions { display: flex; justify-content: flex-end; gap: 8px; }

.ev-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; font-family: var(--mono); font-size: 11px; color: var(--gray-500); }
.ev-meta b { color: var(--blue-700); }

/* stats */
.ev-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.ev-stat {
  padding: 14px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  background: var(--paper); display: flex; flex-direction: column; gap: 4px; text-align: left;
}
.ev-stat .sn { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--gray-700); }
.ev-stat .sl { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.ev-stat.bad .sn { color: var(--bad); }
.ev-stat.ok .sn { color: var(--ok); }
.ev-stat.warn .sn { color: var(--warn); }

/* §2(a) gate */
.ev-gate { padding: 16px 18px; margin-bottom: 18px; border-left: 4px solid var(--gray-300); }
.ev-gate.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.ev-gate.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.ev-gate p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-700); }
.ev-gate.bad b { color: var(--bad); }

/* component list */
.ev-comp-list { display: grid; gap: 12px; }
.ev-comp { padding: 14px 16px; display: grid; gap: 10px; }
.ev-comp.blocker { border-color: rgba(242,145,127,0.4); box-shadow: 0 0 0 1px rgba(242,145,127,0.18); }
.ev-comp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-comp-name { font-weight: 700; font-size: 14px; color: var(--gray-800, var(--c-bright)); }
.ev-comp-ver { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--gray-500); margin-left: 4px; }
.ev-comp-sup { font-size: 11.5px; color: var(--gray-500); }
.ev-blast {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--blue-700);
  background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: 999px; padding: 3px 9px; cursor: default;
}
.ev-eol-flag { font-size: 12px; line-height: 1.5; color: var(--bad); background: var(--bad-bg); padding: 8px 11px; border-radius: var(--radius-sm); }
.ev-cve { padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bg); display: grid; gap: 5px; }
.ev-cve.is-affected { background: var(--bad-bg); }
.ev-cve.none { color: var(--gray-500); font-size: 12px; font-style: italic; }
.ev-cve-top { display: flex; align-items: center; gap: 9px; }
.ev-cve-id { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--blue-700); }
.ev-cve-why { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--gray-600); }

/* portfolio blast-radius */
.ev-portfolio { margin-top: 18px; padding: 16px 18px; }
.ev-portfolio h3 { margin: 0 0 4px; font-size: 15px; }
.ev-portfolio-sub { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--gray-600); }
.ev-shared { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--gray-200); }
.ev-shared-name { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gray-700); min-width: 160px; }
.ev-shared-where { font-size: 12.5px; color: var(--gray-500); }

/* empty state */
.ev-empty { padding: 24px; text-align: left; }
.ev-empty h3 { margin: 0 0 8px; font-size: 16px; }
.ev-empty p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--gray-600); max-width: 70ch; }

/* threat-model checks */
.ev-tm-checks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ev-check { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: var(--radius-sm); }
.ev-check.ok { color: var(--ok); background: var(--ok-bg); }
.ev-check.bad { color: var(--bad); background: var(--bad-bg); }

.ev-reuse { padding: 14px 16px; margin-bottom: 16px; border-left: 4px solid var(--blue-600); background: var(--blue-050); }
.ev-reuse p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-700); }
.ev-reuse b { color: var(--blue-700); }

/* Art 13(3) matrix */
.ev-matrix { display: grid; gap: 1px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.ev-matrix-head, .ev-matrix-row { display: grid; grid-template-columns: 1.5fr 0.7fr 2.6fr 1fr; gap: 0; }
.ev-matrix-head { background: var(--paper); }
.ev-matrix-head span { padding: 10px 13px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.ev-matrix-row { background: var(--paper); }
.ev-matrix-row > span { padding: 12px 13px; font-size: 12.5px; line-height: 1.5; color: var(--gray-700); }
.ev-matrix-row.flagged { background: var(--warn-bg); }
.ev-matrix-row.unmapped { background: var(--bad-bg); }
.ev-mx-threat { font-weight: 600; }
.ev-mx-req { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--blue-700); cursor: help; }
.ev-mx-none { color: var(--bad); }
.ev-mx-flag { display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: var(--warn); }
.ev-matrix-row.unmapped .ev-mx-flag { color: var(--bad); }
.ev-mx-verify { font-family: var(--mono); font-size: 11px; color: var(--gray-500); }
.ev-matrix-foot { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--gray-600); }
.ev-matrix-foot b { color: var(--warn); }

@media (max-width: 900px) {
  .ev-stats { grid-template-columns: repeat(3, 1fr); }
  .ev-matrix-head { display: none; }
  .ev-matrix-row { grid-template-columns: 1fr; }
  .ev-matrix-row > span { padding: 8px 13px; }
}

/* ---- 62443 process bridge: live gap assessment ---- */
.br-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.br-sum-box { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); min-width: 78px; }
.br-sum-box .sn { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; }
.br-sum-box .sl { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.br-sum-box.bad .sn { color: var(--bad); }
.br-sum-box.warn .sn { color: var(--warn); }
.br-sum-box.ok .sn { color: var(--ok); }
.br-sum-note { flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.55; color: var(--gray-600); }
.br-sum-note b { color: var(--ink); }

.br-assess { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.br-assess .bk { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.br-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); overflow: hidden; }
.br-seg-btn { padding: 6px 14px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; background: var(--paper); border: none; border-right: 1px solid var(--gray-300); color: var(--gray-500); transition: background 120ms, color 120ms; }
.br-seg-btn:last-child { border-right: none; }
.br-seg-btn:hover { color: var(--gray-700); }
.br-seg-btn.ok.on { background: var(--ok-bg); color: var(--ok); }
.br-seg-btn.warn.on { background: var(--warn-bg); color: var(--warn); }
.br-seg-btn.bad.on { background: var(--bad-bg); color: var(--bad); }
.br-seg-btn.locked { cursor: default; pointer-events: none; }
.br-seg-btn.locked:not(.on) { opacity: 0.45; }

.br-provide { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-bg); border-left: 3px solid var(--warn); font-size: 12.5px; line-height: 1.55; color: var(--gray-700); }
.br-provide.needed { background: var(--bad-bg); border-left-color: var(--bad); }
.br-provide b { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
.br-provide.needed b { color: var(--bad); }

/* ===== product family + firmware version ================================= */

/* intake catalog cards */
.pcard-fw { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--blue-700); background: var(--blue-050); border: 1px solid var(--blue-100); padding: 2px 7px; border-radius: 999px; }
.pcard.active .pcard-fw { background: var(--blue-100); color: var(--blue-700); }
.pcard-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.chip-62443 { background: rgba(227,187,85,0.18); border-color: rgba(180,138,30,0.45); color: #7a5d12; }
.pcard-skus { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--gray-500); }

/* record-panel firmware block */
.fw-block { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-100); }
.fw-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fw-block-head .mono-label { color: var(--gray-500); }
.fw-static { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--blue-700); }
.fw-native { font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--c-deep); border: 1px solid var(--gray-300); border-radius: 6px; padding: 5px 8px; }
.fw-seg { margin-top: 0; flex: 0 1 auto; }
.fw-seg .seg-btn { position: relative; flex: 0 1 auto; min-width: 46px; font-family: var(--mono); text-transform: none; }
.seg-pin { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
.fw-cov-banner { margin-bottom: 0; font-size: 12.5px; line-height: 1.55; color: var(--gray-700); border-radius: var(--radius-sm); }
.fw-cov-banner strong { color: var(--bad); }

/* firmware timeline (rows double as a selector) */
.fw-timeline { display: flex; flex-direction: column; gap: 6px; }
.fw-row { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 9px 11px; background: var(--paper); border: 1px solid var(--gray-200); border-left: 3px solid var(--gray-300); border-radius: var(--radius-sm); cursor: pointer; font: inherit; transition: border-color 120ms, background 120ms; }
.fw-row:hover { border-color: var(--blue-300, var(--blue-500)); }
.fw-row.assessed { border-left-color: var(--ok); }
.fw-row.selected { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); }
.fw-row .fw-ver { flex: none; min-width: 54px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.fw-body { display: flex; flex-direction: column; gap: 4px; }
.fw-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fw-date { font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); }
.fw-note { font-size: 12px; line-height: 1.5; color: var(--gray-700); }
.fw-impact { font-size: 11.5px; line-height: 1.5; color: var(--warn); }

/* authoritative pin banner (printable content) */
.fw-pin { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid var(--gray-200); border-left: 4px solid var(--blue-500); border-radius: var(--radius-md); background: var(--paper); }
.fw-pin.uncovered { border-left-color: var(--bad); background: var(--bad-bg); }
.fw-pin-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fw-pin-line .mono-label { color: var(--gray-500); }
.fw-pin-fam { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink); }
.fw-pin-warn { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--gray-700); }
.fw-pin-warn strong { color: var(--bad); }

/* package §1 firmware pin */
.fw-file-pin { font-style: normal; color: var(--blue-700); }
.fw-file-pin b { color: var(--ink); }

/* sidebar firmware line (dark chrome) */
/* ---- Product hero card (sidebar identity) ---- */
.sb-prod { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: calc(100% - 16px); margin: 2px 8px 10px; padding: 11px 12px 10px; background: var(--c-elev); border: 1px solid var(--c-border); border-radius: 9px; cursor: pointer; font: inherit; text-align: left; transition: border-color 120ms ease, background 120ms ease; }
.sb-prod:hover { border-color: var(--blue-500); background: var(--c-elev2); }
.sb-prod-vendor { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); }
.sb-prod-name { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--c-bright); letter-spacing: -0.01em; }
.sb-prod-cat { font-size: 11.5px; line-height: 1.35; color: var(--c-dim); margin-bottom: 4px; }
.sb-prod-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--c-tx2); background: var(--c-deep); padding: 2px 7px; border-radius: 5px; }
.sb-chip-fw { color: var(--c-tx); }
.sb-chip-fw.uncovered { color: #f2917f; }
.sb-fw-dot { width: 5px; height: 5px; border-radius: 50%; background: #f2917f; }

/* titlebar firmware pill (dark chrome) */
.tb-fw { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--c-tx); background: var(--c-deep); border: 1px solid var(--c-border); padding: 3px 9px; border-radius: 6px; }
.tb-fw.uncovered { color: #f2917f; border-color: rgba(242,145,127,0.4); }

/* ===================== Conformity Master Record (CRA → CE marking) ===================== */
.tab-dot.record { background: var(--gold-500); }
.doc-tree-item.mr-record { display: flex; align-items: center; gap: 8px; }
.mr-record-led { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 6px var(--gold-500); flex: none; }
.doc-tree-item.mr-record.active .dti-name { color: var(--blue-700); }

.rec-head { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.rec-fam { flex: 1; min-width: 220px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 18px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--paper); }
.rec-fam-name { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--ink); }
.rec-fam-sub { font-family: var(--mono); font-size: 11.5px; color: var(--gray-500); }

/* CE-readiness gate (also used slim in the right panel) */
.cer { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--gray-200); border-left-width: 4px; border-radius: var(--radius-lg); background: var(--paper); }
.cer.ready { border-left-color: var(--ok); background: var(--ok-bg); }
.cer.blocked { border-left-color: var(--bad); background: var(--bad-bg); }
.cer.slim { border-radius: var(--radius-md); }
.cer-gauge { display: flex; flex-direction: column; gap: 2px; }
.cer-pct { font-family: var(--display); font-size: 38px; font-weight: 800; line-height: 1; color: var(--ink); }
.cer-pct i { font-size: 18px; font-style: normal; color: var(--gray-500); margin-left: 2px; }
.cer.ready .cer-pct { color: var(--ok); }
.cer.blocked .cer-pct { color: var(--bad); }
.cer-state { font-size: 13.5px; font-weight: 700; }
.cer.ready .cer-state { color: var(--ok); }
.cer.blocked .cer-state { color: var(--bad); }
.cer-sub { font-size: 11.5px; color: var(--gray-500); }
.cer-vers { font-size: 12px; line-height: 1.5; color: var(--bad); font-weight: 600; }
.cer-blockers { display: flex; flex-direction: column; gap: 5px; padding-top: 8px; border-top: 1px solid var(--gray-200); }
.cer-blk { display: flex; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--gray-700); }
.cer-blk.hard { color: var(--bad); font-weight: 700; }
.cer-blk-ic { flex: none; }
.cer-more { font-size: 11.5px; color: var(--gray-500); }
.cer-ok { font-size: 12px; line-height: 1.5; color: var(--ok); }
.cer-open { margin-top: 2px; align-self: flex-start; padding: 7px 13px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--radius-sm); color: var(--blue-700); }

/* registry table */
.rec-group { margin-top: 18px; }
.rec-group-h { margin: 0 0 8px; font-size: 13px; font-family: var(--mono); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); }
.rec-group.live .rec-group-h { color: var(--warn); }
.rec-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); margin-bottom: 8px; }
.rec-item.na { opacity: 0.55; }
.rec-item.live { background: var(--bg); }
.rec-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rec-item-name { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-tag { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.rec-tag.warn { background: var(--warn-bg); color: var(--warn); }
.rec-tag.bad { background: var(--bad-bg); color: var(--bad); }
.rec-item-basis { font-family: var(--mono); font-size: 10.5px; color: var(--blue-700); }
.rec-item-req { font-size: 12px; line-height: 1.5; color: var(--gray-600); }
.rec-controls { display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; }
.rec-chk { padding: 5px 11px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; background: var(--paper); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); color: var(--gray-500); }
.rec-chk:hover { color: var(--gray-700); }
.rec-chk.on { background: var(--ok-bg); border-color: rgba(90,209,154,0.4); color: var(--ok); }
.rec-chk.na { color: var(--gray-500); }
.rec-dated { font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-sm); }
.rec-dated.ok { color: var(--ok); background: var(--ok-bg); }
.rec-dated.no { color: var(--bad); background: var(--bad-bg); }
.rec-owner { width: 90px; background: var(--bg); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); color: var(--gray-700); font: inherit; font-size: 11.5px; padding: 5px 8px; }
.rec-owner:focus { outline: none; border-color: var(--blue-600); }
.rec-na { font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; flex: none; }
.rec-na-btn { padding: 4px 9px; cursor: pointer; font: inherit; font-size: 11px; background: none; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); color: var(--blue-700); }
.rec-live-tag { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); padding: 4px 9px; border-radius: 999px; align-self: center; }
.insp-title.insp-doc { margin-top: 16px; }

/* ---- Article 14 reporting readiness (live duty, NOT a CE gate) ---- */
.rep-ready { margin-top: 10px; padding: 14px 16px; border: 1px dashed var(--gray-300); border-left: 3px solid var(--warn); border-radius: var(--radius-md); background: var(--bg); }
.rep-ready.ready { border-left-color: var(--ok); }
.rep-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.rep-title { display: flex; flex-direction: column; gap: 4px; }
.rep-sub { font-size: 12px; color: var(--gray-500); max-width: 60ch; line-height: 1.45; }
.rep-gauge { flex: none; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.rep-pct { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--warn); }
.rep-pct i { font-size: 13px; font-style: normal; color: var(--gray-500); margin-left: 1px; }
.rep-ready.ready .rep-pct { color: var(--ok); }
.rep-state { font-size: 12px; font-weight: 700; color: var(--warn); }
.rep-ready.ready .rep-state { color: var(--ok); }
.rep-count { font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); }
.rep-clock { margin: 12px 0; padding: 10px 12px; background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }
.rep-leg { font-size: 11.5px; color: var(--gray-600, var(--gray-500)); font-weight: 600; }
.rep-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 8px; }
.rep-track { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.rep-track b { font-size: 11px; }
.rep-track i { font-style: normal; font-weight: 800; font-family: var(--mono); color: var(--warn); }
.rep-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rep-chk { display: flex; gap: 9px; align-items: flex-start; text-align: left; padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; font: inherit; }
.rep-chk:hover { border-color: var(--gray-300); }
.rep-chk.on { border-color: var(--ok); background: var(--ok-bg, var(--bg)); }
.rep-chk-box { flex: none; width: 17px; height: 17px; border: 1.5px solid var(--gray-300); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--ok); margin-top: 1px; }
.rep-chk.on .rep-chk-box { border-color: var(--ok); }
.rep-chk-body { display: flex; flex-direction: column; gap: 1px; }
.rep-chk-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rep-chk-basis { font-family: var(--mono); font-size: 10px; color: var(--gray-500); }
.rep-disclaimer { margin: 10px 0 0; font-size: 11px; color: var(--gray-500); line-height: 1.45; }
@media (max-width: 720px) { .rep-tracks, .rep-checks { grid-template-columns: 1fr; } }

/* ---- CE marking by version (re-approval on substantial modification) ---- */
.rec-versions { margin: 16px 0; }
.rec-ver-sub { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--gray-600); max-width: 80ch; }
.rec-ver { display: grid; grid-template-columns: 90px 130px 180px 1fr; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--gray-200); border-left-width: 4px; border-left-color: var(--gray-300); border-radius: var(--radius-md); background: var(--paper); margin-bottom: 8px; }
.rec-ver.ce-marked { border-left-color: var(--ok); }
.rec-ver.ce-reassess { border-left-color: var(--bad); background: var(--bad-bg); }
.rec-ver.ce-prior { opacity: 0.75; }
.rec-ver.sel { box-shadow: 0 0 0 1px var(--blue-500); }
.rec-ver-id { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rec-ver-date { font-size: 11.5px; color: var(--gray-500); }
.rec-ver-note { font-size: 12px; line-height: 1.5; color: var(--gray-600); }
.rec-ver.ce-reassess .rec-ver-note { color: var(--bad); }
@media (max-width: 820px) {
  .rec-ver { grid-template-columns: 1fr; gap: 5px; }
}

/* ---- risk→control→route chain explainer ---- */
.rec-chain { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--paper); }
.rec-chain-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.rec-chain-step { font-size: 12px; font-weight: 600; color: var(--gray-700); background: var(--bg); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 6px 10px; }
.rec-chain-step i { font-weight: 400; color: var(--gray-500); }
.rec-chain-step.rec-chain-route { color: var(--blue-700); border-color: var(--blue-600); }
.rec-chain-arrow { color: var(--blue-400); font-weight: 700; }
.rec-chain-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-600); }
.rec-chain-note b { color: var(--ink); }

/* ---- legal due-diligence recommendation ---- */
.rec-dd { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--gray-200); border-left: 4px solid var(--blue-600); border-radius: var(--radius-md); background: var(--blue-050); }
.rec-dd-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.rec-dd-list li { font-size: 12.5px; line-height: 1.55; color: var(--gray-700); }
.rec-dd-cite { display: inline-block; margin-left: 4px; font-family: var(--mono); font-size: 10px; color: var(--blue-700); }
.rec-dd-disclaimer { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--blue-100); font-size: 11.5px; line-height: 1.6; color: var(--gray-600); }
.rec-dd-disclaimer b { color: var(--bad); }

/* ===== Obligation map & completion order (wb-roadmap.jsx) ================= */
.sb-maplink { flex: none; display: flex; align-items: center; gap: 7px; width: calc(100% - 16px); margin: 0 8px 8px; padding: 9px 10px; border: 1px solid var(--blue-200); border-radius: var(--radius-sm, 8px); background: var(--blue-050); color: var(--blue-800); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.sb-maplink:hover { background: var(--blue-100); border-color: var(--blue-600); }
.sb-maplink svg { width: 13px; height: 13px; flex: none; }

.rm-screen { max-width: 980px; }
.rm-h1 { margin: 8px 0 6px; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.rm-lede { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--gray-700); }
.rm-h2 { margin: 30px 0 6px; font-size: 16px; color: var(--ink); }
.rm-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--gray-600); }

.rm-order { display: flex; flex-direction: column; gap: 8px; }
.rm-step { display: flex; gap: 14px; padding: 12px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-md, 12px); background: var(--paper); }
.rm-step-through { border-style: dashed; border-color: var(--blue-200); background: var(--blue-050); }
.rm-step-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--blue-100); color: var(--blue-800); font-family: var(--mono); font-weight: 700; font-size: 14px; }
.rm-step-through .rm-step-n { background: transparent; border: 1px dashed var(--blue-600); color: var(--blue-700); }
.rm-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rm-step-docs { display: flex; flex-wrap: wrap; gap: 7px; }
.rm-step-why { font-size: 12.5px; line-height: 1.5; color: var(--gray-700); }

.rm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 1px solid var(--gray-300); border-radius: 999px; background: var(--gray-100); color: var(--gray-800); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s; max-width: 100%; }
.rm-chip:hover { border-color: var(--blue-600); background: var(--blue-050); }
.rm-chip-num { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--blue-700); }
.rm-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.rm-chip-pct { font-family: var(--mono); font-size: 10.5px; color: var(--gray-500); }

.rm-callout { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--blue-200); border-left: 3px solid var(--blue-600); border-radius: var(--radius-sm, 8px); background: var(--blue-050); font-size: 12.5px; line-height: 1.6; color: var(--gray-700); }

.rm-table { width: 100%; border-collapse: collapse; margin: 4px 0 0; font-size: 12.5px; }
.rm-table th { text-align: left; padding: 8px 10px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); border-bottom: 1px solid var(--gray-300); }
.rm-table td { padding: 10px; border-bottom: 1px solid var(--gray-200); vertical-align: top; color: var(--gray-700); }
.rm-row { cursor: pointer; transition: background .12s; }
.rm-row:hover { background: var(--blue-050); }
.rm-td-num { font-family: var(--mono); font-weight: 700; color: var(--blue-700); white-space: nowrap; }
.rm-td-name b { display: block; color: var(--ink); font-size: 13px; }
.rm-td-core { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gray-500); line-height: 1.45; }
.rm-td-obl { font-size: 12px; line-height: 1.5; }
.rm-td-st { white-space: nowrap; }

.rm-map { display: flex; flex-direction: column; gap: 8px; }
.rm-map-row { display: flex; gap: 14px; padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-md, 12px); background: var(--paper); }
.rm-map-step { flex: none; width: 170px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--blue-800); padding-top: 4px; }
.rm-map-docs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rm-map-note { flex-basis: 100%; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--gray-600); }

.rm-disclaimer { margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--gray-300); font-size: 11.5px; line-height: 1.6; color: var(--gray-500); }

/* ============================================================
   Title-bar light/dark toggle button (both modes)
   ============================================================ */
.tb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0;
  background: none; border: 1px solid var(--c-border); border-radius: 6px;
  color: var(--c-tx); cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tb-icon-btn:hover { background: var(--c-hover); border-color: var(--blue-500); color: var(--c-bright); }
.tb-icon-btn svg { width: 16px; height: 16px; }

/* ============================================================
   LIGHT MODE — flips the workbench chrome + content tokens.
   `body.wb-light #root` (class+class+id) outranks the bare `#root`
   dark remap, so dark stays the untouched default. The licensed
   gate (.wb-gate, outside #root) and the document "paper" view are
   intentionally light already and are not affected here.
   ============================================================ */
body.wb-light #root {
  /* IDE chrome → light */
  --c-deep: #dfe5ec;     /* recessed inputs / hard separators */
  --c-bar: #ebeef3;      /* title bar, tab strip, dock, activity bar */
  --c-panel: #f4f6f9;    /* side bar, right panel, dock body */
  --c-elev: #ffffff;     /* cards, table head, chips, bubbles */
  --c-elev2: #eef2f7;    /* buttons, status-dot track (= gray-100) */
  --c-tabin: #e7ebf1;    /* inactive editor tab */
  --c-border: #d8e0e9;   /* chrome borders (= gray-200) */
  --c-scroll: #c2cdd9;   /* scrollbar thumb (= gray-300) */
  --c-docview: #e9edf2;  /* backdrop behind the white document paper */
  --c-bright: #16222e;   /* darkest text + icons (also drives --ink) */
  --c-tx: #3c4753;       /* primary text (= gray-700) */
  --c-tx2: #4a5663;      /* secondary text */
  --c-dim: #6c7783;      /* dim text (= gray-500) */
  --c-faint: #93a0ad;    /* faint text (= gray-400) */
  --c-faint2: #aab4bf;   /* faintest text */
  --c-active-fg: #0e1722;/* active/hover text on neutral chrome */
  --c-hover: rgba(15, 23, 42, 0.055);

  /* content neutrals → light */
  --ink: #16222e;
  --bg: #f6f8fa;
  --paper: #ffffff;
  --gray-800: #2c3640;
  --gray-600: #5d6b78;

  /* blue scale → light (strong blues for text / active states) */
  --blue-050: #eef3fc;
  --blue-100: #d9e3f6;
  --blue-200: #b3c5ea;
  --blue-600: #1a4cb5;
  --blue-700: #003399;
  --blue-800: #062a78;
  --blue-900: #08205c;

  /* status → light */
  --ok: #1e7e4d; --ok-bg: #e6f4ec;
  --warn: #946700; --warn-bg: #fdf3da;
  --bad: #b13a2b; --bad-bg: #fbe9e6;
  --judge: #8a5a00; --judge-bg: #fbf4e4;

  --shadow-1: 0 6px 20px rgba(6, 20, 58, 0.09);
  --shadow-2: 0 18px 44px rgba(6, 16, 48, 0.16);
}

/* page backdrop behind #root (token is #root-scoped, so set it on body) */
body.wb-light.wb-authed { background: #e3e8ef; }

/* keep the solid-blue surfaces strong even though the blue tints lightened */
body.wb-light #root .btn-primary { box-shadow: 0 10px 24px rgba(0, 51, 153, 0.28); }
body.wb-light #root .assemble-bar { background: linear-gradient(135deg, var(--blue-900), var(--blue-700)); }
body.wb-light #root .judge-card { background: #fffdf8; }

/* command palette: tokenized inner parts now flip light, so flip the
   literal shell + the white-on-selected text to match */
body.wb-light .palette { background: var(--paper); border-color: var(--c-border); }
body.wb-light .palette-input { background: var(--c-panel); border-bottom-color: var(--c-border); }
body.wb-light .palette-item.sel { color: var(--c-active-fg); }