/* ==========================================================================
   Profit Bot Dashboard — shared stylesheet
   Every screen links this file. Page-specific rules live at the bottom.

   The visual system is an "engineered ledger": hairline rules instead of
   shadows, ruled rows instead of boxed cards, one petrol-teal accent for
   structure, and green/red reserved strictly for profit and loss meaning.
   Numbers are set in IBM Plex Mono with tabular figures so columns align
   on the decimal — this is load-bearing, not decoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Core palette (agreed system) */
  --paper:          #F6F8F7;  /* page background */
  --surface:        #FFFFFF;  /* rows, panels */
  --ink:            #15181B;  /* primary text */
  --muted:          #5B6670;  /* labels, secondary text */
  --line:           #E3E7E5;  /* borders, hairlines */
  --brand:          #0C4A45;  /* deep petrol-teal: nav, headers, key totals */
  --profit:         #157A4B;  /* positive figures */
  --loss:           #A8352C;  /* negative figures */
  --pending:        #A9791A;  /* open/liability amber */

  /* Extended surfaces and rules used by the export */
  --surface-sub:    #FAFBFA;  /* table headers and total rows */
  --surface-side:   #FCFDFC;  /* sidebar */
  --line-soft:      #F0F3F1;  /* inner row hairlines, bar tracks */
  --track:          #EFF2F0;  /* reconciliation strip track */
  --row-hover:      #F6F8F7;
  --nav-active:     #F1F5F3;
  --nav-hover:      #F2F5F3;
  --tile-hover:     #FCFAF5;

  /* Meaning-bearing tints */
  --pending-soft:   #E0C489;  /* pending segment, ledger strip */
  --spark-idle:     #BFD3CF;  /* non-current sparkline bars */
  --toggle-off:     #D6DCD8;
  --pill-profit-bg: #EAF3EE;
  --pill-pending-bg:#FAF4E7;
  --pill-loss-bg:   #F8ECEA;
  --pill-muted-bg:  #F0F3F1;

  /* Type */
  --font-ui:        'IBM Plex Sans', system-ui, sans-serif;
  --font-num:       'IBM Plex Mono', ui-monospace, monospace;

  --text-display:   27px;  /* headline figures */
  --text-title:     25px;  /* page titles */
  --text-figure:    24px;  /* secondary headline figures */
  --text-lead:      19px;
  --text-panel:   13.5px;  /* panel headings, nav */
  --text-body:      13px;  /* table cells */
  --text-cell:    12.5px;  /* dense table cells */
  --text-small:   11.5px;
  --text-note:      11px;
  --text-label:     10px;  /* uppercase mono labels */

  /* Shape and rhythm */
  --radius:         4px;   /* buttons, logo mark */
  --radius-panel:   5px;   /* panels, cards, tables */
  --radius-pill:    3px;   /* status pills */
  --rowpad:         11px;  /* comfortable density */
  --shadow:         0 1px 2px rgba(21, 24, 27, 0.035);
  --shadow-btn:     0 1px 2px rgba(12, 74, 69, 0.18);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html, body { margin: 0; padding: 0; }

/* Headings and paragraphs are laid out by their flex/grid parents, never by
   default margins. Spacing comes from gap so it stays predictable. */
h1, h2, h3, h4, p { margin: 0; font-size: inherit; font-weight: inherit; }

body {
  background: var(--paper);
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--profit); }

/* Every figure in the system uses tabular mono. */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mono { font-family: var(--font-num); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Shell — sidebar and main column
   -------------------------------------------------------------------------- */

.shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: var(--paper);
}

.sidebar {
  width: 214px;
  flex: 0 0 214px;
  background: var(--surface-side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 0 0 0;
}

.brand { padding: 0 20px; display: flex; align-items: center; gap: 10px; }

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--surface);
}

.brand-text { display: flex; flex-direction: column; gap: 2px; }

.brand-name {
  font-family: var(--font-num);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--brand);
}

.brand-sub { font-size: 10.5px; color: var(--muted); }

.nav { display: flex; flex-direction: column; }

.nav-item {
  padding: 10px 20px;
  font-size: var(--text-panel);
  letter-spacing: -0.005em;
  cursor: pointer;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-weight: 400;
  background: transparent;
  text-decoration: none;
}
.nav-item:hover { background: var(--nav-hover); color: var(--muted); }
.nav-item.is-active {
  border-left-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
  background: var(--nav-active);
}
.nav-item.is-active:hover { color: var(--brand); }

