/*
 * Reusable components shared by every screen.
 * Screen-specific styles live in screens/<screen>.css.
 */

/* ---------- Typography ---------- */

.serif { font-family: var(--font-serif); font-weight: 400; }
.italic { font-style: italic; }

/* Arabic text. Always pair with dir="rtl" (or lang="ar") on the element. */
.ar { font-family: var(--font-arabic); font-weight: 400; font-style: normal; }
/* Arabic words linked to their dictionary entry: look like text until hovered. */
.ar-lookup { color: inherit; text-decoration: none; border-radius: 4px; }
.ar-lookup:hover, .ar-lookup:focus-visible { color: var(--clay); background: var(--clay-soft); text-decoration: none; }

.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1;
  margin: 0;
}
/* Room for Arabic vowel marks (Today's greeting, Daily word). */
.page-title--tall { line-height: 1.3; }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -1px;
  text-wrap: balance;
}

.display em, .page-title em { color: var(--green); }

/* Small uppercase label. Default is clay; --muted is the gray "section" label. */
.eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
}
.eyebrow--muted { color: var(--text-muted); letter-spacing: 1.5px; }
.eyebrow--sm { font-size: 12px; letter-spacing: 1px; }
.eyebrow--on-dark { color: var(--text-on-dark-muted); }

.lead { font-size: 19px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.muted { color: var(--text-muted); }
.body-text { color: var(--text-body); line-height: 1.55; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--green); color: var(--paper); }

.btn--clay { background: var(--clay); color: var(--text-on-accent); }
.btn--clay:hover { background: var(--clay-hover); color: var(--text-on-accent); }

.btn--green { background: var(--green); color: var(--paper); }
.btn--green:hover { background: var(--green-deep); color: var(--paper); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 500; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }

/* Quiet outline used for secondary actions on cards. */
.btn--soft { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
.btn--soft:hover { border-color: var(--ink); color: var(--ink); }

/* Quiet sand button, e.g. "▶ Audio" next to a word. */
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: var(--line); color: var(--ink); }

/* Light button on dark surfaces. */
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--peach); color: var(--ink); }

.btn--ghost-dark { background: none; color: var(--paper); border-color: var(--paper); font-weight: 500; }
.btn--ghost-dark:hover { background: var(--ink-raised); color: var(--paper); }

.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--xs { padding: 6px 12px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

/* Text-only button that looks like a nav link. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.link-button:hover { text-decoration: none; color: var(--clay); }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  min-width: 0;
}
.card--roomy { padding: 28px; }
.card--lg { border-radius: var(--radius-lg); padding: 32px; }
.card--stack { display: flex; flex-direction: column; gap: 14px; }
/* Whole card is a link or button. */
.card--action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: var(--start);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.card--action:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }

