/* ==========================================================================
   The Weather Channel — BarTopTV V1 (light density)
   Fixed 720 x 865. Built to BarTopTV's reference mockup: current conditions,
   one outlook line, a five-hour strip. Deliberately airy and large-type so it
   reads across a bar. Nothing scrolls or reflows.

   Old-browser safe (BarTopTV run Chromium 61 on some screens): flex spacing uses
   child margins instead of `gap`, and absolute fills use longhand
   top/right/bottom/left instead of the `inset` shorthand. The JavaScript is
   recompiled down to Chromium 61 by build.mjs.
   ========================================================================== */

/* Interstate (weather.com's brand font) — DISABLED. The only file we have
   (ufonts.com_interstate.ttf, a 2016 Fontographer conversion) has a broken
   character map: the degree sign renders as "Ñ" and non-breaking space as "ì",
   which is fatal for a weather widget. Re-enable once we have a clean, licensed
   Interstate web font (woff2) with a correct cmap and real Bold/SemiBold masters.
@font-face {
  font-family: "Interstate";
  src: url("fonts/Interstate-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
*/

/* Outer canvas. Default is exactly the TWC region (720×865). In .is-full it
   grows to the whole screen (720×1280) and the light-grey background shows below
   the 865 stage — a continuous #f2f2f2 down to the bottom for BarTopTV to overlay
   their sponsor on (Option 2). */
