/* ============================================================
   TV Display — Luxury Basecamp Levi
   Split-screen hotel dashboard for 55" TV (1920×1080 / 4K)
   Left: persistent webcams + weather strip
   Right: rotating info carousel
   ============================================================ */

/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  color: #f5ead1;
  background: #070d17;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
  user-select: none;
}

/* ─── Cinematic backdrop — CSS-only (WebView-safe) ──────────
   The first version used an SVG with <linearGradient> and fill="url(#id)"
   refs. On the Thomson Google TV's Chrome 146 WebView those silently
   drop (same bug family as <img src="*.svg">, per CLAUDE.md). This
   version uses only layered CSS radial-gradients + a linear-gradient
   base — the same technique the tablet already renders correctly.

   Stack: cn-backdrop (sky + aurora) → cn-backdrop-mountains (flat-fill
   SVG silhouette) → cn-vignette (top/bottom darken) → tv-app content. */
.cn-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Aurora glow — GREEN-led ribbon over a dark sky. The base stays dark so it
       reads calm on the TV (which boosts contrast hard), but the green glows
       carry a visible aurora hue — that's the character, and a near-black sky
       with green ribbons is also what a real aurora looks like. Blue is kept
       modest so it doesn't drift back toward the "electric blue" bloom. */
    radial-gradient(ellipse 50% 38% at 22% 38%, rgba(78, 224, 162, 0.20), transparent 62%),
    radial-gradient(ellipse 45% 35% at 55% 42%, rgba(78, 224, 162, 0.18), transparent 62%),
    radial-gradient(ellipse 50% 38% at 85% 38%, rgba(42, 123, 214, 0.13), transparent 62%),
    /* Lower aurora wash — green fading into blue */
    radial-gradient(ellipse 55% 28% at 30% 58%, rgba(78, 224, 162, 0.13), transparent 68%),
    radial-gradient(ellipse 55% 28% at 72% 62%, rgba(42, 123, 214, 0.10), transparent 68%),
    /* Purple-tinted base near the bottom (matches the Cinematic sky stop) */
    radial-gradient(ellipse 120% 40% at 50% 100%, rgba(46, 38, 66, 0.30), transparent 70%),
    /* Sky vertical gradient — the base canvas. Dark but not pitch-black, with a
       faint blue→purple tint so the green aurora glows have something to sit
       against without blooming on the TV panel. */
    linear-gradient(180deg, #070e1a 0%, #0a1424 50%, #0e0b1a 100%);
}

/* Bottom mountains as faint light ridgelines (see index.html). Stroke-only,
   mid-tone colour at low opacity, so panels render it consistently instead of
   the old dark-on-dark silhouette that lifted into a grey band on the TV. The
   horizontal mask fades the line ends so they don't hit the screen edges hard;
   a soft glow gives the ridge a touch of moonlit lift. */
.cn-backdrop-ridge {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(120px, 16vh, 220px);
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(180, 205, 235, 0.18));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.cn-backdrop-ridge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Vignette: darken the top edge (so the top bar reads) and the bottom
   edge (so the bottom bar reads), letting the aurora sit richest in
   the middle where the glass card lives. */
.cn-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 7, 11, 0.30) 0%,
    rgba(5, 7, 11, 0.00) 30%,
    rgba(5, 7, 11, 0.70) 100%
  );
}

/* ─── App container ───────────────────────────────────────── */
.tv-app {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  height: 100vh; width: 100vw;
  padding: 2vh 2.5vw 0;
}

/* ─── Top bar ─────────────────────────────────────────────── */
/* ─── Top bar — Cinematic editorial chrome ──────────────────
   Left:  small mark + 2-line brand (eyebrow + Playfair place name)
   Right: sunrise · sunset · divider · large Playfair clock · small date */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 1.5vh;
  flex-shrink: 0;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 0.9vw;
}

/* Horizontal lockup — mountains + "LUXURY BASECAMP" + "LEVI" baked in.
   Matches the proven-working pre-Phase-1 production setup. No blend mode
   or filter; the PNG is already transparent-on-dark-ready. */
.tv-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: clamp(44px, 3.8vh, 72px);
  flex-shrink: 0;
}
.tv-logo {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.top-bar-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.4vw;
  line-height: 1;
}

/* Sunrise / sunset pair, shown inline with the clock. In Lapland the
   daylight window swings from ~3h in December to ~23h in June, so this
   is ambient information worth keeping on screen all the time. */
.top-sun {
  display: flex;
  align-items: center;
  gap: 0.9vw;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 0.7vw, 14px);
  font-weight: 500;
  color: var(--cn-mute);
  font-variant-numeric: tabular-nums;
}
.top-sun:empty { display: none; }
.top-sun .top-sun-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35vw;
}
.top-sun .top-sun-item svg {
  opacity: 0.75;
  color: rgba(212,168,56, 0.75);
}
.top-sun .top-sun-sep {
  color: rgba(245,234,209, 0.25);
}

.top-divider {
  width: 1px;
  height: clamp(20px, 1.6vh, 32px);
  background: var(--cn-card-border);
}

.top-clock {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 1.9vw, 40px);
  font-weight: 400;
  color: var(--cn-cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.3px;
}

.top-date {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cn-faint);
  line-height: 1;
}

/* ─── Persistent checkout banner ──────────────────────────── */
/* Shown below the top bar from 18:00 the day before checkout
   through the checkout moment. Turns urgent in the final 3 hours. */
.checkout-banner {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1.2vh 1.6vw;
  margin-bottom: 1.2vh;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(212,168,56, 0.18),
    rgba(212,168,56, 0.08)
  );
  border: 1px solid rgba(212,168,56, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  animation: checkoutBannerFadeIn 600ms ease;
}

.checkout-banner[hidden] {
  display: none !important;
}

