/* BiteGrid underwater glass look (preview for v129). Tokens from the look kit handoff (log-v6, Oct 2026). */
:root{
  --ink:#0B132B; --ink2:#46556B; --ink3:#97A3B5; --hair:#E3E9F0; --inset:#EEF3F8;
  --mint:#00F5D4; --teal-text:#0A7F6E; --teal-bar:#12B9A2;
  --gold-k:#E0A400; --gold-text:#9A6B00; --gold-big:#B07E00; --red-k:#D93A3A;
  --btn-text:#06101F; --chip-text:#0E2A47; --water:#06304A; --subtitle:#9DF7EA;
  --glass:linear-gradient(165deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 45%,rgba(255,255,255,.76) 100%);
  --glass-edge:rgba(255,255,255,.55);
  --sheet:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,253,.94));
  --blue:linear-gradient(90deg,#4FD8FF 0%,#2E8BFF 55%,#3A70FF 100%);
  /* Oct 11 (Andres's fix list): blue gradient = the main action and the page you're on (Forecast / Chart / Log);
     green gradient = every other selected or primary button, pill and chip. index.html and log.html keep their own
     copies of these tokens (they don't load this file). --mint-grad is the old name for --green. */
  --blue-shadow:0 12px 30px rgba(46,139,255,.42),0 4px 12px rgba(79,216,255,.3),inset 0 1px 0 rgba(255,255,255,.42);
  --blue-shadow-sm:0 4px 12px rgba(46,139,255,.34),0 1px 4px rgba(79,216,255,.24),inset 0 1px 0 rgba(255,255,255,.42);
  --green:linear-gradient(90deg,#5CF2C0 0%,#1FD1A0 55%,#0E9F7E 100%);
  --green-shadow:0 12px 30px rgba(20,190,150,.42),0 4px 12px rgba(92,242,192,.3),inset 0 1px 0 rgba(255,255,255,.42);
  --green-shadow-sm:0 4px 12px rgba(20,190,150,.34),0 1px 4px rgba(92,242,192,.24),inset 0 1px 0 rgba(255,255,255,.42);
  --green-edge:#1FD1A0;
  --mint-grad:var(--green);
  --frost:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.58));
  --quiet:linear-gradient(180deg,#FFFFFF,#E3EAF2);
  --shade:linear-gradient(180deg,rgba(2,24,40,.55) 0%,rgba(2,24,40,.18) 14%,rgba(2,24,40,0) 28%);
  --on-water:0 1px 2px rgba(0,18,32,.85),0 0 14px rgba(0,18,32,.6);
  --glass-shadow:0 1px 2px rgba(0,20,40,.08),0 14px 34px rgba(0,16,36,.3);
}
/* Glass inside: the page's own colour variables switch to ink on white, so existing text stays readable */
.uw-glass-vars{--text:var(--ink);--muted:var(--ink2);--teal:var(--teal-text);--prime:var(--teal-text);--gold:var(--gold-big);--poor:var(--red-k);
  --line:rgba(11,19,43,.09);--raised:var(--inset);color:var(--ink)}

/* ================= FORECAST ================= */
html.uw-fc{background:var(--water) !important}
html.uw-fc body{background:transparent !important}
html.uw-fc body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--shade),url(../brand/water.jpg) center top/cover no-repeat,var(--water)}
/* v143: wide screens (desktop browsers, iPads, phones sideways) get a wide version of the water: Adobe Firefly
   generative expand widened the scene, Photoshop upscaled it to 2560x1600. Stretching the narrow phone photo to
   fill a wide screen magnified it 4-6x, which is what looked low quality. */
