/* =====================================================================================================
   WEERWOLF design system — Carbon's structure, Liquid Glass's material.
   Carbon gives: the 8-px (2x) grid and spacing scale, the type scale, colour roles and layering, component
   patterns, interaction states, focus rules and motion timing. Liquid Glass gives: translucent layers with a
   specular edge, concentric rounded shapes, and fluid spring motion. See Design/design-system.md.
   ===================================================================================================== */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/open-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/open-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* spacing — Carbon $spacing-01…10 */
  --s1: 2px; --s2: 4px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  /* colour roles — Carbon Gray 100 theme, tuned to sit on a living sky */
  --background: #0b0e14; --text-primary: #ffffff; --text-secondary: #ffffff; --text-helper: rgba(255,255,255,.86); --text-inverse: #161616;
  --border-subtle: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.55); --focus: #ffffff; --interactive: #78a9ff;
  --support-success: #42be65; --support-warning: #f1c21b; --support-error: #fa4d56; --support-info: #4589ff;
  --data-temp: rgb(255,131,43); --data-rain: rgb(120,169,255); --data-wind: rgb(61,219,217);
  /* names the timeline canvas reads */
  --ink: rgb(255,255,255); --dim: rgb(232,236,244); --warm: rgb(255,131,43); --rain: rgb(120,169,255); --line: rgba(255,255,255,.14);
  /* type */
  --font: "Open Sans", -apple-system, BLinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* shape — concentric radii: a child's radius = parent's radius − the padding between them */
  --r-sheet: 32px; --r-card: 26px; --r-control: 14px; --r-pill: 999px;
  /* motion — Carbon durations and curves, plus one spring for the liquid settle */
  --fast-01: 70ms; --fast-02: 110ms; --moderate-01: 150ms; --moderate-02: 240ms; --slow-01: 400ms; --slow-02: 700ms;
  --ease-standard: cubic-bezier(.2,0,.38,.9); --ease-entrance: cubic-bezier(0,0,.38,.9); --ease-exit: cubic-bezier(.2,0,1,.9); --ease-expressive: cubic-bezier(.4,.14,.3,1); --spring: cubic-bezier(.2,1.3,.35,1);
  --ease: cubic-bezier(.4,.14,.3,1);
  /* material — layers of glass, like Carbon's layer-01/02 */
  --glass-01: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); --glass-02: linear-gradient(180deg, rgba(34,40,56,.80), rgba(18,22,34,.86)); --glass-hover: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.07));
  --glass-blur: blur(6px) saturate(1.4); --glass-blur-02: blur(28px) saturate(1.5);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -12px 20px -14px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.55);
}

/* ---- base ------------------------------------------------------------------------------------------ */
[hidden] { display: none !important; }                                        /* hidden means hidden, whatever layout a component uses */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--background); color: var(--text-primary); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
b, strong { font-weight: 600; }
:focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }           /* Carbon focus: always 2 px, always visible */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ci { flex: 0 0 auto; display: block; }
#app { position: relative; max-width: 640px; margin: 0 auto; min-height: 100vh; padding: 0 var(--s5) calc(var(--s7) + env(safe-area-inset-bottom)); }   /* Carbon small breakpoint: 16 px margins */

/* ---- the sky and the weather layers ------------------------------------------------------------------ */
.scene { position: absolute; inset: 0 0 auto 0; height: min(68vh, 600px); overflow: hidden; z-index: 0; }
@media (min-width: 672px) { .scene { border-radius: 0 0 var(--r-sheet) var(--r-sheet); } }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* a scrim keeps text at Carbon's 4.5:1 contrast even over a bright noon sky; it is strongest where the text sits */
.scene-fade { position: absolute; inset: 0; background: radial-gradient(120% 70% at 72% 30%, rgba(11,14,20,.30), transparent 70%), linear-gradient(180deg, rgba(11,14,20,.50) 0%, rgba(11,14,20,.30) 26%, rgba(11,14,20,.36) 52%, rgba(11,14,20,.82) 82%, var(--background) 100%); }
#fx, #fxBack { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; } #fx { z-index: 30; } #fxBack { z-index: 0; }
.scene, #fx, #fxBack { opacity: 0; transition: opacity 1.4s var(--ease-entrance); } #app.lit .scene, #app.lit #fx, #app.lit #fxBack { opacity: 1; }   /* never a made-up sky */
.top, .cols, .hero, .cap, .alert, .ask, .score, .news, .plan, .mq, .nowcast, .days, .tl-card, .foot { position: relative; z-index: 1; }

