/* ==========================================================================
   فهيم — Reading dashboard
   Layout after a classic admin dashboard (sidebar · main · side rail), dressed
   in the homepage's sketchbook system: cream paper, white cards with pencil
   borders, forest ink, yellow highlighter, sticky-note pastels.
   Motion rule still applies: only shapes animate (chart lines, bars, donut).
   ========================================================================== */

.dash-body { background: var(--canvas); }

.app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) 312px;   /* RTL: sidebar sits on the right */
  gap: var(--s-24);
  max-width: 1560px; margin-inline: auto;
  padding: var(--s-16) var(--s-24) var(--s-48);
  align-items: start;
}

/* ---------- Sidebar ---------- */
.side {
  position: sticky; top: var(--s-16);
  height: calc(100vh - 2 * var(--s-16)); min-height: 560px;
  display: flex; flex-direction: column; gap: var(--s-24);
  padding: var(--s-24) var(--s-16);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel);
}
.side__logo { padding-inline: 8px; }
.side__nav { display: grid; gap: 2px; overflow-y: auto; }
.side__label { margin: var(--s-16) 10px 6px; font-size: 11px; font-weight: var(--w-semibold); color: var(--faint); letter-spacing: .02em; }
.side__label:first-child { margin-top: 0; }
.side__nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-size: var(--text-sm); color: var(--ink-2);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.side__nav a .icon { width: 19px; height: 19px; color: var(--muted); transition: color var(--dur-fast); }
.side__nav a:hover { background: var(--lilac); color: var(--ink); }
.side__nav a.is-active { background: var(--highlight); color: var(--ink); font-weight: var(--w-semibold); }
.side__nav a.is-active .icon { color: var(--ink); }
/* sections that aren't built yet: visibly not like the others, before anyone clicks */
.side__nav a.is-soon { color: var(--muted); }
.side__soon { margin-inline-start: auto; font-size: 10.5px; font-weight: var(--w-semibold); padding: 1px 8px; border-radius: var(--r-pill); border: 1px dashed var(--border-strong); color: var(--muted); white-space: nowrap; }

.side__streak {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--r-card);
  background: var(--canvas); border: 1px dashed var(--border-strong);
}
.side__streak b { display: block; font-size: 16px; font-weight: var(--w-display); line-height: 1.3; }
.side__streak span { font-size: 12px; color: var(--muted); }
.streak-flame { width: 34px; height: 34px; flex: none; fill: var(--highlight); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }

/* ---------- Header ---------- */
.main { min-width: 0; display: grid; gap: var(--s-24); }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); padding-top: 6px; flex-wrap: wrap; }
.dash-title { font-size: 30px; line-height: 1.3; font-weight: var(--w-display); }
.dash-sub { color: var(--muted); font-size: var(--text-sm); margin-top: 2px; }
.dash-tools { display: flex; align-items: center; gap: 10px; }
.dash-search {
  display: flex; align-items: center; gap: 8px; height: 42px; width: 260px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--muted);
}
.dash-search:focus-within { border-color: var(--ink); }
.dash-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--ink); }
.dash-search input::placeholder { color: var(--faint); }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink);
  transition: border-color var(--dur-fast);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn__dot { position: absolute; top: 9px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); border: 2px solid var(--surface); }
.avatar--lg { width: 42px; height: 42px; font-size: 16px; border: 1px solid var(--border-strong); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  padding: var(--s-24);
}
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--s-24); }
.card__head--wrap { flex-wrap: wrap; }
.card__title { font-size: 18px; line-height: 1.4; font-weight: var(--w-display); }
.card__title--sm { font-size: 16px; }
.card__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.card__sub:empty, .dash-sub:empty { display: none; }   /* a sub-line a script left empty takes no room */

/* ---------- KPI cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-16); }
.kpi {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  padding: 18px 20px 0; display: flex; flex-direction: column; min-height: 168px;
}
.kpi--band { background: var(--highlight-soft); border-color: var(--border-strong); }
.kpi__label { font-size: 13px; color: var(--muted); }
.kpi--band .kpi__label, .kpi--band .kpi__meta { color: var(--ink-2); }
.kpi__row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.kpi__value { font-size: 32px; line-height: 1.2; font-weight: var(--w-display); }
.kpi__delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: var(--w-semibold); padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--ink); white-space: nowrap; }
.kpi__delta .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.kpi__delta--bad { background: #fbe1d3; color: var(--terracotta); }
.kpi--band .kpi__delta { background: rgba(255,255,255,.6); }
.kpi__meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.spark { display: block; width: calc(100% + 40px); height: 46px; margin: auto -20px 0; }
.spark .spark__area { stroke: none; }
.spark .spark__line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Trend chart ---------- */
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend__line { width: 18px; height: 0; border-top: 2.5px solid var(--ink); border-radius: 2px; }
.legend__line--target { border-top: 2px dashed var(--terracotta); }
.trend { display: block; width: 100%; height: auto; overflow: visible; }
.trend .grid line { stroke: var(--border); stroke-dasharray: 3 5; }
.trend .axis text { font-family: var(--font); font-size: 12px; fill: var(--faint); }
.trend .target line { stroke: var(--terracotta); stroke-width: 1.6; stroke-dasharray: 6 6; }
.trend .target text { font-family: var(--font); font-size: 12px; fill: var(--terracotta); font-weight: 600; }
.trend .area { fill: var(--tint-violet); opacity: .55; }
.trend .line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.trend .dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.trend .dot--last { fill: var(--highlight); }
.trend .bubble rect { fill: var(--ink); }
.trend .bubble text { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--highlight); }

