/* ==========================================================================
   Hkeeli — Reusable components
   Every visual pattern from the approved mock lives here exactly once.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nav + language switcher + mobile drawer
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  background: rgba(250, 245, 233, 0.9);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--hairline);
}

.logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-shrink: 0;
  /* Padding rather than min-height so the baseline alignment is untouched;
     brings the tap target up to ~45px. */
  padding-block: var(--space-1);
}

.logo-en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--sea-deep);
}

.logo-ar {
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--citrus);
  direction: rtl;
}

.nav-links {
  display: flex;
  gap: var(--space-6);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--sea-deep);
}

.nav-links a {
  position: relative;
  padding-block-end: var(--space-1);
}

.nav-links a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 0;
  height: 2px;
  background: var(--citrus);
  transition: width var(--t-base) var(--ease);
}

.nav-links a[aria-current='page']::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-cta {
  background: var(--sea-deep);
  color: var(--sand-light);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

/* Language switcher — segmented pill, works identically on touch */
.lang-switch {
  display: flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: var(--olive-wash);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}

.lang-switch button {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sea-deep);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lang-switch button[aria-pressed='true'] {
  background: var(--sea-deep);
  color: var(--sand-light);
}

.lang-switch button:last-child {
  font-family: var(--font-arabic);
  font-size: 1.05rem;
}

/* Hamburger — visible below the desktop breakpoint only */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-md);
  color: var(--sea-deep);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle span {
  position: relative;
}

.nav-toggle span::before {
  position: absolute;
  inset-block-start: -7px;
}

.nav-toggle span::after {
  position: absolute;
  inset-block-start: 7px;
}

.site-nav[data-open='true'] .nav-toggle span {
  background: transparent;
}

.site-nav[data-open='true'] .nav-toggle span::before {
  transform: translateY(7px) rotate(45deg);
}

.site-nav[data-open='true'] .nav-toggle span::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer panel: the mobile home for nav links. Nothing is dropped on mobile. */
.nav-drawer {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: var(--sand-light);
  border-block-end: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
  transform-origin: top;
}

.nav-drawer a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--sea-deep);
  border-block-end: 1px solid var(--hairline);
}

.nav-drawer a[aria-current='page'] {
  color: var(--citrus);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.98rem;
  text-align: center;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn-primary {
  background: var(--citrus);
  color: var(--sea-deep);
  box-shadow: var(--shadow-press);
}

.btn-secondary {
  padding: 13px 26px;
  border: 2px solid var(--sea-deep);
  color: var(--sea-deep);
}

.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--citrus-shadow);
}

.btn-secondary:active {
  background: var(--sea-deep);
  color: var(--sand-light);
}

.btn-small {
  padding: 10px 18px;
  font-size: 0.88rem;
  box-shadow: var(--shadow-press-sm);
}

.btn-primary[disabled],
.btn-secondary[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* Hover lifts are a pointer affordance — never fire them on touch. */
@media (hover: hover) {
  .nav-links a:hover::after {
    width: 100%;
  }
  .nav-cta:hover {
    background: var(--citrus);
    color: var(--sea-deep);
    transform: translateY(-2px);
  }
  .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--citrus-shadow);
  }
  .btn-secondary:hover {
    background: var(--sea-deep);
    color: var(--sand-light);
  }
  .lang-switch button:hover {
    background: var(--hairline);
  }
}

/* --------------------------------------------------------------------------
   Eyebrow + section heading
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin-block-end: var(--space-5);
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--citrus);
  flex-shrink: 0;
}

.eyebrow--light {
  color: var(--citrus);
}

.section-head {
  max-width: 640px;
  margin-inline: auto;
  margin-block-end: var(--space-7);
  text-align: center;
}

.section-head .eyebrow {
  justify-content: center;
}

.section-head h2 {
  font-size: var(--step-4);
}

.section-head p {
  color: var(--ink-muted);
  margin-block-start: var(--space-3);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Postcard (signature hero element)
   -------------------------------------------------------------------------- */
