/* ═══════════════════════════════════════════════════════════════════════
   Reelay - "Faceplate"

   The brief was skeuomorphism. The obvious reading of that word is the 2010
   Apple one: stitched leather, green felt, torn paper. That would be a
   costume borrowed from somebody else's app, and it has nothing to do with
   watching a film.

   The honest material for this product is the box the film used to come out
   of. A home cinema amplifier: a milled aluminium front panel, legends
   silk-screened in condensed capitals, keys that actually travel when you
   press them, a screen dropped into a bezel, and an amber readout lit from
   behind. That is where the app's existing colours already came from - warm
   light thrown on a dark wall - so this is the same identity in metal rather
   than a different identity altogether.

   Four materials, and everything here is one of them:

     PLATE   a brushed panel, lit from above          (chrome, bars, sheets)
     KEY     a cap that sits proud and sinks on press (every button)
     WELL    a recess cut into the plate              (inputs, tracks, chat)
     LAMP    light coming through the panel           (sync, badges, fills)

   The signature is the readout: the clock is an amber LED behind a dark
   window, with the sync lamp beside it, exactly where a receiver puts them.

   Rules this file keeps to:
     - The picture is never touched. No material within reach of the video;
       a film's own blacks must stay the blackest thing on screen.
     - Bevels are box-shadows only. Nothing here moves a box, changes a
       display, or shrinks a touch target.
     - Loaded last on purpose, so it can dress the pages' own classes
       without any of them being rewritten.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panel legends and the readout ───────────────────────────────────── */
@font-face {
  font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/barlow-sc-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/barlow-sc-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/barlow-sc-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/sharetech.woff2') format('woff2');
}

