/* HearingDB Basic Audiometry lesson pages — iteration 12 */

.page-learning-lesson .page-container {
  padding-top: clamp(18px, 2vw, 30px);
}

.page-learning-lesson .container-fluid {
  width: min(1840px, calc(100vw - (var(--content-gutter) * 2)));
}

.page-learning-lesson .learning-lesson-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: stretch;
  min-height: clamp(230px, 22vw, 320px);
  margin: 0 0 clamp(22px, 2.5vw, 34px);
  padding: clamp(26px, 3.1vw, 46px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0;
  color: #fff;
  background: linear-gradient(100deg, rgba(232,73,89,.98), rgba(200,213,232,.88) 50%, rgba(23,107,255,.98));
  box-shadow: none;
  isolation: isolate;
}

.page-learning-lesson .learning-lesson-hero > :not(.learning-hero__ring) {
  position: relative;
  z-index: 2;
}

.page-learning-lesson .learning-lesson-hero > .learning-hero__ring {
  position: absolute;
  z-index: 1;
}

.page-learning-lesson .learning-lesson-hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(9px, 1vw, 14px);
}

.page-learning-lesson .learning-lesson-hero h1 {
  max-width: 1050px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.55rem, 4.35vw, 5rem);
  font-weight: 790;
  letter-spacing: -.068em;
  line-height: .92;
  text-wrap: balance;
}

.page-learning-lesson .learning-lesson-hero__copy > p:not(.learning-kicker) {
  max-width: 790px;
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(.98rem, 1.15vw, 1.15rem);
  line-height: 1.58;
}

.page-learning-lesson .learning-lesson-hero__outline {
  display: grid;
  align-content: center;
  align-self: stretch;
  border-top: 1px solid rgba(255,255,255,.34);
  border-left: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.page-learning-lesson .learning-lesson-hero__outline > div {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  grid-template-areas: "label title" "label caption";
  gap: 4px 16px;
  min-height: 66px;
  padding: 12px 14px;
  border-right: 1px solid rgba(255,255,255,.34);
  border-bottom: 1px solid rgba(255,255,255,.34);
}

.page-learning-lesson .learning-lesson-hero__outline > div > span {
  grid-area: label;
  display: grid;
  place-items: center;
  align-self: stretch;
  margin: -12px 0 -12px -14px;
  padding: 8px;
  border-right: 1px solid rgba(255,255,255,.34);
  color: rgba(255,255,255,.74);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.page-learning-lesson .learning-lesson-hero__outline strong {
  grid-area: title;
  align-self: end;
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
}

.page-learning-lesson .learning-lesson-hero__outline small {
  grid-area: caption;
  color: rgba(255,255,255,.72);
  font-size: .75rem;
  line-height: 1.42;
}

.page-learning-lesson .learning-lesson-hero:hover .learning-hero__ring {
  border-color: rgba(255,255,255,.125);
  transform: translate(-3%,-4%) scale(1.035);
}

.page-learning-lesson .learning-lesson-note {
  max-width: none;
  margin: 0 0 18px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0;
  color: var(--muted);
  background: #fff;
  box-shadow: none;
  font-size: .84rem;
  line-height: 1.55;
}

/* Guided lesson workspace */
.page-learning-lesson .learn-lesson-layout,
.page-learning-lesson .learn-lesson-layout--split,
.page-learning-lesson .learn-lesson-layout--guided {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(470px, 1.08fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
  width: 100%;
  margin: 0;
}

.page-learning-lesson .lesson-content-column,
.page-learning-lesson .lesson-tool-column,
.page-learning-lesson .lesson-step-stage {
  min-width: 0;
}

.page-learning-lesson .lesson-step-stage .learn-step {
  display: none;
  width: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-strong);
  background: #fff;
  box-shadow: none;
}

.page-learning-lesson .lesson-step-stage .learn-step.is-current-step {
  display: block;
}

.page-learning-lesson .learn-step__header {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr) auto;
  gap: 18px;
  align-items: start;
  min-height: 112px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fbfcfd;
}

.page-learning-lesson .step-code {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 82px;
  margin: 0;
  padding: 16px 10px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  color: var(--primary-strong);
  background: rgba(23,107,255,.055);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.page-learning-lesson .learn-step__header > div {
  display: grid;
  gap: 7px;
  align-self: center;
  padding: 20px 0;
}

.page-learning-lesson .learn-step__header h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.45rem, 2vw, 2.25rem);
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.page-learning-lesson .learn-step__header p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.page-learning-lesson .copy-step-link {
  align-self: center;
  min-height: 38px;
  margin-right: 18px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-strong);
  background: #fff;
  box-shadow: none;
  font-size: .7rem;
  font-weight: 780;
}