.postcard {
  position: relative;
  width: var(--postcard-w);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  border: 1px solid var(--hairline);
}

.postcard .stamp {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--sea);
  color: var(--sand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-arabic);
  font-size: 1.3rem;
  font-weight: 700;
  transform: rotate(6deg);
}

.postcard .word-ar {
  font-size: 2.2rem;
  color: var(--sea-deep);
  margin-block-end: 2px;
  min-height: 48px;
  line-height: 1.2;
}

/* Reserve room for the stamp.
   The stamp sits at the card's inline-end, but this line is always RTL
   regardless of the page language — so its own inline-end points the opposite
   way in an LTR page. Hence the explicit pair rather than one logical rule:
   in an LTR page the stamp is on the right, which is the Arabic line's START;
   in an RTL page it's on the left, which is the Arabic line's END. */
.postcard .word-ar {
  padding-inline-start: 56px;
}

[dir='rtl'] .postcard .word-ar {
  padding-inline-start: 0;
  padding-inline-end: 56px;
}

.postcard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: var(--space-2);
}

.postcard .word-translit {
  font-size: 0.95rem;
}

.postcard .word-en {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Inverted variant */
.postcard--dark {
  background: var(--sea-deep);
}

.postcard--dark .word-ar {
  color: var(--sand-light);
}

.postcard--dark .word-en {
  color: var(--on-dark-muted);
}

.postcard--dark .word-translit {
  color: var(--citrus);
}

.postcard--dark .stamp {
  background: var(--citrus);
  color: var(--sea-deep);
}

/* --------------------------------------------------------------------------
   Coastline divider (signature motif)
   -------------------------------------------------------------------------- */
.coastline {
  height: 70px;
  width: 100%;
  background: var(--sand-light);
}

.coastline svg {
  width: 100%;
  height: 100%;
}

.coastline--sand {
  background: var(--sand);
}

/* Mirror the wave so the composition flips with the layout, not against it. */
[dir='rtl'] .coastline svg {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Lesson card
   -------------------------------------------------------------------------- */
.lesson-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* The title link alone is a ~25px tap target. Stretch it over the whole card
   so the card is the target, while keeping the play button clickable above it. */
.lesson-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.lesson-card .lesson-phrase {
  position: relative;
  z-index: 2;
}

.lesson-level {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--olive-wash);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-block-end: var(--space-4);
}

.lesson-card h3 {
  font-size: 1.3rem;
  margin-block-end: var(--space-3);
}

.lesson-card > p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-block-end: var(--space-5);
}

.lesson-card .lesson-phrase {
  margin-block-start: auto;
}

@media (hover: hover) {
  .lesson-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
}

/* Phrase strip: Arabic + transliteration + play. Always trilingual. */
.lesson-phrase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.lesson-phrase .arabic {
  font-size: 1.4rem;
  color: var(--sea-deep);
}

.lesson-phrase .phrase-en {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-block-start: 2px;
}

/* Play button — citrus circle with a CSS triangle, from the mock */
.play {
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--citrus);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-press-sm);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.play::before {
  content: '';
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--sea-deep);
  margin-inline-start: 3px;
}

/* The glyph points at the reading direction; mirror it in RTL. */
[dir='rtl'] .play::before {
  transform: scaleX(-1);
}

.play:active {
  transform: translateY(3px);
  box-shadow: none;
}

.play[data-state='playing'] {
  animation: pulse 1s var(--ease) infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.07);
  }
}

@media (hover: hover) {
  .play:hover {
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   Game tile
   -------------------------------------------------------------------------- */
.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border: 1px solid var(--hairline);
  color: inherit;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.game-tile .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-block-end: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--sea-deep);
  color: var(--citrus);
}

.game-tile h3 {
  font-size: 1rem;
}

.game-tile p {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.game-tile .tile-stat {
  margin-block-start: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--olive);
}

@media (hover: hover) {
  .game-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
}

