/* Brain: Runbooks/watts-bar (prototype, local-only)
   Repo: prototypes/water-system/site-chrome.css
   Purpose: the site chrome ported from the live watts.bar so the prototype reads as a
   real page, not just the cards: the sticky nav header, the footer, the single Airbnb
   cabin block, and the live-cam overlay controls (mute / volume / fullscreen / pause).
   Markup + structure mirror frontend/; values adapted to the prototype's :root tokens. */

:root { --f-dmserif: "DM Serif Text", Georgia, serif; }

/* ── HEADER / NAV ───────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.3rem;
  background: var(--paper-inset); padding: 0.7rem var(--ws-gutter); border-bottom: 1px solid var(--rule-faint);
  font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.site-brand { font-family: var(--f-dmserif); font-size: 1.5rem; font-weight: 400; color: var(--ink); text-decoration: none; letter-spacing: 0; text-transform: none; line-height: 1; flex-shrink: 0; }
.site-brand-dot { color: var(--ut-orange); }
.site-header-links { display: flex; align-items: center; gap: 0.5rem 1.25rem; flex: 1 1 auto; flex-wrap: wrap; }
.site-header-links a, .site-header-dropdown-trigger { color: var(--ink-soft); text-decoration: none; border: 0; background: none; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0.15rem 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.site-header-links a:hover, .site-header-links a[aria-current="page"], .site-header-dropdown-trigger:hover, .site-header-dropdown-trigger[aria-expanded="true"] { color: var(--ink); border-bottom-color: var(--rule-faint); }
.site-brand:focus-visible, .site-header-links a:focus-visible, .site-header-dropdown-trigger:focus-visible, .site-header-dropdown-panel a:focus-visible, .site-live-chip:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 3px; }
.site-header-dropdown { position: relative; }
.site-header-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.25em; }
.site-header-dropdown-caret { font-size: 0.7em; transition: transform 0.18s ease; }
.site-header-dropdown-trigger[aria-expanded="true"] .site-header-dropdown-caret { transform: rotate(180deg); }
.site-header-dropdown-panel { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 210px; background: var(--paper-inset); border: 1px solid var(--rule-faint); border-radius: 10px; box-shadow: var(--shadow-light); padding: 0.5rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 60; }
.site-header-dropdown-trigger[aria-expanded="true"] + .site-header-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.site-header-dropdown-panel a { color: var(--ink-soft); text-decoration: none; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 0.9rem; padding: 0.45rem 0.6rem; border-radius: 6px; white-space: nowrap; }
.site-header-dropdown-panel a:hover { background: var(--water-soft); color: var(--ink); }
/* live conditions chip (air temp + condition + water temp), hydrated from weather.json */
.site-live-chip { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--ink-faint); border-radius: 999px; padding: 0.28rem 0.7rem; background: var(--paper-inset); text-decoration: none; flex-shrink: 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink); }
.site-live-air, .site-live-water { display: inline-flex; align-items: center; gap: 0.32rem; }
.site-live-water { padding-left: 0.5rem; border-left: 1px solid var(--rule-faint); color: var(--water-text); font-weight: 600; }
.site-live-water::before { content: ""; }
.site-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #c0c0c0; flex-shrink: 0; }
.site-live-chip[data-state="connected"] .site-live-dot { background: var(--live-green); box-shadow: 0 0 0 0 rgba(47,166,106,0.5); animation: site-live-pulse 2.6s ease-out infinite; }
@keyframes site-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,166,106,0.5); } 70% { box-shadow: 0 0 0 6px rgba(47,166,106,0); } 100% { box-shadow: 0 0 0 0 rgba(47,166,106,0); } }
@media (prefers-reduced-motion: reduce) { .site-live-chip[data-state="connected"] .site-live-dot { animation: none; } }
/* chip + nav hover/tap feedback */
.site-live-chip { transition: border-color 0.2s ease, transform 0.12s ease; }
.site-live-chip:hover { border-color: var(--water); }
.site-live-chip:active { transform: scale(0.97); }
.site-header-links a:active, .site-header-dropdown-trigger:active { color: var(--ink); }
.site-header-burger:active { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .site-live-chip { transition: border-color 0.2s ease; } .site-live-chip:active { transform: none; } }
/* burger + mobile sheet (hidden on desktop) */
.site-header-burger { display: none; }
.site-header-sheet { display: none; }
@media (max-width: 820px) {
  .site-header { gap: 0.7rem; flex-wrap: nowrap; }
  .site-header-links { display: none; }
  .site-header-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; padding: 7px; background: none; border: 0; cursor: pointer; order: -1; flex-shrink: 0; }
  .site-header-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .site-header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-brand { flex: 1 1 auto; }
  .site-live-chip { border: 0; padding: 0; gap: 0.4rem; font-size: 0.74rem; }
  .site-header-sheet { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper-inset); border-bottom: 1px solid var(--rule-faint); box-shadow: var(--shadow-light); padding: 0.4rem var(--ws-gutter) 1.1rem; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.26s ease, visibility 0.26s; }
  .site-header-sheet[aria-hidden="false"] { max-height: 82vh; overflow-y: auto; visibility: visible; }
  .site-header-sheet-section { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0; border-top: 1px solid var(--rule-ghost); }
  .site-header-sheet-section:first-child { border-top: 0; }
  .site-header-sheet-heading { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 600; color: var(--ink-faint); margin: 0.35rem 0 0.15rem; }
  .site-header-sheet a { color: var(--ink-soft); text-decoration: none; font-family: var(--body); font-size: 0.95rem; padding: 0.5rem 0; }
  .site-header-sheet a:hover { color: var(--ink); }
}

