/* Shul Board — public display styles. Variant C layout, two themes. */

/* THEME TOKENS ------------------------------------------------------------- */
:root, .stage.theme-light {
  --bg:#1a232f; --board-bg:#f7f5f0; --ink:#1d2733; --ink-soft:#4a5868; --ink-mute:#8593a4;
  --line:#e3dfd4; --line-soft:#ede9de; --accent:#b88746; --accent-2:#3e6b8a; --rust:#b15a3f; --sage:#6b8a6e;
  --hi-bg:#fdf3d7; --hi-ink:#6b4f1f;
  --day-label:#8593a4;
  --font-serif:'Fraunces',serif; --font-sans:'Inter',system-ui,sans-serif;
  --font-heb:'Noto Serif Hebrew',serif; --font-heb2:'Heebo',sans-serif;
}
.stage.theme-dark {
  --board-bg:#14223f; --ink:#f4ecdb; --ink-soft:#c5beb0; --ink-mute:#8b8678;
  --line:#2a3a5e; --line-soft:#1f2c4a; --accent:#e6b94d; --accent-2:#6cb1e2; --rust:#e07b5b; --sage:#8eb088;
  --hi-bg:#2a3a5e; --hi-ink:#ffe28a;
  --day-label:#a8c7e0;
  --font-serif:'Fraunces',serif; --font-sans:'Inter',system-ui,sans-serif;
  --font-heb:'Frank Ruhl Libre',serif; --font-heb2:'Heebo',sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); overflow: hidden; }

/* Time displays use sans tabular nums with slashed-zero variants disabled. */
.clock, .srv td.time, .zmanim b, .shiur-row .when {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0, "ss01" 0, "ss02" 0, "cv01" 0, "cv02" 0;
}