.card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--green { background: var(--green); color: var(--paper); border-color: var(--green); }
.card--clay { background: var(--clay); color: var(--text-on-accent); border-color: var(--clay); }
.card--dashed { background: transparent; border: 1.5px dashed var(--line-dashed); }
.card--dark.card--action:hover { color: var(--paper); }
.card--green.card--action:hover { background: var(--green-deep); color: var(--paper); }
.card--clay.card--action:hover { background: var(--clay-hover); border-color: var(--clay-hover); color: var(--text-on-accent); }
.card--peach { background: var(--peach); color: var(--ink); border-color: var(--peach); }
.card--peach.card--action:hover { background: #E2A57B; border-color: #E2A57B; color: var(--ink); }


.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

/* ---------- Chips, pills, badges ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 13px;
  background: var(--sand);
  color: var(--text-body);
  border: none;
  white-space: nowrap;
}
.chip--green { background: var(--green-soft); color: var(--green); font-weight: 600; }
.chip--clay { background: var(--clay-soft); color: var(--clay); font-weight: 600; }
.chip--ink { background: var(--ink); color: var(--peach); font-weight: 700; }
.chip--solid-clay { background: var(--clay); color: var(--text-on-accent); font-weight: 700; }
.chip--sm { padding: 4px 10px; font-size: 12px; font-weight: 600; }
.chip--plain { color: var(--ink); }

/* Toggle-able chip (filters, multi-select). aria-pressed="true" = selected. */
.toggle-chip {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.toggle-chip:hover { border-color: var(--ink); text-decoration: none; color: var(--ink); }
.toggle-chip[aria-pressed="true"], .toggle-chip[aria-current="page"], .toggle-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Level tag, e.g. "A1". */
.level-tag {
  background: var(--sand);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
}

/* Count badge, e.g. due flashcards. */
.badge {
  background: var(--clay);
  color: var(--text-on-accent);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  line-height: 1.4;
}

/* ---------- Segmented control ---------- */

.segmented {
  display: inline-flex;
  gap: 4px;
  background: var(--sand);
  border-radius: var(--radius-pill);
  padding: 4px;
  flex-wrap: wrap;
}
.segmented__option {
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.segmented__option:hover { text-decoration: none; color: var(--ink); background: var(--sand-hover); }
.segmented__option[aria-pressed="true"], .segmented__option[aria-current="page"], .segmented__option.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.field__hint { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.field__error { display: flex; gap: 6px; align-items: flex-start; color: var(--clay); font-size: 13px; font-weight: 600; line-height: 1.35; }
.field__error::before { content: "!"; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--clay); color: var(--text-on-accent); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.field--invalid .input { border-color: var(--clay); border-width: 1.5px; }

.input {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius-input);
  padding: 13px 14px;
  font-size: 16px;
  font-weight: 400;
  outline-color: var(--green);
}
.input--on-paper { background: var(--paper); }
.input--pill { border-radius: var(--radius-pill); padding: 10px 16px; font-size: 14px; }
.input[aria-invalid="true"], .field_with_errors .input { border-color: var(--clay); }
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }

.form-error {
  color: var(--clay);
  font-size: 14px;
  font-weight: 600;
}
.form-errors {
  background: var(--clay-soft);
  color: var(--clay-deep);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.form-errors ul { margin: 4px 0 0; padding-inline-start: 18px; }

/* Rails wraps invalid fields in this div; keep it from breaking layouts. */
.field_with_errors { display: contents; }

/* Toggle switch: <label class="switch"><input type="checkbox"><span></span></label> */
.switch { position: relative; display: inline-flex; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--line-strong); transition: background-color .15s ease; cursor: pointer;
}
.switch span::before {
  content: ""; position: absolute; width: 20px; height: 20px; inset-inline-start: 3px; top: 3px;
  border-radius: 50%; background: var(--card); transition: transform .15s ease;
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(18px); }
html[dir="rtl"] .switch input:checked + span::before { transform: translateX(-18px); } /* the knob moves toward the end side */
.switch input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Progress ---------- */

.progress {
  height: 6px;
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  min-width: 40px;
}
.progress__bar { height: 100%; background: var(--green); border-radius: inherit; }
.progress--thin { height: 4px; }

/* Daily goal options (Today's picker, Profile): radio-like buttons. */
.goal-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.goal-options--rows { grid-template-columns: 1fr; gap: 8px; }
.goal-option {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: #fff; color: var(--ink); text-align: var(--start);
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  font: inherit; cursor: pointer;
}
.goal-option:hover { border-color: var(--ink); }
.goal-option[aria-checked="true"] { border-color: var(--ink); background: var(--sand-hover); }
.goal-option__text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.goal-option__min { font-size: 24px; line-height: 1; }
.goal-option__label { font-size: 14px; color: var(--text-body); }
.goal-option__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-dashed); flex-shrink: 0; }
.goal-option[aria-checked="true"] .goal-option__radio { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--card); }
.goal-chip {
  background: #fff; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 10px 16px; min-height: 44px; font: inherit; font-size: 14px; cursor: pointer;
}
.goal-chip:hover { border-color: var(--ink); }

/* Circular goal ring. Set --pct (0–100) inline. */
.ring {
  --pct: 0;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--pct) * 1%), var(--line) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Right to left, the ring fills the other way round (counterclockwise from the top). */
