/* ============================================================
   B3BOP.render — sky.css  (time-of-day sky, driven by sky.js)
   Colours come from the brand guide's three-mode system (palette_skies.html):
   Open Sky (day) · Signal Dusk (home) · 2AM Ramen (night), plus dawn + golden hour in between.
   sky.js writes --sky-* variables and data-sky-theme="light|dark" on the element it runs on.
   ============================================================ */
.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top, #0E0A07) 0%, var(--sky-mid, #1C130B) 55%, var(--sky-bottom, #3A2410) 100%);
}
.sky__glow {                                  /* warm light pooling on the horizon */
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 45% at 50% 100%, var(--sky-glow, rgba(173, 52, 52, 0.35)), transparent 72%);
}
.sky__stars {
  position: absolute;
  inset: 0 0 35% 0;
  opacity: var(--sky-stars, 0);
}
.sky__stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #E9E0CF;
  box-shadow: 0 0 4px rgba(233, 224, 207, 0.8);
  animation: skyTwinkle 4s ease-in-out infinite;
}
.sky__orb {                                   /* sun by day, moon by night; sky.js moves it along an arc */
  position: absolute;
  width: clamp(44px, 9vmin, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: var(--sky-orb-opacity, 0);
  left: var(--sky-orb-x, 50%);
  top: var(--sky-orb-y, 50%);
}
.sky__orb--sun {
  background: radial-gradient(circle at 45% 40%, #FFE3B0, #F2B35E 55%, #E08A3C);
  box-shadow: 0 0 60px 20px rgba(242, 179, 94, 0.45), 0 0 160px 60px rgba(224, 138, 60, 0.25);
}
.sky__orb--moon {
  background: radial-gradient(circle at 38% 35%, #F4EEE2, #D9D0BF 60%, #B9AF9C);
  box-shadow: 0 0 40px 10px rgba(233, 224, 207, 0.25), inset -0.6em -0.4em 0 rgba(0, 0, 0, 0.12);
}
@keyframes skyTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- light theme (daytime sky): ink text instead of light text, darker accents for contrast ---- */
[data-sky-theme="light"] {
  --clr-text-bright: #0C1817;
  --clr-text:        #1F3533;
  --clr-text-dim:    #3A504D;
  --clr-cyan:        #0B5A53;               /* teal ink: the bright signal cyan is unreadable on a pale sky */
  --clr-orange:      #8F2828;
  --clr-ember-text:  #4A4036;               /* Ink (v3.2) for the tagline + frequency on the pale sky */
  --clr-ochre:       #4A4036;
  --grad-dark-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(12, 24, 23, 0.18) 100%);
}
[data-sky-theme="light"] .wordmark { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
/* the ticker hugs the top edge, which stays darker than the mid sky at golden hour: deeper inks there */
[data-sky-theme="light"] .ticker { --clr-cyan: #073A35; --clr-ember-text: #19191B; --clr-text-dim: #1F3533; }

/* The sky is themed in two bands. TOP (ticker, wordmark, tagline) follows data-sky-theme (the mid sky).
   GROUND (prompt, voice button, work line, links, caption) follows data-sky-ground: the low sky + horizon glow,
   which turns orange at dawn and golden hour while the mid sky is still dark (sky.js). */
[data-sky-ground="dark"] :is(.prompt, .note, .links, .voice-cap) {
  --clr-text-bright: #E8EAF0;
  --clr-text:        #C8CAD0;
  --clr-text-dim:    #B8BCC4;               /* brighter than the page's #8C909B: the dusk horizon glow lifts the ground */
  --clr-cyan:        #00E5D1;
  --clr-cyan-dim:    rgba(0, 229, 209, 0.12);
  --clr-ochre:       #C89A66;
}
[data-sky-ground="light"] :is(.prompt, .note, .links, .voice-cap) {
  --clr-text-bright: #0C1817;
  --clr-text:        #12211F;
  --clr-text-dim:    #172B29;
  --clr-cyan:        #073A35;               /* deep teal ink: holds 4.5:1 on the orange dawn / golden-hour horizon */
  --clr-cyan-dim:    rgba(7, 58, 53, 0.12);
  --clr-ochre:       #4A2A06;               /* lamp-brown ink */
}
[data-sky-ground="light"] .prompt { border-bottom-color: rgba(7, 58, 53, 0.4); }
[data-sky-ground="light"] .hear { border-color: rgba(7, 58, 53, 0.5); }
[data-sky-ground="light"] .work-line a { border-bottom-color: rgba(74, 42, 6, 0.5); }

/* murky light (mid-tone sky, neither text colour reaches 7:1): the signal goes monochrome. Accents fall back to the
   band's strongest text colour and the halo thickens, so nothing tinted sits on a sky it can't beat. */
[data-sky-contrast="low"] .tagline { --clr-ember-text: var(--clr-text-bright); }
[data-sky-contrast="low"] .mascot__caption { --clr-cyan: var(--clr-text-bright); }
[data-sky-contrast="low"] .ticker { --clr-cyan: var(--clr-text-bright); --clr-ember-text: var(--clr-text-bright); --clr-text-dim: var(--clr-text-bright); }
[data-sky-ground-contrast="low"] :is(.prompt, .note, .links, .voice-cap) {
  --clr-cyan: var(--clr-text-bright);
  --clr-ochre: var(--clr-text-bright);
  --clr-text: var(--clr-text-bright);
  --clr-text-dim: var(--clr-text-bright);
}

/* soft halo behind text: keeps it readable while the sky passes through mid-tones (dawn, golden hour) */
[data-sky-theme="dark"] :is(.wordmark, .tagline, .ticker, .mascot__caption),
[data-sky-ground="dark"] :is(.soon, .work-line, .links, .prompt) {
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4);
}
[data-sky-theme="light"] :is(.tagline, .ticker, .mascot__caption),
[data-sky-ground="light"] :is(.soon, .work-line, .links, .prompt) {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 2px rgba(255, 255, 255, 0.5);
}
[data-sky-theme="dark"][data-sky-contrast="low"] :is(.wordmark, .tagline, .ticker, .mascot__caption),
[data-sky-ground="dark"][data-sky-ground-contrast="low"] :is(.soon, .work-line, .links, .prompt) {
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.7);
}
[data-sky-theme="light"][data-sky-contrast="low"] :is(.wordmark, .tagline, .ticker, .mascot__caption),
[data-sky-ground="light"][data-sky-ground-contrast="low"] :is(.soon, .work-line, .links, .prompt) {
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.7);
}
[data-sky-theme] .wordmark, [data-sky-theme] .tagline, [data-sky-theme] .soon, [data-sky-theme] .work-line a,
[data-sky-theme] .links a, [data-sky-theme] .ticker, [data-sky-theme] .ticker__freq, [data-sky-theme] .prompt,
[data-sky-theme] .mascot__caption {
  transition: color 0.8s ease, border-color 0.8s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sky__stars i { animation: none; }
}

/* ---- visitor time control (sky_dial.js): clock button top-right, opens a small panel ---- */
.skydial {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 20;
  font-family: var(--font-body);
  color: #E9DCC4;
}
.skydial__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 18, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #E9DCC4;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.skydial__toggle { position: relative; }
.skydial__toggle::before { content: ""; position: absolute; inset: -8px -6px; }   /* ~44px tap area, same pill */
.skydial__toggle:hover, .skydial__toggle[aria-expanded="true"] { border-color: #3FA89A; background: rgba(12, 18, 18, 0.75); }
.skydial__icon { font-size: 0.95em; color: #F2B35E; }
.skydial.is-preview .skydial__toggle { border-color: rgba(200, 154, 102, 0.7); }   /* camel ring = not your real time */
.skydial__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(12, 18, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}
.skydial__panel[hidden] { display: none; }
.skydial__readout { display: flex; justify-content: space-between; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.skydial__phase { color: #C89A66; }
.skydial__mode { color: #8C9A97; }
.skydial__range { width: 100%; margin: 10px 0; accent-color: #3FA89A; }
.skydial__modes, .skydial__row { display: flex; flex-wrap: wrap; gap: 6px; }
.skydial__row { margin-top: 8px; }
.skydial__panel button {
  padding: 0.35em 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #E9DCC4;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.skydial__panel button:hover { border-color: #3FA89A; }
.skydial__live[aria-pressed="true"] { border-color: #00E5D1; color: #00E5D1; }
.skydial__live { margin-left: auto; }