/*
 * Shared course shell
 *
 * The curriculum runtime owns lesson data, stage content and interaction
 * states. This file owns the visual frame around it: navigation, hero,
 * course index and page layout. It is loaded after each level stylesheet so
 * A1–B2 share one calm, responsive visual language.
 */

:root {
  color-scheme: light dark;
  --course-bg: #f5f5f7;
  --course-surface: #ffffff;
  --course-surface-muted: #fbfbfd;
  --course-ink: #1d1d1f;
  --course-muted: #6e6e73;
  --course-subtle: #86868b;
  --course-blue: #0071e3;
  --course-blue-soft: #eaf3ff;
  --course-red: #ff3b30;
  --course-green: #248a3d;
  --course-line: rgba(29, 29, 31, .12);
  --course-line-strong: rgba(29, 29, 31, .2);
  --course-shadow-sm: 0 1px 2px rgba(29, 29, 31, .06), 0 4px 12px rgba(29, 29, 31, .05);
  --course-shadow-md: 0 12px 32px rgba(29, 29, 31, .10);
  --course-radius-sm: 10px;
  --course-radius-md: 16px;
  --course-radius-lg: 22px;
  --course-nav-height: 56px;
  --fcurr-nav-top: 56px;
  --course-ease: cubic-bezier(.22, 1, .36, 1);

  /* Aliases used by existing level shells and the runtime variables. */
  --bg: var(--course-bg);
  --bg-soft: var(--course-surface-muted);
  --card: var(--course-surface);
  --surface: var(--course-surface);
  --surface-2: var(--course-surface-muted);
  --ink: var(--course-ink);
  --text: var(--course-ink);
  --ink-2: var(--course-muted);
  --muted: var(--course-muted);
  --ink-3: var(--course-subtle);
  --line: var(--course-line);
  --line-soft: rgba(29, 29, 31, .08);
  --line-strong: var(--course-line-strong);
  --blue: var(--course-blue);
  --blue-soft: var(--course-blue-soft);
  --blue-ink: #0066cc;
  --red: var(--course-red);
  --red-soft: #fff0ef;
  --green: var(--course-green);
  --green-ok: var(--course-green);
  --green-soft: #edf8ef;
  --nav-bg: rgba(245, 245, 247, .82);
  --surface-strong: rgba(255, 255, 255, .92);
  --shadow-1: var(--course-shadow-sm);
  --shadow-2: var(--course-shadow-md);
  --shadow-sm: var(--course-shadow-sm);
  --shadow-md: var(--course-shadow-md);
  --shadow-s: var(--course-shadow-sm);
  --shadow-m: var(--course-shadow-md);
  --spring: var(--course-ease);
  --ease: var(--course-ease);
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--body);
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --display: var(--font-display);
  --font-serif: var(--font-display);
}

[data-theme="dark"] {
  --course-bg: #1d1d1f;
  --course-surface: #2c2c2e;
  --course-surface-muted: #242426;
  --course-ink: #f5f5f7;
  --course-muted: #aeaeb2;
  --course-subtle: #8e8e93;
  --course-blue: #2997ff;
  --course-blue-soft: rgba(41, 151, 255, .16);
  --course-red: #ff6961;
  --course-green: #30d158;
  --course-line: rgba(255, 255, 255, .14);
  --course-line-strong: rgba(255, 255, 255, .24);
  --course-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .22);
  --course-shadow-md: 0 16px 36px rgba(0, 0, 0, .34);
  --blue-ink: #64b5ff;
  --red-soft: rgba(255, 105, 97, .14);
  --green-soft: rgba(48, 209, 88, .14);
  --nav-bg: rgba(29, 29, 31, .82);
  --surface-strong: rgba(44, 44, 46, .94);
  --line-soft: rgba(255, 255, 255, .1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --course-bg: #1d1d1f;
    --course-surface: #2c2c2e;
    --course-surface-muted: #242426;
    --course-ink: #f5f5f7;
    --course-muted: #aeaeb2;
    --course-subtle: #8e8e93;
    --course-blue: #2997ff;
    --course-blue-soft: rgba(41, 151, 255, .16);
    --course-red: #ff6961;
    --course-green: #30d158;
    --course-line: rgba(255, 255, 255, .14);
    --course-line-strong: rgba(255, 255, 255, .24);
    --course-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .22);
    --course-shadow-md: 0 16px 36px rgba(0, 0, 0, .34);
    --blue-ink: #64b5ff;
    --red-soft: rgba(255, 105, 97, .14);
    --green-soft: rgba(48, 209, 88, .14);
    --nav-bg: rgba(29, 29, 31, .82);
    --surface-strong: rgba(44, 44, 46, .94);
    --line-soft: rgba(255, 255, 255, .1);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font: 100%/1.5 var(--body);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  color: var(--course-ink);
  background: var(--course-bg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--course-blue); text-decoration: none; }