/* ---- material: glass ------------------------------------------------------------------------------- */
.glass, .nowcast, .tl-card, .day, .mq { background: var(--glass-01); border: 1.5px solid var(--border-strong); border-radius: var(--r-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
.glass { position: relative; overflow: hidden; }
.glass::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 49%, rgba(255,255,255,.04) 53%, transparent 60%); transform: translateX(-70%); opacity: 0; pointer-events: none; }
.glass.sheen::after { animation: sheen var(--slow-02) var(--ease-expressive); }                         /* a band of light crosses the glass when its content updates */
@keyframes sheen { 0% { transform: translateX(-70%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
button.glass, .day, .chip2, .note, .row, .me, .seg button, .primary, .more, .chip { transition: transform var(--moderate-02) var(--spring), background var(--moderate-01) var(--ease-standard), border-color var(--moderate-01) var(--ease-standard), color var(--moderate-01) var(--ease-standard), opacity var(--moderate-01); }
button.glass:hover, .day:hover { background: var(--glass-hover); }
button.glass:active, .day:active, .chip2:active, .note:active, .row:active, .me:active, .primary:active, .more:active, .chip:active { transform: scale(.965); transition-duration: var(--fast-02); }   /* press in fast, spring back slow */

/* ---- header ------------------------------------------------------------------------------------------ */
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding-top: calc(var(--s5) + env(safe-area-inset-top)); }
.place { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1 1 auto; white-space: nowrap; font-weight: 700; font-size: clamp(28px, 8.4vw, 52px); line-height: 1.05; letter-spacing: -.045em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.45); border-radius: var(--r-control); }
.place span:first-child { white-space: nowrap; } .chev { display: grid; place-items: center; transition: transform var(--moderate-02) var(--spring); } .place:active .chev { transform: translateY(3px); }
.tools { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.me { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,16,26,.38); border: 1px solid var(--border-subtle); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.seg { display: inline-flex; padding: var(--s1); border-radius: var(--r-pill); background: rgba(12,16,26,.38); border: 1px solid var(--border-subtle); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }   /* Carbon content switcher, in glass */
.seg button { min-width: 34px; height: 30px; padding: 0 var(--s3); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-helper); } .seg button.on { background: var(--text-primary); color: var(--text-inverse); }

/* ---- hero: NU, the temperature, what it means ------------------------------------------------------ */
.hero { padding-top: var(--s7); text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 22px rgba(0,0,0,.55); }
.nu { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; min-height: 34px; }
.nu > b { font-weight: 700; font-size: clamp(22px, 6vw, 40px); line-height: 1.1; letter-spacing: -.04em; text-transform: uppercase; }
.nu span { font-size: 13px; font-weight: 400; color: var(--text-secondary); letter-spacing: -.01em; } .nu span b { font-weight: 600; color: var(--text-primary); }
.hero-grid { --big: clamp(100px, 31vw, 220px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s6); margin-top: var(--s4); }
.big { display: flex; align-items: flex-start; font-weight: 700; font-size: var(--big); line-height: .74; padding-bottom: .04em; letter-spacing: -.07em; font-variant-numeric: tabular-nums; margin-left: -.04em; }
.big #bigTemp { position: relative; display: inline-block; min-width: .55em; } .big .deg { font-size: .62em; line-height: 1; margin: .02em 0 0 .02em; letter-spacing: 0; }
.r-out, .r-in { display: inline-block; } .r-out { position: absolute; left: 0; top: 0; animation: roll-out var(--slow-01) var(--ease-exit) forwards; } .r-in { animation: roll-in 600ms var(--spring) both; }
@keyframes roll-out { to { transform: translateY(-.28em) scale(.96); opacity: 0; filter: blur(10px); } } @keyframes roll-in { from { transform: translateY(.3em) scale(.96); opacity: 0; filter: blur(12px); } }
.side { min-width: 0; display: grid; gap: var(--s4); justify-items: start; padding-top: 2px; }   /* first row sits level with the top of the numerals */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); font-size: clamp(14px, 3.9vw, 19px); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; color: var(--text-primary); }
.facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: center; white-space: nowrap; animation: settle 560ms var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
.facts.still li { animation: fade var(--moderate-02) var(--ease-entrance) both; animation-delay: 0ms; } .facts .ci { opacity: 1; } .facts li > span { overflow: hidden; text-overflow: ellipsis; } .facts .tail { display: none; } .facts li.tight .short { display: none; } @media (min-width: 560px) { .facts .tail { display: inline; } .facts .short { display: none; } } .facts b { font-weight: 600; }
@keyframes settle { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(6px); } } @keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.range { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); max-height: 0; opacity: 0; overflow: hidden; transition: all var(--slow-01) var(--ease-expressive); } .range.on { max-height: 40px; opacity: 1; }
.more { height: 28px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-shadow: none; }
.nums { margin-top: var(--s4); font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; line-height: 1.5; animation: settle var(--slow-01) var(--spring); }