.side-foot {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-foot-label { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); }
.side-foot-status { font-family: var(--font-num); font-size: var(--text-small); color: var(--profit); }

.main {
  flex: 1;
  min-width: 0;
  padding: 26px 34px 60px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.screen { display: flex; flex-direction: column; gap: 20px; }
.screen-overview { gap: 22px; }

/* --------------------------------------------------------------------------
   4. Page header
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.page-head-baseline { align-items: baseline; }

.page-head-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.page-title { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.022em; }

.page-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--muted);
}

.head-group { display: flex; align-items: center; gap: 14px; }
.head-group-baseline { display: flex; align-items: baseline; gap: 14px; }

.backlink {
  font-size: var(--text-small);
  color: var(--muted);
  cursor: pointer;
  width: fit-content;
}
.backlink:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */

.btn {
  padding: 8px 15px;
  font-family: inherit;
  font-size: var(--text-cell);
  font-weight: 500;
  color: var(--surface);
  background: var(--brand);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}

.btn-ghost {
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn-ghost.mono { font-family: var(--font-num); }
.btn-ghost.is-muted { color: var(--muted); }

.btn-row { display: flex; gap: 8px; }

.filters {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.filter {
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border: none;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 400;
}
.filter.is-active { background: var(--nav-active); color: var(--brand); font-weight: 600; }

/* Content-box: the 2px padding sits outside the 30x16 track, giving the
   34x20 pill the design specifies. */
.toggle {
  justify-self: end;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 2px;
  cursor: pointer;
  box-sizing: content-box;
}
.toggle.is-on  { background: var(--profit);    justify-content: flex-end; }
.toggle.is-off { background: var(--toggle-off); justify-content: flex-start; }
.toggle-knob { width: 12px; height: 12px; border-radius: 6px; background: var(--surface); }

/* --------------------------------------------------------------------------
   6. Panels and stat tiles
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}

.panel-head {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-panel);
  font-weight: 600;
}
.panel-head-lg { padding: 14px 20px; }
.panel-head-split { display: flex; justify-content: space-between; align-items: baseline; }
.panel-head-note { font-family: var(--font-num); font-size: var(--text-note); color: var(--muted); font-weight: 400; }
.panel-head-stack { display: flex; flex-direction: column; gap: 3px; }
.panel-sub { font-size: var(--text-note); color: var(--muted); font-weight: 400; }

.panel-foot {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1.5px solid var(--ink);
  background: var(--surface-sub);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}
.panel-foot-label { font-size: var(--text-cell); font-weight: 600; }
.panel-foot-value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-body); font-weight: 600; }

.panel-note { padding: 12px 20px; font-size: var(--text-small); color: var(--muted); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.stat-grid-accent { border-top: 2px solid var(--brand); }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-inline { display: flex; width: fit-content; }

.stat {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.stat:last-child { border-right: none; }
.stat-lead { padding: 20px; }
.stat-wide { padding: 18px 32px 18px 20px; }
.stat-link { cursor: pointer; text-decoration: none; color: inherit; }
.stat-link:hover { background: var(--tile-hover); color: inherit; }

.stat-label {
  font-family: var(--font-num);
  font-size: var(--text-label);
  letter-spacing: 0.11em;
  color: var(--muted);
}
.stat-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-display);
  font-weight: 500;
}
/* Only the Overview scoreboard tightens its tracking; the Crypto, Liability
   and Merchant Detail figures are set at normal tracking in the design. */
.stat-grid-accent .stat-value { letter-spacing: -0.02em; }
.stat-value-sm { font-size: var(--text-figure); }
.stat-note { font-family: var(--font-num); font-size: var(--text-small); color: var(--muted); }
.stat-sub { font-size: var(--text-note); color: var(--muted); }

/* --------------------------------------------------------------------------
   7. Tables
   Real table markup, laid out with CSS Grid so column rhythm matches the
   original exactly. Explicit ARIA roles are set in the markup because
   overriding `display` on table elements drops the implicit roles.
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

table.grid {
  display: block;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.grid thead, .grid tbody, .grid tfoot { display: block; }
.grid tr { display: grid; align-items: baseline; }
/* The display override above outranks the UA rule for [hidden]. */
.grid tr[hidden], .grid thead[hidden] { display: none; }

.grid thead tr {
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sub);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.grid th {
  font-family: var(--font-num);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: left;
  padding: 0;
}
.grid th.num { text-align: right; }

.grid tbody tr {
  gap: 14px;
  padding: var(--rowpad) 20px;
  border-bottom: 1px solid var(--line-soft);
}
.grid td { font-size: var(--text-body); padding: 0; }
.grid td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-body); }

.grid tfoot tr {
  gap: 14px;
  padding: 15px 20px;
  border-top: 1.5px solid var(--ink);
  background: var(--surface-sub);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}
.grid tfoot td { font-size: var(--text-cell); font-weight: 600; }
.grid tfoot td.num { font-size: var(--text-body); font-weight: 600; }

.row-link { cursor: pointer; }
.row-link:hover { background: var(--row-hover); }

/* These need to outrank `.grid td`, which sets the default cell size. */
.grid td.cell-ref { font-family: var(--font-num); font-size: var(--text-body); color: var(--brand); }
.grid td.cell-date { font-family: var(--font-num); font-size: var(--text-cell); color: var(--muted); }
.grid td.cell-net { font-weight: 500; }

/* Rows are clickable, so cell links inherit their cell's colour rather than
   introducing a second link colour inside the table. */
.grid td a { color: inherit; text-decoration: none; }
.grid td a:hover { color: inherit; }
/* The status cell carries no font-size of its own in the design, so its line
   box is struck at the document default rather than the 13px cell size. That
   is what gives status rows their extra 4px of height — kept deliberately. */
.grid td.cell-status { text-align: right; font-size: 1rem; }

/* Meaning always beats structure: a profit/loss colour must win over a
   cell's own colour, so these carry table-level specificity too. */
.is-profit,  .grid td.is-profit  { color: var(--profit); }
.is-loss,    .grid td.is-loss    { color: var(--loss); }
.is-pending, .grid td.is-pending { color: var(--pending); }
.is-brand,   .grid td.is-brand   { color: var(--brand); }
.is-muted,   .grid td.is-muted   { color: var(--muted); }
.is-ink,     .grid td.is-ink     { color: var(--ink); }

.pill {
  font-family: var(--font-num);
  font-size: var(--text-label);
  letter-spacing: 0.07em;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill-profit  { color: var(--profit);  background: var(--pill-profit-bg); }
.pill-pending { color: var(--pending); background: var(--pill-pending-bg); }
.pill-loss    { color: var(--loss);    background: var(--pill-loss-bg); }
.pill-muted   { color: var(--muted);   background: var(--pill-muted-bg); }

/* Column templates, one per table.
   Selectors are written `.grid.t-x tr` so they outrank `.grid tbody tr`,
   which sets the default gap and padding. A bare `.t-x tr` loses that
   cascade fight and silently falls back to the 14px gap. */
.grid.t-cyber    tr { grid-template-columns: 120px 1fr 130px 130px 130px 100px; }
.grid.t-events   tr { grid-template-columns: 120px 1fr 150px 150px; }
.grid.t-merchant tr { grid-template-columns: 1fr 100px 100px 120px 110px 170px; }
.grid.t-days     tr { grid-template-columns: 90px 1fr 1fr 1fr; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
.grid.t-report   tr { grid-template-columns: 86px repeat(7, 1fr); gap: 10px; }
.grid.t-crypto   tr { grid-template-columns: 100px 130px 100px 100px 1fr 1fr 130px; gap: 12px; }
.grid.t-ledger   tr { grid-template-columns: 110px 1fr 130px; gap: 12px; }
.grid.t-expense  tr { grid-template-columns: 90px 1fr 130px; gap: 12px; }

.t-cyber    { min-width: 830px; }
.t-events   { min-width: 620px; }
.t-merchant { min-width: 780px; }
.t-days     { min-width: 420px; }
.t-report   { min-width: 900px; }
.t-crypto   { min-width: 860px; }
.t-ledger   { min-width: 400px; }
.t-expense  { min-width: 360px; }

/* Dense variants. The `td.num` selectors are required: `.grid td.num` sets
   the 13px default and would otherwise outrank a bare `.t-report td`. */
.grid.t-days  thead tr { padding: 9px 20px; }
.t-days  td, .t-days  td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-cell); }
.grid.t-report tbody tr { padding: 8px 20px; }
.t-report td, .t-report td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-cell); }
.t-report tbody tr:hover { background: var(--row-hover); }
.t-crypto td, .t-crypto td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-cell); }
.t-crypto tbody tr:hover { background: var(--row-hover); }

