/* Shared course header and the guided reading view. */
.course-home, .classroom { min-height: 100dvh; background: #fafbfe; }
.classroom { background: radial-gradient(circle at 50% -18%, #fff 0, #f8faff 42%, #f3f6fb 100%); }
.course-header { position: sticky; top: 0; z-index: 30; background: #ffffffd9; border-bottom: 1px solid #e9edf3cc; box-shadow: 0 1px 12px #17203a08; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
.header-inner { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 36px; align-items: center; width: min(1160px, calc(100% - 64px)); min-height: 106px; margin: 0 auto; }
.course-brand { display: block; width: fit-content; }
.course-brand img { display: block; width: 94px; height: 70px; object-fit: contain; }
.topic-tabs { display: flex; gap: clamp(18px, 2.8vw, 40px); align-items: center; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c6cddc transparent; }
.topic-link { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; min-height: 52px; padding: 12px 0; border-bottom: 2px solid transparent; font-size: .875rem; text-decoration: none; color: #525b70; }
.topic-link[aria-current] { border-color: var(--color-primary-dark); color: var(--color-primary-dark); font-weight: 700; }
.topic-link.is-pending { color: #7c8493; cursor: default; }
.topic-number { display: none; }
.course-material { position: relative; z-index: 10; font-size: .875rem; }
.course-material summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--color-text-muted); }
.course-material summary::-webkit-details-marker { display: none; }
.material-links { position: absolute; right: 0; top: 48px; width: 180px; padding: 6px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; box-shadow: 0 8px 25px #17203a12; }
.material-links a { display: block; padding: 10px 12px; color: var(--color-text-main); text-decoration: none; border-radius: 6px; }
.material-links a:hover { background: #f4f6fa; }

/* A single introductory scene, with restrained Datamecum accents. */
.course-home { background: radial-gradient(ellipse at 78% 54%, #e6f6fc 0%, transparent 45%), #fafbfe; }
.course-intro { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 16px; width: min(1160px, calc(100% - 64px)); min-height: calc(100dvh - 106px); margin: 0 auto; padding: 48px 0 72px; }
.intro-label { margin: 0 0 24px; color: #59667c; font-size: .94rem; font-weight: 500; }
.intro-copy h1 { margin: 0 0 26px; font-size: clamp(2.8rem, 4.5vw, 4.4rem); letter-spacing: -.055em; line-height: 1.06; text-wrap: initial; }
.intro-copy h1 span { color: #414bc2; }
.intro-description { max-width: 385px; color: #5a667b; font-size: 1.1rem; line-height: 1.65; margin-bottom: 30px; }
.intro-copy .primary-action { padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: 1rem; }
.intro-visual { display: block; width: 100%; height: auto; }

.lesson { width: min(1080px, calc(100% - 64px)); margin: 0 auto; }
.reading-content > section { padding: 60px 0 30px; scroll-margin-top: 124px; }
.course-ready { padding-bottom: 104px; }
.course-ready .reading-content > section { min-height: calc(100svh - 210px); animation: lesson-enter 280ms cubic-bezier(.22, 1, .36, 1); }
.course-ready .lesson-image img { max-height: min(52svh, 500px); margin-inline: auto; object-fit: contain; }
.reading-content > section[hidden] { display: none; }
.lesson-nav { display: none; }
.course-ready .lesson-nav { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1080px, calc(100% - 64px)); min-height: 64px; padding: 8px; border: 1px solid #dfe5efcc; border-radius: 22px; background: #fffffff0; box-shadow: 0 18px 45px #17203a1a, 0 2px 8px #17203a0d; transform: translateX(-50%); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.lesson-nav button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 15px; cursor: pointer; font-size: .88rem; font-weight: 600; transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.lesson-nav button span { display: inline-block; transition: transform 180ms ease; }
.previous-step { justify-self: start; background: transparent; color: #505a6d; }
.previous-step:not(:disabled):hover { background: #eef2f8; color: var(--color-hero-bg); }
.previous-step:not(:disabled):hover span { transform: translateX(-2px); }
.previous-step:disabled { visibility: hidden; }
.next-step { justify-self: end; color: #fff; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); box-shadow: 0 7px 16px #16169b2e; }
.next-step:hover { background: linear-gradient(135deg, #3844d0 0%, #08087f 100%); box-shadow: 0 9px 20px #16169b3d; }
.next-step:hover span { transform: translateX(2px); }
.lesson-nav button:active { transform: scale(.97); }
.step-counter { overflow: hidden; padding: 0 10px; color: #687285; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.lesson-nav [hidden] { display: none; }

@keyframes lesson-enter {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .header-inner { gap: 24px; grid-template-columns: 90px minmax(0, 1fr) auto; }
  .course-brand img { width: 82px; height: 62px; }
  .topic-tabs { gap: 22px; }
}
@media (max-width: 700px) {
  .header-inner { width: calc(100% - 40px); grid-template-columns: 1fr auto; gap: 0 16px; padding-top: 10px; }
  .course-brand img { width: 76px; height: 57px; }
  .topic-tabs { grid-row: 2; grid-column: 1 / -1; margin-top: 8px; }
  .course-material { grid-column: 2; grid-row: 1; }
  .topic-link { min-height: 48px; font-size: .83rem; }
  .course-intro { width: calc(100% - 48px); grid-template-columns: 1fr; gap: 0; min-height: auto; padding: 46px 0 30px; }
  .intro-label { margin-bottom: 20px; font-size: .85rem; }
  .intro-copy h1 { font-size: clamp(2.45rem, 9vw, 3.8rem); }
  .intro-description { font-size: 1rem; max-width: 350px; margin-bottom: 22px; }
  .intro-visual { width: 76%; max-width: 390px; margin: 10px auto 0; }
  .lesson { width: calc(100% - 40px); }
  .reading-content > section { padding-top: 40px; }
  .course-ready { padding-bottom: 90px; }
  .course-ready .reading-content > section { min-height: calc(100svh - 205px); }
  .course-ready .lesson-image img { max-height: min(46svh, 420px); }
  .course-ready .lesson-nav { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px); min-height: 62px; padding: 7px; border-radius: 20px; }
  .step-counter { font-size: .72rem; }
  .lesson-nav button { min-height: 46px; padding: 10px 12px; border-radius: 14px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .course-ready .reading-content > section { animation: none; }
}