@font-face { font-family: "Inter"; src: url("vendor/inter/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
    --sb-w: 380px;
    --navy: #0b2545;
    --navy-2: #13315c;
    --accent: #e8742a;
    --accent-strong: #b8501c;
    --accent-hover: #9a4216;
    --amber: #f6a74f;
    --focus: #2563eb;
    --ink: #1f2937;
    --ink-2: #4b5563;
    --ink-3: #374151;
    --muted: #6b7280;
    --line: #e5e7eb;
    --track: #e9edf2;
    --steel: #9fb2cf;
    --danger: #b42318;
    --ok: #1a7f37;
    --warn: #b45309;
    --bg: #f7f8fa;
}
html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
}

/* Map fills everything to the right of the sidebar */
#mapwrap {
    position: absolute; top: 0; bottom: 0; right: 0;
    left: var(--sb-w);
}
#map { position: absolute; inset: 0; }

/* ---------- Sidebar ---------- */
#sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sb-w);
    background: var(--bg);
    box-shadow: 4px 0 24px rgba(11, 37, 69, 0.18);
    overflow-y: auto;
    z-index: 1200;
    line-height: 1.55;
    font-size: 13.5px;
}
#sidebar .hero {
    background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff;
    padding: 28px 28px 22px 28px;
    border-bottom: 4px solid var(--accent);
    --focus: var(--amber);
}
#sidebar .eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--amber); margin-bottom: 10px;
}
#sidebar h1 {
    margin: 0 0 8px 0; font-size: 22px; line-height: 1.25;
    font-weight: 700; letter-spacing: -0.01em; text-wrap: balance;
}
#sidebar .lede {
    margin: 0; font-size: 13.5px; color: #cfd9e8; font-weight: 400;
}
#sidebar .body { padding: 22px 28px 30px 28px; }

/* Event selector */
.picker-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--steel); margin: 18px 0 8px 0;
}
/* Displacement indicator: hover (or focus/tap) to open the two options */
.indicator { position: relative; }
.ind-trigger {
    --focus: var(--amber);
    width: 100%; box-sizing: border-box; cursor: pointer; font: inherit;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 600; text-align: left;
    padding: 10px 14px; border-radius: 8px;
    color: #fff; background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.ind-caret { font-size: 11px; opacity: .8; }
.ind-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    padding-top: 6px; z-index: 1300;
}
.indicator:hover .ind-menu, .indicator:focus-within .ind-menu { display: block; }
.indicator.closed .ind-menu { display: none; }
.ind-box {
    background: #fff; border-radius: 10px; overflow: hidden;
    box-shadow: 0 12px 30px rgba(11, 37, 69, 0.35);
}
.ind-opt {
    display: block; width: 100%; box-sizing: border-box; cursor: pointer;
    font: inherit; text-align: left; background: #fff; color: var(--ink);
    border: none; border-left: 4px solid transparent; padding: 11px 14px;
}
.ind-opt + .ind-opt { border-top: 1px solid var(--line); }
.ind-opt:hover, .ind-opt:focus-visible { background: #f3f6fa; }
.ind-opt.active { border-left-color: var(--accent); background: #fff6ee; }
.ind-opt b { display: block; font-size: 13px; color: var(--navy); }
.ind-opt span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
    appearance: none; cursor: pointer; font: inherit;
    font-size: 12.5px; font-weight: 600; line-height: 1.2;
    padding: 8px 13px; border-radius: 999px;
    color: #e6edf7; background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: rgba(255, 255, 255, 0.18); }
.chip.active {
    background: var(--accent-strong); border-color: var(--accent-strong); color: #fff;
}

.event-card {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(11, 37, 69, 0.05);
}
.event-card .ev-meta {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.event-card .ev-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.event-card .ev-desc { margin: 4px 0 0 0; font-size: 12.5px; color: var(--ink-2); }
.event-card .ev-desc:empty { display: none; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 26px; }
.stat {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 12px 10px 12px;
    box-shadow: 0 1px 2px rgba(11, 37, 69, 0.05);
}
.stat b { display: block; font-size: 19px; color: var(--navy); font-weight: 700; line-height: 1.2; }
.stat span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

#sidebar h2 {
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--navy);
    margin: 0 0 14px 0; padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
#sidebar section { margin-bottom: 28px; }
#sidebar p { margin: 0 0 10px 0; color: var(--ink-3); }

/* Methodology timeline */
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps li { position: relative; padding: 0 0 18px 46px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
    content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px;
    width: 2px; background: #d7dde6;
}
.steps li:last-child::before { display: none; }
.steps .num {
    position: absolute; left: 0; top: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--navy); color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px var(--bg);
}
.steps h3 { margin: 4px 0 3px 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.steps p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* Ranked list */
.ranked { list-style: none; margin: 0; padding: 0; }
.ranked li { margin-bottom: 11px; }
.rk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rk-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.rk-name em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.rk-val { font-weight: 600; font-size: 13px; color: var(--navy); font-variant-numeric: tabular-nums; }
.rk-val em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.rk-bar { height: 6px; background: var(--track); border-radius: 4px; margin-top: 5px; overflow: hidden; }
.rk-bar span { display: block; height: 100%; border-radius: 4px; }
.rk-empty { color: var(--muted); }

.sources { font-size: 12.5px; color: var(--ink-2); }
.sources li { margin-bottom: 6px; }
.sources ul { margin: 0; padding-left: 18px; }
.foot {
    font-size: 11.5px; color: var(--muted);
    border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px;
}

/* ---------- Legend (on the map) ---------- */
#legend {
    position: absolute; right: 18px; bottom: 34px; z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 6px 22px rgba(11, 37, 69, 0.18);
    padding: 14px 16px 14px 16px; width: 250px;
    font-size: 12px; color: var(--ink);
}
#legend .lg-title { font-weight: 700; color: var(--navy); font-size: 12.5px; margin-bottom: 2px; }
#legend .lg-sub { color: var(--muted); font-size: 11px; margin-bottom: 10px; }
#legend .lg-pal { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-2); font-size: 11.5px; }
#legend .lg-pal select {
    flex: 1; min-width: 0; font: inherit; color: var(--navy); background: #fff;
    border: 1px solid var(--ctl); border-radius: 6px; padding: 3px 6px; cursor: pointer;
}
#legend .lg-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; color: var(--ink-2); font-size: 11.5px; }
#legend .lg-custom label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#legend .lg-custom input[type="color"] {
    width: 34px; height: 22px; padding: 1px 2px; cursor: pointer;
    border: 1px solid var(--ctl); border-radius: 5px; background: #fff;
}
#legend .lg-hint { flex-basis: 100%; margin: 0; color: var(--warn); font-size: 11px; line-height: 1.35; }
#legend .lg-bar {
    height: 12px; border-radius: 6px;
    background: linear-gradient(to right, #d4f1ea, #8dd6c4, #3fb3a0, #1d7a8c, #0e3585);
    border: 1px solid rgba(0, 0, 0, 0.12);
}
#legend .lg-scale { display: flex; justify-content: space-between; margin-top: 5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#legend #lg-min, #legend #lg-max { min-width: 4.5em; font-variant-numeric: tabular-nums; }
#legend #lg-max { text-align: right; }
#legend .lg-nodata { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-2); }
#legend .lg-swatch {
    width: 22px; height: 14px; border-radius: 3px;
    background: #f6f1e4; border: 1px solid #b8ae96;
}

/* Legend toggle (shown on phones only, see the 600px query at the end) */
.lg-toggle { display: none; }

/* ---------- Map error banner: static files or database failed ---------- */
.load-err {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-sizing: border-box;
    width: min(420px, calc(100% - 24px));
    background: #fff; color: var(--navy); border: 1px solid var(--line); border-top: 4px solid var(--accent);
    border-radius: 10px; box-shadow: 0 6px 22px rgba(11, 37, 69, 0.25); padding: 10px 14px; font-size: 13px;
}
.load-err span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
#load-err-retry {
    min-height: 32px; border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer;
    background: var(--accent-strong); color: #fff; font-weight: 600;
}
#load-err-retry:hover { background: var(--accent-hover); }

