/* ============================================================
   The Muslim Arabic Reader — sample reading page (v2)
   Aesthetic: parchment paper, warm ink, a single muted ochre accent.
   Fonts: Amiri (Arabic), Cormorant Garamond (display), DM Sans (UI).
   ============================================================ */

:root {
  --bg:        oklch(0.965 0.012 78);
  --bg-2:      oklch(0.945 0.016 78);
  --bg-deep:   oklch(0.915 0.020 75);
  --rule:      oklch(0.86  0.018 70);
  --rule-soft: oklch(0.91  0.014 75);
  --ink:       oklch(0.22  0.015 60);
  --ink-2:     oklch(0.34  0.014 60);
  --ink-mute:  oklch(0.48  0.012 60);
  --ink-faint: oklch(0.62  0.010 60);
  --accent:    oklch(0.52 0.085 55);
  --accent-2:  oklch(0.62 0.07 55);
  --accent-bg: oklch(0.93 0.045 70 / 0.65);
  --accent-bg-2: oklch(0.92 0.05 75 / 0.6);

  --sans:    "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --arabic:  "Amiri", "Noto Naskh Arabic", "Scheherazade New", serif;

  --arabic-size: 27px;
  --arabic-line: 2.25;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(oklch(0.86 0.02 70 / 0.16) 1px, transparent 1px),
    radial-gradient(oklch(0.86 0.02 70 / 0.09) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: oklch(0.96 0.013 78 / 0.85);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 30;
}
.masthead-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 14px 28px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  text-align: left;
}
.wordmark:hover .wordmark-name {
  color: var(--accent);
}
.wordmark-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.wordmark-glyph {
  font-family: var(--arabic);
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  position: relative; top: 2px;
}
.wordmark-name {
  font-size: 16.5px; letter-spacing: 0.01em; font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark-name em { font-style: italic; font-weight: 400; color: var(--ink-mute); }

.product-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.product-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.product-nav button:hover,
.product-nav button.active {
  color: var(--ink);
  background: oklch(1 0 0 / 0.72);
}
.nav-count {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0;
}

.mast-right {
  display: flex; align-items: center; gap: 16px;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.mast-right .pill {
  border: 1px solid var(--rule);
  padding: 5px 10px; border-radius: 999px;
  color: var(--ink-2);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.sync-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sync-pill.synced {
  color: var(--accent);
  border-color: oklch(0.72 0.05 60 / 0.70);
}
.sync-pill span {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-faint);
}

/* ---------- page shell ---------- */
.page {
  max-width: 1100px; margin: 0 auto;
  padding: 64px 36px 160px;
}
.app-page {
  min-height: calc(100vh - 62px);
}
.solid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.solid-btn:hover {
  background: oklch(0.28 0.018 60);
  border-color: oklch(0.28 0.018 60);
}
.text-btn {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.text-btn:hover { color: var(--ink); }
.text-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bg-2);
}

/* ---------- app pages ---------- */
.page-hero {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1;
  margin: 8px 0 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.page-hero p {
  max-width: 46ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-mute);
}
.stats-row {
  max-width: 760px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
  background: var(--bg-2);
  border-radius: 8px;
  overflow: hidden;
}
.stats-row > div {
  padding: 20px 18px;
  text-align: center;
  border-right: 1px solid var(--rule);
}
.stats-row > div:last-child { border-right: 0; }
.stats-row span {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}
.stats-row small {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.subtabs {
  max-width: 760px;
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.subtabs button {
  min-width: 112px;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mute);
  background: var(--bg-2);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.subtabs button:hover,
.subtabs button.active {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--bg);
}
.empty-state {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 32px;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}
.empty-state.compact { padding: 34px 28px; }
.empty-state h3 {
  margin: 8px 0 8px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
}
.empty-state p {
  max-width: 34ch;
  margin: 0 auto 22px;
  color: var(--ink-mute);
}
.empty-ar {
  font-family: var(--arabic);
  font-size: 28px;
  color: var(--accent);
}
.auth-panel {
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: 22px;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background:
    linear-gradient(135deg, oklch(0.97 0.012 78 / 0.76), oklch(0.93 0.018 75 / 0.70)),
    var(--bg-2);
}
.auth-panel.signed-in {
  grid-template-columns: 1fr auto;
}
.auth-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.auth-panel h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
}
.auth-panel p {
  margin: 6px 0 0;
  color: var(--ink-mute);
  line-height: 1.55;
}
.auth-message {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 13px;
}
.auth-form {
  display: grid;
  gap: 8px;
}
.auth-form input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  outline: none;
}
.auth-form input:focus {
  border-color: var(--accent);
}
.auth-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-actions .solid-btn:disabled,
.auth-actions .text-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.review-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: 0 14px 38px -28px oklch(0.20 0.02 60 / 0.30);
}
.review-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.review-word {
  margin: 22px 0 14px;
  text-align: center;
  font-family: var(--arabic);
  font-size: clamp(46px, 8vw, 72px);
  line-height: 1.3;
}
.review-context {
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
}
.review-reveal {
  margin: 24px auto 0;
  display: flex;
}
.review-back {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.review-meaning {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  color: var(--ink);
}
.review-root {
  margin-top: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink-mute);
}
.review-root span {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.review-root strong {
  font-family: var(--arabic);
  font-size: 22px;
  color: var(--accent);
}
.review-back p {
  max-width: 52ch;
  margin: 14px auto 0;
  color: var(--ink-mute);
  line-height: 1.55;
}
.rating-row {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rating-row button {
  padding: 11px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  text-transform: capitalize;
  color: var(--ink-2);
}
.rating-row button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.word-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.word-list-card {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}
.word-list-main {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
}
.word-list-ar {
  font-family: var(--arabic);
  font-size: 30px;
  color: var(--ink);
}
.word-list-meta {
  display: grid;
  gap: 3px;
  text-align: right;
}
.word-list-meta strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  font-weight: 500;
}
.word-list-meta span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.word-list-card .ctx-ar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 18px;
}
.word-list-card .text-btn {
  margin-top: 12px;
}
.reading-groups {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.reading-group {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}
.reading-group {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.reading-group h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.reading-group p {
  margin: 4px 0 0;
  color: var(--ink-mute);
}
.mini-word-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mini-word-row button {
  font-family: var(--arabic);
  font-size: 20px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
}
/* ---------- library ---------- */
.library-feature {
  max-width: 920px;
  margin: 0 auto 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background:
    linear-gradient(135deg, oklch(0.97 0.012 78 / 0.85), oklch(0.93 0.024 75 / 0.78)),
    var(--bg-2);
  box-shadow: 0 18px 42px -34px oklch(0.20 0.02 60 / 0.35);
  animation: pageRise 0.45s ease both;
}
.library-feature-copy > span,
.reading-card-top,
.level-status,
.track-card > span,
.journey-support {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.library-feature h2 {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}
.library-feature p {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.45;
}
.feature-meta {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.feature-meta span {
  padding: 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-2);
  font-size: 11.5px;
}
.feature-meta span[dir="rtl"] {
  font-family: var(--arabic);
  font-size: 16px;
  line-height: 1;
  color: var(--accent);
}
.library-overview {
  max-width: 920px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--rule);
  animation: pageRise 0.45s ease 0.08s both;
}
.library-overview div {
  background: var(--bg-2);
  padding: 18px 20px;
  text-align: center;
}
.library-overview strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 34px;
  line-height: 1;
}
.library-overview span {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.library-levels {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
.library-level {
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-2);
  animation: pageRise 0.45s ease both;
}
.library-level:nth-child(2) { animation-delay: 0.04s; }
.library-level:nth-child(3) { animation-delay: 0.08s; }
.library-level:nth-child(4) { animation-delay: 0.12s; }
.library-level.soon {
  background: oklch(0.945 0.012 78 / 0.62);
}
.library-level-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  margin-bottom: 18px;
}
.library-level h2 {
  margin: 4px 0 8px;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
}
.library-level p {
  margin: 0;
  max-width: 56ch;
  color: var(--ink-mute);
  line-height: 1.55;
}
.level-facts {
  display: grid;
  gap: 7px;
  min-width: 190px;
}
.level-facts span {
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-mute);
  font-size: 12px;
  text-align: center;
}
.level-facts strong {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 16px;
}
.reading-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.library-reading-card {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 270px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.library-reading-card:hover {
  transform: translateY(-2px);
  border-color: oklch(0.72 0.05 60);
  box-shadow: 0 16px 36px -30px oklch(0.20 0.02 60 / 0.38);
}
.reading-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.status-pill {
  color: var(--accent);
}
.status-pill.draft,
.status-pill.planned {
  color: var(--ink-faint);
}
.reading-card-ar {
  font-family: var(--arabic);
  direction: rtl;
  font-size: 32px;
  line-height: 1.45;
  color: var(--accent);
}
.library-reading-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.library-reading-card p {
  margin: 0;
  color: var(--ink-mute);
  line-height: 1.5;
}
.reading-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.reading-card-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  color: var(--ink-faint);
  font-size: 11px;
}
.library-reading-card .solid-btn,
.library-reading-card .text-btn,
.library-reading-card .text-chip {
  margin-top: auto;
  justify-self: start;
}
.coming-panel {
  min-height: 92px;
  padding: 20px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: oklch(0.97 0.01 78 / 0.52);
  color: var(--ink-mute);
  display: grid;
  align-content: center;
  gap: 4px;
}
.coming-panel span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-2);
}
.coming-panel p { margin: 0; }

