/* Growth Fronts: light through glass. The night side of the Earth from orbit; data as light in fibre.
 * The palette is the house one: the kit's defaults, which follow the "signal" look of polymorphic.codes, the site this
 * demo ships beside. Black ground, bone type, neutral furniture; colour only for what the map measures, by meaning:
 *   cool (indigo to ice)  the suburbs seen from space, and the labels that name a part of the instrument
 *   heat                  what the model projects (the hatching), and the one primary action
 *   mint                  the candidate areas it picks
 *   amber                 power
 * The map's own colours are in app/palette.js; the --m-* tokens below carry the same values for the furniture over it.
 * One theme, dark: the map is a night scene and the page stays with it (the light switch is gone: it only turned the
 * drawer and the foot to paper). What sits on the map uses the fixed --m-* tokens; the drawer and the foot use the
 * kit's dark tokens.
 * Round 4: a left rail (wordmark, layers, callouts, the story strip), figures top-right from the hand-over on. */

:root {
  /* fixed inks and tones for whatever sits on the map */
  --m-bg: #000; --m-hi: #fff; --m-ink: #ece8e0; --m-ink-2: #c3beb4; --m-mut: #8f8a80; --m-faint: #5c5851;
  --m-rule: #2c2a26; --m-rule-2: #1c1b18; --m-rule-3: #3a3732; --m-tick: #a39d92;
  --m-ice: #a8dcff; --m-deep-ink: #b9b4ff; --m-heat: #ff6a2b; --m-heat-ink: #ff9a6b; --m-mint: #3fd49a; --m-amber: #ffb14a;
  --scene: #000;                    /* the map background */
  --halo: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000;
  --plate-bg: rgba(0, 0, 0, .86);
}

html, body { background: var(--bg); }
[hidden] { display: none !important; }
body { overflow-x: hidden; }

/* ------------------------------------------------------------------ the map (full viewport) */
.gf-instrument { position: relative; height: calc(100vh - var(--banner, 0px)); height: calc(100svh - var(--banner, 0px)); min-height: 520px; overflow: hidden;
  background: var(--scene); color: var(--m-ink); isolation: isolate;
  /* everything inside the map (the HUD, the intro, the loader, callouts) is on the dark map, so the kit's
     tokens are pinned here to the fixed night values, and text keeps its halo */
  --ink: var(--m-ink); --ink-2: var(--m-ink-2); --mut: var(--m-mut); --faint: var(--m-faint); --hi: var(--m-hi);
  --tick: var(--m-tick); --rule: var(--m-rule); --rule-2: var(--m-rule-2); --glass: rgba(8, 8, 7, .72); --bg: var(--m-bg);
  --heat: var(--m-heat); --heat-ink: var(--m-heat-ink); --mint: var(--m-mint); --ice: var(--m-ice); --deep-ink: var(--m-deep-ink); --amber: var(--m-amber);
  --sig: var(--m-heat); --sig-ink: var(--m-heat-ink);
  --halo: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000; }
.gf-deck { position: absolute; inset: 0; z-index: 0; }
.gf-deck canvas { outline: none; }

/* HUD furniture over the map */
.gf-hud { position: absolute; z-index: 5; color: var(--ink); }
.gf-top { top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: calc(var(--gut) - 4px) var(--gut) 0; pointer-events: none; }
.gf-top > * { pointer-events: auto; }
.gf-brand { display: flex; gap: 14px; align-items: center; min-width: 0; }
.gf-brand__glyph { width: 40px; height: 40px; flex: none; }
.gf-brand h1 { margin: 0; font: 600 23px/1.05 var(--sans); letter-spacing: -.035em; color: var(--m-hi); text-shadow: var(--halo); white-space: nowrap; }
.gf-desc { margin: 4px 0 0; font: 400 14.5px/1.35 var(--sans); color: var(--m-ink); text-shadow: var(--halo); }
.gf-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.gf-tools .pm-btn { background: rgba(0, 0, 0, .86); }
.gf-icon-btn { width: 38px; padding: 0; }
.gf-icon-btn svg { width: 16px; height: 16px; }
.gf-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* ------------------------------------------------------------------ stages: what shows when */
html[data-stage="intro"] .gf-hud { visibility: hidden; }
html[data-stage="intro"] .gf-callouts, html[data-stage="intro"] .gf-labels { visibility: hidden; }
.gf-figs, .gf-dock { display: none; }
html[data-stage="handover"] .gf-figs, html[data-stage="explore"] .gf-figs { display: grid; }
html[data-stage="explore"] .gf-dock { display: flex; }
html[data-stage="explore"] .gf-strip { display: none; }
.gf-strip [id^="st-"], .gf-strip__nav, .gf-strip__dots { display: none; }
.gf-strip__nav [id^="st-"] { display: inline-grid; }
html[data-stage="story"] #st-play, html[data-stage="story"] #st-year:not([hidden]), html[data-stage="story"] #st-kick, html[data-stage="story"] #st-skip,
html[data-stage="story"] .gf-strip__nav, html[data-stage="recap"] .gf-strip__nav { display: inline-flex; }
html[data-stage="story"] .gf-strip__dots, html[data-stage="recap"] .gf-strip__dots, html[data-stage="handover"] .gf-strip__dots { display: flex; }
html[data-stage="recap"] #st-explore, html[data-stage="recap"] #st-replay, html[data-stage="handover"] #st-replay, html[data-stage="handover"] #st-hint { display: inline-flex; }
html[data-mode="explore"] .gf-opts__more, html[data-mode="story"] .gf-opts__story, html[data-mode="story"] .gf-more { display: none; }
html[data-side="open"] .gf-figs { display: none !important; }