/* ---- section headings ------------------------------------------------------------------------------ */
h2.cap { margin: var(--s9) 0 var(--s4); font-size: clamp(13.5px, 3.6vw, 24px); line-height: 1.2; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
h2.cap:has(+ [hidden]) { display: none; }                                   /* a section that is not shown does not announce itself */

/* ---- NIEUWS: two updates at a time ----------------------------------------------------------------- */
.news { padding: var(--s5) var(--s6) var(--s4); height: 132px; transition: height var(--slow-01) var(--ease-expressive); cursor: pointer; }
.news ul:not(.sr) { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.news li { position: relative; padding-left: var(--s6); font-size: clamp(17px, 4.9vw, 30px); line-height: 1.22; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; animation: settle 640ms var(--spring) both; animation-delay: calc(var(--i, 0) * 110ms); }
.news li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.news li .ci { position: absolute; left: -2px; top: .18em; } .news li.change::before, .news li.stale::before { display: none; } .news .leaving li { animation: lift var(--moderate-02) var(--ease-exit) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes lift { to { opacity: 0; transform: translateY(-10px) scale(.985); filter: blur(7px); } }
.news-foot { position: absolute; left: var(--s6); right: var(--s6); bottom: var(--s4); display: flex; align-items: center; gap: var(--s4); height: 8px; }
.news-dots { display: flex; gap: var(--s2); } .news-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.28); transition: all var(--slow-01) var(--spring); } .news-dots i.on { width: 18px; background: var(--text-primary); }
.news-bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; } .news-bar i { display: block; height: 100%; width: 0; background: rgba(255,255,255,.7); } @keyframes fill { to { width: 100%; } }
.news.paused .news-bar i { animation-play-state: paused !important; }

/* ---- PLANNING: one wide glass tile at a time, the same box as the news ----------------------------- */
.plan { padding: var(--s5) var(--s6) var(--s7); min-height: 150px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.plan-stage { display: grid; perspective: 900px; perspective-origin: 50% 50%; margin: calc(var(--s4) * -1) 0; padding: var(--s4) 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }   /* cards fade as they pass the top and bottom */
.rolo { grid-area: 1 / 1; transform-origin: 50% 50% -150px; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; }   /* the drum's axle sits 150 px behind the card */
.rolo.in-up { animation: rolo-in-up 780ms var(--ease-expressive) both; } .rolo.out-up { animation: rolo-out-up 780ms var(--ease-expressive) both; } .rolo.in-down { animation: rolo-in-down 780ms var(--ease-expressive) both; } .rolo.out-down { animation: rolo-out-down 780ms var(--ease-expressive) both; }
@keyframes rolo-out-up { to { transform: rotateX(78deg); opacity: 0; filter: blur(3px); } } @keyframes rolo-in-up { from { transform: rotateX(-78deg); opacity: 0; filter: blur(3px); } 70% { opacity: 1; filter: none; } 85% { transform: rotateX(3deg); } }
@keyframes rolo-out-down { to { transform: rotateX(-78deg); opacity: 0; filter: blur(3px); } } @keyframes rolo-in-down { from { transform: rotateX(78deg); opacity: 0; filter: blur(3px); } 70% { opacity: 1; filter: none; } 85% { transform: rotateX(-3deg); } }
.pcard { display: grid; gap: var(--s2); }
.ph { display: flex; align-items: center; gap: var(--s4); font-size: clamp(17px, 4.6vw, 24px); letter-spacing: -.03em; min-width: 0; } .ph b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk { margin-left: auto; display: grid; } .good .mk { color: var(--support-success); } .ok .mk { color: var(--support-warning); } .bad .mk { color: var(--support-error); }
.pv { font-size: clamp(30px, 9vw, 52px); font-weight: 700; letter-spacing: -.05em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: var(--s3); } .ps { font-size: clamp(14px, 3.9vw, 18px); line-height: 1.35; letter-spacing: -.02em; } .ps b { font-weight: 600; }
.pcard.add .pv { display: none; } .pcard.add .ps { margin-top: var(--s3); }

/* ---- micro-question -------------------------------------------------------------------------------- */
.mq { margin-top: 0; padding: var(--s5); } .mq p { margin: 0 0 var(--s4); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }

/* ---- radar strip ----------------------------------------------------------------------------------- */
.nowcast, .tl-card { margin-top: 0; } .nowcast { padding: var(--s5); }
.label { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary); margin-bottom: var(--s4); text-transform: uppercase; }
.bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 48px; }
.bars i { display: block; border-radius: 3px 3px 1px 1px; background: var(--data-rain); min-height: 2px; transform-origin: bottom; animation: grow var(--slow-02) var(--spring) backwards; } .bars i.dry { background: rgba(255,255,255,.12); } @keyframes grow { from { transform: scaleY(0); } }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-helper); margin-top: var(--s3); font-variant-numeric: tabular-nums; }

