/* ═══════════════════════════════════════════════════════════════════════
   Financial-Statements wizard — Tasks page + 5-step wizard + co-pilot
   drawer. Layered on top of tokens (already loaded via site.css), the
   shared dashboard shell, and the existing onboarding visual language
   (paper card, gold accent, Fraunces serif, tabular nums, parens for
   negatives, dd-MM-yyyy dates).
   Source-of-truth lives at prototypes/financial-statements-wizard-tb-mvp/
   styles.css; copy back into that prototype if you tweak this file.
   ═══════════════════════════════════════════════════════════════════════ */

html {
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  text-align: left;
}
ul, ol, dl { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }
input[type="file"] { font-size: var(--fs-body-sm); }

/* ── shell ─────────────────────────────────────────────────────────── */
/* A thin sticky topbar carries the brand. Below it, Tasks lives in a
   single column; the wizard pairs a left rail (with a back-to-tasks
   link inside) against the stage. */
.topbar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center;
  padding: 12px clamp(20px, 4vw, 56px);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.brand-block {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 500; font-size: 18px;
  color: var(--navy);
}
.brand-mark { width: 16px; height: 16px; border-radius: 4px; background: var(--gold); }
.brand-name { letter-spacing: -0.005em; }
.brand-dot  { color: var(--gold); margin: 0 2px; }

.stage { padding: 32px clamp(20px, 4vw, 56px); max-width: 1180px; margin: 0 auto; }

/* ── form primitives ───────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.field input, .field select {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--paper);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.field.readonly .field-value {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}
.hint { color: var(--muted); font-size: var(--fs-meta); margin: 4px 0 0; }

/* ── buttons ───────────────────────────────────────────────────────── */
.primary-cta {
  background: var(--navy); color: var(--paper);
  border-radius: 8px; padding: 10px 18px; font-weight: 600;
  transition: background 120ms ease, transform 80ms ease;
}
.primary-cta:hover  { background: var(--navy-soft); }
.primary-cta:active { transform: translateY(1px); }
.primary-cta:disabled { opacity: 0.6; cursor: progress; }
.ghost-cta {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 9px 16px;
  background: var(--paper);
  color: var(--navy);
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease;
}
.ghost-cta:hover { background: var(--bg-soft); border-color: var(--gold); }
.ghost-cta.wand {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ghost-cta.wand .wand-glyph { color: var(--gold); }

/* ── tasks page ────────────────────────────────────────────────────── */
.tasks-page { max-width: 1100px; margin: 0 auto; }
.tasks-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 24px;
}
.tasks-eyebrow {
  margin: 0 0 4px; color: var(--muted);
  font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.18em;
}
.tasks-header h1 {
  font-family: var(--serif); font-weight: 500; margin: 0;
  font-size: 34px; color: var(--navy); letter-spacing: -0.01em;
}
.tasks-table {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}

