/*
 * world.css: /world-weather (the world weather globe). Ported from the prototype's two stylesheets (prototypes/weather-globe,
 * "Prototype 2") into one, on the site's own type (Manrope, through --v4-font) and in both themes: the light palette is the
 * prototype's, the dark one is drawn from the site's dark tokens (public/home-v4/chrome.css). The theme is the site's own
 * switch (data-theme on <html>, set by the chrome); with no switch (the classic header) the page is light.
 *
 * Every class starts ww- and every rule sits under .ww-body, so nothing here reaches the site header and none of the header's
 * rules are relied on. /public/styles.css is not loaded (its global button rules would restyle every control).
 * No text is smaller than 11px. Motion: only the globe moves; the page itself has no animation to reduce.
 */
.ww-body {
  --ww-bg: #e7eef6; --ww-panel: #f8fbff; --ww-card: #ffffff; --ww-line: rgba(23, 61, 104, .14); --ww-edge: #b7cce0;
  --ww-text: #143453; --ww-strong: #133657; --ww-muted: #52697f; --ww-faint: #5d7388;
  --ww-accent: #0672bd; --ww-accent-ink: #ffffff; --ww-link: #08639f;
  --ww-float: rgba(247, 251, 255, .96); --ww-float-ink: #2f5576; --ww-shadow: 0 3px 12px rgba(40, 74, 106, .12);
  --ww-stage: radial-gradient(ellipse at 49% 42%, #eff6fb 0%, #dce8f4 65%, #c8d9e9 100%);
  --ww-warm: #9a4322; --ww-warm-bg: #fff3df; --ww-warm-edge: #e5ba76;
  --ww-low: #cf4a3d; --ww-low-ink: #ffffff; --ww-badge: rgba(249, 252, 255, .96); --ww-badge-ink: #a63a2e;
  --ww-event-bg: #fff0d5; --ww-event-edge: #efcf91; --ww-event-ink: #5c3811; --ww-event-sub: #6f4d24;
  --ww-storm: #963525; --ww-storm-bg: #fef7f1; --ww-storm-edge: #ed947a; --ww-storm-sub: #6c5248;
  --ww-uk-ink: #1f4668; --ww-uk-bg: rgba(246, 252, 255, .96); --ww-uk-edge: #92b9d8;
  --ww-ocean-ink: #7a4620; --ww-ocean-bg: rgba(255, 249, 237, .96); --ww-ocean-edge: #c79e78;
  --ww-chart-warm: #cf7c40; --ww-chart-cool: #4f96c9; --ww-stale: #b3611a;
  --ww-backdrop: rgba(19, 45, 69, .45);
  color-scheme: light;
  margin: 0; min-height: 100dvh; background: var(--ww-bg); padding-bottom: 0 !important;   /* no phone tab bar here */
}
:root[data-theme=dark] .ww-body {
  --ww-bg: var(--v4-bg, #0a172e); --ww-panel: #0e2038; --ww-card: #142a48; --ww-line: rgba(255, 255, 255, .11); --ww-edge: #2c4668;
  --ww-text: #e3ebf8; --ww-strong: #f2f6fc; --ww-muted: #a9b9d0; --ww-faint: #9db0c9;
  --ww-accent: #31bbee; --ww-accent-ink: #06203a; --ww-link: #74d2f6;
  --ww-float: rgba(12, 32, 58, .93); --ww-float-ink: #d3e2f3; --ww-shadow: 0 3px 14px rgba(0, 0, 0, .4);
  --ww-stage: radial-gradient(ellipse at 50% 42%, #173c52 0, #0b2233 39%, #081a2a 68%);
  --ww-warm: #f7c58b; --ww-warm-bg: rgba(244, 189, 121, .11); --ww-warm-edge: rgba(244, 189, 121, .5);
  --ww-low: #e0584a; --ww-low-ink: #ffffff; --ww-badge: rgba(10, 34, 51, .92); --ww-badge-ink: #f6cfa5;
  --ww-event-bg: rgba(244, 189, 121, .13); --ww-event-edge: rgba(244, 189, 121, .42); --ww-event-ink: #f8dcb1; --ww-event-sub: #dcc29a;
  --ww-storm: #ffb9a2; --ww-storm-bg: rgba(52, 24, 19, .94); --ww-storm-edge: #c9684f; --ww-storm-sub: #e2c2b7;
  --ww-uk-ink: #baffef; --ww-uk-bg: rgba(11, 57, 70, .9); --ww-uk-edge: rgba(162, 238, 227, .6);
  --ww-ocean-ink: #ffdbb3; --ww-ocean-bg: rgba(10, 34, 51, .92); --ww-ocean-edge: rgba(236, 192, 138, .52);
  --ww-chart-warm: #e8ae7c; --ww-chart-cool: #75b2d9; --ww-stale: #f4bd79;
  --ww-backdrop: rgba(3, 12, 22, .78);
  color-scheme: dark;
}

.ww, .ww-time, .ww-about { font-family: var(--v4-font, Manrope, Arial, sans-serif); font-size: 14px; color: var(--ww-text); box-sizing: border-box; }
.ww *, .ww-time *, .ww-about * { box-sizing: border-box; }
.ww [hidden], .ww-time [hidden], .ww-about [hidden] { display: none !important; }
.ww button, .ww-time button, .ww-about button { font: inherit; color: inherit; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ww button:disabled, .ww-time button:disabled { opacity: .45; cursor: wait; }
.ww a, .ww-time a, .ww-about a { color: var(--ww-link); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ww a:hover, .ww-about a:hover { text-decoration: underline; }
.ww button:focus-visible, .ww a:focus-visible, .ww input:focus-visible, .ww-time button:focus-visible, .ww-time input:focus-visible,
.ww-about button:focus-visible, .ww-about a:focus-visible { outline: 2px solid var(--ww-accent); outline-offset: 3px; }
.ww h2, .ww h3, .ww p, .ww-about h2, .ww-about p, .ww-about dl { margin: 0; }
.ww-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── the page: the globe and its side panel fill what the header and the timeline leave ── */
.ww { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
@media (min-width: 761px) {
  .ww-body { height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .ww-body > * { flex: none; }
  .ww-body > .ww { flex: 1 0 560px; min-height: 0; }
}

/* ── the stage ── */
.ww-stage { position: relative; overflow: hidden; min-width: 0; min-height: 0; background: var(--ww-stage); }
.ww-host, .ww-markers { position: absolute; inset: 0; }
.ww-markers { pointer-events: none; }
#wwGlobe { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#wwGlobe:active { cursor: grabbing; }

.ww-status, .ww-views, .ww-opts, .ww-zoom, .ww-key { background: var(--ww-float); border: 1px solid var(--ww-edge); box-shadow: var(--ww-shadow); color: var(--ww-float-ink); }
.ww-status { position: absolute; z-index: 2; top: 16px; left: 18px; max-width: calc(100% - 82px); display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 6px; font-size: 12px; }
.ww-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ww-accent); }
.ww-status.is-stale .ww-dot { background: var(--ww-stale); }
.ww-views { position: absolute; z-index: 2; top: 62px; left: 18px; display: flex; padding: 4px; border-radius: 8px; }
.ww-views button { padding: 8px 14px; border-radius: 5px; font-size: 12px; color: var(--ww-float-ink); }
.ww-views button.is-on { background: var(--ww-accent); color: var(--ww-accent-ink); font-weight: 650; }
.ww-opts { position: absolute; z-index: 4; top: 110px; left: 18px; display: flex; gap: 14px; padding: 9px 11px; border-radius: 6px; font-size: 12px; }
.ww-opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ww-opts input { width: 15px; height: 15px; margin: 0; accent-color: var(--ww-accent); }
.ww-opts label:has(input:disabled) { opacity: .5; cursor: default; }
.ww-zoom { position: absolute; z-index: 2; top: 16px; right: 18px; display: grid; border-radius: 8px; overflow: hidden; }
.ww-zoom button { width: 38px; height: 38px; font-size: 20px; color: var(--ww-float-ink); }
.ww-zoom button + button { border-top: 1px solid var(--ww-edge); }
.ww-zoom #wwMotion { font-size: 14px; }
.ww-zoom button:focus-visible { outline-offset: -3px; }

.ww-key { position: absolute; left: 18px; bottom: 37px; width: 290px; padding: 12px 14px 10px; border-radius: 8px; pointer-events: none; }
.ww-key-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 12px; }
.ww-key-head strong { font-weight: 650; color: var(--ww-strong); }
.ww-key-ramp { height: 6px; border-radius: 3px; }
.ww-key-ticks { position: relative; height: 15px; margin-top: 5px; font-size: 11px; color: var(--ww-muted); }
.ww-key-ticks span { position: absolute; top: 0; }
.ww-key p { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--ww-muted); }
.ww-hint { position: absolute; left: 20px; bottom: 12px; font-size: 11px; color: var(--ww-faint); }
.ww-hint span { margin: 0 5px; }

.ww-rail { position: absolute; z-index: 3; right: 18px; bottom: 24px; max-width: calc(100% - 355px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ww .ww-chip { padding: 8px 12px; border: 1px solid var(--ww-storm-edge); border-radius: 6px; background: var(--ww-storm-bg); color: var(--ww-storm); font-size: 12px; box-shadow: var(--ww-shadow); }
.ww-chip span { margin-right: 5px; font-size: 16px; }

/* El Niño now: the card that comes with the ocean map (the switch, or the ocean layer) */
.ww-nino { position: absolute; z-index: 3; top: 146px; right: 18px; width: 252px; padding: 12px 14px 11px; border: 1px solid var(--ww-edge); border-radius: 9px;
           background: var(--ww-float); color: var(--ww-float-ink); box-shadow: var(--ww-shadow); font-size: 12px; }
.ww-nino-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ww-nino-head strong { font-size: 13px; font-weight: 700; color: var(--ww-strong); }
.ww-nino-head a { font-size: 11px; font-weight: 600; }
.ww-nino-value { margin-top: 4px; }
.ww-nino-value b { display: block; white-space: nowrap; font-size: 24px; font-weight: 650; letter-spacing: -.6px; line-height: 1.15; color: var(--ww-warm); }
.ww-nino-value span { display: block; font-size: 11px; line-height: 1.3; color: var(--ww-muted); }
#wwNinoGraph svg { display: block; width: 100%; height: 74px; margin-top: 6px; }
.ww-nino-zero { stroke: var(--ww-muted); stroke-width: 1; stroke-dasharray: 3 3; fill: none; opacity: .7; }
.ww-nino-area { fill: var(--ww-chart-warm); opacity: .22; }
.ww-nino-line { stroke: var(--ww-chart-warm); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ww-nino-dot { fill: var(--ww-warm); }
.ww-nino-axis { fill: var(--ww-muted); font-size: 11px; font-family: inherit; }
.ww-nino p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--ww-muted); }
.ww-nino-key { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; color: var(--ww-muted); }
.ww-nino-key i { flex: 1; height: 5px; border-radius: 3px; }

.ww-inspect { position: absolute; z-index: 6; right: 18px; bottom: 76px; width: 232px; padding: 15px 16px; border: 1px solid var(--ww-edge); border-radius: 9px;
              background: var(--ww-float); color: var(--ww-float-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); font-size: 12px; line-height: 1.8; }
.ww .ww-inspect button { float: right; margin: -6px -6px 0 6px; width: 28px; height: 28px; font-size: 20px; line-height: 1; }
.ww-inspect strong { display: block; color: var(--ww-accent); }
.ww-inspect dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 8px 0 0; }
.ww-inspect dt { color: var(--ww-muted); }
.ww-inspect dd { margin: 0; text-align: right; }
.ww-inspect p { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--ww-muted); }
.ww-error { position: absolute; z-index: 7; top: 35%; left: 15%; right: 15%; padding: 24px; border: 1px solid var(--ww-edge); border-radius: 10px; background: var(--ww-panel); line-height: 1.7; box-shadow: var(--ww-shadow); }

/* labels on the globe (app.js positions them) */
.ww .ww-marker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; white-space: nowrap; padding: 5px 8px; border-radius: 5px;
                 background: var(--ww-badge); color: var(--ww-badge-ink); font-size: 11px; font-weight: 600; box-shadow: 0 2px 8px rgba(8, 46, 91, .25); }
.ww-marker strong { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 5px; border-radius: 50%; background: var(--ww-low); color: var(--ww-low-ink); font-size: 14px; font-weight: 700; }
.ww .ww-marker.is-on { background: var(--ww-warm-bg); outline: 1px solid var(--ww-warm-edge); }
:root[data-theme=dark] .ww .ww-marker.is-on { background: #6a4426; }
.ww .ww-marker.is-uk { pointer-events: none; border: 1px solid var(--ww-uk-edge); background: var(--ww-uk-bg); color: var(--ww-uk-ink); }
.ww .ww-marker.is-pacific { pointer-events: none; border: 1px solid var(--ww-ocean-edge); background: var(--ww-ocean-bg); color: var(--ww-ocean-ink); }
.ww .ww-marker.is-named { padding: 6px 10px; border: 1px solid var(--ww-storm-edge); background: var(--ww-storm-bg); color: var(--ww-storm); box-shadow: 0 2px 13px rgba(27, 56, 86, .4); }
.ww-marker.is-named strong { width: auto; height: auto; background: none; color: inherit; font-size: 20px; vertical-align: middle; }
.ww-marker.is-named small { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--ww-storm-sub); }
.ww .ww-marker.is-named.is-on { outline: 2px solid var(--ww-storm-edge); }

/* ── the side panel ── */
.ww-side { min-height: 0; overflow-y: auto; padding: 24px 20px; background: var(--ww-panel); border-left: 1px solid var(--ww-edge); scrollbar-width: thin; }
.ww-side-title { margin-bottom: 20px; }
.ww-side-title h2 { font-size: 24px; font-weight: 750; letter-spacing: -.5px; color: var(--ww-strong); margin-bottom: 6px; }
.ww-side-title p { font-size: 12px; color: var(--ww-muted); }
.ww-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ww .ww-layers button { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--ww-edge); border-radius: 6px; background: var(--ww-card); color: var(--ww-float-ink); font-size: 12px; text-align: left; }
.ww-layers button span { font-size: 19px; line-height: 16px; color: var(--ww-faint); }
.ww .ww-layers button.is-on { border-color: var(--ww-accent); background: var(--ww-accent); color: var(--ww-accent-ink); font-weight: 650; }
.ww-layers button.is-on span { color: inherit; }
#wwLayerText { margin: 10px 0 18px; font-size: 12px; line-height: 1.55; color: var(--ww-muted); }
.ww .ww-layers-btn, .ww-sheet-head { display: none; }   /* a phone's Layers button and its sheet's heading: see the phone rules */
.ww-sec { padding-top: 17px; margin-bottom: 20px; border-top: 1px solid var(--ww-line); }
.ww-sec h3 { font-size: 14px; font-weight: 700; color: var(--ww-strong); margin-bottom: 12px; }
.ww-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ww-sec-head h3 { margin: 0; }
.ww-sec-head > span { font-size: 12px; color: var(--ww-muted); }
.ww-sec-intro { margin: 7px 0 14px; font-size: 12px; line-height: 1.5; color: var(--ww-muted); }
#wwOutlook, #wwNamed { font-size: 12px; line-height: 1.55; color: var(--ww-muted); }
.ww-empty { font-size: 12px; line-height: 1.6; color: var(--ww-muted); }
.ww-note { margin: 12px 0 0; font-size: 11px; line-height: 1.55; color: var(--ww-muted); }