/* ---- days ------------------------------------------------------------------------------------------ */
.days { display: flex; gap: var(--s3); overflow-x: auto; margin: 0 calc(var(--s5) * -1) 0; padding: 0 var(--s5) var(--s2); scrollbar-width: none; scroll-snap-type: x proximity; } .days::-webkit-scrollbar { display: none; }
.day { flex: 0 0 auto; width: 68px; padding: var(--s4) 0 var(--s3); border-radius: 20px; border-width: 1px; border-color: var(--border-subtle); text-align: center; scroll-snap-align: start; }
.day.on { background: var(--glass-hover); border-color: var(--border-strong); } .day.far { opacity: .7; }
.day .n { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; } .day .hi { font-size: 18px; font-weight: 700; letter-spacing: -.03em; margin-top: var(--s2); font-variant-numeric: tabular-nums; } .day .lo { font-size: 12.5px; color: var(--text-helper); font-variant-numeric: tabular-nums; }
.day .wet { height: 18px; margin: var(--s3) var(--s4) 0; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; } .day .wet i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--data-rain); } .day .wet i.maybe { opacity: .32; }

/* ---- timeline -------------------------------------------------------------------------------------- */
.tl-card { padding: var(--s4) 0 var(--s4); position: relative; overflow: hidden; }
.tl-head { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--s5) var(--s3); min-height: 32px; font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--text-secondary); }
.chip { height: 28px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--text-primary); color: var(--text-inverse); font-size: 12px; font-weight: 700; text-transform: none; }
.tl { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; } .tl::-webkit-scrollbar { display: none; } .tl canvas { position: sticky; left: 0; top: 0; display: block; width: 100%; } .tl-spacer { height: 1px; margin-top: -1px; }
.playhead { position: absolute; left: 50%; top: 58px; bottom: 50px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #fff 12%, #fff 88%, transparent); border-radius: 2px; pointer-events: none; box-shadow: 0 0 12px rgba(255,255,255,.55); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s3) var(--s5) 0; font-size: 11px; color: var(--text-helper); } .legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---- footer ---------------------------------------------------------------------------------------- */
.foot { margin-top: 0; font-size: 12px; color: var(--text-helper); line-height: 1.5; } .foot .fine { margin-top: var(--s3); font-size: 10.5px; opacity: .8; }

/* ---- controls: buttons, tags, inputs, lists (Carbon patterns) -------------------------------------- */
.primary { height: 48px; padding: 0 var(--s6); border-radius: var(--r-pill); background: var(--text-primary); color: var(--text-inverse); font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin-left: auto; }   /* inverse primary: reads on any sky */
.ghost { height: 48px; padding: 0 var(--s3); border-radius: var(--r-control); color: var(--text-secondary); font-weight: 600; font-size: 14px; } .ghost:hover { color: var(--text-primary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s3); } .chips.col { flex-direction: column; } .chips.small { gap: var(--s2); margin-top: var(--s3); }
.chip2 { padding: 10px var(--s5); border-radius: var(--r-control); background: rgba(255,255,255,.07); border: 1px solid var(--border-subtle); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; text-align: left; }   /* Carbon selectable tag */
.chips.small .chip2 { padding: 7px var(--s4); font-size: 13px; border-radius: 11px; } .chip2 small { display: block; font-weight: 400; color: var(--text-helper); margin-top: 2px; font-size: 12.5px; } .chip2:hover { background: rgba(255,255,255,.12); }
.chip2.on { background: var(--text-primary); color: var(--text-inverse); border-color: var(--text-primary); } .chip2.on small { color: rgba(22,22,22,.66); }
input[type=search], input[type=time], textarea { font: inherit; font-size: 16px; color: var(--text-primary); background: rgba(255,255,255,.07); border: 1px solid var(--border-subtle); border-bottom-color: var(--border-strong); border-radius: var(--r-control); padding: var(--s4) var(--s5); width: 100%; color-scheme: dark; transition: border-color var(--fast-02), background var(--fast-02); }
input[type=time] { width: auto; padding: 6px var(--s3); font-size: 15px; } textarea { resize: vertical; } input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: rgba(255,255,255,.1); } ::placeholder { color: var(--text-helper); }
.row { display: flex; align-items: center; width: 100%; text-align: left; padding: var(--s4) var(--s5); border-radius: var(--r-control); background: rgba(255,255,255,.06); font-size: 15px; font-weight: 600; margin-top: var(--s2); } .row:hover { background: rgba(255,255,255,.12); } .row small { color: var(--text-helper); margin-left: var(--s3); font-weight: 400; } .ico { margin-right: var(--s4); opacity: .9; }

