/* ============================================================================
   CCAM — typography
   ----------------------------------------------------------------------------
   The platform had drifted to ten different font stacks. Roughly thirty places
   hardcoded `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`, which
   bypasses Inter entirely, so half the interface rendered in Inter and half in
   whatever the OS default happened to be. waterfall.html was the worst case:
   it declared --ccam-font:'Inter' but never actually loaded Inter in its real
   <head>, so the entire Asset Management module fell back to the system face.
   Mixed faces at mixed weights is most of what reads as "unfinished" in a
   product like this.

   This file is the single source of truth. Load it LAST so it wins over the
   inline <style> blocks without needing every one of them rewritten.

   What makes finance software look like finance software, in order of effect:
     1. Numbers that line up. Proportional digits make a column of figures
        ragged; tabular lining figures make it a table. This is the big one.
     2. One face, used consistently, with restraint in the weight range.
     3. Slightly tightened tracking on headings; slightly loosened on the small
        uppercase labels that carry section names.
     4. Real typographic minus for negatives, so (1,234) and -1,234 align.
   ========================================================================== */

:root {
  --ccam-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace,
          'Cascadia Code', 'Fira Code', Menlo, Consolas, monospace;
}

/* ── 1. One face everywhere ─────────────────────────────────────────────────
   The catch-all below deliberately does NOT touch anything that opted into the
   mono stack, icon fonts, or the Leaflet map surface, which ships its own. */
body,
button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
table, th, td, label, p, div, span, a, li {
  font-family: var(--ccam-font);
}

code, pre, kbd, samp,
.mono, .num, .figure,
[class*="mono"] {
  font-family: var(--mono);
}

/* Leaflet draws its own controls and attribution; leave them alone. */
.leaflet-container, .leaflet-container * { font-family: var(--ccam-font); }

/* ── 2. Tabular figures ─────────────────────────────────────────────────────
   Every number that sits in a column gets fixed-width lining digits so decimal
   points stack. Applied to table cells wholesale rather than to a class,
   because financial figures in this codebase are written a dozen different
   ways and a class-based approach would miss most of them. */
table, th, td,
.mono, .num, .figure, .right,
input[type="number"], input[inputmode="decimal"],
.stat, .stat-value, .metric, .metric-value,
.kpi, .kpi-value, .badge {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'ss01' 1, 'cv05' 1;
}

/* Right-aligned numeric columns read better very slightly tracked out — it
   stops long figures from looking cramped against the cell edge. */
td.right, th.right, .mono.right {
  letter-spacing: 0.01em;
}

/* ── 3. Headings and labels ────────────────────────────────────────────────
   Inter is optically a touch wide at display sizes; institutional interfaces
   pull headings in slightly. The small uppercase section labels go the other
   way, since uppercase needs air to stay legible. */
h1, h2, h3, .tracker-title, .card-title, .page-title, .brand {
  letter-spacing: -0.014em;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
}
h1 { letter-spacing: -0.02em; }

.sec-label, .dp-label, .section-label, .eyebrow,
[style*="text-transform:uppercase"], [style*="text-transform: uppercase"] {
  letter-spacing: 0.062em;
  font-weight: 600;
}

/* ── 4. Body copy ──────────────────────────────────────────────────────────
   Antialiasing off by default on macOS makes Inter look heavy and slightly
   blurry at UI sizes; the two hints below are what most design systems ship. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tables are dense here; a marginally taller line makes long rows scannable
   without changing any row heights that are set explicitly. */
td, th { line-height: 1.45; }

/* Inputs inherited the browser default face in a few places, which is the most
   obvious single tell that a screen was assembled rather than designed. */
input, select, textarea, button {
  font-size: inherit;
  letter-spacing: inherit;
}

/* ── 5. Negative numbers ───────────────────────────────────────────────────
   A hyphen-minus is narrower than a digit, so a column mixing positives and
   negatives loses alignment on the leading character. */