/* ---------- Hover tooltip ---------- */
.maplibregl-popup-content {
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(11, 37, 69, 0.28) !important;
    padding: 6px 4px !important;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
    color: var(--ink) !important;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px)); overflow-wrap: anywhere;
    border-top: 4px solid var(--accent) !important;
}
.maplibregl-popup-content table { border-collapse: collapse; width: 100%; }
.maplibregl-popup-content th {
    text-align: left; font-weight: 500; font-size: 11px; color: var(--muted);
    padding: 4px 10px 4px 12px; white-space: normal; vertical-align: top;
}
.maplibregl-popup-content td {
    font-weight: 600; font-size: 12.5px; color: var(--navy);
    padding: 4px 12px 4px 0; white-space: normal;
}
.maplibregl-popup-content tr:first-child td { font-size: 14px; }
.maplibregl-popup-tip { display: none; }

/* Map controls */
.maplibregl-ctrl-group { border: none !important; box-shadow: 0 0 0 1px var(--ctl), 0 2px 10px rgba(11, 37, 69, 0.2) !important; border-radius: 8px !important; overflow: hidden; }
.maplibregl-ctrl-group button { color: var(--navy) !important; }

/* ---------- Small screens: stack sidebar above the map ---------- */
@media (max-width: 880px) {
    #sidebar { right: 0; bottom: auto; width: auto; height: 46vh; box-shadow: 0 4px 18px rgba(11,37,69,.2); }
    #mapwrap { top: 46vh; left: 0; }
    #legend { bottom: 44px; right: 10px; width: 210px; }
}