:root {
  /* Type. Body stays the system face - chat is read, not admired. The
     condensed face is for legends only, where real gear uses one. */
  --font-panel: 'Barlow Semi Condensed', 'Roboto Condensed', 'Avenir Next Condensed',
                'Arial Narrow', system-ui, sans-serif;
  --font-readout: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* PLATE. Aluminium is not a flat colour: it is a vertical falloff with a
     fine vertical grain from the brushing, and a bright top edge where the
     room light catches the bevel. */
  --plate: linear-gradient(180deg, #2b2636 0%, #221e2c 45%, #191621 100%);
  --plate-dark: linear-gradient(180deg, #211d2a 0%, #191621 55%, #131019 100%);
  --grain: repeating-linear-gradient(90deg,
             rgba(255,255,255,.020) 0px, rgba(255,255,255,.020) 1px,
             rgba(0,0,0,.022)       1px, rgba(0,0,0,.022)       2px,
             rgba(255,255,255,.008) 2px, rgba(255,255,255,.008) 3px,
             rgba(0,0,0,.010)       3px, rgba(0,0,0,.010)       4px);

  /* The three shadows that do all the work. */
  --bevel: inset 0 1px 0 rgba(255,255,255,.085), inset 0 -1px 0 rgba(0,0,0,.50);
  --lift:  0 1px 0 rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.34);
  --well:  inset 0 2px 5px rgba(0,0,0,.62), inset 0 -1px 0 rgba(255,255,255,.045);

  /* LAMP. Amber is emitted here, never painted. */
  --lamp:       0 0 8px rgba(255,158,61,.62), 0 0 20px rgba(255,158,61,.22);
  --lamp-green: 0 0 8px rgba(95,211,154,.62), 0 0 18px rgba(95,211,154,.20);
  --lamp-amber: 0 0 8px rgba(255,195,107,.62), 0 0 18px rgba(255,195,107,.20);
  --lamp-red:   0 0 8px rgba(255,93,93,.62),  0 0 18px rgba(255,93,93,.20);

  /* Legends are milled into the panel, so they carry a hard shadow below. */
  --engrave: 0 1px 0 rgba(0,0,0,.85);
  --emboss: 0 1px 0 rgba(255,255,255,.07);

  --edge: #100d16;          /* the dark line where two panels meet */
  --surface3: #2b2636;
}

/* ── The chassis ─────────────────────────────────────────────────────────
   A lit object standing in a dark room, rather than a flat colour field.
   The watch page keeps its true black: nothing goes near the film. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(110% 70% at 50% -10%, rgba(255,158,61,.055), transparent 62%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  background-attachment: fixed;
}
body:has(.stage) { background-image: none; background-color: #000; }

/* ── Legends ─────────────────────────────────────────────────────────────
   Silk-screened onto the panel: condensed, capitals, spaced out, and cut
   in just far enough to catch a shadow. */
.brand, .topbar-title, .section-title,
h1, h2, h3, .sheet-body h2 {
  font-family: var(--font-panel);
  letter-spacing: .012em;
  text-shadow: var(--engrave);
}
.brand, .topbar-title { letter-spacing: .04em; }

label,
.sidebar-section h4, .chat-section h4, .ehead,
.section-title {
  font-family: var(--font-panel);
  text-shadow: var(--engrave);
}
label, .sidebar-section h4, .chat-section h4, .ehead {
  color: #8d8599;
  font-weight: 600;
}

/* ── PLATE: the chrome the app is built on ───────────────────────────── */
.controls-bar,
.sidebar-header,
.topbar,
.searchbar,
.filterbar,
.nav,
.bnav,
.tabs,
.fm-toolbar {
  background-image: var(--grain), var(--plate);
  background-color: var(--surface);
  box-shadow: var(--bevel);
}
/* Those bars all butt against something; give them a machined seam. */
.controls-bar { border-top: 1px solid var(--edge); }
.sidebar { border-left-color: var(--edge); }
.bnav    { border-top: 1px solid var(--edge); box-shadow: var(--bevel), 0 -6px 18px rgba(0,0,0,.5); }
.topbar  { border-bottom: 1px solid var(--edge); }

.sidebar { background-image: var(--plate-dark); }

/* Cards are plates cut from the same sheet. */
.card, .sheet, .esheet-card, .modal, .toast, .msg-actions, .menu,
.participant, .src-item, .cw-card, .queue-item button,
.share-who, .reply-bar {
  background-image: var(--plate);
  box-shadow: var(--bevel), var(--lift);
  border-color: var(--edge);
}
.menu, .msg-actions, .toast { box-shadow: var(--bevel), 0 12px 32px rgba(0,0,0,.62); }
.esheet-card { box-shadow: var(--bevel), 0 -14px 44px rgba(0,0,0,.6); }

/* ── KEY: every button is a cap with travel ───────────────────────────── */
.btn, .hand-over, .btn-ghost, .src-tab, .ecats button,
.chat-reactions button, .queue-item button, .backrow button, .tt-chip {
  background-image: var(--plate);
  background-color: var(--surface2);
  border: 1px solid var(--edge);
  box-shadow: var(--bevel), var(--lift);
  text-shadow: var(--engrave);
}
.btn { color: var(--text); }
.btn, .hand-over, .src-tab, .btn-ghost {
  font-family: var(--font-panel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .055em;
}
/* Travel. The cap sinks into its own socket and the room light stops
   catching the top edge. This is the whole point of the theme: a button
   you press should go somewhere. */
.btn:active:not(:disabled), .hand-over:active, .btn-ghost:active,
.src-tab:active, .ecats button:active, .chat-reactions button:active,
.queue-item button:active, .backrow button:active, .icon-btn:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.03);
  transform: translateY(1px) scale(.995);
}
.btn:disabled { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); filter: saturate(.4); }