/* The reports total row stays visible while the long month scrolls. */
.t-report tfoot tr {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  padding: 14px 20px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body);
  font-weight: 600;
}
.t-report tfoot td.label { font-family: var(--font-ui); font-size: var(--text-cell); }

/* --------------------------------------------------------------------------
   8. Reconciliation strip — the signature component
   paid -> recovered -> pending, read as one continuous bar.
   -------------------------------------------------------------------------- */

/* Specificity has to beat `.grid tbody tr`, which sets the column template. */
.grid tbody tr.strip-row {
  display: block;
  padding: 8px 20px var(--rowpad) 20px;
  border-bottom: 1px solid var(--line-soft);
}
.grid tbody tr.has-strip { border-bottom: none; padding-bottom: 0; }

.strip { display: flex; align-items: center; gap: 12px; }

.strip-track {
  width: 260px;
  display: flex;
  height: 5px;
  background: var(--track);
  border-radius: 3px;
  overflow: hidden;
}
.strip-rec  { background: var(--profit); }
.strip-pend { background: var(--pending-soft); }
.strip-sur  { background: var(--brand); }
.strip-track > div { height: 100%; }

.strip-note { font-family: var(--font-num); font-size: 10.5px; color: var(--muted); }

/* Case detail: full-width, taller, saturated amber. */
.strip-lg { display: flex; flex-direction: column; gap: 8px; }
.strip-lg .strip-track {
  width: auto;
  height: 16px;
  background: var(--line-soft);
  border-radius: 2px;
}
.strip-lg .strip-pend { background: var(--pending); }
.strip-lg .strip-note { font-size: var(--text-note); }