/* ── IN-PAGE SECTION NAV: a FLOATING pill-cluster, its own supplemental wayfinder rather
   than a second full-width bar. It lifts off the page (gap under the header + soft shadow +
   full rounding), and a single "you are here" highlight GLIDES to the active section as you
   scroll (JS wirePagenav positions .pagenav-marker + toggles .is-visible). ─────────────── */
/* section-identity accents: the highlight morphs to each section's OWN hue as it travels --
   Cam live-green, Now burnt-orange, Weather gold, Water teal, Wildlife moss (JS maps them). */
:root { --pn-now: #c25a1a; --pn-now-soft: rgba(255, 130, 0, 0.15); --pn-wea-soft: color-mix(in srgb, var(--wx-accent) 20%, transparent); }
@media (prefers-color-scheme: dark) { :root { --pn-now: #f0a066; --pn-now-soft: rgba(255, 150, 80, 0.24); } }
.pagenav { position: fixed; top: calc(var(--site-header-h, 52px) + 9px); left: 0; right: 0; z-index: 40; pointer-events: none;
  display: flex; justify-content: center; padding: 0 var(--ws-gutter);
  transform: translateY(-14px) scale(0.98); opacity: 0;
  transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.pagenav.is-visible { transform: translateY(0) scale(1); opacity: 1; }
.pagenav-inner { pointer-events: none; position: relative; width: max-content; max-width: 100%;
  display: flex; gap: 2px; padding: 5px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  background: color-mix(in srgb, var(--paper-inset) 90%, transparent); backdrop-filter: blur(14px) saturate(1.35); -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid var(--rule-faint); border-radius: 999px;
  box-shadow: 0 6px 22px rgba(40, 44, 42, 0.13), 0 1.5px 4px rgba(40, 44, 42, 0.10); }
.pagenav.is-visible .pagenav-inner { pointer-events: auto; }
.pagenav-inner::-webkit-scrollbar { display: none; }
@media (prefers-color-scheme: dark) {
  .pagenav-inner { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42), 0 1.5px 4px rgba(0, 0, 0, 0.32); }
}
/* the gliding highlight -- one element that travels to the active section (JS sets x + width) */
.pagenav-marker { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px;
  background: var(--water-soft); opacity: 0; pointer-events: none; color: var(--water-text);
  /* x + width are SCROLL-LINKED (set live in JS, no transition); only the section colour morphs */
  transition: background 0.42s ease, opacity 0.22s ease; }
.pagenav.is-visible .pagenav-marker[data-on] { opacity: 1; }
/* arrival: a soft ring blooms in the section's hue when the highlight lands on a new section */
.pagenav-marker.is-arrive { animation: pn-arrive 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pn-arrive { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 30%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* a single glass glint sweeps the capsule ONCE when the wayfinder first appears, then rests
   off-screen (Eli: no looping shimmer). JS adds .pn-shimmer once on first reveal. Sits over
   the bg + marker, under the text. */
.pagenav-inner::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.09) 48%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.09) 52%, transparent 62%);
  background-size: 220% 100%; background-position: -25% 0; }
.pagenav.pn-shimmer .pagenav-inner::after { animation: pn-sheen 2.4s ease-in-out 0.25s 1; }
@keyframes pn-sheen { from { background-position: 125% 0; } to { background-position: -25% 0; } }
.pagenav-pill { position: relative; z-index: 1; flex: 0 0 auto; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.07em; font-size: 11px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 6px 13px; border-radius: 999px; white-space: nowrap; transition: color 0.18s ease, transform 0.1s ease; }
.pagenav-pill:hover { color: var(--ink); }
.pagenav-pill:active { transform: scale(0.93); }
.pagenav-pill[aria-current="true"] { color: var(--pn-ink, var(--water-text)); }
.pagenav-pill:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .pagenav { transition: opacity 0.25s ease; transform: none; }
  .pagenav-marker { transition: background 0.3s ease, opacity 0.2s ease; }
  .pagenav-pill:active { transform: none; }
  .pagenav-inner::after { animation: none; opacity: 0; }
  .pagenav-marker.is-arrive { animation: none; }
}
/* Phones: dock the wayfinder to the BOTTOM and keep it always visible -- thumb-reachable and
   persistent (JS keeps .is-visible on at this width, and it rises up to enter). env(...,0px)
   + a gap, no hardcoded safe-area floor; browser chrome gives clearance and PWA safe-area
   kicks in automatically if this site ever enables viewport-fit=cover. Body gets clearance
   so nothing hides behind the floating cluster at the end of the page. */
