@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Frank+Ruehl+Libre:wght@300;400;500;700;900&family=Inter:wght@300;400;500;600;700;800;900&family=Georgia&display=swap');

/* ───────────────────────────── DESIGN TOKENS ───────────────────────────── */
:root {
  /* Walnut wood gradient */
  --bg-walnut-top:    #2a1d12;
  --bg-walnut-mid:    #15110c;
  --bg-walnut-bottom: #0a0805;

  /* Bimah-only interior — warmer, lifted, parchment-by-candlelight tone.
     Used as the base layer of .bimah-panel only; the side Torah-arks stay
     on the deeper walnut so the bimah reads as the lit center of the set. */
  --bg-bimah-interior: #2e2215;

  /* Brass family */
  --brass:          #c9a46b;
  --brass-dim:      rgba(201,164,107,0.4);
  --brass-faint:    rgba(201,164,107,0.18);
  --brass-bg-tint:  rgba(201,164,107,0.05);
  --brass-glow:     rgba(201,164,107,0.18);

  /* Cream family */
  --cream:        #f0e3c4;
  --cream-muted:  rgba(240,227,196,0.65);
  --cream-dim:    rgba(240,227,196,0.45);

  /* Verdigris (live-status accent) */
  --verdigris:      #7a9484;
  --verdigris-bg:   rgba(122,148,132,0.08);
  --verdigris-glow: rgba(122,148,132,0.4);

  /* Alert red */
  --alert-red: #ff5a5a;

  /* Type families */
  --font-serif:  "Cormorant Garamond", Georgia, serif;
  --font-sans:   "Inter", "Source Sans 3", system-ui, sans-serif;
  --font-hebrew: "Frank Ruehl Libre", "Frank Ruehl CLM", "SBL Hebrew", Georgia, serif;
}

/* ───────────────────────────── RESET ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  background: #000;
  font-family: var(--font-sans);
  color: var(--cream);
  font-kerning: normal;
  font-variant-ligatures: contextual;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Backdrop layer — tv-client.js mounts backgroundImageUrl into #videoBackdropMedia
   to fill the viewport behind the scaled stage, so letterbox bars show the backdrop
   image (matching production) instead of solid black. */
.video-backdrop {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.video-backdrop-media { position: absolute; inset: 0; }
.video-backdrop-media img { display: block; }
.video-backdrop-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,18,0.12), rgba(8,12,18,0.34));
}

/* ───────────────────────── STAGE SCAFFOLDING ───────────────────────── */
.tv-fixed-viewport {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: transparent;
  overflow: hidden;
  z-index: 1;
}
.tv-fixed-stage {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  /* width / height / transform are written inline by the stage manager script */
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--bg-walnut-top) 0%, var(--bg-walnut-mid) 60%, var(--bg-walnut-bottom) 100%);
}

/* ───────────────────────── THE SCREEN ─────────────────────────
   Width/height fill the parent .tv-fixed-stage. The stage-manager script
   sizes the stage to match the viewport aspect ratio (e.g. 2177×1080 on a
   1920×953 browser window) so that — after its transform:scale — the design
   covers the full viewport width. The 1080p design proportions still hold
   because the script only varies the stage's WIDTH; the vertical 1080-unit
   budget is preserved.                                                       */
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
  /* Stacked layers (top → bottom):
       1. walnut linear-gradient — primary palette, blended at 88%
       2. walls.webp stone-wall texture — bottom-most subtle backdrop
     The wood-grain noise (.screen::before / ::after) sits on top via z-index. */
  background:
    /* Walnut overlay pushed near-opaque so the stone image only adds atmosphere,
       not a competing visual feature. */
    linear-gradient(180deg,
      rgba(42,29,18,0.965)   0%,
      rgba(29,22,16,0.972)  28%,
      rgba(21,17,12,0.978)  55%,
      rgba(15,12,8,0.984)   78%,
      rgba(10,8,5,0.990)   100%),
    url("walls.webp") center / cover no-repeat;
  background-color: var(--bg-walnut-mid);
}

/* Wood-grain noise overlays (two stacked SVG turbulence layers) — opacity ~7-8% */
.screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='n'><feTurbulence type='turbulence' baseFrequency='0.012 0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0 0.38  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 1200px 1200px;
  opacity: 0.085; mix-blend-mode: overlay; z-index: 1;
}
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.6' numOctaves='3' seed='11'/><feColorMatrix values='0 0 0 0 0.65  0 0 0 0 0.5  0 0 0 0 0.3  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 100% 800px;
  opacity: 0.07; mix-blend-mode: soft-light; z-index: 1;
  /* Subtle inset vignette — darkens the four corners ~10%, mimics signage lighting falloff */
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.42);
}
.screen > * { position: relative; z-index: 2; }

/* ───────────────────────── OUTER LAYOUT GRID ───────────────────────── */
/* Vertical: 16 + 110 + 10 + 50 + 10 + 808 + 10 + 50 + 16 = 1080 ✓
   Horizontal: 5% each side → dashboard occupies 90% of the screen width.
   Row order: header / upcoming / main / footer (upcoming moved up per Fix 5). */
.layout {
  position: absolute;
  inset: 16px 5%;
  display: grid;
  grid-template-rows: 110px 50px 808px 50px;
  row-gap: 10px;
  width: 90%;
}
.layout > * { min-height: 0; min-width: 0; }

/* Lock each zone to its grid row by number, NOT auto-flow. Without this,
   when .zone-upcoming gets .hidden (display:none — empty UpcomingEvents
   in the reconnecting / minimal scenarios), grid auto-flow shifts the
   remaining children up: zone-main collapses into the 50px upcoming row
   and zone-footer expands into the 808px main row, causing the footer
   text ("First / Count / Last") to render BEHIND the photo and bimah. */
.zone-topbar    { grid-row: 1; }
.zone-upcoming  { grid-row: 2; }
.zone-main      { grid-row: 3; }
.zone-footer    { grid-row: 4; }

/* ════════════════════════════════════════════════════════════════════
   ZONE 1 — TOPBAR (110px, single flowing strip)
   ════════════════════════════════════════════════════════════════════ */
.zone-topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: transparent;
  /* Clip any oversized child (e.g. tv-client.js inline-sizing the clock,
     long synagogue names, stacked Hebrew dates) so they cannot bleed into
     the 50px upcoming row directly below this 110px topbar. */
  overflow: hidden;
}

/* ─── TOPBAR LEFT — RABBI TEST kicker + message, centered vertically ─── */
.top-left {
  display: flex; align-items: center;
  height: 100%;
  min-width: 0;
}
.rabbi-block {
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rabbi-kicker {
  font-family: var(--font-sans); font-weight: 700;
  color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 11px; line-height: 1;
}
.rabbi-msg {
  color: rgba(240,227,196,0.78);
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400;
  font-size: 15px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  letter-spacing: 0.01em;
}

/* Date typography (now lives on the right, in .top-right-dates) */
.english-date {
  font-family: var(--font-serif); font-style: italic;
  color: var(--cream); font-size: 24px; letter-spacing: 0.025em;
  line-height: 1.15;
}
.hebrew-date {
  font-family: var(--font-hebrew); direction: rtl;
  color: var(--brass); font-size: 20px; letter-spacing: 0.01em;
  line-height: 1.15;
}

/* ─── TOPBAR CENTER (synagogue identity headline) ─── */
.top-center {
  display: flex; align-items: center; justify-content: center;
  gap: 0; min-width: 0;
}
.top-center .rule-side {
  flex: 1 1 0; height: 1px; min-width: 28px;
  background: linear-gradient(90deg,
    rgba(201,164,107,0) 0%,
    rgba(201,164,107,0.55) 100%);
}
.top-center .rule-side.rule-right {
  background: linear-gradient(90deg,
    rgba(201,164,107,0.55) 0%,
    rgba(201,164,107,0) 100%);
}
.identity-row {
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
}
/* Logo sized to fit the 110px topbar (with 12px padding top/bottom →
   86px content area) and leave equal breathing room above and below.
   80px square gives ~3px clear above and below — visually balanced. */
.shul-logo {
  width: 80px; height: 80px;
  border: none;
  padding: 0;
  background: transparent;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px;
  overflow: hidden;
  align-self: center;
}
.shul-logo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: none;
}
/* Make sure the synagogue name shares the logo's vertical midline */
.identity-row { align-items: center; min-width: 0; }
.shul-name {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 500; color: var(--cream);
  font-size: 52px;
  /* line-height: 1 was clipping descenders on letters with tails (g, p,
     y, j) — italic serif descenders extend further than upright. 1.15
     gives the descender room without affecting the topbar's vertical
     centering since the topbar's grid alignment is line-box-based. */
  line-height: 1.15;
  letter-spacing: 0.005em; white-space: nowrap;
  /* Progressive enhancement — only kicks in when the name exceeds the
     center column. Without this, very long names ("Congregation Beth
     Shalom Bnei Yisrael of Boca Raton") got clipped mid-word by
     .zone-topbar's overflow:hidden with no soft cutoff. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── TOPBAR RIGHT — dates (left subcol) + clock & time (right subcol) ─── */
.top-right {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  height: 100%;
  justify-self: end;
  width: 100%;
}

/* Date stack: english on top, hebrew below — right-aligned to flow toward clock */
.top-right-dates {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px;
  text-align: right;
  min-width: 0;
}
.top-right-dates .hebrew-date { text-align: right; }

/* Clock cluster: analog dial + digital time stacked vertically (clock on top) */
.clock-cluster {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  flex: 0 0 auto;
}
.analog-clock {
  position: relative;
  /* !important required to beat tv-client.js inline width/height — same
     reason 720p and 1440p use it. Without this, the live render shows a
     200px+ clock that breaks the topbar layout. */
  width: 60px !important; height: 60px !important;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1a130c 0%, #0e0a06 90%);
  border: 1.5px solid var(--brass);
  box-shadow:
    0 0 0 1px rgba(201,164,107,0.10),
    inset 0 0 12px rgba(201,164,107,0.2),
    0 0 14px 1px rgba(201,164,107,0.18);
  flex: 0 0 auto;
}
/* Brass tick markers at 12 / 3 / 6 / 9 — refined with thicker brass strokes */
.clock-markers {
  position: absolute; inset: 3px;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--brass) 0 4px, transparent 4px) center top    / 1.5px 4px no-repeat,
    linear-gradient(0deg,   var(--brass) 0 4px, transparent 4px) center bottom / 1.5px 4px no-repeat,
    linear-gradient(90deg,  var(--brass) 0 4px, transparent 4px) left center   / 4px 1.5px no-repeat,
    linear-gradient(270deg, var(--brass) 0 4px, transparent 4px) right center  / 4px 1.5px no-repeat;
}
/* Hands — positioned via static layout so the live-clock script's
   `style.transform = rotate(...)` doesn't fight a CSS transform.
   transform-origin is at the bottom-center of each hand, which sits at the
   clock center thanks to bottom:50% + margin-left:-halfwidth. */
