/* ============================================================
   Climate Risk & Adaptation — native pillar (Brief 13)
   Locked window (no page scroll): 50/50 grid, scrollable text left,
   circular 3D twin ringed by hazard buttons right, swipe-out panel.
   Design-system tokens throughout (Brief 07). Theme-aware.
   ============================================================ */
/* Per-pillar colour theme — Climate = brick/maroon red (placeholder value; Chris to finalise).
   Each pillar sets its own --cr-accent; everything themeable reads this token. */
.cr-root { --cr-accent: #C0453A; position: relative; width: 100%; overflow: hidden; background: #FFFFFF; display: flex; flex-direction: column; }

/* ---------- centred pill navigation (shared per-pillar pattern) ---------- */
/* Overlaid at the top so the fixed title (left) can sit at the same height as the pill. */
.cr-nav { position: absolute; top: var(--sp-4); left: 0; right: 0; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
/* soft tint of the pillar colour, not the cream — the active segment is the solid accent */
.cr-nav-pill {
  pointer-events: auto; display: inline-flex; gap: 2px; padding: 5px;
  background: color-mix(in srgb, var(--cr-accent) 9%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--cr-accent) 20%, #FFFFFF);
  border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.cr-nav-seg {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;   /* Stolzl Medium */
  padding: 8px 22px; border: none; background: none; border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.cr-nav-seg:hover { color: var(--ink); }
.cr-nav-seg.active { background: var(--cr-accent); color: #FFFFFF; box-shadow: 0 2px 9px rgba(0,0,0,0.18); }

/* Triptych: text left · the graphic centred under the pill · detail expands into the right.
   Shared with Biodiversity so the two pillars read as one product. */
.cr-pillar { display: grid; grid-template-columns: 30% 40% 30%; flex: 1 1 auto; min-height: 0; }

/* pages swap under the fixed title / within the middle graphic */
.cr-page { display: none; }
.cr-page.active { display: block; }
.cr-mid-page { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; }
.cr-mid-page.active { display: flex; }
.cr-stub { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--sp-6); text-align: center; }
.cr-stub p { max-width: 34ch; font-family: var(--font-light); font-weight: var(--w-light); font-size: var(--size-lede); line-height: var(--lh-lede); color: var(--ink-soft); }

/* ---------- LEFT: white, fixed title, scrollable body, aligned LEFT ---------- */
.cr-left { background: #FFFFFF; display: flex; min-height: 0; }
.cr-left-inner {
  display: flex; flex-direction: column; min-height: 0; width: 100%;
  max-width: 600px; margin: 0;   /* hug the left, offset 48 (per Figma) — not centred */
  padding: var(--sp-7) var(--sp-5) var(--sp-5) var(--rail-offset);   /* dropped below the pill for vertical breathing room */
}
.cr-title {
  flex: 0 0 auto; margin: 0 0 var(--sp-6);   /* extra gap before the body */
  font-family: var(--font-display);
  font-size: 48px; line-height: 1.08;      /* ~50% larger than --size-title; stays fixed */
  letter-spacing: -0.015em;
}
.cr-t-decode { font-weight: 500; color: #1E1E1E; }              /* Stolzl Medium, near-black grey */
.cr-t-sep { font-weight: 500; color: var(--ink-soft); }   /* the ":" separator, tight against both words */
.cr-t-name { font-weight: var(--w-book); color: var(--cr-accent); }  /* Stolzl Book, pillar colour */
/* dark mode: the pillar text uses near-black light-mode values — re-map for contrast */
.cr-scroll { flex: 1 1 auto; overflow-y: auto; scrollbar-gutter: stable; min-height: 0; padding-right: var(--sp-4); }
.cr-block { margin-bottom: var(--sp-6); }
.cr-block:last-child { margin-bottom: var(--sp-4); }
.cr-block h2 {
  font-family: var(--font-display); font-weight: var(--w-book);
  font-size: 22px; line-height: 30px; color: var(--cr-accent);   /* subtitles in pillar colour */
  margin: 0 0 var(--sp-3);
}
.cr-block p {
  font-family: var(--font-light); font-weight: var(--w-light);
  font-size: var(--size-lede); line-height: var(--lh-lede);
  color: var(--ink); margin: 0 0 var(--sp-3);   /* darker — closer to the title */
}
.cr-block p:last-child { margin-bottom: 0; }
.cr-hint { font-family: var(--font-detail); font-size: var(--size-small); color: var(--text-tertiary); margin-top: var(--sp-2); }

/* ---------- collapsible accordion (shared left-column pattern) ---------- */
.cr-acc-list { display: flex; flex-direction: column; }
.cr-acc { border-bottom: 1px solid var(--line); }
.cr-acc:first-child { border-top: 1px solid var(--line); }
.cr-acc-head {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-4) 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.cr-acc-title {
  flex: 1 1 auto; font-family: var(--font-display); font-weight: var(--w-book);
  font-size: 22px; line-height: 28px; color: var(--cr-accent);   /* subtitle in the pillar colour */
}
.cr-acc-chevron { flex: 0 0 auto; display: flex; color: var(--ink-soft); transition: transform 0.22s ease; }
.cr-acc.open .cr-acc-chevron { transform: rotate(180deg); }
/* smooth open/close: 0fr → 1fr animates the real content height */
.cr-acc-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(.22,.61,.36,1), opacity 0.35s ease;
}
.cr-acc.open .cr-acc-body { grid-template-rows: 1fr; opacity: 1; }
.cr-acc-inner { overflow: hidden; }
/* Body copy is Inter 12 — shared ramp with Biodiversity's left column so the two
   pillars' text reads continuously at the same size. */
.cr-acc-body p {
  font-family: var(--font-detail); font-weight: var(--w-book);
  font-size: var(--size-small); line-height: var(--lh-small);
  color: var(--ink); margin: 0 0 var(--sp-3);
}
/* A line's space between the last paragraph and the section divider, so the rule never
   sits hard against the text. Must come AFTER the rule above — an equal-specificity
   `p:last-child { margin-bottom: 0 }` was previously cancelling it. */
.cr-acc-inner > *:last-child { margin-bottom: var(--sp-5); }

/* ---------- MIDDLE: circular twin + tight hazard ring (all white, no split) ---------- */
/* The pill FLOATS over the page — nothing is offset from it, so the map simply centres
   on the column and is free to pass under it. */
.cr-mid {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; overflow: hidden;
  padding: var(--sp-2);   /* tight, so the map can claim the column */
}
/* ---------- RIGHT: the third panel — a hazard expands in here ---------- */
.cr-right { position: relative; background: #FFFFFF; overflow: hidden; }
/* Ghosted prompt, centred in the third panel: title-scale so it reads as the headline of
   an empty space, with a ring that breathes to say "there's something to click". */
/* dead centre of the panel, both axes, text centred with it — the whole column reads as
   one space waiting to be filled */
.cr-hint-panel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  pointer-events: none;
}
/* A circle, because what it's asking you to click IS a circle — it echoes the hazard
   buttons rather than competing with them. */
.cr-hint-ring {
  position: relative; flex: none;
  width: 190px; height: 190px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--cr-accent) 22%, transparent);
}
.cr-hint-ring p {
  font-family: var(--font-display); font-weight: 500;   /* Stolzl Medium */
  font-size: 17px; line-height: 1.35; text-align: center;
  /* ghosted via the colour's alpha, so the entrance keeps opacity to itself. Carried a
     little stronger than the old 44px version — thin type at this size needs it. */
  color: color-mix(in srgb, var(--cr-accent) 46%, transparent);
}
.cr-hint-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--cr-accent); opacity: 0; pointer-events: none;
  animation: crHintPulse 2.8s ease-out infinite;
  animation-delay: 2.2s;   /* after the entrance sequence has landed */
}
@keyframes crHintPulse {
  0%   { box-shadow: 0 0 0 0 var(--cr-accent); opacity: 0.5; }
  70%  { box-shadow: 0 0 0 16px var(--cr-accent); opacity: 0; }
  100% { box-shadow: 0 0 0 16px var(--cr-accent); opacity: 0; }
}
.cr-mounted .cr-hint-panel { opacity: 0; animation: crFadeIn 0.6s ease 1.5s forwards; }
@keyframes crFadeIn { to { opacity: 1; } }
.cr-stage { position: relative; width: min(100%, 640px); aspect-ratio: 1 / 1; }
.cr-map-circle {
  /* 12% inset → the disc is 38% of the stage; the ring sits at 40%, so the icons kiss
     its outline (see R in buildHazardStage) */
  position: absolute; inset: 12%; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0,0,0,0.07);
  background: #F4F1EC;
}
.cr-twin { width: 100%; height: 100%; border: 0; display: block; }
.cr-ring { position: absolute; inset: 0; }