@keyframes checkoutBannerFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.checkout-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 2.4vw, 48px);
  height: clamp(32px, 2.4vw, 48px);
  border-radius: 50%;
  background: rgba(212,168,56, 0.18);
  color: #d4a838;
  flex-shrink: 0;
}

.checkout-banner-icon svg {
  width: 60%;
  height: 60%;
  stroke-width: 1.75;
}

.checkout-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
}

.checkout-banner-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 1.15vw, 26px);
  font-weight: 500;
  color: #f4dc93;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.checkout-banner-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 0.72vw, 16px);
  font-weight: 400;
  color: rgba(245,234,209, 0.72);
  line-height: 1.35;
}

/* Urgent (<3h): amber red with subtle pulse */
.checkout-banner.urgent {
  background: linear-gradient(
    90deg,
    rgba(231, 126, 34, 0.22),
    rgba(231, 76, 60, 0.08)
  );
  border-color: rgba(231, 126, 34, 0.55);
  animation:
    checkoutBannerFadeIn 600ms ease,
    checkoutBannerPulse 3.2s ease-in-out infinite;
}

.checkout-banner.urgent .checkout-banner-icon {
  background: rgba(231, 126, 34, 0.22);
  color: #f0a04b;
}

.checkout-banner.urgent .checkout-banner-headline {
  color: #f0a04b;
}

@keyframes checkoutBannerPulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(231, 126, 34, 0.15); }
  50%      { box-shadow: 0 2px 22px rgba(231, 126, 34, 0.38); }
}

/* When the banner is visible, give .main-split a tiny bit less room */
body.has-checkout-banner .main-split {
  /* no-op marker class — .main-split uses flex:1 so it already shrinks */
}

/* ─── Main split layout ───────────────────────────────────── */
.main-split {
  flex: 1;
  display: grid;
  grid-template-columns: 36% 1px 1fr;
  gap: 0 1.5vw;
  min-height: 0;
  overflow: hidden;
}

/* ─── Left panel: Webcams + info strip ────────────────────── */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  min-height: 0;
}

.webcam-slot {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #101828;
}

.webcam-frame {
  position: absolute;
  inset: 0;
}

.webcam-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.webcam-label {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 1.2vh 1.2vw;
  background: linear-gradient(transparent 0%, rgba(10, 15, 26, 0.9) 100%);
  font-size: clamp(16px, 1.1vw, 26px);
  font-weight: 600;
  color: rgba(245,234,209, 0.85);
  letter-spacing: 0.5px;
  z-index: 1;
}

.webcam-nearest {
  color: #d4a838;
  font-size: clamp(12px, 0.75vw, 18px);
  font-weight: 500;
  margin-left: 0.3vw;
}

/* ─── Outside Now strip — left-panel footer ────────────────
   Sits below the webcams. Mirrors CN canvas: glass + blur, Playfair
   temp, gold-soft eyebrow, muted condition + feels-like, gold icon. */
.outside-now {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.2vw;
  padding: 1.4vh 1.2vw;
  background: rgba(12, 21, 34, 0.55);
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  line-height: 1;
}
.outside-now-empty { visibility: hidden; }

.outside-now-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.outside-now-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(8px, 0.55vw, 11px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(212,168,56, 0.75);
}
.outside-now-temp {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 3vw, 64px);
  font-weight: 400;
  color: var(--cn-cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
}

.outside-now-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35vh;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 0.7vw, 14px);
  line-height: 1.4;
  min-width: 0;
}
.outside-now-cond {
  color: var(--cn-mute);
}
.outside-now-feels {
  color: var(--cn-faint);
  font-size: 0.92em;
}

.outside-now-icon {
  flex-shrink: 0;
  width: clamp(28px, 2.2vw, 44px);
  height: clamp(28px, 2.2vw, 44px);
  color: rgba(212,168,56, 0.75);
  filter: drop-shadow(0 0 8px var(--cn-gold-glow));
}
.outside-now-icon svg { width: 100%; height: 100%; }

/* ─── Panel divider ───────────────────────────────────────── */
.panel-divider {
  width: 1px;
  background: rgba(245,234,209, 0.08);
  align-self: stretch;
  margin: 2vh 0;
}

/* ─── Right panel: Rotating sections ──────────────────────── */
.right-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}


.section-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Cinematic glass wrapper — the floating info card around every
   carousel state. Matches CN.glass pattern in components/cinematic.jsx
   and §3.1 of CLAUDE_CODE_HANDOFF. The inner .section positioning
   (absolute, inset:0) still works because this wrapper is relative. */
.section-container-glass {
  background: linear-gradient(165deg, rgba(14,26,44,.32), rgba(7,12,20,.62));
  border: 1px solid var(--cn-card-border-gold);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  /* No padding here — child .section elements use position: absolute;
     inset: 0 which fills the padding-box and ignores container padding.
     Per-section internal padding (on .section / #section-<name>) is the
     mechanism that gives content breathing room from the glass border. */
}

.section {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* Cinematic §5 TV item 6: 500ms cross-fade, not slide. No translate3d
     — the incoming state just fades up from black glass to visible. */
  transition: opacity var(--transition-time, 500ms) cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  will-change: opacity;
  /* Extra top padding reserves space for the absolutely-positioned
     section label so every section's label sits at the same anchor point
     regardless of content density. */
  padding: 5.5vh 1.5vw 2vh;
}

.section.active {
  opacity: 1;
  pointer-events: auto;
}

.section.leaving {
  opacity: 0;
  pointer-events: none;
}

/* Section eyebrow — inline flow, left-aligned, gold-soft letter-spaced.
   Matches components/cinematic.jsx CNLabel() across every section.
   Was previously position:absolute top:2vh centered — kept in place here
   as documentation; the new inline style flows with the content, which
   matches the Cinematic editorial direction (eyebrow sits just above
   the big Playfair hero in each section). */
