/* RPMP CBA web application. Colours meet WCAG 2.2 AA contrast (4.5:1 for text) against
   their backgrounds; focus is always visible (2.4.7, 2.4.11); nothing relies on colour
   alone (1.4.1); layout reflows to 320px without horizontal scrolling (1.4.10). */
:root {
  --ink: #1f2a24; --muted: #4f5b55; --accent: #136f53; --accent-ink: #ffffff;
  --rule: #c9dcd2; --fill: #f2f7f4; --focus: #1b4fd6;
  --alert-bg: #fdecec; --alert-ink: #8a1c1c; --info-bg: #eef4fa; --info-ink: #1e3f63;
  --ok-bg: #e8f5ee; --ok-ink: #14532d; --warn-bg: #fff4e6; --warn-ink: #7a3b00;
  --error: #b42318; --input-border: #6b7a73;
}
* { box-sizing: border-box; }
/* The save bar sticks to the bottom of the window; this keeps a focused field from being
   scrolled underneath it (WCAG 2.2 SC 2.4.11). */
html { font-size: 100%; scroll-padding-bottom: 6rem; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink);
  line-height: 1.5; background: #fff; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent);
  color: var(--accent-ink); padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: .75rem 1.5rem; border-bottom: 2px solid var(--accent); }
.brand a { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 1.1rem; }
.site-header nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.site-header nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }
.account { margin-left: auto; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.who { color: var(--muted); font-size: .9rem; }
main { max-width: 64rem; margin: 0 auto; padding: 1.5rem; }
main:focus { outline: none; }
.site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem;
  padding: 1rem 1.5rem; }
h1 { color: var(--accent); font-size: 1.75rem; margin: .5rem 0 1rem; }
.lead { font-size: 1.1rem; color: var(--muted); }
.auth-card { max-width: 28rem; margin: 2rem auto; }
.stack { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; }
label { font-weight: 600; }
input[type="email"], input[type="password"] {
  font: inherit; padding: .55rem .6rem; border: 1px solid var(--input-border); border-radius: 4px; }
