/* Desktop layout only. Match Creator OS pageWidths.css; mobile remains upstream. */
@media (min-width: 901px) {
  body.has-site-shell {
    --training-shell-max: 1920px;
    --training-gutter: clamp(28px, 3vw, 58px);
  }
  .has-site-shell .global-site-header,
  .has-site-shell > .site-header {
    width: min(100%, var(--training-shell-max));
    margin-inline: auto;
    padding-inline: var(--training-gutter);
  }
  .has-site-shell .global-site-header { gap: 16px; }
  .has-site-shell > .site-header { position: relative; }

  /* Landing: an introduction beside two choices, aligned to the site grid. */
  body.training-home.has-site-shell > main {
    max-width: var(--training-shell-max);
    padding: clamp(32px, 5vh, 64px) var(--training-gutter) 24px;
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
    grid-template-rows: minmax(300px, 1fr) auto;
    gap: 32px clamp(32px, 5vw, 88px);
    align-items: center;
  }
  .training-home .welcome { padding: 0; align-self: center; }
  .training-home .welcome p { margin-bottom: 20px; }
  .training-home h1 { font-size: clamp(48px, 4.8vw, 76px); line-height: 1.15; }
  .training-home .entries { gap: 20px; }
  .training-home .entry { min-height: 164px; padding: 28px; border-radius: 16px; }
  .training-home .entry h2 { font-size: 26px; }
  .training-home .entry p { font-size: 15px; line-height: 1.6; }
  .training-home main > footer { grid-column: 1 / -1; margin: 0; }

  /* Sight singing: one toolbar, score + live curve, controls alongside. */
  .app-shell.practice-focus .app-actions {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 56px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    z-index: 2;
  }
  .app-shell.practice-focus .app-actions button {
    flex: none;
    width: auto;
    padding: 0 16px;
  }
  .app-shell.practice-focus .shell {
    max-width: var(--training-shell-max);
    padding: 16px var(--training-gutter);
  }
  .app-shell.practice-focus .score-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 224px;
    grid-template-rows: auto minmax(0, 2fr) minmax(120px, 1fr);
    position: relative;
  }
  .app-shell.practice-focus .score-heading { grid-column: 1; grid-row: 1; min-height: 60px; }
  .app-shell.practice-focus .score-heading h2 { font-size: 20px; text-wrap: pretty; }
  .app-shell.practice-focus .score-stage { grid-column: 1; grid-row: 2; }
  .app-shell.practice-focus #staff { padding: 16px 20px 40px; }
  .app-shell.practice-focus #staff svg.lilypond-score { max-width: 1400px; margin-inline: auto; }
  .app-shell.practice-focus .live-curve-panel { grid-column: 1; grid-row: 3; padding: 8px 20px; }
  .app-shell.practice-focus .score-foot {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    padding: 20px 14px;
    border-top: 0;
    border-left: 1px solid var(--site-line);
    overflow: auto;
  }
  .app-shell.practice-focus .score-foot button { min-height: 48px; font-size: 13px; }
  .app-shell.practice-focus .transport-zone {
    grid-column: 2;
    grid-row: 3;
    padding: 14px;
    border-left: 1px solid var(--site-line);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    overflow: auto;
  }
  .app-shell.practice-focus .transport { flex-direction: column; width: 100%; margin: 0; }
  .app-shell.practice-focus .transport .button { width: 100%; flex: none; }
  .app-shell.practice-focus .beat-indicator { min-height: 8px; margin: 0; }
  .app-shell.practice-focus .environment-note:not([hidden]) {
    position: absolute;
    right: 14px;
    top: 210px;
    width: 196px;
    max-height: 96px;
    overflow: auto;
  }

  /* Harmony: full-width product header and a stable mode rail. */
  body.has-site-shell.harmony-unified > main {
    max-width: var(--training-shell-max);
    padding: 0 var(--training-gutter) 16px;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: 56px 48px 28px auto minmax(0, 1fr) auto auto;
    gap: 8px 28px;
    overflow: auto;
  }
  .harmony-unified.practice-focus main > header {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: calc(-1 * var(--training-gutter));
    padding-inline: var(--training-gutter);
  }
  .harmony-unified #modes,
  .harmony-unified .dense-options #modes {
    grid-column: 1;
    grid-row: 2 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-content: start;
    padding: 8px 16px 8px 0;
    border-right: 1px solid var(--site-line);
    min-height: 0;
    overflow: auto;
  }
  .harmony-unified #modes button,
  .harmony-unified .dense-options #modes button {
    grid-column: auto;
    min-height: 48px;
    padding: 10px 16px;
    text-align: left;
    font-size: 15px;
  }
  .harmony-unified #practice-mode {
    grid-column: 2;
    grid-row: 2;
    padding: 4px 0 0;
    max-width: 440px;
    width: 100%;
    gap: 8px;
  }
  .harmony-unified #practice-mode button { min-height: 44px; font-size: 14px; }
  .harmony-unified .session { grid-column: 2; grid-row: 3; padding: 2px 0; display: block; }
  .harmony-unified #tonal-kind,
  .harmony-unified #custom-edit { grid-column: 2; grid-row: 4; padding: 0; margin: 0; }
  .harmony-unified #custom-edit { padding: 10px 14px; min-height: 44px; }
  .harmony-unified .answers,
  .harmony-unified .tonal-inversions .answers {
    grid-column: 2;
    grid-row: 5;
    padding: 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }
  .harmony-unified #reveal { grid-column: 2; grid-row: 6; padding: 8px 0; }
  .harmony-unified #keyboard svg { height: 80px; }
  .harmony-unified main > footer { grid-column: 2; grid-row: 7; padding: 8px 0 0; }
  .harmony-unified main > footer .transport { max-width: 600px; margin-inline: auto; }
  .harmony-unified #choices .inversion-answer { min-height: 44px !important; }
  .harmony-unified .tonal-inversions #choices { grid-template-rows: repeat(7, minmax(44px, 1fr)); }
  .harmony-unified #progression-panel { grid-column: 2; grid-row: 3 / -1; padding: 0; }
  .harmony-unified #progression-panel .progression-content {
    grid-template-rows: 48px 48px 28px 32px minmax(140px, 1fr) 100px 32px;
    gap: 8px;
  }
  .harmony-unified #progression-panel #progression-feedback { height: 100px; }
  .harmony-unified #progression-panel #progression-keyboard svg { height: 72px; }
  .harmony-unified #progression-panel footer { width: 100%; max-width: 600px; margin: 0 auto; padding: 8px 0 0; }
  body.has-site-shell.harmony-unified > main[data-mode=III] { grid-template-rows: 56px 48px minmax(0, 1fr); }
  .harmony-unified main[data-mode=III] #progression-panel { grid-row: 3; }
}
@media (min-width: 901px) and (max-width: 1050px) {
  body.has-site-shell { --training-gutter: 20px; }
  .app-shell.practice-focus .score-card { grid-template-columns: minmax(0, 1fr) 192px; }
  .app-shell.practice-focus .app-actions button { padding-inline: 10px; }
  body.has-site-shell.harmony-unified > main { grid-template-columns: 164px minmax(0, 1fr); column-gap: 20px; }
}
/* Short desktop windows keep readable controls and allow document scrolling. */
@media (min-width: 901px) and (max-height: 760px) {
  .app-shell.practice-focus .shell { overflow: auto; }
  .app-shell.practice-focus .score-card { min-height: 540px; }
  .harmony-unified #progression-panel .progression-content { overflow-y: auto; }
}
@media (min-width: 901px) {
  /* Large custom pools scroll within answers instead of shrinking labels. */
  .harmony-unified .dense-options .session { display: block; }
  .harmony-unified .dense-options #custom-edit { min-height: 44px; padding: 10px 14px; margin: 0; font-size: 14px; }
  .harmony-unified .dense-options #choices {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(48px, auto);
    height: auto !important;
    gap: 8px !important;
    flex: none;
  }
  .harmony-unified #choices button { min-height: 44px !important; }
  .harmony-unified .dense-options #choices b { font-size: 14px !important; line-height: 1.25; }
  .harmony-unified .dense-options #reveal { padding: 8px 0; }
  .harmony-unified .dense-options #keyboard svg { height: 64px; }
  .harmony-unified .dense-options .keyboard-legend { display: flex; }
  .harmony-unified .dense-options .feedback-heading { min-height: 21px; line-height: 1.4; }
  .harmony-unified .dense-options > footer { padding: 8px 0 0; }
}