/* ------------------------------------------------------------------ the city switch (top, between the wordmark and the panels) */
.gf-cities { background: rgba(0, 0, 0, .88); align-self: flex-start; margin-top: 2px; }
.gf-cities button { min-height: 32px; padding: 0 12px; }
.gf-method p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.6; font-size: .95rem; max-width: 64ch; }
.gf-method .gf-hash { display: inline; }
.gf-method .gf-drawer-h:first-child { margin-top: 6px; }
.gf-foot { padding-top: 10px; }

/* ------------------------------------------------------------------ the layers panel, top-left under the wordmark */
.gf-opts { left: var(--gut); top: 84px; display: grid; gap: 8px; justify-items: start; max-width: calc(100vw - 2 * var(--gut)); }
.gf-opts__toggle { background: rgba(0, 0, 0, .88); gap: 8px; }
.gf-opts__toggle svg { width: 14px; height: 14px; }
.gf-opts__toggle[aria-expanded="true"] { border-color: var(--m-tick); color: var(--m-hi); }
.gf-opts__body { display: grid; gap: 10px; width: 312px; padding: 12px; background: rgba(0, 0, 0, .92); border-color: var(--m-rule); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gf-opts__body[hidden] { display: none; }
.gf-opts__row { display: flex; gap: 6px; align-items: center; }
.gf-tog { justify-content: flex-start; flex: 1; background: rgba(8, 8, 7, .7); }
.gf-tog[aria-pressed="true"] { border-color: var(--m-tick); color: var(--m-hi); }
.gf-tog[aria-pressed="false"] { color: var(--m-mut); }
.gf-tog[aria-pressed="false"] .gf-sw, .gf-tog[aria-pressed="false"] .gf-plus { opacity: .4; }
.gf-sw { width: 22px; height: 8px; flex: none; }
.gf-sw--bins { background: linear-gradient(90deg, #4b4740 0 20%, #5f6ef5 20% 40%, #78a3ff 40% 60%, #a8d2ff 60% 80%, #e6f4fe 80%); }   /* the 2017 city, then the four bins (app/ring.js) */
.gf-plus { font: 400 17px/1 var(--mono); color: var(--m-mint); }
.gf-info { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--m-faint); background: rgba(0, 0, 0, .9); color: var(--m-ink-2); cursor: pointer;
  font: italic 600 13px/1 Georgia, "Times New Roman", serif; display: inline-grid; place-items: center; padding: 0; }
.gf-info:hover, .gf-info[aria-expanded="true"] { color: var(--m-hi); border-color: var(--m-ink-2); }
.gf-infobox { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--m-ink-2); max-width: 38ch; }
.gf-more { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--m-rule-2); }
.gf-more__row { display: flex; gap: 6px; align-items: center; }
.gf-more__row > .pm-hud { min-width: 70px; color: var(--m-ink-2); }
.gf-more__row .pm-seg button { padding: 0 8px; }
.gf-more .pm-seg { background: rgba(8, 8, 7, .6); }
.gf-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gf-more__grid .pm-btn { min-height: 34px; padding: 4px 8px; font-size: 11px; letter-spacing: .08em; white-space: normal; line-height: 1.2; justify-content: flex-start; text-align: left; }
#btn-dcs[aria-pressed="true"], #btn-stack[aria-pressed="true"], #btn-find[aria-pressed="true"] { border-color: var(--m-tick); color: var(--m-hi); }
.gf-hatch { width: 26px; height: 12px; flex: none; background: repeating-linear-gradient(45deg, var(--m-heat) 0 1.3px, transparent 1.3px 5px); }
[data-ground][aria-disabled="true"] { opacity: .45; }
.gf-opts__more, .gf-opts__story { justify-self: start; }
.gf-pick { display: grid; gap: 4px; }
.gf-pick .pm-hud { color: var(--m-ink-2); }
.gf-select { min-height: 32px; padding: 0 8px; background: rgba(0, 0, 0, .9); color: var(--m-ink); border: 1px solid var(--m-rule); font: 400 12px/1 var(--mono); max-width: 288px; }
.gf-select:focus-visible { outline: 1px solid var(--sig); }
.gf-reticle { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.gf-reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ figures, top-right (hand-over and Explore) */
.gf-figs { right: var(--gut); top: 84px; gap: 14px; justify-items: end; text-align: right; padding: 12px 14px 13px; background: rgba(0, 0, 0, .74); }
.gf-fig { display: grid; gap: 3px; justify-items: end; }
.gf-fig[hidden] { display: none; }
.gf-fig__n { margin: 0; font: 600 28px/1 var(--sans); letter-spacing: -.02em; color: var(--m-hi); font-variant-numeric: tabular-nums; }
.gf-fig__n small { font: 400 13px/1 var(--mono); letter-spacing: 0; color: var(--m-ink-2); margin-left: 5px; }
.gf-fig__l { margin: 0; font: 400 12px/1.35 var(--mono); color: var(--m-ink-2); max-width: 27ch; }
.gf-fig__l::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--m-ice); vertical-align: 1px; }
.gf-fig--proj .gf-fig__l::before { background: var(--m-heat); }
.gf-fig--site .gf-fig__l::before { background: var(--m-mint); }
.gf-fig__band { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: var(--m-tick); --rule: var(--m-rule-3); }
.gf-fig__band svg { width: 120px; height: 9px; display: block; }