/* 5-column legacy shape — kept for any old code paths. */
.tasks-thead {
  display: grid;
  grid-template-columns: 2.2fr 2fr 1fr 1fr 1.4fr;
  gap: 16px; padding: 12px 20px;
  background: var(--bg-soft);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.tasks-row {
  display: grid;
  grid-template-columns: 2.2fr 2fr 1fr 1fr 1.4fr;
  gap: 16px; padding: 14px 20px; width: 100%;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  cursor: pointer;
  transition: background 120ms ease;
}
.tasks-row:hover { background: var(--bg-soft); }

/* 6-column shape — adds Actions column. Refactored TaskList uses these. */
.tasks-thead-6 {
  grid-template-columns: 2.2fr 1.8fr 1fr 1fr 1.2fr 108px;
}
.tasks-row-6 {
  grid-template-columns: 2.2fr 1.8fr 1fr 1fr 1.2fr 108px;
  align-items: center;
  cursor: default;
}
.tasks-row-6:hover { background: var(--bg-soft); }

.tasks-client  { font-weight: 500; color: var(--navy); }
.tasks-period,
.tasks-package,
.tasks-started { color: var(--muted); font-variant-numeric: tabular-nums; }
.tasks-status {
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
/* Finished, running, awaiting, faulted */
.tasks-status.status-finished  { color: var(--success); }
.tasks-status.status-running   { color: var(--info, #3b72c8); }
.tasks-status.status-awaiting  { color: var(--warning); }
.tasks-status.status-faulted   { color: var(--danger); }
/* Legacy individual entries (still emitted by StatusClass for old instances) */
.tasks-status.status-aibalancinginprogress  { color: var(--info, #3b72c8); }
.tasks-status.status-harmonisationawaiting,
.tasks-status.status-journalcorrectionawaiting { color: var(--warning); }

/* Resume / View action buttons */
.tasks-action { display: flex; justify-content: flex-end; }
.tasks-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1, 8px);
  background: var(--paper);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.tasks-action-resume {
  border-color: var(--navy);
  color: var(--navy);
}
.tasks-action-resume:hover {
  background: var(--navy);
  color: var(--paper);
}
.tasks-action-view {
  color: var(--muted);
}
.tasks-action-view:hover {
  border-color: var(--muted-2);
  background: var(--bg-soft);
  color: var(--navy);
}

.tasks-empty {
  text-align: center; color: var(--muted);
  padding: 56px 0; font-size: var(--fs-body-sm);
}

/* ── wizard shell ──────────────────────────────────────────────────── */
.wizard-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.step-rail {
  border-right: 1px solid var(--hairline);
  padding-right: 24px;
  display: flex; flex-direction: column; gap: 14px;
  align-self: start;
  position: sticky; top: 32px;
}
.rail-head {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.rail-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--navy);
}
.rail-back:hover { color: var(--navy-soft); }
.rail-back .back-icon { color: var(--charcoal); display: inline-flex; }
.rail-steps {
  display: flex; flex-direction: column; gap: 4px;
}
.rail-label { display: inline-block; }
.rail-step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--muted); font-size: var(--fs-body-sm);
  width: 100%;
  transition: background 120ms ease, color 120ms ease;
}
.rail-step.is-done   { color: var(--charcoal); }
.rail-step.is-active { color: var(--navy); font-weight: 600; }
.rail-step.is-upcoming { color: var(--muted-2); cursor: default; }
.rail-step:not(.is-upcoming):hover { background: var(--bg-soft); }
.rail-num {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--hairline);
  font-size: var(--fs-meta); background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.rail-step.is-active .rail-num {
  border-color: var(--navy); background: var(--navy); color: var(--paper);
}
.rail-step.is-done .rail-num {
  border-color: var(--success); background: var(--success); color: var(--paper);
}

/* Page-main wraps the right column. The sidebar is sticky (rail), and
   `.wizard-stage-wrap` lets long step content scroll inside the viewport
   so the sidebar + brand stay pinned. Use `overflow-y: auto` rather than
   a fixed page height so screens taller than the content don't grow a
   redundant inner scrollbar. */
.wizard-stage-wrap {
  padding: 8px 0;
  min-width: 0;
  display: flex; flex-direction: column;
}
.wizard-stage {
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0;
}

/* Header row pattern lifted from the prototype: an eyebrow / actions row
   on a single hairline-divided row sits ABOVE `.wizard-stage`. Steps
   render `.bar-row.split` for the eyebrow + (optional) header actions,
   followed by `.bar-divider`. Keeps the shell consistent across pages. */
.bar-row {
  display: flex; align-items: center;
  min-height: 38px;
}
.bar-row.split { justify-content: space-between; gap: 16px; }
.bar-row.right { justify-content: flex-end; }
.bar-divider {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 14px 0 18px;
  width: 100%;
}

/* step header */
.step-header { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-eyebrow {
  margin: 0; color: var(--muted);
  font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.18em;
}
.step-header h2 {
  font-family: var(--serif); font-weight: 500; margin: 2px 0;
  font-size: 28px; color: var(--navy); letter-spacing: -0.01em;
}
.step-header .step-sub { margin: 0; color: var(--muted); font-size: var(--fs-body-sm); }
.step-header-flush { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 16px; }
.step-header-flush > div:first-child { flex: 1; min-width: 0; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.step-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
/* `.period-grid` lives next to its Step-1 sibling rules below. */
.step-footer {
  display: flex; gap: 12px; justify-content: flex-end;
  border-top: 1px solid var(--hairline); padding-top: 20px;
}
.step-footer.split { justify-content: space-between; align-items: center; gap: 16px; }
.step-footer-right { display: flex; align-items: center; gap: 16px; }
.step-footer-note  { color: var(--muted); font-size: var(--fs-body-sm); }
.step-error { color: var(--danger); margin: 0; min-height: 1.4em; }

/* ── typeahead (Step 1 client picker) ──────────────────────────────── */
.typeahead-results {
  position: relative; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--hairline); border-radius: 8px;
  margin-top: 4px; background: var(--paper);
}
.typeahead-results:empty { display: none; }
.typeahead-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background 100ms ease;
}
.typeahead-item:last-child { border-bottom: 0; }
.typeahead-item:hover { background: var(--gold-bg); }
.typeahead-name { color: var(--navy); font-weight: 500; }
.typeahead-meta { color: var(--muted); font-size: var(--fs-meta); }
.typeahead-empty {
  padding: 10px 12px; color: var(--muted); font-size: var(--fs-body-sm);
}

/* ── Step 1 — read-only facts grid + period overrides ──────────────── */
.readonly-grid {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 22px 26px;
}
.readonly-grid .field-value { font-weight: 500; }

.period-grid { grid-template-columns: repeat(2, minmax(0, 240px)); max-width: 520px; }

/* ── starting-from tiles (Step 1) ──────────────────────────────────── */
.starting-from { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.tb-tile {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 12px; padding: 16px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
}
.tb-tile.is-active {
  border-color: var(--gold);
  background: var(--gold-bg);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.tb-tile.is-disabled { opacity: 0.55; }
.tb-tile strong { color: var(--navy); }
.tb-tile span   { color: var(--muted); font-size: var(--fs-body-sm); }
.tb-tile-check {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* ── Step 2 — upload ───────────────────────────────────────────────── */
.tb-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px dashed var(--hairline);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  background: var(--bg-soft);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.tb-drop:hover { background: var(--paper); border-color: var(--gold); }
.tb-drop input[type="file"] { display: none; }
.tb-drop-icon { font-size: 28px; color: var(--gold); }
.tb-drop-title { font-weight: 500; color: var(--navy); }
.tb-drop-sub   { color: var(--muted); font-size: var(--fs-meta); }

.tb-summary {
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg-soft); border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tb-summary-empty { opacity: 0.6; }
.tb-summary-name { font-weight: 500; color: var(--navy); }
.tb-summary-meta { color: var(--muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.tb-advanced { border-top: 1px solid var(--hairline); padding-top: 12px; }
.tb-advanced summary { cursor: pointer; color: var(--muted); font-size: var(--fs-body-sm); padding: 4px 0; }

/* ── Step 3 — harmonisation ────────────────────────────────────────── */
/* Layout pattern lifted from prototypes/.../step3-harmonisation.html.
   The counters chip strip sits above the .harm-card; the card has its
   own max-height + overflow-y so a 60-100 row TB scrolls inside the
   card while the eyebrow/header/counters/footer stay anchored. */
.harm-counters { display: flex; gap: 8px; flex-wrap: wrap; }
.counter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.counter-chip strong { color: var(--navy); font-weight: 600; }
.counter-chip .mono  { font-family: var(--mono); }
.counter-chip.kind-good   { border-color: rgba(46, 139, 87, 0.35); background: rgba(46, 139, 87, 0.06); color: var(--success); }
.counter-chip.kind-warn   { border-color: rgba(199, 119, 0, 0.35); background: rgba(199, 119, 0, 0.06); color: var(--warning); }
.counter-chip.kind-good strong { color: var(--success); }
.counter-chip.kind-warn strong { color: var(--warning); }
/* Legacy aliases used by other Razor views; treat as synonyms of kind-good
   / neutral so older taxonomy keeps rendering until callers migrate. */
.counter-chip.kind-ok       { border-color: rgba(46, 139, 87, 0.30); background: rgba(46, 139, 87, 0.06); color: var(--success); }
.counter-chip.kind-resolved { border-color: rgba(46, 139, 87, 0.30); background: rgba(46, 139, 87, 0.06); color: var(--success); }
.counter-chip.kind-neutral  { background: var(--bg-soft); color: var(--muted); }

/* Harmonisation card — long TBs scroll inside the card while the
   eyebrow/header/counters/footer stay anchored. Sticky thead keeps
   column labels visible while the body scrolls. */
.harm-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 360px);
}
.harm-table {
  width: 100%;
  min-width: 920px;          /* below this the card scrolls horizontally */
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.harm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 12px 14px;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--hairline);
}
.harm-table thead th.right { text-align: right; }
.harm-table tbody td {
  padding: 12px 14px;
  font-size: var(--fs-body-sm);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  word-break: break-word;
}
.harm-table tbody tr:last-child td { border-bottom: 0; }
.harm-table tbody td.right { text-align: right; }
.harm-table tbody tr.is-unresolved { background: rgba(199, 119, 0, 0.05); }
.harm-table tbody tr.is-unresolved td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

.acc-no   { font-family: var(--mono); color: var(--muted); }
.acc-name { color: var(--navy); }
.mono     { font-family: var(--mono); font-size: var(--fs-mono); color: var(--charcoal); }

/* Confidence pill — AI's self-rated confidence per row. */
.conf-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-meta);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.conf-pill.kind-high { background: rgba(46, 139, 87, 0.10); color: var(--success); }
.conf-pill.kind-mid  { background: var(--gold-bg);          color: var(--warning); }
.conf-pill.kind-low  { background: rgba(184, 34, 53, 0.06); color: var(--danger);  }

/* Source-of-truth badge — colour-codes whether the row was decided by
   AI, a deterministic rule, the operator, or remains unresolved. */
.resolved-by {
  font-size: var(--fs-meta);
  color: var(--muted);
  font-weight: 500;
}
.resolved-by.kind-ai            { color: #335a8a; }
.resolved-by.kind-rule          { color: var(--charcoal); }
.resolved-by.kind-deterministic { color: var(--charcoal); }
.resolved-by.kind-user          { color: var(--gold); }
.resolved-by.kind-unres         { color: var(--warning); font-weight: 600; }
.resolved-by.kind-warn          { color: var(--warning); font-weight: 600; }
.resolved-by.kind-neutral       { color: var(--muted); }

/* Re-Assign dropdown — same skin as the review prototype. width:100%
   fills the column cell so the chevron sits at the column's right
   edge and long labels truncate cleanly. is-changed signals the
   operator has overridden the AI/rule pick. */
.reassign-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 6px 32px 6px 10px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8' fill='none' stroke='%231a3a6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6 10.5,1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
  color: var(--navy);
  font-size: var(--fs-body-sm);
  width: 100%;
  cursor: pointer;
}
.reassign-select:hover { border-color: var(--muted-2); }
.reassign-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.reassign-select.is-changed {
  border-color: var(--gold);
  background-color: var(--gold-bg);
  font-weight: 600;
}
.reassign-select.is-unresolved {
  border-color: var(--warning);
}

/* ── Step 4 — balancing ────────────────────────────────────────────── */
/* Layout mirrors prototypes/.../step4-balancing.html: a 4-tile TB summary
   strip above one of three status-card variants (kind-progress with
   spinner, kind-success with ✓ icon, kind-warn with ! icon), each
   carrying an .ai-feed activity ticker + .resume-meta dl. */
.harm-meta {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  margin-top: 12px;
}
.harm-meta dt { color: var(--muted); font-size: var(--fs-body-sm); }
.harm-meta dd { margin: 0; color: var(--navy); font-variant-numeric: tabular-nums; }

/* TB summary strip — Σ Dr / Σ Cr / Imbalance / Lines tiles. auto-fit
   collapses to fewer columns on narrow viewports without explicit
   media queries. */
.tb-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.summary-tile {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.summary-tile .summary-label {
  font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600;
}
.summary-tile .summary-value {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; color: var(--navy);
}
.summary-tile .summary-value.is-imbalance { color: var(--warning); }

/* Status card — one variant rendered per UserState. */
.status-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.status-card.kind-progress { background: var(--bg-soft); }
.status-card.kind-success  { border-color: var(--success); background: rgba(46, 139, 87, 0.04); }
.status-card.kind-warn     { border-color: var(--warning); background: rgba(199, 119, 0, 0.04); }
.status-head { display: flex; align-items: flex-start; gap: 14px; }
.status-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid var(--hairline);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
  flex-shrink: 0; margin-top: 4px;
}
.status-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0; margin-top: 2px;
  font-size: 13px; font-weight: 700;
}
.status-icon.kind-success { background: var(--success); color: var(--paper); }
.status-icon.kind-warn    { background: var(--warning); color: var(--paper); }
.status-card h3 {
  margin: 0;
  font-family: var(--serif); font-weight: 500; font-size: 19px;
  color: var(--navy);
}
.status-card p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-body-sm); }