/* --------------------------------------------------------------------------
   Booking band
   -------------------------------------------------------------------------- */
.book-band {
  background: var(--citrus);
  border-radius: var(--radius-xl);
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.book-band h2 {
  font-size: var(--step-3);
  max-width: 420px;
}

.book-band p {
  color: var(--citrus-ink);
  margin-block-start: var(--space-3);
  max-width: 420px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 640px;
  margin-inline: auto;
  margin-block-start: var(--space-7);
}

.field {
  display: grid;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  min-width: 0;
}

.field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sea-deep);
}

/* A <select> sizes itself to its longest option; without this the level
   dropdown widens the whole form past the viewport on phones. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--sand-light);
  font-size: var(--step-0);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--olive);
}

.form-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-block-start: var(--space-4);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-7) var(--gutter) var(--space-6);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  border-block-start: 1px solid var(--hairline);
}

.site-footer .logo {
  justify-content: center;
  margin-block-end: var(--space-3);
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-4);
  font-weight: 700;
  color: var(--sea-deep);
}

/* Bare text links are ~22px tall — too small to hit reliably on a phone. */
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-2);
}

/* --------------------------------------------------------------------------
   Toast (audio fallbacks, save confirmations)
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  background: var(--sea-deep);
  color: var(--on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lift);
  max-width: min(92vw, 460px);
  text-align: center;
  animation: toast-in var(--t-base) var(--ease);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* --------------------------------------------------------------------------
   Chips / tags
   -------------------------------------------------------------------------- */
.chip-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-start: var(--space-5);
}

.chip {
  background: var(--olive-wash);
  border: 1px solid var(--hairline);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--sea-deep);
}

.chip--on-dark {
  background: var(--wash-on-dark);
  border-color: var(--hairline-on-dark);
  color: var(--sand-light);
}

/* --------------------------------------------------------------------------
   Progress meter (units, the course, the onboarding flow)
   Shares .progress-track / .progress-fill with the game shell so that a bar
   means the same thing everywhere on the site.
   -------------------------------------------------------------------------- */
.progress-meter {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.progress-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Phrase notes — literal meaning, usage, register
   -------------------------------------------------------------------------- */
.phrase-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-2);
}

.phrase-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.usage-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--olive-wash);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.lesson-phrase-main {
  min-width: 0;
}

.lesson-phrase-audio {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.slow-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--olive);
  padding: var(--space-1) var(--space-2);
}

/* --------------------------------------------------------------------------
   Hero addition
   -------------------------------------------------------------------------- */
/* Deliberately quiet. The hero already asks for two decisions; this is the
   third door, and it has to read as a footnote rather than compete with the
   buttons above it. */
.hero-aside {
  margin-block-start: var(--space-4);
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* Inline-flex with a tap-sized box: a bare text link is ~24px tall, which is
   too small to hit reliably on a phone. */
.hero-aside a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: inherit;
  border-block-end: 1px solid var(--citrus);
}

@media (hover: hover) {
  .hero-aside a:hover {
    color: var(--sea);
  }
}

/* --------------------------------------------------------------------------
   Mini-lesson (home page)
   -------------------------------------------------------------------------- */
.mini-lesson {
  max-width: 620px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-block-end: 1px solid var(--hairline);
  padding-block-end: var(--space-3);
}

.mini-head h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive);
}