/* The lit key. One per screen: the thing you actually came to press. */
.btn-primary, .btn-accent {
  background-image: linear-gradient(180deg, #ffb86a 0%, #ff9e3d 48%, #ef7f28 100%);
  border-color: #b55f18;
  color: #1d1206;                      /* dark legend on a lit key: 8.8:1 */
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.30),
              var(--lift), 0 0 18px rgba(255,158,61,.20);
}
.btn-primary:hover:not(:disabled), .btn-accent:hover:not(:disabled) {
  background-image: linear-gradient(180deg, #ffc98a 0%, #ffad55 48%, #f68f36 100%);
}
.btn-danger {
  background-image: var(--plate);
  border-color: rgba(255,93,93,.45);
  color: var(--danger);
  box-shadow: var(--bevel), var(--lift);
}

/* Icon keys are bare on the panel until touched, then they take a socket. */
.icon-btn { border-radius: 8px; text-shadow: var(--engrave); }
.icon-btn:hover:not(:disabled) {
  background-image: var(--plate);
  box-shadow: var(--bevel), var(--lift);
}

/* A key that is currently selected is lit from within, not just recoloured. */
.src-tab.on, .ecats button.on, .tab.active, .tt-chip.star {
  background-image: linear-gradient(180deg, rgba(255,158,61,.26), rgba(255,158,61,.10));
  border-color: rgba(255,158,61,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 6px rgba(255,158,61,.14),
              0 0 14px rgba(255,158,61,.16);
}
.bnav button.on { text-shadow: 0 0 12px rgba(255,158,61,.55), var(--engrave); }

/* ── WELL: anything you put something into is cut into the panel ─────── */
input[type=text], input[type=password], input[type=search], input[type=number],
textarea, select,
.chat-input, .queue-add input, .src-row input, #emoji-q,
.searchbar input, .filterbar select, .share-link, #help-modal .kbd {
  background-image: none;
  background-color: #14111b;
  border: 1px solid var(--edge);
  box-shadow: var(--well);
}
input:focus, textarea:focus, select:focus,
.chat-input:focus, .queue-add input:focus, .src-row input:focus,
#emoji-q:focus, .searchbar input:focus {
  border-color: rgba(255,158,61,.6);
  box-shadow: var(--well), 0 0 0 1px rgba(255,158,61,.25), 0 0 14px rgba(255,158,61,.14);
}

/* The chat is a screen dropped into the panel, so it gets a bezel. */
.chat-messages {
  background-color: #14111b;
  box-shadow: var(--well);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.chat-bubble {
  background-image: var(--plate);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.45);
}
.chat-line.mine .chat-bubble {
  background-image: linear-gradient(165deg, rgba(255,158,61,.24), rgba(242,104,60,.13));
  border-color: rgba(255,158,61,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.45);
}

/* Slots: the seek track, every progress bar. A groove with light in it. */
.seek-track, .prog-mini, .cw-prog, .rg-bar {
  background-color: #0d0b12 !important;
  box-shadow: var(--well);
  border: 1px solid var(--edge);
}
.prog-mini-fill, .cw-prog i, #rg-fill {
  box-shadow: 0 0 8px rgba(255,158,61,.45);
}
/* A finished bar is green, so it must not glow amber. */
.prog-mini-fill.done { box-shadow: 0 0 8px rgba(95,211,154,.45); }
.seek-buffered { box-shadow: none; }

/* ── LAMP: light through the panel ───────────────────────────────────── */
/* The signature. An amber readout behind a dark window, with the sync lamp
   next to it, exactly where an amplifier puts its display. */
.time-display {
  font-family: var(--font-readout);
  color: #ffb257;
  letter-spacing: .04em;
  background: #0c0a10;
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 3px 8px;
  box-shadow: var(--well), 0 0 10px rgba(255,158,61,.12);
  text-shadow: 0 0 7px rgba(255,158,61,.65);
}
.time-display:hover { color: #ffc98a; }

/* Every other number in the app reads off the same instrument. */
.speed-val, .prog-pct, .seed, #rg-pct, .ep .n {
  font-family: var(--font-readout);
  letter-spacing: .03em;
}
#rg-pct { color: #ffb257; text-shadow: 0 0 14px rgba(255,158,61,.5); }

/* The sync lamp. Works as a pill on a desktop and as a bare bulb on a
   phone, where the page shrinks it to 8px - so the glow is a shadow, and
   the page keeps control of the fill. */
