/* uvindex.au "fluid" hero — living-sky dot field. Spacing grid 4/8. Gold #ffd27a, labels #dde6ed. */
:root{--gold:#ffd27a;--lab:#dde6ed;
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --spring-soft:cubic-bezier(.2,1.2,.3,1);--serif:"Instrument Serif",ui-serif,Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.fx{position:relative;margin:16px 0 24px;view-transition-name:fx;--day:.85}
.fx-stage{position:relative;height:clamp(320px,62vh,620px);overflow:hidden;isolation:isolate;outline-offset:4px}
.fx-sky{position:absolute;inset:-10% 0;z-index:-1;transition:filter 1.2s}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .fx-sky{animation:fx-par linear both;animation-timeline:view()}
  @keyframes fx-par{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
  .page-home .city{animation:fx-up linear both;animation-timeline:view()}
  @keyframes fx-up{from{opacity:.2;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}}}
.fx-svg{position:absolute;inset:0;width:100%;height:100%}
.fx-land{stroke-width:1.2;vector-effect:non-scaling-stroke}
.fx-ssr-dots circle{stroke-width:2}
.fx-on .fx-svg{opacity:0}
.fx-c{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto}
.fx-hud{position:absolute;left:16px;top:16px;pointer-events:none;color:var(--white)}
.fx-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.05}
.fx-when{margin-top:8px;display:flex;gap:8px;align-items:center;font:600 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--white)}
.fx-kind{display:inline-flex;align-items:center;height:24px;padding:0 10px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.fx-kind.is-live{color:var(--on-gold)}
.fx-kind.is-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#b0301e;margin-right:6px}
.fx-kind.is-recorded{background:rgba(6,28,48,.7);color:var(--lab)}
.fx-kind.is-forecast{color:#0a2236;background:repeating-linear-gradient(135deg,var(--white) 0 4px,#d7ecfa 4px 8px)}
@keyframes fx-pulse{50%{opacity:.35}}
.fx-max{margin-top:8px;font:500 .8125rem/1.3 var(--sans);color:var(--white)}
.fx-tools{position:absolute;right:12px;top:12px;display:flex;gap:8px}
.fx-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;cursor:pointer;
  font:600 .875rem/1 var(--sans);color:#0a2236;background:rgba(255,255,255,.82);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4)}
.fx-btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(120,80,0,.25),0 6px 16px -8px rgba(80,50,0,.6)}
.fx-legend{position:absolute;left:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 24px)}
.fx-legend button{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;
  font:600 .75rem/1 var(--sans);color:var(--lab)}
