/* ==========================================================================
   Cascadia shared stylesheet — Revenue Assurance page.

   Taken from the Fee Examiner module's docs/assets/cascadia.css (the most
   recent module), because cascadia-standards/design-system ships no
   stylesheet of its own — the Stage 2 brief said to copy the CSS from the
   theme folder, and there is none there (reported). Two deliberate changes:

   1. The @font-face blocks keep only local() sources. The Fee Examiner copy
      also names two woff2 subset files that exist in neither repo, so every
      page load requested them and fell back after a 404. Here the face is
      used when installed and Georgia otherwise, with no request made.
   2. Tokens that no element on this page uses (variance chips, KPI grid
      with chips) are kept for parity with the design system; nothing new
      is added. The palette and inks are the theme's values, restated.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Source Serif 4"), local("SourceSerif4-Regular");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Source Serif 4 SemiBold"), local("SourceSerif4-SemiBold");
}

:root {
  color-scheme: light;               /* Rule 5.7: no dark palette exists */

  --page:        #f6f7f4;   /* paper blended toward mist, for the ground */
  --surface:     #fcfcfa;   /* paper      */
  --ink:         #232b27;   /* basalt     — 14.1:1 on paper */
  --ink-2:       #5b6660;   /* slate moss —  5.8:1 on paper */
  --muted:       #5b6660;   /* one secondary ink; distinction by size and weight */
  --grid:        #e4e7e3;   /* mist       */
  --baseline:    #e4e7e3;
  --ring:        rgba(35, 43, 39, 0.10);

  /* Rule 2.3.1 fixed slots */
  --s1:          #1e7a4c;   /* evergreen — 5.18:1 */
  --s2:          #4c8bc0;   /* glacier   — 3.55:1 */
  --s3:          #c05a2e;   /* madrona   — 4.31:1 */
  --rain:        #9aa6a0;   /* 2.45:1 — legal only under a 4.5:1 direct label */

  /* Rule 2.3.7 text inks, from CASCADIA.textInk */
  --ink-s1:      #1e7a4c;
  --ink-s2:      #4279a7;
  --ink-s3:      #ba572d;
  --ink-serif:   #232b27;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --up-ink:      #006300;
  --up-bg:       #e9f3e9;
  --down-ink:    #b02f2f;
  --down-bg:     #faecec;
  --flat-ink:    #52514e;
  --flat-bg:     #efeeea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 48px; }

/* ---- header ---- */
.site-head { padding: 28px 0 4px; }
.kicker {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px;
}
.kicker a { color: var(--muted); text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
h1 {
  font-family: var(--serif); color: var(--ink-serif);
  font-size: clamp(22px, 4.5vw, 30px); margin: 0 0 6px; font-weight: 600;
}
.subtitle { color: var(--ink-2); margin: 0 0 10px; max-width: 62ch; }
.subtitle a, .chart-sub a { color: var(--ink-s1); text-decoration: none; }
.subtitle a:hover, .chart-sub a:hover { text-decoration: underline; }
.asof {
  display: inline-block; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 999px; padding: 4px 12px;
}
.asof strong { color: var(--ink); font-weight: 600; }

/* ---- section headings ---- */
h2 {
  font-family: var(--serif); color: var(--ink-serif);
  font-size: 17px; font-weight: 600; margin: 36px 0 4px;
}
.section-note { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* ---- KPI cards (Rule 2.5: number, label, delta — nothing more) ---- */
.kpi-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-top: 14px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 16px 18px 14px;
}
.kpi .label { font-size: 13px; color: var(--ink-2); margin: 0 0 2px; }
.kpi .value { font-size: 28px; font-weight: 650; margin: 0; line-height: 1.2; }
.kpi .value .unit { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.kpi .chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kpi .foot { margin-top: 8px; font-size: 12px; color: var(--muted); }

.chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.chip .tag { font-weight: 500; opacity: 0.85; }
.chip.up   { color: var(--up-ink);   background: var(--up-bg); }
.chip.down { color: var(--down-ink); background: var(--down-bg); }
.chip.flat { color: var(--flat-ink); background: var(--flat-bg); }

/* ---- callouts ---- */
.callouts { margin: 10px 0 0; padding: 0 0 0 1.2em; color: var(--ink-2); }
.callouts li { margin: 6px 0; max-width: 78ch; }
.callouts strong { color: var(--ink); font-weight: 600; }

/* ---- charts ---- */
.chart-grid {
  display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 14px;
}
@media (max-width: 760px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 14px 12px 6px;
  /* min-width:0 lets a grid/flex item shrink below its content's intrinsic
     width — without it the fixed-size ECharts canvas holds the card open and
     the page scrolls sideways on phones. */
  min-width: 0;
}
.chart-card h3 {
  font-family: var(--serif); color: var(--ink-serif);
  font-size: 14px; font-weight: 600; margin: 0 0 0 8px;
}
.chart-card .chart-sub { font-size: 12px; color: var(--muted); margin: 1px 0 4px 8px; }
.chart { width: 100%; height: 260px; }

/* ---- data & method / footer ---- */
.method {
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 6px 22px 14px; margin-top: 14px;
  font-size: 13.5px; color: var(--ink-2);
}
.method h2 { margin-top: 16px; }
.method ul { padding-left: 1.2em; }
.method li { margin: 7px 0; max-width: 88ch; }
.method a { color: var(--ink-s1); }
.method code { overflow-wrap: anywhere; }
.disclosure {
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--grid);
  font-size: 12.5px; color: var(--muted); max-width: 88ch;
}
.fallback-note { color: var(--muted); font-size: 13px; padding: 12px 8px; }