/* ============================================================================
   Adaptation (vertical bars + measures panel) — third sub-tab of the Climate
   Risk & Adaptation tier. Rendered by climate-adaptation.js into the host
   element climate-risk.js hands it (class .cra-canvas). Mirrors climate-
   hazards.css's architecture (vars, tier-logo + accordion explainer, honesty
   banner, DISPLAY-SCALING RULES) so the two pages read as one tool — the
   shared .cr-* / .crx-honesty / .crx-explainer classes are reused verbatim
   for that reason, only the NEW chart + measures-panel styles are `.cra-*`.
   Fill math: fill% = 14 + (value/4)*76 → Low 14 · Medium 52 · High 71 · Very High 90
   (identical formula to Top Hazards' tiles, so the two pages read the same rating scale).
   ============================================================================ */

.cra-canvas {
  --cra-terracotta: #B33A2B;
  --cra-ink: #2A2A28;
  --cra-body: #55554F;
  --cra-muted: #77756D;
  --cra-faint: #9A988F;
  --cra-border: #EAE6DD;
  --cra-card: #FFFFFF;
  --cra-dark-pill: #2A2A28;
  /* Aliases under the --crx-* names too: the sign-in gate bar and "coming soon" toast reuse Top
     Hazards' OWN .crx-gate*/.crx-soon* markup verbatim (loaded globally via climate-hazards.css),
     but those rules' colours are `var(--crx-ink)` etc — custom properties scoped to `.crx-canvas`,
     which this page's `.cra-canvas` container never matches. Without these aliases the reused
     markup would render with missing/transparent colours (the same class of bug as the earlier
     Minimize fix, just for custom properties instead of collapse rules). Values match exactly. */
  --crx-ink: var(--cra-ink);
  --crx-muted: var(--cra-muted);
  --crx-terracotta: var(--cra-terracotta);
  --crx-dark-pill: var(--cra-dark-pill);
  --crx-fdisp: var(--cra-fdisp);
  --cra-fdisp: var(--font-display, 'Stolzl', 'DM Sans', system-ui, sans-serif);
  /* Adaptation uses Stolzl throughout, same as Top Hazards (product-owner convention). */
  --cra-fbody: var(--font-display, 'Stolzl', 'DM Sans', system-ui, sans-serif);

  /* Same two big-screen knobs as .crx-canvas — see DISPLAY-SCALING RULES at the foot of this file. */
  --cra-zoom: 1;
  zoom: var(--cra-zoom);
  --cra-emph: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(10px, 1.8vh, 22px) clamp(16px, 2vw, 30px) clamp(12px, 2vh, 28px);
  font-family: var(--cra-fbody);
  color: var(--cra-body);
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.3vh, 14px);
}

/* explainer body reuses the tier's shared accordion (.cr-acc*) verbatim — same scoped tweaks as
   Top Hazards' .crx-canvas: force Stolzl, compact heading size/padding, and pin the tier-logo +
   copy colours so this page stays a legible light island in the tier's dark mode (mirrors
   climate-hazards.css's own .crx-canvas overrides line-for-line, just re-scoped to .cra-canvas). */
.cra-canvas .cr-acc-body p { font-family: var(--cra-fdisp); }
.cra-canvas .cr-acc-title { font-size: 16px; line-height: 22px; }
.cra-canvas .cr-acc-head { padding: 10px 0; gap: 10px; }
.cra-canvas .cr-acc-chevron svg { width: 17px; height: 17px; }

/* Minimize/reopen: .crx-explainer/.crx-reopen are shared classes, but their COLLAPSE behaviour in
   climate-hazards.css is scoped to ".crx-canvas.pane-closed" specifically — that never matches
   this page's ".cra-canvas" container, so clicking Minimize toggled the state but nothing visually
   collapsed. Re-declared here, scoped to .cra-canvas, mirroring those rules exactly. */