/* Staff advances: same grammar, smaller. */
.strip-sm {
  display: flex;
  height: 8px;
  background: var(--line-soft);
  border-radius: 1px;
  overflow: hidden;
}
.strip-sm > div { height: 100%; }

/* --------------------------------------------------------------------------
   9. Overview — breakdown and sparkline
   -------------------------------------------------------------------------- */

.breakdown-row {
  display: grid;
  grid-template-columns: 150px 130px 1fr;
  align-items: center;
  gap: 18px;
  padding: var(--rowpad) 20px;
  border-bottom: 1px solid var(--line-soft);
}
.breakdown-label { font-size: var(--text-body); color: var(--ink); }
.breakdown-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-body); text-align: right; }

.bar-track { height: 7px; background: var(--line-soft); border-radius: 1px; }
.bar-fill { height: 7px; border-radius: 1px; background: var(--brand); }
.bar-fill.is-loss { background: var(--loss); }

.breakdown-total {
  display: grid;
  grid-template-columns: 150px 130px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 16px 20px;
  border-top: 1.5px solid var(--ink);
  background: var(--surface-sub);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}
.breakdown-total-label { font-size: var(--text-panel); font-weight: 600; color: var(--brand); }
.breakdown-total-value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lead);
  font-weight: 600;
  text-align: right;
  color: var(--brand);
}
.breakdown-total-note { font-size: var(--text-note); color: var(--muted); }

.spark { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.spark-bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.spark-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 96px; }
.spark-bar { width: 100%; border-radius: 1px; background: var(--spark-idle); }
.spark-bar.is-current { background: var(--brand); }
.spark-bar.is-loss { background: var(--loss); }
.spark-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: var(--text-label);
  color: var(--muted);
}
.spark-foot {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.spark-foot-value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; }

/* --------------------------------------------------------------------------
   10. Layout helpers
   -------------------------------------------------------------------------- */

.cols-2       { display: grid; grid-template-columns: 1fr 1fr;     gap: 20px; align-items: start; }
.cols-side    { display: grid; grid-template-columns: 1fr 300px;   gap: 20px; align-items: start; }
.cols-detail  { display: grid; grid-template-columns: 1.6fr 1fr;   gap: 20px; align-items: start; }
.stack        { display: flex; flex-direction: column; gap: 20px; }

/* Grid and flex children are min-width:auto by default, so a table with a
   min-width pushes its column — and the whole page — wider than the
   viewport. Letting them shrink is what allows .table-scroll to scroll
   instead of the document. */
.cols-2 > *, .cols-side > *, .cols-detail > *, .stack > * { min-width: 0; }
.table-scroll { max-width: 100%; }

.note { font-size: var(--text-small); color: var(--muted); }
.note-wide { max-width: 720px; text-wrap: pretty; }