html[dir="rtl"] .ring { background: conic-gradient(var(--line) calc(100% - var(--pct) * 1%), var(--green) 0); }
.ring__inner {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- Brand ---------- */

/* The mark: the khatam star with ع at its center. Green on light
   backgrounds, peach on dark ones. Size with --mark-size. */
.brand-mark {
  --mark-size: 42px;
  --mark-fill: var(--green);
  --mark-ring: var(--peach);
  --mark-ring-width: 2;
  --mark-letter: var(--paper);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
}
.brand-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-mark rect, .brand-mark polygon { fill: var(--mark-fill); }
.brand-mark circle { fill: none; stroke: var(--mark-ring); stroke-width: var(--mark-ring-width); }
.brand-mark__letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-arabic);
  font-size: calc(var(--mark-size) * .43);
  line-height: 1;
  color: var(--mark-letter);
  transform: translateY(-.06em);
}
.brand-mark--on-dark, .brand--on-dark .brand-mark { --mark-fill: var(--peach); --mark-ring: var(--ink); --mark-letter: var(--ink); }

/* The logo: mark + "ArabicGenius" + the Arabic name. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand__words { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.brand__name { font-family: var(--font-serif); font-size: 28px; line-height: 1; letter-spacing: -.3px; white-space: nowrap; }
.brand__name em { font-style: italic; color: var(--brand-accent); }
/* The name line under the wordmark (the pack's name_line), styled by the pack's theme. */
.brand__ar { font-family: var(--brand-line-font); font-weight: var(--brand-line-weight); letter-spacing: var(--brand-line-spacing); font-size: 15px; line-height: 1.35; color: var(--brand-line); white-space: nowrap; }
.brand--on-dark, .brand--on-dark:hover { color: var(--paper); }
.brand--on-dark .brand__name em { color: var(--brand-accent-on-dark); }
.brand--on-dark .brand__ar { color: var(--brand-line-on-dark); }

/* ---------- Flash messages ---------- */

.flash {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.flash--notice { background: var(--green-soft); color: var(--green); }
.flash--alert { background: var(--clay-soft); color: var(--clay-deep); }
.flash__close { background: none; border: none; color: inherit; font-size: 18px; line-height: 1; padding: 0 4px; }

/* ---------- Misc ---------- */

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 700; }
.check-list--on-dark li::before { color: var(--peach); }

.empty-state {
  border: 1.5px dashed var(--line-dashed);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
}

/* Save-to-review toggle (shared/_save_word_button). */
.save-word { background: transparent; color: var(--green); border-color: var(--green); }
.save-word:hover { background: var(--green-soft); color: var(--green); }
.save-word.is-saved { background: var(--green); color: var(--paper); }
.save-word.is-saved:hover { background: var(--green-deep); color: var(--paper); }

/* A ▶ button while it reads aloud (speech_controller.js, recitation_controller.js). */
[data-controller~="speech"].is-playing, .is-playing[data-action*="recitation#"] { box-shadow: inset 0 0 0 2px currentColor; }
/* A ▶ button while the audio is being prepared (speech_controller.js). */
[data-controller~="speech"].is-loading { cursor: progress; opacity: .85; }
.speech-spinner {
  display: inline-block; width: .9em; height: .9em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: speech-spin .8s linear infinite;
}
@keyframes speech-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .speech-spinner { animation-duration: 2.4s; } }

/* Scansion of a verse line (shared/_verse_scan): hidden until the page's
   "Meter" switch (scansion_controller.js) is on. */
.scan { display: none; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: -4px 0 14px; direction: rtl; }
.is-scansion .scan { display: flex; }
.scan__half { display: flex; flex-wrap: wrap; gap: 4px; }
.scan__foot { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px; border-radius: 8px;
  background: var(--sand); min-width: 3.5em; }