.cra-canvas.pane-closed .crx-explainer { width: 0; opacity: 0; }
.cra-canvas.pane-closed .crx-reopen { width: 36px; background: #EDEAE2; border: 1px solid #D8D2C6; border-radius: 12px; margin-right: 12px; }
.cra-canvas.pane-closed .crx-reopen:hover { background: #E2DDD1; border-color: var(--cra-terracotta); }
@media (max-width: 900px) {
  .cra-canvas.pane-closed .crx-explainer { display: none; }
  .cra-canvas.pane-closed .crx-reopen { display: flex; width: 100%; height: 40px; margin-right: 0; }
  .cra-canvas.pane-closed .crx-reopen span { writing-mode: horizontal-tb; transform: none; }
}

/* ---- Right column: the whole non-explainer side (title, verdict, chart+panel split, save bar).
   Needs its own flex column so .cra-split's flex:1 1 auto actually has a flex CONTEXT to fill —
   mirrors Top Hazards' .crx-rightcol rule exactly. ---- */
.cra-rightcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 14px); min-height: 0; }

/* ---- Title block ---- */
.cra-titleblock { flex: none; }
.cra-titlerow { display: flex; align-items: center; gap: 9px; }
/* size-h2 (not size-title) — a deliberately smaller page title, matching Top Hazards' .crx-h1
   exactly (same shared token) so the two pages read at the same size. */