/* AI activity feed — small live ticker beneath the spinner. */
.ai-feed {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}
.ai-feed-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  font-size: var(--fs-body-sm);
}
.ai-feed-time { font-family: var(--mono); color: var(--muted); font-size: var(--fs-mono); }
.ai-feed-text { color: var(--charcoal); }
.ai-feed-row.is-current .ai-feed-text { color: var(--navy); font-weight: 500; }

/* Resume-url block — same look as workflow-status response. */
.resume-meta {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 16px;
  font-size: var(--fs-body-sm);
}
.resume-meta dt {
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--fs-meta); font-weight: 600;
}
.resume-meta dd {
  margin: 0; color: var(--charcoal);
  font-family: var(--mono); font-size: var(--fs-mono);
  word-break: break-all;
}

.info-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px 20px;
}
.info-card.progress { background: rgba(51, 90, 138, 0.04); border-color: rgba(51, 90, 138, 0.25); }
.info-card.warn     { background: rgba(199, 119, 0, 0.06); border-color: rgba(199, 119, 0, 0.35); align-items: flex-start; }
.info-card.success  { background: rgba(46, 139, 87, 0.06); border-color: rgba(46, 139, 87, 0.35); align-items: flex-start; }
.info-card strong   { color: var(--navy); display: block; margin-bottom: 2px; }
.info-card p        { margin: 0; color: var(--muted); font-size: var(--fs-body-sm); }
.spinner {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid var(--muted-2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Step 5 — statements review ────────────────────────────────────── */
.step-review { gap: 18px; }
.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.summary-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  border-left: 3px solid var(--gold);
}
.summary-stat-value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.summary-stat-label {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.summary-stat.neg .summary-stat-value { color: var(--danger); }

.statements-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: visible;   /* allow the More ▼ dropdown to escape the card */
}
.tablist {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 16px 0;
}
.tab {
  padding: 8px 16px; border-radius: 8px 8px 0 0;
  color: var(--muted); font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.tab:hover     { color: var(--navy); }
.tab.is-active {
  background: var(--paper);
  color: var(--navy);
  box-shadow: 0 -2px 0 var(--gold) inset;
}
.tabpanel { padding: 22px 26px 28px; }

/* Single grid for the whole statement: one column-header row + a body of
   mixed blocks (spine rows, optional child rows, inline subtotals,
   inline totals, section headings). Subtotals appear at their natural
   accounting place between sections (Gross profit between COGS and
   operating expenses; Total assets after the asset sections; etc.). */
.stmt-grid { display: flex; flex-direction: column; }
.stmt-body { display: flex; flex-direction: column; }

.stmt-row {
  display: grid;
  grid-template-columns: 1fr 90px 160px;
  gap: 12px;
  padding: 8px;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
  transition: background 120ms ease;
}
.stmt-row:last-child { border-bottom: 0; }

/* When the statement has a prior-period column, extend the grid by one
   amount column. Order in markup is current → prior, so the new column
   lands on the RIGHT of the current amount; reading left→right gives
   the conventional "current then prior" comparative layout. */
.stmt-grid.has-prior .stmt-row {
  grid-template-columns: 1fr 80px 140px 140px;
}

/* Column header — stacked year on top, currency below, right-aligned. */
.stmt-row.stmt-thead {
  padding: 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-meta);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.stmt-row.stmt-thead .stmt-amount {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
.thead-year {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--navy);
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.thead-currency {
  font-size: var(--fs-meta);
  color: var(--muted);
  letter-spacing: 0.14em;
}

/* Section heading — just a label, no amounts. */
.stmt-row.stmt-heading {
  padding: 16px 8px 6px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Inline subtotal — hairline rule on top, slight emphasis. */
.stmt-row.stmt-subtotal {
  padding: 10px 8px;
  font-weight: 600;
  color: var(--navy);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(15, 23, 42, 0.015);
}
/* Final totals get a heavier gold rule on top — the visual anchor at the
   end of an asset/liability/IS section. */
.stmt-row.stmt-subtotal.kind-total {
  padding: 12px 8px;
  border-top: 2px solid var(--gold);
  background: var(--bg-soft);
}

.stmt-row.is-child {
  background: rgba(232, 180, 58, 0.04);
  padding-left: 28px;
}
.stmt-row.can-expand { cursor: pointer; }
.stmt-row.can-expand:hover { background: var(--gold-bg); }
.stmt-row.is-cited {
  background: var(--gold-bg);
  box-shadow: inset 3px 0 0 var(--gold);
  animation: cite-pop 600ms ease;
}
@keyframes cite-pop {
  0%   { background: rgba(232, 180, 58, 0.4); }
  100% { background: var(--gold-bg); }
}
.stmt-cell.stmt-name   { display: inline-flex; align-items: center; }
.stmt-cell.stmt-amount { text-align: right; }
.stmt-cell.stmt-amount.prior { color: var(--muted); }

/* Solid CSS arrow — two right-angled borders rotated -45° point right by
   default, switch to 45° (point down) when the parent row is open. Mirrors
   the v0.1 prototype's caret. */
.caret {
  display: inline-block;
  width: 8px; height: 8px;
  border-right:  1.6px solid var(--muted-2);
  border-bottom: 1.6px solid var(--muted-2);
  transform: rotate(-45deg);
  transition: transform 160ms ease, border-color 160ms ease;
  margin-right: 10px;
  margin-left: 2px;
  flex-shrink: 0;
  vertical-align: 2px;
}
.stmt-row.can-expand:hover .caret { border-color: var(--navy); }
.stmt-row.is-open .caret {
  transform: rotate(45deg);
  border-color: var(--gold);
}
/* Placeholder for non-expandable rows — keeps name column aligned. */
.caret.gap { border-color: transparent; }

/* ── AFS PDF viewer ────────────────────────────────────────────────── */
/* Full-screen dimmed backdrop centring the dialog. The dialog is a flex
   column: a toolbar (title + Download + ✕) over an <iframe> that renders
   the PDF inline via the browser's native viewer. */
.rev-pdf-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.5);
}
.pdf-dialog {
  width: min(92vw, 960px);
  height: min(88vh, 1100px);
  border: 0; border-radius: 12px; padding: 0;
  background: var(--paper);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; overflow: hidden;
}
.pdf-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-soft);
  flex-shrink: 0;
}
.pdf-dialog-title {
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-dialog-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pdf-close {
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 12px; background: var(--paper); cursor: pointer;
  font-weight: 500; line-height: 1; color: var(--muted);
}
.pdf-close:hover { color: var(--navy); border-color: var(--navy); }
.pdf-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg); }

