/* ==========================================================================
   neon-mesa.css  --  shared stylesheet for vsfamilyforecast.com
   House style "Neon Mesa": dark navy background, neon cyan frames, a
   southwestern sunset header with a striped sun, a glowing mountain ridge
   and a perspective grid floor. Orbitron for headings/labels/tabs,
   Roboto Mono for body text (18 px minimum). Orbitron labels, tabs, pills
   and the tagline are 16 px minimum (Task 8 headless audit: no rendered
   HTML text under 16 px at 360-1280 px; SVG map text is the one exception).

   Phone exception (max-width 600px): the header is a fixed 100 px and the
   tagline is hidden (display:none). At 16 px the tagline wraps to two lines
   on a 360 px phone and would not fit under the h1 inside a short header,
   so the phone shows only the h1 (which may wrap to two lines). Desktop
   keeps the 150 px header with the tagline. The tab row is one horizontally
   scrollable line under 700 px; each page scrolls its .tab.on into view.

   Ported from the ".A" section of neon_mesa_mockup.py, un-prefixed and
   scaled from the 760 px mockup to a full page. No frameworks, no build
   step, no external requests; works from file:// and over HTTP.

   Page skeleton every page uses:

     <body data-accent="cyan">
       <header class="sky">
         <div class="sun"></div>
         <svg class="ridge" ...>...</svg>        (inline ridge SVG, see below)
         <div class="title">
           <h1>VS Family <span>Forecast</span></h1>
           <div class="tagline">...</div>
         </div>
       </header>
       <div class="grid-floor"></div>
       <nav class="tabs">
         <a class="tab on" href="index.html">Home</a>
         <a class="tab ext" href="https://..." target="_blank" rel="noopener">Radar</a>
       </nav>
       <main class="wrap">
         <section class="sec">            (class="sec" = framed neon panel;
           <h2>Current</h2>                a bare <section> has no frame)
           <div class="cards"> <div class="card">...</div> </div>
         </section>
       </main>
     </body>

   Ridge SVG snippet (inline it in each page, directly inside .sky):

     <svg class="ridge" width="760" height="80" viewBox="0 0 760 80"
          preserveAspectRatio="none" aria-hidden="true">
       <polygon points="0,70 40,62 80,66 120,52 160,58 200,40 235,46 270,24 300,14 322,22 345,10 372,28 405,36 440,30 480,44 520,38 560,50 600,46 640,56 680,52 720,60 760,56 760,80 0,80" fill="#020b14"/>
       <polyline points="0,70 40,62 80,66 120,52 160,58 200,40 235,46 270,24 300,14 322,22 345,10 372,28 405,36 440,30 480,44 520,38 560,50 600,46 640,56 680,52 720,60 760,56" fill="none" stroke="#00f2ff" stroke-width="2"/>
     </svg>

   The ridge glow (drop-shadow) is applied by the .ridge rule below, so the
   SVG does not need an inline style attribute.
   ========================================================================== */

/* ---------- fonts (self-hosted, relative URLs) ---------- */
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Orbitron-700.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/Orbitron-900.woff2) format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/RobotoMono-400.woff2) format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/RobotoMono-600.woff2) format('woff2')}

/* ---------- palette ---------- */
:root{
  --bg:#020b14;
  --panel:rgba(8,12,20,.95);
  --card:#1f2630;
  --text:#e0e0e0;
  --muted:#9fb3c8;
  --cyan:#00f2ff;
  --green:#39ff14;
  --magenta:#ff00ff;
  --orange:#ff6a00;
  --orange-soft:#ff9e3d;
  --gold:#ffd166;
  --purple:#bc13fe;
  --warn:#ff9e3d;
  --ok:#39ff14;
  --err:#ff3b5c;
  --accent:#00f2ff;
  --accent-glow:#00f2ff55;
  --head:'Orbitron',sans-serif;
  --mono:'Roboto Mono',Consolas,monospace;
}

