/* ═══════════════════════════════════════════════════════════════════
   YeetCast Portrait Engine v2 — iframe-side stylesheet.

   Loaded ONLY by the /yeetcast iframe (?iframe=1); every rule is gated on
   body.yc-portrait so landscape behavior is untouched. The parent window
   (page-yeetcast.php applyScale) owns the mode decision (width < 820px)
   and sets these vars on the iframe :root:

     --yc-total-height   logical canvas height (viewport height / scale)
     --yc-header-height  fixed header band (90: ws4kp 60 + 30 padding-top)
     --yc-stage-height   flexible middle stage height
     --yc-footer-height  fixed ticker band (77)
     --yc-dock-height    parent controls dock reserved BELOW the ticker

   Layout contract (mirrors weather.com/retro):
     header locked top | flexible stage | ticker | controls dock, bottom.
   The 640px logical width is sacred; the parent scales the whole canvas
   to the viewport width. The frame art (gradient + blue panel) is baked
   into 640x480 raster PNGs upstream, so in portrait we REDRAW it in CSS
   using colors sampled from images/backgrounds/1.png:
     top strip #1C0A57 · header orange #A24D12 · side ramp #37174B→#BD5A04
     bottom band #233270 · panel fill #21285A · panel bevel #254395.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Canvas ── */
body.yc-portrait #container {
  height: var(--yc-total-height, 480px) !important;
  padding-left: 0 !important;  /* neutralize ws4kp wide-mode 107px gutters */
  padding-right: 0 !important;
  background: #1c0a57 !important; /* raster bg replaced by CSS frame below */
}

/* ── Frame art + flex column [header | stage | (reserved footer+dock)] ──
   Background layers, top first:
     1. top strip            (#1C0A57, 0–28px)
     2. diagonal header band (orange → dark purple, 28–90px)
     3. bottom band          (navy, behind ticker + dock)
     4. side gradient ramp   (purple → orange, full height, underneath)   */