.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 14px);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(212,168,56, 0.75);
  margin-bottom: 1.8vh;
  text-align: left;
}

/* ─── Welcome section — Cinematic editorial letter ──────────
   Left-aligned stack inside the glass card:
     eyebrow → huge name + gold period → italic stay line →
     2-col wifi grid → gold-L-border seasonal → host / IG footer.
   Source of truth: components/cinematic.jsx CNWelcome(). */
#section-welcome {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  /* Internal padding gives the editorial letter breathing room from the
     glass-card border. Canvas uses '36px 44px' on the info hero; these
     viewport-scaled values are the 1080p equivalent. The legacy
     `gap: 3vh` from the old centered layout is deliberately dropped —
     the new layout spaces children via per-element margin-top instead,
     so `gap` would double-count the spacing. */
  gap: 0;
  padding: 3.5vh 2.4vw;
}

.welcome-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 14px);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(212,168,56, 0.75);
  margin-bottom: 1.8vh;
}

.welcome-greeting-large {
  font-family: 'Playfair Display', serif;
  font-size: clamp(44px, 4vw, 92px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--cn-cream);
}
.welcome-greeting-large .gold-period { color: var(--cn-gold); }
.welcome-greeting-large .gold { color: var(--cn-gold); } /* legacy */

.welcome-stay {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 24px);
  color: var(--cn-mute);
  margin-top: 1.4vh;
  letter-spacing: 0.1px;
}

.welcome-wifi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vw;
  margin-top: 2.6vh;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.welcome-wifi-tile {
  padding: 1.4vh 1.4vw;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
}
.welcome-wifi-tile-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 0.55vw, 12px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
  margin-bottom: 0.7vh;
}
.welcome-wifi-tile-val {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(18px, 1.3vw, 28px);
  font-weight: 500;
  color: var(--cn-cream);
}
/* Legacy aliases: keep so JS lookups like .wifi-network-val/.wifi-pass-val
   still resolve. The canvas DOM now uses .welcome-wifi-tile-val; the
   data-anchor classes are preserved on the same element. */
.wifi-network-val, .wifi-pass-val { /* data anchors; styling handled above */ }
.wifi-network-label, .wifi-pass-label { /* data anchors */ }

.welcome-seasonal {
  margin-top: 3.2vh;
  max-width: 38vw;
  text-align: left;
  padding-top: 0;
  padding-left: 1.2vw;
  border-left: 2px solid rgba(212,168,56, 0.75);
  /* Override the old top-centered gold dash */
}
.welcome-seasonal:empty { display: none; }
.welcome-seasonal::before { display: none; }
.welcome-seasonal-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.2vw, 28px);
  color: rgba(212,168,56, 0.78);
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.welcome-seasonal-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 0.85vw, 18px);
  font-weight: 400;
  color: var(--cn-mute);
  margin-top: 0.9vh;
  line-height: 1.55;
  letter-spacing: 0.2px;
}
.welcome-seasonal-title:empty,
.welcome-seasonal-body:empty { display: none; }

/* Signature footer — host message on the left, Instagram block (label +
   handle + QR) on the right, separated by a hairline. margin-top: auto
   pushes the block to the bottom of the glass card. */
.welcome-signature {
  margin-top: auto;
  padding-top: 2.6vh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2vw;
  text-align: left;
  max-width: none;
  border-top: none;
}
.welcome-signature:empty { display: none; }
.welcome-signature-msg-col {
  flex: 1;
  max-width: 30vw;
}
.welcome-signature-msg {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 0.9vw, 18px);
  color: var(--cn-mute);
  line-height: 1.55;
}
.welcome-signature-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 0.95vw, 20px);
  color: rgba(212,168,56, 0.78);
  margin-top: 0.6vh;
  letter-spacing: 0.2px;
}
.welcome-signature-name::before {
  content: '— ';
  color: rgba(212,168,56, 0.55);
}
.welcome-signature-msg:empty,
.welcome-signature-name:empty { display: none; }

.welcome-signature-social {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding-left: 1.4vw;
  border-left: 1px solid var(--cn-card-border);
  border-top: none;
  margin-top: 0;
}
.welcome-signature-social-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5vh;
  text-align: right;
  color: var(--cn-cream);
}
.welcome-signature-social-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 0.55vw, 12px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
}
.welcome-signature-social-handle-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4vw;
}
.welcome-signature-social-icon svg {
  width: clamp(14px, 1vw, 20px);
  height: clamp(14px, 1vw, 20px);
  color: rgba(212,168,56, 0.78);
  display: block;
}
.welcome-signature-social-handle {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 0.85vw, 16px);
  letter-spacing: 0.1px;
  color: var(--cn-cream);
}
.welcome-signature-qr {
  width: clamp(52px, 4vw, 82px);
  height: clamp(52px, 4vw, 82px);
  padding: 3px;
  background: #ffffff;
  border-radius: 4px;
  flex: 0 0 auto;
}

/* ─── Weather section ─────────────────────────────────────── */
/* ─── Weather section — Cinematic editorial ─────────────────
   Source of truth: components/cinematic.jsx CNWeather().
   Stack:
     eyebrow (via .section-label) → main [temp | icon] →
     aurora callout → hourly 4-col → sun-times footer (margin-top:auto). */
#section-weather {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 3.5vh 2.4vw;
}

.weather-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2vw;
}

.weather-current {
  text-align: left;
}

.weather-temp-large {
  font-family: 'Playfair Display', serif;
  font-size: clamp(88px, 9vw, 168px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -4px;
  color: var(--cn-cream);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: flex-start;
}
.weather-temp-degree {
  font-size: 0.52em;      /* ≈88 of 168 per canvas */
  color: rgba(212,168,56, 0.75);
  letter-spacing: 0;
  margin-left: 2px;
  line-height: 1;
}

.weather-desc {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(18px, 1.45vw, 30px);
  color: var(--cn-mute);
  margin-top: 0.9vh;
  letter-spacing: 0.1px;
}

.weather-wind {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.8vw, 17px);
  color: var(--cn-faint);
  margin-top: 0.8vh;
  letter-spacing: 1px;
}