.ww .ww-event { position: relative; display: block; width: 100%; margin-bottom: 7px; padding: 12px 34px 12px 12px; border: 1px solid var(--ww-event-edge); border-radius: 7px; background: var(--ww-event-bg); color: var(--ww-event-ink); text-align: left; }
.ww-event > strong { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; }
.ww-event > span { display: block; font-size: 12px; line-height: 1.5; }
.ww-event > small { display: block; margin-top: 4px; font-size: 11px; color: var(--ww-event-sub); }
.ww-event::after { content: '↗'; position: absolute; right: 12px; top: 11px; font-size: 16px; }

.ww .ww-named { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--ww-line); text-align: left; }
.ww-cyc { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--ww-storm-edge); border-radius: 50%; background: var(--ww-storm-bg); font-size: 20px; }
.ww-named-name { display: block; font-size: 13px; font-weight: 700; color: var(--ww-strong); }
.ww-named-kind { display: block; margin-top: 2px; font-size: 11px; color: var(--ww-muted); }
.ww-named-wind { margin-left: auto; font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--ww-storm); text-align: right; }
.ww-named-wind small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--ww-muted); }
.ww-named.is-on .ww-named-name { color: var(--ww-storm); }
.ww-named-detail { margin-top: 13px; padding: 12px; border: 1px solid var(--ww-edge); border-radius: 7px; background: var(--ww-card); font-size: 12px; line-height: 1.65; }
.ww-named-detail strong { color: var(--ww-strong); }
.ww-named-detail p { margin: 4px 0 8px; color: var(--ww-muted); }