.sync-status { text-shadow: var(--engrave); font-family: var(--font-panel);
  letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.sync-status.sync-ok      { box-shadow: var(--lamp-green), inset 0 0 3px rgba(255,255,255,.35); }
.sync-status.sync-lag     { box-shadow: var(--lamp-amber), inset 0 0 3px rgba(255,255,255,.35); }
.sync-status.sync-offline { box-shadow: var(--lamp-red),   inset 0 0 3px rgba(255,255,255,.35); }

/* Indicator bulbs, everywhere they appear. */
.participant-name .dot, .dot-green, .dot-blue, .dot-orange {
  box-shadow: 0 0 7px currentColor, inset 0 0 2px rgba(255,255,255,.5);
}
.participant.is-host .dot { box-shadow: 0 0 0 3px rgba(255,158,61,.16), var(--lamp); }
#unread-badge { box-shadow: var(--lamp-red); }

.badge, .participant .pill, .qbadge, .status-badge, .poster .badge {
  font-family: var(--font-panel);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  text-shadow: var(--engrave);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.35);
}

/* ── The rocker switch ───────────────────────────────────────────────────
   Two of these exist in the app with different markup. Both become a
   recessed channel with a cap that slides along it. */
.switch .slider, .switch:not(:has(input)) {
  background-image: none;
  background-color: #14111b;
  border: 1px solid var(--edge);
  box-shadow: var(--well);
}
.switch .slider::before, .switch span {
  background-image: linear-gradient(180deg, #4a4356, #302a3c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.6);
}
.switch input:checked + .slider, .switch[aria-checked="true"] {
  background-color: rgba(255,158,61,.14);
  border-color: rgba(255,158,61,.55);
  box-shadow: var(--well), inset 0 0 10px rgba(255,158,61,.22);
}
.switch input:checked + .slider::before, .switch[aria-checked="true"] span {
  background-image: linear-gradient(180deg, #ffc07a, #f2863a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.6), var(--lamp);
}

/* ── Posters sit behind glass ────────────────────────────────────────── */
.poster .art, .cw-thumb, .sheet-hero, .src-item img {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.5);
}
.poster:hover .art { box-shadow: inset 0 0 0 1px rgba(255,158,61,.35), 0 10px 26px rgba(0,0,0,.6); }

/* ── The big play button becomes a lit dome ──────────────────────────── */
#tap-overlay .big-play {
  background-image: radial-gradient(120% 120% at 34% 24%, #ffd39a 0%, #ff9e3d 44%, #dd6d1c 100%);
  color: #1d1206;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.30),
              0 10px 34px rgba(255,158,61,.38), 0 0 60px rgba(255,158,61,.22);
}

/* ── The panel legend ───────────────────────────────────────────────────
   Only where the native players emptied the strip. Silk-screened: condensed
   capitals, cut into the metal, with the room lamp lit beside it. */
.now-playing { display: none; }
.stage.native-player .now-playing,
.stage.yt-native .now-playing {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0; margin-right: 10px;
  font-family: var(--font-panel);
  font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .085em;
  color: #8d8599; text-shadow: var(--engrave);
}
.now-playing.empty { visibility: hidden; }
.now-playing b {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.now-playing .lamp {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: var(--lamp);
}

/* ── Contrast and motion ──────────────────────────────────────────────── */
/* Focus must stay legible against metal, so it gets its own halo. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,158,61,.22);
}
/* Anyone who has asked for plainer surfaces gets flat panels and hard
   edges instead: the material is decoration, the layout is not. */
@media (prefers-contrast: more) {
  .card, .sheet, .esheet-card, .modal, .toast, .menu, .btn, .hand-over,
  .controls-bar, .sidebar-header, .topbar, .nav, .bnav, .participant,
  .src-item, .cw-card, .chat-bubble {
    background-image: none !important;
    box-shadow: none !important;
    border-color: #6d6580 !important;
  }
  .time-display { text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .hand-over:active, .icon-btn:active { transform: none; }
}

/* The controls strip becomes a named grid at phone width, so the legend has
   to be told which cell it lives in or it invents a row of its own. */
@media (max-width: 720px) {
  .stage.native-player .now-playing,
  .stage.yt-native .now-playing { grid-area: mid; margin-right: 0; }
}

/* The wordmark is written as Ree<span>lay</span> inside a flex row with a
   gap, which was pulling the word apart into "Ree lay". The gap belongs
   after the mark, not between the halves of the name. */
.topbar-title { gap: 0; }
.topbar-title .mark { margin-right: 7px; }