.clock-hand {
  position: absolute;
  left: 50%; bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 1px;
}
.clock-hand.hour   { width: 1.6px; height: 15px; margin-left: -0.8px;  background: var(--brass); }
.clock-hand.minute { width: 1.2px; height: 22px; margin-left: -0.6px;  background: var(--cream); }
.clock-hand.second { width: 1px;   height: 25px; margin-left: -0.5px;  background: var(--verdigris); }
.clock-center {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--brass); border-radius: 50%;
}
.clock-status {
  font-family: var(--font-sans); font-size: 9px;
  color: var(--alert-red); text-align: center;
  max-width: 120px; line-height: 1.2;
}
/* Digital time stacked under the analog dial.
   Was align-items: baseline which dropped "PM" visually to the bottom of
   the time numerals. Top-aligning lets "PM" ride the cap-height of the
   numerals — reads as a deliberate small-caps annotation rather than a
   sagging suffix. Slightly larger gap for breathing room. */
.clock-digital {
  font-family: var(--font-serif); font-style: italic;
  color: var(--cream); font-size: 18px;
  letter-spacing: 0.01em; line-height: 1;
  display: flex; align-items: flex-start; gap: 7px;
  white-space: nowrap;
}
.clock-digital .ampm {
  font-family: var(--font-sans); font-style: normal;
  font-size: 11px; color: var(--brass);
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  /* Nudge the PM glyph down ~1px so its cap-line visually matches the
     numeral cap-line (italic serif numerals carry slightly higher
     optical tops than uppercase sans). Pure visual tuning. */
  margin-top: 1px;
}

/* Visually-hidden utility for keeping required IDs in the DOM without rendering */
.vis-hidden {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════════════════════════
   ZONE 2 — MAIN GRID (810px tall, 3 columns)
   ════════════════════════════════════════════════════════════════════ */
.zone-main {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr 0.9fr;
  gap: 16px;
  height: 808px;
}

/* ─── LEFT / RIGHT INNER STACKS ─── */
.left-stack, .right-stack {
  display: grid;
  grid-template-rows: 1fr 150px;
  gap: 12px;
  height: 808px;
  min-height: 0;
}
.left-stack > *, .right-stack > * { min-height: 0; }

/* ─── TORAH-ARK PANEL — matte black tablet with arched top, brass-inlaid text
   (inspired by the habrit.jpg reference: clean Aron Kodesh silhouette, no
   frame, no ornaments — the arch shape and the brass text do all the work) ─── */
.ark-panel {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Layered wood-feel:
       1. fine vertical wood-grain (very low opacity repeating gradient)
       2. radial centre-glow on a dark walnut surface so it reads carved, not flat
       3. a base walnut color underneath everything */
  background:
    repeating-linear-gradient(90deg,
      rgba(201,164,107,0)     0px,
      rgba(201,164,107,0.05)  1px,
      rgba(201,164,107,0)     2px,
      rgba(0,0,0,0)           5px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0)           0px,
      rgba(0,0,0,0.18)        1px,
      rgba(0,0,0,0)           3px,
      rgba(0,0,0,0)           9px),
    radial-gradient(ellipse at 50% 12%, #1c1309 0%, #0a0604 70%),
    #0a0604;
  /* Elliptical arched top — rx = 50% of width, ry = 110px. */
  border-top-left-radius:  50% 110px;
  border-top-right-radius: 50% 110px;
  /* Carved-into-wood feel: stronger inset shadows (recessed surface),
     warm outline so the silhouette reads against the wood texture,
     and a tighter outer drop shadow grounded in the panel below. */
  box-shadow:
    0 0 0 1px rgba(201,164,107,0.32),
    inset 0 1px 0 rgba(255,224,170,0.08),
    inset 0 0 0 4px rgba(0,0,0,0.55),
    inset 0 -3px 12px rgba(0,0,0,0.7),
    inset 0 0 60px rgba(0,0,0,0.45),
    0 6px 22px rgba(0,0,0,0.48);
}

/* Brass diamond ornament at the peak of the arch — embossed look. */
.ark-panel::before {
  content: ""; position: absolute;
  top: 14px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  background: linear-gradient(135deg,
    #e6c489 0%,
    #c9a46b 45%,
    #8d6a3a 100%);
  transform: rotate(45deg);
  /* Embossed metal hardware: bright top-left highlight + dark bottom-right shadow */
  box-shadow:
    inset 1px 1px 0 rgba(255,236,194,0.55),
    inset -1px -1px 0 rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(201,164,107,0.35);
  pointer-events: none;
  z-index: 1;
}

/* ─── UNIFIED SECTION-HEADER DESIGN LANGUAGE ───
   Two label tiers share one typographic family — Cormorant Garamond
   italic, weight 500, brass, uppercase, brass hairlines flanking the
   text — and differ only in size + tracking, like a printed program:
     • Tier 1 (panel headers):  .ark-title, .weather-title, .mini-arc-title
     • Tier 2 (in-flow labels): .parasha-kicker, .mini-section-label */
.ark-title,
.weather-title,
.mini-arc-title,
.parasha-kicker,
.mini-section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-serif); font-style: italic;
  color: var(--brass);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.ark-title::before,        .ark-title::after,
.weather-title::before,    .weather-title::after,
.mini-arc-title::before,   .mini-arc-title::after,
.parasha-kicker::before,   .parasha-kicker::after,
.mini-section-label::before, .mini-section-label::after {
  content: ""; height: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg,
    rgba(201,164,107,0)    0%,
    rgba(201,164,107,0.75) 50%,
    rgba(201,164,107,0)    100%);
}
/* Tier 1 — major section headers: 22px, 0.32em, longer flanks */
.ark-title, .weather-title, .mini-arc-title {
  font-size: 22px;
  letter-spacing: 0.32em;
}
.ark-title::before,      .ark-title::after,
.weather-title::before,  .weather-title::after,
.mini-arc-title::before, .mini-arc-title::after { width: 56px; }
/* Tier 2 — bimah in-flow content labels: 13px, 0.3em, shorter flanks */
.parasha-kicker, .mini-section-label {
  font-size: 13px;
  letter-spacing: 0.3em;
}
.parasha-kicker::before,     .parasha-kicker::after,
.mini-section-label::before, .mini-section-label::after { width: 35px; }

/* Ark-title sits inside the arch curve — keep it absolute-positioned there,
   but inherit the unified flex+hairline treatment above. */
.ark-title {
  position: absolute;
  left: 0; right: 0;
  top: 60px;
  pointer-events: none;
  /* Inlaid-brass effect: top-edge highlight + bottom-edge shadow */
  text-shadow:
    0 1px 0 rgba(255,224,170,0.18),
    0 -1px 0 rgba(0,0,0,0.7),
    0 0 12px rgba(201,164,107,0.25);
}

/* Below the arch — the row body. Margin pushes content past the arch curve
   so rows don't crash into the curved top. */
.ark-body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0;
  margin-top: 110px;
  overflow: hidden;
  border-top: 1px solid rgba(201,164,107,0.18);
}
.scroll-list {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
}