/* ── Step 5 — drill-down panel ─────────────────────────────────────── */
/* Drilldown panel mirrors prototypes/.../statement-review-ideation.html.
   The thead has TWO rows: a "group" row carrying the period-year +
   currency labels above each Dr/Cr pair (colspan 2), and a sub-header
   with the actual column captions. */
.drilldown {
  background: rgba(232, 180, 58, 0.06);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 8px 18px 36px;
  overflow-x: auto;
}
.drilldown-empty {
  color: var(--muted); font-size: var(--fs-body-sm); padding: 6px 0;
}
.drilldown-table {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.drilldown-table thead th {
  text-align: left;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: bottom;
}
.drilldown-table thead .group {
  text-align: center;
  font-family: var(--serif); font-size: 13px;
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 0;
}
.drilldown-table thead .group .group-currency {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted);
  letter-spacing: 0.14em;
}
.drilldown-table thead th.right  { text-align: right;  }
.drilldown-table thead th.center { text-align: center; }
.drilldown-table tbody td {
  padding: 8px 10px;
  font-size: var(--fs-body-sm);
  border-bottom: 1px solid rgba(217, 222, 231, 0.6);
}
.drilldown-table tbody tr:last-child td { border-bottom: 0; }
.drilldown-table tbody td.right  { text-align: right; }
.drilldown-table tbody td.center { text-align: center; }
.drilldown-table tbody tr.is-corrected {
  background: var(--gold-bg);
  border-left: 2px solid var(--gold);
}
.drilldown-table tbody tr.flash {
  animation: flash-gold 700ms ease;
}
@keyframes flash-gold {
  0%   { background: rgba(232, 180, 58, 0.45); }
  100% { background: var(--gold-bg); }
}
.zero { color: var(--muted-2); }

