/* v3-lesson: lesson screens go full screen on phones, and the desktop home uses the width.
   learn.css and routine.css load after this file, so every rule starts with a body[data-page] selector to win. */

/* The header is never sticky. */
header{position:static}

/* 1. Lesson screens: no brand bar, no nav, no footer. One small round button goes back to the path. */
body[data-page="learn.step"] header,body[data-page="learn.run"] header,body[data-page="music.find_the_1"] header,body[data-page="music.basic_step"] header,
body[data-page="learn.step"] #main-nav,body[data-page="learn.run"] #main-nav,body[data-page="music.find_the_1"] #main-nav,body[data-page="music.basic_step"] #main-nav,
body[data-page="learn.step"] footer,body[data-page="learn.run"] footer,body[data-page="music.find_the_1"] footer,body[data-page="music.basic_step"] footer{display:none}

body[data-page="learn.step"] main,body[data-page="learn.run"] main,body[data-page="music.find_the_1"] main,body[data-page="music.basic_step"] main{padding:8px 12px 16px}

body .lesson-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:#30231f;border:1px solid #49332b;color:#fff5e9;font-size:18px;line-height:1;text-decoration:none}
body .lesson-close:hover,body .lesson-close:focus-visible{background:#49332b}

/* Step and run screens: one slim row with the way out, the step number and the move name. */
body .step-screen .step-head{display:flex;align-items:center;gap:10px;text-align:left;min-height:44px}
body .step-screen .step-head .eyebrow{margin:0;flex:none;font-size:12px;letter-spacing:1px;white-space:nowrap}
body .step-screen .step-head h1{margin:0;flex:1;min-width:0;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2. The video takes the phone screen. It fills the width (12px gutter) and stops when the buttons would fall off. */
body .step-screen.step-lesson{row-gap:4px}
body .step-screen .player-wrap{--cap:calc(100vh - 228px);width:100%}
@supports (height:1svh){body .step-screen .player-wrap{--cap:calc(100svh - 228px)}}
body .step-screen .player-bottom{margin-top:6px}
body .step-screen .step-action{margin-top:4px}
body .step-screen .step-action .primary{min-height:52px}
body .step-screen .full-routine{display:inline-flex;align-items:center;min-height:44px}
body[data-page="learn.run"] .step-screen>form{margin-top:4px}
body[data-page="learn.run"] .step-screen #run-hint{margin:6px 0}

/* Find the 1 and Basic step: same small way out, beside the "Unit 0" label. */
body #find1-root>.lesson-close,body #basic-root>.lesson-close{margin:0 10px 0 0;vertical-align:middle}
body #find1-root>h1,body #basic-root>h1{margin-top:4px}
body[data-page="music.basic_step"] .basic-video{width:100%;max-height:70vh;object-fit:contain;background:#090706}
@supports (height:1svh){body[data-page="music.basic_step"] .basic-video{max-height:70svh}}

/* 4. Desktop: video on the left as big as the screen allows, "I got it" on the right. */
@media(min-width:900px){
  body[data-page="learn.step"] main,body[data-page="learn.run"] main{max-width:1180px;padding:16px 24px 24px}
  body .step-screen .lesson-close{position:absolute;top:16px;left:16px}
  body .step-screen .step-head{display:block;min-height:0}
  body .step-screen .step-head .eyebrow{font-size:14px;letter-spacing:2px}
  body .step-screen .step-head h1{margin:6px 0 8px;font-size:38px;white-space:normal}
  body .learn-shell.step-lesson{max-width:1100px}
  body .step-screen .player-wrap{--cap:calc(100vh - 140px)}
  @supports (height:1svh){body .step-screen .player-wrap{--cap:calc(100svh - 140px)}}
  body .step-lesson .step-media{width:calc((100vh - 140px) * .564);max-width:50vw}
  @supports (height:1svh){body .step-lesson .step-media{width:calc((100svh - 140px) * .564)}}
  body[data-page="learn.run"] .step-screen .step-head{text-align:center}
  body[data-page="learn.run"] .step-screen .player-wrap{--cap:calc(100vh - 200px)}
  @supports (height:1svh){body[data-page="learn.run"] .step-screen .player-wrap{--cap:calc(100svh - 200px)}}
}

/* 5. Desktop home: wider page, bigger next step, routines as a two column grid of photo cards. */
@media(min-width:1000px){
  body[data-page="learn.home"] main{max-width:1148px}
  body[data-page="learn.home"] .learn-shell.home{max-width:1100px}
  body[data-page="learn.home"] .home .next-card{grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:36px;padding:18px}
  body[data-page="learn.home"] .home .next-h1{font-size:56px}
  body[data-page="learn.home"] .home .next-card .button{min-height:60px;font-size:20px;max-width:420px}
  body[data-page="learn.home"] .routine-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  body[data-page="learn.home"] .routine-path>summary{gap:16px;padding:12px;min-height:170px}
  body[data-page="learn.home"] .routine-path>summary img,body[data-page="learn.home"] .routine-path>summary .path-icon{width:118px;height:158px;border-radius:12px}
  body[data-page="learn.home"] .routine-info b{font-size:20px}
  body[data-page="learn.home"] .routine-info small{font-size:14px}
  body[data-page="learn.home"] .step-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 12px 12px}
}

/* QA: the run page on phones. Speed picks and "Yes, I did it" fit on the first screen. */
@media(max-width:899px){
  body[data-page="learn.run"] .step-screen .player-wrap{--cap:calc(100vh - 318px)}
  @supports (height:1svh){body[data-page="learn.run"] .step-screen .player-wrap{--cap:calc(100svh - 318px)}}
  body[data-page="learn.run"] .step-screen .speed-picks{padding:0;position:relative}
  body[data-page="learn.run"] .step-screen .speed-picks legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body[data-page="learn.run"] .step-screen #run-hint{margin:0 0 6px;font-size:14px;text-align:center}
}

/* QA: the run page on desktop matches the step page. Video left, speed picks and "Yes, I did it" right. */
@media(min-width:900px){
  body[data-page="learn.run"] .learn-shell.step-screen{display:grid;max-width:1100px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"media head" "media form" "media hint" "media .";grid-template-rows:auto auto auto 1fr;column-gap:36px;align-items:start;text-align:left}
  body[data-page="learn.run"] .step-screen .step-head{grid-area:head;text-align:left}
  body[data-page="learn.run"] .step-screen .player-wrap{grid-area:media;--cap:calc(100vh - 140px);width:calc((100vh - 140px) * .564);max-width:50vw}
  @supports (height:1svh){body[data-page="learn.run"] .step-screen .player-wrap{--cap:calc(100svh - 140px);width:calc((100svh - 140px) * .564)}}
  body[data-page="learn.run"] .step-screen>form{grid-area:form;margin:0}
  body[data-page="learn.run"] .step-screen>.silent-hint{grid-area:hint}
  body[data-page="learn.run"] .step-screen .speed-picks{justify-content:flex-start;gap:24px}
  body[data-page="learn.run"] .step-screen #run-hint{text-align:left}
}