.scan__text { font-size: 15px; line-height: 1.4; color: var(--ink); white-space: nowrap; }
.scan__marks { display: inline-flex; align-items: flex-end; gap: 4px; height: 10px; direction: rtl; }
/* Long: a bar; short: a little cup (drawn, since few fonts have ⏑). */
.scan__mark { display: inline-block; vertical-align: middle; }
.scan__mark--long { width: 12px; height: 2px; background: var(--clay); margin-bottom: 3px; }
.scan__mark--short { width: 7px; height: 6px; border: 2px solid var(--clay); border-top: 0; border-radius: 0 0 6px 6px; }
.scan__name { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.meter-label { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; font-size: 17px; color: var(--clay); }
.meter-label__name { font-size: 13px; letter-spacing: .04em; color: var(--text-muted); direction: ltr; }

/* Where a library text comes from (shared/_book_source, library cards). */
.source-tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.source-tag--original { background: var(--green-soft); color: var(--green); }
.source-tag--adapted { background: var(--clay-soft); color: var(--clay-deep); }
.source-tag--learners { background: transparent; border-color: var(--line-strong); color: var(--ink-line); }
.source-tag--wikipedia { background: transparent; border-color: var(--ink); color: var(--ink); }
.book-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; font-size: 13px; color: var(--text-body); }
.book-source__license { color: var(--text-muted); }
.book-source__credit { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); white-space: pre-line; }

/* FluentPlex's mark (sites/fluentplex/_brand_mark): the same tile on light and dark. */
.brand-mark.brand-mark--fluentplex rect { fill: #4A3FD6; }
.brand-mark.brand-mark--fluentplex path { fill: #FFFFFF; }
.brand-mark.brand-mark--fluentplex circle { fill: #3FC2A8; stroke: none; }
/* Its wordmark: "Fluent" upright and "Plex" italic in Newsreader; Plex jade (bright on dark). */
.brand--fluentplex .brand__name { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -.02em; }
.brand--fluentplex .brand__name em { color: #0E7A68; }
.brand--fluentplex.brand--on-dark .brand__name em { color: #3FC2A8; }

/* Icons that point a way (IconHelper::DIRECTIONAL): mirrored right to left. */
html[dir="rtl"] .icon--directional { transform: scaleX(-1); }

/* The Teacher plan in one line on the pricing pages (pages/_teacher_line), under the schools card */
.teacher-line { max-width: 872px; margin: 0 auto; text-align: center; color: var(--text-muted); font-size: 15px; }
.teacher-line a { color: var(--text); font-weight: 600; }

/* The Teacher plan on the For teachers pages (pages/_teacher_plan) */
.teacher-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: 24px 28px; background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 20px; }
.teacher-plan__copy { display: flex; flex-direction: column; gap: 8px; }
.teacher-plan__kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--clay); }
:lang(ar) .teacher-plan__kicker { letter-spacing: 0; }
.teacher-plan__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.15; }
.teacher-plan__price { margin: 0; color: var(--text-muted); }
.teacher-plan__price strong { font-family: var(--font-serif); font-weight: 400; font-size: 32px; color: var(--ink); }
.teacher-plan__points { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; font-size: 15px; line-height: 1.45; }
.teacher-plan__points li { display: flex; gap: 8px; }
.teacher-plan__points span { color: var(--green); font-weight: 700; }
.teacher-plan__actions { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.teacher-plan__link { font-weight: 600; color: var(--clay); }
@media (max-width: 760px) {
  .teacher-plan { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .teacher-plan__points { grid-template-columns: minmax(0, 1fr); }
  .teacher-plan__actions { align-items: stretch; }
}

/* The site's confirmation box (shared/_confirm_dialog, lib/confirm_dialog.js): the drills' dialog look */
.confirm-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: var(--card); color: var(--ink);
                  box-shadow: 0 30px 60px -20px rgba(28, 35, 33, .6); }
.confirm-dialog::backdrop { background: rgba(28, 35, 33, .42); }
.confirm-dialog__body { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 24px 26px; }
.confirm-dialog__message { margin: 0; font-size: 17px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.confirm-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .confirm-dialog[open] { animation: confirm-dialog-in 140ms ease-out; }
  @keyframes confirm-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* A home page video (shared/_marketing_video): 16:9, or 4:5 on a phone; a play button over the poster for reduced motion */
.marketing-video { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); aspect-ratio: 16 / 9; }
.marketing-video__video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .marketing-video { aspect-ratio: 4 / 5; } }
.marketing-video__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border: 0; border-radius: 50%;
                         background: rgba(28, 35, 33, .78); color: #fff; font-size: 20px; cursor: pointer; }
.marketing-video__play:hover { background: var(--ink); }
.marketing-video--tall { aspect-ratio: 4 / 5; }
.marketing-video__badge { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--ink); color: var(--text-on-dark); font-size: 13px; font-weight: 600; line-height: 1.3; }
.marketing-video__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); flex: none; }