/* ── Step 5 — right-edge VS-style tab rail + slide-in drawer ────────── */
/* Vertical labels (writing-mode: vertical-rl) for Corrections + Co-Pilot.
   Click a tab to slide its panel in from the right. The drawer overlays
   the content rather than reflowing it, so the page stays anchored. */
.right-rail {
  position: fixed;
  top: 60px; bottom: 0;
  right: 0;
  width: 36px;
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  z-index: 10;
}
.right-rail-tab {
  flex: 0 0 auto;
  padding: 18px 0;
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
}
.right-rail-tab:hover { background: var(--bg-soft); color: var(--navy); }
.right-rail-tab.is-active {
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--gold);
}
.right-rail-tab .rail-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: var(--navy);
}
.right-rail-tab .rail-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--paper);
  font-size: 10px; font-weight: 700;
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
}
.right-rail-tab .rail-badge[hidden] { display: none; }

.right-drawer {
  position: fixed;
  top: 60px; bottom: 0;
  right: 36px;
  width: min(440px, 88vw);
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  box-shadow: -10px 0 28px rgba(15, 23, 42, 0.10);
  display: flex; flex-direction: column;
  z-index: 9;
  transform: translateX(calc(100% + 36px));
  transition: transform 220ms ease;
}
.right-drawer.is-open { transform: translateX(0); }
.right-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.right-drawer-head h3 {
  margin: 0;
  font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy);
}
.right-drawer-close {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--fs-meta);
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
}
.right-drawer-close:hover { color: var(--navy); border-color: var(--gold); }
.right-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Drawer — Corrections panel content. */
.drawer-corrections-list { display: flex; flex-direction: column; gap: 8px; }
.correction-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
}
.correction-row .chip-code { font-family: var(--mono); color: var(--muted); font-size: var(--fs-mono); }
.correction-row .chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.correction-row .chip-name {
  color: var(--navy); font-weight: 500; font-size: var(--fs-body-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.correction-row .chip-flow { font-size: var(--fs-meta); color: var(--muted); }
.correction-row .chip-flow .chip-from  { text-decoration: line-through; }
.correction-row .chip-flow .chip-arrow { color: var(--gold); margin: 0 4px; font-weight: 700; }
.correction-row .chip-flow .chip-to    { color: var(--navy); font-weight: 600; }
.correction-row .chip-undo {
  border: 1px solid var(--hairline);
  border-radius: 6px; padding: 4px 10px;
  font-size: var(--fs-meta); color: var(--muted);
  background: var(--bg-soft);
  cursor: pointer;
}
.correction-row .chip-undo:hover { color: var(--danger); border-color: var(--danger); }
.drawer-corrections-empty { color: var(--muted); font-size: var(--fs-body-sm); padding: 16px 0; }
.drawer-corrections-foot {
  font-size: var(--fs-meta); color: var(--muted);
  display: inline-flex; align-items: flex-start; gap: 6px;
  padding: 12px 0 0;
  border-top: 1px solid var(--hairline);
}
.drawer-corrections-foot .glyph { color: var(--gold); }

/* Drawer — Co-Pilot panel content. */
.copilot-thread { display: flex; flex-direction: column; gap: 10px; }
.copilot-bubble {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}
.copilot-bubble.role-assistant,
.copilot-bubble.assistant {
  align-self: flex-start;
  background: var(--bg-soft);
  color: var(--charcoal);
  border-bottom-left-radius: 2px;
}
.copilot-bubble.role-user,
.copilot-bubble.user {
  align-self: flex-end;
  background: var(--navy);
  color: var(--paper);
  border-bottom-right-radius: 2px;
}
.copilot-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.copilot-chip {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--paper);
  color: var(--navy);
  font-size: var(--fs-meta);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.copilot-chip:hover { background: var(--gold-bg); border-color: var(--gold); }
.copilot-composer {
  display: flex; gap: 8px;
  border-top: 1px solid var(--hairline);
  padding: 12px 18px;
}
.copilot-composer[hidden] { display: none; }
.copilot-composer input {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--paper);
}
.copilot-composer input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.muted.small { font-size: var(--fs-meta); }

/* The drawer overlays the content — no need to reflow .stage when open. */

/* ── ephemeral / shared ────────────────────────────────────────────── */
.muted { color: var(--muted); font-size: var(--fs-body-sm); }
.error-card {
  border: 1px solid var(--danger);
  background: rgba(184, 34, 53, 0.05);
  border-radius: 12px;
  padding: 20px;
  color: var(--danger);
  max-width: 600px;
  margin: 24px auto;
}
.error-card h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; }
.error-card p  { margin: 0; }

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