/* ---------- Two-up row ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }

/* Question types */
.types { display: grid; gap: 16px; }
.types li { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 6px 12px; align-items: center; }
.types__name { font-size: var(--text-sm); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.types__name .ltr { font-size: 13px; }
.types__weak { font-size: 11px; font-weight: var(--w-semibold); color: var(--terracotta); background: #fbe1d3; border-radius: var(--r-pill); padding: 1px 8px; }
.types__pct { grid-row: span 2; text-align: end; font-weight: var(--w-display); font-size: 15px; }
.types .bar { height: 10px; background: var(--lilac); }
.types .bar > span { background: var(--c, var(--ink)); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23, 25, 23, .35); }

/* Reasons donut */
.reasons { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); justify-items: center; }
.reasons__legend { width: 100%; }
.donut { width: 132px; height: 132px; }
.donut circle { fill: none; stroke-width: 22; }
.donut .donut__track { stroke: var(--lilac); }
.donut .donut__seg { transition: stroke-dasharray 1.1s cubic-bezier(.45, .05, .25, 1); transition-delay: var(--delay, 0s); }
.donut text { font-family: var(--font); text-anchor: middle; fill: var(--ink); }
.reasons__legend { display: grid; gap: 10px; }
.reasons__legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.reasons__legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(23, 25, 23, .45); }
.reasons__legend b { font-weight: var(--w-semibold); color: var(--ink); }

/* ---------- Library ---------- */
/* segmented switch (still used by signin.html) */
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--canvas); border: 1px solid var(--border-strong); border-radius: 10px; }
.seg button { border: 0; background: none; padding: 7px 16px; border-radius: 7px; font-size: var(--text-sm); color: var(--muted); transition: background-color var(--dur-fast), color var(--dur-fast); }
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--ink); color: var(--on-accent); }

/* Mode cards: learn → practice → exam, read right to left as a path */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-24); border: 0; padding: 0; margin: 0 0 var(--s-24); min-width: 0; }
.mode {
  position: relative; display: grid; gap: 10px; align-content: start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.mode:hover { border-color: var(--ink); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode:has(input:checked) { background: var(--accent-soft); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* the arrow between cards: points toward the next step (inline-end = left in RTL) */
.mode:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-end: -17px; top: 50%; width: 10px; height: 10px;
  border-top: 1.8px solid var(--faint); border-left: 1.8px solid var(--faint); transform: translateY(-50%) rotate(-45deg);
}
[dir="ltr"] .mode:not(:last-child)::after { transform: translateY(-50%) rotate(135deg); }

.mode__head { display: flex; align-items: center; gap: 10px; }
.mode__icon { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--tile, var(--lilac)); }
.mode__icon .icon { width: 18px; height: 18px; }
.mode--learn { --tile: var(--tint-violet); }
.mode--practice { --tile: var(--tint-cyan); }
.mode--exam .mode__icon { background: var(--ink); color: var(--highlight); }
.mode__name { display: block; font-size: 16px; font-weight: var(--w-display); line-height: 1.3; }
.mode__tag { display: block; font-size: 12.5px; color: var(--muted); }
.mode__rec { display: none; position: absolute; top: -10px; inset-inline-end: 12px; font-size: 11px; font-weight: var(--w-semibold); background: var(--highlight); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 0 8px; white-space: nowrap; }
.mode.is-rec .mode__rec { display: inline-block; }

.mode__facts { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.mode__facts > span { display: flex; align-items: center; gap: 6px; }
.mode__facts .icon { width: 14px; height: 14px; color: var(--muted); }

/* how much the session counts toward the band: the one difference people miss */
.mode__count { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-top: 10px; border-top: 1.5px dashed var(--border); font-size: 12px; color: var(--muted); }
.mode__count i { height: 6px; border-radius: var(--r-pill); background: var(--lilac); border: 1px solid var(--border-strong); position: relative; overflow: hidden; }
.mode__count i::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p) * 100%); background: var(--ink); }
.modes-why { margin: calc(var(--s-24) * -0.5) 0 var(--s-24); font-size: 13px; color: var(--ink-2); }
.modes-why b { font-weight: var(--w-semibold); color: var(--ink); background: linear-gradient(transparent 60%, var(--highlight) 60%); }
.mode__count b { font-size: 13px; font-weight: var(--w-display); color: var(--ink); min-width: 3ch; text-align: end; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-16); }
.chip { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-pill); padding: 5px 14px; font-size: 13px; color: var(--ink-2); transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }

.lib { display: grid; }
.lib li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 104px; gap: 16px; align-items: center;
  padding: 14px 4px; border-top: 1.5px dashed var(--border);
}
.lib li:first-child { border-top: 0; }
.lib li[hidden] { display: none; }
.lib__icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--tile, var(--lilac)); font-size: 12px; font-weight: var(--w-display); direction: ltr; }
.lib__title { font-size: 15px; font-weight: var(--w-semibold); direction: ltr; text-align: right; }
.lib__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lib__rec { display: inline-block; font-size: 11px; font-weight: var(--w-semibold); background: var(--highlight); color: var(--ink); border-radius: var(--r-pill); padding: 1px 8px; margin-inline-start: 6px; vertical-align: middle; }
.lib__retake { display: inline-block; font-size: 11px; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--r-pill); padding: 0 8px; margin-inline-start: 6px; vertical-align: middle; }
.lib__types { display: flex; flex-wrap: wrap; gap: 6px; }
.lib__types span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--r-pill); background: var(--canvas); border: 1px solid var(--border); color: var(--ink-2); direction: ltr; }
.lib__status { font-size: 12px; color: var(--muted); text-align: center; }
.lib__status b { display: block; font-size: 14px; color: var(--ink); font-weight: var(--w-display); }
.lib__status--doing b { color: var(--terracotta); }
.lib .btn { min-height: 36px; padding: 8px 14px; font-size: 13px; width: 100%; }