@media (max-width: 599px) {
  .pagenav { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateY(16px) scale(0.98); }
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); }
}
/* anchored sections clear the header + the section bar when you jump to them */
#wx-cam, #aag-card, #wx-card, #ws-card, #wl-card, #faqx { scroll-margin-top: calc(var(--site-header-h, 52px) + 52px); }

/* ── SCROLL-REVEAL: each content block settles up into place as you reach it. JS-gated
   (.js) so no-JS / headless renders every card visible; reduced-motion shows them flat. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── AIRBNB CABIN BLOCK (the one ad) ────────────────────────────────────────── */
.cabin-stay { display: block; position: relative; margin: 0 0 18px; text-decoration: none; color: inherit; background: #0a1820; overflow: hidden; isolation: isolate; min-height: clamp(300px, 44vw, 440px); border: 1px solid var(--rule-faint); border-radius: 14px; transition: transform 0.18s ease, border-color 0.2s ease; }
.cabin-stay-image { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.cabin-stay:hover .cabin-stay-image, .cabin-stay:focus-visible .cabin-stay-image { transform: scale(1.03); }
.cabin-stay:active { transform: scale(0.994); }
.cabin-stay:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; }
/* native content block by design (Eli): no "ad" label/tag/sponsored rel -- it reads as
   another content card so ad blockers don't strip it; disclosure lives in About-this-site. */
.cabin-stay-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,24,32,0.10) 0%, rgba(10,24,32,0.55) 48%, rgba(10,24,32,0.96) 100%); display: flex; align-items: flex-end; padding: 1.4rem 1.5rem 1.55rem; }
.cabin-stay-content { color: rgba(255,255,255,0.96); max-width: 580px; }
.cabin-stay-eyebrow { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.95); display: inline-flex; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.cabin-stay-rating { color: var(--ut-orange); letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 0.25em; }
.cabin-stay-star { width: 1.05em; height: 1.05em; fill: var(--ut-orange); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55)); display: inline-block; vertical-align: -0.15em; }
.cabin-stay-title { font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 5.5vw, 2.1rem); line-height: 1.08; letter-spacing: -0.01em; color: #fff; margin-bottom: 0.5rem; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.cabin-stay-body { font-family: var(--body); font-size: clamp(0.92rem, 3.7vw, 1.02rem); line-height: 1.5; color: rgba(255,255,255,0.95); font-weight: 500; margin-bottom: 0.85rem; max-width: 56ch; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.cabin-stay-cta { font-family: var(--body); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 1px; display: inline-flex; align-items: center; gap: 0.35em; transition: border-color 0.2s, gap 0.2s; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.cabin-stay:hover .cabin-stay-cta, .cabin-stay:focus-visible .cabin-stay-cta { border-color: #fff; gap: 0.5em; }

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */
.site-footer { margin-top: clamp(2.5rem, 6vw, 4rem); padding: 2.3rem 0 1.4rem; border-top: 1px solid var(--rule-faint); background: var(--paper-inset); }
.site-footer-inner { max-width: var(--ws-max); margin-inline: auto; padding-inline: var(--ws-gutter); }
.site-footer h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 0 0 0.6rem; }
.site-footer h4 { font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 0.5rem; }
.site-footer p { font-family: var(--body); font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 0.7rem; max-width: 70ch; }
.site-footer a { color: var(--water-text); text-decoration: underline; text-underline-offset: 2px; }
/* Footer top: narrative left, the engage rail (corrections + more-link) right, so the
   row fills the width at a readable measure instead of one column capped at ~55%. */