/* ── narrow screens ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .topbar                 { padding: 10px 16px; }
  .wizard-shell           { grid-template-columns: 1fr; }
  .step-rail              {
    position: static;
    border-right: 0; padding-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 12px;
  }
  .rail-head              {
    flex-direction: row; align-items: center; justify-content: space-between;
    border-bottom: 0; padding-bottom: 0;
  }
  .rail-steps             { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .step-grid              { grid-template-columns: 1fr; }
  .summary-strip          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stmt-row,
  .stmt-row.stmt-thead,
  .stmt-row.stmt-subtotal { grid-template-columns: 1fr 60px 110px; gap: 8px; }
  .stmt-grid.has-prior .stmt-row,
  .stmt-grid.has-prior .stmt-row.stmt-thead,
  .stmt-grid.has-prior .stmt-row.stmt-subtotal { grid-template-columns: 1fr 50px 100px 100px; gap: 6px; }
  /* On narrow viewports the .harm-card already scrolls horizontally
     (overflow-x: auto + table min-width: 920px) so the operator can
     reach every column instead of being given a clipped subset. */
  body.copilot-open .stage { padding-right: clamp(20px, 4vw, 56px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Step 5 — Statement Review: full prototype parity (added ST-1)
   Source: prototypes/financial-statements-wizard-tb-mvp/statement-review-ideation.html
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Colour tokens not yet in site.css ───────────────────────────────── */
:root {
  --success:    #2e8b57;
  --warning:    #c77700;
  --danger:     #b82235;
  --success-bg: rgba(46, 139, 87,  0.08);
  --warning-bg: rgba(199, 119, 0,  0.08);
  --danger-bg:  rgba(184,  34, 53, 0.08);
}

/* ── Note-reference badge in statement grid ──────────────────────────── */
.stmt-note-ref {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--navy); cursor: pointer; text-decoration: none;
  width: 22px; height: 22px; border-radius: 4px; transition: background 120ms;
}
.stmt-note-ref:hover { background: var(--gold-bg); }
.thead-year     { font-family: var(--serif); font-size: 14px; color: var(--navy); text-transform: none; }
.thead-currency { font-size: var(--fs-meta); color: var(--muted); letter-spacing: 0.14em; }

/* ── More tab chevron + dropdown ────────────────────────────────────── */
.tab-more { display: inline-flex; align-items: center; gap: 6px; }
.tab-more-chev { font-size: 9px; color: var(--muted-2); transition: transform 160ms, color 160ms; }
.tab-more:hover .tab-more-chev { color: var(--navy); }
.tab-more.is-active .tab-more-chev { color: var(--navy); }
.tab-more[aria-expanded="true"] .tab-more-chev { transform: rotate(180deg); color: var(--navy); }

.more-menu {
  position: absolute; min-width: 300px; padding: 6px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-1);
  box-shadow: 0 1px 2px rgba(26,58,107,.04), 0 12px 32px -16px rgba(26,58,107,.18);
  z-index: 30;
}
.more-menu-item {
  padding: 10px 12px; border-radius: 5px; cursor: pointer;
  color: var(--charcoal); font-size: var(--fs-body-sm);
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: none; font: inherit; text-align: left;
}
.more-menu-item:hover     { background: var(--bg-soft); color: var(--navy); }
.more-menu-item.is-active { background: var(--gold-bg); color: var(--navy); font-weight: 600; }

/* ── Placeholder panel ───────────────────────────────────────────────── */
.placeholder-panel { padding: 40px 0 16px; text-align: center; }
.placeholder-panel h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy); }
.placeholder-panel p  { margin: 0; color: var(--muted); font-size: var(--fs-body-sm); }
.placeholder-panel .panel-pill {
  display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 999px;
  background: var(--bg-soft); color: var(--muted); font-size: var(--fs-meta);
  letter-spacing: 0.10em; text-transform: uppercase;
}

/* ── Notes tab ───────────────────────────────────────────────────────── */
.note-section { margin: 0 0 28px; }
.note-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.note-section-num   { font-family: var(--mono); font-size: var(--fs-mono); color: var(--muted-2); font-weight: 600; min-width: 20px; }
.note-section-title { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--navy); }
.note-clause        { font-size: var(--fs-meta); color: var(--muted-2); letter-spacing: 0.04em; margin-left: auto; }

.note-ai-card { border: 1px dashed var(--gold); border-radius: var(--r-1); background: var(--gold-bg); padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.note-ai-card p { margin: 0; flex: 1; font-size: var(--fs-body-sm); color: var(--muted); }

.note-breakdown { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-body-sm); margin-top: 12px; }
.note-breakdown thead th { text-align: left; font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
.note-breakdown thead th.num   { text-align: right; }
.note-breakdown thead th.span2 { text-align: center; border-bottom: 1px solid transparent; padding-bottom: 0; }
.note-breakdown thead th.span2 small { display: block; font-size: 10px; letter-spacing: 0.08em; color: var(--muted-2); }
.note-breakdown tbody td { padding: 7px 10px; border-bottom: 1px solid rgba(217,222,231,.5); }
.note-breakdown tbody tr:last-child td { border-bottom: 0; }
.note-breakdown tbody td.num   { text-align: right; }
.note-breakdown tbody td.label { color: var(--charcoal); }
.note-breakdown tfoot td { padding: 8px 10px; font-weight: 600; color: var(--navy); border-top: 1px solid var(--hairline); border-bottom: 2px solid var(--gold); }
.note-breakdown tfoot td.num { text-align: right; }
.note-breakdown .editable-cell { padding: 0; }
.note-breakdown .editable-cell input { border: 0; background: transparent; width: 100%; padding: 7px 10px; font: inherit; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; text-align: right; color: var(--charcoal); }
.note-breakdown .editable-cell input:focus { outline: none; background: var(--gold-bg); }

.notes-list { display: flex; flex-direction: column; gap: 4px; }
.note-list-item {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r-1);
  font-size: var(--fs-body-sm); background: var(--paper);
  cursor: pointer; width: 100%; text-align: left; font: inherit;
}
.note-list-item:hover                            { background: var(--gold-bg); }
.note-list-item.is-inapplicable                  { opacity: 0.5; cursor: default; }
.note-list-item.is-inapplicable:hover            { background: var(--paper); }
.note-list-num                                   { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted-2); text-align: center; }
.note-list-title                                 { color: var(--charcoal); font-weight: 500; }
.note-list-item.is-inapplicable .note-list-title { color: var(--muted); }
.note-list-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.note-list-badge.ai  { color: var(--gold);    background: var(--gold-bg); border: 1px solid var(--gold); }
.note-list-badge.det { color: var(--muted);   background: var(--bg-soft); border: 1px solid var(--hairline); }
.note-list-badge.na  { color: var(--muted-2); background: var(--bg-soft); border: 1px solid var(--hairline); }

/* ── Inline-editable paragraphs ──────────────────────────────────────── */
.r-editable {
  position: relative; cursor: text; border-radius: 4px;
  padding: 2px 6px; margin-left: -6px; margin-right: -6px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.r-editable:hover { background: rgba(232,180,58,.06); box-shadow: inset 0 -1px 0 rgba(232,180,58,.5); }
.r-edit-btn {
  position: absolute; top: 3px; right: 4px; display: none;
  align-items: center; justify-content: center; width: 22px; height: 20px;
  font-size: 11px; color: var(--gold); background: var(--paper); border: 1px solid var(--gold);
  border-radius: 999px; cursor: pointer; font-family: var(--sans); z-index: 2; user-select: none;
}
.r-edit-btn:hover                  { background: var(--gold); color: var(--paper); }
.r-editable:hover .r-edit-btn      { display: inline-flex; }
.r-editable.is-editing .r-edit-btn { display: none; }
.r-editable.is-editing { background: var(--paper); outline: 0; box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--gold-bg); }
.r-editable textarea { display: block; width: 100%; border: 0; background: transparent; font: inherit; color: inherit; resize: none; outline: none; padding: 0; margin: 0; line-height: inherit; min-height: 1.55em; }

