/* finesse · register=product · approved Yuechang · song-led shared stage geometry
 * Measure the title row, its gap and the actual stage independently. */
#learning {
  --module-intro-height: 51px;
  --module-intro-gap: 18px;
  --module-stage-height: 367px;
  --module-footer-gap: 12px;
}
.module-showcase-panel:not([hidden]) { display: block; min-width: 0; }
.module-showcase-panel > .module-intro { min-width: 0; margin-bottom: 24px; }
.module-showcase-panel .module-demo-stage { min-width: 0; min-height: 0; }
.module-demo-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-width: 0; min-height: 44px;
  margin-top: var(--module-footer-gap);
  font-size: 12px; line-height: 1.8; color: var(--yc-muted);
}
.module-demo-footer p { margin: 0; }
.module-demo-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; color: var(--ink); white-space: nowrap; }
.module-mobile-note { display: none; }

/* Keep the accepted song unchanged. The other three borrow its measured slots. */
@media (min-width: 1024px) {
  #learning > .module-showcase-panel:not([hidden]) { height: auto; min-height: 0; }
  #learning > .module-showcase-panel > .module-intro {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--module-intro-height); min-height: 0;
    gap: 50px; margin: 0 0 var(--module-intro-gap);
  }
  #learning > .module-showcase-panel > .module-intro > div:first-child { min-width: 0; }
  #learning > .module-showcase-panel > .module-demo-stage {
    height: var(--module-stage-height); min-height: 0; margin-block: 0;
  }
  #learning > #module-pitch .yp-level {
    display: grid; grid-template-columns: auto auto; align-items: center;
    gap: 3px 10px;
  }
  #learning > #module-pitch .yp-level > span:first-child { grid-column: 1; grid-row: 1; }
  #learning > #module-pitch .yp-level > strong { grid-column: 2; grid-row: 1; font-size: 15px; }
  #learning > #module-pitch .yp-level > span:last-child { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 681px) and (max-width: 1023px) {
  .module-showcase-panel > .module-intro { display: block; }
  .module-showcase-panel > .module-intro .learning-responsibilities { display: flex; flex-wrap: wrap; padding: 16px 0 0; border: 0; }
  #learning > .module-showcase-panel > .module-demo-stage { min-height: 420px; }
}
@media (max-width: 600px) {
  .module-demo-footer { display: block; font-size: 11px; }
  .module-demo-footer a { margin-top: 8px; font-size: 12px; }
}
/* Phone previews use natural height; no repeated introduction or clipped controls. */
@media (max-width: 680px) {
  #learning > .learning-panel { margin-top: 16px; scroll-margin-top: 82px; }
  #learning > .learning-panel > .module-intro,
  #module-song > .module-loop,
  #module-song > .stage-bottom > p { display: none; }
  #learning > .module-showcase-panel:not([hidden]) { height: auto; min-height: 0; }
  #learning .module-demo-footer { min-height: 0; margin-top: 12px; font-size: 11px; line-height: 1.6; }
  #learning .module-desktop-note { display: none; }
  #learning .module-mobile-note { display: inline; }
}