.summary-bar {
  display: flex;
  gap: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  padding: 12px 20px;
  font-family: var(--font-num);
  font-size: var(--text-cell);
  color: var(--muted);
  flex-wrap: wrap;
}
.summary-bar span { color: var(--ink); }

.case-detail-head { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.case-figures { display: flex; gap: 44px; align-items: flex-end; flex-wrap: wrap; }
.case-figure { display: flex; flex-direction: column; gap: 6px; }
.case-figure-value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; }
.case-figure-value.lead { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }

.recurring-row {
  display: grid;
  grid-template-columns: 1fr 130px 44px;
  gap: 12px;
  align-items: center;
  padding: var(--rowpad) 20px;
  border-bottom: 1px solid var(--line-soft);
}
.recurring-label { display: flex; flex-direction: column; gap: 2px; }
.recurring-label b { font-size: var(--text-body); font-weight: 400; }
.recurring-note { font-size: var(--text-note); color: var(--muted); }
.recurring-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-body); text-align: right; }

.advance-row {
  padding: var(--rowpad) 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* No gap: the note wraps against the full remaining width, as designed. */
.advance-head { display: flex; justify-content: space-between; align-items: baseline; }
.advance-name { font-size: var(--text-body); }
.advance-note { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--text-cell); color: var(--muted); }

.panel-flag { border-color: var(--pending); border-radius: var(--radius); }
.panel-flag .panel-head { color: var(--pending); }

.case-mini {
  display: flex;
  justify-content: space-between;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-num);
  font-size: var(--text-cell);
}
.case-mini a { color: var(--brand); }

/* --------------------------------------------------------------------------
   11. Index page
   -------------------------------------------------------------------------- */

.contents { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.contents-title { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.022em; }
.contents-lede { margin-top: 8px; font-size: 14px; color: var(--muted); }
.contents-flag {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 2px solid var(--pending);
  background: var(--pill-pending-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-small);
  color: var(--ink);
}
.contents-list { margin-top: 32px; border-top: 1px solid var(--line); }
.contents-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.contents-item:hover { color: inherit; background: var(--nav-active); }
.contents-name { font-size: var(--text-body); font-weight: 500; color: var(--brand); }
.contents-desc { font-size: var(--text-small); color: var(--muted); }
.contents-foot { margin-top: 40px; font-size: var(--text-note); color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Responsive
   The client opens this on a phone first. Wide tables scroll inside their
   own container rather than shrinking type or breaking the shell.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .shell { flex-direction: column; }

  .sidebar {
    width: auto;
    flex: 0 0 auto;
    gap: 0;
    padding: 14px 0 0 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .brand { padding: 0 16px 12px 16px; }
  .nav { flex-direction: row; overflow-x: auto; border-top: 1px solid var(--line); }
  .nav-item {
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: 11px 14px;
  }
  .nav-item.is-active { border-left-color: transparent; border-bottom-color: var(--brand); }
  .side-foot {
    margin-top: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 10px 16px;
  }

  .main { padding: 18px 16px 48px 16px; gap: 18px; }
  .page-title { font-size: 21px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head .head-group { flex-wrap: wrap; }

  .cols-2, .cols-side, .cols-detail { grid-template-columns: 1fr; }

  .stat-grid, .stat-grid-3 { grid-template-columns: 1fr 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat:last-child, .stat:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .stat-grid-inline { width: auto; }
  .stat-lead, .stat-wide { padding: 18px 20px; }
  .stat-value { font-size: 22px; }
  .stat-value-sm { font-size: 20px; }

  /* Keep label and figure on one line; let the bar reflow beneath. */
  .breakdown-row, .breakdown-total { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .bar-track, .breakdown-total-note { grid-column: 1 / -1; }

  .case-figures { gap: 24px; }
  .case-figure-value.lead { font-size: 26px; }
  .summary-bar { gap: 8px 20px; }
  .strip-track { width: 180px; }
  .advance-head { flex-direction: column; gap: 4px; }
}

@media (max-width: 480px) {
  .contents { padding: 40px 20px 64px; }
  .contents-item { grid-template-columns: 1fr; gap: 4px; }
  .stat-grid, .stat-grid-3 { grid-template-columns: 1fr; }
  .stat { border-right: none !important; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
}

@media print {
  .sidebar { display: none; }
  .panel, .stat-grid { box-shadow: none; }
}