@keyframes rep-shimmer { to { background-position: -200% 0; } }
.r-editable.is-suggesting {
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--paper) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%; animation: rep-shimmer 1100ms ease-in-out infinite;
  color: transparent; pointer-events: none;
}

/* ── Floating rewrite popup ──────────────────────────────────────────── */
.rewrite-pop { position: fixed; display: flex; align-items: center; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-pill); box-shadow: 0 6px 18px rgba(15,23,42,.16); z-index: 100; font-family: var(--sans); }
.rewrite-pop[hidden] { display: none; }
.rewrite-pop button { padding: 6px 10px; font-size: var(--fs-meta); font-weight: 600; color: var(--navy); letter-spacing: 0.04em; border-right: 1px solid var(--hairline); white-space: nowrap; background: none; border-top: 0; border-bottom: 0; border-left: 0; cursor: pointer; font: inherit; }
.rewrite-pop button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.rewrite-pop button:last-child  { border-right: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.rewrite-pop button:hover       { background: var(--gold-bg); color: var(--navy); }
.rewrite-pop .sparkle           { color: var(--gold); font-size: 11px; margin-right: 3px; }
.rewrite-pop .pop-divider       { width: 1px; align-self: stretch; background: var(--hairline); }
.rewrite-pop button.pop-confirm { width: 32px; padding: 6px 0; display: inline-flex; align-items: center; justify-content: center; color: var(--success); font-size: 14px; border-right: 0; }
.rewrite-pop button.pop-confirm:hover { background: var(--success-bg); color: var(--success); }
.rewrite-pop button.pop-discard { width: 32px; padding: 6px 0; display: inline-flex; align-items: center; justify-content: center; color: var(--danger); font-size: 13px; }
.rewrite-pop button.pop-discard:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Approval / signature block ──────────────────────────────────────── */
.r-approval           { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.r-approval-preamble  { margin: 0 0 26px; font-size: 13px; }
.r-sig-row   { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.r-sig-block { display: flex; flex-direction: column; gap: 4px; }
.r-sig-line  { display: block; border-top: 1px solid var(--charcoal); width: 100%; max-width: 280px; margin-bottom: 4px; }
.r-sig-name  { font-weight: 700; color: var(--charcoal); font-size: 14px; }
.r-sig-role  { color: var(--charcoal); font-size: 13px; }
.r-sig-meta  { color: var(--muted); font-size: 12px; }

/* ── A4 preview stage ────────────────────────────────────────────────── */
.rep-preview { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.rep-a4 { width: 760px; max-width: 100%; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-2); padding: 56px 64px; color: var(--charcoal); line-height: 1.55; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.08); }
.rep-a4 .r-title    { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy); margin: 0 0 4px; text-align: center; }
.rep-a4 .r-subtitle { text-align: center; color: var(--muted); font-size: var(--fs-body-sm); margin: 0 0 28px; }
.rep-a4 .r-section  { margin: 0 0 22px; }
.rep-a4 .r-section h3 { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--navy); margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.rep-a4 .r-section h3 .r-section-num { color: var(--muted-2); font-family: var(--mono); font-size: var(--fs-mono); }
.rep-a4 .r-section p { margin: 0 0 10px; font-size: var(--fs-body-sm); }
.rep-a4 .r-bullets   { margin: 0 0 10px; padding-left: 0; list-style: none; }
.rep-a4 .r-bullets li { position: relative; padding-left: 18px; margin: 2px 0; font-size: var(--fs-body-sm); }
.rep-a4 .r-bullets li::before { content: "\B7"; position: absolute; left: 6px; top: -2px; color: var(--gold); font-size: 20px; line-height: 1; }

.rep-field         { display: flex; flex-direction: column; gap: 6px; }
.rep-field-label   { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; }
.rep-field-value   { color: var(--navy); font-size: var(--fs-body); }
.rep-step-grid     { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; }
.rep-readonly-grid { background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; padding: 22px 26px; }
.rep-readonly-grid .rep-field-value { font-weight: 500; }
.rep-invariants    { border: 1px solid var(--danger); border-radius: var(--r-1); background: var(--danger-bg); padding: 12px 16px; color: var(--danger); font-size: var(--fs-body-sm); }
.rep-invariants strong { display: block; margin-bottom: 4px; }
.rep-invariants ul     { margin: 0; padding-left: 18px; }
.rep-invariants li     { margin: 2px 0; }

/* ── Drawer building blocks ──────────────────────────────────────────── */
.drawer-intro { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.5; margin: 0 0 4px; }
.drawer-foot  { font-size: var(--fs-meta); color: var(--muted); display: flex; align-items: flex-start; gap: 4px; padding: 8px 0 0; }
.drawer-foot .glyph, .drawer-foot .data-glyph { color: var(--gold); }
.drw-section { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.drw-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.drw-section input[type="text"], .drw-section input[type="date"], .drw-section select { border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 12px; background: var(--paper); color: var(--charcoal); width: 100%; font: inherit; }
.drw-section input:focus, .drw-section select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); }
.drw-field-label { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; }
.drw-field-hint  { font-size: var(--fs-meta); color: var(--muted-2); }

/* ── Segmented control ───────────────────────────────────────────────── */
.segmented { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: var(--r-1); padding: 3px; gap: 2px; flex-wrap: wrap; width: fit-content; }
.segmented button { padding: 6px 12px; border-radius: 6px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--charcoal); background: none; border: 0; cursor: pointer; font: inherit; }
.segmented button:hover:not(.is-active) { background: var(--paper); }
.segmented button.is-active             { background: var(--navy); color: var(--paper); }

