/* application.css */
/*
 * The design system — shared tokens and base styles (each language pack adds its theme).
 *
 * Stylesheets are loaded in alphabetical path order:
 *   application.css → components.css → layouts.css → screens/*.css → utilities.css
 * so later files can build on (and override) earlier ones.
 */

:root {
  /* Colors, fonts and shadows come from the site's language pack
     (Language::Pack#theme, written into each page by the layout). */

  /* Shape */
  --radius-sm: 6px;
  --radius-input: 10px;
  --radius-md: 14px;
  --radius-card: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --gutter: clamp(20px, 5vw, 64px);

  /* The interface's two sides, for text-align (left to right here; html[dir="rtl"] below).
     Not text-align: var(--start), which children inherit as "start" and resolve against their own
     dir: text in the language taught (its own dir) would swing to the other side. */
  --start: left;
  --end: right;
}
html[dir="rtl"] { --start: right; --end: left; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-deep); text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

img, svg, canvas { max-width: 100%; }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

[hidden] { display: none !important; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(168, 72, 42, .45); }
  100% { box-shadow: 0 0 0 22px rgba(168, 72, 42, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* components.css */
/*
 * 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; }


/* fonts-chinese.css */
/* Noto Serif SC (SIL Open Font License 1.1), for Chinese text taught on FluentPlex: Google Fonts' own slices, served from
   our own assets like the other fonts (fonts.css). Each slice covers a range of characters, so a page downloads only the
   slices its characters need. Regular weight only. */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-000-ced27fa2.woff2") format('woff2');
  unicode-range: U+1f1e9-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f37e;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-001-4d2a8991.woff2") format('woff2');
  unicode-range: U+fee3, U+fef3, U+ff03-ff04, U+ff07, U+ff0a, U+ff17-ff19, U+ff1c-ff1d, U+ff20-ff3a, U+ff3c, U+ff3e-ff5b, U+ff5d, U+ff61-ff65, U+ff67-ff6a, U+ff6c, U+ff6f-ff78, U+ff7a-ff7d, U+ff80-ff84, U+ff86, U+ff89-ff8e, U+ff92, U+ff97-ff9b, U+ff9d-ff9f, U+ffe0-ffe4, U+ffe6, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1f004, U+1f170-1f171, U+1f192-1f195, U+1f198-1f19a, U+1f1e6-1f1e8;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-002-eaf9d927.woff2") format('woff2');
  unicode-range: U+f0a7, U+f0b2, U+f0b7, U+f0c9, U+f0d8, U+f0da, U+f0dc-f0dd, U+f0e0, U+f0e6, U+f0eb, U+f0fc, U+f101, U+f104-f105, U+f107, U+f10b, U+f11b, U+f14b, U+f18a, U+f193, U+f1d6-f1d7, U+f244, U+f27a, U+f296, U+f2ae, U+f471, U+f4b3, U+f610-f611, U+f880-f881, U+f8ec, U+f8f5, U+f8ff, U+f901, U+f90a, U+f92c-f92d, U+f934, U+f937, U+f941, U+f965, U+f967, U+f969, U+f96b, U+f96f, U+f974, U+f978-f979, U+f97e, U+f981, U+f98a, U+f98e, U+f997, U+f99c, U+f9b2, U+f9b5, U+f9ba, U+f9be, U+f9ca, U+f9d0-f9d1, U+f9dd, U+f9e0-f9e1, U+f9e4, U+f9f7, U+fa00-fa01, U+fa08, U+fa0a, U+fa11, U+fb01-fb02, U+fdfc, U+fe0e, U+fe30-fe31, U+fe33-fe44, U+fe49-fe52, U+fe54-fe57, U+fe59-fe66, U+fe68-fe6b, U+fe8e, U+fe92-fe93, U+feae, U+feb8, U+fecb-fecc, U+fee0;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-003-23ca5fa8.woff2") format('woff2');
  unicode-range: U+9f83, U+9f85-9f8d, U+9f90-9f91, U+9f94-9f96, U+9f98, U+9f9b-9f9c, U+9f9e, U+9fa0, U+9fa2, U+9ff0-9fff, U+a001, U+a007, U+a025, U+a046-a047, U+a057, U+a072, U+a078-a079, U+a083, U+a085, U+a100, U+a118, U+a132, U+a134, U+a1f4, U+a242, U+a4a6, U+a4aa, U+a4b0-a4b1, U+a4b3, U+a9c1-a9c2, U+ac00-ac01, U+ac04, U+ac08, U+ac10-ac11, U+ac13-ac16, U+ac19, U+ac1c-ac1d, U+ac24, U+ac70-ac71, U+ac74, U+ac77-ac78, U+ac80-ac81, U+ac83, U+ac8c, U+ac90, U+ac9f-aca0, U+aca8-aca9, U+acac, U+acb0, U+acbd, U+acc1, U+acc4, U+ace0-ace1, U+ace4, U+ace8, U+acf3, U+acf5, U+acfc-acfd, U+ad00, U+ad0c, U+ad11, U+ad1c, U+ad34, U+ad50, U+ad64, U+ad6c, U+ad70, U+ad74, U+ad7f, U+ad81, U+ad8c, U+adc0, U+adc8, U+addc, U+ade0, U+adf8-adf9, U+adfc, U+ae00, U+ae08-ae09, U+ae0b, U+ae30, U+ae34, U+ae38, U+ae40, U+ae4a, U+ae4c, U+ae54, U+ae68, U+aebc, U+aed8, U+af2c-af2d;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-004-5c9ea03d.woff2") format('woff2');
  unicode-range: U+9e30-9e33, U+9e35-9e3b, U+9e3e, U+9e40-9e44, U+9e46-9e4e, U+9e51, U+9e53, U+9e55-9e58, U+9e5a-9e5c, U+9e5e-9e63, U+9e66-9e6e, U+9e71, U+9e73, U+9e75, U+9e78-9e79, U+9e7c-9e7e, U+9e82, U+9e86-9e88, U+9e8b-9e8c, U+9e90-9e91, U+9e93, U+9e95, U+9e97, U+9e9d, U+9ea4-9ea5, U+9ea9-9eaa, U+9eb4-9eb5, U+9eb8-9eba, U+9ebc-9ebf, U+9ec3, U+9ec9, U+9ecd, U+9ed0, U+9ed2-9ed3, U+9ed5-9ed6, U+9ed9, U+9edc-9edd, U+9edf-9ee0, U+9ee2, U+9ee5, U+9ee7-9eea, U+9eef, U+9ef1, U+9ef3-9ef4, U+9ef6, U+9ef9, U+9efb-9efc, U+9efe, U+9f0b, U+9f0d, U+9f10, U+9f14, U+9f17, U+9f19, U+9f22, U+9f29, U+9f2c, U+9f2f, U+9f31, U+9f37, U+9f39, U+9f3d-9f3e, U+9f41, U+9f4a-9f4b, U+9f51-9f52, U+9f61-9f63, U+9f66-9f67, U+9f80-9f81;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-005-27dac5f0.woff2") format('woff2');
  unicode-range: U+9c82-9c83, U+9c85-9c8c, U+9c8e-9c92, U+9c94-9c9b, U+9c9e-9ca3, U+9ca5-9ca7, U+9ca9, U+9cab, U+9cad-9cae, U+9cb1-9cb7, U+9cb9-9cbd, U+9cbf-9cc0, U+9cc3, U+9cc5-9cc7, U+9cc9-9cd1, U+9cd3-9cda, U+9cdc-9cdd, U+9cdf, U+9ce1-9ce3, U+9ce5, U+9ce9, U+9cee-9cef, U+9cf3-9cf4, U+9cf6, U+9cfc-9cfd, U+9d02, U+9d08-9d09, U+9d12, U+9d1b, U+9d1e, U+9d26, U+9d28, U+9d37, U+9d3b, U+9d3f, U+9d51, U+9d59, U+9d5c-9d5d, U+9d5f-9d61, U+9d6c, U+9d70, U+9d72, U+9d7a, U+9d7e, U+9d84, U+9d89, U+9d8f, U+9d92, U+9daf, U+9db4, U+9db8, U+9dbc, U+9dc4, U+9dc7, U+9dc9, U+9dd7, U+9ddf, U+9df2, U+9df9-9dfa, U+9e0a, U+9e11, U+9e1a, U+9e1e, U+9e20, U+9e22, U+9e28-9e2c, U+9e2e-9e2f;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-006-3e34a0fa.woff2") format('woff2');
  unicode-range: U+9a80, U+9a83, U+9a85, U+9a88-9a8a, U+9a8d-9a8e, U+9a90, U+9a92-9a93, U+9a95-9a96, U+9a98-9a99, U+9a9b-9aa2, U+9aa5, U+9aa7, U+9aaf-9ab1, U+9ab5-9ab6, U+9ab9-9aba, U+9ac0-9ac4, U+9ac8, U+9acb-9acc, U+9ace-9acf, U+9ad1-9ad2, U+9ad9, U+9adf, U+9ae1, U+9ae3, U+9aea-9aeb, U+9aed-9aef, U+9af4, U+9af9, U+9afb, U+9b03-9b04, U+9b06, U+9b08, U+9b0d, U+9b0f-9b10, U+9b13, U+9b18, U+9b1a, U+9b1f, U+9b22-9b23, U+9b25, U+9b27-9b28, U+9b2a, U+9b2f, U+9b31-9b32, U+9b3b, U+9b43, U+9b46-9b49, U+9b4d-9b4e, U+9b51, U+9b56, U+9b58, U+9b5a, U+9b5c, U+9b5f, U+9b61-9b62, U+9b6f, U+9b77, U+9b80, U+9b88, U+9b8b, U+9b8e, U+9b91, U+9b9f-9ba0, U+9ba8, U+9baa-9bab, U+9bad-9bae, U+9bb0-9bb1, U+9bb8, U+9bc9-9bca, U+9bd3, U+9bd6, U+9bdb, U+9be8, U+9bf0-9bf1, U+9c02, U+9c10, U+9c15, U+9c24, U+9c2d, U+9c32, U+9c39, U+9c3b, U+9c40, U+9c47-9c49, U+9c53, U+9c57, U+9c64, U+9c72, U+9c77-9c78, U+9c7b, U+9c7f-9c80;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-007-6daf1135.woff2") format('woff2');
  unicode-range: U+98dd, U+98e1-98e2, U+98e7-98ea, U+98ec, U+98ee-98ef, U+98f2, U+98f4, U+98fc-98fe, U+9903, U+9905, U+9908, U+990a, U+990c-990d, U+9913-9914, U+9918, U+991a-991b, U+991e, U+9921, U+9928, U+992c, U+992e, U+9935, U+9938-9939, U+993d-993e, U+9945, U+994b-994c, U+9951-9952, U+9954-9955, U+9957, U+995e, U+9963, U+9966-9969, U+996b-996c, U+996f, U+9974-9975, U+9977-9979, U+997d-997e, U+9980-9981, U+9983-9984, U+9987, U+998a-998b, U+998d-9991, U+9993-9995, U+9997-9998, U+99a5, U+99ab, U+99ad-99ae, U+99b1, U+99b3-99b4, U+99bc, U+99bf, U+99c1, U+99c3-99c6, U+99cc, U+99d0, U+99d2, U+99d5, U+99db, U+99dd, U+99e1, U+99ed, U+99f1, U+99ff, U+9a01, U+9a03-9a04, U+9a0e-9a0f, U+9a11-9a13, U+9a19, U+9a1b, U+9a28, U+9a2b, U+9a30, U+9a32, U+9a37, U+9a40, U+9a45, U+9a4a, U+9a4d-9a4e, U+9a52, U+9a55, U+9a57, U+9a5a-9a5b, U+9a5f, U+9a62, U+9a65, U+9a69, U+9a6b, U+9a6e, U+9a75, U+9a77-9a7a, U+9a7d;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-008-265b6907.woff2") format('woff2');
  unicode-range: U+975b-975c, U+9763, U+9765-9766, U+976c-976d, U+9773, U+9776, U+977a, U+977c, U+9784-9785, U+978e-978f, U+9791-9792, U+9794-9795, U+9798, U+979a, U+979e, U+97a3, U+97a5-97a6, U+97a8, U+97ab-97ac, U+97ae-97af, U+97b2, U+97b4, U+97c6, U+97cb-97cc, U+97d3, U+97d8, U+97dc, U+97e1, U+97ea-97eb, U+97ee, U+97fb, U+97fe-97ff, U+9801-9803, U+9805-9806, U+9808, U+980c, U+9810-9814, U+9817-9818, U+981e, U+9820-9821, U+9824, U+9828, U+982b-982d, U+9830, U+9834, U+9838-9839, U+983c, U+9846, U+984d-984f, U+9851-9852, U+9854-9855, U+9857-9858, U+985a-985b, U+9862-9863, U+9865, U+9867, U+986b, U+986f-9871, U+9877-9878, U+987c, U+9880, U+9883, U+9885, U+9889, U+988b-988f, U+9893-9895, U+9899-989b, U+989e-989f, U+98a1-98a2, U+98a5-98a7, U+98a9, U+98af, U+98b1, U+98b6, U+98ba, U+98be, U+98c3-98c4, U+98c6-98c8, U+98cf-98d6, U+98da-98db;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-009-76ec65d7.woff2") format('woff2');
  unicode-range: U+95c4-95ca, U+95cc-95cd, U+95d4-95d6, U+95d8, U+95e1-95e2, U+95e9, U+95f0-95f1, U+95f3, U+95f6, U+95fc, U+95fe-95ff, U+9602-9604, U+9606-960d, U+960f, U+9611-9613, U+9615-9617, U+9619-961b, U+961d, U+9621, U+9628, U+962f, U+963c-963e, U+9641-9642, U+9649, U+9654, U+965b-965f, U+9661, U+9663, U+9665, U+9667-9668, U+966c, U+9670, U+9672-9674, U+9678, U+967a, U+967d, U+9682, U+9685, U+9688, U+968a, U+968d-968e, U+9695, U+9697-9698, U+969e, U+96a0, U+96a3-96a4, U+96a8, U+96aa, U+96b0-96b1, U+96b3-96b4, U+96b7-96b9, U+96bb-96bd, U+96c9, U+96cb, U+96ce, U+96d1-96d2, U+96d6, U+96d9, U+96db-96dc, U+96de, U+96e0, U+96e3, U+96e9, U+96eb, U+96f0-96f2, U+96f9, U+96ff, U+9701-9702, U+9705, U+9708, U+970a, U+970e-970f, U+9711, U+9719, U+9727, U+972a, U+972d, U+9730, U+973d, U+9742, U+9744, U+9748-9749, U+9750-9751, U+975a;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-010-75451f75.woff2") format('woff2');
  unicode-range: U+94f5, U+94f7, U+94f9, U+94fb-94fd, U+94ff, U+9503-9504, U+9506-9507, U+9509-950a, U+950d-950f, U+9511-9518, U+951a-9520, U+9522, U+9528-952d, U+9530-953a, U+953c-953f, U+9543-9546, U+9548-9550, U+9552-9555, U+9557-955b, U+955d-9568, U+956a-956d, U+9570-9574, U+9583, U+9586, U+9589, U+958e-958f, U+9591-9592, U+9594, U+9598-9599, U+959e-95a0, U+95a2-95a6, U+95a8-95b2, U+95b4, U+95b8-95c3;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-011-b488114b.woff2") format('woff2');
  unicode-range: U+941c-942b, U+942d-942e, U+9432-9433, U+9435, U+9438, U+943a, U+943e, U+9444, U+944a, U+9451-9452, U+945a, U+9462-9463, U+9465, U+9470-9487, U+948a-9492, U+9494-9498, U+949a, U+949c-949d, U+94a1, U+94a3-94a4, U+94a8, U+94aa-94ad, U+94af, U+94b2, U+94b4-94ba, U+94bc-94c0, U+94c4, U+94c6-94db, U+94de-94ec, U+94ee-94f1, U+94f3;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-012-3be43a3f.woff2") format('woff2');
  unicode-range: U+92ec-92ed, U+92f0, U+92f3, U+92f8, U+92fc, U+9304, U+9306, U+9310, U+9312, U+9315, U+9318, U+931a, U+931e, U+9320-9322, U+9324, U+9326-9329, U+932b-932c, U+932f, U+9331-9332, U+9335-9336, U+933e, U+9340-9341, U+934a-9360, U+9362-9363, U+9365-936b, U+936e, U+9375, U+937e, U+9382, U+938a, U+938c, U+938f, U+9393-9394, U+9396-9397, U+939a, U+93a2, U+93a7, U+93ac-93cd, U+93d0-93d1, U+93d6-93d8, U+93de-93df, U+93e1-93e2, U+93e4, U+93f8, U+93fb, U+93fd, U+940e-941a;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-013-8860e3ee.woff2") format('woff2');
  unicode-range: U+9163-9164, U+9169, U+9170, U+9172, U+9174, U+9179-917a, U+917d-917e, U+9182-9183, U+9185, U+918c-918d, U+9190-9191, U+919a, U+919c, U+91a1-91a4, U+91a8, U+91aa-91af, U+91b4-91b5, U+91b8, U+91ba, U+91be, U+91c0-91c1, U+91c6, U+91c8, U+91cb, U+91d0, U+91d2, U+91d7-91d8, U+91dd, U+91e3, U+91e6-91e7, U+91ed, U+91f0, U+91f5, U+91f9, U+9200, U+9205, U+9207-920a, U+920d-920e, U+9210, U+9214-9215, U+921c, U+921e, U+9221, U+9223-9227, U+9229-922a, U+922d, U+9234-9235, U+9237, U+9239-923a, U+923c-9240, U+9244-9246, U+9249, U+924e-924f, U+9251, U+9253, U+9257, U+925b, U+925e, U+9262, U+9264-9266, U+9268, U+926c, U+926f, U+9271, U+927b, U+927e, U+9280, U+9283, U+9285-928a, U+928e, U+9291, U+9293, U+9296, U+9298, U+929c-929d, U+92a8, U+92ab-92ae, U+92b3, U+92b6-92b7, U+92b9, U+92c1, U+92c5-92c6, U+92c8, U+92cc, U+92d0, U+92d2, U+92e4, U+92ea;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-014-d6d672ba.woff2") format('woff2');
  unicode-range: U+9004, U+900b, U+9011, U+9015-9016, U+901e, U+9021, U+9026, U+902d, U+902f, U+9031, U+9035-9036, U+9039-903a, U+9041, U+9044-9046, U+904a, U+904f-9052, U+9054-9055, U+9058-9059, U+905b-905e, U+9060-9062, U+9068-9069, U+906f, U+9072, U+9074, U+9076-907a, U+907c-907d, U+9081, U+9083, U+9085, U+9087-908b, U+908f, U+9095, U+9097, U+9099-909b, U+909d, U+90a0-90a1, U+90a8-90a9, U+90ac, U+90b0, U+90b2-90b4, U+90b6, U+90b8, U+90ba, U+90bd-90be, U+90c3-90c5, U+90c7-90c8, U+90cf-90d0, U+90d3, U+90d5, U+90d7, U+90da-90dc, U+90de, U+90e2, U+90e4, U+90e6-90e7, U+90ea-90eb, U+90ef, U+90f4-90f5, U+90f7, U+90fe-9100, U+9104, U+9109, U+910c, U+9112, U+9114-9115, U+9118, U+911c, U+911e, U+9120, U+9122-9123, U+9127, U+912d, U+912f-9132, U+9139-913a, U+9143, U+9146, U+9149-914a, U+914c, U+914e-9150, U+9154, U+9157, U+915a, U+915d-915e, U+9161-9162;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-015-0125d5a0.woff2") format('woff2');
  unicode-range: U+8e41-8e42, U+8e47, U+8e49-8e4b, U+8e50-8e53, U+8e59-8e5a, U+8e5f-8e60, U+8e64, U+8e69, U+8e6c, U+8e70, U+8e74, U+8e76, U+8e7a-8e7c, U+8e7f, U+8e84-8e85, U+8e87, U+8e89, U+8e8b, U+8e8d, U+8e8f-8e90, U+8e94, U+8e99, U+8e9c, U+8e9e, U+8eaa, U+8eac, U+8eb0, U+8eb6, U+8ec0, U+8ec6, U+8eca-8ece, U+8ed2, U+8eda, U+8edf, U+8ee2, U+8eeb, U+8ef8, U+8efb-8efe, U+8f03, U+8f09, U+8f0b, U+8f12-8f15, U+8f1b, U+8f1d, U+8f1f, U+8f29-8f2a, U+8f2f, U+8f36, U+8f38, U+8f3b, U+8f3e-8f3f, U+8f44-8f45, U+8f49, U+8f4d-8f4e, U+8f5f, U+8f6b, U+8f6d, U+8f71-8f73, U+8f75-8f76, U+8f78-8f7a, U+8f7c, U+8f7e, U+8f81-8f82, U+8f84, U+8f87, U+8f8a-8f8b, U+8f8d-8f8f, U+8f94-8f95, U+8f97-8f9a, U+8fa6, U+8fad-8faf, U+8fb2, U+8fb5-8fb7, U+8fba-8fbc, U+8fbf, U+8fc2, U+8fcb, U+8fcd, U+8fd3, U+8fd5, U+8fd7, U+8fda, U+8fe2-8fe5, U+8fe8-8fe9, U+8fee, U+8ff3-8ff4, U+8ff8, U+8ffa;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-016-2f44c51c.woff2") format('woff2');
  unicode-range: U+8cbd, U+8cbf-8cc4, U+8cc7-8cc8, U+8cca, U+8ccd, U+8cd1, U+8cd3, U+8cdb-8cdc, U+8cde, U+8ce0, U+8ce2-8ce4, U+8ce6-8ce8, U+8cea, U+8ced, U+8cf4, U+8cf8, U+8cfa, U+8cfc-8cfd, U+8d04-8d05, U+8d07-8d08, U+8d0a, U+8d0d, U+8d0f, U+8d13-8d14, U+8d16, U+8d1b, U+8d20, U+8d30, U+8d32-8d33, U+8d36, U+8d3b, U+8d3d, U+8d40, U+8d42-8d43, U+8d45-8d46, U+8d48-8d4a, U+8d4d, U+8d51, U+8d53, U+8d55, U+8d59, U+8d5c-8d5d, U+8d5f, U+8d61, U+8d66-8d67, U+8d6a, U+8d6d, U+8d71, U+8d73, U+8d84, U+8d90-8d91, U+8d94-8d95, U+8d99, U+8da8, U+8daf, U+8db1, U+8db5, U+8db8, U+8dba, U+8dbc, U+8dbf, U+8dc2, U+8dc4, U+8dc6, U+8dcb, U+8dce-8dcf, U+8dd6-8dd7, U+8dda-8ddb, U+8dde, U+8de1, U+8de3-8de4, U+8de9, U+8deb-8dec, U+8df0-8df1, U+8df6-8dfd, U+8e05, U+8e07, U+8e09-8e0a, U+8e0c, U+8e0e, U+8e10, U+8e14, U+8e1d-8e1f, U+8e23, U+8e26, U+8e2b-8e31, U+8e34-8e35, U+8e39-8e3a, U+8e3d, U+8e40;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-017-d27fa385.woff2") format('woff2');
  unicode-range: U+8b80, U+8b83, U+8b8a, U+8b8c, U+8b90, U+8b93, U+8b99-8b9a, U+8ba0, U+8ba3, U+8ba5-8ba7, U+8baa-8bac, U+8bb4-8bb5, U+8bb7, U+8bb9, U+8bc2-8bc3, U+8bc5, U+8bcb-8bcc, U+8bce-8bd0, U+8bd2-8bd4, U+8bd6, U+8bd8-8bd9, U+8bdc, U+8bdf, U+8be3-8be4, U+8be7-8be9, U+8beb-8bec, U+8bee, U+8bf0, U+8bf2-8bf3, U+8bf6, U+8bf9, U+8bfc-8bfd, U+8bff-8c00, U+8c02, U+8c04, U+8c06-8c07, U+8c0c, U+8c0f, U+8c11-8c12, U+8c14-8c1b, U+8c1d-8c21, U+8c24-8c25, U+8c27, U+8c2a-8c2c, U+8c2e-8c30, U+8c32-8c36, U+8c3f, U+8c47-8c4c, U+8c4e-8c50, U+8c54-8c56, U+8c62, U+8c68, U+8c6c, U+8c73, U+8c78, U+8c7a, U+8c82, U+8c85, U+8c89-8c8a, U+8c8d-8c8e, U+8c90, U+8c93-8c94, U+8c98, U+8c9d-8c9e, U+8ca0-8ca2, U+8ca7-8cac, U+8caf-8cb0, U+8cb3-8cb4, U+8cb6-8cb9, U+8cbb-8cbc;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-018-8a69fd66.woff2") format('woff2');
  unicode-range: U+8a15-8a18, U+8a1a-8a1b, U+8a1d, U+8a1f, U+8a22-8a23, U+8a25, U+8a2b, U+8a2d, U+8a31, U+8a33-8a34, U+8a36-8a38, U+8a3a, U+8a3c, U+8a3e, U+8a40-8a41, U+8a46, U+8a48, U+8a50, U+8a52, U+8a54-8a55, U+8a58, U+8a5b, U+8a5d-8a63, U+8a66, U+8a69-8a6b, U+8a6d-8a6e, U+8a70, U+8a72-8a73, U+8a7a, U+8a85, U+8a87, U+8a8a, U+8a8c-8a8d, U+8a90-8a92, U+8a95, U+8a98, U+8aa0-8aa1, U+8aa3-8aa6, U+8aa8-8aa9, U+8aac-8aae, U+8ab0, U+8ab2, U+8ab8-8ab9, U+8abc, U+8abe-8abf, U+8ac7, U+8acf, U+8ad2, U+8ad6-8ad7, U+8adb-8adc, U+8adf, U+8ae1, U+8ae6-8ae8, U+8aeb, U+8aed-8aee, U+8af1, U+8af3-8af4, U+8af7-8af8, U+8afa, U+8afe, U+8b00-8b02, U+8b07, U+8b0a, U+8b0c, U+8b0e, U+8b10, U+8b17, U+8b19, U+8b1b, U+8b1d, U+8b20-8b21, U+8b26, U+8b28, U+8b2c, U+8b33, U+8b39, U+8b3e-8b3f, U+8b41, U+8b45, U+8b49, U+8b4c, U+8b4f, U+8b57-8b58, U+8b5a, U+8b5c, U+8b5e, U+8b60, U+8b6c, U+8b6f-8b70, U+8b72, U+8b74, U+8b77, U+8b7d;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-019-e22ec00c.woff2") format('woff2');
  unicode-range: U+8882, U+8884-8886, U+8888, U+888f, U+8892-8893, U+889b, U+88a2, U+88a4, U+88a6, U+88a8, U+88aa, U+88ae, U+88b1, U+88b4, U+88b7, U+88bc, U+88c0, U+88c6-88c9, U+88ce-88cf, U+88d1-88d3, U+88d8, U+88db-88dd, U+88df, U+88e1-88e3, U+88e5, U+88e8, U+88ec, U+88f0-88f1, U+88f3-88f4, U+88fc-88fe, U+8900, U+8902, U+8906-8907, U+8909-890c, U+8912-8915, U+8918-891b, U+8921, U+8925, U+892b, U+8930, U+8932, U+8934, U+8936, U+893b, U+893d, U+8941, U+894c, U+8955-8956, U+8959, U+895c, U+895e-8960, U+8966, U+896a, U+896c, U+896f-8970, U+8972, U+897b, U+897e, U+8980, U+8983, U+8985, U+8987-8988, U+898c, U+898f, U+8993, U+8997, U+899a, U+89a1, U+89a7, U+89a9-89aa, U+89b2-89b3, U+89b7, U+89c0, U+89c7, U+89ca-89cc, U+89ce-89d1, U+89d6, U+89da, U+89dc, U+89de, U+89e5, U+89e7, U+89eb, U+89ef, U+89f1, U+89f3-89f4, U+89f8, U+89ff, U+8a01-8a03, U+8a07-8a0a, U+8a0e-8a0f, U+8a13;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-020-0aef6a14.woff2") format('woff2');
  unicode-range: U+86f4, U+86f8-86f9, U+86fb, U+86fe, U+8703, U+8706-870a, U+870d, U+8711-8713, U+871a, U+871e, U+8722-8723, U+8725, U+8729, U+872e, U+8731, U+8734, U+8737, U+873a-873b, U+873e-8740, U+8742, U+8747-8748, U+8753, U+8755, U+8757-8758, U+875d, U+875f, U+8762-8766, U+8768, U+876e, U+8770, U+8772, U+8775, U+8778, U+877b-877e, U+8782, U+8785, U+8788, U+878b, U+8793, U+8797, U+879a, U+879e-87a0, U+87a2-87a3, U+87a8, U+87ab-87ad, U+87af, U+87b3, U+87b5, U+87bd, U+87c0, U+87c4, U+87c6, U+87ca-87cb, U+87d1-87d2, U+87db-87dc, U+87de, U+87e0, U+87e5, U+87ea, U+87ec, U+87ee, U+87f2-87f3, U+87fb, U+87fd-87fe, U+8802-8803, U+8805, U+880a-880b, U+880d, U+8813-8816, U+8819, U+881b, U+881f, U+8821, U+8823, U+8831-8832, U+8835-8836, U+8839, U+883b-883c, U+8844, U+8846, U+884a, U+884e, U+8852-8853, U+8855, U+8859, U+885b, U+885d-885e, U+8862, U+8864, U+8869-886a, U+886e-886f, U+8872, U+8879, U+887d-887f;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-021-9ed8d137.woff2") format('woff2');
  unicode-range: U+8548, U+854e, U+8553, U+8556-8557, U+8559, U+855e, U+8561, U+8564-8565, U+8568-856a, U+856d, U+856f-8570, U+8572, U+8576, U+8579-857b, U+8580, U+8585-8586, U+8588, U+858a, U+858f, U+8591, U+8594, U+8599, U+859c, U+85a2, U+85a4, U+85a6, U+85a8-85a9, U+85ab-85ac, U+85ae, U+85b7-85b9, U+85be, U+85c1, U+85c7, U+85cd, U+85d0, U+85d3, U+85d5, U+85dc-85dd, U+85df-85e0, U+85e5-85e6, U+85e8-85ea, U+85f4, U+85f9, U+85fe-85ff, U+8602, U+8605-8607, U+860a-860b, U+8616, U+8618, U+861a, U+8627, U+8629, U+862d, U+8638, U+863c, U+863f, U+864d, U+864f, U+8652-8655, U+865b-865c, U+865f, U+8662, U+8667, U+866c, U+866e, U+8671, U+8675, U+867a-867c, U+867f, U+868b, U+868d, U+8693, U+869c-869d, U+86a1, U+86a3-86a4, U+86a7-86a9, U+86ac, U+86af-86b1, U+86b4-86b6, U+86ba, U+86c0, U+86c4, U+86c6, U+86c9-86ca, U+86cd-86d1, U+86d4, U+86d8, U+86de-86df, U+86e4, U+86e6, U+86e9, U+86ed, U+86ef-86f3;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-022-112fd4b5.woff2") format('woff2');
  unicode-range: U+83c5, U+83c8-83c9, U+83cb, U+83d1, U+83d3-83d6, U+83d8, U+83db, U+83dd, U+83df, U+83e1, U+83e5, U+83ea-83eb, U+83f0, U+83f4, U+83f8-83f9, U+83fb, U+83fd, U+83ff, U+8401, U+8406, U+840a-840b, U+840f, U+8411, U+8418, U+841c, U+8420, U+8422-8424, U+8426, U+8429, U+842c, U+8438-8439, U+843b-843c, U+843f, U+8446-8447, U+8449, U+844e, U+8451-8452, U+8456, U+8459-845a, U+845c, U+8462, U+8466, U+846d, U+846f-8470, U+8473, U+8476-8478, U+847a, U+847d, U+8484-8485, U+8487, U+8489, U+848c, U+848e, U+8490, U+8493-8494, U+8497, U+849b, U+849e-849f, U+84a1, U+84a5, U+84a8, U+84af, U+84b4, U+84b9-84bf, U+84c1-84c2, U+84c5-84c7, U+84ca-84cb, U+84cd, U+84d0-84d1, U+84d3, U+84d6, U+84df-84e0, U+84e2-84e3, U+84e5-84e7, U+84ee, U+84f3, U+84f6, U+84fa, U+84fc, U+84ff-8500, U+850c, U+8511, U+8514-8515, U+8517-8518, U+851f, U+8523, U+8525-8526, U+8529, U+852b, U+852d, U+8532, U+8534-8535, U+8538-853a, U+853c, U+8543, U+8545;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-023-adc17ff2.woff2") format('woff2');
  unicode-range: U+82bc, U+82be, U+82c0-82c2, U+82c4-82c8, U+82ca-82cc, U+82ce, U+82d0, U+82d2-82d3, U+82d5-82d6, U+82d8-82d9, U+82dc-82de, U+82e0-82e4, U+82e7, U+82e9-82eb, U+82ed-82ee, U+82f3-82f4, U+82f7-82f8, U+82fa-8301, U+8306-8308, U+830c-830d, U+830f, U+8311, U+8313-8315, U+8318, U+831a-831b, U+831d, U+8324, U+8327, U+832a, U+832c-832d, U+832f, U+8331-8334, U+833a-833c, U+8340, U+8343-8345, U+8347-8348, U+834a, U+834c, U+834f, U+8351, U+8356, U+8358-835c, U+835e, U+8360, U+8364-8366, U+8368-836a, U+836c-836e, U+8373, U+8378, U+837b-837d, U+837f-8380, U+8382, U+8388, U+838a-838b, U+8392, U+8394, U+8396, U+8398-8399, U+839b-839c, U+83a0, U+83a2-83a3, U+83a8-83aa, U+83ae-83b0, U+83b3-83b4, U+83b6, U+83b8, U+83ba, U+83bc-83bd, U+83bf-83c0, U+83c2;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-024-8339464a.woff2") format('woff2');
  unicode-range: U+8166-8169, U+816b, U+816d, U+8171, U+8173-8174, U+8178, U+817c-817d, U+8182, U+8188, U+8191, U+8198-819b, U+81a0, U+81a3, U+81a5-81a6, U+81a9, U+81b6, U+81ba-81bb, U+81bd, U+81bf, U+81c1, U+81c3, U+81c6, U+81c9-81ca, U+81cc-81cd, U+81d1, U+81d3-81d4, U+81d8, U+81db-81dc, U+81de-81df, U+81e5, U+81e7-81e9, U+81eb-81ec, U+81ee-81ef, U+81f5, U+81f8, U+81fa, U+81fc, U+81fe, U+8200-8202, U+8204, U+8208-820a, U+820e-8210, U+8216-8218, U+821b-821c, U+8221-8224, U+8226-8228, U+822b, U+822d, U+822f, U+8232-8234, U+8237-8238, U+823a-823b, U+823e, U+8244, U+8249, U+824b, U+824f, U+8259-825a, U+825f, U+8266, U+8268, U+826e, U+8271, U+8276-8279, U+827d, U+827f, U+8283-8284, U+8288-828a, U+828d-8291, U+8293-8294, U+8296-8298, U+829f-82a1, U+82a3-82a4, U+82a7-82ab, U+82ae, U+82b0, U+82b2, U+82b4-82b6;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-025-4777b6b3.woff2") format('woff2');
  unicode-range: U+8016, U+8018-8019, U+801c, U+801e, U+8026-802a, U+8031, U+8034-8035, U+8037, U+8043, U+804b, U+804d, U+8052, U+8056, U+8059, U+805e, U+8061, U+8068-8069, U+806e-8074, U+8076-8078, U+807c-8080, U+8082, U+8084-8085, U+8088, U+808f, U+8093, U+809c, U+809f, U+80ab, U+80ad-80ae, U+80b1, U+80b6-80b8, U+80bc-80bd, U+80c2, U+80c4, U+80ca, U+80cd, U+80d1, U+80d4, U+80d7, U+80d9-80db, U+80dd, U+80e0, U+80e4-80e5, U+80e7-80ed, U+80ef-80f1, U+80f3-80f4, U+80fc, U+8101, U+8104-8105, U+8107-8108, U+810c-810e, U+8112-8115, U+8117-8119, U+811b-811f, U+8121-8130, U+8132-8134, U+8137, U+8139, U+813f-8140, U+8142, U+8146, U+8148, U+814d-814e, U+8151, U+8153, U+8158-815a, U+815e, U+8160;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-026-94e44ae3.woff2") format('woff2');
  unicode-range: U+7ef0-7ef2, U+7ef6, U+7efa-7efb, U+7efe, U+7f01-7f04, U+7f08, U+7f0a-7f12, U+7f17, U+7f19, U+7f1b-7f1c, U+7f1f, U+7f21-7f23, U+7f25-7f28, U+7f2a-7f33, U+7f35-7f37, U+7f3d, U+7f42, U+7f44-7f45, U+7f4c-7f4d, U+7f52, U+7f54, U+7f58-7f59, U+7f5d, U+7f5f-7f61, U+7f63, U+7f65, U+7f68, U+7f70-7f71, U+7f73-7f75, U+7f77, U+7f79, U+7f7d-7f7e, U+7f85-7f86, U+7f88-7f89, U+7f8b-7f8c, U+7f90-7f91, U+7f94-7f96, U+7f98-7f9b, U+7f9d, U+7f9f, U+7fa3, U+7fa7-7fa9, U+7fac-7fb2, U+7fb4, U+7fb6, U+7fb8, U+7fbc, U+7fbf-7fc0, U+7fc3, U+7fca, U+7fcc, U+7fce, U+7fd2, U+7fd5, U+7fd9-7fdb, U+7fdf, U+7fe3, U+7fe5-7fe7, U+7fe9, U+7feb-7fec, U+7fee-7fef, U+7ff1, U+7ff3-7ff4, U+7ff9-7ffa, U+7ffe, U+8004, U+8006, U+800b, U+800e, U+8011-8012, U+8014;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-027-7ec94d4f.woff2") format('woff2');
  unicode-range: U+7dd2, U+7dd4, U+7dd6-7dd8, U+7dda-7de0, U+7de2-7de6, U+7de8-7ded, U+7def, U+7df1-7df5, U+7df7, U+7df9, U+7dfb-7dfc, U+7dfe-7e02, U+7e04, U+7e08-7e0b, U+7e12, U+7e1b, U+7e1e, U+7e20, U+7e22-7e23, U+7e26, U+7e29, U+7e2b, U+7e2e-7e2f, U+7e31, U+7e37, U+7e39-7e3e, U+7e40, U+7e43-7e44, U+7e46-7e47, U+7e4a-7e4b, U+7e4d-7e4e, U+7e51, U+7e54-7e56, U+7e58-7e5b, U+7e5d-7e5e, U+7e61, U+7e66-7e67, U+7e69-7e6b, U+7e6d, U+7e70, U+7e73, U+7e77, U+7e79, U+7e7b-7e7d, U+7e81-7e82, U+7e8c-7e8d, U+7e8f, U+7e92-7e94, U+7e96, U+7e98, U+7e9a-7e9c, U+7e9e-7e9f, U+7ea1, U+7ea3, U+7ea5, U+7ea8-7ea9, U+7eab, U+7ead-7eae, U+7eb0, U+7ebb, U+7ebe, U+7ec0-7ec2, U+7ec9, U+7ecb-7ecc, U+7ed0, U+7ed4, U+7ed7, U+7edb, U+7ee0-7ee2, U+7ee5-7ee6, U+7ee8, U+7eeb;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-028-4bc57690.woff2") format('woff2');
  unicode-range: U+7ce8, U+7cec, U+7cf0, U+7cf5-7cf9, U+7cfc, U+7cfe, U+7d00, U+7d04-7d0b, U+7d0d, U+7d10-7d14, U+7d17-7d19, U+7d1b-7d1f, U+7d21, U+7d24-7d26, U+7d28-7d2a, U+7d2c-7d2e, U+7d30-7d31, U+7d33, U+7d35-7d36, U+7d38-7d3a, U+7d40, U+7d42-7d44, U+7d46, U+7d4b-7d4c, U+7d4f, U+7d51, U+7d54-7d56, U+7d58, U+7d5b-7d5c, U+7d5e, U+7d61-7d63, U+7d66, U+7d68, U+7d6a-7d6c, U+7d6f, U+7d71-7d73, U+7d75-7d77, U+7d79-7d7a, U+7d7e, U+7d81, U+7d84-7d8b, U+7d8d, U+7d8f, U+7d91, U+7d94, U+7d96, U+7d98-7d9a, U+7d9c-7da0, U+7da2, U+7da6, U+7daa-7db1, U+7db4-7db8, U+7dba-7dbf, U+7dc1, U+7dc4, U+7dc7-7dc8, U+7dca-7dcd, U+7dcf, U+7dd1;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-029-d7521219.woff2") format('woff2');
  unicode-range: U+7bd3-7bd4, U+7bd9-7bda, U+7bdd, U+7be0-7be1, U+7be4-7be6, U+7be9-7bea, U+7bef, U+7bf4, U+7bf6, U+7bfc, U+7bfe, U+7c01, U+7c03, U+7c07-7c08, U+7c0a-7c0d, U+7c0f, U+7c11, U+7c15-7c16, U+7c19, U+7c1e-7c21, U+7c23-7c24, U+7c26, U+7c28-7c33, U+7c35, U+7c37-7c3b, U+7c3d-7c3e, U+7c40-7c41, U+7c43, U+7c47-7c48, U+7c4c, U+7c50, U+7c53-7c54, U+7c59, U+7c5f-7c60, U+7c63-7c65, U+7c6c, U+7c6e, U+7c72, U+7c74, U+7c79-7c7a, U+7c7c, U+7c81-7c82, U+7c84-7c85, U+7c88, U+7c8a-7c91, U+7c93-7c96, U+7c99, U+7c9b-7c9e, U+7ca0-7ca2, U+7ca6-7ca9, U+7cac, U+7caf-7cb3, U+7cb5-7cb7, U+7cba-7cbd, U+7cbf-7cc2, U+7cc5, U+7cc7-7cc9, U+7ccc-7ccd, U+7cd7, U+7cdc, U+7cde, U+7ce0, U+7ce4-7ce5, U+7ce7;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-030-e007ce0b.woff2") format('woff2');
  unicode-range: U+7ae6, U+7af4-7af7, U+7afa-7afb, U+7afd-7b0a, U+7b0c, U+7b0e-7b0f, U+7b13, U+7b15-7b16, U+7b18-7b19, U+7b1e-7b20, U+7b22-7b25, U+7b29-7b2b, U+7b2d-7b2e, U+7b30-7b3b, U+7b3e-7b3f, U+7b41-7b42, U+7b44-7b47, U+7b4a, U+7b4c-7b50, U+7b58, U+7b5a, U+7b5c, U+7b60, U+7b66-7b67, U+7b69, U+7b6c-7b6f, U+7b72-7b76, U+7b7b-7b7d, U+7b7f, U+7b82, U+7b85, U+7b87, U+7b8b-7b96, U+7b98-7b99, U+7b9b-7b9f, U+7ba2-7ba4, U+7ba6-7bac, U+7bae-7bb0, U+7bb4, U+7bb7-7bb9, U+7bbb, U+7bc0-7bc1, U+7bc3-7bc4, U+7bc6, U+7bc8-7bcc, U+7bd1;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-031-b7adca25.woff2") format('woff2');
  unicode-range: U+798b-798e, U+7992, U+7994-7995, U+7997-7998, U+799a-799c, U+799f, U+79a3-79a6, U+79a8-79ac, U+79ae-79b1, U+79b3-79b5, U+79b8, U+79ba, U+79bf, U+79c2, U+79c6, U+79c8, U+79cf, U+79d5-79d6, U+79dd-79de, U+79e3, U+79e7-79e8, U+79eb, U+79ed, U+79f4, U+79f7-79f8, U+79fa, U+79fe, U+7a02-7a03, U+7a05, U+7a0a, U+7a14, U+7a17, U+7a19, U+7a1c, U+7a1e-7a1f, U+7a23, U+7a25-7a26, U+7a2c, U+7a2e, U+7a30-7a32, U+7a36-7a37, U+7a39, U+7a3c, U+7a40, U+7a42, U+7a47, U+7a49, U+7a4c-7a4f, U+7a51, U+7a55, U+7a5b, U+7a5d-7a5e, U+7a62-7a63, U+7a66, U+7a68-7a69, U+7a6b, U+7a70, U+7a78, U+7a80, U+7a85-7a88, U+7a8a, U+7a90, U+7a93-7a96, U+7a98, U+7a9b-7a9c, U+7a9e, U+7aa0-7aa1, U+7aa3, U+7aa8-7aaa, U+7aac-7ab0, U+7ab3, U+7ab8, U+7aba, U+7abd-7abf, U+7ac4-7ac5, U+7ac7-7ac8, U+7aca, U+7ad1-7ad2, U+7ada-7add, U+7ae1, U+7ae4;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-032-97b08758.woff2") format('woff2');
  unicode-range: U+784c, U+784e-7854, U+7856-7857, U+7859-785a, U+7865, U+7869-786a, U+786d, U+786f, U+7876-7877, U+787c, U+787e-787f, U+7881, U+7887-7889, U+7893-7894, U+7898-789e, U+78a1, U+78a3, U+78a5, U+78a9, U+78ad, U+78b2, U+78b4, U+78b6, U+78b9-78ba, U+78bc, U+78bf, U+78c3, U+78c9, U+78cb, U+78d0-78d2, U+78d4, U+78d9-78da, U+78dc, U+78de, U+78e1, U+78e5-78e6, U+78ea, U+78ec, U+78ef, U+78f1-78f2, U+78f4, U+78fa-78fb, U+78fe, U+7901-7902, U+7905, U+7907, U+7909, U+790b-790c, U+790e, U+7910, U+7913, U+7919-791b, U+791e-791f, U+7921, U+7924, U+7926, U+792a-792b, U+7934, U+7936, U+7939, U+793b, U+793d, U+7940, U+7942-7943, U+7945-7947, U+7949-794a, U+794c, U+794e-7951, U+7953-7955, U+7957-795a, U+795c, U+795f-7960, U+7962, U+7964, U+7966-7967, U+7969, U+796b, U+796f, U+7972, U+7974, U+7979, U+797b-797c, U+797e-7980, U+7982, U+7986-7987, U+7989-798a;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-033-52cd68dc.woff2") format('woff2');
  unicode-range: U+7722, U+7726, U+7728, U+772b-7730, U+7732-7736, U+7739-773a, U+773d-773f, U+7743, U+7746-7747, U+774c-774f, U+7751-7752, U+7758-775a, U+775c-775e, U+7762, U+7765-7766, U+7768-776a, U+776c-776d, U+7771-7772, U+777a, U+777c-777e, U+7780, U+7785, U+7787, U+778b-778d, U+778f-7791, U+7793, U+779e-77a0, U+77a2, U+77a5, U+77ad, U+77af, U+77b4-77b7, U+77bd-77c0, U+77c2, U+77c5, U+77c7, U+77cd, U+77d6-77d7, U+77d9-77da, U+77dd-77de, U+77e7, U+77ea, U+77ec, U+77ef, U+77f8, U+77fb, U+77fd-77fe, U+7800, U+7803, U+7806, U+7809, U+780f-7812, U+7815, U+7817-7818, U+781a-781f, U+7821-7823, U+7825-7827, U+7829, U+782b-7830, U+7832-7833, U+7835, U+7837, U+7839-783c, U+783e, U+7841-7844, U+7847-7849, U+784b;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-034-d8656f53.woff2") format('woff2');
  unicode-range: U+7613-7619, U+761b-761d, U+761f-7622, U+7625, U+7627-762a, U+762e-7630, U+7632-7635, U+7638-763a, U+763c-763d, U+763f-7640, U+7642-7643, U+7647-7648, U+764d-764e, U+7652, U+7654, U+7658, U+765a, U+765c, U+765e-765f, U+7661-7663, U+7665, U+7669, U+766c, U+766e-766f, U+7671-7673, U+7675-7676, U+7678-767a, U+767f, U+7681, U+7683, U+7688, U+768a-768c, U+768e, U+7690-7692, U+7695, U+7698, U+769a-769b, U+769d-76a0, U+76a2, U+76a4-76a7, U+76ab-76ac, U+76af-76b0, U+76b2, U+76b4-76b5, U+76ba-76bb, U+76bf, U+76c2-76c3, U+76c5, U+76c9, U+76cc-76ce, U+76dc-76de, U+76e1-76ea, U+76f1, U+76f9-76fb, U+76fd, U+76ff-7700, U+7703-7704, U+7707-7708, U+770c-770f, U+7712, U+7714, U+7716, U+7719-771b, U+771e, U+7721;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-035-bb1337da.woff2") format('woff2');
  unicode-range: U+750d, U+750f, U+7511, U+7513, U+7515, U+7517, U+7519, U+7521-7527, U+752a, U+752c-752d, U+752f, U+7534, U+7536, U+753a, U+753e, U+7540, U+7544, U+7547-754b, U+754d-754e, U+7550-7553, U+7556-7557, U+755a-755b, U+755d-755e, U+7560, U+7562, U+7564, U+7566-7568, U+756b-756c, U+756f-7573, U+7575, U+7579-757c, U+757e-757f, U+7581-7584, U+7587, U+7589-758e, U+7590, U+7592, U+7594, U+7596, U+7599-759a, U+759d, U+759f-75a0, U+75a3, U+75a5, U+75a8, U+75ac-75ad, U+75b0-75b1, U+75b3-75b5, U+75b8, U+75bd, U+75c1-75c4, U+75c8-75ca, U+75cc-75cd, U+75d4, U+75d6, U+75d9, U+75de, U+75e0, U+75e2-75e4, U+75e6-75ea, U+75f1-75f3, U+75f7, U+75f9-75fa, U+75fc, U+75fe-7601, U+7603, U+7605-7606, U+7608-760e, U+7610-7612;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-036-f4f48676.woff2") format('woff2');
  unicode-range: U+73f0, U+73f2, U+73f4-73f5, U+73f7, U+73f9-73fa, U+73fc-73fd, U+73ff-7402, U+7404, U+7407-7408, U+740a-740f, U+7418, U+741a-741c, U+741e, U+7424-7425, U+7428-7429, U+742c-7430, U+7432, U+7435-7436, U+7438-743b, U+743e-7441, U+7443-7446, U+7448, U+744a-744b, U+7452, U+7457, U+745b, U+745d, U+7460, U+7462-7465, U+7467-746a, U+746d, U+746f, U+7471, U+7473-7474, U+7477, U+747a, U+747e, U+7481-7482, U+7484, U+7486, U+7488-748b, U+748e-748f, U+7493, U+7498, U+749a, U+749c-74a0, U+74a3, U+74a6, U+74a9-74aa, U+74ae, U+74b0-74b2, U+74b6, U+74b8-74ba, U+74bd, U+74bf, U+74c1, U+74c3, U+74c5, U+74c8, U+74ca, U+74cc, U+74cf, U+74d1-74d2, U+74d4-74d5, U+74d8-74db, U+74de-74e0, U+74e2, U+74e4-74e5, U+74e7-74e9, U+74ee-74ef, U+74f4, U+74ff, U+7501, U+7503, U+7505, U+7508;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-037-f3ae7334.woff2") format('woff2');
  unicode-range: U+72e6, U+72e8, U+72ef-72f0, U+72f2-72f4, U+72f6-72f7, U+72f9-72fb, U+72fd, U+7300-7304, U+7307, U+730a-730c, U+7313-7317, U+731d-7322, U+7327, U+7329, U+732c-732d, U+7330-7331, U+7333, U+7335-7337, U+7339, U+733d-733e, U+7340, U+7342, U+7344-7345, U+734a, U+734d-7350, U+7352, U+7355, U+7357, U+7359, U+735f-7360, U+7362-7363, U+7365, U+7368, U+736c-736d, U+736f-7370, U+7372, U+7374-7376, U+7378, U+737a-737b, U+737d-737e, U+7382-7383, U+7386, U+7388, U+738a, U+738c-7393, U+7395, U+7397-739a, U+739c, U+739e, U+73a0-73a3, U+73a5-73a8, U+73aa, U+73ad, U+73b1, U+73b3, U+73b6-73b7, U+73b9, U+73c2, U+73c5-73c9, U+73cc, U+73ce-73d0, U+73d2, U+73d6, U+73d9, U+73db-73de, U+73e3, U+73e5-73ea, U+73ee-73ef;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-038-d34051bc.woff2") format('woff2');
  unicode-range: U+71a8, U+71af, U+71b1-71bc, U+71be, U+71c1-71c2, U+71c4, U+71c8-71cb, U+71ce-71d0, U+71d2, U+71d4, U+71d9-71da, U+71dc, U+71df-71e0, U+71e6-71e8, U+71ea, U+71ed-71ee, U+71f4, U+71f6, U+71f9, U+71fb-71fc, U+71ff-7200, U+7207, U+720c-720d, U+7210, U+7216, U+721a-721e, U+7223, U+7228, U+722b, U+722d-722e, U+7230, U+7232, U+723a-723c, U+723e-7242, U+7246, U+724b, U+724d-724e, U+7252, U+7256, U+7258, U+725a, U+725c-725d, U+7260, U+7264-7266, U+726a, U+726c, U+726e-726f, U+7271, U+7273-7274, U+7278, U+727b, U+727d-727e, U+7281-7282, U+7284, U+7287, U+728a, U+728d, U+728f, U+7292, U+729b, U+729f-72a0, U+72a7, U+72ad-72ae, U+72b0-72b5, U+72b7-72b8, U+72ba-72be, U+72c0-72c1, U+72c3, U+72c5-72c6, U+72c8, U+72cc-72ce, U+72d2, U+72d6, U+72db, U+72dd-72df, U+72e1, U+72e5;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-039-4af16f2b.woff2") format('woff2');
  unicode-range: U+700b, U+700d, U+7015, U+7018, U+701b, U+701d-701f, U+7023, U+7026-7028, U+702c, U+702e-7030, U+7035, U+7037, U+7039-703a, U+703c-703e, U+7044, U+7049-704b, U+704f, U+7051, U+7058, U+705a, U+705c-705e, U+7061, U+7064, U+7066, U+706c, U+707d, U+7080-7081, U+7085-7086, U+708a, U+708f, U+7091, U+7094-7095, U+7098-7099, U+709c-709d, U+709f, U+70a4, U+70a9-70aa, U+70af-70b2, U+70b4-70b7, U+70bb, U+70c0, U+70c3, U+70c7, U+70cb, U+70ce-70cf, U+70d4, U+70d9-70da, U+70dc-70dd, U+70e0, U+70e9, U+70ec, U+70f7, U+70fa, U+70fd, U+70ff, U+7104, U+7108-7109, U+710c, U+7110, U+7113-7114, U+7116-7118, U+711c, U+711e, U+7120, U+712e-712f, U+7131, U+713c, U+7142, U+7144-7147, U+7149-714b, U+7150, U+7152, U+7155-7156, U+7159-715a, U+715c, U+7161, U+7165-7166, U+7168-7169, U+716d, U+7173-7174, U+7176, U+7178, U+717a, U+717d, U+717f-7180, U+7184, U+7186-7188, U+7192, U+7198, U+719c, U+71a0, U+71a4-71a5;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-040-e8f71690.woff2") format('woff2');
  unicode-range: U+6ed9, U+6edb, U+6edd, U+6edf-6ee0, U+6ee2, U+6ee6, U+6eea, U+6eec, U+6eee-6eef, U+6ef2-6ef3, U+6ef7-6efa, U+6efe, U+6f01, U+6f03, U+6f08-6f09, U+6f15-6f16, U+6f19, U+6f22-6f25, U+6f28-6f2a, U+6f2c-6f2d, U+6f2f, U+6f32, U+6f36-6f38, U+6f3f, U+6f43-6f46, U+6f48, U+6f4b, U+6f4e-6f4f, U+6f51, U+6f54-6f57, U+6f59-6f5b, U+6f5e-6f5f, U+6f61, U+6f64-6f67, U+6f69-6f6c, U+6f6f-6f72, U+6f74-6f76, U+6f78-6f7e, U+6f80-6f83, U+6f86, U+6f89, U+6f8b-6f8d, U+6f90, U+6f92, U+6f94, U+6f97-6f98, U+6f9b, U+6fa3-6fa5, U+6fa7, U+6faa, U+6faf, U+6fb1, U+6fb4, U+6fb6, U+6fb9, U+6fc1-6fcb, U+6fd1-6fd3, U+6fd5, U+6fdb, U+6fde-6fe1, U+6fe4, U+6fe9, U+6feb-6fec, U+6fee-6ff1, U+6ffa, U+6ffe, U+7005-7006, U+7009;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-041-a8688f6f.woff2") format('woff2');
  unicode-range: U+6dc3, U+6dc5-6dc6, U+6dc9, U+6dcc, U+6dcf, U+6dd2-6dd3, U+6dd6, U+6dd9-6dde, U+6de0, U+6de4, U+6de6, U+6de8-6dea, U+6dec, U+6def-6df0, U+6df5-6df6, U+6df8, U+6dfa, U+6dfc, U+6e03-6e04, U+6e07-6e09, U+6e0b-6e0c, U+6e0e, U+6e11, U+6e13, U+6e15-6e16, U+6e19-6e1b, U+6e1e-6e1f, U+6e22, U+6e25-6e27, U+6e2b-6e2c, U+6e36-6e37, U+6e39-6e3a, U+6e3c-6e41, U+6e44-6e45, U+6e47, U+6e49-6e4b, U+6e4d-6e4e, U+6e51, U+6e53-6e55, U+6e5c-6e5f, U+6e61-6e63, U+6e65-6e67, U+6e6a-6e6b, U+6e6d-6e70, U+6e72-6e74, U+6e76-6e78, U+6e7c, U+6e80-6e82, U+6e86-6e87, U+6e89, U+6e8d, U+6e8f, U+6e96, U+6e98, U+6e9d-6e9f, U+6ea1, U+6ea5-6ea7, U+6eab, U+6eb1-6eb2, U+6eb4, U+6eb7, U+6ebb-6ebd, U+6ebf-6ec6, U+6ec8-6ec9, U+6ecc, U+6ecf-6ed0, U+6ed3-6ed4, U+6ed7-6ed8;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-042-751a4399.woff2") format('woff2');
  unicode-range: U+6cb1-6cb2, U+6cb4-6cb5, U+6cb7, U+6cba, U+6cbc-6cbd, U+6cc1-6cc3, U+6cc5-6cc7, U+6cd0-6cd4, U+6cd6-6cd7, U+6cd9-6cda, U+6cde-6ce0, U+6ce4, U+6ce6, U+6ce9, U+6ceb-6cef, U+6cf1-6cf2, U+6cf6-6cf7, U+6cfa, U+6cfe, U+6d03-6d05, U+6d07-6d08, U+6d0a, U+6d0c, U+6d0e-6d11, U+6d13-6d14, U+6d16, U+6d18-6d1a, U+6d1c, U+6d1f, U+6d22-6d23, U+6d26-6d29, U+6d2b, U+6d2e-6d30, U+6d33, U+6d35-6d36, U+6d38-6d3a, U+6d3c, U+6d3f, U+6d42-6d44, U+6d48-6d49, U+6d4d, U+6d50, U+6d52, U+6d54, U+6d56-6d58, U+6d5a-6d5c, U+6d5e, U+6d60-6d61, U+6d63-6d65, U+6d67, U+6d6c-6d6d, U+6d6f, U+6d75, U+6d7b-6d7d, U+6d87, U+6d8a, U+6d8e, U+6d90-6d9a, U+6d9c-6da0, U+6da2-6da3, U+6da7, U+6daa-6dac, U+6dae, U+6db3-6db4, U+6db6, U+6db8, U+6dbc, U+6dbf, U+6dc2;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-043-b30d2115.woff2") format('woff2');
  unicode-range: U+6b83-6b86, U+6b89, U+6b8d, U+6b91-6b93, U+6b95, U+6b97-6b98, U+6b9a-6b9b, U+6b9e, U+6ba1-6ba4, U+6ba9-6baa, U+6bad, U+6baf-6bb0, U+6bb2-6bb3, U+6bba-6bbd, U+6bc0, U+6bc2, U+6bc6, U+6bca-6bcc, U+6bce, U+6bd0-6bd1, U+6bd3, U+6bd6-6bd8, U+6bda, U+6be1, U+6be6, U+6bec, U+6bf1, U+6bf3-6bf5, U+6bf9, U+6bfd, U+6c05-6c08, U+6c0d, U+6c10, U+6c15-6c1a, U+6c21, U+6c23-6c26, U+6c29-6c2d, U+6c30-6c33, U+6c35-6c37, U+6c39-6c3a, U+6c3c-6c3f, U+6c46, U+6c4a-6c4c, U+6c4e-6c50, U+6c54, U+6c56, U+6c59-6c5c, U+6c5e, U+6c63, U+6c67-6c69, U+6c6b, U+6c6d, U+6c6f, U+6c72-6c74, U+6c78-6c7a, U+6c7c, U+6c84-6c87, U+6c8b-6c8c, U+6c8f, U+6c91, U+6c93-6c96, U+6c98, U+6c9a, U+6c9d, U+6ca2-6ca4, U+6ca8-6ca9, U+6cac-6cae;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-044-e337b6b6.woff2") format('woff2');
  unicode-range: U+69fe-6a01, U+6a06, U+6a09, U+6a0b, U+6a11, U+6a13, U+6a17-6a19, U+6a1b, U+6a1e, U+6a23, U+6a28-6a29, U+6a2b, U+6a2f-6a30, U+6a35, U+6a38-6a40, U+6a46-6a48, U+6a4a-6a4b, U+6a4e, U+6a50, U+6a52, U+6a5b, U+6a5e, U+6a62, U+6a65-6a67, U+6a6b, U+6a79, U+6a7c, U+6a7e-6a7f, U+6a84, U+6a86, U+6a8e, U+6a90-6a91, U+6a94, U+6a97, U+6a9c, U+6a9e, U+6aa0, U+6aa2, U+6aa4, U+6aa9, U+6aab, U+6aae-6ab0, U+6ab2-6ab3, U+6ab5, U+6ab7-6ab8, U+6aba-6abb, U+6abd, U+6abf, U+6ac2-6ac4, U+6ac6, U+6ac8, U+6acc, U+6ace, U+6ad2-6ad3, U+6ad8-6adc, U+6adf-6ae0, U+6ae4-6ae5, U+6ae7-6ae8, U+6afb, U+6b04-6b05, U+6b0d-6b13, U+6b16-6b17, U+6b19, U+6b24-6b25, U+6b2c, U+6b37-6b39, U+6b3b, U+6b3d, U+6b43, U+6b46, U+6b4e, U+6b50, U+6b53-6b54, U+6b58-6b59, U+6b5b, U+6b60, U+6b69, U+6b6d, U+6b6f-6b70, U+6b73-6b74, U+6b77-6b7a, U+6b80-6b82;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-045-780c39fb.woff2") format('woff2');
  unicode-range: U+68d3, U+68d7, U+68dd, U+68df, U+68e1, U+68e3-68e4, U+68e6-68ed, U+68ef-68f0, U+68f2, U+68f4, U+68f6-68f7, U+68f9, U+68fb-68fd, U+68ff-6902, U+6906-6908, U+690b, U+6910, U+691a-691c, U+691f-6920, U+6924-6925, U+692a, U+692d, U+6934, U+6939, U+693c-6945, U+694a-694b, U+6952-6954, U+6957, U+6959, U+695b, U+695d, U+695f, U+6962-6964, U+6966, U+6968-696c, U+696e-696f, U+6971, U+6973-6974, U+6978-6979, U+697d, U+697f-6980, U+6985, U+6987-698a, U+698d-698e, U+6994-6999, U+699b, U+69a3-69a4, U+69a6-69a7, U+69ab, U+69ad-69ae, U+69b1, U+69b7, U+69bb-69bc, U+69c1, U+69c3-69c5, U+69c7, U+69ca-69ce, U+69d0-69d1, U+69d3-69d4, U+69d7-69da, U+69e0, U+69e4, U+69e6, U+69ec-69ed, U+69f1-69f3, U+69f8, U+69fa-69fc;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-046-b8ad189a.woff2") format('woff2');
  unicode-range: U+678b-678d, U+678f, U+6792-6793, U+6796, U+6798, U+679e-67a1, U+67a5, U+67a7-67a9, U+67ac-67ad, U+67b0-67b1, U+67b3, U+67b5, U+67b7, U+67b9, U+67bb-67bc, U+67c0-67c1, U+67c3, U+67c5-67ca, U+67d1-67d2, U+67d7-67d9, U+67dd-67df, U+67e2-67e4, U+67e6-67e9, U+67f0, U+67f5, U+67f7-67f8, U+67fa-67fb, U+67fd-67fe, U+6800-6801, U+6803-6804, U+6806, U+6809-680a, U+680c, U+680e, U+6812, U+681d-681f, U+6822, U+6824-6829, U+682b-682d, U+6831-6835, U+683b, U+683e, U+6840-6841, U+6844-6845, U+6849, U+684e, U+6853, U+6855-6856, U+685c-685d, U+685f-6862, U+6864, U+6866-6868, U+686b, U+686f, U+6872, U+6874, U+6877, U+687f, U+6883, U+6886, U+688f, U+689b, U+689f-68a0, U+68a2-68a3, U+68b1, U+68b6, U+68b9-68ba, U+68bc-68bf, U+68c1-68c4, U+68c6, U+68c8, U+68ca, U+68cc, U+68d0-68d1;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-047-628f592e.woff2") format('woff2');
  unicode-range: U+6631, U+6633-6634, U+6636, U+663a-663b, U+663d, U+6641, U+6644-6645, U+6649, U+664c, U+664f, U+6654, U+6659, U+665b, U+665d-665e, U+6660-6667, U+6669, U+666b-666c, U+6671, U+6673, U+6677-6679, U+667c, U+6680-6681, U+6684-6685, U+6688-6689, U+668b-668e, U+6690, U+6692, U+6695, U+6698, U+669a, U+669d, U+669f-66a0, U+66a2-66a3, U+66a6, U+66aa-66ab, U+66b1-66b2, U+66b5, U+66b8-66b9, U+66bb, U+66be, U+66c1, U+66c6-66c9, U+66cc, U+66d5-66d8, U+66da-66dc, U+66de-66e2, U+66e8-66ea, U+66ec, U+66f1, U+66f3, U+66f7, U+66fa, U+66fd, U+6702, U+6705, U+670a, U+670f-6710, U+6713, U+6715, U+6719, U+6722-6723, U+6725-6727, U+6729, U+672d-672e, U+6732-6733, U+6736, U+6739, U+673b, U+673f, U+6744, U+6748, U+674c-674d, U+6753, U+6755, U+6762, U+6767, U+6769-676c, U+676e, U+6772-6773, U+6775, U+6777, U+677a-677d, U+6782-6783, U+6787, U+678a;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-048-36cdb91d.woff2") format('woff2');
  unicode-range: U+64f1-64f2, U+64f4, U+64f7-64f8, U+64fa, U+64fc, U+64fe-64ff, U+6503, U+6509, U+650f, U+6514, U+6518, U+651c-651e, U+6522-6525, U+652a-652c, U+652e, U+6530-6532, U+6534-6535, U+6537-6538, U+653a, U+653c-653d, U+6542, U+6549-654b, U+654d-654e, U+6553-6555, U+6557-6558, U+655d, U+6564, U+6569, U+656b, U+656d-656f, U+6571, U+6573, U+6575-6576, U+6578-657e, U+6581-6583, U+6585-6586, U+6589, U+658e-658f, U+6592-6593, U+6595-6596, U+659b, U+659d, U+659f-65a1, U+65a3, U+65ab-65ac, U+65b2, U+65b6-65b7, U+65ba-65bb, U+65be-65c0, U+65c2-65c4, U+65c6-65c8, U+65cc, U+65ce, U+65d0, U+65d2-65d3, U+65d6, U+65db, U+65dd, U+65e1, U+65e3, U+65ee-65f0, U+65f3-65f5, U+65f8, U+65fb-65fc, U+65fe-6600, U+6603, U+6607, U+6609, U+660b, U+6610-6611, U+6619-661a, U+661c-661e, U+6621, U+6624, U+6626, U+662a-662c, U+662e, U+6630;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-049-be61099e.woff2") format('woff2');
  unicode-range: U+63b8-63bc, U+63be, U+63c0, U+63c3-63c4, U+63c6, U+63c8, U+63cd-63ce, U+63d1, U+63d6, U+63da-63db, U+63de, U+63e0, U+63e3, U+63e9-63ea, U+63ee, U+63f2, U+63f5-63fa, U+63fc, U+63fe-6400, U+6406, U+640b-640d, U+6410, U+6414, U+6416-6417, U+641b, U+6420-6423, U+6425-6428, U+642a, U+6431-6432, U+6434-6437, U+643d-6442, U+6445, U+6448, U+6450-6452, U+645b-645f, U+6462, U+6465, U+6468, U+646d, U+646f-6471, U+6473, U+6477, U+6479-647d, U+6482-6485, U+6487-6488, U+648c, U+6490, U+6493, U+6496-649a, U+649d, U+64a0, U+64a5, U+64ab-64ac, U+64b1-64b7, U+64b9-64bb, U+64be-64c1, U+64c4, U+64c7, U+64c9-64cb, U+64d0, U+64d4, U+64d7-64d8, U+64da, U+64de, U+64e0-64e2, U+64e4, U+64e9, U+64ec, U+64f0;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-050-5ca989b8.woff2") format('woff2');
  unicode-range: U+622c, U+622e-6230, U+6232, U+6238, U+623b, U+623d-623e, U+6243, U+6246, U+6248-6249, U+624c, U+6255, U+6259, U+625e, U+6260-6261, U+6265-6266, U+626a, U+6271, U+627a, U+627c-627d, U+6283, U+6286, U+6289, U+628e, U+6294, U+629c, U+629e-629f, U+62a1, U+62a8, U+62ba-62bb, U+62bf, U+62c2, U+62c4, U+62c8, U+62ca-62cb, U+62cf, U+62d1, U+62d7, U+62d9-62da, U+62dd, U+62e0-62e1, U+62e3-62e4, U+62e7, U+62eb, U+62ee, U+62f0, U+62f4-62f6, U+6308, U+630a-630e, U+6310, U+6312-6313, U+6317, U+6319, U+631b, U+631d-631f, U+6322, U+6326, U+6329, U+6331-6332, U+6334-6337, U+6339, U+633b-633c, U+633e-6340, U+6343, U+6347, U+634b-634e, U+6354, U+635c-635d, U+6368-6369, U+636d, U+636f-6372, U+6376, U+637a-637b, U+637d, U+6382-6383, U+6387, U+638a-638b, U+638d-638e, U+6391, U+6393-6397, U+6399, U+639b, U+639e-639f, U+63a1, U+63a3-63a4, U+63ac-63ae, U+63b1-63b5;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-051-5eefaa39.woff2") format('woff2');
  unicode-range: U+60ed-60ee, U+60f0-60f1, U+60f4, U+60f6, U+60fa, U+6100, U+6106, U+610d-610e, U+6112, U+6114-6115, U+6119, U+611c, U+6120, U+6122-6123, U+6126, U+6128-6130, U+6136-6137, U+613a, U+613d-613e, U+6144, U+6146-6147, U+614a-614b, U+6151, U+6153, U+6158, U+615a, U+615c-615d, U+615f, U+6161, U+6163-6165, U+616b-616c, U+616e, U+6171, U+6173-6177, U+617e, U+6182, U+6187, U+618a, U+618d-618e, U+6190-6191, U+6194, U+6199-619a, U+619c, U+619f, U+61a1, U+61a3-61a4, U+61a7-61a9, U+61ab-61ad, U+61b2-61b3, U+61b5-61b7, U+61ba-61bb, U+61bf, U+61c3-61c4, U+61c6-61c7, U+61c9-61cb, U+61d0-61d1, U+61d3-61d4, U+61d7, U+61da, U+61df-61e1, U+61e6, U+61ee, U+61f0, U+61f2, U+61f6-61f8, U+61fa, U+61fc-61fe, U+6200, U+6206-6207, U+6209, U+620b, U+620d-620e, U+6213-6215, U+6217, U+6219, U+621b-6223, U+6225-6226;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-052-cdaaeed4.woff2") format('woff2');
  unicode-range: U+5fc4, U+5fc9, U+5fcb, U+5fce-5fd6, U+5fda-5fde, U+5fe1-5fe2, U+5fe4-5fe5, U+5fea, U+5fed-5fee, U+5ff1-5ff3, U+5ff6, U+5ff8, U+5ffb, U+5ffe-5fff, U+6002-6006, U+600a, U+600d, U+600f, U+6014, U+6019, U+601b, U+6020, U+6023, U+6026, U+6029, U+602b, U+602e-602f, U+6031, U+6033, U+6035, U+6039, U+603f, U+6041-6043, U+6046, U+604f, U+6053-6054, U+6058-605b, U+605d-605e, U+6060, U+6063, U+6065, U+6067, U+606a-606c, U+6075, U+6078-6079, U+607b, U+607d, U+607f, U+6083, U+6085-6087, U+608a, U+608c, U+608e-608f, U+6092-6093, U+6095-6097, U+609b-609d, U+60a2, U+60a7, U+60a9-60ab, U+60ad, U+60af-60b1, U+60b3-60b6, U+60b8, U+60bb, U+60bd-60be, U+60c0-60c3, U+60c6-60c9, U+60cb, U+60ce, U+60d3-60d4, U+60d7-60db, U+60dd, U+60e1-60e4, U+60e6, U+60ea, U+60ec;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-053-b3ee068a.woff2") format('woff2');
  unicode-range: U+5e98, U+5e9b, U+5e9d, U+5ea0-5ea5, U+5ea8, U+5eab, U+5eaf, U+5eb3, U+5eb5-5eb6, U+5eb9, U+5ebe, U+5ec1-5ec3, U+5ec6, U+5ec8, U+5ecb-5ecc, U+5ed1-5ed2, U+5ed4, U+5ed9-5edb, U+5edd, U+5edf-5ee0, U+5ee2-5ee3, U+5ee8, U+5eea, U+5eec, U+5eef-5ef0, U+5ef3-5ef4, U+5ef8, U+5efb-5efc, U+5efe-5eff, U+5f01, U+5f07, U+5f0b-5f0e, U+5f10-5f12, U+5f14, U+5f1a, U+5f22, U+5f28-5f29, U+5f2c-5f2d, U+5f35-5f36, U+5f38, U+5f3b-5f43, U+5f45-5f4a, U+5f4c-5f4e, U+5f50, U+5f54, U+5f56-5f59, U+5f5b-5f5f, U+5f61, U+5f63, U+5f65, U+5f67-5f68, U+5f6b, U+5f6e-5f6f, U+5f72-5f78, U+5f7a, U+5f7e-5f7f, U+5f82-5f83, U+5f87, U+5f89-5f8a, U+5f8d, U+5f91, U+5f93, U+5f95, U+5f98-5f99, U+5f9c, U+5f9e, U+5fa0, U+5fa6-5fa9, U+5fac-5fad, U+5faf, U+5fb3-5fb5, U+5fb9, U+5fbc;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-054-c7b4154c.woff2") format('woff2');
  unicode-range: U+5d26-5d27, U+5d2e-5d34, U+5d3c-5d3e, U+5d41-5d44, U+5d46-5d48, U+5d4a-5d4b, U+5d4e, U+5d50, U+5d52, U+5d55-5d58, U+5d5a-5d5d, U+5d68-5d69, U+5d6b-5d6c, U+5d6f, U+5d74, U+5d7f, U+5d82-5d89, U+5d8b-5d8c, U+5d8f, U+5d92-5d93, U+5d99, U+5d9d, U+5db2, U+5db6-5db7, U+5dba, U+5dbc-5dbd, U+5dc2-5dc3, U+5dc6-5dc7, U+5dc9, U+5dcc, U+5dd2, U+5dd4, U+5dd6-5dd8, U+5ddb-5ddc, U+5de3, U+5ded, U+5def, U+5df3, U+5df6, U+5dfa-5dfd, U+5dff-5e00, U+5e07, U+5e0f, U+5e11, U+5e13-5e14, U+5e19-5e1b, U+5e22, U+5e25, U+5e28, U+5e2a, U+5e2f-5e31, U+5e33-5e34, U+5e36, U+5e39-5e3c, U+5e3e, U+5e40, U+5e44, U+5e46-5e48, U+5e4c, U+5e4f, U+5e53-5e54, U+5e57, U+5e59, U+5e5b, U+5e5e-5e5f, U+5e61, U+5e63, U+5e6a-5e6b, U+5e75, U+5e77, U+5e79-5e7a, U+5e7e, U+5e80-5e81, U+5e83, U+5e85, U+5e87, U+5e8b, U+5e91-5e92, U+5e96;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-055-d4b1745d.woff2") format('woff2');
  unicode-range: U+5bec, U+5bee-5bf0, U+5bf2-5bf3, U+5bf5-5bf6, U+5bfe, U+5c02-5c03, U+5c05, U+5c07-5c09, U+5c0b-5c0c, U+5c0e, U+5c10, U+5c12-5c13, U+5c15, U+5c17, U+5c19, U+5c1b-5c1c, U+5c1e-5c1f, U+5c22, U+5c25, U+5c28, U+5c2a-5c2b, U+5c2f-5c30, U+5c37, U+5c3b, U+5c43-5c44, U+5c46-5c47, U+5c4d, U+5c50, U+5c59, U+5c5b-5c5c, U+5c62-5c64, U+5c66, U+5c6c, U+5c6e, U+5c74, U+5c78-5c7e, U+5c80, U+5c83-5c84, U+5c88, U+5c8b-5c8d, U+5c91, U+5c94-5c96, U+5c98-5c99, U+5c9c, U+5c9e, U+5ca1-5ca3, U+5cab-5cac, U+5cb1, U+5cb5, U+5cb7, U+5cba, U+5cbd-5cbf, U+5cc1, U+5cc3-5cc4, U+5cc7, U+5ccb, U+5cd2, U+5cd8-5cd9, U+5cdf-5ce0, U+5ce3-5ce6, U+5ce8-5cea, U+5ced, U+5cef, U+5cf3-5cf4, U+5cf6, U+5cf8, U+5cfd, U+5d00-5d04, U+5d06, U+5d08, U+5d0b-5d0d, U+5d0f-5d13, U+5d15, U+5d17-5d1a, U+5d1d-5d22, U+5d24-5d25;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-056-b9c3b821.woff2") format('woff2');
  unicode-range: U+5aa0, U+5aa3-5aa4, U+5aaa, U+5aae-5aaf, U+5ab1-5ab2, U+5ab4-5ab5, U+5ab7-5aba, U+5abd-5abf, U+5ac3-5ac4, U+5ac6-5ac8, U+5aca-5acb, U+5acd, U+5acf-5ad2, U+5ad4, U+5ad8-5ada, U+5adc, U+5adf-5ae2, U+5ae4, U+5ae6, U+5ae8, U+5aea-5aed, U+5af0-5af3, U+5af5, U+5af9-5afb, U+5afd, U+5b01, U+5b05, U+5b08, U+5b0b-5b0c, U+5b11, U+5b16-5b17, U+5b1b, U+5b21-5b22, U+5b24, U+5b27-5b2e, U+5b30, U+5b32, U+5b34, U+5b36-5b38, U+5b3e-5b40, U+5b43, U+5b45, U+5b4a-5b4b, U+5b51-5b53, U+5b56, U+5b5a-5b5b, U+5b62, U+5b65, U+5b67, U+5b6a-5b6e, U+5b70-5b71, U+5b73, U+5b7a-5b7b, U+5b7f-5b80, U+5b84, U+5b8d, U+5b91, U+5b93-5b95, U+5b9f, U+5ba5-5ba6, U+5bac, U+5bae, U+5bb8, U+5bc0, U+5bc3, U+5bcb, U+5bd0-5bd1, U+5bd4-5bd8, U+5bda-5bdc, U+5be2, U+5be4-5be5, U+5be7, U+5be9, U+5beb;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-057-9e4676ec.woff2") format('woff2');
  unicode-range: U+596a, U+596c-596e, U+5977, U+597b-597c, U+5981, U+598f, U+5997-5998, U+599a, U+599c-599d, U+59a0-59a1, U+59a3-59a4, U+59a7, U+59aa-59ad, U+59af, U+59b2-59b3, U+59b5-59b6, U+59b8, U+59ba, U+59bd-59be, U+59c0-59c1, U+59c3-59c4, U+59c7-59ca, U+59cc-59cd, U+59cf, U+59d2, U+59d5-59d6, U+59d8-59d9, U+59db, U+59dd-59e0, U+59e2-59e7, U+59e9-59eb, U+59ee, U+59f1, U+59f3, U+59f5, U+59f7-59f9, U+59fd, U+5a06, U+5a08-5a0a, U+5a0c-5a0d, U+5a11-5a13, U+5a15-5a16, U+5a1a-5a1b, U+5a21-5a23, U+5a2d-5a2f, U+5a32, U+5a38, U+5a3c, U+5a3e-5a45, U+5a47, U+5a4a, U+5a4c-5a4d, U+5a4f-5a51, U+5a53, U+5a55-5a57, U+5a5e, U+5a60, U+5a62, U+5a65-5a67, U+5a6a, U+5a6c-5a6d, U+5a72-5a73, U+5a75-5a76, U+5a79-5a7c, U+5a81-5a84, U+5a8c, U+5a8e, U+5a93, U+5a96-5a97, U+5a9c, U+5a9e;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-058-a4352839.woff2") format('woff2');
  unicode-range: U+5820, U+5822-5823, U+5825-5826, U+582c, U+582f, U+5831, U+583a, U+583d, U+583f-5842, U+5844-5846, U+5848, U+584a, U+584d, U+5852, U+5857, U+5859-585a, U+585c-585d, U+5862, U+5868-5869, U+586c-586d, U+586f-5873, U+5875, U+5879, U+587d-587e, U+5880-5881, U+5888-588a, U+588d, U+5892, U+5896-5898, U+589a, U+589c-589d, U+58a0-58a1, U+58a3, U+58a6, U+58a9, U+58ab-58ae, U+58b0, U+58b3, U+58bb-58bf, U+58c2-58c3, U+58c5-58c8, U+58ca, U+58cc, U+58ce, U+58d1-58d3, U+58d5, U+58d8-58d9, U+58de-58df, U+58e2, U+58e9, U+58ec, U+58ef, U+58f1-58f2, U+58f5, U+58f7-58f8, U+58fa, U+58fd, U+5900, U+5902, U+5906, U+5908-590c, U+590e, U+5910, U+5914, U+5919, U+591b, U+591d-591e, U+5920, U+5922-5925, U+5928, U+592c-592d, U+592f, U+5932, U+5936, U+593c, U+593e, U+5940-5942, U+5944, U+594c-594d, U+5950, U+5953, U+5958, U+595a, U+5961, U+5966-5968;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-059-3d08d687.woff2") format('woff2');
  unicode-range: U+56f9, U+56fc, U+56ff-5700, U+5703-5704, U+5709-570a, U+570c-570d, U+570f, U+5712-5713, U+5718-5719, U+571c, U+571e, U+5725, U+5727, U+5729-572a, U+572c, U+572e-572f, U+5734-5735, U+5739, U+573b, U+5741, U+5743, U+5745, U+5749, U+574c-574d, U+575c, U+5763, U+5768-5769, U+576b, U+576d-576e, U+5770, U+5773, U+5775, U+5777, U+577b-577c, U+5785-5786, U+5788, U+578c, U+578e-578f, U+5793-5795, U+5799-57a1, U+57a3-57a4, U+57a6-57aa, U+57ac-57ad, U+57af-57b2, U+57b4-57b6, U+57b8-57b9, U+57bd-57bf, U+57c2, U+57c4-57c8, U+57cc-57cd, U+57cf, U+57d2, U+57d5-57de, U+57e1-57e2, U+57e4-57e5, U+57e7, U+57eb, U+57ed, U+57ef, U+57f4-57f8, U+57fc-57fd, U+5800-5801, U+5803, U+5805, U+5807, U+5809, U+580b-580e, U+5811, U+5814, U+5819, U+581b-581f;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-060-c2fecd74.woff2") format('woff2');
  unicode-range: U+55f5-55f7, U+55fb, U+55fe, U+5600-5601, U+5605-5606, U+5608, U+560c-560d, U+560f, U+5614, U+5616-5617, U+561a, U+561c, U+561e, U+5621-5625, U+5627, U+5629, U+562b-5630, U+5636, U+5638-563a, U+563c, U+5640-5642, U+5649, U+564c-5650, U+5653-5655, U+5657-565b, U+5660, U+5663-5664, U+5666, U+566b, U+566f-5671, U+5673-567c, U+567e, U+5684-5687, U+568c, U+568e-5693, U+5695, U+5697, U+569b-569c, U+569e-569f, U+56a1-56a2, U+56a4-56a9, U+56ac-56af, U+56b1, U+56b4, U+56b6-56b8, U+56bf, U+56c1-56c3, U+56c9, U+56cd, U+56d1, U+56d4, U+56d6-56d9, U+56dd, U+56df, U+56e1, U+56e3-56e6, U+56e8-56ec, U+56ee-56ef, U+56f1-56f3, U+56f5, U+56f7-56f8;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-061-71bc80d6.woff2") format('woff2');
  unicode-range: U+550f, U+5511-5514, U+5516-5517, U+5519, U+551b, U+551d-551e, U+5520, U+5522-5523, U+5526-5527, U+552a-552c, U+5530, U+5532-5535, U+5537-5538, U+553b-5541, U+5543-5544, U+5547-5549, U+554b, U+554d, U+5550, U+5553, U+5555-5558, U+555b-555f, U+5567-5569, U+556b-5572, U+5574-5577, U+557b-557c, U+557e-557f, U+5581, U+5583, U+5585-5586, U+5588, U+558b-558c, U+558e-5591, U+5593, U+5599-559a, U+559f, U+55a5-55a6, U+55a8-55ac, U+55ae, U+55b0-55b3, U+55b6, U+55b9-55ba, U+55bc-55be, U+55c4, U+55c6-55c7, U+55c9, U+55cc-55d2, U+55d4-55db, U+55dd-55df, U+55e1, U+55e3-55e6, U+55ea-55ee, U+55f0-55f3;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-062-17fe7461.woff2") format('woff2');
  unicode-range: U+53e7-53e9, U+53f1, U+53f4-53f5, U+53fa-5400, U+5402, U+5405-5407, U+540b, U+540f, U+5412, U+5414, U+5416, U+5418-541a, U+541d, U+5420-5423, U+5425, U+5429-542a, U+542d-542e, U+5431-5433, U+5436, U+543d, U+543f, U+5442-5443, U+5449, U+544b-544c, U+544e, U+5451-5454, U+5456, U+5459, U+545b-545c, U+5461, U+5463-5464, U+546a-5472, U+5474, U+5476-5478, U+547a, U+547e-5484, U+5486, U+548a, U+548d-548e, U+5490-5491, U+5494, U+5497-5499, U+549b, U+549d, U+54a1-54a7, U+54a9, U+54ab, U+54ad, U+54b4-54b5, U+54b9, U+54bb, U+54be-54bf, U+54c2-54c3, U+54c9-54cc, U+54cf-54d0, U+54d3, U+54d5-54d6, U+54d9-54da, U+54dc-54de, U+54e2, U+54e7, U+54f3-54f4, U+54f8-54f9, U+54fd-54ff, U+5501, U+5504-5506, U+550c-550e;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-063-b8092edb.woff2") format('woff2');
  unicode-range: U+5289, U+528b, U+528d, U+528f, U+5291-5293, U+529a, U+52a2, U+52a6-52a7, U+52ac-52ad, U+52af, U+52b4-52b5, U+52b9, U+52bb-52bc, U+52be, U+52c1, U+52c5, U+52ca, U+52cd, U+52d0, U+52d6-52d7, U+52d9, U+52db, U+52dd-52de, U+52e0, U+52e2-52e3, U+52e5, U+52e7-52f0, U+52f2-52f3, U+52f5-52f9, U+52fb-52fc, U+5302, U+5304, U+530b, U+530d, U+530f-5310, U+5315, U+531a, U+531c-531d, U+5321, U+5323, U+5326, U+532e-5331, U+5338, U+533c-533e, U+5344-5345, U+534b-534d, U+5350, U+5354, U+5358, U+535d-535f, U+5363, U+5368-5369, U+536c, U+536e-536f, U+5372, U+5379-537b, U+537d, U+538d-538e, U+5390, U+5393-5394, U+5396, U+539b-539d, U+53a0-53a1, U+53a3-53a5, U+53a9, U+53ad-53ae, U+53b0, U+53b2-53b3, U+53b5-53b8, U+53bc, U+53be, U+53c1, U+53c3-53c7, U+53ce-53cf, U+53d2-53d3, U+53d5, U+53da, U+53de-53df, U+53e1-53e2;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-064-7b00c444.woff2") format('woff2');
  unicode-range: U+5104, U+5106-5107, U+5109-510b, U+510d, U+510f-5110, U+5113, U+5115, U+5117-5118, U+511a-511c, U+511e-511f, U+5121, U+5128, U+512b-512d, U+5131-5135, U+5137-5139, U+513c, U+5140, U+5142, U+5147, U+514c, U+514e-5150, U+5155-5158, U+5162, U+5169, U+5172, U+517f, U+5181-5184, U+5186-5187, U+518b, U+518f, U+5191, U+5195-5197, U+519a, U+51a2-51a3, U+51a6-51ab, U+51ad-51ae, U+51b1, U+51b4, U+51bc-51bd, U+51bf, U+51c3, U+51c7-51c8, U+51ca-51cb, U+51cd-51ce, U+51d4, U+51d6, U+51db-51dc, U+51e6, U+51e8-51eb, U+51f1, U+51f5, U+51fc, U+51ff, U+5202, U+5205, U+5208, U+520b, U+520d-520e, U+5215-5216, U+5228, U+522a, U+522c-522d, U+5233, U+523c-523d, U+523f-5240, U+5245, U+5247, U+5249, U+524b-524c, U+524e, U+5250, U+525b-525f, U+5261, U+5263-5264, U+5270, U+5273, U+5275, U+5277, U+527d, U+527f, U+5281-5285, U+5287;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-065-2d1d4a3b.woff2") format('woff2');
  unicode-range: U+4fd1, U+4fd3, U+4fda-4fdc, U+4fdf-4fe0, U+4fe2-4fe4, U+4fe6, U+4fe8, U+4feb-4fed, U+4ff3, U+4ff5-4ff6, U+4ff8, U+4ffe, U+5001, U+5005-5006, U+5009, U+500c, U+500f, U+5013-5018, U+501b-501e, U+5022-5025, U+5027-5028, U+502b-502e, U+5030, U+5033-5034, U+5036-5039, U+503b, U+5041-5043, U+5045-5046, U+5048-504a, U+504c-504e, U+5051, U+5053, U+5055-5057, U+505b, U+505e, U+5060, U+5062-5063, U+5067, U+506a, U+506c, U+5070-5072, U+5074-5075, U+5078, U+507b, U+507d-507e, U+5080, U+5088-5089, U+5091-5092, U+5095, U+5097-509e, U+50a2-50a3, U+50a5-50a7, U+50a9, U+50ad, U+50b3, U+50b5, U+50b7, U+50ba, U+50be, U+50c4-50c5, U+50c7, U+50ca, U+50cd, U+50d1, U+50d5-50d6, U+50da, U+50de, U+50e5-50e6, U+50ec-50ee, U+50f0-50f1, U+50f3, U+50f9-50fb, U+50fe-5102;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-066-cec0b195.woff2") format('woff2');
  unicode-range: U+4ea3, U+4ea5, U+4eb0-4eb1, U+4eb3-4eb6, U+4eb8-4eb9, U+4ebb-4ebe, U+4ec2-4ec4, U+4ec8-4ec9, U+4ecc, U+4ecf-4ed0, U+4ed2, U+4eda-4edb, U+4edd-4ee1, U+4ee6-4ee9, U+4eeb, U+4eee-4eef, U+4ef3-4ef5, U+4ef8-4efa, U+4efc, U+4f00, U+4f03-4f05, U+4f08-4f09, U+4f0b, U+4f0e, U+4f12-4f13, U+4f15, U+4f1b, U+4f1d, U+4f21-4f22, U+4f25, U+4f27-4f29, U+4f2b-4f2e, U+4f31-4f33, U+4f36-4f37, U+4f39, U+4f3e, U+4f40-4f41, U+4f43, U+4f47-4f49, U+4f54, U+4f57-4f58, U+4f5d-4f5e, U+4f61-4f62, U+4f64-4f65, U+4f67, U+4f6a, U+4f6e-4f6f, U+4f72, U+4f74-4f7e, U+4f80-4f82, U+4f84, U+4f89-4f8a, U+4f8e-4f98, U+4f9e, U+4fa1, U+4fa5, U+4fa9-4faa, U+4fac, U+4fb3, U+4fb6-4fb8, U+4fbd, U+4fc2, U+4fc5-4fc6, U+4fcd-4fce, U+4fd0;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-067-f06affe0.woff2") format('woff2');
  unicode-range: U+3129, U+3131, U+3134, U+3137, U+3139, U+3141-3142, U+3145, U+3147-3148, U+314b, U+314d-314e, U+315c, U+3160-3161, U+3163-3164, U+3186, U+318d, U+3192, U+3196-3198, U+319e-319f, U+3220-3229, U+3231, U+3268, U+3297, U+3299, U+32a3, U+338e-338f, U+3395, U+339c-339e, U+33c4, U+33d1-33d2, U+33d5, U+3434, U+34dc, U+34ee, U+353e, U+355d, U+3566, U+3575, U+3592, U+35a0-35a1, U+35ad, U+35ce, U+36a2, U+36ab, U+38a8, U+3dab, U+3de7, U+3deb, U+3e1a, U+3f1b, U+3f6d, U+4495, U+4723, U+48fa, U+4ca3, U+4db6-4dbf, U+4e02, U+4e04-4e06, U+4e0c, U+4e0f, U+4e15, U+4e17, U+4e1f-4e21, U+4e26, U+4e29, U+4e2c, U+4e2f, U+4e31, U+4e35, U+4e37, U+4e3c, U+4e3f-4e42, U+4e44, U+4e46-4e47, U+4e57, U+4e5a-4e5c, U+4e64-4e65, U+4e67, U+4e69, U+4e6d, U+4e78, U+4e7f-4e82, U+4e85, U+4e87, U+4e8a, U+4e8d, U+4e93, U+4e96, U+4e98-4e99, U+4e9c, U+4e9e-4ea0, U+4ea2;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-068-1ba6279e.woff2") format('woff2');
  unicode-range: U+279f-27a2, U+27a4-27a5, U+27a8, U+27b0, U+27b2-27b3, U+27b9, U+27e8-27e9, U+27f6, U+2800, U+28ec, U+2913, U+2921-2922, U+2934-2935, U+2a2f, U+2b05-2b07, U+2b50, U+2b55, U+2bc5-2bc6, U+2e1c-2e1d, U+2ebb, U+2f00, U+2f08, U+2f24, U+2f2d, U+2f2f-2f30, U+2f3c, U+2f45, U+2f63-2f64, U+2f74, U+2f83, U+2f8f, U+2fbc, U+3003, U+3005-3007, U+3012-3013, U+301c-301e, U+3021, U+3023-3024, U+3030, U+3034-3035, U+3041, U+3043, U+3045, U+3047, U+3049, U+3056, U+3058, U+305c, U+305e, U+3062, U+306c, U+3074, U+3077, U+307a, U+307c-307d, U+3080, U+308e, U+3090-3091, U+3099-309b, U+309d-309e, U+30a5, U+30bc, U+30be, U+30c2, U+30c5, U+30cc, U+30d8, U+30e2, U+30e8, U+30ee, U+30f0-30f2, U+30f4-30f6, U+30fd-30fe, U+3105-3126, U+3128;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-069-128a8cbc.woff2") format('woff2');
  unicode-range: U+2651-2655, U+2658, U+265a-265b, U+265d-265e, U+2660-266d, U+266f, U+267b, U+2688, U+2693-2696, U+2698-2699, U+269c, U+26a0-26a1, U+26a4, U+26aa-26ab, U+26bd-26be, U+26c4-26c5, U+26d4, U+26e9, U+26f0-26f1, U+26f3, U+26f5, U+26fd, U+2702, U+2704-2706, U+2708-270f, U+2712-2718, U+271a-271b, U+271d, U+271f, U+2721, U+2724-2730, U+2732-2734, U+273a, U+273d-2744, U+2747-2749, U+274c, U+274e-274f, U+2753-2757, U+275b, U+275d-275e, U+2763, U+2765-2767, U+276e-276f, U+2776-277e, U+2780-2782, U+278a-278c, U+278e, U+2794-2796, U+279c;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-070-00cb739b.woff2") format('woff2');
  unicode-range: U+2550-2551, U+2554, U+2557, U+255a-255b, U+255d, U+255f-2560, U+2562-2563, U+2565-2567, U+2569-256a, U+256c-2572, U+2579, U+2580-2595, U+25a1, U+25a3, U+25a9-25ad, U+25b0, U+25b3-25bb, U+25bd-25c2, U+25c4, U+25c8-25cb, U+25cd, U+25d0-25d1, U+25d4-25d5, U+25d8, U+25dc-25e6, U+25ea-25eb, U+25ef, U+25fe, U+2600-2604, U+2609, U+260e-260f, U+2611, U+2614-2615, U+2618, U+261a-2620, U+2622-2623, U+262a, U+262d-2630, U+2639-2640, U+2642, U+2648-2650;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-071-b5412a2b.woff2") format('woff2');
  unicode-range: U+23f0, U+23f3, U+2445, U+2449, U+2465-2471, U+2474-249b, U+24b8, U+24c2, U+24c7, U+24c9, U+24d0, U+24d2, U+24d4, U+24d8, U+24dd-24de, U+24e3, U+24e6, U+24e8, U+2500-2509, U+250b-2526, U+2528-2534, U+2536-2537, U+253b-2548, U+254a-254b;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-072-bc6669f9.woff2") format('woff2');
  unicode-range: U+207c-2083, U+208c-208e, U+2092, U+20a6, U+20a8-20ad, U+20af, U+20b1, U+20b4-20b5, U+20b8-20ba, U+20bd, U+20db, U+20dd, U+20e0, U+20e3, U+2105, U+2109, U+2113, U+2116-2117, U+2120-2121, U+2126, U+212b, U+2133, U+2139, U+2194, U+2196-2199, U+21a0, U+21a9-21aa, U+21af, U+21b3, U+21b5, U+21ba-21bb, U+21c4, U+21ca, U+21cc, U+21d0-21d4, U+21e1, U+21e6-21e9, U+2200, U+2202, U+2205-2208, U+220f, U+2211-2212, U+2215, U+2217-2219, U+221d-2220, U+2223, U+2225, U+2227-222b, U+222e, U+2234-2237, U+223c-223d, U+2248, U+224c, U+2252, U+2256, U+2260-2261, U+2266-2267, U+226a-226b, U+226e-226f, U+2282-2283, U+2295, U+2297, U+2299, U+22a5, U+22b0-22b1, U+22b9, U+22bf, U+22c5-22c6, U+22ef, U+2304, U+2307, U+230b, U+2312-2314, U+2318, U+231a-231b, U+2323, U+239b, U+239d-239e, U+23a0, U+23e9;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-073-02931e91.woff2") format('woff2');
  unicode-range: U+1d34-1d35, U+1d38-1d3a, U+1d3c, U+1d3f-1d40, U+1d49, U+1d4e-1d4f, U+1d52, U+1d55, U+1d5b, U+1d5e, U+1d9c, U+1da0, U+1dc4-1dc5, U+1e69, U+1e73, U+1ea0-1ea9, U+1eab-1ead, U+1eaf, U+1eb1, U+1eb3, U+1eb5, U+1eb7, U+1eb9, U+1ebb, U+1ebd-1ebe, U+1ec0-1ec3, U+1ec5-1ec6, U+1ec9-1ecd, U+1ecf-1ed3, U+1ed5, U+1ed7-1edf, U+1ee1, U+1ee3, U+1ee5-1eeb, U+1eed, U+1eef-1ef1, U+1ef3, U+1ef7, U+1ef9, U+1f62, U+1f7b, U+2001-2002, U+2004-2006, U+2009-200a, U+200c-2012, U+2015-2016, U+201a, U+201e-2021, U+2023, U+2025, U+2028, U+202a-202d, U+202f-2030, U+2032-2033, U+2035, U+2038, U+203c, U+203e-203f, U+2043-2044, U+2049, U+204d-204e, U+2060-2061, U+2070, U+2074-2078, U+207a-207b;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-074-7a37a31e.woff2") format('woff2');
  unicode-range: U+2ae-2b3, U+2b5-2bf, U+2c2-2c3, U+2c6-2d1, U+2d8-2da, U+2dc, U+2e1-2e3, U+2e5, U+2eb, U+2ee-2f0, U+2f2-2f7, U+2f9-2ff, U+302-30d, U+311, U+31b, U+321-325, U+327-329, U+32b-32c, U+32e-32f, U+331-339, U+33c-33d, U+33f, U+348, U+352, U+35c, U+35e-35f, U+361, U+363, U+368, U+36c, U+36f, U+530-540, U+55d-55e, U+561, U+563, U+565, U+56b, U+56e-579;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-075-ff88cfbb.woff2") format('woff2');
  unicode-range: U+176-17f, U+192, U+194, U+19a-19b, U+19d, U+1a0-1a1, U+1a3-1a4, U+1aa, U+1ac-1ad, U+1af-1bf, U+1d2, U+1d4, U+1d6, U+1d8, U+1da, U+1dc, U+1e3, U+1e7, U+1e9, U+1ee, U+1f0-1f1, U+1f3, U+1f5-1ff, U+219-21b, U+221, U+223-226, U+228, U+22b, U+22f, U+231, U+234-237, U+23a-23b, U+23d, U+250-252, U+254-255, U+259-25e, U+261-263, U+265, U+268, U+26a-26b, U+26f-277, U+279, U+27b-280, U+282-283, U+285, U+28a, U+28c, U+28f, U+292, U+294-296, U+298-29a, U+29c, U+29f, U+2a1-2a4, U+2a6-2a7, U+2a9, U+2ab;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-076-a329c466.woff2") format('woff2');
  unicode-range: U+a1-a4, U+a6-a8, U+aa, U+ac, U+af, U+b1, U+b3-b6, U+b8-ba, U+bc-d6, U+d8-de, U+e6, U+eb, U+ee-f0, U+f5, U+f7-f8, U+fb, U+fd-100, U+102, U+104-107, U+10d, U+10f-112, U+115, U+117, U+119, U+11b, U+11e-11f, U+121, U+123, U+125-127, U+129-12a, U+12d, U+12f-13f, U+141-142, U+144, U+146, U+14b-14c, U+14f-153, U+158-15b, U+15e-160, U+163-165, U+168-16a, U+16d-175;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-077-3cacf3a3.woff2") format('woff2');
  unicode-range: U+221a, U+2264, U+2464, U+25a0, U+3008, U+4e10, U+512a, U+5152, U+5201, U+5241, U+5340, U+5352, U+549a, U+54b2, U+54c6, U+54d7, U+54e1, U+5509, U+55c5, U+5618, U+5716, U+576f, U+5784, U+57a2, U+589f, U+5a20, U+5a25, U+5a29, U+5a34, U+5a7f, U+5ad6, U+5b09, U+5b5c, U+5bc7, U+5be6, U+5c27, U+5d2d, U+5dcd, U+5f1b, U+5f37, U+604d, U+6055, U+6073, U+60eb, U+61ff, U+62ce, U+62ed, U+6345, U+6390, U+63b0, U+63b7, U+64ae, U+64c2, U+64d2, U+6556, U+663c, U+667e, U+66d9, U+66f8, U+6756, U+6789, U+689d, U+68f1, U+695e, U+6975, U+6a1f, U+6b0a, U+6b61, U+6b87, U+6c5d, U+6c7e, U+6c92, U+6d31, U+6df9, U+6e0d, U+6e2d, U+6f31, U+6f3e, U+70b3, U+70bd, U+70ca, U+70e8, U+725f, U+733f, U+7396, U+739f, U+7459, U+74a7, U+75a1, U+75f0, U+76cf, U+76d4, U+7729, U+77aa, U+77b0, U+77e3, U+780c, U+78d5, U+7941, U+7977, U+797a, U+79c3, U+7a20, U+7a92, U+7b71, U+7bf1, U+7c9f, U+7eb6, U+7eca, U+7ef7, U+7f07, U+7f09, U+7f15, U+7f81, U+7fb9, U+8038, U+8098, U+80b4, U+8110, U+814b-814c, U+816e, U+818a, U+8205, U+8235, U+828b, U+82a5, U+82b7, U+82d4, U+82db, U+82df, U+8317, U+8338, U+8385-8386, U+83c1, U+83cf, U+8537, U+853b, U+854a, U+8715, U+8783, U+892a, U+8a71, U+8bb3, U+8d2e, U+8d58, U+8dbe, U+8f67, U+8fab, U+8fc4, U+8fe6, U+9023, U+9084, U+9091, U+916a, U+91c9, U+91dc, U+94b3, U+9502, U+9523, U+9551, U+956f, U+960e, U+962a, U+962e, U+9647, U+96f3, U+9739, U+97a0, U+97ed, U+983b, U+985e, U+988a, U+99ac, U+9a6f, U+9a87, U+9a8b, U+9ab7, U+9abc, U+9ac5, U+9e25, U+e608, U+e621, U+ff06, U+ff14-ff16;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-078-d827b688.woff2") format('woff2');
  unicode-range: U+161, U+926, U+928, U+939, U+93f-940, U+94d, U+e17, U+e22, U+e44, U+25c7, U+25ce, U+2764, U+3009, U+3016-3017, U+4e4d, U+4e53, U+4f5a, U+4f70, U+4fae, U+4fd8, U+4ffa, U+5011, U+501a, U+51c4, U+5225, U+547b, U+5495, U+54e8, U+54ee, U+5594, U+55d3, U+55dc, U+55fd, U+560e, U+565c, U+5662, U+5669, U+566c, U+56bc, U+5742, U+5824, U+5834, U+598a, U+5992, U+59a9, U+5a04, U+5ac9, U+5b75, U+5b7d, U+5bc5, U+5c49, U+5c90, U+5e1c, U+5e27, U+5e2b, U+5e37, U+5e90, U+618b, U+61f5, U+620a, U+620c, U+6273, U+62c7, U+62f7, U+6320, U+6342, U+6401-6402, U+6413, U+6512, U+655b, U+65a7, U+65f1, U+65f7, U+665f, U+6687, U+66a7, U+673d, U+67b8, U+6854, U+68d8, U+68fa, U+696d, U+6a02, U+6a0a, U+6a80, U+6b7c, U+6bd9, U+6c2e, U+6c76, U+6cf8, U+6d4a, U+6d85, U+6e24, U+6e32, U+6ec7, U+6f88, U+700f, U+701a, U+7078, U+707c, U+70ac, U+70c1, U+72e9, U+7409, U+7422, U+745a, U+7480, U+74a8, U+752b, U+7574, U+7656, U+7699, U+7737, U+785d, U+78be, U+79b9, U+7a3d, U+7a91, U+7a9f, U+7ae3, U+7b77, U+7c3f, U+7d1a, U+7d50, U+7d93, U+8042, U+808b, U+8236, U+82b8-82b9, U+82ef, U+8309, U+836b, U+83ef, U+8431, U+85c9, U+865e, U+868c, U+8759, U+8760, U+8845, U+89ba, U+8a2a, U+8aaa, U+8c41, U+8d2c, U+8d4e, U+8e66, U+8e6d, U+8eaf, U+902e, U+914b, U+916e, U+919b, U+949b, U+94a0, U+94b0, U+9541-9542, U+9556, U+95eb, U+95f5, U+964b, U+968b, U+96cc-96cd, U+96cf, U+9713, U+9890, U+98a8, U+9985, U+9992, U+9a6d, U+9a81, U+9a86, U+9ab8, U+9ca4, U+e606-e607, U+e60a, U+e60c, U+e60e, U+fe0f, U+ff02, U+ff1e;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-079-83c1dda0.woff2") format('woff2');
  unicode-range: U+10c, U+627-629, U+639, U+644, U+64a, U+203b, U+2265, U+2463, U+2573, U+25b2, U+3448-3449, U+4e1e, U+4e5e, U+4f3a, U+4f5f, U+4fea, U+5026, U+508d, U+516e, U+5189, U+5254, U+5288, U+52d8, U+52fa, U+5306, U+5308, U+5364, U+5384, U+53ed, U+543c, U+5450, U+5455, U+5466, U+54c4, U+5578, U+55a7, U+561f, U+5631, U+572d, U+575f, U+57ae, U+57e0, U+5830, U+594e, U+5984, U+5993, U+5bdd, U+5c0d, U+5c7f, U+5c82, U+5e62, U+5ed3, U+5f08, U+607a, U+60bc, U+625b, U+6292, U+62e2, U+6363, U+6467, U+6714, U+675e, U+6771, U+67a2, U+67ff, U+6805, U+68a7, U+68e0, U+6930, U+6986, U+69a8, U+69df, U+6a44, U+6a5f, U+6c13, U+6c1f, U+6c22, U+6c2f, U+6c40, U+6c81, U+6c9b, U+6ca5, U+6da4, U+6df3, U+6e85, U+6eba, U+6ed5, U+6f13, U+6f33, U+6f62, U+715e, U+72c4, U+73d1, U+7405, U+7487, U+7578, U+75a4, U+75eb, U+7693, U+7738, U+7741, U+776b, U+7792, U+77a7, U+77a9, U+77b3, U+788c, U+7984, U+79a7, U+79e4, U+7a1a, U+7a57, U+7aa6, U+7b0b, U+7b5d, U+7c27, U+7c7d, U+7caa, U+7cd9, U+7cef, U+7eda, U+7ede, U+7f24, U+803f, U+8046, U+80fa, U+81fb, U+8207, U+8258, U+8335, U+8339, U+8354, U+840e, U+85b0, U+85fb, U+8695, U+86aa, U+8717, U+8749, U+874c, U+8996, U+89bd, U+89c5, U+8bdb, U+8bf5, U+8c5a, U+8cec, U+8d3f, U+8d9f, U+8e44, U+8fed, U+9005, U+9019, U+9082, U+90af, U+90dd, U+90e1, U+90f8, U+916f, U+9176, U+949e, U+94a7, U+94c2, U+9525, U+9580, U+95dc, U+96e2, U+96fb, U+9704, U+9a7c, U+9a7f, U+9b41, U+9ca8, U+9cc4, U+9cde, U+9e92, U+9ede, U+9f9a, U+e60b, U+e610, U+ff10, U+ff13, U+ff3b, U+ff3d, U+f012b;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-080-0b35a58f.woff2") format('woff2');
  unicode-range: U+60, U+631, U+2606, U+3014-3015, U+309c, U+33a1, U+4e52, U+4ec6, U+4f86, U+4f8d, U+4fde, U+4fef, U+500b, U+502a, U+515c, U+518a, U+51a5, U+51f3, U+5243, U+52c9, U+52d5, U+53a2, U+53ee, U+54ce, U+54fa, U+54fc, U+5580, U+5587, U+563f, U+56da, U+5792, U+5815, U+5960, U+59d7, U+5b78, U+5b9b, U+5be1, U+5c4e, U+5c51, U+5c6f, U+5c9a, U+5cfb, U+5d16, U+5ed6, U+5f27, U+5f6a, U+609a, U+60df, U+6168, U+61c8, U+6236, U+62f1, U+62fd, U+631a, U+6328, U+632b, U+6346, U+638f, U+63a0, U+63c9, U+655e, U+6590, U+6615, U+6627, U+66ae, U+66e6, U+66f0, U+67da, U+67ec, U+6813, U+6816, U+6869, U+6893, U+68ad, U+68f5, U+6977, U+6984, U+69db, U+6b72, U+6bb7, U+6ce3, U+6cfb, U+6d47, U+6da1, U+6dc4, U+6e43, U+6eaf, U+6eff, U+6f8e, U+7011, U+7063, U+7076, U+7096, U+70ba, U+70db, U+70ef, U+7119-711a, U+7172, U+718f, U+7194, U+727a, U+72d9, U+72ed, U+7325, U+73ae, U+73ba, U+73c0, U+73fe, U+7410, U+7426, U+7455, U+7554, U+7576, U+75ae, U+75b9, U+762b, U+766b, U+7682, U+7750, U+7779, U+7784, U+77eb, U+77ee, U+78f7, U+79e9, U+7a79, U+7b1b, U+7b28, U+7bf7, U+7db2, U+7ec5, U+7eee, U+7f14, U+7f1a, U+7fe1, U+8087, U+809b, U+81b3, U+8231, U+830e, U+835f, U+83e9, U+849c, U+851a, U+868a, U+8718, U+874e, U+8822, U+8910, U+8944, U+8a3b, U+8bb6, U+8bbc, U+8e72, U+8f9c, U+900d, U+904b, U+904e, U+9063, U+90a2, U+90b9, U+9119, U+94f2, U+952f, U+9576-9577, U+9593, U+95f8, U+961c, U+969b, U+96a7, U+96c1, U+9716, U+9761, U+97ad, U+97e7, U+98a4, U+997a, U+9a73, U+9b44, U+9e3d, U+9ecf, U+9ed4, U+ff11-ff12, U+fffd;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-081-9287d698.woff2") format('woff2');
  unicode-range: U+2003, U+2193, U+2462, U+4e19, U+4e2b, U+4e36, U+4ea8, U+4ed1, U+4ed7, U+4f51, U+4f63, U+4f83, U+50e7, U+5112, U+5167, U+51a4, U+51b6, U+5239, U+5265, U+532a, U+5351, U+537f, U+5401, U+548f, U+5492, U+54af, U+54b3, U+54bd, U+54d1, U+54df, U+554f, U+5564, U+5598, U+5632, U+56a3, U+56e7, U+574e, U+575d-575e, U+57d4, U+584c, U+58e4, U+5937, U+5955, U+5a05, U+5a1f, U+5a49, U+5ac2, U+5c39, U+5c61, U+5d0e, U+5de9, U+5e9a, U+5eb8, U+5f0a, U+5f13, U+5f6c, U+5f8c, U+603c, U+608d, U+611b, U+6127, U+62a0, U+62d0, U+634f, U+635e, U+63fd, U+6577, U+658b, U+65bc, U+660a, U+6643, U+6656, U+6703, U+6760, U+67af, U+67c4, U+67e0, U+6817, U+68cd, U+690e, U+6960, U+69b4, U+6a71, U+6aac, U+6b67, U+6bb4, U+6c55, U+6c70, U+6c82, U+6ca6, U+6cb8, U+6cbe, U+6ede, U+6ee5, U+6f4d, U+6f84, U+6f9c, U+7115, U+7121, U+722a, U+7261, U+7272, U+7280, U+72f8, U+7504, U+754f, U+75d8, U+767c, U+76ef, U+778e, U+77bb, U+77f6, U+786b, U+78b1, U+7948, U+7985, U+79be, U+7a83, U+7a8d, U+7eac, U+7eef, U+7ef8, U+7efd, U+7f00, U+803d, U+8086, U+810a, U+8165, U+819d, U+81a8, U+8214, U+829c, U+831c, U+832b, U+8367, U+83e0, U+83f1, U+8403, U+846b, U+8475, U+84b2, U+8513, U+8574, U+85af, U+86d9, U+86db, U+8acb, U+8bbd, U+8be0-8be1, U+8c0e, U+8d29, U+8d50, U+8d63, U+8f7f, U+9032, U+9042, U+90b1, U+90b5, U+9165, U+9175, U+94a6, U+94c5, U+950c, U+9610, U+9631, U+9699, U+973e, U+978d, U+97ec, U+97f6, U+984c, U+987d, U+9882, U+9965, U+996a, U+9972, U+9a8f, U+9ad3, U+9ae6, U+9cb8, U+9edb, U+e600, U+e60f, U+e611, U+ff05, U+ff0b;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-082-76626a2b.woff2") format('woff2');
  unicode-range: U+5e, U+2190, U+250a, U+25bc, U+25cf, U+4e56, U+4ea9, U+4f3d, U+4f6c, U+4f88, U+4fa8, U+4fcf, U+5029, U+5188, U+51f9, U+5203, U+524a, U+5256, U+529d, U+5375, U+53db, U+541f, U+5435, U+5457, U+548b, U+54c7, U+54d4, U+54e9, U+556a, U+5589, U+55bb, U+55e8, U+55ef, U+563b, U+566a, U+576a, U+58f9, U+598d, U+599e, U+59a8, U+5a9b, U+5ae3, U+5bb0, U+5bde, U+5c4c, U+5c60, U+5d1b, U+5deb, U+5df7, U+5e18, U+5f26, U+5f64, U+601c, U+6084, U+60e9, U+614c, U+6208, U+621a, U+6233, U+6254, U+62d8, U+62e6, U+62ef, U+6323, U+632a, U+633d, U+6361, U+6405, U+640f, U+6614, U+6642, U+6657, U+67a3, U+6808, U+683d, U+6850, U+6897, U+68b3, U+68b5, U+68d5, U+6a58, U+6b47, U+6b6a, U+6c28, U+6c90, U+6ca7, U+6cf5, U+6d51, U+6da9, U+6dc7, U+6dd1, U+6e0a, U+6e5b, U+6e9c, U+6f47, U+6f6d, U+70ad, U+70f9, U+710a, U+7130, U+71ac, U+745f, U+7476, U+7490, U+7529, U+7538, U+75d2, U+7696, U+76b1, U+76fc, U+777f, U+77dc, U+789f, U+795b, U+79bd, U+79c9, U+7a3b, U+7a46, U+7aa5, U+7ad6, U+7ca5, U+7cb9, U+7cdf, U+7d6e, U+7f06, U+7f38, U+7fa1, U+7fc1, U+8015, U+803b, U+80a2, U+80aa, U+8116, U+813e, U+82bd, U+8305, U+8328, U+8346, U+846c, U+8549, U+859b, U+8611, U+8680, U+87f9, U+884d, U+8877, U+888d, U+88d4, U+898b, U+8a79, U+8a93, U+8c05, U+8c0d, U+8c26, U+8d1e, U+8d31, U+8d81, U+8e22, U+8e81, U+8f90, U+8f96, U+90ca, U+916c, U+917f, U+9187, U+918b, U+9499, U+94a9, U+9524, U+9540, U+958b, U+9600, U+9640, U+96b6, U+96c7, U+96ef, U+98d9, U+9976, U+997f, U+9a74, U+9a84, U+9c8d, U+9e26, U+9e9f, U+ad6d, U+c5b4, U+d55c, U+ff0f;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-083-f69e26c4.woff2") format('woff2');
  unicode-range: U+b0, U+2191, U+2460-2461, U+25c6, U+300e-300f, U+4e1b, U+4e7e, U+4ed5, U+4ef2, U+4f10, U+4f1e, U+4f50, U+4fa6, U+4faf, U+5021, U+50f5, U+5179, U+5180, U+51d1, U+522e, U+52a3, U+52c3, U+52cb, U+5300, U+5319, U+5320, U+5349, U+5395, U+53d9, U+541e, U+5428, U+543e, U+54b1, U+54c0, U+54d2, U+570b, U+5858, U+58f6, U+5974, U+59a5, U+59e8, U+59ec, U+5a36, U+5a9a, U+5ab3, U+5b99, U+5baa, U+5ce1, U+5d14, U+5d4c, U+5dc5, U+5de2, U+5e99, U+5e9e, U+5f18, U+5f66, U+5f70, U+6070, U+60d5, U+60e7, U+6101, U+611a, U+61be, U+6241, U+6252, U+626f, U+6296, U+62bc, U+62cc, U+6380, U+63a9, U+644a, U+6454, U+64a9, U+64b8, U+6500, U+6572, U+65a5, U+65a9, U+65ec, U+660f, U+6749, U+6795, U+67ab, U+68da, U+6912, U+6bbf, U+6bef, U+6cab, U+6cca, U+6ccc, U+6cfc, U+6d3d, U+6d78, U+6dee, U+6e17, U+6e34, U+6e83, U+6ea2, U+6eb6, U+6f20, U+6fa1, U+707f, U+70d8, U+70eb, U+714c, U+714e, U+7235, U+7239, U+73ca, U+743c, U+745c, U+7624, U+763e, U+76f2, U+77db, U+77e9, U+780d, U+7838, U+7845, U+78ca, U+796d, U+7a84, U+7aed, U+7b3c, U+7eb2, U+7f05, U+7f20, U+7f34, U+7f62, U+7fc5, U+7fd8, U+7ff0, U+800d, U+8036, U+80ba, U+80be, U+80c0-80c1, U+8155, U+817a, U+8180, U+81e3, U+8206, U+8247, U+8270, U+8299, U+82ad, U+8304, U+8393, U+83b9, U+840d, U+8427, U+8469, U+8471, U+84c4, U+84ec, U+853d, U+8681-8682, U+8721, U+8854, U+88d5, U+88f9, U+8bc0, U+8c0a, U+8c29, U+8c2d, U+8d41, U+8dea, U+8eb2, U+8f9f, U+903b, U+903e, U+9102, U+9493, U+94a5, U+94f8, U+95f7, U+9706, U+9709, U+9774, U+98a0, U+9e64, U+9f9f, U+e603;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-084-37a1ef98.woff2") format('woff2');
  unicode-range: U+200b, U+2103, U+4e18, U+4e27-4e28, U+4e38, U+4e59, U+4e8f, U+4ead, U+4ec7, U+4fe9, U+503a, U+5085, U+5146, U+51af, U+51f8, U+52ab, U+5339, U+535c, U+5378, U+538c, U+5398, U+53f9, U+5415, U+5475, U+54aa, U+54ac, U+54b8, U+5582, U+5760, U+5764, U+57cb, U+5835, U+5885, U+5951, U+5983, U+59da, U+5a77, U+5b5d, U+5b5f, U+5bb5, U+5bc2, U+5be8, U+5bfa, U+5c2c, U+5c34, U+5c41, U+5c48, U+5c65, U+5cad, U+5e06, U+5e42, U+5ef7, U+5f17, U+5f25, U+5f6d, U+5f79, U+6028, U+6064, U+6068, U+606d, U+607c, U+6094, U+6109, U+6124, U+6247, U+626d, U+6291, U+629a, U+62ac, U+62b9, U+62fe, U+6324, U+6349, U+6367, U+6398, U+6495, U+64a4, U+64b0, U+64bc, U+64ce, U+658c, U+65ed, U+6602, U+6674, U+6691, U+66a8, U+674f, U+679a, U+67ef, U+67f4, U+680b, U+6876, U+68a8, U+6a59, U+6a61, U+6b20, U+6bc5, U+6d12, U+6d46, U+6d8c, U+6dc0, U+6e14, U+6e23, U+6f06, U+7164, U+716e, U+7199, U+71e5, U+72ac, U+742a, U+755c, U+75ab, U+75b2, U+75f4, U+7897, U+78b3, U+78c5, U+7978, U+79fd, U+7a74, U+7b4b, U+7b5b, U+7ece, U+7ed2, U+7ee3, U+7ef3, U+7f50, U+7f55, U+7f9e, U+7fe0, U+809d, U+8106, U+814a, U+8154, U+817b, U+818f, U+81c2, U+81ed, U+821f, U+82a6, U+82d1, U+8302, U+83c7, U+83ca, U+845b, U+848b, U+84c9, U+85e4, U+86ee, U+8700, U+8774, U+8881, U+8c1c, U+8c79, U+8d2a, U+8d3c, U+8eba, U+8f70, U+8fa9, U+8fb1, U+900a, U+9017, U+901d, U+9022, U+906e, U+946b, U+94dd, U+94ed, U+953b, U+95ef, U+95fa, U+95fd, U+96c0, U+971e, U+9753, U+9756, U+97e6, U+9881, U+9887, U+9b4f, U+9e2d, U+9f0e, U+e601-e602, U+e604-e605, U+ff5c;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-085-db50a1df.woff2") format('woff2');
  unicode-range: U+24, U+4e08, U+4e43, U+4e4f, U+4ef0, U+4f2a, U+507f, U+50ac, U+50bb, U+5151, U+51bb, U+51f6, U+51fd, U+5272, U+52fe, U+5362, U+53c9, U+53d4, U+53e0, U+543b, U+54f2, U+5507, U+5524, U+558a, U+55b5, U+561b, U+56ca, U+5782, U+57c3, U+5893, U+5915, U+5949, U+5962, U+59ae, U+59dc, U+59fb, U+5bd3, U+5c38, U+5cb3, U+5d07, U+5d29, U+5de1, U+5dfe, U+5e15, U+5eca, U+5f2f, U+5f7c, U+5fcc, U+6021, U+609f, U+60f9, U+6108, U+6148, U+6155, U+6170, U+61d2, U+6251, U+629b, U+62ab, U+62e8, U+62f3, U+6321, U+6350, U+6566, U+659c, U+65e8, U+6635, U+6655, U+6670, U+66f9, U+6734, U+679d, U+6851, U+6905, U+6b49, U+6b96, U+6c1b, U+6c41, U+6c6a, U+6c83, U+6cf3, U+6d9b, U+6dcb, U+6e1d, U+6e20-6e21, U+6eaa, U+6ee4, U+6ee9, U+6f58, U+70e4, U+722c, U+7262, U+7267, U+72b9, U+72e0, U+72ee, U+72f1, U+7334, U+73ab, U+7433, U+7470, U+758f, U+75d5, U+764c, U+7686, U+76c6, U+76fe, U+7720, U+77e2, U+7802, U+7816, U+788d, U+7891, U+7a00, U+7a9d, U+7b52, U+7bad, U+7c98, U+7cca, U+7eba, U+7eea, U+7ef5, U+7f1d, U+7f69, U+806a, U+809a, U+80bf, U+80c3, U+81c0, U+820c, U+82ac, U+82af, U+82cd, U+82d7, U+838e, U+839e, U+8404, U+84b8, U+852c, U+8587, U+8650, U+8679, U+86c7, U+8702, U+87ba, U+886b-886c, U+8870, U+8c10, U+8c23, U+8c6b, U+8d3e, U+8d4b-8d4c, U+8d64, U+8d6b, U+8d74, U+8e29, U+8f69, U+8f74, U+8fb0, U+8fdf, U+901b, U+9038, U+9093, U+9171, U+9489, U+94ae, U+94c3, U+9508, U+9510, U+9601, U+9614, U+964c, U+9675, U+971c, U+97f5, U+9888, U+98d8, U+9971, U+9aa4, U+9e3f, U+9e45, U+9e4f, U+9e70, U+9f7f, U+e715;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-086-482df31f.woff2") format('woff2');
  unicode-range: U+a5, U+2192, U+2605, U+4e11, U+4e22, U+4e32, U+4f0d, U+4f0f, U+4f69, U+4ff1, U+50b2, U+5154, U+51dd, U+51f0, U+5211, U+5269, U+533f, U+5366-5367, U+5389, U+5413, U+5440, U+5446, U+5561, U+574a, U+5751, U+57ab, U+5806, U+5821, U+582a, U+58f3, U+5938, U+5948, U+5978, U+59d1, U+5a03, U+5a07, U+5ac1, U+5acc, U+5ae9, U+5bb4, U+5bc4, U+5c3f, U+5e3d, U+5e7d, U+5f92, U+5faa, U+5fe0, U+5ffd, U+6016, U+60a0, U+60dc, U+60e8, U+614e, U+6212, U+6284, U+62c6, U+62d3-62d4, U+63f4, U+642c, U+6478, U+6491-6492, U+64e6, U+6591, U+65a4, U+664b, U+6735, U+6746, U+67f1, U+67f3, U+6842, U+68af, U+68c9, U+68cb, U+6a31, U+6b3a, U+6bc1, U+6c0f, U+6c27, U+6c57, U+6cc4, U+6ce5, U+6d2a, U+6d66, U+6d69, U+6daf, U+6e58, U+6ecb, U+6ef4, U+707e, U+7092, U+70ab, U+71d5, U+7275, U+7384, U+73b2, U+7434, U+74e6, U+74f7, U+75bc, U+76c8, U+76d0, U+7709, U+77ac, U+7855, U+78a7, U+78c1, U+7a77, U+7b79, U+7c92, U+7cae, U+7cd5, U+7ea4, U+7eb5, U+7ebd, U+7f5a, U+7fd4, U+7ffc, U+8083, U+8096, U+80a0, U+80d6, U+80de, U+8102, U+8109, U+810f, U+8179, U+8292, U+82b3, U+8352, U+8361, U+83cc, U+841d, U+8461, U+8482, U+8521, U+857e, U+85aa, U+866b, U+8776, U+8896, U+889c, U+88f8, U+8a9e, U+8bc8, U+8bf8, U+8c0b, U+8c28, U+8d2b, U+8d2f, U+8d37, U+8d3a, U+8d54, U+8dc3, U+8dcc, U+8df5, U+8e0f, U+8e48, U+8f86, U+8f88, U+8f9e, U+8fc1, U+8fc8, U+8feb, U+9065, U+90a6, U+90aa, U+90bb, U+90c1, U+94dc, U+9521, U+9676, U+96d5, U+970d, U+9897, U+997c, U+9a70, U+9a76, U+9a9a, U+9ad4, U+9e23, U+9e7f, U+9f3b, U+e675, U+e6b9, U+ffe5;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-087-33cba0ad.woff2") format('woff2');
  unicode-range: U+300c-300d, U+4e54, U+4e58, U+4e95, U+4ec1, U+4f2f, U+4f38, U+4fa3, U+4fca, U+503e, U+5141, U+5144, U+517c, U+51cc, U+51ed, U+5242, U+52b2, U+52d2, U+52e4, U+540a, U+5439, U+5448, U+5496, U+54ed, U+5565, U+5761, U+5766, U+58ee, U+593a, U+594b, U+594f, U+5954, U+5996, U+59c6, U+59ff, U+5b64, U+5bff, U+5c18, U+5c1d, U+5c97, U+5ca9, U+5cb8, U+5e9f, U+5ec9, U+5f04, U+5f7b, U+5fa1, U+5fcd, U+6012, U+60a6, U+60ac, U+60b2, U+60ef, U+626e, U+6270, U+6276, U+62d6, U+62dc, U+6316, U+632f, U+633a, U+6355, U+63aa, U+6447, U+649e, U+64c5, U+654c, U+65c1, U+65cb, U+65e6, U+6606, U+6731, U+675c, U+67cf, U+67dc, U+6846, U+6b8b, U+6beb, U+6c61, U+6c88, U+6cbf, U+6cdb, U+6cea, U+6d45, U+6d53, U+6d74, U+6d82, U+6da8, U+6db5, U+6deb, U+6eda, U+6ee8, U+6f0f, U+706d, U+708e, U+70ae, U+70bc, U+70c2, U+70e6, U+7237-7238, U+72fc, U+730e, U+731b, U+739b, U+73bb, U+7483, U+74dc, U+74f6, U+7586, U+7626, U+775b, U+77ff, U+788e, U+78b0, U+7956, U+7965, U+79e6, U+7af9, U+7bee, U+7c97, U+7eb1, U+7eb7, U+7ed1, U+7ed5, U+7f6a, U+7f72, U+7fbd, U+8017, U+808c, U+80a9, U+80c6, U+80ce, U+8150, U+8170, U+819c, U+820d, U+8230, U+8239, U+827e, U+8377, U+8389, U+83b2, U+8428, U+8463, U+867e, U+88c2, U+88d9, U+8986, U+8bca, U+8bde, U+8c13, U+8c8c, U+8d21, U+8d24, U+8d56, U+8d60, U+8d8b, U+8db4, U+8e2a, U+8f68, U+8f89, U+8f9b, U+8fa8, U+8fbd, U+9003, U+90ce, U+90ed, U+9189, U+94bb, U+9505, U+95f9, U+963b, U+9655, U+966a, U+9677, U+96fe, U+9896, U+99a8, U+9a71, U+9a82, U+9a91, U+9b45, U+9ece, U+9f20, U+feff, U+ff0d;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-088-d0e837ac.woff2") format('woff2');
  unicode-range: U+4e4c, U+4e88, U+4ea1, U+4ea6, U+4ed3-4ed4, U+4eff, U+4f30, U+4fa7, U+4fc4, U+4fd7, U+500d, U+504f, U+5076-5077, U+517d, U+5192, U+51c9, U+51ef, U+5238, U+5251, U+526a, U+52c7, U+52df, U+52ff, U+53a6, U+53a8, U+53ec, U+5410, U+559d, U+55b7, U+5634, U+573e, U+5783, U+585e, U+586b, U+58a8, U+5999, U+59d3, U+5a1c, U+5a46, U+5b54-5b55, U+5b85, U+5b8b, U+5b8f, U+5bbf, U+5bd2, U+5c16, U+5c24, U+5e05, U+5e45, U+5e7c, U+5e84, U+5f03, U+5f1f, U+5f31, U+5f84, U+5f90, U+5fbd, U+5fc6, U+5fd9, U+5fe7, U+6052, U+6062, U+6089, U+60a3, U+60d1, U+6167, U+622a, U+6234, U+624e, U+6269, U+626c, U+62b5, U+62d2, U+6325, U+63e1, U+643a, U+6446, U+6562, U+656c, U+65e2, U+65fa, U+660c, U+6628, U+6652, U+6668, U+6676, U+66fc, U+66ff, U+6717, U+676d, U+67aa, U+67d4, U+6843, U+6881, U+68d2, U+695a, U+69fd, U+6a2a, U+6b8a, U+6c60, U+6c64, U+6c9f, U+6caa, U+6cc9, U+6ce1, U+6cfd, U+6d1b, U+6d1e, U+6d6e, U+6de1, U+6e10, U+6e7f, U+6f5c, U+704c, U+7070, U+7089, U+70b8, U+718a, U+71c3, U+723d, U+732a, U+73cd, U+7518, U+756a, U+75af, U+75be, U+75c7, U+76d2, U+76d7, U+7763, U+78e8, U+795d, U+79df, U+7c4d, U+7d2f, U+7ee9, U+7f13, U+7f8a, U+8000, U+8010, U+80af, U+80f6, U+80f8, U+8212, U+8273, U+82f9, U+83ab, U+83b1, U+83f2, U+8584, U+871c, U+8861, U+888b, U+88c1, U+88e4, U+8bd1, U+8bf1, U+8c31, U+8d5a, U+8d75-8d76, U+8de8, U+8f85, U+8fa3, U+8fc5, U+9006, U+903c, U+904d, U+9075, U+9178, U+9274, U+950b, U+9526, U+95ea, U+9636, U+9686, U+978b, U+987f, U+9a7e, U+9b42, U+9e1f, U+9ea6, U+9f13, U+9f84, U+ff5e;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-089-ba170504.woff2") format('woff2');
  unicode-range: U+23, U+3d, U+4e01, U+4e39, U+4e73, U+4ecd, U+4ed9, U+4eea, U+4f0a, U+4f1f, U+4f5b, U+4fa0, U+4fc3, U+501f, U+50a8, U+515a, U+5175, U+51a0, U+51c0, U+51e1, U+51e4, U+5200, U+520a, U+5224, U+523a, U+52aa, U+52b1, U+52b3, U+5348, U+5353, U+5360, U+5371, U+5377, U+539a, U+541b, U+5434, U+547c, U+54e6, U+5510, U+5531, U+5609, U+56f0, U+56fa, U+5733, U+574f, U+5851, U+5854, U+5899, U+58c1, U+592e, U+5939, U+5976, U+5986, U+59bb, U+5a18, U+5a74, U+5b59, U+5b87, U+5b97, U+5ba0, U+5bab, U+5bbd-5bbe, U+5bf8, U+5c0a, U+5c3a, U+5c4a, U+5e16, U+5e1d, U+5e2d, U+5e8a, U+6015, U+602a, U+6050, U+6069, U+6162, U+61c2, U+6293, U+6297, U+62b1, U+62bd, U+62df, U+62fc, U+6302, U+635f, U+638c, U+63ed, U+6458, U+6469, U+6563, U+6620, U+6653, U+6696-6697, U+66dd, U+675f, U+676f-6770, U+67d0, U+67d3, U+684c, U+6865, U+6885, U+68b0, U+68ee, U+690d, U+6b23, U+6b32, U+6bd5, U+6c89, U+6d01, U+6d25, U+6d89, U+6da6, U+6db2, U+6df7, U+6ed1, U+6f02, U+70c8, U+70df, U+70e7, U+7126, U+7236, U+7259, U+731c, U+745e, U+74e3, U+751a, U+751c, U+7532, U+7545, U+75db, U+7761, U+7a0d, U+7b51, U+7ca4, U+7cd6, U+7d2b, U+7ea0, U+7eb9, U+7ed8, U+7f18, U+7f29, U+8033, U+804a, U+80a4-80a5, U+80e1, U+817f, U+829d, U+82e6, U+8336, U+840c, U+8499, U+864e, U+8651, U+865a, U+88ad, U+89e6, U+8bd7, U+8bfa, U+8c37, U+8d25, U+8d38, U+8ddd, U+8fea, U+9010, U+9012, U+906d, U+907f-9080, U+90d1, U+9177, U+91ca, U+94fa, U+9501, U+9634-9635, U+9694, U+9707, U+9738, U+9769, U+9a7b, U+9a97, U+9aa8, U+9b3c, U+9c81, U+9ed8;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-090-f7f16eaf.woff2") format('woff2');
  unicode-range: U+26, U+3c, U+d7, U+4e4e, U+4e61, U+4e71, U+4ebf, U+4f26, U+5012, U+51ac, U+51b0, U+51b2, U+51b7, U+5218, U+521a, U+5220, U+5237, U+523b, U+526f, U+5385, U+53bf, U+53e5, U+53eb, U+53f3, U+53f6, U+5409, U+5438, U+54c8, U+54e5, U+552f, U+5584, U+5706, U+5723, U+5750, U+575a, U+5987-5988, U+59b9, U+59d0, U+59d4, U+5b88, U+5b9c, U+5bdf, U+5bfb, U+5c01, U+5c04, U+5c3e, U+5c4b, U+5c4f, U+5c9b, U+5cf0, U+5ddd, U+5de6, U+5de8, U+5e01, U+5e78, U+5e7b, U+5e9c, U+5ead, U+5ef6, U+5f39, U+5fd8, U+6000, U+6025, U+604b, U+6076, U+613f, U+6258, U+6263, U+6267, U+6298, U+62a2, U+62e5, U+62ec, U+6311, U+6377, U+6388-6389, U+63a2, U+63d2, U+641e, U+642d, U+654f, U+6551, U+6597, U+65cf, U+65d7, U+65e7, U+6682, U+66f2, U+671d, U+672b, U+6740, U+6751, U+6768, U+6811, U+6863, U+6982, U+6bd2, U+6cf0, U+6d0b, U+6d17, U+6d59, U+6dd8, U+6dfb, U+6e7e, U+6f6e, U+6fb3, U+706f, U+719f, U+72af, U+72d0, U+72d7, U+732b, U+732e, U+7389, U+73e0, U+7530, U+7687, U+76d6, U+76db, U+7840, U+786c, U+79cb, U+79d2, U+7a0e, U+7a33, U+7a3f, U+7a97, U+7ade-7adf, U+7b26, U+7e41, U+7ec3, U+7f3a, U+8089, U+80dc, U+811a, U+8131, U+8138, U+821e, U+8349, U+83dc, U+8457, U+867d, U+86cb, U+8a89, U+8ba8, U+8bad, U+8bef, U+8bfe, U+8c6a, U+8d1d, U+8d4f, U+8d62, U+8dd1, U+8df3, U+8f6e, U+8ff9, U+900f, U+9014, U+9057, U+9192, U+91ce, U+9488, U+94a2, U+9547, U+955c, U+95f2, U+9644, U+964d, U+96c4-96c5, U+96e8, U+96f6-96f7, U+9732, U+9759, U+9760, U+987a, U+989c, U+9910, U+996d-996e, U+9b54, U+9e21, U+9ebb, U+9f50;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-091-26e32adf.woff2") format('woff2');
  unicode-range: U+7e, U+2026, U+4e03, U+4e25, U+4e30, U+4e34, U+4e45, U+4e5d, U+4e89, U+4eae, U+4ed8, U+4f11, U+4f19, U+4f24, U+4f34, U+4f59, U+4f73, U+4f9d, U+4fb5, U+5047, U+505c, U+5170, U+519c, U+51cf, U+5267, U+5356, U+5374, U+5382, U+538b, U+53e6, U+5426, U+542b, U+542f, U+5462, U+5473, U+554a, U+5566, U+5708, U+571f, U+5757, U+57df, U+57f9, U+5802, U+590f, U+591c, U+591f, U+592b, U+5965, U+5979, U+5a01, U+5a5a, U+5b63, U+5b69, U+5b81, U+5ba1, U+5ba3, U+5c3c, U+5c42, U+5c81, U+5de7, U+5dee, U+5e0c, U+5e10, U+5e55, U+5e86, U+5e8f, U+5ea7, U+5f02, U+5f52, U+5f81, U+5ff5, U+60ca, U+60e0, U+6279, U+62c5, U+62ff, U+63cf, U+6444, U+64cd, U+653b, U+65bd, U+65e9, U+665a, U+66b4, U+66fe, U+6728, U+6742, U+677e, U+67b6, U+680f, U+68a6, U+68c0, U+699c, U+6b4c, U+6b66, U+6b7b, U+6bcd, U+6bdb, U+6c38, U+6c47, U+6c49, U+6cb3, U+6cb9, U+6ce2, U+6d32, U+6d3e, U+6d4f, U+6e56, U+6fc0, U+7075, U+7206, U+725b, U+72c2, U+73ed, U+7565, U+7591, U+7597, U+75c5, U+76ae, U+76d1, U+76df, U+7834, U+7968, U+7981, U+79c0, U+7a7f, U+7a81, U+7ae5, U+7b14, U+7c89, U+7d27, U+7eaf, U+7eb3, U+7eb8, U+7ec7, U+7ee7, U+7eff, U+7f57, U+7ffb, U+805a, U+80a1, U+822c, U+82cf, U+82e5, U+8363, U+836f, U+84dd, U+878d, U+8840, U+8857, U+8863, U+8865, U+8b66, U+8bb2, U+8bda, U+8c01, U+8c08, U+8c46, U+8d1f, U+8d35, U+8d5b, U+8d5e, U+8da3, U+8ddf, U+8f93, U+8fdd, U+8ff0, U+8ff7, U+8ffd, U+9000, U+9047, U+9152, U+949f, U+94c1, U+94f6, U+9646, U+9648, U+9669, U+969c, U+96ea, U+97e9, U+987b, U+987e, U+989d, U+9970, U+9986, U+9c7c, U+9c9c;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-092-00efb2ac.woff2") format('woff2');
  unicode-range: U+25, U+4e14, U+4e1d, U+4e3d, U+4e49, U+4e60, U+4e9a, U+4eb2, U+4ec5, U+4efd, U+4f3c, U+4f4f, U+4f8b, U+4fbf, U+5019, U+5145, U+514b, U+516b, U+516d, U+5174, U+5178, U+517b, U+5199, U+519b, U+51b3, U+51b5, U+5207, U+5212, U+5219, U+521d, U+52bf, U+533b, U+5343, U+5347, U+534a, U+536b, U+5370, U+53e4, U+53f2, U+5403, U+542c, U+547d, U+54a8, U+54cd, U+54ea, U+552e, U+56f4, U+5747, U+575b, U+5883, U+589e, U+5931, U+5947, U+5956-5957, U+5a92, U+5b83, U+5ba4, U+5bb3, U+5bcc, U+5c14, U+5c1a, U+5c3d, U+5c40, U+5c45, U+5c5e, U+5df4, U+5e72, U+5e95, U+5f80, U+5f85, U+5fb7, U+5fd7, U+601d, U+626b, U+627f, U+62c9, U+62cd, U+6309, U+63a7, U+6545, U+65ad, U+65af, U+65c5, U+666e, U+667a, U+670b, U+671b, U+674e, U+677f, U+6781, U+6790, U+6797, U+6821, U+6838-6839, U+697c, U+6b27, U+6b62, U+6bb5, U+6c7d, U+6c99, U+6d4b, U+6d4e, U+6d6a, U+6e29, U+6e2f, U+6ee1, U+6f14, U+6f2b, U+72b6, U+72ec, U+7387, U+7533, U+753b, U+76ca, U+76d8, U+7701, U+773c, U+77ed, U+77f3, U+7814, U+793c, U+79bb, U+79c1, U+79d8, U+79ef, U+79fb, U+7a76, U+7b11, U+7b54, U+7b56, U+7b97, U+7bc7, U+7c73, U+7d20, U+7eaa, U+7ec8, U+7edd, U+7eed, U+7efc, U+7fa4, U+804c, U+8058, U+80cc, U+8111, U+817e, U+826f, U+8303, U+843d, U+89c9, U+89d2, U+8ba2, U+8bbf, U+8bc9, U+8bcd, U+8be6, U+8c22, U+8c61, U+8d22, U+8d26-8d27, U+8d8a, U+8f6f, U+8f7b, U+8f83, U+8f91, U+8fb9, U+8fd4, U+8fdc, U+9002, U+94b1, U+9519, U+95ed, U+961f, U+9632-9633, U+963f, U+968f-9690, U+96be, U+9876, U+9884, U+98de, U+9988, U+9999, U+9ec4, U+ff1b;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-093-398ca58f.woff2") format('woff2');
  unicode-range: U+2b, U+40, U+3000, U+300a-300b, U+4e16, U+4e66, U+4e70, U+4e91-4e92, U+4e94, U+4e9b, U+4ec0, U+4eca, U+4f01, U+4f17-4f18, U+4f46, U+4f4e, U+4f9b, U+4fee, U+503c, U+5065, U+50cf, U+513f, U+5148, U+518d, U+51c6, U+51e0, U+5217, U+529e-529f, U+5341, U+534f, U+5361, U+5386, U+53c2, U+53c8, U+53cc, U+53d7-53d8, U+53ea, U+5404, U+5411, U+5417, U+5427, U+5468, U+559c, U+5668, U+56e0, U+56e2, U+56ed, U+5740, U+57fa, U+58eb, U+5904, U+592a, U+59cb, U+5a31, U+5b58, U+5b9d, U+5bc6, U+5c71, U+5dde, U+5df1, U+5e08, U+5e26, U+5e2e, U+5e93, U+5e97, U+5eb7, U+5f15, U+5f20, U+5f3a, U+5f62, U+5f69, U+5f88, U+5f8b, U+5fc5, U+600e, U+620f, U+6218, U+623f, U+627e, U+628a, U+62a4, U+62db, U+62e9, U+6307, U+6362, U+636e, U+64ad, U+6539, U+653f, U+6548, U+6574, U+6613, U+6625, U+663e, U+666f, U+672a, U+6750, U+6784, U+6a21, U+6b3e, U+6b65, U+6bcf, U+6c11, U+6c5f, U+6df1, U+706b, U+7167, U+724c, U+738b, U+73a9, U+73af, U+7403, U+7537, U+754c, U+7559, U+767d, U+7740, U+786e, U+795e, U+798f, U+79f0, U+7aef, U+7b7e, U+7bb1, U+7ea2, U+7ea6, U+7ec4, U+7ec6, U+7ecd, U+7edc, U+7ef4, U+8003, U+80b2, U+81f3-81f4, U+822a, U+827a, U+82f1, U+83b7, U+8425, U+89c2, U+89c8, U+8ba9, U+8bb8, U+8bc6, U+8bd5, U+8be2, U+8be5, U+8bed, U+8c03, U+8d23, U+8d2d, U+8d34, U+8d70, U+8db3, U+8fbe, U+8fce, U+8fd1, U+8fde, U+9001, U+901f-9020, U+90a3, U+914d, U+91c7, U+94fe, U+9500, U+952e, U+9605, U+9645, U+9662, U+9664, U+9700, U+9752, U+975e, U+97f3, U+9879, U+9886, U+98df, U+9a6c, U+9a8c, U+9ed1, U+9f99;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-094-df70d627.woff2") format('woff2');
  unicode-range: U+4e, U+201c-201d, U+3010-3011, U+4e07, U+4e1c, U+4e24, U+4e3e, U+4e48, U+4e50, U+4e5f, U+4e8b-4e8c, U+4ea4, U+4eab-4eac, U+4ecb, U+4ece, U+4ed6, U+4ee3, U+4ef6-4ef7, U+4efb, U+4f20, U+4f55, U+4f7f, U+4fdd, U+505a, U+5143, U+5149, U+514d, U+5171, U+5177, U+518c, U+51fb, U+521b, U+5229, U+522b, U+52a9, U+5305, U+5317, U+534e, U+5355, U+5357, U+535a, U+5373, U+539f, U+53bb, U+53ca, U+53cd, U+53d6, U+53e3, U+53f0, U+5458, U+5546, U+56db, U+573a, U+578b, U+57ce, U+58f0, U+590d, U+5934, U+5973, U+5b57, U+5b8c, U+5b98, U+5bb9, U+5bfc, U+5c06, U+5c11, U+5c31, U+5c55, U+5df2, U+5e03, U+5e38, U+5e76, U+5e94, U+5efa, U+5f71, U+5f97, U+5feb, U+6001, U+603b, U+60f3, U+611f, U+6216, U+624d, U+6253, U+6295, U+6301, U+6392, U+641c, U+652f, U+653e, U+6559, U+6599, U+661f, U+671f, U+672f, U+6761, U+67e5, U+6807, U+6837, U+683c, U+6848, U+6b22, U+6b64, U+6bd4, U+6c14, U+6c34, U+6c42, U+6ca1, U+6d41, U+6d77, U+6d88, U+6e05, U+6e38, U+6e90, U+7136, U+7231, U+7531, U+767e, U+76ee, U+76f4, U+771f, U+7801, U+793a, U+79cd, U+7a0b, U+7a7a, U+7acb, U+7ae0, U+7b2c, U+7b80, U+7ba1, U+7cbe, U+7d22, U+7ea7, U+7ed3, U+7ed9, U+7edf, U+7f16, U+7f6e, U+8001, U+800c, U+8272, U+8282, U+82b1, U+8350, U+88ab, U+88c5, U+897f, U+89c1, U+89c4, U+89e3, U+8a00, U+8ba1, U+8ba4, U+8bae-8bb0, U+8bbe, U+8bc1, U+8bc4, U+8bfb, U+8d28, U+8d39, U+8d77, U+8d85, U+8def, U+8eab, U+8f66, U+8f6c, U+8f7d, U+8fd0, U+9009, U+90ae, U+90fd, U+91cc-91cd, U+91cf, U+95fb, U+9650, U+96c6, U+9891, U+98ce, U+ff1f;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-095-2fe277b5.woff2") format('woff2');
  unicode-range: U+d, U+3e, U+5f, U+7c, U+a0, U+a9, U+4e09-4e0b, U+4e0d-4e0e, U+4e13, U+4e1a, U+4e2a, U+4e3a-4e3b, U+4e4b, U+4e86, U+4e8e, U+4ea7, U+4eba, U+4ee4-4ee5, U+4eec, U+4f1a, U+4f4d, U+4f53, U+4f5c, U+4f60, U+4fe1, U+5165, U+5168, U+516c, U+5173, U+5176, U+5185, U+51fa, U+5206, U+5230, U+5236, U+524d, U+529b, U+52a0-52a1, U+52a8, U+5316, U+533a, U+53cb, U+53d1, U+53ef, U+53f7-53f8, U+5408, U+540c-540e, U+544a, U+548c, U+54c1, U+56de, U+56fd-56fe, U+5728, U+5730, U+5907, U+5916, U+591a, U+5927, U+5929, U+597d, U+5982, U+5b50, U+5b66, U+5b89, U+5b9a, U+5b9e, U+5ba2, U+5bb6, U+5bf9, U+5c0f, U+5de5, U+5e02, U+5e73-5e74, U+5e7f, U+5ea6, U+5f00, U+5f0f, U+5f53, U+5f55, U+5fae, U+5fc3, U+6027, U+606f, U+60a8, U+60c5, U+610f, U+6210-6211, U+6237, U+6240, U+624b, U+6280, U+62a5, U+63a5, U+63a8, U+63d0, U+6536, U+6570, U+6587, U+65b9, U+65e0, U+65f6, U+660e, U+662d, U+662f, U+66f4, U+6700, U+670d, U+672c, U+673a, U+6743, U+6765, U+679c, U+682a, U+6b21, U+6b63, U+6cbb, U+6cd5, U+6ce8, U+6d3b, U+70ed, U+7247-7248, U+7269, U+7279, U+73b0, U+7406, U+751f, U+7528, U+7535, U+767b, U+76f8, U+770b, U+77e5, U+793e, U+79d1, U+7ad9, U+7b49, U+7c7b, U+7cfb, U+7ebf, U+7ecf, U+7f8e, U+8005, U+8054, U+80fd, U+81ea, U+85cf, U+884c, U+8868, U+8981, U+89c6, U+8bba, U+8bdd, U+8bf4, U+8bf7, U+8d44, U+8fc7, U+8fd8-8fd9, U+8fdb, U+901a, U+9053, U+90e8, U+91d1, U+957f, U+95e8, U+95ee, U+95f4, U+9762, U+9875, U+9898, U+9996, U+9ad8, U+ff01, U+ff08-ff09;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-096-824242af.woff2") format('woff2');
  unicode-range: U+20-22, U+27-2a, U+2c-3b, U+3f, U+41-4d, U+4f-5d, U+61-7b, U+7d, U+ab, U+ae, U+b2, U+b7, U+bb, U+df-e5, U+e7-ea, U+ec-ed, U+f1-f4, U+f6, U+f9-fa, U+fc, U+101, U+103, U+113, U+12b, U+148, U+14d, U+16b, U+1ce, U+1d0, U+300-301, U+1ebf, U+1ec7, U+2013-2014, U+2022, U+2027, U+2039-203a, U+2122, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-3055, U+3057, U+3059-305b, U+305d, U+305f-3061, U+3063-306b, U+306d-3073, U+3075-3076, U+3078-3079, U+307b, U+307e-307f, U+3081-308d, U+308f, U+3092-3093, U+30a1-30a4, U+30a6-30bb, U+30bd, U+30bf-30c1, U+30c3-30c4, U+30c6-30cb, U+30cd-30d7, U+30d9-30e1, U+30e3-30e7, U+30e9-30ed, U+30ef, U+30f3, U+30fb-30fc, U+3127, U+4e00, U+4e2d, U+65b0, U+65e5, U+6708-6709, U+70b9, U+7684, U+7f51, U+ff0c, U+ff0e, U+ff1a;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-097-60ea4f4e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-098-7831da27.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-099-a345c804.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-serif-sc-400-100-bd3db00b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* fonts-farsi.css */
/* Vazirmatn (SIL Open Font License 1.1, Saber Rastikerdar; github.com/rastikerdar/vazirmatn), for Farsi text taught on
   FluentPlex: the variable font (all weights), served from our own assets like the other fonts (fonts.css). Only
   Farsi's theme names it (font-arabic), so other pages never download it. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/vazirmatn-variable-ed922868.woff2") format('woff2-variations');
}


/* fonts-interface-arabic.css */
/* Fonts for the site in Arabic (its interface, not the Arabic being learned, which stays Amiri): FluentPlex's
   IBM Plex Sans Arabic (text) and Noto Kufi Arabic (headings); ArabicGenius's Readex Pro and Reem Kufi. All under the
   SIL Open Font License 1.1; Arabic characters only (from Google Fonts' own files), so Latin text keeps the theme's
   fonts. InterfaceLocale.with_interface_fonts puts them first in --font-sans and --font-serif. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-arabic-400-cca48952.woff2") format('woff2');
  
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-arabic-500-4f6d4c5d.woff2") format('woff2');
  
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-arabic-600-979c249d.woff2") format('woff2');
  
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-arabic-700-86ce0338.woff2") format('woff2');
  
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/noto-kufi-arabic-variable-4270881f.woff2") format('woff2');
  
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/readex-pro-variable-40d115c4.woff2") format('woff2');
  
}
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/reem-kufi-variable-70ced6d9.woff2") format('woff2');
  
}


/* fonts.css */
/* The site's fonts, served from our own assets instead of Google Fonts, so no
   page waits on another site (in the app, the first page did, for seconds) and
   visitors' browsers don't contact Google. Amiri, Amiri Quran, Hanken
   Grotesk, Instrument Serif and Noto Naskh Arabic, and FluentPlex's Newsreader and Instrument Sans,
   all under the SIL Open Font License 1.1; Arabic, Latin and Latin Extended characters (from Google
   Fonts' own files). */
/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/amiri-normal-arabic-4f1f7dad-f5f84a0e.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/amiri-normal-latin-ext-aafd5670-990cabdc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/amiri-normal-latin-441f50a6-02e9f0c5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/amiri-normal-arabic-887370a1-b74a7a3f.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/amiri-normal-latin-ext-f1c0a977-e2b9d38b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/amiri-normal-latin-7becc3f0-b1c7c60b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-ext-c95efb87-c2a3301f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-7579623a-62d0893d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-ext-c95efb87-c2a3301f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-7579623a-62d0893d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-ext-c95efb87-c2a3301f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-7579623a-62d0893d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-ext-c95efb87-c2a3301f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/hanken-grotesk-normal-latin-7579623a-62d0893d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-italic-latin-ext-59d106aa-a1daab5c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-italic-latin-41682866-21c8e959.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-normal-latin-ext-7cd6b871-b3d5c31c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/instrument-serif-normal-latin-03435c64-5e24a7c0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-naskh-arabic-normal-arabic-9ade8141-4631ba21.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-naskh-arabic-normal-latin-ext-e925aaac-73497c39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/noto-naskh-arabic-normal-latin-9a6d0294-a219b8ba.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/noto-naskh-arabic-normal-arabic-9ade8141-4631ba21.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/noto-naskh-arabic-normal-latin-ext-e925aaac-73497c39.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/noto-naskh-arabic-normal-latin-9a6d0294-a219b8ba.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Amiri Quran: the muṣḥaf layout (downloaded only on the pages that use it). */
/* arabic */
@font-face {
  font-family: 'Amiri Quran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/amiri-quran-normal-arabic-8aaeb960-101ebac3.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Amiri Quran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/amiri-quran-normal-latin-6e269442-2d75ccfb.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FluentPlex's brand (sites/fluentplex): Newsreader for headings and the wordmark, Instrument Sans for text. */
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/instrument-sans-normal-latin-ext-a083bc1c.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/instrument-sans-normal-latin-570a9648.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/newsreader-italic-latin-ext-717876d4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/newsreader-italic-latin-ad348d7c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/newsreader-normal-latin-ext-53136885.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/newsreader-normal-latin-4b499f36.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* layouts.css */
/*
 * Page layouts: marketing pages, the onboarding/auth split screen,
 * and the signed-in app shell (sidebar + main).
 */

/* ======================= Marketing ======================= */

.site { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.site > main { flex: 1; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px var(--gutter);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .site-nav { flex-wrap: wrap; gap: 10px 16px; }
}
.site-nav__link { color: var(--ink); font-size: 15px; }
.site-nav__link:hover { color: var(--clay); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--clay); font-weight: 600; }
.site-nav .btn { padding: 11px 20px; }

.site-footer {
  padding: 28px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-muted);
}
.site-footer--ruled { border-top: 1px solid var(--line); }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
/* A pack's line after the copyright (TurkishGenius: its sister site), quieter than the links. */
.site-footer > span a { color: var(--text-muted); text-decoration: underline; }

.container { max-width: 1320px; margin: 0 auto; padding-inline-start: var(--gutter); padding-inline-end: var(--gutter); }
.container--narrow { max-width: 1000px; }
.container--text { max-width: 760px; }

.site-flash { padding: 0 var(--gutter); max-width: 1320px; margin: 0 auto 8px; }

/* ======================= Split screen (onboarding + sign in) ======================= */

.split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split__aside {
  background: var(--ink);
  color: var(--paper);
  padding: 40px clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.split__note { display: flex; flex-direction: column; gap: 8px; }
.split__kicker { margin: 0; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--peach); font-weight: 700; }
.split__quote {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-on-dark-muted);
  margin: 0;
}
.split__main {
  padding: 56px clamp(24px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  max-width: 760px;
  width: 100%;
}
.split__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  margin: 0;
}
.split__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Onboarding step list in the dark aside. */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps__item { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--text-faint); }
.steps__dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.steps__item.is-current { color: var(--paper); }
.steps__item.is-done { color: var(--paper); }
.steps__item.is-done .steps__dot { background: var(--peach); border-color: var(--paper); color: var(--ink); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .split__aside { gap: 24px; padding-top: 28px; padding-bottom: 28px; }
  .split__note { display: none; }
  .split__main { padding-top: 36px; padding-bottom: 48px; }
  .split__title { font-size: 40px; }
}

/* ======================= App shell ======================= */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s ease;
}
.sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 0; padding-inline: 10px 4px; }
.sidebar .brand { gap: 10px; }
.sidebar .brand-mark { --mark-size: 34px; --mark-ring-width: 3; }
.sidebar .brand__name { font-size: 21px; }
.sidebar .brand__ar { font-size: 12px; color: var(--text-on-dark-muted); }

.icon-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--ink-line);
  background: none;
  color: var(--text-on-dark-muted);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.icon-button:hover { background: var(--ink-raised); color: var(--paper); }

.sidebar__nav { display: flex; flex-direction: column; gap: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group__label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  font-weight: 700;
  padding: 0 12px 4px;
}
.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 14px;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.nav-link:hover { background: var(--ink-raised); color: var(--paper); text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--ink-raised); color: var(--paper); }
.nav-link__label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-link .icon { flex-shrink: 0; opacity: 0.9; }

.sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 10px; }

.upgrade-card {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 -4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--paper);
  text-decoration: none;
}
.upgrade-card:hover { border-color: var(--peach); text-decoration: none; color: var(--paper); }
.upgrade-card strong { font-size: 14px; color: var(--peach); }
.upgrade-card span { font-size: 12px; color: var(--text-on-dark-muted); }

.account-button {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 6px 8px;
  margin: 0 -8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--paper);
  text-align: var(--start);
  width: calc(100% + 16px);
}
.account-button:hover, .account-button[aria-expanded="true"] { background: var(--ink-raised); }
.account-button__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-button__caret { color: var(--text-on-dark-faint); font-size: 12px; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.avatar--lg { width: 42px; height: 42px; font-size: 17px; }

/* Collapsed sidebar (desktop). Elements marked .when-expanded / .when-collapsed swap. */
.sidebar .when-collapsed { display: none; }
.app.is-collapsed .sidebar { width: 64px; padding: 22px 8px; align-items: center; }
.app.is-collapsed .sidebar .when-expanded { display: none; }
.app.is-collapsed .sidebar .when-collapsed { display: flex; }
.sidebar__mini { flex-direction: column; align-items: center; gap: 20px; flex: 1; }
.sidebar__mini-logo { display: flex; text-decoration: none; }
.sidebar__mini-logo .brand-mark { --mark-size: 38px; --mark-ring-width: 3; }
.sidebar__mini-rule { width: 28px; height: 1px; background: var(--ink-line); }
.sidebar__mini-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  font-weight: 600;
}
.sidebar__mini-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sidebar__mini-avatar { width: 36px; height: 36px; border: 2px solid var(--green); padding: 0; font-size: 14px; }
.sidebar__mini-avatar[aria-expanded="true"] { border-color: var(--peach); }

/* Account menu popover. */
.menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.account-menu {
  position: fixed;
  inset-inline-start: 240px;
  bottom: 20px;
  z-index: 41;
  width: 310px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-menu);
  display: flex;
  flex-direction: column;
}
.app.is-collapsed .account-menu { inset-inline-start: 72px; }
.account-menu__head { padding: 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.account-menu__who { display: flex; flex-direction: column; min-width: 0; }
.account-menu__who strong { font-size: 15px; }
.account-menu__who span { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__tags { padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.account-menu__list { padding: 6px; display: flex; flex-direction: column; }
.account-menu__list + .account-menu__list { border-top: 1px solid var(--line-soft); }
.account-menu__item {
  background: none;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
  text-align: var(--start);
  text-decoration: none;
  width: 100%;
}
.account-menu__item:hover { background: var(--sand-hover); text-decoration: none; color: var(--ink); }
.account-menu__list .account-menu__item { padding-block: 8px; }
.account-menu__label { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.account-menu__item .icon { flex-shrink: 0; opacity: 0.75; }
.account-menu__item--danger .icon { opacity: 1; }
.account-menu__item small { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.account-menu__item--danger { color: var(--clay); font-weight: 600; }
.account-menu__item--danger:hover { background: var(--clay-soft); color: var(--clay); }

.app-main { flex: 1; min-width: 0; padding: 32px clamp(20px, 3.5vw, 48px) 64px; }
.app-flash { margin-bottom: 20px; max-width: 1180px; }
.app-flash--toast {
  position: fixed;
  top: 16px;
  left: 50%; /* centred: the same in either direction */
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100vw - 32px));
  margin: 0;
  box-shadow: var(--shadow-menu);
  border-radius: var(--radius-md);
}
.app-flash--toast a { color: inherit; font-weight: 600; }

/* Mobile top bar (hidden on desktop). */
.topbar { display: none; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .topbar .brand { gap: 10px; }
  .topbar .brand-mark { --mark-size: 34px; --mark-ring-width: 3; }
  .topbar .brand__name { font-size: 21px; }
  .topbar .brand__ar { font-size: 12px; color: var(--text-on-dark-muted); }
  .topbar__actions { display: flex; align-items: center; gap: 10px; }

  .sidebar,
  .app.is-collapsed .sidebar {
    position: fixed;
    inset-block: 0; inset-inline: 0 auto;
    z-index: 50;
    width: min(280px, 85vw);
    padding: 24px 14px;
    align-items: stretch;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  html[dir="rtl"] .sidebar, html[dir="rtl"] .app.is-collapsed .sidebar { transform: translateX(100%); } /* the drawer comes in from the right */
  .app.is-collapsed .sidebar .when-expanded { display: flex; }
  .app.is-collapsed .sidebar .when-collapsed { display: none; }
  .app.is-nav-open .sidebar, html[dir="rtl"] .app.is-nav-open .sidebar { transform: none; box-shadow: var(--shadow-menu); }
  .sidebar__collapse { display: none; }
  .nav-scrim { position: fixed; inset: 0; background: rgba(28, 35, 33, .45); z-index: 45; }
  /* The account menu opens from the drawer, so it goes above it (and its scrim). */
  .menu-backdrop { z-index: 55; }
  .account-menu, .app.is-collapsed .account-menu { inset-inline-start: 16px; bottom: 16px; z-index: 56; }
  .app-main { padding: 24px 16px 48px; }
}
@media (min-width: 861px) {
  .nav-scrim { display: none; }
}

/* A screen inside the app shell. */
.screen { display: flex; flex-direction: column; gap: 24px; max-width: 1180px; }
.screen--narrow { max-width: 860px; margin: 0 auto; }
.screen--text { max-width: 760px; margin: 0 auto; }
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.screen-header__kicker { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
.screen-header__sub { font-size: 16px; color: var(--text-body); line-height: 1.5; margin-top: 8px; max-width: 620px; }

.split__aside .brand-mark { --mark-size: 40px; }
.split__aside .brand__name { font-size: 26px; }
.split__aside .brand__ar { font-size: 14px; }

/* "Please confirm your email" bar for unconfirmed students. */
.confirm-email__form { display: inline; }
.confirm-email__resend { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* Teaching / Learning: an account with a teacher profile moves between the
   teacher area and its own learning (NavigationHelper#mode_switch_items). */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: var(--radius-pill); background: var(--ink-raised); }
.mode-switch__item {
  display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--text-on-dark-muted); text-decoration: none;
}
.mode-switch__item:hover { color: var(--paper); text-decoration: none; }
.mode-switch__item[aria-current="page"] { background: var(--paper); color: var(--ink); }
/* A Stripe subscriber whose school covers Pro (shared/school_covers_pro). */
.school-covers { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.school-covers .link-button { color: inherit; font-weight: 600; text-decoration: underline; }


/* screens/admin.css */
/* System user (staff) overview. */

.admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 16px;
  margin: 0;
}
.admin__stat { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.admin__stat-value { margin: 0; font-size: 48px; line-height: 1; }

.admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 24px;
  align-items: start;
}
.admin__panel { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.admin__panel-title { font-size: 15px; font-weight: 600; }

/* Wide tables scroll inside their card on phones instead of the page. */
.admin__table-wrap { overflow-x: auto; margin: 0 -4px; position: relative; } /* keeps .sr-only cells inside */
.admin__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin__table th, .admin__table td { padding: 10px 6px; text-align: var(--start); vertical-align: middle; }
.admin__table thead th { font-size: 12px; font-weight: 700; color: var(--text-muted); padding-top: 0; white-space: nowrap; }
.admin__table tbody tr { border-top: 1px solid var(--line-soft); }
.admin__table tbody th { font-weight: 600; }
.admin__email { color: var(--text-muted); white-space: nowrap; }
.admin__table .admin__num { text-align: var(--end); font-variant-numeric: tabular-nums; }
.admin__code { font-weight: 700; letter-spacing: 1px; white-space: nowrap; }

@media (max-width: 560px) {
  .admin__stat { padding: 18px; }
  .admin__stat-value { font-size: 40px; }
  .admin__panel { padding: 18px; }
  .admin__table { min-width: 520px; }
}

/* ---------- Content editor ---------- */

.admin-content__back { display: inline-block; font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }
.admin-content__back:hover { color: var(--ink); }
.admin-content__ar { font-size: 20px; font-weight: 400; }
.admin-content__big-ar { font-size: 44px; }
.admin-content__heading { margin: 0; }
.admin-content__linked { color: var(--green); white-space: nowrap; }
.admin-content__linked .ar { font-size: 17px; }
.admin-content__unlinked { color: var(--text-muted); white-space: nowrap; }
.admin-content__search .input { width: 220px; max-width: 100%; }

.admin-content--form { max-width: 860px; }
.admin-content__form { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.admin-content__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
.admin-content__grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.admin-content__arabic { font-family: var(--font-arabic); font-size: 20px; }
.admin-content__list { font-family: var(--font-arabic), var(--font-sans); font-size: 17px; line-height: 1.7; }
.admin-content__check label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.admin-content__actions { padding-top: 6px; }
.admin-content__delete { align-self: flex-start; color: var(--clay); border-color: var(--clay-soft); }
.admin-content__delete:hover { color: var(--clay-deep); border-color: var(--clay); }
.admin__table mark { background: var(--clay-soft); border-radius: 4px; padding: 0 3px; }
.admin__table code { font-size: 13px; color: var(--text-muted); }

.admin__content { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.admin__content-link { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.admin__content-count { font-family: var(--font-serif); font-size: 32px; line-height: 1; }
.admin__content-label { font-size: 14px; color: var(--text-muted); }

@media (max-width: 560px) {
  .admin-content__form { padding: 20px; }
}

/* Errors */
.admin__error-message { font-weight: 400; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.admin__error-where { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.admin__error-title { overflow-wrap: anywhere; }
.admin__error-date { margin: 0; font-size: 15px; }
.admin__error-context { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.admin__error-context dt { color: var(--text-muted); }
.admin__error-context dd { margin: 0; overflow-wrap: anywhere; }
.admin__backtrace {
  margin: 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--sand);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

/* Contact messages */
.admin__message header { align-items: flex-start; }
.admin__message-body p { margin: 0 0 8px; line-height: 1.6; overflow-wrap: anywhere; }

/* People pages */
.admin__facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 14px; }
.admin__facts dt { color: var(--text-muted); }
.admin__facts dd { margin: 0; }
.admin__account-actions { margin-top: 14px; }
.admin__form { display: flex; flex-direction: column; gap: 12px; }
.admin__narrow { max-width: 640px; }
.admin__pager { margin-top: 12px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.admin__count { margin: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.admin__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.admin__pages a, .admin__page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 8px; border-radius: var(--radius-sm); text-decoration: none; }
.admin__pages a:hover { background: var(--sand); }
.admin__page.is-current { background: var(--ink); color: var(--paper); font-weight: 700; }
/* Sortable column headers (admin_sort_header) */
.admin__sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.admin__sort:hover { color: var(--ink); text-decoration: underline; }
.admin__sort.is-sorted { color: var(--ink); }
.admin__sort-arrow { font-size: 11px; }
/* The filter bar above an admin table */
.admin__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.admin__filters .admin-content__search { flex: 1 1 260px; max-width: 420px; margin: 0; }
.input--sm { padding: 6px 10px; font-size: 13px; width: auto; }

/* Lists on the jobs and AI pages */
.admin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.admin__cap-of { font-family: var(--font-sans); font-size: 15px; }
.progress__bar.is-full { background: var(--clay); }

/* Audit log */
.admin__audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin__audit-event { padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.admin__audit-event:first-child { border-top: 0; }
.admin__audit-changes { margin: 6px 0 0; padding-inline-start: 18px; color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }

/* "Draft with AI" on the content lists */
.admin-content__draft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px; }
.admin-content__draft-label { font-weight: 600; font-size: 14px; }
.admin-content__draft .input { flex: 1 1 260px; }
.admin-content__draft .field__hint { flex-basis: 100%; }

/* Graded texts: preview and editor */
.graded__sentence { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.graded__sentence + .graded__sentence { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.graded__arabic { margin: 0; font-size: 26px; line-height: 1.8; }
.graded__english { margin: 0; color: var(--text-muted); }
.graded__words th.ar, .graded__words td.ar { font-size: 18px; }
.graded__words--edit .input { min-width: 120px; }

/* Book editor: where a text comes from; ⚠ on a measured level far from the book's. */
.admin__fieldset { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.admin__fieldset legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.admin__warn { color: var(--clay); font-weight: 700; }

.admin__form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.admin__limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.admin__form-row > .field { min-width: 150px; }
.admin__row--alert > * { background: var(--clay-soft); }

/* Word levels by sense (admin/word_levels) */
.word-levels__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.word-levels__tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 14px; }
.word-levels__tab.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.word-levels__count { font-weight: 700; }
.word-levels__search { margin-inline-start: auto; }
.word-levels__word { display: block; font-size: 20px; }
.word-levels__table td, .word-levels__table th { vertical-align: top; }
.word-levels__evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.word-levels__set { display: flex; gap: 6px; align-items: center; }

/* Insights (admin/insights) */
.insights__filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.insights__filters .field { margin: 0; }
.insights__table td, .insights__table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.insights .admin__panel { margin-bottom: 16px; }
.insights__health { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.insights__subhead { font-size: 14px; margin: 0 0 8px; }
.insights__targets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.insights__targets li { display: grid; grid-template-columns: 2.5em 1fr 5em; align-items: center; gap: 8px; }
.insights__level { font-weight: 700; }
.insights__bar { display: block; block-size: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.insights__bar > span { display: block; block-size: 100%; background: var(--ink); }
.insights__facts { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.insights__facts dt { font-weight: 700; }
.insights__facts dd { margin: 2px 0 0; }

/* Graded text batches and drafts (admin/graded_text_batches, admin/graded_text_drafts) */
.batches__level { display: flex; align-items: end; gap: 8px; margin-bottom: 12px; }
.batches__topics { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.batches__topic { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.batches__plan { font-size: 13px; line-height: 1.5; }
.draft__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.draft__checks .is-failed .draft__mark { color: var(--clay-deep); }
.draft__checks .is-ok .draft__mark { color: var(--right-deep); }
.draft__checks .is-advice .draft__mark { color: var(--gold-deep); }
.draft__mark { display: inline-block; inline-size: 1.2em; font-weight: 700; }
.draft__above { background: var(--peach); border-radius: 3px; padding: 0 2px; }
.draft__about { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.draft__wide { grid-column: 1 / -1; }
.draft__sentence { padding-block: 12px; border-block-end: 1px solid var(--line-soft); }
.draft__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.draft__native { font-size: 18px; line-height: 1.7; margin: 0; }
.draft__words summary { cursor: pointer; font-size: 14px; margin-top: 6px; }
.draft__words .input { min-inline-size: 8em; }

/* A school's plan and billing (admin/organizations/_plan): a quote, a pilot */
.admin__details { display: flex; flex-direction: column; gap: 10px; }
.admin__details > summary { cursor: pointer; font-weight: 600; }

/* Grammar review (admin/grammar_reviews): a finding */
.grammar-finding { display: flex; flex-direction: column; gap: 8px; }
.grammar-finding__severity { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.grammar-finding__severity--high { color: var(--clay); }
.grammar-finding__question { font-size: 18px; }

/* Traffic (admin/traffic): visitors by day as thin bars, and each breakdown's share as a meter */
.traffic__stats { margin-bottom: 16px; }
.traffic__stats p { margin: 0; }
.traffic__chart { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 160px auto; gap: 6px 8px; margin: 0; }
.traffic__axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; text-align: end; font-variant-numeric: tabular-nums; }
.traffic__bars { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--line-soft), var(--line-soft)) top / 100% 1px no-repeat; }
.traffic__bar { position: relative; flex: 1 1 0; min-width: 1px; height: max(var(--h), 1px); background: var(--clay); border-radius: 4px 4px 0 0; }
.traffic__bar::after { content: ""; position: absolute; inset: auto -1px 0; height: 160px; } /* a hover target taller than the bar */
.traffic__bar:hover { background: var(--clay-deep); }
.traffic__bar:hover::before {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 12px; white-space: nowrap; pointer-events: none;
}
.traffic__dates { grid-column: 2; display: flex; justify-content: space-between; font-size: 12px; }
.traffic__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.traffic__table { width: 100%; }
.traffic__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.traffic__share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.traffic__meter { display: block; flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(var(--clay), var(--clay)) 0 / var(--w) 100% no-repeat, var(--line-soft); }
.traffic .admin__table { min-width: 0; } /* two or three columns: they fit a phone */
.traffic__now { border-color: var(--clay-soft); }
.traffic__live { display: inline-block; width: 8px; height: 8px; margin-inline-end: 4px; border-radius: 50%; background: var(--clay); vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .traffic__live { animation: traffic-pulse 2s ease-in-out infinite; } }
@keyframes traffic-pulse { 50% { opacity: 0.35; } }
.traffic__updated { font-size: 12px; }
.traffic__now-sites { margin: 0; padding: 0; list-style: none; font-size: 13px; overflow-wrap: anywhere; }
.traffic__bots { display: flex; align-items: center; gap: 6px; flex-direction: row; }
.traffic__note { margin: 0 0 12px; font-size: 14px; }
.insights__guest-grid { margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.insights__guest-grid .admin__table { min-width: 0; }

/* A book's topic checkboxes (admin/books/_topics_field) */
.admin__topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 6px 14px; }
.admin__topic { display: flex; align-items: center; gap: 8px; font-size: 14px; }


/* screens/alphabet.css */
/* An alphabet (alphabet/show: Persian's, Uyghur's): a card per letter with its joining forms, sound and words to hear. */
.alpha__lead { max-width: 680px; color: var(--text-body); margin: -6px 0 18px; }
.alpha__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.alpha__card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.alpha__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.alpha__letter { font-family: var(--font-arabic); font-size: 46px; line-height: 1; color: var(--clay); }
.alpha__name { font-weight: 600; }
.alpha__sound { font-weight: 400; color: var(--text-muted); }
.alpha__name-native { font-family: var(--font-arabic); font-weight: 400; }
.alpha__hint { margin: -6px 0 0; font-size: 13px; color: var(--text-muted); }
.alpha__start { margin: 0; font-size: 13px; color: var(--text-muted); display: flex; align-items: baseline; gap: 8px; }
.alpha__start-form { font-family: var(--font-arabic); font-size: 26px; line-height: 1.2; color: var(--clay); }
.alpha__words { display: grid; gap: 6px; }
.alpha__forms { display: flex; gap: 6px; margin: 0; justify-content: space-between; }
.alpha__forms div { display: grid; justify-items: center; gap: 2px; }
.alpha__forms dt { font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }
.alpha__forms dd { margin: 0; font-family: var(--font-arabic); font-size: 30px; line-height: 1.3; }
.alpha__word { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; text-align: start;
  padding: 8px 10px; border: 0; border-radius: 10px; background: var(--sand); color: inherit; font: inherit; cursor: pointer; }
.alpha__word:hover { background: var(--sand-hover); }
.alpha__word-fa { font-family: var(--font-arabic); font-size: 22px; grid-row: 1 / 3; }
.alpha__word-roman { color: var(--clay); font-size: 14px; }
.alpha__word-en { color: var(--text-muted); font-size: 13px; grid-column: 2; }
.alpha__play { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--text-muted); }
.alpha__note { margin: 0; font-size: 13px; color: var(--text-muted); }
.alpha__note--joins { color: var(--clay-deep); }
.alpha__groups { margin-top: 28px; }
.alpha__h2 { font-size: 22px; margin: 0 0 6px; }
.alpha__group-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.alpha__group-list li { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.alpha__group-sound { font-weight: 600; color: var(--clay); }
.alpha__group-letters { font-family: var(--font-arabic); font-size: 26px; }


/* screens/app.css */
/* The mobile apps (Hotwire Native).
   AppWelcomeController: the first screen when signed out. A dark panel with the
   brand (the website's side panel, moved above), then Continue with Apple,
   Google (only when the app's sign-in component is there) and email. */
.app-welcome { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); }
.app-welcome__top {
  flex: 0 0 44vh; flex: 0 0 44dvh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  background: var(--ink); color: var(--paper);
  padding: calc(env(safe-area-inset-top) + 40px) 28px 28px;
  min-height: max-content; /* larger text: it grows and the page scrolls */
}
.app-welcome__brand .brand-mark { --mark-size: 46px; }
.app-welcome__brand .brand__name { font-size: 27px; }
.app-welcome__brand .brand__ar { font-size: 16px; }
.app-welcome__intro { display: flex; flex-direction: column; gap: 8px; }
.app-welcome__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.05; }
.app-welcome__lead { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.45; color: var(--text-on-dark-muted); }

.app-welcome__main { position: relative; flex: 1; padding: 24px 24px calc(env(safe-area-inset-bottom) + 24px); }
.app-welcome__column { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.app-welcome__note { margin: 0; font-size: 15px; color: var(--ink-line); text-align: center; }
.app-welcome__error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--clay-soft); font-size: 15px; line-height: 1.45; }

.app-welcome__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 16px; border-radius: 12px;
  font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.app-welcome__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.app-welcome__btn svg { flex-shrink: 0; }
.app-welcome__btn--apple { background: #000; color: #fff; border: none; font-family: -apple-system, "SF Pro Text", var(--font-sans); }
.app-welcome__btn--google { background: #fff; color: var(--ink); border: 1.5px solid var(--line-strong); }
.app-welcome__btn--email { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.app-welcome__btn--email:hover { color: var(--ink); text-decoration: none; }
.app-welcome__btn--ink { background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-pill); }
.app-welcome__btn:disabled { cursor: default; }
.app-welcome__btn--ink:disabled { opacity: .45; }

.app-welcome__small { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-body); text-align: center; }
.app-welcome__small a { font-weight: 600; }
.app-welcome__school {
  align-self: center; display: flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--ink); text-align: center;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Apple and Google only in an app that has the sign-in component (the bridge sets the attribute). */
.app-welcome__native, .app-welcome__native-line { display: none; }
html[data-bridge-components~="sign-in"] .app-welcome__native { display: flex; }
html[data-bridge-components~="sign-in"] .app-welcome__native-line { display: inline; }

/* Signing in, and the Terms step for a new account: a card over the dimmed buttons. */
.app-welcome__main.is-busy .app-welcome__column { opacity: .45; pointer-events: none; }
.app-welcome__card {
  position: absolute; inset-inline-start: 24px; inset-inline-end: 24px; top: 50%; transform: translateY(-50%);
  max-width: 340px; margin: 0 auto; padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 20px 50px -18px rgba(28, 35, 33, .5); text-align: center;
}
.app-welcome__card[hidden] { display: none; }
.app-welcome__card--terms { align-items: stretch; text-align: var(--start); }
.app-welcome__card-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.app-welcome__card-text { margin: 0; font-size: 14px; color: var(--text-body); }
.app-welcome__check { font-size: 15px; line-height: 1.45; }
.app-welcome__cancel { align-self: center; min-height: 44px; padding: 0 12px; background: none; border: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--clay); cursor: pointer; }
.app-welcome__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(28, 35, 33, .18); border-top-color: var(--clay);
  animation: auth-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .app-welcome__spinner { animation-duration: 2.4s; } }

/* iPad: the same layout, larger. */
@media (min-width: 700px) {
  .app-welcome__top { flex-basis: 46vh; padding: calc(env(safe-area-inset-top) + 80px) 96px 56px; gap: 30px; }
  .app-welcome__brand .brand-mark { --mark-size: 64px; }
  .app-welcome__brand .brand__name { font-size: 38px; }
  .app-welcome__brand .brand__ar { font-size: 22px; }
  .app-welcome__title { font-size: 64px; }
  .app-welcome__lead { font-size: 21px; }
  .app-welcome__main { padding: 56px 96px 40px; }
  .app-welcome__column { gap: 14px; }
  .app-welcome__btn { min-height: 56px; border-radius: 14px; font-size: 18px; }
  .app-welcome__note { font-size: 16px; }
  .app-welcome__small, .app-welcome__school { font-size: 14px; }
}

/* The website's sign-in and sign-up pages in the app ("Continue with email",
   opened as a sheet): no side panel, a Sign in / Create account switch on top. */
.split--app { display: block; min-height: 0; }
.split--app .split__main { max-width: 560px; margin: 0 auto; padding: 20px 20px calc(env(safe-area-inset-bottom) + 24px); justify-content: flex-start; gap: 20px; }
.split--app .split__title { font-size: 32px; line-height: 1.05; }
.split__app-steps { max-width: 560px; margin: 0 auto; padding: 16px 20px 0; }
.split--app:has(.app-auth-tabs) .split__app-steps { display: none; } /* creating the account: the switch is enough */
.split__app-steps .onb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.split__app-steps .onb-steps .steps__item { flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
.split__app-steps .onb-steps .steps__item::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--line); }
.split__app-steps .onb-steps .steps__item.is-current, .split__app-steps .onb-steps .steps__item.is-done { color: var(--ink); }
.split__app-steps .onb-steps .steps__item.is-current::before, .split__app-steps .onb-steps .steps__item.is-done::before { background: var(--peach); }
.split__app-steps .steps__dot, .split__app-steps .onb-steps__sub { display: none; }
.split__app-steps .onb-steps__text { padding-top: 0; }
.split__app-steps .onb-steps__label { font-size: 12px; }
.split__app-steps .is-current .onb-steps__label { font-weight: 700; }
.split__app-steps .onb-steps__num { display: inline; }

.app-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sand); }
.app-auth-tabs__tab {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px;
  font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.app-auth-tabs__tab:hover { color: var(--ink); text-decoration: none; }
.app-auth-tabs__tab.is-current { background: var(--ink); color: var(--paper); }
.app-auth-tabs__tab:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Signed-in pages in the apps: no sidebar or top bar (native tabs and navigation bar instead). */
.app--native .app-main { padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px); }

/* The More tab (/more): an iOS-style grouped list on paper. */
.more { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.more__title { margin: 6px 4px 2px; font-family: -apple-system, var(--font-sans); font-size: 34px; font-weight: 700; line-height: 1.1; }
.app--native .more__title { display: none; } /* the native navigation bar shows "More" */

.more__modes { display: flex; flex-direction: column; gap: 6px; }
.more__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--line); }
.more__switch-option {
  min-height: 44px; border: none; border-radius: 8px; background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
}
.more__switch-option.is-current { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(28, 35, 33, .25); }
.more__switch-option:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.more__mode-note { margin: 0 4px; font-size: 13px; line-height: 1.4; color: var(--text-body); }

.more__person {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none;
}
.more__person:hover { color: var(--ink); text-decoration: none; border-color: var(--line-strong); }
.more__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--peach); font-family: var(--font-serif); font-size: 24px;
}
.more__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.more__name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.more__pills { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.more__pill { padding: 1px 9px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-weight: 700; white-space: nowrap; }
.more__pill--level { background: var(--sand); border-color: var(--line-mid); }
.more__pill--pro { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.more__pill--streak { background: var(--green-soft); border-color: var(--green-soft); color: var(--green); }
.more__pill--role { background: var(--mark); border-color: var(--peach); }
.more__chevron { color: var(--line-dashed); font-size: 20px; }

.more__managed { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 13px; line-height: 1.45; }
.more__managed-i { font-family: var(--font-serif); font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--green); }

.more__group { display: flex; flex-direction: column; gap: 6px; }
.more__group-title { margin: 0 16px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-body); font-weight: 600; }
.more__list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.more__list > li + li { border-top: 1px solid var(--line-soft); }
.more__list form { margin: 0; }
.more__row {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 9px 14px;
  color: var(--ink); text-decoration: none; background: none; border: none; font: inherit; text-align: var(--start); cursor: pointer;
}
.more__row:hover { color: var(--ink); text-decoration: none; background: var(--sand-hover); }
.more__row:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.more__tile { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--sand); color: var(--ink); }
.more__tile--ink { background: var(--ink); color: var(--peach); }
.more__row-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 10px; }
.more__label { font-size: 16px; font-weight: 500; line-height: 1.25; }
.more__label--strong { font-weight: 600; }
.more__detail { font-size: 14px; color: var(--text-body); text-align: var(--end); }
.more__detail--clay { color: var(--clay); font-weight: 600; }

.more__delete {
  align-self: center; display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 16px; color: var(--clay); text-decoration: underline; text-underline-offset: 3px;
}
.more__footer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 16px; font-size: 13px; color: var(--text-muted); }
.more__footer-links { display: flex; align-items: center; gap: 6px; }
.more__footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink-line); }

/* Delete account: the confirmation (opened as a sheet in the apps). */
.delete-account { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.delete-account__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.delete-account__lead { margin: 0; font-size: 16px; line-height: 1.55; }
.delete-account__note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.5; }
.delete-account__export { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.delete-account__form { display: flex; flex-direction: column; gap: 18px; }
.delete-account__actions { display: flex; flex-direction: column; gap: 10px; }
.delete-account__actions .btn:disabled { background: var(--line); border-color: var(--line); color: var(--text-body); cursor: default; }

/* Settings → Notifications (/settings/notifications): a card per type, with Push and Email. */
.notif { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.notif__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.05; }
.app--native .notif__title { display: none; }
.notif__banner {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--mark); border: 1.5px solid var(--peach); border-radius: 14px; font-size: 14px; line-height: 1.45;
}
.notif__banner[hidden], .notif__offer[hidden] { display: none; }
.notif__banner strong { font-size: 16px; }
.notif__banner-btn, .notif__offer-btn {
  align-self: flex-start; min-height: 44px; padding: 0 16px; border: none; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--paper); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.notif__offer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: 14px;
}
.notif__offer-btn { align-self: center; font-size: 14px; padding: 0 14px; }
.notif__note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.45; color: var(--ink-line); }
.notif__form { display: flex; flex-direction: column; gap: 14px; }
.notif__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notif__card, .notif__rules {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.notif__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.notif__name { margin: 0; font-size: 17px; font-weight: 700; }
.notif__tag { padding: 1px 9px; border-radius: var(--radius-pill); background: var(--sand); font-size: 12px; font-weight: 700; white-space: nowrap; }
.notif__when { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.notif__opens { margin: 0; font-size: 13px; color: var(--text-body); }
.notif__time {
  min-height: 36px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; color: var(--clay); font: inherit; font-size: 15px; font-weight: 700;
}
.notif__switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.notif__switch, .notif__fixed { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; }
.notif__fixed { cursor: default; justify-content: flex-start; }
.notif__switch-text, .notif__fixed { flex-direction: column; align-items: flex-start; }
.notif__switch-text { display: flex; }
.notif__fixed { gap: 0; justify-content: center; }
.notif__switch-label { font-size: 15px; font-weight: 600; }
.notif__state { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.notif__switch:has(input:checked) .notif__state { color: var(--green); }
.notif__state--muted { color: var(--text-muted); }
.notif__switch.is-disabled { opacity: .6; cursor: default; }
.notif__switch.is-disabled .notif__state { color: var(--clay); }
.notif__rules p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-line); }
.notif__rules strong { color: var(--ink); }
.notif__quiet { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.notif__quiet-pick { display: flex; align-items: center; gap: 6px; }
.notif__rules .notif__zone { font-size: 12px; color: var(--text-muted); }
.notif__save { align-self: flex-start; }

/* The explanation before the phone's notification prompt (the apps, once). */
.notif-ask { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.notif-ask__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.05; }
.notif-ask__lock { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px 16px; border-radius: 24px; background: var(--ink); }
.notif-ask__clock { font-family: -apple-system, var(--font-sans); font-size: 54px; font-weight: 300; line-height: 1; color: var(--paper); }
.notif-ask__card { width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 18px; background: rgba(245, 239, 227, .92); }
.notif-ask__icon { width: 36px; height: 36px; border-radius: 9px; background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-ask__icon .brand-mark { --mark-size: 28px; }
.notif-ask__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-ask__app { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-body); }
.notif-ask__app strong { color: var(--ink); }
.notif-ask__head { font-size: 15px; font-weight: 600; }
.notif-ask__ar { font-family: var(--font-arabic); font-size: 19px; }
.notif-ask__body { font-size: 14px; color: var(--ink-line); }
.notif-ask__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; }
.notif-ask__list span { color: var(--text-body); }
.notif-ask__rules { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-body); }
.notif-ask__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.notif-ask__later { min-height: 48px; background: none; border: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.notif__switch.is-disabled .switch input + span { background: var(--line-strong); cursor: default; }

/* Consent to AI processing: the screen (/ai-consent), a feature's closed state, and Settings › Privacy & AI. */
.ai-consent, .ai-closed, .ai-settings { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ai-consent__mark {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--peach); font-family: var(--font-arabic); font-size: 26px; line-height: 1;
}
.ai-consent__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.05; }
.ai-consent__lead { margin: 0; font-size: 16px; line-height: 1.5; }
.ai-consent__group { padding: 6px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.ai-consent__group-title { margin: 8px 0 2px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.ai-consent__items { list-style: none; margin: 0; padding: 0; }
.ai-consent__items li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 9px 0; font-size: 15px; line-height: 1.35; }
.ai-consent__items li + li { border-top: 1px solid var(--line-soft); }
.ai-consent__processor { font-size: 13px; font-weight: 700; color: var(--green); white-space: nowrap; }
.ai-consent__never { margin: 0; display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-line); }
.ai-consent__never > span:first-child { color: var(--green); font-weight: 700; }
.ai-consent__links { margin: 0; display: flex; gap: 18px; font-size: 15px; font-weight: 600; }
.ai-consent__links a { min-height: 44px; display: flex; align-items: center; }
.ai-consent__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ai-consent__actions form { display: contents; }
.ai-consent__allow {
  width: 100%; min-height: 52px; border: none; border-radius: 14px; background: var(--ink); color: var(--paper);
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
.ai-consent__later { width: 100%; min-height: 48px; border: none; background: none; color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.ai-consent__foot { margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); }
.ai-consent__allow:focus-visible, .ai-consent__later:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.ai-closed__title { margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-weight: 400; font-size: 38px; }
.ai-closed__ar { font-family: var(--font-arabic); font-size: 28px; color: var(--clay); }
.app--native .ai-closed__title { display: none; }
.ai-closed__card { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.ai-closed__head { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.ai-closed__card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-line); }
.ai-closed__btn {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; margin-top: 4px; padding: 0 20px;
  border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600;
}
.ai-closed__btn:hover { color: var(--paper); text-decoration: none; background: var(--ink-raised); }
.ai-closed__works { display: flex; flex-direction: column; }
.ai-closed__works-title { margin: 0; padding-bottom: 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.ai-closed__link { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.ai-closed__link:hover { color: var(--ink); text-decoration: none; background: var(--sand-hover); }
.ai-closed__link span:last-child { color: var(--text-on-dark-faint); }

.ai-settings__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.05; }
.app--native .ai-settings__title { display: none; }
.ai-settings__card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.ai-settings__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ai-settings__label-wrap { display: flex; flex-direction: column; gap: 2px; }
.ai-settings__label { font-size: 17px; font-weight: 600; }
.ai-settings__state { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.ai-settings__state.is-on { color: var(--green); }
.ai-settings__since, .ai-settings__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-body); }
.ai-settings__sheet {
  width: min(560px, 100vw); max-width: 100vw; margin: auto auto 0; padding: 20px 20px calc(env(safe-area-inset-bottom) + 28px);
  border: none; border-radius: 20px 20px 0 0; background: var(--card); color: var(--ink);
}
.ai-settings__sheet[open] { display: flex; flex-direction: column; gap: 12px; }
.ai-settings__sheet::backdrop { background: rgba(28, 35, 33, .38); }
.ai-settings__sheet-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.ai-settings__sheet p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-line); }
.ai-settings__sheet ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; }
.ai-settings__sheet .ai-settings__still { font-size: 14px; color: var(--green); }
.ai-settings__sheet form { display: contents; }
.ai-settings__off {
  width: 100%; min-height: 52px; margin-top: 4px; border: none; border-radius: 14px; background: var(--clay); color: var(--text-on-accent);
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}

/* Pro in the apps (/pro): the paywall, "You have Pro", and the note for younger learners. */
.paywall { position: relative; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.paywall__main { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s ease; }
.paywall__main.is-dim { opacity: .5; pointer-events: none; }
.paywall__intro { display: flex; flex-direction: column; gap: 4px; }
.paywall__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1; }
.paywall__title em { color: var(--clay); }
.paywall__intro p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-line); }
.paywall__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; }
.paywall__perks li { display: flex; gap: 10px; }
.paywall__perks li::before { content: "✓"; color: var(--green); font-weight: 700; }
.paywall__plans { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 10px; }
.paywall__plan {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.paywall__plan:has(input:checked) { border: 2px solid var(--ink); padding: 13px 15px; }
.paywall__plan:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.paywall__radio { width: 22px; height: 22px; margin: 0; accent-color: var(--green); flex-shrink: 0; }
.paywall__plan-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.paywall__plan-name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.paywall__save { padding: 1px 9px; border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; }
.paywall__plan-sub { font-size: 13px; color: var(--text-body); }
.paywall__plan-price { font-size: 17px; font-weight: 700; white-space: nowrap; }
.paywall__trial { margin: 0; font-size: 14px; line-height: 1.45; }
.paywall__trial[hidden] { display: none; }
.paywall__trial--used { color: var(--text-body); }
.paywall__cta {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: none; border-radius: 14px;
  background: var(--ink); color: var(--paper); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.paywall__cta:hover { color: var(--paper); text-decoration: none; background: var(--ink-raised); }
.paywall__cta:focus-visible, .paywall__restore:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.paywall__web { align-self: center; display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-line); text-decoration: underline; text-underline-offset: 3px; }
.paywall__web[hidden], .paywall__manage[hidden] { display: none; }
.paywall__terms { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-body); }
.paywall__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 14px; font-weight: 600; }
.paywall__foot span { display: flex; gap: 14px; }
.paywall__foot a { min-height: 44px; display: flex; align-items: center; }
.paywall__restore { min-height: 44px; padding: 0; background: none; border: none; color: var(--clay); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

.paywall__sheet {
  position: fixed; inset-inline-start: 16px; inset-inline-end: 16px; bottom: calc(env(safe-area-inset-bottom) + 24px); z-index: 50; max-width: 488px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 40px -20px rgba(28, 35, 33, .5);
}
.paywall__sheet[hidden] { display: none; }
.paywall__sheet-head { display: flex; align-items: center; gap: 12px; }
.paywall__sheet-title { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; }
.paywall__sheet-text { font-size: 15px; line-height: 1.5; color: var(--ink-line); }
.paywall__sheet-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.paywall__sheet-icon--spin { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--ink); animation: auth-spin .8s linear infinite; }
.paywall__sheet-icon--ok { background: var(--right); color: var(--paper); }
.paywall__sheet-icon--calm { border: 2px solid var(--text-muted); color: var(--ink-line); font-family: var(--font-serif); }
.paywall__sheet form { display: contents; }
.paywall__sheet form[hidden] { display: none; }
.paywall__sheet-second { min-height: 44px; background: none; border: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .paywall__sheet-icon--spin { animation-duration: 2.4s; } }

.paywall__feature { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; }
.paywall__card { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.paywall__card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-line); }
.paywall__card-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 25px; line-height: 1.15; }
.paywall__have { display: flex; align-items: center; gap: 10px; }
.paywall__tick { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--paper); font-weight: 700; }
.paywall__have-title { font-family: var(--font-serif); font-size: 30px; line-height: 1; }
.paywall__facts { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.paywall__facts dt { color: var(--text-body); }
.paywall__facts dd { margin: 0; font-weight: 600; text-transform: none; }
.paywall__manage { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }

/* In the apps the navigation bar shows the page's name, so a heading that only
   repeats it is hidden, kept for screen readers. A heading that says more
   (Today's greeting, a score) has page-title--keep. */
.app--native :is(.page-title, .fc__title, .fc-browse__title):not(.page-title--keep) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The apps' email sign-in sheet: Apple and Google above the form (app_welcome/native_buttons), dimmed while signing in. */
.auth--native { position: relative; }
.auth__native { display: flex; flex-direction: column; gap: 10px; }
.auth--native .auth__body.is-busy { opacity: .45; pointer-events: none; }


/* screens/auth.css */
/*
 * Sign-in and password pages for students, teachers and staff (Devise views).
 * Same split screen as onboarding; footer links reuse .onb__back.
 */

.auth { display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
.auth__body { display: flex; flex-direction: column; gap: 28px; } /* the page under the apps' sign-in tabs: dims while signing in */
.auth__header { display: flex; flex-direction: column; gap: 14px; }
.auth__lead { font-size: 18px; line-height: 1.5; color: var(--text-body); }
.auth__form { display: flex; flex-direction: column; gap: 18px; }
.auth__small-link { font-size: 14px; font-weight: 500; }

.auth__check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; align-self: flex-start; }
.auth__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }

.auth__footer { font-size: 15px; flex-wrap: wrap; }

/* Large Arabic word in the dark aside. */
.auth__word { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.auth__word-ar { font-size: clamp(48px, 6vw, 76px); line-height: 1.6; color: var(--peach); align-self: flex-start; }
.auth__word-en { font-size: 15px; color: var(--text-on-dark-muted); }

@media (max-width: 860px) {
  .auth__word { display: none; }
}

/* Staff two-factor setup and sign-in */
.two-factor__steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.5; }
.two-factor__qr { margin: 12px 0 8px; width: 196px; padding: 12px; background: #fff; border-radius: var(--radius-md); }
.two-factor__qr svg { display: block; width: 100%; height: auto; }
.two-factor__secret { font-size: 13px; word-break: break-all; }
.two-factor__code { font-size: 22px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.two-factor__codes { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: var(--sand-hover); border-radius: var(--radius-md); font-size: 16px; }
.two-factor__signout { background: none; border: 0; padding: 0; cursor: pointer; }

/* "Continue with Google", then "or" before the email form */
.auth__google-form { display: contents; }
.auth__google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.auth__google:hover { border-color: var(--ink); }
.auth__google-mark { flex-shrink: 0; }
/* "Email me a sign-in link": a quiet second button under Google, opening an email field */
.auth__email-link { margin-top: 10px; }
.auth__email-link-summary {
  display: flex; align-items: center; justify-content: center; padding: 12px; list-style: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600;
}
.auth__email-link-summary::-webkit-details-marker { display: none; }
.auth__email-link-summary:hover { border-color: var(--ink); }
.auth__email-link[open] .auth__email-link-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.auth__email-link-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-top: 0;
                         border-radius: 0 0 var(--radius-md) var(--radius-md); background: #fff; }
.auth__email-link-form .field { margin: 0; }
/* On sign-up, Google is the main action: dark, with the mark on a white badge. */
.auth__google--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); min-height: 52px; font-size: 16px; }
.auth__google--primary:hover { background: var(--ink-raised); border-color: var(--ink-raised); }
.auth__google-badge { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth__google-badge .auth__google-mark { width: 16px; height: 16px; }
.auth__google-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-line); border-top-color: var(--peach); flex-shrink: 0; animation: auth-spin .8s linear infinite; }
.auth__google.is-busy { background: var(--ink-line); border-color: var(--ink-line); cursor: progress; }
.auth__google.is-busy .auth__google-spinner { display: inline-block; }
.auth__google.is-busy .auth__google-badge { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth__google-spinner { animation-duration: 2.4s; } }

.auth__or { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* A student's note in a teacher invitation (/teach/join/:token). */
.teach-join__note { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--sand); font-size: 15px; color: var(--ink); }

/* A word of the language taught beside a heading or label in the apps' sign-in sheets (auth_accent). */
.auth__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.auth__accent { display: inline-flex; align-items: baseline; gap: 6px; margin-inline-start: 8px; font-weight: 400; }
.auth__title-row .auth__accent { margin-inline-start: 0; }
.auth__accent-word { font-family: var(--font-arabic); font-style: italic; font-size: 1.35em; color: var(--clay-hover); }
.auth__title-row .auth__accent-word { font-size: 23px; }
.auth__accent-en { font-size: 13px; color: var(--text-muted); }
.auth__forgot { align-self: flex-end; display: inline-flex; align-items: baseline; min-height: 44px; }


/* screens/billing.css */
/* Plan & billing */

.billing { max-width: 960px; gap: 22px; }

.billing__plan {
  border-radius: 20px;
  padding: 26px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.billing__plan-copy { display: flex; flex-direction: column; gap: 4px; }
.billing__plan-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; opacity: .8; }
.billing__plan-name { font-size: 40px; line-height: 1; }
.billing__plan-status { font-size: 15px; opacity: .85; }
.billing__plan .btn--clay { padding: 13px 22px; font-weight: 700; }
.billing__plan .btn--ghost-dark { font-weight: 600; }

.billing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.billing__card { padding: 22px; gap: 12px; }
.billing__card-title { margin: 0; font-size: 15px; font-weight: 600; }
.billing__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.billing__fine { font-size: 13px; color: var(--text-muted); }
.billing__link { font-size: 14px; font-weight: 600; }
.billing__card-tag {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}
.billing__buy { font-weight: 600; }
.billing__bought { margin: 0; font-size: 13px; color: var(--green); font-weight: 600; }

.billing__danger { background: none; color: var(--clay); border-color: var(--clay); }
.billing__danger:hover { background: var(--clay-soft); color: var(--clay); }
.billing__cancel {
  background: var(--clay-soft);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.billing__cancel[hidden] { display: none; }
.billing__cancel p { margin: 0; font-size: 15px; line-height: 1.5; }

.billing__allowance { gap: 16px; }
.billing__meter { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.billing__meter-value { font-size: 14px; font-weight: 600; }
.billing__meter.is-high .progress__bar { background: var(--gold); }
.billing__meter.is-full .progress__bar { background: var(--clay); }
.billing__meter.is-full .billing__meter-value { color: var(--clay); }
.billing .progress { flex: none; }

/* "Update" posts to Stripe's card page; it looks like the other links. */
.billing__link-button { background: none; border: 0; padding: 0; color: var(--clay); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.billing__link-button:hover { color: var(--clay-deep); text-decoration: underline; }

.billing__invoices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.billing__invoices li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; }
.billing__invoice-what { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing__invoice-amount { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Gift Pro: asking someone to pay, and the payer's pages. */
.gift-ask { max-width: 620px; }
.gift-ask__cycles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gift-ask__cycle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 14px; cursor: pointer; }
.gift-ask__sent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.gift-ask__sent li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.gift-buy__points { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.gift-buy__plans { display: flex; flex-direction: column; gap: 10px; }
.gift-buy__terms { font-size: 13px; }
.billing__gift { font-size: 14px; }
.billing__plan-actions { align-items: center; gap: 14px; }
.billing__gift-link { font-size: 14px; color: inherit; text-decoration: underline; }

/* Pro bought in an app (billing/_store): managed in that store. */
.billing__store { display: flex; flex-direction: column; gap: 16px; }
.billing__store-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.billing__store-copy { display: flex; flex-direction: column; gap: 6px; }
.billing__store-name { font-size: 34px; line-height: 1; }
.billing__store-status { font-size: 15px; color: var(--ink-line); }
.billing__store-manage {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.billing__store-manage:hover { color: var(--paper); text-decoration: none; background: var(--ink-raised); }
.billing__store-note { margin: 0; display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 15px; line-height: 1.5; }
.billing__store-note > span:first-child { font-family: var(--font-serif); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--clay); }
.billing__app-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.5; }
@media (max-width: 560px) {
  .billing__store-name { font-size: 27px; line-height: 1.1; }
  .billing__store-manage { width: 100%; justify-content: center; }
}


/* screens/breakdowns.css */
/*
 * A sentence's breakdown (iʿrāb), from "Explain this sentence": the
 * structure, a row per word (role, case badge, the word, the reason), the
 * states around it (preparing the page, analysing, messages), the sentence
 * highlighted in the text, the sentence menu and the phone sheet.
 * Markup: sentence_breakdowns/_breakdown, sentence_breakdown.js,
 * sentence_tools_controller.js.
 */

/* ── The breakdown ────────────────────────────────────────────────── */
.bd { display: flex; flex-direction: column; gap: 12px; }
.bd__structure { display: flex; gap: 10px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.bd__label { flex-shrink: 0; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.bd__structure .ar { font-size: 1.2em; }
.bd__flag { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--ink-line); }
.bd__flag-i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gold-deep); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

.bd__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bd__row { background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.bd__row.is-selected { background: var(--field); border-color: var(--ink); }
.bd__row-top { display: flex; align-items: center; gap: 10px; }
.bd__role { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: none; border: none; padding: 0; text-align: var(--start); color: var(--ink); cursor: pointer; }
.bd__role:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.bd__role-en { font-size: 14px; font-weight: 700; }
.bd__role-ar { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.bd__badge { border-radius: var(--radius-sm); padding: 2px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--sand); color: var(--ink-line); }
.bd__badge--nominative, .bd__badge--indicative { background: var(--green-soft); color: var(--green); }
.bd__badge--accusative, .bd__badge--subjunctive { background: var(--mark); color: var(--gold-deep); }
.bd__badge--genitive, .bd__badge--jussive { background: var(--clay-soft); color: var(--clay); }
/* Turkish's other cases */
.bd__badge--dative, .bd__badge--locative, .bd__badge--ablative, .bd__badge--instrumental { background: var(--sand); color: var(--text-body); }
.bd__ar { min-width: 64px; text-align: right; /* physical: text in the language taught keeps its own side */ font-size: 24px; line-height: 1.8; color: var(--ink); text-decoration: none; }
.bd__ar:hover { color: var(--clay); text-decoration: none; }
.bd__reason { font-size: 13px; line-height: 1.55; color: var(--ink-line); }
.bd__reason .ar { font-size: 17px; }
/* Long sentences (and flashcards): only the selected row's reason */
.bd.is-collapsed .bd__row:not(.is-selected) .bd__reason { display: none; }

.bd__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.bd__report { font-size: 13px; color: var(--text-body); text-decoration: underline; }
.bd__reported { font-size: 13px; color: var(--green); font-weight: 600; }
.bd__actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }

/* Compact, on a flashcard's back: one line a row */
.bd--compact { gap: 8px; }
.bd--compact .bd__structure { border-top: none; padding-top: 0; font-size: 13px; }
.bd--compact .bd__structure .bd__label { display: none; }
.bd--compact .bd__flag { font-size: 12px; padding: 8px 10px; }
.bd--compact .bd__rows { gap: 0; }
.bd--compact .bd__row { background: none; border: none; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 5px 0; gap: 2px; }
.bd--compact .bd__row.is-selected { background: none; }
.bd--compact .bd__role { flex-direction: row; }
.bd--compact .bd__role-en { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd--compact .bd__role-ar { display: none; }
.bd--compact .bd__ar { font-size: 20px; min-width: 56px; }
.bd--compact .bd__reason { font-size: 12px; padding-bottom: 4px; }
.bd--compact .bd__foot { border-top: none; padding-top: 0; }
.bd--compact .bd__report { font-size: 12px; }

/* ── States ───────────────────────────────────────────────────────── */
.bd-state { display: flex; flex-direction: column; gap: 10px; }
.bd-state--preparing, .bd-state--message { background: var(--paper); border-radius: 16px; padding: 16px; }
.bd-state__status { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.bd-state__time { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.bd-state__title { font-size: 15px; line-height: 1.4; }
.bd-state__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-line); }
.bd-state__hint, .bd-state__foot { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.bd-state__foot { margin-top: 10px; }
.bd-state__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--ink); flex-shrink: 0; animation: bd-spin .8s linear infinite; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bd-spin { animation: none; } }
.bd-skeleton { display: flex; flex-direction: column; gap: 8px; }
.bd-skeleton__row { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bd-skeleton__lines { width: 60%; height: 10px; border-radius: 5px; background: var(--line-soft); box-shadow: 0 16px 0 var(--line-soft); margin-bottom: 16px; }
.bd-skeleton__badge { width: 54px; height: 22px; border-radius: var(--radius-sm); background: var(--line-soft); }
.bd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.bd-steps__step { display: flex; gap: 10px; align-items: center; color: var(--text-muted); }
.bd-steps__step.is-current { color: var(--ink); }
.bd-steps__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; }
.bd-steps__time { margin-inline-start: auto; color: var(--text-muted); }

/* ── Save sentence ────────────────────────────────────────────────── */
.sentence-save { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; }
.sentence-save__button {
  background: none; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); padding: 0 16px; min-height: 38px;
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.sentence-save__button:hover { background: var(--sand-hover); }
.sentence-save__button.is-busy { background: var(--sand); border-color: var(--sand); cursor: progress; }
.sentence-save__button.is-saved { background: var(--green-soft); border-color: var(--green-soft); color: var(--green); }
.sentence-save__button.is-full { background: var(--sand); border-color: var(--sand); color: var(--text-body); cursor: not-allowed; }
.sentence-save__status { font-size: 13px; line-height: 1.45; color: var(--ink-line); }
.sentence-save__status:empty { display: none; }
.sentence-save__status a { font-weight: 700; }
.sentence-save__count { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }

/* ── The library reader ───────────────────────────────────────────── */
/* The sentence being explained: a soft gold wash and a dotted clay underline;
   the selected word, an ink box. Both read the same with any amount of vowels. */
.st-highlight, .st-highlight-word {
  background: var(--mark); border-bottom: 2px dotted var(--clay); border-radius: 6px; padding: 4px 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.reader__sentence.is-explaining .reader__ar { background: var(--mark); border-bottom: 2px dotted var(--clay); border-radius: 6px; }
.reader__w.is-bd-selected { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; background: var(--field); }

/* The Sentence tab: a dot when its breakdown is ready while another tab is open */
.reader__tab.has-dot::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 5px; vertical-align: 2px; border-radius: 50%; background: var(--clay); }
.st-panel { display: flex; flex-direction: column; gap: 14px; }
.st-panel[hidden] { display: none; }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-head__pos { font-size: 13px; color: var(--text-muted); }
.st-head__pos strong { color: var(--ink); }
.st-head__nav { display: flex; gap: 6px; }
.st-head__step { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--ink); }
.st-head__step:hover { border-color: var(--ink); }
.st-sentence { margin: 0; font-size: 27px; line-height: 2.2; text-align: right; /* physical: text in the language taught keeps its own side */ }
.st-sentence__w { background: none; border: none; margin: 0; padding: 0 3px; font: inherit; color: inherit; border-radius: 6px; cursor: pointer; }
.st-sentence__w:hover { background: var(--sand-hover); }
.st-sentence__w.is-selected { outline: 2px solid var(--ink); background: var(--field); }
.st-body { display: flex; flex-direction: column; gap: 12px; }

/* The Word panel's "This word's sentence" */
.st-group { background: var(--paper); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.st-group[hidden] { display: none; }
.st-group__label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.st-group__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-group__buttons .sentence-save { display: contents; }
.st-group__buttons .sentence-save__button { min-height: 44px; font-size: 14px; }
.st-group__buttons .sentence-save__status { grid-column: 1 / -1; }
.st-group__explain {
  display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--paper); border: none;
  border-radius: var(--radius-pill); min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.st-group__explain:hover { background: var(--ink-raised); }
.st-group__explain:focus-visible, .sentence-save__button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.st-group__mark, .st-menu__icon.ar { font-size: 17px; color: var(--peach); }
.st-group__counts { font-size: 12px; color: var(--text-muted); }
.st-group__counts:empty { display: none; }

/* The sentence menu (right-click, long-press, Shift+F10) */
.st-menu {
  position: absolute; z-index: 30; width: 300px; background: var(--field); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 34px -16px rgba(28, 35, 33, .5); padding: 6px; display: flex; flex-direction: column;
}
.st-menu[hidden] { display: none; }
.st-menu__label { padding: 8px 12px 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.st-menu__item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: none; border-radius: 9px; background: none;
  font-size: 15px; color: var(--ink); text-align: var(--start); cursor: pointer;
}
.st-menu__item:hover, .st-menu__item:focus { background: var(--paper); }
.st-menu__item:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.st-menu__icon { width: 18px; text-align: center; }
.st-menu__icon:not(.ar) { color: var(--text-muted); }
.st-menu__key { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); }
.st-menu__help { border-top: 1px solid var(--line-soft); margin-top: 4px; padding: 8px 12px 4px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.st-menu__status { padding: 0 12px 6px; font-size: 13px; font-weight: 600; color: var(--green); }
.st-menu__status:empty { display: none; }

/* The phone sheet: three heights, the highlighted sentence in view above it at peek and half */
.st-sheet { display: none; }
@media (max-width: 700px) {
  .st-menu { width: auto; inset-inline-start: 16px !important; inset-inline-end: 16px; background: var(--ink); color: var(--paper); border: none; border-radius: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .st-menu__label, .st-menu__help, .st-menu__key { display: none; }
  .st-menu__item { min-height: 52px; flex-direction: column; justify-content: center; gap: 1px; font-size: 13px; font-weight: 600; color: var(--paper); text-align: center; }
  .st-menu__item:first-of-type { background: var(--ink-raised); }
  .st-menu__item:hover, .st-menu__item:focus { background: var(--ink-raised); }
  .st-menu__icon:not(.ar) { color: var(--paper); }
  .st-menu__status { grid-column: 1 / -1; color: var(--green-bright); padding: 6px 12px; }

  .st-sheet:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; z-index: 40; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 50vh;
    background: var(--card); border-top: 1px solid var(--line-strong); border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 34px -18px rgba(28, 35, 33, .45); transition: height .2s ease;
  }
  .st-sheet[data-height="peek"] { height: 42vh; }
  .st-sheet[data-height="half"] { height: 58vh; }
  .st-sheet[data-height="full"] { height: 85vh; }
  .st-sheet__grip { display: flex; justify-content: center; padding-top: 6px; }
  .st-sheet__handle { width: 64px; height: 24px; border: none; background: none; display: flex; align-items: center; justify-content: center; }
  .st-sheet__handle span { width: 40px; height: 4px; border-radius: 4px; background: var(--line-dashed); }
  .st-sheet__head { display: flex; justify-content: space-between; align-items: center; padding-block: 0 6px; padding-inline: 16px 8px; }
  .st-sheet__buttons { display: flex; gap: 2px; }
  .st-sheet__button { width: 44px; height: 44px; border: none; background: none; font-size: 18px; color: var(--ink); }
  .st-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
  .st-sheet__body .bd__row { padding: 8px 10px; }
  .st-sheet__body .bd__ar { font-size: 21px; }
  .st-sheet__body .bd.is-collapsed .bd__row:not(.is-selected) .bd__reason,
  .st-sheet__body .bd .bd__row:not(.is-selected) .bd__reason { display: none; }
  /* The text scrolls clear of the sheet */
  body:has(.st-sheet:not([hidden])) .reader__page { padding-bottom: 50vh; }
}


/* screens/characters.css */
/* Chinese characters (characters/index, characters/show): the list by level and a character's page with its stroke
   order (Hanzi Writer draws into .hz__canvas). Builds on the dictionary's tdict and zdict classes. */
.hz__crumbs { margin-bottom: 12px; font-size: 14px; }
.hz__crumbs a { color: var(--text-muted); }
.hz__lead { max-width: 640px; color: var(--text-body); margin: -6px 0 18px; }
.hz__head { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.hz__writer-box { display: flex; flex-direction: column; align-items: center; }
.hz__writer { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.hz__canvas { width: 280px; height: 280px; max-width: 100%; border-radius: var(--radius-lg, 16px);
  background:
    linear-gradient(to right, transparent calc(50% - .5px), var(--line, #E6E0D4) calc(50% - .5px), var(--line, #E6E0D4) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line, #E6E0D4) calc(50% - .5px), var(--line, #E6E0D4) calc(50% + .5px), transparent calc(50% + .5px)),
    var(--paper); border: 1px solid var(--line, #E6E0D4); }
.hz__status { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--text-muted); text-align: center; }
.hz__tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hz__glyph { font-family: var(--font-arabic); font-size: 160px; line-height: 1; }
.hz__readings { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.hz__facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0; }
.hz__facts dt { color: var(--text-muted); font-size: 14px; }
.hz__facts dd { margin: 0; }
.hz__link, .hz__part { font-family: var(--font-arabic); font-size: 20px; text-decoration: none; color: var(--ink); }
.hz__parts { display: flex; flex-wrap: wrap; gap: 12px; }
.hz__part-py { font-family: var(--font-sans); font-size: 13px; color: var(--clay); }
.hz__origin { margin: 10px 0; color: var(--text-body); }
.hz__actions { justify-content: flex-start; margin-top: 12px; }
.hz__words { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hz__word { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--paper); text-decoration: none; color: inherit; }
.hz__word:hover { background: var(--sand); }
.hz__word-zh { font-family: var(--font-arabic); font-size: 22px; }
.hz__word-py { font-size: 13px; color: var(--clay); }
.hz__word-en { font-size: 13px; color: var(--text-muted); }
.hz__credit { margin-top: 18px; font-size: 13px; color: var(--text-muted); }
.hz__levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.hz__levels .chip { text-decoration: none; }
.hz__levels .chip.is-active { background: var(--ink); color: var(--paper); }
.hz__level-range { opacity: .7; font-size: 12px; }
.hz__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.hz__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--white, #fff);
  border: 1px solid var(--line, #E6E0D4); text-decoration: none; color: inherit; text-align: center; }
.hz__cell:hover { border-color: var(--ink); }
.hz__cell-zh { font-family: var(--font-arabic); font-size: 34px; line-height: 1.2; }
.hz__cell-py { font-size: 13px; color: var(--clay); }
.hz__cell-en { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
@media (max-width: 760px) {
  .hz__head { grid-template-columns: 1fr; }
}


/* screens/checkout.css */
/* Checkout: the order summary before Stripe's payment page */

.checkout {
  max-width: 1040px;
  padding-top: 24px;
  padding-bottom: 80px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.checkout__main { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.checkout__main .segmented { align-self: flex-start; }
.checkout__main .segmented__option { padding: 8px 16px; }
.checkout__back { align-self: flex-start; color: var(--text-muted); font-size: 14px; }
.checkout__back:hover { color: var(--ink); }
.checkout__title { font-size: 48px; }
.checkout__fields { gap: 14px; }
.checkout__subtitle { margin: 0; font-size: 15px; font-weight: 700; }
.checkout__fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.checkout__summary {
  flex: 1 1 320px;
  min-width: 0;
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}
.checkout__summary-title { margin: 0; font-weight: 700; }
.checkout__product { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.checkout__product-name { font-size: 28px; }
.checkout__quiet { color: var(--text-on-dark-muted); font-size: 14px; }

.checkout__lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--ink-line);
  padding-top: 14px;
  font-size: 15px;
}
.checkout__lines > div { display: flex; justify-content: space-between; gap: 12px; }
.checkout__lines dd { margin: 0; white-space: nowrap; }
.checkout__lines .checkout__quiet { font-size: 15px; }

.checkout__due {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--ink-line);
  padding-top: 14px;
  font-size: 15px;
  font-weight: 600;
}
.checkout__due-amount { font-size: 36px; font-weight: 400; color: var(--peach); }
.checkout__then { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-on-dark-muted); }

.checkout__submit { margin-top: 4px; padding: 15px; font-size: 15px; font-weight: 700; }

/* Done: "Welcome to Pro" */
.checkout-done { max-width: 680px; padding-top: 40px; padding-bottom: 80px; }
.checkout-done__card {
  border-radius: 24px;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.checkout-done__ar { font-size: 52px; color: var(--peach); line-height: 1.4; }
.checkout-done__title { font-size: 46px; margin: 0; line-height: 1; }
.checkout-done__note { margin: 0; font-size: 16px; line-height: 1.55; color: var(--green-soft); max-width: 440px; }
.checkout-done__note a { color: var(--paper); text-decoration: underline; }
.checkout-done__unlocked {
  gap: 8px;
  text-align: var(--start);
  background: var(--green-deep);
  border-radius: 16px;
  padding: 18px 22px;
  width: 100%;
  max-width: 420px;
}
.checkout-done__card .btn { padding: 14px 26px; font-weight: 700; }

@media (max-width: 760px) {
  .checkout__summary { position: static; }
  .checkout__title { font-size: 40px; }
  .checkout-done__card { padding: 36px 22px; }
}


/* screens/classes.css */
/* Classes (student side): join a class, see assigned readings. */

.classes__join {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px;
}
.classes__join-title { font-size: 15px; font-weight: 600; }
.classes__join-input { flex: 1; min-width: min(200px, 100%); width: auto; }
.classes__join-msg { width: 100%; font-size: 14px; font-weight: 600; color: var(--green); }
.classes__join-msg.is-error { color: var(--clay); }

.classes__class { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.classes__name { font-size: 28px; line-height: 1.15; }
.classes__teacher { font-size: 14px; }
.classes__none { font-size: 14px; }

.classes__assignments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.classes__assignment {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.classes__title { font-size: 15px; font-weight: 600; }
.classes__detail { font-size: 13px; color: var(--text-muted); }

@media (max-width: 560px) {
  .classes__join, .classes__class { padding: 18px; }
  .classes__join-title { width: 100%; }
  .classes__join-input { min-width: 0; }
}

.classes__instructions { font-size: 14px; color: var(--text-body); white-space: pre-line; }
.classes__ended { margin-inline-start: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; vertical-align: middle; color: var(--text-muted); background: var(--sand-hover); border-radius: var(--radius-pill); padding: 3px 9px; }
.classes__leave { align-self: flex-end; background: none; border: none; padding: 0; font-size: 13px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.classes__leave:hover { color: var(--clay); }

/* Invite your teacher (TeacherInvitationsController). */
.invite-teacher { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.invite-teacher__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.invite-teacher__list li { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.invite-teacher__list li:first-child { border-top: 0; }
.invite-teacher__email { font-weight: 600; }
.classes__targets { font-size: 17px; color: var(--text-body); }
.classes__texts-title { margin: 8px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* A class's next meeting (classes/_next_meeting), on the class page and on Today: when, how soon, Join. */
.next-meeting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 18px;
  border-radius: 16px; background: var(--sand); }
.next-meeting.is-live { background: var(--green-soft); }
.next-meeting__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.next-meeting__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.next-meeting__when { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.next-meeting__note { font-size: 14px; color: var(--text-body); }
.classes__calendar > summary { cursor: pointer; width: fit-content; }
.classes__calendar[open] { display: flex; flex-direction: column; gap: 10px; }
.today .next-meeting, .screen > .next-meeting { margin-bottom: 4px; }


/* screens/conjugate-tr.css */
/* The conjugator for a language whose verbs are a stem and suffixes (Turkish):
   conjugations/show_suffixes, design "TurkishGenius Conjugator". */

.tconj { display: flex; flex-direction: column; gap: 16px; min-width: 0; container-type: inline-size; }
.tconj__crumbs { font-size: 13px; color: var(--text-muted); }
.tconj__crumbs a { color: var(--text-muted); text-decoration: underline; }
.tconj__crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.tconj__muted { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.tconj__box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding-block: 0; padding-inline: 18px 6px; border: 1.5px solid var(--line-mid); border-radius: var(--radius-pill); background: var(--field); }
.tconj__box:focus-within { border: 2px solid var(--ink); }
.tconj__box .icon { flex-shrink: 0; color: var(--text-muted); }
.tconj__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); outline: none; }
.tconj__go { flex-shrink: 0; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Before a search: common verbs by level */
.tconj__intro { display: flex; flex-direction: column; gap: 6px; }
.tconj__intro .tconj__muted { font-size: 15px; max-width: 640px; }
.tconj__group { display: flex; flex-direction: column; gap: 10px; }
.tconj__label { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.tconj__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tconj__chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-family: var(--font-arabic); font-size: 20px; line-height: 1.2; text-decoration: none; }
.tconj__chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.tconj__chip-en { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }
.tconj__status { margin: 0; font-size: 15px; }
.tconj__matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tconj__match { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; }
.tconj__match:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.tconj__match-verb { font-family: var(--font-arabic); font-size: 24px; line-height: 1.1; }
.tconj__match-en { flex: 1; font-size: 14px; color: var(--text-muted); }
.tconj__none { padding: 22px; border: 1px dashed var(--line-dashed); border-radius: 18px; display: flex; flex-direction: column; gap: 6px; }
.tconj__none-title { margin: 0; font-size: 17px; font-weight: 600; }

/* The verb */
.tconj__verb { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tconj__card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.tconj__head { padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; }
.tconj__head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tconj__headword { margin: 0; font-family: var(--font-arabic); font-weight: 400; font-size: 56px; line-height: 1; }
.tconj__meaning { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--text-body); }
.tconj__facts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.tconj__kind { border: 1px solid var(--line-mid); border-radius: var(--radius-pill); padding: 1px 10px; font-weight: 600; }
.tconj__stem { font-family: var(--font-arabic); font-size: 17px; font-weight: 400; color: var(--ink); }
.tconj__unlisted { max-width: 560px; }
.tconj__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tconj__actions form { display: contents; }
.tconj__pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-mid); border-radius: var(--radius-pill); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tconj__pill:hover { border-color: var(--ink); }
.tconj__save { min-height: 44px; }

.tconj__controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tconj__tabs { display: none; }
.tconj__polarity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; min-width: 360px; padding: 3px; border-radius: var(--radius-pill); background: var(--sand); }
.tconj__polarity-option { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tconj__polarity-option[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.tconj__polarity-option:focus-visible, .tconj__tab:focus-visible, .tconj__cell:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* The suffix chain of the form tapped */
.tconj__chain { background: var(--ink); color: #FFFFFF; border-radius: 18px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.tconj__chain-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tconj__chain-title { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-on-dark-muted); font-weight: 700; }
.tconj__chain-form { font-family: var(--font-arabic); font-size: 30px; line-height: 1; color: var(--peach); }
.tconj__parts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.tconj__part { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 11px; border: 1px solid var(--ink-line-strong); border-radius: 10px; background: var(--ink-line); }
.tconj__part--stem { background: var(--ink-raised); }
.tconj__part-text { font-family: var(--font-arabic); font-size: 24px; line-height: 1; color: #FFFFFF; }
.tconj__part-gloss { font-size: 12px; color: var(--text-on-dark-muted); white-space: nowrap; }
.tconj__space { display: flex; align-items: center; padding: 0 4px; font-size: 12px; color: var(--text-on-dark-muted); }
.tconj__english { margin: 0; font-size: 15px; line-height: 1.55; }
.tconj__english span { font-weight: 700; color: var(--green-bright); }
.tconj__english[hidden] { display: none; }
.tconj__built { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ink-line); padding-top: 12px; }
.tconj__built-label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-on-dark-muted); font-weight: 700; }
.tconj__notes { display: flex; flex-direction: column; gap: 6px; }
.tconj__notes p { margin: 0; font-size: 14px; line-height: 1.55; }

/* The table: persons down, tenses across */
.tconj__tables { overflow: hidden; border-radius: 18px; }
.tconj__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tconj__table[hidden] { display: none; }
.tconj__table thead tr { background: var(--sand); }
.tconj__table thead th { text-align: var(--start); padding: 10px 12px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-body); line-height: 1.3; }
.tconj__table thead .tconj__person-col { width: 150px; padding-inline-start: 14px; letter-spacing: 1px; }
.tconj__th-sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.tconj__table tbody tr { border-top: 1px solid var(--line-soft); }
.tconj__table tbody th { text-align: var(--start); padding: 0 14px; font-weight: 400; }
.tconj__table td { padding: 4px; }
.tconj__pronoun { display: block; font-size: 15px; font-weight: 700; }
.tconj__pronoun-en { display: block; font-size: 12px; color: var(--text-muted); }
.tconj__cell {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 10px; border: 1.5px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: var(--start); cursor: pointer;
}
.tconj__cell:hover { background: var(--sand); }
.tconj__cell[aria-pressed="true"] { background: var(--mark); border-color: var(--ink); }
.tconj__cell-form { font-family: var(--font-arabic); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.tconj__cell-rest { color: var(--clay-deep); }
.tconj__cell-play { flex-shrink: 0; font-size: 10px; color: var(--clay-hover); }
.tconj__footnote { margin-top: -4px; }

/* Narrow: one tense at a time, with tabs (3 + 2) above the Positive / Negative / Question switch. */
@container (max-width: 760px) {
  .tconj__head { flex-direction: column; align-items: stretch; padding: 16px; }
  .tconj__headword { font-size: 44px; }
  .tconj__meaning { font-size: 22px; }
  .tconj__controls { flex-direction: column; align-items: stretch; }
  .tconj__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--sand); }
  .tconj__tab { min-height: 44px; padding: 4px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; cursor: pointer; }
  .tconj__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
  .tconj__polarity { min-width: 0; }
  .tconj__hint { display: none; }
  .tconj__chain { padding: 14px 16px; }
  .tconj__chain-form { font-size: 24px; }
  .tconj__part-text { font-size: 21px; }
  .tconj__table thead .tconj__person-col { width: 120px; }
  .tconj__cell-form { font-size: 21px; }
  .tconj__tables:not([data-tense="present"]) [data-col="present"],
  .tconj__tables:not([data-tense="past"]) [data-col="past"],
  .tconj__tables:not([data-tense="future"]) [data-col="future"],
  .tconj__tables:not([data-tense="aorist"]) [data-col="aorist"],
  .tconj__tables:not([data-tense="reported"]) [data-col="reported"] { display: none; }
}


/* screens/conjugate.css */
/* The conjugator (/conjugate, conjugations/show): search, the ten forms,
   matches, and a verb's table. Each filled cell is one button that plays
   and selects the form; "—" is a missing form, never a guess. On phones
   the tabs show one tense at a time (the table's data-tab). */
.conj { gap: 18px; }
.conj__crumbs { font-size: 13px; color: var(--text-muted); }
.conj__crumbs a { color: var(--text-muted); text-decoration: underline; }
.conj__crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.conj__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: -8px; }
.conj__head-note, .conj__muted { font-size: 13px; color: var(--text-muted); }
.conj__h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; }
.conj__eyebrow { margin-block: 0; margin-inline: 0 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.conj__tag { padding: 1px 8px; border-radius: 6px; background: var(--sand); font-weight: 700; color: var(--ink); }
.conj__card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }

/* Search */
.conj__search { display: flex; flex-direction: column; gap: 6px; }
.conj__box { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-block: 0; padding-inline: 18px 6px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--field); }
.conj__box:focus-within { border: 2px solid var(--ink); }
.conj__box .icon { flex-shrink: 0; color: var(--text-muted); }
.conj__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.conj__input:dir(rtl), .conj__input[dir="rtl"] { font-family: var(--font-arabic); font-size: 24px; line-height: 1.6; }
.conj__go { flex-shrink: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.conj__go:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.conj__hint { padding-inline-start: 18px; font-size: 13px; color: var(--text-muted); }

/* Before a search */
.conj__forms { display: flex; flex-direction: column; gap: 12px; }
.conj__section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conj__form-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.conj__form { height: 100%; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; }
.conj__form:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.conj__form:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.conj__form-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.conj__form-n { font-size: 12px; font-weight: 700; color: var(--clay); }
.conj__form-pattern { font-family: var(--font-arabic); font-size: 15px; color: var(--text-muted); }
.conj__form-verb { font-family: var(--font-arabic); font-size: 28px; line-height: 1.8; text-align: right; /* physical: text in the language taught keeps its own side */ }
.conj__form-en { font-size: 13px; color: var(--text-body); }
.conj__recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conj__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--field); color: var(--ink); text-decoration: none; }
.conj__chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.conj__chip bdi { font-family: var(--font-arabic); font-size: 20px; line-height: 1.6; }
.conj__chip span { font-size: 13px; color: var(--text-body); }

/* Matches and no match */
.conj__status { margin: 0; font-size: 15px; color: var(--ink-line); }
.conj__status bdi, .conj__none bdi, .conj__muted bdi, .conj__match-meta bdi { font-family: var(--font-arabic); font-size: 1.2em; }
.conj__matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.conj__match { display: flex; align-items: center; gap: 18px; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; }
.conj__match:hover, .conj__match:focus-visible { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.conj__match:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.conj__match-ar { min-width: 190px; font-family: var(--font-arabic); font-size: 30px; line-height: 1.7; text-align: right; /* physical: text in the language taught keeps its own side */ }
.conj__match-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conj__match-en { font-size: 17px; font-weight: 700; }
.conj__match-meta { font-size: 13px; color: var(--text-body); }
.conj__match-go { font-size: 20px; color: var(--clay); }
.conj__none { max-width: 680px; display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.conj__none-title { margin: 0; font-family: var(--font-serif); font-size: 30px; line-height: 1.2; }
.conj__none-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-line); }
.conj__none-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; }

/* A verb */
.conj__verb { display: flex; flex-direction: column; gap: 18px; }
.conj__verb-head { display: flex; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; border-radius: 20px; }
.conj__verb-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.conj__headword { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-weight: 400; }
.conj__headword-ar { font-family: var(--font-arabic); font-weight: 700; font-size: 46px; line-height: 1.7; }
.conj__headword-present { font-family: var(--font-arabic); font-size: 28px; line-height: 1.7; color: var(--text-body); }
.conj__meaning { margin-top: -6px; font-family: var(--font-serif); font-size: 28px; line-height: 1.1; }
.conj__facts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.conj__kind { padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-weight: 600; }
.conj__root { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.conj__root bdi { font-family: var(--font-arabic); font-size: 17px; }
.conj__noun { font-family: var(--font-arabic); font-size: 18px; color: var(--ink); }
.conj__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; align-self: center; }
.conj__actions form { margin: 0; }
.conj__pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.conj__pill:hover { border-color: var(--ink); }
.conj__actions .save-word { min-height: 44px; padding: 0 16px; border: 1px solid var(--green); background: none; color: var(--green); font-size: 14px; font-weight: 600; }
.conj__drill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--clay); color: var(--text-on-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.conj__drill:hover { background: var(--clay-hover); color: var(--text-on-accent); text-decoration: none; }

.conj__note { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--sand); font-size: 15px; line-height: 1.5; }
.conj__note bdi { font-family: var(--font-arabic); font-size: 1.25em; }
.conj__note-i { font-family: var(--font-serif); font-size: 20px; line-height: 1.1; font-weight: 700; color: var(--clay); }
.conj__note-link { font-weight: 600; white-space: nowrap; }

.conj__tabs { display: none; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--sand); }
.conj__tab { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.conj__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.conj__tab:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.conj__built { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field); font-size: 14px; }
.conj__built[hidden] { display: none; }
.conj__built-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.conj__built-form { font-family: var(--font-arabic); font-size: 22px; line-height: 1.6; font-weight: 700; }
.conj__built-who { color: var(--text-body); }
.conj__built-sep { color: var(--line-dashed); }

.conj__table-wrap { overflow: hidden; }
.conj__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.conj__table thead tr { background: var(--sand); }
.conj__table th[scope="col"] { padding: 10px 14px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-line); text-align: right; /* physical: text in the language taught keeps its own side */ }
.conj__table th.conj__person { width: 190px; text-align: var(--start); }
.conj__table th[scope="row"] { padding: 0 14px; font-weight: 400; text-align: var(--start); }
.conj__table tbody tr + tr { border-top: 1px solid var(--line-soft); }
.conj__table tbody tr.conj__group { border-top: 2px solid var(--line-mid); }
.conj__person-in { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.conj__person-en { font-size: 14px; font-weight: 600; white-space: nowrap; }
.conj__short { display: none; }
.conj__pronoun { font-family: var(--font-arabic); font-size: 17px; color: var(--text-body); }
.conj__table td { padding: 3px 4px; }
.conj__cell { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 10px;
              border: 1.5px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.conj__cell:hover { border-color: var(--line-strong); }
.conj__cell[aria-pressed="true"] { background: var(--field); border-color: var(--ink); }
.conj__cell:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.conj__play { flex-shrink: 0; font-size: 10px; color: var(--clay); }
.conj__cell-ar { font-family: var(--font-arabic); font-size: 23px; line-height: 1.9; white-space: nowrap; }
.conj__no { display: flex; align-items: center; justify-content: flex-end; min-height: 50px; padding: 0 12px; font-size: 18px; color: var(--text-muted); }

.conj__passive { overflow: hidden; }
.conj__passive-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 18px; cursor: pointer; list-style: none; }
.conj__passive-head::-webkit-details-marker { display: none; }
.conj__passive-head:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.conj__passive-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conj__passive-name { font-size: 16px; font-weight: 700; }
.conj__passive-ar { font-family: var(--font-arabic); font-size: 21px; line-height: 1.7; color: var(--ink-line); }
.conj__passive-toggle { font-size: 14px; font-weight: 600; color: var(--clay); white-space: nowrap; }
.conj__passive .conj__hide, .conj__passive[open] .conj__show { display: none; }
.conj__passive[open] .conj__hide { display: inline; }
.conj__passive .conj__table { border-top: 1px solid var(--line); }

.conj__more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-mid); }
.conj__more-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; }
.conj__lesson { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 13px; color: var(--ink); text-decoration: none; }
.conj__lesson:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

@media (max-width: 1100px) {
  .conj__form-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conj__table th.conj__person { width: 150px; }
  .conj__long { display: none; }
  .conj__short { display: inline; }
}

/* Phones: one tense at a time */
@media (max-width: 640px) {
  .conj__form-list { grid-template-columns: 1fr 1fr; }
  .conj__form-verb { font-size: 24px; }
  .conj__h2 { font-size: 24px; }
  .conj__input { font-size: 14px; }
  .conj__match { gap: 12px; padding: 12px 14px; }
  .conj__match-ar { min-width: 0; font-size: 24px; }
  .conj__verb-head { flex-direction: column; padding: 16px; }
  .conj__actions { align-self: flex-start; }
  .conj__headword-ar { font-size: 38px; }
  .conj__headword-present, .conj__meaning { font-size: 24px; }
  .conj__tabs { display: grid; }
  .conj__table th.conj__person { width: 150px; }
  .conj__table th[scope="row"], .conj__table th[scope="col"] { padding-inline-start: 10px; padding-inline-end: 10px; }
  .conj__table[data-tab] [class*="conj__col--"] { display: none; }
  .conj__table[data-tab="past"] .conj__col--past, .conj__table[data-tab="present"] .conj__col--present,
  .conj__table[data-tab="subjunctive"] .conj__col--subjunctive, .conj__table[data-tab="jussive"] .conj__col--jussive,
  .conj__table[data-tab="command"] .conj__col--command { display: table-cell; }
}


/* screens/daily-word.css */
/* Daily word */

.dw__layout { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.dw__main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dw__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.dw__view { padding: 6px 14px; font-size: 13px; font-weight: 600; }

/* Card */
.dw__card {
  background: var(--green);
  color: var(--paper);
  border-radius: 24px;
  padding: 40px clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 30px 60px -34px rgba(28, 35, 33, .5);
}
.dw__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green-soft);
}
.dw__card-ar { font-size: clamp(64px, 10vw, 96px); line-height: 1.7; text-align: center; padding-top: 28px; margin: 0; }
.dw__card-gloss { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.dw__card-en { font-size: 36px; line-height: 1.1; }
.dw__card-root { font-size: 15px; color: var(--green-soft); }
.dw__card-root .ar { font-size: 19px; unicode-bidi: isolate; }
.dw__card-example {
  border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.dw__card-ex { font-size: 28px; line-height: 1.6; margin: 0; }
.dw__card-ex-en { font-size: 15px; font-style: italic; color: var(--green-soft); margin: 0; }
.dw__card-note { margin: 0; font-size: 15px; line-height: 1.7; text-align: center; }
.dw__card-note .ar, .dw__email-note .ar { font-size: 1.25em; line-height: 1; unicode-bidi: isolate; }

.dw__syns {
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dw__syns h2 { margin: 0; }
.dw__syns dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dw__syn { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: center; }
.dw__syn dt { font-size: 24px; text-align: right; /* physical: text in the language taught keeps its own side */ }
.dw__syn dd { margin: 0; font-size: 14px; line-height: 1.4; }

/* Email preview */
.dw__email {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(28, 35, 33, .4);
}
.dw__email-head {
  margin: 0;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 6px 10px;
  font-size: 14px;
}
.dw__email-head dt { color: var(--text-muted); }
.dw__email-head dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dw__email-head .ar { font-size: 17px; }
.dw__email-body {
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: var(--paper);
}
.dw__email-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.dw__email-brand .brand-mark { --mark-size: 30px; --mark-ring-width: 3; }
.dw__email-brand em { font-style: italic; color: var(--green); }
.dw__email-ar { font-size: 64px; line-height: 1.3; }
.dw__email-en { font-size: 28px; }
.dw__email-ex { font-size: 22px; line-height: 1.6; }
.dw__email-ex-en { font-size: 14px; font-style: italic; color: var(--text-body); }
.dw__email-note { margin: 6px 0 0; font-size: 14px; line-height: 1.7; max-width: 420px; }
.dw__email-cta {
  margin-top: 8px;
  background: var(--clay);
  color: var(--text-on-accent);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
}
.dw__email-foot { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* Side panels */
.dw__panel { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dw__panel-title { font-size: 15px; font-weight: 600; margin: 0; }
.dw__delivery fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dw__saved { margin: 0; font-size: 13px; color: var(--green); font-weight: 600; }

.dw__channels { display: flex; flex-direction: column; }
.dw__channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.dw__channel-label { font-size: 15px; font-weight: 600; }
.dw__channel-desc { font-size: 13px; color: var(--text-muted); }

.dw__times { display: flex; flex-direction: column; gap: 14px; }
.dw__times-label { font-size: 13px; color: var(--text-muted); font-weight: 600; padding: 0; margin-bottom: 14px; }
.dw__time { padding: 6px 12px; font-size: 13px; cursor: pointer; }
.dw__time:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dw__time:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

.dw__archive { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dw__archive-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  padding: 10px 0;
  color: var(--ink);
}
.dw__archive-link:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.dw__archive-en { font-size: 15px; }
.dw__archive-date { font-size: 12px; color: var(--text-muted); }
.dw__archive-ar { font-size: 24px; }

@media (max-width: 600px) {
  .dw__card { padding: 28px 20px; }
  .dw__card-ar { padding-top: 12px; }
  .dw__card-en { font-size: 30px; }
  .dw__email-body { padding: 28px 18px; }
  .dw__email-ar { font-size: 52px; }
}


/* screens/decks.css */
/* Deck library (/flashcards/decks) */

.decks { max-width: 1080px; gap: 20px; }
.decks__crumb { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.decks__crumb:hover { color: var(--ink); }
.decks__mine { font-size: 14px; }
.decks__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.decks__jump { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-weight: 700; }
.decks__jump-link { color: var(--ink); }
.decks__jump-link.is-yours { text-decoration: underline; text-decoration-color: var(--peach); text-decoration-thickness: 3px; text-underline-offset: 4px; }

.decks__level { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.decks__level-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.decks__level-title { font-size: 26px; margin: 0; }
.decks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}
.decks__deck {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.decks__deck:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.decks__deck.is-mine { border-color: var(--green); }
.decks__deck-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.decks__deck-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.decks__deck-ar { font-size: 19px; white-space: nowrap; }
.decks__deck-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.decks__badge { color: var(--green-deep); font-weight: 700; }
.decks__sample { font-family: var(--font-arabic); font-size: 17px; color: var(--text-body); text-align: right; /* physical: text in the language taught keeps its own side */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* One deck */
.decks--one { max-width: 860px; }
.decks__title-ar { font-size: 26px; margin-top: 4px; }
.decks__actions { flex-wrap: wrap; justify-content: flex-end; }
.decks__description { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-body); }
.decks__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.decks__card { padding: 14px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.decks__card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.decks__card-ar { font-size: 26px; }
.decks__card-en { font-size: 16px; font-weight: 600; }
.decks__card-meta { font-size: 13px; color: var(--text-muted); }
.decks__card-example { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.decks__card-example-ar { font-size: 19px; line-height: 1.7; text-align: right; /* physical: text in the language taught keeps its own side */ }
.decks__card-note { margin: 0; font-size: 14px; color: var(--text-body); line-height: 1.5; }

@media (max-width: 600px) {
  .decks__actions { justify-content: flex-start; }
}

/* The "+ Add decks" button among the review's decks */
.flashcards__deck--more { border-style: dashed; background: transparent; }


/* screens/dictation.css */
/* Dictation (dictation/show, dictation_controller; summary dictation/result).
   Letters are marked by underline style and background, never color alone:
   solid for wrong, dotted for missing, struck through for extra, dashed
   green for accepted, wavy for a vowel; each word card ends with a chip in
   words. */
.dict-s { max-width: 940px; margin: 0 auto; gap: 14px; }
.dict-s__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dict-s__end { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
               color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.dict-s__end:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.dict-s__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.dict-s__level { padding: 1px 7px; border-radius: 6px; background: var(--sand); font-size: 12px; }
.dict-s__count { font-size: 14px; font-weight: 700; white-space: nowrap; }
.dict-s__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dict-s__progress-bar { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
.dict-s__from { margin: 0; text-align: center; font-size: 13px; color: var(--text-body); }

.dict-s__card { width: 100%; max-width: 860px; align-self: center; display: flex; flex-direction: column; gap: 16px; padding: 26px 32px; border: 1px solid var(--line);
                border-radius: 24px; background: var(--card); }
.dict-s__typing { display: flex; flex-direction: column; gap: 16px; }
.dict-s__typing[hidden], .dict-s__feedback[hidden] { display: none; }
.dict-s__listen { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dict-s__kicker { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.dict-s__play-row { display: flex; align-items: center; gap: 14px; }
.dict-s__play { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
                background: var(--clay); color: var(--text-on-accent); font-size: 30px; cursor: pointer; }
.dict-s__play-icon { margin-inline-start: 5px; }
.dict-s__play.is-again { background: transparent; color: var(--clay); border: 2px solid var(--clay); }
.dict-s__play[aria-disabled="true"] { border-style: dashed; color: var(--text-muted); border-color: var(--line-dashed); cursor: not-allowed; }
.dict-s__play.is-loading .listen__spinner { display: block; }
.dict-s__play.is-loading .dict-s__play-icon { display: none; }
.dict-s__play:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.dict-s__play-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dict-s__plays { font-size: 16px; font-weight: 700; }
.dict-s__slow { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; cursor: pointer; }
.dict-s__slow input { position: absolute; opacity: 0; pointer-events: none; }
.dict-s__slow-track { position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--line-dashed); }
.dict-s__slow-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: inset-inline-start .15s; }
.dict-s__slow:has(input:checked) .dict-s__slow-track { background: var(--green); }
.dict-s__slow:has(input:checked) .dict-s__slow-track::after { inset-inline-start: 18px; }
.dict-s__slow:has(input:focus-visible) .dict-s__slow-track { outline: 3px solid var(--green); outline-offset: 2px; }

.dict-s__field { display: flex; flex-direction: column; gap: 8px; }
.dict-s__field-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dict-s__field-label { font-size: 14px; font-weight: 600; }
.dict-s__checking { font-size: 13px; color: var(--text-body); }
.dict-s__checking strong { color: var(--ink); }
.dict-s__input { width: 100%; min-height: 72px; padding: 4px 18px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--field); color: var(--ink);
                 font-family: var(--font-arabic); font-size: 32px; line-height: 1.9; }
.dict-s__input:focus { border-color: var(--ink); outline: 3px solid var(--green); outline-offset: 2px; }
.dict-s__nokb { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.45; }
.dict-s__nokb[hidden], .dict-s__kb-toggle[hidden], .dict-s__kb[hidden] { display: none; }
.dict-s__kb-toggle { align-self: flex-start; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--clay); font: inherit; font-size: 14px; font-weight: 600;
                     text-decoration: underline; cursor: pointer; }
.dict-s__kb { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 14px; background: var(--sand); }
.dict-s__kb-row { display: flex; justify-content: center; gap: 5px; }
.dict-s__kb-row--marks { padding-top: 5px; border-top: 1px solid var(--line-mid); }
.dict-s__key { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 7px;
               background: var(--field); color: var(--ink); font-family: var(--font-arabic); font-size: 22px; line-height: 1; cursor: pointer; }
.dict-s__key.is-mark { background: var(--card); line-height: 1.2; }
.dict-s__key.is-wide { min-width: 70px; flex: 2; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
.dict-s__key:hover { border-color: var(--ink); }

/* Feedback */
.dict-s__feedback { display: flex; flex-direction: column; gap: 14px; }
.dict-s__fb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dict-s__status { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 700; }
.dict-s__status.is-right { background: var(--right-soft); color: var(--right); }
.dict-s__status.is-wrong { background: var(--wrong-soft); color: var(--wrong); }
.dict-s__again { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: none; color: var(--ink);
                 font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dict-s__note { margin: 0; display: flex; gap: 8px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--green-soft); font-size: 14px; line-height: 1.5; }
.dict-s__note-mark { font-weight: 700; color: var(--green); }
.dict-s__note-ar { font-family: var(--font-arabic); font-size: 1.25em; }
.dict-s__words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dict-s__word { min-width: 120px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 12px 8px; border: 1.5px solid var(--line); border-radius: 14px; }
.dict-s__word.is-err { background: var(--field); border-color: var(--clay); }
.dict-s__word.is-acc { background: var(--field); border-color: var(--green); }
.dict-s__label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; text-align: right; /* physical: text in the language taught keeps its own side */ }
.dict-s__label.is-divided { padding-top: 3px; border-top: 1px solid var(--line-soft); }
.dict-s__words[dir="ltr"] .dict-s__label { text-align: left; } /* a left-to-right language's words start on the left */
.dict-s__letters { min-height: 1.9em; font-family: var(--font-arabic); font-size: 30px; line-height: 1.9; }
.dict-s__not-typed { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }
.dict-s__part { text-underline-offset: 7px; }
.dict-s__part.is-wrong { background: var(--wrong-soft); text-decoration: underline solid var(--wrong) 3px; }
.dict-s__part.is-missing { background: var(--mark); text-decoration: underline dotted var(--wrong) 3px; }
.dict-s__part.is-extra { background: var(--clay-soft); text-decoration: line-through var(--clay) 3px; }
.dict-s__part.is-accepted { background: var(--green-soft); text-decoration: underline dashed var(--green) 2px; }
.dict-s__part.is-vowel { background: var(--mark); text-decoration: underline wavy var(--clay) 2px; }
.dict-s__chip { align-self: flex-end; margin-top: 2px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--green); }
.dict-s__word.is-err .dict-s__chip { color: var(--clay); }
.dict-s__extra { margin: 0; font-size: 13px; color: var(--text-body); }
.dict-s__fb-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dict-s__en { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.35; }
.dict-s__score { font-size: 14px; font-weight: 700; }

.dict-s__actions { width: 100%; max-width: 860px; align-self: center; display: flex; flex-direction: column; gap: 8px; }
.dict-s__action { min-height: 54px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.dict-s__action[aria-disabled="true"] { background: var(--line); color: var(--text-body); cursor: default; }
.dict-s__action.is-ready:focus, .dict-s__action:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.dict-s__keys { margin: 0; text-align: center; font-size: 12px; color: var(--text-muted); }
.dict-s__keys[hidden], .dict-s__error[hidden] { display: none; }
.dict-s__error { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--clay); }

/* Summary */
.dict-s__summary { width: 100%; max-width: 820px; align-self: center; display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.dict-s__summary-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.dict-s__total { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(46px, 7vw, 72px); line-height: 1; }
.dict-s__saved { font-size: 14px; color: var(--green); font-weight: 600; }
.dict-s__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dict-s__row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.dict-s__row-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dict-s__row-score { font-size: 13px; font-weight: 700; }
.dict-s__row-score.is-right { color: var(--right); }
.dict-s__row-score.is-wrong { color: var(--wrong); }
.dict-s__row-play { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: none; color: var(--clay); font-size: 13px; cursor: pointer; }
.dict-s__row-ar { margin: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-family: var(--font-arabic); font-size: 26px; line-height: 1.9; }
.dict-s__row-word.is-err { background: var(--clay-soft); text-decoration: underline solid var(--clay) 2px; text-underline-offset: 7px; }
.dict-s__row-word.is-acc { background: var(--green-soft); }
.dict-s__flag { margin-inline-end: 2px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--clay); }
.dict-s__row-word.is-acc .dict-s__flag { color: var(--green); }
.dict-s__row-en { font-size: 13px; color: var(--text-body); }
.dict-s__summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dict-s__another, .dict-s__change, .dict-s__back { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--radius-pill);
                                                  font-size: 15px; font-weight: 600; text-decoration: none; }
.dict-s__another { padding: 0 26px; background: var(--clay); color: var(--text-on-accent); font-size: 16px; }
.dict-s__another:hover { background: var(--clay-hover); color: var(--text-on-accent); text-decoration: none; }
.dict-s__another:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.dict-s__change { padding: 0 22px; border: 1.5px solid var(--ink); color: var(--ink); }
.dict-s__change:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.dict-s__back { padding: 0 16px; color: var(--ink); text-decoration: underline; }

@media (max-width: 640px) {
  .dict-s__end-text { display: none; }
  .dict-s__title { font-size: 13px; }
  .dict-s__card { padding: 16px 14px; }
  .dict-s__play { width: 64px; height: 64px; font-size: 24px; }
  .dict-s__input { min-height: 60px; font-size: 26px; }
  .dict-s__kb { padding: 6px; }
  .dict-s__kb-row { gap: 3px; }
  .dict-s__key { flex: 1; min-width: 0; font-size: 18px; }
  .dict-s__words { display: grid; grid-template-columns: 1fr 1fr; }
  .dict-s__word { min-width: 0; }
  .dict-s__letters { font-size: 24px; }
  .dict-s__en { font-size: 18px; }
  .dict-s__row-ar { font-size: 22px; }
  .dict-s__summary-actions > * { flex: 1 1 100%; }
}


/* screens/dictionary-de.css */
/* The German dictionary and conjugator (show_german), over the English one (dictionary-en.css). */
.dedict__article { color: var(--text-muted); font-weight: 400; }
.dedict__example-en { display: block; color: var(--text-muted); font-size: 14px; }
.dedict__table { width: 100%; max-width: 560px; border-collapse: collapse; font-family: var(--font-arabic); font-size: 17px; }
.dedict__table th, .dedict__table td { padding: 6px 8px 6px 0; text-align: var(--start); vertical-align: top; }
.dedict__table thead th, .dedict__table tbody th { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--text-muted); }
.dedict__table tbody tr { border-top: 1px solid var(--line-soft); }
.dedict__endings { margin-top: 8px; }
.dedict__endings summary { cursor: pointer; font-size: 14px; color: var(--text-body); padding: 4px 0; }
.dedict__endings .dedict__table { margin-top: 4px; }
.deconj__where { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.deconj__tense--written .econj__tense-name, .deconj__tense--written .econj__form { color: var(--text-muted); }
.deconj__alt { font-size: 15px; color: var(--text-muted); }
.deconj__notes { display: grid; gap: 4px; }
@media (max-width: 480px) { .dedict__table { font-size: 15px; } }


/* screens/dictionary-en.css */
/* The English dictionary and conjugator (show_english), over the Turkish layout (dictionary-tr.css). */
.edict__headword { font-family: var(--font-arabic); }
.edict__ipa { font-family: var(--font-sans); font-size: 18px; color: var(--clay); }
.edict__translations { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 10px 0 4px; }
.edict__translations-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.edict__translations-words { font-size: 20px; font-weight: 600; color: var(--ink); }
.edict__forms { margin: 10px 0 0; color: var(--text-body); }
.edict__form-kind { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; }
.edict__form { font-weight: 600; }
.edict__parts, .econj__parts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.edict__parts div, .econj__parts div { display: flex; flex-direction: column; }
.edict__parts dt, .econj__parts dt { font-size: 12px; color: var(--text-muted); }
.edict__parts dd, .econj__parts dd { margin: 0; font-family: var(--font-arabic); font-size: 20px; }
.econj__head { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 18px; }
.econj__verb { margin: 0; font-family: var(--font-arabic); font-size: 44px; line-height: 1.1; }
.econj__meaning { font-size: 18px; color: var(--text-body); }
.econj__tenses { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.econj__tense { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.econj__tense-name { margin: 0 0 8px; font-size: 15px; }
.econj__tense-use { display: block; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.econj__table { width: 100%; border-collapse: collapse; }
.econj__table tr + tr { border-top: 1px solid var(--line-soft); }
.econj__person { width: 40%; padding: 6px 0; text-align: var(--start); font-weight: 400; color: var(--text-muted); font-size: 14px; }
.econj__form { padding: 6px 0; font-family: var(--font-arabic); font-size: 18px; }
.econj__chip--irregular { border-color: var(--gold) !important; }
.econj__legend { display: flex; align-items: center; gap: 8px; }
.econj__legend-dot { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--gold); border-radius: 5px; }


/* screens/dictionary-es.css */
/* The Spanish dictionary and conjugator (show_spanish), over the English one (dictionary-en.css). */
.esdict__article { color: var(--text-muted); font-weight: 400; }
.esdict__example-en { display: block; color: var(--text-muted); font-size: 14px; }
.esconj__where { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.esconj__row--spain, .esconj__row--vos { color: var(--text-muted); }
.esconj__row--spain .econj__form, .esconj__row--vos .econj__form { font-size: 16px; color: var(--text-body); }
.esconj__alt { font-size: 15px; color: var(--text-muted); }


/* screens/dictionary-fa.css */
/* Farsi's dictionary (dictionary/show_farsi), on the Turkish dictionary's layout (dictionary-tr.css). */
.fdict__headword { font-family: var(--font-arabic); }
.fdict__romanization { font-size: 20px; color: var(--clay); }
.fdict__meta { margin: 8px 0 0; color: var(--text-body); }
.fdict__parts { font-family: var(--font-arabic); font-size: 26px; margin: 6px 0; }
.fdict__affix { color: var(--clay); }
.fdict__roman, .fdict__form-roman { color: var(--clay); font-size: 14px; }
.fdict__tenses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.fdict__tense-name { font-size: 14px; margin: 0 0 6px; color: var(--text-muted); font-weight: 600; }
.fdict__forms { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.fdict__form { font-family: var(--font-arabic); font-size: 20px; }

/* The Persian conjugator (conjugations/show_farsi), on the Turkish one's layout. */
.fconj__head { display: grid; gap: 6px; margin: 8px 0 18px; }
.fconj__verb { font-family: var(--font-arabic); font-size: 44px; margin: 0; }
.fconj__roman { font-size: 20px; color: var(--clay); }
.fconj__meaning { color: var(--text-body); }
.fconj__stem { font-family: var(--font-arabic); font-size: 18px; }
.fconj__tenses { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.fconj__tense { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.fconj__tense-name { font-size: 15px; margin: 0 0 8px; }
.fconj__table { width: 100%; border-collapse: collapse; }
.fconj__table td, .fconj__table th { padding: 5px 6px; border-top: 1px solid var(--line-soft); text-align: start; vertical-align: baseline; }
.fconj__person { font-weight: 500; color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.fconj__form { font-family: var(--font-arabic); font-size: 19px; white-space: nowrap; }
.fconj__form-roman { color: var(--clay); font-size: 13px; }
.fconj__form-en { color: var(--text-muted); font-size: 13px; }

/* Result rows with the romanization as a column: word, romanization, meaning, level. */
.fdict .tdict__other { grid-template-columns: 140px 130px 1fr auto; }
.fdict .tdict__other-word { text-align: right; /* physical: text in the language taught keeps its own side */ }
@media (max-width: 640px) {
  .fdict .tdict__other { grid-template-columns: 90px 1fr auto; }
  .fdict .tdict__other .fdict__form-roman { grid-column: 1; grid-row: 2; }
}


/* screens/dictionary-fr.css */
/* The French dictionary and conjugator (show_french), over the English one (dictionary-en.css). */
.frdict__article { color: var(--text-muted); font-weight: 400; }
.frdict__example-en { display: block; color: var(--text-muted); font-size: 14px; }
.frconj__where { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.frconj__tense--literary .econj__tense-name, .frconj__tense--literary .econj__form { color: var(--text-muted); }
.frconj__alt { font-size: 15px; color: var(--text-muted); }
.frconj__notes { display: grid; gap: 4px; }


/* screens/dictionary-tr.css */
/* TurkishGenius's dictionary (dictionary/show_suffixes), design "TurkishGenius Dictionary". */

.tdict { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 1000px; container-type: inline-size; }
/* The public dictionary (a visitor's, in the site's public layout): centred, with the public pages' margins. */
.tdict--public { width: 100%; margin: 0 auto; padding: 32px 16px 64px; box-sizing: border-box; }
.tdict__muted { font-size: 12px; color: var(--text-muted); }
.tdict__search { display: flex; flex-direction: column; gap: 6px; }
.tdict__box { display: flex; align-items: center; gap: 10px; min-height: 54px; padding-block: 0; padding-inline: 18px 6px; border: 1.5px solid var(--line-mid); border-radius: var(--radius-pill); background: var(--field); }
.tdict__box:focus-within { border: 2px solid var(--ink); }
.tdict__box .icon { flex-shrink: 0; color: var(--text-muted); }
.tdict__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 18px; color: var(--ink); outline: none; }
.tdict__go { flex-shrink: 0; min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tdict__hint { padding-inline-start: 18px; font-size: 13px; color: var(--text-muted); }

/* A form of a word */
.tdict__form-of { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; border-radius: 18px; background: var(--ink); color: #FFFFFF; }
.tdict__form-of-title { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; }
.tdict__form-of-form { font-family: var(--font-arabic); font-style: italic; font-size: 21px; }
.tdict__form-of-word { font-family: var(--font-arabic); font-size: 24px; color: var(--peach); }
.tdict__parts { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.tdict__part { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 11px; border: 1px solid var(--ink-line-strong); border-radius: 10px; background: var(--ink-line); color: #FFFFFF; }
.tdict__part--stem { background: var(--ink-raised); }
.tdict__part-text { font-family: var(--font-arabic); font-size: 24px; line-height: 1; }
.tdict__part-gloss { font-size: 12px; color: var(--text-on-dark-muted); white-space: nowrap; }
.tdict__equals { display: flex; align-items: center; padding: 0 4px; font-size: 15px; color: var(--text-on-dark-muted); }
.tdict__result { display: flex; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--peach); color: var(--ink); font-size: 15px; font-weight: 700; }
.tdict__open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: var(--radius-pill); background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.tdict__open:hover { color: var(--ink); text-decoration: none; background: var(--peach); }

/* A word */
.tdict__card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.tdict__head { display: flex; justify-content: space-between; gap: 14px 24px; padding: 22px 26px; border-radius: 20px; }
.tdict__head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tdict__headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tdict__headword { margin: 0; font-family: var(--font-arabic); font-weight: 400; font-size: 72px; line-height: 1; }
.tdict__pos { font-size: 15px; font-style: italic; color: var(--text-muted); }
.tdict__senses { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 19px; line-height: 1.4; }
.tdict__tags, .tdict__example { font-size: 14px; color: var(--text-muted); }
.tdict__example i { font-family: var(--font-arabic); font-size: 17px; }
.tdict__actions { display: flex; gap: 8px; align-items: center; align-self: flex-start; flex-wrap: wrap; }
.tdict__actions form { display: contents; }
.tdict__pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-mid); border-radius: var(--radius-pill); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tdict__save { min-height: 44px; }

.tdict__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tdict__section { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.tdict__section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tdict__h2 { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 700; }
.tdict__forms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tdict__form { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-align: var(--start); cursor: pointer; }
.tdict__form[aria-expanded="true"] { background: var(--mark); border-color: var(--ink); }
.tdict__form-text { font-family: var(--font-arabic); font-size: 23px; line-height: 1; }
.tdict__form-rest { color: var(--clay-deep); }
.tdict__form-en { font-size: 13px; color: var(--text-muted); }
.tdict__chain { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #FFFFFF; }
.tdict__chain[hidden] { display: none; }
.tdict__chain .tdict__part { padding: 6px 10px; }
.tdict__chain .tdict__part-text { font-size: 21px; }
.tdict__chain-note { margin: 0; font-size: 14px; line-height: 1.5; }
.tdict__more { align-self: flex-start; font-size: 14px; font-weight: 600; }

.tdict__list { list-style: none; margin: 0; padding: 0; }
.tdict__derived, .tdict__phrase, .tdict__other {
  display: grid; align-items: center; gap: 10px; min-height: 50px; padding: 6px 0; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
}
.tdict__derived:hover, .tdict__phrase:hover, .tdict__other:hover { color: var(--ink); text-decoration: none; background: var(--sand); }
.tdict__derived { grid-template-columns: 150px 1fr auto; }
.tdict__derived-word, .tdict__phrase-text, .tdict__other-word { font-family: var(--font-arabic); font-size: 23px; line-height: 1.1; }
.tdict__suffix { padding: 0 2px; border-radius: 4px; background: var(--clay-soft); color: var(--clay-deep); }
.tdict__derived-en, .tdict__phrase-en, .tdict__other-en { font-size: 15px; color: var(--text-body); }
.tdict__derived-adds { font-size: 12px; color: var(--text-muted); text-align: var(--end); }
.tdict__phrase { grid-template-columns: 260px 1fr; }
.tdict__other { grid-template-columns: 160px 1fr auto; }
.tdict__label { margin: 0; padding-bottom: 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.tdict__others { display: flex; flex-direction: column; }

.tdict__examples { display: flex; flex-direction: column; gap: 10px; }
.tdict__example-card { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 16px; }
.tdict__quote { margin: 0; font-family: var(--font-arabic); font-size: 24px; line-height: 1.4; }
.tdict__quote mark { padding: 0 3px; border-radius: 4px; background: var(--peach); color: var(--ink); }
.tdict__quote-en { margin: 0; font-size: 14px; color: var(--text-body); }

.tdict__tip { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.tdict__tip strong { color: var(--ink); }
.tdict__tip-word { font-family: var(--font-arabic); font-size: 18px; color: var(--ink); }
.tdict__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tdict__chip { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-family: var(--font-arabic); font-size: 20px; text-decoration: none; }
.tdict__chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.tdict__chip-en { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }
.tdict__none { padding: 22px; border: 1px dashed var(--line-dashed); border-radius: 18px; }
.tdict__none-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.tdict__credit { padding-top: 12px; border-top: 1px solid var(--line-mid); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.tdict__credit a { color: var(--text-muted); text-decoration: underline; }

@container (max-width: 700px) {
  .tdict__head { flex-direction: column; padding: 16px; }
  .tdict__headword { font-size: 56px; }
  .tdict__senses { font-size: 17px; }
  .tdict__form-of { padding: 16px; }
  .tdict__part-text { font-size: 21px; }
  .tdict__grid { grid-template-columns: minmax(0, 1fr); }
  .tdict__derived { grid-template-columns: 118px 1fr; }
  .tdict__derived-adds { grid-column: 1 / -1; text-align: var(--start); margin-top: -8px; }
  .tdict__phrase { grid-template-columns: 1fr; gap: 2px; }
  .tdict__other { grid-template-columns: 100px 1fr auto; }
  .tdict__go { display: none; }
}


/* screens/dictionary-ug.css */
/* Uyghur's dictionary page (dictionary/show_uyghur): a form's parts, a sense's phrases, the Uyghur–Uyghur definition. */
.ugdict__parts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; direction: rtl; }
.ugdict__parts div { display: grid; gap: 2px; text-align: center; }
.ugdict__parts dt { font-size: 1.15rem; }
.ugdict__parts dd { margin: 0; font-size: .8rem; color: var(--text-muted); direction: ltr; }
.ugdict__phrases { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: .92rem; }
.ugdict__definition { margin: 0; line-height: 1.9; }


/* screens/dictionary-zh.css */
/* The Chinese dictionary (dictionary/show_chinese), over the Turkish dictionary's layout (dictionary-tr.css): pinyin
   beside the headword, the traditional spelling and measure words, and a card per character. */
.zdict__headword { font-family: var(--font-arabic); font-weight: 400; }
.zdict__pinyin { font-size: 22px; color: var(--clay); }
.zdict__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 15px; color: var(--text-body); }
.zdict__trad { font-family: var(--font-arabic); font-size: 20px; color: var(--ink); }
.zdict__measure { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--sand); color: var(--ink); text-decoration: none; }
.zdict__measure span[lang] { font-family: var(--font-arabic); font-size: 18px; }
.zdict__measure-py, .zdict__other-py, .zdict__char-py, .zdict__reading-py { color: var(--clay); font-size: 14px; }
.zdict__reading { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.zdict__reading-py { min-width: 80px; font-size: 16px; }
.zdict__chars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.zdict__char { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; text-align: center; }
.zdict__char:hover { border-color: var(--clay); text-decoration: none; }
.zdict__char-glyph { font-family: var(--font-arabic); font-size: 44px; line-height: 1.2; }
.zdict__char-en { font-size: 13px; color: var(--text-body); }
.zdict .tdict__derived-word, .zdict .tdict__other-word, .zdict .tdict__chip span[lang] { font-family: var(--font-arabic); }
/* Rows with pinyin: word, pinyin, meaning (and its level). */
.zdict .tdict__other { grid-template-columns: 130px 150px 1fr auto; }
.zdict .tdict__derived { grid-template-columns: 130px 150px 1fr; }
@media (max-width: 640px) {
  .zdict .tdict__other, .zdict .tdict__derived { grid-template-columns: 96px 1fr; row-gap: 2px; }
  .zdict .tdict__other-en, .zdict .tdict__derived-en { grid-column: 1 / -1; }
}


/* screens/dictionary.css */
/* Dictionary */

.dict { max-width: 980px; gap: 22px; }

.dict__search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding-block: 6px; padding-inline: 20px 6px;
}
.dict__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-arabic), var(--font-sans);
  font-size: clamp(22px, 4vw, 30px);
  padding: 8px 0;
  outline: none;
}
.dict__input::placeholder { color: var(--text-faint); font-family: var(--font-sans); font-size: 18px; }
.dict__input::-webkit-search-cancel-button { display: none; }
.dict__search:focus-within { box-shadow: 0 0 0 3px var(--green-soft); }
.dict__clear { color: var(--text-muted); font-size: 14px; padding: 10px; }
.dict__clear:hover { color: var(--ink); }

.dict__try { font-size: 13px; color: var(--text-muted); }
.dict__chips { display: contents; list-style: none; }
.dict__chips li { display: contents; }
.dict__chip {
  background: var(--sand);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 18px;
  color: var(--ink);
}
.dict__chip:not(.ar) { font-size: 14px; padding: 7px 12px; }
.dict__chip:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }

.dict__notice { display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.dict__notice-title { font-size: 17px; font-weight: 700; margin: 0; }
.dict__notice .body-text { margin: 0; font-size: 15px; }

/* A result */
.dict__entry { display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.dict__entry-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dict__headword { font-size: 48px; line-height: 1.2; margin: 0; }

.dict__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}
.dict__fact {
  border-top: 2px solid var(--ink);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dict__fact h3, .dict__study h4 { margin: 0; }
.dict__fact--root { border-top-color: var(--green); }
.dict__fact--context { border-top-color: var(--clay); }
.dict__meaning { font-size: 26px; line-height: 1.15; }
.dict__pos { font-size: 14px; color: var(--text-body); }
.dict__root { font-size: 24px; color: var(--ink); align-self: flex-start; }
.dict__root--link:hover { color: var(--clay); }
.dict__family { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dict__family li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.dict__family .ar { font-size: 19px; color: var(--ink); }
.dict__family .ar:hover { color: var(--clay); text-decoration: none; }
.dict__example { font-size: 21px; line-height: 1.6; margin: 0; text-align: left; } /* physical: text in the language taught */
.dict__example-en { font-size: 14px; color: var(--text-body); font-style: italic; margin: 0; }

/* Word study (Pro) and its teaser (free) */
.dict__locked {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dict__study-title { font-size: 26px; line-height: 1; margin: 0; }
.dict__locked-text { font-size: 14px; color: var(--text-body); margin: 0; }
.dict__locked-teaser { font-size: 13px; color: var(--text-muted); margin: 0; }
.dict__locked-teaser .ar { font-size: 18px; color: var(--ink); }

.dict__study {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dict__study .dict__study-title { font-size: 30px; }

.dict__study-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  margin: 0;
}
.dict__study-fact {
  background: var(--sand-hover);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dict__study-fact dt { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.dict__study-fact dd { margin: 0; font-size: 15px; line-height: 1.4; }
.dict__study-fact dd.dict__study-fact-ar { font-size: 22px; text-align: left; } /* physical: text in the language taught */

.dict__senses { list-style: none; counter-reset: sense; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dict__senses li { counter-increment: sense; display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.dict__senses li::before {
  content: counter(sense);
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--clay);
  width: 18px;
  flex-shrink: 0;
}

.dict__syns {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dict__syns li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px;
  align-items: start;
}
.dict__syns li + li { border-top: 1px solid var(--line-soft); }
.dict__syns li.is-current { background: var(--clay-soft); }
.dict__syns strong { font-size: 15px; }
.dict__syn-ar { font-size: 26px; line-height: 1.3; text-align: right; /* physical: text in the language taught keeps its own side */ }
.dict__syn-nuance { font-size: 14px; color: var(--text-body); line-height: 1.5; }

.dict__study-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.dict__colls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dict__colls li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.dict__colls .ar { font-size: 21px; }
.dict__note { margin: 0; font-size: 15px; line-height: 1.6; text-wrap: pretty; }

@media (max-width: 600px) {
  .dict__search { padding-inline-start: 14px; }
  .dict__search .btn { padding: 8px 12px; }
  .dict__entry { padding: 20px; }
  .dict__headword { font-size: 40px; }
  .dict__syns li { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .dict__syn-ar { font-size: 22px; }
}

/* Root card (query is a root) */
.dict__root-card { gap: 6px; }
.dict__root-card-letters { font-size: 44px; color: var(--peach); line-height: 1.3; }
.dict__root-card-meta { font-size: 14px; color: var(--text-on-dark-muted); }

/* Dictionary sources: Lane's Lexicon, Lisan al-Arab, English–Arabic */
.dict__source { display: flex; flex-direction: column; gap: 12px; }
.dict__source-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dict__source-title { font-size: 28px; line-height: 1.1; display: flex; align-items: baseline; gap: 10px; }
.dict__source-ar { font-size: 22px; color: var(--clay); }
.dict__source-note { font-size: 13px; color: var(--text-muted); }
.dict__source-actions { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dict__source-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dict__source-list li + li { border-top: 1px solid var(--line-soft); }

.dict__lane summary, .dict__lisan summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
.dict__lane summary::-webkit-details-marker, .dict__lisan summary::-webkit-details-marker { display: none; }
.dict__lane summary::after, .dict__lisan summary::after { content: "+"; margin-inline-start: auto; color: var(--clay); font-size: 20px; line-height: 1; }
.dict__lane[open] summary::after, .dict__lisan[open] summary::after { content: "–"; }
.dict__lane-head { font-size: 24px; min-width: 0; }
.dict__lane-gloss { font-size: 15px; color: var(--text-body); min-width: 0; }
.dict__lane-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  padding: 0 0 14px;
  overflow-wrap: anywhere;
}
.dict__lane-body .ar { font-family: var(--font-arabic); font-size: 1.25em; color: var(--ink); }
.dict__lane-body i { color: var(--ink); }

.dict__lisan + .dict__lisan { border-top: 1px solid var(--line-soft); }
.dict__lisan-body { font-size: 20px; line-height: 1.9; color: var(--text-body); padding-bottom: 14px; }

.dict__english { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dict__english li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; }
.dict__english li + li { border-top: 1px solid var(--line-soft); }
.dict__english-word { font-size: 16px; font-weight: 600; }
.dict__english-ar { font-size: 22px; text-align: right; /* physical: text in the language taught keeps its own side */ }

.dict__maybe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Forms and conjugation */
.dict__fact--forms { border-top-color: var(--gold); }
.dict__forms { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dict__forms div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dict__forms dt { font-size: 14px; color: var(--text-body); }
.dict__forms dd { margin: 0; font-size: 21px; text-align: right; /* physical: text in the language taught keeps its own side */ }
.dict__forms dd a { color: var(--ink); }
.dict__forms dd a:hover { color: var(--clay); text-decoration: none; }
.dict__conjugation { border-top: 1px solid var(--line-soft); }
.dict__conjugation summary { display: flex; align-items: baseline; padding: 10px 0 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.dict__conjugation summary::-webkit-details-marker { display: none; }
.dict__conjugation summary::after { content: "+"; margin-inline-start: auto; color: var(--clay); font-size: 20px; line-height: 1; }
.dict__conjugation[open] summary::after { content: "–"; }
.dict__conjugation-scroll { overflow-x: auto; margin-top: 8px; }
.dict__conjugation-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dict__conjugation-table th, .dict__conjugation-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; /* physical: text in the language taught keeps its own side */ white-space: nowrap; }
.dict__conjugation-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dict__conjugation-table tbody th { text-align: var(--start); font-weight: 500; color: var(--text-body); }
.dict__conjugation-table td .ar { font-size: 20px; }
.dict__pronoun { color: var(--text-muted); margin-left: 4px; } /* an Arabic span: its own start is the other side */
html[dir="rtl"] .dict__pronoun { margin-left: 0; margin-right: 4px; }

/* Paging and the AI fallback */
.dict__pager { margin-top: 4px; }
.dict__ai { border-inline-start: 3px solid var(--clay); }
.dict__ai-entry { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; align-items: flex-start; }
.dict__ai-entry > .row { width: 100%; }
.dict__ai-gloss { font-size: 22px; }
.dict__ai-ar { font-size: 26px; }
.dict__ai-meta { margin: 0; font-size: 14px; color: var(--text-body); }
.dict__ai-note { margin: 0; font-size: 14px; color: var(--text-muted); }
.dict__ai-error { margin: 0; color: var(--clay); font-size: 14px; }
.dict__fact--example { border-top-color: var(--green); }
.dict__fact--example .dict__example { font-size: 19px; text-align: right; /* physical: text in the language taught keeps its own side */ }
.dict__example-link { font-size: 13px; color: var(--text-muted); }
.dict__example-link:hover { color: var(--clay); }
.dict__ai-offer { margin: 0; font-size: 14px; color: var(--text-body); }
@media (max-width: 600px) {
  .dict__conjugation-table th, .dict__conjugation-table td { padding: 5px 4px; }
  .dict__conjugation-table td .ar { font-size: 17px; }
  .dict__conjugation-table tbody th { font-size: 12px; white-space: normal; }
  .dict__pronoun { display: none; }
}

/* Wiktionary's entries: forms, numbered meanings, examples and the credit. */
.dict__wikt-forms { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.dict__wikt-label { font-size: 12px; color: var(--text-muted); font-style: italic; }
.dict__wikt-senses { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; }
.dict__wikt-subsenses { margin: 4px 0 0; padding-inline-start: 20px; list-style: lower-alpha; display: flex; flex-direction: column; gap: 4px; }
.dict__wikt-example { display: block; margin-top: 2px; }
.dict__wikt-example-en { color: var(--text-muted); font-size: 14px; }
.dict__wikt-credit { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }
.dict__wikt-credit a { color: inherit; }
.dict__source-list .dict__wikt-senses li + li { border-top: 0; }

.dict__drill-link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.dict__conjugation-links { display: flex; gap: 18px; flex-wrap: wrap; }
.dict__conjugate-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; }
.dict__conjugate-link .icon { color: var(--clay); }


/* screens/drill-suffixes.css */
/* The suffix drill (drills/show_suffixes, suffix_drill_controller.js), design
   "TurkishGenius Suffix Drill", on top of the drills' own styles (drills.css).
   Also the score by question type on a Mixed session's results, and the
   Practice card's five modes. */

.sdrill .drill__card { max-width: 720px; gap: 16px; padding: 24px 28px; }
.sdrill .drill__actions { max-width: 720px; }
.sdrill__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sdrill__type { background: var(--sand); border-radius: var(--radius-pill); padding: 3px 12px; font-size: 12px; font-weight: 700; }
.sdrill__help { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-mid); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sdrill__help[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sdrill__help-mark { font-family: var(--font-serif); font-size: 16px; }
.sdrill__prompt { margin: 0; font-size: 15px; color: var(--text-body); }
.sdrill__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 8px; padding: 4px 0; font-family: var(--font-arabic); font-size: 48px; line-height: 1.3; text-align: center; }
.sdrill__plus { color: var(--line-strong); }
.sdrill__blank { display: inline-block; min-width: 110px; padding: 0 8px; border-bottom: 3px dashed var(--clay); border-radius: 8px 8px 0 0; text-align: center; }
.sdrill__blank.is-filled { border-bottom-style: solid; border-bottom-color: var(--ink); }
.sdrill__blank.is-joined, .sdrill__placed { margin-left: -8px; } /* physical: joins a suffix to its stem, in the word's own direction */
.sdrill__placed { color: var(--clay-deep); }
.sdrill__blank.is-right, .sdrill__placed.is-right { background: var(--right-soft); border-bottom-color: var(--right); color: var(--right-deep); }
.sdrill__blank.is-wrong, .sdrill__placed.is-wrong { background: var(--wrong-soft); border-bottom-color: var(--wrong); color: var(--wrong-deep); }
.sdrill__word { padding: 0 6px; border: 0; border-bottom: 2px dotted var(--line-strong); border-radius: 6px 6px 0 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.sdrill__word.is-picked { background: var(--mark); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; }
.sdrill__word.is-right { background: var(--right-soft); text-decoration: none; }
.sdrill__word.is-wrong { background: var(--wrong-soft); text-decoration: none; }
.sdrill__word:disabled { cursor: default; }
.sdrill__gloss, .sdrill__spot-hint { margin: 0; text-align: center; font-size: 15px; color: var(--text-muted); }
.sdrill__spot-hint { font-size: 14px; }

.sdrill__helper { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.sdrill__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sdrill__group { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.sdrill__group-name { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.sdrill__group-vowels { font-family: var(--font-arabic); font-size: 28px; letter-spacing: 6px; }
.sdrill__harmony { width: 100%; border-collapse: collapse; font-size: 14px; }
.sdrill__harmony th { text-align: var(--start); padding: 4px 0; color: var(--text-muted); font-weight: 600; }
.sdrill__harmony td { padding: 5px 0; border-top: 1px solid var(--line-soft); }
.sdrill__harmony td:first-child { font-weight: 700; }
.sdrill__helper-note { margin: 0; font-size: 13px; color: var(--text-body); }

.sdrill__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sdrill__chip { min-width: 72px; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--line-mid); border-radius: 12px; background: var(--card); color: var(--ink); font-family: var(--font-arabic); font-size: 24px; cursor: pointer; }
.sdrill__chip:hover:not(.is-used) { border-color: var(--ink); }
.sdrill__chip.is-used { opacity: .35; cursor: default; }
.sdrill__undo { align-self: center; min-height: 40px; border: 0; background: none; color: var(--text-body); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }

.sdrill__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sdrill__options--3 { grid-template-columns: 1fr 1fr 1fr; }
.sdrill__option { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 66px; border: 1.5px solid var(--line-mid); border-radius: 16px; background: var(--card); color: var(--ink); font-family: var(--font-arabic); font-size: 28px; cursor: pointer; }
.sdrill__option:hover:not(:disabled) { border-color: var(--ink); }
.sdrill__option.is-chosen { background: var(--mark); border-color: var(--ink); }
.sdrill__option.is-right { background: var(--right-soft); border-color: var(--right); color: var(--right-deep); }
.sdrill__option.is-wrong { background: var(--wrong-soft); border-color: var(--wrong); color: var(--wrong-deep); }
.sdrill__option:disabled { cursor: default; }
.sdrill__key { position: absolute; top: 8px; inset-inline-start: 12px; font-family: var(--font-sans); font-size: 11px; color: var(--text-faint); }
.sdrill__tag { font-family: var(--font-sans); font-size: 13px; font-weight: 700; }
.sdrill__option:focus-visible, .sdrill__chip:focus-visible, .sdrill__word:focus-visible, .sdrill__help:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.sdrill__feedback { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1.5px solid var(--green); border-radius: 18px; background: var(--green-soft); }
.sdrill__feedback.is-wrong { border-color: var(--wrong); background: var(--wrong-soft); }
.sdrill__feedback-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sdrill__feedback-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: #FFFFFF; font-weight: 700; }
.sdrill__feedback.is-wrong .sdrill__feedback-icon { background: var(--wrong-deep); }
.sdrill__feedback-status { font-size: 17px; font-weight: 700; color: var(--green-deep); }
.sdrill__feedback.is-wrong .sdrill__feedback-status { color: var(--wrong-deep); }
.sdrill__feedback-answer { font-family: var(--font-arabic); font-size: 28px; line-height: 1; }
.sdrill__feedback-reason { margin: 0; font-size: 15px; line-height: 1.5; }
.sdrill__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.sdrill__pill { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-mid); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sdrill__pill--save { border-color: var(--green); color: var(--green); }
.sdrill__main[aria-disabled="true"] { background: var(--line); color: var(--text-muted); cursor: default; }
.sdrill__main.is-ready { background: var(--clay); color: #FFFFFF; }

/* Results: the score by question type (a Mixed session) */
.drill__by-type { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.drill__by-type-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.drill__by-type-score { font-family: var(--font-serif); font-size: 28px; line-height: 1; }
.drill__by-type-name { font-size: 13px; color: var(--text-muted); }

/* The Practice card with five modes (four and Mixed) */
.drill-card__modes.drill-card__modes--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.drill-card__mode-ar[dir="ltr"] { align-self: flex-start; text-align: left; }

@media (max-width: 640px) {
  .sdrill .drill__card { padding: 18px 16px; }
  .sdrill__line { font-size: 36px; }
  .sdrill__blank { min-width: 80px; }
  .sdrill__option { min-height: 58px; font-size: 24px; }
  .sdrill__key { display: none; }
  .drill__by-type { grid-template-columns: 1fr 1fr; }
  .drill-card__modes.drill-card__modes--five { grid-template-columns: 1fr 1fr; }
}


/* screens/drills.css */
/* A grammar drill session (drills/show, drill_session_controller) and its
   summary (drills/result). One central card: the question, its choices or
   answer field, then the feedback in the same card. Right and wrong carry
   ✓ / ✗ in text, never color alone. */
.drill { max-width: 920px; margin: 0 auto; gap: 14px; }
.drill__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drill__end { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
              background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.drill__end:hover { border-color: var(--ink); }
.drill__title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 700; text-align: center; }
.drill__level { padding: 1px 7px; border-radius: 6px; background: var(--sand); font-size: 12px; }
.drill__count { font-size: 14px; font-weight: 700; white-space: nowrap; }
.drill__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.drill__progress-bar { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
.drill__focus { margin: 0; font-size: 13px; color: var(--text-body); text-align: center; }
.drill__focus bdi { font-family: var(--font-arabic); font-size: 1.3em; }

.drill__card { width: 100%; max-width: 820px; align-self: center; display: flex; flex-direction: column; gap: 18px; margin-top: 14px;
               padding: 32px 44px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.drill__q { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.drill__instr { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.drill__question { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: center; }
.drill__big-ar { font-family: var(--font-arabic); font-size: 56px; line-height: 2.1; }
.drill__big-en { font-family: var(--font-serif); font-size: 38px; line-height: 1.4; }
.drill__cap { font-size: 15px; line-height: 1.45; color: var(--text-body); }
.drill__step { margin-bottom: -8px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }

.drill__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drill__choices--3 { grid-template-columns: repeat(3, 1fr); }
.drill__choice { position: relative; min-height: 96px; padding: 6px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center;
                 border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.drill__choice:hover:not(:disabled) { border-color: var(--ink); }
.drill__choice:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.drill__choice:disabled { cursor: default; }
.drill__choice-key { position: absolute; top: 8px; inset-inline-start: 12px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.drill__choice-ar { font-family: var(--font-arabic); font-size: 31px; line-height: 1.95; }
.drill__choice-en { font-family: var(--font-serif); font-size: 23px; line-height: 1.3; }
.drill__choice-tag { font-size: 12px; font-weight: 700; }
.drill__choice.is-right { background: var(--right-soft); border: 2px solid var(--right); }
.drill__choice.is-right .drill__choice-tag { color: var(--right); }
.drill__choice.is-wrong { background: var(--wrong-soft); border: 2px solid var(--wrong); }
.drill__choice.is-wrong .drill__choice-tag { color: var(--wrong); }
.drill__choice.is-dim { background: transparent; border-color: var(--line); color: var(--text-body); }

.drill__done { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; }
.drill__done.is-right { background: var(--right-soft); }
.drill__done.is-wrong { background: var(--wrong-soft); }
.drill__done-label { font-size: 14px; font-weight: 700; }
.drill__done-value { font-family: var(--font-arabic); font-size: 24px; line-height: 1.6; }
.drill__done-given { text-decoration: line-through; text-decoration-color: var(--clay); color: var(--ink-line); }

/* Typed answers */
.drill__field { display: flex; flex-direction: column; gap: 10px; }
.drill__field-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.drill__field-label { font-size: 14px; font-weight: 600; }
.drill__switch { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.drill__switch input { position: absolute; opacity: 0; pointer-events: none; }
.drill__switch-track { position: relative; width: 38px; height: 22px; border-radius: var(--radius-pill); background: var(--line-dashed); flex-shrink: 0; }
.drill__switch-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--field); transition: inset-inline-start .15s; }
.drill__switch:has(input:checked) .drill__switch-track { background: var(--green); }
.drill__switch:has(input:checked) .drill__switch-track::after { inset-inline-start: 19px; }
.drill__switch:has(input:focus-visible) .drill__switch-track { outline: 3px solid var(--green); outline-offset: 2px; }
.drill__switch-text { color: var(--text-muted); }
.drill__input { width: 100%; min-height: 76px; padding: 4px 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--field); color: var(--ink);
                font-family: var(--font-arabic); font-size: 36px; line-height: 1.9; }
.drill__input:focus { outline: 3px solid var(--green); outline-offset: 2px; }
.drill__input--digits { font-family: var(--font-sans); font-size: 28px; font-weight: 600; min-height: 56px; max-width: 320px; align-self: center; }
.drill__typed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 18px; border-radius: 14px; border: 2px solid; background: var(--field); }
.drill__typed.is-right { border-color: var(--right); }
.drill__typed.is-wrong { border-color: var(--wrong); }
.drill__typed-ar { font-family: var(--font-arabic); font-size: 32px; line-height: 1.9; }
.drill__typed-digits { font-size: 28px; font-weight: 600; }
.drill__typed-mark { font-size: 14px; font-weight: 700; }
.drill__typed.is-right .drill__typed-mark { color: var(--right); }
.drill__typed.is-wrong .drill__typed-mark { color: var(--wrong); }

.drill__kb { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--sand); }
.drill__kb-row { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.drill__kb-row--marks { padding-top: 6px; border-top: 1px solid var(--line-mid); }
.drill__key { min-width: 42px; height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4px;
              border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field); color: var(--ink); cursor: pointer; font: inherit; }
.drill__key:hover { border-color: var(--ink); }
.drill__key-face { font-family: var(--font-arabic); font-size: 22px; line-height: 1; }
.drill__key--mark { min-width: 54px; height: 50px; background: var(--card); }
.drill__key--mark .drill__key-face { font-size: 26px; line-height: 1.2; }
.drill__key-name { font-size: 10px; color: var(--text-muted); }
.drill__key--wide { min-width: 110px; height: 50px; }
.drill__key--wide .drill__key-face { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
.drill__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.drill__pad-key { height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; font-size: 20px; font-weight: 600; }
.drill__pad-key--done { background: var(--sand); }

.drill__listen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drill__listen-play { width: 132px; height: 132px; border-radius: 50%; border: 0; background: var(--clay); color: var(--text-on-accent); font-size: 44px; cursor: pointer; }
.drill__listen-play:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.drill__listen-note { font-size: 14px; color: var(--text-body); }
.drill__listen-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.drill__listen-words { font-family: var(--font-arabic); font-size: 24px; line-height: 1.8; }

/* Complete the table */
.drill__table-wrap { overflow-x: auto; }
.drill__table { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.drill__table th[scope="col"] { padding: 0 10px 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); text-align: right; /* physical: text in the language taught keeps its own side */ }
.drill__table th[scope="row"] { padding: 0 10px; text-align: right; /* physical: text in the language taught keeps its own side */ font-weight: 400; white-space: nowrap; }
.drill__table-pronoun { font-family: var(--font-arabic); font-size: 20px; line-height: 1.7; }
.drill__table-en { font-size: 11px; color: var(--text-muted); }
.drill__table td { padding: 0 8px; text-align: center; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-arabic); font-size: 20px; line-height: 1.75; white-space: nowrap; }
.drill__table td.is-right { background: var(--right-soft); border: 1.5px solid var(--right); }
.drill__table td.is-wrong { background: var(--wrong-soft); border: 1.5px solid var(--wrong); }
.drill__table td.is-active { background: var(--field); border: 2px dashed var(--clay); color: var(--clay); }
.drill__table td.is-blank { background: var(--field); border: 1.5px dashed var(--line-dashed); color: var(--text-muted); }
.drill__cell-mark { margin-inline-end: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; }

/* Feedback */
.drill__feedback { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.drill__feedback:focus { outline: none; }
.drill__status { margin: 0; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; }
.drill__status.is-right { background: var(--right-soft); color: var(--right); }
.drill__status.is-wrong { background: var(--wrong-soft); color: var(--wrong); }
.drill__your { margin: 0; font-size: 14px; color: var(--text-body); }
.drill__your bdi, .drill__rule bdi { font-family: var(--font-arabic); font-size: 1.25em; }
.drill__note { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--sand); font-size: 14px; }
.drill__right { margin: 0; font-family: var(--font-arabic); font-size: 40px; line-height: 2.1; font-weight: 700; }
.drill__right > span:not(.drill__right-sep) { font-family: var(--font-serif); font-weight: 400; font-size: .7em; }
.drill__right-sep { font-family: var(--font-sans); font-size: 20px; color: var(--text-muted); font-weight: 400; }
.drill__rule { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.drill__tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.drill__tools--start { justify-content: flex-start; }
.drill__pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: none; color: var(--ink);
               font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.drill__pill:hover:not(:disabled) { border-color: var(--ink); }
.drill__pill--save { border-color: var(--green); color: var(--green); }
.drill__pill bdi { font-family: var(--font-arabic); font-size: 17px; }

.drill__actions { width: 100%; max-width: 820px; align-self: center; display: flex; flex-direction: column; gap: 8px; }
.drill__next { min-height: 54px; border: 0; border-radius: var(--radius-pill); background: var(--sand); color: var(--text-body); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.drill__next:not(:disabled) { background: var(--ink); color: var(--paper); }
.drill__next:disabled { cursor: default; }
.drill__next:focus-visible, .drill__next.is-ready:focus { outline: 3px solid var(--green); outline-offset: 4px; }
.drill__keys { margin: 0; text-align: center; font-size: 12px; color: var(--text-muted); }
.drill__error { margin: 0; text-align: center; font-size: 14px; color: var(--clay); font-weight: 600; }

.drill__dialog { width: min(460px, calc(100vw - 32px)); padding: 26px 28px; border: 0; border-radius: 20px; background: var(--card); color: var(--ink);
                 box-shadow: 0 30px 60px -20px rgba(28, 35, 33, .6); }
.drill__dialog::backdrop { background: rgba(28, 35, 33, .42); }
.drill__dialog-title { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.drill__dialog-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-line); }
.drill__dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.drill__keep, .drill__save-end { flex: 1; min-height: 48px; border-radius: var(--radius-pill); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.drill__keep { border: 0; background: var(--ink); color: var(--paper); }
.drill__keep:focus-visible, .drill__save-end:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.drill__save-end { border: 1.5px solid var(--ink); background: none; color: var(--ink); }
.drill__quit { display: block; margin: 12px auto 0; width: fit-content; font-size: 13px; color: var(--text-muted); text-decoration: underline; }

/* Summary */
.drill__summary { width: 100%; max-width: 820px; align-self: center; display: flex; flex-direction: column; gap: 18px; padding-top: 16px; }
.drill__summary-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.drill__score { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(52px, 8vw, 76px); line-height: 1; }
.drill__saved { font-size: 14px; color: var(--green); font-weight: 600; }
.drill__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--questions, 10), 1fr); gap: 4px; }
.drill__strip-item { height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 700; }
.drill__strip-item.is-right { background: var(--right-soft); color: var(--right); }
.drill__strip-item.is-wrong { background: var(--wrong-soft); color: var(--wrong); }
.drill__misses { display: flex; flex-direction: column; gap: 10px; }
.drill__misses-title { margin: 0; font-size: 16px; font-weight: 700; }
.drill__miss { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.drill__miss-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.drill__miss-q { font-family: var(--font-serif); font-size: 22px; }
.drill__miss-q .ar { font-family: var(--font-arabic); font-size: 24px; line-height: 1.8; }
.drill__miss-hint { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); }
.drill__miss-n { font-size: 12px; color: var(--text-muted); }
.drill__miss-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.drill__miss-you, .drill__miss-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 13px; font-weight: 700; }
.drill__miss-you { color: var(--clay); }
.drill__miss-right { color: var(--right); }
.drill__miss-given { font-family: var(--font-arabic); font-size: 20px; line-height: 1.8; font-weight: 400; color: var(--ink-line); text-decoration: line-through; text-decoration-color: var(--clay); }
.drill__miss-answer { font-family: var(--font-arabic); font-size: 22px; line-height: 1.8; color: var(--ink); }
.drill__miss-label { font-weight: 600; color: var(--text-muted); }
.drill__miss-rule { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-line); }
.drill__miss-rule .ar { font-size: 1.25em; }
.drill__summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.drill__another, .drill__change, .drill__back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--radius-pill);
                                                      font-size: 15px; font-weight: 600; text-decoration: none; }
.drill__another { padding: 0 26px; background: var(--clay); color: var(--text-on-accent); font-size: 16px; }
.drill__another:hover { background: var(--clay-hover); color: var(--text-on-accent); text-decoration: none; }
.drill__another:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.drill__change { padding: 0 22px; border: 1.5px solid var(--ink); color: var(--ink); }
.drill__change:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.drill__back-link { padding: 0 16px; color: var(--ink); text-decoration: underline; }

@media (max-width: 640px) {
  .drill__end-text { display: none; }
  .drill__title { font-size: 13px; }
  .drill__card { margin-top: 4px; padding: 20px 16px; }
  .drill__big-ar { font-size: 40px; }
  .drill__big-en { font-size: 28px; }
  .drill__choices, .drill__choices--3 { grid-template-columns: 1fr; }
  .drill__choices--table { grid-template-columns: 1fr 1fr; }
  .drill__choice { min-height: 70px; }
  .drill__choice-ar { font-size: 25px; }
  .drill__choice-en { font-size: 20px; }
  .drill__right { font-size: 30px; }
  .drill__table-pronoun, .drill__table td { font-size: 17px; }
  .drill__miss-answers { grid-template-columns: 1fr; }
  .drill__summary-actions > * { flex: 1 1 100%; }
  .drill__dialog-title { font-size: 28px; }
}

/* The question as one line with Arabic in it (Build, Produce, the table). */
.drill__line { font-family: var(--font-serif); font-size: 34px; line-height: 1.5; }
.drill__line .ar { font-family: var(--font-arabic); font-size: 1.3em; }
.drill__right-cap { margin-top: -10px; font-size: 14px; color: var(--text-body); }
/* Read it: which noun, chosen before Check */
.drill__choice--small { min-height: 48px; }
.drill__choice--small .drill__choice-en { font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
.drill__choice.is-chosen { border: 2px solid var(--ink); }
.drill__table td { min-width: 0; }
@media (max-width: 640px) {
  .drill__line { font-size: 26px; }
  .drill__choices--nouns { grid-template-columns: repeat(3, 1fr); }
  .drill__table th[scope="row"], .drill__table td { padding: 0 4px; }
}


/* screens/export.css */
/* Export: flashcards to Anki (CSV) */

.export__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  border-radius: 20px;
}

.export__copy { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.export__eyebrow { font-weight: 700; }
.export__title { margin: 0; font-size: 34px; line-height: 1.1; }

/* Export form */
.export__group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.export__legend { padding: 0; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.export__choices { --row-gap: 6px; }
.export__choice { padding: 7px 14px; font-size: 13px; cursor: pointer; }
.export__choice:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.export__choice:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.export__download { padding: 12px 20px; }
.export__done { font-size: 14px; font-weight: 600; color: var(--green); }
.export__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* Export preview */
.export__preview {
  flex: 1 1 440px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}
.export__preview-title {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.export__preview-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.export__preview-row:last-child { border-bottom: 0; }
.export__preview-ar { font-size: 24px; text-align: right; /* physical: text in the language taught keeps its own side */ }
.export__preview-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.export__preview-text strong { font-size: 14px; }
.export__preview-empty { margin: 0; padding: 14px; font-size: 14px; color: var(--text-muted); }

@media (max-width: 600px) {
  .export__title { font-size: 28px; }
  .export__preview-row { grid-template-columns: 80px minmax(0, 1fr); }
}


/* screens/flashcards.css */
/*
 * Flashcards: the decks and study settings (/flashcards), a deck's cards
 * (/flashcards/my/:deck), a session and its summary (/flashcards/study).
 */

/* ── Home ─────────────────────────────────────────────────────────── */
.fc { max-width: 1180px; gap: 22px; }

.fc__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fc__intro { display: flex; flex-direction: column; gap: 6px; }
.fc__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 52px); line-height: 1; margin: 0; }
.fc__lead { margin: 0; font-size: 15px; color: var(--text-body); }
.fc__meters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fc__streak { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; }
.fc__xp { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.fc__xp-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
.fc__xp-track { display: block; height: 5px; background: var(--line); border-radius: 5px; overflow: hidden; }
.fc__xp-fill { display: block; height: 100%; background: var(--peach); }

.fc__banner { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fc__banner-count { display: flex; align-items: baseline; gap: 14px; font-size: 16px; }
.fc__banner-n { font-family: var(--font-serif); font-size: 52px; line-height: 1; color: var(--peach); }
.fc__banner-btn { background: var(--peach); color: var(--ink); border: none; }
.fc__banner-btn:hover { background: var(--paper); color: var(--ink); }

/* Deck cards: the title link picks the deck (it covers the card) */
.fc__decks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.fc-deck { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fc-deck:hover { border-color: var(--line-strong); }
.fc-deck.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fc-deck__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fc-deck__kind { border-radius: var(--radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: var(--sand); color: var(--ink); }
.fc-deck--custom .fc-deck__kind { background: var(--clay-soft); color: var(--clay); }
.fc-deck--library .fc-deck__kind { background: var(--green-soft); color: var(--green); }
.fc-deck__total { font-size: 13px; color: var(--text-muted); }
.fc-deck__title { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; color: var(--ink); text-decoration: none; }
.fc-deck__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fc-deck__title:hover { color: var(--ink); text-decoration: none; }
.fc-deck__title:focus-visible { outline: none; }
.fc-deck:has(.fc-deck__title:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.fc-deck__desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.fc-deck__counts { display: flex; gap: 14px; font-size: 13px; }
.fc-deck__due { color: var(--clay); }
.fc-deck__mastery { display: block; height: 5px; background: var(--line); border-radius: 5px; overflow: hidden; }
.fc-deck__mastery span { display: block; height: 100%; background: var(--green); }
.fc-deck__new { margin-inline-start: auto; background: var(--sand); border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; font-weight: 700; }
.fc-deck--sentences .fc-deck__kind { background: var(--sand); }
.fc-deck__allowance { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; color: var(--text-body); }
.fc-deck__browse {
  position: relative; z-index: 1; align-self: flex-start; margin-top: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.fc-deck__browse:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

/* New deck, and the deck library */
.fc-deck--add { padding: 0; background: transparent; border: none; }
.fc-new { height: 100%; }
.fc-new__open {
  list-style: none; cursor: pointer; height: 100%; min-height: 200px; border: 1.5px dashed var(--line-dashed); border-radius: var(--radius-card); padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink); text-align: center; text-decoration: none;
}
.fc-new__open::-webkit-details-marker { display: none; }
.fc-new__open:hover { background: var(--card); border-color: var(--ink); color: var(--ink); text-decoration: none; }
.fc-new[open] .fc-new__open { display: none; }
.fc-new__plus { font-size: 30px; line-height: 1; }
.fc-new__label { font-size: 15px; font-weight: 600; }
.fc-new__hint { font-size: 13px; color: var(--text-muted); }
.fc-new__form { height: 100%; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fc-new__form .row { margin-top: auto; }

/* Study settings */
.fc-study { padding: 24px; display: flex; flex-direction: column; gap: 18px; border-radius: 20px; scroll-margin-top: 20px; }
.fc-study__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fc-study__title { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1; margin: 0; }
.fc-study__note { font-size: 13px; }
.fc-study__group { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fc-study__label { padding: 0; margin-bottom: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.fc-study__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.fc-mode { position: relative; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.fc-mode:hover { border-color: var(--ink); }
.fc-mode:has(.fc-mode__input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fc-mode:has(.fc-mode__input:focus-visible), .fc-pill:has(.fc-pill__input:focus-visible), .fc-switch:has(.fc-switch__input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.fc-mode__input, .fc-pill__input, .fc-switch__input { position: absolute; opacity: 0; pointer-events: none; }
.fc-mode__label { font-size: 15px; font-weight: 700; }
.fc-mode__about { font-size: 13px; opacity: .85; line-height: 1.4; }
.fc-study__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 28px; align-items: start; border-top: 1px solid var(--line); padding-top: 18px; }
.fc-study__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fc-study__side .fc-switch { margin-top: 0; }
.fc-study__new { margin-inline-start: 6px; background: var(--sand); color: var(--ink); border-radius: var(--radius-pill); padding: 1px 8px; font-size: 11px; letter-spacing: 0; text-transform: none; }

/* Review style: compact radio cards */
.fc-study__style-list { display: flex; flex-direction: column; gap: 8px; }
.fc-style { position: relative; cursor: pointer; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.fc-style:hover { border-color: var(--line-strong); }
.fc-style:has(.fc-style__input:checked) { border-color: var(--ink); }
.fc-style:has(.fc-style__input:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
.fc-style__input { position: absolute; opacity: 0; pointer-events: none; }
.fc-style__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); box-shadow: inset 0 0 0 3px var(--card); flex-shrink: 0; }
.fc-style:has(.fc-style__input:checked) .fc-style__dot { border-color: var(--green); background: var(--green); }
.fc-style__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fc-style__label { font-size: 15px; font-weight: 700; }
.fc-style__default { font-weight: 400; color: var(--text-muted); }
.fc-style__about { font-size: 13px; line-height: 1.4; color: var(--text-body); }

/* The note under Direction, while in-context cards can come up */
.fc-study__dir-note { display: flex; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.fc-study__dir-i { color: var(--clay); font-weight: 700; }
.fc-study:has(.fc-style__input[value="word"]:checked) .fc-study__dir-note { display: none; }
.fc-study:has(.fc-mode__input[value="bank"]:checked) .fc-study__dir { display: none; }
.fc-study__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-pill { position: relative; cursor: pointer; }
.fc-pill span { display: block; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; }
.fc-pill:hover span { border-color: var(--ink); }
.fc-pill:has(.fc-pill__input:checked) span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fc-switch { position: relative; cursor: pointer; margin-top: 22px; display: flex; align-items: center; gap: 10px; }
.fc-switch__track { width: 44px; height: 26px; border-radius: 13px; background: var(--line-strong); position: relative; flex-shrink: 0; transition: background-color .15s ease; }
.fc-switch__knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: inset-inline-start .15s ease; }
.fc-switch:has(.fc-switch__input:checked) .fc-switch__track { background: var(--clay); }
.fc-switch:has(.fc-switch__input:checked) .fc-switch__knob { inset-inline-start: 21px; }
.fc-switch__text { display: flex; flex-direction: column; }
.fc-switch__label { font-size: 14px; font-weight: 600; }
.fc-switch__about { font-size: 12px; color: var(--text-muted); }
.fc-study__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.fc-study__keys { font-size: 13px; }
.fc-study__start.is-empty { opacity: .5; }

/* ── A deck's cards ───────────────────────────────────────────────── */
.fc-browse { max-width: 1180px; gap: 18px; }
.fc-browse__head { display: flex; flex-direction: column; gap: 6px; }
.fc-browse__back { align-self: flex-start; font-size: 14px; color: var(--text-muted); }
.fc-browse__title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fc-browse__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 5vw, 44px); line-height: 1; margin: 0; }
.fc-browse__sub { font-size: 14px; }
.fc-browse__actions { flex-wrap: wrap; align-items: center; }
.fc-browse__delete { color: var(--clay); font-weight: 600; font-size: 14px; padding: 8px; }

.fc-panel { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fc-panel__title { margin: 0; font-size: 16px; font-weight: 700; }
.fc-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.fc-form__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.fc-form__field .input { font-weight: 400; }
.fc-form__field--wide { grid-column: 1 / -1; }
.fc-form__ar { font-family: var(--font-arabic); font-size: 20px; padding-top: 6px; padding-bottom: 6px; }
.fc-import__help { margin: 0; font-size: 14px; color: var(--text-body); line-height: 1.5; }
.fc-import__text { font-family: var(--font-arabic), var(--font-sans); font-size: 18px; line-height: 1.6; resize: vertical; }
.fc-import__actions { flex-wrap: wrap; align-items: center; }
.fc-import__file { cursor: pointer; }
.fc-import__name { font-size: 13px; }

.fc-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.fc-table__search { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.fc-table__query { width: min(100%, 360px); }
.fc-table__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 100px 100px minmax(0, 1.4fr);
  gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-soft); align-items: center;
}
.fc-table__row[hidden] { display: none; }
.fc-table__row--head { border-top: none; padding: 10px 18px; background: var(--sand); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-body); }
.fc-table__ar { text-align: right; /* physical: text in the language taught keeps its own side */ }
.fc-table__word { font-size: 24px; line-height: 1.4; }
.fc-table__meaning { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-table__en { font-size: 15px; font-weight: 600; }
.fc-table__meta { font-size: 12px; color: var(--text-muted); }
.fc-table__meta .ar { font-size: 14px; }
.fc-table__next { font-size: 13px; color: var(--text-body); white-space: nowrap; }
.fc-table__actions { display: flex; justify-content: flex-end; }
.fc-table__buttons { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.fc-table__buttons[hidden] { display: none; }
.fc-table__ask { font-size: 13px; font-weight: 600; }
.fc-table__empty { margin: 0; padding: 28px 18px; font-size: 15px; color: var(--text-body); text-align: center; }
.fc-status { justify-self: start; border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fc-status--new { background: var(--clay-soft); color: var(--clay); }
.fc-status--due { background: var(--clay); color: var(--text-on-accent); }
.fc-status--learning { background: var(--green-soft); color: var(--green); }
.fc-status--mature { background: var(--green); color: var(--paper); }
.fc-status--suspended { background: var(--sand); color: var(--text-muted); }
.fc-act__form { display: inline; }
.fc-act {
  display: inline-block; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
.fc-act:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.fc-act--danger { border-color: #E4C2B2; color: var(--clay); }
.fc-act--danger:hover { border-color: var(--clay); color: var(--clay); }
.fc-act--solid { background: var(--clay); border-color: var(--clay); color: var(--text-on-accent); }
.fc-act--solid:hover { background: var(--clay-hover); border-color: var(--clay-hover); color: var(--text-on-accent); }

/* ── A session ────────────────────────────────────────────────────── */
.fc-session { max-width: 880px; margin: 0 auto; width: 100%; }
.fc-run { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.fc-run[hidden] { display: none; }
.fc-run__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-run__end { font-size: 14px; color: var(--text-muted); }
.fc-run__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.fc-run__cram { background: var(--clay-soft); color: var(--clay); border-radius: var(--radius-pill); padding: 4px 10px; font-weight: 700; }
.fc-run__counter { font-weight: 700; }
.fc-run__xp { background: var(--ink); color: var(--peach); border-radius: var(--radius-pill); padding: 4px 10px; font-weight: 700; }
.fc-run__undo { background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.fc-run__undo:disabled { opacity: .4; }
.fc-run__progress { height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; }
.fc-run__progress-bar { height: 100%; width: 0; background: var(--green); transition: width .25s; }

.fc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 340px;
  padding: 36px clamp(20px, 4vw, 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  text-align: center; box-shadow: 0 30px 50px -36px rgba(28, 35, 33, .35);
}
.fc-card__front { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fc-card__front[hidden], .fc-card__back[hidden], .fc-card__options[hidden], .fc-card__bank[hidden], .fc-card__hints[hidden], .fc-card__hint-texts[hidden] { display: none; }
.fc-card__ar { font-size: clamp(48px, 10vw, 72px); line-height: 1.4; }
.fc-card__en { font-family: var(--font-serif); font-size: clamp(38px, 7vw, 56px); line-height: 1.1; }
.fc-card__ask { font-size: 14px; color: var(--text-muted); }
.fc-card__ask--big { font-family: var(--font-serif); font-size: 30px; color: var(--ink); }
.fc-card__listen { width: 96px; height: 96px; border-radius: 50%; background: var(--clay); color: var(--text-on-accent); border: none; font-size: 30px; }
.fc-card__listen:hover { background: var(--clay-hover); }
.fc-card__cloze { font-size: clamp(26px, 5vw, 36px); line-height: 2; }
.fc-card__slot { display: inline-block; min-width: 120px; border-bottom: 2px solid var(--ink); border-radius: 8px 8px 0 0; padding: 0 10px; line-height: 1.5; }
.fc-card__slot.is-chosen { background: var(--sand); }
.fc-card__slot.is-right { background: var(--right-soft); }
.fc-card__slot.is-wrong { background: var(--wrong-soft); }
.fc-card__slot--alone { min-width: 140px; font-size: 36px; line-height: 1.6; }
.fc-card__gloss { font-size: 16px; color: var(--text-body); font-style: italic; }
.fc-card__which { font-family: var(--font-serif); font-size: clamp(30px, 6vw, 40px); line-height: 1.15; }

/* Cards with a sentence on them: a word in context, a saved sentence */
.fc-card__kicker { background: var(--sand); border-radius: var(--radius-pill); padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.fc-card__kicker[hidden], .fc-card__ctx-ask[hidden], .fc-card__sent-ask[hidden], .fc-card__mc-msg[hidden] { display: none; }
.fc-card__front--sentence { width: 100%; gap: 16px; }
.fc-card__sentence { margin: 0; font-size: clamp(30px, 5vw, 46px); line-height: 2.2; text-wrap: pretty; }
.fc-card__sentence.is-long { font-size: clamp(22px, 3vw, 24px); }
.fc-card__blank {
  display: inline-block; min-width: clamp(96px, 16vw, 150px); margin: 0 4px; padding: 0 8px; line-height: 1.6; vertical-align: baseline;
  border-bottom: 3px dashed var(--clay); border-radius: 8px 8px 0 0; color: var(--clay);
}
.fc-card__blank.is-filled { border-bottom: none; border-radius: 6px; padding: 0 6px; min-width: 0; background: var(--mark); color: var(--ink); font-weight: 700; }
.fc-card__blank.is-right { border-bottom: 3px solid var(--right); background: var(--right-soft); color: var(--right); min-width: 0; }
.fc-card__ctx-ask, .fc-card__sent-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-card__meaning { font-size: 15px; color: var(--text-body); }
.fc-card__meaning strong { color: var(--ink); }
.fc-card__prompt { font-family: var(--font-serif); font-size: clamp(24px, 4vw, 30px); line-height: 1.1; }
.fc-card__listen-pill { background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fc-card__listen-pill:hover { border-color: var(--ink); }
.fc-card__mc-msg { font-size: 15px; font-weight: 600; color: var(--clay); }
.fc-card__mc-msg.is-right { color: var(--right); }

.fc-card__play { background: var(--clay); color: var(--text-on-accent); border: none; border-radius: var(--radius-pill); padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 600; }
.fc-card__play:hover { background: var(--clay-hover); }
.fc-card__dict { font-size: 20px; }
.fc-card__dict-ar { font-size: 30px; }
.fc-card__translation { margin: 0; max-width: 620px; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 3vw, 26px); line-height: 1.4; color: var(--text-body); text-wrap: pretty; }
.fc-card__translation[hidden] { display: none; }
.fc-card__back--context { border-top: 1px solid var(--line); padding-top: 16px; }

.fc-card__tr-zone { width: 100%; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fc-card__sent-tr { margin: 0; max-width: 640px; font-family: var(--font-serif); font-size: clamp(20px, 3vw, 26px); line-height: 1.35; text-wrap: pretty; }
.fc-card__tr-ask { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fc-card__sent-tr[hidden], .fc-card__tr-ask[hidden], .fc-card__tr-note[hidden], .fc-card__tr-limit[hidden], .fc-card__src[hidden], .fc-card__explain[hidden], .fc-card__breakdown[hidden] { display: none; }
.fc-card__tr-note { font-size: 13px; color: var(--text-muted); }
.fc-card__translate { background: none; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); padding: 0 22px; min-height: 46px; font-size: 15px; font-weight: 600; color: var(--ink); }
.fc-card__translate:disabled { background: var(--sand); border-color: var(--sand); cursor: progress; }
.fc-card__tr-limit { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.fc-card__tr-limit a { font-weight: 700; }
.fc-card__sent-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.fc-card__src { font-weight: 600; }
.fc-card__explain { display: flex; align-items: center; gap: 8px; background: var(--sand); border: none; border-radius: var(--radius-pill); padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink); }
.fc-card__explain:hover { background: var(--sand-hover); }
.fc-card__explain-mark { font-size: 17px; color: var(--clay); }
.fc-card__breakdown { width: 100%; text-align: var(--start); border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fc-card__breakdown-head { display: flex; justify-content: space-between; align-items: center; }
.fc-card__breakdown-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.fc-card__breakdown-toggle { font-size: 13px; color: var(--text-body); min-height: 36px; }

.fc-card__hints { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.fc-card__hints-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.fc-hint { background: transparent; border: 1px dashed var(--line-dashed); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ink); }
.fc-hint:hover { border-color: var(--ink); }
.fc-hint.is-used { background: var(--sand); color: var(--text-muted); }
.fc-card__hint-texts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fc-hint-text { background: var(--sand-hover); border-radius: 10px; padding: 6px 12px; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.fc-hint-text__value { font-size: 18px; }

.fc-card__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; width: 100%; }
.fc-option {
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; color: var(--ink); text-align: var(--start); transition: border-color .15s ease, opacity .15s ease;
}
.fc-option:hover:not(:disabled) { border-color: var(--ink); }
.fc-option:disabled { cursor: default; }
.fc-option.is-right { background: var(--right-soft); border-color: var(--right); }
.fc-option.is-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.fc-option.is-faded { opacity: .55; }
.fc-option__key { width: 26px; height: 26px; border-radius: 7px; background: var(--sand); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-option__label { flex: 1; font-size: 16px; line-height: 1.4; text-align: center; }
.fc-option__label--ar { font-size: 28px; }
.fc-option__tag { font-size: 13px; font-weight: 700; }

.fc-card__bank { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fc-card__tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fc-tile { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; padding: 6px 16px; display: flex; align-items: center; gap: 8px; }
.fc-tile:hover { border-color: var(--ink); }
.fc-tile.is-chosen { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fc-tile__key { font-family: var(--font-sans); font-size: 11px; opacity: .6; }
.fc-tile__word { font-size: 24px; line-height: 1.4; }
.fc-card__check:disabled { opacity: .5; }
.fc-card__giveup { font-size: 14px; color: var(--text-muted); text-decoration: underline; }

.fc-card__back { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.fc-card__result { border-radius: var(--radius-pill); padding: 8px 18px; font-size: 15px; font-weight: 700; background: var(--clay-soft); color: var(--clay); }
.fc-card__result.is-right { background: var(--right-soft); color: var(--right); }
.fc-card__result[hidden] { display: none; }
.fc-card__answer { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.fc-card__answer-word { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.fc-card__audio { background: var(--sand); border: none; border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.fc-card__answer-ar { font-size: 48px; line-height: 1.4; }
.fc-card__answer-en { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; }
.fc-card__root { font-size: 14px; color: var(--text-muted); }
.fc-card__root .ar { font-size: 18px; color: var(--ink); }
.fc-card__example { background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 2px; align-items: center; color: var(--ink); }
.fc-card__example[hidden] { display: none; }
.fc-card__example-ar { font-size: 24px; line-height: 1.6; }
.fc-card__example-en { font-size: 15px; color: var(--text-body); font-style: italic; }
.fc-card__nuance { background: var(--sand-hover); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.fc-card__nuance[hidden] { display: none; }

.fc-grades { display: flex; flex-direction: column; gap: 10px; }
.fc-grades[hidden] { display: none; }
.fc-grades__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fc-grade { border-radius: var(--radius-md); padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); border: 1px solid var(--green); background: var(--card); }
.fc-grade--again { background: var(--clay-soft); border-color: var(--clay); }
.fc-grade--hard { border-color: var(--line-strong); }
.fc-grade--good { background: var(--right-soft); }
.fc-grade--easy { background: var(--green); color: var(--paper); }
.fc-grade.is-suggested { box-shadow: 0 0 0 3px var(--peach); }
.fc-grade__label { font-size: 15px; font-weight: 700; }
.fc-grade__next { font-size: 12px; opacity: .85; }
.fc-grade__key { font-size: 11px; opacity: .6; }
.fc-grades__tip { font-size: 13px; color: var(--text-muted); text-align: center; }

/* ── The summary ──────────────────────────────────────────────────── */
.fc-summary { display: flex; flex-direction: column; gap: 16px; }
.fc-summary[hidden] { display: none; }
.fc-summary__hero { background: var(--green); color: var(--paper); border-radius: var(--radius-lg); padding: 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.fc-summary__ar { font-size: 48px; line-height: 1.5; }
.fc-summary__title { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1; margin: 0; }
.fc-summary__title:focus { outline: none; }
.fc-summary__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; width: 100%; margin: 6px 0 0; }
.fc-summary__stats div { background: #3A6A5B; border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column-reverse; gap: 2px; }
.fc-summary__stats dt { font-size: 13px; color: var(--green-soft); }
.fc-summary__stats dd { margin: 0; font-family: var(--font-serif); font-size: 36px; line-height: 1; }
.fc-summary__xp { color: var(--peach); }
.fc-summary__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.fc-summary__panel { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.fc-summary__h { margin: 0; font-size: 15px; font-weight: 600; }
.fc-break { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 10px; }
.fc-break__track { height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.fc-break__fill { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.fc-break--again .fc-break__fill { background: var(--clay); }
.fc-break--hard .fc-break__fill { background: var(--gold); }
.fc-break--good .fc-break__fill { background: #3F7565; }
.fc-break__n { text-align: var(--end); font-weight: 700; }
.fc-summary__forecast { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.fc-summary__forecast dt, .fc-summary__forecast dd { border-top: 1px solid var(--line-soft); padding-top: 8px; margin: 0 0 8px; font-size: 14px; }
.fc-summary__forecast dd { font-family: var(--font-serif); font-size: 24px; text-align: var(--end); }
.fc-summary__missed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-summary__missed { display: flex; flex-direction: column; }
.fc-missed {
  background: none; border: none; border-top: 1px solid var(--line); padding: 10px 0; display: flex; align-items: center; gap: 14px;
  color: var(--ink); text-align: var(--start); min-width: 0; width: 100%;
}
.fc-missed:hover .fc-missed__ar { color: var(--wrong); }
.fc-missed__kind { background: var(--sand); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.fc-missed__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-missed__ar { font-size: 22px; line-height: 1.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; /* physical: text in the language taught keeps its own side */ }
.fc-missed__en { font-size: 13px; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-missed__rated { font-size: 12px; font-weight: 700; color: var(--clay); flex-shrink: 0; }
.fc-summary__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── Phones ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .fc-study__row { grid-template-columns: minmax(0, 1fr); }
  .fc-study__keys { display: none; }
  .fc-study__start { flex: 1; }
  .fc-table__row--head { display: none; }
  .fc-table__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ar ar" "meaning status" "next next" "actions actions"; gap: 6px 12px; }
  .fc-table__row > .fc-table__ar { grid-area: ar; }
  .fc-table__meaning { grid-area: meaning; }
  .fc-table__row > .fc-status { grid-area: status; justify-self: end; }
  .fc-table__next { grid-area: next; }
  .fc-table__actions { grid-area: actions; justify-content: flex-start; }
  .fc-table__buttons { justify-content: flex-start; }
  .fc-grades__row { gap: 6px; }
  .fc-grade__key { display: none; }
  .fc-card { padding: 28px 18px; min-height: 300px; }
  .fc-card__sentence { font-size: 30px; }
  .fc-card__sentence.is-long { font-size: 22px; }
  .fc-card__dict-ar { font-size: 26px; }
  .fc-missed__ar { font-size: 20px; }
}

/* Listening style: the card is played, not shown. */
.fc-card__front--heard { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc-card__front--heard[hidden] { display: none; }
.fc-card__front--heard .fc-card__listen.is-loading { opacity: .7; }
.fc-card__front--heard .fc-card__listen.is-playing { box-shadow: 0 0 0 6px var(--clay-soft); }
.fc-card__replay-note { font-size: 13px; color: var(--text-muted); }
.fc-card__front--heard .fc-card__listen.is-loading, .fc-card__front--heard .fc-card__listen.is-playing { font-size: 15px; font-weight: 700; }
/* "Audio unavailable" (speech_controller sets a title while it says so): small enough for the round button. */
.fc-card__front--heard .fc-card__listen[title] { font-size: 12px; font-weight: 700; line-height: 1.2; padding: 8px; }


/* screens/fluentplex-auth.css */
/* FluentPlex's sign-up and sign-in pages (design "FluentPlex Sign In"): its dark panel (sites/fluentplex/auth/
   _aside_panel), sign-in (2a–2d), "Check your email" (2c) and "Which language first?" (onboarding/language).
   In FluentPlex's colors (Site::FLUENTPLEX_THEME); only on fluentplex.com ([data-site="fluentplex"]). */

[data-site="fluentplex"] .split { grid-template-columns: 460px minmax(0, 1fr); }
[data-site="fluentplex"] .split__main { max-width: 712px; padding-inline-start: clamp(24px, 6vw, 96px); padding-inline-end: clamp(24px, 6vw, 96px); }
[data-site="fluentplex"] .split__title { font-weight: 500; letter-spacing: -.02em; }
/* Finished steps in indigo, the current one in jade (the theme's peach). */
[data-site="fluentplex"] .onb-steps .steps__item.is-done .steps__dot { background: var(--clay); border-color: var(--clay); color: var(--text-on-accent); }
/* The email form's "Create account": the indigo action, as designed. */
[data-site="fluentplex"] .onb__submit { background: var(--clay); border-color: var(--clay); color: var(--text-on-accent); border-radius: 999px; }
[data-site="fluentplex"] .onb__submit:hover { background: var(--clay-hover); border-color: var(--clay-hover); color: var(--text-on-accent); }

/* The panel */
.fpauth__aside .brand-mark { --mark-size: 42px; }
.fpauth__aside .brand__name { font-size: 30px; }
.fpauth__note { display: flex; flex-direction: column; gap: 14px; }
.fpauth__promise { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -.01em; color: var(--text-on-dark); }
.fpauth__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fpauth__chip {
  display: inline-flex; align-items: center; gap: 8px; padding-block: 4px; padding-inline: 6px 14px;
  background: var(--ink-raised); border: 1px solid var(--ink-line); border-radius: 999px; font-size: 14px; color: var(--text-on-dark);
}
.fpauth__chip-native { padding: 2px 10px; border-radius: 999px; font-size: 16px; line-height: 1.5; }

/* Sign-in */
.fpauth__banner, .fpauth__note-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.fpauth__banner { background: #FCEBEA; border: 1px solid #C9302C; color: #7A1C19; }
.fpauth__banner-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: #C9302C; color: #FFFFFF; font-size: 12px; font-weight: 700;
}
.fpauth__note-box { background: var(--clay-soft); color: var(--ink); }
.fpauth__note-mark { font-weight: 700; color: var(--clay); }
.fpauth .input[aria-invalid="true"] { border-color: #C9302C; }
.fpauth__submit { border-radius: 999px; }
.fpauth__footer { flex-direction: column; align-items: flex-start; border-top: none; padding-top: 0; font-size: 15px; }
.fpauth__school { width: 100%; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }

/* Check your email */
.fpauth__sent-mark {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font-size: 24px; font-weight: 700;
}
.fpauth__muted, .fplang__muted, .fplang__next { margin: 0; font-size: 14px; color: var(--text-muted); }
.fpauth__back { align-self: flex-start; border-radius: 999px; }

/* Which language first? */
.fplang__form { display: flex; flex-direction: column; gap: 16px; }
.fplang__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; border: none; }
.fplang__card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: var(--ink);
}
.fplang__card:has(.fplang__radio:checked) { border: 2px solid var(--ink); padding: 17px; }
.fplang__card:has(.fplang__radio:focus-visible) { outline: 3px solid #B9B4F2; outline-offset: 3px; }
.fplang__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fplang__card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fplang__native { font-size: 30px; line-height: 1.5; }
.fplang__dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-dashed); }
.fplang__card:has(.fplang__radio:checked) .fplang__dot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--card); }
.fplang__name { font-size: 18px; font-weight: 700; }
.fplang__offer { font-size: 14px; line-height: 1.45; color: var(--text-body); }
.fplang__colors { display: flex; gap: 4px; }
.fplang__colors span { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-mid); }
.fplang .btn { border-radius: 999px; }

/* Phones: the panel is a header (logo, the steps as a bar, the promise); cards stack. */
@media (max-width: 860px) {
  [data-site="fluentplex"] .split { grid-template-columns: minmax(0, 1fr); }
  .fpauth__aside { gap: 16px; padding: 20px 16px 22px; }
  .fpauth__aside .brand-mark { --mark-size: 34px; }
  .fpauth__aside .brand__name { font-size: 24px; }
  .fpauth__promise { font-size: 20px; line-height: 1.25; }
  .fpauth__chips { display: none; }
  .fplang__cards { grid-template-columns: minmax(0, 1fr); }
}


/* screens/fluentplex-home.css */
/* FluentPlex's public pages (app/views/sites/fluentplex; design "FluentPlex Home"): its header and footer,
   and its home page. Colors are the theme's names (FluentPlex's on its public pages: Site::FLUENTPLEX_THEME);
   the home page's demo is in each language's own (--d-…, FluentplexHelper). */

/* Header */
.fpsite-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 48px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.fpsite-header .brand-mark { --mark-size: 40px; }
.fpsite-nav { display: flex; align-items: center; gap: 4px; }
.fpsite-nav__link { padding: 10px 14px; border-radius: 999px; font-size: 15px; color: var(--text-body); text-decoration: none; }
.fpsite-nav__link:hover, .fpsite-nav__link[aria-current="page"] { background: var(--sand); color: var(--ink); text-decoration: none; }
.fpsite-nav__cta {
  display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 6px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--clay); color: var(--text-on-accent); font-size: 15px; font-weight: 600; text-decoration: none;
}
.fpsite-nav__cta:hover { background: var(--clay-hover); color: var(--text-on-accent); text-decoration: none; }
.fpsite-header__phone { display: none; align-items: center; gap: 4px; }
.fpsite-header__sign-in { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.fpsite-menu { position: relative; }
.fpsite-menu__button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; list-style: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); font-size: 18px; color: var(--ink);
}
.fpsite-menu__button::-webkit-details-marker { display: none; }
.fpsite-menu__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-menu);
}
.fpsite-menu__link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.fpsite-menu__link:hover { background: var(--sand); text-decoration: none; }
.fpsite-menu__list .fpsite-nav__cta { margin: 6px 0 0; }

/* Footer */
.fpsite-footer {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px 48px; border-top: 1px solid var(--line); background: var(--paper);
}
.fpsite-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.fpsite-footer .brand-mark { --mark-size: 30px; }
.fpsite-footer .brand__name { font-size: 22px; }
.fpsite-footer__tagline { font-size: 14px; color: var(--text-muted); }
.fpsite-footer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; font-size: 15px; }
.fpsite-footer__links a { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-body); }

/* Home page (design "FluentPlex Home v2") */
.fphome { background: var(--paper); color: var(--ink); }
.fphome__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 60px 48px 64px;
}
.fphome__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fphome__title {
  margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 54px; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance;
}
.fphome__title em { color: var(--green); }
.fphome__lead { margin: 0; max-width: 580px; font-size: 18px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.fphome__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.fphome__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; text-align: center;
}
.fphome__btn:hover { text-decoration: none; }
.fphome__btn--primary { background: var(--clay); color: var(--text-on-accent); }
.fphome__btn--primary:hover { background: var(--clay-hover); color: var(--text-on-accent); }
.fphome__btn--outline { border-color: var(--ink); color: var(--ink); padding: 0 24px; }
.fphome__btn--outline:hover { background: var(--ink); color: var(--paper); }
.fphome__btn--light { align-self: flex-start; min-height: 48px; padding: 0 22px; background: #FFFFFF; color: #17182B; font-size: 15px; }
.fphome__btn--light:hover { color: #17182B; background: #ECEAE3; }
.fphome__btn--block { width: 100%; min-height: 48px; font-size: 15px; margin-top: auto; }
.fphome__note { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.fphome__muted-sm { font-size: 13px; color: var(--text-muted); }

/* The demo: each language in its own look (--d-…), whatever the site's colors */
.fphome__demo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fphome__demo-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fphome__demo-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
/* Nine languages and more: each tab as wide as its name, wrapping to a second row where they don't fit */
.fphome__tabs { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; padding: 3px; background: var(--sand); border-radius: 22px; }
.fphome__tab {
  display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border: none; border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap;
}
.fphome__tab bdi { font-family: var(--d-font); font-size: 14px; font-weight: 500; line-height: 1.2; }
.fphome__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.fphome__tab:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.fphome__demo-set { display: flex; flex-direction: column; gap: 10px; }
.fphome__demo-set[hidden] { display: none; }
.fphome__reader {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 22px;
  background: var(--d-paper); border: 1px solid var(--d-line); border-radius: 20px; color: var(--d-ink);
}
.fphome__reader-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--d-muted); }
.fphome__reader-title { font-family: var(--d-font); font-size: 15px; color: var(--d-ink); }
.fphome__reader-title[dir="rtl"] { font-size: 17px; }
.fphome__level { padding: 2px 8px; border-radius: 6px; background: var(--d-tag); color: var(--d-ink); font-weight: 700; font-family: var(--font-sans); }
.fphome__sentence { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; font-family: var(--d-font); font-size: 28px; line-height: 1.4; color: var(--d-ink); }
.fphome__sentence[dir="rtl"] { font-size: 30px; line-height: 2; }
.fphome__word { display: inline-flex; flex-direction: column; align-items: center; padding: 0 4px; border-bottom: 1.5px dotted var(--d-dotted); border-radius: 6px 6px 2px 2px; }
.fphome__word.is-selected { background: var(--d-selected); border-bottom: 2px solid var(--d-selected-line); }
.fphome__reading { font-family: var(--font-sans); font-size: 12px; line-height: 1.3; color: var(--d-muted); }
.fphome__translation { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--d-line); font-size: 14px; line-height: 1.5; color: var(--d-muted); }
.fphome__explained { font-size: 12px; font-weight: 600; }
.fphome__genius { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: var(--d-dark); border-radius: 20px; color: #FFFFFF; }
.fphome__genius-head { display: flex; align-items: center; gap: 10px; }
.fphome__avatar {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--d-accent); font-family: var(--d-font); font-size: 15px; line-height: 1;
}
.fphome__genius-name { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #D3D0DA; font-family: var(--font-sans); }
.fphome__parts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.fphome__part {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px;
  background: var(--d-raised); border: 1px solid var(--d-raised-line); border-radius: 10px;
}
.fphome__part-text { font-family: var(--d-font); font-size: 22px; line-height: 1.3; }
.fphome__part-gloss { font-size: 12px; color: #D3D0DA; }
.fphome__equals { display: flex; align-items: center; padding: 0 2px; font-size: 18px; color: #D3D0DA; }
.fphome__meaning { display: flex; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--d-highlight); color: var(--d-ink); font-size: 15px; font-weight: 700; }
.fphome__note-text { margin: 0; font-size: 15px; line-height: 1.65; }
.fphome__taught { font-family: var(--d-font); font-size: 1.2em; }
.fphome__taught--bold { font-size: 1.05em; font-weight: 700; }

/* Sections */
.fphome__section { display: flex; flex-direction: column; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 0 48px 56px; }
.fphome__section--pillars { padding-top: 56px; border-top: 1px solid var(--line); max-width: none; }
.fphome__section--pillars > * { width: 100%; max-width: 1184px; margin-inline: auto; }
.fphome__section-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
/* A page of its own built from the home page's parts (/languages): its first section, its heading and a note. */
.fphome__section--first { padding-top: 56px; }
.fphome__section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.fphome__muted { font-size: 14px; color: var(--text-muted); }
.fphome__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.fphome__eyebrow--on-dark { color: #3FC2A8; }
.fphome__h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 42px; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; max-width: 720px; }
.fphome__h2--sm { font-size: 36px; line-height: 1.15; }
.fphome__h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.2; }
.fphome__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--link, var(--clay)); }

/* Pillars: read, learn, practice */
.fphome__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fphome__pillar { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.fphome__pillar-key { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--link, var(--clay)); }
.fphome__pillar-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px; background: var(--clay-soft); color: var(--link, var(--clay));
}
.fphome__pillar-demo { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--text-body); }
.fphome__pillar-demo strong { color: var(--green); }
.fphome__pillar-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.fphome__bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.fphome__bar span { display: block; height: 100%; background: var(--green); }
.fphome__slide-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.fphome__slide-dots { display: flex; gap: 3px; }
.fphome__slide-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.fphome__slide-dots span.is-done { background: var(--link, var(--clay)); }
.fphome__slide-title { font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--ink); }
.fphome__speaking { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--green); }
.fphome__speaking .icon { width: 16px; height: 16px; }
.fphome__wave { display: flex; align-items: center; gap: 2px; height: 14px; }
.fphome__wave span { width: 3px; border-radius: 2px; background: var(--green); }
.fphome__caption { align-self: flex-start; padding: 8px 12px; border-radius: 12px; border-end-start-radius: 4px; background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.45; }
.fphome__plan-mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fphome__plan-mini-head strong { color: var(--ink); }
.fphome__plan-mini-head span { font-size: 13px; font-weight: 700; color: var(--link, var(--clay)); }
.fphome__plan-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fphome__plan-mini li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.fphome__plan-mini li > span:first-child {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px dashed var(--line-strong); font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.fphome__plan-mini li.is-done { color: var(--text-muted); }
.fphome__plan-mini li.is-done > span:first-child { background: var(--green); border: 1.5px solid var(--green); color: var(--paper); }
.fphome__plan-mini li.is-done > span:last-child { text-decoration: line-through; }

/* Languages */
/* Four to a row: seven languages as 4 + 3, eight as 4 + 4. */
.fphome__langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fphome__lang { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.fphome__lang--soon { background: transparent; border: 1.5px dashed var(--line-strong); color: var(--text-body); }
.fphome__lang-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fphome__lang-names { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.fphome__lang-native { font-family: var(--d-font, var(--font-serif)); font-size: 28px; line-height: 1.3; color: var(--ink); }
.fphome__lang-name { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.fphome__soon { padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fphome__lang-offer { font-size: 14px; line-height: 1.5; color: var(--text-body); }
.fphome__lang-start {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--link, var(--clay)); text-decoration: none; white-space: nowrap;
}

/* Free and Pro */
.fphome__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fphome__plan { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.fphome__plan--pro { border: 2px solid #4A3FD6; }
.fphome__plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fphome__plan-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.fphome__plan-tag { padding: 2px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; }
.fphome__price-line { display: flex; align-items: baseline; gap: 6px; }
.fphome__price { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.fphome__per { font-size: 14px; color: var(--text-muted); }
.fphome__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fphome__ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; }
.fphome__ticks li::before { content: "✓"; color: var(--green); font-weight: 700; }
.fphome__ticks--on-dark li { color: #D3D0DA; }
.fphome__ticks--on-dark li::before { color: #3FC2A8; }

/* Teachers: a dark band in both themes */
.fphome__teach {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; padding: 40px;
  background: var(--band, #17182B); border: 1px solid var(--band-line, #17182B); color: #FFFFFF; border-radius: 22px;
}
.fphome__teach-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fphome__wordmark { font-family: "Newsreader", Georgia, serif; font-weight: 500; }
.fphome__wordmark em { color: #3FC2A8; }
.fphome__teach-lead { margin: 0; padding: 14px 16px; background: #2C2E4A; border: 1px solid #4A4D6E; border-radius: 14px; font-size: 15px; line-height: 1.6; }
.fphome__class { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; background: #24263F; border: 1px solid #383B58; border-radius: 16px; }
.fphome__class-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fphome__class-name { font-size: 15px; font-weight: 700; }
.fphome__class-code, .fphome__class-assignment { font-size: 12px; color: #B8BAD0; }
.fphome__class-assignment { font-size: 13px; }
.fphome__class-code bdi { color: #FFFFFF; letter-spacing: 1px; font-weight: 700; }
.fphome__class-title { font-family: var(--d-font, inherit); font-size: 16px; color: #FFFFFF; }
.fphome__class-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.fphome__class-student { font-weight: 600; }
.fphome__class-status { color: #D3D0DA; white-space: nowrap; }
.fphome__class-bar { height: 6px; border-radius: 6px; background: #383B58; overflow: hidden; }
.fphome__class-bar span { display: block; height: 100%; background: #A9A3FF; }
.fphome__class-bar span.is-done { background: #3FC2A8; }

/* Our commitments */
.fphome__trust { padding: 24px 48px; border-top: 1px solid var(--line); }
.fphome__trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.fphome__trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--text-body); }
.fphome__trust .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }

/* Narrower screens: the hero and grids stack, then the phone layout (design "Home v2", 375 px). */
@media (max-width: 960px) {
  .fphome__hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fphome__pillars, .fphome__teach { grid-template-columns: minmax(0, 1fr); }
  .fphome__langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fphome__title { font-size: 46px; }
}
@media (max-width: 760px) {
  .fpsite-header { padding-block: 12px; padding-inline: 16px 12px; }
  .fpsite-header .brand-mark { --mark-size: 34px; }
  .fpsite-header .brand__name { font-size: 23px; }
  .fpsite-nav { display: none; }
  .fpsite-header__phone { display: flex; }
  .fpsite-footer { flex-direction: column; padding: 24px 16px 30px; }
  .fphome__hero { padding: 28px 16px 36px; gap: 28px; }
  .fphome__title { font-size: 36px; }
  .fphome__lead { font-size: 16px; }
  .fphome__ctas { flex-direction: column; }
  .fphome__reader, .fphome__genius { padding: 16px; }
  .fphome__sentence { font-size: 23px; }
  .fphome__sentence[dir="rtl"] { font-size: 25px; }
  .fphome__part-text { font-size: 19px; }
  .fphome__section { padding: 0 16px 36px; }
  .fphome__section--pillars, .fphome__section--first { padding-top: 36px; }
  .fphome__h2 { font-size: 30px; }
  .fphome__h2--sm { font-size: 28px; }
  .fphome__h3 { font-size: 23px; }
  .fphome__langs, .fphome__plans { grid-template-columns: minmax(0, 1fr); }
  .fphome__teach { padding: 24px 18px; }
  .fphome__trust { padding: 22px 16px; }
  .fphome__trust ul { justify-content: flex-start; }
}
/* The Arabic interface: its own sans for headings (InterfaceLocale's fonts), a little smaller and roomier. */
html[lang="ar"] .fphome__title { font-size: 46px; line-height: 1.4; letter-spacing: 0; }
html[lang="ar"] .fphome__h2, html[lang="ar"] .fphome__h3 { letter-spacing: 0; line-height: 1.3; }
@media (max-width: 760px) { html[lang="ar"] .fphome__title { font-size: 31px; } }

/* Dark (design "Home v2", dark frames): the home page and its header and footer follow the device's setting. The
   demo cards keep each language's own light reading surface; buttons keep FluentPlex's indigo, links and jade turn
   lighter (all at least 4.5:1); the teachers band becomes a raised card. Other FluentPlex pages stay light for now. */
@media (prefers-color-scheme: dark) {
  body:has(.fphome) {
    --paper: #17182B; --card: #24263F; --sand: #2C2E4A; --sand-hover: #34365A; --field: #24263F;
    --line: #383B58; --line-soft: #2C2E4A; --line-mid: #4A4D6E; --line-strong: #4A4D6E; --line-dashed: #6B6E8A;
    --ink: #FFFFFF; --text: #FFFFFF; --text-body: #D3D0DA; --text-muted: #B8BAD0; --text-faint: #8E90A8;
    --clay: #4A3FD6; --clay-hover: #5A50E0; --clay-soft: #2C2A5A; --link: #A9A3FF;
    --green: #3FC2A8; --green-deep: #3FC2A8; --green-soft: #173B39;
    --band: #24263F; --band-line: #383B58;
    background: var(--paper); color: var(--ink); color-scheme: dark;
  }
  body:has(.fphome) .fphome__btn--outline:hover { background: #FFFFFF; color: #17182B; }
  body:has(.fphome) .fpsite-nav__link:hover { color: #FFFFFF; }
  body:has(.fphome) .fphome__link, body:has(.fphome) .fphome__lang-start { color: var(--link); }
}

/* A language card's "Dictionary · Library", under what it offers */
.fphome__lang-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--text-faint); }
.fphome__lang-link { display: inline-flex; align-items: center; min-height: 24px; font-weight: 500; color: var(--text-muted); text-decoration: none; }
.fphome__lang-link:hover { color: var(--ink); text-decoration: underline; }

/* "Try Arabic →" under a language card's Start */
.fphome__lang-try { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 14px; font-weight: 500;
                    color: var(--text-muted); text-decoration: none; }
.fphome__lang-try:hover { color: var(--ink); text-decoration: underline; }

/* The narrated live-lesson demo, below the pillars */
.fphome__video { max-width: 960px; margin-inline: auto; }
.fphome__video-lead { margin: 0 0 16px; }


/* screens/fluentplex-pricing.css */
/* FluentPlex's pricing (sites/fluentplex/pages/pricing; design "FluentPlex Pricing"), in its colors
   (Site::FLUENTPLEX_THEME): the period switch, Free and Pro, the comparison (a list of cards on phones), add-ons,
   questions and a closing band. */
.fppr { background: var(--paper); color: var(--ink); }
.fppr__hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 48px 36px; text-align: center; }
.fppr__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.fppr__lead { margin: 0; max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.fppr__periods { display: flex; gap: 2px; margin-top: 6px; padding: 4px; background: var(--sand); border-radius: 999px; }
.fppr__period {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
.fppr__period:hover { text-decoration: none; color: var(--ink); }
.fppr__period[aria-checked="true"] { background: var(--ink); color: var(--text-on-dark); }
.fppr__period:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.fppr__save { padding: 2px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); font-size: 12px; font-weight: 700; }
.fppr__period[aria-checked="true"] .fppr__save { background: var(--green-bright); color: var(--ink); }

.fppr__plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; max-width: 1280px; margin: 0 auto; padding: 0 48px 20px; }
.fppr__plan { display: flex; flex-direction: column; gap: 16px; padding: 30px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.fppr__plan--pro { border: 2px solid var(--clay); box-shadow: 0 24px 50px -30px rgba(74, 63, 214, .55); }
.fppr__plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fppr__plan-name { margin: 0; font-size: 20px; font-weight: 700; }
.fppr__your-plan { padding: 3px 11px; border-radius: 999px; background: var(--sand); font-size: 12px; font-weight: 700; }
.fppr__tag { padding: 4px 12px; border-radius: 999px; background: var(--clay); color: var(--text-on-accent); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.fppr__price-block { display: flex; flex-direction: column; gap: 4px; }
.fppr__price-block[hidden], .fppr__buy[hidden], .fppr__cta-actions [hidden] { display: none; }
.fppr__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fppr__amount { font-family: var(--font-serif); font-weight: 500; font-size: 52px; line-height: 1; }
.fppr__per { font-size: 15px; color: var(--text-muted); }
.fppr__small { font-size: 14px; color: var(--text-body); }
.fppr__plan-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.fppr__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fppr__ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.fppr__ticks li::before { content: "✓"; color: var(--green); font-weight: 700; }
.fppr__plan-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.fppr__buy { display: flex; flex-direction: column; gap: 10px; }
.fppr__btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px;
  border: 1.5px solid transparent; font-size: 16px; font-weight: 600; text-decoration: none;
}
.fppr__btn:hover { text-decoration: none; }
.fppr__btn--primary { background: var(--clay); color: var(--text-on-accent); }
.fppr__btn--primary:hover { background: var(--clay-hover); color: var(--text-on-accent); }
.fppr__btn--outline { border-color: var(--ink); color: var(--ink); min-height: 50px; }
.fppr__btn--outline:hover { background: var(--ink); color: var(--text-on-dark); }
.fppr__btn--light { background: var(--card); color: var(--ink); }
.fppr__btn--light:hover { color: var(--ink); background: var(--sand); }
.fppr__btn--on-dark { border-color: var(--text-on-dark); color: var(--text-on-dark); }
.fppr__btn--on-dark:hover { color: var(--text-on-dark); background: var(--ink-raised); }
.fppr__label { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; background: var(--sand); color: var(--text-body); font-size: 15px; font-weight: 600; }
.fppr__fine { font-size: 13px; line-height: 1.5; color: var(--text-body); }
.fppr__muted { font-size: 13px; color: var(--text-muted); }
.fppr__have { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--green-soft); border: 1.5px solid var(--green); border-radius: 16px; }
.fppr__have-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--green-deep); }
.fppr__have-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #FFFFFF; font-size: 13px; }
.fppr__have-text { font-size: 14px; line-height: 1.5; }
.fppr__have-link { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--clay); }

.fppr__tutor {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1184px; margin: 0 auto 12px; padding: 14px 18px;
  background: var(--clay-soft); border-radius: 16px; font-size: 15px; line-height: 1.5;
}
.fppr__tutor { width: calc(100% - 96px); }
.fppr__tutor-mark { font-family: var(--font-serif); font-size: 22px; color: var(--clay); }
.fppr__tutor-text { flex: 1; min-width: 220px; }
.fppr__tutor-link { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--clay); }

.fppr__section { display: flex; flex-direction: column; gap: 18px; max-width: 1280px; margin: 0 auto; padding: 56px 48px; }
.fppr__section--tight { padding-top: 0; }
.fppr__section-head { display: flex; flex-direction: column; gap: 6px; }
.fppr__section-lead { font-size: 15px; color: var(--text-body); }
.fppr__h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.fppr__h2--sm { font-size: 36px; line-height: 1.1; }
.fppr__table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.fppr__table { width: 100%; border-collapse: collapse; }
.fppr__table thead th { padding: 14px 18px; background: var(--sand); text-align: var(--start); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-body); }
.fppr__table thead th:first-child { padding-inline-start: 22px; }
.fppr__table .fppr__pro-head { color: var(--clay); }
.fppr__table tbody tr { border-top: 1px solid var(--line-soft); }
.fppr__table tbody th { padding: 14px 22px; text-align: var(--start); font-weight: 400; }
.fppr__table td { width: 260px; padding: 14px 18px; font-size: 15px; }
.fppr__table td.is-none { color: var(--text-muted); }
.fppr__pro-cell { font-weight: 600; background: #FAFAFE; }
.fppr__feature { display: block; font-size: 16px; font-weight: 600; }
.fppr__feature-sub { display: block; font-size: 13px; color: var(--text-muted); }
.fppr__tick { color: var(--green); font-weight: 700; }
.fppr__addons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fppr__addon { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.fppr__addon-name { margin: 0; font-size: 17px; font-weight: 700; }
.fppr__packs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fppr__packs li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 15px; }
.fppr__pack-price { font-family: var(--font-serif); font-size: 24px; line-height: 1; }
.fppr__faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px 48px; align-items: start; }
.fppr__questions { border-top: 1px solid var(--line-mid); }
.fppr__question { border-bottom: 1px solid var(--line-mid); }
.fppr__question summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 10px 0;
  list-style: none; cursor: pointer; font-size: 17px; font-weight: 600;
}
.fppr__question summary::-webkit-details-marker { display: none; }
.fppr__question-mark::before { content: "+"; font-size: 20px; color: var(--clay); }
.fppr__question[open] .fppr__question-mark::before { content: "−"; }
.fppr__question p { margin: 0 0 16px; max-width: 680px; font-size: 15px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.fppr__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px 48px; background: var(--ink); color: var(--text-on-dark); text-align: center; }
.fppr__cta-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Phones (design 390): Pro first, the comparison as a list of cards, everything stacked. */
@media (max-width: 760px) {
  .fppr__hero { align-items: flex-start; padding: 32px 16px 22px; text-align: var(--start); }
  .fppr__title { font-size: 42px; }
  .fppr__lead { font-size: 17px; }
  .fppr__plans { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
  .fppr__plan { padding: 22px 20px; }
  .fppr__plan--free { order: 1; }
  .fppr__amount { font-size: 44px; }
  .fppr__tutor, .fppr__teacher-wrap { width: calc(100% - 32px); }
  .fppr__section { padding: 40px 16px; }
  .fppr__section--tight { padding-top: 0; }
  .fppr__h2 { font-size: 32px; }
  .fppr__h2--sm { font-size: 30px; }
  .fppr__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fppr__table, .fppr__table tbody, .fppr__table tr, .fppr__table th, .fppr__table td { display: block; width: auto; }
  .fppr__table tbody tr { padding: 14px 16px; }
  .fppr__table tbody tr:first-child { border-top: none; }
  .fppr__table tbody th { padding: 0 0 8px; }
  .fppr__table td { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 2px 0; background: none; }
  .fppr__table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); }
  .fppr__table td.fppr__pro-cell::before { color: var(--clay); font-weight: 700; }
  .fppr__addons, .fppr__faq { grid-template-columns: minmax(0, 1fr); }
  .fppr__cta { padding: 44px 20px; }
  .fppr__cta-actions { flex-direction: column; width: 100%; }
}
.fppr__teacher-wrap { width: calc(100% - 96px); max-width: 1184px; margin: 28px auto 0; }
@media (max-width: 760px) { .fppr__teacher-wrap { width: calc(100% - 32px); } }


/* screens/fluentplex-teachers.css */
/* FluentPlex's page for teachers (sites/fluentplex/pages/teachers; design "FluentPlex Teachers"), in its colors
   (Site::FLUENTPLEX_THEME). The example classes take their language's colors (--c-…, FluentplexHelper). Buttons,
   headings and the closing band are the pricing page's (fluentplex-pricing.css). */
.fpteach { background: var(--paper); color: var(--ink); }
.fpteach p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.fpteach__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 60px 48px 64px; }
.fpteach__hero-copy { display: flex; flex-direction: column; gap: 20px; }
.fpteach__pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 10px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-body);
}
.fpteach__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.fpteach__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.fpteach__title em { color: var(--green); }
.fpteach .fpteach__lead { max-width: 560px; font-size: 19px; text-wrap: pretty; }
.fpteach__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fpteach__muted { font-size: 14px; color: var(--text-muted); }
.fpteach__muted--sm { font-size: 13px; }
.fpteach__school-note { margin: 0; font-size: 15px; color: var(--text-muted); }
.fpteach__school-note a { color: var(--text); font-weight: 600; }

.fpteach__examples { display: flex; flex-direction: column; gap: 14px; }
.fpteach__class {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 20px; color: var(--c-ink);
}
.fpteach__class-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.fpteach__class-name { display: flex; flex-direction: column; gap: 2px; }
.fpteach__class-lang { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-accent); }
.fpteach__class-title { font-size: 18px; font-weight: 700; }
.fpteach__join { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--c-chip); border-radius: 10px; font-size: 13px; }
.fpteach__join strong, .fpteach__mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: 1.5px; }
.fpteach__join strong { font-size: 15px; }
.fpteach__assignment { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 14px; }
.fpteach__kind { padding: 2px 8px; background: var(--c-chip); border-radius: 6px; font-size: 12px; font-weight: 700; }
.fpteach__reading { font-family: var(--c-title-font); font-size: 18px; line-height: 1.6; font-weight: 600; }
.fpteach__range { color: var(--c-muted); }
.fpteach__students { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fpteach__student { display: grid; grid-template-columns: 80px minmax(0, 1fr) 110px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14px; }
.fpteach__student-name { font-weight: 600; }
.fpteach__bar { display: block; height: 8px; border-radius: 8px; background: var(--c-line); overflow: hidden; }
.fpteach__bar > span { display: block; height: 100%; background: var(--c-ink); }
.fpteach__status { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-weight: 700; white-space: nowrap; }
.fpteach__student--done .fpteach__bar > span { background: var(--c-good); }
.fpteach__student--done .fpteach__status { color: var(--c-good); }
.fpteach__student--behind { background: var(--c-warn-bg); }
.fpteach__student--behind .fpteach__bar > span { background: var(--c-warn); }
.fpteach__student--behind .fpteach__status { color: var(--c-warn); }

.fpteach__section { display: flex; flex-direction: column; gap: 22px; max-width: 1280px; margin: 0 auto; padding: 60px 48px; }
.fpteach__section--ruled { border-top: 1px solid var(--line); max-width: none; }
.fpteach__section--ruled > * { width: 100%; max-width: 1184px; margin: 0 auto; }
.fpteach__section--top0 { padding-top: 0; }
.fpteach__h2 { font-size: 38px; line-height: 1.08; letter-spacing: -.015em; }
.fpteach__h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 25px; line-height: 1.1; }
.fpteach__h3--lg { font-size: 27px; }
.fpteach__steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fpteach__step, .fpteach__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.fpteach__step-n { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--clay); color: var(--text-on-accent); font-weight: 700; }

.fpteach__features { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.fpteach__features-copy { display: flex; flex-direction: column; gap: 16px; }
.fpteach__list { list-style: none; margin: 0; padding: 0; }
.fpteach__list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.fpteach__list li > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.fpteach__list strong { font-size: 16px; color: var(--ink); }
.fpteach__tick { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--green); }
.fpteach__student-page { gap: 14px; border-radius: 20px; padding: 20px 22px; }
.fpteach__card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fpteach__card-name { display: flex; flex-direction: column; gap: 2px; }
.fpteach__label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.fpteach__card-title { font-size: 19px; font-weight: 700; }
.fpteach__chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.fpteach__chart span { flex: 1; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--green-bright); }
.fpteach__chart span.is-today { background: var(--clay); }
.fpteach__chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.fpteach__stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fpteach__stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 12px; background: var(--paper); border-radius: 12px; }
.fpteach__stats dt { font-size: 13px; color: var(--text-muted); }
.fpteach__stats dd { margin: 0; font-family: var(--font-serif); font-size: 26px; line-height: 1; }
.fpteach__privacy { display: flex; gap: 8px; padding: 10px 12px; background: var(--clay-soft); border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.fpteach__privacy > span { font-weight: 700; color: var(--clay); }

.fpteach__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fpteach__two .fpteach__card { gap: 10px; }
.fpteach__example { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding: 10px 12px; background: var(--paper); border-radius: 12px; font-size: 14px; }
.fpteach__example .fpteach__mono { font-weight: 700; letter-spacing: 0; }
.fpteach__archived { padding: 1px 9px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 700; }

.fpteach__band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; padding: 40px; background: var(--ink); color: var(--text-on-dark); border-radius: 22px; }
.fpteach__band-copy { display: flex; flex-direction: column; gap: 14px; }
.fpteach__codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fpteach__codes li { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--ink-line-strong); }
.fpteach__codes strong { font-size: 16px; }
.fpteach__codes li > span, .fpteach__on-dark-muted { font-size: 14px; line-height: 1.5; color: var(--text-on-dark-muted); }
.fpteach__band-link { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--green-bright); }
.fpteach__band-link:hover { color: var(--text-on-dark); }
.fpteach__wallet { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--ink-raised); border: 1px solid var(--ink-line-strong); border-radius: 16px; font-size: 13px; }
.fpteach__wallet-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fpteach__code { font-size: 20px; font-weight: 700; letter-spacing: 2px; }
.fpteach__credits { display: flex; flex-direction: column; gap: 6px; }
.fpteach__meter { display: block; height: 8px; border-radius: 8px; background: var(--ink-line-strong); overflow: hidden; }
.fpteach__meter > span { display: block; height: 100%; background: var(--green-bright); }
.fpteach__credit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fpteach__credit-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 8px; border-top: 1px solid var(--ink-line-strong); }
.fpteach__ready, .fpteach__credit-list .fpteach__on-dark-muted { white-space: nowrap; }
.fpteach__ready { font-weight: 700; color: var(--green-bright); }
.fpteach__wallet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fpteach__chip { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--text-on-dark); border-radius: 999px; font-size: 14px; font-weight: 600; }
.fpteach__chip--light { background: var(--card); color: var(--ink); border-color: var(--card); }

.fpteach__school { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 30px; border: 1.5px solid var(--ink); border-radius: 20px; }
.fpteach__school > div { display: flex; flex-direction: column; gap: 6px; }
.fpteach__school-link { min-height: 48px; padding: 0 22px; font-size: 15px; white-space: nowrap; }
.fpteach__cta-title { max-width: 720px; text-wrap: balance; }
.fpteach .fpteach__cta-text { max-width: 560px; color: var(--text-on-dark-muted); }

/* Phones (design 390): everything stacks; student rows keep name, bar and status on one line. */
@media (max-width: 860px) {
  .fpteach__hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 16px 36px; }
  .fpteach__title { font-size: 42px; }
  .fpteach .fpteach__lead { font-size: 17px; }
  .fpteach__actions { flex-direction: column; }
  .fpteach__class, .fpteach__student-page { padding: 16px; }
  .fpteach__student { grid-template-columns: 62px minmax(0, 1fr) 92px; }
  .fpteach__section { padding: 40px 16px; }
  .fpteach__section--top0 { padding-top: 0; }
  .fpteach__h2 { font-size: 30px; }
  .fpteach__steps, .fpteach__features, .fpteach__two, .fpteach__band { grid-template-columns: minmax(0, 1fr); }
  .fpteach__chart { gap: 3px; }
  .fpteach__band { padding: 24px 18px; }
  .fpteach__school { flex-direction: column; align-items: stretch; padding: 20px; }
  .fpteach__school-link { white-space: normal; text-align: center; }
}

/* Class units and the Teacher plan */
.fpteach__unit-parts { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.fpteach__plan { border: 1.5px solid var(--ink); }
.fpteach__plan-price { margin: 0; font-size: 15px; color: var(--text-muted); }
.fpteach__plan-price strong { font-family: var(--font-serif); font-weight: 400; font-size: 34px; color: var(--ink); }
.fpteach__list--plain { margin: 0; }
.fpteach__plan-btn { align-self: flex-start; margin-top: auto; }


/* screens/for-schools.css */
/* For schools (pages/schools): the seat types and prices table and the inquiry form. The rest of the page is styled
   like the teachers page (fluentplex-teachers.css). */
.for-schools__table-wrap { overflow-x: auto; }
.for-schools__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.for-schools__table th, .for-schools__table td { padding: 12px 10px; text-align: start; border-bottom: 1px solid var(--line-soft, rgba(0, 0, 0, 0.1)); }
.for-schools__table thead th { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.for-schools__table tbody th { font-weight: 600; }
.for-schools__inquiry { padding-block: 28px 48px; }

@media (max-width: 640px) {
  .for-schools__table thead { display: none; }
  .for-schools__table tr { display: block; padding-block: 10px; border-bottom: 1px solid var(--line-soft, rgba(0, 0, 0, 0.1)); }
  .for-schools__table th, .for-schools__table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; }
  .for-schools__table td::before { content: attr(data-label); color: var(--text-muted); font-size: 13px; }
}


/* screens/genius.css */
/* Genius: the AI conversation tutor (topic picker, talk, review) */

.genius { display: flex; flex-direction: column; gap: 20px; max-width: 1240px; }

.genius__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.genius__intro { display: flex; flex-direction: column; gap: 6px; }
.genius__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
}
.genius__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.genius__title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.genius__title { margin: 0; }
.genius__title { font-size: 44px; line-height: 1; }
.genius__title-ar { font-size: 26px; color: var(--green); }
.genius__subtitle { font-size: 14px; color: var(--text-muted); }
.genius__lead { margin: 0; font-size: 15px; color: var(--text-body); max-width: 640px; line-height: 1.5; }
.genius__allowance {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* Topic box and settings above the conversation */
.genius__controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: relative; z-index: 30; }
.genius__find { flex: 1 1 420px; min-width: 0; position: relative; }
.genius__search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding-block: 4px; padding-inline: 18px 6px;
  color: var(--text-muted);
}
.genius__find.is-open .genius__search-box, .genius__search-box:focus-within { border-color: var(--ink); }
.genius__query { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; padding: 9px 0; outline: none; color: var(--ink); }
.genius__browse { white-space: nowrap; }
.genius__dropdown {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 30px 60px -24px rgba(28, 35, 33, .4);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(70vh, 560px);
  overflow: auto;
}
.genius__dropdown[hidden] { display: none; }
.genius__custom-option {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: var(--start);
  font-size: 15px;
  font-weight: 600;
}
.genius__custom-option[hidden] { display: none; }
.genius__any-topic {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sand-hover);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.genius__any-topic svg { color: var(--clay); flex-shrink: 0; }
.genius__any-topic[hidden] { display: none; }
.genius__custom-enter { font-size: 13px; color: var(--peach); font-weight: 400; }
.genius__category { padding: 6px 13px; font-size: 13px; font-weight: 600; }
.genius__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.genius-option {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-align: var(--start);
}
.genius-option[hidden] { display: none; }
.genius-option:hover, .genius-option:focus-visible { border-color: var(--ink); }
.genius-option__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.genius-option__title { font-size: 15px; font-weight: 600; }
.genius-option__meta { font-size: 11px; opacity: .7; }
.genius-option__ar { font-size: 19px; line-height: 1.4; flex-shrink: 0; }
.genius__no-topics { margin: 0; font-size: 14px; }

.genius__settings { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.genius__switch { display: flex; gap: 2px; background: var(--sand); border-radius: var(--radius-pill); padding: 3px; }
.genius__switch-option {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
}
.genius__switch-option[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.genius__chip { padding: 7px 12px; font-size: 13px; font-weight: 600; }

/* One-tap topics in an open conversation */
.genius__quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.genius__quick:empty { display: none; }
.genius__quick-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.genius__quick-topic {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  gap: 8px;
  align-items: center;
}
.genius__quick-topic:hover { border-color: var(--ink); }
.genius__quick-ar { font-size: 17px; font-weight: 400; color: var(--green); }
.genius__quick-all { background: none; border: 0; padding: 6px 4px; font-size: 14px; font-weight: 600; color: var(--clay); }

/* Talk */
.genius__talk { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.genius__chat-col {
  flex: 1 1 600px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: calc(100vh - 230px);
  min-height: 520px;
}
.genius__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.genius__bar-topic { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.genius__bar-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.genius__bar-title { font-family: var(--font-serif); font-size: 24px; line-height: 1; }
.genius__bar-ar { font-size: 21px; color: var(--green); }
.genius__bar-btn { padding: 6px 14px; font-size: 13px; }
.genius__bar-btn.is-disabled { opacity: .5; cursor: default; }

.genius__chat {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.genius__messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.genius__busy { margin: 0; font-size: 13px; color: var(--text-muted); padding-inline-start: 42px; }

.gmsg { display: flex; gap: 10px; align-items: flex-start; max-width: 82%; }
.gmsg--user {
  align-self: flex-end;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: var(--ink);
  color: var(--paper);
  border-start-start-radius: 16px; border-start-end-radius: 16px; border-end-end-radius: 4px; border-end-start-radius: 16px;
  padding: 12px 16px;
}
.gmsg--user.is-pending { opacity: .7; }
.gmsg__text { font-family: var(--font-arabic), var(--font-sans); font-size: 21px; line-height: 1.55; }
.gmsg__voice { font-size: 11px; opacity: .7; }
.gmsg--genius { align-self: flex-start; }
.gmsg__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.gmsg__bubble {
  background: var(--sand);
  border-start-start-radius: 4px; border-start-end-radius: 16px; border-end-end-radius: 16px; border-end-start-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.gmsg__ar { margin: 0; font-size: 26px; line-height: 1.75; }
.gmsg__word {
  font: inherit;
  color: inherit;
  background: var(--clay-soft);
  border: 0;
  border-bottom: 2px solid var(--clay);
  border-radius: 4px;
  padding: 0 2px;
  cursor: pointer;
}
.gmsg__word:hover, .gmsg__word:focus-visible { background: var(--line); }
.gmsg__en { display: none; margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-body); }
.show-english .gmsg:not(.is-flipped) .gmsg__en, .genius:not(.show-english) .gmsg.is-flipped .gmsg__en { display: block; }
.gmsg__tip { margin: 0; font-size: 13px; line-height: 1.45; color: var(--green); border-top: 1px solid var(--line); padding-top: 6px; }
.gmsg__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gmsg__play { background: var(--line); border: 0; border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink); }
.gmsg__flip {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.gmsg__flip-hide, .show-english .gmsg.is-flipped .gmsg__flip-hide { display: none; }
.show-english .gmsg:not(.is-flipped) .gmsg__flip-hide, .genius:not(.show-english) .gmsg.is-flipped .gmsg__flip-hide { display: inline; }
.show-english .gmsg:not(.is-flipped) .gmsg__flip-show, .genius:not(.show-english) .gmsg.is-flipped .gmsg__flip-show { display: none; }

.genius__peek {
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.genius__peek[hidden] { display: none; }
.genius__peek-ar { font-size: 24px; }
.genius__peek-en { font-size: 14px; flex: 1; }
.genius__peek-btn { background: var(--ink-raised); border: 0; border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--paper); }
.genius__peek-save { background: var(--peach); color: var(--ink); font-weight: 700; }
.genius__peek-close { background: none; border: 0; color: var(--text-on-dark-muted); font-size: 16px; }

.genius__suggestions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.genius__suggestions:empty { display: none; }
.genius__suggestions-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.genius__suggestion {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  gap: 8px;
  align-items: center;
}
.genius__suggestion:hover { border-color: var(--ink); }
.genius__suggestion-en { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }

.genius__locked {
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.45;
}
.genius__locked-btn { background: var(--peach); color: var(--ink); font-weight: 700; }
.genius__voice {
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px 16px;
}
.genius__typing { display: flex; gap: 8px; }
.is-voice .genius__voice { display: flex; }
.is-voice .genius__composer, .is-voice .genius__suggestions { display: none; }
/* A live voice talk: the mic pulses while Genius listens, glows while it speaks. */
.genius__voice[data-state="listening"] .genius__mic { background: var(--green); animation: genius-listening 1.6s ease-in-out infinite; }
.genius__voice[data-state="speaking"] .genius__mic { background: var(--green); box-shadow: 0 0 0 6px var(--peach); }
.genius__voice[data-state="connecting"] .genius__mic { background: var(--line-dashed); }
@keyframes genius-listening { 0%, 100% { box-shadow: 0 0 0 0 var(--green-soft); } 50% { box-shadow: 0 0 0 9px var(--green-soft); } }
@media (prefers-reduced-motion: reduce) { .genius__voice[data-state="listening"] .genius__mic { animation: none; box-shadow: 0 0 0 6px var(--green-soft); } }
.genius__buy { display: flex; gap: 6px; flex-wrap: wrap; }
.genius__buy[hidden] { display: none; }
.genius__voice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.genius__voice-label { font-size: 14px; font-weight: 700; }
.genius__transcript { font-family: var(--font-arabic), var(--font-sans); font-size: 19px; color: var(--text-body); min-height: 26px; }
.genius__mic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--text-on-accent);
  border: 0;
  font-size: 20px;
  flex-shrink: 0;
}
.genius__mic--big { width: 60px; height: 60px; font-size: 24px; }
.genius__input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--ink);
  background: var(--card);
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  font-size: 18px;
  font-family: var(--font-arabic), var(--font-sans);
  outline: none;
}
.genius__send { padding: 13px 24px; font-size: 15px; }
.genius__error { margin: 0; font-size: 13px; color: var(--clay); font-weight: 600; }
.genius__error:empty { display: none; }

/* Topic words beside the chat */
.genius__words {
  flex: 0 1 300px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.genius__words-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.genius__words-title { margin: 0; font-size: 15px; font-weight: 700; }
.genius__words-progress { height: 6px; }
.genius__words-progress .progress__bar { background: var(--green); transition: width .3s; }
.genius__word-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.genius__word { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); }
.genius__word-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.genius__word.is-met .genius__word-mark { background: var(--peach); border-color: var(--peach); }
.genius__word.is-used .genius__word-mark { background: var(--green); border-color: var(--green); }
.genius__word-btn {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-align: var(--start);
}
.genius__word-en { font-size: 13px; color: var(--text-muted); }
.genius__word.is-met .genius__word-en, .genius__word.is-used .genius__word-en { color: var(--ink); }
.genius__word-ar { font-size: 20px; line-height: 1.4; }
.genius__words-none { margin: 0; font-size: 13px; line-height: 1.45; }

/* Preparing a topic of the student's own (_preparing, genius-talk#preparing) */
.genius__spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--clay);
  border-radius: 50%;
  animation: genius-spin .8s linear infinite;
  flex-shrink: 0;
}
.genius__search-spinner { width: 16px; height: 16px; display: none; }
.genius__find.is-preparing .genius__search-spinner { display: inline-block; }
.genius__find.is-preparing .genius__search-icon { display: none; }
.genius__find.is-preparing .genius__query { cursor: progress; }
.genius.is-preparing :is(.genius__quick, .genius__suggestions, .genius__peek, .genius__error, .genius__buy) { display: none; }
.genius.is-preparing :is(.genius__composer, .genius__voice, .genius__nudge, .genius__bar .btn) { opacity: .55; }
.gmsg.genius-prep { width: min(380px, 100%); }
.genius-prep__bubble { flex: 1; min-width: 0; gap: 12px; padding: 14px 18px; }
.genius-prep__title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.genius-prep__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.genius-prep__step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.genius-prep__step.is-done, .genius-prep__step.is-current { color: var(--ink); }
.genius-prep__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.genius-prep__step.is-current .genius-prep__mark { border-color: var(--clay); }
.genius-prep__step.is-done .genius-prep__mark { background: var(--green); border-color: var(--green); }
.genius-prep__step.is-done .genius-prep__mark::after { content: "✓"; }
.genius-prep__note { margin: 0; font-size: 12px; color: var(--text-muted); }
.genius-prep__words { display: flex; flex-direction: column; gap: 8px; }
.genius-prep__words-label { font-size: 13px; font-weight: 600; color: var(--green); }
.genius-prep__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); }
.genius-prep__bar { display: inline-block; height: 12px; border-radius: 6px; background: var(--line); animation: genius-pulse 1.4s ease-in-out infinite; }
.genius-prep__bar--ar { height: 18px; }
@keyframes genius-spin { to { transform: rotate(360deg); } }
@keyframes genius-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .genius__spinner { animation: genius-spin 2.4s linear infinite !important; } }

/* Review */
.genius__review { max-width: 880px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.genius__review-hero { background: var(--green); color: var(--paper); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.genius__review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.genius__review-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1; }
.genius__review-ar { font-size: 30px; color: var(--peach); }
.genius__stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.genius__stat { background: var(--green-deep); border-radius: 14px; padding: 14px; display: flex; flex-direction: column-reverse; gap: 2px; }
.genius__stat dt { font-size: 13px; color: var(--green-soft); }
.genius__stat dd { margin: 0; font-family: var(--font-serif); font-size: 36px; line-height: 1; }
.genius__review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.genius__review-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.genius__review-card-title { margin: 0; font-size: 15px; font-weight: 700; }
.genius__met { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.genius__met-word { background: var(--green-soft); border-radius: 10px; padding: 4px 10px; display: flex; gap: 8px; align-items: center; }
.genius__met-word .ar { font-size: 20px; }
.genius__met-word span[dir="ltr"] { font-size: 12px; color: var(--green); }
.genius__left { margin: 4px 0 0; font-size: 13px; }
.genius__tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.genius__tips li { font-size: 14px; line-height: 1.5; border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 8px; }
.genius__review-actions { justify-content: center; }

/* "What brings you to Arabic?", asked once, and the topics it suggests. */
#genius-reasons, #genius-suggested { display: contents; }
.genius-reasons {
  background: var(--card);
  border: 1.5px solid var(--peach);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.genius-reasons__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.genius-reasons__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
.genius-reasons__any { font-weight: 400; font-size: 14px; color: var(--text-muted); }
.genius-reasons__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.genius-reasons__saved { font-size: 13px; color: var(--green); font-weight: 600; }
.genius-reasons__skip-form { display: contents; }
.genius-reasons__skip {
  background: none; border: 0; font: inherit; font-size: 14px; color: var(--text-muted);
  min-height: 44px; padding: 0 4px; text-decoration: underline; cursor: pointer;
}
.genius-reasons__skip:hover { color: var(--ink); }
.genius-reasons__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.genius-reasons__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; font-weight: 600; cursor: pointer;
}
.genius-reasons__chip:hover { border-color: var(--ink); }
.genius-reasons__chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* How Genius should talk to you (genius/_address): the two forms, then Genius's voice. */
.genius-address__note { margin: -4px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.genius-address__ar { font-size: 18px; color: var(--ink); unicode-bidi: isolate; }
.genius-address__voice { align-items: center; }
.genius-address__label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-inline-end: 4px; }

.genius-suggested { display: flex; flex-direction: column; gap: 10px; }
.genius-suggested__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.genius-suggested__title { margin: 0; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clay); font-weight: 700; }
.genius-suggested__why { font-size: 13px; color: var(--text-muted); }
.genius-suggested__why a { font-weight: 600; }
.genius-suggested__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.genius-suggested__topic {
  background: var(--ink); color: var(--paper); border: 0; border-radius: 16px; padding: 16px;
  text-align: var(--start); display: flex; flex-direction: column; gap: 4px; font: inherit; cursor: pointer;
}
.genius-suggested__topic:hover { background: var(--ink-raised); }
.genius-suggested__ar { font-size: 22px; line-height: 1.5; color: var(--peach); align-self: flex-start; }
.genius-suggested__en { font-size: 16px; font-weight: 700; line-height: 1.25; }
.genius-suggested__reason { font-size: 12px; color: var(--text-on-dark-muted); }

@media (max-width: 900px) {
  .genius-suggested__list { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 700px) {
  .genius-reasons { padding: 16px; gap: 10px; }
  .genius-reasons__head { align-items: flex-start; }
  .genius-reasons__title { font-size: 16px; }
  .genius-reasons__any { display: block; font-size: 13px; margin-top: 2px; }
  .genius-reasons__chip { padding: 10px 14px; }
  .genius-suggested__topic { padding: 12px; min-height: 44px; }
  .genius-suggested__ar { font-size: 18px; }
  .genius-suggested__en { font-size: 15px; }
  .genius-suggested__reason { display: none; }
}

@media (max-width: 700px) {
  /* The talk screen keeps the conversation and the reply box on screen. */
  .genius--talk .genius__header { display: none; }
  .genius__chat-col { height: calc(100dvh - 120px); min-height: 440px; }
  .genius__chat { padding: 14px; }
  .genius__suggestions { flex-wrap: nowrap; overflow-x: auto; }
  .genius__suggestion { flex-shrink: 0; font-size: 16px; white-space: nowrap; }
  .genius__suggestion-en { display: none; }
  .gmsg { max-width: 92%; }
  .gmsg__ar { font-size: 22px; }
  .genius__words { flex-basis: 100%; }
  .genius__send { padding: 13px 16px; }
}
/* The learner's words while Genius hears them, before the line is saved. */
.gmsg--user.is-pending { opacity: .7; }


/* screens/goals.css */
/* Reading goals: the setup sheet, the Today card, the goal's page. */
.goal-cover { border-radius: 10px; background: var(--green); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center;
              gap: 4px; padding: 10px; flex-shrink: 0; text-align: center; font-family: var(--font-arabic); }
.goal-cover--sm { width: 56px; height: 76px; border-radius: 7px; font-size: 12px; line-height: 1.5; padding: 4px; }
.goal-cover--md { width: 96px; height: 132px; font-size: 18px; line-height: 1.6; }
.goal-cover--lg { width: 120px; align-self: stretch; font-size: 22px; line-height: 1.6; padding: 12px; }
.goal-cover__rule { width: 24px; height: 1px; background: var(--peach); }
.goal-cover__by { font-family: var(--font-sans); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--peach); }
.goal-pill { border-radius: var(--radius-pill); padding: 5px 14px; font-size: 14px; font-weight: 700; white-space: nowrap; align-self: flex-start; }
.goal-pill--ahead { background: var(--green-soft); color: var(--green); }
.goal-pill--behind { background: var(--clay-soft); color: var(--clay); }
.goal-pill--paused { background: var(--sand); color: var(--ink-line); }
.goal-chip { display: inline-block; background: var(--sand); border-radius: var(--radius-pill); padding: 0 12px; font-family: var(--font-arabic); font-size: 19px; line-height: 1.9; }
.goal-chip-button { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 14px; min-height: 40px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.goal-chip-button.is-first { border: 1.5px solid var(--ink); font-weight: 600; }

/* The sheet */
#goal_sheet:empty { display: none; }
.goal-sheet { position: fixed; inset: 0; z-index: 60; }
.goal-sheet__backdrop { position: absolute; inset: 0; background: rgba(28, 35, 33, .38); }
.goal-sheet__panel { position: absolute; top: 0; inset-inline-end: 0; bottom: 0; width: min(520px, 100%); background: var(--card); box-shadow: -20px 0 50px -20px rgba(28, 35, 33, .5);
                     display: flex; flex-direction: column; outline: none; }
html[dir="rtl"] .goal-sheet__panel { box-shadow: 20px 0 50px -20px rgba(28, 35, 33, .5); }
.goal-sheet__head { display: flex; justify-content: space-between; align-items: center; padding-block: 18px 4px; padding-inline: 28px 16px; }
.goal-sheet__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; }
.goal-sheet__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; font-size: 22px; color: var(--ink); cursor: pointer; }
.goal-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.goal-form__body { flex: 1; overflow-y: auto; padding: 8px 28px 16px; display: flex; flex-direction: column; gap: 18px; }
.goal-form__book { display: flex; gap: 14px; align-items: center; }
.goal-form__book-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.goal-form__book-text strong { font-size: 17px; }
.goal-form__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goal-form__group legend { font-size: 14px; font-weight: 700; padding: 0; margin-bottom: 8px; }
.goal-form__radio { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 40px; }
.goal-form__radio--wrap { flex-wrap: wrap; }
.goal-form__radio input { width: 20px; height: 20px; accent-color: var(--green); margin: 0; }
.goal-form__to { width: auto; min-height: 40px; padding: 0 12px; font-size: 14px; }
.goal-form__hint { font-size: 12px; color: var(--text-muted); padding-inline-start: 30px; }
.goal-form__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--sand); border-radius: var(--radius-pill); padding: 4px; }
.goal-form__tab { border: 0; background: none; border-radius: var(--radius-pill); min-height: 40px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.goal-form__tab[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.goal-form__pace { display: flex; align-items: center; gap: 12px; }
.goal-form__pace > span:first-child, .goal-form__stepper { flex: 1; }
.goal-form__date { width: 100%; min-height: 48px; border: 1.5px solid var(--green); }
.goal-form__stepper { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid var(--green); border-radius: 12px; padding: 0 6px;
                      min-height: 48px; font-size: 16px; }
.goal-form__stepper[hidden] { display: none; }
.goal-form__stepper button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--sand); font-size: 18px; cursor: pointer; }
.goal-form__calc { font-size: 15px; color: var(--ink-line); white-space: nowrap; }
.goal-form__calc strong { color: var(--ink); }
.goal-form__summary { background: var(--green-soft); border: 1.5px solid var(--green-soft); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.goal-form__summary.is-warn { background: var(--mark); border-color: #E2C48F; }
.goal-form__summary-text { font-family: var(--font-serif); font-size: 24px; line-height: 1.25; }
.goal-form__warn { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-line); }
.goal-form__warn[hidden] { display: none; }
.goal-form__warn strong { color: var(--gold-deep); }
.goal-form__easier { display: flex; gap: 8px; flex-wrap: wrap; }
.goal-form__words { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.goal-form__words[hidden] { display: none; }
.goal-form__chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.goal-form__chips .goal-chip { background: #fff; border: 1px solid var(--line); font-size: 18px; padding: 0 10px; }
.goal-form__foot { border-top: 1px solid var(--line); padding: 16px 28px 20px; display: flex; gap: 10px; align-items: center; }
.goal-form__go { flex: 1; min-height: 50px; }
.goal-form__cancel { padding: 0 14px; min-height: 50px; color: var(--ink-line); text-decoration: underline; }
.goal-form__lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-line); }
.goal-choice { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; cursor: pointer; }
.goal-choice:has(input:checked) { border-color: var(--ink); }
.goal-choice input { margin-top: 3px; accent-color: var(--green); }
.goal-choice > span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.goal-choice .muted { font-size: 13px; }

/* Today's card */
.goal-card { display: flex; gap: 28px; align-items: stretch; padding: 26px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); margin-bottom: 20px; }
.goal-card--paused { background: var(--paper); border-color: var(--line-strong); }
.goal-card--paused .goal-cover { opacity: .55; }
.goal-card--paused .progress__bar { background: var(--text-on-dark-faint); }
.goal-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.goal-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.goal-card__titles { display: flex; flex-direction: column; gap: 4px; }
.goal-card__kicker { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.goal-card__title { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; }
.goal-card__progress { display: flex; flex-direction: column; gap: 6px; }
.goal-card__bar { flex: none; height: 8px; }
.goal-card__sub { font-size: 14px; color: var(--text-body); }
.goal-card__row { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.goal-card__stat { display: flex; flex-direction: column; gap: 2px; }
.goal-card__stat .goal-card__sub { font-size: 13px; }
.goal-card__today { font-size: 20px; font-weight: 700; }
.goal-card__link { font-size: 16px; font-weight: 600; color: var(--clay); }
.goal-card__actions { margin-inline-start: auto; display: flex; gap: 14px; align-items: center; }
.goal-card__actions .goal-card__link { font-size: 14px; }
.goal-card__cta { min-height: 48px; padding: 0 22px; }
.goal-card--done { position: relative; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.goal-card__close-form { position: absolute; top: 8px; inset-inline-end: 10px; margin: 0; }
.goal-card__close { width: 44px; height: 44px; background: none; border: 0; color: inherit; opacity: .7; font-size: 20px; cursor: pointer; }
.goal-card__close:hover { opacity: 1; }
.goal-card__close:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; border-radius: 50%; }
.goal-card__done { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.goal-card__done-text { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.goal-card--done .goal-card__kicker { color: var(--peach); }
.goal-card__done-title { font-family: var(--font-serif); font-size: 40px; line-height: 1.05; }
.goal-card__congrats { font-family: var(--font-arabic); font-size: 24px; color: var(--peach); align-self: flex-start; }
.goal-card__totals { font-size: 15px; color: var(--text-on-dark-muted); }
.goal-card__done-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.goal-card__next { background: var(--peach); color: var(--ink); min-height: 48px; padding: 0 22px; }
.goal-card__share { background: none; border: 1px solid var(--ink-line-strong); color: var(--paper); min-height: 44px; padding: 0 22px; width: 100%; }

/* The goal as a recommendation */
.today__pick.is-goal { border: 1.5px solid var(--green); }
.today__pick-why { align-self: flex-start; background: var(--green-soft); color: var(--green); border-radius: var(--radius-pill); padding: 3px 11px; font-size: 12px; font-weight: 700; }

/* The goal's page */
.goal-page { display: flex; flex-direction: column; gap: 22px; }
.goal-page__back { align-self: flex-start; display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: var(--radius-pill); padding: 0 16px; min-height: 40px;
                   font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.goal-page__head { display: flex; gap: 24px; align-items: center; }
.goal-page__titles { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.goal-page__titles .page-title { margin: 0; }
.goal-page__sub { font-size: 15px; color: var(--text-body); }
.goal-page__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.goal-page__plan { padding: 22px; border-radius: 18px; display: flex; flex-direction: column; gap: 14px; }
.goal-page__plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.goal-page__plan-head h2, .goal-page__date h2 { margin: 0; font-size: 17px; font-weight: 700; }
.goal-page__plan-head span { font-size: 14px; color: var(--text-body); }
.goal-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.goal-week__day { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.goal-week__day.is-today { background: #fff; border-color: var(--ink); font-weight: 700; }
.goal-week__day.is-read { background: var(--green-soft); border-color: var(--green-soft); }
.goal-week__name { font-size: 12px; font-weight: 700; }
.goal-week__pages { font-size: 13px; }
.goal-week__mark { font-size: 12px; font-weight: 700; color: var(--clay); min-height: 1em; }
.goal-week__day.is-read .goal-week__mark { color: var(--green); }
.goal-page__words { border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.goal-page__words-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.goal-page__words-text strong { font-size: 15px; }
.goal-page__study { font-weight: 600; color: var(--clay); white-space: nowrap; }
.goal-page__side { display: flex; flex-direction: column; gap: 14px; }
.goal-page__date { padding: 20px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.goal-page__date-form { display: flex; gap: 8px; }
.goal-page__date-form input { flex: 1; min-height: 48px; }
.goal-page__buttons { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.goal-page__button { flex: 1; }
.goal-page__button .btn, .goal-page__abandon-button { width: 100%; min-height: 48px; }
.goal-page__abandon { flex: 1; }
.goal-page__abandon-button { list-style: none; color: var(--clay); border-color: var(--line-strong); cursor: pointer; }
.goal-page__abandon-button::-webkit-details-marker { display: none; }
.goal-page__confirm { margin-top: 10px; background: var(--mark); border: 1.5px solid #E2C48F; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
                      font-size: 14px; line-height: 1.5; color: var(--ink-line); }
.goal-page__confirm strong { font-size: 17px; color: var(--ink); }
.goal-page__confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.goal-page__abandon-yes { background: var(--clay); color: var(--text-on-accent); }

@media (max-width: 760px) {
  .goal-sheet__panel { top: 90px; width: 100%; border-radius: 24px 24px 0 0; box-shadow: none; }
  .goal-sheet__head { padding-block: 8px 0; padding-inline: 18px 6px; }
  .goal-sheet__title { font-size: 28px; }
  .goal-form__body { padding: 6px 18px 12px; gap: 14px; }
  .goal-form__summary-text { font-size: 21px; }
  .goal-form__easier { display: grid; grid-template-columns: 1fr 1fr; }
  .goal-form__foot { flex-direction: column; align-items: stretch; padding: 12px 18px 18px; }
  .goal-card { flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; }
  .goal-card .goal-cover--lg { display: none; }
  .goal-card__title { font-size: 25px; }
  .goal-card__pill, .goal-pill { font-size: 12px; padding: 4px 10px; }
  .goal-card__row { gap: 12px; }
  .goal-card__today { font-size: 17px; }
  .goal-card__actions { margin-inline-start: 0; width: 100%; }
  .goal-card__actions .goal-card__cta, .goal-card__actions form { flex: 1; }
  .goal-card__done-title { font-size: 30px; }
  .goal-card__done-actions { width: 100%; }
  .goal-page__head { flex-wrap: wrap; gap: 14px; }
  .goal-page__head .goal-cover { display: none; }
  .goal-page__grid { grid-template-columns: 1fr; }
  .goal-week { grid-template-columns: 1fr; gap: 0; }
  .goal-week__day { flex-direction: row; justify-content: space-between; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 8px 4px; }
  .goal-week__day.is-today, .goal-week__day.is-read { background: none; }
  .goal-week__mark { min-width: 60px; text-align: var(--end); }
}


/* screens/grammar.css */
/* Grammar */

.grammar__layout { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }

.grammar__lesson {
  flex: 1 1 480px;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grammar__title { font-size: 32px; line-height: 1.1; margin: 0; }
.grammar__intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }

.grammar__table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow-x: auto; }
.grammar__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Hanken Grotesk", var(--font-arabic);
  font-size: 14px;
  line-height: 1.45;
  text-align: var(--start);
}
.grammar__table th, .grammar__table td { padding: 12px 14px; vertical-align: middle; }
.grammar__table tbody th { min-width: 7em; }
.grammar__table thead th {
  background: var(--sand);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-body);
  padding-top: 10px;
  padding-bottom: 10px;
}
.grammar__table tbody tr { border-top: 1px solid var(--line-soft); }
.grammar__table tbody th { font-weight: 600; }
.grammar__table td:last-child { color: var(--text-body); }
.grammar__form { font-size: 19px; font-family: var(--font-arabic); text-align: start; /* its own direction: right for Arabic */ }

.grammar__drill {
  flex: 1 1 360px;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.grammar__drill-meta { font-size: 13px; color: var(--text-on-dark-muted); }
.grammar__prompt { font-size: 32px; line-height: 1.15; text-align: center; padding: 14px 0; }
.grammar__sentence { font-size: 36px; line-height: 1.8; text-align: center; padding: 10px 0; margin: 0; }
.grammar__target { background: var(--peach); color: var(--ink); border-radius: 8px; padding: 0 8px; }
.grammar__question { font-size: 15px; font-weight: 600; text-align: center; margin: 0; }

.grammar__options { display: flex; flex-direction: column; gap: 8px; }
.grammar__option {
  background: var(--ink-raised);
  color: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.grammar__option.ar { font-family: var(--font-arabic); font-size: 24px; line-height: 1.4; padding: 8px 14px; }
.grammar__option:hover:not(:disabled) { border-color: var(--paper); }
.grammar__option:disabled { cursor: default; }
.grammar__option.is-right { background: var(--right); border-color: var(--right); }
.grammar__option.is-wrong { background: var(--wrong); border-color: var(--wrong); }

.grammar__feedback {
  border-top: 1px solid var(--ink-line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grammar__why { margin: 0; font-size: 15px; line-height: 1.5; }
.grammar__why strong { color: var(--peach); }
.grammar__why strong.is-right { color: var(--right-bright); }
.grammar__feedback .btn { align-self: flex-end; }

@media (max-width: 600px) {
  .grammar__lesson, .grammar__drill { padding: 20px; }
  .grammar__table th, .grammar__table td { padding: 10px 8px; }
  .grammar__table { font-size: 13px; }
  .grammar__sentence { font-size: 30px; }
}

/* A topic's CEFR level */
.grammar__chip-level { font-size: 11px; font-weight: 700; opacity: .7; margin-inline-start: 4px; }
.grammar__level { align-self: flex-start; }

/* Lesson page: where it sits in the syllabus */
.grammar__crumb { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.grammar__crumb:hover { color: var(--ink); }
.grammar__page-title { overflow-wrap: anywhere; }
.grammar__step { flex-wrap: wrap; justify-content: flex-end; }
.grammar__badges { flex-wrap: wrap; }
.grammar__best { background: var(--green-soft); color: var(--green-deep); }

/* Examples and notes */
.grammar__examples, .grammar__notes { display: flex; flex-direction: column; gap: 10px; }
.grammar__examples h3, .grammar__notes h3 { margin: 0; }
.grammar__example-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.grammar__example {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.grammar__example:first-child { border-top: 0; padding-top: 0; }
.grammar__example-ar { font-size: 22px; line-height: 1.7; text-align: start; /* its own direction: right for Arabic, left for Turkish */ }
.grammar__example-en { font-size: 15px; color: var(--text-body); }
.grammar__example-note { font-size: 13px; color: var(--text-muted); }
.grammar__note-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.55; color: var(--text-body); }

/* A gap to fill in the drill sentence */
.grammar__target.is-gap { display: inline-block; min-width: 3em; text-align: center; letter-spacing: 2px; }

.grammar__footer-nav { flex-wrap: wrap; gap: 12px; font-size: 14px; }
.grammar__next-topic { color: var(--ink); text-align: var(--end); }

/* Syllabus */
.grammar-index { max-width: 1080px; gap: 20px; }
.grammar-index__progress { font-size: 14px; }
.grammar-index__next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  color: var(--ink);
  border: 1px solid var(--line);
}
.grammar-index__next:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.grammar-index__next-title { font-size: 24px; line-height: 1.2; }
.grammar-index__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.grammar-index__jump { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-weight: 700; }
.grammar-index__jump-link { color: var(--ink); }
.grammar-index__jump-link.is-yours { text-decoration: underline; text-decoration-color: var(--peach); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.grammar-index__level { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.grammar-index__level-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.grammar-index__level-title { font-size: 26px; margin: 0; }
.grammar-index__level-desc { flex-basis: 100%; margin: 0; font-size: 14px; }
.grammar-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}
.grammar-index__topic {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.grammar-index__topic:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.grammar-index__topic-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grammar-index__topic-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.grammar-index__topic-meta { font-size: 12px; color: var(--text-muted); }
.grammar-index__best {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green-deep);
}

@media (max-width: 600px) {
  .grammar-index__next { flex-direction: column; align-items: flex-start; padding: 18px; }
  .grammar__step { justify-content: flex-start; }
}

/* "Practise more": the grammar drill for this topic (DrillBands::TOPICS). */
.grammar__more { width: 100%; max-width: 566px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; color: var(--ink); text-decoration: none; }
.grammar__more:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.grammar__more-text { display: flex; flex-direction: column; gap: 2px; }
.grammar__more-title { font-size: 16px; font-weight: 700; }
.grammar__more-line { font-size: 14px; color: var(--text-body); }
.grammar__more-go { font-size: 22px; color: var(--clay); }
.grammar__more-ar { font-family: var(--font-arabic); font-size: 22px; font-weight: 400; line-height: 1.4; }

/* Chinese: a sentence's pinyin under it (drill and examples). */
.grammar__pinyin { margin: -6px 0 6px; text-align: center; font-size: 16px; color: var(--text-muted); }
.card--dark .grammar__pinyin { color: rgba(255, 255, 255, .7); }
.grammar__example-py { display: block; font-size: 14px; color: var(--clay); }

/* The drill's questions missed, asked again (lib/reask), on its dark card */
.grammar__drill .reask-note { margin-top: 6px; color: var(--paper); }


/* screens/habits.css */
/* Daily habits (design: Claude Design "Daily Habits"): one streak, freezes and three daily quests.
   The streak's card on Today (habits/_card), its pill in the menu, the top bar and the account menu, the streak
   details (a dialog; a bottom sheet on a phone) and the class roster's day. Colors are the language's theme. */

/* ---------- Today: the plan with the card beside it (under it on a phone) ---------- */
.today__habits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) {
  .today__habits { grid-template-columns: minmax(0, 1.12fr) minmax(330px, 1fr); }
}

/* ---------- The card ---------- */
.habits { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; border-radius: 22px; }
.habits__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.habits__streak { display: flex; align-items: center; gap: 12px; min-width: 0; }
.habits__flame {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--text-muted);
}
.habits__flame .icon { width: 28px; height: 28px; }
.habits.is-kept .habits__flame { background: var(--peach); color: var(--ink); }
.habits.is-kept .habits__flame .icon { fill: var(--peach); }
.habits__count { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.habits__title { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 400; }
.habits__num { font-family: var(--font-serif); font-size: 46px; line-height: 1; }
.habits__num--none { font-size: 34px; }
.habits__num-label { font-size: 15px; font-weight: 700; }
.habits__state { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.habits__state.is-kept { color: var(--green); }

.habits__freezes {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  padding-inline-start: 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--sand); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.habits__freezes:hover { background: var(--sand-hover); text-decoration: none; color: var(--ink); }
.habits__shield { display: inline-flex; color: var(--text-muted); }
.habits__shield .icon { width: 20px; height: 20px; }
.habits__freezes.has-freezes .habits__shield { color: var(--clay); }
.habits__freezes.has-freezes .habits__shield .icon { fill: var(--clay-soft); }

/* One line of news: all done, a freeze earned or used, a streak ended, the first day. */
.habits__banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sand); }
.habits__banner-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; background: var(--card); color: var(--ink);
}
.habits__banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.45; }
.habits__banner-text strong { font-size: 15px; line-height: 1.35; }
.habits__banner--all { background: var(--green-soft); }
.habits__banner--all .habits__banner-icon { background: var(--green); color: var(--text-on-accent); }
.habits__banner--earned { background: var(--mark); }
.habits__banner--earned .habits__banner-icon,
.habits__banner--used .habits__banner-icon { background: var(--clay); color: var(--text-on-accent); }
.habits__banner--used { background: var(--clay-soft); }

/* The quests. */
.habits__quests { display: flex; flex-direction: column; gap: 4px; }
.habits__quests-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.habits__quests-title { margin: 0; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
.habits__quests-done { font-size: 13px; font-weight: 700; }
.habits__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.habits__quest { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.habits__mark {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line-strong); color: var(--text-on-accent);
}
.habits__quest.is-done .habits__mark { background: var(--green); border: 2px solid var(--green); }
.habits__quest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.habits__quest-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.habits__quest.is-done .habits__quest-title { font-weight: 500; color: var(--text-muted); }
.habits__quest-progress { display: flex; align-items: center; gap: 8px; }
.habits__bar { flex: 1; max-width: 180px; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.habits__bar > span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.habits__quest-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.habits__start {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
.habits__start:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.habits__start-form { flex-shrink: 0; margin: 0; }

/* Toward the next freeze, the minutes goal, the details. */
.habits__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.habits__toward { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; min-width: 0; }
.habits__dots { display: flex; gap: 4px; flex-shrink: 0; }
.habits__dots > span { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-strong); }
.habits__dots > .is-on { background: var(--clay); border-color: var(--clay); }
.habits__meta { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: 13px; }
.habits__minutes { color: var(--text-muted); }
.habits__change { color: var(--text-muted); text-decoration: underline; }
.habits__details { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; }

/* Motion: the ticks settle when all three are done; the shield glints once for a freeze earned. */
@keyframes habits-tick { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes habits-glint {
  0% { filter: brightness(1); transform: rotate(0); }
  50% { filter: brightness(1.5); transform: rotate(-8deg); }
  100% { filter: brightness(1); transform: rotate(0); }
}
.habits:has(.habits__banner--all) .habits__quest.is-done .habits__mark svg { animation: habits-tick .28s ease-out both; }
.habits__freezes.is-earned .habits__shield { animation: habits-glint .3s ease-out .2s both; }
@media (prefers-reduced-motion: reduce) {
  .habits .habits__mark svg, .habits__freezes .habits__shield { animation: none !important; }
}

@media (max-width: 640px) {
  .habits { padding: 16px; gap: 14px; }
  .habits__num { font-size: 40px; }
}

/* ---------- The pill in the menu ---------- */
.streak-pill {
  display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--ink-raised); border: 1px solid var(--ink-line); color: var(--text-on-dark); text-decoration: none;
}
.streak-pill:hover { border-color: var(--ink-line-strong); text-decoration: none; color: var(--text-on-dark); }
.streak-pill__top { display: flex; align-items: center; gap: 10px; }
.streak-pill__flame {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1);
}
.streak-pill.is-kept .streak-pill__flame { background: var(--peach); color: var(--ink); }
.streak-pill.is-kept .streak-pill__flame .icon { fill: var(--peach); }
.streak-pill__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.streak-pill__days { font-size: 12px; font-weight: 600; }
.streak-pill__n { font-size: 17px; font-weight: 800; }
.streak-pill__state { font-size: 11px; line-height: 1.3; color: var(--text-on-dark-muted); }
.streak-pill__freezes { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--peach); }
.streak-pill__freezes .icon { width: 15px; height: 15px; }
.streak-pill__goal { display: flex; align-items: center; gap: 8px; }
.streak-pill__bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.streak-pill__bar > span { display: block; height: 100%; background: var(--green-bright); }
.streak-pill__min { font-size: 11px; color: var(--text-on-dark-muted); white-space: nowrap; }

/* Collapsed sidebar: the flame and the days. */
.streak-mini {
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  color: var(--peach); font-family: var(--font-serif); font-size: 22px; text-decoration: none;
}
.streak-mini > span { display: inline-flex; align-items: center; gap: 2px; }
.streak-mini .icon { width: 16px; height: 16px; }
.streak-mini.is-kept .icon { fill: var(--peach); }
.streak-mini:hover { text-decoration: none; color: var(--peach); }

/* The phone's top bar. */
.topbar-streak {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--ink-line-strong); background: var(--ink-raised);
  color: var(--text-on-dark); font-size: 15px; font-weight: 700; text-decoration: none;
}
.topbar-streak:hover { color: var(--text-on-dark); text-decoration: none; }
.topbar-streak .icon { width: 16px; height: 16px; }
.topbar-streak.is-kept .icon { color: var(--peach); fill: var(--peach); }
.topbar-streak__mark { font-size: 12px; color: var(--text-on-dark-muted); }
.topbar-streak.is-kept .topbar-streak__mark { color: var(--green-bright); }
.topbar-streak.is-frozen .topbar-streak__mark { color: var(--peach); }

/* The account menu's row. */
.account-menu__streak {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--sand); color: var(--ink); text-decoration: none;
}
.account-menu__streak:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.account-menu__streak-flame { display: inline-flex; color: var(--clay); }
.account-menu__streak-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.account-menu__streak-text strong { font-size: 13px; }
.account-menu__streak-text span { font-size: 12px; color: var(--text-muted); }
.account-menu__streak-go { color: var(--text-muted); }
html[dir="rtl"] .account-menu__streak-go { transform: scaleX(-1); }

/* ---------- Streak details: a dialog, a bottom sheet on a phone ---------- */
.streak-sheet {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(620px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: visible;
}
.streak-sheet::backdrop { background: rgba(0, 0, 0, .42); }
.streak-sheet__panel {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 26px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--shadow-float);
}
.streak-sheet__grab { display: none; }
.streak-page { max-width: 680px; }

.streak-details { display: flex; flex-direction: column; gap: 16px; }
.streak-details__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.streak-details__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.1; }
.streak-details__close {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sand); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.streak-details__close:hover { background: var(--sand-hover); color: var(--ink); }
.streak-details__stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.streak-details__stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--sand); }
.streak-details__stats dt { font-size: 12px; color: var(--text-muted); }
.streak-details__stats dd { margin: 0; font-family: var(--font-serif); font-size: 30px; line-height: 1.1; }
.streak-details__toward { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.streak-details__month { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.streak-details__month-name { margin: 0; font-size: 16px; font-weight: 700; }
.streak-details__nav {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; font-size: 16px;
}
.streak-details__nav:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.streak-details__nav.is-off { opacity: .4; }

.streak-cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px 6px; margin: -6px 0; }
.streak-cal th { font-size: 12px; font-weight: 700; color: var(--text-muted); padding-bottom: 2px; text-align: center; }
.streak-cal abbr { text-decoration: none; }
.streak-cal td { padding: 0; }
.streak-cal__day {
  height: 52px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; color: var(--ink); font-size: 13px; font-weight: 600; box-sizing: border-box;
}
.streak-cal__mark { font-size: 10px; line-height: 1; min-height: 10px; }
.streak-cal__day.is-kept { background: var(--green); color: var(--text-on-accent); }
.streak-cal__day.is-frozen { background: var(--clay-soft); border: 1.5px solid var(--clay); }
.streak-cal__day.is-missed { border: 1.5px dashed var(--line-strong); color: var(--text-muted); }
.streak-cal__day.is-today { border: 2.5px solid var(--ink); background: var(--card); font-weight: 800; }
.streak-cal__day.is-kept.is-today { background: var(--green); }
.streak-cal__day.is-future { color: var(--text-muted); opacity: .6; font-weight: 500; }
.streak-cal__day.is-none { color: var(--text-muted); font-weight: 500; }
.streak-details__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.streak-details__legend li { display: inline-flex; align-items: center; gap: 6px; }
.streak-cal__day.is-legend { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.streak-cal__day.is-legend.is-today { border-width: 2px; }
.streak-details__how { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--sand); font-size: 13px; line-height: 1.55; }

@media (max-width: 640px) {
  .streak-sheet {
    width: 100%; max-height: 92vh; margin: auto 0 0; inset-inline: 0;
  }
  .streak-sheet__panel { border-radius: 28px 28px 0 0; padding: 10px 16px 24px; max-height: 92vh; border-bottom: 0; }
  .streak-sheet__grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 0 auto 10px; }
  .streak-details__title { font-size: 28px; }
  .streak-details__stats { grid-template-columns: 1fr 1fr; }
  .streak-cal { border-spacing: 4px 4px; margin: -4px 0; }
  .streak-cal__day { height: 46px; }
}

/* ---------- The class roster: each student's day ---------- */
.roster-streak { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.roster-streak__mark {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
  border: 1.5px dashed var(--line-strong); color: var(--text-muted);
}
.roster-streak.is-kept { color: var(--green-deep); }
.roster-streak.is-kept .roster-streak__mark { background: var(--green); border: 1.5px solid var(--green); color: var(--text-on-accent); }
.roster-streak.is-frozen .roster-streak__mark { background: var(--clay-soft); border: 1.5px solid var(--clay); color: var(--ink); }
.roster-streak.is-new { color: var(--text-muted); font-weight: 500; }
.teach__quests, .teach__minutes { white-space: nowrap; }
.teach__roster-note { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }


/* screens/hadith.css */
/* The Hadith page (/hadith/:key) */
.hadith-page { max-width: 1180px; gap: 22px; }
.hadith-page__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hadith-page__intro { display: flex; flex-direction: column; gap: 6px; }
.hadith-page__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 52px); line-height: 1; margin: 0; }
.hadith-page__lead { margin: 0; font-size: 15px; color: var(--text-body); }
.hadith-page__cols { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-pill { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 14px; color: var(--ink); text-decoration: none; }
.hp-pill:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.hp-pill.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.hadith-page__body { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.hadith-page__list-wrap { flex: 0 1 300px; min-width: 0; position: sticky; top: 16px; }
.hadith-page__list { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.hp-item { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.hp-item:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.hp-item.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hp-item__title { font-size: 19px; line-height: 1.6; text-align: right; /* physical: text in the language taught keeps its own side */ }
.hp-item__meta { font-size: 12px; opacity: .8; }

.hadith-page__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hp-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.hp-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hp-card__tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hp-card__grade { background: var(--green); color: var(--paper); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12px; font-weight: 700; }
.hp-card__refs { font-size: 13px; color: var(--text-muted); }
.hp-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hp-toggle { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; }
.hp-toggle:hover { border-color: var(--ink); }
.hp-toggle.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hp-card__part { display: flex; flex-direction: column; gap: 4px; }
.hp-card__part[hidden] { display: none; }
.hp-card__label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.hp-card__label--matn { color: var(--clay); }
.hp-card__isnad { margin: 0; font-size: 22px; line-height: 1.8; color: var(--text-muted); text-align: right; /* physical: text in the language taught keeps its own side */ }
.hp-card__matn { margin: 0; font-size: clamp(28px, 4.5vw, 38px); line-height: 1.9; text-align: right; /* physical: text in the language taught keeps its own side */ }
.hp-card__matn--long { font-size: clamp(22px, 3.4vw, 28px); }
.hp-card__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.hp-card__source { font-weight: 600; }

.hp-nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hp-nav__next { margin-inline-start: auto; }
.hp-credit { margin: 0; font-size: 12px; }

.hp-collections { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hp-collections__title { font-family: var(--font-serif); font-weight: 400; font-size: 30px; margin: 0; }
.hp-collections__lead { margin: 0; font-size: 14px; }
.hp-collections__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.hp-book { height: 100%; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.hp-book:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.hp-book__ar { font-size: 24px; line-height: 1.4; text-align: right; /* physical: text in the language taught keeps its own side */ }
.hp-book__title { font-family: var(--font-serif); font-size: 24px; line-height: 1.1; }
.hp-book__by { font-size: 13px; color: var(--text-muted); }
.hp-book__desc { font-size: 13px; color: var(--text-body); line-height: 1.45; }
.hp-book__meta { margin-top: auto; font-size: 12px; color: var(--text-muted); }

@media (max-width: 860px) {
  .hadith-page__list-wrap { position: static; flex-basis: 100%; }
  .hadith-page__list { max-height: 240px; }
}


/* screens/info.css */
/* Help, privacy and terms: long-form text pages on the marketing site. */

.info { padding-top: 56px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 40px; }
.info__head { display: flex; flex-direction: column; gap: 16px; }
.info__title { margin: 0; }
.info__lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-body); }
.info__updated { margin: 0; font-size: 14px; color: var(--text-muted); }
.info__section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 24px; }
.info__heading { margin: 0 0 4px; font-size: 28px; line-height: 1.2; }
.info__section p, .info__section li { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-body); }
.info__section ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.info__section h3 { margin: 8px 0 0; font-size: 17px; }

.faq { border-top: 1px solid var(--line-strong); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--clay); line-height: 1; }
.faq[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.faq p { padding-bottom: 16px; }

.info__form { gap: 16px; }
.info__form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.info__form textarea { resize: vertical; min-height: 140px; }
.info__trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
  .info { padding-top: 32px; }
  .info__heading { font-size: 24px; }
}


/* screens/landing-tr.css */
/* TurkishGenius's home page (app/views/packs/tr/pages/home.html.erb, design
   "TurkishGenius Home"): only that page uses these classes. Colors come from
   the pack's theme. */

.trhome__kicker {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding-block: 6px; padding-inline: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-body);
}
.trhome__kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.trhome__hero .hero__copy { gap: 20px; }
.trhome__title { font-size: clamp(46px, 5.6vw, 72px); letter-spacing: -.5px; line-height: 1; text-wrap: balance; }
.trhome__title em { color: var(--clay); }
.trhome__hero .hero__note { margin: 0; }

/* The demo: a sentence, then the tutor breaking a word down. */
.trhome__demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.trhome__reader {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-float);
}
.trhome__reader-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.trhome__reader-title { font-weight: 600; color: var(--text-body); }
.trhome__level { background: var(--gold); color: var(--ink); border-radius: 6px; padding: 2px 8px; font-weight: 700; }
.trhome__sentence { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-family: var(--font-serif); font-size: 30px; line-height: 1.35; color: var(--ink); }
.trhome__word { padding: 0 4px; border-bottom: 1.5px dotted var(--line-mid); border-radius: 6px 6px 2px 2px; }
.trhome__word.is-selected { background: var(--peach); border-bottom: 2px solid var(--ink); }
.trhome__translation { margin: 0; font-size: 14px; color: var(--text-muted); border-top: 1px solid var(--line-soft); padding-top: 10px; }

.trhome__tutor { background: var(--ink); color: #FFFFFF; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.trhome__exchange { display: flex; flex-direction: column; gap: 14px; }
.trhome__exchange[hidden] { display: none; }
.trhome__ask {
  align-self: flex-end; max-width: 88%; margin: 0; background: var(--ink-raised); border: 1px solid var(--ink-line);
  border-start-start-radius: 14px; border-start-end-radius: 14px; border-end-end-radius: 4px; border-end-start-radius: 14px; padding: 9px 14px; font-size: 14px;
}
.trhome__reply { display: flex; gap: 12px; align-items: flex-start; }
.trhome__avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--clay); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 20px; line-height: 1; padding-bottom: 3px;
}
.trhome__answer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.trhome__label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-on-dark-muted); font-weight: 700; }
.trhome__parts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.trhome__part {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px;
  background: var(--ink-line); border: 1px solid var(--ink-line-strong); border-radius: 10px; padding: 7px 10px;
}
.trhome__part--stem { background: var(--ink-raised); }
.trhome__part-form { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: #FFFFFF; }
.trhome__part-gloss { font-size: 12px; color: var(--text-on-dark-muted); }
.trhome__equals { display: flex; align-items: center; font-size: 18px; color: var(--text-on-dark-muted); padding: 0 2px; }
.trhome__result { display: flex; align-items: center; background: var(--peach); color: var(--ink); border-radius: 10px; padding: 7px 12px; font-size: 15px; font-weight: 700; }
.trhome__text { margin: 0; font-size: 15px; line-height: 1.55; }
.trhome__good { font-weight: 700; color: var(--green-bright); white-space: nowrap; }
.trhome__wrong { text-decoration: line-through; color: var(--text-on-dark-muted); white-space: nowrap; }
.trhome__chips { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--ink-line); padding-top: 12px; }
.trhome__chip {
  background: transparent; color: #FFFFFF; border: 1px solid var(--ink-line-strong); border-radius: var(--radius-pill);
  padding: 0 14px; min-height: 40px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.trhome__chip:hover { border-color: #FFFFFF; }
.trhome__chip[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

/* What the tutor does */
.trhome__intro .eyebrow { color: var(--clay-hover); letter-spacing: 2px; }
.trhome__intro .section-intro__title { font-size: clamp(36px, 4vw, 52px); }
.trhome__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 28px; padding-bottom: 64px; }
.trhome__feature { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.trhome__feature-head { display: flex; justify-content: space-between; align-items: center; }
.trhome__feature-number { font-size: 13px; font-weight: 700; color: var(--clay-hover); }
.trhome__feature-word { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--text-muted); }
.trhome__feature-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.trhome__feature-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }

/* The approach */
.trhome__band-wrap { padding-bottom: 64px; }
.trhome__band { background: var(--sand); border-radius: 22px; padding: 36px 40px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 22px 36px; align-items: start; }
.trhome__band-head { display: flex; flex-direction: column; gap: 10px; }
.trhome__band-head .eyebrow { margin: 0; color: var(--clay-hover); font-weight: 700; letter-spacing: 2px; }
.trhome__h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
.trhome__principle { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--ink); padding-top: 12px; }
.trhome__principle-title { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 700; }
.trhome__principle-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }

/* Pricing teaser */
.trhome__pricing { display: flex; flex-direction: column; gap: 18px; padding-bottom: 64px; }
.trhome__pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.trhome__pricing-head a { font-size: 15px; font-weight: 600; }
.trhome__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trhome__plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.trhome__plan--pro { border: 2px solid var(--clay); }
.trhome__plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trhome__plan-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.trhome__plan-price { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.trhome__per { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); }
.trhome__trial { background: var(--clay-soft); color: var(--clay-deep); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; }
.trhome__plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trhome__plan-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.trhome__plan-list li::before { content: "✓"; color: var(--green); font-weight: 700; }
.trhome__plan-cta { margin-top: auto; }
.trhome__plan-note { margin: 0; font-size: 13px; color: var(--text-muted); }

/* The placement-test band */
.trhome__cta { gap: 16px; padding-top: 64px; padding-bottom: 64px; }
.trhome__cta-word { font-family: var(--font-serif); font-style: italic; font-size: 96px; line-height: 1; color: var(--peach); }
.trhome__cta .cta-band__title { font-size: clamp(30px, 3vw, 40px); max-width: 720px; line-height: 1.1; text-wrap: balance; }

@media (max-width: 760px) {
  .trhome__sentence { font-size: 24px; }
  .trhome__reader, .trhome__tutor { padding: 16px; }
  .trhome__part { min-width: 0; }
  .trhome__part-form { font-size: 20px; }
  .trhome__hero .row { flex-direction: column; align-items: stretch; }
  .trhome__features, .trhome__band, .trhome__plans { grid-template-columns: minmax(0, 1fr); }
  .trhome__band { padding: 24px 20px; }
  .trhome__cta-word { font-size: 72px; }
}


/* screens/landing.css */
/* Landing page */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
  padding-top: clamp(32px, 6vw, 80px);
  padding-bottom: 72px;
}
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero__title { font-size: clamp(48px, 6.4vw, 88px); letter-spacing: -1.5px; margin: 0; }
.hero__lead { max-width: 540px; }
/* "AI-assisted Arabic learning", with a dot */
.hero__eyebrow { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 0; }
.hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex-shrink: 0; }
.hero__note { margin: -12px 0 0; font-size: 14px; color: var(--text-muted); }

.hero__sample {
  margin: 40px 0 0;
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hero__sample-meta { font-size: 13px; color: var(--text-muted); }
.hero__sample-text { font-size: 34px; line-height: 2.1; padding-top: 64px; position: relative; margin: 0; }
.hero__word {
  position: relative;
  background: var(--clay-soft);
  border-radius: 6px;
  padding: 0 4px;
  box-shadow: inset 0 -2px 0 var(--clay);
}

/* The hero's tutor demo: a sentence, a question about it and the tutor's
   answer; the chips switch between three (tutor_demo_controller). */
.hero__tutor { margin: 0; padding: 28px 28px 24px; gap: 18px; }
.hero__tutor .hero__sample-text { padding-top: 0; line-height: 2; }
.tutor-demo { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.tutor-demo__exchange { display: flex; flex-direction: column; gap: 10px; }
.tutor-demo__exchange[hidden] { display: none; }
.tutor-demo__ask {
  align-self: flex-end;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  border-start-start-radius: 16px; border-start-end-radius: 16px; border-end-end-radius: 4px; border-end-start-radius: 16px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;
  max-width: 85%;
}
.tutor-demo__reply { display: flex; gap: 10px; align-items: flex-start; }
.tutor-demo__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.tutor-demo__bubble {
  background: var(--sand);
  border-start-start-radius: 4px; border-start-end-radius: 16px; border-end-end-radius: 16px; border-end-start-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tutor-demo__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); }
.tutor-demo__answer { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.tutor-demo__answer .ar, .tutor-demo__ask .ar { font-size: 1.2em; }
.tutor-demo__questions { padding-top: 4px; }
.tutor-demo__question { padding: 7px 13px; font-size: 13px; font-weight: 600; }

/* A section's heading above the feature grid */
.section-intro { padding-top: 56px; display: flex; flex-direction: column; gap: 10px; }
.section-intro .eyebrow { font-weight: 700; margin: 0; }
.section-intro__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  margin: 0;
  max-width: 820px;
  text-wrap: balance;
}
.section-intro + .features { padding-top: 40px; }

/* Our approach: three principles */
.approach { padding-bottom: 80px; }
.approach__card {
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px;
}
.approach__head { display: flex; flex-direction: column; gap: 10px; }
.approach__head .eyebrow { color: var(--green); font-weight: 700; margin: 0; }
.approach__title { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0; text-wrap: balance; }
.approach__point { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--green); padding-top: 16px; }
.approach__point-title { font-family: var(--font-sans); font-size: 17px; font-weight: 700; margin: 0; }
.approach__point-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }

/* Dark gloss bubble above a word (also used by the reader). */
.gloss {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; /* centred over the word, either direction */
  transform: translateX(-50%);
  width: 210px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  text-align: left; /* physical: it sits inside a right-to-left word; the interface's side below */
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}
html[dir="rtl"] .gloss { text-align: right; }
.gloss strong { font-size: 16px; }
.gloss > span { color: var(--text-on-dark-muted); }

.features {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 80px) / 3))), 1fr));
  gap: 40px;
}
.feature { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.feature__number { font-family: var(--font-serif); font-size: 18px; color: var(--clay); }
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--clay-soft); color: var(--clay);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature__title { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0; }
.feature__text { margin: 0; color: var(--text-body); font-size: 16px; line-height: 1.55; text-wrap: pretty; }

.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding: 80px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.cta-band__ar { font-size: 56px; color: var(--peach); }
.cta-band__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  margin: 0;
  max-width: 760px;
  line-height: 1.05;
}

/* For teachers: the example class in the hero */
.teachers__sample { gap: 16px; }
.teachers__school-note { margin-top: 14px; font-size: 15px; color: var(--text-muted); }
.teachers__school-note a { color: var(--text); font-weight: 600; }
.teachers__sample-reading { margin: 0; font-size: 16px; }
.teachers__sample-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.teachers__sample-rows li { display: grid; grid-template-columns: 70px minmax(0, 1fr) 84px; align-items: center; gap: 12px; font-size: 15px; }
.teachers__sample-rows .progress, .teachers__sample-rows .progress__bar { display: block; }
.cta-band__note { margin: 4px 0 0; font-size: 14px; opacity: .85; }
.cta-band__note a { color: inherit; text-decoration: underline; }
/* Class units and the Teacher plan (pages/teachers) */
.teachers__units { margin-top: 8px; margin-bottom: 40px; }
.teachers__units-card { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; }
.teachers__units-card p { margin: 0; line-height: 1.6; }
.teachers__units-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; }

/* Recordings of the product (MarketingVideos ag_*): the three loops, each with its step, then the two demos */
.home-videos__loops { display: grid; gap: 32px; padding-top: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.home-videos__loop { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.home-videos__caption { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.home-videos__step { font-family: var(--font-serif); font-size: 24px; color: var(--ink); }
.home-video { max-width: 960px; padding-top: 64px; }
.home-video__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 8px; }
.home-video__lead { color: var(--text-muted); margin: 0 0 16px; max-width: 60ch; }
.home-video + .approach { padding-top: 64px; }


/* screens/languages.css */
/* FluentPlex's language switcher in the app menu (shared/_language_switch; design "FluentPlex Language Switcher").
   It's FluentPlex's control, not the language's: neutral tiles on the menu's dark, FluentPlex's jade for the current
   language and its lavender for focus, each language's name in its own script. The languages themselves (/languages,
   the home page) are cards: languages/_cards, styled in fluentplex-home.css. */
.fpswitch {
  --fp-switch-jade: #3FC2A8; --fp-switch-focus: #9B95FF; --fp-switch-serif: "Newsreader", Georgia, serif;
  --fp-switch-raised: rgba(255, 255, 255, .07); --fp-switch-hover: rgba(255, 255, 255, .11); --fp-switch-line: rgba(255, 255, 255, .16);
  --fp-switch-muted: #C9CBDD;
  position: relative; display: flex; flex-direction: column; gap: 6px; color: var(--text-on-dark);
}
.fpswitch :focus-visible { outline: 2px solid var(--fp-switch-focus); outline-offset: 2px; }
.fpswitch__trigger {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 10px;
  background: var(--fp-switch-raised); border: 1px solid var(--fp-switch-line); border-radius: 14px; color: inherit; text-align: start; cursor: pointer;
}
.fpswitch__trigger:hover { background: var(--fp-switch-hover); }
.fpswitch__trigger[aria-expanded="true"] { background: var(--fp-switch-hover); border-color: var(--fp-switch-jade); }
.fpswitch__trigger:focus-visible { outline-width: 3px; }
.fpswitch__tile {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px;
  background: var(--fp-switch-raised); border: 1.5px solid var(--fp-switch-line); border-radius: 10px; font-size: 22px; line-height: 1;
}
.fpswitch__tile--sm { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; }
.fpswitch__tile--current { border-color: var(--fp-switch-jade); }
.fpswitch__trigger-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fpswitch__kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fp-switch-muted); }
.fpswitch__native { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.5; }
.fpswitch__chevron::before { content: "▾"; font-size: 12px; color: var(--fp-switch-muted); }
.fpswitch__trigger[aria-expanded="true"] .fpswitch__chevron::before { content: "▴"; }

.fpswitch__panel { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: rgba(0, 0, 0, .18); border: 1px solid var(--fp-switch-line); border-radius: 14px; }
.fpswitch__panel[hidden] { display: none; }
.fpswitch__head { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fp-switch-muted); }
.fpswitch__find {
  display: flex; align-items: center; gap: 8px; margin: 4px 4px 6px; padding: 0 10px; min-height: 44px;
  background: rgba(0, 0, 0, .2); border: 1px solid var(--fp-switch-line); border-radius: 10px; color: var(--fp-switch-muted);
}
.fpswitch__find svg { width: 15px; height: 15px; flex-shrink: 0; }
.fpswitch__find input { flex: 1; min-width: 0; border: none; background: none; color: var(--text-on-dark); font: inherit; font-size: 14px; outline: none; }
.fpswitch__find:focus-within { outline: 2px solid var(--fp-switch-focus); outline-offset: 1px; }
.fpswitch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fpswitch__list--long { max-height: 252px; overflow-y: auto; }
.fpswitch__list li[hidden] { display: none; }
.fpswitch__row, .fpswitch__add {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px;
  color: var(--text-on-dark); text-decoration: none;
}
.fpswitch__row:hover, .fpswitch__add:hover { background: var(--fp-switch-hover); color: var(--text-on-dark); text-decoration: none; }
.fpswitch__row:focus-visible, .fpswitch__add:focus-visible { outline-offset: -2px; }
.fpswitch__row[aria-current="page"] { background: var(--fp-switch-raised); }
.fpswitch__names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fpswitch__english { font-size: 15px; font-weight: 500; }
.fpswitch__row[aria-current="page"] .fpswitch__english { font-weight: 700; }
.fpswitch__own { align-self: flex-start; font-size: 16px; line-height: 1.6; color: var(--fp-switch-muted); }
.fpswitch__current { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fp-switch-jade); }
.fpswitch__meta { font-size: 12px; color: var(--fp-switch-muted); white-space: nowrap; }
.fpswitch__add { margin-top: 4px; border-top: 1px solid var(--fp-switch-line); border-radius: 0 0 10px 10px; font-size: 15px; font-weight: 600; }
.fpswitch__plus {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0;
  border: 1.5px dashed var(--fp-switch-line); border-radius: 8px; font-size: 18px; color: var(--fp-switch-jade);
}

/* The collapsed menu: the current language's glyph; its list is a flyout beside the menu (placed by fp-switch). */
.fpswitch--mini { align-items: center; }
.fpswitch__glyph-button {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--fp-switch-raised); border: 1.5px solid var(--fp-switch-jade); border-radius: 12px; color: var(--text-on-dark); font-size: 21px; line-height: 1;
}
.fpswitch__glyph-button:focus-visible { outline-width: 3px; outline-offset: 3px; }
.fpswitch--mini .fpswitch__panel {
  position: fixed; z-index: 60; width: 272px; background: var(--ink); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .5);
}
.fpswitch--mini .fpswitch__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .05); }

/* Phones (the drawer): the languages as tiles, always shown, instead of the button and its list. */
.fpswitch__tiles { display: none; }
@media (max-width: 860px) {
  .fpswitch__trigger, .fpswitch:not(.fpswitch--mini) > .fpswitch__panel { display: none; }
  .fpswitch__tiles { display: flex; flex-direction: column; gap: 8px; padding: 0 2px; }
  .fpswitch__tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fpswitch__big {
    display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; padding: 10px 12px;
    border: 1.5px solid var(--fp-switch-line); border-radius: 14px; color: var(--text-on-dark); text-decoration: none;
  }
  .fpswitch__big:hover { color: var(--text-on-dark); text-decoration: none; background: var(--fp-switch-hover); }
  .fpswitch__big[aria-current="page"] { background: var(--fp-switch-raised); border-color: var(--fp-switch-jade); }
  .fpswitch__big-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .fpswitch__big-own { font-size: 22px; line-height: 1.35; }
  .fpswitch__big-tick { font-size: 12px; font-weight: 700; color: var(--fp-switch-jade); }
  .fpswitch__big-english { font-size: 13px; color: var(--fp-switch-muted); }
  .fpswitch__big--add { flex-direction: row; align-items: center; justify-content: center; gap: 8px; border-style: dashed; font-size: 15px; font-weight: 600; }
  .fpswitch__big--add .fpswitch__plus { border: none; width: auto; height: auto; font-size: 20px; }
  .topbar__language { display: flex; align-items: center; gap: 10px; color: var(--text-on-dark); text-decoration: none; }
  .topbar__language .brand-mark { --mark-size: 30px; }
  .topbar__language-name { font-size: 19px; line-height: 1.3; }
}
.topbar__language-name { font-family: "Newsreader", Georgia, serif; }
.topbar__language-name[dir="rtl"] { font-family: var(--font-arabic); }


/* screens/lesson-player.css */
/* A narrated lesson (lessons/show, lesson_player_controller.js; design: Claude Design "Lesson Player"): a header,
   progress by slide (questions as dots), the stage with the line being read highlighted, captions, and controls.
   data-state on the player: start, playing, paused, waiting, loading, finished. .is-classroom: the classroom view. */
.lesson-player { max-width: 1100px; width: 100%; margin: 0 auto; gap: 0; background: var(--paper); color: var(--ink);
                 border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }

/* Header and progress */
.lesson-player__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 24px;
                      border-bottom: 1px solid var(--line); }
.lesson-player__back, .lesson-player__room-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600;
  flex-shrink: 0; text-decoration: none; }
.lesson-player__back:hover, .lesson-player__room-btn:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.lesson-player__title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lesson-player__name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-player__level { background: var(--sand); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.lesson-player__progress { display: flex; align-items: center; gap: 12px; padding: 12px 24px 0; }
.lesson-player__count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.lesson-player__type { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.lesson-player__track { flex: 1; display: flex; align-items: center; gap: 3px; }
.lesson-player__seg { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.lesson-player__seg--check { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--card);
                             box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.lesson-player__seg.is-done { background: var(--ink); box-shadow: none; }
.lesson-player__seg.is-current { background: var(--clay); box-shadow: none; }

/* Stage */
.lesson-player__main { flex: 1; min-height: 0; padding: 16px 24px 18px; display: flex; flex-direction: column; gap: 14px; }
.lesson-player__stage { position: relative; flex: 1; min-height: 400px; width: 100%; max-width: 900px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 32px 44px; display: flex; flex-direction: column; justify-content: center; }
.lesson-slide { display: flex; flex-direction: column; gap: 14px; animation: lesson-in .24s ease-out both; }
@keyframes lesson-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lesson-spin { to { transform: rotate(360deg); } }

/* The line being read: a soft clay band with a bar on its leading edge. */
.lesson-slide__band { padding: 8px 14px; border-radius: 12px; border-inline-start: 3px solid transparent; transition: background-color .2s; }
.lesson-slide__band.is-reading { background: var(--clay-soft); border-inline-start-color: var(--clay); }

.lesson-slide__eyebrow { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.lesson-slide__eyebrow.lesson-slide__band { align-self: flex-start; padding: 4px 10px; border-radius: 8px; }
.lesson-slide__eyebrow--clay { color: var(--clay); }
:lang(ar) .lesson-slide__eyebrow, :lang(ar) .lesson-slide__turn { letter-spacing: 0; }
.lesson-slide__inline { font-size: 1.2em; line-height: 1.5; }

.lesson-slide__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 52px; line-height: 1.15; text-wrap: balance; }
.lesson-slide--title .lesson-slide__title { align-self: flex-start; padding: 0 14px; margin-inline-start: -14px; }
.lesson-slide__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--text-muted); }
.lesson-slide__level { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 3px 10px; font-weight: 700; }

.lesson-slide__para { margin: 0; font-size: 21px; line-height: 1.6; text-wrap: pretty; }

.lesson-slide__table-wrap { max-width: 100%; overflow-x: auto; }
.lesson-slide__table { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.lesson-slide__table th { text-align: start; padding: 8px 14px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted);
                          border-bottom: 1px solid var(--line); }
.lesson-slide__table td { padding: 8px 14px; font-size: 17px; line-height: 1.6; text-align: start; }
.lesson-slide__cell-taught { font-size: 26px; }

.lesson-slide__sentence { display: flex; flex-direction: column; gap: 2px; border-radius: 14px; }
.lesson-slide__sentence-text { font-size: 50px; line-height: 1.6; text-align: start; }
:lang(ar) > .lesson-slide__sentence-text, :lang(fa) > .lesson-slide__sentence-text { line-height: 2; }
.lesson-slide__reading { font-family: var(--font-sans); font-size: 19px; color: var(--text-muted); letter-spacing: .3px; }
.lesson-slide__meaning { margin: 0; font-family: var(--font-serif); font-size: 28px; line-height: 1.35; }
.lesson-slide__note { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-muted); }
.lesson-slide__note .lesson-slide__inline { color: var(--ink); }

/* Questions */
.lesson-slide__check-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lesson-slide__turn { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--clay); font-weight: 700; }
.lesson-slide__turn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--clay); }
.lesson-slide__waiting { display: none; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.lesson-player[data-state="waiting"] .lesson-slide__waiting { display: inline; }
.lesson-slide__ask { font-size: 21px; line-height: 1.45; font-weight: 600; }
.lesson-slide__prompt { margin: 0; font-size: 24px; line-height: 1.5; }
.lesson-slide__gap-line { font-size: 42px; line-height: 1.6; text-align: start; }
:lang(ar).lesson-slide__gap-line, :lang(fa).lesson-slide__gap-line { line-height: 2; }
.lesson-slide__gap { display: inline-block; min-width: 110px; margin: 0 6px; padding: 0 8px; border-bottom: 3px dashed var(--clay); border-radius: 8px 8px 0 0; text-align: center; }
.lesson-slide__gap.is-filled { border-bottom-style: solid; border-bottom-color: var(--green); background: var(--green-soft); }
.lesson-slide__target { padding: 0 6px; border-radius: 8px; background: var(--peach); font-weight: 700; }
.lesson-slide__choices { display: grid; grid-template-columns: repeat(var(--choices, 4), minmax(0, 1fr)); gap: 10px; }
.lesson-slide__caption { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-muted); }
.lesson-slide__choice { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 6px 14px;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 14px; font-size: 28px; line-height: 1.5; cursor: pointer; }
.lesson-slide__choice:hover:not([aria-disabled="true"]) { border-color: var(--ink); }
.lesson-slide__choice[aria-disabled="true"] { cursor: default; }
.lesson-slide__choice.is-right { background: var(--right-soft); border-color: var(--right); }
.lesson-slide__choice.is-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.lesson-slide__choice-key { position: absolute; top: 6px; inset-inline-start: 10px; font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); }
.lesson-slide__choice-text--site { font-size: 22px; }
.lesson-slide__choice-tag { font-family: var(--font-sans); font-size: 13px; font-weight: 700; }
.lesson-slide__choice-tag:empty { display: none; }
.lesson-slide__feedback { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 14px; font-size: 17px; line-height: 1.55; }
.lesson-slide__feedback strong { font-size: 16px; }
.lesson-slide__feedback.is-right { background: var(--right-soft); }
.lesson-slide__feedback.is-right strong { color: var(--right); }
.lesson-slide__feedback.is-wrong { background: var(--sand); }
.lesson-slide__feedback.is-reading { background: var(--green-soft); }
.lesson-slide__feedback.is-wrong.is-reading { background: var(--sand); }

/* Tips and summary */
.lesson-slide__tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lesson-slide__tips li { display: flex; gap: 12px; align-items: baseline; font-size: 21px; line-height: 1.5; }
.lesson-slide__tip-number { font-family: var(--font-serif); font-size: 1.2em; color: var(--clay); min-width: 18px; }
.lesson-slide__summary-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.15; }
.lesson-slide__score { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lesson-slide__score strong { font-size: 22px; }
.lesson-slide__dots { display: flex; gap: 6px; }
.lesson-slide__dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
                     border: 1.5px solid; }
.lesson-slide__dot.is-right { background: var(--right-soft); color: var(--right); border-color: var(--right); }
.lesson-slide__dot.is-wrong { background: var(--wrong-soft); color: var(--wrong); border-color: var(--wrong); }
.lesson-slide__closing { margin: 0; font-size: 21px; line-height: 1.55; color: var(--text-muted); }
.lesson-slide__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lesson-slide__practice, .lesson-slide__again { display: inline-flex; align-items: center; min-height: 50px; padding: 10px 22px; border-radius: 999px;
  font-size: 16px; font-weight: 600; line-height: 1.25; text-decoration: none; }
.lesson-slide__practice { background: var(--ink); color: var(--paper); border: none; }
.lesson-slide__practice:hover { color: var(--paper); text-decoration: none; opacity: .9; }
.lesson-slide__again { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); cursor: pointer; }

/* Start screen, paused chip */
.lesson-player__start { position: absolute; inset: 0; border-radius: inherit; background: var(--card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; z-index: 2; }
.lesson-player__start-btn { display: flex; align-items: center; gap: 12px; margin-top: 6px; min-height: 60px; padding: 0 30px 0 24px; border: none; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 18px; font-weight: 700; outline: 3px solid var(--clay-soft); outline-offset: 3px; cursor: pointer; }
.lesson-player__sound-hint { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.lesson-player__paused { display: none; position: absolute; top: 14px; inset-inline-end: 14px; align-items: center; gap: 6px; background: var(--sand);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.lesson-player[data-state="paused"] .lesson-player__paused { display: flex; }

/* Captions and notes under the stage */
.lesson-player__caption, .lesson-player__unavailable, .lesson-player__captions-off { width: 100%; max-width: 900px; margin: 0 auto; }
.lesson-player__caption { display: flex; align-items: flex-start; gap: 12px; min-height: 58px; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: var(--paper); }
.lesson-player__caption[hidden], .lesson-player__unavailable[hidden], .lesson-player__captions-off[hidden] { display: none; }
.lesson-player__caption-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 4px; fill: none; stroke: var(--peach); stroke-width: 1.8; stroke-linecap: round; }
[dir="rtl"] .lesson-player__caption-icon, [dir="rtl"] .lesson-player__flip, [dir="rtl"] .lesson-player__back > span { transform: scaleX(-1); }
.lesson-player__caption-text { margin: 0; flex: 1; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.lesson-player__caption .lesson-slide__inline { font-size: 1.15em; }
.lesson-player[data-state="loading"] .lesson-player__caption-text { color: var(--sand); }
.lesson-player__unavailable { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--sand); border-radius: 12px; padding: 8px 14px;
  font-size: 14px; line-height: 1.45; }
.lesson-player__unavailable svg { flex-shrink: 0; }
.lesson-player__unavailable span { flex: 1; min-width: 200px; }
.lesson-player__unavailable button { background: none; border: none; color: var(--clay); font-size: 14px; font-weight: 600; min-height: 40px; text-decoration: underline; cursor: pointer; }
.lesson-player__captions-off { margin-top: 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.lesson-player__spinner { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: var(--paper); animation: lesson-spin .9s linear infinite; }
.lesson-player__spinner--small { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; border-width: 2px; }

/* Controls */
.lesson-player__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 24px;
  border-top: 1px solid var(--line); background: var(--card); }
.lesson-player__toggles { flex: 1; display: flex; gap: 8px; }
.lesson-player__chip { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.lesson-player__chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lesson-player__chip-light { font-weight: 500; }
.lesson-player__cc { border: 1.5px solid currentColor; border-radius: 4px; padding: 0 3px; font-size: 11px; line-height: 1.3; }
.lesson-player__transport { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; }
.lesson-player__round { width: 52px; height: 52px; border-radius: 50%; background: transparent; border: 1.5px solid var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lesson-player__round:hover:not(:disabled) { border-color: var(--ink); }
.lesson-player__round:disabled { opacity: .4; cursor: default; }
.lesson-player__play { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); border: none; color: var(--paper); display: flex;
  align-items: center; justify-content: center; cursor: pointer; }
.lesson-player__play[aria-disabled="true"] { background: var(--text-muted); cursor: default; }
.lesson-player__play > * { display: none; }
.lesson-player[data-state="start"] .lesson-player__icon-play, .lesson-player[data-state="paused"] .lesson-player__icon-play,
.lesson-player[data-state="waiting"] .lesson-player__icon-play, .lesson-player[data-state="playing"] .lesson-player__icon-pause,
.lesson-player[data-state="loading"] .lesson-player__icon-spin, .lesson-player[data-state="finished"] .lesson-player__icon-replay { display: block; }
.lesson-player__keys { flex: 1; text-align: end; font-size: 12px; color: var(--text-muted); }
[dir="rtl"] .lesson-player__keys { visibility: hidden; }

/* Classroom view: large, for projecting; controls tucked away until the mouse moves. */
.lesson-player__room, .lesson-player__room-exit { display: none; }
.lesson-player.is-classroom { position: fixed; inset: 0; z-index: 1000; max-width: none; height: 100vh; border: none; border-radius: 0; }
html.lesson-classroom-open { overflow: hidden; }
.is-classroom .lesson-player__bar, .is-classroom .lesson-player__progress { display: none; }
.is-classroom .lesson-player__main { padding: 64px 72px 104px; gap: 18px; overflow: hidden; } /* room for the controls when they show */
.is-classroom .lesson-player__stage { flex: 1 1 auto; max-width: 1100px; border-radius: 24px; padding: 40px 56px; min-height: 0; overflow: auto; justify-content: safe center; }
.is-classroom .lesson-player__caption, .is-classroom .lesson-player__unavailable { flex-shrink: 0; }
.is-classroom.is-awake .lesson-player__room-hint { visibility: hidden; }
.is-classroom .lesson-player__caption, .is-classroom .lesson-player__unavailable { max-width: 1100px; }
.is-classroom .lesson-slide { gap: 22px; }
.is-classroom .lesson-slide__title { font-size: 76px; }
.is-classroom .lesson-slide__para, .is-classroom .lesson-slide__tips li, .is-classroom .lesson-slide__closing, .is-classroom .lesson-slide__ask { font-size: 32px; }
.is-classroom .lesson-slide__sentence-text { font-size: 76px; }
.is-classroom .lesson-slide__reading { font-size: 26px; }
.is-classroom .lesson-slide__meaning { font-size: 40px; }
.is-classroom .lesson-slide__note, .is-classroom .lesson-slide__feedback { font-size: 26px; }
.is-classroom .lesson-slide__gap-line { font-size: 56px; }
.is-classroom .lesson-player__caption { padding: 18px 24px; }
.is-classroom .lesson-player__caption-text { font-size: 28px; }
.is-classroom .lesson-player__controls { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; transition: opacity .2s; }
.is-classroom.is-awake .lesson-player__controls { opacity: 1; pointer-events: auto; }
.is-classroom .lesson-player__room { display: block; }
.lesson-player__room-count { position: absolute; top: 26px; inset-inline-end: 230px; font-size: 14px; color: var(--text-muted); }
.lesson-player__room-line { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--line); }
.lesson-player__room-line span { display: block; height: 100%; background: var(--clay); }
[dir="rtl"] .lesson-player__room-line span { margin-inline-start: 0; }
.lesson-player__room-hint { position: absolute; bottom: 14px; inset-inline-start: 22px; font-size: 13px; color: var(--text-muted); }
.is-classroom .lesson-player__room-exit { display: block; position: absolute; top: 18px; inset-inline-end: 22px; min-height: 40px; padding: 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }

/* The grammar page's buttons to the player and the live lesson */
.grammar__play { margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; }
.grammar__plays { flex-wrap: wrap; }

/* The start screen's other way through the lesson (narrated or live) */
.lesson-player__other { font-size: 14px; font-weight: 600; color: var(--clay); text-decoration: underline; }

/* A lesson Genius teaches live (live_lessons/show, live_lesson_controller.js): data-live on the player is idle,
   connecting, listening or speaking. Genius's words are the caption; the student's show on sand while they speak. */
.lesson-player__live-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--clay-soft); color: var(--ink); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.lesson-player__live-badge span { color: var(--clay); }
.lesson-player__mic .lesson-player__icon-mic { display: block; }
.lesson-player[data-live="listening"] .lesson-player__mic, .lesson-player[data-live="speaking"] .lesson-player__mic,
.lesson-player[data-live="connecting"] .lesson-player__mic { background: var(--clay); }
.lesson-player[data-live="listening"] .lesson-player__mic .lesson-player__icon-mic, .lesson-player[data-live="speaking"] .lesson-player__mic .lesson-player__icon-mic,
.lesson-player[data-live="connecting"] .lesson-player__mic .lesson-player__icon-mic { display: none; }
.lesson-player[data-live="listening"] .lesson-player__icon-stop, .lesson-player[data-live="speaking"] .lesson-player__icon-stop,
.lesson-player[data-live="connecting"] .lesson-player__icon-stop { display: block; }
.lesson-player[data-live="listening"] .lesson-player__mic { box-shadow: 0 0 0 0 var(--clay-soft); animation: live-listening 1.8s ease-out infinite; }
@keyframes live-listening { 0% { box-shadow: 0 0 0 0 var(--clay-soft); } 100% { box-shadow: 0 0 0 14px transparent; } }
.lesson-player__live-status { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; min-width: 0; }
.lesson-player__live-state { font-size: 14px; font-weight: 700; }
.lesson-player__live-minutes { font-size: 12px; color: var(--text-muted); }
.lesson-player__buy { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 24px 16px; background: var(--card); }
.lesson-player__buy[hidden] { display: none; }
.lesson-player__caption.is-learner { background: var(--sand); color: var(--ink); }
.lesson-player__caption.is-learner .lesson-player__caption-icon { stroke: var(--text-muted); }
.lesson-slide__extra { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--sand); display: flex; flex-direction: column; gap: 4px; }
.lesson-slide__extra-sentence { margin: 0; font-size: 30px; line-height: 1.6; }
.lesson-slide__extra-meaning { margin: 0; font-size: 17px; color: var(--text-muted); }

@media (max-width: 760px) {
  .lesson-player { border-radius: 0; border-inline: none; }
  .lesson-player__bar { padding: 10px 12px; }
  .lesson-player__room-btn, .lesson-player__keys { display: none; }
  .lesson-player__progress { padding: 10px 16px 0; }
  .lesson-player__main { padding: 12px 12px 14px; }
  .lesson-player__stage { min-height: 360px; padding: 20px 16px; }
  .lesson-slide__title { font-size: 34px; }
  .lesson-slide__para, .lesson-slide__tips li, .lesson-slide__ask { font-size: 17px; }
  .lesson-slide__sentence-text { font-size: 34px; }
  .lesson-slide__reading { font-size: 16px; }
  .lesson-slide__meaning { font-size: 22px; }
  .lesson-slide__note, .lesson-slide__feedback { font-size: 15px; }
  .lesson-slide__summary-title { font-size: 30px; }
  .lesson-slide__gap-line { font-size: 30px; }
  .lesson-slide__gap { min-width: 70px; }
  .lesson-slide__choices { grid-template-columns: repeat(min(var(--choices, 4), 2), minmax(0, 1fr)); }
  .lesson-slide__choice { min-height: 58px; font-size: 24px; }
  .lesson-slide__cell-taught { font-size: 22px; }
  .lesson-slide__table td { padding: 6px 10px; font-size: 15px; }
  .lesson-player__caption { min-height: 64px; padding: 12px 14px; }
  .lesson-player__caption-text { font-size: 16px; }
  .lesson-player__controls { padding: 12px 14px 18px; }
  .lesson-player__transport { order: 1; flex: 1 1 100%; }
  .lesson-player__toggles { order: 2; flex: 1 1 100%; justify-content: center; }
  .lesson-player__live-status { order: 0; flex: 1 1 100%; align-items: center; text-align: center; }
  .lesson-player__live-badge { min-height: 28px; padding: 0 9px; }
  .lesson-player__live-badge-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lesson-slide__extra-sentence { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-slide { animation: none; }
  .lesson-player[data-live="listening"] .lesson-player__mic { animation: none; box-shadow: 0 0 0 4px var(--clay-soft); }
  .lesson-slide__band { transition: none; }
  .lesson-player__spinner { animation-duration: 2.4s; }
}
.lesson-player__room-btn[hidden] { display: none; }

/* How much Genius speaks the language taught (lessons/_language_mix), under the live player. */
.lesson-player__mix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 24px 18px; background: var(--card); }
.lesson-player__mix-label { font-size: 14px; font-weight: 600; }
.lesson-player__mix-options .segmented__option { padding: 7px 14px; font-size: 13px; }
.lesson-player__mix-mark { color: var(--clay); }
.lesson-player__mix-options .segmented__option[aria-pressed="true"] .lesson-player__mix-mark { color: inherit; }
.lesson-player__mix-hint { flex-basis: 100%; font-size: 13px; color: var(--text-muted); }


/* screens/level-up.css */
/* A move-up check's result (level_ups/show, LevelPath) */
.level-up { max-width: 640px; margin: 0 auto; }
.level-up__card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.level-up__title { margin: 0; font-weight: 400; font-size: 34px; line-height: 1.15; font-variant-numeric: lining-nums; }
.level-up__body { margin: 0; color: var(--text-body); max-width: 60ch; }
.level-up__score { margin: 0; font-weight: 700; }
.level-up__skills { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; width: 100%; }
.level-up__skills li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 6px 0; }


/* screens/library.css */
/* Library */

.lib__tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.lib__filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lib__levels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
}
.lib__level {
  background: var(--sand);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 13px;
}
.lib__level:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.lib__level[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* The search box: titles, authors and the words inside the books. */
.lib__filters--end { justify-content: flex-end; }
.lib__search { width: min(100%, 500px); display: flex; flex-direction: column; gap: 8px; }
.lib__search-box {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding-block: 0; padding-inline: 16px 6px;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
}
.lib__search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 0 4px var(--green-soft); }
.lib__search-icon { flex: none; color: var(--text-muted); }
.lib__search-input {
  flex: 1; min-width: 0; height: 44px; padding: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink);
}
.lib__search-input::placeholder { color: var(--text-muted); opacity: 1; }
.lib__search-input::-webkit-search-cancel-button { appearance: none; }
.lib__search-input:dir(rtl) { font-family: var(--font-arabic); font-size: 20px; }
.lib__search-tag {
  flex: none; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700;
}
.lib__search-tag[hidden] { display: none; }
.lib__search-clear {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--text-muted); font-size: 18px; line-height: 1;
}
.lib__search-clear:hover { background: var(--sand); color: var(--ink); }
.lib__search:has(.lib__search-input:placeholder-shown) .lib__search-clear { display: none; }
.lib__search-hint { display: none; margin: 0; padding-inline-start: 16px; font-size: 13px; color: var(--text-body); }
.lib__search-hint .ar { font-size: 16px; }
.lib__search-hint-short { display: none; }
.lib__search:focus-within:has(.lib__search-input:placeholder-shown) .lib__search-hint { display: block; }

/* Tab counts while searching. */
.lib__tab { position: relative; display: inline-flex; align-items: baseline; gap: 6px; }
.lib__tab-count { font-size: 12px; font-weight: 700; opacity: .6; }
.lib__tab[aria-current="page"] .lib__tab-count { opacity: .85; }
.lib__tab.is-empty:not([aria-current="page"]) { color: var(--text-faint); }

/* "The public library" banner */
.lib__public {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 26px;
}
.lib__public-text { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.lib__public-title { font-size: 30px; line-height: 1.1; }
.lib__public-lead { font-size: 15px; line-height: 1.5; color: var(--text-on-dark-muted); }
.lib__public-ar { font-size: 42px; color: var(--peach); }

/* Upload card (a dashed button) */
.lib__upload {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px;
  color: var(--ink);
  text-align: var(--start);
  font: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.lib__upload:hover { background: var(--card); border-color: var(--ink); }
.lib__upload-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; font-size: 14px; }
.lib__upload-title { font-size: 16px; }

/* Book cards */
.lib__card { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.lib__card-tags { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.lib__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.lib__card-ar { font-size: 26px; line-height: 1.5; }
.lib__card-title { font-size: 24px; line-height: 1.1; }
.lib__card-author { font-size: 14px; color: var(--text-muted); margin-top: -6px; }
.lib__card-status { font-size: 14px; color: var(--clay); font-weight: 600; }
.lib__card-progress { display: flex; flex-direction: column; gap: 6px; }
.lib__card-progress .progress { flex: none; height: 5px; }
.lib__card-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.lib__coverage { font-weight: 600; text-align: var(--end); }
.lib__coverage--high { color: var(--green); }
.lib__coverage--mid { color: color-mix(in srgb, var(--gold) 60%, var(--ink)); }
.lib__coverage--low { color: var(--clay); }

.lib__card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.lib__card-note { font-size: 12px; color: var(--text-muted); text-align: var(--end); }

@media (max-width: 600px) {
  .lib__search { width: 100%; order: -1; }
  .lib__search-box { min-height: 48px; padding-block: 0; padding-inline: 14px 2px; gap: 8px; }
  .lib__search-tag { padding: 4px 8px; font-size: 11px; }
  .lib__search-clear { width: 44px; height: 44px; font-size: 20px; }
  .lib__search-hint { padding: 0 6px; }
  .lib__search-hint-more { display: none; }
  .lib__search-hint-short { display: inline; }
}

.lib__card-description { margin: -4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.lib__card-reason { margin: 6px 0 0; font-size: 13px; color: var(--text-body); }

/* Uploads */
.lib__upload { cursor: default; }
.lib__upload.is-busy { opacity: .7; }
.lib__upload-busy { font-size: 14px; font-weight: 600; color: var(--green); }
.lib__upload-button { cursor: pointer; }
.lib__upload:focus-within { border-color: var(--ink); }
.lib__card-status--failed { color: var(--clay-deep); }
.lib__delete { color: var(--clay); }

/* Bookmarks & notes shelf. */
.lib__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lib__note { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.lib__note-link { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.lib__note-link:hover { text-decoration: none; color: var(--clay); }
.lib__note-book { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-size: 22px; }
.lib__note-ar { font-size: 18px; color: var(--text-muted); }
.lib__note-meta { font-size: 13px; color: var(--text-muted); }
.lib__note-body { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }

/* Graded texts shelf: a heading per CEFR level */
.lib__section-title { font-size: 26px; margin: 12px 0 -4px; scroll-margin-top: 16px; }
.lib__section-title .muted { font-family: var(--font-sans); font-size: 14px; }
.lib__section-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lib__own-level { align-self: center; font-family: var(--font-sans); }

/* The kind of Arabic to put first: asked once above the shelves, then a note with "Change". */
.lib__section-kind { color: var(--green); }
.lib-focus {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lib-focus--compact { padding: 14px; margin-top: 10px; }
.lib-focus__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lib-focus__intro { display: flex; flex-direction: column; gap: 4px; }
.lib-focus__title { margin: 0; font-weight: 400; font-size: 32px; line-height: 1.1; }
.lib-focus__lead { margin: 0; font-size: 15px; color: var(--text-on-dark-muted); }
.lib-focus__skip {
  background: none; border: 0; color: var(--text-on-dark-muted); font: inherit; font-size: 14px;
  min-height: 44px; padding: 0 4px; text-decoration: underline; cursor: pointer; flex-shrink: 0;
}
.lib-focus__skip:hover { color: var(--paper); }
.lib-focus__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lib-focus__option {
  background: var(--ink-raised);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: var(--start);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}
.lib-focus__option:hover, .lib-focus__option[aria-pressed="true"] { border-color: var(--peach); }
.lib-focus__ar { font-size: 30px; line-height: 1.4; color: var(--peach); align-self: flex-start; }
.lib-focus__name { font-size: 16px; font-weight: 700; }
.lib-focus__note { font-size: 13px; line-height: 1.4; color: var(--text-on-dark-muted); }

.lib-focus-note { align-self: stretch; }
.lib-focus-note__line {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--sand); border-radius: var(--radius-pill); padding-block: 2px; padding-inline: 16px 6px;
  font-size: 14px; color: var(--text-body); cursor: pointer; list-style: none;
}
.lib-focus-note__line::-webkit-details-marker { display: none; }
.lib-focus-note__line strong { color: var(--ink); }
.lib-focus-note__line::after { content: none; }
.lib-focus-note__change { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; font-weight: 600; color: var(--clay); text-decoration: underline; }
.lib-focus-note[open] .lib-focus-note__change { color: var(--ink); }

/* The shelf just moved to the top, briefly marked. */
.card-grid.is-moved { animation: lib-moved 1.2s ease-out; border-radius: var(--radius-card); }
@keyframes lib-moved { from { box-shadow: 0 0 0 6px var(--peach); background: rgba(233, 180, 143, .18); } to { box-shadow: 0 0 0 6px transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .card-grid.is-moved { animation: none; } }

@media (max-width: 700px) {
  .lib-focus { padding: 18px; gap: 12px; }
  .lib-focus__head { gap: 8px; }
  .lib-focus__title { font-size: 26px; }
  .lib-focus__options { grid-template-columns: 1fr; }
  .lib-focus__option { padding: 12px 14px; gap: 2px; }
  .lib-focus__ar { font-size: 24px; }
  .lib-focus__name { font-size: 15px; }
}

/* "Continue reading": the books in progress, at the top of All, ruled off from the shelves. */
.lib-continue { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.lib-continue__head { display: flex; align-items: baseline; gap: 12px; }
.lib-continue__title { margin: 0; font-weight: 400; font-size: 30px; line-height: 1; }
.lib-continue__count { font-size: 14px; color: var(--text-muted); }
/* Three slots, so a lone card keeps its third rather than stretching; a fourth for "See all". */
.lib-continue__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lib-continue__list--more { grid-template-columns: repeat(3, minmax(0, 1fr)) 200px; }
.lib-continue__more {
  border: 1.5px dashed var(--line-dashed); border-radius: var(--radius-card); padding: 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px; color: var(--ink);
}
.lib-continue__more:hover { background: var(--card); border-color: var(--ink); text-decoration: none; color: var(--ink); }
.lib-continue__more-n { font-size: 40px; line-height: 1; }
.lib-continue__more-label { font-size: 15px; font-weight: 700; }
.lib-continue__more-total { display: none; }
.lib-continue__more-sub { font-size: 13px; color: var(--text-muted); }

/* A book in progress (Continue reading, and Today): the whole card opens it. */
.lib-resume { position: relative; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lib-resume:hover { border-color: var(--ink); }
.lib-resume:focus-within { border-color: var(--ink); }
.lib-resume__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lib-resume__when { font-size: 12px; color: var(--text-muted); }
.lib-resume__titles { display: flex; flex-direction: column; min-width: 0; }
.lib-resume__ar { font-size: 24px; line-height: 1.5; align-self: flex-start; }
.lib-resume__title { margin: 0; font-weight: 400; font-size: 22px; line-height: 1.1; }
.lib-resume__progress { display: flex; flex-direction: column; gap: 6px; }
.lib-resume__page { font-size: 13px; font-weight: 600; color: var(--ink-line); }
.lib-resume__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; min-height: 44px; }
.lib-resume__coverage { font-size: 13px; font-weight: 600; line-height: 1.3; }
.lib-resume__go { min-height: 44px; padding: 0 20px; flex-shrink: 0; }
.lib-resume__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the card is the link */
.lib-resume__go:focus-visible { outline-offset: 3px; }

.progress--reading { height: 5px; flex: none; }
.lib-resume__ar { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* an upload's title can be a whole sentence */
.lib__card-reading { font-weight: 700; color: var(--ink); }

/* "See all in progress": the shelf filtered to books in progress. */
.lib-progress-filter {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sand); border-radius: var(--radius-md); padding: 12px 16px; font-size: 14px;
}
.lib-progress-filter__clear { font-weight: 600; }

@media (max-width: 900px) {
  .lib-continue__list, .lib-continue__list--more { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lib-continue__more { flex-direction: row; justify-content: center; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-md); }
  .lib-continue__more-n, .lib-continue__more-sub { display: none; }
  .lib-continue__more-total { display: inline; }
}
@media (max-width: 700px) {
  .lib-continue { gap: 10px; padding-bottom: 20px; }
  .lib-continue__head { justify-content: space-between; }
  .lib-continue__title { font-size: 26px; }
  .lib-continue__count { font-size: 13px; }
  .lib-resume { padding: 14px 16px; gap: 8px; border-radius: 16px; }
  .lib-resume__ar { font-size: 20px; }
  .lib-resume__title { font-size: 21px; }
  /* The shelf tabs scroll sideways in their own row. */
  .lib__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); max-width: 100vw; }
  .lib__tabs > * { flex-shrink: 0; white-space: nowrap; }
}

/* Search results, in place of the shelves (library/_search). */
.lib-search { display: flex; flex-direction: column; gap: 22px; }
.lib-search__summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.lib-search__count { margin: 0; font-size: 28px; line-height: 1.2; }
.lib-search__q { font-size: 26px; }
.lib-search__filters { font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); }
.lib-search__clear { font-size: 14px; font-weight: 600; white-space: nowrap; }
.lib-search__busy { display: none; margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--text-body); }
.lib-search.is-searching .lib-search__busy { display: block; }
.lib-search.is-searching > :not(.lib-search__summary, .lib-search__busy) { opacity: .45; transition: opacity .2s; }

.lib-search__group { display: flex; flex-direction: column; gap: 12px; }
.lib-search__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lib-search__h { margin: 0; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.lib-search__order { font-size: 13px; color: var(--text-muted); }
.lib-search__more-link { font-size: 14px; font-weight: 600; }

/* The hit, in titles and excerpts. */
.lib-hit {
  background: var(--mark); color: var(--ink); font-weight: 700; border-radius: 3px; padding: 0 2px;
  text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* The dictionary word searched, and its forms. */
.lib-word {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.lib-word__ar { font-size: 38px; line-height: 1.3; }
.lib-word__text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.lib-word__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-word__gloss { font-size: 17px; }
.lib-word__note { font-size: 13px; color: var(--text-body); }
.lib-word__note .ar { font-size: 16px; }
.lib-word__link { font-weight: 600; }
.lib-word__forms { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-form {
  display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding-block: 0; padding-inline: 12px 4px;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink);
}
.lib-form__ar { font-size: 19px; line-height: 1; }
.lib-form__remove {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; color: var(--text-muted); font-size: 15px;
}
.lib-form__remove:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.lib-form--off { padding: 0 12px; background: transparent; border-style: dashed; color: var(--text-muted); gap: 6px; }
.lib-form--off:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }

/* English: the Arabic words searched, as checkboxes. */
.lib-word--english { flex-direction: column; align-items: stretch; gap: 12px; }
.lib-word__lead { margin: 0; font-size: 15px; }
.lib-english { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-english__form { display: contents; }
.lib-english__word {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 6px; padding-inline: 10px 14px;
  background: transparent; border: 1.5px solid var(--line-strong); border-radius: 12px;
  color: var(--ink); font: inherit; cursor: pointer; opacity: .75;
}
.lib-english__word[aria-checked="true"] { background: var(--field); border-color: var(--ink); opacity: 1; }
.lib-english__word:hover { border-color: var(--ink); opacity: 1; }
.lib-english__box {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px;
  border: 2px solid var(--line-dashed); border-radius: 4px; color: var(--paper); font-size: 12px; font-weight: 700;
}
.lib-english__word[aria-checked="true"] .lib-english__box { border-color: var(--green); background: var(--green); }
.lib-english__ar { font-size: 22px; line-height: 1; }
.lib-english__en { font-size: 13px; color: var(--text-body); }

/* Title and author matches: one compact row. */
.lib-titles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lib-title {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink);
}
.lib-title:hover { border-color: var(--line-strong); background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.lib-title__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-title__en { font-size: 20px; line-height: 1.1; }
.lib-title__meta { font-size: 12px; color: var(--text-muted); }
.lib-title__meta strong { color: var(--ink); }
.lib-title__ar { font-size: 20px; line-height: 1.4; text-align: start; }

/* Inside the books: one card per book, with lines from its pages. */
.lib-search__ocr {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px;
  background: var(--sand); border-radius: 12px; font-size: 14px; color: var(--ink-line);
}
.lib-search__ocr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); }
.lib-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lib-result {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  scroll-margin-top: 16px;
}
.lib-result__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.lib-result__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lib-result__title { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.1; }
.lib-result__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.lib-result__pages { color: var(--ink); font-weight: 600; }
.lib-result__ar { flex: 0 1 auto; max-width: 50%; font-size: 26px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-only {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: var(--ink);
}
.lib-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.lib-lines li { border-bottom: 1px solid var(--line-soft); }
.lib-line { display: flex; align-items: center; gap: 18px; padding: 8px 6px; border-radius: 8px; color: var(--ink); }
.lib-line:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.lib-line__page { flex: none; width: 58px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.lib-line__text {
  flex: 1; min-width: 0; font-size: 21px; line-height: 1.9; text-align: start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-line__near { display: none; }
.lib-line__go { flex: none; color: var(--text-faint); font-size: 15px; }
.lib-result__toggle { align-self: flex-start; padding: 6px 2px; font-size: 14px; font-weight: 600; }
.lib-result__rest { margin: 0; font-size: 14px; color: var(--text-body); }
.lib-search__more { align-self: center; min-height: 46px; padding: 0 24px; border-width: 1.5px; font-weight: 600; }

/* No matches, or too common a word. */
.lib-search__state {
  display: flex; flex-direction: column; gap: 14px; max-width: 720px; padding: 36px 40px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.lib-search__state p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-line); }
.lib-search__state .lib-search__state-title { font-size: 32px; line-height: 1.15; color: var(--ink); }
.lib-search__state .muted { font-size: 14px; color: var(--text-muted); }
.lib-search__state .ar { font-size: 1.15em; }
.lib-search__ways { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-line); }
.lib-search__ways a { font-weight: 600; }

@media (max-width: 900px) {
  .lib-titles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-titles:not(.is-all) .lib-title:nth-child(n + 3) { display: none; }
}

@media (max-width: 600px) {
  .lib-search { gap: 14px; }
  .lib-search__summary { gap: 10px; padding-bottom: 12px; }
  .lib-search__count { font-size: 22px; line-height: 1.25; }
  .lib-search__q { font-size: 21px; }
  .lib-search__filters { display: block; }
  .lib-search__clear { min-height: 44px; display: inline-flex; align-items: center; }
  .lib-search__clear-more { display: none; }
  .lib-search__busy { font-size: 20px; }
  .lib-search__h { font-size: 12px; }
  .lib-search__order { display: none; }
  .lib-search__ocr-names { display: none; }

  .lib-word { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 14px; border-radius: var(--radius-md); }
  .lib-word__ar { grid-column: 2; grid-row: 1; font-size: 30px; }
  .lib-word__text { grid-column: 1; grid-row: 1; }
  .lib-word__forms { grid-column: 1 / -1; }
  .lib-word--english { display: flex; }
  .lib-word__gloss { font-size: 15px; }
  .lib-word__note { font-size: 12px; }
  .lib-form { min-height: 44px; padding-block: 0; padding-inline: 12px 0; }
  .lib-form__ar { font-size: 18px; }
  .lib-form__remove { width: 36px; height: 44px; border-radius: 0; }
  .lib-word__lead { font-size: 14px; }
  .lib-word__lead-more { display: none; }
  .lib-english { flex-direction: column; }
  .lib-english__word { width: 100%; padding-block: 4px; padding-inline: 10px 12px; }
  .lib-english__en { flex: 1; text-align: var(--start); }
  .lib-english__ar { order: 3; font-size: 21px; }
  .lib-english .level-pill { order: 2; }

  .lib-titles { grid-template-columns: minmax(0, 1fr); }
  .lib-titles:not(.is-all) .lib-title:nth-child(n + 2) { display: none; }
  .lib-title { padding: 12px 14px; }
  .lib-title__en { font-size: 19px; }
  .lib-title__ar { font-size: 19px; }

  .lib-result { gap: 8px; padding: 14px 14px 8px; border-radius: 16px; }
  .lib-result__head { flex-direction: column-reverse; gap: 4px; }
  .lib-result__title { font-size: 21px; }
  .lib-result__ar { font-size: 19px; align-self: flex-end; max-width: 100%; }
  .lib-result__meta { gap: 6px; font-size: 12px; }
  .lib-line { min-height: 48px; gap: 10px; padding: 4px 2px; }
  .lib-line__page { width: 46px; font-size: 12px; }
  .lib-line__text { font-size: 19px; text-overflow: clip; }
  .lib-line__far, .lib-line__go { display: none; }
  .lib-line__near { display: inline; }
  .lib-result__toggle { min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
  .lib-search__more { align-self: stretch; min-height: 48px; justify-content: center; }
  .lib-search__more-count { display: none; }

  .lib-search__state { padding: 20px; gap: 10px; border-radius: 16px; }
  .lib-search__state .lib-search__state-title { font-size: 26px; }
  .lib-search__ways { padding: 0; list-style: none; gap: 0; }
  .lib-search__ways li { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 15px; }
}

/* Related passages: found by meaning (library/_related). Second to the word
   results: outlined cards, not filled ones. */
.lib-search__related { color: var(--green); }
.lib-related { display: flex; flex-direction: column; gap: 14px; }
.lib-related--second { border-top: 1px solid var(--line-strong); padding-top: 28px; }
.lib-related__head { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.lib-related__h { margin: 0; font-size: 34px; font-weight: 400; line-height: 1; }
.lib-related--second .lib-related__h { font-size: 30px; }
.lib-related__note { font-size: 14px; color: var(--text-body); }
.lib-related__info-button {
  order: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.lib-related__info-button:hover, .lib-related__info-button[aria-expanded="true"] { border-color: var(--ink); }
.lib-related__info-sr { display: none; }
.lib-related__i {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-family: var(--font-serif); font-style: italic; font-size: 11px; font-weight: 700;
}
.lib-related__info { margin: 0; max-width: 760px; padding: 12px 16px; background: var(--sand); border-radius: 12px; font-size: 14px; line-height: 1.55; }
.lib-related__info-more { color: var(--ink-line); }
.lib-related__status { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--text-body); }
.lib-related__placeholder {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 22px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
}
.lib-related__placeholder span { height: 14px; border-radius: 6px; background: var(--line-soft); }
.lib-related__placeholder span:nth-child(1) { width: 260px; height: 18px; background: var(--sand); }
.lib-related__placeholder span:nth-child(2) { width: 150px; height: 12px; background: var(--sand); }
.lib-related__placeholder span:nth-child(3) { align-self: flex-end; width: min(600px, 80%); }
.lib-related__placeholder span:nth-child(4) { align-self: flex-end; width: min(520px, 70%); }
.lib-related__quiet { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.lib-related__quiet .ar { font-size: 1.15em; }
.lib-related__books { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lib-related__tier {
  display: flex; align-items: center; gap: 12px; padding-top: 6px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--text-muted);
}
.lib-related__tier::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lib-related__book {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-card); scroll-margin-top: 16px;
}
.lib-related__title { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.1; }
.lib-lines--related { border-top-color: var(--line); }
.lib-lines--related li { border-bottom-color: var(--line); }
.lib-lines--related .lib-line:hover { background: var(--sand); }
.lib-line__text--related { font-size: 20px; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .lib-related { gap: 10px; }
  .lib-related--second { padding-top: 20px; }
  .lib-related__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; }
  .lib-related__h, .lib-related--second .lib-related__h { font-size: 26px; }
  .lib-related__info-button { order: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .lib-related__i { width: auto; height: auto; border: 0; font-size: 18px; font-weight: 400; }
  .lib-related__info-label { display: none; }
  .lib-related__info-sr { display: inline; }
  .lib-related__note { grid-column: 1 / -1; margin-top: -4px; font-size: 13px; }
  .lib-related__info { padding: 10px 12px; font-size: 13px; line-height: 1.5; }
  .lib-related__status { font-size: 20px; }
  .lib-related__placeholder { padding: 16px; border-radius: 16px; }
  .lib-related__placeholder span:nth-child(1) { width: 170px; }
  .lib-related__placeholder span:nth-child(2) { display: none; }
  .lib-related__tier { font-size: 11px; gap: 10px; }
  .lib-related__book { gap: 6px; padding: 14px 14px 6px; border-radius: 16px; }
  .lib-related__title { font-size: 20px; }
  .lib-line__text--related { font-size: 18px; }
}

/* The Uploaded tab's two ways to add a text: a file, or an article from
   the language's Wikipedia (WikipediaController); and the link under search results. */
.lib__add-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.lib__add-cards > *, .lib__upload-text, .lib__wiki-head { min-width: 0; }
.lib__wiki { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } /* one line: a wrapping column would size its items to their longest line */
.lib__wiki-head { display: flex; align-items: flex-start; gap: 14px; }
.lib__wiki-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-sm); background: var(--sand); font-family: var(--font-serif); font-size: 22px; color: var(--ink);
}
.lib__wiki-mark--sm { width: 22px; height: 22px; border-radius: 50%; font-size: 13px; border: 1px solid var(--line-strong); background: none; }
.lib__wiki-search { display: flex; align-items: center; gap: 8px; }
.lib__wiki-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--field); font: inherit; font-size: 15px; color: var(--ink);
}
.lib__wiki-input:dir(rtl), .lib__wiki-input:placeholder-shown { font-family: var(--font-arabic); font-size: 18px; }
/* A right-to-left language's placeholder sits on the right (a left-to-right one's input says dir="ltr"). */
.lib__wiki-input:not([dir="ltr"]):placeholder-shown { direction: rtl; text-align: right; /* physical: text in the language taught keeps its own side */ }
.lib__wiki-input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.lib-search__wikipedia { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; font-size: 14px; }
.lib-search__wikipedia a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.lib-search__wikipedia .ar { font-size: 18px; }

/* ------------------------------------------------------------------
   Library redesign (design "Library Redesign"): For you, Browse, Shelves.
   ------------------------------------------------------------------ */

.library { display: flex; flex-direction: column; gap: 28px; }
.library__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.library__title { margin: 0; }
.library__tabs { display: inline-flex; padding: 4px; gap: 2px; background: var(--sand); border-radius: var(--radius-pill); }
.library__tab {
  padding: 9px 22px; border-radius: var(--radius-pill);
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.library__tab:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.library__tab[aria-current="page"] { background: var(--ink); color: var(--paper); }
.library__tab--locked { color: var(--text-muted); }
.library__section { display: flex; flex-direction: column; gap: 14px; }
.library__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.library__h2 { margin: 0; font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.library__level-chip { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: 12px; font-weight: 700; }
.library__see-all { font-size: 13px; font-weight: 600; color: var(--clay); white-space: nowrap; }
.library__more-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.library__place { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; color: var(--ink); text-decoration: none; }

/* Rows of cards: a grid on a computer, scrolling sideways on a phone. */
.book-row, .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.book-row--continue { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* The book card. */
.book-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
}
/* The whole card opens the book: Start or Resume reaches over it (a click anywhere is that link); the card's own
   controls (⋯ and its menu, Retry, Sign up) sit above it. Dragging in Browse still works (the link isn't draggable). */
.book-card__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.book-card__tools, .book-card__signup, .book-card__foot form, .book-card__status { position: relative; z-index: 2; }
.book-card:has(.book-card__open):hover { border-color: var(--line-strong); }
.book-card.is-dragging { opacity: .55; border-style: dashed; border-color: var(--line-dashed, var(--line-strong)); }
.book-card.is-menu-open { z-index: 5; }
.book-card__top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.book-card__tag { padding: 3px 7px; border-radius: var(--radius-sm); background: var(--sand); color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.book-card__only { font-size: 11px; color: var(--text-muted); }
.book-card__tools { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.book-card__saved { display: inline-flex; color: var(--green); }
.book-card__saved .icon { width: 14px; height: 14px; fill: currentColor; }
.book-card__more {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: none; color: var(--ink);
}
.book-card__more:hover, .book-card__more[aria-expanded="true"] { background: var(--sand); }
.book-card__menu {
  position: absolute; inset-inline-end: 8px; top: 44px; z-index: 10; min-width: 210px;
  display: flex; flex-direction: column; padding: 6px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-input); box-shadow: 0 12px 32px rgb(0 0 0 / .16);
}
.book-card__menu[hidden] { display: none; }
.book-card__form { display: contents; }
.book-card__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: start; text-decoration: none;
}
.book-card__item:hover, .book-card__item:focus-visible { background: var(--sand); color: var(--ink); text-decoration: none; }
.book-card__item .icon { width: 16px; height: 16px; flex: none; }
.book-card__item--danger { color: var(--clay); }
.book-card__native { margin: 0; font-size: 22px; line-height: 1.5; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.book-card__title {
  margin: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 400; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-card__title--none { font-family: var(--font-sans); font-size: 13px; font-style: italic; color: var(--text-muted); }
.book-card__meta { margin: 0; font-size: 12px; color: var(--text-muted); }
.book-card__shelves { display: flex; align-items: flex-start; gap: 5px; margin: 4px 0 0; font-size: 11px; font-weight: 700; color: var(--green); }
.book-card__shelves .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.book-card__progress { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin-top: 8px; font-size: 12px; }
.book-card__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.book-card__bar span { display: block; height: 100%; background: var(--green); border-radius: 2px; }
.book-card__reason { margin: 6px 0 0; font-size: 11px; color: var(--text-muted); }
.book-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; flex-wrap: wrap; }
.book-card__coverage { font-size: 12px; font-weight: 700; }
.book-card__coverage--high { color: var(--green); }
.book-card__coverage--mid { color: var(--gold-deep); }
.book-card__coverage--low { color: var(--clay); }
.book-card__status { font-size: 12px; color: var(--text-muted); }
.book-card__status--failed { color: var(--clay); }
.book-card__signup { font-size: 12px; font-weight: 600; }
.book-card .btn--sm { border-radius: var(--radius-pill); }

/* Shelf tiles. */
.shelf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shelf-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; min-height: 150px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none; font: inherit; text-align: start;
}
.shelf-tile:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.shelf-tile__stack { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; min-height: 76px; }
.shelf-tile__spine {
  display: block; padding: 2px 8px; border-radius: 4px; font-size: 13px; line-height: 1.5;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: end;
}
.shelf-tile__spine--0 { background: var(--sand); }
.shelf-tile__spine--1 { background: var(--clay-soft); }
.shelf-tile__spine--2 { background: var(--green-soft); }
.shelf-tile__hint { font-size: 12px; color: var(--text-muted); }
.shelf-tile__name { font-size: 14px; }
.shelf-tile__count { font-size: 12px; color: var(--text-muted); }
.shelf-tile--new { align-items: center; justify-content: center; border-style: dashed; background: none; cursor: pointer; }
.shelf-tile--new .icon { width: 22px; height: 22px; }
.shelf-tiles__invite p { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Find something to read. */
.library-find { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.library-find__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.library-find__label { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.library-find__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.library-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 13px; text-decoration: none;
}
.library-chip:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.library-chip.is-own { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.library-chip__count { color: var(--text-muted); font-size: 12px; }
.library-chip.is-own .library-chip__count { color: var(--text-on-dark-muted); }
.library-chip--strong { font-weight: 700; }

/* Adding: an upload and Wikipedia, side by side. */
.library-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.library-add__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
}
.library-add__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sand); flex: none; font-family: var(--font-serif); font-weight: 700; }
.library-add__text { display: flex; flex-direction: column; flex: 1; min-width: 160px; font-size: 13px; }
.library-add__search { display: flex; gap: 6px; flex: 1 1 220px; }
.library-add__search .input { flex: 1; min-width: 0; }

/* Messages with Undo. */
.library-toast { position: fixed; inset-inline: 0; bottom: 24px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.library-toast__message {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); box-shadow: 0 10px 28px rgb(0 0 0 / .25);
  font-size: 14px; pointer-events: auto;
}
.library-toast__form { display: contents; }
.library-toast__undo { border: 0; background: none; color: var(--peach, var(--paper)); font: inherit; font-weight: 700; text-decoration: underline; }
.library-toast__close { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--paper); }
.library-toast__close .icon { width: 14px; height: 14px; }

/* Add to shelf…: a box on a computer, a sheet from the bottom on a phone. */
.shelf-picker {
  width: min(380px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: var(--card); color: var(--ink); box-shadow: 0 20px 50px rgb(0 0 0 / .25);
}
.shelf-picker::backdrop { background: rgb(20 24 22 / .35); }
.shelf-picker turbo-frame { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.shelf-picker__loading { margin: 0; }
.shelf-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shelf-picker__title { margin: 0; font-size: 16px; }
.shelf-picker__close { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink); flex: none; }
.shelf-picker__close:hover { background: var(--sand); }
.shelf-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.shelf-picker__form { display: contents; }
.shelf-picker__row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: start;
}
.shelf-picker__row:hover { background: var(--sand); }
.shelf-picker__box { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 5px; font-size: 13px; flex: none; }
.shelf-picker__row[aria-checked="true"] .shelf-picker__box { background: var(--green); border-color: var(--green); color: var(--paper); }
.shelf-picker__new { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.shelf-picker__new-label { font-size: 13px; font-weight: 700; }
.shelf-picker__new-row { display: flex; gap: 8px; }
.shelf-picker__new-row .input { flex: 1; min-width: 0; }
.shelf-picker__foot { display: flex; justify-content: flex-end; }

/* Browse: filters beside the books, and the shelves to drop on. */
.browse { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.browse--shelves { grid-template-columns: 220px minmax(0, 1fr) 200px; }
.browse__form { display: contents; }
.browse__bar { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.browse__search {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding-inline: 16px;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text-muted);
}
.browse__search:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 0 4px var(--green-soft); }
.browse__search-input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.browse__search-input::placeholder { color: var(--text-muted); opacity: 1; }
.browse__sort { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 14px; min-height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--card); font-size: 13px; }
.browse__sort-label { color: var(--text-muted); }
.browse__sort-select { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); padding: 8px 4px; }
.browse__filters-open { display: none; }
.browse__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 11px; }
.browse__filters { grid-column: 1; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-inline-end: 4px; }
.browse__sheet-head, .browse__sheet-foot { display: none; }
.browse__filters-title { margin: 0; font-size: 18px; }
.browse__group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.browse__legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.browse__levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.browse__level {
  display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; font-size: 13px;
}
.browse__level.is-own { border-color: var(--green); }
.browse__level:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.browse__level:has(input:checked) .browse__count { color: var(--text-on-dark-muted); }
.browse__level:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.browse__level-name { font-weight: 700; }
.browse__note { margin: 4px 0 0; font-size: 12px; color: var(--green); font-weight: 600; }
.browse__option { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.browse__option input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.browse__option.is-empty { color: var(--text-muted); }
.browse__count { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); }
.browse__main { grid-column: 2; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.browse__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.browse__chip { display: inline-flex; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; text-decoration: none; }
.browse__chip:hover { color: var(--paper); background: var(--ink-raised, var(--ink)); text-decoration: none; }
.browse__clear { font-size: 13px; text-decoration: underline; }
.browse__summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.browse__total { margin: 0; font-family: var(--font-serif); font-size: 26px; color: var(--ink); }
.browse__hidden-link { font-size: 13px; color: var(--text-muted); text-decoration: underline; }
.browse__more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.browse__shown { margin: 0; font-size: 13px; color: var(--text-muted); }
.browse-empty { padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.browse-empty__title { margin: 0 0 8px; font-family: var(--font-serif); font-size: 22px; }
.browse-empty__ways { margin: 8px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.browse .lib-search { grid-column: auto; }

/* The shelves to drop a card on. */
.drop-shelves { grid-column: 3; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.drop-shelves__title { margin: 0; font-size: 15px; }
.drop-shelves__hint { margin: 0; font-size: 12px; color: var(--text-muted); }
.drop-shelves__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.drop-shelf {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 10px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius-input); font-size: 13px; background: var(--paper);
}
.drop-shelf__icon { display: inline-flex; color: var(--text-muted); }
.drop-shelf__icon .icon { width: 15px; height: 15px; }
.drop-shelf__name { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-shelf__count { font-size: 12px; color: var(--text-muted); }
.drop-shelf--new { border-style: dashed; }
.is-dragging-book .drop-shelf { border-style: dashed; border-color: var(--line-strong); }
.drop-shelf.is-over { border: 2px dashed var(--green); background: var(--green-soft); }
.drop-shelf.is-over::after {
  content: attr(data-drop-label); position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: inherit; background: var(--green-soft); color: var(--green-deep, var(--green)); font-weight: 700;
}

/* A shelf's page. */
.shelf-page__crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.shelf-page__crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.shelf-page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.shelf-page__head p { margin: 4px 0 0; }
.shelf-page__title { margin: 0; }
.shelf-page__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shelf-page__actions form { display: inline; }
.shelf-page__rename { position: relative; }
.shelf-page__rename summary { list-style: none; }
.shelf-page__rename summary::-webkit-details-marker { display: none; }
.shelf-page__rename-form {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 5; display: flex; gap: 6px; padding: 10px; width: 300px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-input); box-shadow: 0 12px 32px rgb(0 0 0 / .14);
}
.shelf-page__rename-form .input { flex: 1; min-width: 0; }
.shelf-page__empty { padding: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.shelf-page__empty p { margin: 0; }
.shelf-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shelf-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 60px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-input);
}
.shelf-row.is-dragging { opacity: .5; border-style: dashed; }
.shelf-row.is-lifted { border: 2px solid var(--green); box-shadow: 0 10px 24px rgb(0 0 0 / .12); }
.shelf-row__handle { display: inline-grid; place-items: center; width: 32px; height: 40px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: grab; flex: none; }
.shelf-row__handle:hover { background: var(--sand); color: var(--ink); }
.shelf-row__number { width: 22px; text-align: center; font-size: 13px; color: var(--text-muted); flex: none; }
.shelf-row__titles { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; overflow: hidden; }
.shelf-row__native { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.shelf-row__title { font-family: var(--font-serif); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-row__level { padding: 2px 7px; border-radius: var(--radius-sm); background: var(--sand); font-size: 11px; font-weight: 700; flex: none; }
.shelf-row__coverage { flex: none; min-width: 90px; }
.shelf-row__go { flex: none; border-radius: var(--radius-pill); }
.shelf-row__moves { display: flex; gap: 2px; opacity: 0; flex: none; }
.shelf-row:hover .shelf-row__moves, .shelf-row:focus-within .shelf-row__moves { opacity: 1; }
.shelf-row__move, .shelf-row__remove, .shelf-row__more {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; color: var(--text-muted); font-size: 15px;
}
.shelf-row__move:hover, .shelf-row__remove:hover, .shelf-row__more:hover { background: var(--sand); color: var(--ink); }
.shelf-row__remove .icon { width: 14px; height: 14px; }
.shelf-row__remove-form { display: contents; }
.shelf-row__menu-wrap { position: relative; display: none; }
.shelf-row__menu-wrap .book-card__menu { top: 36px; inset-inline-end: 0; }

@media (max-width: 1100px) {
  .browse--shelves { grid-template-columns: 220px minmax(0, 1fr); }
  .drop-shelves { display: none; }
}

@media (max-width: 760px) {
  .library { gap: 22px; }
  .library__head { flex-direction: column; align-items: stretch; }
  .library__tabs { justify-content: space-between; }
  .library__tab { flex: 1; text-align: center; padding-inline: 10px; }
  .library__h2 { font-size: 22px; }
  .book-row, .book-row--continue {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px;
  }
  .book-row .book-card { flex: 0 0 min(76vw, 260px); scroll-snap-align: start; }
  .book-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .book-card { padding: 12px; }
  .book-card__native { font-size: 19px; }
  .shelf-tiles { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .shelf-tile { flex: 0 0 150px; }

  .browse, .browse--shelves { grid-template-columns: minmax(0, 1fr); }
  .browse__main { grid-column: 1; }
  .browse__filters-open { display: inline-flex; gap: 6px; align-items: center; }
  .browse__search { flex-basis: 100%; }
  .browse__filters {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 70; max-height: 85vh; padding: 18px 18px 0;
    background: var(--card); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: 0 -12px 40px rgb(0 0 0 / .25);
    transform: translateY(105%); transition: transform .2s ease; visibility: hidden;
  }
  .browse__filters.is-open { transform: none; visibility: visible; }
  .browse__sheet-head { display: flex; justify-content: space-between; align-items: center; }
  .browse__sheet-close { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); }
  .browse__sheet-foot {
    display: flex; gap: 10px; position: sticky; bottom: 0; padding: 12px 0 18px; background: var(--card); border-top: 1px solid var(--line);
  }
  .browse__show { flex: 1; }
  .browse__option { min-height: 44px; }
  body.has-sheet { overflow: hidden; }

  .shelf-picker { margin: auto 0 0; width: 100%; max-width: none; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .shelf-picker__row { min-height: 52px; }

  .shelf-row { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .shelf-row__titles { flex-basis: calc(100% - 120px); flex-direction: column; gap: 0; }
  .shelf-row__native { max-width: 100%; }
  .shelf-row__moves, .shelf-row__remove-form, .shelf-row__remove { display: none; }
  .shelf-row__menu-wrap { display: block; }
  .shelf-row__coverage { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .browse__filters { transition: none; }
}
.book-card__top { flex-wrap: wrap; min-width: 0; }
.book-card__tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.book-card__tools { order: 9; }
@media (max-width: 760px) {
  .book-card__top .source-tag { display: none; }
}
/* Browse's search: the hint under the box while it's empty and focused; × once something is typed. */
.browse__hint { flex-basis: 100%; order: 9; }
.browse__bar:focus-within:has(.browse__search-input:placeholder-shown) .browse__hint { display: block; }
.browse__search:has(.browse__search-input:placeholder-shown) .lib__search-clear { display: none; }
.browse__search-input::-webkit-search-cancel-button { appearance: none; }
.browse__search-input:dir(rtl) { font-family: var(--font-arabic); font-size: 20px; }
.book-card__next { grid-column: 1 / -1; font-size: 11px; font-weight: 700; }
.drop-shelf--new { padding: 0; }
.drop-shelf__new {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: inherit;
  background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer;
}
.drop-shelf__new:hover { background: var(--sand); }


/* screens/listen-first.css */
/* Listen first (listen_first/show): three steps, Listen · Answer · Read.
   Numbered rows with soft length bars stand in for the hidden sentences;
   right and wrong carry ✓ / ✗ in words. */
.lf { max-width: 920px; margin: 0 auto; gap: 14px; }
.lf__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lf__end { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
           color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.lf__end:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.lf__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.lf__step { display: flex; align-items: center; gap: 6px; padding-block: 4px; padding-inline: 5px 11px; border-radius: var(--radius-pill); color: var(--text-body); font-size: 13px; font-weight: 700; }
.lf__step[aria-current="step"] { background: var(--ink); color: var(--paper); }
.lf__step-dot { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 11px; }
.lf__step[aria-current="step"] .lf__step-dot { background: var(--peach); }
.lf__step.is-done .lf__step-dot { background: var(--green-soft); }
.lf__level { min-width: 90px; text-align: var(--end); font-size: 14px; font-weight: 700; }
.lf__progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lf__progress-bar { display: block; height: 100%; width: 8%; background: var(--ink); transition: width .2s; }

.lf__main { width: 100%; max-width: 820px; align-self: center; display: flex; flex-direction: column; gap: 14px; }
.lf__head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.lf__kicker { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.lf__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; }
.lf__meta { font-size: 14px; color: var(--text-body); }
.lf__tag { padding: 1px 7px; border-radius: 6px; background: var(--sand); color: var(--ink); font-weight: 700; }

/* The hidden text */
.lf__hidden { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.lf__hidden[hidden] { display: none; }
.lf__hidden-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lf__hidden-note { font-size: 13px; color: var(--ink-line); font-weight: 600; }
.lf__translate { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lf__translate:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.lf__used { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--sand); font-size: 12px; font-weight: 700; }
.lf__used[hidden], .lf__translate[hidden] { display: none; }
.lf__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lf__row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--line-soft); border-radius: 12px; }
.lf__row.is-current { background: var(--mark); border-color: var(--peach); }
.lf__n { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sand); font-size: 12px; font-weight: 700; }
.lf__row.is-current .lf__n { background: var(--ink); color: var(--paper); }
.lf__row.is-heard .lf__n { background: var(--green-soft); }
.lf__en { flex: 1; min-width: 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.3; }
.lf__len { flex: 1; display: flex; justify-content: flex-end; }
.lf__len[hidden], .lf__en[hidden] { display: none; }
.lf__len > span { display: block; height: 10px; border-radius: 6px; background: var(--line); }
.lf__row.is-current .lf__len > span { background: var(--peach); }
.lf__row.is-heard .lf__len > span { background: var(--line-strong); }
.lf__row-tag { min-width: 84px; text-align: var(--end); white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--green); }
.lf__row.is-current .lf__row-tag { color: var(--ink); }

/* The quiz */
.lf__quiz { display: flex; flex-direction: column; gap: 12px; }
.lf__quiz[hidden] { display: none; }
.lf__quiz-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; }
.lf__score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: var(--paper); }
.lf__score[hidden] { display: none; }
.lf__score-big { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.lf__score-note { font-size: 13px; color: var(--text-on-dark-muted); }
.lf__question { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.lf__legend { float: inline-start; width: 100%; padding: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 700; }
.lf__mark { font-size: 13px; white-space: nowrap; }
.lf__mark.is-right { color: var(--right); }
.lf__mark.is-wrong { color: var(--wrong); }
.lf__options { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lf__option { min-height: 52px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center;
              border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--field); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.lf__option:hover:not(:disabled) { border-color: var(--ink); }
.lf__option:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.lf__option:disabled { cursor: default; }
.lf__option-tag { font-size: 12px; font-weight: 700; }
.lf__option-tag:empty { display: none; }
.lf__option.is-chosen { border: 2px solid var(--ink); }
.lf__option.is-right { background: var(--right-soft); border: 2px solid var(--right); }
.lf__option.is-right .lf__option-tag { color: var(--right); }
.lf__option.is-wrong { background: var(--wrong-soft); border: 2px solid var(--wrong); }
.lf__option.is-wrong .lf__option-tag { color: var(--wrong); }
.lf__option.is-dim { background: transparent; border-color: var(--line); }

/* The text, shown at the end */
.lf__reveal { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.lf__reveal-label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.lf__line { display: flex; flex-direction: column; padding: 2px 10px; border-radius: 12px; }
.lf__line.is-current { background: var(--mark); }
.lf__ar { margin: 0; font-family: var(--font-arabic); font-size: 30px; line-height: 2; }
.lf__line-en { padding-bottom: 6px; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--text-body); }

/* The player */
.lf__player { display: flex; align-items: center; gap: 18px; padding-block: 10px; padding-inline: 20px 12px; border-radius: 20px; background: var(--ink); color: var(--paper); }
.lf__state { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.lf__status { font-size: 14px; font-weight: 700; }
.lf__ticks { display: grid; grid-template-columns: repeat(var(--count, 5), 1fr); gap: 3px; max-width: 220px; }
.lf__tick { height: 4px; border-radius: 4px; background: var(--ink-line-strong); }
.lf__tick.is-done { background: var(--peach); }
.lf__tick.is-current { background: var(--paper); }
.lf__sub { font-size: 12px; color: var(--text-on-dark-muted); }
.lf__sub.is-warn { color: var(--peach); }
.lf__controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lf__transport { display: flex; align-items: center; gap: 8px; }
.lf__transport[hidden], .lf__replay[hidden] { display: none; }
.lf__replay { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--ink-line-strong); border-radius: var(--radius-pill); background: none;
              color: var(--paper); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.lf__replay[aria-disabled="true"] { border-style: dashed; color: var(--text-on-dark-muted); cursor: not-allowed; }
.lf__play { position: relative; width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
            background: var(--peach); color: var(--ink); font-size: 20px; cursor: pointer; }
.lf__play.is-loading .listen__spinner { display: block; }
.lf__play.is-loading .lf__play-icon { display: none; }
.lf__next { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--paper); font-size: 18px; cursor: pointer; }
.lf__speed-wrap { position: relative; }
.lf__speed { height: 44px; min-width: 52px; padding: 0 12px; border: 1px solid var(--ink-line-strong); border-radius: var(--radius-pill); background: none; color: var(--paper);
             font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lf__menu { position: absolute; inset-inline-end: 0; bottom: 52px; z-index: 5; }
.lf__player button:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }

.lf__ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lf__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-pill);
           background: var(--clay); color: var(--text-on-accent); font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; }
.lf__cta:hover { color: var(--text-on-accent); text-decoration: none; }
.lf__cta[hidden] { display: none; }
.lf__cta[aria-disabled="true"] { background: var(--line); color: var(--text-body); cursor: default; }
.lf__cta--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.lf__cta--ghost:hover { color: var(--ink); background: var(--sand-hover); }
.lf__cta:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.lf__hint { margin: 0; text-align: center; font-size: 13px; color: var(--text-body); }
.lf__hint[hidden], .lf__back[hidden] { display: none; }
.lf__back { align-self: center; font-size: 14px; color: var(--ink); text-decoration: underline; }

@media (max-width: 640px) {
  .lf__end-text, .lf__level { display: none; }
  .lf__step:not([aria-current="step"]) .lf__step-label { display: none; }
  .lf__step:not([aria-current="step"]) { padding-inline-end: 5px; }
  .lf__title { font-size: 26px; }
  .lf__hidden, .lf__reveal { padding: 14px 12px; }
  .lf__row { min-height: 46px; }
  .lf__en, .lf__line-en { font-size: 17px; }
  .lf__row-tag { min-width: 62px; }
  .lf__quiz-title { font-size: 24px; }
  .lf__options { grid-template-columns: 1fr; }
  .lf__ar { font-size: 25px; }
  .lf__player { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .lf__controls { justify-content: space-between; }
  .lf__cta { flex: 1 1 100%; }
}

/* Listening dialogues (dialogues/show): the speaker's name instead of the line's number, and over each line after */
.lf__n.lf__speaker { width: auto; min-width: 28px; padding: 0 10px; border-radius: 999px; white-space: nowrap; }
.lf__line-speaker { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); margin-top: 6px; }
.lf__situation { margin: 4px 0 0; font-size: 15px; color: var(--text-body); max-width: 60ch; }

/* Admin → Dialogues (admin/dialogues): one card per dialogue, folded */
.admin-dialogue { padding: 14px 18px; margin-bottom: 10px; }
.admin-dialogue summary { cursor: pointer; }
.admin-dialogue.is-hidden { opacity: .6; }

/* The questions missed, asked again before the text is shown (lib/reask) */
.lf__reask { display: flex; flex-direction: column; gap: 12px; }
.lf__question--again .lf__cta { align-self: flex-start; }


/* screens/listen.css */
/* The listening player (reader/_listen_player, listen_player_controller):
   a dark bar docked at the bottom of the reading column on desktop and
   floating at the bottom on phone, a ▶ for every sentence, and the sentence
   being read tinted, outlined and labelled in words ("▶ Reading now"). */
.reader__listen[aria-pressed="true"] { background: var(--clay); color: var(--text-on-accent); border-color: var(--clay); }

/* The offer to add vowels first, and the quiet notes */
.listen__offer { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; padding: 16px 18px; border: 1.5px solid var(--peach); border-radius: 16px; background: var(--card); }
.listen__offer[hidden], .listen__note[hidden] { display: none; }
.listen__offer-title { font-size: 16px; font-weight: 700; }
.listen__offer-text { font-size: 14px; line-height: 1.5; color: var(--ink-line); }
.listen__offer-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.listen__offer-go { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.listen__offer-left { font-size: 13px; color: var(--text-body); }
.listen__offer-left strong { color: var(--ink); }
.listen__offer-later { margin-inline-start: auto; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.listen__note { margin: 4px 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--sand); font-size: 14px; line-height: 1.55; }
.listen__note a { font-weight: 600; }

/* Room under the text, so the bar never covers the sentence being read */
.reader.is-listening .reader__main { padding-bottom: 120px; }

/* The bar */
.listen__dock { position: sticky; bottom: 18px; z-index: 30; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; container-type: inline-size; }
.listen__dock[hidden] { display: none; }
.listen__bar { display: flex; align-items: center; gap: 18px; padding-block: 10px; padding-inline: 20px 12px; border-radius: 20px; background: var(--ink); color: var(--paper);
               box-shadow: 0 18px 40px -16px rgba(28, 35, 33, .6); }
.listen__state { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.listen__state-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.listen__status { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listen__ticks { display: grid; grid-template-columns: repeat(var(--count, 5), 1fr); gap: var(--gap, 3px); max-width: 240px; }
.listen__tick { height: 4px; border-radius: 4px; background: var(--ink-line-strong); }
.listen__tick.is-done { background: var(--peach); }
.listen__tick.is-current { background: var(--paper); }
.listen__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-on-dark-muted); }
.listen__sub[hidden] { display: none; }
.listen__stay { min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--peach); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.listen__stay[hidden] { display: none; }
.listen__controls { display: flex; align-items: center; justify-content: center; gap: 6px; }
.listen__step, .listen__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--paper); font-size: 18px; cursor: pointer; }
.listen__close { color: var(--text-on-dark-muted); font-size: 20px; }
.listen__play { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
                background: var(--peach); color: var(--ink); font-size: 20px; cursor: pointer; }
.listen__spinner { display: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(28, 35, 33, .25); border-top-color: var(--ink); animation: listen-spin .8s linear infinite; }
.listen__play.is-loading .listen__spinner { display: block; }
.listen__play.is-loading .listen__play-icon { display: none; }
@keyframes listen-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .listen__spinner { animation-duration: 2.4s; } }
.listen__extras { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.listen__pill, .listen__speed, .listen__round { height: 44px; border: 1px solid var(--ink-line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--paper);
                                                 font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.listen__pill { display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.listen__speed { min-width: 58px; padding: 0 12px; font-size: 14px; font-weight: 700; }
.listen__speed[aria-expanded="true"] { border-color: var(--paper); }
.listen__round { width: 44px; border-radius: 50%; font-size: 18px; }
.listen__cont { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--paper); font: inherit; font-size: 13px; cursor: pointer; }
.listen__switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--ink-line-strong); }
.listen__switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: inset-inline-start .15s; }
[aria-checked="true"] > .listen__switch { background: var(--green); }
[aria-checked="true"] > .listen__switch::after { inset-inline-start: 19px; }
.listen__bar button:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }
.listen__keys { align-self: center; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--paper); text-align: center; font-size: 12px; color: var(--text-body); }
.listen__close--phone, .listen__repeat--phone, .listen__speed--phone { display: none; }

/* Speed and options */
.listen__menu { align-self: flex-end; width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 16px;
                background: var(--card); color: var(--ink); box-shadow: 0 20px 40px -18px rgba(28, 35, 33, .5); }
.listen__menu[hidden] { display: none; }
.listen__menu-label { padding: 6px 10px 2px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.listen__menu-item { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
                     color: var(--ink); font: inherit; font-size: 15px; text-align: var(--start); cursor: pointer; }
.listen__menu-item[aria-checked="true"]:not(.listen__menu-cont) { background: var(--sand); font-weight: 700; }
.listen__menu-mark { visibility: hidden; }
.listen__menu-item[aria-checked="true"] .listen__menu-mark { visibility: visible; }
.listen__menu-cont { display: none; min-height: 48px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; font-size: 14px; }
.listen__menu-cont .listen__switch { background: var(--line-dashed); }
.listen__menu-sub { display: block; font-size: 12px; color: var(--text-muted); }
.listen__menu-item:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }

/* A ▶ for every sentence, and the one being read */
.listen__handle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--line-strong); border-radius: 50%;
                  background: transparent; color: var(--clay); font-size: 13px; cursor: pointer; }
.listen__handle.is-current { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.listen__handle:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.reader.is-listening .reader__sentence { position: relative; padding-block: 4px; padding-inline: 8px 58px; border: 1.5px solid transparent; border-radius: 14px; }
.listen__handle--graded { position: absolute; top: 12px; inset-inline-end: 6px; width: 44px; height: 44px; }
.reader__sentence.listen-current { background: var(--mark); border-color: var(--peach); }
.reader__sentence.listen-loading { border-style: dashed; border-color: var(--clay); }
.listen__label { display: table; margin-block: 6px 0; margin-inline: auto 0; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper);
                 font-family: var(--font-sans); font-size: 12px; font-weight: 700; }
.listen__label.is-loading { background: var(--sand); color: var(--ink); }
.listen__handle--library { width: 34px; height: 34px; margin-right: 6px; /* physical: sits inside the text, in its direction */ vertical-align: middle; font-size: 11px; }
.reader__w.listen-current { background: var(--mark); box-shadow: 0 0 0 2px var(--mark); border-radius: 4px; }
.reader__w.listen-loading { text-decoration: underline dashed var(--clay); }

/* A narrow reading column (the library reader beside its panel): two rows. */
@container (max-width: 700px) {
  .listen__bar { flex-wrap: wrap; row-gap: 6px; }
  .listen__state { flex-basis: 100%; }
  .listen__controls { flex: 0 0 auto; }
  .listen__extras { flex: 1; }
}

@media (max-width: 760px) {
  .reader.is-listening .reader__main { padding-bottom: 170px; }
  .listen__dock { position: fixed; inset-inline-start: 12px; inset-inline-end: 12px; bottom: 14px; margin: 0; }
  .listen__bar { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; border-radius: 22px; }
  .listen__controls { justify-content: space-between; }
  .listen__extras, .listen__keys { display: none; }
  .listen__close--phone, .listen__repeat--phone, .listen__speed--phone { display: inline-flex; align-items: center; justify-content: center; }
  .listen__speed--phone { min-width: 52px; }
  .listen__menu { width: 250px; }
  .listen__menu-cont { display: flex; }
  .reader.is-listening .reader__sentence { padding-inline-end: 52px; }
  .listen__handle--graded { inset-inline-end: 4px; top: 6px; }
}

/* "Practice with this text" under a graded text */
.reader__practice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-mid); }
.reader__practice-label { margin-inline-end: 4px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.reader__practice-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
                        color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.reader__practice-btn:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.reader__practice-note { font-size: 13px; color: var(--text-muted); }


/* screens/mistakes.css */
/* The Mistakes set (design: Claude Design "FluentPlex Mistakes"), and Review grown from it ("Daily Habits" 4): the card on Practice (practice/_review_card, 1a–1c),
   the hub (mistakes/show, 2a–2d), the review (mistakes/review, mistakes_review_controller.js, 3a–3g) and its summary
   (5a–5b). Colors are the theme's (--clay is the English theme's blue, --peach its gold); sides are logical, so the
   Arabic interface mirrors. */

/* Shared */
.mistakes-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill);
                font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.mistakes-btn:hover { text-decoration: none; }
.mistakes-btn--ink { background: var(--ink); color: var(--card); }
.mistakes-btn--ink:hover { color: var(--card); filter: brightness(1.15); }
.mistakes-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 600; }
.mistakes-btn--outline:hover { background: var(--ink); color: var(--card); }
.mistakes-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.mistakes-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--sand); color: var(--ink);
                 font-size: 12px; font-weight: 700; flex-shrink: 0; }
.mistakes-dots { display: inline-flex; gap: 3px; }
.mistakes-dots span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--green); }
.mistakes-dots span.is-done { background: var(--green); }

/* The halo: a still ring of the theme's shapes (the empty state, the summary) */
.mistakes-halo { position: relative; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mistakes-halo__glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--peach) 47%, transparent) 0%, transparent 68%); }
.mistakes-halo__shape { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); opacity: .8; }
[dir="rtl"] .mistakes-halo__shape { transform: translate(50%, -50%); }
.mistakes-halo__shape.is-small { width: 9px; height: 9px; }
.mistakes-halo__shape--0 { background: var(--gold); clip-path: polygon(50% 0, 63% 30%, 100% 35%, 72% 58%, 80% 100%, 50% 78%, 20% 100%, 28% 58%, 0 35%, 37% 30%); }
.mistakes-halo__shape--1 { background: var(--green); border-radius: 50%; }
.mistakes-halo__shape--2 { background: var(--clay); clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); }
.mistakes-halo__shape--3 { background: var(--peach); border-radius: 50%; }
.mistakes-halo__mark { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
                       background: var(--green); color: #fff; font-size: 42px; font-weight: 800; }

/* On Practice (1a–1c) */
.mistakes-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 28px; padding: 22px 24px; border-radius: 22px;
                 background: var(--card); border: 1.5px solid var(--line-strong); }
.mistakes-card__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mistakes-card__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--clay); font-weight: 800; }
[dir="rtl"] .mistakes-card__eyebrow svg { transform: scaleX(-1); }
.mistakes-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.05; }
.mistakes-card__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.mistakes-card__go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mistakes-card__minutes { font-size: 14px; color: var(--text-body); }
.mistakes-card__kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.mistakes-card__kind { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; padding-inline-start: 9px; border-radius: var(--radius-pill); background: var(--sand); font-size: 13px; }
.mistakes-card__kind svg { color: var(--text-body); }
.mistakes-card__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.mistakes-card__trainer-form { display: inline; margin: 0; }
.mistakes-card__trainer { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--green); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mistakes-card__trainer:hover { text-decoration: underline; }
/* Review's card ("Daily Habits" 4): the kinds due as rows, each with its count */
.review-card__kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.review-card__kind { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sand); }
.review-card__kind svg { flex-shrink: 0; color: var(--ink); }
.review-card__kind-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.review-card__kind-title { font-size: 14px; font-weight: 700; }
.review-card__kind-line { font-size: 12px; line-height: 1.35; color: var(--text-body); }
.review-card__kind-count { font-size: 18px; font-variant-numeric: tabular-nums; }
.review-card__leaves { font-size: 14px; color: var(--text-body); }
.mistakes-card__all { min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) {
  .mistakes-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .mistakes-card__title { font-size: 30px; }
}

/* The hub (2a–2d) */
.mistakes { max-width: 900px; gap: 18px; }
.app--focus .app-main:has(.mreview) { padding: 0; }
.mistakes__crumbs { font-size: 13px; color: var(--text-body); }
.mistakes__crumbs a { color: var(--text-body); text-decoration: underline; }
.mistakes__crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.mistakes__head { display: flex; flex-direction: column; gap: 4px; }
.mistakes__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 46px; line-height: 1.05; }
.mistakes__lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.mistakes__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; }
.mistakes-due { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: var(--ink); color: #fff; }
.mistakes-due__eyebrow { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--peach); font-weight: 800; }
.mistakes-due__count { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mistakes-due__number { font-family: var(--font-serif); font-size: 64px; line-height: 1; }
.mistakes-due__meta { font-size: 15px; color: rgba(255, 255, 255, .82); }
.mistakes-due__review { align-self: flex-start; display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: var(--radius-pill);
                        background: var(--peach); color: #1C2321; font-size: 16px; font-weight: 800; text-decoration: none; }
.mistakes-due__review:hover { color: #1C2321; text-decoration: none; filter: brightness(1.05); }
.mistakes-due__review:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
.mistakes-how { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.mistakes-how__title, .mistakes-set__title { margin: 0; font-size: 16px; font-weight: 700; }
.mistakes-how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mistakes-how__step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.3; font-weight: 600; }
.mistakes-how__mark { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; font-weight: 800;
                      border: 2px solid var(--green); background: var(--right-soft); color: var(--green); }
.mistakes-how__step.is-missed .mistakes-how__mark { border: 2px dashed var(--line-dashed); background: var(--sand); color: var(--text-body); }
.mistakes-how__step.is-cleared .mistakes-how__mark { background: var(--green); color: #fff; }
.mistakes-how__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.mistakes-set { border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.mistakes-set .mistakes-set__title { padding: 16px 18px 10px; }
.mistakes-set__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mistakes-set__table thead tr { background: var(--sand); }
.mistakes-set__table th, .mistakes-set__table td { padding: 10px 12px; text-align: end; }
.mistakes-set__table th:first-child { text-align: start; padding-inline-start: 18px; font-weight: 500; }
.mistakes-set__table th:last-child, .mistakes-set__table td:last-child { padding-inline-end: 18px; }
.mistakes-set__table thead th { padding-block: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-body); font-weight: 700; }
.mistakes-set__table tbody tr { border-top: 1px solid var(--line); }
.mistakes-set__kind { display: flex; align-items: center; gap: 10px; }
.mistakes-set__kind svg { color: var(--text-body); flex-shrink: 0; }
.mistakes-recent { display: flex; flex-direction: column; gap: 8px; }
.mistakes-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mistakes-recent__item { display: flex; align-items: center; gap: 8px 16px; padding: 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.mistakes-recent__text { flex: 1; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.6; }
.mistakes-recent__text.ar { font-family: var(--font-arabic); font-size: 20px; }
.mistakes-recent__days { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; }
.mistakes-recent__when { color: var(--text-body); }
/* Review's own lines in the review screen: a card's meaning once shown, a word's reading */
.mreview__meaning { margin: 0; font-size: 19px; line-height: 1.5; }
.mreview__reading { margin: -6px 0 0; font-size: 15px; color: var(--text-body); text-align: center; }

/* Everything in Review (reviews/hub): how it works, then words, grammar points and mistakes side by side */
.review-hub__how { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.review-hub__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.review-hub__kind { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.review-hub__kind-title { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 700; }
.review-hub__due { margin-inline-start: auto; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--sand); font-size: 13px; font-weight: 700; }
.review-hub__line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.review-hub__stats { margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.review-hub__stats div { display: flex; flex-direction: column-reverse; }
.review-hub__stats dt { font-size: 12px; color: var(--text-body); }
.review-hub__stats dd { margin: 0; font-family: var(--font-serif); font-size: 30px; line-height: 1.1; }
.review-hub__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.review-hub__points li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.review-hub__point { color: var(--ink); font-weight: 600; }
.review-hub__when { flex-shrink: 0; font-size: 13px; color: var(--text-body); }
.review-hub__when.is-due { color: var(--clay); font-weight: 700; }
.review-hub__empty { margin: 0; font-size: 14px; color: var(--text-body); }
.review-hub__links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; }
.review-hub__links a { min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; }
@media (max-width: 900px) { .review-hub__kinds { grid-template-columns: minmax(0, 1fr); } }

.mistakes__words { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text-body); }
.mistakes__words svg { color: var(--green); }
.mistakes__words a { color: var(--green); font-weight: 600; }
@media (max-width: 760px) {
  .mistakes__top { grid-template-columns: minmax(0, 1fr); }
  .mistakes__title { font-size: 34px; }
  .mistakes-recent__item { flex-direction: column; align-items: flex-start; }
  .mistakes-set__table thead th { font-size: 11px; }
}

/* Nothing in the set (2c) */
.mistakes-empty { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; width: 100%; align-self: center;
                  padding: 28px 22px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); text-align: center; overflow: hidden; }
.mistakes-empty__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; }
.mistakes-empty__line { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.mistakes-empty__stat { padding: 6px 14px; border-radius: var(--radius-pill); background: var(--right-soft); color: var(--right-deep); font-size: 14px; font-weight: 700; }
.mistakes-empty__actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* The review: a focus screen (3a–3g) */
.mreview { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.mreview__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: var(--card); border-bottom: 1px solid var(--line); }
.mreview__end { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line-strong);
                background: var(--card); color: var(--ink); font-size: 18px; text-decoration: none; }
.mreview__end:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.mreview__progress { flex: 1; height: 10px; border-radius: var(--radius-pill); background: var(--sand); overflow: hidden; }
.mreview__progress-bar { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--green); transition: width .25s; }
.mreview__count { font-size: 14px; font-weight: 700; white-space: nowrap; }
.mreview__body { flex: 1; padding: 28px clamp(16px, 4vw, 48px) 64px; }
.mreview__item { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.mreview__source { align-self: flex-start; padding: 4px 12px; padding-inline-start: 9px; font-size: 13px; font-weight: 600; }
.mreview__card { display: flex; flex-direction: column; gap: 18px; padding: 26px 30px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.mreview__ask { font-size: 16px; font-weight: 600; color: var(--text-body); }
.mreview__ask--strong { color: var(--ink); }
.mreview__sentence { margin: 0; text-align: center; font-family: var(--font-arabic); font-size: 44px; line-height: 2; text-wrap: balance; }
.mreview__sentence:lang(en), .mreview__sentence:lang(es), .mreview__sentence:lang(fr), .mreview__sentence:lang(de), .mreview__sentence:lang(tr) { font-family: var(--font-serif); font-size: 40px; line-height: 1.35; }
.mreview__gap { display: inline-block; min-width: 120px; padding: 0 10px; border-bottom: 3px dashed var(--clay); border-radius: 8px 8px 0 0; line-height: 1.4; }
.mreview__gap.is-filled { border-bottom-style: solid; border-bottom-color: var(--green); background: var(--right-soft); color: var(--right-deep); }
.mreview__mark { padding: 0 .12em; border-radius: 6px; background: var(--mark, var(--sand)); color: inherit; }
.mreview__quote { margin: 0; text-align: center; font-family: var(--font-serif); font-size: 28px; line-height: 1.3; }
.mreview__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mreview__option { position: relative; min-height: 72px; padding: 6px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px;
                   border: 2px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.mreview__option-text { font-family: var(--font-arabic); font-size: 30px; line-height: 1.6; }
.mreview__option-text:lang(en), .mreview__option-text:lang(es), .mreview__option-text:lang(fr), .mreview__option-text:lang(de), .mreview__option-text:lang(tr) { font-family: var(--font-serif); font-size: 24px; }
.mreview__key { position: absolute; top: 8px; inset-inline-start: 12px; font-family: var(--font-sans); font-size: 11px; color: var(--text-body); }
.mreview__list { display: flex; flex-direction: column; gap: 8px; }
.mreview__row { min-height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 12px; border-radius: 14px; border: 2px solid var(--line-strong);
                background: var(--card); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; text-align: start; cursor: pointer; }
.mreview__row-text { flex: 1; }
.mreview__letter { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--sand); font-size: 13px; font-weight: 800; }
.mreview__option:hover:not(:disabled), .mreview__row:hover:not(:disabled) { border-color: var(--ink); }
.mreview__option.is-chosen, .mreview__row.is-chosen { border-color: var(--green); outline: 3px solid var(--green); outline-offset: 3px; }
.mreview__option.is-right, .mreview__row.is-right { border-color: var(--green); background: var(--right-soft); }
.mreview__option.is-wrong, .mreview__row.is-wrong { border-color: var(--wrong); background: var(--wrong-soft); color: var(--wrong-deep); }
.mreview__option:disabled, .mreview__row:disabled { cursor: default; color: var(--ink); }
.mreview__option.is-wrong:disabled, .mreview__row.is-wrong:disabled { color: var(--wrong-deep); }
.mreview__tag { font-family: var(--font-sans); font-size: 14px; font-weight: 800; }
.mreview__listen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mreview__listen--big { flex-direction: column; padding: 6px 0; }
.mreview__play { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--clay); color: #fff; cursor: pointer; }
.mreview__listen--big .mreview__play { width: 96px; height: 96px; box-shadow: 0 0 0 10px var(--clay-soft); }
.mreview__play[aria-disabled="true"] { opacity: .45; cursor: default; }
.mreview__play.is-loading, .mreview__play.is-playing { filter: brightness(1.1); }
.mreview__plays { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.mreview__listen--big .mreview__plays { align-items: center; }
.mreview__field { display: flex; flex-direction: column; gap: 6px; }
.mreview__field-label { font-size: 13px; font-weight: 700; color: var(--text-body); }
.mreview__input, .mreview__typed { display: block; width: 100%; min-height: 60px; padding: 10px 16px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--paper);
                                   color: var(--ink); font-family: var(--font-arabic); font-size: 26px; line-height: 1.6; }
.mreview__input:focus { outline: none; border-color: var(--ink); }
.mreview__input:lang(en), .mreview__input:lang(es), .mreview__input:lang(fr), .mreview__input:lang(de), .mreview__input:lang(tr),
.mreview__typed:lang(en), .mreview__typed:lang(es), .mreview__typed:lang(fr), .mreview__typed:lang(de), .mreview__typed:lang(tr) { font-family: var(--font-serif); font-size: 22px; }
.mreview__typed.is-right { border-color: var(--green); }
.mreview__typed.is-wrong { border-color: var(--wrong); }
.mreview__check { min-height: 54px; border: 0; border-radius: var(--radius-pill); background: var(--sand); color: var(--text-body); font: inherit; font-size: 17px; font-weight: 700; cursor: default; }
.mreview__check.is-ready { background: var(--ink); color: var(--card); cursor: pointer; }
.mreview__check:focus-visible, .mreview__continue:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.mreview__keys { margin: 0; text-align: center; font-size: 12px; color: var(--text-body); }
.mreview__error { margin: 0; text-align: center; color: var(--wrong); font-weight: 600; }
/* A Genius correction */
.mreview__wrote { display: flex; flex-direction: column; gap: 8px; }
.mreview__bubble { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--paper);
                   font-family: var(--font-arabic); font-size: 26px; line-height: 1.7; }
[dir="rtl"] .mreview__bubble { border-radius: 16px 16px 4px 16px; }
.mreview__bubble:lang(en), .mreview__bubble:lang(es), .mreview__bubble:lang(fr), .mreview__bubble:lang(de), .mreview__bubble:lang(tr),
.mreview__corrected:lang(en), .mreview__corrected:lang(es), .mreview__corrected:lang(fr), .mreview__corrected:lang(de), .mreview__corrected:lang(tr) { font-family: var(--font-serif); font-size: 22px; }
.mreview__think { margin: 0; font-size: 15px; line-height: 1.5; }
.mreview__show { align-self: flex-start; }
.mreview__correction { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--green); background: var(--right-soft); }
.mreview__correction-label { font-size: 13px; font-weight: 800; color: var(--right-deep); }
.mreview__corrected { display: block; font-family: var(--font-arabic); font-size: 26px; line-height: 1.7; }
.mreview__why { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.mreview__grade { display: flex; flex-direction: column; gap: 8px; }
.mreview__grade-ask { font-size: 15px; font-weight: 700; }
.mreview__grade-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mreview__not-yet, .mreview__got { min-height: 56px; border-radius: var(--radius-pill); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.mreview__not-yet { border: 2px solid var(--line-strong); background: var(--card); color: var(--ink); }
.mreview__got { border: 0; background: var(--green); color: #fff; }
.mreview__grade-note { font-size: 13px; line-height: 1.45; color: var(--text-body); }
/* After an answer */
.mreview__banner { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; border: 2px solid var(--green); background: var(--right-soft); }
.mreview__banner.is-wrong { border-color: var(--wrong); background: var(--wrong-soft); }
.mreview__banner-head { display: flex; align-items: center; gap: 10px; }
.mreview__banner-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; }
.mreview__banner.is-wrong .mreview__banner-icon { background: var(--wrong); }
.mreview__banner-title { font-size: 18px; font-weight: 800; color: var(--right-deep); }
.mreview__banner.is-wrong .mreview__banner-title, .mreview__banner.is-wrong .mreview__answer-label, .mreview__banner.is-wrong .mreview__foot { color: var(--wrong-deep); }
.mreview__answer { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mreview__answer-label { font-size: 14px; font-weight: 700; color: var(--right-deep); }
.mreview__answer-text { font-family: var(--font-arabic); font-size: 28px; line-height: 1.5; color: var(--ink); }
.mreview__answer-text:lang(en), .mreview__answer-text:lang(es), .mreview__answer-text:lang(fr), .mreview__answer-text:lang(de), .mreview__answer-text:lang(tr) { font-family: var(--font-serif); font-size: 24px; }
.mreview__answer-text.mreview__answer-text--site { font-family: inherit; font-size: 17px; font-weight: 600; }
.mreview__banner-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mreview__explain { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink);
                    background: var(--card); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.mreview__explain:hover { color: var(--ink); text-decoration: none; background: var(--paper); }
button.mreview__explain { font-family: inherit; cursor: pointer; }
.mreview__explain[aria-expanded="true"] { background: var(--ink); color: var(--card); }
.mreview__explain:focus-visible, .mreview__source-link:focus-visible, .mreview__ai-retry:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.mreview__source-link { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Explain, opened: why, by AI (MistakeExplainer) */
.mreview__ai { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.mreview__ai[hidden] { display: none; }
.mreview__ai-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
html[lang="ar"] .mreview__ai-label, html[lang^="zh"] .mreview__ai-label { letter-spacing: 0; } /* Arabic letters stay joined */
.mreview__ai-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.mreview__ai-text .mreview__inline { font-size: 1.2em; }
.mreview__ai-text--wait { color: var(--text-muted); animation: mreview-wait 1.2s ease-in-out infinite alternate; }
.mreview__ai-text--note { font-size: 15px; color: var(--text-body); }
.mreview__ai-note { margin: 0; font-size: 12px; color: var(--text-muted); }
.mreview__ai-retry { align-self: flex-start; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@keyframes mreview-wait { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mreview__ai-text--wait { animation: none; } }
.mreview__continue { flex: 1; min-width: 150px; min-height: 52px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.mreview__foot { margin: 0; font-size: 13px; color: var(--right-deep); }
@media (max-width: 640px) {
  .mreview__bar { padding: 10px 16px; gap: 10px; }
  .mreview__body { padding: 18px 16px 48px; }
  .mreview__card { padding: 18px 16px; }
  .mreview__sentence { font-size: 34px; }
  .mreview__option { min-height: 64px; }
  .mreview__option-text { font-size: 26px; }
  .mreview__key { display: none; }
  .mreview__keys { display: none; }
}
/* The summary (5a–5b) */
.mreview__summary { position: relative; width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; overflow: hidden; }
.mreview__celebrate { position: relative; width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; }
.mreview__celebrate .mistakes-halo { position: absolute; inset: 0; height: auto; }
.mreview__celebrate > .mistakes-halo__mark { position: relative; }
.mreview__pill { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 10px 22px; border-radius: var(--radius-pill); background: var(--green); color: #fff;
                 font-size: 16px; font-weight: 700; animation: mreview-pop .6s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.mreview__pill-n { font-family: var(--font-serif); font-size: 44px; line-height: 1; font-weight: 400; }
.mreview__summary-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 46px; line-height: 1.05; }
.mreview__summary-sub { margin: 0; font-size: 15px; color: var(--text-body); }
.mreview__groups { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: start; }
.mreview__group { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border-radius: 20px; border: 2px solid var(--line); background: var(--card); }
.mreview__group.is-cleared { border-color: var(--green); background: var(--right-soft); }
.mreview__group-head { display: flex; align-items: center; gap: 10px; }
.mreview__group-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; font-weight: 800; background: var(--sand); color: var(--ink); }
.mreview__group.is-cleared .mreview__group-icon { background: var(--green); color: #fff; }
.mreview__group.is-right_once .mreview__group-icon { background: transparent; color: var(--green); }
.mreview__group-count { display: flex; align-items: baseline; gap: 8px; }
.mreview__group-n { font-family: var(--font-serif); font-size: 32px; line-height: 1; }
.mreview__group-name { font-size: 15px; font-weight: 700; }
.mreview__group-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-body); }
.mreview__group-items { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); }
.mreview__group.is-cleared .mreview__group-items { border-top-color: var(--green); }
.mreview__group-item { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.6; }
.mreview__group-item.ar { font-family: var(--font-arabic); font-size: 20px; }
.mreview__set { margin: 0; font-size: 14px; font-weight: 600; }
.mreview__summary-actions { width: 100%; max-width: 520px; display: flex; gap: 10px; }
.mreview__summary-actions > * { flex: 1; }
.mreview__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mreview__confetto { position: absolute; top: -4%; width: 14px; height: 14px; animation-name: mreview-fall; animation-timing-function: ease-out; animation-iteration-count: 2; animation-fill-mode: both; }
@keyframes mreview-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mreview-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--fall)) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mreview__pill, .mreview__confetto { animation: none; }
  .mreview__progress-bar { transition: none; }
}
@media (max-width: 760px) {
  .mreview__groups { grid-template-columns: minmax(0, 1fr); }
  .mreview__summary-actions { flex-direction: column; }
  .mreview__summary-title { font-size: 34px; }
}
.mreview__inline { font-family: var(--font-arabic); font-size: 1.25em; }


/* screens/mushaf.css */
/* A Qurʾān page laid out as in the Madinah muṣḥaf (reader/_quran_mushaf), in the
   reader and on the public library's pages. .quran-reading is the element
   with the quran-layout controller, which sets is-flowing and is-hafs. */
.mushaf {
  --mushaf-ink: var(--ink);
  --mushaf-frame: var(--gold);
  max-width: 660px; margin: 0 auto; width: 100%;
  container-type: inline-size;
  font-family: "Amiri Quran", var(--font-arabic);
  color: var(--mushaf-ink);
}
.quran-reading.is-flowing .mushaf { display: none; }

/* The King Fahd Complex's Hafs font (its license allows using and
   distributing it unmodified), with the text in its own encoding. */
@font-face { font-family: "KFGQPC HAFS Uthmanic Script"; src: url("/assets/UthmanicHafs1Ver18-7eea3774.ttf") format("truetype"); font-display: swap; }
.mushaf__q { display: none; }
.quran-reading.is-hafs .mushaf.has-hafs .mushaf__u { display: none; }
.quran-reading.is-hafs .mushaf.has-hafs .mushaf__q { display: inline; font-family: "KFGQPC HAFS Uthmanic Script", "Amiri Quran", var(--font-arabic); }
.quran-reading.is-hafs .mushaf.has-hafs .mushaf__line { font-size: 4.6cqi; line-height: 2.2; }
.quran-reading:not(.is-flowing) .quran-flow { display: none; }

.mushaf__head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--text-muted); padding: 0 6px 6px; border-bottom: 1px solid var(--line); }
.mushaf__page {
  border: 2px solid var(--mushaf-frame); outline: 1px solid var(--mushaf-frame); outline-offset: 3px; border-radius: 4px;
  padding: 2.4cqi 3cqi; margin: 10px 4px; background: #FDFAF2;
}
.mushaf__line {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: nowrap; white-space: nowrap;
  font-size: 4.95cqi; line-height: 2.05;
}
.mushaf__line .reader__w { padding: 0; border-radius: 3px; }
.mushaf__line .reader__w.is-reciting, .mushaf__end.is-reciting { background: var(--green-soft); }
.mushaf__end {
  background: none; border: none; padding: 0 .05em; font: inherit; color: var(--mushaf-frame); cursor: pointer; line-height: 1;
}
.mushaf__end:hover { color: var(--clay); }
.mushaf__surah {
  display: flex; justify-content: center; align-items: center; margin: .35em 0;
  font-size: 4.2cqi; line-height: 1.9; color: var(--mushaf-ink);
  border: 1.5px solid var(--mushaf-frame); border-radius: 3px; outline: 1px solid var(--mushaf-frame); outline-offset: 2px;
  background: linear-gradient(90deg, #F4E7C8, #FBF4E2 30%, #FBF4E2 70%, #F4E7C8);
}
.mushaf__line--basmala { justify-content: center; gap: .45em; }
.mushaf--opening .mushaf__line { justify-content: center; gap: .4em; font-size: 5.6cqi; }
.mushaf--opening .mushaf__page { padding-top: 6cqi; padding-bottom: 6cqi; }
.mushaf__foot { text-align: center; font-size: 16px; color: var(--text-muted); }


/* screens/news.css */
/*
 * Daily news (NewsReading): Today's card, the news header and sources in
 * the reader, and the Library's News shelf. The newspaper cue is
 * typographic: a double ink rule along the top and a small clay أَخْبَار.
 */
.news-mark { font-size: 22px; line-height: 1.2; color: var(--clay); }
.news-topic {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding-block: 2px; padding-inline: 8px 10px; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.news-topic__icon { color: var(--green); flex-shrink: 0; }

/* ── Today's card ─────────────────────────────────────────────────── */
.news-card {
  background: var(--card); border: 1px solid var(--line); border-top: 4px double var(--ink); border-radius: 4px 4px 18px 18px;
  padding: 20px 24px; display: flex; gap: 28px;
}
.news-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.news-card__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.news-card__eyebrow { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-body); font-weight: 700; }
.news-card__title { margin: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 400; }
.news-card__ar { align-self: flex-start; font-weight: 700; font-size: 30px; line-height: 1.75; }
.news-card__en { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; }
.news-card__desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-body); }
.news-card__facts { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-line); }
.news-card__level { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.news-card__known { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; white-space: nowrap; }
.news-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.news-card__side { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.news-card__read { align-self: center; display: inline-flex; align-items: center; gap: 6px; background: var(--green-soft); color: var(--green); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; font-weight: 700; }
.news-card__buttons { display: flex; flex-direction: column; gap: 8px; }
.news-card__read-link, .news-card__listen {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.news-card__read-link { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }
.news-card__read-link:hover { background: var(--ink-raised); color: var(--paper); text-decoration: none; }
.news-card__read-link.is-secondary { background: none; color: var(--ink); }
.news-card__read-link.is-secondary:hover { background: var(--sand-hover); color: var(--ink); }
.news-card__listen { background: none; border: 1.5px solid var(--line-strong); color: var(--ink); }
.news-card__listen:hover { border-color: var(--ink); }
.news-card__listen span { color: var(--clay); }
.news-card__more {
  align-self: center; background: none; border: none; padding: 6px 2px; min-height: 36px; font-size: 13px; font-weight: 600;
  color: var(--clay); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.news-card__next { align-self: center; font-size: 12px; color: var(--text-muted); }
:is(.news-card__read-link, .news-card__listen, .news-card__more, .news-levels__level, .news-switch__level, .news-shelf__level):focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.news-levels { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--paper); border-radius: 12px; padding: 8px 10px; }
.news-levels[hidden] { display: none; }
.news-levels__label { font-size: 13px; color: var(--ink-line); margin-inline-end: 2px; }
.news-levels__level {
  display: inline-flex; align-items: center; background: var(--field); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); padding: 0 12px; min-height: 38px; font-size: 13px; font-weight: 700; text-decoration: none;
}
.news-levels__level:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.news-levels__level[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.news-levels__note { font-weight: 400; }

/* ── In the reader ────────────────────────────────────────────────── */
.news-header {
  background: var(--card); border: 1px solid var(--line); border-top: 4px double var(--ink); border-radius: 4px 4px 18px 18px;
  padding: 20px 24px; display: flex; flex-direction: column; gap: 12px;
}
.news-header__title { margin: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 400; }
.news-header__ar { align-self: flex-start; font-weight: 700; font-size: 38px; line-height: 1.7; }
.news-header__en { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; }
.news-header__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.news-header__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-body); }
.news-header__known { color: var(--green); font-weight: 600; }
.news-switch { display: flex; align-items: center; gap: 4px; background: var(--sand); border-radius: var(--radius-pill); padding: 4px; }
.news-switch__label { font-size: 13px; color: var(--ink-line); padding-block: 0; padding-inline: 10px 8px; }
.news-switch__level { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); padding: 0 14px; min-height: 36px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.news-switch__level:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }
.news-switch__level[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.news-switch__note { font-size: 12px; font-weight: 400; }
.news-header__listen--phone { display: none; }
.reader__titlebar--news { justify-content: flex-start; }
.reader__topline:has(.news-header__listen--phone) { display: flex; justify-content: space-between; align-items: center; }

.news-sources { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line-strong); padding: 14px 4px 0; }
.news-sources__label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.news-sources__links { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 14px; }
.news-sources__note { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* ── The Library's News shelf ─────────────────────────────────────── */
.news-shelf__filters { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.news-shelf__levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.news-shelf__levels-label { font-size: 14px; color: var(--ink-line); margin-inline-end: 4px; }
.news-shelf__level {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 14px;
  min-height: 40px; font-size: 14px; color: var(--ink); text-decoration: none;
}
.news-shelf__level:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.news-shelf__level[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.news-shelf__yours { font-size: 12px; opacity: .85; }
.news-shelf__side { display: flex; align-items: center; gap: 14px; }
.news-shelf__days { font-size: 13px; color: var(--text-muted); }
.news-shelf__search {
  display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 0 14px; min-height: 40px; width: 240px; color: var(--text-muted);
}
.news-shelf__search:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); }
.news-shelf__query { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.news-shelf__phone-note { display: none; margin: -4px 0 0; font-size: 12px; color: var(--text-muted); }
.news-shelf__query-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.news-shelf__chip { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); padding: 0 14px; min-height: 38px; font-size: 14px; }
.news-shelf__chip.is-level { background: var(--ink); color: var(--paper); }
.news-shelf__chip.is-query { background: var(--field); border: 1.5px solid var(--green); }
.news-shelf__clear { color: var(--text-muted); text-decoration: none; font-size: 16px; padding: 0 2px; }

.news-shelf__week { display: flex; flex-direction: column; gap: 12px; }
.news-shelf__heading { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 400; }
.news-shelf__heading-label { font-family: var(--font-serif); font-size: 28px; }
.news-shelf__heading-sub { font-size: 13px; color: var(--text-muted); }
.news-shelf__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.news-shelf__list > li { display: flex; }
.news-shelf__older { align-self: center; }

.news-story {
  width: 100%; background: var(--card); border: 1px solid var(--line); border-top: 4px double var(--ink); border-radius: 4px 4px 18px 18px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.news-story.is-today { border: 1.5px solid var(--ink); border-top: 4px double var(--ink); }
.news-story__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.news-story__when { display: flex; align-items: center; gap: 8px; }
.news-story__date { font-size: 13px; font-weight: 700; color: var(--text-body); }
.news-story.is-today .news-story__date { color: var(--clay); }
.news-story__new { border: 1.5px solid var(--clay); color: var(--clay); border-radius: var(--radius-pill); padding: 0 9px; font-size: 12px; font-weight: 700; }
.news-story__title { margin: 0; display: flex; flex-direction: column; font-weight: 400; }
.news-story__ar { align-self: flex-start; font-weight: 700; font-size: 26px; line-height: 1.75; }
.news-story__en { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; }
.news-story__desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-body); }
.news-story__rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.news-story__also { font-size: 12px; color: var(--text-muted); }
.news-story__also a { font-weight: 700; padding: 4px 3px; }

.news-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px;
  min-height: 48px; color: var(--ink); text-decoration: none;
}
.news-row:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.news-row:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.news-row.is-mine { background: var(--field); border-color: var(--ink); }
.news-row__mine { font-size: 12px; font-weight: 700; }
.news-row__known { font-size: 13px; color: var(--green); font-weight: 600; white-space: nowrap; }
.news-row__state { margin-inline-start: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; min-width: 0; max-width: 100%; }
.news-row__read { background: var(--green-soft); color: var(--green); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.news-row__started { font-size: 12px; font-weight: 700; }
.news-row__resume { background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); padding: 0 12px; min-height: 30px; display: flex; align-items: center; font-size: 12px; font-weight: 700; }
.news-row__go { font-size: 13px; font-weight: 700; color: var(--text-body); }
.news-row.is-mine .news-row__go { color: var(--clay); }

.news-empty { border: 1.5px dashed var(--line-dashed); border-radius: 18px; padding: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.news-empty__mark { font-size: 34px; line-height: 1.4; color: var(--clay); }
.news-empty__title { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; }
.news-empty__text { font-size: 15px; line-height: 1.5; color: var(--text-body); max-width: 460px; }
.news-empty__buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Phones ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .news-card { flex-direction: column; gap: 14px; padding: 16px; }
  .news-card__ar { font-size: 25px; }
  .news-card__en { font-size: 22px; }
  .news-card__side { width: auto; }
  .news-card__buttons { flex-direction: row; }
  .news-card__read, .news-card__more, .news-card__next { align-self: flex-start; }

  .news-header { padding: 14px; gap: 8px; }
  .news-header__ar { font-size: 27px; }
  .news-header__en { font-size: 23px; }
  .news-header__bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .news-switch { display: grid; grid-template-columns: repeat(3, 1fr); }
  .news-switch__label, .news-switch__note { display: none; }
  .news-switch__level { justify-content: center; min-height: 40px; }
  .news-header__listen { display: none; }
  .news-header__listen--phone { display: inline-flex; }
  .news-back__library { display: none; }

  .news-shelf__filters { border-bottom: none; padding-bottom: 0; }
  .news-shelf__levels { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .news-shelf__levels-label, .news-shelf__yours, .news-shelf__days { display: none; }
  .news-shelf__level { justify-content: center; padding: 0 6px; min-height: 44px; }
  .news-shelf__side, .news-shelf__search { width: 100%; }
  .news-shelf__phone-note { display: block; }
  .news-shelf__heading-label { font-size: 24px; }
  .news-shelf__heading-sub { font-size: 12px; }
  .news-shelf__list { grid-template-columns: 1fr; }
  .news-story { padding: 14px; }
  .news-story__ar { font-size: 22px; }
  .news-story__en { font-size: 19px; }
  .news-empty { padding: 28px 16px; }
  .news-empty__title { font-size: 24px; }
}

/* ▶ Listen on Today's card: a slim player (news_listen_controller) */
.news-player { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 8px; padding-inline: 14px 10px; border-radius: 16px; background: var(--ink); color: var(--paper); }
.news-player[hidden] { display: none; }
.news-player__play { position: relative; width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
                     background: var(--peach); color: var(--ink); font-size: 16px; cursor: pointer; }
.news-player__play.is-loading .listen__spinner { display: block; }
.news-player__play.is-loading .news-player__icon { display: none; }
.news-player__state { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.news-player__status { font-size: 13px; font-weight: 700; }
.news-player__ticks { display: grid; grid-template-columns: repeat(var(--count, 9), 1fr); gap: 3px; }
.news-player__tick { height: 4px; border-radius: 4px; background: var(--ink-line-strong); }
.news-player__tick.is-done { background: var(--peach); }
.news-player__tick.is-current { background: var(--paper); }
.news-player__sub { font-size: 12px; color: var(--text-on-dark-muted); }
.news-player__next { width: 44px; height: 44px; border: 0; background: none; color: var(--paper); font-size: 16px; cursor: pointer; }
.news-player__follow { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink-line-strong); border-radius: var(--radius-pill);
                       color: var(--paper); font-size: 13px; font-weight: 600; text-decoration: none; }
.news-player__follow:hover { color: var(--paper); border-color: var(--paper); text-decoration: none; }
.news-player button:focus-visible, .news-player a:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }


/* screens/onboarding.css */
/*
 * Onboarding: the account (/start, step 1), then placement (/placement, steps 2–3).
 * Lives inside the auth split layout (.split__main).
 */

.onb { display: flex; flex-direction: column; gap: 16px; }
.onb__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.onb__lead { margin: 0; font-size: 15px; color: var(--text-body); }
.onb__form { display: contents; }
.onb__fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.onb__names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.onb__submit { margin-top: 2px; }
.onb__terms { margin: 0; font-size: 13px; line-height: 1.5; }
.onb__signin { margin: 0; font-size: 14px; color: var(--text-body); }
.onb__signin a { font-weight: 600; }
.onb__google-form { display: contents; }

/* While the browser goes to Google, the email form waits. */
.onb .is-dimmed { opacity: .45; transition: opacity .15s ease; }

/* Placement test (step 2) and result (step 3). */
.placement { display: flex; flex-direction: column; gap: 28px; }
.placement__stop { display: flex; justify-content: flex-end; } /* leave the test (PlacementsController#stop), under the note */
.placement__lead { font-size: 18px; line-height: 1.5; color: var(--text-body); }
.placement__meta { font-size: 14px; color: var(--text-muted); }
.placement__prompt { font-size: clamp(34px, 6vw, 48px); line-height: 1.5; text-align: center; padding: 28px 0; }
/* A sentence (a word in context, a gap to fill): smaller, from the start of its own direction. */
.placement__prompt--sentence { font-size: clamp(22px, 3.4vw, 30px); text-align: start; padding: 12px 0; }
.placement__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}
.placement__option {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--ink);
  font-size: 16px;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.placement__option:hover { border-color: var(--ink); background: var(--sand-hover); }
.placement__option--ar { font-family: var(--font-arabic); font-size: 26px; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; }
/* "I don't know": a whole row under the options, quieter than they are. */
.placement__option--unknown { grid-column: 1 / -1; background: transparent; border-style: dashed; color: var(--text-muted); font-size: 15px; padding: 12px 18px; }
.placement__question { display: flex; flex-direction: column; gap: 16px; }
.placement__question .progress { flex: none; }

.placement__level { font-size: clamp(44px, 7vw, 64px); }
.placement__first { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-md); }
.placement__first-label { font-size: 13px; color: var(--text-muted); }
.placement__first-title { font-size: 26px; }
.placement__first-meta { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* The level test: what it covers, a reading passage, a clip to listen to */
.placement__current { margin: 0; font-size: 16px; }
.placement__skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.placement__skill { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 14px; }
.placement__passage { font-size: 24px; line-height: 1.9; text-align: start; /* the start of the text's own direction (dir is the language taught's), not the interface's */ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; margin: 0; }
.placement__listen { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0; font-size: 14px; }
.placement__ask { margin: 0; font-size: 17px; font-weight: 600; text-align: center; }
.placement__ask .ar { font-size: 1.45em; font-weight: 400; unicode-bidi: isolate; }
.placement__note { font-size: 13px; }
.placement__skip { font-size: 13px; color: var(--text-muted); text-decoration: underline; }
.placement__next { margin: -12px 0 0; font-size: 15px; color: var(--text-body); }

/* Result: the level reached in each skill */
.placement__profile { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-md); }
.placement__profile h2 { margin: 0; }
.placement__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.placement__bar { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; font-size: 14px; }
.placement__bar-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.placement__bar-step { text-align: center; font-size: 11px; font-weight: 700; padding: 4px 0; border-radius: 4px; background: var(--sand); color: var(--text-faint); }
.placement__bar-step.is-on { background: var(--green); color: var(--paper); }
.placement__profile-note { margin: 0; font-size: 13px; }

/* The steps in the aside: a number, the label and, on the current step, how long it takes. */
.onb-steps { gap: 20px; }
.onb-steps .steps__item { align-items: flex-start; }
.onb-steps .steps__dot { flex-shrink: 0; width: 32px; height: 32px; }
.onb-steps .steps__item.is-current .steps__dot { background: var(--peach); border-color: var(--peach); color: var(--ink); }
.onb-steps .steps__item.is-done .steps__dot { background: var(--green); border-color: var(--green); color: var(--paper); }
.onb-steps .steps__item.is-done { color: var(--text-on-dark-muted); }
.onb-steps__text { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.onb-steps__label { font-size: 17px; }
.onb-steps .is-current .onb-steps__label { font-weight: 700; }
.onb-steps__num { display: none; }
.onb-steps__sub { font-size: 13px; color: var(--text-on-dark-muted); }

/* Phones: a bar of three segments, with the promise line under it. */
@media (max-width: 860px) {
  .onb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .onb-steps .steps__item { flex-direction: column; gap: 7px; font-size: 12px; }
  .onb-steps .steps__item::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--ink-line); }
  .onb-steps .steps__item.is-current::before, .onb-steps .steps__item.is-done::before { background: var(--peach); }
  .onb-steps .steps__dot, .onb-steps__sub { display: none; }
  .onb-steps__text { padding-top: 0; }
  .onb-steps__label { font-size: 12px; }
  .onb-steps__num { display: inline; }
  .split--onboarding .split__note { display: flex; }
  .split--onboarding .split__kicker { display: none; }
  .split--onboarding .split__quote { font-size: 21px; color: var(--paper); }
}

.onb__terms-box { display: flex; flex-direction: column; gap: 6px; }
.onb__terms-check { align-items: flex-start; font-size: 14px; line-height: 1.45; }
.onb__terms-check input { margin-top: 3px; }
.onb__younger { font-size: 13px; line-height: 1.5; }
.onb__teach { display: flex; flex-direction: column; gap: 16px; }
.gift-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }

/* Choosing a level, on a site without placement questions yet */
.placement__choose-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.placement__levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.placement__levels form { margin: 0; }
.placement__level { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px;
                    background: var(--card); color: var(--ink); font: inherit; text-align: var(--start); cursor: pointer; }
.placement__level:hover, .placement__level:focus-visible { border-color: var(--ink); }
.placement__level-name { font-size: 16px; font-weight: 700; }
.placement__level-text { font-size: 14px; line-height: 1.45; color: var(--text-muted); }


/* screens/playful.css */
/* Playful practice (design "FluentPlex Playful Practice"): the games (playful/show, playful_round_controller.js) and the
   word pictures (Playful::Pictures), in the page's theme: pictures colored by role (a accent, g green, p peach, o gold,
   k ink, s sand). Tiles and places are 56px or more; no timers; feedback that never shames. */

.playful, .practice--playful, .pp-sheet { --pp-a: var(--clay); --pp-g: var(--green); --pp-p: var(--peach); --pp-o: var(--gold); --pp-k: var(--ink); --pp-s: var(--sand); }

/* ---- word pictures ---- */
.pp-pic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pp-s); border-radius: 22%; overflow: hidden; aspect-ratio: 1; }
.pp-pic svg { width: 86%; height: 86%; }
.pp-pic .a { fill: var(--pp-a); } .pp-pic .g { fill: var(--pp-g); } .pp-pic .p { fill: var(--pp-p); }
.pp-pic .o { fill: var(--pp-o); } .pp-pic .k { fill: var(--pp-k); } .pp-pic .s { fill: var(--pp-s); }
.pp-pic .la, .pp-pic .lg, .pp-pic .lp, .pp-pic .lo, .pp-pic .lk, .pp-pic .ls { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pp-pic .sa, .pp-pic .sg, .pp-pic .sp, .pp-pic .so, .pp-pic .sk, .pp-pic .ss { stroke-linecap: round; stroke-linejoin: round; }
.pp-pic .la, .pp-pic .sa { stroke: var(--pp-a); } .pp-pic .lg, .pp-pic .sg { stroke: var(--pp-g); } .pp-pic .lp, .pp-pic .sp { stroke: var(--pp-p); }
.pp-pic .lo, .pp-pic .so { stroke: var(--pp-o); } .pp-pic .lk, .pp-pic .sk { stroke: var(--pp-k); } .pp-pic .ls, .pp-pic .ss { stroke: var(--pp-s); }

/* ---- the game screen ---- */
.playful { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px; padding-block: 8px 40px; }
.playful__head { display: flex; align-items: center; gap: 14px; }
.playful__close { flex: none; width: 56px; height: 56px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; text-decoration: none; }
.playful__close:hover { border-color: var(--ink); text-decoration: none; }
.playful__title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.playful__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 4vw, 32px); line-height: 1; }
.playful__progress { display: flex; gap: 5px; }
.playful__seg { flex: 1; height: 8px; border-radius: 999px; background: var(--line); }
.playful__seg.is-done { background: var(--green); }
.playful__seg.is-now { background: var(--clay); flex: 2; }
.playful__sound { flex: none; min-height: 56px; min-width: 56px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--green); background: var(--green-soft);
  color: var(--green-deep, var(--green)); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.playful__sound .playful__sound-x { display: none; }
.playful__sound.is-off { border-color: var(--line); background: var(--card); color: var(--text-muted); }
.playful__sound.is-off .playful__sound-wave { display: none; }
.playful__sound.is-off .playful__sound-x { display: inline; }
@media (max-width: 600px) { .playful__sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .playful__sound { padding: 0; justify-content: center; } }

.playful__main { display: flex; flex-direction: column; gap: 18px; outline: none; }
.playful__prompt { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 48px); padding: 22px; border-radius: 22px;
  background: var(--card); border: 1.5px solid var(--line); flex-wrap: wrap; text-align: center; }
.playful__prompt:has(> .playful__ask:only-child) { background: none; border: 0; padding: 0; justify-content: flex-start; text-align: start; }
.playful__picture { width: clamp(100px, 22vw, 150px); }
.playful__prompt-side { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 320px; }
.playful__prompt-word { font-size: clamp(44px, 9vw, 64px); line-height: 1.1; }
.playful__listen { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--clay); color: var(--text-on-accent, #fff);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 color-mix(in srgb, var(--clay) 70%, #000); }
.playful__listen svg { width: 34px; height: 34px; }
.playful__listen:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--clay) 70%, #000); }
.playful__listen--sm { width: 52px; height: 52px; box-shadow: 0 3px 0 color-mix(in srgb, var(--clay) 70%, #000); }
.playful__listen--sm svg { width: 24px; height: 24px; }
.playful__meaning { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.25; }
.playful__ask { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.45; }
.playful__wave { display: inline-block; width: 30px; height: 18px; background: repeating-linear-gradient(90deg, var(--green) 0 4px, transparent 4px 7px); border-radius: 2px; }

/* slots (build, order) */
.playful__board { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.playful__slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.playful__slots--build:dir(rtl) { gap: 0; }
.playful__slot { position: relative; min-width: clamp(64px, 14vw, 92px); height: clamp(72px, 15vw, 96px); padding: 0 12px; border-radius: 16px; border: 2.5px dashed var(--line-strong, var(--line));
  background: transparent; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); }
.playful__slots--build:dir(rtl) .playful__slot { border-radius: 0; margin-inline-start: -2.5px; }
.playful__slots--build:dir(rtl) .playful__slot:first-child { border-start-start-radius: 16px; border-end-start-radius: 16px; margin-inline-start: 0; }
.playful__slots--build:dir(rtl) .playful__slot:last-child { border-start-end-radius: 16px; border-end-end-radius: 16px; }
.playful__slot-text { font-size: clamp(32px, 7vw, 46px); line-height: 1.1; font-weight: 600; }
.playful__slots--order .playful__slot-text { font-size: clamp(22px, 5vw, 30px); }
.playful__pinyin { position: absolute; top: -26px; font-size: 15px; color: var(--text-muted); font-weight: 600; }
.playful__slots--build:has(.playful__pinyin) { margin-top: 26px; }
.playful__slot.is-right, .playful__zone.is-right { border: 2.5px solid var(--right); background: var(--card); }
.is-choosing .playful__slot:not(.is-right), .is-choosing .playful__zone:not(.is-right), .is-choosing .playful__basket,
.playful__slot.is-over, .playful__zone.is-over, .playful__basket.is-over { border-color: var(--clay); background: var(--clay-soft); box-shadow: 0 0 0 5px color-mix(in srgb, var(--clay) 18%, transparent); }
.playful__slot.is-hint, .playful__zone.is-hint, .playful__tile.is-hint, .playful__tone.is-hint, .playful__basket.is-hint { border-color: var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 35%, transparent); animation: pp-pulse 1.4s ease-in-out infinite; }
.is-bouncing { animation: pp-bounce .55s ease-out; }

/* the tray of tiles */
.playful__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px; border-radius: 22px; background: var(--sand); }
.playful__tile { min-width: 64px; min-height: 64px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 28px; font-weight: 700; line-height: 1; touch-action: none; user-select: none; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 var(--line); transition: transform .12s; }
.playful__tile .playful__tile-text { font-size: inherit; }
/* Latin letters and words in the interface's bold sans, as the design sets Turkish (its letters ç ğ ı ö ş ü). */
.playful .ar:is(:lang(tr), :lang(en)), .pp-practice .ar:is(:lang(tr), :lang(en)) { font-family: inherit; font-weight: 700; }
.playful__tile:hover:not(:disabled) { transform: translateY(-2px); }
.playful__tile.is-selected { border-color: var(--clay); box-shadow: 0 4px 0 var(--clay), 0 0 0 4px var(--clay-soft); transform: translateY(-4px); }
.playful__tile.is-used, .playful__tile.is-lifted { border-style: dashed; background: transparent; box-shadow: none; color: transparent; }
.playful__tile.is-used .playful__tile-text, .playful__tile.is-lifted .playful__tile-text { opacity: .3; color: var(--ink); }
.playful__tile.is-back { animation: pp-back .45s ease-out; }
.playful__ghost { position: fixed; top: 0; left: 0; z-index: 50; pointer-events: none; margin: 0; border-color: var(--clay); box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .35); }

/* match */
.playful__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
@media (max-width: 600px) { .playful__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.playful__card { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; background: var(--card); border: 2px solid var(--line); }
.playful__card:has(.is-right) { border-color: var(--right); }
.playful__card .pp-pic { width: 100%; }
.playful__wordcard { aspect-ratio: 1; border-radius: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 18% 22%, var(--line) 0 3px, transparent 4px), radial-gradient(circle at 82% 30%, var(--peach) 0 3px, transparent 4px),
              radial-gradient(circle at 26% 80%, var(--peach) 0 3px, transparent 4px), var(--sand); }
.playful__wordcard-meaning { font-family: var(--font-serif); font-size: 24px; }
.playful__zone { min-height: 60px; border-radius: 14px; border: 2.5px dashed var(--line-strong, var(--line)); background: transparent; font-size: 22px; font-weight: 700; color: var(--ink); }

/* sound: the basket */
.playful__basket { position: relative; width: min(100%, 300px); padding: 8px; border: 2.5px solid transparent; border-radius: 22px; background: transparent; }
.playful__basket-art { width: 100%; height: auto; display: block; }
.pp-basket { fill: var(--peach); } .pp-basket-rim { fill: var(--clay); } .pp-basket-line { stroke: color-mix(in srgb, #fff 55%, var(--peach)); }
.playful__basket-letter { position: absolute; inset: 20% 0 0; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 700; color: var(--ink); }
.playful__basket.is-right { border-color: var(--right); }

/* tones */
.playful__tones { width: 100%; padding: 16px; border-radius: 20px; border: 2px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 12px; }
.playful__tones.is-right { border-color: var(--right); }
.playful__tones-head { display: flex; align-items: baseline; gap: 10px; }
.playful__tones-char { font-size: 36px; }
.playful__tones-base { font-size: 20px; font-weight: 700; }
.playful__tones-state { margin-inline-start: auto; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.playful__tones.is-right .playful__tones-state { color: var(--right); }
.playful__tones-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.playful__tone { min-height: 72px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); box-shadow: 0 4px 0 var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.playful__tone.is-right { border-color: var(--right); background: var(--right-soft); }
.playful__tone-mark { display: block; width: 26px; height: 12px; border-top: 3px solid var(--ink); }
.playful__tone-mark--2 { border-top: 0; height: 3px; background: var(--ink); transform: rotate(-24deg); }
.playful__tone-mark--3 { border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; }
.playful__tone-mark--4 { border-top: 0; height: 3px; background: var(--ink); transform: rotate(24deg); }

/* feedback */
.playful__status { margin: 0; min-height: 1.5em; text-align: center; font-size: 17px; font-weight: 700; color: var(--text-muted); }
.playful__status.is-right { color: var(--right); }
.playful__status.is-hint { color: var(--ink); }
.playful__streak { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 800; }
.playful__streak::before { content: "★"; }
.playful__spark { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; pointer-events: none; animation: pp-burst 1.1s ease-out forwards; }
.playful__spark svg { width: 100%; height: 100%; fill: var(--gold); }
.playful__help { margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); }
.playful__done { display: flex; flex-direction: column; gap: 14px; }
.playful__built { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 20px; border-radius: 22px; border: 2.5px solid var(--green);
  background: var(--green-soft); box-shadow: inset 0 0 0 4px var(--card); }
.playful__built-word { font-size: clamp(48px, 10vw, 72px); line-height: 1.2; }
.playful__built-meaning { flex-basis: 100%; margin: 0; text-align: center; font-weight: 700; color: var(--green); }
.playful__built-meaning::before { content: "✓ "; }
.playful__again { display: inline-flex; align-items: center; gap: 8px; }
.playful__again svg { width: 20px; height: 20px; }
.playful__next { min-height: 60px; font-size: 18px; border-radius: 18px; }

/* the end of the round */
.playful__end { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; text-align: center; }
.playful__sky { position: relative; width: min(100%, 360px); height: 200px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--peach) 40%, transparent) 0%, transparent 65%); }
.playful__stars { display: flex; align-items: flex-end; gap: 10px; }
.playful__star { width: 64px; height: 64px; animation: pp-pop .5s ease-out both; }
.playful__star:nth-child(2) { width: 84px; height: 84px; }
.playful__star svg { width: 100%; height: 100%; fill: var(--line); stroke: var(--line-strong, var(--line)); stroke-width: 1.2; }
.playful__star.is-on svg { fill: var(--gold); stroke: var(--ink); }
.playful__sky.is-calm .playful__star { animation: none; }
.playful__orbit { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--peach); }
.playful__orbit--diamond { border-radius: 2px; transform: rotate(45deg); background: var(--green); }
.playful__end-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 7vw, 56px); outline: none; }
.playful__end-line { margin: 0; color: var(--text-muted); font-size: 17px; }
.playful__learned { width: 100%; padding: 16px; border-radius: 22px; text-align: start; }
.playful__learned-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.playful__learned-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.playful__learned-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--sand); }
.playful__learned-item--sentence { grid-column: 1 / -1; }
.playful__learned-pic { width: 44px; height: 44px; flex: none; }
.playful__learned-listen { border: 0; border-radius: 12px; background: var(--card); color: var(--clay); display: inline-flex; align-items: center; justify-content: center; }
.playful__learned-listen svg { width: 20px; height: 20px; }
.playful__learned-text { display: flex; flex-direction: column; min-width: 0; }
.playful__learned-word { font-size: 22px; line-height: 1.3; }
.playful__learned-meaning { font-size: 13px; color: var(--text-muted); }
.playful__end-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .playful__end-actions { grid-template-columns: 1fr; } }
.playful__end-actions .btn { min-height: 60px; font-size: 18px; border-radius: 18px; justify-content: center; }
.playful__confetti { position: fixed; inset: 0 0 auto; height: 0; pointer-events: none; z-index: 40; }
.playful__piece { position: absolute; top: 0; width: 12px; height: 12px; animation: pp-fall 3.2s ease-in forwards; }
.playful__piece svg { width: 18px; height: 18px; fill: currentColor; }
.playful__piece--dot { border-radius: 50%; background: currentColor; }
.playful__piece--square { background: currentColor; border-radius: 2px; }
.playful__piece--diamond { background: currentColor; border-radius: 2px; transform: rotate(45deg); }
.playful__piece--triangle { width: 0; height: 0; border-inline: 7px solid transparent; border-bottom: 12px solid currentColor; }
.playful__piece--c0 { color: var(--clay); } .playful__piece--c1 { color: var(--green); } .playful__piece--c2 { color: var(--peach); } .playful__piece--c3 { color: var(--gold); }

@keyframes pp-bounce { 0% { transform: translateY(-14px) scale(1.06); } 18% { transform: translateY(0) scale(.95); } 30% { transform: translateY(-4px) scale(1.02); } 45%, 100% { transform: none; } }
@keyframes pp-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--gold) 45%, transparent); } }
@keyframes pp-back { 0% { transform: translateY(-20px) rotate(-6deg); } 45% { transform: translateY(2px) rotate(1deg); } 60%, 100% { transform: none; } }
@keyframes pp-burst { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes pp-fall { 0% { transform: translate(0, -30px) rotate(0); opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--fall)) rotate(var(--rot)); opacity: 0; } }
@keyframes pp-pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .playful *, .playful *::before, .playful *::after, .playful__ghost { animation: none !important; transition: none !important; }
}

/* ---- Practice in the playful style (practice/playful) ---- */
.pp-practice { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.pp-practice__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pp-practice__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 7vw, 56px); line-height: 1; }
.pp-practice__lead { margin: 8px 0 0; color: var(--text-muted); }
/* Playful practice on or off, on the Practice page itself (practice/_playful_switch), in either style */
.pp-switch { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.pp-switch__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pp-switch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-switch__label { cursor: pointer; }
.pp-switch__more-link { border: 0; background: none; padding: 0; margin-inline-start: 4px; font: inherit; font-weight: 600; color: var(--clay); text-decoration: underline; cursor: pointer; }
.pp-switch__label { font-size: 15px; font-weight: 600; }
.pp-switch__desc, .pp-switch__note { font-size: 13px; color: var(--text-muted); margin: 0; }
.pp-switch__more { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.pp-switch__more > summary { font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.pp-switch__more[open] > summary { margin-bottom: 8px; }
.pp-practice > .pp-switch { margin-top: -4px; }
.pp-trainer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 28px; border-radius: 24px; background: var(--ink); color: var(--text-on-dark, #fff); }
.pp-trainer__kicker { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.pp-trainer__title { margin: 6px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 4vw, 32px); }
.pp-trainer__play { min-height: 60px; padding: 0 30px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: 18px;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pp-trainer__play:hover { color: var(--ink); text-decoration: none; filter: brightness(1.05); }
.pp-games { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .pp-games { grid-template-columns: 1fr; } }
.pp-game { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 24px; }
.pp-game--build { background: color-mix(in srgb, var(--clay) 12%, var(--card)); }
.pp-game--order { background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.pp-game--match { background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
.pp-game--sound { background: var(--sand); }
.pp-game__preview { min-height: 96px; margin-bottom: 8px; padding: 14px; border-radius: 18px; background: var(--card); display: flex; align-items: center; justify-content: center; gap: 8px; }
.pp-game__row { display: inline-flex; gap: 8px; }
.pp-game__pic { width: 64px; }
.pp-game__tile { min-width: 44px; height: 46px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); box-shadow: 0 3px 0 var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.pp-game__tile.is-placed { border-color: var(--green); }
.pp-game__tile--word { font-size: 18px; }
.pp-game__arrow { color: var(--text-muted); }
.pp-game__listen { width: 56px; height: 56px; border-radius: 50%; background: var(--clay); color: var(--text-on-accent, #fff); display: inline-flex; align-items: center; justify-content: center; }
.pp-game__name { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; }
.pp-game__what { margin: 0; font-size: 15px; color: var(--text-body); }
.pp-game__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pp-game__meta { display: flex; flex-direction: column; gap: 4px; }
.pp-game__stars { font-size: 18px; letter-spacing: 2px; color: var(--line-strong, var(--line)); }
.pp-game__stars .is-on { color: var(--gold); }
.pp-game__count { font-size: 13px; color: var(--text-muted); }
.pp-game__play { min-width: 76px; min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--text-on-dark, #fff); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pp-game__play:hover { color: var(--text-on-dark, #fff); text-decoration: none; filter: brightness(1.2); }

/* ---- Practice style in Profile (profiles/_practice_style) ---- */
.pp-settings__locked { font-size: 14px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.pp-settings__celebrations { border: 0; margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pp-settings__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 16px; background: var(--sand); }
.pp-settings__choice { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; justify-content: center; padding: 8px; border-radius: 12px; cursor: pointer; text-align: center; }
.pp-settings__choice:has(:checked) { background: var(--ink); color: var(--text-on-dark, #fff); }
.pp-settings__choice:has(:focus-visible) { outline: 3px solid var(--clay); outline-offset: 2px; }
.pp-settings__choice-name { font-weight: 700; }
.pp-settings__choice-desc { font-size: 12px; opacity: .8; }
.pp-settings__note { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--sand); font-size: 14px; }

/* ---- a class's playful practice (teach/classrooms/_playful) ---- */
.pp-class { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 2px solid var(--green); border-radius: 24px; }
.pp-class__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pp-class__title { margin: 0; font-size: 19px; font-weight: 700; }
.pp-class__desc { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.pp-class__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .pp-class__options { grid-template-columns: 1fr; } }
.pp-class__option { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 16px; background: var(--sand); }
.pp-class__option-name { display: block; font-weight: 700; }
.pp-class__option-desc { display: block; font-size: 13px; color: var(--text-muted); }
.pp-class__switch { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.pp-class__state { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.pp-class__note { margin: 0; font-size: 13px; color: var(--text-muted); }
.pp-week { padding: 18px; border-radius: 22px; }
.pp-week__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.pp-week__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pp-week__table th, .pp-week__table td { padding: 10px 0; border-top: 1px solid var(--line); text-align: start; }
.pp-week__table th { font-weight: 700; padding-inline-end: 12px; }
.pp-week__table td { color: var(--text-body); }
.pp-week__stars { text-align: end !important; font-weight: 700; white-space: nowrap; }
.pp-week__stars span { color: var(--gold); }

/* the course's progress (practice/playful) */
.pp-course { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--line); }
.pp-course__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pp-course__kicker { flex-basis: 100%; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); }
.pp-course__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; }
.pp-course__learned { color: var(--text-muted); font-size: 15px; }
.pp-course__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pp-course__pick-label { font-size: 15px; font-weight: 700; color: var(--text-muted); }
.pp-course__select { min-width: 0; max-width: 100%; flex: 0 1 auto; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 15px; }
.pp-course__go { padding: 8px 14px; border-radius: 12px; border: 0; background: var(--green); color: #fff; font: inherit; font-weight: 700; }
.pp-course__chosen { margin: 0; color: var(--text-muted); font-size: 14px; }
.pp-course__bar { height: 12px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.pp-course__bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }

/* Admin → Playful course */
.pp-admin__stages { display: flex; flex-wrap: wrap; gap: 4px; margin-block: 12px; }
.pp-admin__stage { min-width: 34px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); text-align: center; text-decoration: none; }
.pp-admin__stage.is-current { background: var(--ink); color: var(--paper); }
.pp-admin__pic { width: 56px; }
.pp-admin__word { font-size: 22px; }
.pp-admin__meanings { font-size: 13px; color: var(--text-muted); }
.pp-admin tr.is-hidden td { opacity: .45; text-decoration: line-through; }

/* The Mistakes set (practice/playful; design "FluentPlex Mistakes", frame 1d): one big peach card, the count in a circle */
.pp-mistakes { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 28px; background: var(--peach); color: var(--ink); text-decoration: none; }
.pp-mistakes:hover { color: var(--ink); text-decoration: none; filter: brightness(1.03); }
.pp-mistakes:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pp-mistakes__count { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card);
                      box-shadow: 0 5px 0 rgba(0, 0, 0, .12); font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.pp-mistakes__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-mistakes__title { font-size: 20px; font-weight: 800; line-height: 1.15; }
.pp-mistakes__line { font-size: 14px; line-height: 1.35; }
.pp-mistakes__play { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 0 20px; border-radius: 999px;
                     background: var(--ink); color: var(--card); font-size: 17px; font-weight: 800; }
.pp-mistakes__trainer { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--green); }


/* screens/poetry.css */
/* Poetry & meter */

.poem__mode {
  border: 1px solid var(--clay);
  border-radius: var(--radius-pill);
  color: var(--clay);
  padding: 8px 16px;
  font-size: 14px;
}
.poem__mode:hover { background: var(--clay-soft); color: var(--clay); text-decoration: none; }
.poem__mode[aria-current="page"] { background: var(--clay); color: var(--text-on-accent); }

.poem__card {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 40px clamp(20px, 4vw, 48px);
  border-radius: var(--radius-lg);
}
.poem__couplet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 8px 56px;
  text-align: center;
}
.poem__half { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.8; }
.poem__translation { font-size: 21px; color: var(--text-body); text-align: center; text-wrap: balance; }
.poem__recite { display: flex; justify-content: center; margin-top: -10px; }

.poem__scansion { display: flex; flex-direction: column; gap: 22px; border-top: 1px solid var(--line); padding-top: 24px; }
.poem__feet { display: flex; gap: 10px; flex-wrap: wrap; }
.poem__foot {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.poem__syllables { display: flex; gap: 4px; }
.poem__syl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 46px;
  color: var(--ink);
  font-size: 14px;
}
button.poem__syl:hover { border-color: var(--ink); }
.poem__syl.is-right { background: var(--right-soft); border-color: var(--right); }
.poem__syl.is-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.poem__mark { font-size: 20px; line-height: 1; height: 22px; }
.poem__foot-name { font-size: 20px; }
.poem__result { font-size: 15px; color: var(--text-body); }

.poem__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.poem__meter, .poem__how { gap: 10px; }
.poem__meter-name { font-size: 32px; }
.poem__meter-ar { font-size: 30px; color: var(--peach); }
.poem__pattern { font-size: 22px; line-height: 1.7; }
.poem__meter-note { font-size: 14px; color: var(--text-on-dark-muted); line-height: 1.5; }
.poem__mnemonic { font-size: 22px; color: var(--peach); }

.poem__rule { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 1.4; }
.poem__rule-mark { font-size: 22px; width: 30px; text-align: center; flex-shrink: 0; }
.poem__how-note { font-size: 14px; color: var(--text-body); line-height: 1.5; }

@media (max-width: 600px) {
  .poem__card { padding: 24px 16px; }
  .poem__foot { flex: 1 1 auto; }
  .poem__syl { min-width: 0; flex: 1; padding: 6px 4px; }
}

/* Lines from the library */
.poem__library { display: flex; flex-direction: column; gap: 8px; }
.poem__library-row { flex-wrap: wrap; }
.poem__library-row .input { width: auto; max-width: 100%; }
.poem__recite { align-items: center; gap: 12px; flex-wrap: wrap; }
.poem__source { font-size: 14px; }
.poem__feet[dir="rtl"] .poem__syl .ar { font-size: 19px; }


/* screens/practice.css */
/* Practice: the everyday activities as shortcut tiles, then a card per
   grammar drill (practice/_drill_card). The chosen mode has a ✓ and a dark
   outline, the chosen level reads "✓ B1": never color alone. */
.practice { gap: 22px; }
.practice__head { display: flex; flex-direction: column; gap: 6px; }
.practice__lead { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-body); }
.practice__eyebrow { margin: 0; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.practice__every { display: flex; flex-direction: column; gap: 10px; }
.practice__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.practice__tile { height: 100%; min-height: 84px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px;
                  background: var(--card); color: var(--ink); border: 1px solid var(--line); text-decoration: none; }
.practice__tile:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.practice__tile--clay { background: var(--clay); border-color: var(--clay); color: var(--text-on-accent); }
.practice__tile--clay:hover { background: var(--clay-hover); color: var(--text-on-accent); }
.practice__tile--green { background: var(--green); border-color: var(--green); color: var(--paper); }
.practice__tile--green:hover { background: var(--green-deep); color: var(--paper); }
.practice__tile--peach { background: var(--peach); border-color: var(--peach); color: var(--ink); }
.practice__tile--peach:hover { border-color: var(--ink); }
.practice__tile-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 24px; }
.practice__tile-ar { font-family: var(--font-arabic); font-size: 18px; line-height: 1.3; }
.practice__tile-label { font-size: 15px; font-weight: 700; }
.practice__tile-meta { font-size: 12px; line-height: 1.35; opacity: .9; }
.practice__hidden { margin: 0; font-size: 13px; color: var(--text-body); }
.practice__hidden a { font-weight: 600; }

.practice__drills { display: flex; flex-direction: column; gap: 12px; }
.practice__drills-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.practice__h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.1; }
.practice__drills-sub { font-size: 13px; color: var(--text-muted); }

/* A drill card */
.drill-card { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); scroll-margin-top: 16px; }
.drill-card:target { border-color: var(--ink); }
.drill-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px 24px; }
.drill-card__intro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.drill-card__titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.drill-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.05; }
.drill-card__title-ar { font-family: var(--font-arabic); font-size: 22px; color: var(--clay); line-height: 1.4; }
.drill-card__line { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-body); }
.drill-card__last { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-line); }
.drill-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.drill-card__none { color: var(--text-muted); }
.drill-card__sep { color: var(--line-dashed); }
.drill-card__link { font-weight: 600; }
.drill-card__sample { flex-shrink: 0; min-width: 200px; display: flex; flex-direction: column; align-items: center; padding: 8px 18px; border-radius: 14px; background: var(--paper); }
.drill-card__sample-ar { font-family: var(--font-arabic); font-size: 30px; line-height: 1.9; white-space: nowrap; }
.drill-card__sample-cap { margin-top: -4px; font-size: 12px; color: var(--text-muted); }

.drill-card__modes-set, .drill-card__level-set, .drill-card__answer-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.drill-card__legend { padding: 0; margin-bottom: 10px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.drill-card__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drill-card__modes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.drill-card__mode { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 14px;
                    border: 1.5px solid var(--line); cursor: pointer; }
.drill-card__mode:hover { border-color: var(--line-strong); }
.drill-card__mode:has(:checked) { background: var(--field); border-color: var(--ink); }
.drill-card__mode:has(:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
.drill-card__mode-input, .drill-card__level-input, .drill-card__pill input { position: absolute; opacity: 0; pointer-events: none; }
.drill-card__mode-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.drill-card__mode-name { font-size: 14px; font-weight: 700; }
.drill-card__mode:has(:checked) .drill-card__mode-name::before { content: "✓ "; }
.drill-card__can-type { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0 7px; font-size: 11px; font-weight: 700; color: var(--ink-line); white-space: nowrap; }
.drill-card__mode-ar { align-self: stretch; text-align: right; /* physical: text in the language taught keeps its own side */ font-family: var(--font-arabic); font-size: 20px; line-height: 1.85; }
.drill-card__mode-gloss { font-size: 12px; line-height: 1.35; color: var(--text-body); }

.drill-card__foot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.drill-card__levels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--sand); }
.drill-card__level { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; }
.drill-card__level:has(:checked) { background: var(--ink); color: var(--paper); }
.drill-card__level:has(:checked) span::before { content: "✓ "; }
.drill-card__level:has(:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.drill-card__cover { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-line); }

.drill-card__answer { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.drill-card__answer-by { display: flex; flex-direction: column; gap: 8px; }
.drill-card__answer-set .drill-card__legend { margin-bottom: 8px; }
.drill-card__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.drill-card__pill { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
                    border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; cursor: pointer; }
.drill-card__pill:has(:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.drill-card__pill:has(:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
.drill-card__vowels { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; cursor: pointer; }
.drill-card__vowels input { width: 18px; height: 18px; accent-color: var(--green); margin: 0; flex-shrink: 0; }
.drill-card__muted { color: var(--text-muted); }
.drill-card__mc-only, .drill-card__phone-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-body); }
.drill-card__mc-only strong { color: var(--ink); }
.drill-card__phone-note { display: none; }
/* "Answer by" only for a mode that can be typed; Vowels optional only with Type. */
.drill-card:has(.drill-card__mode-input[data-typable="false"]:checked) .drill-card__answer-by,
.drill-card:has(.drill-card__mode-input[data-typable="true"]:checked) .drill-card__mc-only { display: none; }
.drill-card:has(input[name="typed"][value="0"]:checked) .drill-card__vowels { display: none; }
.drill-card:has(.drill-card__mode-input[data-typable="false"]:checked) .drill-card__phone-type { display: none; }
.drill-card__start { min-height: 50px; padding: 0 26px; border: 0; border-radius: var(--radius-pill); background: var(--clay); color: var(--text-on-accent);
                     font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.drill-card__start:hover { background: var(--clay-hover); }
.drill-card__start:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

@media (max-width: 860px) {
  .drill-card__modes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drill-card__foot { grid-template-columns: 1fr; align-items: stretch; }
}

/* Phones answer by multiple choice: no "Can type" tags or Answer by. */
@media (max-width: 640px) {
  .practice__tiles { grid-template-columns: 1fr 1fr; }
  .practice__h2 { font-size: 28px; }
  .drill-card { padding: 16px; }
  .drill-card__head { flex-direction: column; align-items: stretch; }
  .drill-card__title { font-size: 26px; }
  .drill-card__title-ar { font-size: 19px; }
  .drill-card__sample { min-width: 0; }
  .drill-card__sample-ar { font-size: 24px; }
  .drill-card__modes, .drill-card__modes--4 { grid-template-columns: 1fr 1fr; }
  .drill-card__mode-ar { font-size: 18px; }
  .drill-card__can-type, .drill-card__answer-by, .drill-card__mc-only { display: none !important; }
  .drill-card__phone-note { display: block; }
}

/* Listening (ListenFirst): the Listen first card */
.practice__listening { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.listen-card { display: flex; flex-direction: column; gap: 16px; padding: 24px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.listen-card__head { display: flex; flex-direction: column; gap: 6px; }
.listen-card__titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.listen-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.05; }
.listen-card__title-ar { font-family: var(--font-arabic); font-size: 22px; color: var(--clay); line-height: 1.4; }
.listen-card__line { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-body); }
.listen-card__last { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-line); }
.listen-card__new { color: var(--text-muted); }
.listen-card__text { display: flex; align-items: center; gap: 14px 20px; padding: 14px 16px; border-radius: 16px; background: var(--paper); }
.listen-card__about { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.listen-card__kicker { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.listen-card__ar { align-self: flex-start; font-family: var(--font-arabic); font-weight: 700; font-size: 27px; line-height: 1.8; }
.listen-card__en { font-family: var(--font-serif); font-size: 22px; line-height: 1.1; }
.listen-card__meta { margin-top: 4px; font-size: 13px; color: var(--text-body); }
.listen-card__level { padding: 1px 7px; border: 1px solid var(--line-mid); border-radius: 6px; background: var(--sand); color: var(--ink); font-weight: 700; }
.listen-card__buttons { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.listen-card__start, .listen-card__another { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; text-decoration: none; }
.listen-card__start { min-height: 50px; padding: 0 26px; background: var(--clay); color: var(--text-on-accent); font-size: 16px; }
.listen-card__start:hover { background: var(--clay-hover); color: var(--text-on-accent); text-decoration: none; }
.listen-card__another { min-height: 46px; padding: 0 18px; border: 1.5px solid var(--line-strong); color: var(--ink); font-size: 14px; }
.listen-card__another:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.listen-card__start:focus-visible, .listen-card__another:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.listen-card__none { margin: 0; font-size: 14px; color: var(--text-body); }
@media (max-width: 640px) {
  .listen-card { padding: 16px; }
  .listen-card__title { font-size: 26px; }
  .listen-card__text { flex-direction: column; align-items: stretch; }
  .listen-card__ar { font-size: 23px; }
  .listen-card__buttons { flex-direction: row; }
  .listen-card__buttons > * { flex: 1; }
}

/* Dictation card (Dictation) */
.dictation-card { display: flex; flex-direction: column; gap: 16px; padding: 24px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); scroll-margin-top: 16px; }
.dictation-card__head { display: flex; justify-content: space-between; gap: 12px 24px; }
.dictation-card__intro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dictation-card__sample { align-self: flex-start; display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 14px; background: var(--paper); }
.dictation-card__sample-ar { font-family: var(--font-arabic); font-size: 24px; line-height: 1.9; white-space: nowrap; }
.dictation-card__sample-ar .dict-s__part { text-underline-offset: 6px; }
.dictation-card__sample-cap { margin-top: -4px; font-size: 12px; color: var(--text-muted); }
.dictation-card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: end; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.dictation-card__check { border: 0; margin: 0; padding: 0; min-width: 0; }
.dictation-card__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sand); max-width: 420px; }
@media (max-width: 640px) {
  .dictation-card { padding: 16px; }
  .dictation-card__head { flex-direction: column; }
  .dictation-card__foot { grid-template-columns: 1fr; }
}

/* The level practised (practice/_level_bar): the learner's own marked with a dot; a note and a way back when it's
   another. */
.practice-level { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.practice-level__mark { color: var(--clay); }
.segmented__option[aria-current="page"] .practice-level__mark { color: inherit; }
.practice-level__note { margin: 0; font-size: 14px; color: var(--text-muted); }
.practice-level__back { margin-left: 6px; font-weight: 600; white-space: nowrap; }

/* The course's games on the regular Practice page (practice/_course_card), in the Listen first card's shape. */
.course-card { margin-top: 20px; }
.course-card__pick { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 380px; }
.course-card__pick-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.course-card__games { flex-wrap: wrap; }


/* screens/pricing.css */
/* Pricing */

.pricing__intro {
  max-width: 1120px;
  padding-top: 48px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.pricing__eyebrow { margin: 0 0 -8px; font-weight: 700; }
.pricing__title { font-size: clamp(44px, 6vw, 76px); line-height: 1; margin: 0; }
.pricing__lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-body); max-width: 560px; }

.pricing__plans {
  max-width: 1000px;
  padding-top: 12px;
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}
.pricing__plan { display: flex; flex-direction: column; gap: 18px; position: relative; }
.pricing__plan--pro { box-shadow: 0 30px 60px -30px rgba(28, 35, 33, .6); }
.pricing__trial { position: absolute; top: -13px; inset-inline-end: 28px; }

.pricing__plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pricing__plan-name { font-size: 34px; margin: 0; line-height: 1.1; }
.pricing__plan-for { font-size: 13px; color: var(--text-muted); }
.pricing__plan--pro .pricing__plan-for { color: var(--text-on-dark-muted); }

.pricing__price-block { display: flex; flex-direction: column; gap: 4px; }
.pricing__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.pricing__amount { font-size: 56px; line-height: 1; }
.pricing__per { font-size: 15px; color: var(--text-muted); }
.pricing__note { font-size: 13px; color: var(--text-on-dark-muted); }
.pricing__plan--pro .pricing__amount { color: var(--peach); }
.pricing__plan--pro .pricing__per { color: var(--text-on-dark-muted); }

.pricing__cta { padding: 14px; font-weight: 600; }
.pricing__plan .btn--outline { border-width: 1.5px; }
.pricing__plan--pro .pricing__cta { font-weight: 700; }

.pricing__features { border-top: 1px solid var(--line); padding-top: 18px; }
.pricing__features--pro { border-top-color: var(--ink-line); display: flex; flex-direction: column; gap: 10px; }
.pricing__plus { font-size: 13px; font-weight: 600; color: var(--text-on-dark-muted); }

.pricing__heading { font-size: 40px; margin: 0; }

.pricing__compare {
  max-width: 1000px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pricing__table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.pricing__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.pricing__table th, .pricing__table td { padding: 13px 20px; text-align: var(--start); font-weight: 400; vertical-align: middle; }
.pricing__table th:first-child { width: 50%; }
.pricing__table thead th {
  background: var(--sand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-body);
  padding-top: 14px;
  padding-bottom: 14px;
}
.pricing__table tbody tr { border-top: 1px solid var(--line-soft); }
.pricing__table .is-missing { color: var(--text-faint); }
.pricing__table .pricing__pro-cell { font-weight: 600; color: var(--green); }

.pricing__faq { padding-bottom: 80px; display: flex; flex-direction: column; gap: 12px; }
.pricing__faq .pricing__heading { margin-bottom: 6px; }
.pricing__question { border-top: 1px solid var(--line-strong); }
.pricing__question summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 600;
}
.pricing__question summary::-webkit-details-marker { display: none; }
.pricing__question summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--clay); line-height: 1; }
.pricing__question[open] summary::after { content: "−"; }
.pricing__question summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pricing__question p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--text-body); }

@media (max-width: 600px) {
  .pricing__plan { padding: 24px; }
  .pricing__table { font-size: 14px; }
  .pricing__table th, .pricing__table td { padding: 12px 10px; }
  .pricing__table th:first-child { width: 44%; padding-inline-start: 14px; }
  .pricing__table thead th { font-size: 11px; letter-spacing: .5px; }
  .pricing__heading { font-size: 34px; }
}

/* Already Pro, from any source: nothing more to buy. */
.pricing__have-pro {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px;
  background: var(--card); border: 1.5px solid var(--green); border-radius: 16px; font-size: 16px; line-height: 1.45; text-align: var(--start);
}
.pricing__have-pro > span:nth-child(2) { flex: 1; min-width: 200px; }
.pricing__have-pro a { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pricing__have-pro-mark {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--paper); font-weight: 700;
}
/* The Teacher plan (pages/_teacher_plan), as wide as the plans above it */
.pricing__teacher { margin-top: 40px; margin-bottom: 56px; }
.pricing__teacher .teacher-plan, .pricing__teacher .pricing-school { max-width: 872px; margin: 0 auto; }
.pricing__teacher:has(+ .pricing__teacher) { margin-bottom: 0; }
.pricing__teacher + .pricing__teacher { margin-top: 20px; }


/* screens/profile.css */
/* Profile & settings */

.profile { max-width: 860px; gap: 22px; }

.profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.profile__avatar { width: 64px; height: 64px; font-size: 26px; }
.profile__who { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.profile__name { font-size: 28px; }
.profile__sub { font-size: 14px; color: var(--text-muted); }
.profile__plan-badge { padding: 8px 14px; font-weight: 700; text-decoration: none; }
.profile__plan-badge:hover { text-decoration: none; opacity: .9; }
.profile__plan-badge.chip--solid-clay:hover { color: var(--text-on-accent); }
.profile__plan-badge.chip--ink:hover { color: var(--peach); }

.profile__card { display: flex; flex-direction: column; gap: 14px; }
.profile__title { margin: 0; padding: 0; font-size: 15px; font-weight: 600; }
.profile__label { margin: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.profile__meta { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Radio/checkbox chips: the input is visually hidden inside a .toggle-chip label. */
.profile__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.profile__group legend { margin-bottom: 14px; }
.profile__choices { --row-gap: 6px; }
.profile__genius-ar { font-size: 1.2em; unicode-bidi: isolate; }
.profile__genius { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px 14px; }
@media (max-width: 560px) { .profile__genius { grid-template-columns: 1fr; gap: 6px; } }
.profile__choice { cursor: pointer; gap: 8px; }
.profile__choice--ink { border-color: var(--ink); }
.profile__choice:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.profile__choice:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.profile__choice-ar { font-size: 16px; line-height: 1; }

/* Learning: daily goal, kind of Arabic, reasons (the same choices Today, the Library and Genius ask) */
.profile__learning { gap: 24px; }
.profile__group--ruled { border-top: 1px solid var(--line-soft); padding-top: 22px; }
/* A floated legend sits in the flow, below the rule, not across it. */
.profile__learning .profile__group legend { float: inline-start; width: 100%; margin-bottom: 2px; font-size: 17px; font-weight: 700; }
.profile__learning .profile__group legend + * { clear: both; }
.profile__hint { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.profile__any { font-weight: 400; font-size: 14px; color: var(--text-muted); }
.profile__goals .goal-option { cursor: pointer; padding: 14px 16px; }
.goal-option:has(input:checked) { border-color: var(--ink); background: var(--sand-hover); }
.goal-option:has(input:checked) .goal-option__radio { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--card); }
.goal-option:has(input:focus-visible), .profile__kind:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.goal-option__text--stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.profile__goals .goal-option__min { font-size: 28px; }
.profile__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile__kind {
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
}
.profile__kind:hover { border-color: var(--ink); }
.profile__kind-ar { font-size: 28px; line-height: 1.4; color: var(--green); align-self: flex-start; }
.profile__kind-name { font-size: 16px; font-weight: 700; }
.profile__kind-note { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.profile__kind:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.profile__kind:has(input:checked) .profile__kind-ar { color: var(--peach); }
.profile__kind:has(input:checked) .profile__kind-note { color: var(--text-on-dark-muted); }
.profile__autosave { margin: 0; font-size: 13px; color: var(--green); font-weight: 600; }
@media (max-width: 700px) {
  .profile__goals { grid-template-columns: 1fr 1fr; }
  .profile__kinds { grid-template-columns: 1fr; }
}

/* Reading defaults & notifications */
.profile__settings { padding-top: 8px; padding-bottom: 8px; gap: 0; }
.profile__setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.profile__setting-text { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.profile__setting-label { font-size: 15px; font-weight: 600; }
.profile__setting-desc { font-size: 13px; color: var(--text-muted); }
.profile__settings-save { margin: 16px 0; }

.profile__remove { color: var(--clay); font-size: 14px; font-weight: 600; padding: 6px; }
.profile__empty { margin: 0; font-size: 14px; color: var(--text-muted); }

/* Account */
.profile__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.profile__field--wide { grid-column: 1 / -1; }

.profile__time-zone { max-width: 420px; }

/* Your data: delete account */
.profile__delete summary { cursor: pointer; font-weight: 600; color: var(--clay); }
.profile__delete-form { margin-top: 12px; max-width: 420px; }
@media (scripting: none) { .profile__autosave { display: none; } }

/* A school login's account: facts, not a form. */
.profile__facts { margin: 0 0 12px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 14px; }
.profile__facts dt { color: var(--text-muted); }
.profile__facts dd { margin: 0; }


/* screens/progress.css */
/* Progress */

.progress-screen__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin: 0;
}
.progress-screen__stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column-reverse; /* value above label; dt stays first in the markup */
  justify-content: flex-end;
  gap: 2px;
}
.progress-screen__stat-label { font-size: 14px; color: var(--text-body); }
.progress-screen__stat-value { margin: 0; font-size: 42px; line-height: 1; }

.progress-screen__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.progress-screen__title { margin: 0; font-size: 15px; font-weight: 600; }
.progress-screen__note { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Activity heatmap: 5 weeks × 7 days, darker = more activity. */
.progress-screen__heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.progress-screen__day { aspect-ratio: 1; border-radius: 6px; background: var(--line-soft); }
.progress-screen__day--1 { background: color-mix(in srgb, var(--green) 15%, var(--green-soft)); }
.progress-screen__day--2 { background: color-mix(in srgb, var(--green) 45%, var(--green-soft)); }
.progress-screen__day--3 { background: color-mix(in srgb, var(--green) 85%, var(--green-soft)); }
.progress-screen__day--4 { background: var(--green); }

/* Word mastery: one bar per SRS stage; --h is 0–100 (% of the tallest). */
.progress-screen__bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progress-screen__bar-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.progress-screen__bar-count { font-size: 13px; font-weight: 600; }
.progress-screen__bar-label { font-size: 12px; color: var(--text-muted); }
.progress-screen__bar {
  --h: 0;
  width: 100%;
  height: calc(var(--h) * 1px);
  min-height: 2px;
  border-radius: 6px 6px 0 0;
}
.progress-screen__bar--0 { background: color-mix(in srgb, var(--clay) 30%, var(--card)); }
.progress-screen__bar--1 { background: color-mix(in srgb, var(--clay) 55%, var(--card)); }
.progress-screen__bar--2 { background: var(--gold); }
.progress-screen__bar--3 { background: color-mix(in srgb, var(--green) 45%, var(--green-soft)); }
.progress-screen__bar--4 { background: color-mix(in srgb, var(--green) 85%, var(--green-soft)); }
.progress-screen__bar--5 { background: var(--green); }

/* Weekly leaderboard */
.progress-screen__board { display: flex; flex-direction: column; gap: 6px; }
.progress-screen__circle { font-size: 13px; color: var(--text-muted); }
.progress-screen__ranks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.progress-screen__rank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 15px;
}
.progress-screen__rank.is-you { background: var(--clay-soft); font-weight: 700; }
.progress-screen__rank-n { width: 20px; font-weight: 700; color: var(--text-muted); }
.progress-screen__rank-v { font-size: 20px; font-weight: 400; }
.progress-screen__hidden { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }

/* Practice: one tile per kind of exercise. */
.progress-screen__practice { grid-column: 1 / -1; }
.progress-screen__practice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}
.progress-screen__practice-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.progress-screen__practice-item:hover { text-decoration: none; color: var(--ink); background: var(--green-soft); }
.progress-screen__practice-value { font-size: 32px; line-height: 1; }
.progress-screen__practice-label { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.progress-screen__practice-label strong { display: block; color: var(--ink); font-size: 14px; }

/* Your level */
.progress-level { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.progress-level__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.progress-level__name { font-size: 30px; line-height: 1.1; }
.progress-level__when { font-size: 13px; }
.progress-level__nudge { margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--clay-soft); color: var(--ink); font-size: 14px; }
.progress-level__can { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.progress-level__skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.progress-level__history { margin: 0; font-size: 13px; }


/* screens/public.css */
/* The public dictionary and library (signed-out pages, marketing layout). */
.pub { max-width: 920px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 20px; }
.pub__crumbs { font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pub__crumbs a { color: var(--text-body); }
.pub__crumbs .ar { font-size: 17px; }
.pub__head { display: flex; flex-direction: column; gap: 8px; }
.pub__title { margin: 0; }
.pub__lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-body); max-width: 62ch; }
.pub__search { margin: 0; }

/* A word */
.pub__word-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pub__latin { font-size: 20px; color: var(--clay); font-style: italic; }
.pub__gloss { font-size: 32px; line-height: 1.15; margin: 0; }
.pub__headword { font-size: 56px; margin: 0; }
.pub__family { display: flex; flex-direction: column; gap: 12px; }
.pub__words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 4px 20px; }
.pub__word-link { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.pub__word-link span:last-child { font-size: 14px; color: var(--text-body); text-align: var(--start); }
.pub__word-link .ar { font-size: 21px; order: 2; }
.pub__word-link:hover { text-decoration: none; color: var(--clay); }
.pub__more { font-size: 14px; align-self: flex-start; }

/* A root */
.pub__root { display: flex; flex-direction: column; gap: 6px; }
.pub__root h1 { margin: 0; }
.pub__root-letters { font-size: 52px; }
.pub__root-meaning { font-size: 24px; margin: 0; }
.pub__root-meta { margin: 0; font-size: 14px; opacity: .8; }

/* Search results */
.pub__results { list-style: none; margin: 0; padding: 0; }
.pub__results li + li { border-top: 1px solid var(--line-soft); }
.pub__result { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; color: var(--ink); }
.pub__result:hover { text-decoration: none; }
.pub__result:hover .pub__result-gloss { color: var(--clay); }
.pub__result-gloss { font-size: 21px; }
.pub__result-ar { font-size: 28px; }

/* The library */
.pub__shelf { display: flex; flex-direction: column; gap: 10px; }
.pub__shelf-title { font-size: 26px; margin: 8px 0 0; }
.pub__books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.pub__book { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); }
.pub__book:hover { text-decoration: none; }
.pub__book-title { font-size: 22px; line-height: 1.2; }
.pub__book-ar { font-size: 20px; color: var(--clay); }
.pub__book-meta { font-size: 14px; color: var(--text-muted); margin: 0; }
.pub__book-desc { font-size: 15px; color: var(--text-body); }
.pub__book-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pub__book-head-ar { font-size: 34px; color: var(--clay); margin: 0; }
.pub__contents { display: flex; flex-direction: column; gap: 10px; }
.pub__toc { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 28px; }
.pub__toc li { break-inside: avoid; }
.pub__toc a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 15px; }
.pub__toc-page { color: var(--text-muted); font-size: 13px; }

/* A page */
.pub__page-head { gap: 12px; flex-wrap: wrap; }
.pub__page-title { font-size: 28px; margin: 0; }
.pub__page-section { font-size: 15px; color: var(--text-body); }
.pub__pager { flex-wrap: wrap; gap: 8px; }
.pub__pager-count { font-size: 14px; color: var(--text-muted); }
.pub__text { display: flex; flex-direction: column; gap: 14px; }
.pub__para { font-size: 25px; line-height: 2; margin: 0; text-align: justify; }
.pub__verse { font-size: 24px; line-height: 1.9; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
.pub__verse span:last-child { text-align: left; } /* physical: the verse's second half, in its own direction */
.pub__translation { margin: -6px 0 4px; font-size: 15px; line-height: 1.55; color: var(--text-body); font-style: italic; text-align: var(--start); }
.pub__note { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Sign-up invitation */
.pub__join { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.pub__join-title { font-size: 26px; margin: 0; }
.pub__join-text { margin: 0; max-width: 58ch; opacity: .85; font-size: 15px; line-height: 1.5; }

@media (max-width: 600px) {
  .pub__headword { font-size: 44px; }
  .pub__gloss { font-size: 26px; }
  .pub__para { font-size: 22px; text-align: right; /* physical: text in the language taught keeps its own side */ }
  .pub__verse { grid-template-columns: 1fr; }
  .pub__verse span:last-child { text-align: right; /* physical: text in the language taught keeps its own side */ padding-right: 24px; }
}

/* The Qurʾān's pages (public_library/_quran_page): the reader's muṣḥaf layout.
   Its words aren't looked up here, so they don't look clickable. */
.pub__quran { display: flex; flex-direction: column; gap: 14px; }
.pub__quran-tools { align-items: center; }
.pub__quran .reader__w { cursor: auto; }
.pub__quran .reader__w:hover { background: none; }
.pub__quran-flow { font-size: 25px; line-height: 2.4; }
@media (max-width: 640px) { .pub__quran-flow { font-size: 22px; } }


/* screens/quran.css */
/* The Quran page (/quran/:surah) */
.quran-page { max-width: 1180px; gap: 22px; }
.quran-page__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.quran-page__intro { display: flex; flex-direction: column; gap: 6px; }
.quran-page__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 52px); line-height: 1; margin: 0; }
.quran-page__lead { margin: 0; font-size: 15px; color: var(--text-body); }
.quran-page__toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.qp-toggle { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; }
.qp-toggle:hover { border-color: var(--ink); }
.qp-toggle.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.quran-page__body { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.quran-page__surahs { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 16px; }
.quran-page__find { width: 100%; }
.quran-page__list { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.quran-page__list li[hidden] { display: none; }
.qp-surah { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.qp-surah:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.qp-surah.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.qp-surah__n { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--green); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.qp-surah.is-current .qp-surah__n { border-color: var(--peach); }
.qp-surah__names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qp-surah__en { font-size: 15px; font-weight: 700; }
.qp-surah__meta { font-size: 12px; opacity: .8; }
.qp-surah__ar { font-size: 22px; line-height: 1.3; }

.quran-page__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qp-hero { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.qp-hero__text { display: flex; flex-direction: column; gap: 4px; }
.qp-hero__kicker { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-on-dark-muted); font-weight: 700; }
.qp-hero__name { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 0; }
.qp-hero__meaning { font-style: italic; color: var(--text-on-dark-muted); font-size: 24px; }
.qp-hero__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.qp-hero__controls { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.qp-hero__reciter { background: var(--ink-raised); color: var(--paper); border-color: var(--ink-line); }
.qp-hero__recite { background: var(--peach); color: var(--ink); border: none; }
.qp-hero__recite:hover, .qp-hero__recite.is-playing { background: var(--paper); color: var(--ink); }
.qp-hero__mushaf { background: transparent; color: var(--paper); border: 1px solid var(--ink-line); }
.qp-hero__mushaf:hover { border-color: var(--paper); color: var(--paper); }
.qp-hero__ar { font-size: 40px; line-height: 1.3; color: var(--peach); }

.qp-basmala { margin: 0; font-size: 32px; line-height: 1.8; text-align: center; color: var(--green); }
.qp-memo { margin: 0; background: var(--sand-hover); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }
.qp-memo[hidden] { display: none; }

.qp-verses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qp-verse { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; scroll-margin: 80px; }
.qp-verse.is-reciting { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.qp-verse.is-hidden { cursor: pointer; border-color: var(--line-dashed); border-style: dashed; }
.qp-verse.is-hidden .qp-verse__ar { filter: blur(9px); user-select: none; }
.qp-verse.is-hidden .qp-verse__en { visibility: hidden; }
.qp-verse__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.qp-verse__play { background: var(--sand); border: none; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.qp-verse__play:hover { background: var(--line); }
.qp-verse__ar { margin: 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.9; text-align: right; /* physical: text in the language taught keeps its own side */ flex: 1; }
.qp-verse__num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 4px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); font-size: 18px; line-height: 1; vertical-align: middle; }
.qp-verse__en { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--text-body); }
.qp-verse__en[hidden] { display: none; }
.qp-credit { margin: 0; font-size: 12px; }
.qp-pager { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }

.qp-vocab { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.qp-vocab__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.qp-vocab__title { margin: 0; font-size: 15px; font-weight: 600; }
.qp-vocab__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.qp-word { background: var(--paper); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.qp-word__ar { font-size: 28px; line-height: 1.4; text-align: right; /* physical: text in the language taught keeps its own side */ }
.qp-word__en { font-size: 14px; font-weight: 600; }
.qp-word__root { font-size: 12px; color: var(--text-muted); }
.qp-word__root .ar { font-size: 15px; }
.qp-word form { margin-top: 4px; }

@media (max-width: 860px) {
  .quran-page__surahs { position: static; flex-basis: 100%; }
  .quran-page__list { max-height: 260px; }
  .qp-hero__side { justify-content: flex-start; }
}


/* screens/reader-pinyin.css */
/* Pinyin over Chinese characters in the reader (reader/_pinyin_control, PinyinDisplay): each word a <ruby>, its
   syllables in <rt>. The text's classes choose: reader--py-all (every word), reader--py-new (the words the student
   doesn't know: not .is-known), reader--py-off; reader--tones colors each syllable by its tone (t1–t4, t0 neutral). */
[data-pinyin-root] ruby { ruby-position: over; ruby-align: center; }
[data-pinyin-root] rt { font-family: var(--font-sans); font-size: .42em; line-height: 1.1; letter-spacing: 0; color: var(--text-muted); user-select: none; }
[data-pinyin-root].reader--py-off rt,
[data-pinyin-root].reader--py-new .reader__w.is-known rt,
[data-pinyin-root].reader--py-new .reader__word.is-known rt { visibility: hidden; }
/* Graded texts: one button per word, side by side with no space between (Chinese has none). */
.reader [data-pinyin-root] .reader__ar { gap: 4px 0; align-items: flex-end; line-height: 1.9; } /* over .reader--ltr's */
[data-pinyin-root] .reader__word { margin: 0; padding: 0 1px; }
/* Room for the pinyin above each line. */
[data-pinyin-root]:not(.reader--py-off) { line-height: 2.4; }
[data-pinyin-root] .reader__w { margin: 0; padding: 0 .02em; }

/* Tone colors (a common convention: 1 red, 2 green, 3 blue, 4 purple, neutral gray). */
.reader--tones rt.t1, .reader__tones-dots .t1 { color: #C8312B; }
.reader--tones rt.t2, .reader__tones-dots .t2 { color: #2E8B3D; }
.reader--tones rt.t3, .reader__tones-dots .t3 { color: #2457C5; }
.reader--tones rt.t4, .reader__tones-dots .t4 { color: #8A3FB8; }
.reader--tones rt.t0 { color: var(--text-faint); }
.reader__pinyin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reader__pinyin-modes { display: inline-flex; align-items: center; gap: 2px; }
.reader__tones { display: inline-flex; align-items: center; gap: 6px; }
.reader__tones-dots { display: inline-flex; gap: 2px; }
.reader__tones-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* The word panel's pinyin, under the word. */
.reader__entry-pinyin { margin: -4px 0 2px; font-size: 18px; color: var(--clay); }
.reader__entry-pinyin:empty { display: none; }

/* A Chinese word's pinyin beside it in lists and on cards (PinyinDisplay.reading). */
.today__preteach-py, .fc-card__pinyin { display: block; font-size: 14px; color: var(--clay); }
.fc-card__pinyin { font-size: 18px; margin-top: 2px; }
/* A language written with spaces between words (Persian): the romanization's words keep a space between them. */
.reader [data-pinyin-root]:not(:lang(zh)) .reader__ar { gap: 4px .34em; }
[data-pinyin-root]:not(:lang(zh)) .reader__w { margin-inline: .08em; }


/* screens/reader-suffixes.css */
/* The reader for a left-to-right language whose words are a stem and suffixes
   (Turkish; capability :suffixes): the text, the Suffixes modes and the Word
   tab's anatomy (reader/_word_entry_suffixes). Design "TurkishGenius Reader". */

/* Left-to-right text: tighter lines than Arabic's, and Side by side with the text on the left. */
.reader--ltr .reader__ar { line-height: 1.55; gap: 2px 10px; }
.reader.reader--ltr.is-parallel .reader__sentence { direction: ltr; }

/* Suffixes: Off, Light (underlined from the first suffix), Full (split with dots, suffixes softer). */
.reader__dot { display: none; color: var(--line-dashed); }
.reader--suffixes-full .reader__dot { display: inline; }
.reader--suffixes-full .reader__suffix { color: var(--text-faint); }
.reader--suffixes-light .reader__suffix {
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none; /* one line under the suffixes, not broken by ş or y */
}

/* Word tab */
.reader__entry--parts .reader__entry-ar { font-size: 36px; line-height: 1.05; }
.reader__entry-word { display: flex; flex-direction: column; gap: 4px; }
.reader__entry-meaning { margin: 0; font-size: 17px; color: var(--text-body); }
.reader__entry-label { margin: 0; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.reader__anatomy { display: flex; flex-direction: column; gap: 8px; }
.reader__anatomy-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.reader__anatomy-part {
  display: flex; flex-direction: column; gap: 3px; max-width: 150px;
  background: var(--clay-soft); border: 1px solid color-mix(in srgb, var(--clay) 22%, var(--card)); border-radius: 10px; padding: 8px 10px;
}
.reader__anatomy-part--stem { background: var(--card); border-color: var(--ink); }
.reader__anatomy-form { font-family: var(--font-arabic); font-size: 22px; line-height: 1; color: var(--clay-deep); }
.reader__anatomy-part--stem .reader__anatomy-form { color: var(--ink); }
.reader__anatomy-gloss { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.reader__anatomy-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-body); }
.reader__entry-dict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.reader__entry-dict-label { font-size: 14px; color: var(--text-muted); }
.reader__entry-lemma { font-size: 24px; line-height: 1; }
.reader__entry-actions { align-items: center; }
.reader__entry-link { display: inline-flex; align-items: center; min-height: 42px; font-size: 14px; font-weight: 600; }
.reader__same-stem { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.reader__same-stem .reader__entry-label { padding-bottom: 4px; }
.reader__same-stem-list { list-style: none; margin: 0; padding: 0; }
.reader__same-stem-link {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 42px; padding: 8px 0;
  border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
}
.reader__same-stem-link:hover { color: var(--ink); text-decoration: none; background: var(--sand); }
.reader__same-stem-word { font-size: 21px; line-height: 1; }
.reader__same-stem-suffix { color: var(--text-faint); }
.reader__same-stem-en { font-size: 14px; color: var(--text-muted); }


/* screens/reader.css */
/* Reader */

.reader { max-width: 1280px; container-type: inline-size; }

.reader__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
}
.reader__main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Header: "← Library" and the page arrows on one line, the title under them,
   then the reading options, and how far into the book this page is. */
.reader__head { display: flex; flex-direction: column; gap: 14px; }
.reader__topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reader__back {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ink); border-radius: var(--radius-pill);
  padding: 0 16px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.reader__back:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.reader__top-pager { display: flex; align-items: center; gap: 6px; }
.reader__arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--ink);
}
a.reader__arrow:hover { border-color: var(--ink); text-decoration: none; }
.reader__arrow[aria-disabled="true"] { opacity: .4; }
.reader__count { font-size: 14px; font-weight: 600; padding: 0 8px; white-space: nowrap; }
.reader__count-short { display: none; }
.reader__titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.reader__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reader__title-ar { font-size: 24px; color: var(--green); align-self: flex-start; }
.reader__title { font-size: 40px; line-height: 1; margin: 0; }
.reader__title--ar { font-family: var(--font-arabic); font-weight: 700; line-height: 1.35; align-self: flex-start; }
.reader__head-progress { flex: none; }

.reader__toolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.reader__toggle { padding: 8px 14px; font-size: 13px; font-weight: 600; }
.reader__listen { padding: 8px 14px; font-size: 13px; }

/* ---- The page of text ---- */

.reader__page {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px clamp(20px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-x: clip; /* keep edge glosses from widening the page */
}
.reader__sentence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 36px;
  align-items: start;
}
.reader__ar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 34px;
  line-height: 2;
}
.reader__en {
  display: none;
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-body);
}
.reader.is-translated .reader__en,
.reader.is-parallel .reader__en { display: block; }

/* Side by side: Arabic on the right, English on the left. */
.reader.is-parallel .reader__sentence { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); direction: rtl; }
.reader.is-parallel .reader__en { direction: ltr; font-size: 18px; padding-top: 14px; }

.reader__word {
  position: relative;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  border-radius: var(--radius-sm);
  padding: 0 4px;
}
.reader__word:hover { background: var(--sand); }
.reader__word.is-saved { box-shadow: inset 0 -2px 0 var(--green); }
.reader__word.is-selected { background: var(--word-selected); box-shadow: inset 0 -2px 0 var(--word-selected-line); }

/* Hover gloss (same look as the landing page's .gloss). */
.reader__gloss {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%; /* centred over the word, either direction */
  transform: translateX(calc(-50% + var(--gloss-shift, 0px))); /* reader#placeGloss keeps it in the text area */
  width: 220px;
  z-index: 5;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  text-align: var(--start);
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ink) 40%, transparent);
}
.reader__gloss strong { font-size: 16px; }
.reader__gloss > span { color: var(--text-on-dark-muted); }
.reader__word:is(:hover, :focus-visible):not(.is-selected) .reader__gloss { display: flex; }
.reader.is-hover-off .reader__word .reader__gloss { display: none; }

.reader__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-muted);
}
.reader__pager { display: flex; gap: 8px; align-items: center; }
.reader__page-btn { padding: 8px 14px; font-size: 14px; font-weight: 400; }

/* ---- Side panel ---- */

.reader__panel {
  padding: 0;
  border-radius: 20px;
  position: sticky;
  top: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.reader__tabs { display: flex; border-bottom: 1px solid var(--line); }
.reader__tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 14px 8px;
  font-size: 14px;
  font-weight: 600;
}
.reader__tab:hover { color: var(--ink); }
.reader__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--clay); }
.reader__tabpanel { padding: 22px; }

/* Word tab */
.reader__entry { display: flex; flex-direction: column; gap: 16px; }
.reader__entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.reader__entry-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.level-pill { letter-spacing: .5px; cursor: help; }
.reader__entry-ar { font-size: 46px; line-height: 1.3; }
.reader__entry-en { font-size: 30px; line-height: 1.1; }
.reader__entry-source { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.reader__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
  align-items: baseline;
}
.reader__facts dt { color: var(--text-muted); }
.reader__facts dd { margin: 0; }
.reader__facts-root { font-size: 18px; }
.reader__family {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reader__family-title { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.reader__family-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reader__family-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.reader__family-ar { font-size: 22px; }

/* Sentence tab */
.reader__analysis { display: flex; flex-direction: column; gap: 14px; }
.reader__analysis-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.reader__analysis-pos { font-size: 13px; color: var(--text-muted); }
.reader__analysis-pos strong { color: var(--ink); }
.reader__analysis-nav { display: flex; gap: 6px; }
.reader__analysis-step { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--ink); }
.reader__analysis-step:hover:not(:disabled) { border-color: var(--ink); }
.reader__analysis-step:disabled { opacity: .4; }
.reader__analysis-ar { font-size: 27px; line-height: 2.2; text-align: start; } /* right in Arabic, left in Turkish and Chinese (dir) */
.reader__analysis-w { background: none; border: none; padding: 0 3px; margin: 0; font: inherit; color: inherit; border-radius: 6px; cursor: pointer; }
.reader__analysis-w:hover { background: var(--sand-hover); }
.reader__analysis-w.is-selected { outline: 2px solid var(--ink); background: var(--field); }
.reader__analysis-en { margin: -8px 0 0; font-family: var(--font-serif); font-size: 19px; line-height: 1.35; color: var(--text-body); font-style: italic; }
.reader__breakdown { display: flex; flex-direction: column; gap: 12px; }
.reader__analysis-explain { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reader__explain-mark { font-size: 17px; color: var(--peach); }
.reader__analysis-note { font-size: 13px; color: var(--text-muted); }
.reader__irab { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reader__irab-row {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: var(--start);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.reader__irab-row:hover { background: var(--sand-hover); }
.reader__irab-row.is-selected { background: var(--clay-soft); }
.reader__irab-ar { font-size: 22px; }

/* Assistant tab */
.reader__chat { padding: 18px; max-height: 460px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.reader__messages { display: flex; flex-direction: column; gap: 10px; }
.reader__msg {
  align-self: flex-start;
  max-width: 88%;
  background: var(--sand);
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.reader__msg--user { align-self: flex-end; background: var(--ink); color: var(--paper); }
.reader__msg-ar { font-size: 1.15em; line-height: 1.4; }
.reader__thinking { font-size: 13px; color: var(--text-muted); }
.reader__quota {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 18px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.reader__quota a { font-weight: 700; }
.reader__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px; }
.reader__chip { font-size: 12px; cursor: pointer; white-space: normal; text-align: var(--start); }
.reader__chip:hover { background: var(--sand-hover); }
.reader__ask { display: flex; gap: 8px; padding: 14px 18px 18px; }
.reader__ask .input { flex: 1; min-width: 0; }

/* Quiz tab */
.reader__quiz { display: flex; flex-direction: column; gap: 18px; }
.reader__question { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reader__question-text { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.reader__option {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  font-size: 14px;
  text-align: var(--start);
}
.reader__option:hover:not([aria-disabled="true"]) { border-color: var(--ink); }
.reader__option[aria-disabled="true"] { cursor: default; }
.reader__option.is-right { background: var(--right-soft); border-color: var(--right); }
.reader__option.is-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.reader__score { font-size: 14px; }

/* ---- Narrow: the panel goes under the text ---- */

@container (max-width: 860px) {
  .reader__layout { grid-template-columns: minmax(0, 1fr); }
  .reader__panel { position: static; }
}
@container (max-width: 560px) {
  .reader__page { padding: 28px 18px; }
  .reader__ar { font-size: 28px; gap: 2px 6px; }
  .reader__title { font-size: 32px; }
  .reader__title-ar { font-size: 21px; }
  .reader__back { min-height: 44px; padding: 0 14px; }
  .reader__arrow { width: 44px; height: 44px; }
  .reader__count { font-size: 13px; padding: 0 4px; }
  .reader__count-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .reader__count-short { display: inline; }
  /* The reading options scroll sideways in their own row. */
  .reader__toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; min-width: 0; }
  .reader__toolbar > * { flex-shrink: 0; }
  /* In the apps: no sideways scrolling. Two lines: the Vowels control with
     Listen, then the other options (they wrap further only if they must). */
  .app--native .reader__toolbar { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
  .app--native .reader__toolbar > * { order: 2; }
  .app--native .reader__toolbar > .reader__vowels { order: 0; flex: 1 1 calc(100% - 104px); }
  .app--native .reader__toolbar > .reader__listen { order: 1; }
  .app--native .reader__toolbar > .reader__vowels .reader__vowels-option { flex: 1; min-height: 36px; }
  .reader.is-parallel .reader__sentence { grid-template-columns: minmax(0, 1fr); direction: ltr; }
  .reader.is-parallel .reader__en { padding-top: 0; }
}

/* ---------- Library book pages (reader_page_controller.js) ---------- */

.reader--page { position: relative; }
.reader__byline { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); }

.reader__page--plain {
  font-size: 26px;
  line-height: 2.1;
  gap: 14px;
  text-align: justify;
}
.reader__para { margin: 0; }
.reader__verse {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
  text-align: center;
}
.reader__hemistich { min-width: 0; }

.reader__w { border-radius: var(--radius-sm); cursor: pointer; transition: background-color .1s ease; }
.reader__w:hover { background: var(--sand); }
.reader.is-hover-off .reader__w:hover:not(.is-selected) { background: none; }
.reader__w.is-selected { background: var(--clay-soft); box-shadow: inset 0 -2px 0 var(--clay); }

/* Floating gloss for the word under the pointer. */
.reader__float {
  position: absolute;
  z-index: 20;
  width: max-content;
  max-width: 260px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ink) 40%, transparent);
}
.reader__float[hidden] { display: none; }
.reader__float strong { font-size: 16px; }
.reader__float span { color: var(--text-on-dark-muted); }

.reader__footnotes { font-size: 14px; color: var(--text-muted); }
.reader__footnotes summary { cursor: pointer; font-weight: 600; }
.reader__footnotes-text { font-size: 18px; line-height: 1.8; color: var(--text-body); margin-top: 8px; }

.reader__jump { display: inline-flex; align-items: center; gap: 6px; }
.reader__jump-input { width: 72px; padding: 6px 8px; font-size: 14px; text-align: center; }
.reader__page-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.reader__lookup { display: flex; gap: 8px; margin-bottom: 18px; }
.reader__lookup .input { flex: 1; min-width: 0; font-size: 18px; }
.reader__hint { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
/* The AI's reading of a word the dictionaries don't have (reader_page_controller.js#renderAi) */
.reader__ai { margin: 0 0 14px; }
.reader__ai:empty { display: none; }
.reader__ai-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--clay); }
.reader__ai-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.reader__ai-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reader__ai-gloss { font-size: 22px; line-height: 1.2; }
.reader__ai-ar { font-size: 24px; }
.reader__ai-meta, .reader__ai-note { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.reader__alternatives { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-body); }
.reader__alternatives .ar { font-size: 20px; color: var(--ink); margin-left: 6px; } /* physical: the .ar span is right to left itself */
html[dir="rtl"] .reader__alternatives .ar { margin-left: 0; margin-right: 6px; }

.reader__contents { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.reader__contents a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
  text-decoration: none;
}
.reader__contents a:hover { background: var(--sand); text-decoration: none; }
.reader__contents a[aria-current="page"] { background: var(--clay-soft); }
/* Physical: the headings are in the language taught, indented on its own start side. */
.reader__contents-item--depth-2 a { padding-right: 22px; font-size: 16px; }
.reader__contents-item--depth-3 a { padding-right: 38px; font-size: 15px; }
.reader__contents-page { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

@media (max-width: 700px) {
  .reader__page--plain { font-size: 22px; text-align: start; }
  .reader__verse { grid-template-columns: 1fr; gap: 0; text-align: start; }
  .reader__verse .reader__hemistich + .reader__hemistich { padding-right: 24px; } /* physical: inside the text's own direction */
}

/* ---------- AI vowels, translation and vocabulary (library pages) ---------- */

.reader__ai-status {
  margin: 0;
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-body);
}
.reader__paragraph { display: flex; flex-direction: column; gap: 10px; }
.reader__variant { display: flex; flex-direction: column; gap: 14px; }
.reader__variant--vowelled { display: none; }
.reader.is-vowels .reader__variant--vowelled { display: flex; }
.reader.is-vowels .reader__variant--plain { display: none; }

.reader__translation {
  display: none;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-body);
  text-align: var(--start);
  border-inline-start: 3px solid var(--line);
  padding-inline-start: 14px;
}
.reader.is-translation .reader__translation { display: block; }

.reader__vocabulary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.reader__vocab { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.reader__vocab + .reader__vocab { border-top: 1px solid var(--line-soft); }
.reader__vocab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reader__vocab-ar { font-size: 26px; order: 2; }
.reader__vocab-en { font-size: 15px; font-weight: 600; }
.reader__vocab-note { margin: 0; font-size: 13px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.reader__vocab .button_to, .reader__vocab .save-word { align-self: flex-start; }

/* Notes tab: the student's note on this page, saved as they type. */
.reader__notes { display: flex; flex-direction: column; gap: 10px; }
.reader__notes .reader__hint { margin: 0; }
.reader__note { width: 100%; min-height: 160px; resize: vertical; font: inherit; line-height: 1.5; }
.reader__note-status:empty { display: none; }

/* The Qurʾān: verses run on as in the muṣḥaf, each ending with its number. */
.reader--quran .reader__page { line-height: 2.4; }
.quran__surah { margin: 6px 0 14px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.quran__surah:not(:first-child) { margin-top: 28px; }
.quran__surah-name {
  margin: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--green);
  border-radius: var(--radius-pill);
  font-family: var(--font-arabic);
  font-size: 22px;
  font-weight: 400;
  color: var(--green);
}
.quran__basmala { margin: 0; font-size: 26px; }
.quran__text { margin: 0 0 12px; text-align: justify; text-align-last: center; }
.quran__verse { border-radius: var(--radius-sm); transition: background-color .2s ease; }
.quran__verse.is-reciting { background: var(--green-soft); }
.quran__marker {
  background: none;
  border: 0;
  padding: 0 2px;
  font: inherit;
  font-family: var(--font-arabic);
  color: var(--green);
  cursor: pointer;
}
.quran__marker:hover { color: var(--clay); }
.quran__credit { margin-top: 8px; font-size: 13px; }
.reader__reciter { width: auto; max-width: 220px; }

/* Correcting a page of the student's own upload (reader/_page_editor, page_edit_controller.js) */
.reader__doc-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.reader__doc-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reader__doc-badge { background: var(--sand); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12px; font-weight: 700; }
.reader__doc-badge--done { background: var(--green-soft); color: var(--green); }
.reader__doc-badge--check { background: #F7E4C8; color: var(--gold-deep); }
.reader__edit-btn { display: inline-flex; align-items: center; gap: 6px; }
.reader__w.is-unsure { background: var(--mark); border-bottom: 2px dotted #C27A1A; border-radius: 4px; }
.reader__check-note { margin-top: 12px; }
.reader__unsure-note { margin: 0 0 12px; background: var(--mark); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.45; color: var(--gold-deep); }

.reader--page.is-editing :is(.reader__page, .reader__translation, .reader__check-note, .reader__ai-status, .reader__footnotes) { display: none; }
.reader--page.is-editing .reader__pager { opacity: .45; pointer-events: none; }
.reader__editor { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.reader__editor-label { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
/* The text box stands in for the page: the same box, type and line spacing, as tall as the text. */
.reader__textarea {
  display: block;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  resize: none;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 48px clamp(20px, 4vw, 56px);
  font-size: 26px;
  line-height: 2.1;
  color: var(--ink);
}
.reader__textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; }
/* The original page: in the side panel, or above the text once the panel is under it. */
.reader__scan { margin: 0; display: flex; flex-direction: column; }
.reader__scan--panel { padding: 16px; }
.reader__scan--panel .reader__scan-frame { max-height: calc(100vh - 110px); }
.reader__scan--inline { display: none; margin-bottom: 8px; }
.reader__scan--inline .reader__scan-frame { max-height: 50vh; }
.reader__scan-frame { overflow: auto; background: var(--sand); border-radius: 12px; min-height: 160px; }
.reader__scan-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }
.reader__scan-missing { padding: 20px; }
.reader__scan-open { letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--clay); }
.reader--page.is-editing :is(.reader__tabs, .reader__tabpanel) { display: none; }
@container (max-width: 860px) {
  .reader__scan--panel { display: none !important; }
  .reader__scan--inline:not([hidden]) { display: flex; }
}
.reader__editor-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.reader__chars { display: flex; gap: 6px; flex-wrap: wrap; }
.reader__char {
  min-width: 34px;
  height: 34px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
}
.reader__char:hover { border-color: var(--ink); }
.reader__restore { align-self: flex-start; background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--clay); text-decoration: underline; cursor: pointer; }
@media (max-width: 700px) {
  .reader__textarea { font-size: 22px; padding: 28px 18px; }
}

/* "You've looked this up 3 times — save it?" (learner model) */
.reader__save-prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--clay-soft);
  font-size: 14px;
  color: var(--text-body);
}
.reader__save-prompt[hidden] { display: none; }

/* A Library search carried into the reader (reader/_search_bar). */
.reader-search {
  display: flex; align-items: center; gap: 12px; padding-block: 6px; padding-inline: 16px 6px;
  background: var(--sand); border-radius: 12px;
}
.reader-search__icon { flex: none; color: var(--ink-line); }
.reader-search__status { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--ink); }
.reader-search__q { font-size: 19px; font-weight: 700; }
.reader-search__short { display: none; }
.reader-search__buttons { display: flex; align-items: center; gap: 6px; }
.reader-search__button {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.reader-search__button--next { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.reader-search__button:disabled { opacity: .45; cursor: default; }
.reader-search__close {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; color: var(--ink-line); font-size: 18px;
}
.reader-search__close:hover { background: var(--sand-hover); color: var(--ink); text-decoration: none; }

/* Matches: a soft wash and underline; the current one outlined too. */
.search-mark {
  background: var(--mark); color: var(--ink); border-radius: 5px; padding: 0 4px;
  text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 2px; text-underline-offset: 9px;
  scroll-margin: 120px;
}
.search-mark.is-current { background: var(--mark-current); outline: 2px solid var(--ink); outline-offset: 1px; }
.reader__word.search-mark { padding: 0; }

@media (max-width: 700px) {
  .reader-search { flex-direction: column; align-items: stretch; gap: 4px; padding-block: 8px 4px; padding-inline: 12px 4px; }
  .reader-search__icon { display: none; }
  .reader-search__status { font-size: 13px; padding-inline-end: 8px; }
  .reader-search__q { font-size: 17px; }
  .reader-search__long { display: none; }
  .reader-search__short { display: inline; }
  .reader-search__button { flex: 1; min-height: 44px; font-size: 14px; }
  .reader-search__close { width: 44px; height: 44px; font-size: 20px; }
  .search-mark { padding: 0 3px; text-underline-offset: 8px; border-radius: 4px; }
}

/* Arriving from a related passage: the bar steps through related pages (reader/_related_bar). */
.reader-search__approx { flex: none; font-family: var(--font-serif); font-size: 20px; line-height: 1; color: var(--green); }
a.reader-search__button, span.reader-search__button { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
a.reader-search__button:hover { text-decoration: none; border-color: var(--ink); }
a.reader-search__button--next:hover { color: var(--paper); }
span.reader-search__button { opacity: .45; }
@media (max-width: 700px) {
  .reader-search--related .reader-search__approx { display: none; }
  .reader-search__buttons > .reader-search__button { justify-content: center; }
}

/* An article added from Wikipedia: its section headings, and Qurʾān
   quotations set apart (BookPage::QURAN), left alone by the AI. */
.reader__heading { margin: 18px 0 4px; font-family: var(--font-arabic); font-weight: 700; color: var(--green); line-height: 1.4; }
.reader__heading--2 { font-size: 1.3em; }
.reader__heading--3 { font-size: 1.12em; }
.reader__paragraph:first-child .reader__heading { margin-top: 0; }
.reader__quran { margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.reader__quran-label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.reader__quran-label .ar { letter-spacing: 0; text-transform: none; font-size: 15px; }
.reader__quran-text { margin: 8px 0; font-family: var(--font-arabic); font-size: 1.15em; line-height: 2; color: var(--ink); }
.reader__quran-note { margin: 0; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
.book-source--wikipedia { display: block; line-height: 1.6; }
.book-source--wikipedia .ar { font-size: 15px; }

/* Vowels: Off / Fading / Full (VowelFading), and a faded word's vowels in the gloss. */
.reader__vowels { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--sand); flex-shrink: 0; }
.reader__vowels-label { padding-block: 0; padding-inline: 10px 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.reader__vowels-option { border: 0; background: none; border-radius: var(--radius-pill); padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer; }
.reader__vowels-option[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.reader__vowels-option:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.reader__vowels-note { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.reader__vowels-note .link-button { font-weight: 600; text-decoration: underline; color: var(--clay); }
.reader__gloss-vowels { display: block; font-size: 24px; line-height: 1.8; color: var(--peach); }
.reader:not([data-reader-vowels-value="fading"]) .reader__gloss-vowels { display: none; }

/* The page's menu (⋯): vowels practice, a reading goal. */
.reader__menu { position: relative; }
.reader__menu-button { list-style: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
                       font-size: 18px; border: 1px solid var(--line); background: var(--card); }
.reader__menu-button::-webkit-details-marker { display: none; }
.reader__menu[open] .reader__menu-button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reader__menu-list { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 20; width: 300px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px;
                     box-shadow: 0 16px 30px -16px rgba(28, 35, 33, .45); padding: 6px; display: flex; flex-direction: column; }
.reader__menu-list form { display: contents; }
.reader__menu-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 12px; border-radius: 9px; border: 0; background: none;
                     font: inherit; font-size: 14px; color: var(--ink); text-align: var(--start); text-decoration: none; cursor: pointer; }
.reader__menu-item:hover, .reader__menu-item:focus-visible { background: var(--paper); text-decoration: none; }
.reader__menu-marks { font-family: var(--font-arabic); font-size: 17px; color: var(--clay); }
/* The author reading a class unit's text: edited in the unit, not here */
.reader__unit-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.5; }
.reader__unit-note a { font-weight: 600; color: var(--clay); }

/* The quiz: under each answer, right or the right answer; the ones missed asked again (lib/reask) */
.reader__quiz-feedback { margin: 0; font-size: 14px; font-weight: 600; }
.reader__quiz-feedback.is-right { color: var(--right); }
.reader__quiz-feedback.is-wrong { color: var(--wrong); }
.reader__quiz-again { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.reader__question--again { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.reader__again-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.reader__again-next { align-self: flex-start; }


/* screens/roots.css */
/* Root explorer */

.roots__intro { display: flex; flex-direction: column; gap: 0; max-width: 620px; }
.roots__intro .screen-header__sub { margin-top: 16px; }
.roots__pick { font-size: 22px; padding: 4px 16px; }

/* Desktop: root + legend on the left, words on the right.
   Phones: root, then words, then the legend. */
.roots__layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "core main" "legend main";
  gap: 16px 24px;
  align-items: start;
}
.roots__core { grid-area: core; }
.roots__legend { grid-area: legend; }
.roots__main { grid-area: main; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.roots__core {
  border-radius: 20px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.roots__letters { font-size: 72px; line-height: 1.2; letter-spacing: 12px; color: var(--peach); }
.roots__meaning { font-size: 28px; }
.roots__count { font-size: 14px; color: var(--text-on-dark-muted); }

.roots__legend { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.roots__legend-title { font-size: 15px; font-weight: 600; margin: 0; }
.roots__legend dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.roots__legend-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}
.roots__legend-row dt { font-size: 20px; text-align: right; /* physical: text in the language taught keeps its own side */ }
.roots__legend-row dd { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-body); }

.roots__selected {
  background: var(--clay-soft);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.roots__selected-en { font-size: 28px; line-height: 1.1; }
.roots__selected-meta { font-size: 14px; color: var(--text-body); }
.roots__selected-meta .ar { font-size: 18px; }
.roots__lookup { font-size: 13px; font-weight: 600; }
.roots__selected-actions { --row-gap: 10px; }
.roots__selected-ar { font-size: 44px; line-height: 1.2; }
.roots__audio { background: var(--card); color: var(--ink); }
.roots__audio:hover { background: var(--paper); }

.roots__heading { margin: 0; }
.roots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 10px;
}
.roots__word {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease;
}
.roots__word:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.roots__word[aria-current="true"] { background: var(--clay-soft); border-color: var(--clay); }
.roots__word-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}
.roots__word-pattern { font-size: 16px; font-weight: 400; }
.roots__word-ar { font-size: 30px; line-height: 1.4; text-align: right; /* physical: text in the language taught keeps its own side */ }
.roots__word-en { font-size: 13px; line-height: 1.35; }

@media (max-width: 760px) {
  .roots__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "core" "main" "legend"; grid-template-rows: none; }
  .roots__letters { font-size: 60px; }
  .roots__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
  .roots__selected { padding: 18px; }
  .roots__selected-ar { font-size: 38px; }
}

/* Root finder */
.roots__finder { align-items: flex-end; }
.roots__search { display: flex; gap: 8px; }
.roots__search-input { width: 160px; font-family: var(--font-arabic); font-size: 18px; text-align: center; }
.roots__dict-link { color: var(--peach); font-size: 14px; font-weight: 600; margin-top: 4px; }
.roots__dict-link:hover { color: var(--paper); }

@media (max-width: 860px) {
  .roots__finder { align-items: stretch; width: 100%; min-width: 0; }
  .roots__search-input { flex: 1; width: auto; min-width: 0; }
}
.roots__links { display: flex; gap: 16px; flex-wrap: wrap; }


/* screens/site-language.css */
/* The Site language chooser (design "FluentPlex Interface Languages"): a globe and the code in headers, a full row
   in the phone menu, links in footers, a row in the account menu, cards on Profile. Colors follow the site's theme. */
.site-lang { position: relative; }
.site-lang__button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.site-lang__button:hover { border-color: var(--ink); }
.site-lang__button[aria-expanded="true"] { border: 1.5px solid var(--ink); background: var(--card); outline: 3px solid color-mix(in srgb, var(--ink) 25%, transparent); outline-offset: 2px; }
.site-lang__button .icon { width: 18px; height: 18px; }
.site-lang__code { letter-spacing: .5px; font-family: var(--font-sans); }
.site-lang__caret { font-size: 11px; }
.site-lang__button[aria-expanded="true"] .site-lang__caret { transform: rotate(180deg); }
.site-lang__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 30; width: 220px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(23, 24, 43, .45); }
.site-lang__panel[hidden] { display: none; }
.site-lang__label { padding: 8px 10px 6px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.site-lang__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-lang__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.site-lang__option:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.site-lang__option[aria-current="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 700; }
.site-lang__tick { color: var(--green); font-weight: 700; }
.site-lang__note { border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 10px 6px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.site-lang__name--ar { font-family: var(--font-ui-arabic); }

/* In the phone menu: the last item, labelled in words, opening in place. */
.site-lang--phone .site-lang__button { width: 100%; border-radius: 14px; min-height: 52px; font-size: 16px; text-align: start; background: var(--card); }
.site-lang--phone .site-lang__stack { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
.site-lang--phone .site-lang__eyebrow { font-size: 12px; color: var(--text-muted); }
.site-lang--phone .site-lang__panel { position: static; width: auto; margin-top: 8px; box-shadow: none; border-color: var(--line); border-radius: 14px; }
.site-lang--phone .site-lang__option { min-height: 48px; font-size: 17px; }

/* On the sign-in panel (dark): opens upward. */
.site-lang--dark { align-self: flex-start; margin-top: auto; }
.site-lang--dark .site-lang__button { color: #fff; border-color: rgba(255, 255, 255, .3); font-size: 14px; }
.site-lang--dark .site-lang__button[aria-expanded="true"] { background: rgba(255, 255, 255, .08); border-color: #fff; }
.site-lang--dark .site-lang__panel { top: auto; bottom: calc(100% + 10px); inset-inline-end: auto; inset-inline-start: 0; color: var(--ink); }

/* In a footer: all five as links. */
.site-lang-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-lang-links__label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.site-lang-links__label .icon { width: 16px; height: 16px; }
.site-lang-links__option { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.site-lang-links__option:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.site-lang-links__option[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }

/* The site in Arabic: its headings in a Kufi face need room above and below, and no tightened letters. */
:root { --font-ui-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[data-site="ar"] { --font-ui-arabic: "Readex Pro", system-ui, sans-serif; }
html[lang="ar"] :is(h1, h2, h3, .page-title, .serif) { letter-spacing: 0; line-height: 1.5; }

/* On Profile (design 3b): a radio group of five cards, each name in its own script. */
.site-lang-setting { display: flex; flex-direction: column; gap: 16px; }
.site-lang-setting__title { display: flex; align-items: center; gap: 10px; }
.site-lang-setting__lead { margin: 4px 0 0; color: var(--text-body); }
.site-lang-setting__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.site-lang-setting__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 76px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.site-lang-setting__card:has(:checked) { border: 2px solid var(--ink); padding: 13px; }
.site-lang-setting__card:has(:focus-visible) { outline: 3px solid color-mix(in srgb, var(--ink) 30%, transparent); outline-offset: 3px; }
.site-lang-setting__radio { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.site-lang-setting__name { font-size: 17px; font-weight: 500; }
.site-lang-setting__card:has(:checked) .site-lang-setting__name { font-weight: 700; }
.site-lang-setting__info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.5; }
.site-lang-setting__i { font-weight: 700; color: var(--ink); }
.site-lang-setting__learning { font-weight: 700; }
.site-lang-setting__saved { margin: 0; font-size: 13px; font-weight: 600; color: var(--green); }
.site-lang-setting__save { display: none; } /* choosing saves; the button is for browsers without scripts */
@media (scripting: none) { .site-lang-setting__save { display: inline-flex; } }

/* In the account menu (design 3a): a row that opens its five choices in place as menu radio items. */
/* The row is a button among the menu's links: the same type as they have (.account-menu__item), not a button's own. */
.site-lang--account .site-lang__row { width: 100%; border: 0; background: transparent; font-family: inherit; font-size: 14px; font-weight: 400;
  line-height: inherit; letter-spacing: inherit; color: var(--ink); cursor: pointer; text-align: start; }
.site-lang--account .site-lang__row[aria-expanded="true"] { background: var(--sand); }
.site-lang__row-current { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.site-lang__group { list-style: none; margin: 0 0 4px; padding: 4px 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 2px; }
.site-lang__group[hidden] { display: none; }
.site-lang__radio { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--ink); font-size: 15px; text-decoration: none; }
.site-lang__radio:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.site-lang__radio[aria-checked="true"] { font-weight: 700; background: var(--sand); }

/* "EN · Meanings in English" (shared/_meanings_en): dictionary meanings stay English in other site languages. */
.meanings-en { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 10px; border-radius: 999px;
  background: var(--sand); color: var(--ink); font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.6; }
.meanings-en__code { font-weight: 700; color: var(--green); }
.meanings-en__note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

/* The site in Arabic: English stored with the content (dictionary meanings, glosses, translations) lays itself out
   left to right from its first letter, so its punctuation lands at the right end; it stays at the interface's side. */
html[dir="rtl"] :is([class$="-en"], [class*="-en "], [class$="__en"], [class*="__en "], .dict__meaning, .tconj__meaning,
  .reader__entry-meaning, .tdict__result, .pub__gloss, .pub__result-gloss, .pub__root-meaning) { unicode-bidi: plaintext; }

/* Addresses and passwords are typed left to right in any language; in Arabic they sit at the form's right edge. */
html[dir="rtl"] input:is([type="email"], [type="password"], [type="url"], [type="tel"]) { direction: ltr; text-align: right; }


/* screens/speak.css */
/* Speak (pronunciation practice) */

.speak { gap: 22px; }

.speak__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.speak__words { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 56px; line-height: 1.4; }
.speak__punct { color: var(--text-muted); margin-inline-start: -10px; }
.speak__word { transition: color .3s ease; }
.speak__word.is-clear { color: var(--green); }
.speak__word.is-close { color: var(--gold); }
.speak__word.is-weak { color: var(--clay); }

.speak__en { font-size: 22px; color: var(--text-body); }

.speak__play {
  background: var(--sand);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
}
.speak__play:hover { background: var(--line); }

.speak__mic {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 700;
  transition: background-color .15s ease;
}
@media (hover: hover) {
  .speak__mic:hover { background: var(--green); }
}
.speak__card.is-recording .speak__mic { background: var(--clay); animation: pulse 1s infinite; }
.speak__card.is-scoring .speak__mic { background: var(--text-muted); }
.speak__mic:disabled { cursor: default; }
/* No free scores left today: Record is off. */
.speak__card.is-out .speak__mic { background: var(--line-strong); color: var(--text-muted); font-size: 13px; line-height: 1.2; padding: 0 12px; }
.speak__upgrade { font-size: 14px; font-weight: 600; }

.speak__hint { font-size: 15px; color: var(--text-body); }

.speak__result {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.speak__score { display: flex; flex-direction: column; }
.speak__score-value { font-size: 56px; line-height: 1; color: var(--green); }
.speak__score-value[data-tone="close"] { color: var(--gold); }
.speak__score-value[data-tone="weak"] { color: var(--clay); }
.speak__score-label { font-size: 13px; color: var(--text-muted); }
.speak__feedback { font-size: 14px; color: var(--text-body); max-width: 340px; text-align: var(--start); line-height: 1.5; margin: 0; }
.speak__tips { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: var(--start); }
.speak__tips li { font-size: 14px; line-height: 1.5; color: var(--text-body); }
.speak__tips .ar { font-size: 20px; color: var(--clay); margin-inline-end: 6px; }
.speak__heard { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-muted); }
.speak__heard .ar { font-size: 18px; color: var(--text-body); }

/* Where the phrase sits, and how to say it */
.speak__crumb { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.speak__step { align-items: center; }
.speak__place { font-size: 13px; color: var(--text-muted); }
.speak__translit { font-size: 15px; color: var(--text-muted); font-style: italic; }
.speak__note { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--text-body); background: var(--paper); border-radius: var(--radius-md); padding: 10px 14px; }
.speak__note strong { color: var(--clay); margin-inline-end: 4px; }
.speak__actions { justify-content: center; flex-wrap: wrap; }
.speak__left { font-size: 13px; }

/* The topic's phrases */
.speak__list { display: flex; flex-direction: column; gap: 10px; }
.speak__list h2 { margin: 0; }
.speak__phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.speak__phrase { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
.speak__phrase:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.speak__phrase[aria-current="page"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--clay); }
html[dir="rtl"] .speak__phrase[aria-current="page"] { box-shadow: inset -3px 0 0 var(--clay); }
.speak__phrase-ar { font-size: 20px; flex: 0 1 auto; min-width: 0; max-width: 60%; }
.speak__phrase-en { flex: 1; font-size: 14px; color: var(--text-body); min-width: 0; }
.speak__phrase-best { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green-deep); }
.speak__next-topic { margin: 6px 0 0; font-size: 14px; }

/* Topics (/speak) */
.speak-index { max-width: 1080px; gap: 20px; }
.speak-index__lead { margin: 0; font-size: 16px; color: var(--text-body); max-width: 640px; }
.speak-index__progress { font-size: 14px; }
.speak-index__level { display: flex; flex-direction: column; gap: 12px; }
.speak-index__level-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.speak-index__level-title { font-size: 26px; margin: 0; }
.speak-index__level-desc { flex-basis: 100%; margin: 0; font-size: 14px; }
.speak-index__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.speak-index__topic { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
.speak-index__topic:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.speak-index__topic.is-started { border-color: var(--green); }
.speak-index__topic-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.speak-index__topic-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.speak-index__topic-ar { font-size: 18px; white-space: nowrap; }
.speak-index__topic-meta { font-size: 12px; color: var(--text-muted); }
.speak-index__best { color: var(--green-deep); font-weight: 700; }

@media (max-width: 600px) {
  .speak__card { padding: 32px 18px; }
  .speak__words { font-size: 42px; }
  .speak__feedback { text-align: center; }
  .speak__phrase { flex-direction: column; align-items: flex-start; gap: 4px; }
  .speak__phrase-ar { max-width: 100%; align-self: stretch; text-align: right; /* physical: text in the language taught keeps its own side */ }
}
/* Chinese: words side by side, as the language writes them. */
.speak__words--unspaced { gap: 2px; }


/* screens/tashkil.css */
/* Vowels (tashkīl) practice: choose a mode, a set of sentences, the result.
   Target words are clay with a dashed underline; results carry ✓ or ✗ in
   text. Sentences have a line height of 2.3 for the marks above and below. */
.tashkil { display: flex; flex-direction: column; gap: 22px; }
.tashkil__title-ar { font-family: var(--font-arabic); font-size: .7em; color: var(--clay); }

/* Start: the modes as radio cards */
.tashkil__start { display: flex; flex-direction: column; gap: 18px; }
.tashkil__modes { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tashkil__mode { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: var(--card);
                 border: 1.5px solid var(--line); cursor: pointer; }
.tashkil__mode:has(.tashkil__mode-input:checked) { border-color: var(--ink); }
.tashkil__mode:has(.tashkil__mode-input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px; }
.tashkil__mode-input { position: absolute; opacity: 0; pointer-events: none; }
.tashkil__mode-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tashkil__mode-name { font-size: 18px; font-weight: 700; }
.tashkil__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-dashed); flex-shrink: 0; }
.tashkil__mode:has(.tashkil__mode-input:checked) .tashkil__radio { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--card); }
.tashkil__mode-sample { font-family: var(--font-arabic); font-size: 28px; line-height: 2; align-self: flex-end; }
.tashkil__mode-line { font-size: 14px; line-height: 1.45; color: var(--text-body); }
.tashkil__mode-note { display: none; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--gold-deep); }
.tashkil__mode-acc { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 10px; font-size: 13px; color: var(--text-muted); }
.tashkil__mode-acc strong { color: var(--ink); font-size: 15px; }
.tashkil__source { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.tashkil__source-text { font-size: 15px; color: var(--text-body); display: flex; flex-direction: column; gap: 8px; }
.tashkil__change summary { display: inline; cursor: pointer; color: var(--clay); font-weight: 600; }
.tashkil__books { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tashkil__book { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tashkil__go { min-height: 48px; padding: 0 26px; }

/* A set */
.tashkil__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tashkil__bar-start { display: flex; align-items: center; gap: 16px; }
.tashkil__back { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: var(--radius-pill); padding: 0 16px; min-height: 40px;
                 font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.tashkil__mode-title { font-size: 17px; font-weight: 700; }
.tashkil__progress { display: flex; align-items: center; gap: 12px; }
.tashkil__segments { display: flex; gap: 4px; }
.tashkil__segment { width: 44px; height: 6px; border-radius: 6px; background: var(--line); }
.tashkil__segment.is-done { background: var(--green); }
.tashkil__segment.is-current { background: var(--ink); }
.tashkil__count { font-size: 15px; font-weight: 700; }
.tashkil__instruction { margin: 0; font-size: 14px; color: var(--text-muted); }
.tashkil__form { display: contents; }
.tashkil__card { padding: 40px 48px 32px; border-radius: 22px; display: flex; flex-direction: column; gap: 18px; }
.tashkil__sentence { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; font-family: var(--font-arabic); font-size: 46px; line-height: 2.3; }
.tashkil__target-wrap { display: inline-flex; flex-direction: column; align-items: center; }
.tashkil__target { font: inherit; line-height: inherit; color: var(--clay); background: transparent; border: 0; border-bottom: 2.5px dashed var(--clay);
                   border-radius: 10px 10px 0 0; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tashkil__target.is-filled { border-bottom-style: solid; }
.tashkil__target.is-active { background: var(--mark); border-bottom-style: solid; }
.tashkil__target.is-right { color: var(--right); border-bottom: 2.5px solid var(--right); cursor: default; }
.tashkil__target.is-wrong { color: var(--wrong); border-bottom: 2.5px solid var(--wrong); cursor: default; }
.tashkil__slot { width: 22px; height: 30px; border: 2px dashed var(--clay); border-radius: 6px; display: inline-block; align-self: center; }
.tashkil__gap-label { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 54px; border: 2px dashed var(--clay); border-radius: 12px;
                      font-family: var(--font-sans, inherit); font-size: 18px; font-weight: 700; }
.tashkil__result { margin-top: -6px; border-radius: var(--radius-pill); padding: 3px 12px; font-family: var(--font-sans, inherit); font-size: 14px; line-height: 1.4;
                   font-weight: 700; white-space: nowrap; }
.tashkil__result.is-right { background: var(--right-soft); color: var(--right); }
.tashkil__result.is-wrong { background: var(--wrong-soft); color: var(--wrong); }
.tashkil__result-mark { font-family: "Noto Naskh Arabic", var(--font-arabic); font-size: 22px; line-height: 1; font-weight: 400; }

.tashkil__picker { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.tashkil__picker[hidden] { display: none; }
.tashkil__picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; }
.tashkil__picker-word { font-family: var(--font-arabic); font-size: 24px; color: var(--clay); }
.tashkil__picker-keys { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.tashkil__marks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.tashkil__mark { background: #fff; border: 1.5px solid var(--line-strong); border-radius: 16px; min-height: 104px; display: flex; flex-direction: column; align-items: center;
                 justify-content: center; gap: 2px; color: var(--ink); cursor: pointer; }
.tashkil__mark:hover, .tashkil__mark:focus-visible { border-color: var(--ink); }
.tashkil__mark-glyph { font-family: "Noto Naskh Arabic", var(--font-arabic); font-size: 46px; line-height: 1.5; }
.tashkil__mark-name { font-size: 13px; color: var(--text-body); }

.tashkil__gaps { border-top: 1px solid var(--line); padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tashkil__gap-group { margin: 0; display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.tashkil__gap-group.is-active, .tashkil__gap-group:focus-within { border-color: var(--ink); }
.tashkil__gap-group legend { padding: 0 4px; font-size: 14px; font-weight: 700; }
.tashkil__choices { display: flex; gap: 10px; flex-wrap: wrap; }
.tashkil__choice { position: relative; }
.tashkil__choice input { position: absolute; opacity: 0; }
.tashkil__choice span { display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 0 20px; min-height: 64px;
                        font-family: var(--font-arabic); font-size: 32px; line-height: 2; cursor: pointer; }
.tashkil__choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tashkil__choice input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }

.tashkil__plain { margin: 0; font-family: var(--font-arabic); font-size: 40px; line-height: 2.2; color: var(--ink-line, var(--ink-line)); }
.tashkil__type { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.tashkil__textarea { background: #fff; border: 1.5px solid var(--green); border-radius: 14px; padding: 12px 20px; min-height: 96px; font-family: var(--font-arabic);
                     font-size: 40px; line-height: 2.2; resize: vertical; }
.tashkil__keys { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tashkil__keys-label { font-size: 13px; color: var(--text-muted); margin-inline-end: 6px; }
.tashkil__key { width: 52px; height: 52px; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; font-family: "Noto Naskh Arabic", var(--font-arabic);
                font-size: 30px; line-height: 1; color: var(--ink); cursor: pointer; }

.tashkil__checked { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.tashkil__checked p { margin: 0; }
.tashkil__score { font-size: 17px; font-weight: 700; }
.tashkil__misses { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-arabic); font-size: 24px; }
.tashkil__right { color: var(--green); }
.tashkil__answer { background: var(--paper); border-radius: 16px; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
.tashkil__play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--clay); color: var(--text-on-accent); font-size: 16px; flex-shrink: 0; cursor: pointer; }
.tashkil__answer-text { flex: 1; font-family: var(--font-arabic); font-size: 32px; line-height: 2.1; }
.tashkil__from { font-size: 13px; color: var(--text-muted); }
.tashkil__from a { font-weight: 600; }
.tashkil__why { background: var(--paper); border-radius: 14px; padding: 14px 18px; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.tashkil__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tashkil__foot { font-size: 14px; color: var(--text-muted); }
.tashkil__cta { min-height: 50px; padding: 0 28px; }
.tashkil__cta:disabled { background: var(--line); color: var(--text-body); border-color: var(--line); cursor: not-allowed; }
.tashkil__ask { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.tashkil__ask-mark { font-family: var(--font-arabic); font-size: 18px; color: var(--clay); }
.tashkil__next-form { margin-inline-start: auto; }

/* Result */
.tashkil__done-head { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.tashkil__done-head .page-title { font-size: 64px; line-height: 1; }
.tashkil__review-title { margin: 8px 0 0; font-size: 15px; font-weight: 700; }
.tashkil__review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tashkil__review-item { padding: 18px 24px; border-radius: 18px; display: flex; align-items: center; gap: 24px; }
.tashkil__review-meta { display: flex; flex-direction: column; gap: 6px; width: 280px; flex-shrink: 0; font-size: 14px; }
.tashkil__again { color: var(--clay); font-weight: 600; text-decoration: none; padding: 0; }
.tashkil__review-text { flex: 1; margin: 0; font-family: var(--font-arabic); font-size: 30px; line-height: 2.1; }
.tashkil__review-text mark { background: var(--mark); color: var(--clay); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 10px; }
.tashkil__done-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tashkil__done-actions .btn { min-height: 50px; padding: 0 26px; }

/* Today's card */
.today__vowels { position: relative; display: flex; gap: 20px; align-items: center; padding-block: 22px; padding-inline: 24px 64px; border-radius: 18px; }
.today__vowels-sample { width: 92px; height: 92px; border-radius: 16px; background: var(--sand); display: flex; align-items: center; justify-content: center;
                        font-family: var(--font-arabic); font-size: 34px; line-height: 2; color: var(--clay); flex-shrink: 0; }
.today__vowels-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.today__vowels-title { font-family: var(--font-serif); font-size: 27px; line-height: 1.15; }
.today__vowels-sub { font-size: 14px; color: var(--text-body); }
.today__vowels-close { position: absolute; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; font-size: 22px;
                       color: var(--text-muted); cursor: pointer; }
.today__vowels .btn { align-self: flex-start; margin-top: 6px; }

@media (max-width: 760px) {
  .tashkil__modes { grid-template-columns: 1fr; }
  .tashkil__mode { flex-direction: row; flex-wrap: wrap; padding: 14px 16px; gap: 4px 12px; }
  .tashkil__mode-sample { display: none; }
  .tashkil__mode-head { width: 100%; }
  .tashkil__mode-acc { border: 0; padding: 0; margin: 0; }
  .tashkil__mode--full { background: var(--sand); }
  .tashkil__mode--full .tashkil__mode-name { color: var(--text-muted); }
  .tashkil__mode--full .tashkil__mode-note { display: block; }
  .tashkil__mode--full .tashkil__mode-input { pointer-events: none; }
  .tashkil__go { width: 100%; }
  .tashkil__segment { width: auto; flex: 1; }
  .tashkil__progress { flex: 1; }
  .tashkil__segments { flex: 1; }
  .tashkil__card { padding: 16px 16px 12px; border-radius: 18px; }
  .tashkil__sentence { font-size: 31px; gap: 0 10px; }
  .tashkil__target { padding: 0 5px; min-height: 44px; }
  .tashkil__gap-label { min-width: 72px; height: 40px; font-size: 15px; }
  .tashkil__result { font-size: 12px; padding: 1px 9px; }
  .tashkil__picker { position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line-strong); border-radius: 22px 22px 0 0;
                     box-shadow: 0 -14px 30px -16px rgba(28, 35, 33, .45); padding: 12px 16px 20px; }
  .tashkil__picker-keys { display: none; }
  .tashkil__marks { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tashkil__mark { min-height: 72px; background: var(--paper); border-color: var(--line); }
  .tashkil__mark-glyph { font-size: 36px; line-height: 1.4; }
  .tashkil__mark-name { font-size: 11px; }
  .tashkil__answer-text { font-size: 22px; }
  .tashkil__actions { gap: 8px; }
  .tashkil__actions .btn, .tashkil__next-form { flex: 1; }
  .tashkil__next-form .btn { width: 100%; }
  .tashkil__done-head .page-title { font-size: 44px; }
  .tashkil__review-item { flex-direction: column-reverse; align-items: stretch; gap: 4px; padding: 12px 14px; }
  .tashkil__review-meta { width: auto; }
  .tashkil__review-text { font-size: 22px; }
  .tashkil__done-actions { flex-direction: column; }
  .today__vowels { flex-direction: column; align-items: stretch; padding: 20px; }
  .today__vowels .btn { align-self: stretch; }
}
/* Arabic quoted in the assistant's answer (arabic_text.js). */
.tashkil__why-ar { font-size: 1.35em; line-height: 1.8; unicode-bidi: isolate; }


/* screens/teach.css */
/* Teacher area: class list, class view (code, assignments, students). */

/* ---------- Class list ---------- */

.teach__classes { list-style: none; margin: 0; padding: 0; }
.teach__class-card { height: 100%; gap: 10px; padding: 26px 28px; }
.teach__class-name { font-size: 28px; line-height: 1.1; }
.teach__class-meta { font-size: 14px; color: var(--text-on-dark-muted); }

.teach__new { display: flex; flex-direction: column; gap: 14px; padding: 22px; max-width: 720px; }
.teach__new-form { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Class header ---------- */

.teach__hero {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.teach__hero-name { font-size: 32px; line-height: 1.1; }
.teach__hero-sub { font-size: 14px; color: var(--text-on-dark-muted); }

.teach__code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teach__code-label { font-size: 13px; color: var(--text-on-dark-muted); }
.teach__code-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--ink-raised);
  color: var(--paper);
  border-radius: var(--radius-input);
  padding: 8px 14px;
  font-variant-numeric: tabular-nums;
}
.teach__code-value--sm { align-self: flex-start; font-size: 15px; padding: 6px 12px; margin-top: auto; }
.teach__copy { padding: 9px 16px; min-width: 76px; }

/* ---------- Panels ---------- */

.teach__grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.teach__panel { flex: 1 1 440px; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.teach__panel--students { gap: 4px; flex-basis: 100%; }
.teach__panel-title { font-size: 15px; font-weight: 600; }
.teach__panel--students .teach__panel-title { margin-bottom: 8px; }
.teach__empty { font-size: 14px; line-height: 1.5; }

/* "Assign reading" picker */

/* Assignment rows */
.teach__assignment {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teach__assignment-title { font-size: 15px; font-weight: 600; }
.teach__meta { font-size: 13px; color: var(--text-muted); }
.teach__assignment-ar { font-size: 22px; flex-shrink: 0; }
.teach__assignment-progress { --row-gap: 10px; font-size: 13px; color: var(--text-muted); flex-wrap: nowrap; }
.teach__remove {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.teach__remove:hover { color: var(--clay); }

/* Students table: one column per assignment, scrolling sideways when it's wide. */
.teach__table-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.teach__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.teach__table th, .teach__table td { padding: 10px 8px; text-align: var(--start); vertical-align: middle; }
.teach__table thead th { font-size: 12px; font-weight: 700; color: var(--text-muted); padding-top: 0; padding-bottom: 8px; vertical-align: bottom; }
.teach__table tbody tr { border-top: 1px solid var(--line-soft); }
.teach__student { font-weight: 600; min-width: 120px; overflow-wrap: anywhere; }
.teach__student a { color: var(--ink); }
.teach__student a:hover { color: var(--clay); }
.teach__level, .teach__streak, .teach__practice { white-space: nowrap; color: var(--text-muted); }
.teach__col-reading { min-width: 130px; }
.teach__col-title { display: block; color: var(--ink); }
.teach__col-sub { display: block; font-weight: 400; }
.teach__cell { display: flex; align-items: center; gap: 8px; }
.teach__cell-percent { min-width: 3ch; font-variant-numeric: tabular-nums; }

.teach__status {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  background: var(--green-soft);
  color: var(--green);
}
.teach__status--done { background: var(--green); color: var(--paper); }
.teach__status--behind { background: var(--clay-soft); color: var(--clay); }

/* Class settings (rename, archive, delete) */
.teach__manage { padding: 0; }
.teach__manage-summary { padding: 14px 22px; cursor: pointer; font-size: 14px; font-weight: 600; }
.teach__manage-body { padding: 0 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.teach__rename { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.teach__archived {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: var(--sand-hover);
  font-size: 14px;
}

/* Assignment form */
.teach__assign-form { display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.teach__assign-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.teach__assign-book { margin: 0; font-size: 15px; }
.teach__instructions { margin: 2px 0 0; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.teach__assignment.is-overdue .teach__meta { color: var(--clay); }
.teach__edit { max-width: 640px; }

@media (max-width: 560px) {
  .teach__hero { padding: 22px; }
  .teach__hero-name { font-size: 28px; }
  .teach__panel { flex-basis: 100%; padding: 18px; }
}

/* Settings */
.teach-settings .card { max-width: 640px; }
.teach-settings__time-zone { max-width: 420px; }

/* A student's page */
.teach-student { gap: 18px; }
.teach-student .teach__panel { flex: none; }
.teach-student__stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.teach-student__stat { padding: 16px 18px; display: flex; flex-direction: column-reverse; gap: 4px; }
.teach-student__stat dt { font-size: 13px; color: var(--text-muted); }
.teach-student__stat dd { margin: 0; font-size: 34px; line-height: 1; }
.teach-student__readings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.teach-student__reading { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.teach-student__reading-progress { display: flex; align-items: center; gap: 10px; width: min(100%, 220px); font-size: 14px; }
.teach-student__reading-progress .progress { flex: 1; }
.teach-student__days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  height: 140px;
}
.teach-student__day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.teach-student__day-bar { width: 100%; max-width: 28px; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--line); }
.teach-student__day.is-goal .teach-student__day-bar { background: var(--green); }
.teach-student__day-label { font-size: 12px; color: var(--text-muted); }
.teach-student__note { margin: 10px 0 0; font-size: 13px; }
.teach-student__practice { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 20px; font-size: 14px; }
.teach-student__practice-value { font-size: 22px; margin-inline-end: 6px; }
.teach-student__remove { display: flex; justify-content: flex-end; }

/* Archived classes on the class list */
.teach__archived-list summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.teach__archived-classes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* Kinds of assignment: the form shows the chosen kind's fields; the list tags each one. */
.teach__kinds { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: var(--radius-pill); background: var(--sand); }
.teach__kind-choice { position: relative; }
.teach__kind-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.teach__kind-choice span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--text-body); }
.teach__kind-choice input:checked + span { background: var(--ink); color: var(--paper); }
.teach__kind-choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.teach__assign-form:has(#assignment_kind_reading:checked) .teach__for:not(.teach__for--reading),
.teach__assign-form:has(#assignment_kind_vocabulary:checked) .teach__for:not(.teach__for--vocabulary),
.teach__assign-form:has(#assignment_kind_speaking:checked) .teach__for:not(.teach__for--speaking),
.teach__assign-form:has(#assignment_kind_words:checked) .teach__for:not(.teach__for--words) { display: none; }
.teach__for { display: flex; flex-direction: column; gap: 12px; }
.teach__kind { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--sand); font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; color: var(--text-body); }
.teach__kind--vocabulary { background: var(--green-soft); color: var(--green); }
.teach__kind--speaking { background: #F6E1D3; color: var(--clay-deep); }
.teach__kind--words { background: var(--peach); color: var(--ink); }
.teach__targets { margin: 2px 0 0; font-size: 18px; }

/* Class texts (ClassroomBook). */
.teach__texts { flex: none; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.teach__texts p { margin: 0; }
.teach__text-list { list-style: none; margin: 0; padding: 0; }
.teach__text-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.teach__share-select { flex: 1 1 260px; min-width: 0; }
.teach__rights { font-weight: 600; }
.teach__upload { align-items: center; }

/* Class insights (ClassInsights): a reading's preview in the form, and the week's lookups. */
.teach__preview { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line); }
.teach__preview p { margin: 0; font-size: 14px; }
.teach__preview-empty { margin: 0; font-size: 13px; }
.teach__preview-label { font-size: 12px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.teach__preview-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.teach__preview-words li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--sand); }
.teach__preview-words .ar { font-size: 18px; }
.teach__preview-words span:not(.ar) { font-size: 12px; color: var(--text-muted); }
.teach__preview-deck { align-self: flex-start; }
.teach__lookups { flex: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.teach__lookups p { margin: 0; }
.teach__lookup-list { margin: 0; padding-inline-start: 22px; columns: 2 220px; column-gap: 28px; }
.teach__lookup-list li { padding: 4px 0; break-inside: avoid; }
.teach__lookup-list .ar { font-size: 19px; }
.teach__lookup-count { font-size: 12px; font-weight: 600; color: var(--green); }

/* Schools (Phase C): seats, the school page, the home grouped by school. */
.seats { display: flex; flex-direction: column; gap: 8px; }
.seats p { margin: 0; }
.seats__count { font-size: 15px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.seats__count strong { font-size: 24px; font-family: var(--font-serif); font-weight: 400; }
.seats__full { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--clay-soft); color: var(--clay); }
.seats__bar { flex: none; }
.seats__period { font-size: 13px; }
.seats__who summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.seats__who p { margin-top: 6px; font-size: 13px; line-height: 1.6; }
.teach__school-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.teach__school-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.teach__school-name { font-family: var(--font-serif); font-size: 24px; font-weight: 400; margin: 0; }
.teach__school-invites { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; margin-bottom: 24px; }
.teach__school-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.teach__school-invite .row { gap: 8px; }
.teach__visiting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
                   border-radius: var(--radius-md); background: var(--sand); font-size: 14px; }
.teach__school-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.teach__school-grid .teach__panel { flex: none; }
.teach__people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.teach__people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.teach__invite-form { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.teach__invite-row { display: flex; flex-wrap: wrap; gap: 10px; }
.teach__invite-row .field { flex: 1 1 160px; }
.teach__reassign { display: flex; gap: 6px; align-items: center; }
.teach__reassign select { min-width: 0; max-width: 180px; padding: 6px 10px; font-size: 13px; }

/* School logins (Phase D): the form, and printable login cards. */
.teach__logins { flex: none; max-width: 720px; }
.teach__logins-form { display: flex; flex-direction: column; gap: 14px; }
.teach__logins-notes { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.login-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.login-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1.5px dashed var(--line); border-radius: var(--radius-md); background: var(--card); break-inside: avoid; }
.login-card__brand { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.login-card__name { font-size: 18px; }
.login-card__class { font-size: 13px; color: var(--text-muted); }
.login-card__creds { margin: 8px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.login-card__creds dt { color: var(--text-muted); }
.login-card__creds dd { margin: 0; overflow-wrap: anywhere; }
.login-card__creds code { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.teach-student__login { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.teach-student__login .row { gap: 8px; }
@media print {
  .sidebar, .topbar, .app-flash, .login-cards__header .btn, .screen-header__kicker { display: none !important; }
  .app-main { padding: 0 !important; margin: 0 !important; }
  body { background: #fff !important; }
  .login-card { border-color: #999; background: #fff; }
  .login-cards { grid-template-columns: repeat(2, 1fr); }
}
.teach-student__reset { position: relative; }
.teach-student__reset summary { list-style: none; cursor: pointer; }
.teach-student__reset summary::-webkit-details-marker { display: none; }
.teach-student__reset-body { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 5; width: min(280px, 80vw); display: flex; flex-direction: column; gap: 8px;
                             padding: 12px 14px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.12)); font-size: 13px; }

/* Referrals (Phase E): the tutor link, counts and credits. */
.referral__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--sand); }
.referral__link { flex: 1 1 200px; font-size: 14px; overflow-wrap: anywhere; }
.referral__fine { margin: 0; font-size: 13px; line-height: 1.5; }
.referral__counts { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.referral__counts dt { font-size: 13px; color: var(--text-muted); }
.referral__counts dd { margin: 0; font-size: 32px; }
.referral__available { margin: 0; font-size: 15px; }
.referral__available strong { font-size: 32px; font-weight: 400; margin-inline-end: 4px; }
.referral__spend { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.referral__gift { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.referral__gift select { min-width: 200px; }

/* A school's AI limits for its seats' students (teach/schools/_ai_limits) */
.school-limits { margin: 0; display: flex; flex-direction: column; }
.school-limits__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.school-limits__row dt { font-size: 14px; }
.school-limits__row dd { margin: 0; text-align: end; font-size: 14px; display: flex; flex-direction: column; }
.school-limits__row dd .muted { font-size: 12px; }

/* The class's daily study plans (teach/classrooms/_plans; design: Claude Design "Daily Plan"): the goals in one line
   (the form opens from it), the summary, a row per student (cards on a phone), and one student's panel. */
.class-plans { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.class-plans__goals-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 16px; font-size: 14px; line-height: 1.5; list-style: none; }
summary.class-plans__goals-line { cursor: pointer; }
summary.class-plans__goals-line::-webkit-details-marker { display: none; }
.class-plans__edit { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: 999px; padding: 0 16px; min-height: 40px;
  font-size: 14px; font-weight: 600; }
.class-plans__goals[open] .class-plans__edit { background: var(--ink); color: var(--paper); }
.class-plans__ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.class-plans__behind { color: var(--clay); font-weight: 700; }
.class-plans__summary { margin: 0; font-family: var(--font-serif); font-size: 28px; line-height: 1.2; }
.class-plans__summary strong { font-weight: 400; }
.class-plans__legend { margin: 0; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.class-plans__legend-item { display: inline-flex; align-items: center; gap: 5px; }
.class-plans__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.class-plans.has-panel .class-plans__layout { grid-template-columns: minmax(0, 1fr) 290px; }
.class-plans__table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.class-plans__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.class-plans__table thead th { background: var(--sand); text-align: start; padding: 10px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.class-plans__table thead th:first-child { padding-inline-start: 14px; }
.class-plans__table td, .class-plans__table tbody th { text-align: start; padding: 4px 8px; border-top: 1px solid var(--line); font-weight: 400; }
.class-plans__table tbody th { padding-inline-start: 14px; }
.class-plans__table tr.is-idle { background: var(--sand); }
.class-plans__table tr:has([aria-expanded=true]) { background: var(--clay-soft); }
.class-plans__who { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.class-plans__who:hover { color: var(--clay); text-decoration: none; }
.class-plans__initials { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--sand); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; }
tr.is-idle .class-plans__initials { background: var(--card); }
.class-plans__marks { display: inline-flex; gap: 4px; }
.class-plans__mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line-strong); color: var(--text-muted); }
.class-plans__mark.is-done { background: var(--green); border: 2px solid var(--green); color: var(--text-on-accent); }
.class-plans__status { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.class-plans__status.is-done { color: var(--green); }
.class-plans__status.is-idle { color: var(--text-muted); }
.class-plans__week { display: flex; flex-direction: column; gap: 4px; font-size: 13px; white-space: nowrap; }
.class-plans__days { display: flex; gap: 2px; }
.class-plans__days span { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--line-strong); }
.class-plans__days span.is-done { background: var(--green); border-color: var(--green); }
.class-plans__lessons { display: block; font-weight: 600; }
.class-plans__lesson-bar { display: block; height: 5px; margin-top: 4px; border-radius: 5px; background: var(--line); overflow: hidden; }
.class-plans__lesson-bar span { display: block; height: 100%; background: var(--ink); }
.class-plans__cards { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 8px; }
.class-plans__card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); text-decoration: none; }
.class-plans__card:hover { text-decoration: none; color: var(--ink); border-color: var(--ink); }
.class-plans__cards li.is-idle .class-plans__card { background: var(--sand); }
.class-plans__card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.class-plans__card-row strong { font-size: 15px; font-weight: 600; }
.class-plans__panel:empty { display: none; }
.class-plans__aside { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column;
  gap: 14px; position: sticky; top: 20px; }
.class-plans__aside-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 13px; }
.class-plans__aside-title { margin: 0 0 2px; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.class-plans__close { width: 44px; height: 44px; flex-shrink: 0; border: none; background: none; font-size: 22px; color: var(--ink); cursor: pointer; }
.class-plans__aside-part { display: flex; flex-direction: column; gap: 4px; }
.class-plans__aside-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.class-plans__aside-steps, .class-plans__aside-days { list-style: none; margin: 0; padding: 0; }
.class-plans__aside-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.class-plans__aside-mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 2px dashed var(--line-strong); }
.class-plans__aside-mark.is-done { background: var(--green); border: 2px solid var(--green); color: var(--text-on-accent); }
.class-plans__aside-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.class-plans__aside-copy .muted { font-size: 13px; line-height: 1.5; }
.class-plans__aside-state { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text-muted); }
.class-plans__aside-state.is-done, .class-plans__aside-day .is-done { color: var(--green); }
.class-plans__aside-days li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.class-plans__aside-day { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.class-plans__dots { display: flex; gap: 2px; }
.class-plans__dots span { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.class-plans__dots span.is-done { background: var(--green); border-color: var(--green); }
.class-plans__aside-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
/* The goals form */
.class-plans__form { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 28px; }
.class-plans__field { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.class-plans__field legend { font-size: 16px; font-weight: 700; padding: 0; margin-bottom: 4px; }
.class-plans__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.class-plans__chip { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 16px; min-height: 44px;
  font-size: 15px; font-weight: 600; cursor: pointer; }
.class-plans__chip:has(:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.class-plans__chip:has(:focus-visible), .class-plans__weekday:has(:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px; }
.class-plans__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 460px; }
.class-plans__weekday { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 700; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
.class-plans__weekday > span { font-size: 11px; line-height: 1; visibility: hidden; }
.class-plans__weekday:has(:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.class-plans__weekday:has(:checked) > span { visibility: visible; }
.class-plans__lesson-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px; gap: 10px; }
.class-plans__pace { background: var(--green-soft); border: 1.5px solid var(--green); border-radius: 16px; padding: 16px 18px; display: flex;
  flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.class-plans__pace[hidden] { display: none; }
.class-plans__pace.is-behind { background: var(--clay-soft); border-color: var(--clay); }
.class-plans__pace-head { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.3; }
.class-plans__pace-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--green); color: var(--text-on-accent); display: flex;
  align-items: center; justify-content: center; font-weight: 700; }
.is-behind .class-plans__pace-icon { background: var(--clay); }
.class-plans__cells { display: flex; gap: 3px; flex-wrap: wrap; }
.class-plans__cells span { min-width: 44px; height: 24px; border-radius: 5px; background: var(--card); border: 1.5px solid var(--green); display: flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.class-plans__cells span.is-spare { background: transparent; border-style: dashed; border-color: var(--text-muted); color: var(--text-muted); }
.is-behind .class-plans__cells span { border-color: var(--clay); }
.class-plans__form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line);
  padding-top: 16px; font-size: 14px; line-height: 1.45; }
.class-plans__form-foot > span { max-width: 420px; }
.class-plans__form-buttons { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .class-plans.has-panel .class-plans__layout { grid-template-columns: minmax(0, 1fr); }
  .class-plans__aside { position: fixed; inset: 0; z-index: 900; border-radius: 0; overflow-y: auto; }
}
@media (max-width: 640px) {
  .class-plans__table-wrap { display: none; }
  .class-plans__cards { display: flex; }
  .class-plans__summary { font-size: 20px; }
  .class-plans__form { padding: 18px 16px; }
  .class-plans__lesson-fields { grid-template-columns: minmax(0, 1fr); }
  .class-plans__form-buttons { flex: 1; }
  .class-plans__form-buttons > * { flex: 1; }
}

/* A school's plan, voice pool and Family plan (teach/schools/_plan, _voice_pool, _family) */
.school-plan { display: flex; flex-direction: column; gap: 10px; }
.school-plan__form { display: flex; flex-direction: column; gap: 10px; }
.school-plan__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.school-plan__prices { margin: 0; padding: 0; list-style: none; font-size: 13px; }

/* Class times (teach/classrooms/_schedule, teach/class_sessions): the timetable line, the meeting link, the next
   meetings, the setup form, and the meetings and attendance pages. */
.class-times { flex-basis: 100%; }
.class-times__line { font-size: 15px; font-weight: 600; }
.class-times__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.class-times__service { font-weight: 700; }
.class-times__url { color: var(--text-muted); overflow-wrap: anywhere; min-width: 0; }
.class-times__next, .class-times__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.class-times__meeting, .class-times__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  padding: 10px 0; border-top: 1px solid var(--line-soft); }
.class-times__meeting { justify-content: flex-start; }
.class-times__when { font-weight: 600; font-variant-numeric: tabular-nums; }
.class-times__note { font-size: 14px; color: var(--text-body); flex-basis: 100%; margin: 0; }
.class-times__row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; flex: 1 1 280px; }
.class-times__own-link { font-size: 13px; color: var(--text-muted); }
.is-cancelled .class-times__when { text-decoration: line-through; color: var(--text-muted); }
.class-times__setup > summary, .class-times__edit-one > summary, .class-times__add > summary { cursor: pointer; width: fit-content; }
.class-times__edit { font-size: 14px; font-weight: 600; color: var(--clay); }
.class-times__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.class-times__choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.class-times__choice > span { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.class-times__choice input[type=radio] { margin-top: 4px; accent-color: var(--ink); }
.class-times__disconnect { margin-top: 8px; font-size: 13px; }
.class-times__form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; min-width: min(100%, 520px); }
.class-times__edit-one[open], .class-times__add[open] { flex-basis: 100%; }
.class-times__add { margin-top: 10px; }
.class-times__table { width: 100%; border-collapse: collapse; }
.class-times__table th, .class-times__table td { text-align: start; padding: 10px 8px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.class-times__marks { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.class-times__marks .class-plans__chip { min-height: 36px; padding: 0 12px; font-size: 13px; }
.class-times__attendance { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }


/* screens/today.css */
/* Today (student dashboard) */

.week { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.week__day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.week__dot { width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid var(--line-strong); }
.week__dot.is-done { background: var(--green); }
.week__dot.is-today { background: var(--peach); }
.week__dot.is-missed { background: var(--sand); }

.today__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.today__book-ar { font-size: 30px; }
.today__book-title { font-size: 28px; line-height: 1.1; }
.today__progress { font-size: 14px; color: var(--text-muted); --row-gap: 12px; flex-wrap: nowrap; }

/* After the first minutes: "Nice — 6 minutes today." asks for a goal, once. */
.today__goal-ask {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 1.5px solid var(--peach);
  padding-block: 22px; padding-inline: 24px 64px;
}
.ring--sm { width: 60px; height: 60px; }
.ring--sm .ring__inner { width: 46px; height: 46px; font-size: 22px; }
.today__goal-ask-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.today__goal-ask-title { margin: 0; font-weight: 400; font-size: 30px; line-height: 1.1; }
.today__goal-ask-lead { margin: 0; font-size: 15px; color: var(--text-body); }
.today__goal-ask-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.today__goal-ask-skip { min-height: 44px; padding: 0 8px; font-size: 14px; color: var(--text-muted); text-decoration: underline; }
.today__goal-ask-close-form { position: absolute; top: 10px; inset-inline-end: 10px; }
.today__goal-ask-close {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: none;
  color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.today__goal-ask-close:hover { background: var(--sand-hover); color: var(--ink); }

/* "Goal set: 15 min a day" */
.today__goal-set {
  display: flex; align-items: center; gap: 14px;
  background: var(--green-soft); border-radius: var(--radius-card); padding-block: 16px; padding-inline: 20px 12px;
  transition: opacity .4s ease;
}
.today__goal-set.is-fading { opacity: 0; }
.today__goal-set-mark {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); color: var(--paper); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.today__goal-set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--green); }
.today__goal-set-text strong { font-size: 17px; color: var(--ink); }
.today__goal-set-text a { color: var(--green); font-weight: 600; text-decoration: underline; }
.today__goal-set-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--green); font-size: 22px; flex-shrink: 0; cursor: pointer; }

.today__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}
.today__tile { display: flex; flex-direction: column; gap: 8px; }
.today__tile-ar { font-size: 30px; align-self: flex-end; }
.today__tile-title { font-size: 16px; font-weight: 600; }
.today__tile-sub { font-size: 14px; }
.card--clay .today__tile-sub { opacity: .9; }
.today__speak .today__tile-sub { color: #3A2A1F; }
.today__due { font-size: 48px; line-height: 1; }

.today__word .today__tile-sub { opacity: .9; }
.today__word .today__tile-sub { line-height: 1.7; }
.today__word .today__tile-sub .ar { font-size: 1.25em; line-height: 1; unicode-bidi: isolate; } /* Arabic in the note, sized to sit with the English */
.eyebrow--on-green { color: var(--paper); opacity: .85; letter-spacing: 1.5px; font-size: 13px; }
.today__play { background: var(--paper); color: var(--green); }
.today__play:hover { background: var(--green-soft); color: var(--green); }
.today__word-ar { font-size: 38px; }
.today__word-link { align-self: flex-start; margin-top: auto; color: var(--paper); font-size: 14px; font-weight: 600; text-decoration: underline; }
.today__word-link:hover { color: var(--peach); }

/* Recommended next (ReadingRecommender) and the new words of the top pick */
.today__next {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
.today__next > :only-child { grid-column: 1 / -1; }
.today__picks-title, .today__preteach .eyebrow { margin: 0; }
.today__picks-more { font-size: 14px; font-weight: 600; }
.today__pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}
.today__pick {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
}
.today__pick:hover { border-color: var(--line-strong); background: var(--sand-hover); color: var(--text); text-decoration: none; }
.today__pick-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.today__pick-ar { font-size: 22px; align-self: flex-end; }
.today__pick-title { font-size: 19px; line-height: 1.2; }
.today__pick-reason { margin-top: auto; font-size: 13px; color: var(--text-body); }

.today__preteach-for { margin: 0; font-size: 14px; color: var(--text-muted); }
.today__preteach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.today__preteach-word { display: flex; align-items: center; gap: 10px; }
.today__preteach-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.today__preteach-ar { font-size: 22px; line-height: 1.3; }
.today__preteach-en { font-size: 13px; color: var(--text-body); overflow-wrap: anywhere; }
.today__preteach-saved { font-size: 12px; color: var(--green); font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .today__top, .today__next { grid-template-columns: 1fr; }
  /* Phones: Genius, Continue reading, the news (news.css), then the goal */
  .today__top { display: contents; }
  .today__top > .today__continue { order: 1; }
  .today__top ~ .today__news { order: 2; }
  .today__top > :not(.today__continue) { order: 3; }
  .today__top ~ :not(.today__news) { order: 4; }
  .today__goal-ask { flex-direction: column; gap: 10px; padding: 18px; }
  .today__goal-ask .ring--sm { display: none; }
  .today__goal-ask-title { font-size: 26px; margin-inline-end: 44px; }
  .today__goal-ask-options { display: grid; grid-template-columns: 1fr 1fr; }
  .today__goal-ask-skip { grid-column: 1 / -1; justify-self: start; padding: 0; }
  .today__goal-ask-close-form { top: 6px; inset-inline-end: 6px; }
}

/* Talk with Genius: the AI conversation tutor, with the last conversation to pick up */
.today-genius {
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  box-shadow: 0 24px 48px -28px rgba(28, 35, 33, .55);
  text-decoration: none;
}
.today-genius:hover { background: color-mix(in srgb, var(--ink) 92%, white); color: var(--paper); text-decoration: none; }
.today-genius__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.today-genius__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.today-genius__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.today-genius__icon .icon { width: 26px; height: 26px; }
.today-genius__titles { display: flex; flex-direction: column; gap: 2px; }
.today-genius__kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--peach); font-weight: 700; }
.today-genius__title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.today-genius__title { font-family: var(--font-serif); font-size: clamp(30px, 3.4vw, 40px); line-height: 1; }
.today-genius__ar { font-size: 30px; line-height: 1.2; color: var(--peach); }
.today-genius__text { font-size: 15px; line-height: 1.5; color: var(--text-on-dark-muted); max-width: 520px; }
.today-genius__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.today-genius__last { background: var(--ink-raised); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.today-genius__last-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.today-genius__last-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-on-dark-muted); font-weight: 700; }
.today-genius__last-topic { font-size: 17px; font-weight: 600; }
.today-genius__last-ar { font-size: 26px; color: var(--peach); }
.today-genius__bar { height: 6px; background: var(--ink-line); }
.today-genius__bar .progress__bar { background: var(--peach); }
.today-genius__last-sub { font-size: 13px; color: var(--text-on-dark-muted); }
.today-genius__cta {
  align-self: flex-start;
  background: var(--peach);
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
}
.today__invite { margin: 0; font-size: 14px; color: var(--text-muted); text-align: center; }
.today__invite a { font-weight: 600; color: var(--clay); }

/* A milestone to celebrate (Phase E). */
.today__milestone { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 26px; margin-bottom: 20px; }
.today__milestone-text { display: flex; flex-direction: column; gap: 6px; }
.today__milestone-title { margin: 0; font-size: 17px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.today__milestone-figure { font-size: 44px; line-height: 1; color: var(--peach); font-weight: 400; }
.today__milestone-close { position: absolute; top: 8px; inset-inline-end: 10px; background: none; border: 0; color: inherit; opacity: .7; font-size: 20px; cursor: pointer; }
.today__milestone-form, .today__milestone-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.today__milestone-name { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.today__milestone-share code { font-size: 13px; overflow-wrap: anywhere; }
.today__milestone-stop { color: inherit; font-size: 13px; text-decoration: underline; }

/* A shared milestone's public page. */
.milestone-page { max-width: 760px; margin: 0 auto; padding: 64px 20px 80px; display: flex; flex-direction: column; gap: 32px; }
.milestone-page__card { padding: 48px 44px; border-radius: var(--radius-lg, 24px); background: var(--ink); color: var(--paper); display: flex; flex-direction: column; gap: 18px; }
.milestone-page__who { color: var(--peach); }
.milestone-page__title { margin: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 400; }
.milestone-page__figure { font-size: clamp(72px, 16vw, 140px); line-height: .95; color: var(--peach); }
.milestone-page__caption { font-size: clamp(20px, 4vw, 28px); }
.milestone-page__cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; font-size: 17px; }
.milestone-page__cta p { margin: 0; }
/* A Word Trainer badge: its emblem beside the text (WordTrainer::Badges) */
.today__milestone--badge { justify-content: flex-start; }
.today__milestone--badge .today__milestone-text { flex: 1; min-width: 200px; }
.today__milestone-emblem { margin: 6px; }
.today__milestone-all { color: var(--sand); font-size: 14px; font-weight: 600; text-decoration: underline; align-self: flex-start; }
.today__milestone-all:hover { color: var(--paper); }

/* Today's study plan (dashboard/_plan; design: Claude Design "Daily Plan"): the steps in order, the next one
   highlighted in clay and named under the title, done ones ticked in green; all done, a day off, nothing yet. */
.today-plan { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 22px; }
.today-plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.today-plan__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.today-plan__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; }
.today-plan__meta { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.today-plan__meta strong { color: var(--ink); font-weight: 600; }
.today-plan__progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.today-plan__count { font-size: 14px; font-weight: 700; white-space: nowrap; }
.today-plan__bar { display: flex; gap: 4px; width: 140px; }
.today-plan__bar span { flex: 1; height: 6px; border-radius: 6px; background: var(--line); }
.today-plan__bar span.is-done { background: var(--green); }
.today-plan__next { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.today-plan__next > span { color: var(--clay); }
.today-plan__short { margin: 0; display: flex; gap: 10px; align-items: flex-start; background: var(--sand); border-radius: 12px; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; }
.today-plan__short > span:first-child { font-weight: 700; }
.today-plan__short a { color: var(--clay); font-weight: 600; }
.today-plan__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.today-plan__step { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; border: 1px solid transparent; }
.today-plan__step.is-next { background: var(--clay-soft); border: 2px solid var(--clay); }
.today-plan__mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; border: 2px solid var(--line); }
.today-plan__step.is-next .today-plan__mark { background: var(--clay); border-color: var(--clay); color: var(--text-on-accent); }
.today-plan__step.is-done .today-plan__mark { background: var(--green); border-color: var(--green); color: var(--text-on-accent); animation: plan-tick .28s ease-out; }
@keyframes plan-tick { from { transform: scale(.7); } to { transform: scale(1); } }
.today-plan__icon { display: flex; flex-shrink: 0; color: var(--ink); }
.today-plan__step.is-done .today-plan__icon, .today-plan__step.is-done .today-plan__name strong { color: var(--text-muted); }
.today-plan__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-plan__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.today-plan__next-chip { background: var(--clay); color: var(--text-on-accent); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.today-plan__detail { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.today-plan__minutes { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.today-plan__step.is-done .today-plan__minutes { color: var(--green); }
.today-plan__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 96px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.today-plan__btn:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.today-plan__step.is-done .today-plan__btn { border-color: var(--line); }
.today-plan__step.is-next .today-plan__btn { background: var(--clay); border-color: var(--clay); color: var(--text-on-accent); }
.today-plan__step.is-next .today-plan__btn:hover { background: var(--clay-hover); }
form.today-plan__action { display: contents; }
.today-plan__state { display: flex; gap: 16px; align-items: flex-start; }
.today-plan__state-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: var(--sand); display: flex; align-items: center; justify-content: center; }
.today-plan__state-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.today-plan__state-copy p, .today-plan__empty p { margin: 0; font-size: 15px; line-height: 1.5; }
.today-plan__done { display: flex; align-items: center; gap: 18px; }
.today-plan__done-mark { position: relative; width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; background: var(--green-soft);
  display: flex; align-items: center; justify-content: center; }
.today-plan__done-mark::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed var(--green); }
.today-plan__done-mark span { width: 50px; height: 50px; border-radius: 50%; background: var(--green); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.today-plan__chips, .today-plan__ghosts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.today-plan__chips li { display: inline-flex; align-items: center; gap: 5px; background: var(--sand); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.today-plan__chips li span { color: var(--green); font-weight: 700; }
.today-plan__ghosts li { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--line-strong); border-radius: 999px; padding: 4px 12px;
  font-size: 13px; color: var(--text-muted); }
.today-plan__ghosts li span { font-weight: 700; }
.today-plan__more { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.today-plan__more > span { color: var(--text-muted); }
.today-plan__more a, .today-plan__more-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600;
  color: var(--clay); background: none; border: none; cursor: pointer; text-decoration: none; }
.today-plan__more a:hover, .today-plan__more-link:hover { text-decoration: underline; }
.today-plan__empty { display: flex; flex-direction: column; gap: 8px; }
.today-plan__cta { align-self: flex-start; margin-top: 6px; }
@media (max-width: 640px) {
  .today-plan { padding: 16px 14px; }
  .today-plan__title { font-size: 26px; }
  .today-plan__bar { width: 96px; }
  .today-plan__icon { display: none; }
  .today-plan__step { gap: 10px; padding: 10px; }
  .today-plan__btn { min-width: 76px; }
  .today-plan__done { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .today-plan__step.is-done .today-plan__mark { animation: none; } }


/* A Starter learner's offer to move up to A1 (dashboard/_move_up) */
.today__move-up { padding: 22px 24px; border-radius: 18px; border-inline-start: 4px solid var(--green); }
.today__move-up-text { display: flex; flex-direction: column; gap: 8px; }
.today__move-up-title { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0; }
.today__move-up-body { margin: 0; color: var(--text-body); max-width: 60ch; }
.today__move-up-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* The way to the next level, A1 to C1 (dashboard/_level_path, LevelPath): four parts, each with its bar */
.today__level-path { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 18px; }
.today__level-path-head { display: flex; flex-direction: column; gap: 6px; }
.today__level-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.today__level-part-link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.today__level-part-link:hover { border-color: var(--line-strong); }
.today__level-part-name { font-weight: 700; font-size: 15px; }
.today__level-part-count { font-size: 13px; color: var(--text-muted); }
.today__level-part.is-done .today__level-part-count { color: var(--green); font-weight: 700; }
.today__level-bar { display: block; height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; margin-top: auto; }
.today__level-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.today__level-note, .today__level-retry { align-self: center; font-size: 14px; color: var(--text-muted); }
@media (max-width: 700px) { .today__level-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.today__level-path .today__move-up-title { font-variant-numeric: lining-nums; } /* B1, not "Bl" in the serif */


/* screens/try.css */
/* Try before you sign up (TryController): the languages, a language's guest texts, the reader's sign-up sheet,
   end card and AI notice. */
.try { max-width: 920px; padding-block: 40px 64px; }
.try__head { margin-bottom: 24px; }
.try__title { font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 4px 0 10px; }
.try__lead { font-size: 17px; line-height: 1.55; color: var(--text-muted); max-width: 60ch; margin: 0; }
.try__languages, .try__texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
                               grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.try__language, .try__text { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: var(--ink); text-decoration: none; height: 100%;
                             border: 1px solid var(--line); transition: border-color .15s ease; }
.try__language:hover, .try__text:hover { border-color: var(--ink); }
.try__text.is-chosen { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.try__language-name { font-size: 20px; font-weight: 600; }
.try__language-go, .try__text-go { margin-top: auto; color: var(--clay); font-weight: 600; font-size: 14px; }
.try__text .level-pill { align-self: flex-start; }
.try__text-native { font-size: 20px; }
.try__text-title { font-size: 22px; line-height: 1.2; }
.try__text-about { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.try__account { margin-top: 28px; color: var(--text-muted); }
.try--limit { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* The sign-up sheet: a dialog, centered on a wide screen, a bottom sheet on a phone */
.guest-sheet { 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); }
.guest-sheet::backdrop { background: rgba(28, 35, 33, .42); }
.guest-sheet__body { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 22px; }
.guest-sheet__close { position: absolute; top: 10px; inset-inline-end: 12px; width: 36px; height: 36px; border: 0; background: none;
                      font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: 50%; }
.guest-sheet__close:hover { background: var(--sand); color: var(--ink); }
.guest-sheet__title { font-size: 26px; line-height: 1.15; margin: 0; padding-inline-end: 32px; }
.guest-sheet__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.guest-sheet__more { margin: 0; font-size: 14px; text-align: center; }
.guest-sheet .auth__email-link { margin-top: 0; }
@media (max-width: 600px) {
  .guest-sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .guest-sheet__body { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* The end of a guest text */
.guest-end { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; padding: 22px; border: 1px solid var(--clay-soft); }
.guest-end__title { font-size: 24px; margin: 0; }
.guest-end__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--text-muted); }
.guest-end__stats strong { color: var(--ink); font-size: 18px; }
.guest-end__text { margin: 0; line-height: 1.5; }

/* The AI notice before a guest's question */
.reader__guest-consent { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.reader__guest-consent input { margin-top: 3px; flex-shrink: 0; }

/* The reader in the site's public layout (a guest text): the gutters the app's shell gives it elsewhere */
.reader--guest { width: min(100% - 32px, 1240px); margin: 8px auto 56px; }
@media (min-width: 900px) { .reader--guest { width: min(100% - 64px, 1240px); } }


/* screens/typing.css */
/* Typing tutor */

.typing { max-width: 1080px; gap: 20px; }
.typing__intro { max-width: 560px; }
.typing__lead { font-size: 15px; line-height: 1.5; color: var(--text-body); }

.typing__levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 8px;
}
.typing__level {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.typing__level:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.typing__level[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.typing__level-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sand);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.typing__level.is-complete .typing__level-num { background: var(--green); color: var(--paper); }
.typing__level[aria-current="true"] .typing__level-num { background: var(--peach); color: var(--ink); }
.typing__level-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.typing__level-label { font-size: 15px; font-weight: 700; }
.typing__level-sub { font-size: 12px; opacity: .85; }

.typing__level-desc { font-size: 14px; color: var(--text-body); max-width: 520px; }
.typing__lesson { padding: 7px 14px; font-size: 13px; }

.typing__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px;
}
.typing__stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.typing__stat-value { font-size: 34px; line-height: 1; }
.typing__stat-label { font-size: 13px; color: var(--text-body); }

.typing__pad {
  position: relative;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 30px clamp(20px, 4vw, 44px);
  outline: none;
  cursor: text;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.typing__pad.is-focused { border-color: var(--ink); }
.typing__pad-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-muted);
}
.typing__pad-title { font-weight: 600; color: var(--ink); }
.typing__text {
  font-family: "Noto Naskh Arabic", var(--font-arabic);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 2.1;
  text-align: right; /* physical: text in the language taught */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.typing__done { color: var(--green); }
.typing__current { background: var(--sand); box-shadow: inset 0 -3px 0 var(--ink); border-radius: 4px; }
.typing__current.is-wrong { background: var(--wrong-soft); box-shadow: inset 0 -3px 0 var(--wrong); }
.typing__rest { color: var(--text-faint); }

.typing__finish {
  background: var(--green);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.typing__finish-title { font-size: 26px; }
.typing__result { font-size: 14px; color: var(--green-soft); }
.typing__outcome { font-size: 14px; color: var(--peach); }
.typing__outcome:empty { display: none; }

.typing__overlay {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.typing__overlay-label {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
}

.typing__keyboard {
  direction: ltr; /* a real keyboard's layout: the same in a right-to-left interface */
  background: var(--ink);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: auto;
  position: relative; /* offsetParent for keeping the next key in view */
}
.typing__row { display: flex; gap: 6px; min-width: 680px; }
.typing__key {
  flex: var(--w, 1);
  min-width: 0;
  height: 54px;
  border-radius: 9px;
  background: var(--ink-raised);
  color: var(--paper);
  border-bottom: 3px solid color-mix(in srgb, var(--ink) 70%, black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 8px;
}
.typing__key.is-spacer { visibility: hidden; }
.typing__key.is-home { border-bottom-color: var(--peach); }
.typing__key.is-wrong { background: var(--wrong-soft); color: var(--ink); }
.typing__key.is-target { background: var(--clay); color: var(--paper); border-bottom-color: var(--clay-deep); }
.typing__key-en { font-size: 11px; opacity: .75; text-align: var(--start); white-space: nowrap; }
.typing__key-ar { font-family: "Noto Naskh Arabic", var(--font-arabic); font-size: 20px; text-align: right; /* physical: text in the language taught keeps its own side */ line-height: 1; }

.typing__footnote { font-size: 13px; color: var(--text-muted); }

@media (max-width: 600px) {
  .typing__key { height: 46px; padding: 4px 6px; }
  .typing__key-ar { font-size: 17px; }
}
.typing__pad .progress { flex: none; }
.typing__check { margin-inline-end: 4px; }

/* Levels with many lessons: the current one's place, and the full list to open. */
.typing__lessons-head { flex-wrap: wrap; gap: 8px 16px; }
.typing__step { align-items: center; }
.typing__place { font-size: 13px; color: var(--text-muted); min-width: 9em; text-align: center; }
.typing__all summary { cursor: pointer; font-size: 13px; color: var(--text-body); width: max-content; }
.typing__all[open] summary { margin-bottom: 8px; }
.typing__lesson-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }


/* screens/units.css */
/* Class units (TeachingUnit; design: Claude Design "Class Units"): the teacher's list, new unit, review, part
   editors and results (teach/units/*), and the student's unit path (classes/unit). States are chips with an icon and
   a word; a left-out part is a dashed card. */
.units { gap: 16px; }
.units__back { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.units__back:hover { color: var(--clay); text-decoration: none; }
[dir="rtl"] .units__flip { display: inline-block; transform: scaleX(-1); }
.units__muted { color: var(--text-muted); }
.units__fine { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.units__label { font-size: 14px; font-weight: 700; color: var(--ink); }
.units__eyebrow { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.units__eyebrow--clay { color: var(--clay); }
.units__eyebrow--peach { color: var(--peach); }
:lang(ar) .units__eyebrow { letter-spacing: 0; }
.units__taught { font-size: 1.2em; line-height: 1.5; }
.units__section-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; }

/* Buttons */
.units__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; }
.units__btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.units__btn--ink:hover { color: var(--paper); text-decoration: none; opacity: .92; }
.units__btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong, var(--line)); }
.units__btn--outline:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.units__btn--text { background: none; color: var(--clay); }
.units__btn--off { background: var(--text-muted); color: var(--paper); cursor: default; }
.units__btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.units__btn--lg { min-height: 50px; padding: 0 24px; font-size: 16px; }
.units__btn--block { width: 100%; }
.units__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.units__actions form { margin: 0; }

/* 1 · The list */
.units__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.units__head-copy { display: flex; flex-direction: column; gap: 6px; }
.units__head .page-title { margin: 0; }
.units__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 560px; }
.units__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; font-weight: 600; }
.units__pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.units__pill-dot--used { background: var(--clay); }
.units__plan-note { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.units__plan-note a { font-weight: 600; color: var(--clay); }
.units__upsell { background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px; padding: 18px 20px; display: grid;
  grid-template-columns: minmax(0, 1fr) 240px; gap: 14px 24px; align-items: center; }
.units__upsell-copy { display: flex; flex-direction: column; gap: 6px; }
.units__upsell-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.units__upsell-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.units__upsell-action { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.units__empty { background: var(--card); border: 1px dashed var(--text-muted); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.units__empty-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
.units__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.units__steps li { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--ink); padding-top: 10px; font-size: 14px; line-height: 1.45; }
.units__steps li span:last-child { color: var(--text-muted); }
.units__step-n { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--clay); }
.units__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.units__card { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex;
  flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
/* The whole card opens the unit (its title's link stretched over it); the footer's link stays its own. */
.units__card:hover, .units__card:focus-within { border-color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); transform: translateY(-1px); }
.units__card:hover .units__card-title a, .units__card-title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.units__card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.units__card-title a:focus-visible { outline: none; }
.units__card:has(.units__card-title a:focus-visible) { outline: 3px solid var(--clay-soft); outline-offset: 2px; }
.units__card-foot { position: relative; z-index: 1; pointer-events: none; }
.units__card-foot .units__card-link { pointer-events: auto; }
.units__card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.units__unit-head .units__card-top { justify-content: flex-start; }
.units__level { background: var(--sand); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.units__status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: var(--sand); color: var(--ink); }
.units__status--review { background: var(--clay-soft); }
.units__status--assigned { background: var(--green-soft); color: var(--green); }
.units__card-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.units__card-title a { color: var(--ink); text-decoration: none; }
.units__card-goal { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.units__card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line);
  padding-top: 10px; font-size: 13px; color: var(--text-muted); }
.units__card-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-weight: 700; color: var(--clay); text-decoration: none; }

/* 2 · New unit */
.units__new { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.units__panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.units__form { display: flex; flex-direction: column; gap: 16px; }
.units__goal { border: 1.5px solid var(--ink); font-size: 16px; line-height: 1.45; }
.units__goal:focus { outline: 3px solid var(--clay-soft); outline-offset: 1px; }
.units__levels { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.units__level-options { display: flex; gap: 6px; flex-wrap: wrap; }
.units__level-option input { position: absolute; opacity: 0; pointer-events: none; }
.units__level-option span { display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.units__level-option input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.units__level-option input:focus-visible + span { outline: 3px solid var(--clay-soft); outline-offset: 2px; }
.units__optional { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.units__optional[open] { gap: 8px; }
.units__optional summary { font-size: 15px; font-weight: 700; cursor: pointer; min-height: 32px; }
.units__optional summary span { font-weight: 400; color: var(--text-muted); }
.units__optional .field__hint { display: block; margin: 8px 0; }
.units__taught-input { font-size: 19px; line-height: 1.8; }
.units__form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.units__next { background: var(--sand); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.units__next-title { margin: 0; font-size: 15px; font-weight: 700; }
.units__next ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }

/* 3 · Review */
.units__unit-head { display: flex; flex-direction: column; gap: 8px; }
.units__unit-head .page-title { margin: 0; }
.units__goal-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.units__goal-line strong { color: var(--ink); }
.units__drafting { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.units__drafting-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.units__drafting-step { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
.units__drafting-line { height: 5px; border-radius: 5px; background: var(--green); }
.is-busy .units__drafting-line { background: var(--line); animation: units-breath 1.6s ease-in-out infinite; }
@keyframes units-breath { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes units-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.units__refused { background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.units__refused p { margin: 0; font-size: 15px; line-height: 1.55; }
.units__refused-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
.units__parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.units__part { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; scroll-margin-top: 80px; animation: units-in .3s ease-out both; }
.units__part--failed { border: 1.5px solid var(--ink); }
.units__part--removed { background: transparent; border: 1.5px dashed var(--text-muted); }
.units__part--removed .units__part-title { color: var(--text-muted); }
.units__part-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.units__part-number { width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; }
.units__part--ready .units__part-number, .units__part--edited .units__part-number { background: var(--ink); color: var(--paper); }
.units__part-name { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 1px; }
.units__part-title { font-size: 17px; font-weight: 700; }
.units__state { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; background: var(--sand); color: var(--ink); }
.units__state--ready { background: var(--clay-soft); }
.units__state--edited { background: var(--green-soft); }
.units__state--removed { background: transparent; }
.units__state--drafting .units__state-icon { animation: units-breath 1.6s ease-in-out infinite; }
.units__part-note { margin: 0; padding: 0 16px 12px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.units__skeleton { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.units__skeleton span { height: 12px; width: 70%; border-radius: 6px; background: var(--line); }
.units__skeleton span + span { width: 52%; }
.units__part-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.units__part .units__actions { padding: 0 16px 14px; }

.units__expl { display: flex; flex-direction: column; gap: 12px; }
.units__expl-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.3; }
.units__expl-intro { margin: 0; font-size: 15px; line-height: 1.6; max-width: 760px; }
.units__table-wrap { max-width: 100%; overflow-x: auto; align-self: flex-start; }
.units__table { border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 420px; }
.units__table th { text-align: start; padding: 8px 14px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); background: var(--sand); }
.units__table td { padding: 6px 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; text-align: start; }
.units__table .units__taught { font-size: 19px; }
.units__examples { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.units__examples li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.units__example { font-size: 24px; line-height: 1.9; }
.units__reading { font-size: 14px; color: var(--text-muted); }
.units__meaning { font-size: 14px; font-weight: 600; }
.units__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.units__tips { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.units__book { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.units__book-cover { width: 46px; height: 60px; border-radius: 6px; background: var(--green); flex-shrink: 0; }
.units__book-copy { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.units__book-title { font-size: 22px; line-height: 1.6; }
.units__excerpt { margin: 0; font-size: 21px; line-height: 1.9; border-inline-start: 3px solid var(--line); padding-inline-start: 14px; }
.units__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.units__chips li { display: inline-flex; align-items: baseline; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 14px; }
.units__chip-word { font-size: 21px; line-height: 1.7; }
.units__chip-gloss { font-size: 13px; color: var(--text-muted); }
.units__speak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.units__speak-open { background: var(--ink); color: var(--paper); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.units__speak-line { font-size: 23px; line-height: 1.9; }
.units__speak-meaning { font-size: 14px; color: var(--sand); }
.units__speak-side { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.units__speak-side p { margin: 0; }
.units__questions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.units__questions > li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.units__question-line { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.units__question-n { font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.units__question-sentence { flex: 1; font-size: 22px; line-height: 1.8; }
.units__options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.units__options li { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 2px 12px; font-size: 19px; line-height: 1.7; }
.units__options li.is-right { border-color: var(--right); background: var(--right-soft); }
.units__right-tag { font-size: 12px; font-weight: 700; color: var(--green); }

.units__approve { background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.units__approve-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.units__approve-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
.units__approve-fields, .units__approve-get { display: flex; flex-direction: column; gap: 12px; }
.units__approve-get [type="submit"] { margin-top: auto; }
.units__get { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.45; }
.units__get li.is-out { color: var(--text-muted); text-decoration: line-through; }
.units__assigned { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.units__assigned-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }

/* 4 · Editors */
.units__edit-form { gap: 14px; }
.units__edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.units__edit-grid .field { display: flex; flex-direction: column; gap: 5px; }
.units__span { grid-column: 1 / -1; }
.units__eq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.units__eq-item details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.units__eq-item details[open] { border: 1.5px solid var(--ink); }
.units__eq-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.units__eq-summary::-webkit-details-marker { display: none; }
.units__eq-n { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.units__eq-text { flex: 1; min-width: 0; font-size: 19px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.units__eq-right { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); font-weight: 700; flex-shrink: 0; }
.units__eq-right .ar { font-size: 19px; }
.units__eq-edit { border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; min-height: 36px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
details[open] .units__eq-edit { visibility: hidden; }
.units__eq-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.units__eq-body .field { display: flex; flex-direction: column; gap: 4px; }
.units__eq-type { display: inline-flex; gap: 4px; background: var(--sand); border-radius: 999px; padding: 3px; align-self: flex-start; }
.units__eq-type input { position: absolute; opacity: 0; pointer-events: none; }
.units__eq-type span { display: flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.units__eq-type input:checked + span { background: var(--ink); color: var(--paper); font-weight: 700; }
.units__eq-type input:focus-visible + span { outline: 3px solid var(--clay-soft); }
.units__eq-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: end; }
.units__eq-gapmark { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px; border-bottom: 3px dashed var(--clay);
  font-size: 14px; font-weight: 700; color: var(--clay); }
.units__eq-body:has(input[value="gap"]:checked) .units__eq-prompt { display: none; }
.units__eq-body:has(input[value="question"]:checked) .units__eq-gap { display: none; }
.units__eq-options { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.units__eq-option { display: flex; align-items: center; gap: 8px; }
.units__eq-option .input { flex: 1; }
.units__eq-radio input { position: absolute; opacity: 0; }
.units__eq-radio span { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1.5px solid var(--text-muted); background: #fff; color: transparent; font-weight: 700; cursor: pointer; }
.units__eq-radio input:checked + span { background: var(--green); border-color: var(--green); color: var(--card); }
.units__eq-radio input:focus-visible + span { outline: 3px solid var(--clay-soft); outline-offset: 2px; }
.units__eq-option:has(input:checked) .input { border-color: var(--green); }
.units__eq-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.units__eq-move { display: flex; gap: 6px; }
.units__round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.units__eq-remove { font-size: 14px; font-weight: 600; color: var(--clay); }

/* 5 · Results */
.units__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.units__tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.units__tile-value { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; }
.units__results-table { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: auto; }
.units__table--results { width: 100%; min-width: 0; border: none; border-radius: 0; background: transparent; }
.units__table--results th { color: var(--ink); }
.units__table--results th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; padding: 10px 14px; border-top: 1px solid var(--line); }
.units__table--results td { padding: 8px 6px; }
.units__center { text-align: center !important; }
.units__end { text-align: end !important; padding-inline-end: 14px !important; }
.units__score { font-size: 15px; font-weight: 700; }
.units__mark { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.units__mark--done { background: var(--green-soft); color: var(--green); }
.units__mark--started { background: var(--sand); color: var(--ink); }
.units__mark--none { color: var(--text-muted); }
.units__mark--small { min-width: 24px; width: 24px; height: 24px; font-size: 10px; }
.units__legend { display: block; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
.units__results-list { display: none; list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.units__results-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.units__results-list li + li { border-top: 1px solid var(--line); }
.units__results-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.units__results-marks { display: flex; gap: 3px; }
.units__understood { display: flex; flex-direction: column; gap: 10px; }
.units__understood-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.units__missed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.units__missed li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 8px 16px; align-items: center; }
.units__missed-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.units__missed-sentence { font-size: 21px; line-height: 1.7; }
.units__filled { background: var(--green-soft); border-bottom: 2px solid var(--green); border-radius: 4px 4px 0 0; padding: 0 4px; font-weight: 700; }
.units__missed-bar { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.units__bar { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.units__bar > div { height: 100%; background: var(--clay); }
.units__bar--green > div { background: var(--green); }

/* 6 · The student's path */
.units--student { max-width: 640px; margin: 0 auto; }
.units__note-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.units__note-card strong { font-size: 13px; }
.units__progress { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.units__progress .units__bar { flex: 1; height: 6px; }
.units__path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.units__path-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; position: relative; }
.units__path-step::before { content: ""; position: absolute; inset-inline-start: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.units__path-step:last-child::before { display: none; }
.units__path-step--done::before { background: var(--green); }
.units__path-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; position: relative; }
.units__path-step--done .units__path-dot { background: var(--green); border-color: var(--green); color: var(--card); }
.units__path-step--started .units__path-dot, .units__path-step.is-current .units__path-dot { border-color: var(--ink); }
.units__path-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.units__path-step.is-current .units__path-card { border: 1.5px solid var(--ink); }
.units__path-card form { margin: 0; align-self: flex-start; }
.units__path-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.units__path-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 16px; }
.units__path-state { font-size: 13px; font-weight: 700; white-space: nowrap; }
.units__path-step--done .units__path-state { color: var(--green); }
.units__path-card .units__bar { height: 5px; }

/* 7 · On the class page */
.teach__kind--unit { background: var(--ink); color: var(--paper); }
.teach__assignment--unit { border: 1.5px solid var(--ink); }

/* The grammar page's button to the player (lesson-player.css has the rest) */
@media (max-width: 760px) {
  .units__cards, .units__steps, .units__tiles { grid-template-columns: minmax(0, 1fr); }
  .units__upsell, .units__new, .units__approve-form, .units__edit-grid, .units__speak, .units__missed li { grid-template-columns: minmax(0, 1fr); }
  .units__examples { grid-template-columns: minmax(0, 1fr); }
  .units__table { min-width: 100%; }
  .units__eq-gap { grid-template-columns: minmax(0, 1fr); }
  .units__results-table { display: none; }
  .units__results-list { display: block; }
  .units__panel, .units__approve { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .units__card { transition: none; }
  .units__card:hover { transform: none; }
  .units__part, .is-busy .units__drafting-line, .units__state--drafting .units__state-icon { animation: none; }
}
/* button_to's form is display: contents, so its button is the card's own flex item: kept to its width. */
.units__path-card .units__btn, .units__refused .units__btn { align-self: flex-start; }


/* screens/wikipedia.css */
/* Add from the language's Wikipedia (/library/wikipedia): search, results with
   level and known words, the preview panel, adding, and the day's limit. */

.wiki { display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.wiki__head { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.wiki__titles { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; width: 100%; }
.wiki__lead { margin: 0; font-size: 15px; color: var(--text-body); }
.wiki__quota { margin: 0; font-size: 13px; color: var(--text-muted); }

.wiki__search { display: flex; flex-direction: column; gap: 6px; }
.wiki__search-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.wiki__search-box { flex: 1 1 420px; min-width: 0; padding-inline-end: 4px; }
/* Empty, the box shows its placeholder in the language taught: a right-to-left one's on the right (typed text
   takes its own direction, dir=auto); a left-to-right language's input says dir="ltr". */
.wiki__search-input:placeholder-shown { font-family: var(--font-arabic); font-size: 18px; }
.wiki__search-input:not([dir="ltr"]):placeholder-shown { direction: rtl; text-align: right; /* physical: text in the language taught keeps its own side */ }
.wiki__clear { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wiki__clear:hover { text-decoration: none; }
.wiki__submit { flex: none; min-height: 38px; }
.wiki__featured { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; }
.wiki__hint { margin: 0; padding-inline-start: 16px; font-size: 13px; color: var(--text-muted); }

.wiki__summary { margin: 6px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 26px; font-weight: 400; }
.wiki__summary .ar { font-size: 24px; }
.wiki__estimating { margin: 0; font-size: 13px; color: var(--text-muted); }
.wiki__estimating[hidden] { display: none; }
.wiki__unavailable { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-body); }

/* Notes: the day's limit, and "usually B2 or above" for beginners. */
.wiki-note {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card);
  font-size: 14px; color: var(--ink);
}
.wiki-note p { margin: 0; flex: 1 1 320px; }
.wiki-note--level { background: var(--sand); border-color: transparent; }
.wiki-note__link { font-weight: 700; color: var(--clay); }
.wiki-note__close-form { display: contents; }
.wiki-note__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 18px; color: var(--ink); }
.wiki-note__close:hover { background: var(--card); }

/* Results */
.wiki__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wiki__results + turbo-frame { display: block; margin-top: 12px; }
.wiki__more { display: flex; justify-content: center; padding: 8px 0; }
.wiki-hit {
  display: grid; grid-template-columns: 190px 1fr; grid-template-areas: "actions text" "meta meta";
  gap: 12px 24px; padding: 16px 20px;
}
/* A left-to-right language's article reads first, its buttons after it. */
.wiki-hit:has(> .wiki-hit__text[dir="ltr"]) { grid-template-columns: 1fr 190px; grid-template-areas: "text actions" "meta meta"; }
.wiki-hit__text { grid-area: text; text-align: start; min-width: 0; }
.wiki-hit__title { margin: 0; font-family: var(--font-arabic); font-weight: 700; font-size: 26px; line-height: 1.4; }
.wiki-hit__title a { color: var(--ink); text-decoration: none; }
.wiki-hit__title a:hover { text-decoration: underline; }
.wiki-hit__desc { margin: 4px 0 0; font-family: var(--font-arabic); font-size: 19px; line-height: 1.7; color: var(--text-body); }
.wiki-hit__desc mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.wiki-hit__actions { grid-area: actions; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.wiki-hit__button { width: 100%; justify-content: center; }
.wiki-add-form { display: contents; }
.wiki-hit__added { font-size: 13px; font-weight: 700; color: var(--green); padding-top: 4px; }
.wiki-hit__meta {
  grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
  padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-muted);
}
.wiki-hit__dot { color: var(--text-faint); }

/* Without articles left today, Add becomes "Limit reached today". */
.wiki-limit { background: var(--sand); color: var(--text-muted); cursor: default; }
#wiki_state:not([data-left="0"]) ~ * .wiki-limit { display: none; }
#wiki_state[data-left="0"] ~ * .wiki-add { display: none; }

.wiki-badge { padding: 3px 9px; border-radius: var(--radius-pill); background: var(--sand); color: var(--ink); font-size: 12px; font-weight: 700; }
.wiki-badge--featured { background: #F6E7C8; color: #7A5617; }
.wiki-badge--good { background: var(--green-soft); color: var(--green); }

.wiki-estimate { display: inline-flex; align-items: center; gap: 10px; }
.wiki-level { font-size: 12px; padding: 2px 7px; }
.wiki-estimate .lib__coverage, .wiki-preview .lib__coverage { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wiki-estimate .lib__coverage::before, .wiki-preview .lib__coverage::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wiki-estimate__wait { display: inline-flex; align-items: center; gap: 10px; }
.wiki-skeleton { display: inline-block; width: 170px; height: 10px; border-radius: var(--radius-pill); background: var(--sand); }
.wiki-skeleton--pill { width: 30px; height: 20px; border-radius: var(--radius-sm); }

.wiki-empty { padding: 22px 26px; max-width: 640px; }
.wiki-empty__title { margin: 0 0 10px; font-size: 26px; font-weight: 400; }
.wiki-empty__title .ar { font-size: 24px; }
.wiki-empty__tips { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--text-body); }
.wiki-empty__tips a { color: var(--clay); font-weight: 600; }
.wiki-empty__tips .ar { font-size: 19px; }

/* The preview: a side panel over the dimmed page (a full sheet on phones). */
.wiki-preview {
  margin-block: 0; margin-inline: auto 0; width: min(500px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow-menu);
}
.wiki-preview::backdrop { background: rgba(28, 35, 33, .45); }
.wiki-preview turbo-frame { display: block; height: 100%; }
.wiki-preview__loading { margin: 0; padding: 28px; color: var(--text-muted); }
.wiki-preview__panel { display: flex; flex-direction: column; height: 100%; }
.wiki-preview__top { display: flex; justify-content: space-between; align-items: center; padding-block: 18px 0; padding-inline: 26px 22px; }
.wiki-preview__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 22px; color: var(--ink); }
.wiki-preview__close:hover { background: var(--sand); }
.wiki-preview__body { flex: 1; overflow-y: auto; padding: 4px 26px 18px; display: flex; flex-direction: column; gap: 12px; }
.wiki-preview__title { margin: 0; font-family: var(--font-arabic); font-weight: 700; font-size: 36px; line-height: 1.35; text-align: start; }
.wiki-preview .wiki-hit__meta { padding-top: 0; border-top: 0; }
.wiki-preview__lead { margin: 4px 0 0; padding: 14px 16px; border-radius: var(--radius-md); background: #F3ECDE; border: 1px solid var(--line); }
.wiki-preview__lead-text { margin: 6px 0 0; font-size: 22px; line-height: 1.85; text-align: start; }
.wiki-preview__contents { display: flex; flex-direction: column; gap: 6px; }
.wiki-preview__contents h3 { margin: 0; }
.wiki-preview__sections { margin: 0; padding: 0; padding-inline-start: 22px; columns: 2; column-gap: 24px; font-family: var(--font-arabic); font-size: 18px; line-height: 1.7; }
.wiki-preview__more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--clay); }
.wiki-preview__note { margin: 0; font-size: 12px; color: var(--text-muted); }
.wiki-preview__foot { padding: 14px 26px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; background: var(--card); }
.wiki-preview__actions { display: flex; gap: 10px; }
.wiki-preview__actions > *, .wiki-preview__add { flex: 1; }
.wiki-preview__add .btn { width: 100%; }
.wiki-preview__actions .btn { justify-content: center; }
.wiki-preview__added { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--green-soft); font-size: 14px; font-weight: 600; color: var(--ink); }
.wiki-preview__tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--paper); font-size: 12px; }
.wiki-preview__long { margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--sand); font-size: 13px; }
.wiki-preview__long .ar { font-size: 16px; }
.wiki-preview__status:empty { display: none; }
.wiki-preview__credit { margin: 0; font-size: 12px; color: var(--text-muted); }
.wiki-preview__credit a { color: inherit; }

@media (max-width: 700px) {
  .wiki__titles { flex-direction: column; align-items: flex-start; }
  .wiki__search-box { flex-basis: 100%; }
  .wiki__submit { display: none; }
  .wiki__search-row { justify-content: space-between; }
  .wiki__hint { padding-inline-start: 0; }
  .wiki__summary { font-size: 22px; }
  .wiki-hit, .wiki-hit:has(> .wiki-hit__text[dir="ltr"]) { grid-template-columns: 1fr; grid-template-areas: "meta" "text" "actions"; padding: 14px 16px; }
  .wiki-hit > .wiki-hit__meta { border-top: 0; padding-top: 0; order: -1; }
  .wiki-hit__actions { flex-direction: row-reverse; flex-wrap: wrap; align-items: center; }
  .wiki-hit__actions > * { flex: 1 1 140px; min-height: 44px; }
  .wiki-hit__added { flex: 1 1 100%; order: 2; }
  .wiki-hit__title { font-size: 24px; }
  .wiki-hit__desc { font-size: 18px; }
  .wiki-preview { margin: auto 0 0; width: 100vw; height: 94dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .wiki-preview__sections { columns: 1; }
  .wiki-preview__actions { flex-direction: column; }
}


/* screens/word-by-word.css */
/* Word by word, on the Quran page: under each verse when it's on
   (.is-word-by-word), each word with its transliteration, meaning, grammar
   and root (those two lines can be hidden). */

.qp-wbw { display: none; }
.quran-page.is-word-by-word .qp-wbw { display: block; }
.qp-verse.is-hidden .qp-wbw { display: none; }
.qp-wbw__loading { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.qp-wbw__alert { margin: 0 0 8px; }

.wbw__words {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wbw__word {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 110px;
  max-width: 188px; /* three to a row in a verse on a laptop screen */
  text-align: center;
}
.wbw__word:hover { border-color: var(--ink); }
.wbw__word-ar {
  background: none;
  border: 0;
  padding: 0 4px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.5;
  cursor: pointer;
}
.wbw__word-ar:hover, .wbw__word-ar:focus-visible { color: var(--clay); background: var(--clay-soft); }
.wbw__tr { font-size: 13px; color: var(--clay); font-style: italic; }
.wbw__en { font-size: 14px; font-weight: 600; }
.wbw__gr {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-body);
  border-top: 1px solid var(--line);
  padding-top: 5px;
  margin-top: 2px;
}
.wbw__root { font-size: 15px; color: var(--green); text-decoration: none; }
a.wbw__root:hover { text-decoration: underline; }
.wbw__tools { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.wbw__tools .save-word { font-size: 12px; padding: 5px 10px; }
.wbw__lookup { font-size: 12px; color: var(--text-muted); }
.hide-transliteration .wbw__tr { display: none; }
.hide-grammar .wbw__gr, .hide-grammar .wbw__root { display: none; }

@media (max-width: 600px) {
  .wbw__word { flex: 1 1 120px; max-width: none; padding: 10px; }
}


/* screens/word-texts.css */
/* Texts from your words (word_texts/*): the words as chips (struggling ones marked), the next text, past ones */
.word-texts { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.word-texts__lead { max-width: 60ch; margin: 6px 0 0; }
.word-texts__h2 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; margin: 0 0 12px; }
.word-texts__next, .word-texts__ready, .word-texts__state { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 18px; align-items: flex-start; }
.word-texts__words { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.word-texts__word { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sand); border: 1px solid var(--line); }
.word-texts__word.is-struggling { border-color: var(--clay); background: var(--clay-soft); }
.word-texts__word.is-missing { opacity: 0.6; border-style: dashed; }
.word-texts__word-ar { font-size: 20px; line-height: 1.3; }
.word-texts__word-en { font-size: 13px; color: var(--text-muted); }
.word-texts__word-flag { font-size: 12px; color: var(--text-muted); }
.word-texts__key { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.word-texts__key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--clay-soft); border: 1px solid var(--clay); }
.word-texts__note { margin: 0; font-size: 14px; max-width: 60ch; }
.word-texts__links { margin: 0; }
.word-texts__native { margin: 0; font-size: 22px; }
.word-texts__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.word-texts__back { font-size: 14px; }
.word-texts__state-title { font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin: 0; }
.word-texts__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--clay); animation: word-texts-spin 0.9s linear infinite; }
@keyframes word-texts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .word-texts__spinner { animation: none; } }
.word-texts__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.word-texts__item { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.word-texts__item:hover { border-color: var(--line-strong); }
.word-texts__item-title { font-weight: 600; }
.word-texts__item-meta { font-size: 13px; }


/* screens/word-trainer.css */
/* The Word Trainer (word_trainer/show, round, summary). Rounds use the drill's card and choices (drills.css). */
.trainer { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.trainer__lead { color: var(--text-muted); margin-top: 4px; max-width: 60ch; }
.trainer__h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }

.trainer__start { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px;
                  border-radius: 20px; background: var(--ink); color: var(--paper); }
.trainer__start-title { font-family: var(--font-serif); font-size: 26px; font-weight: 400; margin: 0; }
.trainer__start-meta { margin: 4px 0 0; opacity: .8; }
.trainer__start-button { min-width: 180px; }

.trainer__offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px;
                  border-radius: 16px; background: var(--green-soft); border: 1px solid var(--green); }
.trainer__offer-title { font-size: 17px; font-weight: 700; margin: 0; }
.trainer__offer-text { margin: 4px 0 0; color: var(--text-body); max-width: 56ch; }
.trainer__offer-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.trainer__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.trainer__stat { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.trainer__stat dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.trainer__stat dd { margin: 4px 0 0; }
.trainer__stat-figure { font-size: 30px; line-height: 1.1; }
.trainer__stat-small { font-size: 14px; color: var(--text-muted); }

.trainer__list-items, .trainer__words, .trainer__badges { list-style: none; margin: 0; padding: 0; }
.trainer__list { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.trainer__list + .trainer__list { margin-top: 8px; }
.trainer__list > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trainer__list-title { font-weight: 700; }
.trainer__list-words { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trainer__list-progress { font-size: 13px; color: var(--text-muted); }

.trainer__word { display: grid; grid-template-columns: minmax(80px, auto) 1fr auto 90px; align-items: center; gap: 12px; padding: 8px 2px;
                 border-bottom: 1px solid var(--line-soft); }
.trainer__word-ar { font-size: 20px; }
.trainer__word-meaning { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trainer__word-state { font-size: 13px; color: var(--text-muted); }
.trainer__mastered { color: var(--green); }
.trainer__mini-meter { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--sand); overflow: hidden; }
.trainer__mini-meter > span { display: block; height: 100%; background: var(--green); border-radius: inherit; }

.trainer__badges-share { margin-top: 8px; font-size: 14px; }
.trainer__how { font-size: 13px; color: var(--text-muted); max-width: 70ch; }

/* A round */
.trainer__score { display: flex; justify-content: flex-end; gap: 10px; margin: 6px 0 0; font-size: 14px; color: var(--text-muted); min-height: 1.4em; }
.trainer__run { color: var(--clay); font-weight: 700; }
.trainer__q { align-items: center; text-align: center; }
.trainer__meaning { font-size: 26px; }
.trainer__reading { font-size: 16px; color: var(--text-muted); }
.trainer__say { margin-top: 6px; }
.trainer__sentence { font-size: 24px; line-height: 1.6; }
.trainer__gap { display: inline-block; min-width: 3ch; padding: 0 4px; border-bottom: 2px solid var(--clay); font-weight: 700; }
.trainer__play { font-size: 28px; }
.trainer__hint { display: block; margin-top: 10px; }
.trainer__input { text-align: center; font-size: 22px; }
.trainer__input.is-right { border-color: var(--right); }
.trainer__input.is-wrong { border-color: var(--wrong); }

.trainer__cheer { margin: 4px 0 0; font-weight: 700; color: var(--clay); }
.trainer__entry { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--field); }
.trainer__entry-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trainer__entry-word { font-size: 26px; }
.trainer__level { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green-deep); }
.trainer__entry-meaning { display: block; margin-top: 4px; font-size: 17px; }
.trainer__example { margin: 8px 0 0; font-size: 18px; line-height: 1.6; color: var(--text-body); }
.trainer__note { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.trainer__meter { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.trainer__meter-label { font-size: 13px; font-weight: 700; min-width: 9ch; }
.trainer__meter-track { flex: 1; height: 10px; border-radius: var(--radius-pill); background: var(--sand); overflow: hidden; }
.trainer__meter-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width .6s ease; }
.trainer__meter.is-down .trainer__meter-bar { background: var(--clay); }
.trainer__meter.is-mastered .trainer__meter-label { color: var(--green); }
.trainer__gain { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--green-deep); }

.trainer-summary__badges { margin: 8px 0; }

@media (max-width: 640px) {
  .trainer__word { grid-template-columns: auto 1fr 60px; }
  .trainer__word-state { display: none; }
  .trainer__start-button { width: 100%; }
  .trainer__meaning, .trainer__sentence { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .trainer__meter-bar { transition: none; } }

/* The Word Trainer on Practice (practice/_trainer_card) */
.practice-trainer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px;
                    border-radius: 20px; background: var(--ink); color: var(--paper); }
.practice-trainer .practice__eyebrow { color: var(--peach); }
.practice-trainer__title { font-family: var(--font-serif); font-size: 26px; font-weight: 400; margin: 2px 0 0; }
.practice-trainer__meta { margin: 4px 0 0; opacity: .85; }
.practice-trainer__actions { display: flex; align-items: center; gap: 14px; }
.practice-trainer__link { color: var(--paper); text-decoration: underline; }
.practice-trainer__link:hover { color: var(--peach); }

/* The dictionary entry after an answer */
.trainer__entry { text-align: start; }
.trainer__pos { font-size: 12px; color: var(--text-muted); }
.trainer__entry-meaning { font-weight: 700; }
.trainer__entry-h { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.trainer__meanings, .trainer__usages { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.trainer__usages { list-style: none; padding-inline-start: 0; }
.trainer__meaning-item { font-size: 15px; line-height: 1.45; }
.trainer__tags { font-size: 12px; color: var(--text-muted); }
.trainer__sense-example { display: flex; flex-direction: column; margin-top: 2px; }
.trainer__sense-taught { font-size: 16px; color: var(--text-body); font-style: normal; }
.trainer__sense-translation, .trainer__usage-translation { font-size: 13px; color: var(--text-muted); }
.trainer__usage { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: var(--card); }
.trainer__usage-sentence { font-size: 17px; line-height: 1.6; }
.trainer__more { margin-top: 8px; }
.trainer__more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.trainer__more > ol, .trainer__more > ul { margin-top: 6px; }
.trainer__dictionary { display: inline-block; margin-top: 10px; font-size: 13px; }
.trainer__feedback .trainer__entry { align-self: stretch; width: 100%; box-sizing: border-box; }
.trainer__root { font-size: 16px; }
.trainer__forms { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.trainer__form { font-size: 16px; color: var(--text-body); }

/* Badges (Claude Design "Word Trainer Badges"): reached, newest first, then the next of each kind */
.trainer__badges-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trainer__badges-sub { font-size: 13px; color: var(--text-muted); }
.trainer__badges-group { margin: 14px 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
:lang(ar) .trainer__badges-group, :lang(fa) .trainer__badges-group { letter-spacing: 0; }
.trainer__badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.trainer__badge { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 16px;
                  border: 1px solid var(--line); background: var(--card); text-align: center; }
.trainer__badge.is-locked { border: 1.5px dashed var(--text-muted); }
.trainer__badge.is-new { border: 1.5px solid var(--gold); }
.trainer__badge-figure { margin-top: 4px; font-family: var(--font-serif); font-size: 30px; line-height: 1.1; color: var(--ink); }
.trainer__badge.is-locked .trainer__badge-figure { color: var(--text-muted); }
.trainer__badge-caption { font-size: 13px; line-height: 1.35; color: var(--text-muted); text-wrap: balance; }
.trainer__badge-when { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.trainer__badge.is-new .trainer__badge-when { font-weight: 700; color: var(--clay); }
@media (max-width: 640px) { .trainer__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The end of a round (Claude Design "Word Trainer Badges") */
.trainer-summary { max-width: 680px; margin: 0 auto; gap: 16px; }
.trainer-summary__card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.trainer-summary__eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
:lang(ar) .trainer-summary__eyebrow, :lang(fa) .trainer-summary__eyebrow { letter-spacing: 0; }
.trainer-summary__score-row { display: flex; align-items: center; gap: 16px; }
.trainer-summary__score-box { position: relative; width: 120px; height: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.trainer-summary__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trainer-summary__score { display: flex; align-items: baseline; font-family: var(--font-serif); line-height: 1; }
.trainer-summary__score-n { font-size: 64px; }
.trainer-summary__score-of { font-size: 18px; color: var(--text-muted); }
.trainer-summary__score-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trainer-summary__line { font-size: 19px; font-weight: 700; line-height: 1.3; }
.trainer-summary__calm { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.trainer-summary__points { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.trainer-summary__points-n { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.trainer-summary__points-label { font-size: 15px; color: var(--text-muted); }
.trainer-summary__bonus { background: var(--gold); color: var(--ink); border-radius: var(--radius-pill); padding: 3px 12px; font-size: 13px; font-weight: 700; }
.trainer-summary__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trainer-summary__chips li { background: var(--sand); border-radius: var(--radius-pill); padding: 4px 11px; font-size: 13px; }

.trainer-summary__badge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px; background: var(--card);
                          border: 1.5px solid var(--gold); }
.trainer-summary__badge-text { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.trainer-summary__badge-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); font-weight: 700; }
.trainer-summary__badge-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.trainer-summary__badge-link { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--clay); }

.trainer-summary__level { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--ink); color: var(--paper); }
.trainer-summary__level-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.3; }
.trainer-summary__level-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sand); }
.trainer-summary__level-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.trainer-summary__level-yes { background: var(--paper); color: var(--ink); border: none; border-radius: var(--radius-pill); padding: 0 18px; min-height: 44px; font-size: 14px; font-weight: 700; }
.trainer-summary__level-no { background: transparent; color: var(--paper); border: 1.5px solid var(--sand); border-radius: var(--radius-pill); padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 600; }

.trainer-summary__h { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.trainer-summary__moved { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.trainer-summary__moved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.trainer-summary__moved-row.is-mastered { padding: 10px 12px; border-top: none; border-radius: 12px; background: var(--green-soft); }
.trainer-summary__moved-row.is-mastered + .trainer-summary__moved-row { border-top: none; }
.trainer-summary__moved-word { display: flex; align-items: center; gap: 6px 10px; min-width: 0; flex-wrap: wrap; }
.trainer-summary__word { font-size: 22px; line-height: 1.5; }
.trainer-summary__moved-row.is-mastered .trainer-summary__word { font-weight: 700; }
.trainer-summary__meaning { font-size: 14px; color: var(--text-muted); }
.trainer-summary__mastered { background: var(--green); color: var(--card); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 700; }
.trainer-summary__pct { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.trainer-summary__bar { grid-column: 1 / -1; display: flex; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.trainer-summary__bar-old { background: var(--green); }
.trainer-summary__bar-gain { background: var(--gold); }
.trainer-summary__moved-row.is-mastered .trainer-summary__bar-gain { background: var(--green); }
.trainer-summary__more { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }

.trainer-summary__back { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.trainer-summary__back-icon { color: var(--clay); }
.trainer-summary__back-note { margin: 0; font-size: 13px; color: var(--text-muted); }
.trainer-summary__back-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trainer-summary__back-words li { display: flex; align-items: baseline; gap: 6px; padding: 2px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.trainer-summary__back-words .ar { font-size: 20px; line-height: 1.6; }

.trainer-summary__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.trainer-summary__again-form { flex: 1; min-width: 140px; display: flex; }
.trainer-summary__again { flex: 1; background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-pill); padding: 0 20px; min-height: 50px; font-size: 15px; font-weight: 600; }
.trainer-summary__done { flex: 1; min-width: 110px; display: flex; align-items: center; justify-content: center; color: var(--ink); border: 1.5px solid var(--ink);
                         border-radius: var(--radius-pill); padding: 0 18px; min-height: 50px; font-size: 15px; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
  .trainer-summary__score-box { width: 96px; height: 96px; }
  .trainer-summary__score-n { font-size: 52px; }
}


/* screens/writing.css */
/* Writing practice */

.write__letters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
}
.write__letter {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 0;
  font-family: var(--font-arabic);
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
}
.write__letter:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.write__letter[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Letters already traced get a small green tick. */
.write__letter.is-traced { position: relative; }
.write__letter.is-traced::after {
  content: "✓";
  position: absolute;
  top: -6px;
  left: -6px; /* physical: the letters run right to left */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.write__body { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.write__practice { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.write__pad {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  background: var(--card);
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 100% 25%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.write__guide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(220px, 30vw);
  line-height: 1;
  color: var(--line);
  pointer-events: none;
  user-select: none;
}
/* Stroke order over the pad (LetterStrokes, 600 × 360 units): the letter's
   shape, a demonstration drawn stroke by stroke, and each stroke's dashed
   path, arrow and number. In guided practice a stroke is done (green), next
   (clay) or later (faint). */
.write__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.write__baseline { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 6 6; }
.write__shape path { fill: none; stroke: var(--line); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.write__shape circle { fill: var(--line); }
.write__demo path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.write__demo circle { fill: var(--ink); opacity: 0; }
.write__demo.is-drawn path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1s ease-in-out; }
.write__demo.is-drawn circle { opacity: 1; transition: opacity .3s ease; }
.write__demo.is-drawn circle:nth-of-type(2) { transition-delay: .25s; }
.write__demo.is-drawn circle:nth-of-type(3) { transition-delay: .5s; }
.write__order, .write__mark { --step: var(--clay); }
.write__order[data-state="done"], .write__mark[data-state="done"] { --step: var(--green); }
.write__order[data-state="later"], .write__mark[data-state="later"] { --step: var(--line-dashed); }
.write__order path { fill: none; stroke: var(--step); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.write__order polygon { fill: var(--step); }
.write__order circle { fill: none; stroke: var(--step); stroke-width: 2.5; stroke-dasharray: 4 4; }
.write__mark {
  position: absolute;
  --size: 28px;
  /* Kept inside the pad, even for dots near its edge (ي). */
  left: clamp(calc(var(--size) / 2 + 3px), var(--x), calc(100% - var(--size) / 2 - 3px)); /* physical: --x is a point on the drawing */
  top: clamp(calc(var(--size) / 2 + 3px), var(--y), calc(100% - var(--size) / 2 - 3px));
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--step);
  border: 2.5px solid var(--card);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  pointer-events: none;
}
.write .is-hidden { display: none; }
.write__feedback {
  position: absolute;
  inset-inline-start: 14px;
  top: 14px;
  margin: 0;
  background: var(--green-soft);
  color: var(--green);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.write__feedback.is-wrong { background: var(--wrong-soft); color: var(--wrong); }
@media (prefers-reduced-motion: reduce) {
  .write__demo.is-drawn path, .write__demo.is-drawn circle { transition: none; }
}

.write__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  color: var(--ink); /* stroke color, read by the writing controller */
}

.write__btn { font-weight: 600; padding: 10px 16px; }
.write__next { margin-inline-start: auto; }
.write__watch { background: var(--clay); color: var(--text-on-accent); font-weight: 600; padding: 10px 16px; }
.write__watch:hover { background: var(--clay-hover); color: var(--text-on-accent); }

.write__info { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.write__name { font-size: 32px; line-height: 1; }
.write__count { font-size: 14px; }
.write__sound { background: var(--sand); color: var(--ink); }
.write__sound:hover { background: var(--line); color: var(--ink); }

.write__forms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.write__form {
  background: var(--paper);
  border-radius: 12px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.write__glyph { font-size: 38px; line-height: 1.5; }
.write__form-label { font-size: 12px; color: var(--text-muted); }
.write__steps { display: flex; flex-direction: column; gap: 8px; }
.write__steps-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.write__step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.write__step {
  --step: var(--clay);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.45;
}
.write__step[data-state="next"] { background: var(--clay-soft); }
.write__step[data-state="done"] { --step: var(--green); background: var(--green-soft); }
.write__step[data-state="later"] { --step: var(--line-dashed); }
.write__step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--step);
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.write__hint { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.write__tip { font-size: 14px; line-height: 1.5; color: var(--text-body); }
.write__example { border-top: 1px solid var(--line); padding-top: 14px; font-size: 15px; }
.write__example-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.write__example-ar { font-size: 34px; }

@media (max-width: 600px) {
  .write__mark { --size: 22px; font-size: 12px; border-width: 2px; }
  .write__letters { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .write__letter { font-size: 24px; }
}


/* utilities.css */
/* Small single-purpose helpers. Loaded last so they win over components. */

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 12px); }
.stack--xs { --stack-gap: 6px; }
.stack--sm { --stack-gap: 8px; }
.stack--lg { --stack-gap: 20px; }
.stack--xl { --stack-gap: 28px; }

.row { display: flex; align-items: center; gap: var(--row-gap, 12px); flex-wrap: wrap; }
.row--sm { --row-gap: 8px; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--baseline { align-items: baseline; }
.row--nowrap { flex-wrap: nowrap; }

.grow { flex: 1; min-width: 0; }
.mt-auto { margin-top: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.button_to { display: contents; } /* forms generated by button_to */


/* word-trainer-badges.css */
/* Word Trainer badges (Claude Design "Word Trainer Badges"; markup from TrainerBadgesHelper#trainer_badge). Colors come
   from the theme (--paper, --card, --sand, --ink, --clay, --clay-soft, --gold, --gold-deep, --text-muted), so one design
   fits every language. Tier: color plus one outer ring per tier; state: reached (default), locked, new. */
.wt-emblem { --size: 64px; position: relative; display: inline-flex; width: var(--size); height: var(--size); flex-shrink: 0; border-radius: 50%;
             color: var(--badge-mark); }
.wt-badge-art { width: 100%; height: 100%; overflow: visible; display: block; }
.wt-shape { fill: var(--badge-fill); stroke: var(--badge-edge); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wt-sym { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-dots { fill: currentColor; }
.wt-ring { fill: none; stroke: var(--badge-edge); stroke-width: 1.4; vector-effect: non-scaling-stroke; display: none; }
.wt-emblem.is-large .wt-ring { stroke-width: 2.4; }
.wt-emblem.is-large .wt-shape { stroke-width: 2.5; }

.wt-emblem[data-tier="1"] { --badge-fill: var(--clay-soft); --badge-edge: var(--clay); --badge-mark: var(--clay); }
.wt-emblem[data-tier="2"] { --badge-fill: var(--sand); --badge-edge: var(--text-muted); --badge-mark: var(--ink); }
.wt-emblem[data-tier="3"] { --badge-fill: var(--gold); --badge-edge: var(--gold-deep); --badge-mark: var(--ink); }
.wt-emblem[data-tier="4"] { --badge-fill: var(--ink); --badge-edge: var(--gold); --badge-mark: var(--gold); }
.wt-emblem[data-tier="2"] .wt-ring-1,
.wt-emblem[data-tier="3"] .wt-ring-1, .wt-emblem[data-tier="3"] .wt-ring-2,
.wt-emblem[data-tier="4"] .wt-ring { display: inline; }

/* On dark (Today's milestone card) */
.on-dark .wt-emblem[data-tier="2"] { --badge-edge: var(--paper); }

/* Locked: the next to reach */
.wt-emblem[data-state="locked"] { --badge-fill: var(--card); --badge-edge: var(--text-muted); --badge-mark: var(--text-muted); }
.wt-emblem[data-state="locked"] .wt-shape { stroke-dasharray: 3.5 2.5; }
.wt-emblem[data-state="locked"] .wt-ring { display: none; }
.on-dark .wt-emblem[data-state="locked"] { --badge-fill: transparent; --badge-edge: var(--sand); --badge-mark: var(--sand); }

/* Just reached: one pulse, then a settled gold ring */
.wt-emblem[data-state="new"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4.5px var(--gold); }
.on-dark .wt-emblem[data-state="new"] { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold); }
.wt-emblem[data-state="new"]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0;
                                      pointer-events: none; animation: wt-ping 1s ease-out both; }
.wt-emblem.is-large[data-state="new"]::after { inset: -10px; }
@keyframes wt-ping { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.2); } }

/* The round summary moves one moment only: .wt-moment-perfect, -badge or -bars on its root */
@keyframes wt-pop { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wt-draw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes wt-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wt-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wt-moment-perfect .wt-score { animation: wt-pop .5s cubic-bezier(.2, .8, .2, 1) both; }
.wt-moment-perfect .wt-score-ring { stroke-dasharray: 340; animation: wt-draw .9s .1s ease-out both; }
.wt-moment-perfect .wt-bonus, .wt-moment-perfect .wt-score-ticks { animation: wt-rise .4s .65s ease-out both; }
.wt-moment-bars .wt-bar-gain { transform-origin: left; animation: wt-grow .7s .15s ease-out both; }
[dir="rtl"] .wt-moment-bars .wt-bar-gain { transform-origin: right; }
.wt-moment-bars .wt-mastered-mark { animation: wt-rise .35s .8s ease-out both; }
.wt-summary:not(.wt-moment-badge) .wt-emblem[data-state="new"]::after { animation: none; display: none; }

@media (prefers-reduced-motion: reduce) {
  .wt-emblem::after { display: none; }
  .wt-summary *, .wt-emblem { animation: none !important; }
}