/* Circular icon-only buttons (no label, no square), straddling the disc's outline. */
.cr-hazard {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; padding: 0;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cr-hazard:hover, .cr-hazard:focus-visible {
  transform: translate(-50%, -50%) scale(1.12); border-color: var(--hz, var(--accent));
  box-shadow: 0 8px 24px rgba(0,0,0,0.14); outline: none; z-index: 3;
}
/* the open hazard stays lit, tying the ring to the panel on the right */
.cr-hazard--active {
  border-color: var(--hz, var(--accent));
  box-shadow: 0 0 0 2px var(--hz, var(--accent)), 0 8px 24px rgba(0,0,0,0.12);
  transform: translate(-50%, -50%) scale(1.1);
}
.cr-hazard-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
.cr-hazard-greyed { opacity: 0.42; cursor: default; }
.cr-hazard-greyed:hover { transform: translate(-50%, -50%); border-color: var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* travelling pulse — soft glow that goes around the ring in order (staggered by index).
   Held back until the entrance sequence has finished, so it doesn't fight the arrival. */
.cr-hazard::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 var(--hz, var(--accent)); opacity: 0; pointer-events: none;
  animation: crPulse 4s ease-in-out infinite;
  animation-delay: calc(2.4s + var(--i, 0) * 0.5s);
}
.cr-hazard-greyed::after { display: none; }
/* 4s cycle × 0.5s stagger × 8 = one continuous wave travelling round the ring */
@keyframes crPulse {
  0%   { box-shadow: 0 0 0 0 var(--hz, var(--accent)); opacity: 0.55; }
  45%  { box-shadow: 0 0 0 15px var(--hz, var(--accent)); opacity: 0; }
  100% { box-shadow: 0 0 0 15px var(--hz, var(--accent)); opacity: 0; }
}

/* ---------- entrance sequence (replayed on every visit to the tab) ----------
   Reads top-left to bottom-right: title → the four text items, one under the next →
   the map → the hazards around it. */
.cr-title { opacity: 0; transform: translateX(-24px); }
.cr-mounted .cr-title { animation: crInLeft 0.5s cubic-bezier(.2,.7,.2,1) 0.1s forwards; }
.cr-page.cr-reveal .cr-block { opacity: 0; transform: translateY(14px); animation: crInUp 0.55s ease forwards; }
.cr-page.cr-reveal .cr-block:nth-child(1) { animation-delay: 0.15s; }
.cr-page.cr-reveal .cr-block:nth-child(2) { animation-delay: 0.45s; }
/* the four collapsed sections drop in one after another */
.cr-page.cr-reveal .cr-acc { opacity: 0; transform: translateY(10px); animation: crInUp 0.45s ease forwards; }
.cr-page.cr-reveal .cr-acc:nth-child(1) { animation-delay: 0.45s; }
.cr-page.cr-reveal .cr-acc:nth-child(2) { animation-delay: 0.56s; }
.cr-page.cr-reveal .cr-acc:nth-child(3) { animation-delay: 0.67s; }
.cr-page.cr-reveal .cr-acc:nth-child(4) { animation-delay: 0.78s; }
/* Entrance sequence: the map lands first, then the hazards arrive one at a time around
   the ring — the last is in by ~2.1s.
   NB the button animates OPACITY only and the pop lives on its icon: a `forwards`
   animation on the button's transform would outrank the hover/active scale below and
   kill it for good. */
.cr-map-circle { opacity: 0; transform: scale(0.96); }
.cr-mounted .cr-map-circle { animation: crMapIn 0.6s cubic-bezier(.2,.7,.2,1) 0.75s forwards; }
.cr-hazard { opacity: 0; }
.cr-hazard > svg { transform: scale(0.5); }
.cr-mounted .cr-hazard { animation: crHazIn 0.4s ease forwards; }
.cr-mounted .cr-hazard > svg { animation: crHazPop 0.4s cubic-bezier(.2,.7,.2,1) forwards; }
.cr-mounted .cr-hazard,
.cr-mounted .cr-hazard > svg { animation-delay: calc(1.2s + var(--i, 0) * 0.13s); }
@keyframes crMapIn { to { opacity: 1; transform: none; } }
@keyframes crHazIn { to { opacity: 1; } }
@keyframes crHazPop { to { transform: scale(1); } }
@keyframes crInLeft { to { opacity: 1; transform: none; } }
@keyframes crInUp { to { opacity: 1; transform: none; } }

/* ---------- no-coverage + loading ---------- */
.cr-empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: var(--sp-7); text-align: center; }
.cr-empty p { max-width: 40ch; font-family: var(--font-light); font-weight: var(--w-light); font-size: var(--size-lede); line-height: var(--lh-lede); color: var(--ink-soft); }
.cr-root.cr-loading::after { content: 'Loading…'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-detail); color: var(--text-tertiary); }