/* ---- sheets and dialogs: glass layer 02 ------------------------------------------------------------ */
dialog { border: 0; padding: 0; background: transparent; color: var(--text-primary); width: min(540px, 92vw); } dialog::backdrop { background: rgba(5,8,14,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dlg { position: relative; display: grid; gap: var(--s4); padding: var(--s6); border-radius: var(--r-sheet); background: var(--glass-02); border: 1px solid var(--border-subtle); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 30px 80px -20px rgba(0,0,0,.7); backdrop-filter: var(--glass-blur-02); -webkit-backdrop-filter: var(--glass-blur-02); animation: settle var(--slow-01) var(--spring); }
.dlg h2 { margin: 0 var(--s7) var(--s2) 0; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; } .close { position: absolute; right: var(--s4); top: var(--s4); width: 40px; height: 40px; border-radius: 50%; font-size: 22px; color: var(--text-secondary); }
.ob { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, rgba(8,11,18,0) 0%, rgba(8,11,18,.22) 35%, rgba(8,11,18,.86) 100%); opacity: 0; transition: opacity var(--slow-01) var(--ease-entrance); } .ob.in { opacity: 1; }
.ob-sheet { width: min(640px, 100%); max-height: 86vh; overflow-y: auto; padding: var(--s6) var(--s6) calc(var(--s6) + env(safe-area-inset-bottom)); background: var(--glass-02); border: 1px solid var(--border-subtle); border-bottom: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); backdrop-filter: var(--glass-blur-02); -webkit-backdrop-filter: var(--glass-blur-02); transform: translateY(28px) scale(.985); opacity: 0; transition: transform 520ms var(--spring), opacity var(--moderate-02) var(--ease-entrance); } .ob-sheet.show { transform: none; opacity: 1; }
.ob-dots { display: flex; gap: var(--s2); margin-bottom: var(--s5); } .ob-dots i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); transition: background var(--slow-01) var(--ease-standard); } .ob-dots i.on, .ob-dots i.was { background: var(--text-primary); } .ob-dots i.was { opacity: .55; }   /* Carbon progress indicator, as one line */
.ob h1 { margin: 0 0 var(--s3); font-size: clamp(26px, 7vw, 36px); line-height: 1.08; letter-spacing: -.045em; font-weight: 700; text-transform: uppercase; text-wrap: balance; } .ob-text { margin: 0 0 var(--s5); font-size: 15px; line-height: 1.5; color: var(--text-secondary); } .ob-text em { font-style: normal; color: var(--text-primary); font-weight: 600; }
.ob-body { display: grid; gap: var(--s3); } .ob-line { padding: var(--s4) 0; border-top: 1px solid var(--border-subtle); font-size: 14px; } .ob-line:first-child { border-top: 0; } .ob-line span { display: block; margin-top: var(--s3); color: var(--text-secondary); } .ob-ex { margin: var(--s2) 0 0; font-size: 13.5px; color: var(--text-secondary); } .ob-ex b { color: var(--text-primary); }
.notes { display: grid; gap: var(--s3); } .note { display: flex; gap: var(--s4); align-items: flex-start; text-align: left; padding: var(--s4); border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--border-subtle); } .note b { font-size: 14.5px; } .note p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-helper); }
.tick { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); margin-top: 1px; display: grid; place-items: center; transition: all var(--moderate-02) var(--spring); } .note.on { background: rgba(255,255,255,.13); border-color: var(--border-strong); } .note.on .tick { background: var(--text-primary); border-color: var(--text-primary); transform: scale(1.08); } .note.on .tick::after { content: "✓"; color: var(--text-inverse); font-size: 12px; font-weight: 800; }
.ob-nav, .know-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s5); }
.beliefs { display: grid; } .belief { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--border-subtle); } .belief:first-child { border-top: 0; } .belief small { display: block; color: var(--text-helper); font-size: 12px; margin-bottom: 2px; } .belief b { font-size: 15px; letter-spacing: -.01em; }   /* Carbon structured list */
.belief .chip { background: rgba(255,255,255,.12); color: var(--text-primary); font-weight: 600; } .miss { display: grid; gap: var(--s3); margin-top: var(--s3); font-size: 15px; }

