/* PEBBLE SWING / coaching studio, extending the accepted landing world.
   THESIS: one swing, one observation, one practice. Evidence owns the screen.
   OWN-WORLD: warm paper, dark footage, precise sans type, restrained sand cues.
   STORY: add footage, watch actual analysis, inspect the move, practise, return.
   FIRST VIEWPORT: desktop pairs a large personal replay with one coaching cue;
   mobile leads with the replay and offers four thumb-sized report destinations.
   FORM: task-first extension of the established Pebble Swing identity.
   FINISH: unreviewed and undocumented is unfinished; this build ends with the
   finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance.
   Signature interaction: cited frames hold briefly during replay; tapping a
   citation pauses exactly there. User input always takes precedence over motion. */

@media screen {
  body:not(.on-landing) #main { max-width: 1360px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  #main :is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--tint); outline-offset: 4px; }
  #main :is(.btn, select, .seg-btn) { min-height: 46px; }
  #main .btn { border-radius: 10px; }
  #main .btn-filled { box-shadow: none; }
  #main :is(h1, h2, h3) { font-family: var(--f-ui); }
  #main :is(.app-foot, .report-foot) { margin-top: 40px; }
  #main .app-foot { max-width: 75ch; font-size: 13px; line-height: 1.6; }

  /* Personal footage is the report's anchor. Desktop copy sits alongside it;
     the phone gets the actual replay before secondary explanations. */
  #step-report.report-studio #report-focus {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-rows: auto 1fr;
    gap: 24px clamp(28px, 5vw, 64px);
    align-items: start;
  }
  #step-report.report-studio #focus-move { display: contents; }
  #step-report.report-studio .focus-evidence { grid-column: 1; grid-row: 1 / 3; }
  #step-report.report-studio .focus-heading { grid-column: 2; grid-row: 1; margin: 0; padding-top: 26px; }
  #step-report.report-studio .focus-heading h2 { font: 600 clamp(30px, 3.1vw, 42px)/1.16 var(--f-ui); letter-spacing: -.028em; max-width: 22ch; }
  #step-report.report-studio .focus-heading > p { margin-top: 22px; max-width: 42ch; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
  #step-report.report-studio #focus-go-practice { margin-top: 28px; padding-inline: 24px; }
  #step-report.report-studio .focus-observation { grid-column: 2; grid-row: 2; border-block: 1px solid var(--rule); padding: 0; }
  #step-report.report-studio .focus-observation > summary { padding: 17px 0; min-height: 52px; color: var(--ink-2); font-size: 15px; font-weight: 500; cursor: pointer; }
  #step-report.report-studio .focus-observation > p { padding-top: 4px; font-size: 16px; line-height: 1.7; }
  #step-report.report-studio .focus-observation > a { margin-bottom: 10px; }
  #step-report.report-studio .coach-player { --cp-stage-height: min(55svh, 500px); }
  #step-report.report-studio .report-focus-nav { display: none; }
  #step-report.report-studio .focus-practice-grid { padding: 28px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; }
  #step-report.report-studio .focus-practice-grid:has(.focus-video:empty) { grid-template-columns: 1fr; }
  #step-report.report-studio #focus-drill { max-width: 62ch; font-size: 20px; line-height: 1.6; color: var(--ink); }
  #step-report.report-studio .focus-prescription { margin-top: 20px; }
  #step-report.report-studio .focus-range { border: 0; background: var(--paper-2); border-radius: 16px; padding: 4px 28px 20px; }
  #step-report.report-studio .focus-counter { align-items: baseline; }
  #step-report.report-studio #focus-count { font: 500 76px/1 var(--f-ui); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  #step-report.report-studio .focus-range-actions { margin-block: 24px; }
  #step-report.report-studio #focus-retest { margin-top: 20px; }
  #step-report.report-studio .focus-session-note { font-size: 13px; line-height: 1.6; }

  /* The library keeps a recognisable frame, date and coaching headline. */
  #step-home { max-width: 1120px; margin-inline: auto; padding-top: 56px; }
  #step-home .lede { max-width: 620px; }
  #step-home .stage-title { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.025em; }
  #step-home .standfirst { max-width: 48ch; font-size: 17px; line-height: 1.6; }
  #step-home .home-actions { margin-block: 28px 40px; }
  #step-home .home-list .past-row { padding: 22px 8px; align-items: center; gap: 20px; grid-template-columns: 64px 46px minmax(0, auto) minmax(0, 1fr) auto 16px; }
  #step-home .home-list .past-thumb { width: 64px; height: 80px; border-radius: 8px; }
  #step-home .home-list .past-head { font-size: 17px; color: var(--ink); }
  #step-home .home-list .past-score { font-size: 24px; font-family: var(--f-ui); }

  /* Shared account / tempo sheets inherit the same control rhythm. */
  #auth .eyebrow { display: none; }
  #auth button.link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; border: 0; border-radius: 4px; background: transparent; color: var(--tint-text); font: 500 15px/1.5 var(--f-ui); text-align: start; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
  #auth button.link:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }

  :is(#auth, #onboard, #trainer) .trainer-card { border-radius: 20px; padding: 34px; max-height: calc(100dvh - 32px); overflow-y: auto; }
  :is(#auth, #onboard, #trainer) .trainer-title { font: 600 30px/1.2 var(--f-ui); letter-spacing: -.02em; }
  :is(#auth, #onboard, #trainer) .trainer-sub { font-size: 16px; line-height: 1.6; }
  :is(#auth, #onboard, #trainer) :is(input, .btn) { min-height: 48px; border-radius: 10px; }

  @media (max-width: 700px) {
    #step-input.intake-studio:has(#preview:not(.hidden)) .studio-film-tips { display: none; }
    #step-input.intake-studio .preview video { max-height: min(32svh, 300px); object-fit: contain; }

    #step-report.report-studio #report-focus { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    #step-report.report-studio .focus-evidence { grid-column: 1; grid-row: 1; }
    #step-report.report-studio .focus-heading { grid-column: 1; grid-row: 2; padding-top: 0; }
    #step-report.report-studio .focus-heading h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; max-width: 28ch; }
    #step-report.report-studio .focus-heading > p { font-size: 16px; line-height: 1.65; margin-top: 14px; }
    #step-report.report-studio #focus-go-practice { margin-top: 20px; width: 100%; }
    #step-report.report-studio .focus-observation { grid-column: 1; grid-row: 3; }
    #step-report.report-studio .coach-player { --cp-stage-height: min(48svh, 440px); }
    #step-report.report-studio .focus-practice-grid { padding: 22px 20px; }
    #step-report.report-studio #focus-drill { font-size: 18px; line-height: 1.6; }
    #step-report.report-studio .focus-range { padding-inline: 20px; }
    #step-report.report-studio #focus-count { font-size: 64px; }
    #step-home { padding-top: 30px; }
    #step-home .standfirst { font-size: 15px; }
    #step-home .home-list .past-row { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 6px 16px; padding: 20px 0; }
    #step-home .home-list .past-thumb { grid-column: 1; grid-row: 1 / 4; width: 58px; height: 76px; }
    #step-home .past-score { grid-column: 3; grid-row: 1 / 3; }
    #step-home .past-when { grid-column: 2; grid-row: 1; font-size: 11px; }
    #step-home .past-head { grid-column: 2; grid-row: 2; margin: 0; }
    #step-home .past-delta { grid-column: 2; grid-row: 3; }
    #step-home .past-go { display: none; }
    :is(#auth, #onboard, #trainer) .trainer-card { padding: 28px 22px; border-radius: 20px 20px 0 0; }
    :is(#auth, #onboard, #trainer) .trainer-title { font-size: 26px; }
  }
  html:is([lang^='zh'], [lang^='ja'], [lang^='ko']) #step-report.report-studio .focus-heading h2 { letter-spacing: 0; line-height: 1.4; }
  html[lang^='ko'] #main :is(h1, h2, h3, p, button) { word-break: keep-all; overflow-wrap: anywhere; }
}

@media print {
  #focus-go-practice, #focus-retest { display: none !important; }
  #report-focus .focus-observation { display: block; }
}