/* intactly.ai - claim cockpit demo
   Instrument-panel density: this is the screen a handler lives in all day, so it optimises for
   information-per-pixel and scannability rather than for marketing whitespace. */

:root {
  --bg: #0f1115;
  --panel: #161920;
  --panel-2: #1c2029;
  --line: #262b35;
  --line-soft: #1f242d;
  --text: #e8eaed;
  --text-2: #a2a9b4;
  --text-3: #6b7280;

  --teal: #4fd1b8;
  --teal-dim: #1d3f3a;
  --red: #ff6b52;
  --red-dim: #3d1e18;
  --amber: #f5b544;
  --amber-dim: #3a2d13;
  --blue: #6ba8ff;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Light variant.
   The cockpit is dark-first on purpose - it is an instrument panel someone sits
   in front of all day. But the reader gets the choice, so every token flips.
   The document facsimile (.paper) deliberately does NOT flip: a scanned
   certificate is white paper in both themes, and inverting it would misrepresent
   the source document.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eceae4;
    --panel: #ffffff;
    --panel-2: #f4f3ef;
    --line: #d5d1c8;
    --line-soft: #e4e1d9;
    --text: #101217;
    --text-2: #4a5057;
    --text-3: #7b8189;

    --teal: #0d5c50;
    --teal-dim: #dceeea;
    --red: #a92b12;
    --red-dim: #f9e3de;
    --amber: #8a5200;
    --amber-dim: #fbeed2;
    --blue: #1c50a8;
  }
}

:root[data-theme="light"] {
  --bg: #eceae4;
  --panel: #ffffff;
  --panel-2: #f4f3ef;
  --line: #d5d1c8;
  --line-soft: #e4e1d9;
  --text: #101217;
  --text-2: #4a5057;
  --text-3: #7b8189;

  --teal: #0d5c50;
  --teal-dim: #dceeea;
  --red: #a92b12;
  --red-dim: #f9e3de;
  --amber: #8a5200;
  --amber-dim: #fbeed2;
  --blue: #1c50a8;
}

/* Surfaces that were hardcoded dark and must follow the theme. */
:root[data-theme="light"] .exam-stage,
:root:not([data-theme="dark"]) .exam-stage { }

* { box-sizing: border-box; }

html { color-scheme: dark light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0 0 0.75em; }
a { color: var(--teal); }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
}
.brand .mk {
  width: 13px; height: 13px;
  border: 2.5px solid var(--teal);
  border-radius: 3px;
  position: relative;
}
.brand .mk::after { content: ""; position: absolute; inset: 2px; background: var(--teal); border-radius: 1px; }
.brand span.d { color: var(--teal); }

.topbar .ctx {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar .spacer { margin-left: auto; }

.pill {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--text-2);
  white-space: nowrap;
}
.pill.warn { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-dim); }
.pill.ok { color: var(--teal); border-color: var(--teal-dim); background: var(--teal-dim); }

/* --- layout ------------------------------------------------------------- */

.cockpit {
  display: grid;
  grid-template-columns: 21rem minmax(0, 1fr);
  height: calc(100vh - 49px);
}

.queue {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--panel);
}

.queue-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 5;
}
.queue-head h2 { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.queue-head .sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); margin-top: 0.25rem; }

.qitem {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.qitem:hover { background: var(--panel-2); }
.qitem[aria-selected="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }

.qitem .q-top { display: flex; align-items: baseline; gap: 0.5rem; }
.qitem .q-id { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-2); }
.qitem .q-urg {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
}
.qitem .q-next { font-size: 0.8125rem; margin-top: 0.3rem; color: var(--text); line-height: 1.35; }
.qitem .q-meta {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--text-3);
  margin-top: 0.35rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sev-breached { background: var(--red-dim); color: var(--red); }
.sev-atrisk { background: var(--amber-dim); color: var(--amber); }
.sev-open { background: var(--line); color: var(--text-2); }

/* --- detail ------------------------------------------------------------- */

.detail { overflow-y: auto; }

.detail-head {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.detail-head h1 { font-size: 1.25rem; }
.detail-head .dh-sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); margin-top: 0.3rem; letter-spacing: 0.04em; }
.detail-head p.summary { color: var(--text-2); font-size: 0.875rem; margin: 0.75rem 0 0; max-width: 80ch; }
.dh-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.85rem; }

.tabsbar {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 0 1.5rem;
  gap: 0.25rem;
  position: sticky;
  top: 0;
  z-index: 4;
}
.tabsbar button {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--text-3);
  cursor: pointer;
}
.tabsbar button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--teal); }
.tabsbar button:hover { color: var(--text); }
.tabsbar .count {
  font-family: var(--mono);
  font-size: 0.625rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  background: var(--line);
  color: var(--text-2);
}
.tabsbar .count.hot { background: var(--red-dim); color: var(--red); }

.pane { padding: 1.5rem; }
.pane[hidden] { display: none; }

/* --- obligations -------------------------------------------------------- */

.obl {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  border-radius: 3px;
}
/* State reads from the surface and the status token. A card that needs a coloured
   bar to be legible is a card whose content is not doing its job. */
.obl.breached { background: var(--red-dim); border-color: var(--red); }
.obl.at-risk  { background: var(--amber-dim); border-color: var(--amber); }
.obl.open     { background: var(--panel); }
.obl.discharged { background: var(--panel); opacity: 0.55; }

.obl-top { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.obl-top h4 { font-size: 0.9375rem; }
.obl-status {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  margin-left: auto;
  white-space: nowrap;
}
.obl-cite {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  margin-top: 0.3rem;
}
.obl-remedy {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
}
.obl-remedy b { color: var(--text); font-weight: 600; }
.obl-dates {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-3);
  margin-top: 0.5rem;
}
.obl-dates b { color: var(--text-2); font-weight: 500; }

.flag-unverified {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px dashed var(--amber-dim);
  background: var(--amber-dim);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
}
.flag-horizon {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue);
  background: rgba(107,168,255,0.12);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
}

/* --- findings ----------------------------------------------------------- */

.finding {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 3px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.finding-head { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.finding-head .fh-top { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.finding-kind {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  background: var(--red-dim);
  color: var(--red);
}
.finding-conf {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}
.finding-rec {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-dim);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}
.finding-head h4 { font-size: 0.9375rem; margin-bottom: 0.35rem; }
.finding-head p { font-size: 0.8125rem; color: var(--text-2); margin: 0; }

.anchors { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); }
.anchor-card { background: var(--panel-2); padding: 0.85rem 1.1rem; }
.anchor-card .a-head {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.anchor-card .a-quote {
  font-size: 0.8125rem;
  color: var(--text);
  line-height: 1.6;
  background: rgba(245, 181, 68, 0.07);
  padding: 0.45rem 0.6rem;
  border-radius: 2px;
}

.factors {
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}
.factor .fk {
  display: block;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.2rem;
}
.factor .fv { font-size: 0.8125rem; color: var(--text-2); line-height: 1.45; }
.factor.benign .fk { color: var(--teal); }

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

/* --- generic bits ------------------------------------------------------- */

.empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-3);
  font-size: 0.875rem;
  border: 1px dashed var(--line);
  border-radius: 3px;
}

.callout {
  border: 1px solid var(--teal);
  background: var(--teal-dim);
  padding: 0.9rem 1.1rem;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.callout b { color: var(--text); }
.callout.amber { border-color: var(--amber); background: var(--amber-dim); }

.doclist { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.docrow {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
  font-size: 0.8125rem;
}
.docrow:last-child { border-bottom: 0; }
.docrow .d-id { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); width: 8rem; flex: none; }
.docrow .d-pages { margin-left: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 1.25rem;
}
.summary-cell { background: var(--panel); padding: 0.85rem 1rem; }
.summary-cell .s-k {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.summary-cell .s-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.2rem; }
.summary-cell.hot .s-v { color: var(--red); }
.summary-cell.warm .s-v { color: var(--amber); }
.summary-cell.good .s-v { color: var(--teal); }

.urgency-breakdown { margin-top: 0.75rem; }
.ub-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.ub-row .ub-n { color: var(--text-2); flex: 1; }
.ub-row .ub-v { color: var(--text-3); }
.ub-row .ub-c { color: var(--teal); font-weight: 700; width: 3rem; text-align: right; }

@media (max-width: 820px) {
  .cockpit { grid-template-columns: 1fr; height: auto; }
  .queue { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; }
}

/* ==========================================================================
   Shared demo nav
   ========================================================================== */

.demonav { display: flex; gap: 0.2rem; margin-left: 1.25rem; }
.demonav a {
  font-size: 0.8125rem;
  color: var(--text-3);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  white-space: nowrap;
}
.demonav a:hover { color: var(--text); background: var(--panel-2); }
.demonav a.on { color: var(--text); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--teal); }
@media (max-width: 720px) { .demonav a { padding: 0.3rem 0.45rem; font-size: 0.75rem; } }

