/* tv.css: Gallery TV (/tv/) and the Cast receiver (/cast/). The rule: the art is never covered. It fills the screen by
   default; anything else (the caption on I, the controls, settings, a hint) lives in a band BELOW the art, and the art's
   box gives up exactly that much room. Nothing is ever positioned over the picture. */
:root { --band: 0px; --ink: #f3ede2; --ink2: #cfc6b7; --ink3: #a39a8b; --bg: #000; --panel: #15120f; --line: rgba(243, 237, 226, .18);
  --accent: #e6b26a; --accent-ink: #1b140b; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.4 var(--sans); overflow: hidden; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the art: a box that ends where the band begins */
#stage { position: fixed; left: 0; top: 0; right: 0; bottom: var(--band); overflow: hidden; background: #000; transition: bottom .45s ease; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade, 1.6s) ease; }
.slide.show { opacity: 1; }
.slide .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slide .bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(32px) brightness(.38); display: none; }
body.whole .slide .art { object-fit: contain; }
body.whole .slide .bg { display: block; }
body.t-drift .slide.show .art { animation: drift var(--dur, 60s) ease-in-out forwards; }
body.t-dissolve { --fade: 4s; }
body.t-cut { --fade: 0s; }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(var(--dx, 1%), var(--dy, .6%)); } }
.slide .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 8vh 8vw; text-align: center; font: 400 clamp(22px, 3vw, 44px)/1.2 var(--serif); color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { body .slide.show .art { animation: none !important; } .slide { --fade: .6s; } #stage { transition: none; } }

/* the band under the art */
#band { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1px solid var(--line); max-height: 72vh; overflow: auto;
  padding: 0 max(16px, 5vw); }
#band.empty { border-top: 0; padding: 0; }
#band > * { margin: 0; }
#band [hidden] { display: none !important; }
.cap { padding: 14px 0 12px; display: grid; gap: 2px; }
.cap h2 { margin: 0; font: italic 400 clamp(19px, 2.2vw, 30px)/1.2 var(--serif); }
.cap .who { color: var(--ink2); font-size: clamp(15px, 1.4vw, 19px); }
.cap .more { color: var(--ink3); font-size: 14px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cap .chip { border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 12px; letter-spacing: .06em; }
.cap a { color: var(--accent); }
.msg { padding: 12px 0; color: var(--ink2); }
.msg b { color: var(--ink); }
.msg .code { font: 600 clamp(26px, 3vw, 40px)/1 var(--sans); letter-spacing: .3em; color: var(--accent); }

/* controls: present in the page for keyboard and screen readers; the row folds away when idle */
#bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; }
#band.idle #bar:not(:focus-within) { height: 0; padding: 0; overflow: hidden; }
.tb { min-width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; }
.tb svg { width: 20px; height: 20px; fill: currentColor; }
.tb[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tb.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.grow { flex: 1; }
#pos { color: var(--ink3); font-size: 13px; white-space: nowrap; }
a.tb { text-decoration: none; color: inherit; }

/* play on (shared) */
.po { display: inline-flex; gap: 8px; align-items: center; }
.po-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); display: grid; place-items: center; padding: 0; cursor: pointer; }
.po-btn svg { width: 20px; height: 20px; }
.po-btn[hidden] { display: none; }
.po-btn.live { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.po-status { margin: 0; font-size: 14px; color: var(--ink2); padding: 0 0 8px; }
.po-status:empty { display: none; }

/* settings */
#panel { padding: 6px 0 18px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#panel fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 0; min-width: 0; }
#panel legend { padding: 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
#panel label { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
#panel select { background: #221d18; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 100%; min-width: 0; flex: 1; }
#panel .row { display: flex; gap: 8px; flex-wrap: wrap; }
#panel .note { color: var(--ink3); font-size: 13px; margin: 4px 0 0; }
#voiceSlot { color: var(--ink); }

/* the first screen in a browser: the page waits for one press before sound (browsers require it) */
#start { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; background: #000; z-index: 5; padding: 6vw; }
#start[hidden] { display: none; }
#start h1 { font: 400 clamp(30px, 4vw, 60px)/1.1 var(--serif); margin: 0 0 10px; }
#start p { color: var(--ink2); margin: 0 0 20px; }