.ww .ww-system { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px 11px; border: 1px solid var(--ww-edge); border-radius: 8px; background: var(--ww-card); text-align: left; }
.ww .ww-system.is-on { border-color: var(--ww-warm-edge); background: var(--ww-warm-bg); }
.ww-low-icon { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 50%; background: var(--ww-low); color: var(--ww-low-ink); font-size: 16px; font-weight: 700; }
.ww-system-main { flex: 1; min-width: 0; }
.ww-system-top { display: flex; justify-content: space-between; gap: 6px; }
.ww-system strong { font-size: 13px; font-weight: 600; color: var(--ww-strong); }
.ww-system b { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ww-warm); }
.ww-system small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--ww-muted); }
.ww-system-bottom { display: block; margin-top: 6px; font-size: 11px; color: var(--ww-muted); }
.ww-system-bottom .is-deepening { color: var(--ww-warm); font-weight: 600; }
.ww-selected { font-size: 12px; line-height: 1.6; color: var(--ww-muted); }
.ww-selected svg { display: block; width: 100%; height: 55px; margin: 10px 0; }
.ww-chart-axis { stroke: var(--ww-line); fill: none; }
.ww-chart-line { stroke: var(--ww-chart-warm); stroke-width: 2; fill: none; }
.ww-bar-warm { fill: var(--ww-chart-warm); }
.ww-bar-cool { fill: var(--ww-chart-cool); }

