/* EFY Streamer — shared stylesheet
   Tokens, demo chrome, and the components used by more than one page.
   Each page keeps its own layout inline. Pages also carry a small inline
   copy of the tokens, so a failure to load this file degrades to an
   unstyled-but-readable dark page rather than black text on white. */

:root{
  --depth:#04141F;
  --hull:#0B2635;
  --hull-2:#123B4E;
  --line:#1D4B60;
  --spray:#E6F0F4;
  --muted:#7E9AAA;
  --dim:#5A7889;
  --signal:#FFB627;
  --wake:#3FD0E0;
  --live:#FF4B3E;
  --chrome:#020C13;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--depth);
  color:var(--spray);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:2px solid var(--wake);outline-offset:2px}

/* An element with the hidden attribute must actually be hidden. Class
   rules that set display win on equal specificity otherwise, which
   leaves invisible overlays swallowing every click. */
[hidden]{display:none !important}

/* ---------- demo chrome ----------
   Deliberately duller than the product so reviewers can tell
   scaffolding from the thing being reviewed. */

.chrome{
  background:var(--chrome);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:4px;
  padding:0 14px;
  overflow-x:auto;
  position:relative;
  z-index:30;
}

/* The product name, not a control. It used to be an amber link back to the
   tester brief, which shouts next to the TEST BUILD flag and makes no sense
   from inside the app. */
.chrome .mark{
  font-family:"Barlow Condensed",sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.14em;
  color:var(--dim);
  padding:12px 14px 10px 0;
  margin-right:8px;
  white-space:nowrap;
  text-decoration:none;
  border-right:1px solid var(--line);
}
.chrome .mark b{color:var(--muted);font-weight:600}
a.mark:hover{color:var(--muted)}