/* ---------- swipe-out hazard panel (covers the right half, slides from the right) ---------- */
/* Slides into its own third of the triptych — it never covers the map now. */
.cr-panel {
  position: absolute; inset: 0; width: 100%;
  background: #FFFFFF; box-shadow: -14px 0 44px rgba(0,0,0,0.07);
  transform: translateX(100%); transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; padding: var(--sp-7) var(--sp-5) var(--sp-4) var(--sp-4);
  z-index: 6; overflow: hidden;
}
.cr-panel.open { transform: translateX(0); }
.cr-panel-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cr-panel-icon { display: flex; }
.cr-panel-title { flex: 1 1 auto; margin: 0; font-family: var(--font-display); font-weight: var(--w-book); font-size: 24px; line-height: 1.15; color: var(--text-primary); }
.cr-panel-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.cr-panel-close:hover { background: var(--bg-section-alt); color: var(--ink); }
.cr-metric-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
/* --hz is set on the panel from the hazard's own colour, so every control inside the
   panel matches the icon you opened (heat = orange, cold = blue, precip = green, …). */
.cr-metric-btn { font-family: var(--font-detail); font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; }
.cr-metric-btn:hover { border-color: var(--hz, var(--accent)); color: var(--ink); }
.cr-metric-btn.active { background: var(--hz, var(--accent)); border-color: var(--hz, var(--accent)); color: #fff; }
.cr-thresh-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cr-thresh-btn { font-family: var(--font-detail); font-size: 12px; padding: 4px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-section-alt); color: var(--ink-soft); cursor: pointer; }
.cr-thresh-btn:hover { border-color: var(--hz, var(--accent)); color: var(--ink); }
.cr-thresh-btn.active { background: var(--hz, var(--accent)); border-color: var(--hz, var(--accent)); color: #fff; }
.cr-chart-wrap { flex: 1 1 auto; min-height: 200px; position: relative; }
.cr-chart-wrap canvas { position: absolute; inset: 0; }
.cr-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-3); font-family: var(--font-detail); font-size: 12px; color: var(--ink-soft); }
.cr-leg { display: inline-flex; align-items: center; gap: 6px; }
.cr-leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cr-leg-unit { margin-left: auto; color: var(--text-tertiary); }
.cr-panel-body p { font-family: var(--font-light); font-weight: var(--w-light); font-size: var(--size-lede); color: var(--ink-soft); }