.ww .ww-climate-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 0; text-align: left; }
.ww-climate-head strong { font-size: 14px; font-weight: 650; color: var(--ww-strong); }
.ww-climate-head small { display: block; margin-top: 3px; font-size: 12px; color: var(--ww-muted); }
.ww-climate-head > span:last-child { margin-left: auto; color: var(--ww-chart-warm); }
.ww-climate-icon { font-size: 30px; line-height: 1; color: var(--ww-chart-warm); }
.ww-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 17px; }
.ww-metrics span { display: block; font-size: 11px; color: var(--ww-muted); }
.ww-metrics strong { display: block; margin: 5px 0; font-size: 26px; font-weight: 600; letter-spacing: -.8px; color: var(--ww-warm); }
.ww-metrics small { display: block; font-size: 11px; line-height: 1.45; color: var(--ww-muted); }
#wwEnsoChart { margin-top: 8px; }
#wwEnsoChart svg { display: block; width: 100%; height: 47px; }
.ww-climate p, .ww-why p { margin: 8px 0; font-size: 12px; line-height: 1.7; color: var(--ww-muted); }
.ww-climate a, .ww-why a { font-size: 12px; font-weight: 600; }
.ww-why a { display: block; }
.ww .ww-text-btn { margin-top: 12px; padding: 0; font-size: 12px; color: var(--ww-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ── the timeline ── */
.ww-time { display: flex; align-items: center; gap: 18px; height: 85px; padding: 0 22px; background: var(--ww-panel); border-top: 1px solid var(--ww-edge); }
.ww-time > #wwPlay { flex: none; width: 41px; height: 41px; border-radius: 50%; background: var(--ww-accent); color: var(--ww-accent-ink); font-size: 14px; }
.ww-now { min-width: 150px; }
.ww-now strong { display: block; font-size: 13px; font-weight: 650; color: var(--ww-strong); }
.ww-now span { display: block; margin-top: 5px; font-size: 11px; color: var(--ww-muted); }
.ww-track { flex: 1; min-width: 0; }
.ww-track input[type=range] { display: block; width: 100%; height: 4px; margin: 10px 0 12px; accent-color: var(--ww-accent); cursor: pointer; }
.ww-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ww-muted); }
.ww-run { width: 250px; padding-left: 20px; border-left: 1px solid var(--ww-line); font-size: 12px; }
.ww-run small { display: block; margin-top: 5px; font-size: 11px; color: var(--ww-muted); }
.ww-time .ww-link-btn { padding: 0; font-size: 11px; color: var(--ww-link); text-decoration: underline; text-underline-offset: 2px; }