a:hover { color: var(--course-blue); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--course-blue) 72%, transparent); outline-offset: 3px; }
::selection { color: #fff; background: var(--course-blue); }

/* Quiet the old decorative treatment so the learning path is the visual
   focus. Useful phrase cards and curriculum-generated content remain. */
.ambient,
.ticker,
.float-word,
.float-letter,
.tower-stage,
.hero-art,
.hero-visual { display: none !important; }

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--course-nav-height);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--course-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.nav-inner {
  width: min(1080px, calc(100% - 32px));
  min-height: var(--course-nav-height);
  height: var(--course-nav-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand,
.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--course-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.brand:hover,
.wordmark:hover { color: var(--course-ink); }
.brand-mark { width: 10px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--course-blue) 0 33%, #f2f2f7 33% 66%, var(--course-red) 66%); }
.brand-symbol { width: 28px; height: 28px; color: var(--course-blue); stroke: currentColor; fill: transparent; }
.brand .flag { width: 20px; height: 20px; border-radius: 5px; overflow: hidden; display: inline-flex; box-shadow: var(--course-shadow-sm); }
.brand .flag span { flex: 1; }
.brand .flag span:nth-child(1) { background: #0055a4; }
.brand .flag span:nth-child(2) { background: #f5f5f7; }
.brand .flag span:nth-child(3) { background: #ef4135; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-radius: 10px;
  color: var(--course-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--course-ink); background: color-mix(in srgb, var(--course-ink) 8%, transparent); }
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--course-blue); }
.nav-spacer { flex: 1; }

.nav-progress,
.progress-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--course-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-progress .bar,
.progress-track { width: 72px; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--course-ink) 14%, transparent); }
.nav-progress .bar i,
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--course-blue); transition: width .35s var(--course-ease); }

.theme-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--course-line);
  border-radius: 999px;
  color: var(--course-muted);
  background: transparent;
  cursor: pointer;
  transition: transform .18s var(--course-ease), background .18s ease, color .18s ease;
}
.theme-btn:hover { color: var(--course-ink); background: color-mix(in srgb, var(--course-ink) 8%, transparent); }
.theme-btn:active { transform: scale(.94); }

.wrap,
.wrap-narrow,
.shell { width: min(1080px, calc(100% - 32px)); max-width: 1080px; margin-inline: auto; }
.wrap-wide { width: min(1180px, calc(100% - 32px)); max-width: 1180px; margin-inline: auto; }
.wrap-narrow { max-width: 820px; }

/* Course overview hierarchy. */
.hero,
.hero2 {
  position: relative;
  padding: clamp(56px, 8vw, 92px) 0 clamp(48px, 7vw, 72px);
  overflow: hidden;
  background: var(--course-bg);
}
.hero-grid,
.hero-inner,
.hero2-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); align-items: center; gap: clamp(32px, 6vw, 72px); }
.hero-grid > div:first-child,
.hero-inner > div:first-child,
.hero2-inner > div:first-child { min-width: 0; }
.hero2-inner { max-width: 1080px; }
.hero2::before { display: none !important; }