/* ------------------------------------------------------------------ callouts (NEM Radar bracket style) and plates */
.gf-callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gf-leaders { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.gf-leaders path { transition: opacity .3s; }
.gf-co { position: absolute; left: 0; top: 0; max-width: 400px; padding: 7px 13px 9px 17px; background: rgba(0, 0, 0, .84); color: var(--m-ink);
  transition: opacity .35s var(--ease); will-change: transform; }
.gf-co[data-on="false"] { opacity: 0 !important; }
.gf-co::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 6px; border: 1.5px solid var(--c); border-right: 0; }
.gf-co__k { font: 400 11.5px/1.35 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.gf-co__v { margin-top: 2px; font: 600 17px/1.25 var(--sans); letter-spacing: -.01em; color: var(--m-hi); }
.gf-co__v small { font: 400 12.5px var(--mono); color: var(--m-ink-2); letter-spacing: 0; }
.gf-co__m { margin-top: 3px; font: 400 12.5px/1.4 var(--mono); color: var(--m-ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gf-co__count { font: 600 16px/1 var(--sans); color: var(--m-hi); font-variant-numeric: tabular-nums; }
.gf-co__band { display: inline-block; width: 128px; --rule: var(--m-rule-3); }
.gf-co__band svg { width: 100%; height: 10px; display: block; }
.gf-co--factor { padding-top: 5px; padding-bottom: 7px; }
.gf-co--factor .gf-co__v { font-size: 16px; }
.gf-co--explain { pointer-events: auto; max-width: 340px; padding-right: 64px; }
.gf-co__rows { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 6px; }
.gf-co__rows li { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 8px; align-items: baseline; font: 400 12.5px/1.35 var(--mono); color: var(--m-ink); }
.gf-co__rows i { width: 9px; height: 9px; background: var(--c); align-self: center; }
.gf-co__rows b { font-weight: 500; color: var(--m-hi); text-align: right; }
.gf-co__rows em { grid-column: 2 / 4; font-style: normal; font-size: 11.5px; color: var(--m-tick); }
.gf-co__foot { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--m-rule); font: 400 11.5px/1.5 var(--mono); color: var(--m-ink-2); max-width: 36ch; }
.gf-co__tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.gf-co__close { width: 26px; height: 26px; border: 1px solid var(--m-faint); background: rgba(0, 0, 0, .9); color: var(--m-ink-2); cursor: pointer; font: 400 16px/1 var(--mono); padding: 0; }
.gf-co__close:hover { color: var(--m-hi); border-color: var(--m-ink-2); }
.gf-plate { position: absolute; left: 0; top: 0; padding: 3px 7px 4px; background: var(--plate-bg); border: 1px solid rgba(236, 232, 224, .2);
  font: 400 12px/1.2 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); white-space: nowrap; pointer-events: none; }
.gf-plate--front { transition: opacity .35s; color: var(--m-hi); }

/* ------------------------------------------------------------------ the story strip, bottom-left */
.gf-strip { left: var(--gut); bottom: max(38px, calc(var(--gut) + 10px)); display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px;
  background: rgba(0, 0, 0, .92); border: 1px solid var(--m-rule); max-width: calc(100vw - 2 * var(--gut)); flex-wrap: wrap; }
.gf-strip::before { content: ""; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px; border: 1px solid var(--m-tick); border-right: 0; border-bottom: 0; }
.gf-strip__btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--m-rule-3); background: transparent; color: var(--m-ink); cursor: pointer;
  font: 400 14px/1 var(--mono); padding: 0; }
