/* ===========================================================================
   Laurel.WX channel - Star4000 theme.

   WHAT THIS IS

   A skin for the channel deck in the visual language of the 1990s WeatherSTAR
   4000, the box that drew Local on the 8s. It is scoped entirely under
   #channel[data-theme="star4000"], so every rule here is inert unless the deck
   asks for it, and removing the attribute restores the previous look exactly.

   WHY A SEPARATE FILE RATHER THAN app.css

   Themes are an axis of their own - the intention is more than one of them -
   and app.css is already 1800 lines serving the whole site. A theme that can
   be added and removed by one <link> and one attribute is a theme that can be
   reverted at 3am without a diff.

   THE DECOMPOSITION THAT MATTERS

   The original is NOT one fixed frame with swappable middles. Three things
   vary per screen and all three are properties of the SCREEN, not the chrome:

     - the gradient header's HEIGHT (Almanac runs it to 43% of frame height
       with live content sitting on it; everything else uses a short band)
     - the content field's TREATMENT - six of them, see --field below
     - whether the chrome appears at all (the warning slate suppresses it)

   So .s4k-hdr and .s4k-field are driven by [data-field] on the root, set by
   channel.js from a per-slide map.

   TWO CONTAINERS, DELIBERATELY

   The chrome - logo, clock, title, weather bar - sizes against the STAGE. The
   slide content sizes against the FIELD, which is its own container, because
   the field's height is only ever "whatever is left after the header and the
   bars" and that leftover changes with the viewport's aspect ratio. Sizing
   slide content in stage units clips it: at 16:9 the field is barely half the
   height it has at 4:3. Inside the field 100cqh IS the field, so a column
   budgeting to 90cqh fits at every aspect by construction.

   THE FONT

   --s4k-font wants the WeatherSTAR face. Until those files are installed it
   resolves to Chakra Petch: squared-off 90s-computer letterforms with eased
   corners and, unlike a pixel face, numerals that survive being read across a
   room. Drop a real @font-face family in front and nothing else changes.
   =========================================================================== */

#channel[data-theme="star4000"]{
  /* Measured off broadcast reference frames. */
  --s4k-indigo-deep:#2A2560;
  --s4k-indigo:#35307A;
  --s4k-orange:#E8821E;
  --s4k-orange-hot:#F59B3C;
  --s4k-gold:#F2C81E;
  --s4k-blue-flat:#28478C;
  --s4k-grey:#8A8A8A;
  --s4k-bar:#5E82C8;
  --s4k-bar-line:#9FB8E8;
  --s4k-ink:#FFFFFF;
  --s4k-warn:#8E1410;

  /* Ten hard stops, lerped #7B9BE0 -> #16349A. The banding is a colour-depth
     artefact of the original hardware and the most recognisable texture in the
     whole look, so it is explicit rather than a smooth gradient pretending to
     be one. */
  --s4k-bands:linear-gradient(to bottom,
    #7B9BE0 0%,#7B9BE0 10%, #7090D8 10%,#7090D8 20%,
    #6584D0 20%,#6584D0 30%, #5979C9 30%,#5979C9 40%,
    #4E6DC1 40%,#4E6DC1 50%, #4362B9 50%,#4362B9 60%,
    #3856B2 60%,#3856B2 70%, #2C4BAA 70%,#2C4BAA 80%,
    #213FA2 80%,#213FA2 90%, #16349A 90%,#16349A 100%);

  --s4k-font:"Star4000","Chakra Petch","Oxanium",ui-monospace,monospace;
  --s4k-sh:min(.42cqw,.56cqh) min(.42cqw,.56cqh) 0 #000;

  background:linear-gradient(to bottom,
    var(--s4k-indigo-deep) 0%, var(--s4k-indigo) 14%,
    var(--s4k-orange) 40%, var(--s4k-orange-hot) 50%, var(--s4k-orange) 60%,
    var(--s4k-indigo) 86%, var(--s4k-indigo-deep) 100%);
  container-type:size;
  container-name:s4kstage;
  font-family:var(--s4k-font);
  letter-spacing:.025em;
}

/* ------------------------------------------------------------- the frame -- */