body.yc-portrait .weather-display.show {
  height: var(--yc-total-height, 480px) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding-bottom: calc(var(--yc-footer-height, 77px) + var(--yc-dock-height, 0px) + 4px) !important;
  background:
    linear-gradient(#1c0a57, #1c0a57) 0 0 / 640px 28px no-repeat,
    linear-gradient(100deg, #a24d12 0%, #a24d12 52%, #833e22 66%, #1c0a57 80%) 0 28px / 640px 62px no-repeat,
    linear-gradient(180deg, #141414 0, #141414 2px, #afafaf 2px, #afafaf 4px, #233270 4px, #1b2558 100%) left bottom / 640px calc(var(--yc-footer-height, 77px) + var(--yc-dock-height, 0px) + 4px) no-repeat,
    linear-gradient(180deg, #1c0a57 0px, #37174b 130px, #622c34 48%, #92441b 74%, #bd5a04 100%) 0 0 / 640px 100% no-repeat !important;
}

/* ── Header: fixed, locked top. border-box so the ws4kp 30px padding-top
   is included in the declared height instead of adding to it. ── */
body.yc-portrait .weather-display.show > .header {
  flex: 0 0 auto !important;
  height: var(--yc-header-height, 90px) !important;
  box-sizing: border-box !important;
}

/* ── Stage: the ONLY flexible region. flex-basis:0 + grow:1 makes it fill
   exactly the free space and never inflate to tall content — overflow is
   clipped instead of pushing past the ticker. ── */
body.yc-portrait .weather-display.show > .main {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}

/* ── The blue panel: the EXACT original art (images/yc-panel.png is the
   panel cropped from backgrounds/1.png at 52,90 → 583,398) stretched to
   the stage with border-image, so bevel, corners, and shading match the
   landscape original at any height. Margins/edges mirror the art: left 52,
   right 56, flush to the header top and the divider bottom.
   Applies to the inset-box (has-box) screens: current conditions, local
   forecast, latest observations, progress. ── */
body.yc-portrait .weather-display.show > .main.has-box {
  margin: 0 56px 0 52px !important;
  width: auto !important; /* side margins define the width */
  border: 16px solid transparent !important;
  border-image: url(images/yc-panel.png) 17 fill / 16px stretch !important;
  border-radius: 0 !important;
  /* Solid fill UNDER the border-image: at fractional canvas scales a
     subpixel seam can open between the border slices and the fill, and
     the orange screen background would bleed through as a 1px line. */
  background: #21285a !important;
  box-shadow: none !important;
}

/* ── Ticker: the ONE shared #container > .scroll (a sibling of every
   .weather-display, NOT a child) pinned just above the controls dock. ── */
body.yc-portrait #container > .scroll {
  position: absolute !important;
  bottom: var(--yc-dock-height, 0px) !important;
  left: 0 !important;
  width: 640px !important;
  height: var(--yc-footer-height, 77px) !important;
  margin: 0 !important; /* neutralize wide-mode -107px shift */
  z-index: 5 !important;
}
body.yc-portrait #container > .scroll .scroll-container {
  width: 640px !important;
  margin-left: 0 !important;
}

/* ════ Screen adapters ════ */

/* ── Current Conditions ──
   ws4kp absolutely positions two 255px cols side by side. Stack them and
   distribute the groups through the tall panel (matches retro): upper
   group temp/condition/icon/wind, lower group location + data rows. */
body.yc-portrait .main.current-weather .weather {
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  padding: 12px 0 !important;
  box-sizing: border-box !important;
}
body.yc-portrait .main.current-weather .col {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: block !important;
}
body.yc-portrait .main.current-weather .left.col {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 0 !important;
}
/* Big centered icon, sized off the stage so short windows do not clip */
body.yc-portrait .main.current-weather .icon img {
  max-height: clamp(85px, calc(var(--yc-stage-height, 310px) * 0.22), 175px) !important;
  width: auto !important;
}
body.yc-portrait .main.current-weather .wind-container {
  margin-left: 0 !important;
  justify-content: center !important;
  gap: 14px !important;
}
body.yc-portrait .main.current-weather .wind-container > div {
  width: auto !important;
}
/* Lower group: location + labelled data rows as real flex pairs
   (kills the float:right clipping at the panel edge) */
body.yc-portrait .main.current-weather .right.col {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
}
body.yc-portrait .main.current-weather .right.col .row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}
body.yc-portrait .main.current-weather .right.col .row .label {
  margin-left: 0 !important;
}
body.yc-portrait .main.current-weather .right.col .row .value {
  float: none !important;
  margin-right: 0 !important;
}

/* ── Latest Observations: rows flow from the top of the panel ── */
body.yc-portrait .main.latest-observations {
  padding: 16px 10px 0 !important;
}
body.yc-portrait .main.latest-observations .container {
  position: relative !important;
  height: auto !important;
}
body.yc-portrait .main.latest-observations .observation-lines {
  min-height: unset !important;
  padding-top: 14px !important;
}
body.yc-portrait .main.latest-observations .observation-lines .observation-row {
  height: 48px !important;
}

/* ── Local Forecast ──
   ws4kp pages periods through a clipped window and measures pageHeight
   from .container offsetHeight at data-fill time. KEEP the native 280px
   window (identical pacing/pagination to landscape — one period at a
   time, resize-proof) and center it vertically in the panel. */
body.yc-portrait .main.local-forecast {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
body.yc-portrait .main.local-forecast .container {
  position: relative !important;
  top: 0 !important;
  flex: 0 0 auto !important;
  height: 280px !important;
  overflow: hidden !important;
  margin: 26px 16px 0 !important;
  box-sizing: border-box !important;
}

/* ── Extended Forecast: centered day cards, each wearing the EXACT
   original card frame (images/yc-card.png, cropped from backgrounds/2.png
   at 38,100 174x297: black/silver/black bevel + blue gradient fill) ── */
body.yc-portrait .main.extended-forecast {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.yc-portrait .main.extended-forecast .day-container {
  margin: 0 auto !important;
  width: fit-content !important;
}
/* The 10px frame border widens each card; shrink the 15px side margins
   so three cards still fit the 640px row: 3 x (155 + 20 + 10) = 555.
   Cards grow vertically with the stage (anchored center via the centered
   day-container) and spread their content evenly down the taller card. */
body.yc-portrait .main.extended-forecast .day {
  border: 10px solid transparent !important;
  border-image: url(images/yc-card.png) 11 fill / 10px stretch !important;
  /* seam guard, same reason as the has-box panel */
  background: #2e2bc8 !important;
  margin: 0 5px !important;
  height: clamp(285px, calc(var(--yc-stage-height, 310px) * 0.6), 615px) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  vertical-align: top !important;
  box-sizing: content-box !important;
}

/* ── Almanac: reproduce the backgrounds/3.png art zones — orange ramp
   band (90→188px) behind the sunrise/sunset grid, dark gray (#3C3C3C)
   panel below for the moon block; moons reflow to a 2x2 grid centered in
   the gray zone ── */
body.yc-portrait #almanac-html.weather-display.show {
  background:
    linear-gradient(#1c0a57, #1c0a57) 0 0 / 640px 28px no-repeat,
    linear-gradient(100deg, #a24d12 0%, #a24d12 52%, #833e22 66%, #1c0a57 80%) 0 28px / 640px 62px no-repeat,
    linear-gradient(180deg, #141414 0, #141414 2px, #afafaf 2px, #afafaf 4px, #233270 4px, #1b2558 100%) left bottom / 640px calc(var(--yc-footer-height, 77px) + var(--yc-dock-height, 0px) + 4px) no-repeat,
    linear-gradient(180deg, #1c0a57 0px, #301350 90px, #6c3531 130px, #c36603 188px, #3c3c3c 189px, #3c3c3c 100%) 0 0 / 640px 100% no-repeat !important;
}
body.yc-portrait .main.almanac {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
/* Sun grid sits inside the 98px orange band (its landscape home) */
body.yc-portrait .main.almanac .sun {
  margin: 3px auto 5px auto !important;
  flex: 0 0 auto !important;
}
/* Moon block centers its title + 2x2 grid in the gray zone */
body.yc-portrait .main.almanac .moon {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.yc-portrait .main.almanac .moon .days {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 40px !important;
  justify-items: center !important;
  padding: 10px 60px !important;
}
body.yc-portrait .main.almanac .moon .day {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: auto !important;
}

/* ── Maps / Radar: fill the stage; maps crop, which is acceptable ──
   (height comes from the shared .main flex rule; these only clear the
   fixed upstream heights, e.g. .radar height:367px) */
body.yc-portrait .main.regional-forecast,
body.yc-portrait .main.radar {
  height: auto !important;
}
/* The radar map is absolute tiles inside an auto-height .container; give
   the container its native 367px box (clipped, positioned), center it,
   and scale it up (--yc-radar-scale from applyScale, capped) so the map
   fills the stage instead of floating between dead gradient bands. The
   sides crop — acceptable for a local radar. */
body.yc-portrait .main.radar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.yc-portrait .main.radar .container {
  position: relative !important;
  height: 367px !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  transform: scale(var(--yc-radar-scale, 1)) !important;
  transform-origin: center center !important;
}

/* ── Loading screen ── */
body.yc-portrait #loading {
  height: var(--yc-total-height, 480px) !important;
}