/* per-page accent: frames, tabs, headings and glows follow --accent */
body[data-accent="cyan"]{--accent:#00f2ff;--accent-glow:#00f2ff55}
body[data-accent="purple"]{--accent:#bc13fe;--accent-glow:#bc13fe55}
body[data-accent="green"]{--accent:#39ff14;--accent-glow:#39ff1455}
body[data-accent="magenta"]{--accent:#ff00ff;--accent-glow:#ff00ff55}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#020b14;
  color:var(--text);
  font:400 18px/1.55 'Roboto Mono',Consolas,monospace;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:'Orbitron',sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:0}
h2{color:#39ff14;text-shadow:0 0 8px #39ff14;font-weight:700;font-size:20px;margin:0 0 12px}
h3{color:var(--accent);font-weight:700;font-size:16px;margin:0 0 8px}
p{margin:0 0 1em}
input,select,textarea,button{font:inherit;font-size:16px}
input,select,textarea{
  background:#0a1220;color:var(--text);border:1px solid var(--accent);border-radius:6px;
  padding:10px 12px;min-height:44px;
}

/* ---------- header: sky, sun, ridge, title ---------- */
.sky{
  position:relative;height:150px;overflow:hidden;
  background:linear-gradient(180deg,#0a0420 0%,#3a0a4a 38%,#b0185e 66%,#ff6a00 88%,#ffb347 100%);
}
.sun{
  position:absolute;left:50%;top:52px;width:124px;height:124px;margin-left:-62px;border-radius:50%;
  background:repeating-linear-gradient(180deg,#ffd166 0 9px,transparent 9px 13px);
  opacity:.85;box-shadow:0 0 40px #ff6a00;
}
.sky svg{position:absolute;bottom:0;left:0;width:100%;height:80px;display:block}
.ridge{
  filter:drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 10px var(--accent));
}
.ridge polyline{stroke:var(--accent)}
.title{position:absolute;left:18px;top:14px;z-index:1}
.title h1,.sky h1{
  color:#00f2ff;font-weight:900;font-size:28px;letter-spacing:.12em;line-height:1.1;
  text-shadow:0 0 5px #00f3ff,0 0 12px #00f3ff,0 0 40px #0076ff;
}
.sky h1 span{color:#ff00ff;text-shadow:0 0 5px #f0f,0 0 12px #f0f}
.tagline{
  color:#ffd166;font:700 16px 'Orbitron',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  margin-top:6px;text-shadow:0 0 6px #ff6a00;
}

/* ---------- grid floor ---------- */
.grid-floor{
  height:34px;background:#020b14;
  background-image:linear-gradient(#00f2ff55 1px,transparent 1px),linear-gradient(90deg,#00f2ff33 1px,transparent 1px);
  background-size:40px 9px,40px 9px;
  border-top:2px solid #00f2ff;box-shadow:0 -6px 18px #00f2ff55;
}

/* ---------- tabs ---------- */
nav.tabs{
  display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;
  padding:10px 18px 0;background:#020b14;border-bottom:1px solid var(--accent-glow);
}
.tab{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  font:700 16px 'Orbitron',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-glow);border-bottom:none;border-radius:6px 6px 0 0;
  text-decoration:none;cursor:pointer;
}
.tab:hover,.tab:focus-visible{text-decoration:none;box-shadow:0 0 10px var(--accent-glow)}
.tab.on{color:#020b14;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.tab.ext{color:#ff9e3d;border-color:#ff9e3d88;margin-left:auto}

/* ---------- layout ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
/* framed panel: opt-in via class="sec" (bare <section> stays unframed) */
.sec{
  margin:0 0 20px;padding:16px;border:1px solid var(--accent);border-radius:8px;
  background:rgba(8,12,20,.95);box-shadow:0 0 12px var(--accent-glow);
}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.card{padding:12px 14px;background:#1f2630;border:1px solid var(--accent);border-radius:8px}
.card .lbl{font:700 16px 'Orbitron',sans-serif;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.card .big{font:700 30px/1.2 'Orbitron',sans-serif;color:#fff;text-shadow:0 0 8px var(--accent);margin:4px 0}
.card .sub{font-size:18px;opacity:.75}

/* key/value rows: <div class="metrics"><div class="m"><span class="k">Wind</span><span class="v">12 mph</span></div>...</div> */
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:12px 0}
.m{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--accent-glow)}
.k{font:700 16px 'Orbitron',sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.v{font-weight:600;text-align:right;white-space:nowrap}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;
  font:600 18px/1.2 'Roboto Mono',Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:6px;
  cursor:pointer;text-decoration:none;
}
.btn:hover,.btn:focus-visible{text-decoration:none;box-shadow:0 0 10px var(--accent-glow)}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn.primary{color:#ff9e3d;border:2px solid #ff6a00;background:#ff6a001a;box-shadow:0 0 14px #ff6a0066}
.btn.ok{color:#39ff14;border-color:#39ff14;background:#39ff141a;box-shadow:0 0 14px #39ff1466}

/* ---------- status lines, pills, timestamps ---------- */
.line{margin:4px 0}
.ok{color:#39ff14}
.warn{color:#ff9e3d}
.err{color:#ff3b5c}
.line.ok{color:#39ff14}
.line.warn{color:#ff9e3d}
.line.err{color:#ff3b5c}
.pill{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font:700 16px 'Orbitron',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);background:var(--accent-glow);
}
.updated{font-size:18px;color:var(--muted);margin:8px 0 0}
.muted{color:var(--muted)}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.visually-large{font-size:20px;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:700px){
  .cards{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
  /* tabs: one horizontally scrollable row instead of wrapping to four
     rows; pages scroll .tab.on into view after DOMContentLoaded */
  nav.tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x proximity}
  .tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center}
  .tab.ext{margin-left:0}
}
@media (max-width:600px){
  /* phone header: fixed 100 px, tagline hidden (see the file comment).
     The h1 may wrap to two lines (2 x 22 px) inside the 100 px; the ridge
     is 40 px tall at the bottom and the sun sits at the right edge, so
     neither covers the h1 (verified in shots/index-360.png). */
  .sky{height:100px;padding:0}
  .sun{width:64px;height:64px;left:auto;right:10px;margin-left:0;top:18px}
  .sky svg{height:40px}
  .title{position:absolute;left:12px;top:10px;right:84px}
  .title h1,.sky h1{font-size:20px}
  .tagline{display:none}
  nav.tabs{padding:8px 10px 0}
  .tab{padding:8px 10px;font-size:16px}
  .tab.ext{margin-left:0}
  .wrap{padding:12px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Map (Task 6) */
/* Inline SVG lower-48 outline with one pin per household (js/map.js). */
.map-wrap{position:relative;width:100%;max-width:960px;margin:0 auto 16px;
  border:1px solid rgba(0,242,255,.35);border-radius:8px;background:rgba(0,242,255,.04);
  box-shadow:0 0 18px rgba(0,242,255,.15)}
svg.map{display:block;width:100%;height:auto;aspect-ratio:960/600;touch-action:manipulation}
svg.map .outline{fill:rgba(0,242,255,.07);stroke:#00f2ff;stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(0,242,255,.6))}
/* .pin outline:none is safe: :focus-visible circle.dot below is the focus indicator. */
.pin{cursor:pointer;outline:none}
.pin circle.hit{fill:transparent;stroke:none}
.pin circle.dot{stroke:#00f2ff;stroke-width:2;filter:drop-shadow(0 0 5px #00f2ff)}
.pin:hover circle.dot,.pin:focus-visible circle.dot,.pin.open circle.dot{stroke:#fff;stroke-width:2.5;
  filter:drop-shadow(0 0 9px #00f2ff)}
.pin.nodata circle.dot{fill:#6c7a89;stroke:#9aa5b1;filter:none}
.pin-label{font:700 12px Orbitron,sans-serif;text-transform:uppercase;letter-spacing:.06em;fill:#e0e0e0;
  paint-order:stroke;stroke:#020b14;stroke-width:4px;stroke-linejoin:round;
  opacity:0;pointer-events:none;transition:opacity .15s}
.pin.open .pin-label{opacity:1}
.inset rect{fill:rgba(2,11,20,.85);stroke:#00f2ff;stroke-width:1.5;filter:drop-shadow(0 0 4px rgba(0,242,255,.5))}
.inset-title{font:700 12px Orbitron,sans-serif;text-transform:uppercase;letter-spacing:.08em;fill:#00f2ff}


/* Pages (Task 7) */
/* Gold tab for Dad & Kev's Book Corner. */
.tab.gold{color:#ffd166;border-color:#ffd16688}
.tab.gold.on{color:#020b14;background:#ffd166;box-shadow:0 0 14px #ffd166}
/* Gold card (home page Book Corner link). Whole card is the tap target. */
.card.gold{display:block;border-color:#ffd166;box-shadow:0 0 12px #ffd16655;color:#e0e0e0;text-decoration:none}
.card.gold:hover,.card.gold:focus-visible{text-decoration:none;box-shadow:0 0 18px #ffd16699}
.card.gold .lbl{color:#ffd166}
.card.gold .big{font-size:22px;text-shadow:0 0 8px #ffd166}
/* Region heading emitted by the renderers. */
h2.region{margin-top:20px}
.sec h2.region:first-child{margin-top:0}
/* 3-day forecast columns inside a forecast card. */
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.day{padding:10px;border:1px solid var(--accent-glow);border-radius:6px;background:rgba(2,11,20,.5)}
.day .metrics{grid-template-columns:1fr;margin:8px 0}
.day img{display:block;margin:4px 0}
/* Sparkline of the next 24 h temps (currentColor). */
svg.spark{display:block;width:100%;max-width:240px;height:32px;color:var(--accent);margin-top:8px}
/* Home page extremes strip: Hottest / Coldest / Windiest. */
.extremes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
/* Family hub photo banner, framed in the page accent. */
.banner{display:block;width:100%;max-width:100%;height:auto;border:2px solid var(--accent);border-radius:8px;
  box-shadow:0 0 16px var(--accent-glow);margin:0 0 16px}
/* Hub / pick-a-family buttons: big, obvious, full width on phones. */
.hub-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.hub-btns .btn{width:100%;min-height:60px;font-size:20px}
/* Caption under the map: who, name, temp, condition in readable HTML text. */
.map-caption{min-height:1.6em;font-size:20px;text-align:center;margin:8px 0 0;color:var(--text)}
/* Dad's Corner joke box. */
#joke-section{display:none}
#joke-section.show{display:block}
#joke-text{white-space:pre-line;font-size:20px;font-style:italic;margin:8px 0 12px}
@media (max-width:700px){
  .days{grid-template-columns:1fr}
  .extremes{grid-template-columns:1fr}
  .hub-btns{grid-template-columns:1fr}
}