/* Mirrors the Roku v1.7 layout (components/PictureFrameScene.xml). Positions are in 1920x1080 stage pixels. */
@font-face { font-family: "Frank Ruhl"; src: url(fonts/FrankRuhl-Medium.ttf); font-weight: 500; }
@font-face { font-family: "Assistant"; src: url(fonts/Assistant-Regular.ttf); font-weight: 400; }
@font-face { font-family: "Assistant"; src: url(fonts/Assistant-SemiBold.ttf); font-weight: 600; }

:root { --cream: #F6F0E6; --grey: #CFC6B8; --small: #9A9286; --gold: #F2C877; --gold-rule: #E8BC6A; --navy: #0B1422; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--cream); font-family: "Assistant", system-ui, sans-serif; }
body.idle { cursor: none; }

/* No `inset` shorthand anywhere: it needs Chromium 87, and 2019-2022 TVs are older. */
#ambient, #scrim, #dim, #screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
#screen { overflow: hidden; } /* clips the 1920px stage so it can't widen the page on phones */
.amb { position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(60px) saturate(1.1); opacity: 0; transition: opacity 1.2s ease-in-out; }
#scrim { background: rgba(0, 0, 0, 0.69); }
#dim { background: #000; opacity: 0; pointer-events: none; transition: opacity 60s linear; }

#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.photo { position: absolute; left: 384px; top: 40px; width: 1152px; height: 1000px; object-fit: contain; opacity: 0; transition: opacity 1.2s ease-in-out; }
.photo.on, .amb.on { opacity: 1; }

.t { position: absolute; white-space: nowrap; line-height: 1.15; }
.right { width: 272px; left: 1576px; text-align: right; }
.clock { left: 66px; top: 44px; font: 500 120px "Frank Ruhl", serif; }
.weekday { left: 72px; top: 204px; font: 600 34px "Assistant"; }
.date { left: 72px; top: 246px; font: 400 32px "Assistant"; color: var(--grey); }

.sh-head { left: 72px; top: 692px; font: 600 32px "Assistant"; }
.rule { position: absolute; width: 48px; height: 3px; background: var(--grey); }
.rule.gold { background: var(--gold-rule); }
.label { font: 400 28px "Assistant"; color: var(--grey); }
.big { font: 500 76px "Frank Ruhl", serif; }
.gold-text { color: var(--gold); }
.sh-rule { left: 72px; top: 746px; }
.lbl-start { left: 72px; top: 772px; }
.big-start { left: 70px; top: 800px; }
.lbl-end { left: 72px; top: 902px; }
.big-end { left: 70px; top: 930px; }
.hours-head { left: 1576px; }
.hours-rule { left: 1800px; top: 746px; }

/* Empty photo box: "Saving your photos", "Your album is empty", "Connect to Wi-Fi". */
.empty { position: absolute; left: 384px; top: 40px; width: 1152px; height: 1000px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty[hidden] { display: none; }
.etitle { font: 600 40px "Assistant"; color: var(--cream); }
.enote { margin-top: 14px; max-width: 640px; font: 400 30px "Assistant"; color: var(--grey); line-height: 1.3; }
.enote:empty { display: none; }

.wx-icon0 { position: absolute; top: 82px; width: 80px; height: 80px; }
.wx-icon0:not([src]) { visibility: hidden; } /* no forecast yet: no empty image frame */
.wx-now { right: 72px; top: 44px; font: 500 120px "Frank Ruhl", serif; }
.wx-desc { top: 204px; font: 600 34px "Assistant"; }
.wx-alt { top: 246px; font: 400 32px "Assistant"; color: var(--grey); }
.wx-status { top: 296px; font: 400 24px "Assistant"; color: var(--small); }

.hours { position: absolute; left: 1576px; top: 770px; width: 272px; }
.hour { position: relative; height: 84px; }
.hour .h { position: absolute; left: 0; top: 18px; font: 400 30px "Assistant"; color: var(--grey); }
.hour img { position: absolute; left: 94px; top: 8px; width: 56px; height: 56px; }
.hour .c { position: absolute; right: 0; top: 0; font: 500 56px "Frank Ruhl", serif; }

.note { top: 486px; font: 400 26px "Assistant"; color: var(--grey); white-space: normal; line-height: 1.3; }
.note:empty, .toast.on ~ .note, .progress.on ~ .note { display: none; }

/* Sync progress (right column): lines of what's running + a gold bar (fills for photos, sweeps otherwise). */
/* Sync status, centred in the right column's quiet middle (same positions as the Roku app):
   turning gold ring, headline, big gold count, bar (fills for photos, sweeps otherwise), grey note. */
.progress, .toast { position: absolute; left: 1576px; top: 0; width: 272px; height: 700px; text-align: right; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.progress.on, .toast.on { opacity: 1; }
.progress .ring { position: absolute; left: 208px; top: 408px; width: 64px; height: 64px; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
.ptitle { position: absolute; right: 0; top: 486px; width: 272px; font: 600 30px "Assistant"; color: var(--cream); white-space: nowrap; }
.progress.nocount .ptitle { top: 530px; }
.pcount { position: absolute; right: 0; top: 518px; font: 500 52px "Frank Ruhl", serif; color: var(--gold); white-space: nowrap; }
.progress .bar { position: absolute; left: 0; top: 594px; width: 272px; height: 6px; background: rgba(255,255,255,0.18); overflow: hidden; }
.progress .bar i { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--done, 0) * 100%); background: var(--gold-rule); transition: width 0.4s; }
.progress .bar.sweep i { width: 72px; animation: sweep 1.4s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(200px); } }
.pnote { position: absolute; right: 0; top: 612px; width: 272px; font: 400 24px "Assistant"; color: var(--grey); line-height: 1.25; }
.toast .ptitle { top: 500px; }
.toast .pnote { top: 546px; }
.credit { top: 1042px; left: auto; right: 72px; width: auto; font: 400 19px "Assistant"; color: var(--small); } /* wider than the column: grows left */
/* Shabbat starting: the sync status goes at once, no fade (app.js cutOff). */
.progress.cut, .toast.cut { transition: none; }

/* No usable forecast: no "--°" and no empty "Next few hours" column. */
body.nowx .wx-icon0, body.nowx .wx-now, body.nowx .wx-desc, body.nowx .wx-alt,
body.nowx .hours-head, body.nowx .hours-rule, body.nowx .hours { display: none; }
/* No settings on Shabbat (storage was cleared): just the clock and the Shabbat times. */
body.bare .wx-icon0, body.bare .wx-now, body.bare .wx-desc, body.bare .wx-alt, body.bare .wx-status,
body.bare .hours-head, body.bare .hours-rule, body.bare .hours, body.bare .note { display: none; }

/* The gear on Shabbat: one calm line over the photo for 6 s (app.js openSettings). */
.calm { position: absolute; left: 610px; top: 470px; width: 700px; padding: 40px 0; z-index: 5; border-radius: 24px;
  background: rgba(0, 0, 0, 0.72); text-align: center; font: 600 40px "Assistant"; color: var(--cream); }
.calm[hidden] { display: none; }
body.portrait .calm { left: 190px; top: 820px; }

/* Portrait (phones/tablets held upright): 1080x1920 stage. Clock and weather on top, photo in
   the middle, the Shabbat block and the next hours side by side below it, sync status between them. */
body.portrait #stage { width: 1080px; height: 1920px; }
body.portrait .photo, body.portrait .empty { left: 40px; top: 420px; width: 1000px; height: 920px; }
body.portrait .right { left: 736px; }
body.portrait .sh-head { top: 1420px; }
body.portrait .sh-rule { top: 1474px; }
body.portrait .lbl-start { top: 1500px; }
body.portrait .big-start { top: 1528px; }
body.portrait .lbl-end { top: 1630px; }
body.portrait .big-end { top: 1658px; }
body.portrait .hours-rule { left: 960px; top: 1474px; }
body.portrait .hours { left: 736px; top: 1498px; }
body.portrait .progress, body.portrait .toast { left: 404px; top: 1012px; text-align: center; }
body.portrait .progress .ring { left: 104px; }
body.portrait .pcount { width: 272px; text-align: center; }
body.portrait .note { left: 372px; width: 336px; top: 1500px; text-align: center; }
body.portrait .credit { left: 40px; right: auto; width: 1000px; top: 1862px; text-align: center; }

/* Phone readability: a 390px-wide phone shows the stage at ~0.36, so no text below 34 stage px
   (~12 CSS px) in portrait. Landscape keeps the sizes above. */
body.portrait .date, body.portrait .wx-alt { font-size: 36px; }
body.portrait .sh-head, body.portrait .label, body.portrait .wx-status, body.portrait .note,
body.portrait .ptitle, body.portrait .pnote, body.portrait .enote, body.portrait .credit { font-size: 34px; }
body.portrait .date, body.portrait .wx-alt { top: 248px; }
body.portrait .wx-status { top: 300px; }
body.portrait .big-start { top: 1542px; }
body.portrait .lbl-end { top: 1648px; }
body.portrait .big-end { top: 1690px; }
body.portrait .hour .h { font-size: 34px; top: 16px; }
body.portrait .hour img { left: 100px; }
/* Sync status and toast: a little wider so the bigger headline still fits on one line. */
body.portrait .progress, body.portrait .toast { left: 372px; width: 336px; }
body.portrait .ptitle, body.portrait .pnote, body.portrait .pcount, body.portrait .progress .bar { width: 336px; }
body.portrait .progress .ring { left: 136px; }
body.portrait .pcount { top: 530px; }
body.portrait .progress .bar { top: 604px; }
body.portrait .pnote { top: 624px; }
body.portrait .toast .pnote { top: 550px; }

/* Heart show (hearts.js): on top of everything in the stage, hidden until it plays. */
#heartShow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; pointer-events: none; }
#heartShow.on { display: block; }
.hs-glow { position: absolute; top: -400px; right: -400px; bottom: -400px; left: -400px; background: #FF7FB0; opacity: 0; }
.hs-heart { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.hs-card { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: 208px 480px; opacity: 0; }
/* Portrait: the heart is centred over the photo (540, 880) instead of the left column. */
body.portrait .hs-card { right: auto; bottom: auto; left: 332px; top: 400px; width: 1080px; height: 1920px; }
body.portrait .hs-from { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); } /* sits over the photo here */
/* The heart, its note and the "from" line drawn 1.75x in portrait so phone text stays >= 12 CSS px
   (hearts.js keeps the note at 20px or more there). */
.hs-inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: 208px 480px; }
body.portrait .hs-inner { transform: scale(1.75); }
.hs-card img { position: absolute; left: 58px; top: 330px; width: 300px; height: 300px; }
/* Text band = where the heart is wide (heart image 300px at 58,330). Flex column so the overflow test sees real height. */
.hs-text { position: absolute; left: 116px; top: 422px; width: 184px; height: 70px; display: block; text-align: center; align-content: center;
  font: 600 28px "Assistant"; line-height: 1.1; color: #562C42; overflow: hidden; overflow-wrap: break-word; }
.hs-from { position: absolute; left: 18px; top: 598px; width: 380px; text-align: center; font: 600 26px "Assistant"; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Setup and settings page styles live in setup.css. These two serve note.html. */
.page button.small { margin: 0; padding: 6px 12px; font-size: 15px; background: #2a3650; color: var(--cream); }
.page textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; font: 400 18px "Assistant"; border-radius: 8px; border: 1px solid #3a4560; background: #121d30; color: var(--cream); box-sizing: border-box; resize: vertical; }

#gear { position: fixed; right: 16px; bottom: 16px; width: 48px; height: 48px; border: 0; border-radius: 24px; background: rgba(0,0,0,0.5); color: var(--grey); font-size: 26px; opacity: 0; transition: opacity 0.4s; pointer-events: none; outline: none; }
body.awake #gear { opacity: 1; pointer-events: auto; } /* not tappable while invisible */
/* Reached with a TV remote (Down or Menu, app.js showGear): a clear cream ring. */
#gear.kbd:focus { outline: 4px solid var(--cream); outline-offset: 3px; color: var(--cream); }
/* Not reachable while settings are open. setup.js also sets #gear's hidden attribute, for engines
   without :has() (Chromium < 105, iOS < 15.4); :has() stays in its own rule so they don't drop the rest. */
#gear[hidden] { display: none; }
body:has(#setup:not([hidden])) #gear { display: none; }