.weather-icon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,168,56, 0.75);
  flex-shrink: 0;
  margin-top: 2vh;
}
.weather-icon-large svg {
  width: clamp(72px, 6.5vw, 132px);
  height: clamp(72px, 6.5vw, 132px);
  stroke-width: 1.25;
  filter: drop-shadow(0 0 14px var(--cn-gold-glow));
}

/* ─── Aurora callout — 2-line on Kp ≥ 3 ────────────────────
   Canvas has 3 columns when active: [icon] [label + Kp] [Best viewing].
   When inactive falls back to 1-line subtle row. */
.weather-aurora {
  margin-top: 2.4vh;
  padding: 1.2vh 1.6vw;
  background: rgba(21, 34, 56, 0.3);
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 1.2vw;
  font-family: 'DM Sans', sans-serif;
  color: var(--cn-mute);
}
.weather-aurora:empty { display: none; }

.weather-aurora.aurora-highlight {
  background: rgba(90, 220, 160, 0.06);
  border-color: rgba(90, 220, 160, 0.22);
  box-shadow: 0 0 24px rgba(90, 220, 160, 0.15);
}

.aurora-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.aurora-icon svg {
  width: clamp(18px, 1.3vw, 28px);
  height: clamp(18px, 1.3vw, 28px);
  stroke-width: 1.5;
  color: rgba(212,168,56, 0.75);
}
.weather-aurora.aurora-highlight .aurora-icon svg {
  color: var(--cn-green);
  filter: drop-shadow(0 0 6px rgba(90, 220, 160, 0.45));
}

.aurora-text {
  flex: 1;
  min-width: 0;
}
.aurora-eyebrow {
  font-size: clamp(9px, 0.55vw, 12px);
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(90, 220, 160, 0.8);
}
.aurora-row {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 1.25vw, 24px);
  color: var(--cn-cream);
  margin-top: 2px;
}
.aurora-status {
  color: var(--cn-green);
  font-weight: 500;
}
/* 1-line fallback: keep row inline-styled as mute + smaller */
.weather-aurora:not(.aurora-highlight) .aurora-row {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 0.85vw, 18px);
  color: var(--cn-mute);
  margin-top: 0;
}

.aurora-window {
  text-align: right;
  line-height: 1.4;
  flex-shrink: 0;
}
.aurora-window-label {
  font-size: clamp(11px, 0.75vw, 15px);
  color: var(--cn-mute);
}
.aurora-window-range {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.8vw, 16px);
  color: rgba(212,168,56, 0.75);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* ─── Hourly strip (Cinematic §Weather) ──────────────────── */
.weather-hourly-wrap {
  margin-top: 2.4vh;
}
.weather-hourly-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
  margin-bottom: 1vh;
}

.weather-hourly {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9vw;
  width: 100%;
}

.hourly-card {
  padding: 1.4vh 1vw;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vh;
}

.hourly-time {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.8vw, 16px);
  color: var(--cn-mute);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.hourly-icon {
  color: rgba(212,168,56, 0.75);
  width: clamp(26px, 2vw, 42px);
  height: clamp(26px, 2vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3vh;
}
.hourly-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.3;
}

.hourly-temp {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 1.4vw, 28px);
  font-weight: 400;
  color: var(--cn-cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hourly-wind {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.65vw, 13px);
  color: var(--cn-faint);
}

/* Sunrise / sunset footer — pushed to bottom */
.weather-sun-times {
  margin-top: auto;
  padding-top: 2.4vh;
  display: flex;
  justify-content: space-between;
  gap: 2vw;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.85vw, 17px);
  color: var(--cn-mute);
  letter-spacing: 0.3px;
}
.sun-time {
  display: inline-flex;
  align-items: center;
  gap: 0.55vw;
}
.sun-time svg {
  width: clamp(16px, 1.1vw, 22px);
  height: clamp(16px, 1.1vw, 22px);
  stroke-width: 1.5;
  color: rgba(212,168,56, 0.75);
}

/* ─── Forecast section — Cinematic editorial row grid ──────
   Source of truth: components/cinematic.jsx CNForecast().
   Layout: 7 rows, each a 6-col sub-grid:
     [day + date | icon | HI | range-bar | LO | "HI / LO" label] */
#section-forecast {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 3.5vh 2.4vw;
}

.forecast-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  width: 100%;
}

.forecast-row {
  display: grid;
  grid-template-columns: clamp(90px, 7vw, 140px) clamp(38px, 3vw, 60px) clamp(42px, 3.3vw, 68px) 1fr clamp(48px, 3.8vw, 78px) clamp(38px, 2.8vw, 54px);
  align-items: center;
  gap: 1vw;
  padding: 1.3vh 1.3vw;
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

/* Today row — gold tint + gold border (canvas §Forecast) */
.forecast-row-today {
  background: rgba(212, 168, 56, 0.08);
  border-color: rgba(212, 168, 56, 0.25);
}

.forecast-row-day-col {
  display: flex;
  flex-direction: column;
  gap: 0.2vh;
}
.forecast-row-day {
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 1.2vw, 24px);
  font-weight: 500;
  color: var(--cn-cream);
  line-height: 1;
}
.forecast-row-today .forecast-row-day {
  color: var(--cn-gold);
}
.forecast-row-date {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.7vw, 14px);
  color: var(--cn-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  line-height: 1;
}