.motion-scroll-track {
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.motion-scroll-track.is-vertical {
  transform: translate3d(0, 0, 0);
}
.motion-scroll-track.is-horizontal {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  transform: translate3d(0, 0, 0);
}
.motion-scroll-set {
  display: block;
}
.motion-scroll-track.is-horizontal .motion-scroll-set {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.motion-scroll-set.clone {
  pointer-events: none;
}
.motion-scroll-track.is-vertical .motion-scroll-set.clone {
  margin-top: 28px;
}
.motion-scroll-track.is-horizontal .motion-scroll-set.clone {
  margin-left: 48px;
}

.minyan-divider {
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 26px;
  border-top: 1px solid rgba(201,164,107,0.42);
  border-bottom: 1px solid rgba(201,164,107,0.16);
  color: color-mix(in srgb, var(--brass) 82%, var(--cream) 18%);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(201,164,107,0.055);
  flex: 0 0 24px;
}

/* ─── SHARED ROW STYLING (unified between zmanim and prayer schedule)
   All row text is brass-inlaid to match the engraved-Ten-Commandments look. */
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 26px;
  position: relative;
  height: 68px;
  flex: 0 0 68px;
}
.row.alt { background: rgba(201,164,107,0.035); }
.row .row-label { display: flex; flex-direction: column; min-width: 0; }
.row .label-en {
  font-family: var(--font-sans);
  font-size: 22px;
  color: color-mix(in srgb, var(--brass) 70%, var(--cream) 30%);
  font-weight: 500;
  letter-spacing: 0.015em;
  text-shadow:
    0 1px 0 rgba(255,224,170,0.10),
    0 -1px 0 rgba(0,0,0,0.6);
}
.row .label-he {
  font-family: var(--font-hebrew); direction: rtl;
  font-size: 16px;
  color: rgba(201,164,107,0.55);
  margin-top: 2px;
}
.row .time {
  font-family: var(--font-sans); font-weight: 800;
  color: var(--brass); font-size: 42px;
  font-variant-numeric: tabular-nums; line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  /* Engraved/inlaid brass effect on the hero time values */
  text-shadow:
    0 1px 0 rgba(255,224,170,0.18),
    0 -1px 0 rgba(0,0,0,0.7),
    0 0 8px rgba(201,164,107,0.22);
}
.row .time .ampm {
  font-size: 22px; font-weight: 600;
  color: var(--brass);
  margin-left: 5px; letter-spacing: 0.16em;
  text-shadow: none;
}

/* "Live" / "current" row — brass highlight. .live is set on the next
   upcoming Prayer Schedule service; .current is set on the next upcoming
   Daily Zman. Both share the same brass treatment so the two columns read
   as matched siblings answering "what's the next event?". */
.row.live,
.row.current {
  background: linear-gradient(90deg,
    rgba(201,164,107,0.28) 0%,
    rgba(201,164,107,0.08) 55%,
    transparent 100%);
  border-left: 4px solid var(--brass);
  padding-left: 22px;
}
.row.live .time,      .row.current .time       { color: var(--brass); font-weight: 800; }
.row.live .time .ampm, .row.current .time .ampm { color: var(--brass); }

/* Prayer Schedule rows — 2pt larger than zmanim rows (most prominent info) */
#scheduleScroll .row .label-en { font-size: 24px; }
#scheduleScroll .row .label-he { font-size: 18px; }
#scheduleScroll .row .time     { font-size: 44px; }
#scheduleScroll .row .time .ampm { font-size: 23px; }

/* ════════════════════════════════════════════════════════════════════
   BIMAH PANEL — center column, the architectural twin of the side
   Torah-arks but wider and shallower. Three internal tiers stacked
   under a single brass-bordered, wood-textured silhouette:
     1. parasha headline    (≈84px)
     2. sanctuary photo     (≈340px, the visual anchor)
     3. information grid    (sub-row A: candles | QR
                             sub-row B: today    | current holiday)
   ════════════════════════════════════════════════════════════════════ */
.bimah-panel {
  position: relative;
  height: 808px;
  display: grid;
  grid-template-rows: 120px 300px 1fr;
  row-gap: 10px;
  /* Top padding only clears the diamond ornament — the parasha tier itself
     now lives INSIDE the arched crown, vertically centered there. */
  padding: 36px 18px 16px;
  overflow: hidden;

  /* Wood-grain back — same vertical-grain pattern as the side arks, but
     calibrated up against this lighter interior so the grain still reads
     as visibly present. The arks use 0.05/0.18 against deep walnut; here
     we run the brass ticks at 0.04 and the dark grain at 0.10 so the
     same grain language survives the contrast change. */
  background:
    repeating-linear-gradient(90deg,
      rgba(201,164,107,0)     0px,
      rgba(201,164,107,0.04)  1px,
      rgba(201,164,107,0)     2px,
      rgba(0,0,0,0)           5px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0)           0px,
      rgba(0,0,0,0.10)        1px,
      rgba(0,0,0,0)           3px,
      rgba(0,0,0,0)           9px),
    radial-gradient(ellipse at 50% 18%, #483823 0%, #2e2215 70%),
    var(--bg-bimah-interior);

  /* Shallow arch — ry ≈ 13% of the wider center column (vs the arks'
     deeper curves on narrower columns). */
  border-top-left-radius:  50% 100px;
  border-top-right-radius: 50% 100px;

  /* Carved-wood elevation, matched to the ark style: same matted gallery
     frame (1px brass outer → 4px dark inset matting → recessed interior),
     same top-edge highlight + bottom-edge shadow. The matting uses a fixed
     near-black so it shows as a distinct frame line against the lighter
     bimah interior, and the bottom shadow / vignette opacities are nudged
     up slightly to maintain the same carved-depth perception against the
     lighter wood. */
  box-shadow:
    0 0 0 1px rgba(201,164,107,0.32),
    inset 0 1px 0 rgba(255,224,170,0.12),
    inset 0 0 0 4px rgba(10,8,5,0.78),
    inset 0 -3px 14px rgba(0,0,0,0.78),
    inset 0 0 80px rgba(0,0,0,0.55),
    0 6px 22px rgba(0,0,0,0.48);
}

/* Single brass diamond ornament at the bimah peak — the bimah is humbler
   than the ark, so it carries one ornament. Slightly larger than the
   ark's 14px so it reads as the head of the wider panel. */
.bimah-panel::before {
  content: ""; position: absolute;
  top: 18px; left: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  background: linear-gradient(135deg,
    #e6c489 0%,
    #c9a46b 45%,
    #8d6a3a 100%);
  transform: rotate(45deg);
  box-shadow:
    inset 1px 1px 0 rgba(255,236,194,0.55),
    inset -1px -1px 0 rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(201,164,107,0.35);
  pointer-events: none;
  z-index: 1;
}

.bimah-panel > * { min-height: 0; min-width: 0; }
.bimah-tier { position: relative; z-index: 2; }

/* ── Tier 1 — Parasha headline (centered VERTICALLY in the arched crown) ── */
.bimah-tier-parasha {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--brass-faint);
  overflow: hidden;
}
.bimah-tier-parasha .parasha-en {
  font-family: var(--font-serif); font-style: italic;
  color: var(--cream); font-size: 40px; line-height: 1.05;
  white-space: nowrap;
  /* Compound parshiyos like "Acharei Mot - Kedoshim" or
     "Vayakhel - Pekudei" can exceed the bimah width at 720p — soft
     cutoff with ellipsis instead of hard mid-word clip. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bimah-tier-parasha .parasha-he {
  font-family: var(--font-hebrew); direction: rtl;
  color: var(--brass); font-size: 36px; line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parasha-scroll-placeholder { display: none; }

/* ── Tier 2 — Sanctuary photo (visual anchor) ── */
.photo-frame {
  position: relative;
  margin: 0;
  height: 296px;
  border: 1px solid var(--brass);
  padding: 5px;
  background: var(--bg-walnut-bottom);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(201,164,107,0.25);
}
/* Inside the bimah, the photo fills the 340px tier exactly. */
.bimah-tier-photo { height: 100%; }
.photo-inner {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6),
              inset 0 0 24px rgba(0,0,0,0.5);
  background: #0a0805;
}
.photo-inner .slideshow-image,
.slideshow-image {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.photo-caption {
  position: absolute; right: 12px; bottom: 8px;
  font-family: Georgia, serif; font-style: italic;
  color: rgba(201,164,107,0.78); font-size: 12px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* ── Tier 3 — Information grid ── */
.bimah-tier-info {
  display: grid;
  grid-template-rows: 1.55fr 1fr;
  row-gap: 8px;
  min-height: 0;
}
.bimah-subrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--brass-faint);
  padding-top: 6px;
  min-height: 0;
}
.bimah-subrow > .bimah-block:first-child {
  border-right: 0.5px solid var(--brass-faint);
  padding-right: 14px;
}
.bimah-subrow > .bimah-block:last-child {
  padding-left: 14px;
}
.bimah-block {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}

/* Candles 2x2 inside the bimah — pure cell grid, no extra borders */
.candle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px 12px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.candle-cell {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; gap: 2px; padding: 0 8px;
  min-height: 0;
}
.candle-cell .lbl {
  font-family: var(--font-sans); color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 14px; font-weight: 700;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.signage-credit { justify-self:center; color:var(--cream-muted); font-family:var(--font-sans); font-size:clamp(8px,.55vw,12px); font-weight:700; text-align:center; white-space:nowrap; }
.signage-credit strong { display:block; color:var(--brass); letter-spacing:.1em; }
.candle-cell .val {
  font-family: var(--font-sans); font-weight: 700;
  color: var(--cream); font-size: 30px;
  font-variant-numeric: tabular-nums; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 5px;
}
.candle-cell .val .ampm {
  font-size: 16px; font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* QR + caption — sits beside the candles in sub-row A */
.qr-content {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
.qr-frame {
  width: 84px; height: 84px;
  background: transparent;
  padding: 3px;
  border: 1px solid var(--brass);
  flex: 0 0 auto;
  display: grid; place-items: center;
}
.qr-image { width: 100%; height: 100%; display: block; }
.qr-caption { display: flex; flex-direction: column; min-width: 0; }
.qr-caption-main {
  font-family: var(--font-serif); font-style: italic;
  color: var(--cream); font-size: 19px; letter-spacing: 0.01em;
  line-height: 1.2;
}
.qr-caption-sub {
  color: rgba(240,227,196,0.65); font-size: 13px;
  margin-top: 4px; line-height: 1.35;
}

/* Today chips — three chips horizontally inside .bimah-today */
.facts-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.hebcal-fact {
  padding: 4px 8px;
  text-align: center;
  border-right: 1px solid rgba(201,164,107,0.28);
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; justify-content: center;
  /* CRITICAL: grid items default to min-width: auto which lets nowrap
     children push the cell wider than its 1fr track. Without this, a
     value like "Shacharit and Mincha" overflows past the chip border
     into adjacent panels. min-width: 0 + overflow: hidden lets the
     grid track honor 1fr regardless of content width, and the value's
     own ellipsis rule kicks in inside that constrained box. */
  min-width: 0;
  overflow: hidden;
}
.hebcal-fact:last-of-type { border-right: none; }
.hebcal-fact .dc-lbl {
  font-family: var(--font-sans); color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 11px; font-weight: 700;
}
.hebcal-fact .dc-val {
  color: var(--cream); font-family: var(--font-sans);
  font-weight: 700; font-size: 18px; margin-top: 1px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  /* Allow wrap for values like "Shacharit and Mincha" so they break
     to a 2nd line instead of ellipsizing — preserves the information.
     The chip flex-column absorbs the extra height. The .hebcal-fact
     parent's overflow:hidden + min-width:0 (added above) still
     guarantees the chip can never push past its grid track. */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}
.hebcal-fact .dc-heb {
  font-family: var(--font-hebrew); direction: rtl;
  color: rgba(201,164,107,0.7); font-size: 13px; margin-top: 1px;
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Current Holiday + TodayEvents — flat row of (flag, en, he) repeats.
   Sized smaller than 24/21/28 so the common case of CurrentHoliday + 2
   TodayEvents (e.g. holiday scenario: Pesach Sheni + Pesach Sheni +
   Omer Day 29) fits cleanly. flex-wrap added as a safety net for when
   even the smaller sizes can't fit everything on one line. */
.today-events-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.today-chip-flag {
  font-size: 22px; line-height: 1;
  flex: 0 0 auto;
}
.today-chip-en {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 500;
  font-size: 19px; color: var(--cream);
  letter-spacing: 0.01em;
  /* Ellipsis fallback for genuinely-long single names; common case is 3
     chips fitting comfortably without truncation. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-chip-he {
  font-family: var(--font-hebrew); direction: rtl;
  color: var(--brass); font-size: 17px;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
   MINI-ARC WIDGET — left bottom panel (150px, matches Weather)
   ════════════════════════════════════════════════════════════════════ */
.mini-arc {
  height: 150px;
  border: 1px solid rgba(201,164,107,0.4);
  display: flex; flex-direction: column;
  padding: 10px 14px 8px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,164,107,0.04), transparent 70%);
}
/* .mini-arc-title — typography supplied by the unified .section-header rule. */
.mini-arc-body {
  flex: 1 1 auto;
  position: relative;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.mini-arc-body .curve {
  width: 100%; max-width: 280px;
  height: 100%;
  display: block;
}
/* "Now" label tracks the NOW dot — JS writes its left/top in pixel space
   (relative to .mini-arc-body) every minute and on resize, so the label
   floats just above the dot wherever the dot sits on the curve.
   translateX(-50%) centers it horizontally; translateY(-100%) lifts it
   so its bottom edge sits at the calculated top value. */
.mini-arc-body { position: relative; }
.mini-arc-now-label {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -100%);
  text-align: center; line-height: 1.05;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.mini-arc-now-label .nm {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--verdigris);
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
}
.mini-arc-now-label .tm {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--cream); font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  margin-top: 1px;
}

/* Bottom row carries Tefila + Chatzot only. Cells positioned absolutely
   so they sit directly under their arc dots (9.375% / 90.625% in viewBox). */
.mini-arc-labels {
  position: relative;
  margin: 2px auto 0;
  width: 100%; max-width: 280px;
  height: 28px;
}
.mini-arc-cell {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center; line-height: 1.2;
  white-space: nowrap;
}
.mini-arc-cell:first-child { left: 9.375%; }
.mini-arc-cell:last-child { left: 90.625%; }
.mini-arc-cell .nm {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--cream-muted); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
}
.mini-arc-cell .tm {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--brass); font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
/* ════════════════════════════════════════════════════════════════════
   WEATHER PANEL — right bottom panel (150px, compact)
   ════════════════════════════════════════════════════════════════════ */
.weather-panel {
  height: 150px;
  border: 1px solid rgba(201,164,107,0.4);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,164,107,0.04), transparent 70%);
}
.weather-head {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 14px 4px;
  gap: 3px;
}
/* .weather-title — typography supplied by the unified .section-header rule. */
.weather-now {
  color: var(--verdigris); font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
}
/* Same SVG containment as wcard icons — the "current" weather icon comes
   from the same {{.WeatherCurrentIcon}} markup and would otherwise blow
   out the inline weather-now line. */
