/* ===========================================================================
   Theme — Report 2026-41, "Six of Nine Boundaries Breached — What
   Transgressing Planetary Limits Actually Means"

   Aesthetic: boundary wheel. The masthead carries the familiar planetary
   boundaries wheel drawn from this year's numbers: nine wedges radiating from
   a green safe-operating circle, each sized by how far its control variable
   sits beyond the boundary, with the high-risk line dashed in red (inline SVG
   data URI) on a deep-space navy field. Safe is green, the zone of increasing
   risk amber, the high-risk zone red, the unquantified grey; every h2 opens
   with a small three-zone gauge. Crimson Pro for display, Mukta for prose,
   Nova Mono for figures.

   Loaded after report.css; report.js reads these tokens for chart colours,
   and charts.js reads the --z and --c tokens so no hex lives in the script.
   =========================================================================== */

:root {
  --bg: #f3f5f2;
  --bg-card: #ffffff;
  --bg-accent: #e6eae4;
  --bg-dark: #0d1a24;
  --bg-dark-2: #08121a;

  --text: #13202a;
  --text-secondary: #34434e;
  --text-muted: #61707b;
  --text-inverse: #f3f5f2;

  --primary: #10222f;
  --primary-light: #2f6f8f;
  --accent: #d94b3d;
  --accent-light: #f0a097;

  --border: #d3dad4;
  --border-light: #e6eae4;
  --rule: #c0c9c2;

  /* zones */
  --z-safe: #3f9e6f;
  --z-zone: #e8a33a;
  --z-high: #d94b3d;
  --z-deep: #a3202a;
  --z-unk: #8a8f99;
  /* context */
  --c-ink: #2f6f8f;
  --c-good: #3f9e6f;
  --c-bad: #d94b3d;
  --c-muted: #b7bfb9;

  --chart-blue: #2f6f8f;
  --chart-blue-light: #9fc3d4;
  --chart-gold: #e8a33a;
  --chart-red: #d94b3d;
  --chart-teal: #3f9e6f;
  --chart-gray: #8a8f99;
  --chart-orange: #e07a2f;
  --chart-purple: #6a5a9a;

  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans: "Mukta", -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI", sans-serif;
  --mono: "Nova Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wheel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='840' height='330' viewBox='0 0 840 330'%3E%3Ccircle cx='610' cy='165' r='216' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Ccircle cx='610' cy='165' r='120' fill='none' stroke='%23d94b3d' stroke-opacity='0.55' stroke-dasharray='4 4'/%3E%3Cpath d='M610 165 L613.2 59.4 A105.6 105.6 0 0 1 645.1 65.4 Z' fill='%23ea913d' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L683.9 -38.0 A216.0 216.0 0 0 1 742.1 -5.9 Z' fill='%23a3202a' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L685.9 79.9 A114.0 114.0 0 0 1 721.4 140.7 Z' fill='%238a8f99' fill-opacity='0.55'/%3E%3Cpath d='M610 165 L647.3 159.6 A37.6 37.6 0 0 1 643.3 182.5 Z' fill='%234fae7d' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L654.9 192.8 A52.8 52.8 0 0 1 644.3 205.1 Z' fill='%234fae7d' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L659.4 223.8 A76.8 76.8 0 0 1 639.1 236.1 Z' fill='%23efb34e' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L629.3 223.6 A61.7 61.7 0 0 1 591.2 223.8 Z' fill='%23f1c557' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L534.5 354.5 A204.0 204.0 0 0 1 480.4 322.6 Z' fill='%23d94b3d' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L471.2 330.5 A216.0 216.0 0 0 1 427.4 280.4 Z' fill='%23a3202a' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L543.4 200.8 A75.7 75.7 0 0 1 535.6 178.9 Z' fill='%23efb44e' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L535.8 178.1 A75.3 75.3 0 0 1 535.4 154.9 Z' fill='%23efb54f' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L517.0 145.7 A95.0 95.0 0 0 1 546.1 94.7 Z' fill='%23ec9e43' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L515.2 44.9 A153.0 153.0 0 0 1 556.2 21.8 Z' fill='%23d94b3d' fill-opacity='0.9'/%3E%3Cpath d='M610 165 L536.1 -38.0 A216.0 216.0 0 0 1 601.4 -50.8 Z' fill='%23d94b3d' fill-opacity='0.9'/%3E%3Ccircle cx='610' cy='165' r='60' fill='%234fae7d' fill-opacity='0.18' stroke='%234fae7d' stroke-width='2'/%3E%3Ccircle cx='610' cy='165' r='6' fill='%230d1a24'/%3E%3C/svg%3E");
  --ramp: linear-gradient(90deg, var(--z-safe) 0 30%, var(--z-zone) 30% 65%, var(--z-high) 65% 100%);
  --duo: var(--ramp);

  --max-width: 1200px;
}