.gf-strip__btn:hover { border-color: var(--m-tick); color: var(--m-hi); }
.gf-strip__play { border-radius: 50%; border-color: var(--m-tick); color: var(--m-ink); }
.gf-strip__play svg { width: 12px; height: 12px; }
.gf-strip__play[data-state="pause"] .i-play, .gf-strip__play[data-state="play"] .i-pause { display: none; }
.gf-strip__nav { gap: 4px; }
.gf-strip__dots { list-style: none; margin: 0; padding: 0; gap: 2px; align-items: center; }
.gf-strip__dots button { width: 22px; height: 26px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gf-strip__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--m-tick); transition: background .25s, border-color .25s, width .25s; }
.gf-strip__dots button[data-state="done"]::before { background: var(--m-tick); }
.gf-strip__dots button[data-state="now"]::before { width: 18px; border-radius: 5px; background: var(--m-ink); border-color: var(--m-ink); }
.gf-strip__dots button:focus-visible { outline: 1px solid var(--sig); }
.gf-strip__year { font: 500 17px/1 var(--mono); color: var(--m-ice); font-variant-numeric: tabular-nums; min-width: 4ch; }
.gf-strip__year[data-proj="true"] { color: var(--m-heat); }
.gf-strip__year[data-proj="true"]::after { content: "\00a0proj."; font: 400 11px var(--hud); letter-spacing: .12em; color: var(--m-heat-ink); }
.gf-strip__kick { font: 400 11.5px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--m-ink-2); white-space: nowrap; }
.gf-strip__end { display: inline-flex; gap: 8px; align-items: center; margin-left: 4px; }
.gf-strip__cta { min-height: 32px; padding: 0 11px; }
.gf-strip__hint { align-items: center; gap: 7px; font: 400 12.5px/1.3 var(--mono); color: var(--m-ink); white-space: nowrap; }

/* ------------------------------------------------------------------ the recap: compact, directly beneath Layers */
.gf-recap { left: var(--gut); top: 132px; width: min(400px, 40vw); padding: 13px 16px 14px; background: rgba(0, 0, 0, .9); border: 1px solid var(--m-rule); }
.gf-recap::before, .gf-recap::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid var(--m-tick); pointer-events: none; }
.gf-recap::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.gf-recap::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.gf-recap__k { margin: 0; font: 400 12px/1.4 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--m-deep-ink); }
.gf-recap__list { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 8px; }
.gf-recap__list li, .gf-recap__client { opacity: 0; animation: gf-rise .6s var(--ease) forwards; }
.gf-recap__list li { display: grid; grid-template-columns: 20px 1fr; font: 500 15.5px/1.32 var(--sans); letter-spacing: -.01em; color: var(--m-hi); text-wrap: pretty; }
.gf-recap__n { font: 400 12px/1.9 var(--mono); color: var(--m-deep-ink); }
.gf-recap__client { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--m-rule-2); font: 400 12.5px/1.5 var(--mono); color: var(--m-ink); }
@keyframes gf-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ the intro: text first */
.gf-intro { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--scene); transition: opacity .6s var(--ease); cursor: default; }
.gf-intro[hidden] { display: none; }
.gf-intro[data-state="out"] { opacity: 0; pointer-events: none; }
.gf-intro__lines { display: grid; gap: 20px; width: min(1080px, calc(100vw - 2 * var(--gut))); }
.gf-intro__lines p { margin: 0; min-height: 1.35em; font: 400 clamp(17px, 1.8vw, 26px)/1.38 var(--mono); letter-spacing: -.01em; color: var(--m-ink); text-wrap: balance; }
.gf-intro__lines p:nth-child(3) { color: var(--m-hi); font-weight: 500; }
.gf-intro__lines p[data-state="typing"]::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--m-heat);
  animation: gf-blink .9s steps(1) infinite; }