#channel[data-theme="star4000"] .s4k-hdr{
  position:relative;flex:0 0 auto;z-index:4;
  height:min(19.4cqw,25.8cqh);
  background:
    linear-gradient(118deg, transparent 56%, var(--s4k-orange) 56%,
                    var(--s4k-orange-hot) 72%, transparent 72%),
    linear-gradient(to bottom, var(--s4k-indigo-deep), var(--s4k-indigo));
}
/* Almanac and anything else that wants live content on the bloom. */
#channel[data-theme="star4000"][data-field="tall"] .s4k-hdr{
  height:min(32cqw,43cqh);
  background:
    linear-gradient(118deg, transparent 56%, var(--s4k-orange) 56%,
                    var(--s4k-orange-hot) 72%, transparent 72%)
      no-repeat top/100% min(19.4cqw,25.8cqh),
    linear-gradient(to bottom, var(--s4k-indigo-deep) 0%, var(--s4k-indigo) 22%,
                    var(--s4k-orange) 62%, var(--s4k-orange-hot) 86%,
                    var(--s4k-orange) 100%);
}
/* The warning slate carries no chrome at all. */
#channel[data-theme="star4000"][data-field="warn"] .s4k-hdr,
#channel[data-theme="star4000"][data-field="warn"] .s4k-wxbar{display:none}

#channel[data-theme="star4000"] .s4k-logo{
  position:absolute;left:min(1.9cqw,2.5cqh);top:min(1.1cqw,1.5cqh);
  width:min(15.3cqw,20.4cqh);height:min(15.3cqw,20.4cqh);
  background:#F2F2F8;border-radius:min(2.2cqw,2.9cqh);
  padding:min(.9cqw,1.2cqh);
  box-shadow:min(.5cqw,.67cqh) min(.5cqw,.67cqh) 0 rgba(0,0,0,.45);
}
#channel[data-theme="star4000"] .s4k-logo-in{
  width:100%;height:100%;
  background:linear-gradient(to bottom,#4C78D8,#1B3C9E);
  border-radius:min(1.5cqw,2cqh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;gap:min(.5cqw,.67cqh);color:#fff;text-transform:uppercase;
}
#channel[data-theme="star4000"] .s4k-logo-1{font-size:min(3.1cqw,4.1cqh);letter-spacing:.06em}
#channel[data-theme="star4000"] .s4k-logo-2{font-size:min(4.6cqw,6.1cqh);letter-spacing:.08em;font-weight:700}

#channel[data-theme="star4000"] .s4k-title{
  position:absolute;left:min(18.6cqw,24.8cqh);top:min(.6cqw,.8cqh);
  right:min(30cqw,40cqh);
  color:var(--s4k-gold);text-transform:uppercase;font-weight:700;
  font-size:min(5.1cqw,6.8cqh);line-height:1.08;
  text-shadow:var(--s4k-sh);text-wrap:balance;
}
#channel[data-theme="star4000"] .s4k-clock{
  position:absolute;right:min(1.9cqw,2.5cqh);top:min(.9cqw,1.2cqh);
  text-align:right;line-height:1.14;color:var(--s4k-ink);
  font-variant-numeric:tabular-nums;text-shadow:var(--s4k-sh);
  text-transform:uppercase;
}
#channel[data-theme="star4000"] .s4k-clock-t{font-size:min(4.1cqw,5.5cqh);letter-spacing:.05em}
#channel[data-theme="star4000"] .s4k-clock-d{font-size:min(3.5cqw,4.7cqh);letter-spacing:.08em}

/* --------------------------------------------------- the rotating wx bar -- */
/* NOT .ch-bar - that is the deck's existing control bar (sound, volume, skip)
   and it keeps its own styling. This is a second, weather-carrying strip. */

#channel[data-theme="star4000"] .s4k-wxbar{
  flex:0 0 auto;height:min(10.3cqw,13.8cqh);
  background:var(--s4k-bar);
  border-top:min(.31cqw,.42cqh) solid var(--s4k-bar-line);
  display:flex;align-items:center;justify-content:space-around;
  gap:min(2cqw,2.7cqh);padding-inline:min(2.5cqw,3.3cqh);
  font-size:min(4.2cqw,5.6cqh);text-transform:uppercase;
  text-shadow:var(--s4k-sh);font-variant-numeric:tabular-nums;z-index:4;
}
#channel[data-theme="star4000"] .s4k-pair{white-space:nowrap;transition:opacity .34s}
#channel[data-theme="star4000"] .s4k-wxbar[data-fade="1"] .s4k-pair{opacity:0}
#channel[data-theme="star4000"] .s4k-k{color:var(--s4k-ink)}
#channel[data-theme="star4000"] .s4k-v{color:var(--s4k-gold);margin-left:.5em;font-weight:700}
#channel[data-theme="star4000"] .s4k-gap{display:inline-block;width:2.5em}
#channel[data-theme="star4000"] .s4k-attrib{
  font-family:ui-sans-serif,system-ui,sans-serif;text-transform:none;
  font-size:min(2.1cqw,2.8cqh);color:#D6E2FA;text-shadow:none;
  letter-spacing:.02em;opacity:.85;font-weight:400;
}
@media (max-aspect-ratio:1/1){
  #channel[data-theme="star4000"] .s4k-attrib{display:none}
}