/* ==========================================================================
   Examination view
   ========================================================================== */

.exam { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 21rem; height: calc(100vh - 49px); }
@media (max-width: 1150px) { .exam { grid-template-columns: 1fr; height: auto; } }

.exam-rail { border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
.exam-stage { overflow-y: auto; background: var(--bg); }
.exam-side { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
@media (max-width: 1150px) {
  .exam-rail, .exam-side { border: 0; border-bottom: 1px solid var(--line); }
}

.railhead {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}

/* --- scenario picker --- */
.scen {
  display: block; width: 100%; text-align: left; appearance: none;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 0.85rem 1rem; cursor: pointer;
  font-family: inherit; color: inherit;
}
.scen:hover { background: var(--panel-2); }
.scen[aria-selected="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.scen .s-t { font-size: 0.8125rem; color: var(--text); line-height: 1.35; }
.scen .s-c { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 0.3rem; }
.scen .s-b { font-size: 0.75rem; color: var(--text-3); margin-top: 0.4rem; line-height: 1.45; }

/* --- pipeline --- */
.pipe { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
.pipe-step { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; padding: 0.4rem 0; align-items: start; }
.pipe-dot {
  width: 11px; height: 11px; border-radius: 50%; margin-top: 0.28rem;
  border: 1.5px solid var(--line); background: transparent; transition: all 0.25s;
}
.pipe-step.done .pipe-dot { background: var(--teal); border-color: var(--teal); }
.pipe-step.active .pipe-dot { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(79,209,184,0.16); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(79,209,184,0.05); } }
.pipe-step .p-l { font-size: 0.8125rem; color: var(--text-3); }
.pipe-step.done .p-l, .pipe-step.active .p-l { color: var(--text); }
.pipe-step .p-d { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 0.1rem; line-height: 1.4; }

/* --- document facsimile --- */
.docwrap { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }

.paper {
  position: relative;
  width: 100%;
  max-width: 40rem;
  background: #fbfaf7;
  color: #17191d;
  border-radius: 3px;
  padding: 2rem 2.25rem 2.25rem;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.55);
  font-size: 13px;
  line-height: 1.6;
}
.paper.scanning::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 42%;
  top: -42%;
  background: linear-gradient(180deg, rgba(79,209,184,0) 0%, rgba(79,209,184,0.16) 70%, rgba(79,209,184,0.5) 100%);
  animation: scan 1.15s cubic-bezier(0.4,0,0.6,1) infinite;
  pointer-events: none;
  border-bottom: 1px solid rgba(79,209,184,0.75);
}
@keyframes scan { to { top: 100%; } }

.paper-tag {
  position: absolute; top: -0.7rem; left: 1.5rem;
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--panel-2); color: var(--text-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 0.2rem 0.5rem;
}

.p-masthead { text-align: center; border-bottom: 2px solid #17191d; padding-bottom: 0.7rem; margin-bottom: 1rem; }
.p-masthead .m1 { font-weight: 700; letter-spacing: 0.09em; font-size: 0.95rem; }
.p-masthead .m2 { font-size: 0.6875rem; color: #6a6f78; margin-top: 0.2rem; letter-spacing: 0.03em; }

.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin-bottom: 0.9rem; }
.p-cell .k { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.07em; color: #83888f; }
.p-cell .v { font-weight: 600; }

.p-rule { border-top: 1px solid #cfcbc2; margin: 0.9rem 0; }
.p-heading { font-weight: 700; font-size: 0.8125rem; margin: 0.9rem 0 0.45rem; letter-spacing: 0.01em; }
.p-para { margin: 0 0 0.6rem; color: #33373d; }
.p-para.ctx { background: #fff6e0; padding: 0.5rem 0.6rem; border-radius: 2px; box-shadow: inset 0 0 0 1px #eccf8a; }

.p-checks { margin: 0.3rem 0 0.9rem; }
.p-check { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.18rem 0; }
.p-box {
  width: 12px; height: 12px; border: 1.5px solid #17191d; border-radius: 2px;
  margin-top: 0.22rem; flex: none; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
}

.p-restrict { margin: 0.3rem 0 0.9rem; }
.p-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid #17191d; padding-top: 0.55rem; margin-top: 0.5rem;
  font-weight: 700;
}
.p-costs { margin: 0.4rem 0; }
.p-cost { display: flex; justify-content: space-between; padding: 0.22rem 0; border-bottom: 1px dotted #d8d4cb; }
.p-cost .cl { color: #33373d; }

.p-sig { display: flex; gap: 1.5rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.p-sig .sname { font-family: "Snell Roundhand", "Apple Chancery", cursive; font-size: 1.35rem; color: #1c3f8f; }
.p-sig .smeta { font-size: 0.6875rem; color: #6a6f78; }

/* the extracted-value marker */
.xf { position: relative; border-radius: 2px; padding: 0 1px; transition: background 0.3s, box-shadow 0.3s; }
.xf.lit { background: #ffe9a8; box-shadow: 0 0 0 1.5px #d9a900; }
.xf.key { background: #ffd9cf; box-shadow: 0 0 0 1.5px #d64528; }
.xf.sel { background: #b9f0e2; box-shadow: 0 0 0 2px var(--teal); }
.xf-badge {
  position: absolute; top: -0.62rem; right: -0.3rem;
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em;
  background: #17191d; color: #fbfaf7; border-radius: 2px; padding: 0.05rem 0.22rem;
  opacity: 0; transition: opacity 0.25s; pointer-events: none; white-space: nowrap;
}
.xf.lit .xf-badge, .xf.key .xf-badge, .xf.sel .xf-badge { opacity: 1; }

/* --- extraction side panel --- */
.xrow {
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.xrow:hover { background: var(--panel-2); }
.xrow.on { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xrow .x-t { font-family: var(--mono); font-size: 0.625rem; color: var(--teal); letter-spacing: 0.03em; }
.xrow .x-v { font-size: 0.8125rem; color: var(--text); margin-top: 0.15rem; word-break: break-word; }
.xrow .x-m { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.xbar { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.xbar i { display: block; height: 100%; background: var(--teal); border-radius: 2px; }
.xrow .x-c { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); }
.xrow .x-f {
  font-family: var(--mono); font-size: 0.5625rem; color: #f5b544;
  margin-top: 0.3rem; letter-spacing: 0.03em;
}

/* --- rule trace --- */
.trace { padding: 0.9rem 1rem; }
.trace-step {
  border-left: 1px solid var(--line); padding: 0 0 0.85rem 0.85rem; position: relative;
}
.trace-step::before {
  content: ""; position: absolute; left: -4px; top: 0.36rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line);
  outline: 3px solid var(--panel);
}
.trace-step.pass::before { background: var(--teal); }
.trace-step.fire::before { background: var(--red); }
.trace-step:last-child { padding-bottom: 0; }
.trace-step .t-n { font-size: 0.8125rem; color: var(--text); }
.trace-step .t-d { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 0.2rem; line-height: 1.5; }
.trace-step.fire .t-n { color: var(--red); font-weight: 600; }
.trace-step.pass .t-n { color: var(--text-2); }

.runbtn { width: 100%; margin-top: 0.4rem; }
.btn-t {
  appearance: none; font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  background: var(--teal); color: var(--panel); border: 0; border-radius: 3px;
  padding: 0.6rem 1rem; cursor: pointer; width: 100%;
}
.btn-t:hover { filter: brightness(1.12); }
.btn-t[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-o {
  appearance: none; font-family: inherit; font-size: 0.75rem;
  background: transparent; color: var(--text-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.45rem 0.8rem; cursor: pointer;
}
.btn-o:hover { color: var(--text); border-color: var(--rule-hard, #3a4645); }

/* ==========================================================================
   Rule console
   ========================================================================== */

.rc { display: grid; grid-template-columns: 20rem minmax(0, 1fr); height: calc(100vh - 49px); }
@media (max-width: 1000px) { .rc { grid-template-columns: 1fr; height: auto; } }

.rc-list { border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
.rc-main { overflow-y: auto; }

.rc-filters { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip {
  appearance: none; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.05em;
  background: transparent; color: var(--text-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.22rem 0.55rem; cursor: pointer;
}
.chip[aria-pressed="true"] { color: var(--bg); background: var(--teal); border-color: var(--teal); }
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"]:hover { color: var(--bg); }

.rule-item {
  display: block; width: 100%; text-align: left; appearance: none; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 0.7rem 0.9rem; font-family: inherit; color: inherit;
}
.rule-item:hover { background: var(--panel-2); }
.rule-item[aria-selected="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.rule-item .ri-id { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); }
.rule-item .ri-t { font-size: 0.8125rem; color: var(--text); margin-top: 0.2rem; line-height: 1.35; }
.rule-item .ri-m { display: flex; gap: 0.35rem; margin-top: 0.4rem; flex-wrap: wrap; align-items: center; }

.tag {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.35rem; border-radius: 2px; white-space: nowrap;
}
.tag.statutory { background: #3d1e18; color: var(--red); }
.tag.code { background: #3a2d13; color: var(--amber); }
.tag.regulatory { background: var(--blue-dim, rgba(107,168,255,0.14)); color: var(--blue); }
.tag.service { background: var(--line); color: var(--text-2); }
.tag.unver { background: transparent; color: var(--amber); border: 1px dashed var(--amber); }
.tag.ver { background: var(--teal-dim); color: var(--teal); }
.tag.horizon { background: var(--blue-dim, rgba(107,168,255,0.14)); color: var(--blue); border: 1px solid var(--blue); }
.tag.jur { background: var(--line); color: var(--text-2); }

/* state pips */
.state {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.14rem 0.4rem; border-radius: 2px; white-space: nowrap;
}
.state.draft { background: var(--line); color: var(--text-2); }
.state.review { background: #3a2d13; color: var(--amber); }
.state.verify { background: var(--blue-dim, rgba(107,168,255,0.14)); color: var(--blue); }
.state.shadow { background: rgba(150,110,255,0.16); color: #8a5cff; }
.state.published { background: var(--teal-dim); color: var(--teal); }
.state.amended, .state.retired { background: var(--line); color: var(--text-3); }

.rc-pane { padding: 1.5rem; max-width: 62rem; }
.rc-h { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.5rem; }
.rc-h h1 { font-size: 1.3rem; }
.rc-cite { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); margin-bottom: 1.25rem; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; margin-bottom: 1.5rem; }
.kv > div { background: var(--panel); padding: 0.7rem 0.9rem; }
.kv .k { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.kv .v { font-size: 0.875rem; color: var(--text); margin-top: 0.25rem; word-break: break-word; }
.kv .v.mono { font-family: var(--mono); font-size: 0.75rem; }

.sec-h {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-3); margin: 1.75rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}

pre.code {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 0.9rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: 0.6875rem;
  line-height: 1.65; color: var(--text-2); margin: 0;
}
pre.code .k2 { color: var(--blue); }
pre.code .s2 { color: var(--teal); }
pre.code .n2 { color: var(--amber); }
pre.code .c2 { color: var(--text-3); font-style: italic; }

/* lifecycle rail */
.lifecycle { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.lc {
  flex: 1 1 8rem; min-width: 8rem; padding: 0.7rem 0.8rem; background: var(--panel);
  border-right: 1px solid var(--line); position: relative;
}
.lc:last-child { border-right: 0; }
.lc.at { background: var(--panel-2); box-shadow: inset 0 -3px 0 var(--teal); }
.lc.past { opacity: 0.55; }
.lc .lc-n { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); letter-spacing: 0.07em; }
.lc .lc-l { font-size: 0.8125rem; color: var(--text); margin-top: 0.2rem; font-weight: 500; }
.lc .lc-d { font-size: 0.6875rem; color: var(--text-3); margin-top: 0.25rem; line-height: 1.45; }
.lc.at .lc-l { color: var(--teal); }

/* version history */
.ver-row { display: grid; grid-template-columns: 2.4rem 6rem 1fr auto; gap: 0.85rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.ver-row:last-child { border-bottom: 0; }
.ver-row .vn { font-family: var(--mono); font-size: 0.75rem; color: var(--teal); }
.ver-row .vd { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }
.ver-row .vc { font-size: 0.8125rem; color: var(--text-2); line-height: 1.45; }
.ver-row .vb { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); white-space: nowrap; }

/* tables */
table.g { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
table.g th, table.g td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.g thead th { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); font-weight: 500; }
table.g td { color: var(--text-2); }
table.g td strong { color: var(--text); font-weight: 600; }

.risk { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.12rem 0.35rem; border-radius: 2px; }
.risk.high { background: #3d1e18; color: var(--red); }
.risk.medium { background: #3a2d13; color: var(--amber); }
.risk.low { background: var(--line); color: var(--text-2); }

.constraint { padding: 0.35rem 0 0.35rem 1.1rem; position: relative; font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; }
.constraint::before { content: "\2716"; position: absolute; left: 0; top: 0.4rem; color: var(--red); font-size: 0.6875rem; }

/* validator playground */
.valgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .valgrid { grid-template-columns: 1fr; } }
.valout { border: 1px solid var(--line); border-radius: 3px; background: var(--panel); padding: 0.9rem 1rem; font-size: 0.8125rem; }
.valout.ok { border-color: var(--teal); }
.valout.bad { border-color: var(--red); }
.valout .vh { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
.valout.ok .vh { color: var(--teal); }
.valout.bad .vh { color: var(--red); }
.valout code { font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); }

.changelog-row { display: grid; grid-template-columns: 6rem 5.5rem 1fr; gap: 0.85rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.changelog-row .cd { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }
.changelog-row .cw { font-size: 0.8125rem; color: var(--text-2); line-height: 1.45; }
.tagx { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.12rem 0.35rem; border-radius: 2px; background: var(--line); color: var(--text-2); text-align: center; }
.tagx.correction { background: #3d1e18; color: var(--red); }
.tagx.safety { background: var(--teal-dim); color: var(--teal); }
.tagx.flag { background: #3a2d13; color: var(--amber); }

/* --- theme toggle (demo surface) ----------------------------------------- */

.themetoggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  appearance: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}
.themetoggle:hover { color: var(--text); border-color: var(--teal); }
.themetoggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.themetoggle svg { width: 12px; height: 12px; fill: currentColor; stroke: currentColor; }
.themetoggle svg [stroke-width] { stroke: currentColor; fill: none; }
@media (max-width: 640px) { .themetoggle .tt-label { display: none; } }

/* ==========================================================================
   Portfolio dashboard
   Validated palette: categorical slots 1-3 pass all-pairs in both modes on
   these surfaces. Status colours are reserved and always ship with a label,
   never colour alone.
   ========================================================================== */

:root {
  --s1: #3987e5;  /* categorical slot 1 - blue */
  --s2: #d95926;  /* slot 2 - orange */
  --s3: #199e70;  /* slot 3 - aqua */
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --grid: #262b35;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --grid: #e4e1d9; }
}
:root[data-theme="light"] { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --grid: #e4e1d9; }

.dash { padding: 1.5rem; max-width: 1500px; margin: 0 auto; }

.dash-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dash-head h1 { font-size: 1.35rem; }
.dash-meta { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }
.dash-meta .prov { cursor: help; }

.prov {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.12rem 0.35rem; border-radius: 2px; white-space: nowrap; vertical-align: 0.15em;
}
.prov.computed { background: var(--teal-dim); color: var(--teal); }
.prov.illustrative { background: var(--line); color: var(--text-3); }

/* hero tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 1.5rem; }
.tile { background: var(--panel); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tile .t-k { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); line-height: 1.4; }
.tile .t-v { font-size: 2rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.tile .t-v small { font-size: 0.875rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; margin-left: 0.2rem; }
.tile .t-f { display: flex; align-items: center; gap: 0.45rem; font-size: 0.6875rem; color: var(--text-3); margin-top: auto; }
.delta { font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.15rem; }
.delta.up { color: var(--st-critical); }
.delta.down { color: var(--st-good); }
.delta.flat { color: var(--text-3); }

/* card grid */
/* Explicit 12-column grid rather than auto-fit. auto-fit decides the column count from
   available width, which means the last row is whatever is left over - that is how a single
   card ends up alone beside two dead cells. Explicit spans make the packing intentional. */
.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: stretch; }
.card {
  grid-column: span 4;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 3px;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card.wide { grid-column: span 12; }
.card.half { grid-column: span 6; }
/* Content stays top-aligned so bars sit directly under the sentence that explains them;
   the leftover height in a shorter card falls at the bottom where it reads as breathing room
   rather than as a disconnect. Footnotes are the thing that gets pinned down there. */
.card > .rows { padding-top: 0.1rem; }
.card > .card-note { margin-top: auto; }

@media (max-width: 1180px) {
  .card { grid-column: span 6; }
  .card.half { grid-column: span 12; }
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
  .card, .card.wide, .card.half { grid-column: span 1; }
}
.card-h { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.card-h h2 { font-size: 0.9375rem; }
.card-sub { font-size: 0.75rem; color: var(--text-3); line-height: 1.5; margin: 0 0 0.9rem; }
.card-note { font-size: 0.6875rem; color: var(--text-3); line-height: 1.5; margin: 0.85rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); }

/* chart primitives */
.chart { width: 100%; overflow: visible; display: block; }
.chart text { font-family: var(--mono); font-size: 9px; fill: var(--text-3); }
.chart .axis-line { stroke: var(--grid); stroke-width: 1; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .val-label { fill: var(--text-2); font-size: 9px; }
.chart .mark { transition: opacity 0.12s; }
.chart:hover .mark { opacity: 0.55; }
.chart .mark:hover { opacity: 1; }

/* Horizontal bar rows.
   Fixed label and value columns so every track starts and ends at the same x in every card -
   that alignment is what lets the eye compare across cards instead of within one. Labels
   truncate rather than wrap: a wrapped label makes its row taller than its neighbours and the
   whole grid stops lining up. The full text is on the row's hover tooltip. */
.hbar {
  display: grid;
  grid-template-columns: var(--hb-label, 10.5rem) minmax(0, 1fr) var(--hb-value, 3.25rem);
  gap: 0.6rem 0.7rem;
  align-items: center;
  padding: 0.3rem 0;
  min-height: 1.85rem;
}
.hbar .hb-l {
  font-size: 0.75rem;
  color: var(--text-2);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar .hb-l small {
  display: block;
  font-family: var(--mono);
  font-size: 0.5625rem;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Wider label column where the card is full width and can afford it. */
.card.wide .hbar { --hb-label: 15rem; --hb-value: 3.5rem; }
.hbar .hb-t { height: 9px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.hbar .hb-f { display: block; height: 100%; border-radius: 4px; }
.hbar .hb-v { font-family: var(--mono); font-size: 0.75rem; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* stacked precision bar */
.stack { display: flex; height: 11px; border-radius: 5px; overflow: hidden; background: var(--line-soft); gap: 2px; }
.stack i { display: block; height: 100%; }

/* index pillars */
.pillar { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr 3.2rem; gap: 0.75rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); }
.pillar:last-child { border-bottom: 0; }
.pillar .p-n { font-size: 0.8125rem; color: var(--text); }
.pillar .p-n small { display: block; font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin-top: 0.1rem; }
.pillar .p-s { font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; text-align: right; }

.indexbox { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.indexbox .ix-v { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.indexbox .ix-k { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); letter-spacing: 0.04em; }

/* zero tolerance */
.zt { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.6rem 0.85rem; align-items: start; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.zt:last-child { border-bottom: 0; }
.zt-v { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; text-align: center; border-radius: 3px; padding: 0.1rem 0; }
.zt-v.ok { background: rgba(12,163,12,0.14); color: var(--st-good); }
.zt-v.bad { background: rgba(208,59,59,0.16); color: var(--st-critical); }
.zt-l { font-size: 0.8125rem; color: var(--text); line-height: 1.35; }
.zt-l small { display: block; font-size: 0.6875rem; color: var(--text-3); margin-top: 0.15rem; line-height: 1.45; }

/* legend */
.legend { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.6875rem; color: var(--text-2); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }

/* catalogue */
.cat-dom { margin-bottom: 1.4rem; }
/* Names only. Each metric's rationale rides its hover tooltip, so the reference
   stays available without turning the dashboard into a document. */
.cat-dom h3 { font-size: 0.875rem; margin-bottom: 0.5rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.cat-aud { font-family: var(--mono); font-size: 0.625rem; font-weight: 400; color: var(--text-3); letter-spacing: 0.04em; }
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.cat-list li { background: var(--panel); padding: 0.4rem 0.6rem; font-size: 0.75rem; color: var(--text-2); cursor: help; }
.cat-list li:hover { background: var(--panel-2); color: var(--text); }

/* tooltip */
#tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 0.45rem 0.6rem; font-size: 0.75rem; color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3); transition: opacity 0.1s; max-width: 17rem;
}
#tip b { display: block; font-size: 0.6875rem; color: var(--text-3); font-weight: 500; margin-bottom: 0.15rem; }

/* --- rule drafting ------------------------------------------------------- */

.draft-box { border: 1px solid var(--line); background: var(--panel); border-radius: 3px; padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; }
.draft-box textarea {
  width: 100%; min-height: 6rem; resize: vertical;
  font-family: inherit; font-size: 0.875rem; line-height: 1.5;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.6rem 0.7rem;
}
.draft-box textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,209,184,0.14); }
.draft-actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.8rem; }
.draft-hint { font-size: 0.6875rem; color: var(--text-3); line-height: 1.5; flex: 1; min-width: 16rem; }
.draft-ex { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.7rem; }
.draft-ex button {
  appearance: none; font-family: var(--mono); font-size: 0.625rem;
  background: transparent; color: var(--text-3); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.22rem 0.55rem; cursor: pointer; text-align: left;
}
.draft-ex button:hover { color: var(--text); border-color: var(--teal); }

.draft-msg { margin-top: 0.9rem; font-size: 0.8125rem; padding: 0.7rem 0.85rem; border-radius: 3px; display: none; line-height: 1.5; }
.draft-msg.on { display: block; }
.draft-msg.err { background: var(--red-dim); border: 1px solid var(--red); color: var(--text); }
.draft-msg.wait { background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2); }

.conf { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.12rem 0.35rem; border-radius: 2px; }
.conf.high { background: var(--teal-dim); color: var(--teal); }
.conf.medium { background: var(--amber-dim); color: var(--amber); }
.conf.low { background: var(--red-dim); color: var(--red); }

/* ==========================================================================
   Typology tree - expand, inspect, enable/disable
   ========================================================================== */

.tree { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 1050px) { .tree { grid-template-columns: 1fr; } }

.tnode { border: 1px solid var(--line); border-radius: 3px; background: var(--panel); margin-bottom: 0.5rem; }
.tnode.off { opacity: 0.5; }

/* line-of-business group */
.tgroup > .thead { background: var(--panel-2); }
.thead {
  display: grid; grid-template-columns: 1.2rem 1fr auto auto; gap: 0.6rem;
  align-items: center; padding: 0.6rem 0.8rem; cursor: pointer; user-select: none;
}
.thead:hover { background: var(--panel-2); }
.tcaret { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); transition: transform 0.15s; display: inline-block; }
.tnode.open > .thead .tcaret { transform: rotate(90deg); }
.tname { font-size: 0.875rem; color: var(--text); line-height: 1.3; }
.tname small { display: block; font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin-top: 0.15rem; }
.tcount { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); white-space: nowrap; }

.tbody { display: none; padding: 0 0.8rem 0.8rem 2.6rem; }
.tnode.open > .tbody { display: block; }
.tgroup > .tbody { padding: 0 0.6rem 0.6rem 1.6rem; }

/* toggle */
.tsw {
  position: relative; width: 30px; height: 17px; border-radius: 9px;
  background: var(--line); border: 0; cursor: pointer; padding: 0; flex: none; transition: background 0.15s;
}
.tsw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--text-3); transition: transform 0.15s, background 0.15s;
}
.tsw[aria-checked="true"] { background: var(--teal-dim); }
.tsw[aria-checked="true"]::after { transform: translateX(13px); background: var(--teal); }
.tsw:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* typology detail */
.tsec { margin-top: 0.85rem; }
.tsec h5 {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 0.35rem; font-weight: 500;
}
.tsec p { font-size: 0.8125rem; color: var(--text-2); line-height: 1.55; margin: 0 0 0.4rem; }
.tsec ul { margin: 0; padding: 0; list-style: none; }
.tsec li { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; padding: 0.2rem 0 0.2rem 0.9rem; position: relative; }
.tsec li::before { content: ""; position: absolute; left: 0; top: 0.72rem; width: 0.45rem; height: 1px; background: var(--line); }
.tsec.benign li::before { background: var(--teal); }
.tsec.benign li { color: var(--text-2); }
.tsec.evidence p { color: var(--text-3); font-style: italic; }
.tsec.statutory { border-left: 0; background: var(--amber-dim); padding: 0.6rem 0.7rem; border-radius: 3px; }
.tsec.statutory p { color: var(--text); margin: 0; }

/* indicator row */
.tind {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem; align-items: center;
  padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft);
}
.tind:last-child { border-bottom: 0; }
.tind.off { opacity: 0.45; }
.tind .ti-l { font-size: 0.8125rem; color: var(--text); line-height: 1.35; }
.tind .ti-l small { display: block; font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin-top: 0.15rem; }
.tthresh { display: flex; align-items: center; gap: 0.35rem; }
.tthresh input {
  width: 4.5rem; font-family: var(--mono); font-size: 0.6875rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0.2rem 0.35rem;
}
.tthresh input:focus { outline: none; border-color: var(--teal); }
.tthresh span { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); }

.str { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.12rem 0.35rem; border-radius: 2px; }
.str.weak { background: var(--line); color: var(--text-3); }
.str.moderate { background: var(--amber-dim); color: var(--amber); }
.str.strong { background: var(--red-dim); color: var(--red); }

.cat { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.12rem 0.35rem; border-radius: 2px; background: var(--panel-2); color: var(--text-3); border: 1px solid var(--line); }

/* side rail */
.trail { position: sticky; top: 1rem; }
.trail .card { margin-bottom: 1rem; }
.tstat { display: flex; justify-content: space-between; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.8125rem; }
.tstat:last-child { border-bottom: 0; }
.tstat .k { color: var(--text-2); }
.tstat .v { font-family: var(--mono); font-weight: 700; color: var(--text); }
.tactions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }

.tban { padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); }
.tban:last-child { border-bottom: 0; }
.tban .f { font-family: var(--mono); font-size: 0.6875rem; color: var(--red); }
.tban .r { font-size: 0.75rem; color: var(--text-3); line-height: 1.45; margin-top: 0.15rem; }

/* ==========================================================================
   Rule console - searchable tree in the left rail
   ========================================================================== */

.rc-search { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 4; }
.rc-search input {
  width: 100%; font-family: inherit; font-size: 0.8125rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0.45rem 0.6rem;
}
.rc-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,209,184,0.13); }
.rc-search input::placeholder { color: var(--text-3); }
.rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); }
.rc-meta button {
  appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-3); font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.05em;
  padding: 0.16rem 0.45rem; cursor: pointer;
}
.rc-meta button:hover { color: var(--text); border-color: var(--teal); }

/* compact tree inside the narrow rail */
.rtree { padding-bottom: 2rem; }
.rgrp { border-bottom: 1px solid var(--line); }
.rgrp-h {
  display: grid; grid-template-columns: 0.9rem 1fr auto auto; gap: 0.45rem;
  align-items: center; padding: 0.5rem 0.9rem; cursor: pointer; user-select: none;
  background: var(--panel-2);
}
.rgrp-h:hover { filter: brightness(1.08); }
.rgrp.sub > .rgrp-h { background: transparent; padding-left: 1.5rem; }
.rcar {
  font-family: var(--mono); font-size: 0.75rem; color: var(--teal);
  transition: transform 0.15s; display: inline-block; line-height: 1;
}
.rgrp-h:hover .rcar { color: var(--text); }
.rgrp.open > .rgrp-h .rcar { transform: rotate(90deg); }
.rgrp-n { font-size: 0.75rem; color: var(--text); line-height: 1.3; }
.rgrp.sub .rgrp-n { font-size: 0.6875rem; color: var(--text-2); }
.rgrp-c { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); white-space: nowrap; }
.rgrp-b { display: none; }
.rgrp.open > .rgrp-b { display: block; }

.tsw.sm { width: 24px; height: 14px; border-radius: 7px; }
.tsw.sm::after { width: 10px; height: 10px; top: 2px; left: 2px; }
.tsw.sm[aria-checked="true"]::after { transform: translateX(10px); }

.rule-item.tree { padding: 0.5rem 0.9rem 0.5rem 2.1rem; display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: start; }
.rule-item.tree.off { opacity: 0.45; }
.rule-item.tree .ri-id { font-size: 0.5625rem; }
.rule-item.tree .ri-t { font-size: 0.75rem; }
.rule-item.tree .ri-m { margin-top: 0.3rem; gap: 0.25rem; }
.rule-item.tree .ri-m .tag { font-size: 0.5rem; padding: 0.08rem 0.28rem; }

mark.hit { background: var(--amber-dim); color: var(--amber); border-radius: 2px; padding: 0 1px; }

.rc-empty { padding: 1.25rem 0.9rem; font-size: 0.75rem; color: var(--text-3); line-height: 1.5; }

/* Scope control.
   Three states that must be distinguishable at a glance, so each gets its own treatment rather
   than a shared style at different opacities: pale-on-pale reads as broken, not as disabled. */
.scope { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.scope button {
  appearance: none; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em;
  border-radius: 3px; padding: 0.28rem 0.6rem; cursor: pointer; transition: all 0.12s;
  border: 1.5px solid var(--line); background: transparent; color: var(--text-2);
}
/* In scope and selected - solid, high contrast, unmistakably on. */
.scope button[aria-pressed="true"] {
  background: var(--teal); border-color: var(--teal); color: var(--bg); font-weight: 600;
}
:root[data-theme="light"] .scope button[aria-pressed="true"],
:root:not([data-theme="dark"]) .scope button[aria-pressed="true"] { color: #ffffff; }
/* In scope, deselected - outlined and clearly clickable. */
.scope button[aria-pressed="false"]:not(:disabled) {
  border-color: var(--text-3); color: var(--text-2); border-style: solid;
}
.scope button:not(:disabled):hover { border-color: var(--teal); color: var(--teal); }
.scope button[aria-pressed="true"]:hover { filter: brightness(1.08); color: var(--bg); }
:root[data-theme="light"] .scope button[aria-pressed="true"]:hover,
:root:not([data-theme="dark"]) .scope button[aria-pressed="true"]:hover { color: #ffffff; }
/* Outside the rule's shipped scope - dashed and struck through, not faded away. */
.scope button:disabled {
  border-style: dashed; border-color: var(--line); color: var(--text-3);
  text-decoration: line-through; cursor: not-allowed; background: transparent;
}
.scope-key { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin-top: 0.5rem; letter-spacing: 0.03em; }

/* --- composite index, compact ------------------------------------------- */

.ix-top { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ix-num { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ix-of { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); }

/* One bar. Segment width = weight, filled portion = points earned, hollow = points still
   available. Reads in one glance: where is the bar hollow, and how wide is that segment. */
.ix-bar { display: flex; gap: 2px; height: 26px; margin-bottom: 0.2rem; }
.ix-seg { position: relative; background: var(--line-soft); border-radius: 2px; overflow: hidden; cursor: help; }
.ix-seg i { position: absolute; inset: 0 auto 0 0; background: var(--teal); border-radius: 2px 0 0 2px; }
.ix-seg.warn i { background: var(--amber); }
.ix-seg.bad i { background: var(--red); }
.ix-seg b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.5625rem; color: var(--text); font-weight: 400; z-index: 1;
}
.ix-scale { display: flex; gap: 2px; font-family: var(--mono); font-size: 0.5rem; color: var(--text-3); margin-bottom: 0.9rem; }
.ix-scale span { text-align: center; overflow: hidden; white-space: nowrap; }

table.ix-t { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
table.ix-t th, table.ix-t td { padding: 0.32rem 0.4rem; text-align: right; border-bottom: 1px solid var(--line-soft); }
table.ix-t th:first-child, table.ix-t td:first-child { text-align: left; padding-left: 0; }
table.ix-t thead th {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500; border-bottom: 1px solid var(--line);
}
table.ix-t td { font-family: var(--mono); color: var(--text-2); }
table.ix-t td:first-child { font-family: var(--sans); color: var(--text); }
table.ix-t tr:last-child td { border-bottom: 0; }
table.ix-t td.gap { color: var(--red); font-weight: 700; }
table.ix-t tr.lead td { background: rgba(255,107,82,0.07); }

/* --- detector funnel: nested subsets, not a stack ------------------------ */

.fnl { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0,1fr) 3.2rem 3rem; gap: 0.5rem 0.6rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); }
.fnl:last-child { border-bottom: 0; }
.fnl .f-n { font-family: var(--mono); font-size: 0.6875rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnl .f-n small { display: block; font-size: 0.5625rem; color: var(--text-3); }
/* Nested, not stacked: each layer starts at the left edge and is a subset of the one behind it. */
.f-track { position: relative; height: 14px; background: var(--line-soft); border-radius: 3px; }
.f-track i { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 3px; }
.f-track .l1 { background: var(--s1); opacity: 0.35; }
.f-track .l2 { background: var(--s1); opacity: 0.7; }
.f-track .l3 { background: var(--s3); }
.fnl .f-p { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-align: right; }
.fnl .f-v { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); text-align: right; }
.f-key { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.6rem; font-size: 0.625rem; color: var(--text-3); font-family: var(--mono); }
.f-key span { display: inline-flex; align-items: center; gap: 0.3rem; }
.f-key i { width: 10px; height: 10px; border-radius: 2px; display: block; }

/* keep the trend chart from ballooning when a card is wide */
.chart.compact { max-height: 190px; }

/* --- claim type selector + document strip -------------------------------- */

.ctsel { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
.ctsel label {
  display: block; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 0.4rem;
}
.ctsel select {
  width: 100%; font-family: inherit; font-size: 0.8125rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.6rem;
}
.ctsel select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,209,184,0.13); }
.ctsel .ct-blurb { font-size: 0.75rem; color: var(--text-3); line-height: 1.5; margin: 0.6rem 0 0; }
.ctsel .ct-meta { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin-top: 0.5rem; letter-spacing: 0.04em; }

/* document strip across the top of the stage */
.dstrip {
  display: flex; gap: 0.4rem; padding: 0.6rem 1.5rem; overflow-x: auto;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 6;
}
.dtab {
  appearance: none; flex: none; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  padding: 0.45rem 0.7rem; font-family: inherit; color: var(--text-2); min-width: 9.5rem;
  transition: border-color 0.12s, color 0.12s;
}
.dtab:hover { color: var(--text); border-color: var(--text-3); }
.dtab[aria-selected="true"] { border-color: var(--teal); color: var(--text); background: var(--panel-2); }
.dtab .d-t { font-size: 0.75rem; line-height: 1.25; display: block; }
.dtab .d-i { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); display: block; margin-top: 0.2rem; }
.dtab .d-b { display: flex; gap: 0.25rem; margin-top: 0.3rem; align-items: center; }
.dtab .d-b i {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.05em; font-style: normal;
  padding: 0.05rem 0.25rem; border-radius: 2px; background: var(--line); color: var(--text-3);
}
.dtab .d-b i.focus { background: var(--teal-dim); color: var(--teal); }
.dtab .d-b i.hand { background: var(--amber-dim); color: var(--amber); }

/* --- evidence fidelity: redaction, handwriting, stamps ------------------- */

/* Direct identifiers are masked on the facsimile because the engine never receives them.
   The category stays visible: a black bar that hides WHAT was hidden is not a disclosure,
   it is just a black bar, and a claimant asking what you hold deserves the category. */
.rdct {
  display: inline-block;
  background: #17191d;
  color: #cdd2d9;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08em 0.4em;
  border-radius: 2px;
  vertical-align: baseline;
  cursor: help;
}
.rdct::before { content: "\25AC\25AC "; letter-spacing: -0.1em; opacity: 0.55; }

/* Handwriting on a claim document is evidence in its own right - an amended restriction
   initialled in the margin is the thing an assessor most needs to see, and the thing OCR
   most often loses. */
.hw {
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Bradley Hand", cursive;
  color: #1c3f8f;
  font-size: 1.06em;
  letter-spacing: 0.01em;
}
.p-hand {
  margin: 0.5rem 0 0.9rem;
  padding: 0.4rem 0 0.4rem 0.7rem;
  border-left: 2px solid #c8ccd3;
}
.p-hand .hw { font-size: 1.15em; line-height: 1.5; display: block; }
.p-hand .hmeta {
  font-family: var(--mono); font-size: 0.5625rem; color: #8a9099;
  letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.3rem;
}

/* Received / triage stamps, rotated the way a rubber stamp actually lands. */
.p-stamp {
  display: inline-block;
  border: 2px solid #9a3535;
  color: #9a3535;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  transform: rotate(-2.2deg);
  opacity: 0.82;
  margin: 0 0 0.7rem;
  line-height: 1.35;
}
.p-stamp b { display: block; font-weight: 700; }

/* Clinical observations and itemised tables. */
.p-obs { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 1px; background: #d8dbe0; border: 1px solid #d8dbe0; margin: 0.5rem 0 0.9rem; }
.p-obs > div { background: #fff; padding: 0.35rem 0.5rem; }
.p-obs .ok { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase; color: #8a9099; }
.p-obs .ov { font-size: 0.8125rem; margin-top: 0.1rem; }

.p-items { margin: 0.4rem 0 0.9rem; font-size: 0.75rem; }
.p-items .ih, .p-items .ir { display: grid; grid-template-columns: 5.5rem minmax(0,1fr) 3.2rem 4.2rem; gap: 0.5rem; padding: 0.28rem 0; }
.p-items .ih { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase; color: #8a9099; border-bottom: 1px solid #d8dbe0; }
.p-items .ir { border-bottom: 1px solid #eceef1; }
.p-items .ir:last-child { border-bottom: 0; }
.p-items .num { font-family: var(--mono); font-size: 0.6875rem; }
.p-items .amt { text-align: right; font-variant-numeric: tabular-nums; }

/* Masked-data legend above the stage. */
.masknote {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--line);
  font-size: 0.75rem; color: var(--text-3); background: var(--bg);
}
.masknote .mn-c {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--line); color: var(--text-2); padding: 0.1rem 0.35rem; border-radius: 2px;
}

/* --- evidence graph ------------------------------------------------------ */

.gwrap {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr) 21rem;
  height: calc(100vh - var(--topbar-h, 49px));
  overflow: hidden;
}
.grail, .gside { overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); }
.gside { border-right: 0; border-left: 1px solid var(--line); }

.gstage { position: relative; background: var(--bg); overflow: hidden; }
.gstage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.gstage canvas:active { cursor: grabbing; }
.gstage canvas:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* Stats strip, floating over the scene so the canvas keeps the full frame. */
.gstats {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; gap: 1px; flex-wrap: wrap;
  background: var(--line); border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.gs { flex: 1 1 6.5rem; background: color-mix(in srgb, var(--panel) 88%, transparent); padding: 0.5rem 0.7rem; }
.gs b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gs span { display: block; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 0.15rem; }
.gs.good b { color: var(--teal); }
.gs.bad b { color: var(--red); }
.gs.muted b { color: var(--text-3); }

.ghint {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.55rem 1rem; text-align: center;
  font-size: 0.75rem; color: var(--text-3); line-height: 1.5;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

/* Pipeline stages: a numbered ladder, because this genuinely is a sequence. */
.gstages { padding: 0.4rem 0.6rem 0.8rem; }
.gstage-b {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 0.5rem 0.4rem; border-radius: 3px; font-family: inherit; color: var(--text-3);
}
.gstage-b:hover { background: var(--panel-2); }
.gstage-b .sn {
  font-family: var(--mono); font-size: 0.625rem; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px;
}
.gstage-b.on { color: var(--text-2); }
.gstage-b.on .sn { border-color: var(--teal); color: var(--teal); }
.gstage-b.cur { background: var(--panel-2); color: var(--text); }
.gstage-b.cur .sn { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.gstage-b .st { display: block; font-size: 0.8125rem; }
.gstage-b .sd { display: block; font-size: 0.6875rem; color: var(--text-3); line-height: 1.45; margin-top: 0.15rem; }
.gstage-b:not(.cur) .sd { display: none; }

/* Layer legend. */
.glayers { padding: 0 1rem 1rem; }
.glayer { display: grid; grid-template-columns: 0.5rem 1fr auto; gap: 0.5rem 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.glayer:last-child { border-bottom: 0; }
.glayer.off { opacity: 0.32; }
.glayer .dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; }
.glayer .gl-t { font-size: 0.8125rem; color: var(--text-2); }
.glayer .gl-n { font-family: var(--mono); font-size: 0.6875rem; color: var(--text); font-variant-numeric: tabular-nums; }
.glayer .gl-b { grid-column: 2 / -1; font-size: 0.6875rem; color: var(--text-3); line-height: 1.45; }

/* Corroboration list - the closest thing this product has to a score, and it decomposes. */
.gscores { padding: 0 0.6rem 1.2rem; }
.gscore {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; padding: 0.5rem 0.4rem; border-radius: 3px;
}
.gscore:hover, .gscore.on { background: var(--panel-2); }
.gscore .sc-t { display: block; font-size: 0.8125rem; color: var(--text-2); }
.gscore .sc-bar { display: block; height: 3px; background: var(--line); border-radius: 2px; margin: 0.35rem 0 0.25rem; overflow: hidden; }
.gscore .sc-bar i { display: block; height: 100%; background: var(--text-3); }
.gscore.good .sc-bar i { background: var(--teal); }
.gscore.bad .sc-bar i { background: var(--red); }
.gscore .sc-m { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.gscore.good .sc-m { color: var(--teal); }
.gscore.bad .sc-m { color: var(--red); }

/* Inspector. */
.ginspect { padding: 0.6rem 1rem 1.2rem; }
.gi-head { display: flex; align-items: center; gap: 0.5rem; }
.gi-kind { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase; }
.gbadge { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.35rem; border-radius: 2px; background: var(--line); color: var(--text-2); }
.gbadge.good { background: var(--teal-dim); color: var(--teal); }
.gbadge.bad { background: var(--red-dim); color: var(--red); }
.gi-title { font-size: 0.9375rem; margin: 0.4rem 0 0.2rem; line-height: 1.35; }
.gi-sub { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); margin: 0 0 0.9rem; word-break: break-all; }
.gi-rows { margin: 0; font-size: 0.75rem; }
.gi-rows dt { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin-top: 0.7rem; }
.gi-rows dd { margin: 0.15rem 0 0; color: var(--text-2); line-height: 1.55; word-break: break-word; }

.gempty { font-size: 0.8125rem; color: var(--text-3); line-height: 1.6; margin: 0; padding: 0.4rem 0; }
.gnote { padding: 0.4rem 1rem 1.5rem; }
.gnote p { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; margin: 0 0 0.7rem; }
.gnote code { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-2); }

@media (max-width: 1180px) {
  .gwrap { grid-template-columns: 16rem minmax(0, 1fr); }
  .gside { display: none; }
}
@media (max-width: 860px) {
  .gwrap { grid-template-columns: 1fr; height: auto; }
  .grail { border-right: 0; border-bottom: 1px solid var(--line); }
  .gstage { height: 62vh; }
}

/* --- entitlement --------------------------------------------------------- */

.ewrap { display: grid; grid-template-columns: 19rem minmax(0, 1fr) 20rem; min-height: calc(100vh - 49px); }
.erail, .eside { border-right: 1px solid var(--line); background: var(--panel); }
.eside { border-right: 0; border-left: 1px solid var(--line); }
.emain { padding-bottom: 3rem; min-width: 0; }

.e-chartwrap { padding: 0.8rem 1.25rem 0.4rem; }
.e-chart { display: block; width: 100%; height: auto; overflow: visible; }

/* Entitlement is the reference series and reads as a filled step; paid is the measured
   series and reads as bars. Same axis, no second scale. */
.e-due-area { fill: var(--teal); opacity: 0.09; }
.e-due-line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.e-paid { fill: var(--text-3); opacity: 0.55; }
.e-short { fill: var(--red); opacity: 0.3; }
.e-tick line { stroke: var(--line); stroke-width: 1; }
.e-tick text { fill: var(--text-3); font-family: var(--mono); font-size: 9px; text-anchor: end; }
.e-xl { fill: var(--text-3); font-family: var(--mono); font-size: 9px; text-anchor: middle; }
.e-step line { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.e-step text { fill: var(--amber); font-family: var(--mono); font-size: 8.5px; }
.e-step text.wk { fill: var(--text-3); }

.e-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; padding: 0.2rem 1.25rem 0.6rem; font-size: 0.6875rem; color: var(--text-3); }
.e-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.e-legend i { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; }
.e-legend .k-due { background: var(--teal); }
.e-legend .k-paid { background: var(--text-3); }
.e-legend .k-short { background: var(--red); opacity: 0.5; }
.e-legend .k-step { background: var(--amber); }

/* Period ladder. */
.e-periods { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.e-period { display: block; width: 100%; text-align: left; background: var(--panel); border: 0; cursor: pointer; font-family: inherit; padding: 0.6rem 1.25rem; }
.e-period:hover { background: var(--panel-2); }
.e-period.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--teal); }
.epd-h { display: flex; align-items: baseline; gap: 0.7rem; }
.epd-w { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); min-width: 5.5rem; }
.epd-p { font-family: var(--mono); font-size: 0.6875rem; color: var(--teal); min-width: 3.5rem; }
.epd-a { margin-left: auto; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.epd-a small { font-size: 0.625rem; color: var(--text-3); margin-left: 0.15rem; }
.epd-f { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); margin-top: 0.25rem; }
.epd-v { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.3rem; color: var(--text-3); }
.epd-v.under { color: var(--red); }
.epd-v.over { color: var(--amber); }
.epd-v.ok { color: var(--teal); }
.e-period.gate .epd-p { color: var(--amber); }

/* The working. */
.e-work { padding: 0.8rem 1.25rem 1.5rem; }
.ew-prov { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.ew-quote { font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; margin: 0.4rem 0 0.9rem; max-width: 68ch; border-left: 2px solid var(--line); padding-left: 0.8rem; }
.ew-formula { font-family: var(--mono); font-size: 0.8125rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 0.55rem 0.75rem; display: inline-block; }
.ew-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 1.2rem; margin: 0.9rem 0 0; }
.ew-inputs dt { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ew-inputs dd { margin: 0.1rem 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ew-out { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.ew-out span { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.ew-out b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ew-notes { margin: 0.9rem 0 0; padding-left: 1rem; }
.ew-notes li { font-size: 0.75rem; color: var(--text-3); line-height: 1.55; margin-bottom: 0.35rem; max-width: 70ch; }

/* Basis and steps ahead. */
.e-basis { padding: 0.4rem 1rem 1.2rem; }
.eb-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.8125rem; }
.eb-row span { color: var(--text-3); }
.eb-row b { font-variant-numeric: tabular-nums; }
.eb-note { font-size: 0.6875rem; color: var(--text-3); line-height: 1.55; margin: 0.7rem 0 0; }
.eb-inst { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin: 0.5rem 0 0; }

.e-ahead { padding: 0.6rem 1rem; border-bottom: 1px solid var(--line-soft); }
.ea-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ea-h span { font-size: 0.8125rem; }
.ea-h b { font-family: var(--mono); font-size: 0.75rem; color: var(--amber); }
.ea-e { font-size: 0.6875rem; color: var(--text-3); line-height: 1.5; margin: 0.25rem 0 0; }
.ea-a { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin: 0.4rem 0 0; }
.ea-a b { color: var(--amber); }
.ea-w { font-size: 0.6875rem; color: var(--red); line-height: 1.5; margin: 0.4rem 0 0; }

/* Reconciliation. */
.e-net { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
.en-l { display: block; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.e-net b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; margin: 0.15rem 0; }
.e-net.under b { color: var(--red); }
.e-net.over b { color: var(--amber); }
.e-net.level b { color: var(--teal); }
.en-s { font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); }

.e-pos { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-soft); }
.ep-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.ep-k { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.35rem; border-radius: 2px; background: var(--line); color: var(--text-2); }
.e-pos.underpaid .ep-k, .e-pos.not-paid .ep-k { background: var(--red-dim); color: var(--red); }
.e-pos.overpaid .ep-k { background: var(--amber-dim); color: var(--amber); }
.ep-h b { font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.ep-s { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; margin: 0.4rem 0 0; }
.ep-w { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin: 0.3rem 0 0; }
.ep-a { font-size: 0.6875rem; color: var(--text-3); line-height: 1.55; margin: 0.4rem 0 0; }

.e-limits { padding: 0.4rem 1rem 2rem; }
.e-limits ul { margin: 0; padding-left: 1rem; }
.e-limits li { font-size: 0.6875rem; color: var(--text-3); line-height: 1.55; margin-bottom: 0.6rem; }
.e-empty { font-size: 0.8125rem; color: var(--text-3); padding: 0.8rem 1rem; margin: 0; line-height: 1.6; }
.e-refuse { padding: 1.25rem; border: 1px solid var(--red-dim); background: var(--red-dim); border-radius: 3px; margin: 1rem 1.25rem; }
.e-refuse b { color: var(--red); }
.e-refuse p { font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; margin: 0.4rem 0 0; }

@media (max-width: 1200px) { .ewrap { grid-template-columns: 17rem minmax(0, 1fr); } .eside { display: none; } }
@media (max-width: 820px) { .ewrap { grid-template-columns: 1fr; } .erail { border-right: 0; border-bottom: 1px solid var(--line); } }

/* --- decision sufficiency ------------------------------------------------ */

.dwrap { display: grid; grid-template-columns: 21rem minmax(0, 1fr) 19rem; min-height: calc(100vh - 49px); }
.drail, .dside { border-right: 1px solid var(--line); background: var(--panel); }
.dside { border-right: 0; border-left: 1px solid var(--line); }
.dmain { min-width: 0; padding-bottom: 3rem; }

.d-hint { font-size: 0.6875rem; color: var(--text-3); line-height: 1.55; padding: 0 1rem 0.6rem; margin: 0; }
.d-file { padding: 0 0.6rem 2rem; }
.df-group { margin-bottom: 0.9rem; }
.df-group h4 {
  font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-3); margin: 0.6rem 0.4rem 0.35rem; font-weight: 500;
}
.df-item {
  display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; align-items: start;
  padding: 0.45rem 0.4rem; border-radius: 3px; cursor: pointer;
}
.df-item:hover { background: var(--panel-2); }
.df-item input { margin-top: 0.15rem; accent-color: var(--teal); }
.df-t { display: block; font-size: 0.75rem; color: var(--text-3); line-height: 1.4; }
.df-item.on .df-t { color: var(--text-2); }
.df-t small { display: block; font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin-top: 0.15rem; }
.df-h { display: block; font-size: 0.625rem; color: var(--amber); line-height: 1.45; margin-top: 0.25rem; }

/* Position banner. Three states, each with a word - never a percentage, which is the point. */
.dp { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); }
.dp-k {
  display: inline-block; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 0.18rem 0.45rem; border-radius: 2px;
}
.dp.not-supported .dp-k { background: var(--red-dim); color: var(--red); }
.dp.supported-with-gaps .dp-k { background: var(--amber-dim); color: var(--amber); }
.dp.supported .dp-k { background: var(--teal-dim); color: var(--teal); }
.dp-s { font-size: 1rem; line-height: 1.5; margin: 0.6rem 0 0; max-width: 70ch; }
.dp-stakes { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; margin: 0.7rem 0 0; max-width: 70ch; }
.dp-stakes b { color: var(--text-2); font-weight: 500; }

/* Requirement rows. */
.d-reqs { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.dr { background: var(--panel); padding: 0.75rem 1.5rem; }
.dr-h { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dr-w {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.1rem 0.3rem; border-radius: 2px; background: var(--line); color: var(--text-3);
}
.dr.w-mandatory .dr-w { background: var(--panel-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.dr-e { font-size: 0.875rem; color: var(--text); }
.dr-s {
  margin-left: auto; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.12rem 0.4rem; border-radius: 2px;
}
.dr.present .dr-s { background: var(--teal-dim); color: var(--teal); }
.dr.stale .dr-s, .dr.wrong-source .dr-s { background: var(--amber-dim); color: var(--amber); }
.dr.missing .dr-s, .dr.unresolved .dr-s { background: var(--red-dim); color: var(--red); }
.dr.present { opacity: 0.62; }
.dr.present:hover { opacity: 1; }
.dr-d { font-size: 0.8125rem; color: var(--text-2); line-height: 1.55; margin: 0.35rem 0 0; max-width: 74ch; }
.dr-c { margin: 0.45rem 0 0; padding-left: 1rem; }
.dr-c li { font-size: 0.75rem; color: var(--red); line-height: 1.5; margin-bottom: 0.2rem; }
.dr-c em { color: var(--text-3); font-style: normal; font-family: var(--mono); font-size: 0.625rem; }
.dr-y { font-size: 0.75rem; color: var(--text-3); line-height: 1.55; margin: 0.45rem 0 0; max-width: 74ch; }
.dr-cite { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin: 0.35rem 0 0; }

/* To obtain. */
.do-item { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-soft); }
.do-h { display: flex; align-items: baseline; gap: 0.5rem; }
.do-h span {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3);
}
.do-item.mandatory .do-h span { color: var(--red); }
.do-h b { font-size: 0.8125rem; font-weight: 500; }
.do-item p { font-size: 0.6875rem; color: var(--text-3); line-height: 1.55; margin: 0.3rem 0 0; }

.d-note { padding: 0.4rem 1rem 2rem; }
.d-note p { font-size: 0.6875rem; color: var(--text-3); line-height: 1.6; margin: 0 0 0.6rem; }
.d-note code { font-family: var(--mono); font-size: 0.625rem; color: var(--text-2); }
.dn-inv { border-top: 1px solid var(--line); padding-top: 0.6rem; }

@media (max-width: 1200px) { .dwrap { grid-template-columns: 19rem minmax(0, 1fr); } .dside { display: none; } }
@media (max-width: 820px) { .dwrap { grid-template-columns: 1fr; } .drail { border-right: 0; border-bottom: 1px solid var(--line); } }

/* --- cross-engine interactions ------------------------------------------ */

.railhead small { display: block; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0; text-transform: none; color: var(--text-3); margin-top: 0.15rem; font-weight: 400; }

.d-composite { border-bottom: 1px solid var(--line); }
.dx-list { display: grid; gap: 1px; background: var(--line); }
.dx { background: var(--panel); padding: 0.85rem 1.5rem; }
.dx-h { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dx-sev {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.12rem 0.38rem; border-radius: 2px; background: var(--line); color: var(--text-3);
}
.dx.critical .dx-sev { background: var(--red-dim); color: var(--red); }
.dx.high .dx-sev { background: var(--amber-dim); color: var(--amber); }
.dx-l { font-size: 0.9375rem; color: var(--text); }
.dx-d { font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; margin: 0.4rem 0 0; max-width: 76ch; }
.dx-a { font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; margin: 0.5rem 0 0; max-width: 76ch; }
.dx-a b { color: var(--teal); font-weight: 500; }
.dx-r { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; margin: 0.5rem 0 0; max-width: 76ch; }
.dx-m { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); margin: 0.5rem 0 0; }
.dx-m code { color: var(--text-2); }
.dx-empty { padding: 0.9rem 1.5rem; }
.dx-empty p { font-size: 0.8125rem; color: var(--text-3); margin: 0; line-height: 1.6; }
.dx-cov { font-family: var(--mono); font-size: 0.5625rem; color: var(--text-3); padding: 0.55rem 1.5rem; margin: 0; line-height: 1.6; }