.forecast-row-icon {
  color: rgba(212,168,56, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.forecast-row-icon svg {
  width: clamp(26px, 2vw, 40px);
  height: clamp(26px, 2vw, 40px);
  stroke-width: 1.3;
}

.forecast-row-high {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 1.6vw, 32px);
  font-weight: 400;
  color: var(--cn-cream);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

/* Range bar: cool→warm gradient positioned by inline left+width.
   Canvas gradient is #4a7bbd → --cn-gold → #e8c05a (blue → gold → amber). */
.forecast-row-bar-wrap {
  position: relative;
  height: 6px;
  background: rgba(245,234,209, 0.06);
  border-radius: 3px;
}
.forecast-row-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(74, 123, 189, 0.9) 0%,
    var(--cn-gold) 55%,
    rgba(232, 192, 90, 0.95) 100%);
  border-radius: 3px;
}

.forecast-row-low {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.9vw, 18px);
  color: var(--cn-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.forecast-row-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 0.55vw, 12px);
  color: var(--cn-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: right;
}

/* ─── Ski Resort section ──────────────────────────────────── */
/* ─── Ski Resort section — Cinematic editorial layout ─────── */
#section-ski {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 3.5vh 2.4vw;
}

/* Summary row: three big Playfair blocks (lifts | slopes | hours) with
   gold-soft eyebrow labels beneath. Canvas puts the slopes numeral in
   gold to visually separate from the lifts. Hours block pushed right
   via margin-left:auto. */
.ski-summary {
  display: flex;
  align-items: flex-end;
  gap: 2.5vw;
  margin-bottom: 0.8vh;
}

.ski-sum-block {
  display: flex;
  flex-direction: column;
}

.ski-sum-block-hours {
  margin-left: auto;
  text-align: right;
}

.ski-sum-value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(52px, 5.2vw, 96px);
  font-weight: 400;
  line-height: 1;
  color: var(--cn-cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.5px;
  display: inline-flex;
  align-items: baseline;
}
.ski-sum-total {
  font-size: 0.46em;
  color: var(--cn-faint);
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-left: 2px;
}

.ski-sum-block-gold .ski-sum-value { color: var(--cn-gold); }
.ski-sum-block-gold .ski-sum-total { color: rgba(212, 168, 56, 0.4); }

.ski-sum-block-hours .ski-sum-value {
  font-size: clamp(22px, 1.9vw, 34px);
  letter-spacing: -0.3px;
  line-height: 1;
}

.ski-sum-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-mute);
  margin-top: 0.9vh;
}
.ski-sum-block-hours .ski-sum-label {
  color: var(--cn-faint);
  margin-top: 0.4vh;
}

/* Hairline divider between summary and lifts/slopes split. */
.ski-divider {
  height: 1px;
  background: var(--cn-card-border);
  margin: 1.6vh 0 1.4vh;
}

/* Split: lifts detail on left, slopes-by-area + QR on right */
.ski-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2vw;
  width: 100%;
  align-items: start;
  flex: 1;
  min-height: 0;
}

.ski-col {
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
}

.ski-col-heading {
  font-size: clamp(10px, 0.7vw, 16px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,234,209, 0.3);
  margin-bottom: 0.5vh;
  padding-bottom: 0.4vh;
  border-bottom: 1px solid rgba(212,168,56, 0.12);
}

/* Two-column flow: Levi has ~17 lifts, which don't fit in a single
   vertical stack within the section's vertical budget. CSS multi-
   column layout balances the rows automatically and removes the need
   for a hard max-height cap that used to silently crop the last lift
   (S South chairlift). */
.ski-lifts-list {
  column-count: 2;
  column-gap: 1.2vw;
  column-fill: balance;
  width: 100%;
}