.site-footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.8rem clamp(2rem, 5vw, 3.5rem); align-items: start; margin: 0 0 2.2rem; }
@media (max-width: 820px) { .site-footer-top { grid-template-columns: 1fr; gap: 1.7rem; margin-bottom: 1.9rem; } }
.site-footer-about { margin: 0; }
.site-footer-about > summary { list-style: none; cursor: default; }
.site-footer-about > summary::-webkit-details-marker { display: none; }
.site-footer-engage { display: flex; flex-direction: column; gap: 1rem; }
.site-footer-corrections { margin: 0; background: var(--water-soft); border-radius: 10px; padding: 1.1rem 1.3rem; }
.site-footer-morelink { font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--water-text); text-decoration: none; align-self: flex-start; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.site-footer-morelink:hover { border-bottom-color: var(--water-text); }
.site-footer-sitemap { margin: 0 0 1.6rem; }
.site-footer-sitemap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem 1.6rem; margin-top: 0.4rem; }
@media (max-width: 900px) { .site-footer-sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .site-footer-sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
.site-footer-sitemap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.site-footer-sitemap ul a { font-family: var(--body); font-size: 0.88rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; align-self: flex-start; }
.site-footer-sitemap ul a:hover { color: var(--ink); border-bottom-color: var(--rule-faint); }
.site-footer-bottom { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule-ghost); font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink-faint); }
.site-footer-bottom a { color: var(--ink-soft); }
@media (max-width: 720px) { .site-footer-about > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .site-footer-about > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform 0.2s; } .site-footer-about[open] > summary::after { transform: rotate(-135deg); } }

/* ── LIVE-CAM OVERLAY CONTROLS (mute / volume / fullscreen / pause) ──────────── */
/* the toprow: a LIVE/provenance pill + the audio control, top-left over the cam */
.wx-cam-toprow { position: absolute; top: clamp(12px, 3vw, 22px); left: clamp(14px, 4vw, 34px); z-index: 3; display: inline-flex; align-items: stretch; background: rgba(8,16,22,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); border-radius: 7px; overflow: hidden; transition: opacity 0.3s ease; }
/* the LIVE status pill stays put; only the fullscreen button fades when idle (returns on
   hover/tap) so the marquee status is always glanceable. (Eli) */
.wx-cam[data-controls="dimmed"] .wx-cam-ctl { opacity: 0; pointer-events: none; }
.wx-cam-livepill { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45rem 0.7rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.94); font-weight: 600; white-space: nowrap; }
/* rec dot shares the site live language: green LIVE (heartbeat) / amber connecting+reconnecting / grey offline */
.wx-cam-rec { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--live-grey); flex-shrink: 0; }
.wx-cam[data-state="live"] .wx-cam-rec { background: var(--live-green); }
.wx-cam[data-state="live"] .wx-cam-rec::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live-green); animation: live-beat 2.6s cubic-bezier(0,0,0.2,1) infinite; }
/* connecting / reconnecting: the status dot becomes a small spinner -- a clear "loading live
   video" signal (the old over-the-photo sweep read like a glitch). Reduced-motion -> a static
   ring, still a legible loading cue. */