/* ------------------------------------------------------------- the field -- */

#channel[data-theme="star4000"] .ch-body{
  container-type:size;container-name:s4kfield;
  overflow:hidden;
}
#channel[data-theme="star4000"][data-field="band"]   .ch-body{background:var(--s4k-bands)}
#channel[data-theme="star4000"][data-field="smooth"] .ch-body{
  background:linear-gradient(to bottom,var(--s4k-orange) 0%,#8C5A8E 22%,
             var(--s4k-indigo) 46%,#1B3C9E 78%,#16349A 100%);
}
#channel[data-theme="star4000"][data-field="flat"]  .ch-body{background:var(--s4k-blue-flat)}
#channel[data-theme="star4000"][data-field="tall"]  .ch-body{background:var(--s4k-grey)}
#channel[data-theme="star4000"][data-field="warn"]  .ch-body{background:var(--s4k-warn)}
#channel[data-theme="star4000"][data-field="radar"] .ch-body{background:#0A1222}

/* The slide itself: no card, no max-width, no entrance animation. The frame
   is the composition now. */
#channel[data-theme="star4000"] .ch-stage{
  padding:min(2.2cqw,4.5cqh) min(2.5cqw,3.3cqh);
  align-items:stretch;
}
#channel[data-theme="star4000"] .ch-slide{
  max-width:none;width:100%;
  display:flex;flex-direction:column;justify-content:center;
  min-height:0;
  animation:none;              /* the deck's ch-in slide-up reads wrong here */
  text-transform:uppercase;
  color:var(--s4k-ink);
  text-shadow:var(--s4k-sh);
}
/* The kicker is redundant: the gold frame title says the same thing, larger.
   Keeping both puts the screen's name on screen twice. */
#channel[data-theme="star4000"] .ch-kicker{display:none}

/* Provenance: HIDDEN in this theme, by request, and only in this theme.
   The classic deck still shows it and the text is still in the DOM for
   anything reading the page - it is a broadcast picture that cannot carry a
   paragraph of lowercase prose without losing its composition, not a decision
   that the sourcing stopped mattering. One line to bring back. */
#channel[data-theme="star4000"] .ch-src{display:none}

/* --------------------------------------------------------- almanac ------- */
/* The one screen CSS alone cannot reach from the deck's own markup, so
   channel.js supplies a different builder for it. Two day-columns sit ON the
   gradient header - which is why they render into .s4k-over rather than into
   .ch-stage, which clips - and the moon quarters sit on the flat grey field
   below, sized to whatever height is left rather than claiming a fixed
   amount. Claiming one is what cut them off. */

#channel[data-theme="star4000"] .s4k-over{
  position:absolute;inset:0;z-index:5;pointer-events:none;
}

#channel[data-theme="star4000"] .s4k-alm-head{
  position:absolute;
  left:min(2.5cqw,3.3cqh);right:min(2.5cqw,3.3cqh);
  top:min(13.5cqw,18cqh);
  display:grid;grid-template-columns:1.15fr 1fr 1fr;
  gap:min(.8cqw,1.1cqh) min(2cqw,2.7cqh);
  align-items:baseline;text-shadow:var(--s4k-sh);text-transform:uppercase;
}
#channel[data-theme="star4000"] .s4k-alm-day{
  color:var(--s4k-gold);font-size:min(4.6cqw,6.1cqh);
  text-align:center;font-weight:700;
}
#channel[data-theme="star4000"] .s4k-alm-lab{
  color:var(--s4k-ink);font-size:min(4.1cqw,5.5cqh);text-align:right;
}
#channel[data-theme="star4000"] .s4k-alm-val{
  color:var(--s4k-gold);font-size:min(4.1cqw,5.5cqh);text-align:center;
  font-variant-numeric:tabular-nums;font-weight:700;
}