/* ---------- Left rail ---------- */
.rail { position: sticky; top: var(--s-16); display: grid; gap: var(--s-24); }
.next {
  background: var(--tint-violet); border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  padding: var(--s-24); display: grid; gap: 12px; justify-items: start;
}
.next__title { font-size: 19px; line-height: 1.45; font-weight: var(--w-display); }
.next__text { font-size: var(--text-sm); color: var(--ink-2); }
.next__meta { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); }
.next__meta b { font-size: 14px; font-weight: var(--w-semibold); color: var(--ink); direction: ltr; unicode-bidi: isolate; text-align: right; }
.next .btn { margin-top: 4px; }
/* what the suggestion is based on: the student's own numbers */
.next__basis { width: 100%; display: grid; gap: 6px; padding: 10px 12px; background: rgba(255, 255, 255, .55); border: 1px dashed rgba(23, 25, 23, .35); border-radius: 10px; }
.next__basis > b { font-size: 12px; font-weight: var(--w-semibold); color: var(--ink-2); }
.next__basis ul { display: grid; gap: 4px; }
.next__basis li { position: relative; padding-inline-start: 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.next__basis li::before { content: ""; position: absolute; inset-inline-start: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.next__basis:has(ul:empty) { display: none; }

/* top of the main column: next step (+ a half-done passage) before the numbers */
.start { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
.start:has(.resume:not([hidden])) { grid-template-columns: minmax(0, 1fr) 280px; }
.start .next__text { max-width: 68ch; }
.start .next__basis { max-width: 640px; }
.resume { display: grid; gap: 8px; align-content: start; align-self: start; justify-items: start; }
.resume[hidden] { display: none; }
.resume__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: var(--w-semibold); color: var(--ink-2); }
.resume__eyebrow .icon { width: 17px; height: 17px; }
.resume__title { font-size: 15px; line-height: 1.5; font-weight: var(--w-display); }
.insights-h { display: grid; gap: 2px; padding-top: var(--s-8, 8px); }

/* «؟» beside the band → what it's based on */
.kpi__why { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-start: 4px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.kpi__why[hidden] { display: none; }
.why-pop { width: min(440px, calc(100vw - 32px)); padding: 20px 22px; border: 1px solid var(--border-strong); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.why-pop:popover-open { display: grid; gap: 12px; justify-items: start; }
.why-pop::backdrop { background: rgba(23, 25, 23, .25); }
.why-pop ul { display: grid; gap: 8px; }
.why-pop li { position: relative; padding-inline-start: 14px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.why-pop li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

.goal__row { display: flex; align-items: center; gap: 14px; }
.goal__days { width: 60px; height: 60px; flex: none; border-radius: 10px; background: var(--highlight); border: 1px solid var(--border-strong); display: grid; place-content: center; text-align: center; line-height: 1.1; }
.goal__days b { font-size: 22px; font-weight: var(--w-display); }
.goal__days small { font-size: 10px; }
.goal__bar { margin-top: var(--s-24); display: grid; gap: 8px; }
.goal__labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.goal__labels b { color: var(--ink); font-weight: var(--w-display); }
.bar--goal { height: 10px; }
/* band scale (goal cards): fill = current band, notch = target, whole bands underneath */
.bscale { display: grid; gap: 4px; }
.bscale__track { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--canvas); border: 1px solid var(--border-strong); }
.bscale__fill { position: absolute; inset-block: -1px; inset-inline-start: -1px; border-radius: var(--r-pill); background: var(--ink); }
.bscale__target { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-inline-start: -1.5px; border-radius: 2px; background: var(--terracotta); }
.bscale__ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bscale__key { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 3px; background: var(--ink); vertical-align: -1px; }
.bscale__key--target { width: 3px; height: 12px; border-radius: 2px; background: var(--terracotta); vertical-align: -2px; }
.bchange { font-weight: var(--w-semibold); }
.bchange--up { color: var(--ink); }
.bchange--down { color: var(--terracotta); }

.vocab { display: grid; gap: 10px; }
.vocab li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--canvas); }
.vocab b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; direction: ltr; }
.vocab span { font-size: 13px; color: var(--muted); }

.activity { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.activity li { position: relative; padding-inline-start: 22px; padding-bottom: 16px; }
.activity li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.activity li::after { content: ""; position: absolute; inset-inline-start: 8px; top: 20px; bottom: 0; border-inline-start: 1.5px dashed var(--border-strong); }
.activity li:last-child { padding-bottom: 0; }
.activity li:last-child::after { display: none; }
.activity li.is-exam::before { background: var(--highlight); }
.activity b { display: block; font-size: 13px; font-weight: var(--w-semibold); }
.activity b .ltr { direction: ltr; }
.activity span { font-size: 12px; color: var(--muted); }

/* ---------- Shape animations (text never animates) ---------- */
:where(.js) .draw { stroke-dasharray: calc(var(--len, 3000) * 1px); stroke-dashoffset: calc(var(--len, 3000) * 1px); }
.is-ready .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.45, .05, .25, 1) var(--delay, 0s); }
:where(.js) .fade-shape { opacity: 0; }
.is-ready .fade-shape { opacity: 1; transition: opacity .6s ease-out var(--delay, .9s); }
.types .bar > span, .bar--goal > span { transform-origin: right center; transform: scaleX(0); }
.is-ready .types .bar > span, .is-ready .bar--goal > span { transform: none; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, .2s); }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .rail { grid-column: 2; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib li { grid-template-columns: 44px minmax(0, 1fr) 88px 96px; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s-16); }
  .side { position: static; height: auto; min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; }
  .side__nav { display: flex; overflow-x: auto; gap: 4px; flex: 1 1 100%; order: 3; scrollbar-width: none; }
  .side__nav::-webkit-scrollbar { display: none; }
  .side__nav a { white-space: nowrap; padding: 8px 12px; }
  .side__label { display: none; }
  .side__streak { margin: 0 0 0 auto; margin-inline-start: auto; padding: 8px 12px; }
  .rail { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .start:has(.resume:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .dash-search { width: 100%; }
  .dash-tools { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  /* phones: one sideways row, the next card peeking so it reads as "swipe" */
  section#library { min-width: 0; }                        /* grid item: let the scrolling row shrink instead of widening the page */
  .modes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 12px 2px 4px; margin-inline: -2px;            /* room for the «مقترح لك» sticker and the focus ring */
  }
  .modes::-webkit-scrollbar { display: none; }
  .mode { flex: 0 0 80%; scroll-snap-align: center; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { min-height: 150px; padding: 14px 14px 0; }
  .kpi__row { flex-wrap: wrap; gap: 4px 8px; }
  .kpi__value { font-size: 24px; }
  .kpi__meta { font-size: 11px; }
  .spark { width: calc(100% + 28px); margin-inline: -14px; }
  .trend .axis text, .trend .target text { font-size: 22px; }   /* chart scales down ~45% on phones */
  .trend .bubble text { font-size: 22px; }
  .reasons { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  /* passage rows: icon + full-width title on top, status and button on a second line */
  .lib li[data-status] { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px 12px; }
  .lib li[data-status] > .lib__icon { grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; }
  .lib li[data-status] > div:not(.lib__types) { grid-column: 2 / -1; }
  .lib li[data-status] > .lib__status { grid-column: 2; grid-row: 2; display: flex; align-items: baseline; gap: 6px; text-align: start; }
  .lib__status b { display: inline; }
  .lib li[data-status] > .btn { grid-column: 3; grid-row: 2; width: auto; min-width: 96px; }
  .side__streak { display: none; }
}

/* ---------- Popovers (notifications, profile menu) ---------- */
.pop-wrap { position: relative; }
.avatar--btn { cursor: pointer; padding: 0; font: inherit; font-weight: var(--w-semibold); }
.pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; width: 320px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow-float); padding: 8px;
}
.pop[hidden] { display: none; }
.pop__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; border-bottom: 1.5px dashed var(--border); margin-bottom: 4px; }
.link--btn { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.notif li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px; border-radius: 8px; }
.notif li + li { margin-top: 2px; }
.notif li.is-unread { background: var(--canvas); }
.notif__icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--tile, var(--lilac)); }
.notif__icon .icon { width: 16px; height: 16px; }
.notif b { display: block; font-size: 13px; font-weight: var(--w-semibold); }
.notif span { font-size: 12px; color: var(--muted); }
.notif b .ltr { direction: ltr; }
.pop--menu { width: 240px; display: grid; }
.pop--menu > a, .pop--menu > button { display: block; text-align: start; padding: 10px 12px; border-radius: 8px; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; }
.pop--menu > a:hover, .pop--menu > button:hover { background: var(--lilac); color: var(--ink); }
.pop__me { padding: 10px 12px 12px; border-bottom: 1.5px dashed var(--border); margin-bottom: 4px; display: grid; }
.pop__me b { font-size: 15px; }
.pop__me span { font-size: 12px; color: var(--muted); }