/* ── data & sources ── */
.ww-about { width: calc(100% - 30px); max-width: 620px; max-height: 85dvh; padding: 30px; border: 1px solid var(--ww-edge); border-radius: 16px; background: var(--ww-panel); line-height: 1.65; }
.ww-about::backdrop { background: var(--ww-backdrop); }
.ww-about h2 { font-size: 22px; font-weight: 650; letter-spacing: -.5px; color: var(--ww-strong); margin-bottom: 10px; }
.ww-about p, .ww-about dd { font-size: 13px; color: var(--ww-muted); }
.ww-about dt { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--ww-strong); }
.ww-about dd { margin: 4px 0 0; }
.ww-about dl { margin-bottom: 16px; }
.ww-about .ww-about-close { float: right; width: 34px; height: 34px; margin: -10px -10px 0 8px; font-size: 25px; line-height: 1; color: var(--ww-muted); }
.ww-about-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0; font-size: 13px; font-weight: 600; }
.ww-about .ww-credits { padding-top: 16px; border-top: 1px solid var(--ww-line); font-size: 12px; }
.ww-noscript { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px; background: #132a3c; color: #eaf2f7; font: 14px/1.5 Manrope, Arial, sans-serif; }
.ww-noscript a { color: #84dcdb; }

@media (min-width: 1600px) { .ww { grid-template-columns: minmax(0, 1fr) 380px; } .ww-side { padding: 24px; } }
@media (max-width: 1100px) {
  .ww { grid-template-columns: minmax(0, 1fr) 330px; }
  .ww-side { padding: 20px 17px; }
  .ww-rail { max-width: calc(100% - 40px); bottom: 150px; }
  .ww .ww-chip { padding: 7px 9px; }
  .ww-key { width: 250px; }
  .ww-run { width: 210px; }
  .ww-views button { padding: 8px 10px; }
}

/* ── a phone: the globe, then the panel under it; the timeline stays at the foot of the screen ── */
@media (max-width: 760px) {
  .ww { display: flex; flex-direction: column; }
  .ww-stage { height: calc(82dvh - 58px); min-height: 510px; }
  .ww-side { overflow: visible; padding: 22px 18px 150px; border-left: 0; border-top: 1px solid var(--ww-edge); }
  .ww-side-title { margin-bottom: 18px; }
  .ww-layers { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .ww .ww-layers button { flex-direction: column; gap: 6px; padding: 10px 3px; font-size: 11px; text-align: center; line-height: 1.2; }
  .ww-status { top: 12px; left: 12px; max-width: calc(100% - 70px); padding: 7px 9px; font-size: 11px; }
  .ww-views { top: 52px; left: 12px; }
  .ww-views button { padding: 7px 9px; font-size: 12px; }
  /* The layer picker is a sheet over the foot of the screen, opened by the Layers button (10 Oct 2026): under the globe it was
     a scroll away from what it changes. The three switches (.ww-opts) are moved into the sheet by app.js, so they are not
     drawn on the globe here, before or after that move, and the button has their old place under the view buttons: the foot
     of the stage is behind the timeline on a short phone, the top never is. The sheet is over the timeline (z-index 10) */
  .ww-stage > .ww-opts { display: none; }
  .ww .ww-layers-btn { position: absolute; z-index: 4; top: 98px; left: 12px; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px;
                       border: 1px solid var(--ww-edge); border-radius: 8px; background: var(--ww-float); color: var(--ww-float-ink); box-shadow: var(--ww-shadow); font-size: 13px; font-weight: 650; }
  .ww-layers-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .ww .ww-layers-btn[aria-expanded=true] { border-color: var(--ww-accent); background: var(--ww-accent); color: var(--ww-accent-ink); }
  .ww-sheet { display: none; }
  .ww-sheet.is-open { display: block; position: fixed; z-index: 12; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
                      border-top: 1px solid var(--ww-edge); border-radius: 14px 14px 0 0; background: var(--ww-panel); box-shadow: 0 -10px 40px rgba(6, 20, 32, .3); }
  .ww-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .ww-sheet-head strong { font-size: 15px; font-weight: 700; color: var(--ww-strong); }
  .ww .ww-sheet-head button { width: 36px; height: 36px; margin: -6px -8px -6px 0; font-size: 24px; line-height: 1; color: var(--ww-muted); }
  .ww-sheet .ww-opts { position: static; flex-wrap: wrap; gap: 2px 20px; margin-top: 12px; padding: 8px 2px 0; border: 0; border-top: 1px solid var(--ww-line); border-radius: 0;
                       background: none; box-shadow: none; font-size: 13px; }
  .ww-sheet .ww-opts label { min-height: 36px; }
  .ww-sheet .ww-opts input { width: 18px; height: 18px; }
  #wwLayerText { margin-top: 0; }
  .ww-nino { top: 176px; right: 12px; width: 178px; padding: 9px 10px; }
  .ww-nino p, .ww-nino-key { display: none; }
  .ww-nino-value b { font-size: 20px; }
  #wwNinoGraph svg { height: 54px; }
  .ww-zoom { top: 52px; right: 12px; }
  .ww-key { left: 12px; bottom: 62px; width: 228px; padding: 10px 12px 9px; }
  .ww-key p { display: none; }
  .ww-hint { display: none; }
  .ww-rail { left: 12px; right: 12px; bottom: 14px; max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .ww .ww-chip { flex: none; padding: 7px 9px; }
  .ww-chip span { font-size: 14px; }
  .ww .ww-marker.is-named { padding: 4px 7px; }
  .ww-marker.is-named small { display: none; }
  .ww-marker.is-named strong { font-size: 17px; }
  .ww-inspect { right: 12px; bottom: 150px; width: 216px; }
  .ww-error { top: 28%; left: 6%; right: 6%; }
  .ww-sec h3 { font-size: 15px; }
  .ww-named-name { font-size: 14px; }
  .ww-time { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; height: auto; display: grid; grid-template-columns: 38px 1fr; gap: 6px 12px; align-items: center;
             padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(6, 20, 32, .3); }
  .ww-time > #wwPlay { width: 38px; height: 38px; }
  .ww-now { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
  .ww-now span { margin-top: 0; }
  .ww-track { grid-column: 1 / 3; }
  .ww-track input[type=range] { margin: 6px 0 8px; }
  .ww-run { grid-column: 1 / 3; width: auto; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 11px; }
  .ww-run small { margin-top: 0; }
  .ww-about { padding: 22px 18px; }
}