/* ── Section list (Sections drawer) ─────────────────────────────────── */
.section-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.section-row  { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r-1); background: var(--paper); font-size: var(--fs-body-sm); }
.section-row.is-required { background: var(--bg-soft); }
.section-row .toggle { position: relative; width: 30px; height: 16px; border-radius: 999px; background: var(--hairline); flex-shrink: 0; transition: background 120ms; cursor: pointer; }
.section-row .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform 120ms; }
.section-row.is-on .toggle              { background: var(--navy); }
.section-row.is-on .toggle::after       { transform: translateX(14px); }
.section-row.is-required .toggle        { background: var(--success); cursor: not-allowed; }
.section-row.is-required .toggle::after { transform: translateX(14px); }
.section-row .label       { display: flex; align-items: center; gap: 6px; color: var(--charcoal); min-width: 0; }
.section-row .label .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-row .label .num  { display: inline-block; min-width: 18px; color: var(--muted-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.section-row .badge       { font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--hairline); padding: 2px 6px; border-radius: 999px; }
.section-row .badge.req   { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.refresh-all { font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy); padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--r-1); background: var(--paper); cursor: pointer; font: inherit; width: 100%; margin-top: 4px; text-align: center; }
.refresh-all:hover { background: var(--bg-soft); border-color: var(--gold); }

/* ── Monthly grid (Employees editor) ─────────────────────────────────── */
.monthly-grid                     { display: grid; grid-template-columns: 1fr 70px 70px; gap: 2px 6px; font-size: var(--fs-body-sm); margin-top: 4px; }
.monthly-grid .monthly-head       { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.monthly-grid .monthly-head.num   { text-align: right; }
.monthly-grid .monthly-month      { color: var(--charcoal); padding: 0 6px; display: flex; align-items: center; }
.monthly-grid .monthly-cell       { border: 1px solid var(--hairline); border-radius: 4px; padding: 4px 6px; font-variant-numeric: tabular-nums; text-align: right; background: var(--paper); color: var(--charcoal); font: inherit; font-size: var(--fs-body-sm); }
.monthly-grid .monthly-cell:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); }
.monthly-grid .monthly-total-label { color: var(--navy); font-weight: 600; padding: 6px 6px 4px; border-top: 1px solid var(--hairline); }
.monthly-grid .monthly-total       { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); padding: 6px 6px 4px; border-top: 1px solid var(--hairline); }
.section-inline-editor { border: 1px solid var(--navy); border-top: 0; border-radius: 0 0 var(--r-1) var(--r-1); background: var(--paper); padding: 12px 14px; margin-top: -6px; display: flex; flex-direction: column; gap: 10px; }
.inline-row    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-label  { flex: 1; font-size: var(--fs-body-sm); color: var(--charcoal); font-weight: 500; }
.inline-toggle { position: relative; width: 30px; height: 16px; border-radius: 999px; background: var(--hairline); flex-shrink: 0; transition: background 120ms; cursor: pointer; }
.inline-toggle::after        { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform 120ms; }
.inline-toggle.is-on         { background: var(--navy); }
.inline-toggle.is-on::after  { transform: translateX(14px); }
.inline-hint  { margin: 0; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.inline-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.inline-field .drw-field-label { font-size: 10px; }
.inline-field input[type="number"]       { border: 1px solid var(--hairline); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; text-align: right; width: 100%; }
.inline-field input[type="number"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); }

/* ── Directors register ──────────────────────────────────────────────── */
.director-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0; }
.director-card { border: 1px solid var(--hairline); border-radius: var(--r-1); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.director-card.is-resigned { opacity: 0.6; }
.director-card .dcard-row  { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.director-card .dcard-row input { border: 1px solid var(--hairline); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: var(--fs-body-sm); background: var(--paper); color: var(--charcoal); width: 100%; }
.director-card .dcard-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); }
.director-card .dcard-row .remove-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--muted); font-size: 12px; background: none; border: 0; cursor: pointer; flex-shrink: 0; }
.director-card .dcard-row .remove-btn:hover { color: var(--danger); background: var(--danger-bg); }
.director-card .dcard-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-body-sm); }
.director-card .dcard-meta label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--charcoal); }
.add-director       { font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy); padding: 8px 0; border: 0; background: none; cursor: pointer; font: inherit; }
.add-director:hover { color: var(--gold); }

/* ── Add-ons list ────────────────────────────────────────────────────── */
.addon-list { display: flex; flex-direction: column; gap: 6px; }
.addon-item { border: 1px solid var(--hairline); border-radius: var(--r-1); background: var(--paper); overflow: hidden; }
.addon-item.is-on { border-color: var(--navy); }
.addon-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; width: 100%; background: none; border: 0; font: inherit; text-align: left; }
.addon-toggle { position: relative; flex-shrink: 0; width: 30px; height: 16px; border-radius: 999px; background: var(--hairline); transition: background 120ms; }
.addon-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transition: transform 120ms; }
.addon-item.is-on .addon-toggle          { background: var(--navy); }
.addon-item.is-on .addon-toggle::after   { transform: translateX(14px); }
.addon-head-label                        { font-size: var(--fs-body-sm); font-weight: 500; color: var(--charcoal); }
.addon-item.is-on .addon-head-label      { color: var(--navy); }
.addon-body                              { max-height: 0; overflow: hidden; transition: max-height 200ms ease; }
.addon-item.is-on .addon-body            { max-height: 120px; }
.addon-body textarea { display: block; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--hairline); font: inherit; font-size: var(--fs-body-sm); resize: none; background: var(--bg-soft); color: var(--charcoal); }
.addon-body textarea:focus { outline: none; background: var(--paper); }

/* ── Basis card ──────────────────────────────────────────────────────── */
.basis-card       { border: 1px solid var(--warning); border-radius: var(--r-1); padding: 12px 14px; background: var(--warning-bg); display: flex; flex-direction: column; gap: 8px; }
.basis-card-head  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.basis-card-title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--charcoal); }
.basis-hint       { margin: 0; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.suggest-chip       { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--gold); border-radius: 999px; font-size: var(--fs-meta); font-weight: 600; color: var(--gold); background: var(--paper); cursor: pointer; font: inherit; }
.suggest-chip:hover { background: var(--gold-bg); }
.suggest-chip .sparkle { font-size: 11px; }
.suggest-area       { border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: var(--fs-body-sm); resize: vertical; width: 100%; min-height: 80px; background: var(--paper); color: var(--charcoal); }
.suggest-area:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-bg); }

/* ── Narrow screen ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rep-a4 { padding: 32px 24px; }
  .right-rail, .right-drawer { display: none; }
}