.mini-step {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.mini-board {
  display: grid;
  gap: var(--space-4);
}

.mini-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.mini-prompt .play {
  width: 56px;
  height: 56px;
}

.mini-hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.mini-translit {
  font-size: 1.15rem;
  margin-block-start: 2px;
}

.mini-slow {
  margin-block-start: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--olive);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.mini-question {
  font-weight: 700;
  color: var(--sea-deep);
}

.mini-options {
  display: grid;
  gap: var(--space-3);
}

.mini-option {
  min-height: var(--tap);
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--sand-light);
  font-size: 0.95rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.mini-option[data-state='correct'] {
  border-color: var(--ok);
  background: var(--ok-bg);
}

.mini-option[data-state='wrong'] {
  border-color: var(--bad);
  background: var(--bad-bg);
}

.mini-option[disabled] {
  opacity: 0.75;
  cursor: default;
}

@media (hover: hover) {
  .mini-option:not([disabled]):hover {
    border-color: var(--olive);
    background: var(--olive-wash);
  }
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.mini-restart {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--olive);
  text-decoration: underline;
  padding: var(--space-2);
}

.mini-feedback {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-inline-start: 4px solid var(--olive);
  background: var(--olive-wash);
}

.mini-feedback[data-tone='ok'] {
  border-inline-start-color: var(--ok);
  background: var(--ok-bg);
}

.mini-feedback[data-tone='bad'] {
  border-inline-start-color: var(--bad);
  background: var(--bad-bg);
}

.mini-notes {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  margin-block-start: var(--space-1);
}

.mini-notes .arabic {
  font-size: 1.5rem;
  color: var(--sea-deep);
}

.mini-note-en {
  font-weight: 700;
}

.mini-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.mini-summary {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.mini-score {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sea-deep);
}

/* --------------------------------------------------------------------------
   Goal picker
   -------------------------------------------------------------------------- */
.goal-card {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  text-align: start;
  min-height: var(--tap);
  padding: var(--space-5);
  background: var(--card);
  border: 2px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}

.goal-card[aria-pressed='true'] {
  border-color: var(--citrus);
  background: var(--sand);
}

.goal-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sea-deep);
}

.goal-blurb {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (hover: hover) {
  .goal-card:hover {
    border-color: var(--olive);
    transform: translateY(-3px);
  }
}

.goal-recommendation {
  max-width: 620px;
  margin-inline: auto;
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  background: var(--sea-deep);
  color: var(--sand-light);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.goal-recommendation h3 {
  color: var(--sand-light);
  font-size: 1.25rem;
}

.goal-recommendation p {
  color: var(--on-dark-muted);
}

.goal-reco-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--citrus);
}

.goal-reco-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.goal-reco-actions .btn-secondary {
  border-color: var(--sand-light);
  color: var(--sand-light);
}

/* --------------------------------------------------------------------------
   Method — hear it / understand it / use it
   -------------------------------------------------------------------------- */
.method {
  background: var(--sand);
}

.method-index {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sea-deep);
  color: var(--citrus);
  font-family: var(--font-display);
  font-weight: 700;
  margin-block-end: var(--space-4);
}

.method-steps h3 {
  font-size: 1.2rem;
  margin-block-end: var(--space-2);
}

.method-steps p {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.method-note {
  max-width: 640px;
  margin-inline: auto;
  margin-block-start: var(--space-7);
  text-align: center;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Learning journey
   -------------------------------------------------------------------------- */
.journey-stage {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--hairline);
}

.journey-stage:first-child {
  border-block-start: none;
}

.journey-index {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sea-deep);
  color: var(--citrus);
  font-family: var(--font-display);
  font-weight: 700;
}

.journey-stage[data-state='planned'] .journey-index {
  background: var(--olive-wash);
  color: var(--olive);
}

.journey-body h3 {
  font-size: 1.2rem;
}

.journey-outcome {
  color: var(--ink-muted);
  margin-block-start: var(--space-1);
}

.journey-units {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.journey-units li {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.journey-units a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--sea-deep);
  border-block-end: 2px solid transparent;
  justify-self: start;
}