button { font: inherit; padding: .55rem 1rem; border-radius: 4px; border: 1px solid var(--accent);
  background: #fff; color: var(--accent); cursor: pointer; min-height: 44px; }
button.primary { background: var(--accent); color: var(--accent-ink); }
.link-button { border: 0; background: none; color: var(--accent); text-decoration: underline;
  padding: .25rem; min-height: 24px; }
form.inline { display: inline; margin: 0; }
details.password-signin { margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
details.password-signin summary { cursor: pointer; color: var(--accent); }
.alert { background: var(--alert-bg); color: var(--alert-ink); border-left: 4px solid #b42318;
  padding: .6rem .9rem; margin: 1rem 0; }
.alert.info { background: var(--info-bg); color: var(--info-ink); border-left-color: #3b6f9e; }
.eyebrow { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
.screen-nav ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0 0 1rem;
  padding: 0; border-bottom: 1px solid var(--rule); }
.screen-nav a, .screen-nav .not-yet { display: inline-block; padding: .5rem .75rem; min-height: 44px; }
.screen-nav a { text-decoration: none; border-bottom: 3px solid transparent; }
.screen-nav a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; }
.screen-nav .not-yet { color: var(--muted); }
.toc-inline ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
section { margin-top: 2rem; }
h2 { color: var(--accent); font-size: 1.35rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1.25rem 0 .4rem; }
.note { color: var(--muted); font-size: .9rem; }
.muted { color: var(--muted); }
.label { font-weight: 600; }
ol.steps { padding-left: 1.5rem; }
ol.steps .step { margin-bottom: 1rem; padding-left: .25rem; }
ol.steps .step h3 { margin: 0 0 .2rem; }
ol.steps .where, ol.steps .why { margin: .1rem 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: .75rem 1rem; }
.card.warning { border-left-color: #b85c00; }
.card h3 { margin-top: 0; }
.alert.warning { background: var(--warn-bg); color: var(--warn-ink); border-left-color: #b85c00; }
.alert.success { background: var(--ok-bg); color: var(--ok-ink); border-left-color: #1f7a4d; }
.alert p { margin: .2rem 0; }
.alert .note { color: inherit; }
.alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── Forms ─────────────────────────────────────────────────────────────────────────── */
fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.radios { border: 0; margin: 1rem 0; padding: 0; }
fieldset.radios legend { font-weight: 600; padding: 0; }
.field { display: flex; flex-direction: column; gap: .3rem; margin: 1rem 0; }
.hint { margin: 0; color: var(--muted); font-size: .9rem; max-width: 44rem; }
.field-error { margin: 0; color: var(--alert-ink); font-weight: 600; }
.has-error > input, .has-error > select, .has-error > textarea, tr.has-error input[aria-invalid] {
  border: 2px solid var(--error); }
.field.has-error, fieldset.radios.has-error { border-left: 4px solid var(--error); padding-left: .75rem; }
input[type="text"], input:not([type]), select, textarea { font: inherit; color: var(--ink); background: #fff;
  padding: .5rem .6rem; border: 1px solid var(--input-border); border-radius: 4px; max-width: 100%; }
input[type="text"].wide { width: 28rem; }
input[type="text"].short { width: 8rem; }
input[type="text"].num { width: 10rem; text-align: right; font-variant-numeric: tabular-nums; }
select { min-height: 44px; width: 20rem; }
textarea { width: 100%; max-width: 44rem; font-family: Consolas, "Courier New", monospace; }
.radio { display: flex; align-items: flex-start; gap: .5rem; margin: .4rem 0; }
.radio input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; }
.radio label { font-weight: 400; }
.error-summary { border: 3px solid var(--error); padding: .75rem 1rem; margin: 1rem 0; }
.error-summary h2 { color: var(--alert-ink); margin-top: 0; }
.error-summary a { color: var(--alert-ink); font-weight: 600; }
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
details.panel { border: 1px solid var(--rule); padding: .5rem 1rem; }
details.panel > summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px;
  padding: .25rem 0; }
table.data.inputs td { vertical-align: middle; }
table.data.fit { max-width: 36rem; }
table.data.inputs td .field-error { font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.25rem 0; }
.actions.sticky { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--rule);
  padding: .75rem 0; margin-bottom: 0; z-index: 5; }
code { font-family: Consolas, "Courier New", monospace; font-size: .9em; }

/* ── Analysis units ────────────────────────────────────────────────────────────────── */
.backlink { margin: 0 0 .25rem; }
.unit-meta { color: var(--muted); margin: -.5rem 0 1rem; }
.section-nav ul, .filters ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none;
  margin: 1rem 0; padding: 0; }
.section-nav a, .filters a { display: inline-block; padding: .25rem .6rem; min-height: 36px;
  border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; line-height: 1.7;
  font-size: .95rem; }
.section-nav ul { margin: .75rem 0; }
/* A menu that collapses to a disclosure on a narrow screen (app.js closes it there). On a
   wide screen the summary is not shown and the menu is always open. */
details.narrow-menu > summary { cursor: pointer; color: var(--accent); font-weight: 600;
  padding: .5rem 0; min-height: 44px; }
@media (min-width: 40.01rem) {
  details.narrow-menu > summary { display: none; }
}
details.toc-details { margin: .25rem 0 1rem; }
details.toc-details > summary { cursor: pointer; color: var(--accent); }
details.toc-details .toc-inline ul { margin: .5rem 0 0; gap: .25rem 1rem; }
.section-nav a[aria-current="page"], .filters a[aria-current="page"] { background: var(--accent);
  color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.section-nav .done { font-weight: 700; }
.editor-group { margin-top: 1.5rem; }
.editor-group > details.panel { margin-top: .5rem; }
/* position: relative so a visually hidden (absolutely positioned) label inside the table is
   clipped by the scroll box too, instead of widening the whole page. */
.table-scroll { overflow-x: auto; max-width: 100%; position: relative; }
table.editor-table input[type="text"] { width: 100%; min-width: 7rem; }
table.editor-table input.num { min-width: 6rem; }
table.editor-table tr.new-row td { background: #fafcfb; }
.column-hints { padding-left: 1.2rem; }
.cell-note { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.impact-table select { min-width: 8rem; width: auto; }
.impact-table .override { margin-top: .4rem; display: flex; flex-direction: column; gap: .2rem;
  font-size: .9rem; }
.readout { margin: .5rem 0; }
.kpi .kpi-sub { font-size: .8rem; font-weight: 400; color: var(--muted); }
details.data-details { margin: .5rem 0 1rem; }
details.data-details > summary { cursor: pointer; color: var(--accent); }
details.panel.issues { margin: 1rem 0; }
.issue-list { padding-left: 1.2rem; margin: .25rem 0 .75rem; }
.issue-list.errors li { color: var(--alert-ink); }
.error-text { color: var(--alert-ink); }
.side-form { border: 1px solid var(--rule); padding: .75rem 1rem; margin: 1.5rem 0; }
.side-form h2, .side-form h3 { margin-top: 0; }
.danger-link { margin-top: 2rem; }
.danger-link a { color: var(--alert-ink); }
button.danger { background: #b42318; border-color: #b42318; color: #fff; }
.checklist { max-height: 22rem; overflow-y: auto; border: 1px solid var(--rule); padding: .5rem .75rem; }
dl.notes-list dt { font-weight: 600; margin-top: .5rem; }
dl.notes-list dd { margin: .1rem 0 0; }
.unit-table th[scope="row"] a { font-weight: 600; }
.cards form.card .field input[type="text"].wide { width: 100%; }

/* ── Results and portfolio ─────────────────────────────────────────────────────────── */
table.matrix th[scope="row"] { white-space: nowrap; }
table.matrix td, table.matrix th[scope="col"] { font-size: .85rem; padding: .35rem .45rem; }
table.matrix th[scope="col"] { max-width: 7rem; }
td.over { font-weight: 700; color: var(--alert-ink); }
.table-scroll[tabindex="0"]:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
ul.card-list { list-style: none; padding: 0; display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
ul.card-list .card p { margin: .2rem 0; }
.card-title { font-weight: 600; }
form.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
form.inline-form select { width: auto; }
.cards form.card h2 { font-size: 1.15rem; margin-top: 0; }
input[type="file"] { font: inherit; max-width: 100%; }
details.citation { border-bottom: 1px solid var(--rule); padding: .4rem 0; }
details.citation summary { cursor: pointer; }
.citation-text { font-size: .9rem; white-space: pre-wrap; margin: .4rem 0 .2rem; }
table.data th[scope="row"] { font-weight: 600; background: none; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data.narrow { width: auto; min-width: 16rem; }
dl.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem;
  margin: 0 0 1rem; }
.kpi { border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: .5rem .75rem; }
.kpi dt { color: var(--muted); font-size: .85rem; }
.kpi dd { margin: 0; font-size: 1.35rem; font-weight: 700; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem;
  align-items: start; }
.stack-chart > * + * { margin-top: 1rem; }
.chart-figure { margin: 0; }
.chart-toggle { display: flex; gap: .5rem; margin-bottom: .5rem; }
.pie-layout { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.chart-figure .pie-layout > svg { flex: none; width: 16rem; max-width: 100%; height: auto; }
.chart-legend { list-style: none; margin: 0; padding: 0; font-size: .9rem; min-width: 14rem; }
.chart-legend li { display: flex; align-items: center; gap: .4rem; padding: .1rem 0; }
.chart-figure .chart-legend svg { flex: none; display: inline; width: 12px; height: 12px; }
.chart-legend .legend-name { flex: 1; }
.chart-legend .legend-figure { font-variant-numeric: tabular-nums; }
.chart-legend .legend-extra { color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.cell-source { font-size: .85rem; color: var(--muted); }
/* Drawn at 640 units wide; never scaled up past that, so label text stays at its drawn size
   on a wide screen and only shrinks where the screen itself is narrower. */
.chart-figure svg { display: block; width: 100%; max-width: 40rem; height: auto; }
table.data caption { text-align: left; font-weight: 600; padding: .3rem 0; }
table.data { border-collapse: collapse; width: 100%; }
table.data th, table.data td { border-bottom: 1px solid var(--rule); padding: .5rem; text-align: left; }
table.data thead th { background: var(--fill); }
@media (max-width: 40rem) {
  .account { margin-left: 0; }
  table.data thead { display: none; }
  table.data td, table.data th[scope="row"] { display: block; border: 0; padding: .15rem .5rem;
    text-align: left; }
  /* The header row is hidden when rows stack, so each cell names its own column. */
  table.data td[data-label]::before { content: attr(data-label) ": "; font-weight: 600;
    color: var(--muted); }
  table.data tr { display: block; border-bottom: 1px solid var(--rule); padding: .5rem 0; }
}

/* ── Map ───────────────────────────────────────────────────────────────────────────── */
.site-map { height: 32rem; max-height: 70vh; border: 1px solid var(--rule); background: var(--fill); }
.site-map:not(.is-live) { height: auto; padding: 1rem; }
.map-fallback { margin: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; padding: 0;
  margin: .5rem 0; font-size: .9rem; }
.map-legend li { display: flex; align-items: center; gap: .35rem; }
.map-legend svg { flex: none; }
.map-popup p { margin: .15rem 0; }
.map-popup-title { font-weight: 700; }
.map-popup-notes { color: var(--muted); white-space: pre-wrap; }
/* Leaflet's own controls keep a visible keyboard focus. */
.site-map .leaflet-control a:focus-visible, .site-map .leaflet-control input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px; }
@media (max-width: 40rem) {
  .site-map { height: 24rem; }
}