/* ---------- Dialogs ---------- */
.dlg {
  width: min(440px, calc(100% - 32px)); padding: var(--s-24); border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float);
}
.dlg::backdrop { background: rgba(23, 25, 23, .28); }
.dlg__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-16); }
.icon-btn--sm { width: 34px; height: 34px; font-size: 14px; }
.dlg__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--s-16); }
.field { display: grid; gap: 6px; margin-bottom: var(--s-16); font-size: 13px; color: var(--muted); }
.field input, .field select {
  height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-input);
  background: var(--surface); font: inherit; font-size: var(--text-body); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Flashcards (content swaps instantly — text never animates) */
.flash-card { display: grid; justify-items: center; gap: 12px; padding: var(--s-32) var(--s-16); border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); background: var(--canvas); text-align: center; }
.flash-card[hidden] { display: none; }
.flash-card__count { font-size: 12px; color: var(--muted); }
.flash-card__word { font-family: var(--font-mono); font-size: 30px; direction: ltr; }
.flash-card__meaning { font-size: 20px; font-weight: var(--w-display); background: var(--highlight); padding: 2px 12px; border-radius: 6px; }
.flash-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: var(--s-24) 0 0; }
.flash-done[hidden], .dlg__actions[hidden] { display: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; inset-inline: 0; bottom: 20px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); z-index: 80;
  background: var(--ink); color: var(--on-accent); padding: 12px 18px; border-radius: 10px; font-size: var(--text-sm);
  box-shadow: var(--shadow-float);
}
.toast[hidden] { display: none; }
.toast b { color: var(--highlight); }

.lib__empty { padding: 20px 4px; color: var(--muted); font-size: var(--text-sm); grid-template-columns: 1fr !important; }

/* ---------- Accounts: signed-in shell + empty states for new students ---------- */
.dash-body [hidden] { display: none !important; }
/* The page arrives in one piece: its content stays hidden until we know who's signed in and it has
   filled itself in (shell.js), then a copy of the page background fades off it. Only that empty
   cover moves, never the text (Arabic marks stay put), and the sidebar stays on screen throughout. */
.dash-body:not(.is-loaded) :is(.app > :not(.side), .mbar) { visibility: hidden; }
.dash-body::after {
  content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none;   /* under the sidebar (60) */
  background: var(--canvas); opacity: 0; visibility: hidden;
}
.dash-body.is-loaded::after { animation: page-in .3s ease-out; }
@keyframes page-in { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .dash-body.is-loaded::after { animation: none; } }
.pop__me .pop__email { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-note { color: var(--muted); font-size: var(--text-sm); line-height: 1.7; list-style: none; padding: 8px 0; }
.trend-empty {
  display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 16px;
  border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--canvas);
}
.trend-empty b { font-size: 18px; font-weight: var(--w-display); }
.trend-empty p { color: var(--muted); font-size: var(--text-sm); max-width: 380px; }
.field small { color: var(--faint); }
.kpi__delta:empty { display: none; }

/* ==========================================================================
   First visit (body.is-new): one starting point instead of ten empty cards.
   The side rail, KPIs, chart and analysis stay hidden until there's data.
   ========================================================================== */
.is-new .rail, .is-new .start, .is-new .insights-h, .is-new .kpis, .is-new .card--chart, .is-new #analysis, .is-new #mock, .is-new #unlock-note { display: none !important; }
@media (min-width: 1321px) { .is-new .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.is-new .main { max-width: 1080px; }
.is-new .welcome { display: grid; gap: var(--s-24); }
.welcome[hidden] { display: none; }

.exam-hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: var(--highlight-soft); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 36px 36px 36px 40px;
}
.exam-hero__body { display: grid; gap: 14px; justify-items: start; }
.tagline--paper { background: var(--surface); border: 1px solid var(--border-strong); }
.tagline--paper .icon { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.exam-hero__title { font-size: 32px; line-height: 1.35; font-weight: var(--w-display); }
.exam-hero__text { font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 520px; }
.exam-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-hero__facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .6); border: 1px solid rgba(23, 25, 23, .25); font-size: 13px; font-weight: var(--w-medium); }
.exam-hero__facts .icon { width: 16px; height: 16px; }
.exam-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.exam-hero__actions .btn { min-height: 50px; padding-inline: 26px; font-size: 16px; }
.exam-hero__actions .link { font-size: 13px; text-decoration-color: var(--ink); text-decoration-thickness: 1px; }

/* a little exam sheet, pencil-sketch style */
.exam-paper {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 18px 18px 20px;
  display: grid; gap: 12px; transform: rotate(-2deg); box-shadow: none; direction: ltr; text-align: left;
}
.exam-paper__top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }
.exam-paper__timer { background: var(--ink); color: var(--highlight); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.exam-paper__title { font-size: 17px; font-weight: var(--w-display); }
.exam-paper__lines { display: grid; gap: 7px; }
.exam-paper__lines i { display: block; height: 7px; border-radius: 4px; background: var(--border); }
.exam-paper__lines i:nth-child(2) { width: 92%; } .exam-paper__lines i:nth-child(3) { width: 97%; }
.exam-paper__lines i:nth-child(4) { width: 84%; } .exam-paper__lines i:nth-child(5) { width: 58%; }
.exam-paper__q { font-size: 11px; color: var(--muted); border-top: 1.5px dashed var(--border); padding-top: 10px; }
.exam-paper__opts { display: flex; gap: 6px; flex-wrap: wrap; }
.exam-paper__opts span { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--ink-2); }
.exam-paper__opts .is-on { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }

.welcome__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-24); }
.steps__list { display: grid; gap: 0; margin-top: var(--s-16); }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1.5px dashed var(--border); }
.step:first-child { border-top: 0; }
.step__dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 14px; font-weight: var(--w-display); background: var(--surface); }
.step__dot .icon { display: none; width: 16px; height: 16px; stroke-width: 2.4; }
.step.is-done .step__dot { background: var(--highlight); }
.step.is-done .step__dot b { display: none; }
.step.is-done .step__dot .icon { display: block; }
.step__body { display: grid; gap: 4px; align-content: start; padding-top: 4px; }
.step__body > b { font-size: 15px; font-weight: var(--w-semibold); }
.step__body > span { font-size: 13px; color: var(--muted); }
.step__form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 8px; }
.step__form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.step__form select, .step__form input { height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-input); background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); }
.step__form select:focus, .step__form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.step__summary { display: none; font-size: 13px; color: var(--ink-2); }
.step.is-done .step__form { display: none; }
.step.is-done .step__summary { display: block; }

.unlock { display: grid; gap: 12px; align-content: start; }
.unlock__ghost { width: 100%; height: auto; margin-bottom: 4px; }
.unlock__ghost .unlock__grid { stroke: var(--border); stroke-dasharray: 3 5; fill: none; }
.unlock__ghost .unlock__line { stroke: var(--border-strong); stroke-width: 2.4; stroke-dasharray: 6 6; fill: none; stroke-linecap: round; }
.unlock__ghost circle { fill: var(--highlight); stroke: var(--ink); stroke-width: 1.5; }
.unlock__list { display: grid; gap: 10px; }
.unlock__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.unlock__list .icon { width: 18px; height: 18px; color: var(--muted); flex: none; }

/* library: first visit shows three passages and a "see all" row */
.lib__more { display: block !important; padding: 14px 4px 0 !important; text-align: center; }

/* ==========================================================================
   IELTS mock test card (returning students)
   ========================================================================== */
.mock {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon body actions" "icon stats actions";
  gap: 10px 20px; align-items: center;
  background: var(--tint-cyan); border: 1px solid var(--border-strong); border-radius: var(--r-panel); padding: 20px 24px;
}
.mock[hidden] { display: none; }
.mock__icon { grid-area: icon; align-self: start; width: 52px; height: 52px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); display: grid; place-items: center; }
.mock__icon .icon { width: 26px; height: 26px; }
.mock__body { grid-area: body; }
.mock__title { font-size: 19px; line-height: 1.4; font-weight: var(--w-display); }
.mock__text { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 2px; }
.mock__stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 8px; }
.mock__stats > div { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55); border: 1px solid rgba(23, 25, 23, .2); }
.mock__stats dt { font-size: 12px; color: var(--ink-2); }
.mock__stats dd { font-size: 13px; font-weight: var(--w-display); white-space: nowrap; }
.mock__stats dd small { font-size: 12px; font-weight: var(--w-medium); color: var(--ink-2); }
.mock__actions { grid-area: actions; display: grid; gap: 8px; justify-items: center; }
.mock__actions .link { font-size: 13px; }

.unlock-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-style: dashed; background: var(--canvas); }
.unlock-note[hidden] { display: none; }
.unlock-note__dots { display: flex; gap: 8px; flex: none; }
.unlock-note__dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); }
.unlock-note__dots i.is-on { background: var(--highlight); }