.fx-legend button[aria-pressed=true]{color:var(--on-gold)}
.fx-legend i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.fx-tip{position:absolute;left:0;top:0;pointer-events:none;padding:6px 10px;border-radius:10px;background:rgba(6,24,40,.9);color:var(--lab);font:500 .8125rem/1.3 var(--sans);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);white-space:nowrap}
.fx-tip b{color:var(--white);margin-right:4px}.fx-tip small{display:block;color:var(--steel-2)}
.fx-full{position:absolute;right:12px;bottom:12px;font:600 .8125rem/1 var(--sans);color:var(--white);background:rgba(6,24,40,.6);padding:8px 12px;border-radius:999px;text-decoration:none}
html.js .fx-full{display:none}
.fx-rail{position:relative;padding:0 4px}
.fx-track{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.08);margin:0 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.fx-past{position:absolute;left:0;top:0;bottom:0;border-radius:999px 0 0 999px;background:rgba(221,230,237,.35)}
.fx-fc{position:absolute;right:0;top:0;bottom:0;border-radius:0 999px 999px 0;background:repeating-linear-gradient(135deg,rgba(221,230,237,.32) 0 3px,transparent 3px 7px)}
.fx-now{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.fx-days{position:absolute;left:0;right:0;top:14px;height:14px}
.fx-days b{position:absolute;font:600 .6875rem/1 var(--sans);color:var(--steel-2);border-left:1px solid rgba(221,230,237,.3);padding-left:4px;transform:none}
.fx-rail input[type=range]{position:absolute;left:4px;right:4px;top:-8px;width:calc(100% - 8px);height:26px;margin:0;appearance:none;-webkit-appearance:none;background:none;cursor:grab}
.fx-rail input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--white);border:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15),0 0 0 4px rgba(255,210,122,.35),0 2px 8px rgba(0,0,0,.4)}
.fx-rail input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--white);border:0;box-shadow:0 0 0 4px rgba(255,210,122,.35),0 2px 8px rgba(0,0,0,.4)}
.fx-rail-b{display:flex;gap:8px;align-items:center;margin-top:24px;flex-wrap:wrap}
.fx-snap{appearance:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:var(--well);color:var(--lab);font:600 .8125rem/1 var(--sans);cursor:pointer}
.fx-snap[aria-pressed=true]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.fx-src{margin-left:auto;font-size:.75rem;color:var(--steel-2)}.fx-src a{padding:0!important}
.fx-panel{position:absolute;z-index:5;right:12px;top:60px;width:min(360px,calc(100% - 24px));max-height:calc(100% - 72px);overflow:auto;padding:16px;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);color:var(--lab);font:500 .875rem/1.4 var(--sans)}
.fx-ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--white)}
.fx-x{appearance:none;border:0;background:none;color:var(--lab);font-size:1.5rem;width:40px;height:40px;cursor:pointer}
.fx-row{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(221,230,237,.08)}
.fx-lab{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--steel-2)}.fx-lab b{color:var(--gold)}
.fx-seg{display:flex;flex-wrap:wrap;gap:4px}
.fx-seg button{appearance:none;border:0;height:32px;padding:0 10px;background:rgba(255,255,255,.07);color:var(--lab);font:600 .8125rem/1 var(--sans);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fx-seg button[aria-pressed=true]{color:var(--on-gold)}
.fx-chk{display:flex;flex-wrap:wrap;gap:4px 12px}.fx-chk label{display:inline-flex;gap:6px;align-items:center;min-height:32px}
.fx-panel input[type=range]{width:100%;accent-color:var(--gold)}
.fx-panel select{width:100%;height:36px;border-radius:10px;border:1px solid rgba(221,230,237,.2);background:var(--well);color:var(--lab);font:inherit}
.fx-pins{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.fx-pin{display:inline-flex;align-items:center;gap:2px;height:28px;padding-left:10px;border-radius:999px;background:rgba(255,210,122,.15);font-size:.8125rem}
.fx-pin a{color:var(--gold);padding:0!important;text-decoration:none}.fx-pin button{appearance:none;border:0;background:none;color:var(--lab);width:28px;height:28px;cursor:pointer}
.fx-acts{grid-template-columns:repeat(2,1fr)}.fx-acts .fx-btn{height:36px;justify-content:center;font-size:.8125rem}
.fx-msg{min-height:1.2em;color:var(--gold);font-size:.8125rem}
/* expanded: map takes the screen, the rest of the page reflows */
body.fx-open .fx-stage{height:min(82vh,82svh);border-radius:20px}
@media (min-width:1000px){
  body.fx-open main.wrap{--wrap-max:none;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:24px;align-items:start;padding:0 24px}
  body.fx-open main.wrap>*{grid-column:2;min-width:0}
  body.fx-open main.wrap>.fx{grid-column:1;grid-row:1/span 40;position:sticky;top:8px;margin:8px 0}
  body.fx-open .fx-stage{height:calc(100vh - 110px)}
  body.fx-open .intro{margin-top:16px}
  body.fx-open .grid{grid-template-columns:1fr!important}
  body.fx-open .now-card{view-transition-name:fxnow}
}
body.fx-embed .site-head,body.fx-embed main>:not(.fx),body.fx-embed footer{display:none!important}
body.fx-embed main.wrap{display:block;max-width:none;padding:8px}
body.fx-embed .fx{position:static;margin:0}body.fx-embed .fx-stage{height:calc(100vh - 90px)}body.fx-embed #fx-expand{display:none}
@media (max-width:600px){
  .fx-stage{height:clamp(340px,64vh,520px);border-radius:20px}
  .fx-btn span{display:none}.fx-btn{width:40px;padding:0;justify-content:center}
  .fx-panel{position:absolute;left:8px;right:8px;top:56px;width:auto;max-height:calc(100% - 64px);overscroll-behavior:contain}
  .fx-legend button{height:24px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  .fx-stage,.fx-btn,.fx-snap,.fx-seg button,.fx-legend button,.fx-rail input::-webkit-slider-thumb{transition:none!important}
  .fx-kind.is-live::before{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* r2: HUD on a dark-glass plate so text stays ≥ 4.5:1 on the brightest sky */
.fx-hud{padding:12px 16px;-webkit-backdrop-filter:blur(8px);text-shadow:none;max-width:calc(100% - 140px)}
.fx-conf{margin-top:4px;font:500 .75rem/1.3 var(--sans);color:var(--lab)}
.fx-conf:empty{display:none}
.fx-card{position:absolute;z-index:4;right:12px;bottom:56px;width:min(340px,calc(100% - 24px));padding:12px 16px 16px;color:var(--lab);font:500 .8125rem/1.4 var(--sans);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
@keyframes fx-pop{from{opacity:0;transform:translateY(12px) scale(.94)}}
.fc-h{display:flex;align-items:center;gap:6px;color:var(--white);font-size:.9375rem}.fc-h .fx-x{margin-left:auto;width:32px;height:32px}
.fc-vs{color:var(--steel-2);font-size:.75rem}.fc-b{color:var(--link)}
.fc-sub{color:var(--steel-2);font-size:.75rem;margin-bottom:4px}
.fc-svg{display:block;width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision}
.fc-ticks line{stroke:rgba(221,230,237,.1)}.fc-ticks text{fill:var(--steel-2);font:600 9px var(--sans);text-anchor:middle}
.fc-safe{stroke:rgba(61,214,140,.75);stroke-dasharray:3 3}
.fc-rec{fill:rgba(221,230,237,.28)}.fc-fc{fill:url(#fch)}.fc-band{fill:rgba(255,210,122,.14)}
.fc-la{fill:none;stroke:var(--white);stroke-width:2;stroke-linejoin:round}.fc-lb{fill:none;stroke:var(--link);stroke-width:2;stroke-dasharray:4 3}
.fc-now{stroke:var(--gold);stroke-width:2}.fc-sel{stroke:rgba(255,255,255,.5);stroke-dasharray:2 2}.fc-pk{fill:var(--gold)}
.fc-k{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em}
.fc-k span{display:inline-flex;align-items:center;gap:4px}.fc-k span::before{content:"";width:10px;height:8px;border-radius:2px}
.k-rec::before{background:rgba(221,230,237,.5)}.k-live::before{background:var(--gold);width:3px!important}.k-fc::before{background:repeating-linear-gradient(135deg,rgba(221,230,237,.6) 0 2px,transparent 2px 4px)}.k-cf{color:var(--gold)}.k-cf::before{display:none}
.fc-read{color:var(--white)}.fc-read b{color:var(--gold)}
.fc-sl{display:grid;gap:4px;margin-top:8px;font-size:.75rem;color:var(--steel-2)}.fc-sl b{color:var(--low)}.fc-sl input{width:100%;accent-color:var(--low)}
.fc-acts{display:flex;gap:8px;margin-top:8px}.fc-open{text-decoration:none;display:inline-flex;align-items:center;padding:0 12px!important}
.fc-note{margin-top:8px;font-size:.6875rem;color:var(--steel-2);line-height:1.35}
@media (max-width:600px){.fx-card{left:8px;right:8px;bottom:8px;width:auto;max-height:calc(100% - 150px);overflow:auto;overscroll-behavior:contain}.fx-hud{max-width:calc(100% - 160px);padding:8px 12px}.fx-title{font-size:1.375rem}.fx-stage{z-index:2}}
/* v2: mobile bottom sheet for the day card */
.sh-grip{display:none}
.fx-card.fx-sheet{position:fixed;z-index:60;left:0;right:0;bottom:0;top:auto;width:auto;max-height:none;margin:0;padding:4px 16px calc(16px + env(safe-area-inset-bottom));overflow:hidden auto;overscroll-behavior:contain;font-family:var(--sans)}
@keyframes fx-sheet-in{from{transform:translateY(100%)}}
.fx-sheet .sh-grip{display:flex;justify-content:center;align-items:center;width:100%;height:28px;border:0;background:none;cursor:grab;touch-action:none;padding:0}
.fx-sheet .sh-grip i{width:40px;height:5px;border-radius:3px}
.fx-sheet .sh-grip:focus-visible i{background:var(--gold)}
.fx-sheet[data-snap=peek] .fc-sub,.fx-sheet[data-snap=peek] .fc-note{display:none}
.fx-sheet .fc-read{margin-bottom:8px}
body.fx-has-sheet .fx-legend{display:none}
.fc-now-b{stroke:var(--gold);stroke-dasharray:3 2;opacity:.8}
@media (prefers-reduced-motion:reduce){.fx-card.fx-sheet{transition:none;animation:none}}
.fc-read b.fc-b{color:var(--link)}

.fx-land{stroke:none}.fx-coast{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1;vector-effect:non-scaling-stroke}
.fx-ssr-dots circle{stroke:none}
.fx-on .fx-coast{opacity:0}
/* ---- polish: one-dot model, legend counts, rail sparkline, luminance elevation ---- */
.fx-title{letter-spacing:-.01em}
.fx-max,.fx-selst,.fx-conf{font-variant-numeric:tabular-nums}
.fx-selst{margin:4px 0 0;font-size:.8125rem;color:var(--lab);min-height:1.2em}.fx-selst b{color:var(--white);font-weight:650;margin-right:4px}
.fx-legend button{gap:8px}
.fx-legend em{font-style:normal;font-variant-numeric:tabular-nums;font-size:.6875rem;color:var(--lab);opacity:.85;min-width:2.5ch;text-align:right}
.fx-legend button[aria-pressed=true] em{color:var(--on-gold)}
.fx-rail{margin-top:44px}
.fx-spark{position:absolute;left:0;right:0;bottom:12px;width:100%;height:32px;pointer-events:none}
.fx-spark .fx-uvc{fill:url(#fx-sg);opacity:.42}
.fx-spark .fx-sun{fill:none;stroke:var(--sun-gold);stroke-width:1.2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.7}
.fc-nowr{display:flex;align-items:center;gap:8px;margin:8px 0}
.fc-uv{font:600 1.75rem/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:12px;color:#06121e;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.fc-bandn{color:var(--lab);font-weight:600}
.fc-acts{flex-wrap:wrap}

/* ===== r8 motion (2026-10-18): shared tokens, no overshoot, calmer loops ===== */
:root{--spring:linear(0,.042 4%,.136 8%,.25 12%,.367 16%,.477 20%,.596 25%,.694 30%,.785 36%,.86 43%,.911 50%,.955 60%,.982 72%,.995 86%,1);--spring-soft:var(--ease-out)}
/* expand animates only the map (and the now card); the rest of the page re-flows without a page-wide cross-fade */
:root{view-transition-name:none}
@property --day{syntax:"<number>";inherits:true;initial-value:.85} /* sky follows the hour smoothly instead of jumping */
.fx-stage{transition:height var(--m-slow) var(--ease),border-radius var(--m-slow) var(--ease)}
.fx-kind.is-live::before{animation:fx-pulse 2.4s ease-in-out infinite}
.fx-btn{transition:transform var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease)}
.fx-btn:hover{transform:translateY(-1px)}.fx-btn:active{transform:scale(.97);transition-duration:var(--m-fast)}
.fx-legend button{transition:transform var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
.fx-legend button:hover{transform:translateY(-1px)}
.fx-rail input::-webkit-slider-thumb{transition:transform var(--m-fast) var(--ease)}
.fx-rail input:active::-webkit-slider-thumb{transform:scale(1.15)}
.fx-snap,.fx-seg button{transition:transform var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
.fx-snap:active,.fx-seg button:active{transform:scale(.96)}
.fx-panel,.fx-card{animation:fx-pop var(--m-base) var(--ease-out)}
@keyframes fx-pop{from{opacity:0;transform:translateY(8px)}}
.fx-card.fx-sheet{transition:height var(--m-slow) var(--ease);animation:fx-sheet-in var(--m-slow) var(--ease-out)}
::view-transition-group(fx),::view-transition-group(fxpanel),::view-transition-group(fxnow){animation-duration:var(--m-slow);animation-timing-function:var(--ease)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--m-base);animation-timing-function:var(--ease)}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .page-home .city{animation-range:entry 0% entry 35%}
  @keyframes fx-up{from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:none}}}}
@media (prefers-reduced-motion:reduce){.fx{transition:none}.fx-panel,.fx-card{animation:none}}

/* ===== r9 polish (2026-10-19): map sky with depth; tokens from site.css =====
   --day (0.3..1) and --fxdusk come from fluid.js sky(): the sun over central Australia at the hour the map shows,
   so the sky can never disagree with the dots. --fxsunx puts the bloom east in the morning, west in the evening. */
@property --fxdusk{syntax:"<number>";inherits:true;initial-value:0}
.fx{--fxdusk:0;--fxsunx:70%} /* no --day/--fxdusk transition here any more: it restyled the whole hero subtree every frame; the sky layers crossfade instead */
.fx-sky-l{background:
    radial-gradient(18% 22% at var(--fxsunx) 4%,rgba(255,244,214,calc(var(--day)*.42 + var(--fxdusk)*.2)),transparent 72%),
    radial-gradient(62% 52% at var(--fxsunx) 0%,rgba(255,226,170,calc(var(--day)*.30 + var(--fxdusk)*.28)),transparent 70%),
    linear-gradient(0deg,rgba(240,150,96,calc(var(--fxdusk)*.38)) 0%,rgba(240,150,96,0) 46%),
    linear-gradient(180deg,#1c6fc0 0%,#4f9fe0 46%,#a8d6f4 100%)}
@supports (color:color-mix(in oklab,red,blue)){
  .fx-sky-l{background:
    radial-gradient(18% 22% at var(--fxsunx) 4%,rgba(255,244,214,calc(var(--day)*.42 + var(--fxdusk)*.2)),transparent 72%),
    radial-gradient(62% 52% at var(--fxsunx) 0%,rgba(255,226,170,calc(var(--day)*.30 + var(--fxdusk)*.28)),transparent 70%),
    linear-gradient(0deg,rgba(240,150,96,calc(var(--fxdusk)*.38)) 0%,rgba(240,150,96,0) 46%),
    linear-gradient(180deg,
      color-mix(in oklab,color-mix(in oklab,#155fae calc(var(--day)*100%),#050f26),#2a2f6a calc(var(--fxdusk)*60%)) 0%,
      color-mix(in oklab,color-mix(in oklab,#3f8fd6 calc(var(--day)*100%),#0b2546),#5a4f86 calc(var(--fxdusk)*55%)) 48%,
      color-mix(in oklab,color-mix(in oklab,#b2dcf6 calc(var(--day)*100%),#173b5e),#e9a27e calc(var(--fxdusk)*60%)) 100%)}}
/* perf: the gradient is painted on two .fx-sky-l layers that hold explicit per-hour values (set by fluid.js sky())
   and crossfade on the compositor, instead of a registered-property transition repainting the whole sky every frame
   (that held playback at ~40 fps with 60-110 ms long tasks). Without JS the layers inherit the .fx values as before. */
.fx-sky-l{position:absolute;inset:0;transition:opacity var(--m-slow) var(--ease)}
/* cirrus + grain inside the stage, baked into each crossfade layer (static per layer: no animated full-area grain layer) */
.fx-sky-l>i{position:absolute;inset:0;pointer-events:none;opacity:calc((var(--day) - .3)*1.2 + var(--fxdusk)*.5)} /* one group opacity over grain + cirrus, as before */
.fx-sky-l>i::before,.fx-sky-l>i::after{content:"";position:absolute;inset:0}
.fx-sky-l>i::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background:image-set(url("/assets/img/fx-grain-1x.webp") 1x,url("/assets/img/fx-grain-2x.webp") 2x)} /* grain: pre-rasterised from the SVG (pixel-identical tiles); an feTurbulence image is re-filtered on the CPU on every repaint */
.fx-sky-l>i::after{background:radial-gradient(30% 3.2% at 18% 16%,rgba(255,255,255,.22),transparent 70%),
    radial-gradient(40% 4% at 64% 9%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(24% 2.4% at 84% 26%,rgba(255,255,255,.14),transparent 70%),
    radial-gradient(34% 3% at 40% 30%,rgba(255,255,255,.10),transparent 70%)} /* cirrus, over the grain (was one multi-layer background: grain + gradients in one box hit a slow raster path) */
.fx-stage{border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(170,214,245,.16),var(--sh3)}
.fx-land{fill:rgba(5,24,44,.34)}
/* glass-free HUD and panels: elevated surfaces with the shared hairline + inner highlight */
.fx-hud{background:var(--sheen),rgba(8,30,52,.84);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--r-lg);box-shadow:var(--hl3),0 0 0 1px var(--bd2),var(--sh2)}
.fx-card,.fx-panel{background:var(--sheen),var(--e3a);border-radius:var(--r-lg);box-shadow:var(--hl3),0 0 0 1px var(--bd3),var(--sh3)}
.fx-card.fx-sheet{border-radius:var(--r-xl) var(--r-xl) 0 0}
.fx-btn{border-radius:var(--r-pill);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 1px rgba(1,8,20,.14),0 6px 14px -8px rgba(1,8,20,.55)}
.fx-btn:active{box-shadow:inset 0 1px 3px rgba(1,8,20,.3),0 0 0 1px rgba(1,8,20,.18)}
.fx-btn:focus-visible,.fx-legend button:focus-visible,.fx-seg button:focus-visible{outline:none;box-shadow:var(--ring)}
.fx-legend button{background:var(--sheen),rgba(10,34,58,.88);box-shadow:var(--hl3),0 0 0 1px var(--bd2)}
.fx-legend button:hover{background:var(--sheen),rgba(18,48,78,.92)}
.fx-legend button[aria-pressed=true]{background:linear-gradient(180deg,var(--gold-hi),var(--sun-gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(80,50,0,.3)}
.fx-seg button{border-radius:var(--r-pill)}
.fx-seg button[aria-pressed=true]{background:linear-gradient(180deg,var(--gold-hi),var(--sun-gold))}
.fx-kind{border-radius:var(--r-pill)}
.fx-kind.is-live{background:linear-gradient(180deg,var(--gold-hi),var(--sun-gold))}
.fx-sheet .sh-grip i{background:rgba(221,230,237,.5)}
@keyframes fx-up{from{transform:translateY(8px)}to{transform:none}}

/* ===== mapui (2026-10-19): touch targets on the home map ===== */
.fx-src a{display:inline-flex;align-items:center;min-height:24px}
@media (pointer:coarse){
  .fx-btn{height:44px;min-width:44px}
  /* phones: the map tools stay compact (36px) next to the title card; an invisible 4px slop makes each hit area 44px */
  @media (max-width:600px){.fx-tools .fx-btn{width:36px;min-width:36px;height:36px;position:relative}.fx-tools .fx-btn::after{content:"";position:absolute;inset:-4px}}
  .fx-snap{height:44px}
  .fx-src a{min-height:44px}
  /* legend chips sit on the map: keep them compact, widen the hit area to 44px with an invisible slop */
  .fx-legend button{position:relative}
  .fx-legend button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .fx-acts .fx-btn{height:44px}
}
.fx-when #fx-time{white-space:nowrap}