/* desktop-layout.css — The 960px+ layout tokens (--desktop-rail,
   --desktop-centre-shift, --desktop-study-*, --feed-column) that nav, topics,
   unlock and desktop-study use, and the first desktop overrides for the panes,
   feed and bars. desktop-study.css refines the study tabs later. */

@media (min-width: 960px) {
  :root {
    --desktop-rail: 232px;
    --desktop-centre-shift: 116px;
    --desktop-study-max: 800px;
    --desktop-study-gutter: 56px;
    --desktop-study-top: 24px;
    --desktop-study-width: min(
      var(--desktop-study-max),
      calc(100vw - var(--desktop-rail) - 2 * var(--desktop-study-gutter))
    );
    --feed-column: var(--desktop-study-width);
  }

  body {
    background: var(--paper);
  }

  /* The reel fills the area beside the rail and centres its own content, so the
     verdict sheet can span the full width while still belonging to its card. A
     fixed sheet would outlive the card and follow the reader down the feed. */
  #reel {
    left: var(--desktop-rail);
    right: 0;
    width: auto;
    transform: none;
  }

  #reel .card .inner {
    margin-inline: auto;
  }

  #reel .card .sheet {
    left: 0;
    right: 0;
    max-height: 46dvh;
    padding: 28px 40px 36px;
  }

  #reel .card .sheet .in {
    max-width: var(--feed-column);
    margin: 0 auto;
  }

  /* YouTube Shorts-style desktop stage: the whole Watch sequence—including
     its check questions—lives in one centred 9:16 player instead of a tall
     black column. The page, not the video, owns the surrounding whitespace. */
  body.watch-mode #reel {
    top: 50%;
    bottom: auto;
    left: calc(50% + var(--desktop-centre-shift));
    right: auto;
    width: min(640px, 54dvh, calc(100vw - var(--desktop-rail) - 160px));
    height: auto;
    aspect-ratio: 9 / 16;
    border: 1px solid rgb(7 24 39 / 24%);
    border-radius: 22px;
    box-shadow: 0 22px 70px rgb(7 24 39 / 22%);
    transform: translate(-50%, -50%);
  }

  body.watch-mode #reel .card {
    height: 100%;
    min-height: 100%;
  }

  body.watch-mode .vcap {
    top: 20px;
  }

  /* Desktop navigation lives beside the reel, not below it. Use the full
     height and preserve every pixel of the authored 9:16 lesson frame. */
  .vcard video {
    height: 100%;
    object-fit: contain;
  }

  #settings,
  #home,
  #practice,
  #learn,
  #cards {
    left: var(--desktop-rail);
    background: var(--paper);
  }

  /* Learn, Mock Tests and Progress take desktop-study.css padding instead. */
  #settings,
  #learn,
  #cards {
    padding: 48px clamp(36px, 5vw, 76px) 56px;
  }

  #learn .linner,
  #cards .cinner {
    max-width: 1040px;
  }

  #home h1 {
    max-width: 18ch;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
  }

  #practice h1,
  #learn h1,
  #cards h1 {
    font-size: 2rem;
  }

  .bar {
    left: calc(50% + var(--desktop-centre-shift));
    right: auto;
    width: var(--feed-column);
    transform: translateX(-50%);
  }

  /* One-row header on desktop: the hairline sits just under the chips, and the
     endless-mode infinity shares that row, level with the streak and filter. */
  /* The header keeps its content on the feed column, but its hairline runs from
     the rail to the right edge of the window. */
  .bar.top {
    min-height: calc(66px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    border-bottom: 0;
  }

  /* The desktop feed column is wider than the phone's, and the header tracks it. */
  .bar.top .session-track {
    max-width: none;
  }

  .bar.top::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(var(--desktop-rail) + var(--feed-column) / 2 - var(--desktop-centre-shift) - 50vw);
    width: calc(100vw - var(--desktop-rail));
    height: 2px;
    background: var(--line-1);
    pointer-events: none;
  }

  .closex {
    right: 34px;
  }
}