/* Reef Twin, customer app. Plain CSS, no web fonts, light and dark via prefers-color-scheme. */
:root {
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --text: #0f1c2d;
  --muted: #4d5d70;
  --border: #dbe2ea;
  --accent: #0b6d96;
  --accent-ink: #ffffff;
  --link: #0a6690;
  --focus: #0b6d96;
  --shadow: 0 1px 2px rgba(15, 28, 45, .06), 0 2px 8px rgba(15, 28, 45, .05);

  --navy: #0c1d36;
  --navy-2: #13294a;
  --navy-text: #dfe8f5;
  --navy-muted: #8ea2bf;
  --navy-active: #1e3f6b;

  --banner-bg: #fff4d6;
  --banner-fg: #5a3d00;
  --banner-border: #f0d48a;

  --stylised-bg: #fff1dc;
  --stylised-fg: #6b3d00;
  --stylised-border: #f3c98a;
  --real-bg: #e3f2f8;
  --real-fg: #0b4a63;
  --real-border: #a9d4e6;

  /* bands: fill colour for bars, tint and ink for chips */
  --low: #1f8a4c;     --low-bg: #ddf3e5;     --low-fg: #0c5a2c;
  --watch: #d19a0b;   --watch-bg: #fdf0c8;   --watch-fg: #6a4800;
  --high: #e0661c;    --high-bg: #fde3d1;    --high-fg: #8a3405;
  --critical: #c9302c; --critical-bg: #fadbda; --critical-fg: #8c1512;
  --row-high: #fff7f0;
  --row-critical: #fff1f0;

  /* factors */
  --heat: #e4572e;
  --exposure: #1f9a8a;
  --susc: #7457c7;

  --chart-line: #0b6d96;
  --chart-ref: #c9302c;
  --chart-grid: #e3e9ef;
  --track: #e8edf2;
  --skel: #e6ebf1;
  --skel-hi: #f3f6f9;

  /* alert severities */
  --sev-info: #0b6d96;     --sev-info-bg: #e3f2f8;     --sev-info-fg: #0b4a63;
  --sev-watch: #d19a0b;    --sev-watch-bg: #fdf0c8;    --sev-watch-fg: #6a4800;
  --sev-warning: #e0661c;  --sev-warning-bg: #fde3d1;  --sev-warning-fg: #8a3405;
  --sev-high: #c9302c;     --sev-high-bg: #fadbda;     --sev-high-fg: #8c1512;
  --sev-critical: #7a1230; --sev-critical-bg: #f4d3de; --sev-critical-fg: #5c0a22;

  /* map */
  --land: #d8d0bf;
  --land-edge: #c6bca7;
  --ocean: #e6f2f8;
  --ocean-edge: #d6e8f1;
  --outside: #f4f6f8;
  --grat: rgba(15, 28, 45, .16);
  --unknown-bg: #fff8e6;
  --unknown-border: #e8b84a;

  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a111c;
    --surface: #121c2b;
    --surface-2: #172335;
    --text: #e8eef6;
    --muted: #a5b4c6;
    --border: #26364c;
    --accent: #4fb6dd;
    --accent-ink: #04202c;
    --link: #74c6e6;
    --focus: #7fd0ef;
    --shadow: none;

    --navy: #070f1c;
    --navy-2: #0f1d33;
    --navy-text: #dfe8f5;
    --navy-muted: #8194b0;
    --navy-active: #1b3558;

    --banner-bg: #3a2c08;
    --banner-fg: #fbe2a2;
    --banner-border: #5d4712;

    --stylised-bg: #3a2708;
    --stylised-fg: #ffd59a;
    --stylised-border: #6a4a15;
    --real-bg: #0d2c3b;
    --real-fg: #a6dcf0;
    --real-border: #1d5470;

    --low: #3fbf72;     --low-bg: #11331f;     --low-fg: #94e3b2;
    --watch: #f0bd3a;   --watch-bg: #3a2f0b;   --watch-fg: #f7d98a;
    --high: #f6863f;    --high-bg: #43230e;    --high-fg: #ffbf93;
    --critical: #f0605a; --critical-bg: #4a1716; --critical-fg: #ffadaa;
    --row-high: #1f1c1c;
    --row-critical: #251719;

    --heat: #f4774f;
    --exposure: #3cc2b0;
    --susc: #a08af0;

    --chart-line: #5cc0e6;
    --chart-ref: #f0605a;
    --chart-grid: #22324a;
    --track: #223047;
    --skel: #1a2638;
    --skel-hi: #22324a;

    --sev-info: #4fb6dd;     --sev-info-bg: #0d2c3b;     --sev-info-fg: #a6dcf0;
    --sev-watch: #f0bd3a;    --sev-watch-bg: #3a2f0b;    --sev-watch-fg: #f7d98a;
    --sev-warning: #f6863f;  --sev-warning-bg: #43230e;  --sev-warning-fg: #ffbf93;
    --sev-high: #f0605a;     --sev-high-bg: #4a1716;     --sev-high-fg: #ffadaa;
    --sev-critical: #ff7fa8; --sev-critical-bg: #4a1029; --sev-critical-fg: #ffc2d6;

    --land: #3b372f;
    --land-edge: #4a453b;
    --ocean: #10283b;
    --ocean-edge: #16334a;
    --outside: #0d1622;
    --grat: rgba(232, 238, 246, .16);
    --unknown-bg: #2e2510;
    --unknown-border: #8a6a1c;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--surface); color: var(--text); padding: .5rem .75rem; border-radius: 8px;
}
.skip:focus { top: 8px; }

/* ---------- disclosure banner ---------- */
.banner {
  display: flex; gap: .6rem; align-items: flex-start; justify-content: center;
  background: var(--banner-bg); color: var(--banner-fg);
  border-bottom: 1px solid var(--banner-border);
  padding: .55rem 1rem; font-size: .9rem;
}
.banner-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.banner.is-error { background: var(--critical-bg); color: var(--critical-fg); border-color: var(--critical); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 40px); }
.workspace { display: flex; flex-direction: column; min-width: 0; }

.sidebar {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--navy-text);
  padding: 1.25rem .9rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.brand { display: flex; gap: .7rem; align-items: center; padding: 0 .4rem; }