/* ---------- Additions for MapLibre, accounts and replay ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, select, input, textarea { font: inherit; }
#sidebar .hero { position: relative; }
#account { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-width: 0; margin: -10px 0 14px 0; }
.ghost-btn {
    background: transparent; color: #fff; border: 1px solid #fff; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer; transition: background 150ms;
    flex: 0 0 auto; white-space: nowrap;
    min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
}
.ghost-btn:hover { background: rgba(255, 255, 255, 0.18); }
.role-chip { font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 3px 10px; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-opt { transition: background 150ms; }
.ind-trigger { transition: background 150ms; }

button.primary {
    background: var(--accent-strong); color: #fff; border: 0; border-radius: 6px; padding: 7px 14px;
    font-weight: 600; cursor: pointer; transition: background 150ms, opacity 150ms;
}
button.primary:hover { background: var(--accent-hover); }
button.ghost { background: var(--track); color: var(--navy); border: 1px solid #b9c6d8; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 600; }
button.ghost:hover { background: #d6dfeb; }
button:disabled { opacity: 0.5; cursor: default; }
#sidebar button:not(.ind-trigger):not(.ind-opt):not(.chip):not(.primary):not(.ghost):not(.ghost-btn):not(.link-btn):not([aria-pressed]) {
    background: var(--navy); color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer;
}
#sidebar .causes button { background: #fff; color: var(--ink); }
#sidebar select, #sidebar input[type="text"], #sidebar input[type="number"], #sidebar input[type="date"],
#sidebar input[type="url"], dialog input[type="text"], dialog input[type="password"], dialog select, #sidebar textarea {
    width: 100%; padding: 7px 9px; border: 1px solid var(--ctl); border-radius: 6px; background: #fff; color: var(--ink);
}
#sidebar select:focus, #sidebar input:focus, #sidebar textarea:focus, dialog input:focus {
    border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.25);
}
#sidebar label, #sidebar .lbl, dialog label { display: block; margin: 10px 0 3px; font-weight: 600; font-size: 12px; color: var(--ink-3); }
label.check { font-weight: 400 !important; display: flex !important; gap: 6px; align-items: center; margin: 4px 0 !important; }
label.check input { width: auto !important; }
label.check[hidden] { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; }
.row select { flex: 1; }
.msg { min-height: 1.2em; margin: 8px 0 0; color: var(--danger); font-size: 13px; }
.msg.ok { color: var(--ok); }
#sidebar h3 { font-size: 13.5px; color: var(--navy); margin: 14px 0 6px; }
.subform { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: #fff; }
.add-actions { margin-top: 10px; }
.link-btn { background: none; border: 0; padding: 0; margin: 6px 0 0; min-height: 32px; display: inline-flex; align-items: center; color: var(--navy); text-decoration: underline; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.link-btn:hover { text-decoration: none; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 6px; }
.causes { display: flex; flex-wrap: wrap; gap: 6px; }
.causes button { border: 2px solid transparent; padding: 3px 8px 3px 4px; display: inline-flex; gap: 5px; align-items: center; border-radius: 16px; box-shadow: 0 0 0 1px var(--ctl); cursor: pointer; text-align: left; }
#sidebar .causes button[aria-pressed="true"] { border-color: var(--navy); background: #eef3fa; }
.cause-group { flex: 1 1 100%; min-width: 0; }
.cause-group-label { display: block; margin: 10px 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cause-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.mine { list-style: none; margin: 0; padding: 0; }
.mine li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.meta { color: var(--muted); font-size: 12px; }
#sidebar .hint { font-size: 12px; color: var(--muted); }
.status { font-weight: 700; text-transform: capitalize; }
.status.approved { color: var(--ok); }
.status.rejected { color: var(--danger); }
.status.pending { color: var(--warn); }
.count { background: var(--accent-strong); color: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; letter-spacing: 0; }
.qcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.qcard .actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.qcard button.reject { background: var(--danger) !important; }
.qcard .edit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
#sidebar .qf { display: block; margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
#sidebar .qf > span { display: block; margin-bottom: 3px; }
#sidebar .qf input, #sidebar .qf textarea { font-size: 13px; }
.sid { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.sel-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sel-table th, .sel-table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.sel-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ranked li { cursor: pointer; }
.rk-bar span { transition: width 200ms; }

.cause-badge { display: inline-flex; vertical-align: middle; border-radius: 50%; overflow: hidden; }
.cause-badge img { display: block; width: 100%; height: 100%; }
.tik-marker { display: flex; gap: 2px; pointer-events: none; }
.tik-marker .cause-badge { box-shadow: 0 0 0 1.5px #ffffff, 0 1px 3px rgba(0, 0, 0, 0.6); }
/* The contributor's own stamps: sent and waiting for the validator, or only picked in the form. */
.tik-marker .cause-badge.st-pending { outline: 2px dashed #ffd54a; outline-offset: 1px; }
.tik-marker .cause-badge.st-draft { opacity: 0.6; outline: 2px dashed #ffffff; outline-offset: 1px; }
.tip-title { font-weight: 700; font-size: 14px; color: var(--navy); padding: 4px 12px; }
.tip-row { display: flex; gap: 14px; justify-content: space-between; padding: 3px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.tip-row span:first-child { color: var(--muted); font-weight: 500; font-size: 11px; }
.tip-causes { display: inline-flex; gap: 2px; }
.maplibregl-popup-content { padding: 6px 0 !important; }
.lg-badges { margin-top: 8px; }
.lg-head { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.lg-grp { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-top: 2px; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }

/* Event card storm tiles */
.storm { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 10px; }
.storm-head { font-weight: 700; color: var(--navy); }
.storm a { color: var(--navy); text-decoration: underline; }
.storm .flag { color: var(--warn); font-weight: 600; margin-left: 6px; font-size: 11.5px; }
.storm-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.storm-tiles .stat { padding: 8px 10px; }
.storm-tiles .stat b { font-size: 13px; }
.storm-tiles .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tc-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
#tc-source { font-size: 12px; margin: 8px 0 0; overflow-wrap: anywhere; }
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

/* Replay */
#replay {
    position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
    width: min(560px, calc(100% - 24px));
    background: rgba(255, 255, 255, 0.97); border: 1px solid var(--line); border-top: 4px solid var(--accent);
    border-radius: 12px; box-shadow: 0 6px 22px rgba(11, 37, 69, 0.25); padding: 10px 14px; font-size: 12.5px;
}
/* Lift the legend above the open replay bar so the bar does not cover it. */
#mapwrap:has(#replay:not([hidden])) #legend { bottom: 170px; }
.rp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-row input[type="range"] { flex: 1; min-width: 0; padding: 0; accent-color: var(--accent); }
.rp-speed { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.rp-speed select { border: 1px solid var(--ctl); border-radius: 6px; padding: 4px; background: #fff; }
.rp-time { font-weight: 700; color: var(--navy); margin-top: 6px; }
.rp-storms { margin-top: 2px; color: var(--ink); }
.rp-storms div { margin-top: 2px; }
.rp-sat { color: var(--muted); margin-top: 4px; font-size: 11.5px; }
.rp-credit { color: var(--muted); font-size: 11px; }
.rp-key { color: var(--muted); font-size: 11px; margin-top: 4px; }
/* No position here: .maplibregl-marker must stay absolute, or the marker spans the map width and the swirl drifts off the track */
.cyc-marker { pointer-events: none; }
.cyc-body { width: 56px; height: 56px; }
.cyc-spin { display: block; width: 100%; height: 100%; overflow: visible; filter: blur(0.5px) drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); animation: cyc-spin 8s linear infinite; }
/* Just below the eye ring (ring edge at 63.5% of the swirl), so a large swirl keeps its label near the centre */
.cyc-label { position: absolute; top: calc(64% + 2px); left: 50%; transform: translateX(-50%); margin-top: 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
.cyc-name { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.cyc-cat { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 8px; line-height: 14px; }
@keyframes cyc-spin { to { transform: rotate(360deg); } }

/* Login dialog */
dialog { border: 0; border-radius: 12px; padding: 20px; width: min(360px, 92vw); box-shadow: 0 12px 30px rgba(11, 37, 69, 0.35); border-top: 4px solid var(--accent); font-family: inherit; color: var(--ink); }
dialog::backdrop { background: rgba(11, 37, 69, 0.5); }
dialog h2 { margin: 0 0 8px; color: var(--navy); font-size: 16px; }
dialog button { border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; background: var(--navy); color: #fff; }
dialog button[type="submit"] { background: var(--accent-strong); font-weight: 600; }
dialog fieldset { border: 1px solid var(--line); }
#login-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
/* Affiliation ghost text: the rest of the suggestion shows in grey behind the typed text. */
.ghost-wrap { position: relative; background: #fff; border-radius: 6px; }
.ghost-wrap #login-affil { position: relative; z-index: 1; background: transparent; }
.ghost-text { position: absolute; inset: 0; z-index: 0; padding: 8px 10px; font: inherit; color: var(--muted);
    white-space: pre; overflow: hidden; pointer-events: none; }
.ghost-typed { visibility: hidden; }

/* ---------- Step-by-step form ---------- */
.wiz-progress { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted); }
.wiz-progress li { flex: 1 1 0; min-width: 0; text-align: center; padding: 4px 2px; border-bottom: 3px solid var(--line); overflow-wrap: anywhere; }
.wiz-progress li.is-done { color: var(--navy); border-bottom-color: var(--steel); }
.wiz-progress li.is-current { color: var(--accent-strong); font-weight: 700; border-bottom-color: var(--accent); }
.wiz-bar { height: 6px; background: var(--track); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.wiz-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 200ms; }
.wiz-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz-step legend { font-weight: 700; font-size: 13px; color: var(--navy); padding: 0; margin: 10px 0 2px; }
.wiz-nav { justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.wiz-nav .primary { margin-left: auto; }
.hazards { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin: 6px 0 10px; }
#sidebar .hz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 8px 4px; border: 1px solid var(--ctl); border-radius: 8px; font-weight: 400; font-size: 12px; line-height: 1.25; text-align: center; color: inherit; cursor: pointer; }
#sidebar .hz input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
#sidebar .hz img { display: block; width: 40px; height: 40px; }
#sidebar .hz:has(input:checked) { border-color: var(--navy); background: #eef3fa; }
#sidebar .hz:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
#c-record, #c-review { margin-top: 10px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
#c-record > *, #c-review > * { margin: 3px 0 0 0 !important; }
#c-record .meta, #c-review .meta { margin-top: 6px !important; }
#c-tcinfo:empty { display: none; }
#c-tcinfo { margin-top: 10px; }
.causes button[draggable="true"] { cursor: grab; }
.chip.pending { border-style: dashed; }
.stamps-switch label { display: flex; align-items: center; gap: 4px; margin: 0; padding: 5px 10px 5px 8px; font-size: 12px; font-weight: 600; color: var(--navy); background: #fff; cursor: pointer; white-space: nowrap; }
.rv-causes { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; vertical-align: middle; }
.rv-cause { display: inline-flex; gap: 4px; align-items: center; }
#tc-wiki { margin: 6px 0 10px; }
#tc-wiki:empty { display: none; }

/* ---------- Details table: bylines and the validator's inline editor ---------- */
tr.sel-by td { font-size: 12px; color: var(--muted); padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
tr.sel-by button.ghost { margin-left: 8px; padding: 2px 8px; font-size: 11.5px; }
tr.sel-edit td { padding: 6px 4px 10px; border-bottom: 1px solid var(--line); }
tr.sel-edit .edit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
tr.sel-edit .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.foot .credits { color: var(--ink-2); font-size: 12px; margin: 0 0 10px 0; }
.foot .logos { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 10px 0; }
.foot .logos img { height: 34px; width: auto; }
.foot p:last-child { margin: 0; }

#toast {
    position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    max-width: min(420px, calc(100vw - 32px)); overflow-wrap: anywhere;
    background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 2000;
    transition: opacity 200ms, transform 200ms;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 880px) {
    #replay { bottom: 12px; }
    #mapwrap:has(#replay:not([hidden])) #legend { display: none; }
}
@media (max-width: 600px) {
    /* Phones: the legend starts closed under its toggle; desktop never hides the legend body */
    .lg-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box;
        width: 100%; min-height: 32px; margin: 0 0 8px 0; padding: 6px 10px;
        background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 8px;
        font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    }
    .lg-toggle::after {
        content: ""; width: 7px; height: 7px; flex: none; margin-top: -4px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(-135deg);
    }
    #legend.collapsed .lg-toggle { margin-bottom: 0; }
    #legend.collapsed .lg-toggle::after { margin-top: -2px; transform: rotate(45deg); }
    #legend.collapsed #lg-body { display: none; }
    /* The slider takes its own row above the buttons on narrow screens */
    .rp-row input[type="range"] { flex: 1 1 100%; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Map how-to guide (guide.js) ---------- */
/* The guide button sits in the bottom-right corner of the map; the legend sits just above it. */
.guide-btn {
    position: absolute; right: 18px; bottom: 34px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(11, 37, 69, 0.35); transition: background 150ms;
}
.guide-btn:hover { background: var(--navy-2); }
.guide-btn[aria-expanded="true"] { background: var(--accent-strong); }
.guide-q {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
}
#legend { bottom: 86px; }
#mapwrap:has(#replay:not([hidden])) .guide-btn { bottom: 186px; }
#mapwrap:has(#replay:not([hidden])) #legend { bottom: 238px; }
.guide-side { margin: -6px 0 10px; }

/* Welcome panel */
.gw-overlay {
    position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(11, 37, 69, 0.55);
}
.gw-panel {
    position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    background: #fff; color: var(--ink); border-radius: 14px; border-top: 4px solid var(--accent);
    box-shadow: 0 18px 50px rgba(11, 37, 69, 0.45); padding: 24px 24px 18px; line-height: 1.5;
}
.gw-panel:focus { outline: none; }
.gw-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); }
.gw-panel h2 { margin: 4px 36px 6px 0; font-size: 20px; line-height: 1.25; color: var(--navy); }
.gw-lede { margin: 0 0 16px; color: var(--ink-2); font-size: 13.5px; }
.gw-x, .gt-x {
    position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.gw-x:hover { background: var(--track); color: var(--navy); }
.gw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gw-card {
    display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
    align-items: center; text-align: left; padding: 12px; cursor: pointer;
    background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px;
    color: var(--ink); transition: background 150ms, border-color 150ms;
}
.gw-card:hover { background: #fff6ee; border-color: var(--amber); border-left-color: var(--accent); }
.gw-card img { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.gw-card-t { font-weight: 700; color: var(--navy); font-size: 14px; align-self: end; }
.gw-card-s { font-size: 12px; color: var(--muted); align-self: start; line-height: 1.35; }
.gw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.gw-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.gw-skip { background: #fff; color: var(--navy); border: 1px solid var(--ctl); border-radius: 6px; padding: 6px 14px; font-weight: 600; cursor: pointer; }

/* Tour window: points at one part of the page; drag its top bar to move it. */
#guide-tour {
    position: fixed; z-index: 2400; width: min(330px, calc(100vw - 24px));
    background: var(--navy); color: #fff; border-radius: 12px;
    box-shadow: 0 14px 40px rgba(11, 37, 69, 0.45); font-size: 13px; line-height: 1.5;
}
#guide-tour:focus { outline: none; }
#guide-tour:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
#guide-tour .gt-bar {
    position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 44px 6px 12px;
    cursor: grab; touch-action: none; user-select: none; border-radius: 12px 12px 0 0;
}
#guide-tour.gt-dragging .gt-bar { cursor: grabbing; }
#guide-tour .gt-bar:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.gt-grip {
    width: 14px; height: 14px; flex: none; opacity: 0.6;
    background-image: radial-gradient(#fff 1.2px, transparent 1.3px); background-size: 5px 5px;
}
.gt-step { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
#guide-tour .gt-x { top: 4px; right: 4px; color: #cfd9e8; }
#guide-tour .gt-x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.gt-body { padding: 0 16px 4px; }
.gt-title { margin: 2px 0 4px; font-size: 15px; font-weight: 700; color: #fff; }
.gt-text { margin: 0; color: #dbe4f0; }
.gt-act {
    margin-top: 10px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600;
    background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.6);
}
.gt-act:hover { background: rgba(255, 255, 255, 0.14); }
.gt-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; }
.gt-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.gt-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.gt-dots span.on { background: var(--amber); }
.gt-btns { display: flex; gap: 8px; flex: none; }
#guide-tour button.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
#guide-tour button.ghost:hover { background: rgba(255, 255, 255, 0.14); }
#guide-tour button.primary { background: var(--accent-strong); }
#guide-tour button.primary:hover { background: var(--accent-hover); }
.gt-arrow { position: absolute; width: 14px; height: 14px; background: var(--navy); transform: rotate(45deg); }
.gt-arrow-right { left: -7px; }
.gt-arrow-left { right: -7px; }
.gt-arrow-bottom { top: -7px; }
.gt-arrow-top { bottom: -7px; }
#guide-ring {
    position: fixed; z-index: 2300; pointer-events: none; border-radius: 10px;
    box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px rgba(232, 116, 42, 0.35), 0 0 0 9999px rgba(11, 37, 69, 0.28);
    transition: left 200ms, top 200ms, width 200ms, height 200ms;
}
#guide-ring.gt-ring-big { box-shadow: inset 0 0 0 3px var(--accent); border-radius: 0; }

@media (max-width: 880px) {
    .guide-btn { right: 10px; bottom: 44px; }
    #legend { bottom: 96px; }
    #mapwrap:has(#replay:not([hidden])) .guide-btn { bottom: 186px; }
}
@media (max-width: 600px) {
    .guide-btn { padding: 6px; }
    .guide-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .gw-cards { grid-template-columns: 1fr; }
    .gw-panel { padding: 20px 16px 14px; }
}

/* =====================================================================
   Facelift: top bar with Map, Dashboard and Methods (tabs.js), light basemap
   (basemap.js), dashboard (dashboard.js) and the Methods page.
   ===================================================================== */
:root { --hdr: 58px; --page-w: 1120px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Top bar ---------- */
#topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--hdr); z-index: 1600;
    display: flex; align-items: stretch; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(11, 37, 69, 0.10);
}
#topbar .brand {
    flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 18px; border: 0; cursor: pointer; text-align: left; line-height: 1.08;
    background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff;
    box-shadow: inset 0 -3px 0 var(--accent); text-transform: uppercase;
}
.brand-1, .brand-3 { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--amber); }
.brand-2 { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.top-tabs { display: flex; align-items: stretch; margin-left: 6px; }
.top-tab {
    background: none; border: 0; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
    padding: 0 18px; cursor: pointer; color: var(--ink-2);
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    transition: color 150ms, background 150ms;
}
.top-tab:hover { color: var(--navy); background: #f3f6fa; }
.top-tab[aria-current="page"] { color: var(--navy); border-bottom-color: var(--accent); }
.top-tab:focus-visible, #topbar .brand:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
#topbar #account { margin: 0 18px 0 auto; align-self: center; }
#topbar .ghost-btn { color: var(--navy); border-color: #b9c6d8; background: #fff; font-weight: 600; }
#topbar .ghost-btn:hover { background: var(--track); }
#topbar #login-btn { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
#topbar #login-btn:hover { background: var(--accent-hover); }
#topbar .role-chip { color: var(--navy); background: var(--track); max-width: 320px; }

/* The map page sits under the top bar */
#sidebar { top: var(--hdr); }
#mapwrap { top: var(--hdr); }
#sidebar .hero { padding: 20px 24px 20px 24px; }
#sidebar .hero .lede { margin: 0 0 4px; font-size: 13px; }
#sidebar .hero .picker-label { margin-top: 12px; }
#sidebar .body { padding: 20px 24px 28px 24px; }
.side-more { font-size: 12.5px; color: var(--muted) !important; border-top: 1px solid var(--line); padding-top: 12px; }
.side-more .link-btn { margin: 0; min-height: 0; }

/* ---------- Pages over the map ---------- */
.page {
    position: fixed; top: var(--hdr); left: 0; right: 0; bottom: 0; z-index: 1500;
    overflow-y: auto; background: var(--bg); line-height: 1.55; font-size: 14px;
}
.page-inner { max-width: var(--page-w); margin: 0 auto; padding: 0 28px; }
.page-hero {
    background: linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff;
    border-bottom: 4px solid var(--accent); padding: 30px 0 28px; margin-bottom: 26px;
}
.page-hero .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.page-hero h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; color: #fff; outline: none; }
.page-hero .lede { margin: 0; color: #cfd9e8; max-width: 640px; }
.page-hero-row { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; justify-content: space-between; }

/* ---------- Methods ---------- */
.methods { max-width: 820px; padding-bottom: 40px; }
.methods section {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(11, 37, 69, 0.05);
}
.methods h2 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
    margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.methods p { margin: 0 0 10px; color: var(--ink-3); }
.methods .steps .num { box-shadow: 0 0 0 4px #fff; }
.methods .steps p { font-size: 13.5px; }
.methods .foot { border-top: 0; padding: 8px 4px 0; }

/* ---------- Dashboard ---------- */
.dash-pick { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.dash-pick label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.dash-pick select {
    font-size: 15px; font-weight: 600; padding: 10px 36px 10px 14px; border-radius: 8px; cursor: pointer;
    color: var(--navy); background: #fff; border: 2px solid var(--amber);
}
#dash { padding-bottom: 48px; }
.dash-nav {
    position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; flex-wrap: wrap; margin: -10px 0 18px;
    padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line);
}
.dash-nav button {
    background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.dash-nav button:hover { background: var(--track); color: var(--navy); }
.dash-card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(11, 37, 69, 0.05); scroll-margin-top: 64px; outline: none;
}
.dash-card-head { padding: 18px 22px 0; }
.dash-card-head h3 { margin: 0; font-size: 17px; color: var(--navy); }
.dash-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 760px; }
.dash-card-body { padding: 14px 22px 20px; }
.dash-lede { margin: 0 0 16px; font-size: 15px; color: var(--ink); max-width: 820px; }
.dash-empty { margin: 0; color: var(--muted); }
.dash-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.dash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dash-tile { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 14px; }
.dash-tile b { display: block; font-size: 26px; line-height: 1.15; color: var(--navy); font-variant-numeric: tabular-nums; }
.dash-tile span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dash-tile em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-panel { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.dash-panel h4, .drv-group h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.dash-panel h4 + .share { margin-bottom: 14px; }
.share { display: flex; align-items: center; gap: 14px; }
.share-big { font-size: 34px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.share-txt { font-size: 13px; color: var(--ink-2); }
.top-list { margin: 0; padding-left: 20px; }
.top-list li { padding: 3px 0; }
.top-list li span { float: right; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dash-chip {
    border: 1px solid #b9c6d8; background: #fff; color: var(--navy); border-radius: 999px; padding: 5px 12px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.dash-chip:hover { background: var(--track); }
.dash-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Horizontal bars: label | bar | number */
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; }
.bar-list-wide .bar-row { grid-template-columns: minmax(140px, 24%) 1fr minmax(110px, auto); }
.bar-label { font-size: 13px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-track { position: relative; height: 14px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bar-val { font-size: 12.5px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: pre; text-align: right; }
.tik-link {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--navy);
    font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: #b9c6d8; text-underline-offset: 3px;
}
.tik-link:hover { text-decoration-color: var(--accent); }
.tik-link em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 6px; text-decoration: none; display: inline-block; }

/* Drivers */
.drv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.drv-group { min-width: 0; }
.drv-key { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.bar-row-drv { grid-template-columns: minmax(140px, 52%) minmax(40px, 1fr) auto; padding: 4px 0; }
.drv-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drv-label > span:last-child { font-size: 12.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.drv-label .cause-badge { flex: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); display: inline-flex; }

/* Recurrence matrix */
.mx-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.mx { border-collapse: collapse; width: 100%; font-size: 13px; }
.mx th, .mx td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.mx tbody tr:last-child th, .mx tbody tr:last-child td { border-bottom: 0; }
.mx thead th { background: var(--bg); font-size: 11.5px; font-weight: 700; color: var(--ink-2); vertical-align: bottom; position: sticky; top: 0; }
.mx-tik { min-width: 150px; white-space: nowrap; }
.mx-rate { min-width: 190px; width: 300px; }
.mx-tc { text-align: center !important; width: 56px; }
.mx-tc span { display: block; }
.mx-tc em { display: block; font-style: normal; font-weight: 400; color: var(--muted); }
.mx-cell { text-align: center !important; }
.rate { display: flex; align-items: center; gap: 8px; }
.rate .bar-track { flex: 1; height: 10px; }
.rate-txt { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; min-width: 76px; }
.cell { display: inline-block; width: 22px; height: 22px; border-radius: 5px; vertical-align: middle; }
.cell.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.cell.off { border: 1.5px dashed #c3ccd6; background: #fff; }
.cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mx-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.mx-lg-t { font-weight: 600; }
.mx-lg-i { display: inline-flex; align-items: center; gap: 6px; }
.mx-lg-i .cell { width: 16px; height: 16px; }
#dash-tip {
    position: fixed; z-index: 2600; pointer-events: none; max-width: 320px;
    background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.4; padding: 7px 10px; border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ---------- Light basemap: labels and switch ---------- */
.maplibregl-marker.ml-label { pointer-events: none; z-index: 0; white-space: nowrap; font-family: inherit; }
.maplibregl-marker.stamp-card, .maplibregl-marker .stamp-card { z-index: 2; }
.ml-label { color: #374151; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.ml-province { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: #5d6b7d; }
.ml-island { font-size: 12.5px; font-style: italic; font-weight: 600; color: #3b4a5c; }
.ml-sea { font-size: 12.5px; font-style: italic; letter-spacing: 0.08em; color: #3d7896; text-shadow: none; }
.ml-capital, .ml-town { font-size: 12px; font-weight: 600; color: #1f2937; display: inline-flex; align-items: center; gap: 4px; }
.ml-capital { font-size: 13.5px; font-weight: 700; }
.ml-capital::before, .ml-town::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1f2937; box-shadow: 0 0 0 2px #fff; flex: none; }
.ml-capital::before { width: 8px; height: 8px; background: var(--navy); }
.ml-tikina { font-size: 10.5px; font-weight: 500; color: #4b5563; }
.bm-sat .ml-label { color: #fff; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 4px rgba(0, 0, 0, 0.9); }
.bm-sat .ml-sea { color: #d6ecf6; }
.bm-switch { display: flex; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--ctl), 0 2px 10px rgba(11, 37, 69, 0.2); overflow: hidden; }
.bm-switch button {
    border: 0; background: #fff; color: var(--navy); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.bm-switch button + button { border-left: 1px solid var(--ctl); }
.bm-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
body:not(.bm-sat) #legend .lg-swatch { background: #ffffff; border-color: #c3ccd6; }
#legend .lg-mang { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-2); font-size: 0.92em; line-height: 1.3; }
#legend .lg-mang .lg-swatch { flex: none; }
#legend .lg-swatch-m, body:not(.bm-sat) #legend .lg-swatch-m {
    background: linear-gradient(to right, #e7f7f3, #c0e8df, #95d5cb, #83b6c0, #7a90bc); border-color: rgba(0, 0, 0, 0.12);
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1000px) {
    .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drv-cols { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
    #sidebar { top: var(--hdr); height: 42vh; }
    #mapwrap { top: calc(var(--hdr) + 42vh); }
    .dash-grid { grid-template-columns: 1fr; }
    .top-tab { padding: 0 12px; }
}
@media (max-width: 640px) {
    :root { --hdr: 100px; }
    #topbar { flex-wrap: wrap; }
    #topbar .brand { height: 56px; padding: 0 14px; }
    #topbar #account { margin: 0 10px 0 8px; height: 56px; flex: 1 1 0; min-width: 0; max-width: none; }
    #topbar .role-chip { min-width: 0; flex: 0 1 auto; }
    .top-tabs { order: 3; width: 100%; height: 44px; margin: 0; border-top: 1px solid var(--line); }
    .top-tab { flex: 1; padding: 0 6px; font-size: 12px; }
    .page-inner { padding: 0 16px; }
    .page-hero { padding: 22px 0; }
    .page-hero h2 { font-size: 23px; }
    .dash-pick { min-width: 0; width: 100%; }
    .dash-card-head { padding: 16px 16px 0; }
    .dash-card-body { padding: 12px 16px 16px; }
    .dash-tile b { font-size: 21px; }
    .bar-row, .bar-list-wide .bar-row { grid-template-columns: minmax(96px, 38%) 1fr auto; gap: 8px; }
    .bar-row-drv { grid-template-columns: minmax(0, 55%) minmax(30px, 1fr) auto; }
    .methods section { padding: 18px 16px; }
    .dash-nav { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 8px 16px; }
    .dash-nav button { flex: none; background: #fff; border: 1px solid var(--ctl); }
    .mx th, .mx td { padding: 6px 5px; }
    .mx-tik { min-width: 0; white-space: normal; }
    .mx-tik .tik-link em { display: block; margin-left: 0; }
    .mx-rate { min-width: 0; width: auto; }
    .mx-rate .bar-track { display: none; }
    .rate-txt { min-width: 0; font-size: 12px; }
    .mx-tc { width: 34px; font-size: 10.5px; }
    .cell { width: 20px; height: 20px; }
}

/* ---------- Contributor modes and IDMC GIDD disaggregation (gidd.js) ---------- */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border: 1px solid var(--ctl); border-radius: 8px; overflow: hidden; }
#sidebar .mode-switch .mode-btn {
    background: #fff; color: var(--navy); border: 0; border-radius: 0; padding: 9px 8px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; line-height: 1.25;
}
#sidebar .mode-switch .mode-btn + .mode-btn { border-left: 1px solid var(--ctl); }
#sidebar .mode-switch .mode-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.g-step .meta { margin-top: 8px; }
.g-filters { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 10px 0; }
#sidebar .g-filters select { width: auto; }
.g-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.g-year { position: sticky; top: 0; z-index: 1; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 12px; border-bottom: 1px solid var(--line); }
.g-empty { padding: 12px; color: var(--muted); font-size: 12.5px; list-style: none; }
#sidebar #gidd .g-ev {
    display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left;
    background: #fff; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 12px; cursor: pointer;
}
#sidebar #gidd .g-ev:hover { background: #fff6ee; }
.g-ev img { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.g-ev-main { min-width: 0; display: flex; flex-direction: column; }
.g-ev-t { font-weight: 700; color: var(--navy); font-size: 13px; line-height: 1.3; }
.g-ev-m { font-size: 11.5px; color: var(--muted); }
.g-status { font-size: 11px; color: var(--muted); margin-top: 2px; }
.g-status.on { color: var(--ok); font-weight: 600; }
.g-ev-n { text-align: right; line-height: 1.1; }
.g-ev-n b { display: block; font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums; }
.g-ev-n span { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; }
.g-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid #2563eb; border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.g-card-top { display: flex; gap: 10px; align-items: center; }
.g-card-top img { border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); flex: none; }
.g-total { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; }
.g-total b { font-size: 26px; color: var(--navy); font-variant-numeric: tabular-nums; }
.g-total span { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
#sidebar .g-area { margin: 2px 0; font-size: 12.5px; }
.g-details { margin-top: 8px; font-size: 12.5px; }
.g-details summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.g-figs { margin: 6px 0; padding-left: 18px; }
.g-figs li { margin-bottom: 4px; }
.g-figs em { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; }
#sidebar .g-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; white-space: pre-line; }
.g-prog { margin: 10px 0 8px; }
.g-prog-bar { height: 10px; background: var(--track); border-radius: 5px; overflow: hidden; }
.g-prog-bar span { display: block; height: 100%; background: #2563eb; border-radius: 0 5px 5px 0; transition: width 150ms; }
.g-prog.over .g-prog-bar span { background: var(--danger); }
.g-prog-t { font-size: 12.5px; font-weight: 600; color: var(--navy); margin-top: 4px; }
.g-prog.over .g-prog-t { color: var(--danger); }
.g-rows { list-style: none; margin: 0 0 8px; padding: 0; }
.g-row { border-bottom: 1px solid var(--line); padding: 6px 0; }
.g-row-main { display: grid; grid-template-columns: minmax(0, 1fr) 92px 40px auto 28px; gap: 6px; align-items: center; }
.g-row-name { min-width: 0; line-height: 1.2; }
.g-row-name b { display: block; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-row-name em { font-style: normal; font-size: 11px; color: var(--muted); }
#sidebar .g-row-main input[type="number"] { padding: 5px 7px; text-align: right; font-variant-numeric: tabular-nums; }
.g-row-pct { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
#sidebar #gidd .g-row-c { background: #fff; color: var(--navy); border: 1px solid var(--ctl); border-radius: 6px; padding: 4px 7px; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
#sidebar #gidd .g-row-c[aria-expanded="true"] { background: var(--track); }
#sidebar #gidd .g-row-x { background: none; color: var(--muted); border: 0; font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; }
#sidebar #gidd .g-row-x:hover { color: var(--danger); }
.g-causes { margin-top: 8px; }
.g-add { margin: 6px 0 2px; }
.g-review td.n { text-align: right; }
.g-review .g-sum td { font-weight: 700; border-top: 2px solid var(--line); }
.g-review .cause-badge { margin-right: 2px; }
.msg.ok { color: var(--ok); }
.ch-cards { grid-template-columns: 1fr 1fr; }
.ch-cards #ch-review { grid-column: 1 / -1; }
.ch-help { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.ch-help .link-btn { margin: 0; min-height: 0; font-size: 13px; display: inline; }
@media (max-width: 600px) {
    .ch-cards { grid-template-columns: 1fr; }
    .g-row-main { grid-template-columns: minmax(0, 1fr) 84px auto 26px; }
    .g-row-pct { display: none; }
}
.gw-cards > .gw-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* =====================================================================
   IOM CMIL RICD theme (colours read from cmil.iom.int/ricd/map):
   deep navy header #061642, IOM navy #003478, teal #2a9d8f / #1a7a6e,
   bright teal #4ce0c0 for the active page, borders #dde5e3, pale #f3f7f6,
   ocean #e8ecef, Noto Sans. The orange displacement scale stays: it is data.
   ===================================================================== */
@font-face { font-family: "Noto Sans"; src: url("vendor/noto/noto-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
    --navy: #003478; --navy-2: #0e3585; --hdr-navy: #061642; --navy-hover: #00295e;
    --teal: #2a9d8f; --teal-dark: #1a7a6e; --teal-bright: #4ce0c0; --teal-map: #4cbfb4;
    --accent: #2a9d8f; --accent-strong: #003478; --accent-hover: #00295e;
    --amber: #4ce0c0; --focus: #2a9d8f; --steel: #1a7a6e;
    --ink: #1a1a1a; --ink-2: #4b5563; --ink-3: #374151; --muted: #5a6a7a;
    --line: #dde5e3; --track: #e6eeec; --bg: #f3f7f6;
    --ctl: #748683; /* control borders: 3.8:1 on white, 3.5:1 on --bg (WCAG 1.4.11 asks 3:1) */
    --on-navy: #eaf2ff;
}
html, body, button, input, select, textarea, .maplibregl-map, .leaflet-container { font-family: "Noto Sans", system-ui, sans-serif; }
body { color: var(--ink); background: #fff; }

/* Top bar: deep navy, light text, bright teal underline on the page you are on */
#topbar { background: var(--hdr-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; }
#topbar .brand { background: transparent; box-shadow: none; color: #fff; padding: 0 20px 0 22px; }
#topbar .brand-1, #topbar .brand-3 { color: var(--teal-bright); }
.top-tab {
    color: rgba(233, 242, 255, 0.86); border: 0; position: relative;
    font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.top-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.top-tab[aria-current="page"] { color: var(--teal-bright); }
.top-tab[aria-current="page"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: var(--teal-bright); }
.top-tab:focus-visible, #topbar .brand:focus-visible { outline-color: var(--teal-bright); }
#topbar .ghost-btn { color: var(--on-navy); background: transparent; border-color: rgba(255, 255, 255, 0.55); }
#topbar .ghost-btn:hover { background: rgba(255, 255, 255, 0.08); }
#topbar #login-btn { background: var(--teal); border-color: var(--teal); color: #fff; }
#topbar #login-btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
#topbar .role-chip { color: var(--on-navy); background: rgba(255, 255, 255, 0.12); }

/* Side panel: white, teal-dark uppercase labels, navy selections */
#sidebar { background: #fff; box-shadow: 1px 0 0 var(--line), 4px 0 14px rgba(0, 0, 0, 0.06); }
#sidebar .hero { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding-top: 18px; --focus: var(--teal); }
#sidebar .eyebrow, #sidebar .picker-label, .picker-label {
    color: var(--teal-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
#sidebar .hero .lede { color: var(--muted); }
.ind-trigger { color: var(--ink); background: #fff; border: 1px solid var(--ctl); border-radius: 6px; }
.ind-trigger:hover { background: var(--bg); }
.ind-opt:hover, .ind-opt:focus-visible { background: var(--bg); }
.ind-opt.active { border-left-color: var(--navy); background: rgba(0, 52, 120, 0.06); }
.ind-box { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); border: 1px solid var(--line); }
.chip { color: var(--muted); background: #fff; border: 1px solid var(--ctl); font-weight: 600; }
.chip:hover { background: var(--bg); color: var(--navy); }
.chip.active { color: var(--navy); background: rgba(0, 52, 120, 0.08); border-color: var(--navy); }
#sidebar h2 { color: var(--navy); border-bottom-color: var(--line); }
.event-card, .stat { border-color: var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.event-card { border-left-color: var(--teal); }
.stat b { color: var(--navy); }
.steps .num { background: var(--navy); }
button.ghost { background: #fff; color: var(--navy); border-color: var(--ctl); }
button.ghost:hover { background: var(--bg); }
#sidebar .causes button[aria-pressed="true"] { border-color: var(--navy); background: rgba(0, 52, 120, 0.06); }
.wiz-progress li.is-current { color: var(--navy); border-bottom-color: var(--teal); }
.wiz-progress li.is-done { color: var(--teal-dark); border-bottom-color: var(--teal-map); }
.wiz-bar span, .wiz-bar > span { background: var(--teal); }
.link-btn { color: var(--teal-dark); }
dialog { border-top-color: var(--teal); }
dialog button[type="submit"] { background: var(--navy); }

/* Map: light gray-blue sea, white land; controls in the same navy */
#map { background: #e8ecef; }
.ml-sea { color: #6b7f8f; }
.ml-province { color: #5a6a7a; }
.bm-switch button[aria-pressed="true"], .guide-btn { background: var(--navy); }
.guide-btn:hover { background: var(--navy-hover); }
.guide-btn[aria-expanded="true"] { background: var(--teal-dark); }
.guide-q { background: var(--teal); }
#legend { border-color: var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
#legend .lg-title { color: var(--navy); }
#replay { border-top-color: var(--teal); }

/* Dashboard and Methods pages: deep navy hero with a teal eyebrow */
.page { background: var(--bg); }
.page-hero { background: var(--hdr-navy); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.page-hero .eyebrow { color: var(--teal-bright); }
.page-hero .lede { color: rgba(255, 255, 255, 0.72); }
.dash-pick label { color: var(--teal-bright); }
.dash-pick select { border: 1px solid rgba(255, 255, 255, 0.28); color: var(--navy); }
.dash-nav { background: var(--bg); border-bottom-color: var(--line); }
.dash-nav button:hover { background: rgba(0, 52, 120, 0.08); }
.dash-card, .methods section { border-color: var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.dash-card-head h3, .methods h2 { color: var(--navy); }
.dash-tile { border-left-color: var(--teal); background: var(--bg); }
.dash-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.dash-chip { border-color: var(--ctl); }
.share-big { color: var(--teal-dark); }
.tik-link { color: var(--navy); text-decoration-color: var(--line); }
.tik-link:hover { text-decoration-color: var(--teal); }
.cell.off { border-color: var(--line); }

/* Guide, chooser and IDMC panel */
.gw-panel { border-top-color: var(--teal); }
.gw-eyebrow { color: var(--teal-dark); }
.gw-card { background: var(--bg); border-color: var(--ctl); border-left-color: var(--teal); }
.gw-card:hover { background: rgba(42, 157, 143, 0.08); border-color: var(--teal-map); border-left-color: var(--teal); }
.gw-overlay { background: rgba(6, 22, 66, 0.55); }
#guide-tour { background: var(--hdr-navy); }
.gt-arrow { background: var(--hdr-navy); }
.gt-step { color: var(--teal-bright); }
.gt-dots span.on { background: var(--teal-bright); }
#guide-tour button.primary { background: var(--teal); }
#guide-tour button.primary:hover { background: var(--teal-dark); }
#guide-ring { box-shadow: 0 0 0 3px var(--teal-bright), 0 0 0 7px rgba(76, 224, 192, 0.3), 0 0 0 9999px rgba(6, 22, 66, 0.28); }
#guide-ring.gt-ring-big { box-shadow: inset 0 0 0 3px var(--teal-bright); }
.g-card { border-left-color: var(--teal); }
.g-prog-bar span { background: var(--teal); }
#sidebar #gidd .g-ev:hover { background: rgba(42, 157, 143, 0.06); }
.g-status.on { color: var(--teal-dark); }
.preview-pill { color: var(--hdr-navy); background: var(--teal-bright); border-color: var(--teal-bright); }

/* ---------- Login screen (landing.js), in the IOM CMIL home page style ---------- */
body.gated { overflow: hidden; }
#landing {
    position: fixed; inset: 0; z-index: 2700; overflow-y: auto; color: #fff;
    background:
        radial-gradient(ellipse 70% 80% at 72% 48%, rgba(64, 96, 214, 0.55) 0%, rgba(30, 48, 140, 0.25) 45%, rgba(6, 22, 66, 0) 75%),
        linear-gradient(160deg, #0a1d5c 0%, #142a7a 45%, #1b2f86 70%, #101f60 100%);
}
#landing-map { position: absolute; top: 6%; right: 2%; width: 58%; height: 86%; pointer-events: none; }
.ld-dots circle { fill: rgba(168, 192, 255, 0.55); }
.ld-core { fill: #b9fff0; }
.ld-halo { transform-box: fill-box; transform-origin: center; animation: ld-pulse 3.6s ease-in-out infinite; }
@keyframes ld-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
.ld-label { fill: rgba(233, 242, 255, 0.9); font: 700 1.3px "Noto Sans", system-ui, sans-serif; letter-spacing: 0.18px; }
.ld-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 40px 6px; }
.ld-brand { display: flex; flex-direction: column; line-height: 1.08; text-transform: uppercase; }
.ld-brand .brand-1, .ld-brand .brand-3 { color: var(--teal-bright); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.ld-brand .brand-2 { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.ld-tag { font-size: 13px; color: rgba(233, 242, 255, 0.72); border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 16px; }
.ld-main { position: relative; max-width: 640px; padding: 2.5vh 40px 20px; }
.ld-title { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.ld-sub { margin: 8px 0 12px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; font-weight: 500; color: #7fe3c4; }
.ld-lede { margin: 0 0 18px; max-width: 540px; font-size: 15px; line-height: 1.55; color: rgba(233, 242, 255, 0.82); }
.ld-card {
    max-width: 540px; padding: 16px 22px 16px; border-radius: 12px;
    background: rgba(10, 22, 70, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 50px rgba(0, 0, 20, 0.35); backdrop-filter: blur(6px);
}
.ld-card-t { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #fff; }
#landing #login-form > h2, #landing #login-cancel { display: none; }
#landing #login-form label, #landing #login-form legend { display: block; margin: 9px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7fe3c4; }
#landing #login-form label.check { text-transform: none; letter-spacing: 0; font-size: 14px; color: #fff; display: inline-flex; gap: 6px; margin-right: 14px; }
#landing #login-form fieldset { border: 0; padding: 0; margin: 4px 0 0; }
#landing #login-contrib-row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 12px; }
#landing #login-form input[type="text"], #landing #login-form input[type="password"] {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 15px;
    color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.6);
}
#landing #login-form input::placeholder { color: rgba(233, 242, 255, 0.5); }
#landing #login-form input:focus { outline: 2px solid #7fe3c4; outline-offset: 1px; border-color: transparent; }
#landing .ghost-wrap #login-affil { background: transparent; }
#landing .ghost-wrap { background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
#landing .ghost-text { color: rgba(233, 242, 255, 0.45); padding: 9px 12px; font-size: 15px; }
#landing .ghost-typed { color: transparent; }
#landing #login-hint { margin: 8px 0 0; font-size: 13px; color: rgba(233, 242, 255, 0.7); }
#landing #login-err { margin: 8px 0 0; color: #ffb4a2; }
#landing #login-form .row { margin-top: 10px; }
#landing #login-go {
    width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border: 0; border-radius: 8px;
    background: #6fcfb4; color: #0b1f3f; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 150ms;
}
#landing #login-go::after { content: "\2192"; font-size: 18px; }
#landing #login-go:hover { background: #86dcc3; }
#landing #login-go:disabled { opacity: 0.6; }
.ld-foot {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 40px 26px; font-size: 12.5px; color: rgba(233, 242, 255, 0.6);
}
.ld-logos { display: inline-flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, 0.92); border-radius: 8px; padding: 6px 12px; }
.ld-logos img { height: 27px; width: auto; }
@media (max-width: 900px) {
    #landing-map { top: 90px; right: -10%; width: 110%; height: 60%; opacity: 0.45; }
    .ld-top, .ld-main, .ld-foot { padding-left: 20px; padding-right: 20px; }
    .ld-tag { display: none; }
}
@media (max-width: 480px) {
    #landing #login-contrib-row { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) { .ld-halo { animation: none; } }

/* Simplified login screen: the login box alone, in the middle, over the dotted map */
#landing { display: flex; flex-direction: column; }
#landing-map { top: 8%; left: 50%; right: auto; width: min(1100px, 96vw); height: 84%; transform: translateX(-50%); opacity: 0.55; }
.ld-main { flex: 1; display: flex; align-items: center; justify-content: center; max-width: none; padding: 16px 20px; }
.ld-card { width: 100%; max-width: 460px; padding: 24px 26px 20px; }
.ld-card-t { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #fff; text-align: center; }
.ld-foot { justify-content: center; text-align: center; }
@media (max-width: 900px) {
    #landing-map { top: 12%; width: 140vw; height: 76%; opacity: 0.35; }
}

/* Login screen: white IOM, CMIL and NOAH logos above the box; no footer */
.ld-main { flex-direction: column; gap: 26px; }
#landing .ld-logos { display: flex; align-items: center; gap: 18px; background: none; padding: 0; border-radius: 0; }
#landing .ld-logos img { height: 28px; width: auto; display: block; }
.ld-div { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.35); }
@media (max-width: 480px) {
    #landing .ld-logos { gap: 12px; }
    #landing .ld-logos img { height: 22px; }
    .ld-div { height: 24px; }
}

/* One task at a time: the chooser picks it, this link reopens the chooser */
.task-bar { margin: -8px 0 12px; }
#sidebar .task-bar .link-btn { margin: 0; min-height: 0; font-size: 12.5px; }

/* Map and Contribute tabs share the map; the side panel shows only what belongs to the tab */
body[data-page="contribute"] #sidebar .explore-hero,
body[data-page="contribute"] #tc-card,
body[data-page="contribute"] #stats,
body[data-page="contribute"] #selected,
body[data-page="contribute"] .ranked-sec,
body[data-page="contribute"] .side-more { display: none !important; }
body:not([data-page="contribute"]) #contrib,
body:not([data-page="contribute"]) #validator,
body:not([data-page="contribute"]) .contrib-hero { display: none !important; }
#sidebar .contrib-hero { padding-bottom: 16px; }
#sidebar .contrib-hero .picker-label { margin-top: 0; }
#sidebar .contrib-hero .lede { margin: 6px 0 0; font-size: 13px; }

/* Contribute tab: the map draws no displacement colours, so the legend keeps only the mangrove shade
   and the stickers (Iteration 14k) */
body[data-page="contribute"] #legend :is(.lg-sub, .lg-pal, .lg-custom, .lg-bar, .lg-scale, .lg-nodata) { display: none !important; }
/* Its mangrove swatch matches that map: plain white, the dashed edge standing for no outline (Iteration 14l).
   !important beats the teal ramp that paintLegendRamp sets inline for the Map tab. */
body[data-page="contribute"] #legend .lg-swatch-m { background: #ffffff !important; border: 1px dashed #9aa9b8 !important; }
/* Contribute step 1: Replay this TC for the picked cyclone, in the style of the hazard card's Replay buttons */
#c-replay { display: inline-flex; align-items: center; gap: 6px; margin: 8px 12px 0 0; padding: 5px 12px 5px 10px; font-size: 12.5px;
    color: var(--teal-dark); background: rgba(42, 157, 143, 0.1); border: 1px solid var(--teal-dark); }
#c-replay::before { content: "\25B6"; font-size: 9px; }
#c-replay:hover { background: var(--teal-dark); color: #fff; }

/* Map: hazard chips, the single-event chip from the Dashboard, and the hazard card's event list */
.chip.chip-event { border-style: dashed; }
.hz-events { list-style: none; margin: 8px 0 0; padding: 0; }
.hz-events li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.hz-events li:first-child { border-top: 0; }
.hz-events .tik-link { font-size: 13px; text-align: left; }
.hz-events .hz-when { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.hz-events .hz-tot { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 700; color: var(--navy); text-align: right; white-space: nowrap; }
/* A cyclone with a track gets a Replay button under its total. */
.hz-events li:has(.hz-replay) .hz-tot { grid-row: 1; align-self: end; }
.hz-events .hz-replay { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 3px; padding: 3px 10px 3px 8px; font-size: 11.5px;
    display: inline-flex; align-items: center; gap: 5px; color: var(--teal-dark); background: rgba(42, 157, 143, 0.1); border: 1px solid var(--teal-dark); }
.hz-events .hz-replay::before { content: "\25B6"; font-size: 8px; }
.hz-events .hz-replay:hover { background: var(--teal-dark); color: #fff; }

/* Dashboard: By event */
.ev-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ev-pick label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); }
.ev-pick select { min-width: 280px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--ctl); border-radius: 8px; font-size: 14px; color: var(--navy); background: #fff; }
.ev-causes, .ev-facts { list-style: none; margin: 0 0 12px; padding: 0; }
.ev-causes li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.ev-causes .cause-badge { border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); display: inline-flex; }
.ev-causes b { font-size: 12px; color: var(--navy); }
.ev-facts li { font-size: 13px; padding: 3px 0; color: var(--ink-2); }
.ev-map { margin-top: 6px; }
#sidebar #tc-card .hz-events button.tik-link { background: none; color: var(--navy); border: 0; padding: 0; border-radius: 0; text-align: left; cursor: pointer; }
.ev-facts { margin-top: 2px; }
.dash-panel h4 + .dash-note + h4, .dash-panel .ev-causes + h4 { margin-top: 14px; }

/* How-to guide: the Contribute choice opens its two tasks */
#gw-sub .gw-lede { margin-top: 0; }
.gw-back { margin-top: 12px; font-size: 13px; }

/* Top bar: the IOM, CMIL and NOAH logos in white replace the site name */
#topbar .brand { flex-direction: row; align-items: center; gap: 10px; padding: 0 18px 0 20px; box-shadow: none; }
#topbar .brand img { width: auto; display: block; flex: none; }
#topbar .brand img:nth-of-type(1) { height: 19px; }
#topbar .brand img:nth-of-type(2) { height: 18px; }
#topbar .brand img:nth-of-type(3) { height: 15px; }
#topbar .brand-div { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.3); flex: none; }
@media (max-width: 900px) {
    #topbar .brand { gap: 7px; padding: 0 12px; }
    #topbar .brand img:nth-of-type(1) { height: 15px; }
    #topbar .brand img:nth-of-type(2) { height: 14px; }
    #topbar .brand img:nth-of-type(3) { height: 12px; }
    #topbar .brand-div { height: 14px; }
}

/* Account chip: opens My profile */
#topbar button.role-chip { border: 1px solid rgba(255, 255, 255, 0.55); cursor: pointer; font-family: inherit; }
#topbar button.role-chip:hover, #topbar button.role-chip[aria-current="page"] { background: rgba(76, 224, 192, 0.22); color: #fff; }
#topbar button.role-chip:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; }
.mine-more { margin: 8px 0 4px; }

/* My profile page */
.pf-who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pf-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--hdr-navy); background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(76, 224, 192, 0.22); }
.pf-cta { background: var(--teal); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.pf-cta:hover { background: var(--teal-dark); }
.pf-cta:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; }
#profile { padding-top: 22px; padding-bottom: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
#profile .dash-card { margin: 0; }
.pf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.pf-tiles-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; }
.pf-tile.pf-ok { border-left-color: var(--ok); }
.pf-tile.pf-wait { border-left-color: #d6a21e; }
.pf-tile.pf-no { border-left-color: var(--danger); }
.pf-tile-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pf-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--track); }
.pf-bar span { display: block; height: 100%; }
.pf-bar-approved { background: var(--ok); }
.pf-bar-pending { background: #e2b33c; }
.pf-bar-rejected { background: var(--danger); }
.pf-head-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pf-csv { flex: none; color: var(--navy); border: 1px solid var(--line); background: #fff; font-weight: 600; }
.pf-chip-n { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(0, 52, 120, 0.08); font-size: 11.5px; text-align: center; }
.dash-chip[aria-pressed="true"] .pf-chip-n { background: rgba(255, 255, 255, 0.2); }
.pf-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 6px; }
.pf-tools select, .pf-tools input { width: 100%; padding: 8px 10px; border: 1px solid var(--ctl); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.pf-month { margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pf-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf-item { display: flex; gap: 16px; justify-content: space-between; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 12px 16px; background: #fff; }
.pf-item.pf-approved { border-left-color: var(--ok); }
.pf-item.pf-pending { border-left-color: #e2b33c; }
.pf-item.pf-rejected { border-left-color: var(--danger); }
.pf-item-main { min-width: 0; display: grid; gap: 4px; }
.pf-item-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pf-badge-approved { color: #135c28; background: #dcf3e2; }
.pf-badge-pending { color: #7a4a00; background: #fdf0cc; }
.pf-badge-rejected { color: #8a1c13; background: #fbe1de; }
.pf-type { font-size: 12px; color: var(--muted); }
.pf-event { font-weight: 700; color: var(--navy); font-size: 15px; }
.pf-place { font-size: 14px; color: var(--ink); }
.pf-causes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.pf-causes.pf-none, .pf-other { font-size: 12.5px; color: var(--muted); }
.pf-other { margin-left: 4px; }
.pf-meta { font-size: 12.5px; color: var(--muted); }
.pf-note { font-size: 13px; background: var(--bg); border-radius: 6px; padding: 6px 10px; }
.pf-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; font-size: 13px; }
.pf-num { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.pf-num b { font-size: 22px; color: var(--navy); line-height: 1.1; }
.pf-num span { font-size: 11.5px; color: var(--muted); }
.pf-empty { margin: 0; color: var(--muted); }
.pf-start { display: grid; gap: 14px; justify-items: start; }
.pf-scroll { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pf-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pf-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tiles-2 { grid-template-columns: 1fr; }
  .pf-tools { grid-template-columns: 1fr; }
  .pf-avatar { width: 48px; height: 48px; font-size: 17px; }
  .pf-item { flex-direction: column; gap: 6px; }
  .pf-num { flex-direction: row; gap: 6px; align-items: baseline; text-align: left; }
}

/* ---------- View the map and IDMC reports ---------- */
.ld-view { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ld-view-btn { display: block; width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(127, 227, 196, 0.7); background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ld-view-btn:hover { background: rgba(127, 227, 196, 0.12); }
.ld-view-btn:focus-visible { outline: 2px solid #7fe3c4; outline-offset: 2px; }
.ld-view-note { margin: 6px 0 0; font-size: 12px; color: rgba(233, 242, 255, 0.7); }
.idmc-key { background: #fff; color: var(--navy); font-size: 11px; padding: 2px 10px 6px 8px; }
.idmc-key[hidden] { display: none; }
.idmc-key span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.idmc-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #f28c28; box-sizing: border-box; }
.idmc-key i.solid { background: #f28c28; }
body[data-page="contribute"] .idmc-switch { display: none !important; }
/* Above the stamp cards (z-index 2); the padding beats the popup rule that sets 6px 0 !important. */
.maplibregl-popup.idmc-pop { z-index: 5; }
.idmc-pop .maplibregl-popup-content { padding: 10px 12px !important; max-height: 280px; overflow: auto; }
.idmc-pop-h { margin: 0 18px 6px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #b85c00; }
.idmc-fig { font-size: 13px; line-height: 1.4; padding: 6px 0; border-top: 1px solid #e5e8ef; }
.idmc-fig:first-of-type { border-top: 0; padding-top: 0; }
.idmc-fig b { display: block; color: var(--navy); }
.idmc-fig.is-tri { opacity: 0.85; }
.idmc-tri { margin: 4px 0 0; color: #6b7280; font-style: italic; }

/* Legend in the top-left corner of the map at every width (Iteration 14e). It replaces the
   bottom-right placements above, including the lifts over the replay bar and the guide button. */
#legend, #mapwrap:has(#replay:not([hidden])) #legend {
    top: 12px; left: 12px; right: auto; bottom: auto;
    max-height: calc(100% - 110px); overflow-y: auto;
}