@media (min-aspect-ratio:3/5){html.uw-fc body::before{background-image:var(--shade),url(../brand/water-wide.jpg)}}
html.uw-fc .brand{color:#F2F6FF;text-shadow:0 1px 10px rgba(0,14,30,.65)}
html.uw-fc .brand-sub{color:var(--subtitle);text-shadow:0 1px 10px rgba(0,14,30,.65)}
html.uw-fc #spotName{color:#fff;text-shadow:var(--on-water)}
html.uw-fc .card,html.uw-fc #badge,html.uw-fc .calSheet{background:var(--glass) !important;border:1px solid var(--glass-edge) !important;border-radius:18px !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--glass-shadow) !important;
  --text:var(--ink);--muted:var(--ink2);--teal:var(--teal-text);--prime:var(--teal-text);--gold:var(--gold-big);--poor:var(--red-k);--line:rgba(11,19,43,.09);--raised:var(--inset);color:var(--ink)}
html.uw-fc #badge{border-color:rgba(10,127,110,.35) !important}
/* tiles and pills sitting on the water: frosted, mint when selected, the gold Today tile stays gold */
html.uw-fc .day,html.uw-fc .hr,html.uw-fc #monthBox{background:var(--frost) !important;border:1px solid rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:var(--chip-text) !important;box-shadow:0 6px 16px rgba(0,16,36,.18);
  --text:var(--chip-text);--muted:var(--ink2);--teal:var(--teal-text);--prime:var(--teal-text);--gold:var(--gold-big)}
html.uw-fc .day small,html.uw-fc .hr small{color:var(--ink2) !important}
html.uw-fc .day.on{background:linear-gradient(180deg,#FFD54D,#F7B801) !important;border-color:#E0A400 !important;color:var(--ink) !important}
html.uw-fc .chip{background:var(--frost) !important;border:1px solid rgba(255,255,255,.55) !important;color:var(--chip-text) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
html.uw-fc .chip.on{background:var(--green) !important;border-color:var(--green-edge) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm) !important}

/* ================= CHART (the map itself is unchanged) ================= */
html.uw-ch #zoom button{background:var(--frost) !important;color:var(--ink) !important;border:1px solid rgba(255,255,255,.65) !important;border-radius:14px !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 6px 16px rgba(0,16,36,.28)}
html.uw-ch #zoom button.on{background:var(--green) !important;border-color:var(--green-edge) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm) !important}
/* v146: the "show controls" button (tool bar hidden) matches the column buttons: frost in light, navy glass in dark */
html.uw-ch #peek{width:44px;height:44px;background:var(--frost) !important;color:var(--ink) !important;border:1px solid rgba(255,255,255,.65) !important;border-radius:14px !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 6px 16px rgba(0,16,36,.28)}
html.uw-ch #tools{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.76)) !important;border:1px solid rgba(255,255,255,.65) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--glass-shadow) !important}
html.uw-ch #tools button{color:#3E4C61 !important;background:transparent}
html.uw-ch #tools button.on{background:var(--green) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm)}
html.uw-ch #hud{background:var(--frost) !important;border:1px solid rgba(255,255,255,.6) !important;color:var(--chip-text) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 4px 12px rgba(0,16,36,.22)}
html.uw-ch #hud *{color:var(--chip-text) !important;text-shadow:none !important}
html.uw-ch .panel.sheet,html.uw-ch .jump.sheet,html.uw-ch #readout,html.uw-ch #layerPop{background:var(--sheet) !important;border:1px solid rgba(11,19,43,.06) !important;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 -6px 30px rgba(6,20,50,.28) !important;color:var(--ink) !important;
  --text:var(--ink);--muted:var(--ink2);--teal:var(--teal-text);--prime:var(--teal-text);--line:rgba(11,19,43,.09)}
html.uw-ch #readout .depthSub,html.uw-ch #readout .sub,html.uw-ch .panel .muted{color:var(--ink2) !important}
html.uw-ch #readout a,html.uw-ch .panel a{color:var(--teal-text) !important}
html.uw-ch #readout [data-copy]{background:var(--quiet) !important;border:1px solid rgba(11,19,43,.12) !important;color:var(--ink) !important;border-radius:999px !important}
html.uw-ch #readout .closeCard,html.uw-ch .panel .close{color:var(--ink2) !important}

/* ---- pass 2 ---- */
/* scores coloured inline by the forecast code: keep their meaning, deepen them for white glass */
html.uw-fc .card [style*="00F5D4" i],html.uw-fc #badge [style*="00F5D4" i],html.uw-fc .hr [style*="00F5D4" i],
html.uw-fc .card [style*="2EC4B6" i],html.uw-fc #badge [style*="2EC4B6" i],html.uw-fc .hr [style*="2EC4B6" i]{color:var(--teal-text) !important}
html.uw-fc .card [style*="F7B801" i],html.uw-fc #badge [style*="F7B801" i],html.uw-fc .hr [style*="F7B801" i]{color:var(--gold-big) !important}
html.uw-fc .card [style*="E15554" i],html.uw-fc #badge [style*="E15554" i],html.uw-fc .hr [style*="E15554" i]{color:var(--red-k) !important}
html.uw-fc #windWidget{background:var(--quiet) !important;border:1px solid rgba(11,19,43,.1) !important;color:var(--ink) !important;box-shadow:0 2px 8px rgba(0,16,36,.12);
  --text:var(--ink);--muted:var(--ink2);--teal:var(--teal-text);--prime:var(--teal-text)}