.ski-lift-row {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.45vh 0.7vw;
  margin-bottom: 0.35vh;
  border-radius: 6px;
  background: rgba(21, 34, 56, 0.25);
  /* Keep the whole row together when it lands at a column break. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.ski-lift-row:last-child { margin-bottom: 0; }

.ski-lift-dot {
  width: clamp(8px, 0.55vw, 12px);
  height: clamp(8px, 0.55vw, 12px);
  border-radius: 50%;
  flex-shrink: 0;
}

.ski-lift-row.open .ski-lift-dot { background: var(--cn-green); box-shadow: 0 0 6px rgba(90, 220, 160, 0.5); }
.ski-lift-row.closed .ski-lift-dot { background: #555; }
/* Weather-hold lifts (e.g. Wind) get an amber dot so they're
   clearly different from routinely-closed lifts at a glance. */
.ski-lift-row.closed.weather .ski-lift-dot {
  background: #e6a42a;
  box-shadow: 0 0 5px rgba(230, 164, 42, 0.45);
}

.ski-lift-name {
  font-size: clamp(12px, 0.75vw, 18px);
  flex: 1;
}

.ski-lift-row.open .ski-lift-name { color: rgba(245,234,209, 0.8); }
/* Closed rows stay legible from across the room — stronger than before. */
.ski-lift-row.closed .ski-lift-name { color: rgba(245,234,209, 0.5); text-decoration: line-through; }
.ski-lift-row.closed.weather .ski-lift-name { color: rgba(245,234,209, 0.72); }

/* Small reason pill shown next to closed lifts (e.g. "Wind"). */
.ski-lift-reason {
  font-size: clamp(9px, 0.55vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25vh 0.55vw;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
  color: rgba(245,234,209, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ski-lift-row.closed.weather .ski-lift-reason {
  color: #f4c96a;
  background: rgba(230, 164, 42, 0.12);
  border-color: rgba(230, 164, 42, 0.35);
}

.ski-lift-hours {
  margin-left: auto;
  font-size: clamp(9px, 0.55vw, 13px);
  color: rgba(245,234,209, 0.25);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* When a reason pill is shown, hide hours — the pill already tells
   the story and the 2-column layout is tight on width. */
.ski-lift-reason + .ski-lift-hours { display: none; }

.ski-lift-row.open .ski-lift-hours { color: rgba(245,234,209, 0.3); }

.ski-lift-row.nearest {
  background: rgba(212,168,56, 0.1);
  border: 1px solid rgba(212,168,56, 0.2);
}

.ski-lift-row.nearest .ski-lift-name {
  color: #d4a838 !important;
  font-weight: 500;
  text-decoration: none !important;
}

.ski-lift-star {
  color: #d4a838;
  margin-left: 0.2vw;
}

/* Slopes-by-area rows with progress bar */
.ski-slopes-by-area {
  display: flex;
  flex-direction: column;
  gap: 0.7vh;
  width: 100%;
}

.ski-area-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7vw auto;
  align-items: center;
  gap: 0.7vw;
  padding: 0.5vh 0.6vw;
  border-radius: 6px;
  background: rgba(21, 34, 56, 0.28);
}

.ski-area-row.closed {
  opacity: 0.5;
}

.ski-area-name {
  font-size: clamp(11px, 0.72vw, 16px);
  color: rgba(245,234,209, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ski-area-bar {
  position: relative;
  height: clamp(6px, 0.45vh, 10px);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.ski-area-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #d4a838, #e8c05a);
  border-radius: 999px;
  transition: width 600ms ease;
}

.ski-area-row.closed .ski-area-bar-fill {
  background: #555;
}

.ski-area-count {
  font-size: clamp(10px, 0.68vw, 15px);
  color: rgba(245,234,209, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 3vw;
  text-align: right;
}

/* QR card — Cinematic §Ski: cream background (scan reliability), gold
   eyebrow "Piste map" + serif caption beside the QR image. */
.ski-qr {
  margin-top: 1.6vh;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1.2vh 1vw;
  background: var(--cn-cream);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 18px rgba(0, 0, 0, 0.25);
}

.ski-qr-img {
  width: clamp(64px, 5.5vw, 96px);
  height: clamp(64px, 5.5vw, 96px);
  display: block;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.ski-qr-text {
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
}
.ski-qr-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 0.55vw, 12px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8c7a4f;
}
.ski-qr-caption {
  font-family: 'Playfair Display', serif;
  font-size: clamp(13px, 0.95vw, 20px);
  font-weight: 400;
  color: #1a1a2e;
  line-height: 1.3;
  max-width: 14vw;
}

.ski-source {
  font-size: clamp(9px, 0.55vw, 13px);
  color: rgba(245,234,209, 0.2);
  text-align: center;
  margin-top: 0.5vh;
}

/* ─── Local Tips section — Cinematic 2-col editorial ──────
   Source of truth: components/cinematic.jsx CNTips() / CNTipCategory().
   Stack: eyebrow → 2 flex columns. Left column holds first 2 categories,
   right column holds remaining categories + a footer card pinned to
   its bottom (margin-top:auto) with "more on tablet" + OSM attribution. */
#section-tips {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 3.5vh 2.4vw;
}

.tips-dynamic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.tips-col {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  min-width: 0;
}

.tips-cat {
  min-width: 0;
}

.tips-cat-header {
  margin-bottom: 0.8vh;
}

.tips-cat-name {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
}

.tips-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.tips-biz {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 0.9vh 0.8vw;
  border-radius: 6px;
  border: 1px solid transparent;
  min-width: 0;
}
.tips-biz-closed {
  opacity: 0.55;
}

.tips-biz-main {
  flex: 1;
  min-width: 0;
}
.tips-biz-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(14px, 0.95vw, 20px);
  font-weight: 400;
  color: var(--cn-cream);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tips-biz-note {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 0.72vw, 15px);
  color: var(--cn-mute);
  margin-top: 0.15vh;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tips-biz-status-col {
  text-align: right;
  flex-shrink: 0;
}
.tips-biz-open {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.7vw, 14px);
  font-weight: 500;
  color: var(--cn-faint);
  letter-spacing: 0.2px;
}
.tips-biz-open.is-open {
  color: var(--cn-green);
}

/* Editor's-pick highlight — subtle gold tint + hairline border. */
.tips-biz.featured {
  background: rgba(212, 168, 56, 0.08);
  border-color: rgba(212, 168, 56, 0.25);
}
.tips-biz.featured .tips-biz-name {
  color: var(--cn-gold);
}

/* Footer card in the right column — margin-top:auto pins it to the bottom. */
.tips-footer {
  margin-top: auto;
  padding: 1.4vh 1.2vw;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cn-card-border);
  border-radius: 8px;
}
.tips-footer-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 0.75vw, 15px);
  color: var(--cn-faint);
  line-height: 1.5;
}
.tips-footer-attribution {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 0.55vw, 12px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245, 234, 209, 0.22);
  margin-top: 0.6vh;
}

/* ─── Apartment Guide section ─────────────────────────────── */
/* ─── Apartment Guide — Cinematic 2×2 card grid ─────────────
   Source of truth: components/cinematic.jsx CNApartment().
   Title row is flex space-between baseline:
     [Playfair title]  [gold accent chip].
   Canvas dropped the leading icon — editorial type carries it. */
#section-apartment {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 3.5vh 2.4vw;
}

.apt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2vw 1.4vw;
  width: 100%;
}

.apt-card {
  padding: 2.2vh 1.6vw;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.apt-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8vw;
  /* No border-bottom, no position:relative — canvas is a clean baseline row. */
}
.apt-card-title-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 1.5vw, 28px);
  font-weight: 500;
  color: var(--cn-cream);
  line-height: 1.1;
}

.apt-card-status {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.65vw, 13px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(212, 168, 56, 0.85);
  flex-shrink: 0;
}

.apt-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5vw;
  font-size: clamp(11px, 0.75vw, 15px);
  color: #f0a04b;
  background: rgba(240, 160, 75, 0.08);
  border-left: 2px solid #f0a04b;
  padding: 0.8vh 0.9vw;
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
}
.apt-warning svg {
  width: clamp(14px, 0.85vw, 18px);
  height: clamp(14px, 0.85vw, 18px);
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 0.1vh;
}
.apt-warning-text { flex: 1; }

