/* music_v1_1_fix · local fixes on top of the mock (gate findings). */
/* F1 bands (SHARED_RULES 4, caps 144 desktop / 96 phone, gaps.py). The mock's 72/72 (390: 40/40) plus card and leading air measured 145–234,
   so same-tone bands go to 48/48 (390: 24/24). The wave edge on #your-next-step keeps its 48 + content padding. */
main#main > section{padding-top:48px!important;padding-bottom:48px!important}
main#main > section#student-showcase{padding-top:0!important}
main#main > section#your-next-step{padding-top:96px!important}
main#main > section#before-you-begin{padding-top:24px!important;padding-bottom:24px!important}
main#main > section.hl-band{padding-top:24px!important;padding-bottom:24px!important}
main#main > section.ma-ticker{padding-top:12px!important;padding-bottom:12px!important}
#student-showcase .sa2-stage{padding:48px 0 40px!important}
@media (max-width:640px){
  main#main > section{padding-top:24px!important;padding-bottom:24px!important}
  main#main > section#student-showcase{padding-top:0!important}
  main#main > section#your-next-step{padding-top:72px!important}
  main#main > section#before-you-begin{padding-top:16px!important;padding-bottom:16px!important}
  main#main > section.hl-band{padding-top:16px!important;padding-bottom:16px!important}
  main#main > section.ma-ticker{padding-top:12px!important;padding-bottom:12px!important}
  #student-showcase .sa2-stage{padding:32px 0 24px!important}
  .mc-pair{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}   /* §3.6: 390 single column, no swipe */
}
/* F1 pass 2 (measured) */
.mc-photos-band{padding-bottom:24px!important}
main#main > section#echo-player{padding-top:16px!important}
main#main > section#your-next-step{padding-top:72px!important}
@media (max-width:640px){
  .mc-photos-band{padding-bottom:12px!important}
  main#main > section#echo-player{padding-top:8px!important}
  #echo-player .ma-player{margin-bottom:16px!important}
  #student-showcase .sa2-stage{padding-bottom:8px!important}
  #student-showcase .sa2-after{padding-top:16px!important}
  main#main > section#your-next-step{padding-top:56px!important}
  main#main > section#contact-block{padding-bottom:16px!important}
}
@media (max-width:640px){
  main#main > section#your-next-step{padding-top:40px!important}
  main#main > section#contact-block{padding-bottom:8px!important}
}
/* F2 gate: live hides the ON AIR badge at <=360 (studio.css); mock forced display:grid */
@media (max-width:360px){#student-showcase .sa2-badge{display:none!important}}
/* F3 AA: faded small text -> solid ink (fully booked stays grey, 5.5:1) */
.ch-l,.ch-pl,#learning-formats .fmt-pl,#learning-formats li{opacity:1!important}
.ch-l,.ch-pl{color:#3E4866!important}
#learning-formats .fmt-pl,#learning-formats .fmt-card li{color:#3E4866!important}
.av-fb{opacity:1!important;color:#5A6378!important}
#try-it kbd{opacity:1!important}
/* F4 orphan at 360: keep card title on one line */
@media (max-width:370px){#educators-support .card h3{font-size:clamp(17px,5vw,19px)!important;text-wrap:balance}}
/* F3b: booked rows were greyed by opacity (fails AA); grey by colour instead, still muted + not clickable */
.ch-opt.av-off,#learning-formats .fmt-card:has(.av-booked)>h3,#learning-formats .fmt-card:has(.av-booked)>.fmt-price,#learning-formats .fmt-card:has(.av-booked)>ul{opacity:1!important}
.ch-opt.av-off,.ch-opt.av-off *,#learning-formats .fmt-card:has(.av-booked)>h3,#learning-formats .fmt-card:has(.av-booked)>.fmt-price,#learning-formats .fmt-card:has(.av-booked)>.fmt-price *,#learning-formats .fmt-card:has(.av-booked)>ul,#learning-formats .fmt-card:has(.av-booked)>ul *{color:#5A6378!important}
/* v1.1b (Relay 03:16 + Designer): below 768px 'Pause bars' leaves the overlay (it covered Lesson 5) and sits in normal flow
   under the lesson list / player card, right-aligned, 16px gap above, 44px tap. 768px and up unchanged. */
@media (max-width:767px){
  #echo-player > .wrap{display:flex;flex-direction:column}
  #echo-player > .wrap > .ma-player{order:1;margin-bottom:16px!important}
  #echo-player > .wrap > .gbars{bottom:60px!important}   /* keep the bars behind the card, not under the button (44 + 16) */
  #echo-player > .wrap > .gbars-pause{order:2;position:static!important;inset:auto!important;align-self:flex-end;min-height:44px;min-width:44px;margin:0}
}
/* v1.1c (ii) 320: the player's controls row (min-content 262px) pushed the card 16px past the wrap; tighten padding + control gaps */
@media (max-width:340px){
  #echo-player > .wrap > .ma-player{padding-left:12px!important;padding-right:12px!important;max-width:100%;min-width:0}
  #echo-player .ma-ctl{gap:8px!important}
}
/* v1.1c (iii) LAYOUT_NOTE (b): 768px and up use the phone layout too - 'Pause bars' in flow under the lesson list,
   right-aligned to the list edge, 16px gap, 44px tap; nothing overlays Lesson 5. */
@media (min-width:768px){
  #echo-player > .wrap{display:flex;flex-direction:column}
  #echo-player > .wrap > .ma-player{order:1;margin-bottom:16px!important;align-self:center;width:100%;box-sizing:border-box}   /* keep the live full-width card (flex would shrink it) */
  #echo-player > .wrap > .gbars{bottom:60px!important}
  /* right edge = lesson list edge: centred card offset + card padding/border (27px) */
  #echo-player > .wrap > .gbars-pause{order:2;position:static!important;inset:auto!important;align-self:flex-end;min-height:44px;min-width:44px;margin:0 calc(max(0px,(100% - 1176px)/2) + 27px) 0 0}
}
/* v1.1c (i) 320 orphans: layout only (no-wrap, balance, title sizes); nbsp in markup for paragraph endings */
@media (max-width:340px){
  .ch-opt .ch-l{white-space:nowrap}
  #what-you-will-create .cs-ch p{text-wrap:balance}
  #what-you-will-create .cs-ch h3,#learning-formats .fmt-card h3,#educators-support .card h3{font-size:16px!important}
  #student-showcase .ms-title{white-space:nowrap;font-size:14px}
}
@media (max-width:340px){
  #what-you-will-create .cs-ch{padding-left:16px!important;padding-right:16px!important}
  #what-you-will-create .cs-ch p:not(.cs-k){font-size:16px!important}
  #educators-support .card{padding-left:14px!important;padding-right:14px!important}
  #educators-support .card h3{font-size:15px!important}
}
@media (max-width:340px){#class-times .pp-cal-nav{min-width:44px!important;flex:0 0 44px}}
/* MU-03a / GD (Relay 05:37): disabled and aria-disabled buttons show the default cursor (page body only; sticky bar is foundation) */
main [aria-disabled="true"],main button:disabled,main [disabled]{cursor:default!important}
html body main a.ri-go.av-booked[aria-disabled="true"],html body main a.ri-go.av-booked[data-pp-booked][aria-disabled="true"],html body main a.fmt-go.av-booked[data-pp-booked][aria-disabled="true"]{cursor:default!important}   /* beats progplan pp-course.css cursor:pointer!important */