/* ============================================================================
   Top Hazards (concept 2a) — the free-tier default sub-tab of Brief 13's Climate
   Risk & Adaptation tier. Brief 14. Rendered by climate-hazards.js into the host
   element climate-risk.js hands it (class .crx-canvas). Pillar colours scoped to
   .crx-canvas so nothing leaks. Fonts follow the tier's DS (Stolzl / Inter).
   Fill math: fill% = 14 + (rating/3)*76 → Low 14 · Medium 39 · High 65 · Very High 90.
   ============================================================================ */

.crx-canvas {
  /* pillar-scoped rating tokens (handoff palette + purple Very High) */
  --crx-terracotta: #B33A2B;
  --crx-terra-tint: #F7E4E0;
  --crx-card: #FFFFFF;
  --crx-offwhite: #FBF9F4;
  --crx-low: #3E7D5A;   --crx-low-tint: #E7F0E9;
  --crx-med: #C6912E;   --crx-med-tint: #F7ECD5;
  --crx-high: #B33A2B;  --crx-high-tint: #F6DDD8;
  --crx-vhigh: #7C3AED; --crx-vhigh-tint: #EFE7FB;   /* Very High (purple) */
  --crx-ink: #2A2A28;
  --crx-body: #55554F;
  --crx-muted: #77756D;
  --crx-faint: #9A988F;
  --crx-dark-pill: #2A2A28;
  --crx-active-tab: #57544C;
  --crx-border: #EAE6DD;
  --crx-dash: #CFC9BC;
  --crx-shadow-pop: 0 12px 28px rgba(60,50,40,.18);
  --crx-ring: 0 0 0 2px #B33A2B, 0 8px 22px rgba(179,58,43,.18);
  --crx-fdisp: var(--font-display, 'Stolzl', 'DM Sans', system-ui, sans-serif);
  /* Top Hazards uses Stolzl throughout (product-owner) — body text points at the display face too. */
  --crx-fbody: var(--font-display, 'Stolzl', 'DM Sans', system-ui, sans-serif);

  /* fit-to-window: fill the locked pillar window exactly and flex, so the tiles absorb the
     remaining height instead of overflowing. .cr-page-full is overflow:hidden, so the page
     NEVER scrolls — the canvas must fit within it (min-height:0 lets it shrink to fit). */
  /* The two knobs that adapt this page to LARGE screens. Both stay 1 on laptops, tablets and
     anything below the big-screen thresholds, so those sizes render exactly as tuned. The
     big-screen tiers at the foot of this file raise them — see "DISPLAY-SCALING RULES" there. */
  --crx-zoom: 1;              /* whole-page proportional scale (text + icons + charts as one unit) */
  zoom: var(--crx-zoom);
  --crx-emph: 1;              /* extra size lift for KEY read-from-distance text only (heading, names, ratings) */
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(10px, 1.8vh, 22px) clamp(16px, 2vw, 30px) clamp(12px, 2vh, 28px);
  font-family: var(--crx-fbody);
  color: var(--crx-body);
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vh, 14px);
}

/* ---- Host page inside Brief 13's pillar: a full-width sibling of .cr-pillar that
   fills the locked window (flex:1) and scrolls internally. padding-top clears the
   floating .cr-nav pill. ---- */