body { font-size: 1.01rem; line-height: 1.64; }

::selection { background: rgba(217, 75, 61, 0.2); }
:where(a, button, [tabindex], input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a { color: var(--primary-light); }
a:hover { color: var(--accent); }

.progress__bar { background: var(--ramp); }
.skip-link { background: var(--primary); }

/* --- masthead: the particle field ------------------------------------------------- */

.masthead {
  position: relative;
  color: var(--text-inverse);
  border-bottom: 0;
  padding: 3.3rem var(--gutter) 4rem;
  background:
    linear-gradient(90deg, rgba(8, 18, 26, 0.96) 0 36%, rgba(8, 18, 26, 0.55) 60%, rgba(8, 18, 26, 0) 85%),
    var(--wheel) right center / 840px auto no-repeat,
    radial-gradient(ellipse at 75% 50%, #15324a, #08121a 70%);
}
.masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--ramp); }
.masthead .overline { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--accent-light); margin-bottom: 1rem; }
.masthead .overline::before { content: "7 / 9 · PLANETARY BOUNDARIES · "; color: #fff; }
.masthead h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.02; letter-spacing: -0.015em; max-width: 17ch; color: #fff; }
.masthead .subtitle { font-family: var(--sans); font-weight: 500; font-size: 1.24rem; color: #d4e2e8; max-width: 52ch; }
.masthead .strapline { font-family: var(--sans); font-style: normal; font-size: 1.02rem; color: #eef3f5; border-left: 4px solid var(--accent); max-width: 64ch; background: rgba(8, 18, 26, 0.7); }
.masthead .meta-row { border-top: 1px solid rgba(255, 255, 255, 0.16); color: #b4c4cd; font-family: var(--mono); font-size: 0.8rem; position: relative; }
.masthead .meta-row strong { color: var(--accent-light); font-family: var(--mono); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; }

/* --- nav --------------------------------------------------------------------- */

.sticky-nav { background: rgba(245, 244, 242, 0.96); border-bottom: 1px solid var(--border); }
.nav-inner a { color: var(--text-muted); font-family: var(--mono); font-size: 0.8rem; }
.nav-inner a:hover { color: var(--text); }
.nav-inner a.is-active { color: var(--primary); border-bottom-color: var(--accent); }

/* --- headings with a particle glyph --------------------------------------------------- */

section > h2 {
  position: relative;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.012em;
  line-height: 1.08;
  color: var(--primary);
  border-bottom: 1px solid var(--rule);
  padding: 0 0 0.55rem 2.4rem;
}
section > h2::before {
  content: "";
  position: absolute; left: 0; top: 0.36em;
  width: 1.5rem; height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--z-safe) 0 33%, var(--z-zone) 33% 66%, var(--z-high) 66% 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.abstract h2, .endmatter h2 { padding-left: 0; border-bottom: 0; font-family: var(--mono); font-size: 0.86rem; }
.abstract h2::before, .endmatter h2::before { content: none; }
section > .section-dek { font-family: var(--sans); font-style: normal; font-weight: 500; color: var(--text-muted); font-size: 1.16rem; line-height: 1.45; max-width: none; }

.section-rule { border-top: 1px solid var(--border-light); margin: 2.6rem 0 2.8rem; }

/* --- abstract, endmatter ------------------------------------------------------------- */

.abstract { background: var(--bg-card); border: 1px solid var(--border); border-top: 6px solid transparent; border-image: var(--ramp) 1; border-radius: 0; }
.abstract h2 { color: var(--primary); letter-spacing: 0.12em; }
.endmatter .kw { background: var(--bg-accent); border-color: var(--border); font-family: var(--mono); font-size: 0.74rem; }
.endmatter dt { font-family: var(--mono); font-size: 0.72rem; }

/* --- KPI board ------------------------------------------------------------------------- */

.kpi-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1.6rem 0; }
.kpi { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 1.1rem 1.05rem 0.85rem; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--k, var(--accent)); }
.kpi--safe { --k: var(--z-safe); }
.kpi--zone { --k: var(--z-zone); }
.kpi--high { --k: var(--z-high); }
.kpi--deep { --k: var(--z-deep); }
.kpi--ink { --k: var(--c-ink); }
.kpi-value { font-family: var(--serif); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.35rem); letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.kpi-label { font-size: 0.86rem; line-height: 1.42; color: var(--text-secondary); margin-top: 0.45rem; flex: 1; }
.kpi-source { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.6rem; border-top: 1px solid var(--border-light); padding-top: 0.4rem; margin-bottom: 0.3rem; }

/* --- readout ----------------------------------------------------------------------------- */

.readout { background: var(--bg-dark); border-radius: 3px; padding: 1.15rem 1.4rem 0.45rem; margin: 1.6rem 0; position: relative; overflow: hidden; border-bottom: 6px solid transparent; border-image: var(--ramp) 1; }
.readout-title { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); margin: 0 0 0.4rem !important; }
.readout p { color: #e4e2dc; text-align: justify; hyphens: auto; -webkit-hyphens: auto; position: relative; }
.readout strong { color: #fff; }

/* --- panels ------------------------------------------------------------------------------ */

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.2rem 0; }
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 1.05rem 1.15rem 0.95rem; min-width: 0; }
.panel--wide { grid-column: 1 / -1; }
.panel--hero { margin: 1.2rem 0; padding: 1.15rem 1.25rem 1.05rem; border-top: 5px solid transparent; border-image: var(--ramp) 1; }
.panel-head { border-bottom: 1px solid var(--border-light); margin-bottom: 0.75rem; padding-bottom: 0.55rem; }
.panel-title { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; font-size: 1.16rem; line-height: 1.2; color: var(--text); margin: 0 !important; }
.panel-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); margin: 0.25rem 0 0.4rem !important; }
.panel-note { font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); margin: 0.6rem 0 0 !important; text-align: left !important; }
.panel canvas { max-width: 100%; }
.panel .chart-frame { height: 310px; }
.panel .chart-frame--tall { height: 400px; }
.panel .chart-frame--short { height: 230px; }