.wx-cam[data-state="connecting"] .wx-cam-rec, .wx-cam[data-state="reconnecting"] .wx-cam-rec {
  width: 12px; height: 12px; background: transparent;
  border: 2px solid color-mix(in srgb, var(--live-amber) 28%, transparent); border-top-color: var(--live-amber);
  animation: wx-cam-spin 0.7s linear infinite; }
@keyframes wx-cam-spin { to { transform: rotate(360deg); } }
.wx-cam[data-state="off"] .wx-cam-rec { background: var(--live-grey); }
@media (prefers-reduced-motion: reduce) { .wx-cam-rec::after, .wx-cam[data-state] .wx-cam-rec { animation: none; } }
/* OVERDRIVE go-live: the status dot pops bright as it ignites green (one-shot; kept small
   so the toprow's overflow:hidden can't clip it). Pairs with the video focus-pull. */
.wx-cam--golive .wx-cam-rec { animation: cam-dot-ignite 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cam-dot-ignite { 0% { transform: scale(2.3); filter: brightness(1.9); } 100% { transform: scale(1); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .wx-cam--golive .wx-cam-rec { animation: none; } }
@keyframes wx-rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.wx-cam-time { color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
/* while loading, drop the clock -- "Loading live video 10:14 PM" is noise; the time returns once live */
.wx-cam[data-state="connecting"] .wx-cam-time, .wx-cam[data-state="reconnecting"] .wx-cam-time { display: none; }
.wx-cam-sep { margin: 0 0.5em; opacity: 0.5; }
.wx-cam-colon { animation: wx-clock-blink 1s steps(1, end) infinite; }
@keyframes wx-clock-blink { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
.wx-cam-ampm { font-size: 0.82em; opacity: 0.7; margin-left: 0.28em; }
@media (prefers-reduced-motion: reduce) { .wx-cam-colon { animation: none; } }
/* audio control: speaker + volume slider (slider expands when unmuted) */
.wx-cam-audio { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem 0.4rem 0.55rem; border-left: 1px solid rgba(255,255,255,0.16); }
.wx-cam-spk { width: 30px; height: 26px; padding: 0; background: none; border: 0; color: rgba(255,255,255,0.95); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wx-cam-spk svg { width: 18px; height: 18px; }
.wx-cam-spk .wx-spk-on { display: none; }
.wx-cam-audio[data-muted="false"] .wx-spk-off { display: none; }
.wx-cam-audio[data-muted="false"] .wx-spk-on { display: inline; }
/* muted-state EQ teaser: animated bars that say "there's live sound here, tap to listen" */
/* the bars are driven by the real audio analyser in JS (transform: scaleY); they rest
   low and only move with actual sound -- no fake animation. */
.wx-cam-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.wx-cam-audio[data-muted="true"] .wx-cam-eq { display: inline-flex; }
.wx-cam-eq i { width: 2.5px; height: 100%; background: rgba(255,255,255,0.88); border-radius: 1px; transform-origin: bottom; transform: scaleY(0.12); transition: transform 0.08s linear; }
.wx-cam-vol { -webkit-appearance: none; appearance: none; width: 0; opacity: 0; pointer-events: none; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.3); transition: width 0.22s ease, opacity 0.18s ease; }
.wx-cam-audio[data-muted="false"] .wx-cam-vol { width: 76px; opacity: 1; pointer-events: auto; }
.wx-cam-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.wx-cam-vol::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.wx-cam-spk:focus-visible, .wx-cam-ctl-btn:focus-visible, .wx-cam-vol:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* tap-press feedback on the cam controls (snappy on touch) */
.wx-cam-spk, .wx-cam-ctl-btn { transition: background 0.15s ease, transform 0.1s ease; }
.wx-cam-spk:active, .wx-cam-ctl-btn:active { transform: scale(0.9); }
@media (prefers-reduced-motion: reduce) { .wx-cam-spk:active, .wx-cam-ctl-btn:active { transform: none; } }
/* top-right buttons (fullscreen); desktop hover surfaces them */
.wx-cam-ctl { position: absolute; top: clamp(12px, 3vw, 22px); right: clamp(14px, 4vw, 34px); z-index: 3; display: inline-flex; gap: 0.4rem; transition: opacity 0.3s ease; }
.wx-cam-ctl-btn { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45rem 0.6rem; background: rgba(8,16,22,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); border-radius: 7px; color: rgba(255,255,255,0.94); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; }
.wx-cam-ctl-btn svg { width: 15px; height: 15px; }
.wx-cam-ctl-btn:hover { background: rgba(8,16,22,0.72); border-color: rgba(255,255,255,0.3); }
@media (hover: none) { .wx-cam-ctl-btn-label { display: none; } }
/* pause overlay */
.wx-cam-pause { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: rgba(8,16,22,0.45); cursor: pointer; color: #fff; text-align: center; }
.wx-cam-pause[data-shown="1"] { display: flex; }
.wx-cam-pause svg { width: 54px; height: 54px; opacity: 0.95; margin-bottom: 6px; }
.wx-cam-pause-eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; opacity: 0.85; }
.wx-cam-pause-text { font-family: var(--body); font-size: 0.95rem; font-weight: 600; }
/* offline state: a clear, on-voice message instead of a dead black rectangle.
   shown only when the cam reports data-state="off". */
/* Photo-fallback caption: a small note at the bottom over the live cam.jpg still (which
   the poster shows on data-state="off"), NOT a full-screen black takeover. */
.wx-cam-offline { position: absolute; left: 0; right: 0; bottom: clamp(13px, 3.5vw, 28px); z-index: 3; display: none; flex-direction: column; align-items: center; gap: 1px; text-align: center; padding: 0 1rem; color: rgba(255,255,255,0.96); text-shadow: 0 1px 8px rgba(0,0,0,0.65); }
.wx-cam[data-state="off"] .wx-cam-offline { display: flex; }
.wx-cam-offline-title { font-family: var(--display); font-size: clamp(0.95rem, 2.6vw, 1.12rem); font-weight: 500; letter-spacing: 0.005em; }
.wx-cam-offline-sub { font-family: var(--body); font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.85); }

/* CAM GONE DARK (2026-08-13). Distinct from data-state="off" above: that one means
   "video is down, here is the latest photo" and is CORRECT while the still is fresh.
   This one means the still itself stopped over an hour ago, so there is no honest
   photo left to show. A 5-day-old NIGHT frame is a black rectangle sitting on top of
   the weather people came for. Hide the cam completely and let the data lead.
   html[data-cam-dark="1"] is stamped at the EDGE by _middleware.js (predicate in
   frontend/cam-dark.js), so the first paint is already right and the stale frame
   never flashes. Recovery is per page load; the encoder self-restarts in ~11s, so a
   dark cam means something upstream is genuinely broken.
   See Runbooks/watts-bar/cam-encode-ct241.md. */
.wx-cam-dark-note { display: none; margin: 0 0 clamp(14px, 3vw, 22px); font-family: var(--body); font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
html[data-cam-dark="1"] #wx-cam { display: none; }
html[data-cam-dark="1"] .wx-cam-dark-note { display: block; }
/* ...and drop the section-nav jump to it. #wx-cam is display:none in this state, so the
   "Cam" pill becomes a link that scrolls nowhere — worse on mobile, where that nav is a
   persistent bottom bar. Targeted by href so it survives any renaming of the pill classes. */
html[data-cam-dark="1"] a[href="#wx-cam"] { display: none; }
:fullscreen .wx-camhero { aspect-ratio: auto; max-height: none; height: 100%; border-radius: 0; }
:fullscreen .wx-camhero-video { object-fit: contain; background: #000; }


/* --- html[data-night="1"] mirror of the prefers-color-scheme:dark rules above, so the
   site's time-based night theme also darkens this homepage (added at homepage cutover) --- */
html[data-night="1"] { --pn-now: #f0a066; --pn-now-soft: rgba(255, 150, 80, 0.24); }
html[data-night="1"] .pagenav-inner { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42), 0 1.5px 4px rgba(0, 0, 0, 0.32); }

/* Harden: visually-hidden utility for the live-chip SR region + descriptive labels. */
.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; }
/* Harden: keyboard skip-link (off-screen until focused). */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--paper-inset); color: var(--ink); padding: 0.6rem 1rem; border-radius: 0 0 8px 0; text-decoration: none; box-shadow: var(--shadow-light); }
.skip-link:focus, .skip-link:focus-visible { left: 0; outline: 2px solid var(--water); outline-offset: 2px; }