/* The School license on the pricing pages (pages/_school_plan): between Pro and the Teacher plan, the pilot beside it. */
.pricing-school {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 24px 36px; align-items: stretch;
  padding: 28px 30px; background: var(--green-soft); border: 1.5px solid var(--green); border-radius: var(--radius-card);
}
.pricing-school__copy { display: flex; flex-direction: column; gap: 10px; }
.pricing-school__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pricing-school__kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--green); }
:lang(ar) .pricing-school__kicker { letter-spacing: 0; }
.pricing-school__badge { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--green); color: var(--paper); font-size: 12px; font-weight: 700; }
.pricing-school__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; }
.pricing-school__lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-body); }
.pricing-school__price { margin: 2px 0 0; color: var(--text-muted); }
.pricing-school__price strong { font-family: var(--font-serif); font-weight: 400; font-size: 32px; color: var(--ink); }
.pricing-school__points { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; font-size: 15px; line-height: 1.45; }
.pricing-school__points li { display: flex; gap: 8px; }
.pricing-school__points span { color: var(--green); font-weight: 700; }
.pricing-school__pilot {
  display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center;
}
.pricing-school__pilot-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; }
.pricing-school__pilot-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.pricing-school__link { font-weight: 600; color: var(--clay); font-size: 14px; }
.pricing-school__family { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 760px) {
  .pricing-school { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .pricing-school__points { grid-template-columns: minmax(0, 1fr); }
  .pricing-school__title { font-size: 27px; }
}

/* Questions missed, asked again before a session ends (lib/reask.js; design: Claude Design "FluentPlex Mistakes",
   frame 4): the moment before they come back (done and the first try's score, "Let's go over the 3 you missed", what
   was chosen for each, Go over them or Later), and the note after each answer gone over. Shared by the lesson player,
   the drills, listening, the reader's quiz, dictation and the Mistakes review. */
.reask-moment { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; text-align: start; }
.reask-moment__done { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.reask-moment__tick { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
                      background: var(--green); color: var(--text-on-dark, #fff); font-size: 20px; font-weight: 800; }
.reask-moment__done-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reask-moment__done-text strong { font-size: 16px; }
.reask-moment__done-text span { font-size: 13px; color: var(--text-body); }
.reask-moment__card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 24px; background: var(--sand); color: var(--ink); }
.reask-moment__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; }
.reask-moment__sub { margin: 0; font-size: 15px; line-height: 1.5; }
.reask-moment__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reask-moment__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--card); }
.reask-moment__n { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sand); font-size: 13px; font-weight: 800; }
.reask-moment__what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reask-moment__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.6; }
.reask-moment__text.ar { font-family: var(--font-arabic); font-size: 20px; }
.reask-moment__chose { font-size: 13px; color: var(--text-body); }
.reask-moment__chosen.ar { font-family: var(--font-arabic); font-size: 17px; }
.reask-moment__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reask-moment__go { flex: 1; min-height: 54px; padding: 0 24px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.reask-moment__later { min-height: 48px; padding: 0 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.reask-moment__go:focus-visible, .reask-moment__later:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.reask-moment__note { margin: 0; font-size: 13px; color: var(--text-body); }
@media (max-width: 640px) {
  .reask-moment__card { padding: 18px; }
  .reask-moment__actions { flex-direction: column; align-items: stretch; }
}
.reask-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-body); }
.reask-note.is-right { color: var(--right); }

/* The mute button on a practice screen's bar (shared/_sound_toggle, practice_sound_controller.js), and the bar's
   right-hand end it sits in with the count (.session-tools). */
.session-tools { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sound-toggle { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong);
                border-radius: var(--radius-pill); background: none; color: var(--ink); cursor: pointer; }
.sound-toggle:hover { border-color: var(--ink); }
.sound-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sound-toggle .sound-toggle__x { display: none; }
.sound-toggle.is-off { color: var(--text-muted); }
.sound-toggle.is-off .sound-toggle__wave { display: none; }
.sound-toggle.is-off .sound-toggle__x { display: inline; }