.neg, .negative, [data-negative="true"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── 6. Print ──────────────────────────────────────────────────────────────
   Investor statements print; keep figures tabular on paper too. */
@media print {
  body, table, th, td {
    font-family: var(--ccam-font);
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* ============================================================================
   SURFACES & SECTION SEPARATION
   ----------------------------------------------------------------------------
   The complaint, from a zoomed-out screenshot: on dense pages it is hard to see
   where one section ends and the next begins. The cause is that almost
   everything is white on white, separated only by hairline 0.5px borders. At
   100% zoom you can just about read the structure; at any distance it collapses
   into one continuous sheet.

   Three changes, in order of effect:
     1. Figure and ground. The page gets a faint tint and cards stay white, so
        a card reads as a distinct object rather than an area of the same paper.
     2. Section headers earn their place — darker, with a rule running to the
        right — instead of small grey uppercase floating above content.
     3. Rhythm. More space BETWEEN sections than within them, which is what
        actually communicates grouping.

   Deliberately conservative: no layout properties are touched (no widths,
   no flex/grid changes, no padding that would reflow a table). Only colour,
   border, shadow and vertical margin.
   ========================================================================== */

/* ── 1. Figure / ground ──────────────────────────────────────────────────── */
body {
  background: #f6f7f9;
}

.card,
.tbl-wrap,
.table-wrap,
.detail-panel,
.modal,
.pane > .card {
  background: #fff;
  border: 1px solid #e3e6ea;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* card-surface is the recessed variant — it should read as inset, not raised. */
.card-surface {
  background: #f0f2f5;
  border: 1px solid #e3e6ea;
  box-shadow: none;
}

/* ── 2. Section headers ──────────────────────────────────────────────────── */
.sec-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 650;
  color: #475467;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin: 34px 0 12px;
  padding-left: 9px;
  border-left: 3px solid #b8933f;      /* the gold accent, thickened to register */
}

/* The rule after the words is what makes a heading read as a divider rather
   than a caption. It fills whatever width is left. */
.sec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #dfe3e8, rgba(223, 227, 232, 0));
}

.sec-label:first-child { margin-top: 0; }

/* ── 3. Rhythm ───────────────────────────────────────────────────────────── */
.card { margin-bottom: 14px; }

/* A card immediately after a section label belongs TO that label, so it sits
   tight; the next label then opens a clear gap. */
.sec-label + .card,
.sec-label + .card-surface,
.sec-label + .tbl-wrap,
.sec-label + .table-wrap { margin-top: 0; }

/* ── 4. Table legibility at a glance ─────────────────────────────────────── */
thead th {
  background: #f7f8fa;
  border-bottom: 1px solid #e3e6ea !important;
  color: #475467;
  font-weight: 650;
}

tbody tr + tr td { border-top: 1px solid #f0f2f5; }

/* Zebra striping on long financial tables — the amortisation schedule is
   hundreds of rows and unstriped rows are genuinely hard to track across. */
.tbl-wrap tbody tr:nth-child(even) > td,
.table-wrap tbody tr:nth-child(even) > td { background: #fcfcfd; }

tbody tr:hover > td { background: #f4f7fb; }

tfoot td {
  background: #f7f8fa;
  border-top: 2px solid #dfe3e8 !important;
  font-weight: 650;
}

/* ── 5. Panel headers ────────────────────────────────────────────────────── */
.tracker-head {
  padding-bottom: 12px;
  border-bottom: 1px solid #eceff2;
  margin-bottom: 14px;
}
.tracker-title { font-size: 15px; font-weight: 650; color: #101828; }
.tracker-sub   { font-size: 12px; color: #667085; margin-top: 3px; }

/* Metric tiles need an edge or they float in the card. */
.met {
  background: #f8f9fb;
  border: 1px solid #eceff2;
  border-radius: 8px;
  padding: 10px 12px;
}
.met-lbl {
  font-size: 10px; font-weight: 650; color: #667085;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.met-val { font-weight: 650; color: #101828; }

/* ── 6. Dark mode opt-out ────────────────────────────────────────────────
   Everything above is light-specific. If a dark theme is ever switched on,
   these would fight it, so they stand down rather than half-apply. */
@media (prefers-color-scheme: dark) {
  body[data-theme="dark"] { background: inherit; }
  body[data-theme="dark"] .card,
  body[data-theme="dark"] .tbl-wrap,
  body[data-theme="dark"] .table-wrap { background: inherit; border-color: inherit; box-shadow: none; }
}

/* Print: strip the tint and the shadows, keep the structure. */
@media print {
  body { background: #fff; }
  .card, .tbl-wrap, .table-wrap { box-shadow: none; border-color: #ccc; }
  .tbl-wrap tbody tr:nth-child(even) > td,
  .table-wrap tbody tr:nth-child(even) > td { background: transparent; }
}