.stat-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 0.85rem 1rem; border-left: 6px solid var(--k, var(--accent)); }
.stat-tile--good { --k: var(--z-safe); }
.stat-tile--bad { --k: var(--z-high); }
.stat-tile--zone { --k: var(--z-zone); }
.stat-tile--ink { --k: var(--c-ink); }
.stat-tile-value { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; font-size: 1.6rem; line-height: 1.05; color: var(--text); margin: 0 !important; font-variant-numeric: lining-nums tabular-nums; }
.stat-tile-label { font-size: 0.82rem; color: var(--text-muted); margin: 0.2rem 0 0 !important; text-align: left !important; line-height: 1.4; }
.tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 1rem 0; }

/* --- controls ------------------------------------------------------------------------------ */

.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-light); }
.slider { display: grid; gap: 3px; }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slider label, .seg-wrap .seg-label { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; color: var(--text); }
.slider output { font-family: var(--mono); font-size: 0.86rem; color: var(--accent); white-space: nowrap; }
.slider .hint { font-size: 0.78rem; line-height: 1.35; color: var(--text-muted); margin: 0 !important; text-align: left !important; }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); margin: 2px 0; }
.seg-wrap { display: grid; gap: 5px; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: var(--bg-card); width: fit-content; max-width: 100%; }
.segmented button { font: inherit; font-family: var(--mono); font-size: 0.8rem; padding: 0.38rem 0.66rem; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button.is-on { background: var(--primary); color: #fff; }
.calc-note { font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); margin: 0.6rem 0 0 !important; line-height: 1.45; }
select.pick { font: inherit; font-family: var(--sans); font-size: 0.9rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-card); color: var(--text); max-width: 100%; }

/* --- atlas and country card ------------------------------------------------------------------- */