.weather-now svg,
.weather-now img {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: middle;
  object-fit: contain;
}
/* Equal-width day cells regardless of day count. The dashboard may send
   5, 6, or 7 days — flex with `flex: 1 1 0` divides the available width
   evenly across whatever children render. (Was repeat(6, 1fr) which left
   a phantom empty column on the right when only 5 days came in, making
   the last card visually bleed into that space.) */
.weather-cards {
  display: flex;
  flex: 1 1 auto; gap: 0;
  border-top: 1px solid rgba(201,164,107,0.3);
}
.wcard {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; padding: 4px 2px;
  border-right: 1px solid rgba(201,164,107,0.18);
}
.wcard:last-child { border-right: none; }
.wcard.alt { background: rgba(201,164,107,0.04); }
.wcard .ico {
  font-size: 20px; line-height: 1; filter: saturate(0.85);
  display: inline-flex; align-items: center; justify-content: center;
  height: 1em;
}
/* Constrain SVG / img weather icons to the same visual size as the emoji
   fallback. The dashboard sends real <svg> markup for {{.IconSVG}} which
   otherwise renders at its intrinsic size and pushes .temps off the card. */
.wcard .ico > svg,
.wcard .ico > img {
  width: 1em; height: 1em;
  max-width: 100%; max-height: 100%;
  display: block; object-fit: contain;
}
.wcard .day {
  font-family: var(--font-sans); color: var(--cream-muted);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 11px; font-weight: 700;
}
.wcard .temps {
  font-family: var(--font-sans); color: var(--brass);
  font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════
   ZONE 1B — UPCOMING (50px, sits directly under the header)
   ════════════════════════════════════════════════════════════════════ */
.zone-upcoming {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 0 18px;
  overflow: hidden; white-space: nowrap;
  /* Subtle darker band — anchors the strip as its own zone, distinct from
     the header above and the main grid below. */
  background: rgba(0, 0, 0, 0.28);
  border-top:    0.5px solid var(--brass-faint);
  border-bottom: 0.5px solid var(--brass-faint);
}
/* Slightly amped-up wood grain inside the upcoming strip so it catches
   light a bit more than the surrounding panel — same texture pattern as
   the screen, just at higher opacity. */
.zone-upcoming::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'><filter id='n'><feTurbulence type='turbulence' baseFrequency='0.012 0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0 0.38  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 1200px 1200px;
  opacity: 0.085;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.zone-upcoming > * { position: relative; z-index: 1; }
.upcoming-lbl {
  font-family: var(--font-sans); color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 11px; font-weight: 700;
  flex: 0 0 auto;
}
.upcoming-list {
  color: rgba(240,227,196,0.72); font-family: var(--font-sans);
  font-size: 16px; letter-spacing: 0.02em;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.upcoming-marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  will-change: transform;
}
.upcoming-marquee-content {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
}
.upcoming-marquee-separator {
  color: rgba(201,164,107,0.4);
  padding: 0 24px;
  flex: 0 0 auto;
}
.upcoming-list .ev   { color: var(--cream); font-weight: 600; }
.upcoming-list .star { color: var(--brass); margin-right: 4px; }
.upcoming-list .pipe { color: rgba(201,164,107,0.4); padding: 0 12px; }
.upcoming-list .dot  { color: var(--brass); padding: 0 5px; }

/* tv-client.js writes upcoming events as <div class="seasonal-row"> blocks
   (each containing .seasonal-copy and .seasonal-meta). Without these rules
   the divs would stack vertically and the upcoming strip would clip to a
   single row. Flow them inline so the strip behaves as a single nowrap
   line — matches the inline-span fallback markup. */
.upcoming-list .seasonal-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 22px;
  vertical-align: middle;
}
.upcoming-list .seasonal-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.upcoming-list .seasonal-english { color: var(--cream); font-weight: 600; }
.upcoming-list .seasonal-hebrew  { color: var(--brass); font-family: var(--font-hebrew); direction: rtl; }
.upcoming-list .seasonal-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: rgba(201,164,107,0.85);
}
.upcoming-list .seasonal-meta strong { font-weight: 600; color: var(--cream); }

/* Pipe separator between adjacent seasonal-row blocks. The Go-template
   fallback (line 90 of yarden.html) emits <span class="pipe">|</span>
   between events, but tv-client.js's renderUpcomingEvents() rewrites the
   strip as <div class="seasonal-row"> blocks with no inline separator —
   this rule restores the visual divider so every event is delimited. */
.upcoming-list .seasonal-row + .seasonal-row::before {
  content: "|";
  color: rgba(201,164,107,0.4);
  margin-right: 12px;
  margin-left: -10px;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════
   ZONE 4 — FOOTER TELEMETRY (50px)
   ════════════════════════════════════════════════════════════════════ */
.zone-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 6px 8px;
  border-top: 1px solid rgba(201,164,107,0.22);
  opacity: 0.92;
}
.foot-left {
  display: flex; align-items: center; gap: 10px;
  justify-self: start;
}
.foot-logo {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #4dd0c0 0%, #2563b8 100%);
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 800; font-size: 8px; letter-spacing: -0.02em;
  border-radius: 2px;
}
.foot-wordmark {
  font-family: var(--font-sans); color: var(--brass);
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 13px; font-weight: 800;
}
.foot-center {
  justify-self: center;
  color: var(--cream-muted);
  font-family: var(--font-sans); font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.foot-center .dot { color: rgba(201,164,107,0.4); padding: 0 5px; }
.foot-right {
  justify-self: end;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px;
}
.foot-right .sep  { color: rgba(201,164,107,0.4); padding: 0 2px; }
.foot-right .size {
  color: var(--cream-muted);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Connection state pill */
.connection-state {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 22px;
  border-radius: 999px;
  background: rgba(122,148,132,0.1);
  border: 1px solid color-mix(in srgb, var(--verdigris) 50%, transparent);
  font-family: var(--font-sans);
  font-weight: 700; font-size: 11px;
  color: var(--verdigris);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.connection-state::before {
  content: "";
  position: absolute; left: 9px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--verdigris);
  box-shadow: 0 0 6px rgba(122,148,132,0.55);
}
.connection-state.reconnecting {
  color: #d9a44d;
  background: rgba(217,164,77,0.1);
  border-color: color-mix(in srgb, #d9a44d 50%, transparent);
}
.connection-state.reconnecting::before { background: #d9a44d; box-shadow: 0 0 6px rgba(217,164,77,0.55); }
.connection-state.disconnected {
  color: var(--alert-red);
  background: rgba(255,90,90,0.1);
  border-color: color-mix(in srgb, var(--alert-red) 50%, transparent);
}
.connection-state.disconnected::before { background: var(--alert-red); box-shadow: 0 0 6px rgba(255,90,90,0.55); }

/* ════════════════════════════════════════════════════════════════════
   ALERT RIBBON OVERLAY (hidden by default — centered modal banner)
   Sits in the middle of .screen so it overlays the prayers/photo area
   without ever covering the header or footer. Centered text, larger
   type, ~70% screen width.
   ════════════════════════════════════════════════════════════════════ */
.alert-ribbon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: grid;
  grid-template-columns: 6px 56px 1fr;
  align-items: center;
  width: 70%;
  max-width: 1100px;
  min-height: 88px;
  padding: 24px 36px 24px 0;
  gap: 22px;
  background: linear-gradient(180deg, #1c1410 0%, #14100a 100%);
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.4);
  animation: alert-slide-in 0.4s ease-out;
}
.alert-ribbon::before {
  content: "";
  background: var(--verdigris);
  align-self: stretch;
  width: 6px;
  grid-column: 1;
  border-radius: 8px 0 0 8px;
}
.alert-ribbon .alert-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(122,148,132,0.15);
  border: 1.5px solid var(--verdigris);
  display: grid; place-items: center;
  color: var(--verdigris);
  font-family: var(--font-serif); font-weight: 700; font-size: 34px;
  margin-left: 16px;
  grid-column: 2;
}
.alert-ribbon .alert-body {
  display: flex; flex-direction: column; gap: 6px;
  grid-column: 3;
  text-align: center;
  align-items: center;
  padding-right: 20px;
}
.alert-ribbon .alert-kicker {
  font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 13px; font-weight: 700;
  color: var(--verdigris);
}
.alert-ribbon .alert-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: 36px; color: var(--cream); line-height: 1.2;
}

/* Live (red) variant — pulses */
.alert-ribbon.alert-live {
  background: linear-gradient(180deg, #2a0e0e 0%, #1a0808 100%);
  border-bottom-color: rgba(255,90,90,0.45);
  animation: alert-slide-in 0.4s ease-out, alert-live-pulse 1.4s infinite ease-in-out;
}
.alert-ribbon.alert-live::before { background: var(--alert-red); }
.alert-ribbon.alert-live .alert-icon {
  background: rgba(255,90,90,0.15);
  border-color: var(--alert-red);
  color: var(--alert-red);
}
.alert-ribbon.alert-live .alert-kicker { color: var(--alert-red); }

@keyframes alert-slide-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 24px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes alert-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); }
  50%      { box-shadow: 0 0 36px 0 rgba(255,90,90,0.25); }
}