/* The grey field: heading, then four discs filling the remainder. */
#channel[data-theme="star4000"][data-field="tall"] .ch-slide{
  justify-content:flex-start;height:100%;
}
#channel[data-theme="star4000"] .s4k-moon-h{
  color:var(--s4k-gold);font-size:min(4.4cqw,11cqh);font-weight:700;
  flex:0 0 auto;margin-bottom:min(1cqw,2cqh);text-shadow:var(--s4k-sh);
}
#channel[data-theme="star4000"] .s4k-moons{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:min(1.5cqw,3cqh);
}
#channel[data-theme="star4000"] .s4k-moon{
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center;gap:min(.8cqw,1.6cqh);min-height:0;
}
#channel[data-theme="star4000"] .s4k-moon-n{
  font-size:min(3.8cqw,9cqh);color:var(--s4k-ink);text-shadow:var(--s4k-sh);
}
#channel[data-theme="star4000"] .s4k-moon-d{
  font-size:min(3.4cqw,8cqh);color:var(--s4k-ink);
  font-variant-numeric:tabular-nums;text-shadow:var(--s4k-sh);
}
#channel[data-theme="star4000"] .s4k-moon-art{
  min-height:0;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;
}
#channel[data-theme="star4000"] .s4k-moon-art svg{
  width:100%;height:100%;min-height:0;max-height:100%;
}
#channel[data-theme="star4000"] .s4k-moon-now{
  flex:0 0 auto;margin-top:min(1cqw,2cqh);
  color:#2B2B2B;font-size:min(2.8cqw,6cqh);text-shadow:none;
}

/* ------------------------------------------------- current conditions ----- */

#channel[data-theme="star4000"] .ch-place{
  color:var(--s4k-gold);font-size:min(4cqw,8cqh);
  letter-spacing:.08em;font-weight:600;margin-bottom:.2em;
}
#channel[data-theme="star4000"] .ch-big{margin:0;align-items:flex-start}
#channel[data-theme="star4000"] .ch-temp{
  font-size:min(16cqw,34cqh);line-height:.92;font-weight:700;
  letter-spacing:0;color:var(--s4k-ink);font-variant-numeric:tabular-nums;
  text-shadow:min(.55cqw,.9cqh) min(.55cqw,.9cqh) 0 #000;
}
#channel[data-theme="star4000"] .ch-deg{
  font-size:min(6cqw,13cqh);color:var(--s4k-gold);font-weight:400;
}
#channel[data-theme="star4000"] .ch-cond{
  font-size:min(4.4cqw,10cqh);color:var(--s4k-ink);margin-bottom:.45em;
}

/* Label asks in white, value answers in gold. The convention holds across
   every screen, which is what makes it a convention and not decoration. */
#channel[data-theme="star4000"] .ch-grid{
  gap:min(1.8cqw,3.4cqh);margin-top:min(1cqw,2cqh);
}
#channel[data-theme="star4000"] .ch-cell{
  background:transparent;border:0;padding:0;
}
#channel[data-theme="star4000"] .ch-cell-k{
  font-size:min(2.8cqw,6cqh);letter-spacing:.12em;color:var(--s4k-ink);opacity:.95;
}
#channel[data-theme="star4000"] .ch-cell-v{
  font-size:min(5cqw,11cqh);color:var(--s4k-gold);font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------- the week / extended -- */
/* The original showed three days and only three. A ten-day strip squeezed to
   seven narrow columns is the one place this theme cannot follow it without
   a structural change to slideTenDay, so the columns are banded and given the
   gold rule, and pagination is left as a later change. */

#channel[data-theme="star4000"] .ch-week{gap:min(1.2cqw,2.4cqh)}
#channel[data-theme="star4000"] .ch-day{
  background:var(--s4k-bands);
  box-shadow:inset 0 0 0 min(.25cqw,.55cqh) var(--s4k-gold);
  border:0;border-radius:0;
  padding:min(1.2cqw,2.6cqh) min(.5cqw,1cqh);
}
#channel[data-theme="star4000"] .ch-day-n{
  font-size:min(3cqw,6.5cqh);color:var(--s4k-ink);letter-spacing:.08em;font-weight:700;
}
#channel[data-theme="star4000"] .ch-day-hi{
  font-size:min(4.6cqw,10cqh);color:var(--s4k-ink);font-weight:700;
  font-variant-numeric:tabular-nums;
}
#channel[data-theme="star4000"] .ch-day-lo{
  font-size:min(3.4cqw,7.5cqh);color:#C9D6F2;font-variant-numeric:tabular-nums;
}
#channel[data-theme="star4000"] .ch-day-p{
  font-size:min(2.4cqw,5.2cqh);color:var(--s4k-gold);margin-top:.3em;
}

/* --------------------------------------------------------------- alerts --- */
/* Deliberately NOT styled like the rest: no banding, no bloom, no gold, no
   chrome, and the CRT pass is suppressed. The product's text is the only
   thing on screen and nothing competes with it - which is also exactly what
   the original did. */