@media (max-width: 1100px) {
  .welcome__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mock { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon body" "stats stats" "actions actions"; }
  .mock__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .exam-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .exam-paper { display: none; }
  .exam-hero__title { font-size: 24px; }
  .exam-hero__text { font-size: 15px; }
  .exam-hero__actions .btn { width: 100%; justify-content: center; }
  .unlock-note { flex-direction: column; align-items: flex-start; }
}
.lib__soon { opacity: .55; cursor: default; pointer-events: none; }
/* vocabulary card: due count + "review now" (the review itself lives on vocab.html) */
.vocab-due { margin: -12px 0 12px; }
.vocab-go { width: 100%; justify-content: center; margin-top: 12px; }
.vocab-go[hidden] { display: none; }

/* Phones/tablets: the avatar can sit at either edge of the header, so popovers span the
   header's width (anchored to .dash-head) instead of the button — never off-screen. */
@media (max-width: 960px) {
  .dash-head { position: relative; }
  .dash-head .pop-wrap { position: static; }
  .dash-head .pop { inset-inline: 0; width: auto; max-width: 420px; margin-inline-start: auto; top: calc(100% + 6px); }
}

/* ==========================================================================
   2026-10 reading layout: compact next-step banner, passages first,
   the analysis in its own tab («تحليل أدائك»)
   ========================================================================== */
.rtabs { display: flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%; border-radius: var(--r-pill); background: var(--lilac); border: 1px solid var(--border); }
.rtabs button { border: 0; background: none; font: inherit; font-size: 14px; padding: 8px 18px; border-radius: var(--r-pill); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.rtabs button:hover { color: var(--ink); }
.rtabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: var(--w-semibold); box-shadow: 0 0 0 1px var(--ink); }
.rtabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.is-new .rtabs { display: none; }
body[data-view="insights"] [data-view="library"]:not(button),
body:not([data-view="insights"]) [data-view="insights"]:not(button) { display: none !important; }

.next--bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 24px; padding: 16px 20px; justify-items: stretch; }
.next__main { display: grid; gap: 2px; min-width: 0; }
.next__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.next__eyebrow .icon { width: 15px; height: 15px; flex: none; }
.next--bar .next__title { font-size: 18px; }
.next__passage { display: block; font-size: 13.5px; font-weight: var(--w-semibold); color: var(--ink-2); direction: ltr; unicode-bidi: isolate; text-align: right; }
.next__passage:empty { display: none; }
.next__side { display: flex; }
.next--bar .btn { margin-top: 0; }
.next__whyd { grid-column: 1 / -1; font-size: 13px; }
.next__whyd summary { cursor: pointer; width: max-content; color: var(--ink); font-weight: var(--w-semibold); text-decoration: underline dotted; text-underline-offset: 3px; list-style: none; }
.next__whyd summary::-webkit-details-marker { display: none; }
.next__whyd[open] { display: grid; gap: 8px; }
.next__whyd .next__text { margin-top: 4px; }

.lib-head { align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.lib-head .dash-search { width: min(320px, 100%); }
.mock__full { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.mock__full b { color: var(--ink); }

@media (max-width: 640px) {
  .next--bar { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .next__side .btn { width: 100%; justify-content: center; }
  .lib-head .dash-search { width: 100%; }
  .rtabs { width: 100%; }
  .rtabs button { flex: 1; padding-inline: 8px; }
}

/* ==========================================================================
   2026-10 calmer Practice tab (reading.html only — this file is shared):
   no side rail (goal + activity sit in «تحليل أدائك»; vocabulary is on Home),
   a compact mode switch with one line about the chosen mode, six passages first.
   ========================================================================== */
@media (min-width: 1321px) { .reading-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.reading-page .main { max-width: 1180px; }

.lib-tools { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.lib-tools .dash-search { width: 260px; max-width: 100%; }
.lib-type {
  height: 42px; padding: 0 12px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  font: inherit; font-size: var(--text-sm); color: var(--ink); cursor: pointer;
}
.lib-type:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Practice · Exam: two cards, picked before the passages show */
.mpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mpick__opt { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 14px 16px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.mpick__opt:hover { border-color: var(--ink); }
.mpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.mpick__ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--border); }
.mpick__ic .icon { width: 20px; height: 20px; }
.mpick__t { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.mpick__t b { font-weight: var(--w-display); }
.mpick__sub { font-size: 12.5px; color: var(--ink-2); }
.mpick__opt:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.mpick__opt:has(input:checked) .mpick__sub { color: inherit; opacity: .8; }
.mpick__opt:has(input:checked) .mpick__ic { background: rgba(255,255,255,.12); border-color: transparent; }
.mpick__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mseg__rec { display: none; font-size: 10.5px; font-weight: var(--w-semibold); line-height: 1.6; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--highlight); color: var(--ink); border: 1px solid var(--border-strong); }
.mpick__opt.is-rec .mseg__rec { display: inline-block; }
/* «مع مساعدة» under تدرّب: word meanings, hints, no timer (and then it doesn't count) */
.mhelp { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; font-size: 13.5px; cursor: pointer; width: max-content; max-width: 100%; }
.mhelp[hidden] { display: none; }
.mhelp input { position: absolute; opacity: 0; pointer-events: none; }
.mhelp__sw { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--border-strong); transition: background-color var(--dur-fast); flex: none; }
.mhelp__sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: inset-inline-start var(--dur-fast); }
.mhelp input:checked + .mhelp__sw { background: var(--ink); }
.mhelp input:checked + .mhelp__sw::after { inset-inline-start: 18px; }
.mhelp input:focus-visible + .mhelp__sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.mhelp b { font-weight: var(--w-semibold); }
.mhelp > span:last-child { color: var(--muted); font-size: 12.5px; }
#library:not(.has-mode) :is(.lib-tools, .rp-pick) { display: none; }
.mode-note { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.mode-note b { font-weight: var(--w-semibold); color: var(--ink); background: linear-gradient(transparent 60%, var(--highlight) 60%); }
.mode-note__more { display: block; color: var(--muted); }

/* the paraphrase coach: one quiet line under the library */
.rd-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 4px; font-size: 13px; color: var(--ink-2); }
.rd-extra b { font-weight: var(--w-semibold); color: var(--ink); }
.ai-off .rd-extra { display: none !important; }      /* like the banner it replaces: only where the AI helper answers */

@media (max-width: 640px) {
  .lib-tools { width: 100%; }
  .lib-tools .dash-search { width: 100%; }
  .lib-type { width: 100%; }
  .mpick__opt { grid-template-columns: 1fr; padding: 12px; }
  .mpick__ic { display: none; }
}

/* ==========================================================================
   2026-10 practice page (reading-practice.html): the way back to the reading hub,
   numbered steps (way → passage), and the line shown when arriving from a lesson
   ========================================================================== */
.sp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.sp-crumbs a { color: var(--ink-2); text-decoration: none; }
.sp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rp-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 14px; font-weight: var(--w-semibold); }
.rp-step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: var(--w-display); background: var(--highlight); border: 1.5px solid var(--border-strong); }
.rp-pick > .rp-step:first-child { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--border); }
.rp-from { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: var(--s-16); padding: 14px 16px; border-radius: var(--r-card);
  background: var(--tint-violet); border: 1.5px solid var(--border-strong); font-size: 13.5px; line-height: 1.7; }