.atlas-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.atlas-wrap { position: relative; border-radius: 3px; overflow: hidden; background: #eceae4; border: 1px solid var(--border); }
.atlas { display: block; width: 100%; height: auto; }
.atlas .atlas-sea { fill: #eceae4; }
.atlas .atlas-land path { fill: #d8d6cf; stroke: #fff; stroke-width: 0.45; stroke-linejoin: round; transition: fill 0.25s; }
.atlas .atlas-dots circle { fill: #d8d6cf; stroke: var(--text); stroke-width: 0.5; }
.atlas [data-iso].is-in { cursor: pointer; }
.atlas [data-iso].is-in:hover { stroke: var(--text); stroke-width: 1.3; }
.atlas [data-iso].is-pick { stroke: var(--text); stroke-width: 2.2; }
.atlas-corner { position: absolute; left: 10px; bottom: 8px; font-family: var(--mono); font-size: 0.66rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.85); padding: 1px 6px; border-radius: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0.6rem 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.74rem; color: var(--text-secondary); }
.legend i { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.country-card { border: 1px solid var(--border); border-radius: 3px; background: var(--bg); padding: 0.85rem 0.95rem; min-height: 280px; border-top: 6px solid var(--cc, var(--rule)); }
.country-card .cc-kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 !important; }
.country-card h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; font-size: 1.45rem; color: var(--primary); margin: 0.05rem 0 0.15rem; line-height: 1.1; }
.country-card .cc-class { font-family: var(--mono); font-size: 0.76rem; margin: 0 0 0.55rem !important; color: var(--text-secondary); text-align: left !important; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 0.86rem; margin: 0; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 0.84rem; color: var(--text); text-align: right; }
.cc-spark { display: block; width: 100%; height: 56px; margin-top: 0.6rem; }
.cc-spark-lab { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted); }

/* --- physiology diagram ------------------------------------------------------------------------ */

.phys-layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.phys-wrap { border: 1px solid var(--border); border-radius: 3px; background: radial-gradient(circle at 50% 40%, #ffffff, #f0eee9); }
svg.phys { display: block; width: 100%; height: auto; font-family: var(--sans); }
svg.phys .lnk { fill: none; stroke-width: 2.4; opacity: 0.8; transition: opacity 0.2s, stroke-width 0.2s; }
svg.phys .lnk.is-dim { opacity: 0.08; }
svg.phys .lnk.is-on { stroke-width: 4; opacity: 1; }
svg.phys .nd { cursor: pointer; transition: opacity 0.2s; }
svg.phys .nd.is-dim { opacity: 0.3; }
svg.phys .nd rect { rx: 7; stroke-width: 2; }
svg.phys .nd text { font-size: 13px; font-weight: 600; fill: var(--text); pointer-events: none; }
svg.phys .nd text.sub { font-size: 10.5px; font-weight: 400; fill: var(--text-muted); }
svg.phys .col-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--text-muted); text-transform: uppercase; }
.evidence { border: 1px solid var(--border); border-radius: 3px; background: var(--bg); padding: 0.9rem 1rem; border-top: 6px solid var(--ev, var(--rule)); min-height: 240px; }
.evidence .ev-kicker { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 !important; }
.evidence h3 { font-family: var(--serif); font-weight: 800; font-size: 1.4rem; color: var(--primary); margin: 0.1rem 0 0.35rem; line-height: 1.12; }
.evidence p { font-size: 0.9rem; line-height: 1.5; text-align: left !important; }
.evidence .ev-src { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

/* --- boundary wheel and gauges -------------------------------------------------------------------------- */

.wheel-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.wheel-wrap { border: 1px solid var(--border); border-radius: 4px; background: radial-gradient(circle at 50% 50%, #12293b, #08121a 75%); }
svg.wheel { display: block; width: 100%; height: auto; }
svg.wheel .wd { cursor: pointer; transition: opacity 0.2s; stroke: #08121a; stroke-width: 1.5; }
svg.wheel .wd.is-dim { opacity: 0.62; }
svg.wheel .wd.is-on { stroke: #fff; stroke-width: 2.5; }
svg.wheel text { font-family: var(--sans); font-size: 11px; fill: #d4e2e8; pointer-events: none; }
.tcard { border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); padding: 0.95rem 1.05rem; border-top: 6px solid var(--tc, var(--rule)); min-height: 420px; }
.tcard .tc-kick { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 !important; }
.tcard h3 { font-family: var(--serif); font-weight: 800; font-size: 1.55rem; line-height: 1.08; color: var(--primary); margin: 0.1rem 0 0.4rem; }
.tcard .tc-status { display: inline-block; font-family: var(--mono); font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--tc, var(--z-unk)); margin: 0 0 0.6rem !important; }
.tcard dl { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 0.92rem; }
.tcard dt { font-family: var(--mono); font-size: 0.76rem; color: var(--text-muted); padding-top: 2px; }
.tcard dd { margin: 0; color: var(--text); line-height: 1.45; }
.gauges { display: grid; gap: 7px; }
.gauge-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 5.6rem; gap: 10px; align-items: center; cursor: pointer; padding: 3px 4px; border-radius: 3px; }
.gauge-row:hover, .gauge-row.is-on { background: var(--bg-accent); }
.gauge-row .gl { font-size: 0.86rem; line-height: 1.2; color: var(--text-secondary); }
.gauge-row .gl b { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.7rem; color: var(--text-muted); }
.gauge-row .gv { font-family: var(--mono); font-size: 0.82rem; text-align: right; color: var(--text); }
.gbar { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--z-safe) 0 25%, var(--z-zone) 25% 50%, var(--z-high) 50% 100%); opacity: 0.9; }
.gbar i { position: absolute; top: -3px; width: 4px; height: 20px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px #fff; }
.gbar u { position: absolute; top: 3px; height: 8px; border-radius: 4px; background: var(--text); opacity: 0.75; }
.gbar.unk { background: repeating-linear-gradient(45deg, var(--z-unk) 0 6px, #c9cdd3 6px 12px); }
.gscale { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 5.6rem; gap: 10px; font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted); }
.gscale span { display: flex; justify-content: space-between; }

/* --- role matrix ------------------------------------------------------------------------------------- */

table.matrix { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.matrix th, table.matrix td { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
table.matrix thead th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid var(--rule); }
table.matrix tr.is-dim { opacity: 0.32; }
table.matrix td b { font-weight: 600; }
.matrix-wrap { overflow-x: auto; }

/* --- joint-effect gauge ------------------------------------------------------------------------- */

.gauge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0.8rem 0; }
.quad-note { font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); margin: 0.4rem 0 0 !important; }

.day-strip { display: flex; height: 22px; border-radius: 3px; overflow: hidden; border: 1px solid var(--border); margin: 0.3rem 0 0; }
.day-strip span { flex: 1; min-width: 0; }
.country-card .cc-cities { font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); margin: 0.6rem 0 0 !important; text-align: left !important; }

table.matrix { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.matrix th, table.matrix td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
table.matrix thead th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid var(--rule); }
table.matrix td.m { text-align: center; font-family: var(--mono); font-weight: 700; white-space: nowrap; }
table.matrix td.m b { display: inline-block; min-width: 2.4rem; padding: 2px 6px; border-radius: 3px; }
table.matrix .pp b { background: rgba(47, 140, 106, 0.22); color: #1d6a4e; }
table.matrix .p b { background: rgba(47, 140, 106, 0.1); color: #2e7a5e; }
table.matrix .z b { background: var(--bg-accent); color: var(--text-muted); }
.matrix-wrap { overflow-x: auto; }

/* --- references, footer --------------------------------------------------------------------- */

.ref-list .ref-org { font-family: var(--mono); color: var(--primary-light); font-size: 0.72rem; }
.report-footer { border-top: 0; position: relative; padding-top: calc(3rem + 8px); }
.report-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ramp); }
.footer-inner h3 { color: #fff; font-family: var(--serif); font-weight: 800; font-size: 1.45rem; }
.footer-inner a { color: var(--accent-light); }
.cite-box { border-left-color: var(--accent); }

/* --- responsive ------------------------------------------------------------------------------ */

@media (max-width: 1000px) {
  .kpi-board, .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atlas-layout, .wheel-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .masthead { padding-top: 2.2rem; background: linear-gradient(180deg, rgba(8, 18, 26, 0.92) 0 55%, rgba(8, 18, 26, 0.45)), var(--wheel) 50% 100% / 620px auto no-repeat, #08121a; }
  .gauge { grid-template-columns: minmax(0, 1fr); }
  .gauge-row, .gscale { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 4.4rem; gap: 6px; }
  .gauge-row .gl { font-size: 0.78rem; }
  .gauge-row .gv { font-size: 0.72rem; }
  .gscale em:nth-child(4) { display: none; }
  .tcard dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tcard dd { margin-bottom: 0.45rem; }
  .segmented button { padding: 0.34rem 0.5rem; font-size: 0.74rem; }
}
@media (max-width: 420px) {
  .kpi-board, .tile-row { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .controls { display: none; }
  .masthead, .readout, .report-footer::before, .atlas-wrap, .phys-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}