/* Shared styles: the page, header, tabs, search, footer, cards, and everything not owned by a single tab. Loaded in the order base, weather, sky, about. */
:root{ --picture-filter:contrast(1.18) saturate(1.12) brightness(1.06); --ink:#f1edff; --muted:#c2b9d8; --line:rgba(222,208,255,.18); --panel:rgba(25,27,65,.61); --accent-rgb:200,160,255; --yellow:#dfc3ff; --sky:#c69cff; --danger:#f5d0ff; }
*{box-sizing:border-box}
body{margin:0;min-width:320px;color:var(--ink);font-family:"Exo 2",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#061629}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 73% 5%,#5a3288 0,transparent 32%),radial-gradient(circle at 8% 25%,#1b315e 0,transparent 35%),linear-gradient(135deg,#090a23 0%,#17224f 58%,#3d2268 100%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.18;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
button,input{font:inherit}
button{color:inherit;cursor:pointer}
.shell{max-width:1180px;margin:auto;padding:24px 24px 48px}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}
.brand{font-weight:780;letter-spacing:-.04em;font-size:1.3rem;display:flex;align-items:center;gap:12px}
.brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(200,126,255,.62))}
.brand em{font-style:normal;color:#d9bdff;font-weight:620}
.unit{border:1px solid var(--line);background:#201f53;border-radius:99px;padding:5px;display:flex;flex:none}
/* The unit switch is a row of two buttons that never shrinks or wraps (it was a shrinkable block, so on a narrow or large-text phone its two buttons wrapped into a round blob with the selected one hanging out of the border, 2026-09-21); the brand gives way instead: it may shrink, its logo and gaps get smaller on narrow screens. */
header>.brand{min-width:0;flex:0 1 auto}.brand .stack{min-width:0}
@media(max-width:400px){header{gap:10px}.brand{gap:8px}header .brand img{width:46px;height:46px}header .brand .divider{height:34px}}
.unit button{border:0;border-radius:99px;background:transparent;padding:7px 11px;font-weight:700;font-size:.85rem}
.unit button.active{background:#f1edff;color:#241a42}
.search{display:flex;align-items:center;gap:10px;background:rgba(13,14,47,.64);border:1px solid var(--line);border-radius:18px;padding:7px 8px 7px 17px;max-width:560px;box-shadow:0 16px 35px rgba(0,0,0,.16)}
.search svg{opacity:.7;flex:none}
.search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:1rem;min-height:40px}
.search input::placeholder{color:#b8b0d4}
.search button{border:0;border-radius:13px;background:var(--sky);color:#21133f;font-weight:750;padding:11px 16px;min-height:42px}
/* The clear (X) control: shown only while the box has text, a 44px target, empties the box and keeps the cursor in it */
.search .clear-x{display:none;flex:none;width:44px;height:44px;min-height:44px;margin-right:-4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}.search .clear-x:hover{background:rgba(255,255,255,.12)}.search .clear-x:focus-visible{outline:3px solid #fff;outline-offset:-3px}.search input:not(:placeholder-shown)~.clear-x{display:inline-flex}
.eyebrow{color:#b8d7ea;font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.12em;margin:28px 0 8px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 35px rgba(0,0,0,.13);backdrop-filter:blur(16px)}
.summary{padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.summary h2,.section-title h2,.radar-title{margin:0;font-size:1.05rem;letter-spacing:-.02em}
.summary p{color:#d1e4f2;line-height:1.55;margin:16px 0;font-size:.97rem}
.section-title{display:flex;align-items:end;justify-content:space-between;margin:34px 0 13px}
.section-title p{margin:0;color:var(--muted);font-size:.8rem}
.hour{flex:0 0 88px;min-width:88px;padding:16px 6px 26px;text-align:center;position:relative;z-index:1}
.hour.now-hour{background:rgba(var(--accent-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45);border-radius:18px}
.hour.now-hour time{color:#fff;font-weight:700}
.sun-marker{position:absolute;left:4px;right:4px;bottom:6px;font-size:.72rem;line-height:1.2;color:#ffe2a8}
.sun-marker.sunset{color:#ffc4a8}
.hour time{font-size:.8rem;color:var(--muted)}
.hour .icon{font-size:1.65rem;display:block;margin:12px 0}
.hour b{font-size:.95rem}
@media(max-width:720px){.card.sunmoon{min-height:460px;display:flex;flex-direction:column;justify-content:space-between}}
.sun-dot.down{fill:#3b3f6b;stroke:rgba(255,255,255,.4);stroke-width:2}
.card.sunmoon{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;--panel-alpha:.75}
footer{margin-top:25px;color:#bdb4d3;font-size:.75rem;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a{color:#dbc5ff}
.wx-disclaimer{flex:1 0 100%;margin:0;font-size:.85rem;line-height:1.5;color:#e9e4f7}
.sky-hero.space-image{position:relative;overflow:hidden;isolation:isolate;background-color:#0d0c31;background-image:none!important}
.sky-hero.space-image::before{content:"";position:absolute;inset:0;z-index:-1;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.06);filter:var(--picture-filter)}
.sky-hero.space-image::before{background-image:url('/api/sky-image?name=hero&v=3')}
/* The hidden attribute always wins: a class that sets display (.planet-image, .recent-places ...) must not show an element the page has hidden (an empty picture box, a "Recent places" label with no places). test/planet-pictures.test.mjs walks every tab for a displayed [hidden] element. */
[hidden]{display:none!important}
.view-nav{display:flex;gap:6px;margin:0 0 22px;padding:5px;width:max-content;border:1px solid var(--line);border-radius:14px;background:rgba(13,14,47,.45)}
.view-nav button{border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;padding:9px 15px}
.view-nav button.active{background:#d3b1ff;color:#25133e}
.data-tile .eyebrow{margin:0 0 8px}
.brand,.eyebrow,.view-nav button{font-family:Orbitron,"Segoe UI",sans-serif}
.brand{letter-spacing:.035em;font-size:1.12rem}
.eyebrow{font-size:.68rem;font-weight:600}
.view-nav button{font-size:.78rem;font-weight:600}
.sky-hero.space-image{background-image:linear-gradient(90deg,rgba(20,13,57,.94),rgba(35,17,77,.72) 58%,rgba(15,22,62,.68));background-size:cover;background-position:center}
.planet-image{display:block;width:100%;height:82px;object-fit:cover;border-radius:12px;margin-bottom:13px;background:#17173e;border:1px solid rgba(221,196,255,.14)}
@media(max-width:720px){.shell{padding:17px 14px 35px}header{margin-bottom:25px}.brand{font-size:1.05rem}.search{border-radius:15px}.search button{padding:10px 12px}.summary{padding:22px}}
.photo-lightbox{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:28px;background:rgba(3,5,20,.86);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.photo-lightbox.open{opacity:1;pointer-events:auto}
.photo-lightbox figure{max-width:min(1100px,94vw);max-height:90vh;margin:0;transform:scale(.96);transition:transform .2s ease}
.photo-lightbox.open figure{transform:scale(1)}
.photo-lightbox img{display:block;max-width:100%;max-height:82vh;object-fit:contain;border:1px solid rgba(220,196,255,.42);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.55)}
.photo-lightbox figcaption{padding-top:10px;color:#e6dcff;text-align:center;font-family:Orbitron,"Segoe UI",sans-serif;font-size:.73rem;letter-spacing:.04em}
.photo-lightbox[hidden]{display:none}
/* Text on pictures has no box: legibility comes from an outline and a soft shadow on the text, with no fade behind it (test/sky-ink.test.mjs measures 4.5:1 behind the glyphs at four widths, on the real pictures and on a plain white one). */
:root{--ink-shadow:0 0 1px #000,0 0 2px #000,0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75),0 0 26px rgba(0,0,0,.5)}
/* Design 6: shared frosted-glass tiles; the accent follows the conditions (see accentFor) */
.card{border-color:rgba(var(--accent-rgb),.3);box-shadow:0 18px 35px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.09);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}
.search,.view-nav,.unit{border-color:rgba(var(--accent-rgb),.3)}
.view-nav button.active,.search button{background:rgb(var(--accent-rgb));color:#21133f}
.section-title h2:before,.radar-title:before{content:"";display:inline-block;width:4px;height:1em;margin-right:8px;border-radius:2px;background:rgb(var(--accent-rgb));vertical-align:-2px}
.sky-hero.space-image{min-height:clamp(170px,20vw,240px)}
.highlow .low-na{font-size:.72rem}
.hour .rain{min-height:2.6em;line-height:1.3}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Accessibility: a visible keyboard focus ring everywhere (white, 2px clear of the control so it reads on light and dark), a skip link, and 44px touch targets (test/a11y.test.mjs). */
:focus-visible{outline:3px solid #fff;outline-offset:2px}
.search:focus-within{outline:3px solid #fff;outline-offset:2px}
.skip-link{position:absolute;left:12px;top:-64px;z-index:100;background:#f1edff;color:#241a42;padding:14px 16px;border-radius:10px;font-weight:700}
.skip-link:focus{top:12px}
#main:focus{outline:0}
.unit button,.view-nav button,.search button,.search input,.choices button{min-height:44px}
.unit button{min-width:44px}
footer a{display:inline-block;padding:15px 10px;margin:-15px -10px}
a.brand{color:inherit;text-decoration:none}
a.brand:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:4px;border-radius:14px}
/* Wordmark: Orbitron capitals, thin divider, sub-line. The glow matches the shield's drop-shadow colour and softness. */
.brand{--wordmark-glow:0 0 6px rgba(200,126,255,.75),0 0 18px rgba(200,126,255,.55),0 0 34px rgba(200,126,255,.30)}
.brand .divider{width:1px;height:40px;background:rgba(198,156,255,.6)}
.brand .stack{display:flex;flex-direction:column;gap:4px;line-height:1}
.brand .wm{font-family:Orbitron,"Segoe UI",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;color:#ffffff;text-shadow:var(--wordmark-glow)}
.brand .sub{font-family:"Exo 2","Segoe UI",sans-serif;font-size:.92rem;font-weight:500;letter-spacing:.06em;text-transform:none;color:#ffffff;text-shadow:var(--wordmark-glow)}
@media(max-width:480px){.brand{gap:10px}.brand .divider{height:34px}.brand .wm{font-size:1.15rem}.brand .sub{font-size:.8rem}}
.recent-places{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}.recent-places>span{color:var(--muted);font-size:.8rem}.recent-places button{min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink);font-size:.85rem;font-weight:600}.recent-places .recent-clear{background:transparent;text-decoration:underline}.choices{margin:12px 0;padding:14px 16px;background:var(--panel);border:1px solid rgba(var(--accent-rgb),.3);border-radius:18px}
.choices p{margin:0 0 8px;color:var(--muted);font-size:.85rem}
.choices ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.choices button{min-height:44px;padding:9px 13px;border:1px solid rgba(var(--accent-rgb),.85);border-radius:12px;background:rgba(var(--accent-rgb),.12);color:var(--ink);font:inherit;font-size:.9rem;text-align:left;cursor:pointer}
.choices button:focus-visible{outline:2px solid rgb(var(--accent-rgb));outline-offset:2px}
:root{--ink-shadow:0 0 1px #000,0 0 2px #000,0 1px 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75),0 0 26px rgba(0,0,0,.5)}
.card.sunmoon{text-shadow:var(--ink-shadow);-webkit-text-stroke:3px rgba(0,0,0,.6);paint-order:stroke fill}
:root{--ink-glow:drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000) drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.9))}
/* Star dots behind page-level text (option 5): the dots stay, and a dark halo under each glyph keeps a dot from ever sitting directly behind ink. No box, no change to the grey text hierarchy. Card and picture text has its own rules. */
.section-title p,.place p,.choices p,.recent-places>span,.eyebrow,footer,footer span,footer a,.wx-disclaimer{text-shadow:0 0 1px rgba(6,8,30,.95),0 0 3px rgba(6,8,30,.9),0 0 6px rgba(6,8,30,.75)}
/* Picture text keeps its own six-stop ink shadow: a rule that names .eyebrow directly would otherwise beat the inherited value inside a picture tile. */
.on-picture .eyebrow{text-shadow:var(--ink-shadow)}
/* The tab bar is as wide as its four tabs (width:max-content), which is wider than a phone under about 380 px: the page scrolled sideways and About was cut off (Marcus and Helper, 2026-09-21). On a phone it takes the screen's width, the tabs share it, and with very large text it scrolls inside its own border instead of pushing the page. Last in the file so it wins over the tab rules above. */
@media(max-width:600px){.view-nav{width:100%;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;justify-content:space-between;gap:2px}.view-nav::-webkit-scrollbar{display:none}.view-nav button{flex:1 0 auto;padding:9px 8px;font-size:.74rem}}