.cr-page-full { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 74px;
  /* padding-top clears the floating .cr-nav pill (top var(--sp-4)=24 + ~46 tall) so it never
     covers the title. concept 2a is a warm cream surface (handoff), fixed regardless of theme
     so the page reads as a self-contained light experience — and so the dark-ink title/explainer
     copy stays legible in the tier's dark mode (a light island in the dark chrome). */
  background: #FFFFFF; }
.cr-page-full.active { display: block; }

/* Brief 14: on the Top Hazards page, hide the floating sub-nav once the user scrolls past it,
   so it stops covering content; scrolling back to the top brings it back. (Class toggled by
   climate-hazards.js on the .cr-root; only ever set while this scrolling page is active.) */
.cr-nav { transition: opacity .25s ease; }
.cr-root.crx-navhidden .cr-nav { opacity: 0; pointer-events: none; }

/* ---- Title block ---- */
/* page title — the tool's title ramp (Stolzl, --w-book i.e. NOT bold), scaled by the big-screen knob */
/* size-h2 (not size-title) — a deliberately smaller page title, matching the Adaptation page's
   .cra-h1 exactly (same shared token) so the two read at the same size. */
.crx-h1 { font-family: var(--crx-fdisp); font-weight: var(--w-book); font-size: calc(var(--size-h2) * var(--crx-emph)); line-height: var(--lh-h2); color: var(--crx-ink); margin: 0; }
.crx-sub { font-size: var(--size-small); line-height: var(--lh-small); color: var(--crx-muted); margin: 4px 0 0; max-width: 720px; }

/* ---- Timeframe timeline card ---- */
.crx-tl-card { display: flex; align-items: center; gap: 16px; background: var(--crx-card); border: 1px solid var(--crx-border); border-radius: 14px; padding: 12px 20px; align-self: stretch; max-width: 100%; flex-wrap: wrap; }
.crx-tl-labels { display: flex; flex-direction: column; gap: 1px; }
.crx-tl-labels .lead { font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--crx-terracotta); }
.crx-tl-labels .cue { font-weight: 700; font-size: 10px; color: var(--crx-terracotta); }
.crx-tl-track { position: relative; display: flex; align-items: flex-start; flex: 1; min-width: 320px; }
.crx-tl-baseline { position: absolute; left: 12.5%; right: 12.5%; top: 8px; height: 2px; background: #DDD8CE; }
.crx-tl-ext { position: absolute; top: 8px; width: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, #D2CCBF 0 4px, transparent 4px 8px); }
.crx-tl-ext.left { left: 0; } .crx-tl-ext.right { right: 0; }
.crx-tl-progress { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--crx-terracotta); transform-origin: left; transition: transform .3s ease; }
.crx-tl-node { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 0 4px 5px; border: 0; background: transparent; border-radius: 10px; transition: background .2s ease; }
.crx-tl-node:hover { background: rgba(179,58,43,.1); }
.crx-tl-dothold { height: 18px; display: flex; align-items: center; }
.crx-tl-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid #C9C3B7; transition: all .3s ease; }
.crx-tl-node.active .crx-tl-dot { width: 16px; height: 16px; background: var(--crx-terracotta); border-color: var(--crx-terracotta); }
.crx-tl-nodelabel { font-size: 11px; font-weight: 600; color: var(--crx-faint); white-space: nowrap; transition: color .3s ease; }
.crx-tl-node.active .crx-tl-nodelabel { font-weight: 700; color: var(--crx-ink); }
.crx-autoplay { flex: none; cursor: pointer; border: 0; font-family: var(--crx-fbody); font-weight: 700; font-size: 10.5px; border-radius: 99px; padding: 7px 13px; white-space: nowrap; background: var(--crx-terracotta); color: #fff; transition: filter .2s ease; }
.crx-autoplay:hover { filter: brightness(1.08); }
.crx-autoplay.playing { background: #F0E7E3; color: #B0857A; cursor: default; }

/* ---- Load hint ---- */
.crx-hint { flex: none; align-self: center; display: flex; align-items: center; gap: 9px; background: var(--crx-dark-pill); color: #fff; font-weight: 600; font-size: 12px; padding: 9px 15px; border-radius: 99px; box-shadow: 0 6px 16px rgba(0,0,0,.18); animation: crxToast .5s cubic-bezier(.2,.85,.25,1); }
.crx-hint .em { font-size: 14px; }

/* ---- Body: two columns — full-height explainer (left) + title/timeframe/tiles or open detail (right) ---- */
.crx-body { display: flex; flex: 1 1 auto; min-height: 0; gap: clamp(12px, 1.6vw, 22px); }
.crx-rightcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 14px); min-height: 0; }
.crx-reopen { flex: none; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: stretch; width: 0; transition: width .7s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background .2s ease; }
.crx-canvas.pane-closed .crx-reopen { width: 36px; background: #EDEAE2; border: 1px solid #D8D2C6; border-radius: 12px; margin-right: 12px; }
.crx-canvas.pane-closed .crx-reopen:hover { background: #E2DDD1; border-color: var(--crx-terracotta); }
.crx-reopen span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: 12px; color: var(--crx-muted); white-space: nowrap; }
/* the open explainer is itself a row: [scrollable copy][minimise bar] — the bar is the OBVIOUS,
   full-height way to close it, mirroring .crx-reopen (the equivalent bar shown once minimised). */
.crx-explainer { overflow: hidden; flex: none; display: flex; align-items: stretch; width: 310px; opacity: 1; height: 100%; transition: width .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.crx-canvas.pane-closed .crx-explainer { width: 0; opacity: 0; }
/* full-height column; scroll the copy internally when it's taller than the page (small windows) */
.crx-explainer-inner { flex: 1 1 auto; min-width: 0; padding-right: 12px; height: 100%; overflow-y: auto; scrollbar-gutter: stable; box-sizing: border-box; display: flex; flex-direction: column; }
.crx-explainer-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: var(--sp-4); flex: none; }
/* tier logo (decode:Climate) — scale-to-fit so it never overflows the narrow column; colours come
   from the shared .cr-t-* spans (near-black / soft ":" / pillar accent). */
.crx-logo { font-family: var(--crx-fdisp); font-size: clamp(22px, 4.6vh, 30px); line-height: 1.05; letter-spacing: -0.015em; white-space: nowrap; }
/* right-edge minimise bar — same shape/interaction language as .crx-reopen, just always visible
   while the explainer is open, so "how do I close this?" is obvious. */
.crx-minbar { flex: none; width: 26px; margin-left: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #F4F2ED; border: 1px solid #EAE6DD; border-radius: 10px; transition: background .2s ease, border-color .2s ease; }
.crx-minbar:hover { background: #EDE9DF; border-color: var(--crx-terracotta); }
.crx-minbar span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; font-size: 12px; color: var(--crx-muted); white-space: nowrap; }
.crx-minbar:hover span { color: var(--crx-terracotta); }
/* explainer body uses the tier's accordion (.cr-acc*) verbatim — force Stolzl (product-owner: all
   Top Hazards text is Stolzl) while keeping the tool's shared size ramp for the copy. */
.crx-canvas .cr-acc-body p { font-family: var(--crx-fdisp); }
/* smaller section headings + tighter rows than the tier default (22px / --sp-4 pad) so the four
   sections sit compactly with less white space around each heading. */
.crx-canvas .cr-acc-title { font-size: 16px; line-height: 22px; }
.crx-canvas .cr-acc-head { padding: 10px 0; gap: 10px; }
.crx-canvas .cr-acc-chevron svg { width: 17px; height: 17px; }
/* Top Hazards stays a WHITE light-island even in the tier's dark mode (like the old cream island).
   The reused .cr-* classes ship dark-mode overrides that assume a dark surface — pin their text back
   to dark values so the logo + explainer copy stay legible on white. */

/* ---- Hazard tiles ---- */
.crx-tiles { flex: 1; min-height: 0; min-width: 0; display: flex; gap: 12px; justify-content: flex-start; }
/* cap tiles so 1–2 hazards read as cards, not a stretched band (many schools have fewer
   than 3 qualifying hazards); 3 tiles still fill via flex-shrink. The transition animates the
   grow-to-open / shrink-to-rail so the viewer sees the tiles move out of the way. */
.crx-tile-wrap { position: relative; min-width: 0; min-height: 0; display: flex; flex: 1; max-width: 400px;
  transition: flex .8s cubic-bezier(.2,.8,.2,1), max-width .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
/* the opened hazard grows only as wide as its content needs (capped), not the whole row; the others
   shrink to slim rails and STAY visible — even on a short screen, as long as it's wide enough. */
.crx-canvas.crx-open .crx-tile-wrap.expanded { flex: 1 1 auto; max-width: 800px; }
.crx-canvas.crx-open .crx-tile-wrap.collapsed { flex: 0 0 92px; max-width: 92px; }
/* tile background is a soft rating-colour tint (set inline per rating) on the white page; it eases
   as the rating changes over the timeline. Border kept for separation on white. */
/* SUBTLE rating-colour wash: mix the tint heavily with white so the tile is only faintly coloured.
   No background transition — the tint snaps instantly on a rating change (the fill animates instead). */
.crx-tile { width: 100%; position: relative; overflow: hidden; background: color-mix(in srgb, var(--crx-tint, #FFFFFF) 40%, #FFFFFF); border: 1px solid var(--crx-border); border-radius: 14px; display: flex; flex-direction: column; cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease; }
.crx-tile:hover { box-shadow: var(--crx-ring); }
.crx-tile-wrap.expanded .crx-tile { cursor: default; background: var(--crx-card) !important; }   /* clean white behind the open detail */
.crx-tile-wrap.expanded .crx-tile:hover { box-shadow: none; }
.crx-tile-fill { position: absolute; left: 0; right: 0; bottom: 0; opacity: .14; transition: height 2s ease, background 2s ease, opacity .4s ease; }
.crx-tile-wrap.expanded .crx-tile-fill { opacity: 0; }   /* clean white behind the open detail */
.crx-iconbox { border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.crx-iconbox.big { border-radius: 11px; }
/* open detail (inside the grown tile) + slim rail (a collapsed hazard) */
.crx-tile-detail { overflow-y: auto; scrollbar-gutter: stable; gap: clamp(8px, 1.4vh, 12px); animation: crxFadeIn .55s ease; }
.crx-tile-rail { align-items: center; justify-content: flex-start; padding: 14px 4px; gap: 13px; overflow: hidden; }
.crx-rail-top { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.crx-rail-name { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--crx-fdisp); font-weight: 600; font-size: 12px; color: var(--crx-muted); white-space: nowrap; }
@keyframes crxFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* slide the title / timeframe / lived line / gate off only in "tight" mode (short screens) */
.crx-titleblock, .crx-lived, .crx-tl-card, .crx-gate { transition: max-height .55s ease, opacity .4s ease, margin .55s ease, transform .55s ease, border-color .2s ease; }
.crx-canvas.crx-tight .crx-titleblock,
.crx-canvas.crx-tight .crx-tl-card,
.crx-canvas.crx-tight .crx-lived,
.crx-canvas.crx-tight .crx-hint,
.crx-canvas.crx-tight .crx-gate {
  max-height: 0 !important; opacity: 0; margin: 0 !important; padding-top: 0; padding-bottom: 0;
  border-width: 0; overflow: hidden; pointer-events: none; transform: translateY(-6px); }
/* with the chrome collapsed, drop the column gaps too so the open hazard fills the FULL height —
   top and bottom in line with the "What is climate risk?" explainer beside it. */
.crx-canvas.crx-tight .crx-rightcol { gap: 0; }
.crx-tile-open { position: relative; padding: clamp(11px, 1.7vh, 16px); display: flex; flex-direction: column; gap: clamp(7px, 1.1vh, 11px); height: 100%; }
/* Stack icon above the name so the name spans the FULL tile width — with 5 narrow tiles, sitting the
   name beside the icon left too little room, forcing long words (e.g. "Precipitation") to shrink to
   the floor or break. Full width lets fitTiles() land a readable, uniform size. */
.crx-tile-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* font-size: fitTiles() (climate-hazards.js) sets --crx-name-size to a single value that fits every
   tile's name (uniform across the page). Falls back to the natural emph size when no shrink is needed. */
.crx-tile-name { font-family: var(--crx-fdisp); font-weight: 600; font-size: var(--crx-name-size, calc(clamp(13px, 1.7vh, 15px) * var(--crx-emph))); line-height: 1.15; color: var(--crx-ink); overflow-wrap: break-word; }
.crx-tile-era { font-weight: 600; font-size: 10px; color: var(--crx-faint); }
.crx-tile-headmid { flex: none; width: 100%; min-width: 0; }
.crx-chip { flex: none; font-weight: 700; font-size: 11px; padding: 4px 12px; border-radius: 99px; }
.crx-chip.solid { cursor: pointer; font-size: 11.5px; padding: 6px 14px; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); border: 0; }
.crx-chip-wrap { position: relative; flex: none; }
.crx-close { flex: none; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; background: #EDE9DF; color: var(--crx-muted); border: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; line-height: 1; margin-left: 2px; transition: background .2s ease; }
.crx-close:hover { background: #E2DDD1; }
/* "TOP RISK" flag on the leftmost (highest-ranked) tile */
.crx-toprisk { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: var(--crx-terracotta); color: #fff; font-weight: 700; font-size: 10px; letter-spacing: .05em; padding: 4px 10px; border-radius: 99px; box-shadow: 0 2px 6px rgba(179,58,43,.25); }
.crx-tile-normalbody { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
/* rating word: the old one is gone instantly (never rendered); the new one slowly FILLS/reveals in
   place — up from the bottom when risk rises, down from the top when it eases (~1.5s, no overlap). */
.crx-wordclip { overflow: hidden; }
/* font-size: fitTiles() sets --crx-rating-size to one value that fits every tile's rating (uniform
   across the page); falls back to the natural emph size when no shrink is needed. */
.crx-riskword { font-family: var(--crx-fdisp); font-weight: 700; font-size: var(--crx-rating-size, calc(clamp(16px, 2.6vh, 22px) * var(--crx-emph))); line-height: 1.1; }
.crx-riskword.fill-up { animation: crxNewUp 1.5s ease forwards; }
.crx-riskword.fill-down { animation: crxNewDown 1.5s ease forwards; }
.crx-tap { font-weight: 600; font-size: 11px; color: #B0AA9E; }
.crx-ratingpop { position: absolute; top: calc(100% + 8px); right: 0; width: 238px; background: #fff; border: 1px solid #E6E0D5; border-radius: 12px; box-shadow: var(--crx-shadow-pop); padding: 12px 14px; z-index: 6; text-align: left; }
.crx-ratingpop .head { font-family: var(--crx-fdisp); font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.crx-ratingpop .body { font-weight: 500; font-size: 12px; line-height: 1.5; color: var(--crx-body); }
.crx-expbody { display: flex; flex-direction: column; gap: 11px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 2px; }
.crx-tabs { display: inline-flex; gap: 4px; background: #EFEAE0; border-radius: 99px; padding: 3px; align-self: flex-start; }
.crx-tab { cursor: pointer; border: 0; background: transparent; font-weight: 600; font-size: 11px; padding: 5px 12px; border-radius: 99px; color: var(--crx-muted); transition: all .2s ease; }
.crx-tab:hover { background: #E2DDD1; color: var(--crx-ink); }
.crx-tab.active, .crx-tab.active:hover { background: var(--crx-active-tab); color: #fff; }
.crx-what { font-weight: var(--w-book, 400); font-size: 14px; line-height: 1.6; color: var(--crx-body); max-width: 420px; }
.crx-why { display: flex; gap: 18px; flex: 1; min-height: 0; align-items: stretch; flex-wrap: wrap; }
.crx-why-chartcol { display: flex; flex-direction: column; gap: 7px; flex: 0 0 300px; min-width: 0; }
.crx-why-metric { font-weight: 600; font-size: 11px; color: var(--crx-muted); }
.crx-chartbox { flex: 1; min-height: 130px; max-height: 170px; background: #fff; border: 1px solid #EEE8DE; border-radius: 10px; padding: 10px 12px; }
.crx-chartbox svg { display: block; width: 100%; height: 100%; }
.crx-nochart { font-size: 12px; color: var(--crx-muted); padding: 20px 8px; }
.crx-legend { display: flex; gap: 14px; font-weight: 600; font-size: 10px; color: var(--crx-muted); flex-wrap: wrap; }
.crx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.crx-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.crx-why-copy { flex: 1; min-width: 220px; display: flex; align-items: center; }
.crx-why-copy p { margin: 0; font-weight: var(--w-book, 400); font-size: 12px; line-height: 1.65; color: #6B6B66; }
.crx-step { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.crx-step-label { font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--crx-terracotta); margin-bottom: 6px; }
.crx-step-action { font-family: var(--crx-fdisp); font-weight: 600; font-size: 14px; color: var(--crx-ink); margin-bottom: 8px; }
.crx-step-row { display: flex; gap: 9px; align-items: flex-start; }
.crx-step-check { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #E4DFD4; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.crx-step-text { font-weight: var(--w-book, 400); font-size: 14px; line-height: 1.55; color: var(--crx-body); }
.crx-gatepill { align-self: flex-start; border: 0; cursor: pointer; font-weight: 600; font-size: 11.5px; color: var(--crx-muted); background: #EDEAE2; border: 1px dashed var(--crx-dash); border-radius: 99px; padding: 8px 15px; transition: all .2s ease; }
.crx-gatepill:hover { border-color: var(--crx-terracotta); color: var(--crx-terracotta); }
.crx-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--crx-muted); font-size: 14px; padding: 40px; max-width: 520px; margin: 0 auto; }

/* per-tile rating-change toast (motion follow-up; markup ready, not driven) */
.crx-toast { position: absolute; bottom: 100%; left: 50%; margin-bottom: 9px; transform: translate(-50%, 0); white-space: nowrap; background: var(--crx-dark-pill); color: #fff; font-weight: 700; font-size: 11px; padding: 7px 13px; border-radius: 99px; box-shadow: 0 6px 16px rgba(0,0,0,.22); z-index: 9; display: flex; align-items: center; gap: 7px; animation: crxToast .42s cubic-bezier(.2,.85,.25,1); }
.crx-toast i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---- Bottom gate bar ---- */
.crx-gate { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #FBF5EA; border: 1px solid #EFE3CE; border-radius: 14px; padding: 12px 18px; cursor: pointer; transition: border-color .2s ease; }
.crx-gate:hover { border-color: var(--crx-terracotta); }
.crx-gate-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.crx-gate-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #F0E2C6; color: #9B6A1E; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.crx-gate-copy { min-width: 0; }
/* size matches .crx-honesty-tx (the bottom-left warning box text) exactly, per review — both boxes
   should read at the same scale. Shared here, so this fixes both Top Hazards' own gate AND
   Adaptation's reused copy of the same markup in one place. */
.crx-gate-text { font-weight: 700; font-size: clamp(10.5px, 1.45vh, 12px); color: var(--crx-ink); }
.crx-gate-sub { font-weight: 500; font-size: clamp(10.5px, 1.45vh, 12px); color: var(--crx-muted); margin-top: 1px; }
.crx-gate-btn { flex: none; border: 0; cursor: pointer; font-weight: 700; font-size: 12px; color: #fff; background: var(--crx-terracotta); border-radius: 99px; padding: 9px 18px; }

/* ---- "Coming soon" notice ---- */
.crx-soon { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; width: min(460px, calc(100% - 40px)); display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; background: var(--crx-dark-pill); color: #fff; font-weight: 600; font-size: 13px; padding: 12px 18px; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); cursor: pointer; animation: crxToast .42s cubic-bezier(.2,.85,.25,1); }
.crx-soon .lock { font-size: 15px; }
.crx-soon .dismiss { color: #B0AA9E; font-weight: 700; margin-left: 4px; }

@keyframes crxToast { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---- Dynamic motion (autoplay) ---- */
/* the progress bar is driven per-frame by rAF during autoplay, so drop its CSS transition */
.crx-canvas.autoplaying .crx-tl-progress { transition: none; }
/* vertical colour wipe: old (base) and new (top) get COMPLEMENTARY clips so they never overlap
   — they meet at a moving horizontal line. At the end the old is fully clipped away. */
.crx-lyr { position: relative; display: inline-flex; }
.crx-lyr-t { position: absolute; inset: 0; }
.crx-lyr.crx-up   .crx-lyr-b { animation: crxOldUp 2.4s ease forwards; }
.crx-lyr.crx-up   .crx-lyr-t { animation: crxNewUp 2.4s ease forwards; }
.crx-lyr.crx-down .crx-lyr-b { animation: crxOldDown 2.4s ease forwards; }
.crx-lyr.crx-down .crx-lyr-t { animation: crxNewDown 2.4s ease forwards; }
@keyframes crxNewUp   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes crxOldUp   { from { clip-path: inset(0 0 0 0); }    to { clip-path: inset(0 0 100% 0); } }
@keyframes crxNewDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes crxOldDown { from { clip-path: inset(0 0 0 0); }    to { clip-path: inset(100% 0 0 0); } }

/* ---- Hazard detail — rendered INSIDE the grown tile (never a pop-up). Header + tabs + body. ---- */
.crx-ov-head { display: flex; align-items: center; gap: 11px; }
.crx-ov-title { flex: 1; min-width: 0; }
.crx-ov-close { flex: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
  background: #EDE9DF; color: var(--crx-muted); border: 0; display: flex; align-items: center;
  justify-content: center; font-size: 20px; line-height: 1; transition: background .2s ease; }
.crx-ov-close:hover { background: #E2DDD1; }
.crx-tile-detail .crx-expbody { flex: 1; overflow-y: auto; scrollbar-gutter: stable; }

/* charts v2 (blue line + band) + flood statement */
.crx-lg-line { width: 14px !important; height: 3px !important; border-radius: 2px; }
.crx-lg-band { width: 12px !important; height: 10px !important; border-radius: 2px; }
.crx-flood { display: flex; flex-direction: column; gap: 8px; }
.crx-flood-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #EEE8DE; border-radius: 10px; padding: 10px 14px; }
.crx-flood-when { font-weight: 600; font-size: 12px; color: var(--crx-muted); }
.crx-flood-band { font-family: var(--crx-fdisp); font-weight: 700; font-size: 15px; color: var(--crx-ink); }
.crx-flood-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--crx-muted); }
.crx-flood-map { margin: 0 0 4px; max-width: 420px; }
.crx-flood-map .cr-floodsnap-caption { font-size: 11.5px; color: var(--crx-muted); }
.crx-flood-map .cr-floodsnap-caption strong { color: var(--crx-ink); }

/* honesty notice — pinned at the foot of the explainer (margin-top:auto). Click to minimise it to a
   compact icon-only chip and back (state.warnMin). */
.crx-honesty { flex: none; margin-top: auto; display: flex; align-items: flex-start; gap: 8px; background: #FBF3E6;
  border: 1px solid #EAD9B8; border-radius: 10px; padding: 10px 12px; cursor: pointer;
  font-size: clamp(10.5px, 1.45vh, 12px); line-height: 1.45; color: #6B5A32; transition: background .2s ease; }
.crx-honesty:hover { background: #F7ECD5; }
.crx-honesty-ic { flex: none; color: #B8863B; font-size: 13px; line-height: 1.3; }
.crx-honesty b { color: #4A3E20; }
/* minimised: just the ⚠ chip (text hidden), sitting at the left */
.crx-honesty.mini { align-self: flex-start; align-items: center; gap: 0; padding: 7px 9px; }
.crx-honesty.mini .crx-honesty-tx { display: none; }
.crx-lived { flex: none; display: flex; align-items: center; gap: 7px; margin: -2px 0 0 2px;
  font-size: clamp(11px, 1.5vh, 13px); font-weight: 600; color: var(--crx-terracotta); }
.crx-lived-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crx-terracotta); flex: none; }

/* ---- Responsive ---- */
/* Tablet & below: stack into one column. The explainer moves to the top, the tiles below it. */
@media (max-width: 900px) {
  .cr-page-full { padding-top: 92px; }
  .crx-body { flex-direction: column; gap: 14px; min-height: 0; flex: 1 1 auto; }
  /* explainer becomes [copy] stacked above a full-width horizontal minimise bar */
  .crx-explainer { flex-direction: column; align-items: stretch; flex: none; width: 100% !important; height: auto; opacity: 1 !important; }
  .crx-explainer-inner { width: 100%; height: auto; padding-right: 0; }
  .crx-honesty { margin-top: 12px; }
  .crx-minbar { width: 100%; height: 34px; margin: 8px 0 0; }
  .crx-minbar span { writing-mode: horizontal-tb; transform: none; }
  .crx-reopen { display: none; height: auto; }
  .crx-canvas.pane-closed .crx-explainer { display: none; }
  .crx-canvas.pane-closed .crx-reopen { display: flex; width: 100%; height: 40px; margin-right: 0; }
  .crx-canvas.pane-closed .crx-reopen span { writing-mode: horizontal-tb; transform: none; }
  .crx-tl-track { width: 100%; }
  /* rightcol + tiles grow to absorb the remaining height (see the fit vs scroll rules below) */
  .crx-rightcol { flex: 1 1 auto; min-height: 0; }
  .crx-tiles { flex: 1 1 auto; min-height: 0; }
}
/* Roomy portrait tablet (Brief: responsive-scaling): FIT the whole page on one screen — no scroll.
   The sections expand DOWNWARD to fill the height instead of clustering at the top. Gated on real
   tablet dimensions (wider than a phone, ≥760px tall) so phones/short screens don't get squashed. */
@media (max-width: 900px) and (min-width: 561px) and (min-height: 760px) {
  .cr-page-full { overflow: hidden; }
}
/* Short or small screens: can't fit without squashing — keep the scrolling stack. */
@media (max-width: 900px) and (max-height: 759px) {
  .cr-page-full { overflow-y: auto; scrollbar-gutter: stable; }
  .crx-rightcol, .crx-tiles { flex: none; }
  .crx-tiles { min-height: 420px; }
}
@media (max-width: 560px) {
  .cr-page-full { overflow-y: auto; scrollbar-gutter: stable; padding-top: 120px; }   /* sub-nav labels wrap to two lines here */
  .crx-rightcol, .crx-tiles { flex: none; }
  .crx-tiles { flex-direction: column; min-height: 0; }
  .crx-tile-wrap { flex: 1 1 auto; max-width: none; }
  .crx-tile { min-height: 190px; }
  /* When a hazard is OPEN on a phone-width screen, it takes the FULL width — there isn't room for
     rails beside or below it, so the other hazards are pushed off-screen (hidden) rather than
     squeezed. Closing it (the × on the card) brings everything back exactly as before. */
  .crx-canvas.crx-open .crx-tiles { flex-direction: row; }
  .crx-canvas.crx-open .crx-tile-wrap.expanded { flex: 1 1 100%; max-width: none; }
  .crx-canvas.crx-open .crx-tile-wrap.collapsed { display: none; }
  .crx-why { flex-direction: column; }
  .crx-why-chartcol { flex: 1 1 auto; }
}
/* ============================================================================
   DISPLAY-SCALING RULES — how this page adapts to large screens (Brief: responsive-scaling)
   These are STRUCTURAL rules, independent of the visual design. Restyle the tiles, colours,
   icons or copy freely: as long as new "glanceable" text uses `* var(--crx-emph)` (rule 3),
   this behaviour carries over. The rules:

   1. FILL THE HEIGHT, CAP THE WIDTH. On a large screen the page fills the vertical space (the
      tiles stretch tall) but the content is held to a capped width (`max-width` above) and
      centred, so it sits with whitespace on the SIDES rather than stretching wide. Result: a
      good aspect ratio and PORTRAIT tiles (taller than wide) at every size.
   2. SCALE UP IN PROPORTION, MODERATELY. `--crx-zoom` scales the whole page — text, icons and
      charts as one unit — via `zoom`. It is capped per tier so the rendered content never grows
      past ~2/3 of the screen width: big enough to read across a room, never sprawling/oversized.
   3. LIFT THE KEY TEXT A LITTLE MORE. `--crx-emph` enlarges ONLY the read-from-a-distance text
      (page heading, hazard names, risk ratings) so it clears the classroom-legibility mark
      without widening the layout. Apply it to any new glanceable text: font-size: calc(<size> * var(--crx-emph)).
   4. LAPTOPS & TABLETS ARE UNTOUCHED. Each tier is gated on BOTH width AND height, so laptops
      (≤ ~1440×900) and tablets never trigger them — `--crx-zoom`/`--crx-emph` stay 1 and the
      no-scroll fit + "tight" open-hazard mode behave exactly as before. Small laptops keep
      spilling to use their width (they never reach these tiers).
   5. NEVER SCROLLS. .cr-page-full is overflow:hidden and height-locked; the scaled content fits
      the window and whitespace — not a scrollbar — takes up any slack.

   The steps below are per-device-class (not a fluid curve) so they land on real screens and are
   trivial to tweak. As a guide, key text ends up ≈ 3.4% of screen height on a 4K TV — comfortable
   for classroom viewing, deliberately kept below the ~5–6% maximum to protect rules 1 & 2.
   ============================================================================ */
@media (min-width: 1600px) and (min-height: 950px)  { .crx-canvas { --crx-zoom: 1.20; --crx-emph: 1.30; } }  /* large desktop monitor */
@media (min-width: 2200px) and (min-height: 1250px) { .crx-canvas { --crx-zoom: 1.55; --crx-emph: 1.45; } }  /* 1440p large display */
@media (min-width: 3200px) and (min-height: 1700px) { .crx-canvas { --crx-zoom: 2.10; --crx-emph: 1.65; } }  /* 4K TV / big display */

@media (prefers-reduced-motion: reduce) {
  .crx-canvas * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}