.apt-instructions {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}
.apt-instruction {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.85vw, 16px);
  color: var(--cn-mute);
  line-height: 1.55;
  padding-left: 0.9vw;
  position: relative;
}
.apt-instruction::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.45vw;
  height: 1px;
  background: rgba(212, 168, 56, 0.55);
}

/* Footer nudge — gold-tinted box below the 2×2 grid. Canvas: padding
   14, border gold 0.2, radius 8, goldSoft text, center aligned. */
.apt-tablet-nudge {
  margin-top: 1.8vh;
  padding: 1.2vh 1.4vw;
  background: rgba(212, 168, 56, 0.08);
  border: 1px solid rgba(212, 168, 56, 0.22);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.85vw, 16px);
  color: rgba(212, 168, 56, 0.85);
  text-align: center;
  letter-spacing: 0.4px;
}

/* ─── Wall Tablet promo — Cinematic centered editorial ─────
   Source: components/cinematic.jsx CNTablet().
   Stack: eyebrow → big serif headline (2 lines, gold italic accent) →
   italic subline → tablet device illustration. */
#section-tablet {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5vh 2.4vw;
  gap: 2.4vh;
}
#section-tablet .section-label {
  text-align: center;
  margin-bottom: 0;
}

.tablet-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 3.4vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--cn-cream);
  max-width: 760px;
}
.tablet-headline-accent {
  color: var(--cn-gold);
  font-style: italic;
}

.tablet-subline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 22px);
  color: var(--cn-mute);
  max-width: 580px;
  line-height: 1.45;
  margin-top: -0.8vh;
}

.tablet-device {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 60vh;
  aspect-ratio: 16 / 10;
  perspective: 1200px;
}

.tablet-bezel {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #1c1c24 0%, #0d0d14 100%);
  border-radius: clamp(14px, 1.2vw, 22px);
  padding: clamp(10px, 0.9vw, 18px) clamp(22px, 1.8vw, 34px) clamp(10px, 0.9vw, 18px) clamp(10px, 0.9vw, 18px);
  box-shadow:
    0 clamp(8px, 1vh, 18px) clamp(20px, 3vh, 50px) rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212,168,56, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.tablet-screen {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(4px, 0.4vw, 8px);
  background: #070d17;
  display: block;
}

.tablet-screen-fallback {
  position: absolute;
  inset: clamp(10px, 0.9vw, 18px) clamp(22px, 1.8vw, 34px) clamp(10px, 0.9vw, 18px) clamp(10px, 0.9vw, 18px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8vh;
  background: radial-gradient(ellipse at center, #15223a 0%, #070d17 80%);
  border-radius: clamp(4px, 0.4vw, 8px);
}

.tablet-bezel.no-screenshot .tablet-screen-fallback {
  z-index: 3;
}

.tablet-fallback-brand {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 1.4vw, 34px);
  font-weight: 500;
  color: #d4a838;
  letter-spacing: 0.5px;
}

.tablet-fallback-tag {
  font-size: clamp(10px, 0.65vw, 14px);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(245,234,209, 0.35);
}

.tablet-home-btn {
  position: absolute;
  right: clamp(6px, 0.5vw, 12px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(6px, 0.5vw, 10px);
  height: clamp(6px, 0.5vw, 10px);
  border-radius: 50%;
  background: rgba(245,234,209, 0.12);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

/* ─── Standby — Cinematic centered layout ─────────────────
   Source: components/cinematic.jsx CNStandby(). Mark + "Preparing for
   the next guests" + italic subline + next-arrival card. */
.standby-section {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.6vh;
  padding: 3.5vh 2.4vw;
}

.standby-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.standby-logo {
  width: clamp(110px, 11vw, 200px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

.standby-label {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 2.4vw, 48px);
  font-weight: 400;
  color: var(--cn-cream);
  letter-spacing: -0.3px;
  text-transform: none;
}

.standby-subline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 22px);
  color: var(--cn-mute);
  margin-top: -1vh;
}

.standby-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vh;
  margin-top: 2vh;
  padding: 1.8vh 2.4vw;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cn-card-border);
  border-radius: 10px;
  min-width: clamp(240px, 22vw, 440px);
}
.standby-next.empty {
  border-style: dashed;
  opacity: 0.6;
}

.standby-next-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
}

.standby-next-date {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 400;
  color: var(--cn-cream);
  margin-top: 0.6vh;
}

.standby-next-when {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.85vw, 16px);
  color: rgba(212, 168, 56, 0.8);
  margin-top: 0.3vh;
  letter-spacing: 0.3px;
}

/* ─── Check-out — Cinematic editorial reminder ─────────────
   Source: components/cinematic.jsx CNCheckout(). Header flex row:
     [left: small label + HUGE gold time]
     [right (margin-left:auto): italic day + hours-to-go countdown]
   Hairline, BEFORE YOU GO eyebrow, checklist with square-box glyphs. */
.checkout-section {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 3.5vh 2.4vw;
}

.checkout-header {
  display: flex;
  align-items: baseline;
  gap: 2vw;
  margin-bottom: 0.4vh;
}

.checkout-header-left {
  display: flex;
  flex-direction: column;
}
.checkout-time-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.65vw, 14px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
}
.checkout-time {
  font-family: 'Playfair Display', serif;
  font-size: clamp(72px, 7.2vw, 136px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--cn-gold);
  font-variant-numeric: tabular-nums;
  margin-top: 0.6vh;
}

.checkout-header-right {
  margin-left: auto;
  text-align: right;
  padding-bottom: 0.6vh;
}
.checkout-day {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 26px);
  color: var(--cn-mute);
}
.checkout-countdown {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 0.75vw, 15px);
  color: var(--cn-faint);
  margin-top: 0.6vh;
  letter-spacing: 1px;
}