.rp-from[hidden] { display: none; }
.rp-from__k { display: inline-flex; align-items: center; gap: 6px; flex: 1 0 100%; font-size: 12.5px; font-weight: var(--w-semibold); color: var(--ink-2); }
.rp-from__k .icon { width: 16px; height: 16px; flex: none; }
.rp-from__text { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.rp-from__text b { font-size: 17px; font-weight: var(--w-display); line-height: 1.5; }
.rp-from__acts { display: flex; flex-wrap: wrap; gap: 8px; }


/* ==========================================================================
   Inside the Practice door (reading-practice.html): the door's teal carries
   through — a teal header card, the next text in a teal card, and the library
   as rounded rows instead of dashed lines.
   ========================================================================== */
.rp-page .dash-head { padding: 24px 28px; border-radius: 30px; border: 1px solid var(--l-vocab);
  background: linear-gradient(115deg, var(--t-vocab) 0%, color-mix(in srgb, var(--t-vocab) 45%, #fff) 65%, #fff 100%); }
.rp-page .next { border-radius: 28px; border-color: var(--l-vocab); padding: 24px 26px; background-color: var(--t-vocab); }   /* the shared shine (nav.css) lies over it */
.rp-page .next__title { font-size: 22px; font-weight: var(--w-medium); }
.rp-page .next .btn { border-radius: var(--r-pill); }
.rp-page .lib { gap: 10px; }
.rp-page .lib li { padding: 14px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.rp-page .lib li:first-child { border-top: 1px solid var(--border); }
.rp-page .lib li:hover { border-color: var(--l-vocab); background: color-mix(in srgb, var(--t-vocab) 30%, #fff); }
.rp-page .lib__icon { border: 0; border-radius: 14px; }
.rp-page .lib .btn { border-radius: var(--r-pill); }
.rp-page .lib__types span { font-family: var(--font); letter-spacing: 0; }
.rp-page .chip { border-radius: var(--r-pill); }
@media (max-width: 960px) {
  .rp-page .dash-head { padding: 18px 20px; border-radius: 24px; }
}

/* ---------- Full exams (reading-practice.html): where the band comes from ---------- */
.exl { display: grid; gap: 12px; }
.exl[hidden] { display: none; }
.exl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.exl__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.exl__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-card); }
.exl__list b { direction: ltr; unicode-bidi: isolate; }
.exl__meta { font-size: 13px; color: var(--ink-2); }

/* ---------- Practice / exams: two squares, each opens its own list (reading-practice.html) ---------- */
.rp-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
.rp-door { --k: var(--c-vocab); --k-line: var(--l-vocab); position: relative; top: 0; display: grid; align-content: start; gap: 10px; min-height: 168px;
  padding: 20px 22px; border: 1.5px solid var(--k-line); border-radius: 28px; background: var(--t-vocab); color: var(--ink); font: inherit; text-align: start;
  cursor: pointer; transition: top var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }   /* lift with top, never transform: it holds Arabic text */
.rp-door--exam { --k: var(--c-exam); --k-line: var(--l-exam); background: var(--t-exam); }
.rp-door--essay { --k: var(--c-writing); --k-line: var(--l-writing); background: var(--t-writing); }   /* writing-lessons.html: Task 2 */
.rp-door:hover { top: -2px; border-color: var(--k); }
.rp-door:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rp-door[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.rp-door__head { display: flex; align-items: center; gap: 12px; }
.rp-door__icon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--k); }
.rp-door__icon .icon { width: 22px; height: 22px; }
.rp-door__title { font-size: 24px; line-height: 1.3; font-weight: var(--w-medium); }
.rp-door__sub { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.rp-door__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-door__stats:empty { display: none; }
.rp-door__stats span { padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); font-size: 12.5px; }
.rp-door__stats b { font-weight: var(--w-bold); }
body:not([data-panel="exams"]) [data-panel-of="exams"], body[data-panel="exams"] [data-panel-of="library"] { display: none; }
@media (max-width: 560px) {
  .rp-doors { gap: 10px; }
  .rp-door { min-height: 0; padding: 14px; gap: 8px; border-radius: 20px; }
  .rp-door__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rp-door__icon { width: 38px; height: 38px; border-radius: 12px; }
  .rp-door__title { font-size: 19px; }
  .rp-door__sub { display: none; }
}