.chrome a.tab{
  color:var(--dim);
  text-decoration:none;
  font-size:13.5px;
  padding:12px 13px 10px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.chrome a.tab:hover{color:var(--spray)}
.chrome a.tab.here{color:var(--spray);border-bottom-color:var(--wake)}

.chrome .testflag{
  flex:none;font-family:"Barlow Condensed",sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:var(--live);border:1px solid var(--live);border-radius:4px;
  padding:2px 7px 1px;margin-right:8px;white-space:nowrap;
}
.chrome .stamp{
  margin-left:auto;
  color:var(--dim);
  font-size:11.5px;
  padding-left:16px;
  white-space:nowrap;
}

@media (max-width:600px){
  .chrome .testflag{
  flex:none;font-family:"Barlow Condensed",sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;
  color:var(--live);border:1px solid var(--live);border-radius:4px;
  padding:2px 7px 1px;margin-right:8px;white-space:nowrap;
}
.chrome .stamp{display:none}
  .chrome .mark{padding-right:10px;margin-right:2px}
  .chrome a.tab{padding:12px 9px 10px;font-size:13px}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.13/hls.min.js"></script>

<style>
  :root{
    --depth:#04141F;
    --hull:#0B2635;
    --hull-2:#123B4E;
    --line:#1D4B60;
    --spray:#E6F0F4;
    --muted:#7E9AAA;
    --signal:#FFB627;
    --wake:#3FD0E0;
    --live:#FF4B3E;
    --sheet-ease:cubic-bezier(.16,.84,.34,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}


/* ---- log sheet, shared by the viewer and the admin ---- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 2px}
.cat{background:var(--hull-2);border:1px solid var(--line);color:var(--spray);border-radius:8px;padding:9px 3px 7px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;line-height:1.2;text-align:center}
.cat.on{border-color:var(--signal);background:#1B3143}
.cat .gly{display:block}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 2px}
.spec{background:var(--depth);border:1px solid var(--line);color:var(--spray);border-radius:16px;padding:6px 12px;cursor:pointer;font:inherit;font-size:13px;display:flex;align-items:center;gap:6px}
.spec.on{border-color:var(--signal);color:var(--signal)}
.note{width:100%;background:var(--depth);border:1px solid var(--line);color:var(--spray);border-radius:7px;padding:10px;font:inherit;font-size:14px;margin-top:10px}
.note.want{border-color:var(--signal)}
.note::placeholder{color:#5A7889}
.nudge-readout{display:flex;align-items:baseline;gap:8px;margin:14px 0 2px}
.nudge-readout b{font-family:"Barlow Condensed",sans-serif;font-size:32px;font-weight:700;color:var(--signal);line-height:1}
.nudge-readout small{color:var(--muted);font-size:12.5px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:none;margin:6px 0 2px}
input[type=range]::-webkit-slider-runnable-track{height:20px;border-radius:5px;background:repeating-linear-gradient(90deg,var(--hull-2) 0 2px,var(--depth) 2px 13px);border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:32px;margin-top:-6px;background:var(--signal);border:none;border-radius:3px;cursor:grab}
input[type=range]::-moz-range-track{height:20px;border-radius:5px;background:repeating-linear-gradient(90deg,var(--hull-2) 0 2px,var(--depth) 2px 13px);border:1px solid var(--line)}
input[type=range]::-moz-range-thumb{width:12px;height:32px;background:var(--signal);border:none;border-radius:3px;cursor:grab}
input.wake-range::-webkit-slider-thumb{background:var(--wake)}
input.wake-range::-moz-range-thumb{background:var(--wake)}
.range-ends{display:flex;justify-content:space-between;font-family:"Barlow Condensed",sans-serif;font-size:14px;color:var(--muted);letter-spacing:.03em}
.sheet-actions{display:flex;gap:9px;margin-top:12px}
.btn{flex:1;border-radius:8px;padding:12px 10px 10px;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;letter-spacing:.04em;border:1px solid var(--line);background:var(--hull-2);color:var(--spray)}
.btn.primary{background:var(--signal);color:var(--depth);border-color:var(--signal)}
.btn.primary:disabled{opacity:.4;cursor:not-allowed}
.btn.primary.wake{background:var(--wake);border-color:var(--wake)}
.btn.ghost{flex:0 0 32%}

/* ---- transport controls ---- */
.pp{width:36px;height:36px;border-radius:50%;padding:0;flex:none;background:var(--hull-2);border:1px solid var(--line);color:var(--spray);cursor:pointer;display:grid;place-items:center}
.pp:hover{border-color:var(--wake)}
.pp .bars{display:flex;gap:4px}
.pp .bars i{width:4px;height:14px;background:var(--spray);display:block}
.pp .tri{border-left:13px solid var(--spray);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.snd{height:36px;padding:0 11px;border-radius:18px;flex:none;background:var(--hull-2);border:1px solid var(--line);color:var(--spray);cursor:pointer;display:flex;align-items:center;gap:7px;font-family:"IBM Plex Sans",sans-serif;font-size:12.5px}
.snd:hover{border-color:var(--wake)}
.snd.off{border-color:var(--signal);color:var(--signal)}
.snd svg{width:16px;height:16px;flex:none}
.tapzone{position:absolute;inset:0;cursor:pointer}
body.sheet-open .tapzone{pointer-events:none}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);background:var(--wake);color:var(--depth);font-weight:600;font-size:13.5px;padding:10px 20px;border-radius:22px;opacity:0;pointer-events:none;transition:all .22s ease;z-index:90;max-width:88vw;text-align:center;display:flex;align-items:center;gap:12px;justify-content:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .undo{background:var(--depth);border:none;color:var(--wake);font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:14px;cursor:pointer}

/* ---- travelling timecode on a scrub bar ----
   Sits BELOW the track: above it shares a band with the marker pips and the
   blacked-out shading and disappears into them. On a jump it swells and goes
   green, because the eye is on the row that was clicked, not on the bar. */
.headtime{
  position:absolute;top:24px;
  font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.03em;color:var(--depth);background:var(--spray);
  padding:2px 7px 1px;border-radius:4px;pointer-events:none;white-space:nowrap;
  box-shadow:0 1px 4px rgba(2,10,16,.6);
  transform:translateX(-50%);
  transform-origin:50% 0;
}
.headtime.landed{
  animation:landed .62s cubic-bezier(.2,.9,.3,1);
  background:#5DCAA5;
  box-shadow:0 2px 10px rgba(93,202,165,.55);
}
@keyframes landed{
  0%   { transform:translateX(-50%) scale(1);    }
  28%  { transform:translateX(-50%) scale(1.55); }
  100% { transform:translateX(-50%) scale(1);    }
}

/* A row you just jumped to, on any page. */
.jumped{
  border-color:#5DCAA5 !important;
  background:#12261E !important;
  transition:background .12s ease, border-color .12s ease;
}

@media (prefers-reduced-motion:reduce){
  .headtime.landed{animation:none}
  .jumped{transition:none}
}

/* ---- the row under the playhead ----
   Highlighted on every page. On a desktop the list also scrolls to keep it in
   view; on a phone the list isn't its own scroll container, so following would
   drag the video off screen and it highlights only. */
.hl.now, .row.now{
  background:rgba(63,208,232,.10);
  box-shadow:inset 3px 0 0 var(--wake);
}

.followchip{
  position:fixed;right:18px;bottom:22px;z-index:60;
  background:var(--wake);color:var(--depth);border:none;border-radius:20px;
  padding:10px 18px 8px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-size:16px;font-weight:700;letter-spacing:.03em;
  box-shadow:0 4px 14px rgba(2,10,16,.5);
}
.followchip:hover{background:#63DCEC}