.brand-mark { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 3px 8px rgba(15, 143, 184, .45)); }
.brand-name { display: block; font-weight: 500; font-size: 1.12rem; line-height: 1.15; letter-spacing: .01em; } .brand-name strong { font-weight: 800; color: #5fe0d2; }
.brand-sub { display: block; color: var(--navy-muted); font-size: .85rem; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-link {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: .6rem .7rem; border-radius: 10px;
  color: var(--navy-text); text-decoration: none; font-size: .97rem;
}
.nav-link svg { width: 20px; height: 20px; flex: none; }
a.nav-link:hover { background: rgba(255, 255, 255, .06); }
.nav-link.active { background: var(--navy-active); font-weight: 600; box-shadow: inset 3px 0 0 #17a2b8; }
.nav-link:focus-visible { outline-color: #7fd0ef; }
.nav-link.planned { color: var(--navy-muted); cursor: not-allowed; opacity: .75; }
.nav-link .tag {
  margin-left: auto; font-size: .72rem; line-height: 1.4;
  border: 1px solid rgba(142, 162, 191, .45); border-radius: 99px; padding: 0 .5rem; white-space: nowrap;
}
.sidebar-foot { margin-top: auto; color: var(--navy-muted); font-size: .78rem; padding: 0 .4rem; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .7rem 1.5rem;
}
.place { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.place-name { font-weight: 700; font-size: 1.15rem; }
.asof { color: var(--muted); font-size: .95rem; }
.asof time { color: var(--text); font-weight: 600; }
.seg-wrap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.seg-label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.seg {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; gap: 3px; max-width: 100%;
}
.seg button {
  font: inherit; font-size: .9rem; border: 0; background: transparent; color: var(--text);
  padding: .4rem .8rem; border-radius: 8px; cursor: pointer; text-align: left; min-height: 36px;
  display: inline-flex; align-items: center; gap: .45rem;
}
.seg button:hover { background: var(--border); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg .seg-kind {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 .4rem; border-radius: 4px; background: rgba(127, 127, 127, .18);
}

main { padding: 1.5rem; min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }

.footer {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: .9rem 1.5rem; font-size: .875rem; color: var(--muted);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 2fr); gap: .5rem 2rem; margin: 0; }
.footer-grid dt { font-weight: 700; color: var(--text); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.footer-grid dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- common pieces ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.page-head .lede { color: var(--muted); margin-top: .25rem; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.15rem 1.25rem; min-width: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.card-head p { color: var(--muted); font-size: .9rem; }

.scenario-note {
  border: 1px solid var(--real-border); background: var(--real-bg); color: var(--real-fg);
  border-radius: 10px; padding: .55rem .8rem; font-size: .93rem;
  display: flex; gap: .55rem; align-items: flex-start;
}
.scenario-note.is-stylised { border-color: var(--stylised-border); background: var(--stylised-bg); color: var(--stylised-fg); }
.scenario-note .kind {
  flex: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 .35rem; margin-top: 2px;
}

.chip {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .82rem; font-weight: 600; border-radius: 99px; padding: .1rem .6rem;
  background: var(--surface-2); color: var(--muted);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.band-low { background: var(--low-bg); color: var(--low-fg); }
.band-watch { background: var(--watch-bg); color: var(--watch-fg); }
.band-high { background: var(--high-bg); color: var(--high-fg); }
.band-critical { background: var(--critical-bg); color: var(--critical-fg); }
.fill-low { background: var(--low); }
.fill-watch { background: var(--watch); }
.fill-high { background: var(--high); }
.fill-critical { background: var(--critical); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .75rem; font-weight: 600; border-radius: 6px; padding: .05rem .45rem;
  border: 1px dashed var(--stylised-border); background: var(--stylised-bg); color: var(--stylised-fg);
}
.badge.real { border-style: solid; border-color: var(--real-border); background: var(--real-bg); color: var(--real-fg); }

/* tooltip-style note, works on hover and keyboard focus */
.tip { position: relative; display: inline-flex; }
.tip-trigger { cursor: help; }
.tip-body {
  position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px; white-space: normal;
  background: var(--text); color: var(--bg); font-size: .82rem; font-weight: 500; line-height: 1.4;
  padding: .45rem .6rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none;
}
.tip:hover .tip-body, .tip:focus-within .tip-body { opacity: 1; visibility: visible; }

.btn {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  border-radius: 9px; padding: .5rem 1rem; min-height: 40px;
}
.btn.secondary { background: transparent; color: var(--accent); }

/* ---------- overview ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi .kpi-label { font-size: .9rem; color: var(--muted); font-weight: 600; }
.kpi .kpi-value { font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.kpi .kpi-unit { font-size: 1rem; color: var(--muted); font-weight: 500; }
.kpi .kpi-foot { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.kpi.alert .kpi-value { color: var(--critical-fg); }
.factor-means { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.factor-means li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 2.6rem; gap: .5rem; align-items: center; font-size: .92rem; }
.factor-means .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter {
  font: inherit; font-size: .92rem; cursor: pointer; min-height: 38px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 99px; padding: .3rem .85rem; display: inline-flex; gap: .45rem; align-items: center;
}
.filter:hover { border-color: var(--accent); }
.filter .count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.filter[aria-pressed="true"] .count { color: inherit; }

.table-wrap { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
table.zones { width: 100%; border-collapse: collapse; font-size: .97rem; }
.zones caption { text-align: left; color: var(--muted); font-size: .88rem; padding-bottom: .6rem; }
.zones th, .zones td { padding: .65rem .6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.zones thead th { font-size: .82rem; color: var(--muted); font-weight: 700; white-space: nowrap; border-bottom-width: 2px; }
.zones th.n, .zones td.n { text-align: right; }
.sort {
  font: inherit; color: inherit; background: none; border: 0; padding: .15rem .2rem; cursor: pointer;
  display: inline-flex; gap: .3rem; align-items: center; border-radius: 4px;
}
.sort:hover { color: var(--text); }
.sort .arrow { width: 10px; opacity: .35; }
th[aria-sort] .sort { color: var(--text); }
th[aria-sort] .sort .arrow { opacity: 1; }
.zones tbody tr.is-high { background: var(--row-high); }
.zones tbody tr.is-critical { background: var(--row-critical); }
.zones tbody tr.is-high td:first-child { box-shadow: inset 4px 0 0 var(--high); }
.zones tbody tr.is-critical td:first-child { box-shadow: inset 4px 0 0 var(--critical); }
.zone-id { font-weight: 700; font-size: 1.02rem; }
.index-cell { display: grid; grid-template-columns: 3.2rem auto minmax(60px, 1fr); gap: .55rem; align-items: center; min-width: 230px; }
.index-num { font-size: 1.2rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.minibar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.minibar > span { display: block; height: 100%; border-radius: 99px; }
.susc-cell { display: inline-flex; gap: .4rem; align-items: center; }
.tag-baseline {
  font-size: .72rem; font-weight: 700; padding: 0 .4rem; border-radius: 4px;
  border: 1px dashed var(--muted); color: var(--muted); background: transparent; font-family: inherit;
}
.why { font-weight: 700; white-space: nowrap; }
.empty { padding: 1.5rem; text-align: center; color: var(--muted); }

/* ---------- zone detail ---------- */
.crumb { font-size: .95rem; }
.zone-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; }
.zone-title { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.zone-title h1 { font-size: 2rem; }
.area-tag { font-size: .9rem; font-weight: 600; padding: .15rem .6rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.zone-meta { margin-top: .5rem; color: var(--muted); font-size: .93rem; display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; }
.big-index { text-align: right; }
.big-index .label { font-size: .9rem; color: var(--muted); font-weight: 600; }
.big-index .value { font-size: 3.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.big-index .scale { font-size: 1.1rem; color: var(--muted); font-weight: 500; }
.big-index .chip { font-size: .95rem; margin-top: .4rem; }

.stack { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: var(--track); }
.stack > span { display: block; height: 100%; }
.stack > span + span { box-shadow: inset 2px 0 0 var(--surface); }
.seg-heat { background: var(--heat); }
.seg-exposure { background: var(--exposure); }
.seg-susceptibility { background: var(--susc); }
.legend { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .93rem; }
.legend li { display: inline-flex; gap: .45rem; align-items: center; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.scale-axis { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: .25rem; }

.factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.factors .heat-card { grid-column: 1 / -1; }
.factor-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; flex-wrap: wrap; }
.factor-head h2 { display: flex; align-items: center; gap: .5rem; }
.factor-head h2 .sw { width: 12px; height: 12px; border-radius: 3px; }
.factor-score { display: flex; gap: .6rem; align-items: center; }
.factor-score .value { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.factor-score .scale { color: var(--muted); font-size: .95rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.facts > div { background: var(--surface-2); border-radius: 10px; padding: .55rem .7rem; min-width: 0; }
.facts dt { font-size: .82rem; color: var(--muted); font-weight: 600; }
.facts dd { margin: .1rem 0 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.facts dd .u { font-size: .85rem; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.facts dd .badge { font-size: .7rem; margin-top: .25rem; }
.facts .fact-badge { display: block; margin-top: .3rem; }
.sub-scores { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.sub-scores li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3rem; gap: .6rem; align-items: center; font-size: .92rem; }
.sub-scores .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.chart-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 .4rem; }
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px; background: var(--surface-2); }
.toggle button { font: inherit; font-size: .88rem; border: 0; background: transparent; color: var(--text); padding: .3rem .75rem; border-radius: 7px; cursor: pointer; min-height: 34px; }
.toggle button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-weight: 700; }
.chart { width: 100%; min-height: 200px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.chart text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--chart-line); opacity: .1; }
.chart .ref { stroke: var(--chart-ref); stroke-width: 1.5; stroke-dasharray: 6 5; }
.chart .ref-label { fill: var(--chart-ref); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart .guide { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.chart .dot { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.chart .now { fill: var(--chart-ref); }
.readout { font-size: .9rem; color: var(--muted); min-height: 1.5em; margin-top: .3rem; }
.readout strong { color: var(--text); }

table.simple { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: .9rem; }
.simple th, .simple td { padding: .5rem .5rem; text-align: left; border-bottom: 1px solid var(--border); }
.simple thead th { font-size: .8rem; color: var(--muted); font-weight: 700; }
.simple .n { text-align: right; font-variant-numeric: tabular-nums; }
.simple tbody th { font-weight: 600; }
.source-line { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .85rem; font-size: .93rem; }

.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.compare-col { border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; }
.compare-col.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.compare-col h3 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: 1rem; }
.compare-col .scenario-full { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.compare-col dl { margin: .75rem 0 0; display: grid; gap: .4rem; }
.compare-col dl > div { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; border-bottom: 1px dashed var(--border); padding-bottom: .3rem; }
.compare-col dt { color: var(--muted); font-size: .92rem; }
.compare-col dd { margin: 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; display: inline-flex; gap: .4rem; align-items: center; }
.explain { margin-top: 1rem; font-size: .97rem; }
.gap-line { margin-top: .5rem; font-weight: 600; }

.method { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.method li { border-left: 4px solid var(--border); padding: .2rem 0 .2rem .9rem; }
.method li.m-heat { border-color: var(--heat); }
.method li.m-exposure { border-color: var(--exposure); }
.method li.m-susceptibility { border-color: var(--susc); }
.method li.m-risk { border-color: var(--accent); }
.method h3 { font-size: 1rem; }
.method .formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; background: var(--surface-2); border-radius: 8px; padding: .5rem .65rem; margin-top: .4rem; overflow-wrap: anywhere; }
.method .basis { font-size: .9rem; color: var(--muted); margin-top: .35rem; }
.method-foot { margin-top: 1rem; display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; align-items: center; font-size: .93rem; }
.run-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--muted); }
.notes { margin-top: .6rem; font-size: .9rem; color: var(--stylised-fg); }

/* ---------- loading and error ---------- */
.skel { background: linear-gradient(90deg, var(--skel) 0%, var(--skel-hi) 50%, var(--skel) 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 8px; }
.skel-line { height: 14px; margin: .5rem 0; }
.skel-short { width: 40%; }
.skel-big { height: 40px; width: 50%; margin-top: .6rem; }
.skel-row { height: 44px; margin: .4rem 0; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } .tip-body { transition: none; } }

.error-card { border-color: var(--critical); }
.error-card h1 { font-size: 1.4rem; color: var(--critical-fg); }
.error-card p { margin-top: .6rem; }
.error-card pre { background: var(--surface-2); border-radius: 8px; padding: .7rem .9rem; overflow-x: auto; margin: .75rem 0; font-size: .9rem; }
.error-card .detail { color: var(--muted); font-size: .9rem; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: .8rem 1rem; gap: .7rem; }
  .sidebar-foot { display: none; }
  .nav-list { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  .nav-link { flex-wrap: nowrap; white-space: nowrap; padding: .45rem .7rem; }
  .nav-link .tag { margin-left: .2rem; }
  .nav-link.active { box-shadow: inset 0 -3px 0 #17a2b8; }
  .factors { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  main { padding: 1rem; }
  .topbar { padding: .6rem 1rem; }
  .footer { padding: .8rem 1rem; }
  .card { padding: 1rem; }
  .seg { width: 100%; }
  .seg button { flex: 1 1 0; min-width: 0; }
  .seg-wrap { width: 100%; }
  .zone-hero { grid-template-columns: minmax(0, 1fr); }
  .big-index { text-align: left; }
  .big-index .value { font-size: 3rem; }
  .compare-grid { grid-template-columns: minmax(0, 1fr); }

  /* zone table becomes stacked cards */
  .table-wrap { margin: 0; padding: 0; overflow: visible; }
  table.zones, .zones tbody, .zones tr, .zones td { display: block; width: 100%; }
  .zones thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .zones tbody tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: .75rem; padding: .3rem .8rem; }
  .zones tbody tr.is-high td:first-child, .zones tbody tr.is-critical td:first-child { box-shadow: none; }
  .zones tbody tr.is-high { border-left: 5px solid var(--high); }
  .zones tbody tr.is-critical { border-left: 5px solid var(--critical); }
  .zones td { border: 0; padding: .35rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
  .zones td.n { text-align: right; }
  .zones td::before { content: attr(data-label); font-size: .85rem; color: var(--muted); font-weight: 600; text-align: left; }
  .zones td.index-td { display: block; }
  .zones td.index-td::before { display: block; margin-bottom: .25rem; }
  .index-cell { min-width: 0; grid-template-columns: auto auto minmax(0, 1fr); }
  .index-num { text-align: left; }
  .sort-mobile { display: flex !important; }
}
.sort-mobile { display: none; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .92rem; }
.sort-mobile select { font: inherit; font-size: .92rem; padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-height: 38px; }

/* programmatic focus target after route change: no ring, still announced */
h1[tabindex="-1"]:focus { outline: none; }
@media (max-width: 760px) {
  .seg { flex-direction: column; }
  .seg button { flex: none; width: 100%; }
  .zones caption { display: block; width: 100%; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi .kpi-value { font-size: 2.1rem; }
}
@media (max-width: 760px) {
  .zones tbody th { display: block; border: 0; padding: .35rem 0 .15rem; }
}

/* ======================================================================
   Alerts, map overview and evidence screens
   ====================================================================== */
.block { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; gap: .4rem; }
.btn-sm { min-height: 32px; padding: .2rem .7rem; font-size: .88rem; }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.inline-error { border: 1px solid var(--critical); background: var(--critical-bg); color: var(--critical-fg); border-radius: 10px; padding: .5rem .75rem; font-size: .92rem; margin-top: .5rem; }
.eyebrow { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: .25rem; }
code.copy { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; word-break: break-all; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 .3rem; font-size: .84rem; }

/* severity chips */
.sev-chip, .sev-count {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .8rem; font-weight: 700; border-radius: 99px; padding: .1rem .6rem;
}
.sev-chip .dot, .sev-count .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sev-info.sev-chip, .sev-count.sev-info { background: var(--sev-info-bg); color: var(--sev-info-fg); }
.sev-watch.sev-chip, .sev-count.sev-watch { background: var(--sev-watch-bg); color: var(--sev-watch-fg); }
.sev-warning.sev-chip, .sev-count.sev-warning { background: var(--sev-warning-bg); color: var(--sev-warning-fg); }
.sev-high.sev-chip, .sev-count.sev-high { background: var(--sev-high-bg); color: var(--sev-high-fg); }
.sev-critical.sev-chip, .sev-count.sev-critical { background: var(--sev-critical-bg); color: var(--sev-critical-fg); }
.sev-count { font-size: .88rem; padding: .25rem .75rem; font-weight: 600; }
.sev-count strong { font-variant-numeric: tabular-nums; }
.sev-count.is-zero { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.sev-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rule-tag { font-size: .78rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 .35rem; white-space: nowrap; }

/* alerts strip */
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alert-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center;
  border: 1px solid var(--border); border-left: 5px solid var(--sev-info); border-radius: 10px; padding: .6rem .85rem;
}
.alert-item.sev-watch { border-left-color: var(--sev-watch); }
.alert-item.sev-warning { border-left-color: var(--sev-warning); }
.alert-item.sev-high { border-left-color: var(--sev-high); }
.alert-item.sev-critical { border-left-color: var(--sev-critical); background: var(--sev-critical-bg); }
.alert-main { min-width: 0; }
.alert-title { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.alert-zone { font-size: .85rem; color: var(--muted); font-weight: 600; }
.alert-msg { margin-top: .2rem; font-size: .9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item.sev-critical .alert-msg { color: var(--text); }
.alert-why { font-weight: 700; white-space: nowrap; font-size: .93rem; }
.ruleset-status { margin-top: .75rem; }
.all-alerts { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.all-alerts summary { cursor: pointer; font-weight: 700; color: var(--link); padding: .3rem 0; display: inline-flex; gap: .4rem; align-items: center; border-radius: 4px; }
.all-alerts summary .count { font-variant-numeric: tabular-nums; background: var(--surface-2); border-radius: 99px; padding: 0 .5rem; color: var(--muted); font-size: .85rem; }
.all-alerts .table-wrap { margin-top: .4rem; }
.all-alerts td, .all-alerts th { vertical-align: top; }

/* ---------- map ---------- */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.map-card .card-head { margin-bottom: .5rem; }
.map-caption { font-weight: 600; color: var(--text) !important; }
.map-host { width: 100%; min-height: 220px; }
.reef-map { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.reef-map .plot-bg { fill: var(--outside); }
.reef-map .cell-land { fill: var(--land); stroke: var(--land-edge); stroke-width: .5; }
.reef-map .cell-ocean { fill: var(--ocean); stroke: var(--ocean-edge); stroke-width: .5; }
.reef-map .plot-frame { fill: none; stroke: var(--border); }
.reef-map .grat { stroke: var(--grat); stroke-width: 1; stroke-dasharray: 2 3; }
.reef-map .grat-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.reef-map .shelf-label { fill: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.reef-map .shelf-tick { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.reef-map .scale-bar { fill: var(--text); }
.reef-map .scale-label { fill: var(--text); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pin { cursor: pointer; outline: none; }
.pin-hit { fill: transparent; }
.pin-focus { fill: none; stroke: transparent; stroke-width: 3; }
.pin:focus-visible .pin-focus { stroke: var(--focus); }
.pin:hover .pin-dot { stroke-width: 3; }
.pin-dot { stroke: var(--surface); stroke-width: 2; }
.pin.is-selected .pin-dot { stroke: var(--text); stroke-width: 3; }
.pin-label { fill: var(--text); font-size: 12.5px; font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.pin.is-selected .pin-label { text-decoration: underline; }
.pin-ring { fill: none; stroke-width: 2.5; }
.svg-low { fill: var(--low); }
.svg-watch { fill: var(--watch); }
.svg-high { fill: var(--high); }
.svg-critical { fill: var(--critical); }
.svg-none { fill: var(--muted); }
.sev-stroke-info { stroke: var(--sev-info); }
.sev-stroke-watch { stroke: var(--sev-watch); }
.sev-stroke-warning { stroke: var(--sev-warning); }
.sev-stroke-high { stroke: var(--sev-high); }
.sev-stroke-critical { stroke: var(--sev-critical); stroke-width: 3.5; }
.map-legend { margin-top: .6rem; font-size: .88rem; gap: .4rem 1.1rem; }
.map-legend svg.lg { width: 14px; height: 14px; flex: none; }
.map-legend .lg-ring svg.lg { width: 16px; height: 16px; }
.map-legend .sw-land { background: var(--land); border: 1px solid var(--land-edge); }
.map-legend .sw-ocean { background: var(--ocean); border: 1px solid var(--ocean-edge); }
.lg-rings { flex-wrap: wrap; gap: .3rem .7rem !important; }
.lg-ring { display: inline-flex; gap: .3rem; align-items: center; }
.map-source { margin-top: .5rem; }
.skel-map { height: 380px; margin-top: .75rem; }

.map-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.panel-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.panel-head h2 { font-size: 1.4rem; }
.icon-btn { font: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--accent); }
.panel-index { margin-top: .6rem; }
.panel-index .label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.panel-index .value { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.panel-index .scale { color: var(--muted); }
.panel-factors li { grid-template-columns: 8.5rem minmax(0, 1fr) 2.6rem; }
.panel-h3 { font-size: .95rem; margin-top: 1rem; }
.facts.compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: .5rem; gap: .45rem; }
.facts.compact dd { font-size: 1.05rem; }
.facts .age { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); margin-top: .15rem; }
.compact-table { font-size: .88rem; margin-top: .4rem; }
.compact-table th, .compact-table td { padding: .35rem .3rem; }
.panel-alerts { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.panel-alerts li { display: flex; flex-wrap: wrap; gap: .3rem .45rem; align-items: center; font-size: .9rem; border-bottom: 1px dashed var(--border); padding-bottom: .4rem; }
.panel-pos { margin-top: .9rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

.zone-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; }
.zone-pick {
  font: inherit; width: 100%; text-align: left; cursor: pointer; color: var(--text);
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: .5rem .7rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .2rem .55rem; align-items: center;
}
.zone-pick:hover { border-color: var(--accent); }
.zone-pick[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.zp-id { font-weight: 800; }
.zp-area { color: var(--muted); font-size: .88rem; }
.zp-index { font-weight: 700; }
.zp-alerts { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); }

/* ---------- evidence and why ---------- */
.narrative { font-size: 1.12rem; margin-top: .6rem; max-width: 62ch; }
.next-band { margin-top: .45rem; font-weight: 700; font-size: .98rem; }
.wf { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.wf-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 9.5rem; gap: .75rem; align-items: center; }
.wf-label { display: inline-flex; gap: .45rem; align-items: center; font-size: .95rem; }
.wf-label .sw, .why-list .sw, .stacktable .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.wf-track { position: relative; height: 22px; background: var(--track); border-radius: 6px; }
.wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.wf-total .wf-track { height: 28px; }
.wf-gap {
  position: absolute; top: 3px; bottom: 3px; border: 2px dashed var(--muted); border-left: 0; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(127, 127, 127, .22) 5px 7px);
}
.wf-marker { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed var(--text); z-index: 2; }
.wf-val { font-size: .95rem; display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.wf-axis { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 9.5rem; gap: .75rem; margin-top: .35rem; }
.wf-axis-track { grid-column: 2; position: relative; height: 1.3rem; font-size: .78rem; color: var(--muted); }
.wf-axis-track > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.wf-axis-track > .wf-axis-start { left: 0; transform: none; }
.wf-axis-track > .wf-axis-end { left: auto; right: 0; transform: none; }
.wf-axis-mark { font-weight: 700; color: var(--text); }

.unknowns { border: 2px solid var(--unknown-border); background: var(--unknown-bg); }
.unknowns h2 { display: flex; gap: .5rem; align-items: center; }
.unknowns h2 svg { width: 22px; height: 22px; color: var(--stylised-fg); flex: none; }
.unknowns ul { margin: .7rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.unknowns li { font-size: .98rem; }

.why-list h3 { display: flex; gap: .45rem; align-items: center; }
.why-list p { margin-top: .3rem; }
.why-list .basis { font-size: .9rem; color: var(--muted); }

.stacktable .sw { margin-right: .4rem; vertical-align: -1px; }
.alert-card { border: 1px solid var(--border); border-left: 5px solid var(--sev-info); border-radius: 10px; padding: .85rem 1rem; }
.alert-card + .alert-card { margin-top: .85rem; }
.alert-card.sev-watch { border-left-color: var(--sev-watch); }
.alert-card.sev-warning { border-left-color: var(--sev-warning); }
.alert-card.sev-high { border-left-color: var(--sev-high); }
.alert-card.sev-critical { border-left-color: var(--sev-critical); }
.alert-card-head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: center; }
.alert-card-head h3 { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: 1.02rem; }
.alert-msg-full { margin-top: .4rem; }
.alert-card .table-wrap { margin: 0; padding: 0; }
.cond .op { font-size: 1.1rem; font-weight: 700; }
.met { display: inline-flex; gap: .3rem; align-items: center; font-weight: 700; border-radius: 99px; padding: .05rem .55rem; font-size: .85rem; }
.met svg { width: 14px; height: 14px; }
.met.yes { background: var(--low-bg); color: var(--low-fg); }
.met.no { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.ev-h { font-size: .9rem; margin: .8rem 0 .35rem; }
.ev-chips { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ev-chip { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: .2rem .45rem; font-size: .82rem; max-width: 100%; }
.ev-type { font-weight: 700; }
.ev-var { color: var(--muted); font-weight: 600; }
.ev-chip code.copy { background: var(--surface); }

.lineage { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; margin: 0; }
.lineage > div { background: var(--surface-2); border-radius: 10px; padding: .5rem .7rem; min-width: 0; }
.lineage dt { font-size: .8rem; color: var(--muted); font-weight: 700; }
.lineage dd { margin: .15rem 0 0; font-size: .92rem; overflow-wrap: anywhere; }

.assumptions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.assump { display: inline-flex; gap: .45rem; align-items: center; border-radius: 99px; padding: .2rem .7rem .2rem .3rem; font-size: .85rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.assump code { background: var(--surface); border-radius: 99px; padding: 0 .45rem; font-weight: 700; color: var(--text); }
.assump.st-ok { background: var(--low-bg); color: var(--low-fg); border-color: transparent; }
.assump.st-part { background: var(--watch-bg); color: var(--watch-fg); border-color: transparent; }
.assump.st-no { background: var(--critical-bg); color: var(--critical-fg); border-color: transparent; }
.why-foot a { font-weight: 700; }

/* ---------- responsive for the new screens ---------- */
@media (max-width: 1100px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-panel { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .alert-item { grid-template-columns: minmax(0, 1fr); }
  .alert-msg { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .wf-row { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; }
  .wf-row .wf-track { grid-column: 1 / -1; grid-row: 2; }
  .wf-axis { grid-template-columns: minmax(0, 1fr); }
  .wf-axis-track { grid-column: 1; }
  .narrative { font-size: 1.02rem; }

  /* generic stacked tables */
  .stacktable, .stacktable tbody, .stacktable tr, .stacktable td, .stacktable tbody th { display: block; width: 100%; }
  .stacktable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stacktable tbody tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: .6rem; padding: .3rem .7rem; }
  .stacktable td, .stacktable tbody th { border: 0; padding: .3rem 0; display: flex; justify-content: space-between; gap: .75rem; align-items: center; text-align: right; flex-wrap: wrap; }
  .stacktable td::before, .stacktable tbody th::before { content: attr(data-label); font-size: .82rem; color: var(--muted); font-weight: 600; text-align: left; }
  .stacktable td.n { text-align: right; }
  .stacktable code.copy { text-align: left; }
  .lineage { grid-template-columns: minmax(0, 1fr); }
  .skel-map { height: 260px; }
}
@media (max-width: 420px) {
  .zone-list { grid-template-columns: minmax(0, 1fr); }
  .panel-factors li { grid-template-columns: 7.5rem minmax(0, 1fr) 2.6rem; }
  .facts.compact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* keep hidden tooltips inside the viewport on phones (they sit in right-aligned stacked cells) */
  .tip-body { left: auto; right: 0; transform: none; max-width: min(260px, calc(100vw - 48px)); }
}

/* ---------- imagery evidence (public images, illustrative) ---------- */
.cv-section h3 { margin-top: .9rem; }
.cv-section > h3 { margin: 1rem 0 .5rem; font-size: 1.05rem; }
.cv-section .back { margin-bottom: .6rem; font-size: .92rem; }
.cv-nozone, .cv-disclosure {
  border: 1px solid var(--stylised-border); background: var(--stylised-bg); color: var(--stylised-fg);
  border-radius: 10px; padding: .6rem .85rem; font-size: .95rem;
}
.cv-disclosure { margin-bottom: 1rem; }
.cv-more { margin-top: .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cv-more > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; color: var(--link); border-radius: 10px; }
.cv-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cv-more[open] > summary { border-bottom: 1px solid var(--border); }
.cv-body { padding: .9rem; }
.cv-split { margin-bottom: .8rem; overflow-wrap: anywhere; }
.cv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: 0; }
.cv-stat { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; background: var(--surface); min-width: 0; }
.cv-stat dt { font-size: .85rem; color: var(--muted); }
.cv-stat dd { margin: 0; }
.cv-stat dd.num { font-size: 1.6rem; font-weight: 700; margin-top: .15rem; }
.cv-stat .cv-note { font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.cv-sub { font-size: 1rem; margin: 1.1rem 0 .45rem; }
.cv-recall { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cv-recall li { display: grid; grid-template-columns: 5.5rem minmax(60px, 1fr) 4rem; gap: .2rem .7rem; align-items: center; }
.cv-recall li .small { grid-column: 1 / -1; }
.cv-recall .minibar > span { background: var(--accent); }
.cv-cm .cv-off { color: var(--high-fg); }
.cv-limits { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.cv-grid { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.cv-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; min-width: 0; }
.cv-card.is-wrong { border: 2px solid var(--high); }
.cv-card figure { margin: 0; }
.cv-img { position: relative; background: var(--track); }
.cv-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.cv-badge {
  position: absolute; left: 6px; right: 6px; bottom: 6px; padding: .2rem .45rem; border-radius: 6px;
  background: var(--stylised-bg); color: var(--stylised-fg); border: 1px solid var(--stylised-border);
  font-size: .75rem; font-weight: 700; line-height: 1.25;
}
.cv-card figcaption { padding: .65rem .75rem .8rem; display: grid; gap: .3rem; }
.cv-lbl strong { text-transform: capitalize; }
.cv-bad, .cv-ok { display: inline-block; font-size: .75rem; font-weight: 700; border-radius: 99px; padding: .05rem .5rem; margin-left: .25rem; }
.cv-bad { background: var(--high-bg); color: var(--high-fg); border: 1px solid var(--high); }
.cv-ok { background: var(--low-bg); color: var(--low-fg); }
.cv-conf { display: flex; justify-content: space-between; gap: .5rem; }
.cv-credit { overflow-wrap: anywhere; }
.cv-error { border: 2px solid var(--critical); border-radius: 10px; padding: .8rem; }
.cv-section .table-wrap { margin: 0; padding: 0; }
.cv-cm { margin-top: .5rem; } .cv-cm caption { text-align: left; font-size: .85rem; color: var(--muted); padding-bottom: .3rem; }

/* ======================================================================
   Forecast screen
   ====================================================================== */
:root { --truth: #3a1d6e; --fan: #0b6d96; --bar-0: #0b6d96; --bar-1: #8a97a8; --bar-2: #1f9a8a; --bar-3: #c58b2b; }
@media (prefers-color-scheme: dark) {
  :root { --truth: #f2e8ff; --fan: #5cc0e6; --bar-0: #5cc0e6; --bar-1: #7d8ba0; --bar-2: #3cc2b0; --bar-3: #e0ad55; }
}
.fc-wait { font-size: .95rem; }
.fc-disclosure {
  display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem;
  border: 2px solid var(--unknown-border); background: var(--unknown-bg); border-radius: 10px; padding: .6rem .8rem;
}
.fc-disclosure svg { width: 20px; height: 20px; flex: none; color: var(--stylised-fg); margin-top: 1px; }

.fc-ctl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.field label, .field .field-label { display: block; font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
.field select {
  font: inherit; font-size: .97rem; width: 100%; min-height: 40px; padding: .35rem .6rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.field .hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.fc-sc { font-weight: 600; min-height: 40px; display: flex; align-items: center; }

.fc-horizons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fc-h { border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; background: var(--surface-2); min-width: 0; }
.fc-h h3 { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.fc-h-date { font-size: .88rem; font-weight: 500; }
.fc-h-label { font-size: .82rem; color: var(--muted); font-weight: 600; margin-top: .6rem; }
.fc-h-big { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fc-h-big .value { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.fc-h-big .scale { color: var(--muted); }
.fc-h-range { font-size: .9rem; margin-top: .35rem; }
.fc-rangebar { position: relative; height: 12px; border-radius: 6px; overflow: hidden; margin-top: .55rem; background: var(--track); }
.fc-rb-band { position: absolute; top: 0; bottom: 0; opacity: .28; }
.fc-rb-range { position: absolute; top: 2px; bottom: 2px; background: var(--text); opacity: .55; border-radius: 3px; }
.fc-rb-mid { position: absolute; top: -1px; bottom: -1px; width: 3px; margin-left: -1.5px; background: var(--text); }
.fb-low { background: var(--low); fill: var(--low); }
.fb-watch { background: var(--watch); fill: var(--watch); }
.fb-high { background: var(--high); fill: var(--high); }
.fb-critical { background: var(--critical); fill: var(--critical); }
.fc-dl { margin: .7rem 0 0; display: grid; gap: .4rem; }
.fc-dl dt { font-size: .8rem; color: var(--muted); font-weight: 700; }
.fc-dl dd { margin: 0; font-size: .93rem; }
.fc-chances { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .55rem; }
.fc-chances-h { font-size: .8rem; color: var(--muted); font-weight: 700; }
.fc-chances ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; }
.fc-chances li { display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; }
.fc-chances strong { font-size: 1rem; }
.fc-label { margin-top: .75rem; }

.switch {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: .3rem .9rem .3rem .4rem;
}
.switch-track { width: 38px; height: 22px; border-radius: 99px; background: var(--track); position: relative; flex: none; border: 1px solid var(--border); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: left .15s ease; }
.switch[aria-pressed="true"] { border-color: var(--truth); }
.switch[aria-pressed="true"] .switch-track { background: var(--truth); border-color: var(--truth); }
.switch[aria-pressed="true"] .switch-thumb { left: 18px; background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .switch-thumb { transition: none; } }

.fc-truth-note { border: 1px solid var(--truth); border-left-width: 5px; border-radius: 10px; padding: .6rem .8rem; margin-top: .6rem; display: grid; gap: .4rem; font-size: .93rem; }
.fc-truth-key { display: inline-block; width: 18px; height: 3px; background: var(--truth); vertical-align: middle; margin-right: .45rem; border-radius: 2px; }
.fc-truth-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; }
.fc-where { font-weight: 700; }

.fc-chart-block { margin-top: 1.2rem; min-width: 0; }
.fc-chart-block h3 { margin-bottom: .15rem; }
.chart .fan { fill: var(--fan); opacity: .2; }
.chart .truth { fill: none; stroke: var(--truth); stroke-width: 2.4; stroke-linejoin: round; }
.chart .dot.ht { fill: var(--truth); }
.chart .fc-band { opacity: .14; }
.chart .fc-band-label { font-size: 11px; font-weight: 700; fill: var(--muted); }
.chart .fc-bar-v { font-size: 11px; fill: var(--text); }
.fc-bar.fc-s0, .sw.fc-s0 { fill: var(--bar-0); background: var(--bar-0); }
.fc-bar.fc-s1, .sw.fc-s1 { fill: var(--bar-1); background: var(--bar-1); }
.fc-bar.fc-s2, .sw.fc-s2 { fill: var(--bar-2); background: var(--bar-2); }
.fc-bar.fc-s3, .sw.fc-s3 { fill: var(--bar-3); background: var(--bar-3); }
.sw.sw-ref { height: 0 !important; border-top: 2px dashed var(--chart-ref); border-radius: 0 !important; width: 18px !important; }
.fc-bars { min-height: 0; }
.fc-legend { margin-top: .4rem; font-size: .88rem; }

details.fc-data { margin-top: .4rem; }
details.fc-data > summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: .9rem; padding: .25rem 0; width: max-content; max-width: 100%; }
.fc-scroll { overflow-x: auto; max-width: 100%; }
.fc-table { font-size: .88rem; }
.fc-table caption { text-align: left; color: var(--muted); font-size: .88rem; padding-bottom: .3rem; }
.fc-scroll .fc-table th, .fc-scroll .fc-table td { white-space: nowrap; }

.fc-ev-meta { margin-bottom: .6rem; }
.fc-skill { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.fc-caveats { border-radius: 10px; padding: .7rem .9rem; margin-top: .9rem; }
.fc-caveats h3 { display: flex; gap: .5rem; align-items: center; }
.fc-caveats h3 svg { width: 20px; height: 20px; color: var(--stylised-fg); flex: none; }
.fc-rel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.fc-brier { margin-top: .7rem; font-size: .95rem; }
.fc-model { margin-top: .2rem; }
.fc-limits { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .95rem; }

.fc-rank tr.is-current { background: var(--surface-2); }
.fc-rank tr.is-current th a { font-weight: 800; }
.fc-rank td, .fc-rank th { vertical-align: middle; }

.outlook-td { white-space: nowrap; }
a.outlook { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--text); border-radius: 6px; }
a.outlook .num { font-weight: 700; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
a.outlook:hover .num { text-decoration-color: currentColor; }

@media (max-width: 980px) {
  .fc-horizons { grid-template-columns: minmax(0, 1fr); }
  .fc-rel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fc-ctl-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .switch { width: 100%; }
  .fc-rank tbody tr.is-current { border-left: 5px solid var(--accent); }
}
.nowrap { white-space: nowrap; }
.fc-key { margin-top: .35rem; }
.sw.fc-key-mid { height: 3px; width: 18px; border-radius: 2px; background: var(--chart-line); }
.sw.fc-key-fan { background: var(--fan); opacity: .35; }
.sw.fc-key-truth { height: 3px; width: 18px; border-radius: 2px; background: var(--truth); }
.chart .fc-band-label { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }

/* model selection and version comparison */
:root { --ok-bg: #e2f4e8; --ok-fg: #14532d; --ok-border: #86c9a0; }
@media (prefers-color-scheme: dark) { :root { --ok-bg: #0f2e1b; --ok-fg: #9fe0b5; --ok-border: #2f6d47; } }
.fc-sub { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.fc-sub h3 { margin: 0 0 .4rem; }
.fc-sub p { overflow-wrap: anywhere; }
.fc-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-chosen th, .fc-chosen td { font-weight: 700; }
.fc-cmp th[colspan] { text-align: center; }
.fc-cmp td:last-child, .fc-cmp th[rowspan] { vertical-align: middle; }
.badge.fc-better { border-style: solid; border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); }
.badge.fc-worse { border-style: solid; border-color: var(--stylised-border); background: var(--stylised-bg); color: var(--stylised-fg); }
.fc-cmp-note { border-left: 3px solid var(--border); padding-left: .7rem; margin: .6rem 0 0; }

/* ---------- scenario lab and optimised plan ---------- */
.ic { width: 16px; height: 16px; flex: none; }
.lab-banner {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--watch); border-left-width: 5px; background: var(--watch-bg); color: var(--watch-fg);
  border-radius: 10px; padding: .6rem .85rem; font-size: .95rem;
}
.lab-banner .ic { width: 20px; height: 20px; margin-top: 1px; }
.lab-banner p + p { margin-top: .2rem; }

.ev-badge {
  display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; max-width: 100%;
  font-size: .8rem; font-weight: 600; line-height: 1.35; border-radius: 6px; padding: .12rem .5rem;
  border: 1px solid var(--real-border); background: var(--real-bg); color: var(--real-fg);
}
.ev-badge .ev-k { font-weight: 700; }
.ev-badge.ev-base { border-color: var(--border); background: var(--surface-2); color: var(--muted); }
.ev-badge.ev-weak { border: 2px solid var(--watch); background: var(--watch-bg); color: var(--watch-fg); font-weight: 700; }
.ev-badge.ev-big { font-size: .9rem; padding: .3rem .65rem; }
.ev-badge .ic { width: 14px; height: 14px; }

.flag-box, .ok-box {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .75rem;
  border: 1px solid var(--watch); background: var(--watch-bg); color: var(--watch-fg);
  border-radius: 10px; padding: .5rem .75rem; font-size: .93rem;
}
.flag-box .ic { margin-top: 3px; }
.ok-box { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); display: block; }
.inline-err { border: 1px solid var(--critical); background: var(--critical-bg); color: var(--critical-fg); border-radius: 10px; padding: .6rem .8rem; font-size: .93rem; margin-top: .75rem; }
.inline-err p + p { margin-top: .4rem; }
.sub-h { font-size: 1rem; margin: 1.3rem 0 .35rem; }

/* cohort picker */
.coh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; }
.coh-card {
  font: inherit; color: var(--text); text-align: left; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: .15rem;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: .6rem .75rem;
}
.coh-card:hover { border-color: var(--accent); }
.coh-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--surface); }
.coh-id { font-weight: 800; font-size: 1.05rem; }
.coh-sp { font-size: .9rem; }
.coh-meta { font-size: .82rem; color: var(--muted); }
.coh-facts { margin-top: .9rem; }
.coh-facts dd { font-size: 1.05rem; }

/* intervention builder */
.bld-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bld-f { border: 0; margin: 0; padding: 0; min-width: 0; }
.bld-f legend { font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: .3rem; padding: 0; }
.opt-seg { display: flex; flex-wrap: wrap; }
.opt-seg button { flex: 1 1 auto; }
.toggle button:disabled { cursor: not-allowed; opacity: .45; text-decoration: line-through; }
.field select:disabled { opacity: .55; cursor: not-allowed; }
.bld-why { font-size: .84rem; color: var(--muted); margin-top: .35rem; }
.bld-why.is-off { color: var(--watch-fg); background: var(--watch-bg); border-radius: 8px; padding: .3rem .5rem; }
.bld-note { margin-top: .75rem; font-size: .9rem; border-left: 3px solid var(--watch); padding-left: .6rem; }
.bld-run { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.bld-opt { font-size: .95rem; min-width: 0; }
.res-empty { margin-top: 1rem; }
.res { margin-top: 1rem; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; background: var(--surface-2); }
.res-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.res-head h3 { font-size: 1.1rem; }
.res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.res-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; min-width: 0; }
.res-k { font-size: .82rem; font-weight: 700; color: var(--muted); }
.res-v { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: .2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.res-v .u { font-size: .85rem; font-weight: 500; color: var(--muted); }
.res-d { font-size: .85rem; font-weight: 700; color: var(--muted); }
.res-l { font-size: .84rem; color: var(--muted); margin-top: .25rem; overflow-wrap: anywhere; }
.up { color: var(--low-fg); }
.down { color: var(--critical-fg); }
.res-ev { margin-top: 1rem; }
.res-ev h4 { font-size: .95rem; margin: 0 0 .4rem; }
.coef-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.coef-list li { border-left: 3px solid var(--border); padding-left: .65rem; }
.conf { font-size: .78rem; font-weight: 700; border-radius: 99px; padding: 0 .5rem; background: var(--surface); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.conf.conf-none { border-color: var(--watch); background: var(--watch-bg); color: var(--watch-fg); white-space: normal; }

/* comparison */
.rec-grid, .alt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.alt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-card, .alt-card { border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; min-width: 0; display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.rec-rank { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.rec-card h4, .alt-card h3 { font-size: .98rem; margin: 0; }
.rec-dl { margin: 0; display: grid; gap: .25rem; width: 100%; font-size: .88rem; }
.rec-dl > div { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px dashed var(--border); padding-bottom: .2rem; }
.rec-dl dt { color: var(--muted); }
.rec-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.alt-diff { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; }
.cmp-filters { margin-top: 1.2rem; align-items: center; }
.sc-block { margin-top: .4rem; min-width: 0; }
.sc-plot { min-height: 0; }
.chart .ax-t { font-weight: 700; fill: var(--muted); }
.chart .wk { stroke: var(--muted); stroke-width: 1.2; opacity: .7; }
.chart .pt { cursor: pointer; outline: none; }
.chart .pt-dot { stroke: var(--surface); stroke-width: 1.5; }
.chart .pt-ok .pt-dot { fill: var(--chart-line); }
.chart .pt-dom .pt-dot { fill: var(--track); stroke: var(--muted); stroke-width: 1.2; }
.chart .pt-dom { opacity: .5; }
.chart .pt-dom:focus, .chart .pt-dom:hover { opacity: 1; }
.chart .pt-weak .pt-dot { stroke: var(--watch); stroke-width: 2.4; }
.chart .pt-base .pt-dot { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.chart .pt-lbl { font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.chart .pt-halo { fill: none; stroke: transparent; stroke-width: 3; }
.chart .pt:hover .pt-halo { stroke: var(--muted); }
.chart .pt:focus .pt-halo, .chart .pt:focus-visible .pt-halo { stroke: var(--focus); }
.sc-legend { font-size: .85rem; margin-top: .3rem; }
.sk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sk-ok { background: var(--chart-line); }
.sk-dom { background: var(--track); border: 1.5px solid var(--muted); }
.sk-weak { background: transparent; border: 2.5px solid var(--watch); }
.sk-base { background: var(--text); border-radius: 2px; transform: rotate(45deg); width: 10px; height: 10px; }

.sl-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 10px; }
.sl-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sl-table { margin: 0; font-size: .9rem; min-width: 760px; }
.sl-table th, .sl-table td { vertical-align: top; }
.sl-table thead th { white-space: nowrap; background: var(--surface-2); }
.sl-table td.n, .sl-table th.n { white-space: nowrap; }
.sl-table tr.is-base { background: var(--real-bg); }
.sl-table tr.is-dom { color: var(--muted); }
.sl-table tr.is-fail { background: var(--row-high); }
.st-table { min-width: 620px; }
.opt-l { font-weight: 600; }
.cmp-table tbody th[scope="row"] { min-width: 13rem; }
.plan-table td:nth-child(2) { min-width: 14rem; }
.st-table tbody th[scope="row"] { min-width: 13rem; }
.mk { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; border-radius: 6px; padding: .05rem .45rem; margin: 0 .25rem .2rem 0; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.mk .ic { width: 13px; height: 13px; }
.mk-base { border-color: var(--real-border); background: var(--real-bg); color: var(--real-fg); }
.mk-viol { border-color: var(--critical); background: var(--critical-bg); color: var(--critical-fg); }
.mk-near { border-color: var(--watch); background: var(--watch-bg); color: var(--watch-fg); }
.mk-chg { border-color: var(--accent); color: var(--accent); background: transparent; }
.mk-same { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); }
.chg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }

.repro { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.repro h3 { font-size: 1rem; margin-bottom: .4rem; }
.kv { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .4rem .9rem; font-size: .9rem; }
.kv dt { font-size: .78rem; color: var(--muted); font-weight: 700; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv-h { font-size: .8rem; font-weight: 700; color: var(--muted); margin: .7rem 0 .25rem; text-transform: uppercase; letter-spacing: .04em; }
.repro-act { margin-top: .8rem; }
.repro-res { margin-top: .6rem; border-radius: 10px; padding: .55rem .75rem; font-size: .93rem; border: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); }
.repro-res.bad { border-color: var(--critical); background: var(--critical-bg); color: var(--critical-fg); }
.repro-res p + p { margin-top: .25rem; }

/* policy form */
.pol-set { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.pol-set legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: .5rem; }
.pol-note { margin-bottom: .6rem; }
.pol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem 1rem; }
.pol-field { min-width: 0; }
.pol-input { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: center; gap: .5rem; }
.pol-input input {
  font: inherit; font-size: .97rem; width: 100%; min-width: 0; min-height: 40px; padding: .35rem .55rem;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums;
}
.pol-input input[aria-invalid="true"] { border: 2px solid var(--critical); }
.pol-unit { font-size: .82rem; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.pol-err { font-size: .84rem; font-weight: 600; margin-top: .25rem; }
.pol-err:empty { display: none; }
.pol-err.lvl-error { color: var(--critical-fg); }
.pol-err.lvl-warning { color: var(--watch-fg); }
.pol-caps { margin: 0 0 1rem; font-size: .92rem; }
.pol-caps summary { cursor: pointer; color: var(--link); font-weight: 600; }
.cap-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.pol-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.issues { margin-top: 1rem; border-radius: 10px; padding: .65rem .85rem; border: 1px solid var(--critical); border-left-width: 5px; background: var(--critical-bg); color: var(--critical-fg); }
.issues.is-warn { border-color: var(--watch); background: var(--watch-bg); color: var(--watch-fg); }
.issues:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.issue-list { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .93rem; }
.issue-list li { overflow-wrap: anywhere; }
.lvl-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 0 .35rem; border: 1px solid currentColor; }
.issue-list .lvl-error { color: var(--critical-fg); }
.issue-list .lvl-warning { color: var(--watch-fg); }
.plan-progress { margin-top: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .6rem; align-items: center; font-size: .95rem; }
.plan-progress .pbar { grid-column: 1 / -1; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--track); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pbar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; position: relative; }
.pbar span { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 99px; background: var(--accent); animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .spin, .pbar span { animation: none; } .pbar span { left: 0; width: 100%; opacity: .4; } }
#plan-status:empty { display: none; }
#plan-status > p { margin-top: .75rem; }
.plan-result { display: flex; flex-direction: column; gap: 1.25rem; }
.plan-bad { border-color: var(--critical); }
.plan-bad h2 { color: var(--critical-fg); }
.plan-bad p { margin-top: .5rem; }
.plan-kpis .kpi-value { font-size: 2rem; }
.dl.up { color: var(--low-fg); font-weight: 700; }
.dl.down { color: var(--critical-fg); font-weight: 700; }

.cu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cu-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; }
.cu-top { display: flex; justify-content: space-between; gap: .4rem .75rem; flex-wrap: wrap; align-items: baseline; font-size: .93rem; }
.cu-name { font-weight: 600; min-width: 0; }
.cu-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.cu-val strong { color: var(--text); }
.cu-bar { position: relative; height: 12px; border-radius: 99px; background: var(--track); margin-top: .3rem; }
.cu-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--chart-line); }
.cu-bar > i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); opacity: .7; }
.cu.is-near .cu-bar > span { background: var(--watch); }
.cu.is-near .cu-bar { box-shadow: 0 0 0 2px var(--watch); }
.cu-bar.stab > span { background: var(--low); }
.cu.is-fragile .cu-bar.stab > span { background: var(--watch); }
.rob-top { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: .5rem; }
.rob-big .kpi-label { font-size: .9rem; color: var(--muted); font-weight: 600; }
.rob-big .kpi-value { font-size: 2.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rob-big .kpi-foot { font-size: .85rem; color: var(--muted); }
.rob-say .flag-box, .rob-say .ok-box { margin-top: 0; }
.rob-say p.small { margin-top: .4rem; }
.ex-body { display: grid; gap: .6rem; max-width: 75ch; }
.kv-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.send-card { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

@media (max-width: 1100px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bld-grid { grid-template-columns: minmax(0, 1fr); }
  .alt-grid, .cu-zones, .rob-top { grid-template-columns: minmax(0, 1fr); }
  .plan-kpis .kpi-value { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .res-grid { grid-template-columns: minmax(0, 1fr); }
  .coh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pol-grid { grid-template-columns: minmax(0, 1fr); }
}
.plan-table tbody th { white-space: nowrap; }
.sl-table td .ev-badge { min-width: 11rem; }

/* ======================================================================
   Mission review (phase 6): list, approval workflow, route map, schedule
   ====================================================================== */
:root { --tt-0: #0b6d96; --tt-1: #1f9a8a; --tt-2: #7457c7; --tt-3: #c2570c; --tt-4: #8a6d00; --tt-5: #b4236b; --leg: #0b4a63; --detour: #c2410c; }
@media (prefers-color-scheme: dark) { :root { --tt-0: #4fb6dd; --tt-1: #3cc2b0; --tt-2: #a08af0; --tt-3: #f6863f; --tt-4: #e5c04a; --tt-5: #f07aae; --leg: #a6dcf0; --detour: #ff9f5a; } }

.msn-root { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.msn-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .5rem; font-size: .95rem; }
.msn-meta .mk { margin: 0; }
.synth-banner { border-color: var(--stylised-border); }
.synth-inline { display: flex; gap: .45rem; align-items: flex-start; color: var(--stylised-fg); margin-top: .5rem; }
.synth-inline .ic { margin-top: 2px; }
.hint-line { margin-top: .9rem; }
.ml-table { min-width: 860px; }

/* state badge */
.st-badge { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .85rem; font-weight: 700; border-radius: 99px; padding: .12rem .65rem; border: 1px solid; }
.st-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tone-info { background: var(--real-bg); color: var(--real-fg); border-color: var(--real-border); }
.tone-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.tone-warn { background: var(--watch-bg); color: var(--watch-fg); border-color: var(--watch); }
.tone-bad { background: var(--critical-bg); color: var(--critical-fg); border-color: var(--critical); }

/* on this page */
.jump { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; font-size: .88rem; }
.jump-lab { font-weight: 700; color: var(--muted); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.jump-btn { font: inherit; font-size: .86rem; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--link); border-radius: 99px; padding: .2rem .7rem; min-height: 32px; }
.jump-btn:hover { border-color: var(--accent); }

/* stepper */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.step { position: relative; display: flex; gap: .55rem; align-items: flex-start; padding: .2rem .75rem .2rem 0; min-width: 0; }
.step::after { content: ""; position: absolute; top: 17px; left: 40px; right: 8px; height: 3px; border-radius: 2px; background: var(--track); }
.step:last-child::after { display: none; }
.step.is-done::after { background: var(--ok-border); }
.step-dot { position: relative; z-index: 1; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95rem; border: 2px solid var(--border); background: var(--surface); color: var(--muted); }
.step-dot .ic { width: 18px; height: 18px; }
.step.is-done .step-dot { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-fg); }
.step.is-current .step-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--real-bg); }
.step-txt { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; background: var(--surface); padding-right: .4rem; margin-top: 2px; }
.step-name { font-weight: 700; line-height: 1.25; }
.step.is-todo .step-name { color: var(--muted); font-weight: 600; }
.step-note { font-size: .8rem; color: var(--muted); }
.step.is-current .step-note { color: var(--text); font-weight: 600; }
.side-row { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.side-lab { font-size: .85rem; font-weight: 700; color: var(--muted); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.side-st { display: inline-flex; gap: .3rem; align-items: center; font-size: .86rem; border-radius: 8px; padding: .15rem .55rem; border: 1px dashed; opacity: .75; }
.side-st.is-current { opacity: 1; border-style: solid; border-width: 2px; }

/* decision panel */
.decide-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.decide-grid .sub-h:first-child { margin-top: 0; }
.field textarea, .field input[type="text"] {
  font: inherit; font-size: .97rem; width: 100%; min-height: 64px; padding: .45rem .6rem; border-radius: 9px; resize: vertical;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.field textarea[aria-invalid="true"] { border: 2px solid var(--critical); }
.field + .field { margin-top: .75rem; }
.acting select { font-weight: 600; }
.auth-note { display: flex; gap: .4rem; align-items: flex-start; margin-top: .45rem; color: var(--stylised-fg); }
.auth-note .ic { margin-top: 2px; }
.roles-line { margin-top: .4rem; color: var(--muted); }
.act-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.act-row { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; }
.act-row .btn { min-width: 9.5rem; }
.btn.is-off { opacity: .62; border-style: dashed; cursor: not-allowed; }
.act-why { font-size: .85rem; color: var(--muted); display: block; min-width: 0; overflow-wrap: anywhere; flex: 1 1 14rem; }
.act-why .ic { display: inline-block; vertical-align: -3px; margin-right: .25rem; }
.act-why.is-on { color: var(--ok-fg); font-weight: 600; }
.act-status:empty { display: none; }
.act-msg { display: flex; gap: .5rem; align-items: flex-start; margin-top: .75rem; border-radius: 10px; padding: .55rem .75rem; font-size: .93rem; border: 1px solid var(--border); background: var(--surface-2); }
.act-msg .ic { margin-top: 3px; }
.act-msg.is-ok { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); }
.act-msg.is-bad { border-color: var(--critical); background: var(--critical-bg); color: var(--critical-fg); font-weight: 600; }
.act-msg .spin { flex: none; }
.ov-box { border: 1px solid var(--border); border-radius: 10px; padding: .8rem .9rem; background: var(--surface-2); }
.ov-box .sub-h { margin-top: 0; }
.ov-need { list-style: none; margin: .5rem 0 .8rem; padding: 0; display: grid; gap: .4rem; font-size: .92rem; }
.ov-box .act-row { margin-top: .75rem; }
.appr-list, .rule-list { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .92rem; display: grid; gap: .25rem; }
.appr-list { list-style: none; padding: 0; }
.appr-list li { display: flex; gap: .35rem; align-items: flex-start; color: var(--ok-fg); }
.appr-list .ic { margin-top: 3px; }
.rules { margin-top: 1rem; font-size: .92rem; }
.rules summary, .legs-more summary, .sched-table summary, .wo-more summary, .evid-more summary { cursor: pointer; color: var(--link); font-weight: 600; }
.rules .sl-scroll { margin-top: .6rem; }
.tr-table { min-width: 640px; }

/* kpis */
.msn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.msn-kpi .kpi-value { font-size: 1.9rem; }
.vc { font-variant-numeric: tabular-nums; }
.vc-pass { color: var(--ok-fg); }
.vc-warn { color: var(--watch-fg); }
.vc-fail { color: var(--critical-fg); }
.vc-sep { color: var(--muted); font-weight: 400; margin: 0 .2rem; }

/* validation checks */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .85rem; margin-top: .75rem; }
.chk { border: 1px solid var(--border); border-left-width: 6px; border-radius: 10px; padding: .75rem .9rem; min-width: 0; background: var(--surface); }
.chk-pass { border-left-color: var(--low); }
.chk-warn { border-color: var(--watch); background: var(--watch-bg); }
.chk-fail { border-color: var(--critical); background: var(--critical-bg); }
.chk-warn, .chk-fail { color: var(--text); }
.chk-top { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.chk-top h3 { font-size: 1rem; }
.chk-id { margin-top: .15rem; font-size: .82rem; color: var(--muted); }
.res-tag { display: inline-flex; gap: .25rem; align-items: center; flex: none; font-size: .78rem; font-weight: 800; border-radius: 6px; padding: .1rem .45rem; border: 1px solid; }
.res-pass { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.res-warn { color: var(--watch-fg); background: var(--surface); border-color: var(--watch); }
.res-fail { color: var(--critical-fg); background: var(--surface); border-color: var(--critical); }
.chk-dl { margin: .5rem 0 0; display: grid; gap: .35rem; font-size: .9rem; }
.chk-dl dt { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.chk-dl dd { margin: 0; overflow-wrap: anywhere; }
.chk-warn .chk-dl dt, .chk-fail .chk-dl dt, .chk-warn .chk-id, .chk-fail .chk-id { color: var(--text); opacity: .8; }
.evid { margin: .1rem 0 0; padding-left: 1.05rem; display: grid; gap: .1rem; }
.chk-ovr { display: flex; gap: .4rem; align-items: flex-start; margin-top: .6rem; font-size: .88rem; font-weight: 700; color: var(--watch-fg); }
.chk-ovr.is-done { color: var(--ok-fg); }
.chk-ovr .ic { margin-top: 2px; }

/* route map */
.trip-pick { min-width: min(100%, 22rem); flex: 1 1 18rem; max-width: 30rem; }
.msn-map-host { width: 100%; min-height: 200px; }
.msn-map .xzone { fill: url(#xhatch); stroke: var(--critical); stroke-width: 1.6; }
.xhatch-line { stroke: var(--critical); stroke-width: 1.4; opacity: .55; }
.msn-legend .xzone { fill: var(--critical-bg); stroke: var(--critical); stroke-width: 1.6; }
.msn-map .xzone-label { fill: var(--critical-fg); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.leg { fill: none; stroke: var(--leg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.leg.is-detour { stroke: var(--detour); stroke-dasharray: 7 4; }
.leg-arrow { fill: var(--leg); }
.leg-arrow.is-detour { fill: var(--detour); }
.wpt { fill: var(--surface); stroke: var(--detour); stroke-width: 2; }
.base-mark { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.stop-mark { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.zone-mark { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.stop-num { fill: var(--accent-ink); font-size: 11px; font-weight: 800; }
.map-lbl { fill: var(--text); font-size: 12px; font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.map-lbl.is-dim { fill: var(--muted); font-weight: 700; }
.msn-legend { font-size: .86rem; gap: .4rem 1.1rem; }
.msn-legend svg.lg { width: 22px; height: 14px; flex: none; }
.map-alt { margin-top: .6rem; font-size: .93rem; }
.legs-more { margin-top: .5rem; font-size: .92rem; }
.legs-more .sl-scroll { margin-top: .5rem; }
.legs-table { min-width: 620px; }

/* schedule chart */
.gantt-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.gantt-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gantt { display: block; font-family: inherit; }
.gantt-empty { padding: .8rem; }
.g-row { fill: transparent; stroke: var(--border); stroke-width: 1; }
.g-row.is-alt { fill: var(--surface-2); }
.g-lab { fill: var(--text); font-size: 12.5px; font-weight: 700; }
.g-lab.is-small { fill: var(--muted); font-size: 10.5px; font-weight: 600; }
.g-tick { stroke: var(--grat); stroke-width: 1; }
.g-ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.wx { stroke: none; }
.wx-ok { fill: var(--low); opacity: .55; }
.wx-some { fill: var(--watch); }
.wx-all { fill: var(--critical); }
.wx-none { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; opacity: .6; }
.wx-col-all { fill: var(--critical); opacity: .13; }
.wx-col-some { fill: var(--watch); opacity: .14; }
.permit-line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.permit-lab { fill: var(--text); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.trip-blk { cursor: pointer; outline: none; }
.trip-blk rect:first-child { stroke: var(--surface); stroke-width: 1; }
.trip-blk:hover rect:first-child { stroke: var(--text); stroke-width: 1.5; }
.trip-blk:focus-visible rect:first-child { stroke: var(--focus); stroke-width: 3; }
.trip-blk.is-sel rect:first-child { stroke: var(--text); stroke-width: 2.5; }
.trip-blk .nofc { fill: var(--surface); opacity: .75; }
.tt-0 rect:first-child, .sw.tt-0 { fill: var(--tt-0); background: var(--tt-0); }
.tt-1 rect:first-child, .sw.tt-1 { fill: var(--tt-1); background: var(--tt-1); }
.tt-2 rect:first-child, .sw.tt-2 { fill: var(--tt-2); background: var(--tt-2); }
.tt-3 rect:first-child, .sw.tt-3 { fill: var(--tt-3); background: var(--tt-3); }
.tt-4 rect:first-child, .sw.tt-4 { fill: var(--tt-4); background: var(--tt-4); }
.tt-5 rect:first-child, .sw.tt-5 { fill: var(--tt-5); background: var(--tt-5); }
.gantt-legend { font-size: .86rem; gap: .4rem 1.1rem; }
.sw.wx-sw-all { background: var(--critical); }
.sw.wx-sw-some { background: var(--watch); }
.sw.wx-sw-none { background: transparent; border: 1px dashed var(--muted); }
.sw.sw-permit { width: 0 !important; height: 14px !important; border-left: 2px dashed var(--text); border-radius: 0 !important; }
.trip-detail { margin-top: 1rem; border: 2px solid var(--accent); border-radius: 10px; padding: .85rem 1rem; background: var(--surface-2); }
.trip-detail[hidden] { display: none; }
.trip-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; }
.trip-head h3:focus { outline: none; }
.trip-detail .sl-scroll { margin-top: .75rem; background: var(--surface); }
.stops-table { min-width: 560px; }
.trip-act { margin-top: .7rem; }
.sched-table { margin-top: .8rem; font-size: .92rem; }
.sched-table .sl-scroll { margin-top: .5rem; }
.sched-table .sl-table { min-width: 980px; }

/* crew, monitoring */
.crew-table { min-width: 640px; }
.crew-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
.crew-kv .kv { grid-template-columns: minmax(0, 1fr); }
.measure-list { margin: .2rem 0 .6rem; padding-left: 1.1rem; font-size: .93rem; }
.mon-table { min-width: 640px; }

/* resilience */
.sim-ctl { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.sim-ctl .field { flex: 1 1 18rem; min-width: 0; }
.sim-out { margin-top: .9rem; }
.sim-out:focus { outline: none; }
.sim-desc { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sim-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .75rem; }
.sim-col { border: 1px solid var(--border); border-radius: 10px; padding: .75rem .85rem; min-width: 0; }
.sim-col h3 { font-size: 1rem; margin-bottom: .4rem; }
.sim-col .ok-box, .sim-col .bad-box { margin-top: 0; }
.bad-box { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--critical); background: var(--critical-bg); color: var(--critical-fg); border-radius: 10px; padding: .5rem .75rem; font-size: .93rem; }
.bad-box .ic, .ok-box .ic { margin-top: 3px; }
.ok-box .ic { display: inline-block; vertical-align: -2px; }
.fail-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; }
.fail-list li { display: flex; gap: .4rem; align-items: flex-start; color: var(--critical-fg); }
.fail-list li > div { color: var(--text); overflow-wrap: anywhere; }
.fail-list .ic { margin-top: 3px; }
.sim-replan { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.sim-replan .act-row { margin-top: .6rem; }

/* audit */
.chain-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.chain-badge { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; font-size: .88rem; font-weight: 700; border-radius: 8px; padding: .25rem .6rem; border: 1px solid; }
.chain-badge.is-ok { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.chain-badge.is-bad { color: var(--critical-fg); background: var(--critical-bg); border-color: var(--critical); }
.chain-out:empty { display: none; }
.chain-out { margin-bottom: .6rem; }
.audit-table { min-width: 980px; }
.audit-table td.ad { font-size: .85rem; max-width: 26rem; overflow-wrap: anywhere; }
.audit-table .st-badge { font-size: .76rem; padding: .02rem .45rem; }

/* work orders */
.wo-table { min-width: 860px; }
.wo-table tr.wo-more td { background: var(--surface-2); padding-top: .3rem; }
.wo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; margin-top: .5rem; }
.check-list { margin: .2rem 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
.payload { margin: .3rem 0 0; max-height: 220px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .65rem; font-size: .78rem; white-space: pre-wrap; word-break: break-all; }
.payload:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sim-tag { display: inline-flex; vertical-align: middle; margin-left: .4rem; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: .05rem .45rem; border: 1px dashed var(--stylised-border); background: var(--stylised-bg); color: var(--stylised-fg); }
.ev-table { min-width: 900px; }

/* send to mission planning (optimised plan screen) */
.send-card h2 { font-size: 1.2rem; }
.send-form-host { width: 100%; }
.send-form { width: 100%; margin-top: .5rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.send-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; }
.send-grid .field + .field { margin-top: 0; }
.send-plans { border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
.send-plans legend { font-weight: 700; margin-bottom: .45rem; padding: 0; }
.plan-opt { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem; cursor: pointer; margin-bottom: .45rem; }
.plan-opt:hover { border-color: var(--accent); }
.plan-opt input { margin-top: .3rem; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.plan-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ovr-note { display: inline-flex; gap: .3rem; align-items: center; color: var(--watch-fg); font-weight: 600; margin-top: .15rem; }

@media (max-width: 980px) {
  .decide-grid, .sim-cols, .wo-grid, .send-grid { grid-template-columns: minmax(0, 1fr); }
  .crew-kv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .stepper { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .step { padding: 0 0 .35rem; }
  .step::after { top: 36px; bottom: -4px; left: 16px; right: auto; width: 3px; height: auto; }
  .msn-kpi .kpi-value { font-size: 1.6rem; }
  .act-row .btn { min-width: 0; flex: 1 1 auto; }
  .jump-lab { width: 100%; }
}
.ml-table tbody th code, .wo-table tbody th code, .ev-table tbody th code { white-space: nowrap; }
.tall-scroll { max-height: 36rem; overflow-y: auto; }
.tall-scroll thead th { position: sticky; top: 0; z-index: 1; }
.reef-map.msn-map { overflow: hidden; }
.sl-scroll, .gantt-scroll { position: relative; } /* keeps visually hidden text inside the scroller */

/* real versus calculated */
.kind { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; border: 1px solid; }
.kind-real { background: #e3f3ea; color: #0d5c33; border-color: #8fcfa9; }
.kind-calc { background: #e4eefb; color: #1b4a8a; border-color: #9bbbe8; }
.kind-sim { background: #fdf0d8; color: #7a4b00; border-color: #e5c27a; }
.kind-legend { list-style: none; display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; padding: 0; }
.rvc-table td.c-real { background: rgba(60, 170, 110, .07); }
.rvc-table td.c-calc { background: rgba(60, 120, 210, .07); }
.rvc-table td.c-sim { background: rgba(230, 160, 40, .09); }
.rvc-table thead th { vertical-align: bottom; }
.note-warn { background: var(--banner-bg, #fff4d6); color: var(--banner-fg, #5a4300); border: 1px solid var(--banner-border, #e8cf86); padding: .5rem .75rem; border-radius: 8px; margin-top: .6rem; }
@media (prefers-color-scheme: dark) {
  .kind-real { background: #11301f; color: #8fdcb0; border-color: #25583c; }
  .kind-calc { background: #14284a; color: #a9c6f2; border-color: #2b4a80; }
  .kind-sim { background: #3a2a0a; color: #f0cc84; border-color: #6b5016; }
}

/* secondary navigation */
.nav-more summary { cursor: pointer; color: var(--navy-muted); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; padding: .6rem .9rem .3rem; list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more-note { color: var(--navy-muted); font-size: .75rem; padding: 0 .9rem .3rem; }
.nav-sub { list-style: none; margin: 0; padding: 0; }
.about-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.about-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.about-list li { margin: .3rem 0; }

/* zone drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(8, 16, 28, .45); z-index: 40; }
.zone-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--surface); color: var(--text); z-index: 41; box-shadow: -8px 0 24px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 1.2rem; }
.drawer-tabs { display: flex; gap: .25rem; padding: 0 1rem; border-bottom: 1px solid var(--border); }
.drawer-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .7rem .8rem; font: inherit; color: var(--muted); cursor: pointer; }
.drawer-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.drawer-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.drawer-body h3 { font-size: .95rem; margin: 1.1rem 0 .4rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.drawer-body h3:first-child { margin-top: 0; }
.drawer-dl { margin: 0; } .drawer-dl div { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.drawer-dl dt { color: var(--muted); } .drawer-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.big-num { font-size: 1.8rem; font-weight: 700; margin: .2rem 0 .5rem; }
.rvc-summary { margin: .6rem 0; font-size: 1rem; }
.cmp { font-weight: 600; } .cmp-ok { color: #0d5c33; } .cmp-off { color: #9a3b00; }
@media (prefers-color-scheme: dark) { .cmp-ok { color: #8fdcb0; } .cmp-off { color: #f0b070; } }
.zone-thumb { margin: 0; display: flex; gap: .5rem; align-items: center; }
.zone-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.drawer-img img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* replay bar */
.replay-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: .6rem 1.25rem; position: sticky; top: 0; z-index: 20; }
.replay-row { display: flex; gap: 1rem; align-items: center; }
.replay-track { flex: 1; min-width: 0; position: relative; }
.replay-track svg { width: 100%; height: 54px; display: block; overflow: visible; }
.replay-track input[type=range] { width: 100%; margin: 0; }
.rline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rcur { stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ev line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: .6; }
.ev circle { fill: #c97a00; stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.ev-noaa_warning circle { fill: #d9a400; } .ev-noaa_alert1 circle { fill: #c0392b; } .ev-index_high circle { fill: #e0662c; } .ev-peak circle { fill: #8e1b1b; } .ev-survey circle { fill: #7a4bd0; } .ev-default circle { fill: var(--accent); }
.replay-date { min-width: 190px; font-size: .95rem; }
@media (max-width: 800px) { .replay-row { flex-wrap: wrap; } .replay-date { min-width: 0; } }

/* zone story */
.story-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; position: sticky; top: 0; z-index: 15; background: var(--bg); padding: .4rem 0; }
.story-nav a { padding: .45rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; font-size: .9rem; }
.story-nav a:hover { border-color: var(--accent); }
.step-n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .85rem; margin-right: .3rem; }
.step-title { margin: 1.6rem 0 .6rem; font-size: 1.3rem; scroll-margin-top: 4rem; }
.story-step { scroll-margin-top: 4rem; }
.step1-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr minmax(180px, 260px); align-items: start; }
.step1-grid h3 { font-size: .95rem; margin: .9rem 0 .3rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.step1-img { margin: 0; } .step1-img img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.applies-list { list-style: none; padding: 0; margin: .6rem 0; } .applies-list li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.ent-type { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
@media (max-width: 700px) { .step1-grid { grid-template-columns: 1fr; } }
.fac-cell, .obs-cell { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .fac-num { font-weight: 600; min-width: 2.2em; }

/* drawer v2 */
.status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem; }
.status-strip div { display: flex; flex-direction: column; } .status-strip strong { font-size: .9rem; }
.obs-banner { background: rgba(60,120,210,.09); border-radius: 8px; padding: .65rem .8rem; margin-bottom: .9rem; }
.risk-card { border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .9rem; }
.risk-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .risk-top h3 { margin: 0; font-size: 1.1rem; }
.risk-big { font-size: 2rem; font-weight: 700; margin: .3rem 0; }
.delta { font-size: .8rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; white-space: nowrap; }
.delta.up { background: #fadcdc; color: #9b1c1c; } .delta.down { background: #d6f0e6; color: #146a4b; } .delta.flat { background: var(--surface-2); color: var(--muted); }
.facc { border: 1px solid var(--border); border-radius: 12px; margin-bottom: .7rem; }
.facc summary { list-style: none; cursor: pointer; padding: .8rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; position: relative; padding-right: 2rem; }
.facc summary::-webkit-details-marker { display: none; }
.facc-caret::after { content: "⌃"; position: absolute; right: 1rem; top: .7rem; transition: transform .15s; } .facc:not([open]) .facc-caret::after { transform: rotate(180deg); }
.facc-title { font-size: 1.05rem; } .driver-tag { color: #b3261e; font-size: .8rem; }
.facc-body { padding: 0 1rem 1rem; } .facc-body h4, .drawer-body h4 { margin: 1rem 0 .3rem; font-size: .9rem; }
.frow { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: .5rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.fval { font-weight: 700; font-variant-numeric: tabular-nums; } .how { margin: .2rem 0; padding-left: 1.1rem; } .how li { margin: .15rem 0; }
.trend-svg { width: 100%; height: 150px; background: var(--surface-2); border-radius: 8px; } .trend-svg polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.t-idx { stroke: var(--accent); } .t-dhw { stroke: #d9822b; } .t-cur { stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lg { display: inline-block; width: .8rem; height: .25rem; margin: 0 .25rem 0 .6rem; vertical-align: middle; } .lg-idx { background: var(--accent); } .lg-dhw { background: #d9822b; }
.zone-drawer { width: min(520px, 100vw); }
@media (prefers-color-scheme: dark) { .delta.up { background: #4a1f1f; color: #ffb3b3; } .delta.down { background: #173b2e; color: #9be3c4; } }

/* table v3: pills, two-line headers */
.filter { border-radius: 999px; padding: .5rem 1rem; }
.th-sub { display: block; font-weight: 500; font-size: .75rem; color: var(--muted); text-transform: none; margin-top: .15rem; }
.obs-hi { color: #b3261e; } .fac-num { font-size: 1rem; }
.sort-mobile { display: flex !important; align-items: center; gap: .5rem; }
table.zones th, table.zones td { padding: .6rem .5rem; }
table.zones .sort { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; }
table.zones .sort .arrow { display: none; } table.zones th[aria-sort] .sort .arrow { display: inline; }
.obs-btn { background: none; border: 0; padding: .15rem .3rem; font: inherit; cursor: pointer; border-radius: 6px; display: inline-flex; gap: .3rem; align-items: center; text-decoration: underline dotted; }
.obs-btn:hover { background: var(--surface-2); }
.obs-modal { position: fixed; inset: 0; background: rgba(8,16,28,.55); z-index: 60; display: grid; place-items: center; padding: 1rem; }
.obs-card { background: var(--surface); color: var(--text); border-radius: 14px; padding: 1rem 1.25rem; max-width: 520px; width: 100%; max-height: 92vh; overflow: auto; }
.obs-card img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

/* sidebar zones group */
.nav-zones summary { cursor: pointer; list-style: none; } .nav-zones summary::-webkit-details-marker { display: none; }
.nav-zones summary::after { content: "⌃"; margin-left: auto; transition: transform .15s; } .nav-zones details:not([open]) summary::after { transform: rotate(180deg); }
.zone-nav-list { padding: .1rem 0 .4rem 2.2rem; }
.zn-area { color: var(--navy-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin: .55rem 0 .2rem; }
.zn-link { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem; border-radius: 8px; color: var(--navy-text); text-decoration: none; font-size: .92rem; }
.zn-link:hover { background: var(--navy-2); } .zn-link.active { background: var(--navy-active); font-weight: 700; }
.zn-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #8ea2bf; }
.band-dot-low { background: #3cb878; } .band-dot-watch { background: #e0b020; } .band-dot-high { background: #e0662c; } .band-dot-critical { background: #d6322f; }

/* evidence tab, per reference */
.means-row { display: grid; grid-template-columns: 110px 1fr; gap: .8rem; margin-bottom: .8rem; align-items: stretch; }
.means-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.ev-card { border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .8rem; background: var(--surface); }
.ev-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.means-head { font-size: 1.5rem; font-weight: 700; margin: .1rem 0 .3rem; } .means-0 { color: #146a4b; } .means-1 { color: #8a6a00; } .means-2 { color: #a55200; } .means-3 { color: #b3261e; }
.obs-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: .6rem; }
.obs-big { background: rgba(60,120,210,.09); border-radius: 10px; padding: .7rem .8rem; display: flex; flex-direction: column; } .obs-big .num { font-size: 2rem; font-weight: 700; }
.obs-src { background: var(--surface-2); border-radius: 10px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }
.ev-applies { border: 1.5px solid #e06060; background: rgba(224, 96, 96, .05); }
.ap-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.ap-pop, .ap-coh { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .6rem; display: flex; gap: .5rem; flex-direction: column; font-size: .88rem; }
.ap-pop { flex-direction: row; } .ap-pop img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; } .ap-pop div, .ap-coh { display: flex; flex-direction: column; gap: .15rem; }
.ap-rel { font-size: .8rem; color: var(--muted); text-align: center; } .ap-risk { color: #b3261e; font-weight: 700; font-size: .85rem; } .ap-note { color: #b3261e; font-size: .8rem; font-style: normal; background: rgba(224,96,96,.1); border-radius: 6px; padding: .2rem .4rem; }
.ap-not { font-size: .82rem; margin: .6rem 0 0; }
.ev-strip-head { display: flex; justify-content: space-between; align-items: baseline; margin: .8rem 0 .4rem; }
.ev-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; } .ev-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.why-list { display: flex; flex-direction: column; }
.why-row { display: grid; grid-template-columns: 1.2fr .5fr 2.4fr auto; gap: .6rem; align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: .7rem 0; font: inherit; color: var(--text); cursor: pointer; }
.why-row:first-child { border-top: 0; } .why-row:hover { background: var(--surface-2); } .why-val { color: #b3261e; font-size: 1.1rem; } .why-txt { color: var(--muted); font-size: .85rem; } .why-go { font-size: 1.4rem; color: var(--accent); }
.ri-head { display: flex; justify-content: space-between; margin-bottom: .4rem; } .ri-val { font-weight: 700; color: #b3261e; }
.full-btn { display: block; text-align: center; padding: .9rem; font-size: 1.05rem; background: #12294b; color: #fff; border-color: #12294b; }
@media (max-width: 560px) { .ap-grid, .obs-grid { grid-template-columns: 1fr; } .why-row { grid-template-columns: 1fr auto; } .why-txt { grid-column: 1 / -1; } }

/* overview tab per reference: larger type */
.op-status { border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: .9rem; }
.op-status h3 { margin: 0 0 .5rem; font-size: 1rem; letter-spacing: .02em; }
.op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .op-grid span { display: block; color: var(--muted); font-size: .95rem; } .op-grid strong { font-size: 1.1rem; }
.obs-banner { font-size: 1.05rem; padding: .85rem 1.1rem; border-radius: 10px; } .obs-banner-num { font-size: 1.7rem; font-weight: 500; margin: 0 .25rem; }
.risk-card { border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.1rem 1rem; }
.rc-title { font-size: 1.9rem; font-weight: 700; margin: 0 0 .5rem; }
.rc-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: end; } .rc-big { font-size: 2.2rem; font-weight: 700; white-space: nowrap; }
.rc-barwrap { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; } .rc-barwrap .minibar { width: 100%; height: 14px; }
.rc-cap { color: var(--muted); font-size: .95rem; margin: .6rem 0 1rem; }
.facc { border-radius: 12px; margin-bottom: .8rem; } .facc summary { padding: 1rem 1.1rem; } .facc-title { font-size: 1.25rem; } .facc-score { font-size: 1.7rem; margin-left: .4rem; }
.driver-tag { font-size: .95rem; } .facc-kind { margin: 0 0 .4rem; }
.band-text-low { color: #2b9a63; } .band-text-watch { color: #e0922b; } .band-text-high { color: #c93a2b; } .band-text-critical { color: #b3261e; }
.alert-line { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 1rem 0 .6rem; } .alert-dot { width: .8rem; height: .8rem; border-radius: 50%; background: #999; }
.alert-high { color: #d03a2a; } .alert-high .alert-dot { background: #d03a2a; } .alert-watch { color: #c78a00; } .alert-watch .alert-dot { background: #e0b020; } .alert-low .alert-dot { background: #3cb878; }
.fc-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: .8rem; align-items: stretch; margin-top: .6rem; }
.fc-mini .fc-title { display: flex; flex-direction: column; margin-bottom: .4rem; } .fc-mini .fc-title strong { font-size: 1.15rem; }
.fc-body { display: grid; grid-template-columns: 110px 1fr; gap: .6rem; align-items: center; } .fc-spark { width: 100%; } .fc-bg { fill: var(--surface-2); } .fc-line { fill: none; stroke: #e0662c; stroke-width: 2; } .fc-dot { fill: #e0662c; }
.fc-weeks { list-style: none; margin: 0; padding: 0; } .fc-weeks li { display: flex; justify-content: space-between; padding: .15rem 0; font-size: 1.05rem; }
.coh-mini { border: 1.5px solid #7fd0c0; border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.coh-top { display: flex; justify-content: space-between; align-items: center; gap: .4rem; } .coh-frag { font-size: 1.5rem; }
.link-arrow { background: none; border: 0; font: inherit; font-size: 1.15rem; cursor: pointer; margin-top: 1rem; padding: .4rem 0; color: var(--text); }
.conf-num { color: #2b9a63; font-size: 1.7rem; margin-left: .4rem; }
@media (max-width: 560px) { .fc-row { grid-template-columns: 1fr; } .rc-row { grid-template-columns: 1fr; } }

.frow-card { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .8rem; }
.how-hint { margin: .2rem 0 .8rem; }
.why-acc { border-top: 1px solid var(--border); } .why-acc:first-child { border-top: 0; }
.why-acc > summary { list-style: none; cursor: pointer; border: 0; } .why-acc > summary::-webkit-details-marker { display: none; }
.why-acc[open] > summary .why-go { transform: rotate(90deg); } .why-go { transition: transform .15s; }
.why-body { padding: .2rem 0 .8rem; background: var(--surface); }
.why-acc > summary.why-row { border-top: 0; }

.alert-chip { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.alert-chip-low { background: #d6f0e6; color: #146a4b; } .alert-chip-watch { background: #fdf0c8; color: #7a5b00; } .alert-chip-high, .alert-chip-critical { background: #fadcdc; color: #9b1c1c; }
a.outlook { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; text-decoration: none; color: inherit; }

/* driver marker, reorder, tools */
.drv { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); margin-left: .6rem; vertical-align: middle; }
td.is-driver { box-shadow: inset 0 -2px 0 var(--accent); }
.drv-text { display: none; font-size: .8rem; color: var(--muted); }
.table-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .4rem 0 .2rem; flex-wrap: wrap; }
.legend-line { margin: 0; font-size: .88rem; color: var(--muted); }
th[data-col] { position: relative; }
.col-handle { background: none; border: 0; padding: .1rem .25rem; cursor: grab; color: var(--muted); font-size: .9rem; line-height: 1; letter-spacing: -.15em; touch-action: none; border-radius: 4px; }
.col-handle:hover, .col-handle:focus-visible { background: var(--surface-2); color: var(--text); } .col-handle:active { cursor: grabbing; }
th.drag-src { opacity: .45; }
th.drop-before { box-shadow: inset 3px 0 0 var(--accent); } th.drop-after { box-shadow: inset -3px 0 0 var(--accent); }
.is-dragging { user-select: none; cursor: grabbing; }
@media (forced-colors: active) { .drv { border: 2px solid CanvasText; background: Highlight; } }
@media (max-width: 800px) { .col-handle { display: none; } .stacktable .drv-text, table.zones .drv-text { display: inline; } }

/* ---- zone table: fixed layout, aligned columns, uniform rows (QA-checked) ---- */
.table-wrap { overflow-x: auto; }
table.zones { table-layout: fixed; width: 100%; min-width: 1040px; border-collapse: collapse; }
table.zones th[data-col=zone_id] { width: 6%; } table.zones th[data-col=area] { width: 9%; } table.zones th[data-col=observed] { width: 17%; }
table.zones th[data-col=exposure] { width: 11%; } table.zones th[data-col=heat] { width: 11%; } table.zones th[data-col=susceptibility] { width: 12%; }
table.zones th[data-col=score] { width: 19%; } table.zones th[data-col=outlook] { width: 15%; }
table.zones th, table.zones td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .6rem; vertical-align: middle; line-height: 1.25; }
table.zones tbody tr { height: 3.5rem; }
table.zones thead th { height: 3.6rem; padding-top: .4rem; padding-bottom: .4rem; text-align: left; }
table.zones th.n, table.zones td.n { text-align: right; }
table.zones th.n .sort { justify-items: end; }
table.zones .num, .fac-num, .index-num, .obs-btn strong { font-variant-numeric: tabular-nums; }
.index-cell { min-width: 0; display: flex; gap: .55rem; align-items: center; }
.index-num { display: inline-block; min-width: 2.6rem; text-align: right; }
.obs-cell { flex-wrap: nowrap; } .obs-btn, a.outlook { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
.obs-btn strong { display: inline-block; min-width: 2.9rem; text-align: right; }
.obs-sub { display: block; font-size: .72rem; color: var(--muted); line-height: 1.1; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; }
.alert-chip, .chip { vertical-align: middle; line-height: 1.4; }
th[data-col] { position: relative; padding-left: 1.1rem; }
.col-handle { position: absolute; left: .15rem; top: 50%; transform: translateY(-50%); opacity: .35; }
th:hover .col-handle, .col-handle:focus-visible { opacity: 1; }
table.zones .sort { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .3rem; align-items: center; justify-items: start; max-width: 100%; white-space: nowrap; }
table.zones .sort .arrow { grid-column: 2; grid-row: 1; display: inline !important; opacity: .35; } table.zones th[aria-sort] .sort .arrow { opacity: 1; }
.th-label { overflow: hidden; text-overflow: ellipsis; grid-column: 1; grid-row: 1; }
table.zones .th-sub { grid-column: 1 / -1; grid-row: 2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
td.is-driver { box-shadow: none; } table.zones td.n { position: relative; }
table.zones td.n .drv { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); margin: 0; }
.legend-line .drv { position: static; transform: none; display: inline-block; }
@media (max-width: 760px) { table.zones { min-width: 0; table-layout: auto; } td.n .drv { position: static; transform: none; margin-left: .5rem; } table.zones th, table.zones td { white-space: normal; } }
.obs-btn strong { min-width: 3.5rem; }
table.zones td.n .drv { position: static; transform: none; margin: 0 .6rem 0 0; }
table.zones { min-width: 900px; }
table.zones th[data-col=zone_id] { width: 7%; } table.zones th[data-col=area] { width: 9%; } table.zones th[data-col=observed] { width: 19%; }
table.zones th[data-col=exposure] { width: 11%; } table.zones th[data-col=heat] { width: 11%; } table.zones th[data-col=susceptibility] { width: 12%; }
table.zones th[data-col=score] { width: 17%; } table.zones th[data-col=outlook] { width: 14%; }
table.zones th, table.zones td { padding-left: .45rem; padding-right: .45rem; }
table.zones th[data-col] { padding-left: 1rem; } table.zones th[data-col=zone_id] { padding-left: .6rem; }
table.zones .th-sub { font-size: .7rem; }
table.zones td.n .drv { margin-right: .4rem; }
.obs-btn strong { min-width: 3.2rem; }
table.zones th[data-col=zone_id] { width: 6%; } table.zones th[data-col=area] { width: 9%; } table.zones th[data-col=observed] { width: 18%; }
table.zones th[data-col=exposure] { width: 13%; } table.zones th[data-col=heat] { width: 12%; } table.zones th[data-col=susceptibility] { width: 13%; }
table.zones th[data-col=score] { width: 16%; } table.zones th[data-col=outlook] { width: 13%; }
table.zones .th-label { white-space: normal; text-overflow: clip; line-height: 1.15; text-align: inherit; }
table.zones thead th { height: 4.4rem; }
table.zones .th-sub { font-size: .68rem; }
table.zones thead th { height: 3.6rem; }
table.zones .sort { grid-template-rows: auto; align-items: center; }
table.zones .th-label { overflow: visible; }
table.zones th[data-col=zone_id] { width: 6%; } table.zones th[data-col=area] { width: 8%; } table.zones th[data-col=observed] { width: 17%; }
table.zones th[data-col=exposure] { width: 13%; } table.zones th[data-col=heat] { width: 12%; } table.zones th[data-col=susceptibility] { width: 13%; }
table.zones th[data-col=score] { width: 16%; } table.zones th[data-col=outlook] { width: 15%; }
table.zones th[data-col=zone_id] { width: 6%; } table.zones th[data-col=area] { width: 9%; } table.zones th[data-col=observed] { width: 18%; }
table.zones th[data-col=exposure] { width: 12%; } table.zones th[data-col=heat] { width: 11%; } table.zones th[data-col=susceptibility] { width: 13%; }
table.zones th[data-col=score] { width: 16%; } table.zones th[data-col=outlook] { width: 15%; }

/* ---- table polish: one visual axis per numeric column ---- */
table.zones th.n, table.zones td.n { text-align: center; padding-left: .9rem; padding-right: .9rem; }
table.zones th.n .sort { width: 100%; justify-content: center; justify-items: center; grid-template-columns: auto; position: relative; }
table.zones th.n .sort .arrow { position: absolute; left: 100%; margin-left: .25rem; }
table.zones th.n .th-label { text-align: center; }
table.zones .fac-num { display: inline-block; min-width: 3.2ch; text-align: right; }
table.zones td.n .drv { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); margin: 0; }
table.zones td.index-td { padding-left: 1.1rem; }
.legend-line .drv { margin: 0 .5rem 0 0; }
.obs-btn { text-decoration: none; border: 1px solid transparent; }
.obs-btn:hover, .obs-btn:focus-visible { background: var(--surface-2); border-color: var(--border); }
.obs-btn:hover strong, .obs-btn:focus-visible strong { text-decoration: underline; }
@media (max-width: 760px) { td.n .drv { position: static; transform: none; margin: 0 .4rem 0 0; } }

/* primary driver: small text under the number, in line with the observed cell's sub-line */
td.is-driver { box-shadow: none; }
.drv-sub { display: block; font-size: .7rem; line-height: 1.1; margin-top: .1rem; color: var(--accent); font-weight: 600; letter-spacing: .01em; }

/* overview tabs, dashboard, alerts */
.ov-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 1rem 0; overflow-x: auto; }
.ov-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .75rem 1rem; font: inherit; font-size: 1.05rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ov-tabs button[aria-selected="true"] { color: var(--text); font-weight: 700; border-bottom-color: var(--accent); }
.tab-count { display: inline-block; min-width: 1.4rem; text-align: center; background: var(--surface-2); border-radius: 999px; padding: 0 .4rem; font-size: .8rem; font-weight: 700; margin-left: .25rem; }
.tab-count.has-critical { background: #fadcdc; color: #9b1c1c; }
#ov-panel:focus { outline: none; }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: 1rem; align-items: start; } .dash-side { display: flex; flex-direction: column; gap: 1rem; }
.rank-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.rank-row { display: grid; grid-template-columns: 3rem 1fr 3rem auto; gap: .7rem; align-items: center; width: 100%; background: none; border: 0; border-top: 1px solid var(--border); padding: .55rem .3rem; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.rank-row:hover { background: var(--surface-2); } .rk-zone { font-weight: 700; } .rk-val { font-weight: 700; text-align: right; }
.rk-bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; display: block; } .rk-bar > span { display: block; height: 100%; }
.fill-low { background: #3cb878; } .fill-watch { background: #e0b020; } .fill-high { background: #e0662c; } .fill-critical { background: #c0392b; }
.band-stack { display: flex; height: 28px; border-radius: 8px; overflow: hidden; margin: .6rem 0; } .band-stack span { display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 700; }
.band-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; font-size: .9rem; } .band-legend .sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .4rem; }
.alert-mini, .alert-list-full { list-style: none; margin: .4rem 0 0; padding: 0; }
.alert-row { display: flex; gap: .7rem; align-items: center; width: 100%; background: none; border: 0; border-top: 1px solid var(--border); padding: .65rem .3rem; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.alert-row:hover { background: var(--surface-2); } .ar-zone { font-weight: 700; min-width: 2.6rem; } .ar-main { flex: 1; min-width: 0; }
.link-btn { background: none; border: 0; font: inherit; color: var(--link); cursor: pointer; }
.dash-fc-num { font-size: 1.1rem; margin: .3rem 0; } .dash-fc-num .num { font-size: 1.8rem; }
.alert-card-title { margin: .4rem 0 0; font-size: 1.25rem; } .alert-card-rule { margin-left: .4rem; }
.alert-nav { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
/* slimmer replay bar */
.replay-bar { padding: .35rem 1.25rem; } .replay-track svg { height: 40px; } .replay-date { min-width: 150px; }
@media (max-width: 800px) { .replay-row { flex-wrap: wrap; gap: .5rem; } .replay-track { order: 3; flex-basis: 100%; } }

.rank-ctl { margin: 0; } .filter[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .rank-note { margin: .2rem 0 0; }
.rank-row { grid-template-columns: 3rem 1fr 3.6rem 6rem; } .rank-row .rk-val { text-align: right; }
@media (max-width: 700px) { .rank-ctl { flex-wrap: wrap; } }

/* ---- replay bar v2: transport, speed, dates ---- */
.replay-bar { padding: .5rem 1.25rem .4rem; box-shadow: 0 2px 6px rgba(15,28,45,.08); }
.replay-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; min-height: 36px; }
.rp-transport { display: flex; gap: .3rem; align-items: center; } #replay-play { width: 5.5rem; } .rp-step { width: 2rem; padding: 0; font-size: 1.2rem; line-height: 1; }
.rp-speed { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rp-speed button { background: var(--surface); border: 0; border-right: 1px solid var(--border); padding: .3rem .65rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; }
.rp-speed button:last-child { border-right: 0; } .rp-speed button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.rp-rate { min-width: 4.5rem; }
.rp-readout { flex: 1; min-width: 12rem; line-height: 1.2; } .rp-readout strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; } #replay-ev { min-height: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-track { margin-top: .3rem; }
.rt-plot { position: relative; height: 40px; } .rt-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-out { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(120,130,150,.18) 4px 6px); pointer-events: none; }
.ev-btn { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface); background: #c97a00; padding: 0; cursor: pointer; z-index: 2; }
.ev-btn::after { content: ""; position: absolute; left: 3px; top: 8px; width: 1px; height: 28px; background: var(--muted); opacity: .45; }
.ev-btn.ev-noaa_warning { background: #d9a400; } .ev-btn.ev-noaa_alert1 { background: #c0392b; } .ev-btn.ev-index_high { background: #e0662c; } .ev-btn.ev-peak { background: #8e1b1b; border-radius: 2px; } .ev-btn.ev-survey { background: #7a4bd0; border-radius: 2px; transform: rotate(45deg); } .ev-btn.ev-default { background: var(--accent); }
.ev-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rp-cur { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; z-index: 1; }
.rp-thumb { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); background: var(--text); color: var(--surface); font-size: .72rem; padding: .05rem .4rem; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 3; }
.replay-bar.is-playing .rp-thumb, .replay-track:focus-within .rp-thumb, .replay-track:hover .rp-thumb { opacity: 1; }
.replay-track input[type=range] { display: block; width: 100%; margin: 2px 0 0; }
.rt-axis { position: relative; height: 16px; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-start { position: absolute; left: 0; } .rt-end { position: absolute; right: 0; } .rt-tick { position: absolute; transform: translateX(-50%); }
@media (max-width: 800px) { .replay-row { gap: .5rem; } .rp-readout { flex-basis: 100%; order: 5; } .rt-tick { display: none; } .rp-step, .rp-speed button, .replay-bar .btn-sm { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .rp-thumb { transition: none; } }

.map-layout { grid-template-columns: 1fr; }

a.outlook { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.fut-main { display: inline-flex; gap: .4rem; align-items: center; }
.fut-sub { margin: 0; } .fut-up { color: #b3261e; } .fut-down { color: #146a4b; }

.fc-lead-h { margin: 1rem 0 .3rem; font-size: 1.15rem; } .fc-takeaway { font-size: 1.05rem; margin: 0 0 .6rem; max-width: 70ch; }
.dot.wk { fill: var(--text); stroke: var(--surface); stroke-width: 2; } .wk-label { font-weight: 700; font-size: 12px; fill: var(--text); }

/* forecast page tabs, overview, drivers */
.fc-tabs { margin-top: 1rem; }
.fc-zline { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: .45; } .fc-zline.is-current { stroke: var(--accent); stroke-width: 2.2; opacity: 1; }
.fc-key-zone { background: var(--muted); opacity: .6; height: 2px; }
.fo-bands { margin: 1rem 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-width: 560px; }
.fo-row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: .5rem; padding: .4rem .8rem; border-top: 1px solid var(--border); align-items: center; text-align: center; } .fo-row > :first-child { text-align: left; } .fo-hd { border-top: 0; background: var(--surface-2); font-weight: 600; font-size: .85rem; }
.fc-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; margin-top: .8rem; }
.fc-mini { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: .6rem .7rem; text-align: left; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: .3rem; }
.fc-mini:hover { border-color: var(--accent); } .fc-mini.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fc-mini svg { width: 100%; height: 56px; display: block; border-radius: 6px; } .fm-top { display: flex; justify-content: space-between; align-items: baseline; } .fm-bot { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.fd-bars { margin: 1rem 0; } .fd-row { display: grid; grid-template-columns: 5rem 1fr 3rem; gap: .2rem .8rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--border); } .fd-row:first-child { border-top: 0; }
.fd-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--surface-2); } .fd-bar span { display: block; height: 100%; }
.fd-val { font-weight: 700; text-align: right; } .fd-rng { grid-column: 2 / 4; } .fd-lab { font-weight: 600; }
.held { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); border: 1px dashed var(--muted); color: var(--muted); margin-left: .3rem; }
@media (max-width: 640px) { .fo-row { grid-template-columns: 1.2fr repeat(4, .8fr); padding: .4rem .4rem; font-size: .85rem; } .fd-row { grid-template-columns: 4rem 1fr 2.6rem; } }

/* forecast overview: every zone */
.fc-area-legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.fc-area-btn { display: inline-flex; gap: .4rem; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .3rem .8rem; font: inherit; cursor: pointer; color: var(--text); }
.fc-area-btn[aria-pressed="false"] { opacity: .5; text-decoration: line-through; } .area-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; } .fc-area-btn .area-dot { margin-right: 0; }
.fc-avg-key { margin-left: auto; display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted); }
.fc-plline { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .fc-plhit { fill: none; stroke: transparent; stroke-width: 12; }
.fc-pl.is-off { opacity: .1; pointer-events: none; } .fc-avgline { fill: none; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.fc-lab text { font-size: 11px; font-weight: 600; } .fc-lab.is-avg text { font-weight: 800; } .fc-leader { stroke: var(--muted); stroke-width: 1; opacity: .5; }
svg.has-hl .fc-pl:not(.hl), svg.has-hl .fc-lab:not(.hl):not(.is-avg) { opacity: .15; } svg.has-hl .fc-pl.hl .fc-plline { stroke-width: 3.4; } .fc-pl:focus-visible { outline: none; } .fc-pl:focus-visible .fc-plline { stroke-width: 3.4; }
table.fc-idx td, table.fc-idx th { padding: .45rem .6rem; vertical-align: middle; } table.fc-idx .n { text-align: right; }
.idx-cell { white-space: nowrap; } .idx-cell .band-glyph { display: inline-block; width: 1.25rem; margin-left: .35rem; text-align: center; font-size: .72rem; font-weight: 800; color: var(--muted); border: 1px solid currentColor; border-radius: 4px; }
.band-tint-low { background: rgba(60,184,120,.16); } .band-tint-watch { background: rgba(224,176,32,.2); } .band-tint-high { background: rgba(224,102,44,.2); } .band-tint-critical { background: rgba(192,57,43,.24); }
table.fc-idx tr.is-current th { box-shadow: inset 3px 0 0 var(--accent); } table.fc-idx tr.hl { outline: 2px solid var(--accent); outline-offset: -2px; } table.fc-idx tfoot .idx-avg th, table.fc-idx tfoot .idx-avg td { border-top: 2px solid var(--border); background: var(--surface-2); }

/* clean forecast chart + time cursor */
.fc-plline { stroke-width: 1.5; } .fc-pl.is-off { display: none; }
.fc-avgline { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .8; }
.fc-endlab { font-size: 11px; font-weight: 700; } .fc-xl.is-cur { font-weight: 800; fill: var(--text); }
.fc-cursor { stroke: var(--text); stroke-width: 1.5; } .fc-cdot { stroke: var(--surface); stroke-width: 1.5; } .fc-hit { fill: transparent; cursor: pointer; }
.fc-cursor-ctl { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: .4rem 0 .6rem; }
.fc-cursor-ctl button { background: var(--surface); border: 0; border-right: 1px solid var(--border); padding: .45rem 1rem; font: inherit; cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; }
.fc-cursor-ctl button:last-child { border-right: 0; } .fc-cursor-ctl button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.fc-cur-h { margin: .6rem 0 .2rem; font-size: 1.1rem; } .fc-cur-sum { margin: 0 0 .5rem; }
table.fc-cur { width: 100%; table-layout: fixed; } table.fc-cur th, table.fc-cur td { padding: .4rem .6rem; vertical-align: middle; } table.fc-cur .n { text-align: right; font-variant-numeric: tabular-nums; }
table.fc-cur th:nth-child(1) { width: 12%; } table.fc-cur th:nth-child(2) { width: 18%; } table.fc-cur .idx-val { font-weight: 700; font-size: 1.05rem; }
table.fc-cur tr.hl { outline: 2px solid var(--accent); outline-offset: -2px; }
.band-changed { animation: bandflash .9s ease-out; } @keyframes bandflash { from { background: rgba(224,176,32,.55); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .band-changed { animation: none; box-shadow: inset 3px 0 0 var(--accent); } }

/* forecast settings: one slim row instead of a card */
.fc-controls { background: none; border: 0; box-shadow: none; padding: 0; margin: .6rem 0 0; }
.fc-controls .fc-ctl-grid { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; }
.fc-controls .field { display: flex; align-items: center; gap: .6rem; margin: 0; } .fc-controls label { font-weight: 600; font-size: .9rem; color: var(--muted); }
.fc-controls select { min-width: 12rem; padding: .35rem .6rem; }

/* uniform cursor table */
#fc-cursor-wrap .table-wrap { max-width: 760px; }
table.fc-cur { table-layout: fixed; width: 100%; } table.fc-cur th, table.fc-cur td { text-align: left; padding: .45rem .7rem; white-space: nowrap; height: 2.4rem; } table.fc-cur .c { text-align: center; font-variant-numeric: tabular-nums; }
table.fc-cur .today-val { color: var(--muted); }
table.fc-cur th:nth-child(1) { width: 13%; } table.fc-cur th:nth-child(2) { width: 21%; } table.fc-cur th:nth-child(3) { width: 15%; } table.fc-cur th:nth-child(4), table.fc-cur th:nth-child(5), table.fc-cur th:nth-child(6) { width: 17%; }

/* forecast overview: chart left, table right, one object */
.fc-controls.no-zone .field:first-child { display: none; }
.fc-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: .4rem; }
.fc-split-chart { min-width: 0; } .fc-split-chart svg { max-width: 100%; display: block; }
#fc-cursor-wrap { min-width: 0; padding-top: 0; }
#fc-cursor-wrap table.fc-cur { table-layout: fixed; width: 100%; border-collapse: collapse; margin: 0; }
#fc-cursor-wrap table.fc-cur thead th { height: var(--fc-top, 22px); padding: 0 .4rem; font-size: .78rem; line-height: 1.1; vertical-align: bottom; white-space: normal; }
#fc-cursor-wrap table.fc-cur tbody th, #fc-cursor-wrap table.fc-cur tbody td { height: var(--fc-row, 38px); padding: 0 .4rem; white-space: nowrap; font-size: .9rem; }
#fc-cursor-wrap table.fc-cur th:nth-child(1) { width: 28%; } #fc-cursor-wrap table.fc-cur th:nth-child(2) { width: 14%; } #fc-cursor-wrap table.fc-cur th:nth-child(3) { width: 16%; } #fc-cursor-wrap table.fc-cur th:nth-child(4) { width: 22%; } #fc-cursor-wrap table.fc-cur th:nth-child(5) { width: 20%; }
#fc-cursor-wrap .fc-cur-sum { margin: .6rem 0 0; font-size: .9rem; }
.fc-endlab-g { transition: opacity .1s; } svg.has-hl .fc-endlab-g:not(.hl) { opacity: .2; }
@media (max-width: 1000px) { .fc-split { grid-template-columns: minmax(0, 1fr); } #fc-cursor-wrap table.fc-cur tbody th, #fc-cursor-wrap table.fc-cur tbody td { height: 2.3rem; } }
.fc-leader { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .45; }

/* band mix beside its table; uniform cursor table */
.fo-bandrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1rem; } .fo-bandtbl { min-width: 0; } .fo-bandtbl .fo-bands { max-width: none; margin-top: 0; }
.fc-bandmix { min-width: 0; } .fc-bandmix svg { max-width: 100%; display: block; } .bm-title { font-size: 12px; font-weight: 700; fill: var(--muted); }
.bm-low { fill: #3cb878; } .bm-watch { fill: #e0b020; } .bm-high { fill: #e0662c; } .bm-critical { fill: #c0392b; } .bm-num { font-size: 12px; font-weight: 800; fill: #fff; pointer-events: none; } .bm-watch + .bm-num { fill: #3a2c00; }
.bm-col rect { opacity: .55; } .bm-col.is-cur rect { opacity: 1; }
@media (max-width: 1000px) { .fo-bandrow { grid-template-columns: minmax(0, 1fr); } }
#fc-cursor-wrap table.fc-cur tbody th a { text-decoration: none; font-weight: 600; color: var(--text); } #fc-cursor-wrap table.fc-cur tbody th a:hover { text-decoration: underline; color: var(--link); }
#fc-cursor-wrap table.fc-cur .chip { min-width: 5.6rem; justify-content: flex-start; } #fc-cursor-wrap table.fc-cur .today-val { color: var(--muted); font-weight: 500; } #fc-cursor-wrap table.fc-cur .idx-val { font-weight: 700; }
#fc-cursor-wrap table.fc-cur thead th { text-align: center; } #fc-cursor-wrap table.fc-cur thead th:first-child, #fc-cursor-wrap table.fc-cur tbody th { text-align: left; }
.dot.wk-hollow { fill: var(--surface); stroke: var(--text); stroke-width: 2; }

.fc-card-tools { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.fc-gran { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .fc-gran button { background: var(--surface); border: 0; border-right: 1px solid var(--border); padding: .35rem .9rem; font: inherit; cursor: pointer; color: var(--text); } .fc-gran button:last-child { border-right: 0; } .fc-gran button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* zone analysis: slim header, tabs, three cards */
.zhead { padding: 1rem 1.25rem; } .zh-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.zh-left { display: flex; gap: .8rem 1.1rem; align-items: baseline; flex-wrap: wrap; } .zh-left h1 { margin: 0; font-size: 1.7rem; } .zh-asof, .zh-driver { color: var(--muted); font-size: .95rem; } .zh-driver strong { color: var(--text); }
.zh-right { display: flex; gap: 1rem; align-items: center; } .zh-index { display: inline-flex; gap: .4rem; align-items: baseline; } .zh-index .num { font-size: 2rem; font-weight: 700; }
.zh-strip { display: flex; gap: .6rem 1rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.zs-title { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .zs-step { display: inline-flex; gap: .4rem; align-items: center; } .zs-lab { color: var(--muted); font-size: .85rem; } .zs-arrow { color: var(--muted); }
.zc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; margin-bottom: 1rem; } .zc-card { margin: 0; display: flex; flex-direction: column; gap: .4rem; } .zc-card h3 { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: 1.05rem; }
.zc-big { margin: .2rem 0; font-size: 2.2rem; font-weight: 700; } .zc-big .scale { font-size: 1rem; color: var(--muted); font-weight: 500; }
.zc-dl { margin: 0; } .zc-dl div { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--border); } .zc-dl dt { color: var(--muted); } .zc-dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.zc-factors { margin: .2rem 0; } .zc-drv { font-size: .7rem; margin-left: .3rem; }
.zc-thumb { display: flex; gap: .6rem; align-items: center; background: none; border: 1px solid var(--border); border-radius: 10px; padding: .4rem; cursor: pointer; font: inherit; color: var(--muted); text-align: left; margin-top: auto; } .zc-thumb img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; } .zc-thumb:hover { border-color: var(--accent); }
.zc-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .zc-split .card { margin: 0; }
@media (max-width: 1000px) { .zc-grid, .zc-split { grid-template-columns: minmax(0, 1fr); } }

.zc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zc-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .zc-charts .card { margin: 0; } .zc-charts h3 { margin: 0 0 .2rem; }
@media (max-width: 1000px) { .zc-grid, .zc-charts { grid-template-columns: minmax(0, 1fr); } }

.zc-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .zc-charts { grid-template-columns: minmax(0, 1fr); } }

/* site profile */
#site-profile { margin-top: 1rem; } #site-profile .card-head h2 { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sp-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 120px; gap: 1rem; align-items: center; min-height: 44px; border-top: 1px solid var(--border); } .sp-row:first-of-type { border-top: 0; }
.sp-label { display: flex; flex-direction: column; } .sp-row.is-total .sp-label strong { font-size: 1.02rem; } .sp-val { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.sp-plot { min-width: 0; } .sp-plot svg { display: block; width: 100%; }
.sp-divider { height: 2px; background: var(--border); margin: .3rem 0; }
.sp-dot { fill: #9aa5b1; fill-opacity: .75; cursor: pointer; } .sp-cur { stroke: var(--surface); stroke-width: 2.5; } .sp-span { stroke: var(--muted); stroke-width: 2; opacity: .35; } .sp-med { stroke: var(--text); stroke-width: 2; opacity: .6; }
#site-profile-body.sp-hl-on .sp-dot, #site-profile-body.sp-hl-on .sp-cur { opacity: .35; } #site-profile-body.sp-hl-on .sp-hl { opacity: 1; fill: var(--accent); fill-opacity: 1; stroke: var(--surface); stroke-width: 1.5; }
.sp-scale { display: grid; grid-template-columns: 220px minmax(0, 1fr) 120px; gap: 1rem; font-size: .75rem; color: var(--muted); } .sp-ticks { display: flex; justify-content: space-between; padding: 0 10px; }
.sp-table { margin-top: .6rem; } .sp-table summary { cursor: pointer; color: var(--link); } .sp-table tr.is-current th, .sp-table tr.is-current td { font-weight: 700; background: var(--surface-2); }
@media (max-width: 800px) { .sp-row, .sp-scale { grid-template-columns: minmax(0, 1fr); gap: .2rem; } .sp-val { justify-content: flex-start; } .sp-scale > span:first-child, .sp-scale > span:last-child { display: none; } }
.sp-plot .fc-band { opacity: .2; } .sp-plot .fc-band-label { display: none; }

#site-profile-body { position: relative; }
.sp-tip { position: absolute; transform: translate(-50%, -100%); background: var(--text); color: var(--surface); font-size: .8rem; padding: .25rem .55rem; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5; }
.sp-tip strong { font-weight: 800; }

/* site profile v2: zone buttons, name on the left, values on the right */
.sp-zones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .8rem; }
.sp-zones button { display: inline-flex; gap: .4rem; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: .3rem .8rem; font: inherit; cursor: pointer; color: var(--text); }
.sp-zones button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } .sp-zones .area-dot { margin: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.sp-head { display: grid; grid-template-columns: 220px minmax(0, 1fr) 190px; gap: 1rem; font-size: .8rem; color: var(--muted); font-weight: 600; } .sp-bands { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 12px; text-align: center; }
.sp-row, .sp-scale { grid-template-columns: 220px minmax(0, 1fr) 190px; } .sp-label strong { font-size: 1.05rem; } .sp-row { min-height: 72px; }
.sp-val { flex-direction: column; align-items: flex-end; gap: .15rem; } .sp-vtop { display: inline-flex; gap: .5rem; align-items: center; } .sp-vtop .num { font-size: 1.4rem; }
.sp-dot { fill: #8d99a6; fill-opacity: .85; } .sp-cur { stroke: var(--surface); stroke-width: 3; } .sp-curlab { font-size: 12px; font-weight: 800; fill: var(--text); } .sp-med { stroke: var(--text); stroke-width: 1.5; opacity: .35; }
@media (max-width: 900px) { .sp-head { display: none; } .sp-row, .sp-scale { grid-template-columns: minmax(0, 1fr); } .sp-val { align-items: flex-start; } }
.sp-row { min-height: 80px; }

.zc-sec-h { margin: 1.4rem 0 .6rem; font-size: 1.15rem; }
.zc-evidence .factors { margin-top: 1rem; }

/* Sylvia */
button.nav-link { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.sylvia-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--accent, #17a2b8); color: #fff; font: inherit; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); cursor: pointer; }
.sylvia-fab svg { width: 20px; height: 20px; } .sylvia-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent, #17a2b8); }
.sylvia-panel { display: flex; flex-direction: column; }
.sy-log { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.sy-msg { max-width: 92%; padding: .6rem .8rem; border-radius: 12px; background: rgba(127, 127, 127, .12); } .sy-msg p { margin: 0; white-space: pre-wrap; }
.sy-user { align-self: flex-end; background: var(--accent, #17a2b8); color: #fff; }
.sy-src { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .sy-chip { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor; opacity: .85; }
.sy-sugg { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .5rem; }
.sy-form { display: flex; gap: .5rem; padding: .5rem 1rem; } .sy-form textarea { flex: 1; resize: none; font: inherit; padding: .5rem; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .5); background: transparent; color: inherit; }
.sy-foot { padding: 0 1rem 1rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .sylvia-fab { transition: none; } }

/* What if */
.wi-pick { display: flex; flex-direction: column; gap: .7rem; } .wi-zones, .wi-presets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.wi-area { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 0 .2rem 0 .6rem; } .wi-area:first-child { margin-left: 0; }
.wi-zone { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.wi-zone[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.wi-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; } .wi-result { position: sticky; top: 1rem; }
@media (max-width: 1000px) { .wi-grid { grid-template-columns: minmax(0, 1fr); } .wi-result { position: static; } }
.wi-row { padding: .7rem 0; border-bottom: 1px solid rgba(127, 127, 127, .25); } .wi-row.is-changed { background: linear-gradient(90deg, rgba(23, 162, 184, .1), transparent); }
.wi-lab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .wi-lab label { font-weight: 600; } .wi-val { margin-left: auto; font-weight: 700; } .wi-zero { font-size: .78rem; }
.wi-row input[type=range] { width: 100%; margin: .4rem 0 0; accent-color: var(--accent); } .wi-scale { display: flex; justify-content: space-between; } .wi-mean, .wi-now { margin: .15rem 0 0; }
.wi-big { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .wi-from, .wi-to { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.wi-big strong { font-size: 2.4rem; line-height: 1; } .wi-arrow { font-size: 1.6rem; opacity: .6; }
.wi-delta { text-align: center; font-weight: 700; margin: .4rem 0 1rem; } .wi-up { color: #c0392b; } .wi-down { color: #1f8a5b; } .wi-flat { opacity: .7; }
.wi-strip { position: relative; height: 30px; border-radius: 8px; overflow: visible; margin: 0 0 1rem; } .wi-band { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .wi-band em { font-style: normal; font-size: .68rem; opacity: .75; } .wi-band:first-child { border-radius: 8px 0 0 8px; } .wi-band:last-of-type { border-radius: 0 8px 8px 0; }
.wi-mark { position: absolute; top: -5px; width: 14px; height: 40px; margin-left: -7px; border-radius: 7px; transition: left .35s ease; } .wi-m-a { border: 2px dashed currentColor; opacity: .6; } .wi-m-b { background: #0b6d96; border: 2px solid #fff; box-shadow: 0 0 0 2px #0b6d96; }
.wi-facs { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .5rem; } .wi-facs li { display: grid; grid-template-columns: 9.5rem 1fr 6.5rem; gap: .6rem; align-items: center; } .wi-facs .v { text-align: right; }
.wi-bars { position: relative; height: 12px; border-radius: 6px; background: rgba(127, 127, 127, .18); overflow: hidden; } .wi-bar-a, .wi-bar-b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .35s ease; } .wi-bar-a { background: rgba(127, 127, 127, .45); height: 5px; } .wi-bar-b { top: 6px; height: 6px; }
.wi-why-list { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.wi-wf { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .4rem; } .wi-wf li { display: grid; grid-template-columns: 15rem 1fr 4rem; gap: .6rem; align-items: center; } @media (max-width: 700px) { .wi-wf li { grid-template-columns: 1fr 4rem; } .wf-lab { grid-column: 1 / -1; } }
.wf-track { position: relative; height: 16px; } .wf-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .35; } .wf-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; transition: width .35s ease; } .wf-up { background: #c0392b; } .wf-down { background: #1f8a5b; } .wf-v { text-align: right; font-weight: 700; }
.wi-sw-a { background: transparent; border-top: 2px dashed currentColor; height: 0; width: 20px; } .wi-sw-b { background: #0b6d96; height: 4px; width: 20px; border-radius: 2px; } .wi-stats { margin-top: .6rem; }
@media (prefers-reduced-motion: reduce) { .wi-mark, .wi-bar-a, .wi-bar-b, .wf-bar { transition: none; } }

/* Semantic explanation card: three cards in one row */
.zc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1000px) { .zc-grid { grid-template-columns: minmax(0, 1fr); } }
.zc-sem { margin-bottom: 1rem; } .sem-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .sem-left { max-width: 640px; } .sem-h { margin: 0 0 .4rem; font-size: 1rem; } .sem-sent { font-size: .95rem; }
@media (max-width: 900px) { .sem-body { grid-template-columns: minmax(0, 1fr); } }
.sem-svg { width: 100%; height: auto; display: block; } .sem-lane { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; fill: currentColor; opacity: .6; }
.sem-node rect { fill: var(--surface, #fff); stroke: currentColor; stroke-width: 1.2; } .sem-node { cursor: pointer; color: inherit; } .sem-node:focus-visible rect, .sem-node.is-on rect { stroke: var(--accent); stroke-width: 2.4; }
.sem-t1 { font-size: 10.5px; font-weight: 700; fill: currentColor; } .sem-t2 { font-size: 9.5px; fill: currentColor; opacity: .8; }
.sem-L-model rect { stroke-dasharray: 4 2.5; } .sem-K-sim rect { fill: rgba(224, 176, 32, .16); } .sem-K-calc rect { fill: rgba(11, 109, 150, .12); } .sem-K-real rect { fill: rgba(60, 184, 120, .14); }
.sem-edge { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .55; } .sem-edge.sem-L-model { stroke-dasharray: 4 3; } .sem-arrowhead { fill: currentColor; opacity: .6; }
.sem-node.is-dim, .sem-edge.is-dim { opacity: .18; }
.sem-key { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .3rem 0 .4rem; padding: 0; font-size: .74rem; } .sem-sw { display: inline-block; width: 18px; height: 10px; margin-right: .3rem; border: 1.2px solid currentColor; border-radius: 3px; vertical-align: -1px; } .sem-sw-model { border-style: dashed; } .sem-sw-sim { background: rgba(224, 176, 32, .3); }
.sem-sent { margin: .6rem 0; padding-left: 1.15rem; display: grid; gap: .35rem; font-size: .9rem; }
.sem-modal { position: fixed; inset: 0; z-index: 60; background: rgba(5, 15, 30, .6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sem-m-box { background: var(--surface, #fff); color: inherit; border-radius: 14px; padding: 1.2rem; max-width: 760px; width: 100%; max-height: 92vh; overflow: auto; }
.sem-tech { margin: .6rem 0; } .sem-trip code { font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .sem-node, .sem-edge { transition: none; } }

/* Satellite map (from the design) */
.sm-page { margin-bottom: 1rem; border-radius: 16px; overflow: hidden; border: 1px solid rgba(127, 127, 127, .3); background: #040914; }
.sm-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #093766; color: #fff; padding: .8rem 1.1rem; }
.sm-title { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } .sm-title h1 { margin: 0; font-size: 1.25rem; color: #fff; } .sm-title span { font-size: .8rem; opacity: .85; } .sm-asof { color: #a8f4d5; font-style: italic; }
.sm-bar-r { display: flex; align-items: center; gap: .7rem; }
.sm-select select, .sm-base { height: 36px; padding: 0 .9rem; border-radius: 10px; border: 1px solid #a8a8a8; background: transparent; color: #fff; font: inherit; font-size: .88rem; } .sm-select option, .sm-base option { color: #111; }
.sm-cfg { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; border-radius: 8px; } .sm-cfg svg { width: 16px; height: 16px; } .sm-cfg:hover, .sm-cfg[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.sm-stage { position: relative; aspect-ratio: 1248 / 832; max-height: calc(100vh - 150px); width: 100%; overflow: hidden; background: #040914; touch-action: pan-y; } .sm-stage.is-drag { cursor: grabbing; }
.sm-pan { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; } .sm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; } .sm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-blob { mix-blend-mode: screen; } .sm-pan.no-base .sm-blob { mix-blend-mode: normal; }
.sm-pin { cursor: pointer; outline: none; } .sm-hit { fill: transparent; } .sm-ring { fill: rgba(255, 255, 255, .06); stroke-width: 3; transition: r .2s ease; } .sm-ring.sev-stroke-critical, .sm-ring.sev-stroke-warning, .sm-ring.sev-stroke-watch { stroke-dasharray: none; }
.sm-pin:hover .sm-ring, .sm-pin:focus-visible .sm-ring, .sm-pin.is-selected .sm-ring { r: 22; stroke-width: 4; } .sm-pin:focus-visible .sm-hit { stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; }
.sm-score { font: 700 12px/1 system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2px; } .sm-op-tag { fill: #1c2b44; stroke: #cfe3ff; stroke-width: 1; } .sm-op-t { font: 600 10px system-ui, sans-serif; fill: #fff; }
.sm-panel { position: absolute; top: 14px; right: 14px; width: 242px; max-height: calc(100% - 28px); overflow: auto; padding: 12px 12px 16px; border-radius: 16px; background: #fff; color: #111416; border: 1px solid #252b35; box-shadow: 0 5px 16px rgba(20, 43, 52, .28); z-index: 5; } .sm-panel[hidden] { display: none; }
.sm-opt { display: flex; align-items: center; gap: .55rem; min-height: 38px; padding: 0 .9rem; border-radius: 7px; cursor: pointer; font-size: .9rem; } .sm-opt:hover { background: #f0f1f2; } .sm-opt input { appearance: none; width: 20px; height: 20px; border-radius: 4px; border: 1px solid #0b2d54; background: #fff; display: grid; place-items: center; cursor: pointer; margin: 0; } .sm-opt input:checked { background: linear-gradient(90deg, #0b2d54, #0062b2); } .sm-opt input:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .sm-opt input:focus-visible { outline: 3px solid #2196f3; outline-offset: 2px; }
.sm-op { padding: .5rem .5rem 0; font-size: .75rem; color: #505b64; } .sm-op > div { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; } .sm-op input { flex: 1; accent-color: #2196f3; } .sm-op output { color: #111416; font-size: .75rem; }
.sm-tools { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; width: 220px; }
.sm-zoom { display: flex; flex-direction: column; background: #fff; border: 1px solid #d6dbdf; border-radius: 4px; overflow: hidden; } .sm-zoom button { width: 36px; height: 36px; border: 0; border-bottom: 1px solid #d6dbdf; background: #fff; color: #111a24; font-size: 1.2rem; cursor: pointer; } .sm-zoom button:hover { background: #f0f1f2; } .sm-zoom span { width: 36px; height: 30px; display: grid; place-items: center; font-size: .72rem; color: #111a24; }
.sm-legend { width: 100%; background: rgba(2, 14, 28, .78); backdrop-filter: blur(6px); border: 1px solid #162e40; border-radius: 8px; color: #fff; } .sm-leg-h { display: flex; justify-content: space-between; width: 100%; padding: .6rem .7rem; background: none; border: 0; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; } .sm-leg-b { padding: 0 .7rem .7rem; display: grid; gap: .3rem; max-height: 42vh; overflow: auto; } .sm-leg-b p { margin: .35rem 0 0; font-size: .72rem; opacity: .85; }
.sm-chip { display: inline-flex; align-items: center; gap: .3rem; margin-right: .6rem; font-size: .72rem; } .sm-chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .sm-chip i.sm-sq { border-radius: 3px; background: #1c2b44; border: 1px solid #cfe3ff; }
.sm-ramp { display: block; height: 8px; border-radius: 4px; } .sm-rl { display: flex; justify-content: space-between; font-size: .66rem; opacity: .8; }
.sm-note { margin: 0; padding: .6rem 1rem; background: #0c1d36; color: #c8d6ea; }
.sm-base-lab { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; } .sm-base { color: inherit; background: transparent; border-color: rgba(127, 127, 127, .5); }
@media (max-width: 900px) { .sm-stage { max-height: none; } .sm-panel { position: static; width: auto; margin: 0; border-radius: 0; } .sm-tools { position: static; width: auto; flex-direction: row; align-items: flex-start; padding: .6rem; background: #040914; } .sm-stage { display: flex; flex-direction: column; aspect-ratio: auto; } .sm-pan { position: relative; aspect-ratio: 1248 / 832; } }
@media (prefers-reduced-motion: reduce) { .sm-ring { transition: none; } }

/* Clickable factor rows */
.zc-factors .zf-item { display: block; }
.zf-row { width: 100%; display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3rem 1rem; gap: .6rem; align-items: center; padding: .3rem .2rem; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.zf-row:hover { background: rgba(127, 127, 127, .1); } .zf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .zf-row .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.zf-caret { width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; opacity: .6; } .zf-row[aria-expanded="true"] .zf-caret { transform: rotate(-135deg); }
.zf-panel { padding: .4rem .3rem .8rem; border-left: 3px solid var(--accent); margin: .2rem 0 .4rem .4rem; background: rgba(127, 127, 127, .06); border-radius: 0 8px 8px 0; } .zf-sum { margin: 0 0 .4rem; font-size: .88rem; } .zf-table { font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .zf-caret { transition: none; } }

.ov-tabs .zt-link { display: inline-flex; align-items: center; gap: .3rem; padding: .75rem 1rem; font-size: 1.05rem; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.ov-tabs .zt-link:hover { color: var(--text); } .ov-tabs .zt-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

/* 2D / 3D switch */
.sm-mode { display: inline-flex; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; overflow: hidden; margin-right: .5rem; } .sm-mode button { background: transparent; color: inherit; border: 0; padding: .3rem .8rem; font: inherit; font-weight: 700; cursor: pointer; } .sm-mode button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.sm-stage.is-3d .sm-pan, .sm-stage.is-3d .sm-tools { display: none; } .sm-3d { position: absolute; inset: 0; z-index: 1; } .sm-3d-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: #fff; }
.dr-top { margin: 0 0 .8rem; } .dr-link { display: block; text-align: center; width: 100%; box-sizing: border-box; }
.dr-more { margin: 1rem 0; border-top: 1px solid rgba(127, 127, 127, .3); padding-top: .6rem; } .dr-more > summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.dr-wi th[scope=row] { font-weight: 500; } .dr-wi .wi-up { color: #c0392b; font-weight: 700; } .dr-wi .wi-down { color: #1f8a5b; font-weight: 700; } .dr-wi-base { opacity: .85; }

.dr-bottom { margin: 1rem 0 .4rem; } .dr-bottom2 { margin: .2rem 0 0; text-align: center; }
.dr-chart { margin: 0 0 1rem; } .dr-chart figcaption { margin-bottom: .3rem; } .dr-chart .block { display: block; } .dr-chart svg { width: 100%; height: auto; }
.dr-chart .t-idx { stroke: #0b6d96; stroke-width: 2.2; } .dr-chart .grid { stroke: currentColor; opacity: .12; } .dr-chart .ax { font-size: 9px; fill: currentColor; opacity: .7; }
.dr-chart .t-dhw { stroke: #d9822b; stroke-width: 2.2; }
.dr-chart .fc-band { opacity: .3; }

/* map v2: fit-based zoom, constant-size flags, full screen */
.sm-stage { aspect-ratio: 1248 / 800; touch-action: none; outline-offset: -3px; } @media (max-width: 900px) { .sm-stage { touch-action: pan-y; } }
.sm-img { object-fit: contain; }   /* no zoom animation: the flags are counter-scaled in step with the picture */
.sm-lab { transform: scale(var(--inv, 1)); transform-origin: 0 0; }
.sm-hit { fill: transparent; } .sm-ring { fill: rgba(255, 255, 255, .08); stroke-width: 2.5; transition: none; } .sm-pin:hover .sm-ring, .sm-pin.is-selected .sm-ring, .sm-pin:focus-visible .sm-ring { r: 11; stroke-width: 3; }
.sm-lead { stroke: rgba(255, 255, 255, .55); stroke-width: 1; fill: none; }
.sm-flag { fill: rgba(6, 16, 30, .9); stroke: rgba(255, 255, 255, .3); stroke-width: 1; } .sm-pin:hover .sm-flag, .sm-pin.is-selected .sm-flag, .sm-pin:focus-visible .sm-flag { stroke: #fff; stroke-width: 1.5; }
.sm-id { font: 700 11px system-ui, sans-serif; fill: #fff; } .sm-sc { font: 600 11px system-ui, sans-serif; fill: #fff; opacity: .92; font-variant-numeric: tabular-nums; }
.sm-pin:focus-visible .sm-hit { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 2; }
.sm-fit { width: auto !important; padding: 0 .5rem; font-size: .75rem; font-weight: 700; } .sm-zoom button:disabled { opacity: .4; cursor: default; }
.sm-fs-btn svg { width: 16px; height: 16px; }
.sm-page:fullscreen { display: flex; flex-direction: column; border-radius: 0; border: 0; } .sm-page:fullscreen .sm-stage, .sm-page.is-fs .sm-stage { flex: 1; aspect-ratio: auto; max-height: none; }
.sm-page.is-fs { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; border-radius: 0; border: 0; } body.sm-noscroll { overflow: hidden; }
.sm-page:fullscreen .sm-note, .sm-page.is-fs .sm-note { display: none; }

/* Outplanting decision: one cohort at a time */
.og-eyebrow { margin: 0 0 .2rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.og-rail { list-style: none; margin: 0 0 1rem; padding: .5rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.og-s { display: flex; align-items: center; gap: .6rem; position: relative; } .og-s:not(:last-child)::after { content: ""; position: absolute; left: 2.6rem; right: .4rem; top: 50%; height: 2px; background: rgba(127, 127, 127, .3); } .og-s.og-done:not(:last-child)::after { background: var(--accent); }
.og-dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 2px solid rgba(127, 127, 127, .5); background: var(--surface, #fff); flex: none; position: relative; z-index: 1; }
.og-now .og-dot { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px rgba(23, 162, 184, .22); } .og-done .og-dot { border-color: var(--accent); color: var(--accent); }
.og-sl { font-weight: 600; position: relative; z-index: 1; padding-right: .4rem; background: var(--bg, transparent); } .og-todo .og-sl { opacity: .55; }
@media (max-width: 800px) { .og-rail .og-sl { display: none; } .og-s.og-now .og-sl { display: inline; } }
.og-who { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .8rem; } .og-whochip { padding: .35rem .8rem; border-radius: 999px; background: rgba(23, 162, 184, .12); border: 1px solid var(--accent); }
.og-card { margin-bottom: 1rem; } .og-card.og-now { border-left: 4px solid var(--accent); animation: og-rise .22s ease-out; } .og-card.is-done { opacity: .85; padding-block: .6rem; }
@keyframes og-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.og-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .og-h h2 { margin: 0; font-size: 1.2rem; } .og-n { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .85rem; } .og-sum { margin-left: .3rem; }
.og-sc-intro { margin: .3rem 0 .8rem; } .og-sub { margin: 1.2rem 0 .4rem; font-size: 1.02rem; } .og-sub2 { margin: 1.2rem 0 .4rem; font-size: .95rem; }
/* picker */
.og-pick { display: grid; gap: .4rem; margin-bottom: 1rem; }
.og-prow { position: relative; display: grid; grid-template-columns: minmax(9rem, 1.3fr) 11rem 8rem minmax(8rem, auto) 1.5rem; gap: .8rem; align-items: center; padding: .7rem .9rem .7rem 1.1rem; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .3); cursor: pointer; background: var(--surface, rgba(255, 255, 255, .5)); }
.og-prow input { position: absolute; opacity: 0; } .og-prow:hover { border-color: var(--accent); } .og-prow:focus-within { outline: 3px solid var(--focus, #2196f3); outline-offset: 2px; }
.og-prow.is-sel { background: rgba(23, 162, 184, .12); border-color: var(--accent); box-shadow: inset 5px 0 0 var(--accent); }
.og-pn { display: flex; flex-direction: column; } .og-tags { display: flex; gap: .3rem; flex-wrap: wrap; } .og-tag { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: rgba(224, 176, 32, .25); } .og-tag-b { background: rgba(31, 138, 91, .2); } .og-check { font-weight: 700; color: var(--accent); text-align: center; }
@media (max-width: 900px) { .og-prow { grid-template-columns: 1fr auto; } .og-pr, .og-pf, .og-tags { grid-column: 1 / -1; } }
.og-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .6rem; } .og-fact { padding: .2rem 1.4rem; border-left: 1px solid rgba(127, 127, 127, .3); } .og-fact:first-child { padding-left: 0; border-left: 0; }
.og-fv { margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 1.1; } .og-fvt { font-size: 1.7rem; padding-top: .4rem; } .og-fu { font-size: 1rem; font-weight: 400; opacity: .6; } .og-fl { margin: .3rem 0 .1rem; font-weight: 600; }
@media (max-width: 800px) { .og-facts { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .og-fact, .og-fact:first-child { border-left: 0; padding: 0; } }
.og-trigger { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; padding: .6rem .9rem; border-radius: 10px; background: rgba(224, 176, 32, .18); border: 1px solid rgba(224, 176, 32, .5); } .og-trigger svg { width: 20px; height: 20px; flex: none; }
.og-actions { margin: 1.1rem 0 0; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; } .og-go { min-height: 44px; padding-inline: 1.4rem; font-weight: 700; font-size: 1rem; }
/* decide */
.og-rec { background: linear-gradient(160deg, rgba(23, 162, 184, .08), transparent 55%); } .og-scope { margin: .3rem 0 0; }
.og-label { margin: 1rem 0 .15rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .7; } .og-headline { margin: 0 0 1.1rem; font-size: 1.5rem; line-height: 1.3; font-weight: 700; }
.og-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } @media (max-width: 700px) { .og-nums { grid-template-columns: minmax(0, 1fr); } }
.og-nums > div { padding: .8rem 1rem; border-radius: 12px; background: var(--surface, rgba(255, 255, 255, .6)); border: 1px solid rgba(127, 127, 127, .25); } .og-nl { margin: 0; font-size: .78rem; opacity: .75; } .og-big { margin: .15rem 0; font-size: 1.7rem; font-weight: 600; } .og-big strong { font-weight: 800; } .og-up { font-size: 1rem; color: #1f8a5b; font-weight: 700; }
.og-budget { height: 10px; border-radius: 5px; background: rgba(127, 127, 127, .2); overflow: hidden; margin: .4rem 0; } .og-budget span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.og-opts { display: grid; gap: .5rem; margin-bottom: 1rem; }
.og-opt { position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 10.5rem 7rem; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .25); background: var(--surface, rgba(255, 255, 255, .5)); cursor: pointer; } .og-opt input { position: absolute; opacity: 0; } .og-opt:hover { border-color: var(--accent); } .og-opt:focus-within { outline: 3px solid var(--focus, #2196f3); outline-offset: 2px; } .og-opt.is-out { cursor: not-allowed; }
.og-opt.is-sel { border-color: var(--accent); background: rgba(23, 162, 184, .12); box-shadow: 0 0 0 2px var(--accent) inset; } .og-opt.is-out { opacity: .78; }
.og-rk { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: rgba(127, 127, 127, .18); } .is-best .og-rk { background: var(--accent); color: var(--accent-ink); } .is-out .og-rk { background: rgba(192, 57, 43, .16); color: #c0392b; }
.og-oi { display: flex; flex-direction: column; gap: .15rem; } .og-oi > strong { font-size: 1rem; } .og-om { font-size: .85rem; opacity: .8; } .og-oR { font-size: .82rem; color: #c0392b; font-weight: 600; }
.og-os { text-align: right; } .og-os strong { font-size: 1.15rem; } .og-sbar { display: block; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, .2); margin-top: .3rem; overflow: hidden; } .og-sbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
@media (max-width: 700px) { .og-opt { grid-template-columns: 2.2rem minmax(0, 1fr); } .og-os { grid-column: 2; text-align: left; } }
.og-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--accent); color: var(--accent-ink); }
.og-why { margin: 0 0 .8rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
.og-robust { padding: .6rem .8rem; border-radius: 10px; margin: .8rem 0; font-size: .92rem; } .og-robust.is-ok { background: rgba(31, 138, 91, .12); } .og-robust.is-warn { background: rgba(224, 176, 32, .18); }
.og-detail { margin-top: 1rem; padding: .6rem .9rem; border-radius: 12px; border: 1px dashed rgba(127, 127, 127, .4); } .og-more > summary { cursor: pointer; font-weight: 700; } .og-ft tr.is-rec th, .og-ft tr.is-rec td { background: rgba(23, 162, 184, .1); } .og-ft tr.is-out { opacity: .7; }
.og-weights { padding: .8rem 1rem; border-radius: 12px; background: rgba(127, 127, 127, .08); } .og-wh { display: flex; justify-content: space-between; margin-bottom: .4rem; }
.og-wrow { display: grid; grid-template-columns: 15rem minmax(6rem, 1fr) 4rem auto; gap: .8rem; align-items: center; padding: .25rem 0; } .og-wrow input { accent-color: var(--accent); width: 100%; } .og-wrow output { font-weight: 700; text-align: right; }
@media (max-width: 800px) { .og-wrow { grid-template-columns: 1fr auto; } .og-wrow input, .og-wrow .muted { grid-column: 1 / -1; } }
/* approve and act */
.og-hero { font-size: 1.15rem; margin: .8rem 0 1rem; line-height: 1.45; }
.og-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } @media (max-width: 820px) { .og-tiles { grid-template-columns: minmax(0, 1fr); } }
.og-tile { padding: .8rem .9rem; border-radius: 12px; background: rgba(127, 127, 127, .08); } .og-tile p { margin: .2rem 0; } .og-tl { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; opacity: .75; font-weight: 700; }
.og-rejbox { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-top: 1rem; } .og-rejbox label { width: 100%; font-weight: 600; font-size: .9rem; } .og-rejbox input { flex: 1; min-width: 12rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .5); background: transparent; color: inherit; font: inherit; }
.og-receipt { display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 10px; background: rgba(31, 138, 91, .1); margin-bottom: 1rem; font-size: .9rem; } .og-receipt code { font-size: .82rem; }
.og-wos { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .4rem; } .og-wos li { display: grid; grid-template-columns: 11rem 8rem 1fr auto; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; background: rgba(127, 127, 127, .08); animation: og-rise .3s ease-out both; } @media (max-width: 700px) { .og-wos li { grid-template-columns: 1fr 1fr; } }
/* log and footer */
.og-logfold { margin-top: 1rem; } .og-log { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; } .og-log li { padding-left: .8rem; border-left: 3px solid var(--accent); } .og-log p { margin: .2rem 0 0; font-size: .86rem; } .og-eng { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.og-auto { margin: .8rem 0 0; font-size: .85rem; } .og-foot { margin-top: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .og-card.og-now, .og-wos li { animation: none; } }
.og-warnbox { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(224, 176, 32, .18); border: 1px solid rgba(224, 176, 32, .55); } .og-warnbox p { margin: 0 0 .5rem; } .og-warnbox label { font-weight: 600; font-size: .85rem; } .og-ovrrow { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; } .og-ovrrow input { flex: 1; min-width: 14rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .5); background: transparent; color: inherit; font: inherit; }
.og-oi .og-chip { align-self: flex-start; } .og-chip-sel { background: #1f8a5b; }
.og-formula { margin: 0 0 .6rem; padding: .5rem .8rem; border-radius: 10px; background: rgba(127, 127, 127, .1); font-size: .9rem; }
.og-bd { list-style: none; margin: 0; padding: 0 .6rem; border-left: 1px solid rgba(127, 127, 127, .3); display: grid; gap: .1rem; font-size: .78rem; } .og-bd li { display: flex; justify-content: space-between; gap: .5rem; } .og-bd span { opacity: .7; }
.og-eq { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.og-choice { margin: .2rem 0 .5rem; }
.has-geographic .sm-pan { display: none; }
.sm-geographic.maplibregl-map { position: absolute; inset: 0; background: #07192e; }
.sm-geographic[hidden], .sm-map-status[hidden] { display: none; }
.sm-map-status { position: absolute; left: 12px; top: 8px; max-width: calc(100% - 290px); margin: 0; padding: 5px 8px; border-radius: 5px; background: #07192ee8; color: #cce9f5; font-size: .72rem; z-index: 2; pointer-events: none; }
.sm-geo-marker { background: #07192ef2; color: #edfaff; border: 2px dashed var(--zone-color, #70d9ed); border-radius: 6px; padding: 4px 7px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.3; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 5px #0009; }
.sm-geo-marker:hover, .sm-geo-marker:focus-visible, .sm-geo-marker.is-selected { outline: 2px solid #80e5fa; outline-offset: 3px; z-index: 3; }
.sm-geo-marker.has-alert { box-shadow: 0 0 0 2px #f3be62, 0 2px 5px #0009; }
.sm-geo-marker[data-severity="critical"], .sm-geo-marker[data-severity="high"] { box-shadow: 0 0 0 2px #ef5d73, 0 2px 5px #0009; }
.sm-geo-marker { z-index: 3; }
.sm-geo-marker.is-published { border-style: solid; }
.sm-bleaching-legend { position: absolute; top: 50px; right: 280px; width: 238px; max-width: calc(100% - 28px); padding: 10px; background: #091e36ed; border: 1px solid #69477c; border-radius: 8px; color: #eadef4; font: 11px/1.4 system-ui, sans-serif; z-index: 4; pointer-events: none; }
.sm-bleaching-legend[hidden], .sm-bleaching-scale[hidden], .sm-bleaching-extent[hidden] { display: none; }
.sm-bleaching-scale { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 8px; }
.sm-bleaching-scale span { display: flex; align-items: center; gap: 6px; }
.sm-bleaching-scale i { width: 15px; height: 13px; border-radius: 2px; }
.sm-bleaching-status, .sm-bleaching-extent { margin: 7px 0 0; }
.sm-bleaching-extent { color: #cbb8dc; font-size: 10px; }
.sm-bleaching-legend.is-simulated { border-color: #dcad65; }
.sm-bleaching-latest { position: relative; display: grid; gap: 3px; max-width: 242px; padding: 9px 12px; border: 1px solid #cb9bea; border-radius: 7px; color: #f7efff; background: #0c2039f5; box-shadow: 0 3px 14px #0006; font: 11px/1.4 system-ui, sans-serif; text-align: left; cursor: pointer; z-index: 5; }
.sm-bleaching-latest small { color: #d9b8ef; font-size: 10px; }
.sm-bleaching-latest strong { font-size: 12px; }
.sm-bleaching-latest span { font-size: 10px; }
.sm-geographic .sm-bleaching-popup .maplibregl-popup-content { padding: 0; border: 0; background: transparent; box-shadow: none; }
.sm-bleaching-popup[class*="anchor-bottom"] .maplibregl-popup-tip { border-top-color: #0c2039; }
.sm-bleaching-popup[class*="anchor-top"] .maplibregl-popup-tip { border-bottom-color: #0c2039; }
.sm-bleaching-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #0c2039; }
.sm-bleaching-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #0c2039; }
.sm-bleaching-latest:hover, .sm-bleaching-latest:focus-visible { outline: 2px solid #dfb9f2; outline-offset: 2px; }
@media (max-width: 900px) { .sm-bleaching-legend { top: auto; bottom: 54px; right: 10px; max-width: 45%; } }
.has-geographic .sm-tools { pointer-events: none; }
.has-geographic .sm-tools .sm-zoom, .has-geographic .sm-tools .sm-legend { pointer-events: auto; }
.sm-sst-sample { width: 14px; height: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; }
.sm-sst-sample::after { content: ""; position: absolute; inset: 3px; border: 2px solid #80edff; background: #092b49; transform: rotate(45deg); }
.sm-sst-sample:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.sm-sst-legend { position: absolute; top: 50px; left: 12px; width: 330px; max-width: calc(100% - 36px); z-index: 4; padding: 10px; color: #daedf7; background: #091e36ed; border: 1px solid #315778; border-radius: 8px; font: 11px/1.35 system-ui, sans-serif; pointer-events: none; }
.sm-sst-legend[hidden] { display: none; }
.sm-sst-legend strong { font-size: 12px; }
.sm-sst-legend p { margin: 5px 0; font-size: 10px; }
.sm-sst-ramp { height: 10px; border-radius: 3px; margin-top: 7px; }
.sm-sst-ticks { display: flex; justify-content: space-between; gap: 5px; margin-top: 2px; }
.sm-sst-date { color: #b7d5e8; }
.sm-sst-legend.is-scenario { border-color: #e9b45b; }
.sm-sst-legend.is-scenario > p:first-of-type { color: #ffda96; font-weight: 600; }
.sm-sst-view { display: grid; gap: 5px; margin: 6px 0; font-size: .76rem; }
.sm-sst-view select { width: 100%; color: #e1f1fa; background: #102b48; border: 1px solid #315778; border-radius: 5px; padding: 7px; font: inherit; }
.map-zone-sst { margin: 0 1rem .7rem; padding: .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: .8rem; }
.map-zone-sst strong { display: block; }
.map-zone-sst .map-sst-value { display: block; margin: .25rem 0; font-size: 1.25rem; font-weight: 700; }
.map-zone-sst p { margin: .2rem 0; line-height: 1.4; }
.sm-risk-note { position: absolute; right: 12px; bottom: 27px; max-width: 300px; margin: 0; padding: 5px 7px; background: #091e36e8; color: #c8deed; border-radius: 5px; font: 10px/1.4 system-ui, sans-serif; pointer-events: none; z-index: 2; }
.sm-risk-note[hidden] { display: none; }
.sm-risk-title { display: block; padding: 4px 5px; font-size: 10px; line-height: 1.35; }
.sm-risk-ramp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px; max-width: 290px; margin: 4px 5px; font-size: 9px; }
.sm-risk-ramp i { width: 100%; height: 7px; border-radius: 3px; background: linear-gradient(to right, #3cb878 0%, #e0b020 25%, #e0662c 50%, #c0392b 75%, #c0392b 100%); }
.maplibregl-ctrl-bottom-left .sm-maptiler-logo { position: absolute; left: 100px; bottom: 0; margin: 0; background: #ffffffd9; border-radius: 3px; padding: 3px 5px; }
.sm-maptiler-logo img { display: block; height: auto; }
.sm-maptiler-logo[hidden] { display: none; }
.sm-geographic .maplibregl-popup { z-index: 6; }
.sm-geographic .maplibregl-popup-content { background: #0c2039; color: #e1f1fa; border: 1px solid #315778; font: 11px/1.45 system-ui, sans-serif; padding: 14px; }
.sm-geographic .maplibregl-popup-close-button { color: #e1f1fa; }
.sm-geographic .maplibregl-popup-content p { margin: 6px 0; }
@media (max-width: 900px) { .sm-sst-legend { width: 250px; top: 46px; } }
.has-geographic .sm-panel { background: #0c2039f5; color: #d9edf9; border-color: #315778; }
.has-geographic .sm-opt:hover { background: #163c5d; }
.has-geographic .sm-opt.is-unavailable { opacity: .5; cursor: default; font-size: .78rem; }
.has-geographic .sm-panel .small { font-size: .74rem; line-height: 1.45; }
.has-geographic .sm-tools { left: 12px; right: auto; bottom: 36px; z-index: 3; align-items: flex-start; max-width: calc(100% - 280px); }
.has-geographic .sm-zoom, .has-geographic .sm-zoom button { color: #d9edf9; background: #0c2039; border-color: #315778; }
.has-geographic .sm-geographic .maplibregl-ctrl-attrib { background: #07192ee8; color: #d9edf9; font-size: 10px; }
.has-geographic .sm-geographic .maplibregl-ctrl-attrib a { color: #b3e8f6; }
@media (max-width: 900px) {
  .has-geographic.sm-stage { display: block; aspect-ratio: auto; min-height: 520px; }
  .has-geographic .sm-panel { position: absolute; right: 8px; top: 42px; width: 220px; max-height: 65%; border-radius: 10px; }
  .has-geographic .sm-tools { position: absolute; left: 8px; bottom: 40px; right: auto; width: auto; max-width: 90%; padding: 0; background: transparent; }
  .sm-map-status { max-width: calc(100% - 24px); }
}
@media (max-width: 900px) { .og-opt { grid-template-columns: 2.2rem minmax(0, 1fr); } .og-bd, .og-os { grid-column: 2; border-left: 0; padding-left: 0; text-align: left; } }

/* Undated simulated baseline outplants: distinct from observed bleaching/risk. */
.sm-outplant-marker{display:flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid #4ee0c4;border-radius:9px;background:#082b33;color:#91ffe5;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;z-index:3;box-shadow:0 2px 7px #0008}
.sm-outplant-marker svg{width:20px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sm-outplant-marker:hover,.sm-outplant-marker:focus-visible{background:#125346;outline:2px solid #92ffe4}
.sm-outplant-legend{position:absolute;bottom:55px;left:12px;max-width:320px;padding:6px 9px;border:1px solid #29766e;border-radius:6px;background:#081e30ed;color:#86e5d0;font-size:11px;pointer-events:none;z-index:4}
.sm-outplant-popup .maplibregl-popup-content{background:#0b2235;color:#dcebf5;border:1px solid #399f91;border-radius:8px;padding:14px}
.sm-outplant-popup .maplibregl-popup-tip{border-top-color:#0b2235;border-bottom-color:#0b2235}
.sm-outplant-popup .maplibregl-popup-close-button{color:#dcebf5}
.sm-outplant-card{font-size:12px;line-height:1.4}.sm-outplant-card strong{color:#86f3d6}.sm-outplant-card p{margin:6px 0}.sm-outplant-card button{background:#123e46;color:#9dffe8;border:1px solid #368e80;border-radius:5px;padding:6px 10px;cursor:pointer}
/* Floating inspection: simulated surveys and a separate shared Hawaii gallery. */
.sm-inspection{position:absolute;right:14px;top:14px;width:400px;max-width:calc(100% - 28px);max-height:calc(100% - 28px);overflow:auto;z-index:8;box-sizing:border-box;padding:16px;background:#0b1e30f5;border:1px solid #405571;border-radius:12px;color:#dfebf5;box-shadow:0 12px 36px #0008;font-size:12px;line-height:1.45}
.sm-inspection[hidden]{display:none}.sm-inspection-head,.sm-inspection-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}.sm-inspection h3{font-size:16px;margin:0}.sm-inspection h4{font-size:13px;margin:12px 0 6px}.sm-inspection p{margin:8px 0}.sm-inspection button{font:inherit;color:#d9ecff;background:#16344d;border:1px solid #42647e;border-radius:6px;padding:5px 9px;cursor:pointer}.sm-inspection button:focus-visible{outline:2px solid #67d7f1}.sm-inspection-badge{display:inline-block;margin-top:8px;padding:2px 6px;background:#45265b;color:#e8c2ff;border-radius:4px;font-size:10px}.sm-inspection-disclosure{color:#f0d8ff;border-left:2px solid #b46add;padding-left:8px}.sm-inspection-stats{font-weight:600}.sm-inspection .sm-inspection-main{width:100%;padding:0;overflow:hidden;background:#071725}.sm-inspection-main img{display:block;width:100%;max-height:220px;object-fit:contain}.sm-inspection-nav{margin:8px 0}.sm-inspection-thumbs{display:flex;gap:5px;overflow-x:auto;padding:3px 0 7px}.sm-inspection-thumbs button{flex:0 0 45px;padding:2px}.sm-inspection-thumbs img{display:block;width:39px;height:39px;object-fit:cover;border-radius:3px}.sm-inspection-thumbs [aria-pressed=true]{border-color:#d5a2ff}.sm-inspection-credit{font-size:10px;color:#afc3d5}.sm-inspection-classifier{color:#d1b4ef}
@media(max-width:600px){.sm-inspection{right:8px;top:8px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);padding:12px}.sm-inspection-main img{max-height:160px}}

.sm-bleaching-hover{pointer-events:none;z-index:7}.sm-bleaching-hover .maplibregl-popup-content{background:#102638f5;color:#f2dcff;border:1px solid #d78cff;border-radius:8px;padding:10px;font-size:12px}.sm-bleaching-hover strong{color:#edb7ff}.sm-bleaching-hover small{display:block;margin-top:5px;color:#bed0df}.sm-bleaching-hover .maplibregl-popup-tip{border-top-color:#102638}

/* Inspection owns the floating UI; latest record lives in the compact legend. */
.sm-bleaching-info:empty{display:none}.sm-bleaching-info{margin-top:8px;pointer-events:auto}.sm-bleaching-info .sm-bleaching-latest{max-width:100%;width:100%;box-sizing:border-box;padding:7px 9px;box-shadow:none}
.has-bleaching-inspection .sm-bleaching-legend,.has-bleaching-inspection .sm-bleaching-hover{display:none}
@media(min-width:901px){.sm-stage:has(.sm-panel:not([hidden])) .sm-inspection{right:280px;max-width:calc(100% - 294px)}}

.sm-benthic-legend{margin:8px 0;padding:9px 0;border-top:1px solid #315778;border-bottom:1px solid #315778;font-size:12px}.sm-benthic-legend[hidden]{display:none}.sm-benthic-class{display:flex;align-items:center;gap:8px;margin-top:7px}.sm-benthic-class i{display:block;width:13px;height:13px;border-radius:3px}.sm-benthic-legend p{font-size:10px;line-height:1.4;color:#b9ccdd;margin:8px 0 0}.sm-benthic-tooltip{pointer-events:none;z-index:5}.sm-benthic-tooltip .maplibregl-popup-content{background:#102638f5;color:#deedf5;border:1px solid #5c8996;border-radius:8px;padding:9px;font-size:11px}.sm-benthic-tooltip p{margin:5px 0}.has-bleaching-inspection .sm-benthic-tooltip{display:none}

.sm-reef-gradient-status { position: absolute; left: 12px; bottom: 80px; max-width: 280px; z-index: 4; padding: 5px 8px; background: #091e36ed; color: #c8deed; border-radius: 5px; pointer-events: none; }
.sm-reef-gradient-status:empty, .sm-reef-gradient-status[hidden] { display: none; }

.sm-atlas-display-status { position: absolute; left: 12px; bottom: 120px; max-width: 280px; z-index: 4; padding: 5px 8px; background: #091e36ed; color: #c8deed; border-radius: 5px; pointer-events: none; }
.sm-atlas-display-status:empty { display: none; }

/* Compact operational map controls: presentation only; control IDs/state are unchanged. */
.has-geographic .sm-panel { padding: 12px; scrollbar-width: thin; font-family: inherit; }
.sm-settings-section { padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid #29445e; }
.sm-settings-section h3 { color: #8caec9; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 7px; }
.has-geographic .sm-settings-section .sm-opt { padding: 3px 0; min-height: 28px; gap: 9px; font-size: 12px; line-height: 1.35; }
.has-geographic .sm-settings-section .sm-opt input { width: 16px; height: 16px; flex: 0 0 16px; }
.has-geographic .sm-settings-section .sm-op { padding: 7px 0 0; color: #b9d0e2; font-size: 11px; }
.has-geographic .sm-settings-section .sm-op > div { margin-top: 3px; }
.has-geographic .sm-settings-section .sm-op input { min-width: 0; width: 100%; }
.has-geographic .sm-settings-section .sm-op output { min-width: 44px; text-align: right; color: #e1f1fa; font-variant-numeric: tabular-nums; }
.sm-settings-section .sm-sst-view { font-size: 11px; color: #b9d0e2; margin: 7px 0 0; }
.sm-settings-section select { min-width: 0; box-sizing: border-box; width: 100%; font-size: 12px; padding: 7px 6px; }
.sm-settings-caption { color: #8caec9; font-size: 10px; margin: 7px 0 0; }
.sm-unavailable { font-size: 11px; color: #8caec9; margin-bottom: 10px; }
.sm-unavailable summary { cursor: pointer; padding: 4px 0; }
.sm-methodology-link { color: #82cbe8; font-size: 11px; text-decoration: none; }
.sm-settings-section[hidden], .sm-panel [data-dependent][hidden] { display: none; }
.sm-status-badge { display: inline-block; width: fit-content; margin: 4px 0; padding: 2px 5px; border: 1px solid #67518a; border-radius: 4px; color: #e1c4fa; background: #392c50; font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.3; }
.sm-status-badge[hidden] { display: none; }
.sm-geographic .maplibregl-popup-content { max-width: min(300px, calc(100vw - 36px)); box-sizing: border-box; overflow-wrap: anywhere; padding: 12px; }
.sm-geographic .maplibregl-popup-content strong { font-size: 12px; }
.sm-geographic .maplibregl-popup-content p { margin: 5px 0; }
.sm-bleaching-legend { max-width: 245px; }
.sm-bleaching-legend p:empty, .sm-bleaching-legend span:empty, .sm-risk-note:empty { display: none; }
.sm-bleaching-info { margin-top: 6px; }
.sm-bleaching-latest { padding: 7px; }
.sm-bleaching-hover small:empty { display: none; }
.sm-inspection p { margin: 7px 0; font-size: 11px; line-height: 1.45; }
.sm-inspection .sm-inspection-stats { font-size: 14px; font-weight: 650; line-height: 1.4; }
.sm-inspection-disclosure { color: #b7d0e3; border-left: 2px solid #64829b; padding-left: 8px; }
.map-zone-sst { padding: 10px 12px; font-size: 11px; }
.sm-metric-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; margin-top: 7px; }
.sm-metric-grid dt { color: #92acc0; font-size: 10px; margin: 0; }
.sm-metric-grid dd { margin: 2px 0 0; font-size: 13px; color: inherit; font-variant-numeric: tabular-nums; }
.sm-metric-grid .sm-metric-primary { font-size: 22px; font-weight: 700; }
@media (max-width: 600px) { .has-geographic .sm-panel { width: min(260px, calc(100% - 24px)); max-height: 72%; } }

.sm-outplant-legend { left: auto; right: 280px; bottom: 45px; max-width: 245px; padding: 6px 8px; font-size: 10px; }
.sm-inspection { overflow-wrap: anywhere; }
@media (max-width: 900px) { .sm-outplant-legend { right: 12px; bottom: 120px; max-width: 165px; } }

/* Operations overview, Historical trends */
.ovt-stats { margin: .8rem 0 .6rem; } .ovt-readout { margin: .4rem 0 0; padding: .5rem .7rem; border-radius: 8px; background: rgba(127, 127, 127, .1); font-size: .92rem; }
.ovt-card { margin-bottom: 1rem; } .ovt-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; } .ovt-chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ovt-chart .grid { stroke: currentColor; opacity: .12; } .ovt-chart .ax { font-size: 10px; fill: currentColor; opacity: .7; } .ovt-end { font-size: 11px; font-weight: 700; fill: currentColor; }
.ovt-cur { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .7; pointer-events: none; }
.ovt-table .ovt-spark { display: block; } .ovt-text { margin: 1rem 0; } .ovt-text > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 700px) { .ovt-table th:nth-child(2), .ovt-table td:nth-child(2), .ovt-table th:nth-child(7), .ovt-table td:nth-child(7) { display: none; } }