/* The .hidden utility — used by alertRibbon, hanukkahFact, clockStatus.
   Placed at the very end so source-order specificity beats earlier
   `display: grid/flex/...` rules on the same elements (e.g. .alert-ribbon). */
.hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-720P OVERRIDES — layout & spacing (Task 2)
   Layout factor: ×0.667 (1280/1920 = 720/1080).
   Borders ≤ 1.5px and percentages stay unchanged.
   Typography lives in the next override block (Task 3).
   ════════════════════════════════════════════════════════════════════ */

/* — Outer layout grid — */
.profile-small .layout {
  inset: 11px 5%;
  grid-template-rows: 73px 33px 539px 33px;
  row-gap: 7px;
}

/* — Topbar —
   Cap the topbar grid row to its visible height (73px) so items center
   inside the topbar — not inside the much-taller clock-cluster row that
   tv-client.js would otherwise force. Anything still taller (only the
   clock cluster) overflows and is clipped by .zone-topbar's overflow:
   hidden. The shul identity (logo + name + brass rules) centers cleanly. */
.profile-small .zone-topbar {
  gap: 16px;
  padding: 4px 16px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.profile-small .top-left   { align-items: center; }
.profile-small .top-right  { align-self: start; align-items: start; gap: 12px; }
.profile-small .rabbi-block { gap: 4px; }
/* identity-row keeps base align-items: center so the synagogue name
   centers vertically with the logo. */
.profile-small .identity-row { gap: 11px; padding: 0 12px; }
.profile-small .shul-logo { width: 53px; height: 53px; border-radius: 7px; }
.profile-small .shul-logo-img { border-radius: 7px; }
.profile-small .top-right-dates { gap: 1px; }
.profile-small .clock-cluster { gap: 2px; align-items: flex-end; }

/* — Main grid — */
.profile-small .zone-main {
  gap: 11px;
  height: 539px;
}
.profile-small .left-stack,
.profile-small .right-stack {
  grid-template-rows: 1fr 100px;
  gap: 8px;
  height: 539px;
}

/* — Ark panel (Daily Zmanim, Prayer Schedule) — */
.profile-small .ark-panel {
  border-top-left-radius:  50% 73px;
  border-top-right-radius: 50% 73px;
}
.profile-small .ark-panel::before {
  top: 9px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
}
.profile-small .ark-title { top: 40px; }
.profile-small .ark-body { margin-top: 73px; }
.profile-small .ark-title::before, .profile-small .ark-title::after,
.profile-small .weather-title::before, .profile-small .weather-title::after,
.profile-small .mini-arc-title::before, .profile-small .mini-arc-title::after { width: 37px; }
.profile-small .parasha-kicker::before, .profile-small .parasha-kicker::after,
.profile-small .mini-section-label::before, .profile-small .mini-section-label::after { width: 23px; }

/* — Row metrics (zmanim, schedule) — */
.profile-small .row {
  gap: 9px;
  padding: 0 17px;
  height: 45px;
  flex: 0 0 45px;
}
.profile-small .row.live {
  border-left: 3px solid var(--verdigris); /* keep 3px (visible) */
  padding-left: 15px;
}

/* — Bimah panel — */
.profile-small .bimah-panel {
  height: 539px;
  grid-template-rows: 80px 200px 1fr;
  row-gap: 7px;
  padding: 24px 12px 11px;
  border-top-left-radius:  50% 67px;
  border-top-right-radius: 50% 67px;
}
.profile-small .bimah-panel::before {
  top: 12px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
}
.profile-small .bimah-tier-parasha { gap: 4px; padding-bottom: 5px; }
.profile-small .photo-frame { height: 197px; padding: 3px; }
.profile-small .photo-caption { right: 8px; bottom: 5px; }
.profile-small .bimah-tier-info { row-gap: 5px; overflow: hidden; }
.profile-small .bimah-subrow { padding-top: 4px; min-width: 0; overflow: hidden; }
.profile-small .bimah-subrow > .bimah-block:first-child { padding-right: 7px; }
.profile-small .bimah-subrow > .bimah-block:last-child  { padding-left: 7px; }
.profile-small .bimah-block { gap: 4px; overflow: hidden; }

/* — Candle grid (4 cells, 2x2) — */
.profile-small .candle-grid { gap: 3px 8px; }
.profile-small .candle-cell { gap: 2px; padding: 0 5px; } /* 2px floor on gap */

/* — QR — */
.profile-small .qr-content { gap: 9px; }
.profile-small .qr-frame { width: 56px; height: 56px; padding: 2px; }
.profile-small .qr-caption-sub { margin-top: 3px; }

/* — Today chips — */
.profile-small .hebcal-fact { padding: 3px 5px; gap: 1px; }
.profile-small .today-events-grid { gap: 8px; }

/* — Mini-arc widget — */
.profile-small .mini-arc {
  height: 100px;
  padding: 7px 9px 5px;
}
.profile-small .mini-arc-body .curve { max-width: 187px; }
.profile-small .mini-arc-labels { max-width: 187px; height: 19px; }

/* — Weather panel — */
.profile-small .weather-panel { height: 100px; }
.profile-small .weather-head { padding: 5px 9px 3px; gap: 2px; }
/* Use flex instead of repeat(6, 1fr) so cards stay symmetrical regardless
   of how many forecast days the dashboard returns (5 / 6 / 7 / etc.). */
.profile-small .weather-cards { display: flex; }
.profile-small .wcard { flex: 1 1 0; min-width: 0; gap: 1px; padding: 3px 1px; }

/* — Upcoming strip — */
.profile-small .zone-upcoming { gap: 15px; padding: 0 12px; }
.profile-small .upcoming-list .pipe { padding: 0 8px; }
.profile-small .upcoming-list .dot  { padding: 0 3px; }

/* — Footer — */
.profile-small .zone-footer { gap: 16px; padding: 4px 5px; }
.profile-small .foot-left   { gap: 7px; }
.profile-small .foot-logo   { width: 9px; height: 9px; border-radius: 1px; }
.profile-small .foot-right  { gap: 5px; }
.profile-small .connection-state {
  padding: 3px 7px 3px 15px;
}
.profile-small .connection-state::before {
  left: 6px;
  width: 4px; height: 4px;
  margin-top: -2px;
}

/* — Alert ribbon — */
.profile-small .alert-ribbon {
  grid-template-columns: 4px 38px 1fr;
  width: 80%;
  min-height: 60px;
  padding: 14px 22px 14px 0;
  gap: 14px;
  border-radius: 6px;
}
.profile-small .alert-ribbon::before { width: 4px; border-radius: 6px 0 0 6px; }
.profile-small .alert-ribbon .alert-icon {
  width: 38px; height: 38px;
  margin-left: 10px;
  font-size: 22px;
}
.profile-small .alert-ribbon .alert-body { gap: 3px; padding-right: 12px; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-720P OVERRIDES — typography (Task 3)
   Font factor: ×0.75. Floors: 14px tracked labels, 16px reading body.
   ════════════════════════════════════════════════════════════════════ */

/* — Topbar dates & rabbi — */
.profile-small .rabbi-kicker {
  font-size: 14px; /* 11×0.75=8.25 → label floor 14 */
}
.profile-small .rabbi-msg {
  font-size: 16px; /* 15×0.75=11.25 → body floor 16 */
}
.profile-small .english-date {
  font-size: 11px;
  line-height: 1.15;
  max-width: 100%;
  /* Allow a 2-line wrap as graceful fallback for long dates like
     "Wednesday, September 25, 2026". Most dates fit on 1 line at 11px;
     the rare long ones wrap to 2 right-aligned lines instead of
     ellipsizing — full readability preserved. */
  text-align: right;
}
.profile-small .hebrew-date {
  font-size: 14px;
  line-height: 1.15;
}
.profile-small #hebrewDateHebrewText { font-size: 12px; line-height: 1.15; }
/* Dates — vertical stack, right-aligned:
     row 1 → English ("Thu, May 14, 2026")
     row 2 → transliterated Hebrew ("13 Iyyar 5786")
     row 3 → Hebrew script ("י״ג אִיָּיר תשפ״ו")
   Was a 2-col grid that placed English in its own left column; on long
   dates the whole block expanded leftward into the center cell and
   collided with the synagogue name. Stacking vertically caps the block
   width to the longest single line, and the cell-wide overflow:hidden +
   ellipsis on .english-date guarantees it can never bleed past the
   .top-right grid column. */
.profile-small .top-right-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.profile-small .top-right-dates #hebrewDateText {
  text-align: right;
  line-height: 1.15;
  white-space: nowrap;
}
.profile-small .top-right-dates #hebrewDateHebrewText {
  text-align: right;
  line-height: 1.15;
  white-space: nowrap;
}
.profile-small .shul-name {
  /* Reduced so "Congregation Kehillat Kodesh"-class names fit inside the
     1.4fr center cell without overflowing horizontally. */
  font-size: 26px;
  line-height: 1.15;
}
/* Brass rule-side hairlines vertically centered with the shul-name even
   when identity-row is top-aligned. */