@keyframes gf-blink { 50% { opacity: 0; } }
.gf-intro__foot { position: absolute; right: var(--gut); bottom: calc(var(--gut) + 6px); display: flex; gap: 10px; }
.gf-intro__skip { color: var(--m-ink-2); }
.gf-intro__load { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 14px); color: var(--m-faint); }

/* ------------------------------------------------------------------ the corner, bottom-right: one credit line, then the mark (round 6)
   It runs along the map's foot, below the strip and the dial; the map is dark, so the mark is never inverted. */
.gf-corner { right: var(--gut); bottom: 7px; display: flex; align-items: center; gap: 18px; pointer-events: none; }
.gf-corner > * { pointer-events: auto; }
.gf-attrib { margin: 0; padding: 2px 7px; background: rgba(0, 0, 0, .74); font: 400 11px/1.4 var(--mono); color: var(--m-tick); text-shadow: var(--halo); white-space: nowrap; }
.gf-attrib a { color: var(--m-ink-2); text-underline-offset: 2px; }
.gf-attrib a:hover { color: var(--m-hi); }
.gf-corner .pm-sig { flex: none; text-shadow: var(--halo); }
.gf-under { display: none; }

/* ------------------------------------------------------------------ Explore: the dial and the bins, bottom-left */
.gf-dock { left: var(--gut); bottom: max(42px, calc(var(--gut) + 14px)); align-items: flex-end; gap: 18px; }
.gf-ring { position: relative; width: 196px; height: 196px; flex: none; }
.gf-ring svg { width: 100%; height: 100%; overflow: visible; }
.gf-ring__centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 7px; pointer-events: none; }
.gf-ring__year { font-size: 19px; color: var(--m-ice); }
.gf-ring__play { pointer-events: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--m-tick); background: rgba(0, 0, 0, .6); color: var(--m-ink); padding: 0; }
.gf-ring__play:hover { background: rgba(236, 232, 224, .14); }
.gf-ring__play svg { width: 12px; height: 12px; }
.gf-ring .core { cursor: pointer; }
.gf-ring .core:focus-visible .coat { stroke-width: 4.5; }
.gf-ring .core:focus { outline: none; }
.gf-ring .lbl { font: 400 11px/1 var(--hud); letter-spacing: .04em; fill: var(--m-mut); }
.gf-ring .lbl.on { fill: var(--m-ink); }
.gf-ring .lbl.now { fill: var(--m-hi); }
.gf-legend { display: grid; gap: 8px; padding: 12px 14px; background: rgba(0, 0, 0, .8); border: 1px solid var(--m-rule-2); }
.gf-legend .pm-hud { color: var(--ink-2); text-shadow: var(--halo); }
.gf-ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 260px; }
.gf-ramp i { height: 7px; display: block; }
.gf-ramp span { font: 400 11px/1 var(--mono); color: var(--mut); text-align: center; padding-top: 5px; text-shadow: var(--halo); }