.checkout-divider {
  height: 1px;
  background: var(--cn-card-border);
  margin: 2vh 0 1.6vh;
}

.checkout-list-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
  margin-bottom: 1.2vh;
  margin-top: 0;
}

.checkout-list {
  display: flex;
  flex-direction: column;
  gap: 0.9vh;
  width: 100%;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 0.9vw;
  padding: 0.9vh 1vw;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cn-card-border);
  border-radius: 6px;
}

.checkout-item-box {
  width: clamp(16px, 1.2vw, 22px);
  height: clamp(16px, 1.2vw, 22px);
  border: 1.5px solid rgba(212, 168, 56, 0.75);
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
}

.checkout-item-text {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 0.95vw, 18px);
  color: var(--cn-cream);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

/* Checkout-day prominence: keep the pulse but clamp to sane sizes. */
.checkout-today .checkout-time {
  font-size: clamp(88px, 8vw, 152px);
  animation: checkout-pulse 3s ease-in-out infinite;
}
.checkout-today .section-label {
  color: var(--cn-gold);
}

@keyframes checkout-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

/* ─── Bottom bar — Cinematic editorial tracker ─────────────
   Left:   NOW SHOWING · <section>
   Center: segment dots (unchanged)
   Right:  MORE ON THE WALL TABLET →                             */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3vh 0 0.4vh;
  flex-shrink: 0;
}

.bottom-left,
.bottom-right {
  display: flex;
  align-items: center;
  flex: 1;
}
.bottom-right {
  justify-content: flex-end;
}

.now-showing,
.tablet-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 0.65vw, 13px);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cn-faint);
  line-height: 1;
}

.bottom-center {
  display: flex;
  gap: 0.6vw;
  align-items: center;
}

/* Segmented progress bar: one segment per carousel section. Past segments
   are solid gold, the current segment fills left-to-right over its own
   duration (set by --seg-duration), future segments are a dim track. */
.section-segment {
  position: relative;
  width: clamp(26px, 2.2vw, 48px);
  height: 2px;
  background: rgba(245,234,209, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.section-segment::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #d4a838;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
}

.section-segment.complete::before {
  transform: scaleX(1);
}

.section-segment.current::before {
  animation: seg-fill var(--seg-duration, 12s) linear forwards;
}

body.tv-paused .section-segment.current::before {
  animation-play-state: paused;
}

@keyframes seg-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Standby mode hides the progress bar too (single-section carousel). */
body.standby-mode .section-segment { opacity: 0; }

.bottom-right {
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

/* Shared pill hint — rendered "remote button" + label. Gives the
   two bottom-right hints consistent weight so the HOME button reads
   as "press this on your remote". */
.remote-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55vw;
  font-size: clamp(11px, 0.72vw, 16px);
  font-weight: 500;
  color: rgba(245,234,209, 0.5);
  letter-spacing: 0.3px;
  line-height: 1;
}

.remote-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4vw;
  padding: 0.55vh 0.65vw;
  border-radius: 6px;
  background: rgba(245,234,209, 0.08);
  border: 1px solid rgba(245,234,209, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.35);
  font-size: clamp(9px, 0.58vw, 13px);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(245,234,209, 0.82);
  text-transform: uppercase;
}

.remote-key-icon {
  padding: 0.4vh 0.55vw;
  color: #d4a838;
}

.remote-key-icon svg {
  display: block;
}

.remote-hint-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3vw;
  white-space: nowrap;
}

/* ─── Test page overlay ───────────────────────────────────── */
.test-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.85);
  transition: opacity 0.5s ease;
}

.test-overlay.hidden { opacity: 0; pointer-events: none; }

.test-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: transparent;
  color: #f5ead1;
  cursor: pointer;
}

.test-btn:hover { background: rgba(255,255,255,0.1); }
.test-btn.active { background: #d4a838; color: #1a1a2e; border-color: #d4a838; }

.test-info {
  font-size: 13px;
  color: rgba(245,234,209, 0.6);
  margin-left: auto;
}

.test-select {
  padding: 5px 10px;
  font-size: 13px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: #f5ead1;
}


/* ============================================================
   UNIFIED CINEMATIC SYSTEM — matches tablet.html + design canvas
   Added 2026-04-21 as part of TV/Tablet unification.
   ============================================================ */
:root {
  --cn-bg: #070d17;
  --cn-bg2: #0c1522;
  --cn-card: rgba(255,255,255,.045);
  --cn-card-strong: rgba(255,255,255,.07);
  --cn-card-border: rgba(245,234,209,.10);
  --cn-card-border-gold: rgba(212,168,56,.22);
  --cn-cream: #f5ead1;
  --cn-gold: #d4a838;
  --cn-gold-soft: rgba(212,168,56,.18);
  --cn-gold-glow: rgba(212,168,56,.35);
  --cn-mute: rgba(245,234,209,.58);
  --cn-faint: rgba(245,234,209,.32);
  --cn-green: #5adca0;
}
.cn-ambient-aurora {
  position: fixed; top: -260px; left: -140px; right: -140px; height: 620px;
  background:
    radial-gradient(ellipse 55% 60% at 30% 80%, rgba(90,220,160,.18), transparent 62%),
    radial-gradient(ellipse 50% 55% at 68% 50%, rgba(140,90,200,.14), transparent 65%),
    radial-gradient(ellipse 60% 60% at 50% 70%, rgba(212,168,56,.09), transparent 72%);
  filter: blur(32px); pointer-events: none; z-index: 0;
}
.cn-ambient-mountains {
  position: fixed; bottom: 0; left: 0; right: 0; height: 220px;
  pointer-events: none; z-index: 0; opacity: .5;
}
.cn-ambient-mountains svg { width: 100%; height: 100%; display: block; }