.profile-small .top-center .rule-side { align-self: center; min-width: 18px; }

/* — Section headers (tier 1 / tier 2) — */
.profile-small .ark-title,
.profile-small .weather-title,
.profile-small .mini-arc-title {
  font-size: 17px; /* 22×0.75 */
  gap: 9px;
}
.profile-small .parasha-kicker,
.profile-small .mini-section-label {
  font-size: 14px; /* 13×0.75=9.75 → label floor 14 */
  gap: 9px;
}

/* — Row content (zmanim ark) —
   nowrap + ellipsis prevents long English labels (e.g. "Kabbalat Shabbat",
   "Mincha Gedola", "Plag HaMincha") from wrapping to a 2nd line and
   overflowing the fixed 45px row height. */
.profile-small .row .label-en {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-small .row .label-he {
  font-size: 14px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-small .row .time {
  font-size: 28px;
  line-height: 1.1;
}
.profile-small .row .time .ampm {
  font-size: 14px;
  margin-left: 3px;
}
.profile-small #scheduleScroll .row .label-en { font-size: 15px; }
.profile-small #scheduleScroll .row .label-he { font-size: 14px; }
.profile-small #scheduleScroll .row .time     { font-size: 28px; }
.profile-small #scheduleScroll .row .time .ampm { font-size: 14px; }

/* — Bimah parasha tier — */
.profile-small .bimah-tier-parasha .parasha-en { font-size: 30px; } /* 40×0.75 */
.profile-small .bimah-tier-parasha .parasha-he { font-size: 27px; } /* 36×0.75 */
.profile-small .photo-caption                  { font-size: 12px; }  /* visual caption, no floor — keep readable but small */

/* — Candle grid — */
.profile-small .candle-cell .lbl       { font-size: 14px; } /* 14×0.75=10.5 → label floor 14 */
.profile-small .candle-cell .val       { font-size: 23px; gap: 3px; } /* 30×0.75=22.5 */
.profile-small .candle-cell .val .ampm { font-size: 16px; } /* 16×0.75=12 → body floor 16 */

/* — QR captions — */
.profile-small .qr-caption-main { font-size: 12px; line-height: 1.2; }
/* Sub-caption is too verbose for the 720p QR block. Hide so it can't push
   the today subrow if a future template renders it. */
.profile-small .qr-caption-sub  { display: none; }

/* — Today chips — tightened so dashboard values like "27th day of Omer"
   fit in the narrow ~80px-wide fact cell without clipping the row below. */
/* "TACHANUN" is the longest label and was clipping mid-letter at the
   prior 10px / 0.1em sizing because the chip width (panel/3) is too
   narrow. Shrunk to 9px and tightened letter-spacing so the full word
   fits, with ellipsis as a safety net for any future longer label. */
.profile-small .hebcal-fact .dc-lbl {
  font-size: 9px;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tighten val so "28th day of the Omer" sits on one line instead of two
   — the 2-line wrap pushed the Hebrew niqud below into the bimah-tier
   overflow:hidden clip. Single-line val + 1.3 line-height on the Hebrew
   keeps the cantillation marks fully visible inside the tier bounds. */
/* Allow values like "Shacharit and Mincha" to wrap to 2 lines instead
   of ellipsizing — the chip is too narrow at 720p for the full string
   on one line, and ellipsis hides information the user needs. The
   parent .hebcal-fact is a flex column so a 2-line value just makes
   that one chip slightly taller; the grid row absorbs the height. */
.profile-small .hebcal-fact .dc-val {
  font-size: 10px;
  line-height: 1.15;
  margin-top: 1px;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
}
.profile-small .hebcal-fact .dc-heb { font-size: 10px; margin-top: 1px; line-height: 1.3; }
.profile-small .hebcal-fact { padding: 1px 4px; gap: 0; }

/* — Today events / Current Holiday — */
.profile-small .today-chip-flag { font-size: 21px; }  /* 28×0.75 — emoji */
.profile-small .today-chip-en   { font-size: 18px; }  /* 24×0.75 */
.profile-small .today-chip-he   { font-size: 16px; }  /* 21×0.75=15.75 → body floor 16 */

/* — Mini-arc — */
.profile-small .mini-arc-now-label .nm { font-size: 14px; } /* label floor */
.profile-small .mini-arc-now-label .tm { font-size: 16px; margin-top: 1px; } /* body floor */
.profile-small .mini-arc-cell .nm      { font-size: 14px; } /* label floor */
.profile-small .mini-arc-cell .tm      { font-size: 16px; margin-top: 1px; } /* body floor */

/* — Weather — reduced sizes so 6 days fit symmetrically on 720p without
   the temps row clipping inside the 100px panel. */
.profile-small .weather-title  { font-size: 13px; gap: 4px; }
.profile-small .weather-now    { font-size: 10px; letter-spacing: 0.08em; }
.profile-small .wcard .ico     { font-size: 14px; }
/* "TOMORROW" is the longest day label and was overflowing the card at
   10px / 0.08em letter-spacing. Shrunk + tightened to fit the narrowest
   card width without truncation, and added overflow guards so any future
   long label degrades to ellipsis instead of bleeding sideways. */
.profile-small .wcard .day     {
  font-size: 9px;
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-small .wcard .temps   { font-size: 11px; letter-spacing: 0; }

/* — Upcoming strip — */
.profile-small .upcoming-lbl   { font-size: 14px; } /* label floor */
.profile-small .upcoming-list  { font-size: 16px; } /* body floor */

/* — Footer telemetry —
   Footer is informational/telemetry, not primary content. The earlier
   "label floor: 14px" forced these strings (FIRST / COUNT / LAST /
   RELOAD / RECONNECTING / SCREEN SIZE) to read as loud as the rabbi
   message in the topbar at 720p, which felt heavy. Drop to 9–10px so the
   footer reads as a thin telemetry strip instead. */
.profile-small .foot-wordmark  { font-size: 10px; letter-spacing: 0.16em; }
.profile-small .foot-center    { font-size: 9px;  letter-spacing: 0.14em; }
.profile-small .foot-right     { font-size: 9px; }
.profile-small .foot-right .size { font-size: 9px;  letter-spacing: 0.14em; }
.profile-small .connection-state { font-size: 9px;  letter-spacing: 0.14em; }

/* — Clock digital readout & status — */
.profile-small .clock-digital      { font-size: 14px; gap: 3px; } /* 18×0.75=13.5 → label floor 14 */
.profile-small .clock-digital .ampm { font-size: 16px; }  /* body floor */
.profile-small .clock-status       { font-size: 16px; max-width: 80px; } /* body floor */

/* — Alert ribbon —
   Bumped at 720p so the message reads as a real notification, not a footnote.
   alert-body inherits text-align:center + align-items:center from the base
   .alert-ribbon .alert-body rule, so this is centered too. */
.profile-small .alert-ribbon .alert-kicker { font-size: 13px; letter-spacing: 0.22em; }
.profile-small .alert-ribbon .alert-text   { font-size: 28px; }
.profile-small .alert-ribbon .alert-icon   { font-size: 24px; }
.profile-small .alert-ribbon .alert-body   { padding-right: 14px; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-720P OVERRIDES — special cases (Task 4)
   !important is used ONLY on .clock-stage and .analog-clock width/height
   because tv-client.js writes inline styles on those elements at runtime.
   ════════════════════════════════════════════════════════════════════ */

.profile-small .analog-clock,
.profile-small .clock-stage {
  width:  40px !important;
  height: 40px !important;
}

/* Clock internals — no !important needed (tv-client.js doesn't inline-style these). */
.profile-small .clock-markers       { inset: 2px; }
.profile-small .clock-hand.hour     { width: 1.6px; height: 10px; margin-left: -0.8px; }
.profile-small .clock-hand.minute   { width: 1.2px; height: 15px; margin-left: -0.6px; }
.profile-small .clock-hand.second   { width: 1px;   height: 17px; margin-left: -0.5px; }
.profile-small .clock-center {
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE-720P OVERRIDES — overflow corrections (post-QA)
   Targeted fixes for elements that overflow at 720p native (1280×720).
   ════════════════════════════════════════════════════════════════════ */

/* Rabbi message — topbar inner height is 57px (73px − 8px×2 padding).
   Reduce font so 2 lines × 13px × 1.2 + label = ~50px fits without clipping. */
.profile-small .rabbi-block { gap: 2px; }
.profile-small .rabbi-msg   { font-size: 13px; -webkit-line-clamp: 2; line-height: 1.2; }
.profile-small .top-left    { overflow: hidden; }

/* Bimah parasha tier — 80px can't fit kicker + en + he + line-heights.
   Increase to 95px; tighten gap/padding to avoid spilling into next tier.
   Reduce en/he font sizes (was 30/27px) to leave room for date line below Hebrew. */
.profile-small .bimah-panel        { grid-template-rows: 95px 200px 1fr; }
.profile-small .bimah-tier-parasha { gap: 2px; padding-bottom: 2px; }
.profile-small .bimah-tier-parasha .parasha-en { font-size: 24px; }
.profile-small .bimah-tier-parasha .parasha-he { font-size: 21px; }

/* Weather panel — 100px clips temperature row; increase to 120px.
   mini-arc shares the same stack row, so it gets 120px too.
   Update left-stack and right-stack grid-template-rows to match. */
.profile-small .weather-panel { height: 120px; }
.profile-small .mini-arc      { height: 120px; }
.profile-small .left-stack,
.profile-small .right-stack   { grid-template-rows: 1fr 120px; }

/* Candle labels — at 14px + 0.18em letter-spacing "SHABBAT HAVDALAH" spans ~174px
   in a 108px cell and wraps to 2 lines, pushing the val out of the grid row.
   At 10px + letter-spacing 0, the widest label spans ~104px and fits on one line. */
.profile-small .candle-cell .lbl {
  font-size: 10px; letter-spacing: 0;
  white-space: nowrap; overflow: hidden;
}

/* Candle val — dashboard sends "Fri 7:21 PM" (with weekday prefix), so we
   need it small enough to fit on one line in the ~96px-usable cell width
   without wrapping the day onto a second row. */
.profile-small .candle-cell .val {
  font-size: 16px;
  white-space: nowrap;
}
.profile-small .candle-cell .val .ampm { font-size: 12px; }

/* Mini-arc THE DAY section — Task 3 floored .nm/.tm at 14px/16px, but the
   labels container was only scaled to 19px (×0.667 from 28px baseline).
   36px of content in 19px = bottom-clipped times. Reduce fonts and expand
   the container to 25px so all labels are fully visible. */
.profile-small .mini-arc-labels { height: 25px; }
.profile-small .mini-arc-now-label .nm { font-size: 10px; }
.profile-small .mini-arc-now-label .tm { font-size: 11px; margin-top: 0; }
.profile-small .mini-arc-cell .nm      { font-size: 10px; }
.profile-small .mini-arc-cell .tm      { font-size: 11px; margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-1080P OVERRIDES — targeted fixes
   1080p is the base resolution, but a few zones overflow at native size:
   stacked dates push past the topbar's overflow:hidden clip, and candle
   labels wrap into the section title. These rules only touch geometry
   and typography — no client data, no GoTemplate slots.
   ════════════════════════════════════════════════════════════════════ */

/* Topbar overflow handling — tv-client.js inline-sizes .clock-cluster to
   ~187px (252 × fillRatio), which would otherwise inflate the grid row
   past the 110px topbar height and push other items past the topbar's
   bottom edge. Cap the grid row to 1fr (= the topbar's own height) so
   alignment math is bounded by the visible 110px. Anything still taller
   than the row (only the clock cluster) overflows visually and is clipped
   by .zone-topbar's overflow: hidden. */
.profile-medium .zone-topbar { grid-template-rows: minmax(0, 1fr); align-items: center; }
.profile-medium .top-right { align-self: start; align-items: start; }
.profile-medium .top-left { align-items: center; }

/* Dates — two-column grid:
     left column  → English date, allowed to wrap to 2–3 lines
                    (e.g. "Wednesday," / "April 22," / "2026")
     right column → Hebrew dates stacked, transliterated on top
                    (e.g. "13 Iyyar 5786") and Hebrew script below
                    (e.g. "י״ג אִיָּיר תשפ״ו")
   This keeps the Hebrew script clear of the clock and avoids the long
   single-line overflow we saw with the inline layout. */
.profile-medium .top-right-dates {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 1px;
  margin-top: 4px;
  white-space: normal;
}
.profile-medium .top-right-dates .english-date {
  grid-column: 1;
  grid-row: 1 / span 2;
  max-width: 11ch;
  line-height: 1.1;
  text-align: right;
  align-self: center;
}
.profile-medium .top-right-dates #hebrewDateText {
  grid-column: 2; grid-row: 1;
  text-align: right;
  line-height: 1.15;
}
.profile-medium .top-right-dates #hebrewDateHebrewText {
  grid-column: 2; grid-row: 2;
  text-align: right;
  line-height: 1.15;
}

/* Candle labels — at 14px + 0.18em letter-spacing the right-column labels
   ("Shabbat Havdalah" / "Holiday Havdalah") wrap to 2 lines, which (a)
   makes them visually taller than the left column, and (b) pushes their
   top edge up against the "Candle Lighting" section title. Tighten size
   and letter-spacing so all 4 labels render on one line at the same height. */
.profile-medium .candle-cell .lbl {
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Add breathing room between the "Candle Lighting" title and the grid so
   the title's brass hairlines don't touch the labels even at the widest
   wrap edge cases. */
.profile-medium .bimah-candles { gap: 10px; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-1440P OVERRIDES — layout & spacing (Task 6)
   Layout factor: ×1.333 (2560/1920 = 1440/1080).
   Pure linear scale — no floors, no special judgement.
   Borders ≤ 1.5px and percentages stay unchanged.
   Typography lives in the next override block (Task 7).
   ════════════════════════════════════════════════════════════════════ */

/* — Outer layout grid — */
.profile-large .layout {
  inset: 21px 5%;
  grid-template-rows: 147px 67px 1077px 67px;
  row-gap: 13px;
}

/* — Topbar —
   Cap grid-template-rows to 1fr so the row equals the topbar's 147px
   visible height, not the 187px clock-cluster's intrinsic size. With a
   bounded row and align-items: center, identity (logo + name + rules)
   centers cleanly in the topbar. The clock cluster's residual overflow
   is clipped by .zone-topbar's overflow: hidden. */
.profile-large .zone-topbar {
  gap: 32px;
  padding: 16px 32px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.profile-large .top-left { align-items: center; }
.profile-large .top-right { align-self: start; align-items: start; gap: 24px; }
.profile-large .rabbi-block { gap: 11px; }
.profile-large .identity-row { gap: 21px; padding: 0 24px; }
.profile-large .shul-logo { width: 107px; height: 107px; border-radius: 13px; }
.profile-large .shul-logo-img { border-radius: 13px; }

/* Dates — two-column grid (same shape as 1080p, see the comment there).
   Left = English wrapping to 2–3 lines, right = Hebrew transliteration
   over Hebrew script. Keeps the Hebrew script clear of the clock at the
   wider 1440p stage. */
.profile-large .top-right-dates {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 22px;
  row-gap: 2px;
  margin-top: 4px;
  white-space: normal;
}
.profile-large .top-right-dates .english-date {
  grid-column: 1;
  grid-row: 1 / span 2;
  max-width: 11ch;
  line-height: 1.1;
  text-align: right;
  align-self: center;
}
.profile-large .top-right-dates #hebrewDateText {
  grid-column: 2; grid-row: 1;
  text-align: right;
  line-height: 1.15;
}
.profile-large .top-right-dates #hebrewDateHebrewText {
  grid-column: 2; grid-row: 2;
  text-align: right;
  line-height: 1.15;
}

.profile-large .clock-cluster { gap: 3px; }

/* — Main grid — */
.profile-large .zone-main {
  gap: 21px;
  height: 1077px;
}
.profile-large .left-stack,
.profile-large .right-stack {
  grid-template-rows: 1fr 200px;
  gap: 16px;
  height: 1077px;
}

/* — Ark panel — */
.profile-large .ark-panel {
  border-top-left-radius:  50% 147px;
  border-top-right-radius: 50% 147px;
}
.profile-large .ark-panel::before {
  top: 19px;
  width: 19px;
  height: 19px;
  margin-left: -9.5px;
}
.profile-large .ark-title { top: 80px; }
.profile-large .ark-body { margin-top: 147px; }
.profile-large .ark-title::before, .profile-large .ark-title::after,
.profile-large .weather-title::before, .profile-large .weather-title::after,
.profile-large .mini-arc-title::before, .profile-large .mini-arc-title::after { width: 75px; }
.profile-large .parasha-kicker::before, .profile-large .parasha-kicker::after,
.profile-large .mini-section-label::before, .profile-large .mini-section-label::after { width: 47px; }

/* — Row metrics — */
.profile-large .row {
  gap: 19px;
  padding: 0 35px;
  height: 91px;
  flex: 0 0 91px;
}
.profile-large .row.live {
  border-left: 4px solid var(--verdigris);
  padding-left: 31px;
}

/* — Bimah panel — */
.profile-large .bimah-panel {
  height: 1077px;
  grid-template-rows: 160px 400px 1fr;
  row-gap: 13px;
  padding: 48px 24px 21px;
  border-top-left-radius:  50% 133px;
  border-top-right-radius: 50% 133px;
}
.profile-large .bimah-panel::before {
  top: 24px;
  width: 21px;
  height: 21px;
  margin-left: -10.5px;
}
.profile-large .bimah-tier-parasha { gap: 8px; padding-bottom: 11px; }
.profile-large .photo-frame { height: 395px; padding: 7px; }
.profile-large .photo-caption { right: 16px; bottom: 11px; }
.profile-large .bimah-tier-info { row-gap: 11px; }
.profile-large .bimah-subrow { padding-top: 8px; }
.profile-large .bimah-subrow > .bimah-block:first-child { padding-right: 19px; }
.profile-large .bimah-subrow > .bimah-block:last-child  { padding-left: 19px; }
.profile-large .bimah-block { gap: 8px; }

/* — Candle grid — */
.profile-large .candle-grid { gap: 5px 16px; }
.profile-large .candle-cell { gap: 3px; padding: 0 11px; }

/* — QR — */
.profile-large .qr-content { gap: 19px; }
.profile-large .qr-frame { width: 112px; height: 112px; padding: 4px; }
.profile-large .qr-caption-sub { margin-top: 5px; }

/* — Today chips — */
.profile-large .hebcal-fact { padding: 5px 11px; gap: 3px; }
.profile-large .today-events-grid { gap: 16px; }

/* — Mini-arc widget — */
.profile-large .mini-arc {
  height: 200px;
  padding: 13px 19px 11px;
}
.profile-large .mini-arc-body .curve { max-width: 373px; }
.profile-large .mini-arc-labels { max-width: 373px; height: 37px; }

/* — Weather panel — */
.profile-large .weather-panel { height: 200px; }
.profile-large .weather-head { padding: 11px 19px 5px; gap: 4px; }
.profile-large .wcard { gap: 3px; padding: 5px 3px; }

/* — Upcoming strip — */
.profile-large .zone-upcoming { gap: 29px; padding: 0 24px; }
.profile-large .upcoming-list .pipe { padding: 0 16px; }
.profile-large .upcoming-list .dot  { padding: 0 7px; }

/* — Footer — */
.profile-large .zone-footer { gap: 32px; padding: 8px 11px; }
.profile-large .foot-left   { gap: 13px; }
.profile-large .foot-logo   { width: 19px; height: 19px; border-radius: 3px; }
.profile-large .foot-right  { gap: 11px; }
.profile-large .connection-state {
  padding: 5px 13px 5px 29px;
}
.profile-large .connection-state::before {
  left: 12px;
  width: 8px; height: 8px;
  margin-top: -4px;
}

/* — Alert ribbon — */
.profile-large .alert-ribbon {
  grid-template-columns: 8px 75px 1fr;
  min-height: 117px;
  padding: 32px 48px 32px 0;
  gap: 29px;
  border-radius: 11px;
}
.profile-large .alert-ribbon::before { width: 8px; border-radius: 11px 0 0 11px; }
.profile-large .alert-ribbon .alert-icon {
  width: 75px; height: 75px;
  margin-left: 21px;
  font-size: 45px;
}
.profile-large .alert-ribbon .alert-body { gap: 8px; padding-right: 27px; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-1440P OVERRIDES — typography (Task 7)
   Font factor: ×1.333. No floors needed (scale is upward).
   ════════════════════════════════════════════════════════════════════ */

/* — Topbar dates & rabbi — */
.profile-large .rabbi-kicker  { font-size: 15px; }  /* 11×1.333 */
.profile-large .rabbi-msg     { font-size: 20px; }  /* 15×1.333 */
.profile-large .english-date  { font-size: 32px; }  /* 24×1.333 */
.profile-large .hebrew-date   { font-size: 27px; }  /* 20×1.333 */
.profile-large .shul-name     { font-size: 69px; }  /* 52×1.333 */

/* — Section headers — */
.profile-large .ark-title,
.profile-large .weather-title,
.profile-large .mini-arc-title { font-size: 29px; gap: 19px; }
.profile-large .parasha-kicker,
.profile-large .mini-section-label { font-size: 17px; gap: 19px; } /* 13×1.333 */

/* — Row content — */
.profile-large .row .label-en  { font-size: 29px; }   /* 22×1.333 */
.profile-large .row .label-he  { font-size: 21px; margin-top: 3px; } /* 16×1.333 */
.profile-large .row .time      { font-size: 56px; }   /* 42×1.333 */
.profile-large .row .time .ampm { font-size: 29px; margin-left: 7px; }
.profile-large #scheduleScroll .row .label-en   { font-size: 32px; }  /* 24×1.333 */
.profile-large #scheduleScroll .row .label-he   { font-size: 24px; }  /* 18×1.333 */
.profile-large #scheduleScroll .row .time       { font-size: 59px; }  /* 44×1.333 */
.profile-large #scheduleScroll .row .time .ampm { font-size: 31px; }  /* 23×1.333 */

/* — Bimah parasha tier — */
.profile-large .bimah-tier-parasha .parasha-en { font-size: 53px; } /* 40×1.333 */
.profile-large .bimah-tier-parasha .parasha-he { font-size: 48px; } /* 36×1.333 */
.profile-large .photo-caption                  { font-size: 16px; } /* 12×1.333 */

/* — Candle grid — */
.profile-large .candle-cell .lbl       { font-size: 19px; }  /* 14×1.333 */
.profile-large .candle-cell .val       { font-size: 40px; gap: 7px; } /* 30×1.333 */
.profile-large .candle-cell .val .ampm { font-size: 21px; }  /* 16×1.333 */

/* — QR captions — */
.profile-large .qr-caption-main { font-size: 25px; } /* 19×1.333 */
.profile-large .qr-caption-sub  { font-size: 17px; } /* 13×1.333 */

/* — Today chips — */
.profile-large .hebcal-fact .dc-lbl { font-size: 15px; }                /* 11×1.333 */
.profile-large .hebcal-fact .dc-val { font-size: 24px; margin-top: 1px; } /* 18×1.333 */
.profile-large .hebcal-fact .dc-heb { font-size: 17px; margin-top: 1px; } /* 13×1.333 */

/* — Today events / Current Holiday — */
.profile-large .today-chip-flag { font-size: 37px; }  /* 28×1.333 */
.profile-large .today-chip-en   { font-size: 32px; }  /* 24×1.333 */
.profile-large .today-chip-he   { font-size: 28px; }  /* 21×1.333 */

/* — Mini-arc — */
.profile-large .mini-arc-now-label .nm { font-size: 15px; }
.profile-large .mini-arc-now-label .tm { font-size: 16px; margin-top: 1px; }
.profile-large .mini-arc-cell .nm      { font-size: 15px; }
.profile-large .mini-arc-cell .tm      { font-size: 17px; margin-top: 3px; }

/* — Weather — */
.profile-large .weather-now    { font-size: 15px; }
.profile-large .wcard .ico     { font-size: 27px; }  /* 20×1.333 */
.profile-large .wcard .day     { font-size: 15px; }
.profile-large .wcard .temps   { font-size: 21px; }

/* — Upcoming strip — */
.profile-large .upcoming-lbl   { font-size: 15px; }
.profile-large .upcoming-list  { font-size: 21px; }

/* — Footer telemetry — */
.profile-large .foot-logo      { font-size: 11px; }  /* 8×1.333=10.66 → 11 */
.profile-large .foot-wordmark  { font-size: 17px; }
.profile-large .foot-center    { font-size: 15px; }
.profile-large .foot-right     { font-size: 15px; }
.profile-large .foot-right .size { font-size: 15px; }
.profile-large .connection-state { font-size: 15px; }

/* — Clock digital readout & status — */
.profile-large .clock-digital      { font-size: 24px; gap: 7px; } /* 18×1.333 */
.profile-large .clock-digital .ampm { font-size: 15px; }
.profile-large .clock-status       { font-size: 12px; max-width: 160px; } /* 9×1.333 */

/* — Alert ribbon — */
.profile-large .alert-ribbon .alert-kicker { font-size: 17px; }
.profile-large .alert-ribbon .alert-text   { font-size: 48px; }  /* 36×1.333 */
.profile-large .alert-ribbon .alert-icon   { font-size: 45px; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE-1440P OVERRIDES — special cases (Task 8)
   Typography above is reduced below to two-thirds for TV readability.
   !important on .clock-stage / .analog-clock width-height because
   tv-client.js inline-styles those elements at runtime.
   ════════════════════════════════════════════════════════════════════ */

/* Large-profile type is intentionally quieter than the original 1440p scale. */
.profile-large .rabbi-kicker{font-size:10px}.profile-large .rabbi-msg{font-size:13px}.profile-large .english-date{font-size:21px}.profile-large .hebrew-date{font-size:18px}.profile-large .shul-name{font-size:46px}
.profile-large .ark-title,.profile-large .weather-title,.profile-large .mini-arc-title{font-size:19px}.profile-large .parasha-kicker,.profile-large .mini-section-label{font-size:11px}
.profile-large .row .label-en{font-size:19px}.profile-large .row .label-he{font-size:17px}.profile-large .row .time{font-size:27px}.profile-large .row .time .ampm{font-size:13px}.profile-large #scheduleScroll .row .label-en{font-size:21px}.profile-large #scheduleScroll .row .label-he{font-size:18px}.profile-large #scheduleScroll .row .time{font-size:29px}.profile-large #scheduleScroll .row .time .ampm{font-size:14px}
.profile-large .bimah-tier-parasha .parasha-en{font-size:35px}.profile-large .bimah-tier-parasha .parasha-he{font-size:32px}.profile-large .photo-caption{font-size:11px}
.profile-large .candle-cell .lbl{font-size:13px}.profile-large .candle-cell .val{font-size:27px}.profile-large .candle-cell .val .ampm{font-size:14px}
.profile-large .qr-caption-main{font-size:17px}.profile-large .qr-caption-sub{font-size:11px}
.profile-large .hebcal-fact .dc-lbl{font-size:10px}.profile-large .hebcal-fact .dc-val{font-size:16px}.profile-large .hebcal-fact .dc-heb{font-size:11px}
.profile-large .today-chip-flag{font-size:25px}.profile-large .today-chip-en{font-size:21px}.profile-large .today-chip-he{font-size:19px}
.profile-large .mini-arc-now-label .nm,.profile-large .mini-arc-cell .nm{font-size:10px}.profile-large .mini-arc-now-label .tm,.profile-large .mini-arc-cell .tm{font-size:11px}
.profile-large .weather-now{font-size:10px}.profile-large .wcard .ico{font-size:18px}.profile-large .wcard .day{font-size:10px}.profile-large .wcard .temps{font-size:14px}
.profile-large .upcoming-lbl{font-size:10px}.profile-large .upcoming-list{font-size:14px}
.profile-large .foot-logo{font-size:7px}.profile-large .foot-wordmark{font-size:11px}.profile-large .foot-center,.profile-large .foot-right,.profile-large .foot-right .size,.profile-large .connection-state{font-size:10px}
.profile-large .clock-digital{font-size:16px}.profile-large .clock-digital .ampm{font-size:10px}.profile-large .clock-status{font-size:8px}
.profile-large .alert-ribbon .alert-kicker{font-size:11px}.profile-large .alert-ribbon .alert-text{font-size:32px}.profile-large .alert-ribbon .alert-icon{font-size:30px}

.profile-large .analog-clock,
.profile-large .clock-stage {
  width:  80px !important;
  height: 80px !important;
}

/* Clock internals — no !important needed. */
.profile-large .clock-markers       { inset: 4px; }
.profile-large .clock-hand.hour     { width: 2px;   height: 20px; margin-left: -1px; }
.profile-large .clock-hand.minute   { width: 1.6px; height: 29px; margin-left: -0.8px; }
.profile-large .clock-hand.second   { width: 1.3px; height: 33px; margin-left: -0.65px; }
.profile-large .clock-center {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
}

.zone-footer { grid-template-columns:auto minmax(180px,1fr) minmax(0,2fr) auto; }