/* ---- toast notification (Carbon): accent on the leading edge --------------------------------------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--s6) + env(safe-area-inset-bottom)); transform: translate(-50%, 24px) scale(.98); width: min(560px, calc(100vw - 32px)); padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 3px); border-radius: 18px; background: var(--glass-02); border: 1px solid var(--border-subtle); box-shadow: inset 3px 0 0 var(--support-info), 0 20px 50px -18px rgba(0,0,0,.7); backdrop-filter: var(--glass-blur-02); -webkit-backdrop-filter: var(--glass-blur-02); font-size: 14px; line-height: 1.4; font-weight: 600; z-index: 60; opacity: 0; pointer-events: none; transition: transform 520ms var(--spring), opacity var(--moderate-02); } .toast.on { opacity: 1; transform: translate(-50%, 0); }

#app[data-state="loading"] .hero, #app[data-state="loading"] .news { opacity: .55; transition: opacity var(--moderate-02); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; } .news { height: auto !important; padding-bottom: var(--s5); } .news-foot { display: none; } }

.dlg .seg { background: rgba(255,255,255,.08); flex: 0 0 auto; }

/* ---- warning banner: Carbon inline notification, in glass --------------------------------------------- */
.alert { padding: var(--s5) var(--s6); display: grid; gap: var(--s3); border-left-width: 6px; } .alert.yellow { border-left-color: var(--support-warning); } .alert.orange { border-left-color: #ff832b; } .alert.red { border-left-color: var(--support-error); }
.al { display: grid; grid-template-columns: 24px 1fr; gap: var(--s4); align-items: start; font-size: clamp(15px, 4.2vw, 20px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; } .alert.yellow .ci { color: var(--support-warning); } .alert.orange .ci { color: #ff832b; } .alert.red .ci { color: var(--support-error); }
/* ---- ask and pin --------------------------------------------------------------------------------------- */
.ask { padding: var(--s5); display: grid; gap: var(--s4); } #askForm { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); } #askForm input { font: inherit; font-size: 16px; color: var(--text-primary); background: rgba(255,255,255,.08); border: 1px solid var(--border-subtle); border-bottom-color: var(--border-strong); border-radius: var(--r-control); padding: 0 var(--s5); height: 48px; min-width: 0; } #askForm input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.primary .ci { display: inline-block; vertical-align: -3px; margin-right: 4px; } .hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-helper); }
.ans { display: grid; gap: var(--s3); padding-top: var(--s2); animation: settle 600ms var(--spring) both; } .ans-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; } .ans-h b { font-size: 19px; font-weight: 700; letter-spacing: -.03em; } .ans-h span { font-size: 13px; }
.ans p { margin: 0; font-size: 15.5px; line-height: 1.45; letter-spacing: -.01em; } .ans-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s2); }
.pin { display: grid; grid-template-columns: 22px 1fr 32px; gap: var(--s4); align-items: start; padding: var(--s4) 0; border-top: 1px solid var(--border-subtle); cursor: pointer; animation: settle 560ms var(--spring) both; } .pin b { font-weight: 600; letter-spacing: -.02em; } .pin span { font-size: 12.5px; margin-left: var(--s3); } .pin .mk { margin: 2px 0 0; } .pin p { margin: 2px 0 0; font-size: 13.5px; } .pin p .ci { display: inline-block; vertical-align: -2px; }
.pin .x { width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; } .pin .x:hover { background: rgba(255,255,255,.12); }
/* ---- scorecard ----------------------------------------------------------------------------------------- */
.score { padding: var(--s5) var(--s6); display: grid; gap: var(--s4); } .score p { margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: -.01em; } .score .lead { font-size: clamp(16px, 4.4vw, 21px); font-weight: 400; line-height: 1.35; letter-spacing: -.02em; } .score .lead b, .score p b { font-weight: 700; }
.bars2 { display: grid; gap: var(--s4); } .b2 { display: grid; grid-template-columns: 1fr 44px 52px; grid-template-areas: "n n n" "t p m"; gap: 2px var(--s4); align-items: center; font-size: 13px; } .b2 span { grid-area: n; font-weight: 600; } .b2 b { grid-area: p; text-align: right; font-variant-numeric: tabular-nums; } .b2 small { grid-area: m; font-size: 12px; font-variant-numeric: tabular-nums; }
.track { grid-area: t; position: relative; height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); } .track i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: #fff; transform-origin: left; animation: growx var(--slow-02) var(--spring) both; } .track em { position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; background: var(--support-success); border-radius: 2px; } @keyframes growx { from { transform: scaleX(0); } }