.journey-unit-outcome {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The one closing row that stands for every unwritten stage. Quieter than a
   real stage — it is a note about the future, not a step you can take. */
.journey-stage--more .journey-body h3 {
  font-size: 1rem;
  color: var(--ink-soft);
}

.journey-stage--more .journey-outcome {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
}

@media (hover: hover) {
  .journey-units a:hover {
    border-block-end-color: var(--citrus);
  }
}

/* --------------------------------------------------------------------------
   Teacher value grid (sits on the dark About band)
   -------------------------------------------------------------------------- */
.teach-grid {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin-inline: auto;
  margin-block-start: var(--space-7);
}

.teach-grid article {
  background: var(--wash-on-dark);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.teach-grid h3 {
  color: var(--citrus);
  font-size: 1.05rem;
  margin-block-end: var(--space-2);
}

.teach-grid p {
  color: var(--on-dark-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Classes
   -------------------------------------------------------------------------- */
.class-facts {
  display: grid;
  max-width: 720px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.class-facts dt {
  padding: var(--space-4) var(--space-5) var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}

.class-facts dd {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--ink-muted);
  border-block-end: 1px solid var(--hairline);
}

.class-facts dd:last-of-type {
  border-block-end: none;
}

.class-fact--pending {
  color: var(--ink-soft);
  font-style: italic;
}

.class-note {
  max-width: 720px;
  margin-inline: auto;
  margin-block-start: var(--space-4);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Two columns once there is room. The rule then has to move onto the label as
   well, or it would cut across the middle of each row. */
@media (min-width: 700px) {
  /* Both cells must fill the row height, or their bottom rules land at
     different heights the moment a value wraps to more lines than its label —
     which is exactly what "What's included" does. Baseline alignment looks
     right until then. The labels stay level with the first line of the value
     anyway, because both cells carry the same padding. */
  .class-facts {
    grid-template-columns: minmax(150px, 0.4fr) 1fr;
    align-items: stretch;
  }

  .class-facts dt {
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--hairline);
  }

  .class-facts dd {
    padding: var(--space-4) var(--space-5);
  }

  .class-facts dt:last-of-type {
    border-block-end: none;
  }
}

/* --------------------------------------------------------------------------
   FAQ — native <details>, so it works with the keyboard for free
   -------------------------------------------------------------------------- */
.faq-section {
  background: var(--sand);
}

.faq {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--sea-deep);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--citrus);
}

.faq-item[open] summary::after {
  content: '\2013';
}

.faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Start Here onboarding
   -------------------------------------------------------------------------- */
.onboarding-card {
  max-width: 620px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-6);
}

.onboarding-card h2 {
  font-size: var(--step-2);
  margin-block-end: var(--space-5);
}

.onboarding-options {
  display: grid;
  gap: var(--space-3);
}

.onboarding-option {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  text-align: start;
  min-height: var(--tap);
  padding: var(--space-4);
  border: 2px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--sand-light);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.onboarding-option[aria-pressed='true'] {
  border-color: var(--citrus);
  background: var(--sand);
}

.onboarding-option-label {
  font-weight: 700;
  color: var(--sea-deep);
}

.onboarding-option-blurb {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (hover: hover) {
  .onboarding-option:hover {
    border-color: var(--olive);
    background: var(--olive-wash);
  }
}

.onboarding-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block-start: var(--space-5);
}

.onboarding-skip-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--olive);
  text-decoration: underline;
  min-height: var(--tap);
  padding-inline: var(--space-2);
}

.onboarding-reason {
  color: var(--ink-muted);
  margin-block-end: var(--space-2);
}

.onboarding-reco {
  margin-block: var(--space-5);
  padding: var(--space-5);
  background: var(--sea-deep);
  color: var(--sand-light);
  border-radius: var(--radius-lg);
}

.onboarding-reco h3 {
  color: var(--sand-light);
  font-size: 1.3rem;
  margin-block: var(--space-2);
}

.onboarding-reco p {
  color: var(--on-dark-muted);
}

.onboarding-reco-kind {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--citrus);
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.onboarding-saved {
  margin-block-start: var(--space-5);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.onboarding-skip {
  margin-block-start: var(--space-6);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--olive);
}

.onboarding-skip a {
  text-decoration: underline;
}

/* Headings take focus when a question changes; the outline is the cue that
   focus moved, so it must not be suppressed. */
.onboarding-card h2:focus-visible {
  outline: 3px solid var(--citrus);
  outline-offset: 6px;
}