.v1 {
  position: relative;
  width: 720px;
  height: 865px;
  overflow: hidden;
  color: var(--ink);
  background: var(--trend-fill, #f2f2f2); /* below the stage in .is-full: the SAME grey as the seam fill */
  text-shadow: 0 1px 16px rgba(0, 6, 20, 0.5);
  /* IBM Plex for now; switch the first entry to "Interstate" once a clean
     licensed web font is in (the current TTF has a broken degree glyph). */
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.v1.is-full { height: 1280px; }

/* the TWC content lives in a fixed 720×865 stage, pinned to the top of the
   canvas; the condition video + scrim + fallback are absolutely positioned
   inside it, and the lower slab bottom-pins to y=865 (the seam). */
.v1-stage {
  position: relative;
  width: 720px;
  height: 865px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0; /* the lower slab runs edge to edge; sections pad themselves */
  background: #04070f; /* base behind the condition video */
}

/* condition video fills the top image zone (like the comp's sky) */
.v1-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0; /* longhand first for old Chromium */
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* darken only the very top so the logo/temp read over a bright clip; the middle
   stays clear so the condition video shows, the comp's bright sky band */
.v1-scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0; /* longhand first for old Chromium */
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 8, 20, 0.5) 0%,
    rgba(2, 8, 20, 0.14) 16%, rgba(2, 8, 20, 0) 34%);
}
/* keep all real content above the video + scrim */
.v1-stage > header,
.v1-stage > section,
.v1-stage > .v1-lower {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------- edge-to-edge dark lower slab */
.v1-lower {
  margin-top: auto; /* sit the slab at the bottom, video/sky fills above it */
  background: var(--card-bg); /* dark by night, white by day (see theme block) */
  /* rounded top corners like the app's Outlook card (bottom meets the screen) */
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  /* Taller box with generous breathing room; the extra height is added inside so
     the box grows upward (it is bottom-pinned). */
  padding: 22px 38px 0;
}

/* ----------------------------------------------------------------- top bar */

.v1-top {
  display: flex;
  align-items: center;
  padding: 26px 38px 0;
}
.v1-top > * + * { margin-left: 20px; } /* was flex gap; logo + venue clustered top-left */
/* white Weather Channel mark (85 → 81, another 5% smaller) */
.v1-logo { height: 81px; width: auto; display: block; }

/* location pill, city + pin, all ~20% smaller */
.v1-place {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(4, 12, 28, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.v1-place > * + * { margin-left: 7px; } /* was flex gap */
.v1-place svg { width: 18px; height: 18px; color: var(--cyan-40); }

/* ------------------------------------------------------------------- hero */

.v1-hero {
  display: flex;
  align-items: center; /* raise the icon to the temp's vertical middle, like the comp */
  justify-content: space-between;
  margin-top: 10px;    /* current conditions ride up, leaving room below for precip */
  padding: 0 38px;
}
.v1-hero__main { display: flex; flex-direction: column; }

.v1-temp {
  display: flex;
  align-items: flex-start;
  font-weight: 600;
  font-size: 190px;
  line-height: 0.82;
  letter-spacing: -0.05em;
}
.v1-temp sup {
  font-size: 100px;
  font-weight: 600;      /* bold, matching the digits */
  line-height: 1;
  margin-left: 18px;     /* clear the digits, no collision */
  align-self: flex-start; /* top-align with the numbers */
  margin-top: -1px;       /* even with the digit tops */
}

.v1-sub {
  display: flex;
  align-items: center;
  margin-top: 22px;
  font-size: 27px;
  color: var(--ink-2);
}
.v1-sub > * + * { margin-left: 18px; } /* was flex gap */
.v1-sub__hl { display: inline-flex; align-items: center; font-weight: 600; color: var(--ink); }
.v1-sub__hl i {
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 16px;
  background: rgba(255, 255, 255, 0.28);
}

/* precip nowcast line under feels/H-L; reserves a line of space even when empty */
.v1-precip {
  min-height: 34px;
  margin-top: 7px;
  font-size: 26px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.v1-hero__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50px, -49px); /* nudge the icon + label left 50 / up 49 */
}
.v1-hero__icon > * + * { margin-top: 4px; } /* was flex gap (column) */
/* white animated condition icon; the filter renders the colored lottie as a
   clean white silhouette, the drop-shadow keeps it legible over a bright sky */
.v1-icon {
  width: 120px;
  height: 120px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 6, 20, 0.4));
}
.v1-phrase {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 260px;
  /* tighter leading so a two-line phrase (e.g. "Thunder in the Vicinity") reads
     as one unit and its bottom line does not crowd the black box below */
  line-height: 0.92;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------- outlook */

/* on the dark slab now — no card, no border, edge to edge. Tight bottom gap so
   the hourly labels/icons ride up ~45px, freeing room for a taller trend band. */
.v1-outlook {
  padding: 4px 0 1px;
}
/* bold, title-case heading (not the old all-caps eyebrow) */
.v1-outlook__label {
  font-size: 31px;       /* +10% */
  font-weight: 700;      /* bolder */
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.v1-outlook__text {
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink-2);
  /* reserve two lines always: clamp long text to 2 lines AND hold 2 lines of
     height so a 1- vs 2-line outlook never shifts the hourly/footer below */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 60px; /* 2 × 30px line box */
}

/* ------------------------------------------------------------ hour strip */

/* on the dark slab now — no card, no internal divider (the box's top is the edge) */
.v1-hours {
  position: relative;
  padding: 22px 4px 14px;
}

.v1-hours__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
/* label / icon / trend band / temp — the sparkline runs through row 3, right
   above the numbers, the way the reference mockup draws it. */
.v1-hour {
  display: grid;
  /* label / icon / chart band (holds the temp above its dot + the line below);
     the band is its own roomy area with breathing space above and below */
  grid-template-rows: 30px 56px 128px;
  justify-items: center;
  align-items: center;
}
.v1-hour__label {
  grid-row: 1;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.v1-hour__icon { grid-row: 2; width: 54px; height: 54px; }
.v1-hour__temp { grid-row: 4; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }

/* sparkline overlay sitting on the trend band (row 3); shares the grid columns */
.v1-trend {
  position: absolute;
  left: 4px;
  /* width is set in JS from the grid width; do NOT set `right` — an auto-width
     SVG sizes itself from the viewBox aspect ratio and inflates each refresh */
  top: calc(22px + 30px + 56px); /* padding-top + label row + icon row */
  height: 128px;
  display: block;
  overflow: visible;
}

/* ---------------------------------------------------------------- footer */

.v1-foot {
  display: flex;
  align-items: center;
  padding: 8px 0 22px; /* lift 'Powered by' ~10px off the bottom edge */
  font-size: 20px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.v1-foot > * + * { margin-left: 13px; } /* was flex gap */
.v1-foot img { height: 26px; width: auto; opacity: 0.95; }

/* -------------------------------------------------------------- fallback */

.v1-fallback {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0; /* longhand first for old Chromium */
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 30%, #0a1526 0%, var(--bg) 70%);
}
.v1-fallback > * + * { margin-top: 20px; } /* was flex gap (column) */
.v1-fallback p { font-size: 24px; line-height: 1.5; color: var(--ink-2); }
.v1--error .v1-fallback { display: flex; }

/* ============================================================ day / night theme
   Toggled by JS (.is-light when the observation is daytime). Only the lower card
   and the trend styling change; the hero sits on the condition video and keeps
   white text in both modes. */
.v1 {
  --card-bg: #0b0f16;                     /* night: black card */
  --card-title: #ffffff;
  --card-body: rgba(255, 255, 255, 0.72);
  --hour-label: rgba(255, 255, 255, 0.72);
  --temp-ink: #ffffff;
  --trend-line: rgba(255, 255, 255, 0.3);
  --trend-dot: #ffffff;
  --grid-line: rgba(255, 255, 255, 0.14);
  --trend-fill: #000000;                  /* BarTopTV Option 1 (dark): black seam below the forecast line, so their placement matches black */
}
.v1.is-light {
  --card-bg: #ffffff;                     /* day: white card */
  --card-title: #0b1a2b;
  --card-body: #5b6b7a;
  --hour-label: #6b7785;
  --temp-ink: #17222e;
  --trend-line: #a7b2bd;
  --trend-dot: #1c2b3a;
  --grid-line: #e2e2e2;          /* faint dotted demarcation lines */
  --trend-fill: #f2f2f2;         /* solid fill below the trend line */
}

/* apply the theme vars to the card + chart */
.v1-outlook__label { color: var(--card-title); }
.v1-outlook__text { color: var(--card-body); }
.v1-hour__label { color: var(--hour-label); }
.v1-hour__temp { color: var(--temp-ink); }
#v1-trend-line { stroke: var(--trend-line); }
#v1-trend circle { fill: var(--trend-dot); }
#v1-grid line { stroke: var(--grid-line); }
#v1-trend-area { fill: var(--trend-fill); } /* solid area below the line (overrides the gradient) */

/* footer sits on the card; 'Powered by' goes near-black on the light card and
   white on the dark one. The wordmark asset itself is swapped per theme in JS
   (black text + cyan drop on light, white text + cyan drop on dark). */
.v1-foot { color: var(--card-title); position: relative; z-index: 3; } /* above the area fill */
.v1-foot img { opacity: 0.95; }

/* no drop shadow behind text on the light card (day mode); the dark-mode hero
   keeps its subtle shadow for legibility over the night video */
.v1.is-light { text-shadow: none; }