.page-learning-lesson .copy-step-link:hover,
.page-learning-lesson .copy-step-link:focus-visible {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: rgba(23,107,255,.045);
}

.page-learning-lesson .learn-step__body {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.3vw, 34px);
}

.page-learning-lesson .learn-step__body p {
  color: var(--text);
  font-size: .92rem;
  line-height: 1.65;
}

.page-learning-lesson .explanation-pair {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(260px,.88fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.page-learning-lesson .explanation-card {
  min-width: 0;
  padding: clamp(18px, 2vw, 28px);
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.page-learning-lesson .explanation-card > span,
.page-learning-lesson .summary-example-card > span,
.page-learning-lesson .summary-builder-card > span {
  display: block;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.page-learning-lesson .explanation-card--technical {
  border-top: 3px solid var(--primary);
  background: #fff;
}

.page-learning-lesson .explanation-card--patient {
  border-top: 3px solid var(--accent-red);
  background: #fbfcfd;
}

.page-learning-lesson .explanation-card p:first-of-type { margin-top: 0; }
.page-learning-lesson .explanation-card p:last-child { margin-bottom: 0; }

.page-learning-lesson .bsa-reference-card,
.page-learning-lesson .guidance-reference-card,
.page-learning-lesson .lesson-recap-card,
.page-learning-lesson .summary-example-card,
.page-learning-lesson .lesson-complete-card,
.page-learning-lesson .summary-builder-card,
.page-learning-lesson .summary-builder-formula,
.page-learning-lesson .summary-audiogram-card,
.page-learning-lesson .severity-range-list {
  border-radius: 0;
  box-shadow: none;
}

.page-learning-lesson .bsa-reference-card,
.page-learning-lesson .guidance-reference-card {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  background: #fbfcfd;
}

.page-learning-lesson .bsa-reference-card h3,
.page-learning-lesson .guidance-reference-card h3 {
  margin: 0 0 10px;
  color: var(--text-strong);
  font-size: .9rem;
}

.page-learning-lesson .bsa-reference-card blockquote {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: var(--text);
  font-size: .86rem;
  line-height: 1.55;
}

.page-learning-lesson .bsa-reference-card__reference {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .72rem;
}

.page-learning-lesson .lesson-recap-card,
.page-learning-lesson .lesson-complete-card,
.page-learning-lesson .summary-example-card,
.page-learning-lesson .summary-builder-card {
  padding: 20px;
  border: 1px solid var(--border);
  background: #fbfcfd;
}

.page-learning-lesson .lesson-complete-card {
  border-left: 4px solid var(--success);
}

.page-learning-lesson .hero-pill {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-top: 10px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-strong);
  background: #fff;
  box-shadow: none;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
}

.page-learning-lesson .hero-pill:hover { border-color: var(--primary); color: var(--primary-strong); }

.page-learning-lesson .lesson-footer-nav,
.page-learning-lesson .lesson-footer-nav--stepper,
.page-learning-lesson .lesson-footer-nav--with-menu {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 52px;
  gap: 0;
  width: 100%;
  margin: 0;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.page-learning-lesson .lesson-footer-nav > button,
.page-learning-lesson .lesson-step-counter--button {
  min-height: 50px;
  border: 0;
  border-radius: 0;
  color: var(--text-strong);
  background: #fff;
  box-shadow: none;
}

.page-learning-lesson .lesson-footer-nav > button:first-child { border-right: 1px solid var(--border); }
.page-learning-lesson .lesson-footer-nav > button:last-child { border-left: 1px solid var(--border); }
.page-learning-lesson .lesson-footer-nav > button:hover:not(:disabled),
.page-learning-lesson .lesson-step-counter--button:hover { background: #f5f8fb; }
.page-learning-lesson .lesson-footer-nav > button:disabled { opacity: .35; }

.page-learning-lesson .lesson-step-menu { position: relative; min-width: 0; }
.page-learning-lesson .lesson-step-counter--button { width: 100%; font-size: .78rem; font-weight: 800; }
.page-learning-lesson .lesson-step-menu__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  max-height: min(430px, 65vh);
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 50px rgba(18,37,64,.14);
}

.page-learning-lesson .lesson-step-menu__panel a {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: #fff;
  font-size: .77rem;
  text-decoration: none;
}
.page-learning-lesson .lesson-step-menu__panel a:last-child { border-bottom: 0; }
.page-learning-lesson .lesson-step-menu__panel a:hover,
.page-learning-lesson .lesson-step-menu__panel a.is-active { color: var(--primary-strong); background: rgba(23,107,255,.055); }
.page-learning-lesson .lesson-step-menu__panel a span { font-weight: 850; }

/* Guided tool */
.page-learning-lesson .lesson-tool-column {
  position: sticky;
  top: calc(var(--header-height, 72px) + 18px);
}

.page-learning-lesson .lesson-tool-shell,
.page-learning-lesson .lesson-tool-shell--guided {
  height: auto;
  max-height: calc(100vh - 110px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.page-learning-lesson .lesson-tool-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 78px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfd;
}

.page-learning-lesson .lesson-tool-header .eyebrow { margin: 0 0 4px; color: var(--muted); }
.page-learning-lesson .lesson-tool-header h2 { margin: 0; color: var(--text-strong); font-size: 1.12rem; }
.page-learning-lesson .demo-mode-pill,
.page-learning-lesson .sim-pill-tag {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--primary-strong);
  background: rgba(23,107,255,.055);
  font-size: .65rem;
  font-weight: 820;
}

.page-learning-lesson .audiogram-workbench,
.page-learning-lesson .audiogram-panel,
.page-learning-lesson .summary-builder-panel,
.page-learning-lesson .summary-audiogram-panel {
  border-radius: 0;
  background: #fff;
}

.page-learning-lesson .audiogram-panel {
  height: auto;
  padding: clamp(22px, 2.4vw, 34px);
  overflow: visible;
}

.page-learning-lesson .audiogram-svg,
.page-learning-lesson .summary-audiogram-svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #fff;
}

.page-learning-lesson .guided-demo-footer { padding: 14px 18px; border-top: 1px solid var(--border); }
.page-learning-lesson .trainer-feedback { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }

.page-learning-lesson .summary-builder-panel,
.page-learning-lesson .summary-audiogram-panel { display: grid; gap: 14px; padding: 16px; }
.page-learning-lesson .summary-builder-formula { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border: 1px solid var(--border); background: #fff; }
.page-learning-lesson .summary-builder-formula span { padding: 7px 9px; border: 1px solid var(--border); background: #fbfcfd; font-size: .72rem; font-weight: 760; }
.page-learning-lesson .summary-builder-formula i { align-self: center; color: var(--muted); font-style: normal; }
.page-learning-lesson .summary-audiogram-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0 0; color: var(--muted); font-size: .72rem; }

/* Existing simulator, visually integrated without changing its logic */
.page-learning-lesson .audiometry-simulator {
  width: 100%;
  margin: 0;
  border-radius: 0;
}
.page-learning-lesson .audiometry-simulator :is(.simulator-shell,.sim-menu,.sim-panel,.sim-card,.sim-audiogram-card,.sim-report,.sim-guidance,.sim-event-log,.sim-bsa-card,.sim-disclaimer,.sim-modal,.sim-control-card,.sim-case-card) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.page-learning-lesson .audiometry-simulator button,
.page-learning-lesson .audiometry-simulator select,
.page-learning-lesson .audiometry-simulator input {
  border-radius: 0 !important;
}

/* Keep the lesson pages usable on smaller screens */
@media (max-width: 1180px) {
  .page-learning-lesson .learning-lesson-hero { grid-template-columns: 1fr; min-height: 0; }
  .page-learning-lesson .learning-lesson-hero__outline { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .page-learning-lesson .learning-lesson-hero__outline .learning-hero__route-label { grid-column: 1 / -1; }
  .page-learning-lesson .learning-lesson-hero__outline > div { grid-template-columns: 1fr; grid-template-areas: "label" "title" "caption"; }
  .page-learning-lesson .learning-lesson-hero__outline > div > span { place-items: start; margin: 0; padding: 0; border: 0; }
  .page-learning-lesson .learn-lesson-layout,
  .page-learning-lesson .learn-lesson-layout--split,
  .page-learning-lesson .learn-lesson-layout--guided { grid-template-columns: 1fr; }
  .page-learning-lesson .lesson-tool-column { position: static; }
  .page-learning-lesson .lesson-tool-shell,
  .page-learning-lesson .lesson-tool-shell--guided { max-height: none; overflow: visible; }
}

@media (max-width: 760px) {
  .page-learning-lesson .container-fluid { width: calc(100vw - 24px); }
  .page-learning-lesson .learning-lesson-hero { padding: 24px 20px; gap: 24px; }
  .page-learning-lesson .learning-lesson-hero h1 { font-size: clamp(2.45rem, 13vw, 4.3rem); }
  .page-learning-lesson .learning-lesson-hero__outline { grid-template-columns: 1fr; }
  .page-learning-lesson .learning-actions { width: 100%; }
  .page-learning-lesson .learning-button { flex: 1 1 100%; }
  .page-learning-lesson .learn-step__header { grid-template-columns: 58px minmax(0,1fr); gap: 12px; }
  .page-learning-lesson .step-code { min-width: 58px; padding: 12px 6px; }
  .page-learning-lesson .learn-step__header > div { padding: 16px 12px 16px 0; }
  .page-learning-lesson .copy-step-link { grid-column: 1 / -1; width: calc(100% - 24px); margin: 0 12px 12px; }
  .page-learning-lesson .explanation-pair { grid-template-columns: 1fr; }
  .page-learning-lesson .learn-step__body { padding: 16px; }
  .page-learning-lesson .lesson-footer-nav { grid-template-columns: 48px minmax(0,1fr) 48px; }
  .page-learning-lesson .lesson-step-menu__panel {
    position: fixed;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    left: 12px;
    max-height: 55vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-learning-lesson .learning-lesson-hero:hover .learning-hero__ring { transform: none; }
}

/* Canonical audiogram presentation: 20 dB HL vertically per octave horizontally. */
.page-learning-lesson .summary-audiogram-bg,
.page-learning-lesson .summary-audiogram-border {
  fill: #fbfdff;
  stroke: rgba(18,37,64,.25);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.page-learning-lesson .summary-audiogram-border { fill: none; stroke-width: 1.8; }
.page-learning-lesson .summary-audiogram-gridline {
  stroke: rgba(18,37,64,.13);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}
.page-learning-lesson .summary-audiogram-gridline.is-major,
.page-learning-lesson .summary-audiogram-gridline.is-octave {
  stroke: rgba(18,37,64,.22);
  stroke-width: 1.15;
}
.page-learning-lesson .summary-audiogram-gridline.is-intermediate {
  stroke: rgba(18,37,64,.14);
  stroke-dasharray: 5 5;
}
.page-learning-lesson .summary-audiogram-labels text,
.page-learning-lesson .summary-audiogram-axis-label {
  fill: #637083;
  font-family: Inter, sans-serif;
  font-size: 11px;
}
.page-learning-lesson .summary-audiogram-labels--db text { text-anchor: end; }
.page-learning-lesson .summary-audiogram-labels--hz text { text-anchor: middle; }
.page-learning-lesson .summary-audiogram-labels--hz text.is-major { fill: #263548; font-size: 11.5px; font-weight: 750; }
.page-learning-lesson .summary-audiogram-labels--hz text.is-minor { fill: #8a95a4; font-size: 9px; }
.page-learning-lesson .summary-audiogram-axis-label { fill: #334155; font-size: 11px; font-weight: 750; }

/* Iteration 11: allow lesson content and guidance references to define their full height. */
@media (min-width: 901px) {
  .page-learning-lesson .learn-lesson-layout--guided .lesson-content-column {
    display: grid;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
  }

  .page-learning-lesson .learn-lesson-layout--guided .lesson-step-stage {
    height: auto;
    min-height: 0;
  }

  .page-learning-lesson .learn-lesson-layout--guided .lesson-step-stage .learn-step.is-current-step {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .page-learning-lesson .learn-lesson-layout--guided .lesson-step-stage .learn-step__body {
    min-height: 0;
    overflow: visible;
    padding-right: clamp(20px, 2.3vw, 34px);
  }

  .page-learning-lesson .learn-lesson-layout--guided .lesson-footer-nav--with-menu {
    align-self: auto;
  }

  .page-learning-lesson .learn-lesson-layout--guided .lesson-tool-column .lesson-tool-shell,
  .page-learning-lesson .lesson-tool-shell--guided {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .page-learning-lesson .lesson-tool-shell--guided .audiogram-workbench--guided {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    gap: 0;
  }

  .page-learning-lesson .lesson-tool-shell--guided .audiogram-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .page-learning-lesson .lesson-tool-shell--guided .audiogram-svg {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

.page-learning-lesson .guidance-reference-card {
  min-height: max-content;
  overflow: visible;
}

@media (max-width: 760px) {
  .page-learning-lesson .learning-lesson-hero {
    min-height: 0;
    padding: 22px 18px;
    gap: 18px;
  }

  .page-learning-lesson .learning-lesson-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.7rem);
  }

  .page-learning-lesson .audiogram-panel {
    padding: 18px 12px 22px;
  }
}


/* Iteration 12: compact lesson identity, organic content height and detached step controls. */
.page-learning-lesson .learning-lesson-hero--simple {
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(185px, 17vw, 255px);
  padding: clamp(24px, 2.8vw, 40px);
}

.page-learning-lesson .learning-lesson-hero--simple .learning-lesson-hero__copy {
  align-content: center;
  max-width: 1180px;
  gap: 9px;
}

.page-learning-lesson .learning-lesson-hero--simple h1 {
  max-width: 1100px;
  font-size: clamp(2.55rem, 4.4vw, 4.8rem);
  line-height: .92;
}

.page-learning-lesson .learning-lesson-hero--simple .learning-hero__ring {
  right: -2%;
  bottom: -210%;
  width: min(46vw, 600px);
}

.page-learning-lesson .learn-lesson-layout--guided {
  align-items: start !important;
}

.page-learning-lesson .learn-lesson-layout--guided .lesson-content-column {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  align-self: start !important;
  gap: clamp(18px, 2vw, 28px) !important;
  height: auto !important;
  min-height: 0 !important;
}

.page-learning-lesson .learn-lesson-layout--guided .lesson-step-stage {
  height: auto !important;
  min-height: 0 !important;
}

.page-learning-lesson .learn-lesson-layout--guided .lesson-step-stage .learn-step.is-current-step {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.page-learning-lesson .learn-lesson-layout--guided .lesson-step-stage .learn-step__body {
  flex: none !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: clamp(20px, 2.3vw, 34px) !important;
}

.page-learning-lesson .learn-lesson-layout--guided .lesson-footer-nav--with-menu {
  align-self: auto !important;
  justify-self: center !important;
  width: min(100%, 520px) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-top: 1px solid var(--border) !important;
}

@media (max-width: 900px) {
  .page-learning-lesson .learn-lesson-layout--guided .lesson-content-column {
    display: contents !important;
  }

  .page-learning-lesson .learn-lesson-layout--guided .lesson-footer-nav--with-menu {
    width: min(100%, 520px) !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 760px) {
  .page-learning-lesson .learning-lesson-hero--simple {
    min-height: 0;
    padding: 22px 18px;
  }

  .page-learning-lesson .learning-lesson-hero--simple h1 {
    font-size: clamp(2.25rem, 11vw, 3.7rem);
  }
}

/* Iteration 13: fixed lesson controls and a more compact guided workspace. */
.page-learning-stepped-lesson .page-container {
  padding-bottom: 92px;
}

.page-learning-lesson .learning-lesson-hero--simple {
  min-height: clamp(150px, 13vw, 195px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  padding: clamp(20px, 2.25vw, 32px);
}

.page-learning-lesson .learning-lesson-hero--simple .learning-lesson-hero__copy {
  gap: 7px;
}

.page-learning-lesson .learning-lesson-hero--simple h1 {
  font-size: clamp(2.2rem, 3.7vw, 4rem);
  line-height: .94;
}

.page-learning-lesson .learning-lesson-hero--simple .learning-lesson-hero__copy > p:not(.learning-kicker) {
  max-width: 760px;
  font-size: clamp(.9rem, 1vw, 1.02rem);
  line-height: 1.48;
}

.page-learning-lesson .learning-lesson-hero--simple .learning-actions {
  margin-top: 3px;
}

.page-learning-lesson .learn-step__header {
  min-height: 92px;
}

.page-learning-lesson .learn-step__header > div {
  gap: 5px;
  padding: 15px 0;
}

.page-learning-lesson .learn-step__header h2 {
  font-size: clamp(1.32rem, 1.75vw, 1.9rem);
}

.page-learning-lesson .learn-step__body {
  gap: 14px;
  padding: clamp(16px, 1.65vw, 24px);
}

.page-learning-lesson .learn-step__body p {
  font-size: .86rem;
  line-height: 1.55;
}

.page-learning-lesson .explanation-card {
  padding: clamp(15px, 1.45vw, 21px);
}

.page-learning-lesson .bsa-reference-card,
.page-learning-lesson .guidance-reference-card {
  padding: 15px 17px;
}

/* Keep the step controls in one predictable place regardless of step height. */
.page-learning-stepped-lesson .learn-lesson-layout--guided .lesson-footer-nav--with-menu {
  position: fixed !important;
  right: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  z-index: 90 !important;
  width: min(520px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border: 1px solid var(--border-strong) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 12px 34px rgba(18,37,64,.16) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 1181px) {
  .page-learning-lesson .learn-lesson-layout--guided {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
    gap: clamp(20px, 2vw, 30px);
  }

  .page-learning-lesson .lesson-tool-column {
    width: 100%;
    max-width: 480px;
    justify-self: end;
  }

  .page-learning-lesson .lesson-tool-header {
    min-height: 64px;
    padding: 11px 14px;
  }

  .page-learning-lesson .lesson-tool-header h2 {
    font-size: 1rem;
  }

  .page-learning-lesson .audiogram-panel {
    padding: 13px;
  }

  .page-learning-lesson .lesson-tool-shell--guided .audiogram-svg,
  .page-learning-lesson .lesson-tool-shell--summary .summary-audiogram-svg {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
  }

  .page-learning-lesson .guided-demo-footer {
    padding: 10px 14px;
  }

  .page-learning-lesson .summary-builder-panel,
  .page-learning-lesson .summary-audiogram-panel {
    gap: 11px;
    padding: 13px;
  }

  .page-learning-lesson .summary-builder-card,
  .page-learning-lesson .summary-example-card,
  .page-learning-lesson .lesson-recap-card,
  .page-learning-lesson .lesson-complete-card {
    padding: 16px;
  }
}

@media (max-width: 900px) {
  .page-learning-stepped-lesson .page-container {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .page-learning-stepped-lesson .learn-lesson-layout--guided .lesson-footer-nav--with-menu {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 24px) !important;
  }
}

@media print {
  .page-learning-stepped-lesson .page-container { padding-bottom: 0; }
  .page-learning-stepped-lesson .learn-lesson-layout--guided .lesson-footer-nav--with-menu {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Short desktop screens: keep one complete guided example visible without changing chart geometry. */
@media (min-width: 1181px) and (max-height: 850px) {
  .page-learning-lesson .learning-lesson-hero--simple {
    min-height: 135px;
    margin-bottom: 14px;
    padding: 16px 24px;
  }

  .page-learning-lesson .learning-lesson-hero--simple h1 {
    font-size: clamp(2rem, 3vw, 3.25rem);
  }

  .page-learning-lesson .learning-lesson-hero--simple .learning-actions {
    margin-top: 0;
  }

  .page-learning-lesson .learn-lesson-layout--guided {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
    gap: 20px;
  }

  .page-learning-lesson .lesson-tool-column {
    max-width: 410px;
  }

  .page-learning-lesson .lesson-tool-shell--guided .audiogram-svg,
  .page-learning-lesson .lesson-tool-shell--summary .summary-audiogram-svg {
    max-width: 360px;
  }

  .page-learning-lesson .learn-step__header {
    min-height: 82px;
  }

  .page-learning-lesson .learn-step__header > div {
    padding-block: 12px;
  }

  .page-learning-lesson .learn-step__body {
    gap: 12px;
    padding: 14px 18px;
  }

  .page-learning-lesson .explanation-card {
    padding: 14px 16px;
  }
}

/* Consistency pass: remove the last legacy rounded recap tiles. */
.page-learning-lesson .recap-check-list li {
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

@media (max-height: 780px) and (min-width: 1101px) {
  .page-learning-lesson .recap-check-list li {
    border-radius: 0;
  }
}