.eyebrow,
.kicker,
.sec-index,
.section-index,
.sec-no { display: block; margin: 0 0 14px; color: var(--course-blue); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.hero h1,
.hero2 h1,
.lesson-hero h1,
.home-h2 { margin: 0; color: var(--course-ink); font-family: var(--font-display); font-weight: 750; letter-spacing: -.055em; line-height: 1.02; text-wrap: balance; }
.hero h1,
.hero2 h1 { max-width: 14ch; font-size: clamp(2.9rem, 7vw, 5.4rem); }
.hero h1.display { font-size: clamp(3rem, 7.4vw, 6rem); }
.hero h1 .bang,
.hero2 h1 em,
.hero2 h1 .accent { color: var(--course-blue); font-family: var(--font-display); font-style: normal; }
.hero-sub,
.hero .lede,
.lede,
.lede2,
.home-sub { max-width: 62ch; margin: 22px 0 0; color: var(--course-muted); font-size: clamp(1rem, 1.45vw, 1.15rem); line-height: 1.65; }
.hero-sub strong { color: var(--course-ink); }
.hero-cta,
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.btn,
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; color: var(--course-ink); background: var(--course-surface); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset; font-family: var(--body); font-size: 14px; font-weight: 650; cursor: pointer; transition: transform .18s var(--course-ease), background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn:hover,
.button:hover { color: var(--course-ink); border-color: var(--course-line-strong); box-shadow: var(--course-shadow-sm); transform: translateY(-1px); }
.btn:active,
.button:active { transform: scale(.97); transition-duration: .08s; }
.btn-primary,
.button-primary { color: #fff; background: var(--course-blue); box-shadow: 0 5px 14px color-mix(in srgb, var(--course-blue) 22%, transparent); }
.btn-primary:hover,
.button-primary:hover { color: #fff; background: color-mix(in srgb, var(--course-blue) 88%, #000); border-color: transparent; }

/* Keep the B2 course title focused on the course blue rather than a rainbow gradient. */
body[data-page="home"] h1 span { color: var(--course-blue); background: none; -webkit-text-fill-color: currentColor; }

/* A2 keeps its greeting in the shared system sans, including any legacy emphasis node. */
.hero .greeting,
.hero2 .greeting { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-style: normal; font-weight: 700; }
.hero .greeting em,
.hero2 .greeting em { font-family: inherit; font-style: inherit; }
.btn-ghost,
.button-secondary { border-color: var(--course-line-strong); background: transparent; }
.button-secondary:hover { color: var(--course-ink); background: color-mix(in srgb, var(--course-ink) 6%, transparent); }

.hero-meta,
.hero-strip,
.hero-stats,
.hero-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin: 36px 0 0; }
.hero-meta .m,
.hero-strip .hs,
.hero-stats .stat,
.hero-metrics div { display: grid; gap: 2px; }
.hero-meta b,
.hero-strip b,
.hero-stats b,
.hero-metrics dt { color: var(--course-ink); font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.hero-meta span,
.hero-strip span,
.hero-stats span,
.hero-metrics dd { margin: 0; color: var(--course-muted); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.hero-metrics { gap: 20px; }

.phrase-card,
.spotlight { width: 100%; max-width: 420px; margin-left: auto; padding: 24px; border: 1px solid var(--course-line); border-radius: var(--course-radius-lg); background: var(--course-surface); box-shadow: var(--course-shadow-sm); }
.phrase-card::before,
.spotlight::before { content: ""; display: block; width: 42px; height: 4px; margin-bottom: 20px; border-radius: 999px; background: var(--course-blue); }
.pc-label,
.sp-label { margin-bottom: 12px; color: var(--course-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pc-fr,
.sp-fr { margin: 0; color: var(--course-ink); font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 650; line-height: 1.25; }
.pc-en,
.sp-en,
.pc-hint { margin: 8px 0 0; color: var(--course-muted); font-size: 14px; }
.sp-foot { margin-top: 18px; }
.sp-link { color: var(--course-blue); font-size: 13px; font-weight: 650; }

main[data-curriculum-index] { min-width: 0; }
.section { padding: clamp(48px, 7vw, 88px) 0; scroll-margin-top: calc(var(--course-nav-height) + 16px); }
.section + .section { border-top: 1px solid var(--course-line); }
.section-tinted { background: var(--course-surface-muted); }
.sec-head,
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.sec-head > div,
.section-heading > div { min-width: 0; }
.sec-head h2,
.section-heading h2,
.home-h2 { max-width: 23ch; font-size: clamp(1.8rem, 4vw, 3rem); }
.sec-head > p,
.section-heading > p { max-width: 48ch; margin: 0; color: var(--course-muted); font-size: 14px; }

[data-curriculum-modules] { margin-top: 26px; }

.roadmap-wrap,
.roadmap-card { margin-top: 24px; padding: 20px; overflow: hidden; border: 1px solid var(--course-line); border-radius: var(--course-radius-md); background: var(--course-surface); box-shadow: none; }
.roadmap { display: block; width: 100%; min-height: 180px; }
.roadmap-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--course-muted); font-size: 12px; }
.roadmap-card p { margin: 0; color: var(--course-muted); font-size: 14px; }
.roadmap-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; margin-top: 16px; }
.roadmap-dots i { width: 100%; height: 7px; border-radius: 99px; background: var(--course-line); }
.roadmap-dots i:nth-child(5n + 1) { background: color-mix(in srgb, var(--course-blue) 45%, var(--course-line)); }

/* Lesson headers surround the runtime lesson surface. */
.lesson-hero { position: relative; padding: clamp(40px, 6vw, 68px) 0 32px; border-bottom: 1px solid var(--course-line); background: var(--course-bg); }
.lesson-hero .wrap,
.lesson-hero-grid { position: relative; }
.crumb,
.crumbs,
.lesson-hero .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; color: var(--course-muted); font-size: 12px; }
.crumb a,
.crumbs a,
.lesson-hero .crumbs a { color: var(--course-blue); font-weight: 650; }
.lesson-hero .eyebrow { margin-bottom: 12px; }
.lesson-hero h1 { max-width: 24ch; font-size: clamp(2.1rem, 5vw, 4rem); }
.lesson-hero .fr-title,
.lesson-hero .fr-sub,
.lesson-hero .sub { max-width: 66ch; margin: 12px 0 0; color: var(--course-muted); font-family: var(--font-display); font-size: 1.08rem; font-style: normal; line-height: 1.5; }
.lesson-meta,
.skill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.lesson-meta .tag,
.skill-chip { min-height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--course-line); border-radius: 999px; color: var(--course-muted); background: var(--course-surface); font-size: 12px; font-weight: 650; }
.lesson-meta .tag.blue { color: var(--course-blue); border-color: color-mix(in srgb, var(--course-blue) 30%, var(--course-line)); background: var(--course-blue-soft); }
.big-no { display: none !important; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tricolore { width: 54px; height: 4px; display: inline-flex; overflow: hidden; border-radius: 999px; }
.tricolore i { flex: 1; }
.tricolore i:nth-child(1) { background: #0055a4; }
.tricolore i:nth-child(2) { background: #f0f0f2; }
.tricolore i:nth-child(3) { background: #ef4135; }
.lesson-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .35fr); align-items: end; gap: 40px; }
.lesson-status { align-self: stretch; display: grid; gap: 7px; align-content: center; padding: 18px; border: 1px solid var(--course-line); border-radius: var(--course-radius-md); background: var(--course-surface); color: var(--course-muted); font-size: 12px; }
.lesson-status strong { color: var(--course-ink); font-size: 1.1rem; }

.pager,
.lesson-pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 34px 0 72px; }
.pager a,
.lesson-pager a { min-width: min(220px, 100%); flex: 1; display: grid; gap: 4px; padding: 16px; border: 1px solid var(--course-line); border-radius: var(--course-radius-sm); color: var(--course-ink); background: var(--course-surface); }
.pager a:hover,
.lesson-pager a:hover { border-color: color-mix(in srgb, var(--course-blue) 50%, var(--course-line)); box-shadow: var(--course-shadow-sm); }
.pager a.next,
.lesson-pager a:last-child { text-align: right; }
.pager span,
.lesson-pager span { color: var(--course-muted); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.pager b,
.lesson-pager strong { overflow: hidden; color: var(--course-ink); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

footer,
.footer { margin-top: 0; padding: 32px 0 48px; border-top: 1px solid var(--course-line); color: var(--course-muted); font-size: 12px; }
.footer .wrap,
footer .wrap,
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer strong { color: var(--course-ink) !important; }

.hero-brief { width: 100%; max-width: 360px; margin-left: auto; padding: 22px; border: 1px solid var(--course-line); border-radius: var(--course-radius-lg); background: var(--course-surface); box-shadow: var(--course-shadow-sm); }
.hero-brief-label { margin: 0 0 14px; color: var(--course-muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-brief ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hero-brief li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--course-line); color: var(--course-ink); font-size: 14px; font-weight: 650; }
.hero-brief li span { color: var(--course-blue); font-size: 11px; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .hero-grid,
  .hero-inner,
  .hero2-inner,
  .lesson-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .phrase-card,
  .spotlight,
  .hero-brief { max-width: none; margin-left: 0; }
  .sec-head,
  .section-heading { display: block; }
  .sec-head > p,
  .section-heading > p { margin-top: 14px; }
  .nav-links { display: none; }
  .lesson-status { max-width: 420px; }
}

@media (max-width: 620px) {
  :root { --course-nav-height: 56px; --fcurr-nav-top: 56px; }
  .nav-inner { width: calc(100% - 20px); gap: 7px; }
  .brand,
  .wordmark { font-size: 15px; }
  .nav-progress,
  .progress-compact { margin-left: auto; }
  .nav-progress .bar,
  .progress-track { width: 46px; }
  .theme-btn { margin-left: 0; }
  .wrap,
  .wrap-narrow,
  .wrap-wide,
  .shell { width: calc(100% - 28px); }
  .hero,
  .hero2 { padding-top: 48px; }
  .hero h1,
  .hero2 h1 { max-width: 11ch; font-size: clamp(2.65rem, 12vw, 4rem); }
  .hero h1.display { font-size: clamp(2.9rem, 13vw, 4.7rem); }
  .hero-sub,
  .hero .lede,
  .lede,
  .lede2,
  .home-sub { font-size: 1rem; }
  .hero-meta,
  .hero-strip,
  .hero-stats,
  .hero-metrics { gap: 18px; margin-top: 28px; }
  .pager,
  .lesson-pager { margin-bottom: 48px; }
  .pager a,
  .lesson-pager a { flex-basis: 100%; }
  .pager a.next,
  .lesson-pager a:last-child { text-align: left; }
  .roadmap { min-width: 520px; }
  .roadmap-wrap { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--course-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .nav,
  .phrase-card,
  .spotlight,
  .hero-brief { background: var(--course-surface); border-color: var(--course-line-strong); }
}