/* ------------------------------------------------------------------ side panels: brief, places like this */
.gf-side { right: var(--gut); top: 84px; width: min(380px, calc(100vw - 2 * var(--gut))); max-height: calc(100% - 84px - 96px); overflow: auto;
  background: rgba(0, 0, 0, .92); border-color: var(--m-rule); padding: 16px 18px 18px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gf-side__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gf-side__head .pm-kick { margin: 0; color: var(--m-deep-ink); }
.gf-side h3 { margin: 0 0 2px; font: 600 1.38rem/1.12 var(--sans); letter-spacing: -.02em; color: var(--m-hi); }
.gf-side .gf-sub { margin: 0 0 12px; font: 400 11.5px/1.4 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--m-mut); }
.gf-brief__text { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.62; color: var(--m-ink); }
.gf-brief__text b { font-weight: 600; color: var(--m-hi); font-variant-numeric: tabular-nums; }
.gf-rc { font: 400 11px/1 var(--mono); margin-left: 1px; }
.gf-rc a { color: var(--m-deep-ink); text-decoration: none; padding: 0 1px; border-bottom: 1px dotted var(--m-deep-ink); }
.gf-rc a:hover, .gf-rc a:focus-visible { color: var(--m-hi); }
.gf-receipts { margin: 12px 0 0; padding: 12px 0 0 18px; border-top: 1px solid var(--m-rule-2); display: grid; gap: 8px; font: 400 11.5px/1.55 var(--mono); color: var(--m-ink-2); }
.gf-receipts li:target { color: var(--m-hi); }
.gf-receipts a { color: var(--m-deep-ink); }
.gf-unreceipted { color: var(--m-heat); text-decoration-thickness: 1.5px; }
.gf-yb { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-items: end; height: 92px; }
.gf-yb__col { display: grid; justify-items: center; gap: 4px; }
.gf-yb__dots { display: flex; flex-direction: column-reverse; gap: 2px; align-items: center; }
.gf-yb__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: block; }
.gf-yb__col span { font: 400 11px/1 var(--mono); color: var(--m-mut); }
.gf-yb__cap { margin: 6px 0 0; font: 400 11px/1.4 var(--mono); color: var(--m-mut); }
.gf-mix { display: flex; height: 10px; gap: 2px; margin: 4px 0 6px; }
.gf-mix i { display: block; height: 100%; }
.gf-mixkey { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font: 400 11.5px/1.4 var(--mono); color: var(--m-ink-2); }
.gf-mixkey i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.gf-top5 { margin: 0; padding-left: 18px; font-size: .95rem; line-height: 1.6; color: var(--m-ink); }
.gf-top5 span { font: 400 11.5px/1 var(--mono); color: var(--m-mut); }
/* the tooltip belongs to the map */
.pm-tip { --glass: rgba(8, 8, 7, .86); --rule: var(--m-rule); --deep-ink: var(--m-deep-ink); color: var(--m-ink); }
.pm-tip b { font-weight: 500; color: var(--m-hi); }
.gf-tip__warn { display: block; margin-top: 4px; color: var(--m-amber); font-size: 11.5px; line-height: 1.45; }
.gf-tip__src { color: var(--m-mut); font-size: 11.5px; }

/* ------------------------------------------------------------------ drawers */
.gf-drawer-lede { margin: 0 0 6px; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.gf-drawer-h { margin: 26px 0 8px; font: 500 1rem/1.4 var(--sans); color: var(--hi); }
.gf-caveats { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: .94rem; line-height: 1.55; display: grid; gap: 6px; }
.gf-hash { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--mono); color: var(--mut); word-break: break-all; }
.pm-check[data-state="fail"] .pm-check__state { color: var(--bad); }
.pm-check__state { font-size: 11px; }               /* the kit's 10.5px is under the 11px floor (kit note sent to main) */
.pm-sources li.gf-flashrow { background: color-mix(in srgb, var(--deep) 16%, transparent); }

/* ------------------------------------------------------------------ loader (Explore): the fibre cross-section lighting core by core */
.gf-loader { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--scene); transition: opacity .7s var(--ease); }
.gf-loader[data-done="true"] { opacity: 0; pointer-events: none; }
.gf-loader__inner { display: grid; justify-items: center; gap: 16px; }
.gf-loader__ring svg { width: 96px; height: 96px; }
.gf-loader .pm-hud { color: var(--m-ink-2); }

/* ------------------------------------------------------------------ the story below the map: folded sections, chart, tiles */
.gf-story { position: relative; padding-bottom: 20px; }
.gf-story .pm-lede { margin-top: 18px; }
.gf-story .pm-title em { font-style: normal; font-weight: 300; color: var(--mut); }
.gf-story__p { max-width: 68ch; margin: 20px 0 0; color: var(--ink-2); line-height: 1.65; }
.gf-story__p a, .gf-cols a { color: var(--deep-ink); text-underline-offset: 3px; }
.gf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px 42px; margin-top: 18px; }
.gf-cols p { margin: 0; color: var(--ink-2); line-height: 1.65; max-width: 62ch; }
.gf-chart { margin: 34px 0 0; max-width: 760px; }
.gf-chart__title { font: 500 1rem/1.4 var(--sans); color: var(--hi); margin-bottom: 18px; }
.gf-chart__plot { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 6px; border-bottom: 1px solid var(--rule);
  min-height: calc(var(--rows) * 9px + 46px); padding-top: 10px; }