.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- wide screens: the sky becomes the whole backdrop, the glass sits on it in two columns ------------------ */
@media (min-width: 1120px) {
  #app { max-width: 1280px; padding: 0 var(--s8) var(--s10); }
  .scene { position: fixed; inset: 0; height: 100vh; border-radius: 0; }
  .scene-fade { background: radial-gradient(90% 70% at 30% 35%, rgba(11,14,20,.34), transparent 70%), linear-gradient(180deg, rgba(11,14,20,.46) 0%, rgba(11,14,20,.30) 40%, rgba(11,14,20,.52) 100%); }
  .top { padding-top: var(--s7); } .place { font-size: 52px; }
  .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s9); align-items: start; }
  .col-a { position: sticky; top: var(--s5); }                                  /* now, news and planning stay in view while you explore the timeline */
  .col-b > h2.cap:first-child, .col-b > h2.cap[hidden] + h2.cap { margin-top: var(--s7); }
  .hero-grid { --big: clamp(130px, 11.5vw, 190px); gap: var(--s6); } .nu > b, h2.cap { font-size: 15px; } .nu > b { font-size: 30px; } .facts { font-size: clamp(16px, 1.35vw, 19px); gap: var(--s4); } .facts li { grid-template-columns: 24px minmax(0, 1fr); white-space: normal; }
  .news li { font-size: 25px; } .news { padding: var(--s6) var(--s7) var(--s5); } .news-foot { left: var(--s7); right: var(--s7); } .pv { font-size: 40px; } .ph { font-size: 21px; } .ps { font-size: 16px; } .plan { padding: var(--s6) var(--s7) var(--s8); }
  .days { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: var(--s3); } .day { width: calc((100% - 7 * var(--s3)) / 8); } .day .n { font-size: 10px; letter-spacing: 0; }
  .tl { cursor: grab; } .tl.dragging { cursor: grabbing; user-select: none; }
  .ob { align-items: center; } .ob-sheet { border-radius: var(--r-sheet); border-bottom: 1px solid var(--border-subtle); max-height: 90vh; }
  .glass, .nowcast, .tl-card, .day, .mq { backdrop-filter: blur(9px) saturate(1.4); -webkit-backdrop-filter: blur(9px) saturate(1.4); }
}
@media (min-width: 672px) and (max-width: 1119px) { #app { max-width: 720px; } .facts li { white-space: normal; } }
@media (max-height: 760px) and (min-width: 1120px) { .col-a { position: static; } }