.cra-h1 { font-family: var(--cra-fdisp); font-weight: var(--w-book); font-size: calc(var(--size-h2) * var(--cra-emph)); line-height: var(--lh-h2); color: var(--cra-ink); margin: 0; }
/* info toggle — sits beside the title (never below it); reveals/hides .cra-sub beneath */
.cra-infobtn { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cra-faint); background: transparent; color: var(--cra-muted); font-family: var(--cra-fdisp); font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.cra-infobtn:hover, .cra-infobtn.on { border-color: var(--cra-terracotta); color: var(--cra-terracotta); background: var(--cra-terra-tint, #F7E4E0); }
.cra-sub { display: none; font-size: var(--size-small); line-height: var(--lh-small); color: var(--cra-muted); margin: 8px 0 0; max-width: 720px; }
.cra-titleblock.info-open .cra-sub { display: block; }

/* ---- Verdict callout — rewrites live as measures are ticked. Colour/size now match the other
   yellow boxes on the page (the honesty banner in the explainer, .crx-honesty) rather than its own
   one-off shade/size, and it minimises on click the same way (state.vMin), to give back screen
   space once you've read it. ---- */
.cra-verdict { flex: none; display: flex; align-items: flex-start; gap: 8px; background: #FBF3E6; border: 1px solid #EAD9B8; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: clamp(10.5px, 1.45vh, 12px); line-height: 1.45; color: #5A3E0F; transition: background .2s ease; }
.cra-verdict:hover { background: #F7ECD5; }
.cra-verdict-ic { flex: none; font-size: 13px; line-height: 1.3; }
.cra-verdict b { color: #3E2A0A; }
/* minimised: icon-only chip, text hidden — same pattern as .crx-honesty.mini */
.cra-verdict.mini { align-self: flex-start; align-items: center; gap: 0; padding: 7px 9px; }
.cra-verdict.mini .cra-verdict-tx { display: none; }

/* ---- Two-column split: chart (left, larger) + measures panel (right), matched height ---- */
.cra-split { display: flex; gap: clamp(10px, 1.4vw, 18px); flex: 1 1 auto; min-height: 0; align-items: stretch; }
/* --cra-pad-x named so .cra-bands (below) can cancel out exactly this much padding and bleed to
   the card's TRUE edge — "no white space either side of the graph" — while the name row and
   chart-foot text stay comfortably inset. */
/* --cra-legend-w: width reserved on the right for the HIGH/MEDIUM/LOW RISK legend, shared by both
   .cra-namerow and .cra-stage below (siblings, so this needs to live on their common ancestor) so
   the bar/name columns stay perfectly aligned while both stop short of the legend. */
.cra-chart { --cra-pad-x: clamp(10px, 1.4vw, 16px); --cra-legend-w: 78px; flex: 1.5; min-width: 0; background: var(--cra-card); border: 1px solid var(--cra-border); border-radius: 14px; padding: clamp(10px, 1.6vh, 16px) var(--cra-pad-x) 10px; display: flex; flex-direction: column; }
.cra-panel { flex: 1; min-width: 0; background: var(--cra-card); border: 1px solid var(--cra-border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }

/* ============ VERTICAL BAR CHART ============
   Structure: a NAME ROW (icon + hazard name, one per column) sits ABOVE the stage; the stage
   itself contains ONLY the bands + bars. This is deliberate — when the icon/name used to live
   INSIDE the same column as the bar, they ate into the column's own height, so a bar's fill%
   (measured against ITS OWN shorter box) no longer matched the SAME 0–100% range the full-height
   band overlay used — e.g. a "High" (71% fill) bar could visually land in the MEDIUM band because
   its available height was shorter than the bands assumed. Splitting them into two separate rows
   means the stage's bars and the band overlay share the exact same height, so a bar's fill% always
   lands in the correct band. .cra-namerow and .cra-stage use IDENTICAL flex column widths so a
   name always sits directly above its bar. Both reserve the SAME right-hand gutter
   (--cra-legend-w) so the bar columns never reach under the HIGH/MEDIUM/LOW RISK legend — the
   bands themselves (below) bleed past this gutter (and the chart's own padding) to the card's true
   edge, so the colour still runs edge-to-edge even though the bars/names stop short of it. */
.cra-namerow { display: flex; gap: clamp(6px, .8vw, 12px); padding-right: var(--cra-legend-w); flex: none; }
.cra-namecol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; border-radius: 10px; padding: 2px 2px 3px; text-align: center; transition: background .2s ease; }
.cra-namecol:hover { background: rgba(179,58,43,.05); }
.cra-iconbox { flex: none; display: flex; align-items: center; justify-content: center; transition: background .5s ease; }
/* width:100% is load-bearing: flex children default to CONTENT-width sizing (align-items:center
   doesn't stretch them), so without an explicit width .cra-name would size to its own unwrapped
   text — never actually constrained by the column, and fitUniform()'s clientWidth measurement
   would silently measure the wrong (self-sized) box. Mirrors Top Hazards' equivalent fix
   (.crx-tile-headmid { width: 100% }). font-size: fitCols() sets --cra-name-size to a single value
   that fits every column's name (uniform across the page — ported from fitTiles()). */
.cra-name { width: 100%; font-family: var(--cra-fdisp); font-weight: 400; font-size: var(--cra-name-size, calc(clamp(10px, 1.3vw, 12px) * var(--cra-emph))); line-height: 1.15; color: var(--cra-ink); min-height: 2.2em; overflow-wrap: break-word; }
/* selection reads via weight alone now (not colour) — the focused bar's own outline/fill already
   carries the colour cue, so the name just needs to stand out as bold when its hazard is focused. */
.cra-namecol.focus .cra-name { font-weight: 700; }

/* margin-top just needs to clear a Very-High bar's toplabel (-18px above the bar) — at any
   realistic chart height the bar itself is already well clear of the stage's own top edge, so
   this can stay tight ("less gap between hazard names and the graph" per review). Same right-hand
   gutter as .cra-namerow, so bar columns stay under their names AND never reach under the legend. */
.cra-stage { position: relative; flex: 1; min-height: 0; display: flex; gap: clamp(6px, .8vw, 12px); padding-right: var(--cra-legend-w); margin-top: 6px; }
/* Bleeds PAST both the stage's own legend gutter and the chart card's own padding (--cra-pad-x),
   reaching the card's TRUE left/right edges — "no white space either side of the graph" — while
   the bar COLUMNS (flex items, respecting .cra-stage's padding-right above) stay clear of the
   legend. The negative offsets are calculated from --cra-pad-x specifically (not the gutter) so
   the coloured band still fills the space the gutter reserves — only the BARS stop short of it. */
.cra-bands { position: absolute; left: calc(-1 * var(--cra-pad-x)); right: calc(-1 * var(--cra-pad-x)); top: 0; bottom: 0; pointer-events: none; }
.cra-band { position: absolute; left: 0; right: 0; }
.cra-band.hi { top: 0; height: 33.34%; background: rgba(179,58,43,.055); border-bottom: 1.5px dashed #E4B9B0; }
.cra-band.md { top: 33.33%; height: 33.34%; background: rgba(198,145,46,.06); border-bottom: 1.5px dashed #E7D3A0; }
.cra-band.lo { top: 66.66%; height: 33.34%; background: rgba(62,125,90,.055); }
/* the HIGH/MEDIUM/LOW RISK legend sits INSIDE its own band (an overlay, not a side column) — a
   small pill with its own translucent backing so it stays legible over the tinted band behind it.
   Positioned from the BAND's own (now bled, true-edge-to-true-edge) box, so "right: 10px" here
   means 10px from the card's true edge, matching where the bleed lands it. The bar columns are
   kept clear of this whole area by .cra-stage's padding-right above, so a tall bar never reaches
   underneath the label — no z-index tug-of-war needed. */
.cra-bandlabel { position: absolute; right: 10px; font-family: var(--cra-fdisp); font-weight: 700; font-size: 10px; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.85); white-space: nowrap; pointer-events: none; }
.cra-band.hi .cra-bandlabel { top: 8px; color: var(--cra-terracotta, #B33A2B); }
.cra-band.md .cra-bandlabel { top: 50%; transform: translateY(-50%); color: #B0700F; }
.cra-band.lo .cra-bandlabel { bottom: 8px; color: #3E7D5A; }

/* .cra-bararea is now the DIRECT flex child of .cra-stage (no wrapping column wastes height on
   icon/name), so its 0–100% fill range is IDENTICAL to .cra-bands' — this is the fix. */
.cra-bararea { flex: 1; min-width: 0; width: 100%; position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0 6px; cursor: pointer; }
/* --cra-bar-c (set inline per-bar in JS) is the band's own FULL colour — kept as a variable rather
   than baked straight into `background` so the SAME colour can drive three different treatments:
   a softened (lighter) fill at rest, a light-on-hover ring, and a full-strength outline once
   focused/clicked. Before this, a High-rated (red) bar used a flat red fill AND an always-red
   focus ring — indistinguishable from each other. Now the fill is a lighter tint of the band
   colour, and the ring (hover: faint, focus: solid) is the band's OWN full colour — so the ring
   always reads clearly against its own bar, whatever the rating. */
.cra-bar { width: 100%; max-width: 52px; border-radius: 7px 7px 0 0; position: relative; background: color-mix(in srgb, var(--cra-bar-c, #999) 55%, white); box-shadow: 0 -2px 0 rgba(0,0,0,.05) inset; transition: height .5s cubic-bezier(.4,0,.2,1), background .5s ease, box-shadow .15s ease; }
/* hover: matches Top Hazards' own tile-hover treatment (--crx-ring: solid 2px ring + soft glow),
   just in the bar's own colour instead of a fixed terracotta — a near-solid ring so it reads as
   clearly interactive, not just a faint tint. Suppressed once focused so the two rings don't compete. */
.cra-bararea:hover:not(.focus) .cra-bar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cra-bar-c, #999) 90%, transparent), 0 8px 18px color-mix(in srgb, var(--cra-bar-c, #999) 22%, transparent), 0 -2px 0 rgba(0,0,0,.05) inset; }
.cra-bararea.focus .cra-bar { box-shadow: 0 0 0 2px var(--cra-bar-c, var(--cra-terracotta)), 0 -2px 0 rgba(0,0,0,.05) inset; }
/* left/right:0 (not left:50%+translate) so the box spans the BAR's own width, not an auto-sized
   shrink-to-fit box — otherwise clientWidth always equals scrollWidth and fitUniform() below can
   never detect an overflow. font-size: fitCols() sets --cra-rating-size to one value that fits
   every column's rating word (uniform across the page, same rule as the hazard names). */
.cra-toplabel { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-family: var(--cra-fdisp); font-size: var(--cra-rating-size, calc(11px * var(--cra-emph))); font-weight: 700; white-space: nowrap; overflow: hidden; }
/* bottom:0 anchors the ghost to the SAME baseline as .cra-bar (a flex item with align-items:flex-end)
   so both grow upward from the same point — without it an absolutely-positioned element with only
   `height` set falls back to its static (top-of-container) position, growing the wrong way. */
/* the ghost persists on ANY hazard with an applied reduction — not just the focused one — so
   glancing at the chart shows at a glance which hazards have measures applied, even after you've
   moved on to another. No text label (deliberately, per review): the dashed outline alone reads
   as "this used to be taller" without needing a caption. */
.cra-ghost { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 52px; border: 1.5px dashed rgba(42,42,40,.3); border-radius: 7px 7px 0 0; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(42,42,40,.05) 4px 8px); pointer-events: none; transition: height .5s cubic-bezier(.4,0,.2,1); }
.cra-chartfoot { flex: none; font-size: 10px; color: var(--cra-muted); margin-top: 12px; text-align: center; }
.cra-chartfoot i { display: inline-block; width: 12px; height: 8px; border: 1.2px dashed rgba(42,42,40,.35); background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(42,42,40,.06) 3px 6px); margin-right: 4px; vertical-align: middle; }

/* ============ MEASURES PANEL ============ */
.cra-panelhead { flex: none; padding: 14px 16px 10px; border-bottom: 1px solid var(--cra-border); }
.cra-panelhead h3 { font-family: var(--cra-fdisp); font-size: 13.5px; color: var(--cra-terracotta); font-weight: 700; margin: 0 0 2px; }
.cra-psub { font-size: 11px; color: var(--cra-muted); }
.cra-panelbody { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.cra-m { background: #FBF9F4; border: 1px solid var(--cra-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.cra-m:hover { border-color: #D8D2C6; }
.cra-m.on { border-color: var(--cra-terracotta); box-shadow: 0 0 0 2px rgba(179,58,43,.13); background: #FEF7F4; }
.cra-mhead { display: flex; align-items: flex-start; gap: 8px; }
.cra-tick { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; border: 1.5px solid #C9C7BE; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; transition: background .2s ease, border-color .2s ease; }
.cra-m.on .cra-tick { background: var(--cra-terracotta); border-color: var(--cra-terracotta); }
.cra-mtitle { font-family: var(--cra-fdisp); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--cra-ink); }
.cra-mmeta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--cra-muted); padding-left: 24px; }
.cra-mmeta .cra-cost { color: #4A7A20; font-weight: 700; }
.cra-mmeta .cra-eff { color: var(--cra-terracotta); font-weight: 700; }
.cra-scrollhint { flex: none; padding: 7px 14px; text-align: center; font-size: 10px; color: var(--cra-muted); border-top: 1px solid var(--cra-border); background: #FBF9F4; display: none; }

/* ---- Responsive: stack chart above panel below 900px, same breakpoint as Top Hazards ---- */
@media (max-width: 900px) {
  /* .cra-split must stop trying to flex-grow here: the page switches to normal scrolling flow at
     this width, so its own available height is undefined — `flex:1 1 auto` in that context
     resolves to a collapsed 0px box (a classic flex gotcha) while its children's min-heights still
     render past it. Sizing to content instead (flex: none) fixes it — mirrors Top Hazards
     resetting .crx-rightcol/.crx-tiles to flex:none at the same breakpoint for the same reason. */
  .cra-split { flex: none; flex-direction: column; }
  .cra-chart { flex: none; min-height: 260px; }
  .cra-panel { flex: none; min-height: 220px; }
}
@media (max-width: 560px) {
  .cra-chart { --cra-legend-w: 58px; }
  .cra-bandlabel { font-size: 9px; padding: 2px 7px; right: 6px; }
}

/* ============================================================================
   DISPLAY-SCALING RULES — identical contract to .crx-canvas's own block (see
   climate-hazards.css). Same tiers, same gating (width AND height), so laptops
   and tablets render exactly as tuned and big screens scale up moderately with
   a capped width. Kept as its own block (not a shared selector) so this page's
   scaling can be tuned independently if its content density ever differs.
   ============================================================================ */
@media (min-width: 1600px) and (min-height: 950px)  { .cra-canvas { --cra-zoom: 1.20; --cra-emph: 1.30; } }
@media (min-width: 2200px) and (min-height: 1250px) { .cra-canvas { --cra-zoom: 1.55; --cra-emph: 1.45; } }
@media (min-width: 3200px) and (min-height: 1700px) { .cra-canvas { --cra-zoom: 2.10; --cra-emph: 1.65; } }

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