/* chart: the area name drawn on the map becomes a frosted pill */
html.uw-ch .uwAreaRect{fill:#FFFFFF;fill-opacity:.88;stroke:rgba(255,255,255,.7);rx:10px}
html.uw-ch .uwAreaText{fill:#0E2A47;font-weight:600}
/* chart sheets: layer chips frosted, mint when on */
html.uw-ch #layers .tog:not([style*="background"]),html.uw-ch #layerBar .tog:not([style*="background"]),html.uw-ch #layerPop .tog:not([style*="background"]){background:linear-gradient(180deg,#FFFFFF,#ECF1F7) !important;border:1px solid var(--hair) !important;color:var(--ink) !important}
html.uw-fc #windWidget{background:none !important;border:0 !important;box-shadow:none !important}
html.uw-fc .windWidget .pill{background:var(--quiet) !important;border:1px solid rgba(11,19,43,.1) !important;color:var(--ink) !important;box-shadow:0 2px 8px rgba(0,16,36,.14)}

/* ================= DARK GLASS (night, or chosen) — from log-v6-dark ================= */
:root.uw-dark{--dglass:linear-gradient(165deg,rgba(9,22,48,.9) 0%,rgba(9,22,48,.78) 45%,rgba(9,22,48,.6) 100%);
  --dsheet:linear-gradient(180deg,rgba(16,26,54,.97) 0%,rgba(10,22,46,.93) 100%);--dquiet:linear-gradient(180deg,#27365F 0%,#172140 100%);
  --dtile:linear-gradient(180deg,#22305A,#161F3C);--dtext:#F2F6FF;--dmuted:#A9B7C9;--color-scheme:dark}
html.uw-fc.uw-dark .card,html.uw-fc.uw-dark #badge,html.uw-fc.uw-dark .calSheet{background:var(--dglass) !important;border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 14px 34px rgba(0,10,24,.35) !important;--text:var(--dtext);--muted:var(--dmuted);--teal:#2EC4B6;--prime:#00F5D4;--gold:#F7B801;--poor:#E15554;
  --line:rgba(255,255,255,.08);--raised:rgba(255,255,255,.06);color:var(--dtext)}
html.uw-fc.uw-dark #badge{border-color:rgba(0,245,212,.35) !important}
html.uw-fc.uw-dark .day,html.uw-fc.uw-dark .hr,html.uw-fc.uw-dark #monthBox,html.uw-fc.uw-dark .chip{background:var(--dquiet) !important;
  border-color:rgba(255,255,255,.12) !important;color:var(--dtext) !important;--text:var(--dtext);--muted:var(--dmuted);--teal:#2EC4B6;--prime:#00F5D4;--gold:#F7B801}
html.uw-fc.uw-dark .day small,html.uw-fc.uw-dark .hr small{color:var(--dmuted) !important}
html.uw-fc.uw-dark .day.on{background:linear-gradient(180deg,#FFD54D,#F7B801) !important;border-color:#E0A400 !important;color:#0B132B !important}
html.uw-fc.uw-dark .chip.on{background:var(--green) !important;border-color:var(--green-edge) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm) !important}
html.uw-fc.uw-dark .windWidget .pill{background:var(--dquiet) !important;border-color:rgba(255,255,255,.12) !important;color:var(--dtext) !important}
/* night keeps the original bright score colours (the light-glass remaps above don't apply) */
html.uw-fc.uw-dark .card [style*="00F5D4" i],html.uw-fc.uw-dark #badge [style*="00F5D4" i],html.uw-fc.uw-dark .hr [style*="00F5D4" i]{color:#00F5D4 !important}
html.uw-fc.uw-dark .card [style*="2EC4B6" i],html.uw-fc.uw-dark #badge [style*="2EC4B6" i],html.uw-fc.uw-dark .hr [style*="2EC4B6" i]{color:#2EC4B6 !important}
html.uw-fc.uw-dark .card [style*="F7B801" i],html.uw-fc.uw-dark #badge [style*="F7B801" i],html.uw-fc.uw-dark .hr [style*="F7B801" i]{color:#F7B801 !important}
html.uw-fc.uw-dark .card [style*="E15554" i],html.uw-fc.uw-dark #badge [style*="E15554" i],html.uw-fc.uw-dark .hr [style*="E15554" i]{color:#FF7B7A !important}
/* chart, dark glass */
html.uw-ch.uw-dark #zoom button{background:var(--dquiet) !important;color:var(--dtext) !important;border-color:rgba(255,255,255,.14) !important}
html.uw-ch.uw-dark #peek{background:var(--dquiet) !important;color:var(--dtext) !important;border-color:rgba(255,255,255,.14) !important}
html.uw-ch.uw-dark #tools{background:var(--dsheet) !important;border-color:rgba(255,255,255,.12) !important}
html.uw-ch.uw-dark #tools button{color:#C9D4E2 !important}
html.uw-ch.uw-dark #tools button.on{background:var(--green) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm)}
html.uw-ch.uw-dark .uwAreaRect{fill:#0B1838;fill-opacity:.86;stroke:rgba(255,255,255,.16)}
html.uw-ch.uw-dark .uwAreaText{fill:#E8EEF3}
html.uw-ch.uw-dark .panel.sheet,html.uw-ch.uw-dark .jump.sheet,html.uw-ch.uw-dark #readout,html.uw-ch.uw-dark #layerPop{background:var(--dsheet) !important;border-color:rgba(255,255,255,.12) !important;
  color:var(--dtext) !important;--text:var(--dtext);--muted:var(--dmuted);--teal:#2EC4B6;--prime:#00F5D4;--line:rgba(255,255,255,.08)}
html.uw-ch.uw-dark #readout .depthSub,html.uw-ch.uw-dark #readout .sub,html.uw-ch.uw-dark .panel .muted{color:var(--dmuted) !important}
html.uw-ch.uw-dark #readout a,html.uw-ch.uw-dark .panel a{color:#00F5D4 !important}
html.uw-ch.uw-dark #readout [data-copy]{background:var(--dquiet) !important;border-color:rgba(255,255,255,.14) !important;color:var(--dtext) !important}
html.uw-ch.uw-dark #layers .tog:not([style*="background"]),html.uw-ch.uw-dark #layerBar .tog:not([style*="background"]),html.uw-ch.uw-dark #layerPop .tog:not([style*="background"]){background:var(--dquiet) !important;border-color:rgba(255,255,255,.12) !important;color:var(--dtext) !important}

/* ================= v129: Appearance controls and remaining surfaces ================= */
/* v156: the forecast header (#themeBtn, #refreshData, Live line, spot picker) is styled in fincast.html itself */
html.uw-ch .tmRow{display:flex;gap:6px;margin:4px 0}
html.uw-ch .tmRow button{flex:1}
html.uw-ch .tmRow button.on{background:var(--green) !important;border-color:var(--green-edge) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm) !important}
/* forecast: help popover and PRO bar on light glass */
html.uw-fc:not(.uw-dark) .factorHelp,html.uw-fc:not(.uw-dark) #adBar{background:var(--sheet) !important;color:var(--ink) !important;border:1px solid rgba(11,19,43,.08) !important;
  box-shadow:0 8px 28px rgba(6,20,50,.25) !important;--text:var(--ink);--muted:var(--ink2);--teal:var(--teal-text);--prime:var(--teal-text);--gold:var(--gold-big)}
html.uw-fc:not(.uw-dark) #adHide{background:var(--quiet) !important;color:var(--ink) !important;border:1px solid rgba(11,19,43,.12) !important}
/* chart: your-spots sheet, Move/Edit menu, move bar, notices and the AI Spots filter on light glass */
html.uw-ch:not(.uw-dark) #msSheet,html.uw-ch:not(.uw-dark) #aiFilter{background:var(--sheet) !important;color:var(--ink) !important;border-color:rgba(10,127,110,.45) !important;
  box-shadow:0 -10px 30px rgba(6,20,50,.28) !important}
html.uw-ch:not(.uw-dark) #msSheet input,html.uw-ch:not(.uw-dark) #msSheet select,html.uw-ch:not(.uw-dark) #msSheet textarea{background:#F2F6FA !important;color:var(--ink) !important;border-color:rgba(11,19,43,.14) !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-h button,html.uw-ch:not(.uw-dark) #aiFilter [data-ai=close]{color:var(--ink2) !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-btn{background:var(--quiet) !important;color:var(--ink) !important;border-color:rgba(11,19,43,.12) !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-ask{background:rgba(214,228,242,.55) !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-askCard{background:#FFFFFF !important;color:var(--ink) !important;border-color:rgba(11,19,43,.08) !important;box-shadow:0 14px 36px rgba(6,20,50,.25) !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-ph{background:#E9EFF5 !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-cols button{border-color:rgba(11,19,43,.18) !important}
html.uw-ch:not(.uw-dark) #msSheet .ms-cols button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #0A7F6E !important}
html.uw-ch:not(.uw-dark) #msMenu,html.uw-ch:not(.uw-dark) #msMoveBar,html.uw-ch:not(.uw-dark) #msToast{background:var(--sheet) !important;color:var(--ink) !important;border-color:rgba(10,127,110,.45) !important}
html.uw-ch:not(.uw-dark) #msMenu button,html.uw-ch:not(.uw-dark) #msMoveBar button[data-mv=cancel]{background:var(--quiet) !important;color:var(--ink) !important}
html.uw-ch:not(.uw-dark) #aiFilter b{color:var(--teal-text) !important}

/* ================= v133: light-mode fixes from the 10-02 screen recording ================= */
/* map background behind tiles: soft blue-gray instead of navy while tiles load */
html.uw-ch:not(.uw-dark)[data-basemap="national"],html.uw-ch:not(.uw-dark)[data-basemap="national"] body{background:#D3DEE7 !important}   /* imagery and dark gray keep the dark backdrop that dimming fades into */
/* route planning panel */
html.uw-ch:not(.uw-dark) #nav .rpSeg{background:#E9EFF5;border-color:rgba(11,19,43,.1)}
html.uw-ch:not(.uw-dark) #nav .rpSeg button{color:#3E4C61}
html.uw-ch:not(.uw-dark) #nav .rpSeg button.on{background:var(--green);color:var(--btn-text);box-shadow:var(--green-shadow-sm)}
html.uw-ch:not(.uw-dark) #nav .rpHero>div,html.uw-ch:not(.uw-dark) .offRow{background:#F1F5F9;border-color:rgba(11,19,43,.1)}
html.uw-ch:not(.uw-dark) #nav .rpBig{color:var(--ink)}
html.uw-ch:not(.uw-dark) #nav .rpSpd{color:var(--teal-text)}
html.uw-ch:not(.uw-dark) #nav .rpLbl{color:var(--ink2)}
html.uw-ch:not(.uw-dark) #nav .rpLeg{color:var(--ink)}
html.uw-ch:not(.uw-dark) details.rpSet>summary,html.uw-ch:not(.uw-dark) details.rpWhy>summary{color:var(--teal-text)}
html.uw-ch:not(.uw-dark) details.rpSet>summary::after,html.uw-ch:not(.uw-dark) details.rpWhy>summary::after{color:var(--ink2)}
html.uw-ch:not(.uw-dark) .offRow label,html.uw-ch:not(.uw-dark) .offRow b{color:var(--ink)}
html.uw-ch:not(.uw-dark) #nav button:not(.on):not([data-rp]):not(#navPassageBtn){background:var(--quiet) !important;color:var(--ink) !important;border:1px solid rgba(11,19,43,.12) !important}
/* first-visit chart tips */
/* v156: the forecast's tour (html.uw-fc) gets the same light look as the chart's; the arrow and the gold hint follow */
html.uw-ch:not(.uw-dark) #tourBubble,html.uw-fc:not(.uw-dark) #tourBubble{background:var(--sheet) !important;color:var(--ink) !important;border-color:rgba(10,127,110,.45) !important;box-shadow:0 12px 30px rgba(6,20,50,.3) !important}
html.uw-ch:not(.uw-dark) #tourBubble .tk,html.uw-fc:not(.uw-dark) #tourBubble .tk{color:var(--teal-text) !important}
html.uw-ch:not(.uw-dark) #tourBubble h4,html.uw-ch:not(.uw-dark) #tourBubble p,html.uw-ch:not(.uw-dark) #tourBubble div,
html.uw-fc:not(.uw-dark) #tourBubble h4,html.uw-fc:not(.uw-dark) #tourBubble p,html.uw-fc:not(.uw-dark) #tourBubble div,html.uw-fc:not(.uw-dark) #tourBubble li{color:var(--ink)}
html.uw-ch:not(.uw-dark) #tourBubble .hint,html.uw-fc:not(.uw-dark) #tourBubble .hint{color:#8A5D00 !important}
html.uw-ch:not(.uw-dark) #tourBubble #tourArrow,html.uw-fc:not(.uw-dark) #tourBubble #tourArrow{background:#FFFFFF !important;border-color:rgba(10,127,110,.45) !important}
html.uw-ch:not(.uw-dark) #tourBubble #tourSkip,html.uw-fc:not(.uw-dark) #tourBubble #tourSkip{background:var(--quiet) !important;color:var(--ink) !important;border:1px solid rgba(11,19,43,.12) !important}
html.uw-ch:not(.uw-dark) #tourBubble #tourNext,html.uw-fc:not(.uw-dark) #tourBubble #tourNext{background:var(--green) !important;color:var(--btn-text) !important;box-shadow:var(--green-shadow-sm) !important}
/* forecast header lines over the bright photo */
html.uw-fc:not(.uw-dark) header p[style*="FFD166"],html.uw-fc:not(.uw-dark) header small{text-shadow:0 1px 3px rgba(0,14,30,.9),0 0 10px rgba(0,14,30,.6) !important}

/* v133: Solunar moon on light glass: moonlight gold lit side and a thin navy rim (it was near-white on white) */
html.uw-fc:not(.uw-dark) svg path[fill="#E8EDF7"]{fill:#EFD9A0}
html.uw-fc:not(.uw-dark) svg circle[stroke="rgba(255,255,255,.18)"]{stroke:rgba(11,19,43,.4)}

/* v134: hour tiles match the chart bars (7-band aquamarine-to-blue score scale): text shades tuned per theme, strip = exact bar colour */
html.uw-fc .hr b[data-band="0"]{color:#2A9D84 !important}
html.uw-fc .hr b[data-band="1"]{color:#1C9A92 !important}
html.uw-fc .hr b[data-band="2"]{color:#0B8BA6 !important}
html.uw-fc .hr b[data-band="3"]{color:#0A79C0 !important}
html.uw-fc .hr b[data-band="4"]{color:#0C5FC4 !important}
html.uw-fc .hr b[data-band="5"]{color:#123FA8 !important}
html.uw-fc .hr b[data-band="6"]{color:#142E85 !important}
html.uw-fc.uw-dark .hr b[data-band="0"]{color:#86EAD1 !important}
html.uw-fc.uw-dark .hr b[data-band="1"]{color:#58E4DB !important}
html.uw-fc.uw-dark .hr b[data-band="2"]{color:#2CCAE2 !important}
html.uw-fc.uw-dark .hr b[data-band="3"]{color:#3DB4F2 !important}
html.uw-fc.uw-dark .hr b[data-band="4"]{color:#5A9BFF !important}
html.uw-fc.uw-dark .hr b[data-band="5"]{color:#7C8DFF !important}
html.uw-fc.uw-dark .hr b[data-band="6"]{color:#A3A0FF !important}
html.uw-fc .hr[data-band="0"]{box-shadow:inset 0 -3px 0 #86EAD1, var(--tile-shadow, 0 0 0 transparent) !important}
html.uw-fc .hr[data-band="1"]{box-shadow:inset 0 -3px 0 #58E4DB, var(--tile-shadow, 0 0 0 transparent) !important}
html.uw-fc .hr[data-band="2"]{box-shadow:inset 0 -3px 0 #2CCAE2, var(--tile-shadow, 0 0 0 transparent) !important}
html.uw-fc .hr[data-band="3"]{box-shadow:inset 0 -3px 0 #14A3EB, var(--tile-shadow, 0 0 0 transparent) !important}
html.uw-fc .hr[data-band="4"]{box-shadow:inset 0 -3px 0 #1171DF, var(--tile-shadow, 0 0 0 transparent) !important}
html.uw-fc .hr[data-band="5"]{box-shadow:inset 0 -3px 0 #1445B8, var(--tile-shadow, 0 0 0 transparent) !important}
html.uw-fc .hr[data-band="6"]{box-shadow:inset 0 -3px 0 #142E85, var(--tile-shadow, 0 0 0 transparent) !important}

/* v135: switched-on layer chips keep their own colour (inline COLORS) in both themes; dark text reads on the bright colours */
html.uw-ch #layers .tog[style*="background"],html.uw-ch #layerBar .tog[style*="background"],html.uw-ch #layerPop .tog[style*="background"]{color:#0B132B !important;font-weight:700}
/* v135: Go to panel on light glass (its buttons were hard-coded navy, with dark text = black on black) */
html.uw-ch:not(.uw-dark) .jump button{background:linear-gradient(180deg,#FFFFFF,#ECF1F7) !important;color:var(--ink) !important;border:1px solid rgba(11,19,43,.12) !important;box-shadow:0 2px 8px rgba(6,20,50,.12)}
html.uw-ch:not(.uw-dark) .jump button b{color:var(--gold-big) !important}
html.uw-ch:not(.uw-dark) .jumpHead{background:rgba(250,252,254,.98);color:var(--ink2)}
html.uw-ch.uw-dark .jumpHead{background:rgba(16,26,54,.98);color:var(--dmuted)}