/* One desktop canvas for the four study tabs. Page styles own their content;
   this layer owns its width, gutters, background and shared heading scale. */
@media (min-width: 960px) {
  #today,
  #practice,
  #home {
    left: var(--desktop-rail);
    padding: var(--desktop-study-top) var(--desktop-study-gutter) 48px;
    background: var(--paper);
    border-top-color: var(--paper);
  }
  #today .today-inner,
  #practice .pinner,
  #home .hinner {
    max-width: var(--desktop-study-width);
    margin-inline: auto;
  }
  /* Learn’s header is sticky, and a sticky box pins inside its scroller’s
     padding. With the top gutter on #today, a strip stayed open above the pinned
     header and the path scrolled through it. The gutter lives inside the header
     instead, so the header itself covers the top of the page. */
  #today {
    padding-top: 0;
    --today-status-height: calc(71px + var(--desktop-study-top));
  }
  /* Learn takes the page gutter inside its sticky row, then the same 15px
     above the controls as every other tab, so all four line up. */
  .today-top {
    padding: calc(var(--desktop-study-top) + 15px) 0 12px;
    min-height: calc(71px + var(--desktop-study-top));
  }
  /* The page title steps up a size, as Topics and Preferences do. */
  #home .progress-hero h1 {
    max-width: none;
    font-size: 34px;
  }

  /* The feed's header and answer rows share the same edges as the page tabs. */
  body:not(.watch-mode) #reel {
    border: 0;
  }
  body:not(.watch-mode) #reel > .card {
    padding-inline: var(--desktop-study-gutter);
  }
  body:not(.watch-mode) .bar {
    padding-inline: 0;
  }
  /* Keep the native status-bar inset: large iPads reach this breakpoint. */
  body:not(.watch-mode) .bar.top {
    padding-top: calc(var(--desktop-study-top) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
    min-height: calc(86px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  }
  body:not(.watch-mode) .bar.top::after {
    display: none;
  }

  /* Progress reads the same here as on a phone (progress.css); the canvas owns
     the gutter, so the page only gives its summary and rows more room. */
  .progress-hero {
    padding: 0;
  }
  .progress-summary-card {
    margin: 24px 0 0;
    padding: 20px 24px;
  }
  #home .progress-summary-card h2 {
    font-size: 18px;
  }
  .milestones {
    padding: 0;
  }
  .milestone {
    padding: 22px 0;
    min-height: 116px;
    gap: 20px;
  }
}

/* Leave room for the feed arrows at the narrow end of the desktop breakpoint. */
@media (min-width: 960px) and (max-width: 1259px) {
  body:not(.watch-mode) .reel-nav {
    left: auto;
    right: 6px;
    gap: 14px;
  }
  body:not(.watch-mode) .reel-nav button {
    width: 44px;
    height: 44px;
  }
}