#channel[data-theme="star4000"] .ch-alert{
  border-left:0;padding-left:0;
}
#channel[data-theme="star4000"] .ch-alert-ev{
  font-size:min(6cqw,14cqh);line-height:1.08;font-weight:700;
  color:var(--s4k-ink);text-wrap:balance;
}
#channel[data-theme="star4000"] .ch-alert-head{
  font-size:min(3.7cqw,8cqh);line-height:1.44;color:var(--s4k-ink);
}
#channel[data-theme="star4000"] .ch-alert-inst{
  font-size:min(3cqw,6.4cqh);line-height:1.5;color:#F3C9C7;
  text-transform:none;letter-spacing:.01em;
}
#channel[data-theme="star4000"][data-field="warn"] .ch-src{color:#F3C9C7;opacity:.85}

/* ------------------------------------------------------------ why / misc -- */

#channel[data-theme="star4000"] .ch-band,
#channel[data-theme="star4000"] .ch-crate{
  font-size:min(6cqw,13cqh);font-weight:700;letter-spacing:0;color:var(--s4k-gold);
}
#channel[data-theme="star4000"] .ch-because{
  font-size:min(3.4cqw,7.5cqh);color:var(--s4k-ink);margin-top:.3em;
}
#channel[data-theme="star4000"] .ch-note{
  font-size:min(2.6cqw,5.6cqh);color:#DCE6F5;margin-top:.6em;
  text-transform:none;letter-spacing:.01em;
}

/* ------------------------------------------------------- around the region- */

#channel[data-theme="star4000"] .ch-reg-r{
  display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:min(2cqw,4cqh);
  padding:min(.9cqw,2cqh) 0;
  font-size:min(3.6cqw,8cqh);
  border-bottom:1px solid rgba(255,255,255,.14);
}
#channel[data-theme="star4000"] .ch-reg-n{color:var(--s4k-gold);font-weight:700}
#channel[data-theme="star4000"] .ch-reg-c{color:#D6E2FA;font-size:min(2.6cqw,5.6cqh)}
#channel[data-theme="star4000"] .ch-reg-t{
  color:var(--s4k-ink);font-weight:700;font-variant-numeric:tabular-nums;
  min-width:2.6em;text-align:right;
}
#channel[data-theme="star4000"] .ch-reg-m{
  color:#C9D6F2;font-size:min(2.4cqw,5.2cqh);font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------- radar --- */
/* Full-bleed: the banded field is suppressed and the map owns the frame. The
   radar's own caption is restyled to sit as a gold corner label. */

#channel[data-theme="star4000"] .ch-radarcap{
  font-family:var(--s4k-font);text-transform:uppercase;
  color:var(--s4k-gold);font-size:min(3cqw,6.4cqh);
  letter-spacing:.1em;text-shadow:var(--s4k-sh);font-weight:700;
}

/* ------------------------------------------------------------- CRT pass --- */
/* Scanlines, a faint phosphor stripe, centre bloom and a corner vignette.
   Suppressed entirely on the warning slate, and on the radar, where it would
   cost legibility on the one screen somebody might actually read intensity
   bands off. */

#channel[data-theme="star4000"] .s4k-crt{
  position:absolute;inset:0;pointer-events:none;z-index:6;
}
#channel[data-theme="star4000"][data-crt="0"] .s4k-crt,
#channel[data-theme="star4000"][data-field="warn"] .s4k-crt,
#channel[data-theme="star4000"][data-field="radar"] .s4k-crt{display:none}
#channel[data-theme="star4000"] .s4k-crt::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.30) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(to right,rgba(255,40,40,.045) 0 1px,
      rgba(40,255,80,.045) 1px 2px,rgba(60,80,255,.045) 2px 3px);
  mix-blend-mode:multiply;
}
#channel[data-theme="star4000"] .s4k-crt::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(255,225,180,.09) 0%,transparent 58%),
    radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.46) 100%);
}

/* ------------------------------------------------------------- controls --- */
/* The deck's own control bar stays functional but steps back - it is not part
   of the broadcast picture and should not pretend to be. */

#channel[data-theme="star4000"] .ch-bar{
  background:#11102A;border-top:1px solid #2A2560;
  font-family:ui-sans-serif,system-ui,sans-serif;
}

/* --------------------------------------------------------------- phones --- */

@media (max-aspect-ratio:1/1){
  #channel[data-theme="star4000"] .ch-week{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:1fr;
  }
  #channel[data-theme="star4000"] .ch-grid{grid-template-columns:repeat(2,1fr)}
  #channel[data-theme="star4000"] .ch-temp{font-size:min(22cqw,20cqh)}
  #channel[data-theme="star4000"] .ch-reg-c{display:none}
}