.gf-chart__col { display: grid; justify-items: center; align-content: end; gap: 0; height: 100%; outline: none; cursor: default; position: relative; padding: 0 4px; }
.gf-chart__col:focus-visible { outline: 1px solid var(--sig); outline-offset: 2px; }
.gf-chart__dots { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; transform: scaleY(-1); }
.gf-chart__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--deep); display: block; }
.gf-chart__col:hover .gf-chart__dots i, .gf-chart__col:focus .gf-chart__dots i { background: var(--deep-ink); }
.gf-chart__val { font: 400 12.5px/1 var(--mono); color: var(--ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.gf-chart__x { font: 400 12px/1 var(--mono); color: var(--mut); margin-top: 8px; position: absolute; bottom: -22px; }
.gf-chart__key { position: absolute; bottom: -32px; width: 16px; height: 3px; }
.gf-chart__note { margin: 44px 0 0; font: 400 12px/1.5 var(--mono); color: var(--mut); }
.gf-chart__table { margin-top: 10px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); }
.gf-chart__table summary { cursor: pointer; color: var(--deep-ink); }
.gf-chart__table table { border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.gf-chart__table th, .gf-chart__table td { padding: 4px 14px 4px 0; text-align: right; border-bottom: 1px solid var(--rule-2); font-weight: 400; }
.gf-chart__table th:first-child { text-align: left; }
.gf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; margin-top: 22px; }
.gf-tile { position: relative; display: grid; gap: 6px; padding: 16px; background: var(--plate); border: 1px solid var(--rule-2); }
.gf-tile::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border: 1px solid var(--tick); border-right: 0; border-bottom: 0; }
.gf-tile__state { justify-self: start; padding: 2px 7px; border: 1px solid currentColor; font: 400 11px/1.4 var(--hud); letter-spacing: .16em; text-transform: uppercase; }
.gf-tile[data-state="pass"] .gf-tile__state { color: var(--good); }
.gf-tile[data-state="caveat"] .gf-tile__state { color: var(--warn); }
.gf-tile[data-state="fail"] .gf-tile__state { color: var(--bad); }
.gf-tile[data-state="sealed"] .gf-tile__state { color: var(--seal); }
.gf-tile__value { font: 600 1.6rem/1.1 var(--sans); letter-spacing: -.02em; color: var(--hi); }
.gf-tile__label { font-size: .95rem; line-height: 1.4; color: var(--ink); }
.gf-tile__sub { font: 400 12px/1.4 var(--mono); color: var(--mut); }
.gf-hash--story { font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }
.gf-sec > summary { list-style: none; cursor: pointer; position: relative; padding-right: 40px; }
.gf-sec > summary::-webkit-details-marker { display: none; }
.gf-sec > summary::after { content: "+"; position: absolute; right: 0; bottom: 4px; font: 400 22px/1 var(--mono); color: var(--mut); }
.gf-sec[open] > summary::after { content: "−"; }
.gf-sec > summary .pm-title { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.gf-sec { padding-top: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--rule-2); padding-bottom: 18px; }

/* ------------------------------------------------------------------ narrow desktops: the mark keeps its symbol only; below 860 px
   the credit line wraps to two lines (never inside a credit), and the strip and the dial rise to clear it */
.gf-nb { white-space: nowrap; }
@media (max-width: 900px) and (min-width: 761px) {
  .gf-corner .pm-sig span { display: none; }
}
@media (max-width: 860px) and (min-width: 761px) {
  .gf-attrib { white-space: normal; text-align: right; max-width: calc(100vw - 2 * var(--gut) - 48px); }
  .gf-strip { bottom: 52px; }
  .gf-dock { bottom: 56px; }
}