/* Fit container: 1920×1080 stage scaled to viewport while preserving 16:9. */
.fit { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.stage {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px; transform-origin: top left;
  background: var(--board-bg); color: var(--ink); font-family: var(--font-sans);
}

/* BOARD LAYOUT (Variant C) ------------------------------------------------- */
/* Rows: header (auto), announcements (content-sized), right-row + services
   bottom span (1fr — absorbs leftover height). Light announcements days let
   yahrzeits/shiurim breathe; heavy days push them down to a sane minimum. */
.board {
  width: 100%; height: 100%; display: grid; padding: 28px 36px;
  grid-template-columns: 5fr 11fr;
  grid-template-rows: auto auto minmax(440px, 1fr);
  column-gap: 36px; row-gap: 18px; background: var(--board-bg); color: var(--ink);
}
.board > .announcements { padding-bottom: 18px; }
.board > .header { grid-column: 1/-1; }
.board > .services { grid-column: 1; grid-row: 2/span 2; border-right: 1px solid var(--line); padding-right: 32px; }
.board > .announcements { grid-column: 2; grid-row: 2; }
.board > .right-row {
  grid-column: 2; grid-row: 3;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
.board .right-row .yahrzeits { border-right: 1px solid var(--line); padding-right: 28px; }

/* HEADER ------------------------------------------------------------------- */
.header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.header > * { flex: 0 0 auto; min-width: 0; }
.header > .parsha { flex-shrink: 1; }

.date-en { font-family: var(--font-serif); font-size: 38px; font-weight: 600; color: var(--ink); line-height: 1.15; white-space: nowrap; }
.date-en .heb { display: block; font-family: var(--font-heb); font-size: 38px; font-weight: 700; color: var(--accent); margin-top: 6px; direction: rtl; text-align: left; white-space: nowrap; }
.date-en .seasonal { display: block; font-family: var(--font-heb2); direction: rtl; font-size: 24px; color: var(--ink-soft); margin-top: 8px; font-weight: 500; text-align: left; white-space: nowrap; }

.learning { display: grid; grid-template-columns: max-content max-content; column-gap: 20px; row-gap: 6px; align-items: baseline; }
.learning .label { color: var(--ink-mute); text-transform: uppercase; letter-spacing: .1em; font-size: 14px; font-weight: 700; white-space: nowrap; }
.learning .val { font-weight: 700; color: var(--ink); font-size: 20px; white-space: nowrap; }

.clock { font-size: 88px; font-weight: 700; color: var(--ink); text-align: center; letter-spacing: -3px; line-height: 1; white-space: nowrap; }
.clock .sec { font-size: 52px; vertical-align: super; color: var(--ink-mute); margin-left: 6px; letter-spacing: 0; font-weight: 600; }

.parsha { text-align: right; direction: rtl; font-family: var(--font-heb); }
.parsha .name { font-size: 60px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.parsha .haft { font-size: 28px; color: var(--ink-soft); margin-top: 10px; font-family: var(--font-heb2); font-weight: 500; }

/* SECTION HEADINGS --------------------------------------------------------- */
.eyebrow { font-family: var(--font-serif); font-weight: 600; color: var(--accent-2); font-size: 30px; margin: 0 0 16px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 14px; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); margin-left: 4px; }
.eyebrow.small { font-size: 26px; margin-bottom: 14px; }

/* SERVICES ----------------------------------------------------------------- */
.services { display: flex; flex-direction: column; min-height: 0; }
.srv { width: 100%; border-collapse: collapse; }
.srv td { padding: 11px 0; font-size: 28px; font-weight: 600; color: var(--ink); vertical-align: baseline; }
.srv td.time { text-align: left; font-weight: 700; color: var(--accent-2); width: 130px; padding-right: 22px; }
.srv tr.spacer td { padding: 7px 0; border-top: 1px solid var(--line-soft); }
.srv .qual { font-size: 18px; color: var(--ink-mute); font-weight: 500; margin-left: 8px; }
.zmanim { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 22px; font-size: 18px; color: var(--ink-soft); font-weight: 500; }
.zmanim b { color: var(--ink); font-weight: 700; margin-left: 4px; }
.history-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.history-note .when { font-size: 14px; color: var(--sage); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.history-note .title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); margin: 6px 0 8px; line-height: 1.2; border-left: 3px solid var(--sage); padding-left: 14px; }
.history-note .body { font-size: 18px; line-height: 1.5; color: var(--ink-soft); padding-left: 17px; }

/* Coming Shabbat sub-region — Thursday morning through Saturday night. */
.services-extra { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.extra-eyebrow { font-family: var(--font-serif); font-weight: 600; color: var(--accent); font-size: 24px; margin: 0 0 10px; letter-spacing: -0.01em; border-left: 3px solid var(--accent); padding-left: 14px; }
.srv-extra td { padding: 9px 0; font-size: 26px; font-weight: 500; color: var(--ink); }
.srv-extra td.time { font-size: 26px; font-weight: 700; color: var(--accent-2); width: 130px; padding-right: 22px; }

/* ANNOUNCEMENTS ------------------------------------------------------------ */
/* Each announcement leads with a category emoji (mazal_tov 🥂, condolences 🕯,
   event/kiddush 🍷, notice 📢). Body and strong stay in --ink per the spec —
   only the leading icon distinguishes categories. */
.announcements { min-height: 0; }
.announcements p { margin: 0 0 20px; font-size: 30px; line-height: 1.4; color: var(--ink); font-weight: 500; padding-left: 48px; position: relative; }
.announcements p .ico { position: absolute; left: 0; top: 0; font-size: 30px; line-height: 1.4; }
.announcements p strong { color: var(--ink); font-weight: 700; }

/* YAHRZEITS ---------------------------------------------------------------- */
.yahrzeits { display: flex; flex-direction: column; min-height: 0; }
.yarz-row { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.yarz-row:last-child { border-bottom: none; }
.yarz-row .candle { font-size: 28px; padding-top: 2px; }
.yarz-row .name-en { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.yarz-row .name-en em { font-style: normal; color: var(--ink-soft); font-weight: 600; }
.yarz-row .line2 { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; }
.yarz-row .name-he { font-family: var(--font-heb); direction: rtl; font-size: 24px; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
.yarz-row .name-he:empty { display: none; }
.yarz-row .when { font-size: 17px; color: var(--ink-mute); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.yarz-row .when .torah { font-size: 18px; color: var(--accent); }
.today-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .12em; padding: 3px 10px; border-radius: 999px; margin-left: 12px; text-transform: uppercase; vertical-align: middle; }

/* SCROLL CONTAINERS -------------------------------------------------------- */
.board.scrolling > .announcements,
.board.scrolling .yahrzeits:not(.no-scroll) {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.board.scrolling .yahrzeits .pinned { flex: 0 0 auto; margin-bottom: 6px; }
.board.scrolling > .announcements .eyebrow,
.board.scrolling .yahrzeits .eyebrow { flex: 0 0 auto; }
.scroll-area {
  flex: 1 1 0; min-height: 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.scroll-track { will-change: transform; }
.board.scrolling .scroll-track { animation: scroll-y 70s linear infinite; }
.board.scrolling .yahrzeits .scroll-track { animation-duration: 55s; }
/* Duplicate block exists in markup for the seamless loop; only render it when
   the board is actively scrolling, so the static view doesn't double up. */
.scroll-block + .scroll-block { display: none; }
.board.scrolling .scroll-block + .scroll-block { display: block; padding-top: 24px; }
@keyframes scroll-y { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* SHIURIM ------------------------------------------------------------------ */
.shiurim { display: flex; flex-direction: column; min-height: 0; }
.shiur-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.shiur-row:last-child { border-bottom: none; }
.shiur-row .when { font-size: 30px; color: var(--accent); font-weight: 700; letter-spacing: .02em; padding-top: 2px; }
.shiur-row .when .day { display: block; color: var(--day-label); font-size: 18px; letter-spacing: .14em; margin-bottom: 4px; text-transform: uppercase; font-family: var(--font-sans); font-weight: 700; }
.shiur-row .title { font-size: 30px; color: var(--ink); font-weight: 600; line-height: 1.25; }
.shiur-row .teacher { font-size: 22px; color: var(--ink-soft); font-weight: 500; }

/* Empty-state placeholder for sections with no DB data yet */
.empty-note { color: var(--ink-mute); font-style: italic; font-size: 22px; padding: 8px 0; }

.board > .right-row > section { overflow: hidden; min-height: 0; }