/* ---------- path ---------- */
.path-tracks {
  max-width: 940px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}
.track-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-2);
  min-height: 230px;
  animation: pageRise 0.45s ease both;
}
.track-card.primary {
  background:
    linear-gradient(135deg, oklch(0.96 0.018 78 / 0.94), oklch(0.91 0.038 72 / 0.80)),
    var(--bg-2);
}
.track-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -70px;
  inset-block-end: -88px;
  width: 190px;
  height: 190px;
  border: 1px solid oklch(0.72 0.04 65 / 0.35);
  border-radius: 50%;
}
.track-card h2 {
  margin: 8px 0 10px;
  font-family: var(--serif);
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.05;
  font-weight: 500;
}
.track-card h2[dir="rtl"] {
  font-family: var(--arabic);
  line-height: 1.45;
}
.track-card p {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-mute);
  line-height: 1.6;
}
.track-ar {
  margin-top: 24px;
  font-family: var(--arabic);
  font-size: 28px;
  color: var(--accent);
}
.track-note {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.path-summary {
  max-width: 940px;
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--rule);
}
.path-summary div {
  background: var(--bg-2);
  padding: 18px;
  display: grid;
  gap: 5px;
}
.path-summary strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
}
.path-summary span {
  color: var(--ink-mute);
  line-height: 1.4;
}
.journey-map {
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  display: grid;
  gap: 14px;
}
.journey-map::before {
  content: "";
  position: absolute;
  inset-block: 20px 20px;
  inset-inline-start: 20px;
  width: 1px;
  background: linear-gradient(var(--accent), var(--rule));
}
.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  animation: pageRise 0.45s ease both;
}
.journey-step:nth-child(2) { animation-delay: 0.04s; }
.journey-step:nth-child(3) { animation-delay: 0.08s; }
.journey-step:nth-child(4) { animation-delay: 0.12s; }
.journey-marker {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.journey-marker span {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
}
.journey-step.active .journey-marker {
  background: var(--accent);
  border-color: var(--accent);
}
.journey-step.active .journey-marker span {
  color: var(--bg);
}
.journey-body {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-2);
}
.journey-step.soon .journey-body {
  background: oklch(0.945 0.012 78 / 0.58);
}
.journey-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.journey-head h2 {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3.8vw, 36px);
  font-weight: 500;
}
.journey-support {
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  white-space: nowrap;
}
.journey-body p {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--ink-mute);
  line-height: 1.6;
}
.journey-facts {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.journey-facts span {
  padding: 6px 9px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 11.5px;
}
.journey-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@keyframes pageRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .library-feature,
  .library-overview,
  .library-level,
  .track-card,
  .journey-step {
    animation: none;
  }
  .library-reading-card:hover {
    transform: none;
  }
}

/* ---------- library and path v3 ---------- */
.app-page .page-hero {
  max-width: 720px;
  margin-bottom: 22px;
}
.app-page .page-hero h1 {
  margin: 6px 0 10px;
  font-size: 44px;
  line-height: 1.04;
}
.app-page .page-hero p {
  font-size: 16px;
  line-height: 1.42;
}
.app-page .page-hero h1 em {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}
.home-page {
  padding-top: 42px;
}
.home-hero,
.home-grid,
.home-actions,
.home-next {
  max-width: 980px;
  margin-inline: auto;
}
.home-hero {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: end;
}
.home-hero h1 {
  margin: 4px 0 8px;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.02;
  font-weight: 500;
}
.home-hero p,
.home-sync p,
.home-card p,
.home-action small,
.home-next p {
  margin: 0;
  color: var(--ink-mute);
  line-height: 1.42;
}
.home-sync {
  padding: 13px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}