/* ------------------------------------------------------------------ drawer: the credits, as each licence asks */
.gf-credits { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.gf-credits li { font: 400 12px/1.55 var(--mono); color: var(--ink-2); }
.gf-credits__lic { color: var(--mut); white-space: nowrap; }
.gf-credits__lic a { color: var(--ink-2); text-underline-offset: 3px; }
.gf-credits__note { margin: 8px 0 14px; font: 400 12px/1.55 var(--mono); color: var(--mut); }
/* C4 on phones: the earlier factors as muted rows in the area's card */
.gf-co__rows--muted li { opacity: .4; }

/* ------------------------------------------------------------------ phone */
.gf-phone-only { display: none; }
@media (max-width: 760px) {
  :root { --gut: 14px; }
  .gf-phone-only { display: initial; }
  .gf-top { padding: 12px 14px 0; gap: 8px; }
  .gf-brand { gap: 9px; align-items: flex-start; }
  .gf-brand__glyph { width: 28px; height: 28px; }
  .gf-brand h1 { font-size: 17px; }
  .gf-desc { position: absolute; left: 14px; right: 14px; top: 50px; font-size: 13px; max-width: none; }
  .gf-tools { gap: 6px; flex-wrap: nowrap; }
  .gf-tools .pm-btn { min-height: 32px; padding: 0 9px; font-size: 11px; letter-spacing: .12em; }
  .gf-opts { top: 94px; }
  .gf-opts__toggle { min-height: 32px; padding: 0 10px; font-size: 11px; }
  .gf-opts__body { width: calc(100vw - 28px); max-height: calc(100svh - 230px); overflow: auto; }
  .gf-corner { display: none; }
  /* phones: the mark sits in a bar directly under the map (the map gives up its height), the credit line below it */
  .gf-instrument { height: calc(100vh - var(--banner, 0px) - 38px); height: calc(100svh - var(--banner, 0px) - 38px); }
  .gf-under { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 14px; border-top: 1px solid var(--rule-2); background: var(--bg); }
  .gf-under__src { font: 400 11px/1 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
  .gf-attrib-story { display: block; margin: 0; padding: 4px 14px 0; }
  .gf-foot #sig { display: none; }                 /* the bar under the map carries the mark on phones */
  .gf-strip { left: 0; right: 0; bottom: 0; max-width: none; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); gap: 8px; border-width: 1px 0 0; }
  .gf-strip::before { display: none; }
  .gf-strip__kick, .gf-strip__nav { display: none !important; }
  .gf-desk { display: none; }
  .gf-cities { position: absolute; right: 14px; top: 94px; margin: 0; }
  .gf-cities button { min-height: 30px; padding: 0 8px; font-size: 11px; letter-spacing: .08em; }
  .gf-strip__year[data-proj="true"]::after { content: none; }
  .gf-strip { flex-wrap: nowrap; }
  .gf-strip__end { margin-left: auto; }
  html[data-stage="handover"] .gf-strip__end, html[data-stage="recap"] .gf-strip__end { flex: 1; justify-content: flex-end; }
  .gf-strip__hint { white-space: normal; font-size: 11.5px; }
  .gf-strip__cta { min-height: 32px; padding: 0 9px; font-size: 11px; letter-spacing: .1em; }
  .gf-co { max-width: calc(100vw - 28px); right: auto; }
  .gf-co__v { font-size: 15.5px; }
  .gf-co--explain { max-width: calc(100vw - 28px); }
  .gf-plate { font-size: 11px; }
  .gf-recap { top: 136px; bottom: auto; transform: none; left: 14px; right: 14px; width: auto; padding: 11px 13px 12px; }
  html[data-explain] .gf-figs { display: none !important; }
  .gf-recap__list li { font-size: 14px; grid-template-columns: 18px 1fr; }
  .gf-figs { top: auto; left: 0; right: 0; bottom: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: start; text-align: left; gap: 8px; padding: 8px 14px; }
  .gf-fig { justify-items: start; }
  .gf-fig__n { font-size: 18px; }
  .gf-fig__n small { font-size: 11px; margin-left: 3px; }
  .gf-fig__l { font-size: 11px; }
  .gf-fig__band { display: none; }
  html[data-stage="explore"] .gf-figs { bottom: 162px; }
  .gf-dock { left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .94); border-top: 1px solid var(--m-rule); align-items: center; gap: 12px; }
  .gf-ring { width: 128px; height: 128px; }
  .gf-ring .lbl { display: none; }
  .gf-ring__year { font-size: 13px; }
  .gf-legend { padding: 0; background: none; border: 0; }
  .gf-ramp { width: 100%; }
  .gf-side { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 64%; border-width: 1px 0 0; }
  .gf-side::before, .gf-side::after { display: none; }
  .gf-intro__lines p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-ring .spin { animation: none !important; }
  .gf-recap__list li, .gf-recap__client { animation: none; opacity: 1; }
  .gf-intro__lines p[data-state="typing"]::after { animation: none; }
}
html[data-motion="reduce"] .gf-recap__list li, html[data-motion="reduce"] .gf-recap__client { animation: none; opacity: 1; }