/* ---------- Brief 16 follow-up: River & Tidal Flooding panel (Hazards tab) ---------- */
.cr-panel-flood { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Same specificity as .cr-panel-body p (0,1,1) above, so source order wins here — otherwise the
   panel's default 19px "lede" prose swallows these, out of step with the 12px .cr-legend text
   every other hazard's chart uses. */
.cr-panel-flood p { font-family: var(--font-detail); font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.cr-panel-floodmap { max-width: 480px; }
.cr-panel-floodtext { display: flex; flex-direction: column; gap: 8px; }
.cr-panel-floodrow { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2, #fff);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 10px 14px; }
.cr-panel-floodrow span { font-family: var(--font-detail); font-weight: 600; font-size: 12px; color: var(--text-tertiary); }
.cr-panel-floodrow strong { font-family: var(--font-detail); font-weight: 700; font-size: 15px; color: var(--ink); }
.cr-panel-floodnote { margin: 4px 0 0; color: var(--text-tertiary); }

/* ---------- Brief 16 Route A: the Flood map view (twin map + EA Flood Zones WMS overlay) ---------- */
.cr-floodmap-host { width: 100%; height: 100%; }
.cr-floodmap { position: relative; width: 100%; height: 100%; overflow: hidden; background: #EDEAE3; }
.cr-floodmap-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cr-floodmap-empty { display: grid; place-items: center; height: 100%; padding: var(--sp-5); text-align: center;
  font-family: var(--font-detail); color: var(--text-tertiary); }

.cr-floodmap-nocoverage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #EDEAE3; }
.cr-floodmap-nocoverage .cr-floodmap-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cr-floodmap-nocoverage-banner { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 5;
  background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 12px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.14); max-width: 520px; }
.cr-floodmap-nocoverage-banner p { margin: 0; font-family: var(--font-detail); font-size: 13px; line-height: 1.4; color: var(--ink); }

.cr-floodmap-controls { position: absolute; top: 16px; left: 16px; z-index: 5; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px; pointer-events: none; }
.cr-floodmap-controls > * { pointer-events: auto; }
.cr-floodmap-toggle { font-family: var(--font-detail); font-size: 13px; font-weight: 600; color: #FFFFFF;
  background: var(--cr-accent); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22); }
.cr-floodmap-toggle.is-off { background: #6C6C6C; }
.cr-floodmap-legend { background: rgba(255,255,255,0.94); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 8px 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.14); display: flex; flex-direction: column; gap: 6px; max-width: 220px; }
.cr-floodmap-legend .cr-fm-legend-title { font-family: var(--font-detail); font-size: 12px; font-weight: 600; color: var(--ink); }
.cr-fm-legend-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-detail); font-size: 12px; color: var(--ink); }
.cr-fm-legend-swatch { width: 14px; height: 14px; border-radius: 3px; opacity: 0.85; flex: none; }
.cr-fm-legend-swatch.cr-fm-z1 { background: #8FBF8F; }
.cr-fm-legend-swatch.cr-fm-z2 { background: #9BCFFB; }
.cr-fm-legend-swatch.cr-fm-z3 { background: #394386; }

.cr-floodmap-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); pointer-events: none; }
.cr-floodmap-framing { margin: 0 0 3px; font-family: var(--font-detail); font-size: 12px; line-height: 1.4; color: #FFFFFF; max-width: 720px; }
.cr-floodmap-framing strong { font-weight: 700; }
.cr-floodmap-attr { margin: 0; font-family: var(--font-detail); font-size: 11px; color: rgba(255,255,255,0.85); }

/* ---------- Brief 16 follow-up: frozen flood-map snapshot (hazard-tab reuse) ---------- */
.cr-floodsnap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cr-floodsnap-mapbox { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #EDEAE3; }
.cr-floodsnap-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  pointer-events: none; }
.cr-floodsnap-empty { display: grid; place-items: center; height: 100%; padding: var(--sp-4, 12px); text-align: center;
  font-family: var(--font-detail); font-size: 12px; color: var(--text-tertiary); }
.cr-floodsnap-caption { margin: 0; font-family: var(--font-detail); font-size: 12px; line-height: 1.4;
  color: var(--text-tertiary); }
.cr-floodsnap-caption strong { color: var(--ink); font-weight: 600; }
/* Below the map, not over it — a compact wrapping strip rather than the overlay card Route A uses. */
.cr-floodsnap-legend { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px;
  padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cr-floodsnap-legend .cr-fm-legend-title { flex: 0 0 100%; font-family: var(--font-detail); font-size: 11px; font-weight: 600; color: var(--ink); }
.cr-floodsnap-legend .cr-fm-legend-row { font-size: 11px; }
.cr-floodsnap-legend .cr-fm-legend-swatch { width: 12px; height: 12px; }

/* ---------- responsive: stack under ~900px (falls back to page scroll) ---------- */
@media (max-width: 900px) {
  .cr-root { overflow: auto; scrollbar-gutter: stable; }
  .cr-pillar { grid-template-columns: 1fr; height: auto; }
  .cr-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .cr-scroll { overflow: visible; }
  .cr-mid { min-height: 60vh; }
  .cr-right { min-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-title, .cr-block, .cr-stage, .cr-map-circle { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cr-hazard { opacity: 1 !important; animation: none !important; }
  .cr-hazard > svg { transform: none !important; animation: none !important; }
  .cr-hazard::after { animation: none; }
  .cr-acc-body { transition: none; }
}