/* "Shabbat table" — the broadcast screen (Claude Design canvas: TV, TVSetup). A 1920×1080 stage scaled to any screen. */
@font-face { font-family: Cormorant; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Cormorant; src: url(/fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Jost; src: url(/fonts/jost-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Frank Ruhl Libre'; src: url(/fonts/frank-ruhl-libre-hebrew-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+25CC, U+FB1D-FB4F; }

.tv { --bg: #0E0A08; --ink: #F3E7CF; --soft: #E6D6B8; --dim: #B9A88C; --gold: #E7C681; --glow: rgba(214,160,74,.22); --ember: rgba(120,52,32,.35); --line: rgba(231,198,129,.30); --card: rgba(243,231,207,.04); }
.tv.theme-copper { --gold: #F0A86B; --glow: rgba(224,120,64,.22); --line: rgba(240,168,107,.30); }
.tv.theme-silver { --bg: #0A0C10; --ink: #EEF1F6; --soft: #D5DCE6; --dim: #9AA5B5; --gold: #CFD8E6; --glow: rgba(140,170,220,.18); --ember: rgba(40,60,110,.35); --line: rgba(207,216,230,.28); --card: rgba(238,241,246,.04); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: Jost, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; overflow: hidden; }
body.idle, body.clean { cursor: none; }

.viewport { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; padding: 72px 96px; display: flex; flex-direction: column; gap: 40px;
  background: radial-gradient(900px 620px at 72% 38%, var(--glow), transparent 70%), radial-gradient(1200px 900px at 10% 110%, var(--ember), transparent 60%), var(--bg); transition: filter 4s ease; }
body.night .stage { filter: brightness(.88); }
.t-top { display: flex; justify-content: space-between; align-items: flex-start; }
.t-where { display: flex; flex-direction: column; gap: 8px; }
.t-city { font-size: 26px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.t-date { font-size: 26px; color: var(--dim); }
.t-clock { font-family: Cormorant, serif; font-weight: 600; font-size: 120px; line-height: .9; }
.t-clock small, .t-card-time small, .t-second-time small { font-size: .37em; margin-left: 10px; color: var(--dim); font-weight: 600; }

.t-mid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; flex: 1; min-height: 0; }
.t-heb { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.t-kicker { font-size: 26px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.t-hebdate { font-family: Cormorant, serif; font-weight: 600; font-size: 104px; line-height: 1; white-space: nowrap; }
.t-hebhe { font-family: 'Frank Ruhl Libre', serif; font-size: 72px; color: var(--gold); text-align: left; }
.t-rule { width: 160px; height: 2px; background: var(--gold); opacity: .6; margin: 8px 0; }
.t-parsha { font-size: 34px; color: var(--soft); }
.t-lines { display: flex; flex-direction: column; gap: 6px; font-size: 28px; color: var(--gold); }

.t-hero { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.t-card { border: 1px solid var(--line); border-radius: 28px; padding: 36px 44px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.t-card-label { display: flex; align-items: center; gap: 14px; font-size: 28px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.t-card-time { font-family: Cormorant, serif; font-weight: 700; font-size: 168px; line-height: .95; white-space: nowrap; }
.t-card-time.words { font-size: 112px; line-height: 1.05; white-space: normal; }
.t-card-sub { font-size: 30px; color: var(--dim); }
.t-second { display: flex; justify-content: space-between; align-items: baseline; padding: 0 44px; gap: 20px; }
.t-second-label { font-size: 28px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.t-second-time { font-family: Cormorant, serif; font-weight: 600; font-size: 72px; white-space: nowrap; }

.t-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.t-left { display: flex; flex-direction: column; gap: 22px; flex: 1; min-width: 0; }
.t-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.t-z { padding: 20px 8px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t-z span { font-size: 20px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; color: var(--dim); }
.t-z b { font-family: Cormorant, serif; font-weight: 600; font-size: 46px; white-space: nowrap; }
.t-z b small { font-size: .5em; margin-left: 4px; color: var(--dim); }
.t-z.past { opacity: .42; }
.t-z.now span { color: var(--gold); }
.t-z.now b { color: var(--gold); }
.t-next { font-size: 28px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-next em { font-style: normal; color: var(--ink); }
.t-qr { display: flex; align-items: center; gap: 24px; flex: none; }
.t-qr-text { text-align: right; display: flex; flex-direction: column; gap: 6px; }
.t-qr-text b { font-family: Cormorant, serif; font-weight: 600; font-size: 40px; color: var(--ink); }
.t-qr-text span { font-size: 22px; color: var(--dim); }
.t-qr-box { padding: 12px; border-radius: 22px; background: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(0,0,0,.45); line-height: 0; }

/* controls: appear on movement, a tap or a remote key; never in the streaming link */
.controls { position: fixed; right: 24px; bottom: 24px; display: flex; gap: 10px; z-index: 10; }
.controls[hidden] { display: none; }
.controls button, .s-actions button { font: inherit; font-size: 17px; min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer; }
.controls button { background: rgba(0,0,0,.6); color: var(--ink); border: 1px solid var(--line); }
.controls button:focus-visible, .setup :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* setup: a panel over the live screen, which is its own preview */
.setup { position: fixed; inset: 0; z-index: 20; overflow: auto; background: linear-gradient(90deg, rgba(10,7,5,.97) 0%, rgba(10,7,5,.9) 46%, rgba(10,7,5,.25) 100%); }
.setup[hidden] { display: none; }
.setup-panel { max-width: 620px; padding: 48px 24px 64px; margin-left: max(16px, 6vw); display: flex; flex-direction: column; gap: 18px; }
.s-brand { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.s-brand a { color: inherit; text-decoration: none; }
.setup h1 { margin: 0; font-family: Cormorant, serif; font-weight: 700; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; }
.s-lead { margin: 0; font-size: 18px; color: var(--soft); line-height: 1.5; }
.setup form { display: flex; flex-direction: column; gap: 16px; }
.s-field { position: relative; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--dim); }
.s-field input, .s-field select { background: rgba(243,231,207,.06); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; color: var(--ink); font: inherit; font-size: 17px; min-height: 48px; }
.s-field option { color: #1A120B; }
.s-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #1A140F; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; z-index: 5; }
.s-results[hidden] { display: none; }
.s-results button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid rgba(231,198,129,.12); color: var(--ink); font: inherit; font-size: 16px; padding: 12px 14px; cursor: pointer; }
.s-results button span { color: var(--dim); font-size: 14px; }
.s-results button:hover, .s-results button:focus { background: rgba(231,198,129,.12); }
.s-link { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-size: 16px; text-decoration: underline; cursor: pointer; min-height: 32px; }
.s-chosen { margin: 0; font-size: 16px; color: var(--gold); min-height: 1.4em; }
.s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.s-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.s-primary { background: var(--gold); color: #1A120B; border: 0; font-weight: 500; }
.s-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.s-note { margin: 0; font-size: 15px; color: var(--dim); line-height: 1.5; }
.s-note b { color: var(--soft); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .stage { transition: none; } }

/* soft changes: the old text fades up and out, the new one rises in; the light behind breathes slowly */
[data-x] { transition: opacity .42s ease, transform .42s ease, filter .42s ease; }
[data-x].swap-out { opacity: 0; transform: translateY(-10px); filter: blur(6px); }
[data-x].swap-in { opacity: 0; transform: translateY(12px); filter: blur(6px); transition: none; }
[data-x].tick-out { opacity: .25; transition: opacity .18s ease; }
[data-x].tick-in { opacity: .25; transition: none; }
.t-z, .t-z span, .t-z b { transition: opacity 1.2s ease, color 1.2s ease; }
.stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 480px at 72% 38%, var(--glow), transparent 70%); animation: breathe 18s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: translate(0, 0) scale(1); } 50% { opacity: .75; transform: translate(-24px, 12px) scale(1.06); } }
.stage > * { position: relative; }
.t-card { transition: border-color 1.2s ease, background-color 1.2s ease; }
body[data-mode="erev"] .t-card, body[data-mode="holy"] .t-card { border-color: var(--gold); background-color: rgba(231,198,129,.07); }
body.ready .stage { transition: transform 2s ease, filter 4s ease; }
.controls { animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.demo-badge { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 15; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.65); border: 1px solid var(--line); color: var(--gold); font-size: 16px; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { [data-x], .t-z, .stage { transition: none; } .stage::before { animation: none; } }