.home-sync span,
.home-card > span,
.home-action span,
.home-next span,
.word-study-main > span {
  display: block;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-sync strong {
  display: block;
  margin: 3px 0 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 12px;
  margin-bottom: 12px;
}
.home-card,
.home-action,
.home-next {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}
.home-card {
  padding: 18px;
}
.home-card-main {
  background:
    linear-gradient(135deg, oklch(0.97 0.012 78 / 0.85), oklch(0.93 0.024 75 / 0.78)),
    var(--bg-2);
}
.home-ar {
  margin-top: 8px;
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 32px;
  line-height: 1.35;
}
.home-card h2 {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 500;
}
.home-card .solid-btn {
  margin-top: 14px;
}
.home-mini-stats {
  margin: 12px 0 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--rule);
}
.home-mini-stats div {
  padding: 10px;
  background: var(--bg);
  text-align: center;
}
.home-mini-stats strong {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
}
.home-mini-stats small {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.home-action {
  min-height: 118px;
  padding: 14px;
  text-align: left;
}
.home-action:hover {
  border-color: oklch(0.72 0.04 60);
}
.home-action strong {
  display: block;
  margin: 6px 0 5px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
}
.home-next {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.home-next h2 {
  margin: 3px 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.home-next p {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 22px;
}
.word-study-board {
  max-width: 860px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 12px;
  align-items: stretch;
}
.word-study-main,
.study-stat-grid {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
}
.word-study-main {
  padding: 18px;
}
.word-study-main h2 {
  margin: 5px 0 7px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}
.word-study-main p {
  max-width: 54ch;
  margin: 0 0 14px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.study-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--rule);
}
.study-stat-grid div {
  padding: 14px 12px;
  display: grid;
  place-content: center;
  background: var(--bg);
  text-align: center;
}
.study-stat-grid strong {
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}
.study-stat-grid span {
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.home-greet,
.home-continue,
.home-summary,
.home-section-title,
.upnext-row,
.mutun-horizon,
.words-hero,
.word-stat-strip,
.word-review-section,
.saved-words-section {
  max-width: 980px;
  margin-inline: auto;
}
.home-greet {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.home-greet .eyebrow,
.words-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.home-greet .ar-mark,
.words-hero .ar-mark {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 18px;
  letter-spacing: 0;
}
.home-greet h1,
.words-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.04;
}
.home-greet h1 em,
.words-hero h1 em,
.home-section-title h2 em,
.saved-words-head h2 em {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}
.home-date {
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
  text-align: right;
}
.home-date span {
  color: var(--accent);
}
.continue-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--bg-2), oklch(0.93 0.022 75 / 0.75)),
    var(--bg-2);
  text-align: left;
}
.continue-card:hover,
.upnext-row:hover,
.summary-card:hover {
  border-color: oklch(0.72 0.04 60);
}
.continue-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.continue-label span {
  font-family: var(--arabic);
  font-size: 15px;
  letter-spacing: 0;
}
.continue-series {
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.continue-ar {
  color: var(--ink);
  font-family: var(--arabic);
  font-size: 34px;
  line-height: 1.38;
}
.continue-en {
  margin-top: 2px;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
}
.continue-progress {
  max-width: 460px;
  margin-top: 18px;
}
.continue-progress div {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: oklch(0.88 0.018 70);
}
.continue-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.continue-progress p {
  margin: 9px 0 0;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.continue-action {
  min-width: 118px;
  padding-left: 22px;
  border-left: 1px dashed var(--rule);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
}
.continue-action span {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 22px;
}
.continue-action small {
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-summary {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--rule);
}
.summary-card {
  min-height: 168px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  text-align: left;
}
.summary-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.summary-card div span[dir="rtl"] {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 15px;
  letter-spacing: 0;
}
.summary-card strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 0.95;
}
.summary-card p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.42;
}
.summary-card em {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--rule-soft);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 14px;
}
.home-section-title {
  margin-top: 38px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: baseline;
}
.home-section-title span {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 17px;
}
.home-section-title h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.home-section-title div {
  height: 1px;
  background: var(--rule);
}
.upnext-row {
  width: 100%;
  min-height: 78px;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  text-align: left;
}
.upnext-ar {
  color: var(--ink);
  font-family: var(--arabic);
  font-size: 26px;
}
.upnext-copy strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
}
.upnext-copy small {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.upnext-row em {
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 15px;
  white-space: nowrap;
}
.mutun-horizon {
  padding: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  border: 1px solid oklch(0.55 0.05 250 / 0.28);
  border-radius: 8px;
  background: oklch(0.94 0.018 250 / 0.30);
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.mutun-horizon:hover {
  border-color: oklch(0.48 0.07 255 / 0.46);
  background: oklch(0.94 0.02 250 / 0.48);
  transform: translateY(-1px);
}
.mutun-horizon:focus-visible {
  outline-color: oklch(0.48 0.07 255);
}
.mutun-mark {
  color: oklch(0.43 0.065 255);
  font-family: var(--arabic);
  font-size: 36px;
}
.mutun-horizon span {
  color: oklch(0.43 0.065 255);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mutun-horizon h3 {
  margin: 4px 0 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.mutun-horizon p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-mute);
  line-height: 1.45;
}
.reading-loading {
  min-height: 58vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}
.reading-loading .loading-ar {
  margin-top: 10px;
  font-family: var(--arabic);
  font-size: clamp(42px, 7vw, 82px);
  line-height: 1.25;
}
.reading-loading h1 {
  margin: 4px 0 6px;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
}
.reading-loading p {
  margin: 0;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}
.words-page {
  padding-top: 46px;
}
.words-hero {
  margin-bottom: 22px;
}
.words-hero p {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.45;
}
.word-stat-strip {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--rule);
}
.word-stat-strip div {
  padding: 16px;
  background: var(--bg);
}
.word-stat-strip strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}
.word-stat-strip .due strong {
  color: var(--accent);
}
.word-stat-strip span {
  display: block;
  margin-top: 7px;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.word-stat-strip small {
  color: var(--ink-faint);
  font-family: var(--arabic);
  font-size: 14px;
}
.word-review-section {
  margin-bottom: 46px;
}
.review-section-head,
.saved-words-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.review-section-head div,
.saved-words-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.review-section-head span,
.saved-words-head span {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 18px;
}
.review-section-head h2,
.saved-words-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.review-section-head strong {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.deck-progress {
  margin-bottom: 12px;
  display: flex;
  gap: 6px;
}
.deck-progress span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
}
.deck-progress span.cur {
  background: var(--accent);
}
.deck-done {
  padding: 40px 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  text-align: center;
}
.deck-done div {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 42px;
}
.deck-done h3 {
  margin: 8px 0 4px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
}
.deck-done p {
  margin: 0;
  color: var(--ink-mute);
}
.saved-words-intro {
  max-width: 58ch;
  margin: 0 0 18px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.word-legend {
  margin-bottom: 18px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.word-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.word-legend i,
.saved-word-open i {
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: var(--ink-faint);
}
.word-legend .due,
.saved-word-open i.due {
  background: var(--accent);
}
.word-legend .learning,
.saved-word-open i.learning {
  background: oklch(0.62 0.09 75);
}
.word-legend .mastered,
.saved-word-open i.mastered {
  background: oklch(0.55 0.07 150);
}
.saved-word-group {
  margin-bottom: 26px;
}
.saved-word-group-head {
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.saved-word-group-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.saved-word-group-head span {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.saved-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 9px;
}
.saved-word-tile {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}
.saved-word-tile:hover {
  border-color: oklch(0.72 0.04 60);
}
.saved-word-open {
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
}
.saved-word-open .ar {
  color: var(--ink);
  font-family: var(--arabic);
  font-size: 23px;
}
.saved-word-open .en {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-word-remove {
  height: 100%;
  min-height: 56px;
  padding: 0 12px;
  border-left: 1px solid var(--rule-soft);
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.saved-word-remove:hover {
  background: oklch(0.94 0.02 45 / 0.7);
  color: var(--accent);
}
.info-page .page-hero,
.about-lede,
.about-points,
.about-split,
.about-build,
.contact-panel {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
}
.about-lede {
  margin-top: -12px;
  margin-bottom: 28px;
}
.about-split span,
.about-build span {
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.about-lede p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  line-height: 1.18;
}
.about-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--rule);
}
.about-points div {
  padding: 18px;
  background: var(--bg);
}
.about-points strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.12;
}
.about-points span {
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.48;
}
.about-split,
.about-build {
  margin-top: 16px;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 30px;
  border-top: 1px solid var(--rule);
}
.about-split h2,
.about-build h2 {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.08;
}
.about-split p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.65;
}
.about-build ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}
.about-build li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule-soft);
  color: var(--ink-2);
  font-size: 14px;
}
.about-build li:last-child {
  border-bottom: 0;
}
.contact-panel {
  margin-top: -8px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.contact-panel a {
  display: inline-flex;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 34px;
  font-style: italic;
  line-height: 1.1;
  text-decoration: none;
}
.contact-panel a:hover {
  color: var(--ink);
}
.contact-panel p {
  max-width: 48ch;
  margin: 14px auto 0;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.55;
}
.lib-toolbar {
  max-width: 980px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lib-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-mute);
  font-size: 12px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.lib-chip:hover,
.lib-chip.active {
  color: var(--ink);
  border-color: oklch(0.72 0.04 60);
}
.lib-chip.active {
  background: var(--ink);
  color: var(--bg);
}
.lib-chip .count {
  font-family: var(--serif);
  font-style: italic;
  color: inherit;
  opacity: 0.7;
}
.level-select {
  appearance: none;
  cursor: pointer;
  padding-inline-end: 28px;
}
.lib-search {
  margin-left: auto;
  min-width: 220px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-faint);
}
.lib-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.lib-search input::placeholder {
  color: var(--ink-faint);
}
.lib-view-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
}
.lib-view-toggle button {
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lib-view-toggle button[aria-pressed="true"] {
  background: oklch(1 0 0 / 0.72);
  color: var(--ink);
}
.library-plans {
  max-width: 980px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--rule);
  animation: pageRise 0.42s ease 0.06s both;
}
.library-plans span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--bg-2);
  color: var(--ink-mute);
  text-align: center;
}
.library-plans strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
}
.library-section-block,
.library-detail {
  max-width: 980px;
  margin: 0 auto 34px;
  animation: pageRise 0.42s ease both;
}
.library-section-head,
.library-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.library-section-head span,
.library-detail-head > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.library-section-head h2,
.library-detail-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.08;
}
.library-detail-head p {
  margin: 8px 0 0;
  color: var(--ink-mute);
  line-height: 1.5;
}
.back-chip {
  align-self: flex-start;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mute);
  font-size: 11.5px;
}
.back-chip:hover {
  color: var(--ink);
  border-color: oklch(0.72 0.04 60);
}
.detail-ar {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 30px;
  line-height: 1.35;
  text-align: right;
}
.series-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.series-card {
  min-height: 232px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.series-card:hover {
  transform: translateY(-2px);
  border-color: oklch(0.72 0.04 60);
  box-shadow: 0 20px 46px -40px oklch(0.20 0.02 60 / 0.38);
}
.series-card.classic {
  border-top: 3px solid oklch(0.54 0.08 55);
}
.series-card.series {
  border-top: 3px solid var(--accent);
}
.series-card.mutun {
  border-color: oklch(0.43 0.065 255 / 0.38);
  border-top: 4px solid oklch(0.43 0.065 255);
  box-shadow: inset 0 0 0 1px oklch(0.43 0.065 255 / 0.12);
}
.series-card.mutun:hover {
  border-color: oklch(0.43 0.065 255 / 0.58);
}
.series-card.mutun .series-ar,
.series-card.mutun .series-card-top span:first-child {
  color: oklch(0.43 0.065 255);
}
.series-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.series-ar {
  min-height: 38px;
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 29px;
  line-height: 1.3;
}
.series-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}
.series-card p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 13.5px;
  line-height: 1.38;
}
.series-card.compact {
  min-height: 208px;
  gap: 6px;
  padding: 13px;
}
.series-card.compact .series-card-top {
  font-size: 9.5px;
}
.series-card.compact .series-ar {
  min-height: 30px;
  font-size: 24px;
}
.series-card.compact h3 {
  font-size: 20px;
}
.series-card.compact p {
  font-size: 12.5px;
  line-height: 1.3;
}
.series-card.compact .series-next {
  margin-top: 2px;
  padding-top: 7px;
  gap: 2px;
}
.series-card.compact .series-next strong {
  font-size: 15px;
  line-height: 1.3;
}
.series-card.compact .series-next em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.series-card.compact .series-source {
  display: none;
}
.series-card.compact .solid-btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 10.5px;
}
.series-next {
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--rule-soft);
  display: grid;
  gap: 3px;
}
.series-next span,
.series-source span {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.series-next strong {
  color: var(--ink-2);
  font-family: var(--arabic);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
}
.series-next em {
  color: var(--ink-mute);
  font-family: var(--serif);
  font-size: 13px;
}
.series-source {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.series-source strong {
  color: var(--ink-2);
  font-family: var(--arabic);
  font-size: 15.5px;
  font-weight: 400;
}
.series-actions {
  align-self: end;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.level-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.level-shelf-card {
  min-height: 132px;
  padding: 13px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.level-shelf-card:hover {
  border-color: oklch(0.72 0.04 60);
}
.level-shelf-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.level-shelf-card.soon {
  background: oklch(0.935 0.010 78 / 0.62);
}
.level-shelf-top,
.level-shelf-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.level-shelf-top span:first-child {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0;
}
.level-shelf-card h3 {
  margin: 12px 0 6px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
}
.level-shelf-card p {
  min-height: 0;
  margin: 0 0 12px;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.35;
}
.lib-groups {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 38px;
}
.lvl-group {
  animation: pageRise 0.42s ease both;
}
.lvl-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
}
.lvl-num {
  min-width: 32px;
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
}
.lvl-name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(27px, 4vw, 36px);
  font-weight: 500;
  line-height: 1.05;
}
.lvl-tag {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.lvl-meta {
  margin-left: auto;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-style: italic;
}
.lvl-head.coming .lvl-num,
.lvl-head.coming .lvl-name {
  color: var(--ink-faint);
}
.lvl-note {
  max-width: 62ch;
  margin: 12px 0 22px 46px;
  color: var(--ink-mute);
  line-height: 1.6;
}
.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--rule);
}
.lib-list {
  display: grid;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--rule);
  gap: 1px;
}
.read-card {
  position: relative;
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  background: var(--bg);
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.read-card:hover {
  transform: translateY(-2px);
  background: oklch(0.978 0.008 78);
  box-shadow: 0 20px 42px -38px oklch(0.20 0.02 60 / 0.42);
}
.read-card.locked:hover {
  transform: none;
  box-shadow: none;
}
.read-card.current {
  background:
    linear-gradient(180deg, oklch(0.97 0.018 78 / 0.82), oklch(0.955 0.014 78 / 0.94)),
    var(--bg);
}
.read-card.text {
  box-shadow: inset 0 4px 0 oklch(0.43 0.065 255);
}
.read-card.text:hover {
  box-shadow:
    inset 0 4px 0 oklch(0.43 0.065 255),
    0 20px 42px -38px oklch(0.20 0.02 60 / 0.42);
}
.read-card.text .read-card-ar {
  color: oklch(0.43 0.065 255);
}
.read-card.locked {
  background: oklch(0.935 0.010 78 / 0.72);
  color: var(--ink-mute);
}
.read-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.corner,
.row-meta,
.status-pill {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.corner {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  letter-spacing: 0.08em;
}
.corner.text,
.corner.glimpse,
.row-meta.text,
.row-meta.glimpse {
  color: oklch(0.43 0.065 255);
}
.corner.classic,
.row-meta.classic {
  color: oklch(0.46 0.07 55);
}
.path-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.corner.text .path-dot,
.corner.glimpse .path-dot,
.row-meta.text .path-dot,
.row-meta.glimpse .path-dot,
.tl-track.text .dot,
.tl-track.glimpse .dot {
  background: oklch(0.43 0.065 255);
}
.corner.classic .path-dot,
.row-meta.classic .path-dot {
  background: oklch(0.54 0.08 55);
}
.status-pill.available {
  color: var(--accent);
}
.status-pill.coming-soon,
.status-pill.planned {
  color: var(--ink-faint);
}
.read-card-ar {
  margin-top: 6px;
  color: var(--accent);
  direction: rtl;
  font-family: var(--arabic);
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.45;
}
.read-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.read-card p {
  margin: 0;
  color: var(--ink-mute);
  line-height: 1.5;
}
.source-lines {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.source-line,
.row-source {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.source-line span,
.row-source span {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.source-line strong,
.row-source strong {
  color: var(--ink-2);
  font-family: var(--arabic);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}
.read-card-foot {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.read-card-foot span {
  padding: 5px 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: oklch(0.98 0.006 78 / 0.70);
  color: var(--ink-faint);
  font-size: 11px;
}
.read-card-foot .complete {
  color: var(--accent);
}
.read-card .solid-btn,
.read-card .text-chip {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}
.more-coming {
  place-content: center;
  text-align: center;
  background: oklch(0.91 0.012 78 / 0.62);
  border: 0;
}
.mc-mark {
  font-family: var(--serif);
  font-size: 40px;
  color: var(--ink-faint);
  line-height: 0.7;
}
.mc-line {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-2);
}
.mc-sub {
  color: var(--ink-mute);
  font-size: 13px;
}
.read-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr 120px 84px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg);
}
.read-row.locked {
  background: oklch(0.935 0.010 78 / 0.70);
  color: var(--ink-mute);
}
.row-ar {
  font-family: var(--arabic);
  font-size: 28px;
  color: var(--accent);
  line-height: 1.4;
}
.row-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
}
.row-series {
  display: block;
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: 12px;
}
.row-source {
  margin-top: 5px;
}
.row-source strong {
  font-size: 16px;
}
.row-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.row-cta {
  justify-self: end;
  color: var(--ink-faint);
}
.row-cta button {
  color: var(--accent);
  font-weight: 600;
}
.lib-empty {
  padding: 44px 24px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  color: var(--ink-faint);
  font-family: var(--arabic);
  font-size: 26px;
  text-align: center;
}
.paths-pair {
  max-width: 980px;
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 12px;
}
.path-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: 0 18px 42px -38px oklch(0.20 0.02 60 / 0.38);
  animation: pageRise 0.42s ease both;
}
.path-card.story {
  border-top: 4px solid var(--accent);
}
.path-card.texts {
  border-top: 4px solid oklch(0.43 0.065 255);
}
.path-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -72px;
  inset-block-end: -86px;
  width: 178px;
  height: 178px;
  border: 1px solid oklch(0.72 0.04 65 / 0.28);
  border-radius: 50%;
}
.path-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.path-eyebrow {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.path-ar {
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 28px;
  line-height: 1;
}
.path-card.texts .path-ar {
  color: oklch(0.43 0.065 255);
}
.path-name {
  position: relative;
  z-index: 1;
  margin: 16px 0 8px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
}
.path-name[dir="rtl"] {
  font-family: var(--arabic);
  line-height: 1.35;
}
.path-desc {
  position: relative;
  z-index: 1;
  max-width: 42ch;
  margin: 0;
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.45;
}
.path-stats {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.path-stats div {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.path-stats .n {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.journey {
  max-width: 980px;
  margin: 0 auto;
}
.journey-headline {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.journey-headline h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}
.journey-headline h2 em {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}
.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
}
.swatch.now {
  background: var(--accent);
}
.tl-current-banner {
  margin: 18px 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid oklch(0.74 0.05 60 / 0.70);
  border-radius: 8px;
  background: oklch(0.95 0.025 75 / 0.72);
}
.tl-current-banner .stamp {
  padding: 1px 11px 3px;
  border-inline-start: 3px solid var(--accent);
  color: var(--accent);
  font-family: var(--arabic);
  font-size: 22px;
  line-height: 1.2;
}
.tl-current-banner .lbl {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tl-current-banner .line {
  margin-top: 3px;
  color: var(--ink-2);
}
.timeline {
  position: relative;
  display: grid;
  gap: 13px;
  padding-bottom: 26px;
}
.timeline .spine {
  position: absolute;
  inset-block: 0 22px;
  inset-inline-start: 97px;
  width: 1px;
  background: linear-gradient(var(--accent) 0 38%, var(--rule) 38% 100%);
}
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 70px 30px 1fr;
  gap: 12px;
  align-items: start;
  animation: pageRise 0.42s ease both;
}
.tl-stage {
  padding-top: 16px;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  text-align: right;
}
.tl-node {
  position: relative;
  z-index: 1;
  padding-top: 14px;
  display: flex;
  justify-content: center;
}
.ring {
  width: 18px;
  height: 18px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
}
.tl-row.active .ring {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px oklch(0.72 0.06 60 / 0.16);
}
.tl-row.unlock .ring {
  border-color: oklch(0.43 0.065 255);
  box-shadow: 0 0 0 5px oklch(0.43 0.065 255 / 0.13);
}
.tl-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.tl-card:hover {
  border-color: oklch(0.72 0.04 60);
}
.tl-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tl-row.soon .tl-card {
  background: oklch(0.935 0.010 78 / 0.64);
}
.tl-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tl-head .lvl-no {
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
}
.tl-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
}
.tl-head .status {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-faint);
  background: var(--bg);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tl-row.active .status {
  color: var(--accent);
}
.tl-desc {
  margin: 6px 0 0;
  max-width: 68ch;
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.42;
}
.tl-unlock {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px dashed oklch(0.43 0.065 255 / 0.45);
  border-radius: 8px;
  color: oklch(0.35 0.065 255);
  background: oklch(0.93 0.018 255 / 0.35);
}
.tl-unlock span {
  font-family: var(--arabic);
  font-size: 18px;
  line-height: 1;
}
.tl-tracks {
  margin-top: 11px;
  display: grid;
  gap: 6px;
}
.tl-track {
  display: grid;
  grid-template-columns: auto 104px 1fr;
  gap: 6px;
  align-items: baseline;
}
.tl-track .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tl-track .label {
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tl-track .picks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ink-2);
  font-family: var(--arabic);
  font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .lvl-group,
  .read-card,
  .path-card,
  .tl-row,
  .library-plans {
    animation: none;
    transition: none;
  }
  .read-card:hover {
    transform: none;
  }
}

@media (max-width: 980px) {
  .continue-card,
  .mutun-horizon {
    grid-template-columns: 1fr;
  }
  .continue-action {
    min-width: 0;
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px dashed var(--rule);
    border-left: 0;
    display: flex;
    justify-content: flex-start;
  }
  .home-summary {
    grid-template-columns: 1fr;
  }
  .word-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .word-stat-strip div:last-child {
    grid-column: 1 / -1;
  }
  .home-hero,
  .home-grid,
  .word-study-board {
    grid-template-columns: 1fr;
  }
  .home-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-row { grid-template-columns: 1fr 1fr; }
  .row-meta,
  .read-row .status-pill,
  .row-cta { justify-self: start; }
}

@media (max-width: 720px) {
  .home-greet {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .home-date {
    text-align: center;
  }
  .home-greet h1,
  .words-hero h1 {
    font-size: 32px;
  }
  .continue-card,
  .upnext-row,
  .mutun-horizon {
    text-align: center;
  }
  .continue-action {
    justify-content: center;
  }
  .upnext-row {
    grid-template-columns: 1fr;
  }
  .upnext-row em,
  .mutun-horizon .text-btn {
    justify-self: center;
  }
  .mutun-horizon {
    justify-items: center;
  }
  .words-hero {
    text-align: center;
  }
  .words-hero p,
  .saved-words-intro {
    margin-right: auto;
    margin-left: auto;
  }
  .review-section-head,
  .saved-words-head,
  .saved-word-group-head {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .review-section-head div,
  .saved-words-head {
    justify-content: center;
  }
  .word-legend {
    justify-content: center;
  }
  .saved-word-tile {
    text-align: center;
  }
  .saved-word-open {
    grid-template-columns: auto auto;
    text-align: center;
  }
  .saved-word-open .en {
    grid-column: 1 / -1;
    text-align: center;
  }
  .info-page .page-hero,
  .about-lede,
  .about-points,
  .about-split,
  .about-build,
  .contact-panel {
    text-align: center;
  }
  .about-lede,
  .about-split,
  .about-build {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .about-lede p {
    font-size: 25px;
  }
  .about-points {
    grid-template-columns: 1fr;
  }
  .lib-toolbar,
  .lib-filters {
    justify-content: center;
  }
  .lib-search {
    margin-left: 0;
    width: 100%;
  }
  .paths-pair {
    grid-template-columns: 1fr;
  }
  .library-section-head,
  .library-detail-head {
    align-items: center;
    text-align: center;
    flex-direction: column;
  }
  .series-grid,
  .level-shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .series-card,
  .level-shelf-card {
    text-align: center;
  }
  .series-card-top,
  .series-actions,
  .level-shelf-top,
  .level-shelf-foot {
    justify-content: center;
    flex-wrap: wrap;
  }
  .detail-ar {
    text-align: center;
  }
  .lib-grid {
    grid-template-columns: 1fr;
  }
  .lvl-head,
  .journey-headline,
  .tl-current-banner,
  .tl-head {
    align-items: center;
    text-align: center;
  }
  .lvl-head,
  .journey-headline,
  .tl-head {
    flex-direction: column;
  }
  .lvl-meta,
  .tl-head .status {
    margin-left: 0;
  }
  .lvl-note {
    margin-left: 0;
    text-align: center;
  }
  .read-card {
    min-height: 240px;
    text-align: center;
  }
  .read-card-top,
  .read-card-foot {
    justify-content: center;
  }
  .read-card .solid-btn,
  .read-card .text-chip {
    justify-self: center;
  }
  .read-row {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .row-ar,
  .row-meta,
  .row-cta {
    justify-self: center;
  }
  .paths-pair {
    gap: 14px;
  }
  .path-card {
    padding: 18px 16px;
    text-align: center;
  }
  .path-top {
    justify-content: center;
    flex-wrap: wrap;
  }
  .tl-current-banner {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .timeline .spine {
    display: none;
  }
  .tl-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tl-stage,
  .tl-node {
    display: none;
  }
  .tl-card {
    padding: 16px 14px;
  }
  .tl-track {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .tl-track .picks {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .continue-card {
    padding: 20px 16px;
  }
  .continue-ar {
    font-size: 30px;
  }
  .continue-en {
    font-size: 18px;
  }
  .home-section-title {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .home-section-title div {
    width: 100%;
  }
  .word-stat-strip {
    grid-template-columns: 1fr;
  }
  .word-stat-strip div:last-child {
    grid-column: auto;
  }
  .saved-word-grid {
    grid-template-columns: 1fr;
  }
  .saved-word-tile {
    grid-template-columns: 1fr;
  }
  .saved-word-remove {
    min-height: 40px;
    border-top: 1px solid var(--rule-soft);
    border-left: 0;
  }
  .contact-panel a {
    font-size: 22px;
    overflow-wrap: anywhere;
  }
  .library-plans,
  .path-stats,
  .study-stat-grid,
  .series-grid,
  .level-shelf-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- story header ---------- */
.story-header {
  text-align: center;
  margin-bottom: 38px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.eyebrow .sep { color: var(--rule); }

.title-ar {
  font-family: var(--arabic);
  font-size: clamp(42px, 8vw, 66px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  direction: rtl;
}
.title-en {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--ink-mute);
  font-weight: 400;
}
.story-source {
  width: fit-content;
  max-width: min(680px, 100%);
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.story-source-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  direction: ltr;
  unicode-bidi: isolate;
}
.story-source-item span {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.story-source-item strong {
  color: var(--ink-2);
  font-family: var(--arabic);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.story-meta {
  margin-top: 22px;
  display: flex; justify-content: center; gap: 22px;
  flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.story-meta .meta-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

/* ---------- reading controls (compact) ---------- */
.controls {
  max-width: 720px;
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.5) inset;
}

.ctrl-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.controls > .ctrl-group:nth-child(1) { justify-self: start; }
.controls > .ctrl-group:nth-child(2) { justify-self: end; }

.vowel-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
}
.vowel-toggle button {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-mute);
  transition: color 0.18s ease;
  min-width: 64px;
}
.vowel-toggle button[aria-pressed="true"] {
  color: var(--ink);
  background: oklch(1 0 0 / 0.85);
  box-shadow: 0 1px 2px oklch(0.20 0.02 60 / 0.10);
}

.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12.5px;
  color: var(--ink-mute);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--rule); }
.icon-btn[aria-pressed="true"] {
  background: var(--ink);
  color: oklch(0.97 0.01 78);
  border-color: var(--ink);
}
.icon-btn .play-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: oklch(0.97 0.01 78);
}
.icon-btn .play-dot svg { width: 9px; height: 9px; }
.icon-btn .time { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.icon-btn[aria-pressed="true"] .time { color: oklch(0.78 0.008 78); }

/* ---------- aspirational no-vowels hint ---------- */
.vowel-hint {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-faint);
  min-height: 0;
  margin: 0 auto 28px;
  max-width: 540px;
  transition: opacity 0.25s, max-height 0.25s;
  overflow: hidden;
}
.vowel-hint:not(.show) { opacity: 0; max-height: 0; margin-bottom: 0; }
.vowel-hint.show { opacity: 1; max-height: 60px; }

/* ============================================================
   STORY BODY
   ============================================================ */
.story-column {
  direction: rtl;
  font-family: var(--arabic);
  font-size: var(--arabic-size);
  line-height: var(--arabic-line);
  color: var(--ink);
  text-align: right;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 118px;
}

.story-block {
  margin: 0 0 18px 0;
  position: relative;
}
.story-block:last-of-type { margin-bottom: 0; }

.story-break {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 34px auto 30px;
  max-width: 260px;
}
.story-break::before,
.story-break::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}
.story-break span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.64;
}

.sentence {
  display: block;
  margin: 0;
  padding: 0;
}
.sentence + .sentence { margin-top: 2px; }

.sentence.pull {
  text-align: center;
  font-size: calc(var(--arabic-size) * 1.18);
  margin: 22px 0 22px;
  padding: 10px 0;
  position: relative;
}
.sentence.pull::before,
.sentence.pull::after {
  content: ""; display: block; width: 56px; height: 1px;
  background: var(--rule); margin: 0 auto;
}
.sentence.pull::before { margin-bottom: 14px; }
.sentence.pull::after  { margin-top: 14px; }

/* ---------- per-block English reveal ---------- */
.block-tools {
  direction: ltr;
  position: absolute;
  top: 0.95em;
  right: -190px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 1;
}
.reveal-en {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.51 0.014 75);
  min-width: 48px;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  opacity: 0.68;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.reveal-en:hover {
  color: var(--accent);
  background: oklch(0.95 0.018 75 / 0.72);
  border-color: var(--rule);
  opacity: 1;
}
.reveal-en .chev {
  display: inline-block; transition: transform 0.2s ease;
  font-size: 15px; line-height: 1;
  transform-origin: center;
}
.reveal-en[aria-expanded="true"] {
  color: var(--accent);
  background: oklch(0.94 0.020 75 / 0.82);
  border-color: var(--rule);
  opacity: 1;
}
.reveal-en[aria-expanded="true"] .chev { transform: rotate(-90deg); }

.block-en {
  direction: ltr;
  text-align: left;
  position: static;
  align-self: stretch;
  width: auto;
  margin: 0;
  padding: 10px 11px 10px 12px;
  border-left: 2px solid var(--accent);
  background: oklch(0.965 0.012 78 / 0.94);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  border-radius: 0 7px 7px 0;
  box-shadow: 0 10px 24px oklch(0.42 0.03 70 / 0.08);
  animation: blockEnIn 0.22s ease;
}
@keyframes blockEnIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- words ---------- */
.w {
  /* default — non-curated word. Selectable but no decoration. */
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.w:hover {
  background: oklch(0.92 0.018 70 / 0.7);
}
.w.key-vocab {
  border-bottom: 1px dotted oklch(0.55 0.05 55 / 0.45);
}
.w.key-vocab:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.w.active {
  color: var(--accent) !important;
  background: var(--accent-bg-2) !important;
  border-bottom-color: var(--accent);
  padding: 0 2px;
  margin: 0 -2px;
}
.w.saved-mark {
  position: relative;
}
.w.saved-mark::after {
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent); border-radius: 50%;
}
.w.root-hl {
  background: var(--accent-bg);
  padding: 0 2px; margin: 0 -2px;
  border-radius: 3px;
}

/* punctuation/space pass-through */
.t { display: inline; }

/* ============================================================
   FAIDAH
   ============================================================ */
.faida {
  margin: 80px auto 0;
  max-width: 720px;
  text-align: center;
  padding: 40px 32px 44px;
  background: linear-gradient(180deg, var(--bg-2), oklch(0.93 0.025 75));
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
}
.faida::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 3px; background: var(--accent);
}
.faida .label {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.faida .ar {
  font-family: var(--arabic);
  direction: rtl;
  font-size: clamp(22px, 4.4vw, 28px);
  line-height: 2;
  color: var(--ink);
}
.faida .en {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2.4vw, 19px);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { margin-top: 88px; }
.section-eyebrow {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4.4vw, 32px);
  font-weight: 500;
  margin: 0 0 28px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.section-title em { font-style: italic; }
.section-intro {
  color: var(--ink-mute);
  max-width: 540px;
  margin: -16px 0 28px;
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- saved words tray ---------- */
.saved-tray {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.saved-tray .empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.saved-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--arabic);
  font-size: 19px;
  color: var(--ink);
  direction: rtl;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.saved-chip:hover { border-color: var(--accent); background: var(--bg); }
.saved-chip .x {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-faint);
  padding: 0 4px;
}
.saved-chip .x:hover { color: var(--ink); }
.saved-chip .gloss {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-mute);
  direction: ltr;
}

/* ============================================================
   PATTERNS
   ============================================================ */
.noticed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.noticed-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.noticed-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.noticed-card {
  background: var(--bg);
  padding: 24px 24px 26px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.noticed-card .ar {
  font-family: var(--arabic);
  direction: rtl;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.6;
}
.noticed-card h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  font-style: italic;
}
.noticed-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.65;
}
.pattern-line {
  font-family: var(--arabic);
  font-size: 20px;
  line-height: 1.8;
  color: var(--accent);
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.pattern-swaps {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.pattern-swaps span {
  font-family: var(--arabic);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ============================================================
   QUESTION CARD CAROUSEL
   ============================================================ */
.quiz-shell {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.quiz-progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
  white-space: nowrap;
}
.quiz-progress .dots { display: flex; gap: 6px; }
.quiz-progress .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.quiz-progress .dot.cur { background: var(--accent); transform: scale(1.15); }
.quiz-progress .dot.done { background: var(--ink-faint); }

.quiz-stage {
  position: relative;
  perspective: 1600px;
  min-height: 440px;
  touch-action: pan-y;
}

/* side arrows */
.quiz-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
  font-size: 18px;
}
.quiz-arrow:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--ink-faint);
  background: var(--bg);
}
.quiz-arrow.prev { left: -68px; }
.quiz-arrow.next { right: -68px; }
.quiz-arrow:disabled { opacity: 0.30; cursor: default; }
.quiz-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 36px 32px 28px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.6,.2,.3,1);
  box-shadow: 0 12px 32px -20px oklch(0.20 0.02 60 / 0.25);
}
.quiz-card.flipped { transform: rotateY(180deg); }
.quiz-face {
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.quiz-face.back {
  position: absolute;
  inset: 36px 32px 28px;
  transform: rotateY(180deg);
}
.q-num {
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.q-prompt {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 26px);
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 24px;
  max-width: 36ch;
}
.q-options {
  display: grid; gap: 8px;
}
.q-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  text-align: left;
  font-size: 15px;
  color: var(--ink-2);
  width: 100%;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.q-opt:hover { border-color: var(--ink-faint); color: var(--ink); transform: translateX(2px); }
.q-opt .letter {
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  width: 16px;
}

/* back face content */
.q-back-verdict {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  margin: 0 0 6px;
}
.q-back-verdict.correct { color: var(--accent); }
.q-back-verdict.wrong   { color: oklch(0.45 0.12 28); }
.q-back-line {
  font-size: 13.5px; color: var(--ink-mute);
  margin-bottom: 14px;
}
.q-back-ar {
  font-family: var(--arabic);
  direction: rtl;
  font-size: 24px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 16px;
}
.q-back-why {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.q-back-next {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: oklch(0.97 0.01 78);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.q-back-next:hover { background: oklch(0.28 0.018 60); }



.quiz-complete {
  text-align: center;
  padding: 56px 24px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-2);
}
.quiz-complete .score {
  font-family: var(--serif);
  font-size: 56px;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 6px;
}
.quiz-complete .lbl {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.quiz-complete .msg {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  max-width: 28ch;
  margin: 0 auto;
  line-height: 1.4;
}
.quiz-complete .restart {
  margin-top: 24px;
  font-size: 12.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
}
.quiz-complete .restart:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ============================================================
   TOMORROW
   ============================================================ */
.reading-nav-rail {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.reading-nav-card {
  min-height: 168px;
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.reading-nav-card.previous {
  text-align: left;
}
.reading-nav-card.next {
  text-align: right;
}
.reading-nav-card.muted {
  justify-content: center;
  color: var(--ink-faint);
  background: transparent;
}
.reading-nav-card .promise .label,
.reading-nav-card > .label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.reading-nav-card .promise-ar {
  font-family: var(--arabic);
  direction: rtl;
  font-size: 23px;
  color: var(--accent);
  line-height: 1.6;
  margin-bottom: 4px;
}
.reading-nav-card .promise-en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-mute);
  line-height: 1.4;
  max-width: 36ch;
}
.reading-nav-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.reading-nav-card .next-actions {
  display: grid;
  justify-items: inherit;
  gap: 12px;
}
.reading-nav-card.end-of-series {
  background: transparent;
}

/* ============================================================
   WORD PANEL
   Desktop: floating card pinned bottom-right
   Mobile: slides up from bottom as a sheet
   ============================================================ */
.word-panel-scrim {
  display: none; /* only on mobile */
  position: fixed; inset: 0;
  background: oklch(0.20 0.02 60 / 0.18);
  z-index: 45;
  animation: scrimIn 0.18s ease;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.word-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 360px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px oklch(0.20 0.02 60 / 0.30);
  padding: 22px 22px 18px;
  z-index: 50;
  animation: panelInDesk 0.22s cubic-bezier(.6,.2,.3,1);
  max-width: calc(100vw - 32px);
}
@keyframes panelInDesk {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wp-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
}
.wp-ar {
  font-family: var(--arabic);
  direction: rtl;
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
}
.wp-close {
  font-size: 18px;
  color: var(--ink-faint);
  padding: 4px 8px;
  margin: -4px -8px -4px 0;
}
.wp-close:hover { color: var(--ink); }

.wp-en {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.3;
}
.wp-empty-en {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faint);
  line-height: 1.4;
}

.wp-root {
  margin-top: 16px;
  display: flex; align-items: center; gap: 10px;
}
.wp-root .lbl {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
}
.wp-root .letters {
  font-family: var(--arabic); direction: rtl;
  font-size: 19px; color: var(--accent);
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: oklch(0.55 0.05 55 / 0.4);
}
.wp-root .letters:hover { text-decoration-color: var(--accent); }
.wp-root .meaning {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink-mute);
}

.wp-related {
  margin-top: 12px;
}
.wp-related .lbl {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.wp-related-row {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-family: var(--arabic); direction: rtl;
  font-size: 18px;
}
.wp-related-row span {
  cursor: pointer; color: var(--ink-2);
  border-bottom: 1px dotted var(--rule);
  transition: color 0.15s, border-color 0.15s;
}
.wp-related-row span:hover { color: var(--accent); border-bottom-color: var(--accent); }
.wp-related-row span.current { color: var(--accent); border-bottom-color: var(--accent); }

.wp-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
}

.wp-context {
  margin-top: 16px;
  padding: 14px 14px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
}
.wp-context .lbl {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.ctx-ar {
  font-family: var(--arabic);
  font-size: 19px;
  line-height: 1.9;
  color: var(--ink-2);
}
.ctx-hit {
  color: var(--accent);
  background: var(--accent-bg-2);
  border-radius: 3px;
  padding: 0 2px;
}
.ctx-en {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-mute);
}

.wp-actions {
  margin-top: 16px;
  display: flex; gap: 10px;
}
.wp-actions button {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.wp-actions button:hover { border-color: var(--ink-faint); color: var(--ink); }
.wp-actions button.primary {
  background: var(--ink);
  color: oklch(0.97 0.01 78);
  border-color: var(--ink);
}
.wp-actions button.primary:hover { background: oklch(0.28 0.018 60); border-color: oklch(0.28 0.018 60); }
.wp-actions button.saved {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: oklch(0.55 0.05 55 / 0.40);
}

.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 36px 44px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-mute);
}
.footer-brand {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "logo name"
    "logo line";
  column-gap: 11px;
  align-items: center;
}
.footer-brand img {
  grid-area: logo;
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: 0.9;
}
.site-footer strong {
  grid-area: name;
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
}
.site-footer p {
  grid-area: line;
  margin: 4px 0 0;
}
.site-footer nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer button,
.site-footer a {
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-footer button:hover,
.site-footer a:hover {
  color: var(--accent);
}

/* ============================================================
   AUDIO BAR
   ============================================================ */
.audio-bar {
  position: fixed; left: 50%;
  transform: translateX(-50%) translateY(20px);
  bottom: 22px;
  width: min(640px, calc(100vw - 32px));
  background: oklch(0.20 0.015 60);
  color: oklch(0.96 0.01 78);
  border-radius: 999px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 24px 60px -20px oklch(0 0 0 / 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 40;
}
.audio-bar.visible {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.audio-bar .play-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: oklch(0.97 0.01 78);
  display: inline-flex; align-items: center; justify-content: center;
}
.audio-bar .progress {
  flex: 1; height: 3px; background: oklch(0.35 0.015 60); border-radius: 3px;
  position: relative; overflow: hidden;
}
.audio-bar .progress > div {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent); width: 0%;
  transition: width 0.1s linear;
}
.audio-bar .time {
  font-size: 12px; color: oklch(0.78 0.008 78);
  font-variant-numeric: tabular-nums; min-width: 72px;
  text-align: right;
}
.audio-bar .close {
  font-size: 16px; color: oklch(0.78 0.008 78);
  padding: 4px 6px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .masthead-inner { flex-wrap: wrap; justify-content: center; }
  .wordmark { margin-right: auto; }
  .mast-right { margin-left: auto; }
  .product-nav { order: 3; width: 100%; justify-content: center; overflow-x: auto; }
  .controls { margin-left: 0; margin-right: 0; }
  .story-column {
    padding-right: 0;
  }
  .story-block {
    margin-bottom: 16px;
  }
  .block-tools {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    gap: 8px;
    margin-top: -2px;
    margin-bottom: 10px;
  }
  .reveal-en {
    font-size: 10px;
    padding: 3px 7px;
  }
  .block-en {
    position: static;
    align-self: stretch;
    width: auto;
    margin: 0 0 10px;
    padding: 10px 12px 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    font-size: 14.5px;
    color: var(--ink-faint);
  }
  .quiz-arrow.prev { left: -8px; }
  .quiz-arrow.next { right: -8px; }
  .noticed-grid { grid-template-columns: 1fr; }
  .library-feature,
  .library-level-head,
  .path-tracks,
  .path-summary {
    grid-template-columns: 1fr;
  }
  .reading-card-grid { grid-template-columns: 1fr; }
  .level-facts { min-width: 0; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  :root {
    --arabic-size: 22px;
    --arabic-line: 2.25;
  }
  .masthead-inner { padding: 12px 18px; }
  .mast-right { font-size: 10.5px; gap: 10px; }
  .mast-right .pill { display: none; }
  .wordmark-name { font-size: 14.5px; }

  .page { padding: 36px 18px 140px; }
  .app-page { padding-top: 42px; }
  .home-page { padding-top: 28px; }
  .home-hero {
    text-align: center;
  }
  .home-hero h1 {
    font-size: 32px;
  }
  .home-actions {
    grid-template-columns: 1fr;
  }
  .home-action,
  .home-card,
  .word-study-main {
    text-align: center;
  }
  .home-next,
  .site-footer {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .site-footer {
    padding: 24px 18px 36px;
  }
  .site-footer nav {
    justify-content: center;
  }
  .product-nav {
    justify-content: flex-start;
    border-radius: 14px;
  }
  .product-nav button { padding: 0 10px; }
  .page-hero { margin-bottom: 24px; }
  .app-page .page-hero h1 { font-size: 32px; }
  .stats-row { grid-template-columns: 1fr; }
  .stats-row > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stats-row > div:last-child { border-bottom: 0; }
  .auth-panel,
  .auth-panel.signed-in {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .auth-actions {
    justify-content: center;
  }
  .subtabs { overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .review-card { padding: 24px 18px; }
  .review-topline,
  .word-list-main,
  .reading-group,
  .journey-head,
  .library-feature,
  .library-level-head {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .review-topline { display: grid; gap: 4px; }
  .rating-row { grid-template-columns: repeat(2, 1fr); }
  .word-list-main { align-items: center; }
  .word-list-meta { text-align: center; }
  .mini-word-row { justify-content: center; }
  .library-feature { justify-items: center; padding: 18px 16px; }
  .feature-meta { justify-content: center; }
  .library-overview { grid-template-columns: 1fr; }
  .library-level { padding: 20px 16px; }
  .level-facts { grid-template-columns: 1fr; }
  .reading-card-top,
  .journey-head,
  .journey-actions {
    justify-content: center;
  }
  .library-reading-card .solid-btn,
  .library-reading-card .text-btn,
  .library-reading-card .text-chip {
    justify-self: center;
  }
  .journey-map::before { display: none; }
  .journey-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; width: 100%; }
  .journey-body { padding: 22px 18px; width: 100%; max-width: 100%; overflow-wrap: anywhere; }
  .journey-support { white-space: normal; }
  .journey-facts { justify-content: center; }
  .story-meta { gap: 14px; font-size: 10.5px; }
  .story-meta .meta-num { font-size: 14px; }

  .controls {
    grid-template-columns: 1fr;
    border-radius: 14px;
    padding: 12px;
    gap: 8px;
  }
  .controls > .ctrl-group { justify-self: stretch !important; justify-content: center; flex-wrap: wrap; }
  .vowel-toggle button { min-width: 0; padding: 6px 12px; }

  .faida { padding: 28px 20px; }
  .section { margin-top: 64px; }

  .quiz-stage { min-height: 480px; }
  .quiz-card { padding: 28px 22px 22px; }
  .quiz-face.back { inset: 28px 22px 22px; }
  .q-prompt { font-size: 21px; }
  .quiz-arrow { width: 38px; height: 38px; }
  .quiz-arrow.prev { left: -4px; }
  .quiz-arrow.next { right: -4px; }

  .reading-nav-rail {
    grid-template-columns: 1fr;
    margin-top: 68px;
  }
  .reading-nav-card,
  .reading-nav-card.next,
  .reading-nav-card.previous {
    min-height: auto;
    text-align: left;
  }
  .reading-nav-card .num { text-align: left; white-space: normal; }
  .reading-nav-card .next-actions { justify-items: start; }

  /* word panel becomes a bottom sheet */
  .word-panel-scrim { display: block; }
  .word-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding: 22px 20px 28px;
    animation: panelInMob 0.24s cubic-bezier(.6,.2,.3,1);
    max-height: 78vh;
    overflow-y: auto;
  }
  @keyframes panelInMob {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* sheet grabber */
  .word-panel::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    background: var(--rule);
    border-radius: 999px;
    margin: -8px auto 14px;
  }
  .audio-bar { bottom: 18px; }
}