/* ============================================================
   JUQTUBE — the playthrough archive

   Ported from the approved mockup. Two names are scoped against juq.css, which
   already owns them and would otherwise style these silently:

     .chip -> .jq-chip    juq.css .chip is the navbar live chip
     .card -> .jq-card    (already prefixed in the mockup)

   The board's own stylesheet is not loaded here: this page shares only what
   lives in system.css.
   ============================================================ */

.jq-page { padding-bottom: var(--s-11); }

/* ---------- the grid ---------- */
.jq-tools { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: space-between; margin: var(--s-7) 0 var(--s-6); }
.jq-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 260px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 0 var(--s-5); }
.jq-field svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.jq-field input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ink); font-family: var(--f-display); font-size: var(--t-md); padding: var(--s-5); }
.jq-field input::placeholder { color: var(--muted); }
.jq-with { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }

.jq-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding-bottom: var(--s-11); }
.jq-card { border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: inherit; font: inherit; }
.jq-card:hover { border-color: var(--accent); }
.jq-art { position: relative; aspect-ratio: 3/4; display: grid; place-items: center; padding: var(--s-5); text-align: center; border-bottom: var(--bw) solid var(--line-strong); overflow: hidden; }
.jq-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jq-art span { font-weight: 800; font-size: var(--t-lg); opacity: 0.82; }
.jq-b { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.jq-t { font-size: var(--t-body); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jq-yr { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
.jq-meta { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.jq-meta .n { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.jq-meta .star { margin-left: auto; color: var(--accent); font-weight: 700; }

/* ---------- the detail ----------
   A PAGE, not a dialog. You are settling in to watch a forty hour playthrough,
   and a modal that traps focus and darkens the site behind it is the wrong
   container for that.

   A SHEET OVER THE GRID, not a block that replaces it: the grid never moves, so
   the card you clicked keeps its position and both directions of the flight
   animate against it. Replacing the grid meant the card stopped existing, so
   there was nothing to shrink back into on the way out.

   85 is the site's modal layer, above .fx (80). */
#jqDetail { position: fixed; inset: 0; z-index: 85; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
#jqDetail[hidden] { display: none; }
.jd-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-7) var(--s-11); }

.jd-back { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--s-3) var(--s-5); margin: var(--s-7) 0; cursor: pointer; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.jd-back:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- the header ----------
   ONE row that never moves: cover, title, counts, and the two controls. The
   extras - scores, who was there, when it was last played, the replay link -
   collapse underneath it.

   The previous version swapped a tall hero for a slim strip, which meant that
   during the animation BOTH existed and neither was right. Nothing swaps here,
   so there is no in-between state to get wrong. */
.jd-head { border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--s-6); }
.jd-head-row { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); flex-wrap: wrap; }
.jd-cover { position: relative; width: 58px; flex: none; aspect-ratio: 3/4; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.jd-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-cover span { font-weight: 800; font-size: var(--t-micro); opacity: 0.8; padding: 2px; }
.jd-titles { flex: 1; min-width: 160px; }
.jd-titles h1 { margin: 0 0 2px; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.jd-titles h1 .yr { color: var(--muted); font-weight: 600; font-size: var(--t-md); }
.jd-line { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.jd-line b { color: var(--ink); font-variant-numeric: tabular-nums; }

.jd-tog {
  display: inline-flex; align-items: center; gap: var(--s-3); flex: none;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--s-3) var(--s-5); cursor: pointer;
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted);
}
.jd-tog:hover { border-color: var(--accent); color: var(--ink); }
.jd-tog.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Inside the card now, so it has no box of its own - just a rule separating
   it from the row above. */
/* Restored: the header rewrite dropped these along with the old hero, which
   is why the vote link and the fact rows lost their styling entirely. */
.jd-scores { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.jd-score { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.jd-score b { font-size: var(--t-h3); color: var(--accent); font-variant-numeric: tabular-nums; }
.jd-facts { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.jq-chip { display: inline-block; padding: 2px var(--s-3); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.jq-chip:hover { border-color: var(--accent); }

/* A real button, sitting with the other controls rather than reading as a
   stray link at the bottom of a list. */
.jd-vote {
  display: inline-flex; align-items: center; gap: var(--s-3); flex: none;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--s-3) var(--s-5); cursor: pointer; text-decoration: none;
  border: var(--bw) solid var(--ink); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
}
.jd-vote:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.jd-more-in { display: flex; flex-direction: column; gap: var(--s-4); margin: 0 var(--s-5); padding: var(--s-5) 0; border-top: var(--bw) solid var(--line); }

/* z-index so the player stays ABOVE everything while it moves. Anything being
   faded gets its own stacking context, and the nowbar and episode list come
   after the stage in the DOM - so mid-transition they painted over it. */
/* NO FRAME. The picture is its own edge - a border around a video reads as
   chrome the moment anything is playing, and --ink is nearly white in a dark
   skin, so it was a bright rectangle around the one thing meant to be dark. */
.jd-stage { position: relative; z-index: 3; transform-origin: top left; aspect-ratio: 16/9; border-radius: var(--radius); background: #000; display: grid; place-items: center; margin-bottom: var(--s-6); overflow: hidden; }
.jd-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jd-stage .ph { text-align: center; color: #8c8c93; font-family: var(--f-mono); font-size: var(--t-mono); padding: var(--s-7); }
.jd-stage .ph b { display: block; color: #f3f1eb; font-size: var(--t-h3); font-family: var(--f-display); margin-bottom: var(--s-3); letter-spacing: -0.02em; }
.jd-play { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4) var(--s-6); cursor: pointer; border: var(--bw) solid #f3f1eb; border-radius: var(--radius); background: transparent; color: #f3f1eb; font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 700; }
.jd-play:hover { background: #f3f1eb; color: #000; }

.jd-nowbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--s-7); font-family: var(--f-mono); font-size: var(--t-mono); }
.jd-nowbar .next { margin-left: auto; color: var(--muted); }

.jd-runs { padding-bottom: var(--s-11); }
.jd-run { margin-bottom: var(--s-7); }
.jd-run-h { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--line); }
.jd-run-h b { font-size: var(--t-h3); letter-spacing: -0.02em; }
.jd-eps { display: flex; flex-direction: column; gap: var(--s-2); }
.jd-ep { display: flex; align-items: center; gap: var(--s-4); width: 100%; text-align: left; padding: var(--s-4) var(--s-5); cursor: pointer; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: inherit; font-family: var(--f-mono); font-size: var(--t-mono); }
.jd-ep:hover { border-color: var(--accent); }
.jd-ep.on { border-color: var(--accent); background: var(--accent-soft); }
.jd-ep .num { color: var(--accent); font-weight: 700; min-width: 22px; }
/* Shrink-to-fit rather than flex:1, so the guest credit that follows sits
   against the end of the title and reads with it. The duration still pins
   right, on its own margin-left:auto. */
.jd-ep .nm { color: var(--ink); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-ep .dur { margin-left: auto; color: var(--muted); }
/* Who is in THIS episode. The chips in the header above pool every guest across
   the whole game, which on a two-episode game with two different guests names
   both and tells you nothing about either row. */
.jd-ep .ep-with { flex: none; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44%; }
@media (max-width: 560px) { .jd-ep .ep-with { display: none; } }

/* ============================================================
   THEATER

   Not "a bigger video". The point is that everything else STOPS EXISTING: the
   page cannot scroll, the surroundings go flat black, and the player floats
   centred with nothing else on screen.

   Sized to the WINDOW rather than to the video - 75% of whichever dimension
   runs out first - so it keeps 16:9 and stays comfortably inside the frame on
   a tall phone and a wide monitor alike. The black around it is the effect,
   not wasted space.

   Two things the first attempt got wrong. It tried to FILL the screen, which
   is just a big video. And it kept the stage's border, and --ink is nearly
   white in a dark skin, so the immersive black player had a bright line across
   its top and bottom.
   ============================================================ */
#jqDetail {
  /* One curve, one clock, for everything theater moves - the player resizing
     and the panel sliding should read as the same gesture, not two. */
  --jd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jd-t: 0.52s;
}
#jqDetail[data-theater] {
  overflow: hidden;            /* nothing else to reach, so nothing scrolls */
}
/* The dark itself: one layer, one property, driven entirely by CSS. It sits
   under the player (3) and over everything else, so the picture stays lit while
   the room goes black around it. */
.jd-dim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: #000; opacity: 0;
  transition: opacity var(--jd-t) var(--jd-ease);
}
#jqDetail[data-theater] .jd-dim { opacity: 1; }
#jqDetail[data-theater] .jd-in {
  max-width: none; padding: 0;
  height: 100vh; display: grid; place-items: center;
}
/* Everything that is not the player is gone, not merely pushed down. */
#jqDetail[data-theater] .jd-back,
#jqDetail[data-theater] .jd-head,
#jqDetail[data-theater] .jd-nowbar,
#jqDetail[data-theater] .jd-runs { display: none; }

#jqDetail[data-theater] .jd-stage {
  margin: 0;
  aspect-ratio: 16 / 9;
  width: min(var(--jd-w), calc(var(--jd-h) * 16 / 9));
  height: auto;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.9);
  transition: box-shadow var(--jd-t) ease, width var(--jd-t) var(--jd-ease);
}

/* The way out floats over the black rather than sitting in a bar, and stays
   dimmed until you reach for it so it does not compete with the picture. */
/* Visibility is the stack's job, not each button's. */
.jd-exit {
  display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap;
  /* NOT positioned. The stack that holds these is what is fixed - each button
     pinning itself to the same corner is how all three ended up on top of one
     another. */
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--s-3) var(--s-5); cursor: pointer;
  border: var(--bw) solid #2a2a30; border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.6); color: #8c8c93;
  opacity: 0.45; transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.jd-exit:hover,
.jd-exit:focus-visible { opacity: 1; border-color: #f3f1eb; color: #f3f1eb; }
/* An active toggle comes UP to full rather than lighting up in the accent.
   Over a video, a bright orange chip is a distraction, and the label already
   says which way it will go. */
.jd-exit.on { opacity: 1; border-color: #f3f1eb; color: #f3f1eb; }

/* ---------- theater controls ----------
   Stacked in the corner, out of the picture. Each one is dimmed until reached
   for, so three controls sitting over a video do not compete with it. */
.jd-tctl { display: none; }
#jqDetail[data-theater] .jd-tctl {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
  position: fixed; top: var(--s-6); right: var(--s-6); z-index: 5;
  transition: right var(--jd-t) var(--jd-ease);
}
/* Out from under the panel when it is open. */
#jqDetail[data-theater][data-list] .jd-tctl { right: calc(380px + var(--s-6)); }

/* ---------- the episode panel ----------
   Slides in from the right so another episode is one reach away without
   leaving the room. Off-screen rather than hidden, so it can animate, and
   inert until theater is on. */
.jd-listpanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 88vw;
  z-index: 4; overflow-y: auto; overscroll-behavior: contain;
  background: #0b0b0d; border-left: 1px solid #1a1a1e;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--jd-t) var(--jd-ease), visibility 0s linear var(--jd-t);
}
#jqDetail[data-theater][data-list] .jd-listpanel {
  transform: none; visibility: visible; transition: transform var(--jd-t) var(--jd-ease), visibility 0s;
}
.jd-listpanel-in { padding: var(--s-8) var(--s-6) var(--s-10); }
/* Inside the panel the runs get a darker ground to sit on. */
.jd-listpanel .jd-run-h { border-bottom-color: #1a1a1e; }
.jd-listpanel .jd-ep { background: #121215; border-color: #26262c; }
.jd-listpanel .jd-ep.on { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- the two sizes ----------
   The stage reads its bounds from variables so the size toggle and the panel
   can each move them without either knowing about the other. */
#jqDetail[data-theater] { --jd-w: 75vw; --jd-h: 75vh; }
#jqDetail[data-theater][data-size="big"] { --jd-w: 94vw; --jd-h: 92vh; }
#jqDetail[data-theater][data-list] { --jd-w: calc(75vw - 380px); }
#jqDetail[data-theater][data-list][data-size="big"] { --jd-w: calc(94vw - 380px); }
#jqDetail[data-theater] .jd-in { transition: padding-right var(--jd-t) var(--jd-ease); }
#jqDetail[data-theater][data-list] .jd-in { padding-right: 380px; }

/* Nothing to say means no rule and no gap. */
.jd-more-in[hidden] { display: none; }