/* 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);
    color: var(--ink);
  }
  #today .today-inner, #practice .pinner, #home .hinner {
    width: 100%;
    max-width: var(--desktop-study-width);
    margin-inline: auto;
  }
  #today { --today-status-height: 70px; }
  #practice .mocks { margin-top: 0; }
  .today-top { padding: 0 0 18px; min-height: 70px; }
  #practice .mock-library-heading h1, #home .progress-hero h1 {
    margin: 0;
    max-width: none;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: var(--ink);
  }

  /* 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 is a page, with a summary and rows, rather than a phone-shaped card. */
  #home { --quest-blue: var(--brand); --quest-ink: var(--ink); --quest-muted: var(--ink-2); --quest-line: var(--line-2); }
  #home .hinner { position: relative; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .progress-hero { padding: 0; background: transparent; }
  .progress-hero-story { min-height: 0; }
  .progress-hero-copy { width: calc(100% - 60px); padding: 0; }
  .progress-journey-label, .progress-mobile-title, .progress-hero-art { display: none; }
  .progress-desktop-title { display: inline; }
  .progress-desktop-subtitle { display: block; margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; font-weight: 600; }
  .progress-summary-card { margin: 24px 0 0; padding: 20px 24px; background: var(--brand-soft); border: 2px solid var(--brand-soft-2); border-radius: 16px; }
  #home .progress-summary-card h2 { color: var(--ink); font-size: 18px; }
  .quest-track { background: var(--line-2); }
  .quest-track-label { color: var(--ink); font-size: 12px; }
  .quest-track.is-summary .quest-track-fill { background: var(--brand); }
  .milestones { padding: 0; }
  .milestones-header { min-height: 76px; padding: 24px 0 16px; }
  .milestones-header .settings-button { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 2px solid var(--line-2); border-radius: 13px; background: var(--paper); color: var(--ink-2); box-shadow: none; }
  .milestone { padding: 22px 0; min-height: 116px; gap: 20px; }
  .milestone:hover { background: var(--panel); }
  .milestone-description { color: var(--ink-2); }
  .milestone-reached { color: var(--green-ink); }
  .quest-track.is-readiness .quest-track-label { color: var(--ink); }
}

/* 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; }
}