/* BAD TAKES — desktop layout for the player page.
   The phone page gets opened on laptops too, where one tall column turns the
   picture into a billboard and pushes Submit below the fold. From 900px up the
   record deck splits into a projection side (picture, timeline, take strip) and
   a control side (state, mic, buttons), sized to the window so the page never
   scrolls — a deck you play, not a document you read.

   Loaded after play.html's own <style>, so every selector here carries an extra
   ancestor to win on specificity rather than on !important. */

@media (min-width: 900px) {

  /* The window is the frame: nothing below the fold, ever. */
  html, body { height: 100vh; overflow: hidden; }

  body > main {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    height: calc(100vh - 44px);   /* the marquee strip above is 44px */
    min-height: 0;
    overflow: hidden;
    padding: 12px 18px 14px;
    gap: 12px;
  }

  /* Lobby, waiting, vote and score screens stay a comfortable reading column.
     They are decks without a picture, so :has keeps them out of the grid below. */
  main > .join,
  main > .wait,
  main > .deck:not(:has(> video)) {
    max-width: 560px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
  main > .join { max-width: 460px; }

  /* These two centre their children; without `safe` a long board on a short
     window would push the headline off the top where you cannot scroll to it. */
  main > .join,
  main > .wait { justify-content: safe center; }

  /* ---- the record deck: picture left, controls right -------------------
     Five rows. The picture spans rows 2-3 and the button stack spans 3-5, so
     the two tall blocks share height instead of stacking a page's worth of it.
     Explicit rows (not areas) because the timeline wrapper has no class. */
  main > .deck:has(> video) {
    /* Capped three ways: a share of the window, an absolute ceiling, and
       whatever the rest of the deck has not already spoken for. The 140px
       floor matters: below it the subtraction goes negative, and a negative
       max-height/width is invalid at computed-value time, which would drop
       both declarations and let the picture size itself. */
    --vid-h: max(140px, min(56vh, 620px, calc(100vh - 400px)));

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(400px, 440px);
    /* row 2 is pinned to the mic so the slack falls into row 3, where the
       button stack starts — otherwise the picture pushes Record down the page */
    grid-template-rows: auto min-content 1fr auto auto;
    column-gap: 20px;
    row-gap: 10px;
    height: 100%;
    min-height: 0;
    /* Backstop for the picture side only — the controls scroll themselves.
       Either way the page never scrolls. */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }

  /* The deck's direct children are fixed by play.js: .deck-head, video, the
     unclassed timeline wrapper, .take-strip, .take-state, .mic, .controls.
     .transport lives inside the timeline wrapper and .modes/.fx inside
     .controls, so they need no placement here. If any of them is ever promoted
     to a direct child it lands in an implicit row on the picture side and the
     deck scrolls instead of breaking — give it an explicit grid-row below. */
  main > .deck:has(> video) > * { grid-column: 1; min-width: 0; }

  main > .deck:has(> video) > .deck-head     { grid-column: 1; grid-row: 1; }
  main > .deck:has(> video) > video          { grid-column: 1; grid-row: 2 / 4; }
  main > .deck:has(> video) > div:has(> .tl) { grid-column: 1; grid-row: 4; align-self: start; }
  main > .deck:has(> video) > .take-strip    { grid-column: 1; grid-row: 5; align-self: start; }

  main > .deck:has(> video) > .take-state    { grid-column: 2; grid-row: 1; align-self: center; }
  main > .deck:has(> video) > .mic           { grid-column: 2; grid-row: 2; align-self: start; }
  /* The button stack owns the rest of the right column and scrolls inside it.
     min-height:0 keeps it from forcing rows 4-5 taller than the timeline and
     take strip need, so a cramped window costs the buttons a scrollbar rather
     than costing the whole deck one. align-content:start because a stretched
     grid would otherwise inflate Record and Submit to eat the slack. */
  main > .deck:has(> video) > .controls {
    grid-column: 2;
    grid-row: 3 / 6;
    align-self: stretch;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;   /* room for a focus ring so it cannot trip the scroller */
    margin-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }

  /* Width comes off the height cap so the gilt frame hugs the picture: no
     letterboxing inside the border whichever way the window is short. */
  main > .deck:has(> video) > video {
    width: min(100%, calc(var(--vid-h) * 16 / 9));
    height: auto;
    max-height: var(--vid-h);
    min-height: 0;   /* the picture takes the room that is left; it never claims room */
    aspect-ratio: 16 / 9;
    object-fit: contain;
    justify-self: center;
    align-self: center;
  }

  /* Mouse-sized, not thumb-sized — buys back the height the stack needs. */
  main > .deck:has(> video) .big { padding: 16px; font-size: 18px; }
  main > .deck:has(> video) .row-2 button { padding: 13px; }
  main > .deck:has(> video) .take-wave { height: 44px; }
  main > .deck .ballot button { padding: 16px; }
}

/* A 1366x768 laptop only offers about 660px of viewport once the browser takes
   its cut, so everything gives up a few pixels to keep Submit on screen. */
@media (min-width: 900px) and (max-height: 760px) {
  body > main { padding: 10px 16px 12px; gap: 10px; }

  main > .deck:has(> video) {
    --vid-h: max(140px, min(56vh, 620px, calc(100vh - 375px)));
    row-gap: 8px;
  }
  main > .deck:has(> video) .big { padding: 13px; font-size: 17px; }
  main > .deck:has(> video) .row-2 button { padding: 11px; }
  main > .deck:has(> video) .take-wave { height: 40px; }
  main > .deck:has(> video) .take-tools button { padding: 8px 6px; }
  main > .deck:has(> video) .clock { font-size: 28px; }
}