/* ==========================================================================
   "Kashi" learner layer: glazed eight-point star tiles (khatam) and a faint girih
   lattice on top of the Firouzeh & Ink tokens. Used by the learning path, the
   Today dashboard, the lesson player, the practice hub and the test screens.
   RTL-first logical properties; motion only at data-motion >= 2.
   ========================================================================== */

:root {
  --tile-done: #0b8f86; --tile-done-ledge: #05655e;
  --tile-sun: #ffb627; --tile-sun-ledge: #c98500; --on-sun: #14122b;
  --tile-gold: #e9b949; --tile-gold-ledge: #a87a12;
  /* the girih lattice texture is retired (docs/DESIGN-APPLE.md §1: texture competed with content); the khatam tiles stay */
  --lattice: none; --lattice-light: none;
  --sheet-shadow: 0 -18px 40px -24px rgb(20 18 43 / 0.35);
  /* one skill palette for hub tiles, lesson heroes, test tickets and charts (docs/UI-DESIGN.md §2.11). White text and
     icons on each are >= 4.4:1 */
  --sk-reading: #3a3fcb; --sk-listening: #07756d; --sk-writing: #b4640a; --sk-speaking: #b8336a;
  --sk-vocabulary: #8a4a06; --sk-grammar: #2b2f8f; --sk-pronunciation: #6b4fd8; --sk-function: #0b7a3e;
  /* status tones: fg on bg >= 4.5:1 */
  --warning-fg: #8a5300; --warning-bg: #fff1d6; --info-fg: #1f5fbf; --info-bg: #e7eefb;
  --success-bg: #e4f4ea; --danger-bg: #fce9e7; --accent-soft: #ececfb;
  --ice: #9fd3f5; --ice-ledge: #5aa5dc; --on-ice: #0f3d5c;
}
/* controls need a 3:1 boundary: --line, not the decorative --hair (docs/UI-DESIGN.md §4) */
.lcard .opt, .lcard .token, .lcard .stile, .mode, .lcard input[type="text"], .lcard select, .pairbtn, .rate { border-color: var(--line); }
.sheet.hint { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; border-color: #c98500;
  background: color-mix(in srgb, var(--saffron) 14%, var(--card)); }
.sheet.hint > .ic { inline-size: 20px; block-size: 20px; color: #8a5300; margin-block-start: 4px; }
.sheet.hint strong { color: #8a5300; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet.hint strong, :root:not([data-theme="light"]) .sheet.hint > .ic { color: #ffc84d; }
}
:root[data-theme="dark"] .sheet.hint strong, :root[data-theme="dark"] .sheet.hint > .ic { color: #ffc84d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --warning-fg: #ffc84d; --warning-bg: #36290b; --info-fg: #8db2ff; --info-bg: #152447;
    --success-bg: #12301f; --danger-bg: #3a1519; --accent-soft: #22235a; --ice: #7cc2ee; --ice-ledge: #2f7fb8; --on-ice: #0f0e22; }
}
:root[data-theme="dark"] { --warning-fg: #ffc84d; --warning-bg: #36290b; --info-fg: #8db2ff; --info-bg: #152447;
  --success-bg: #12301f; --danger-bg: #3a1519; --accent-soft: #22235a; --ice: #7cc2ee; --ice-ledge: #2f7fb8; --on-ice: #0f0e22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --on-done: #0f0e22; --tile-done: #22b8ad; --tile-done-ledge: #0b6e67; --lattice: var(--lattice-light); --sheet-shadow: 0 -18px 40px -20px rgb(0 0 0 / 0.7); }
}
:root[data-theme="dark"] { --on-done: #0f0e22; --tile-done: #22b8ad; --tile-done-ledge: #0b6e67; --lattice: var(--lattice-light); --sheet-shadow: 0 -18px 40px -20px rgb(0 0 0 / 0.7); }

.nav-login { white-space: nowrap; }
@media (max-width: 420px) { .nav-login .nl-more { display: none; } .nav { gap: 8px; } }
.defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.kicker { color: var(--teal); font-weight: 700; font-size: var(--fs-xs); }

/* ---- khatam tile ---------------------------------------------------------------------------------------------- */
.khatam { --tf: var(--card); --tl: var(--hair); --ti: var(--ink-2); --ts: var(--hair);
  position: relative; display: inline-grid; place-items: center; inline-size: 76px; aspect-ratio: 100 / 108; flex: none; }
.khatam svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.khatam .k-ledge { fill: var(--tl); stroke: var(--tl); stroke-width: 7; stroke-linejoin: round; }
.khatam .k-face { fill: var(--tf); stroke: var(--ts); stroke-width: 7; stroke-linejoin: round; transition: transform 140ms var(--ease-std); }
.khatam .k-glaze { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 2; stroke-linejoin: round; }
.khatam .ic { position: relative; inline-size: 30%; block-size: auto; aspect-ratio: 1; color: var(--ti); margin-block-end: 8%; stroke-width: 2.1; transition: transform 140ms var(--ease-std); }
.khatam.done { padding: 0; gap: 0; text-align: initial; --tf: var(--tile-done); --ts: var(--tile-done); --tl: var(--tile-done-ledge); --ti: var(--on-done, #fff); }
.khatam.current { --tf: var(--tile-sun); --ts: var(--tile-sun); --tl: var(--tile-sun-ledge); --ti: var(--on-sun); }
.khatam.placed { --tf: color-mix(in srgb, var(--tile-done) 18%, var(--card)); --ts: color-mix(in srgb, var(--tile-done) 45%, var(--hair));
  --tl: color-mix(in srgb, var(--tile-done) 35%, var(--hair)); --ti: var(--teal); }
.khatam.gold { --tf: var(--tile-gold); --ts: var(--tile-gold); --tl: var(--tile-gold-ledge); --ti: var(--on-sun); }
.khatam.open { --ts: color-mix(in srgb, var(--indigo) 22%, var(--hair)); --tl: color-mix(in srgb, var(--indigo) 30%, var(--hair)); --ti: var(--indigo); }
.khatam.open .k-glaze { stroke: color-mix(in srgb, var(--indigo) 14%, var(--hair)); }
.khatam.locked { --tf: var(--paper-2); --ts: var(--hair); --tl: var(--hair); --ti: var(--ink-2); }
.khatam.locked .k-glaze { stroke: transparent; }
.khatam.sm { inline-size: 56px; }
.khatam.xs { inline-size: 26px; }
.khatam.xs .ic { inline-size: 42%; }
.khatam.medal { inline-size: 92px; }
.khatam.lg { inline-size: 112px; }

/* ---- page head + segmented tabs ------------------------------------------------------------------------------ */
.seg-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--hair);
  max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tabs a { flex: none; white-space: nowrap; padding: 4px 14px; min-block-size: var(--ctl-sm); display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.seg-tabs a:hover { color: var(--ink); }
.seg-tabs a.on { background: var(--ink); color: var(--paper); }

/* ---- learning path ------------------------------------------------------------------------------------------- */
.path-head { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: end; justify-content: space-between; margin-block-end: 16px; }
.path-head h1 { font-size: var(--fs-h1); }
.path-head p.muted { max-inline-size: 52ch; }
.path-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .path-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; } .path-side { position: sticky; inset-block-start: 76px; } }
.path-side { display: grid; gap: 12px; }
.path-side .linkbtn { display: inline-flex; gap: 8px; align-items: center; justify-self: start; }
.now-card { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 16px; border-radius: var(--r-xl); color: var(--ink);
  background: var(--lattice), linear-gradient(160deg, color-mix(in srgb, var(--saffron) 22%, var(--card)), var(--card) 70%);
  border: 1px solid color-mix(in srgb, var(--saffron) 45%, var(--hair)); box-shadow: var(--e2); }
.now-row { display: flex; gap: 12px; align-items: center; }
.now-row h2 { font-size: var(--fs-md); line-height: 1.55; }
.now-unit { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 500; }
.now-card .btn { justify-self: start; }
.track-meter { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--hair); font-size: var(--fs-sm); }
.track-meter .bar { block-size: 8px; }
.legend-tiles { list-style: none; margin: 0; padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: var(--fs-xs);
  color: var(--ink-2); border-radius: var(--r-lg); border: 1px dashed var(--hair); }
.legend-tiles li { display: flex; gap: 8px; align-items: center; }
@media (max-width: 979px) { .path-side .legend-tiles, .path-side .track-meter { display: none; } }

.path-main { display: grid; gap: 24px; min-inline-size: 0; }
.lvl-band { display: grid; gap: 14px; }
.lvl-gate { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px 18px 14px; color: #f4f1fb; font-size: var(--fs-sm);
  background: var(--lattice-light), linear-gradient(135deg, #1b1940, #2b2f8f 60%, #07756d);
  border-radius: 120px 120px 18px 18px / 48px 48px 18px 18px; box-shadow: var(--e2); }
.lvl-gate h2 { font-size: var(--fs-lg); color: #fff; }
.lvl-gate p { color: #d9d6ee; }
.lvl-medal { position: relative; display: grid; place-items: center; inline-size: 52px; aspect-ratio: 1; flex: none; }
.lvl-medal svg { position: absolute; inset: 0; fill: var(--tile-sun); stroke: var(--tile-sun); stroke-width: 6; stroke-linejoin: round; }
.lvl-medal b { position: relative; color: var(--on-sun); font-size: var(--fs-sm); font-weight: 800; }

.court { display: grid; gap: 4px; }
.court-head { position: sticky; inset-block-start: 62px; z-index: 6; display: flex; gap: 10px; align-items: center; padding: 8px 14px;
  border-radius: var(--r-lg); background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--hair); box-shadow: 0 8px 20px -16px rgb(20 18 43 / 0.5); }
html[data-motion="2"] .court-head, html[data-motion="3"] .court-head { backdrop-filter: blur(10px); }
.court-num { font-size: var(--fs-xs); font-weight: 700; color: var(--teal); }
.court-head h3 { font-size: var(--fs-base); line-height: 1.5; }
.court-pct { position: relative; inline-size: 40px; block-size: 40px; display: grid; place-items: center; flex: none; }
.court-pct svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.court-pct circle { fill: none; stroke-width: 4; }
.court-pct .track { stroke: var(--paper-2); }
.court-pct .val { stroke: var(--tile-done); stroke-linecap: round; }
.court-pct span { font-size: var(--fs-2xs); font-weight: 700; }

.trail { position: relative; direction: ltr; inline-size: min(100%, 440px); margin-inline: auto; container-type: inline-size; }
.trail-line { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.trail-line path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tl-base { stroke: var(--hair); stroke-width: 10; stroke-dasharray: 1 16; }
.tl-done { stroke: color-mix(in srgb, var(--tile-done) 55%, transparent); stroke-width: 10; }
.trail-nodes { list-style: none; margin: 0; padding: 0; }
@media (min-width: 980px) { .trail { inline-size: min(100%, 520px); } .tile-btn .khatam { inline-size: 80px; } .pnode-label { font-size: var(--fs-sm); } }
.pnode { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; }
.tile-btn, .medal-btn { display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tile-btn:focus-visible, .medal-btn:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
.tile-btn:hover .k-face { transform: translateY(-2px); }
.tile-btn:active .k-face, .tile-btn:active .ic { transform: translateY(7px); }
.pnode-label { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inline-size: max-content; max-inline-size: 150px;
  direction: rtl; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; color: var(--ink-2); pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* labels never leave the trail: their width is capped by the room between the tile and the trail edge */
.side-l .pnode-label { right: calc(100% + 10px); text-align: right; max-inline-size: min(150px, calc(var(--xn) * 1cqi - 50px)); }
.side-r .pnode-label { left: calc(100% + 10px); text-align: right; max-inline-size: min(150px, calc((100 - var(--xn)) * 1cqi - 50px)); }
.pnode.checkpoint .pnode-label { inset-block-start: calc(100% + 6px); transform: none; text-align: center; left: 50%; translate: -50% 0; }
.pnode.current .pnode-label, .pnode.checkpoint.done .pnode-label { color: var(--ink); }
.pnode.done .pnode-label { color: var(--ink-2); }
.pnode.current::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--saffron) 45%, transparent), transparent); }
html[data-motion="2"] .pnode.current::before, html[data-motion="3"] .pnode.current::before { animation: halo 2.4s var(--ease-std) 3; }
.start-chip { position: absolute; inset-block-end: calc(100% + 4px); padding: 2px 12px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; box-shadow: var(--shadow); direction: rtl; left: 50%; translate: -50% 0; }
.start-chip::after { content: ""; position: absolute; inset-block-start: 100%; left: 50%; translate: -50% 0; border: 7px solid transparent; border-block-start-color: var(--ink); }
html[data-motion="2"] .start-chip, html[data-motion="3"] .start-chip { animation: bob 1.8s var(--ease-std) 3; }

/* lesson popover: a bottom sheet on every screen size (Popover API; path.js falls back to plain navigation) */
.pop { position: fixed; inset: auto 0 0; margin: 0 auto calc(12px + var(--safe-b)); inline-size: min(100% - 24px, 480px);
  padding: 18px; border: 1px solid var(--hair); border-radius: var(--r-xl); background: var(--card); color: var(--ink); box-shadow: var(--sheet-shadow), var(--shadow); direction: rtl; text-align: start; }
.pop:popover-open { display: grid; gap: 12px; }
html[data-motion="2"] .pop:popover-open, html[data-motion="3"] .pop:popover-open { animation: sheet-in 280ms var(--ease-out); }
.pop::backdrop { background: rgb(15 14 34 / 0.38); }
.pop-head { display: flex; gap: 12px; align-items: flex-start; }
.pop-head h3 { font-size: var(--fs-lg); line-height: 1.5; }
.pop p { color: var(--ink-2); }

/* ---- Today (dashboard) --------------------------------------------------------------------------------------- */
.today-hero { position: relative; overflow: hidden; display: grid; gap: 16px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--r-xl);
  color: #f5f5f7; background: radial-gradient(120% 90% at 100% 0%, rgb(108 112 240 / 0.55) 0%, transparent 60%),
  radial-gradient(90% 80% at 0% 100%, rgb(34 184 171 / 0.4) 0%, transparent 65%), #111118; box-shadow: var(--e2); }
@media (min-width: 900px) { .today-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } }
.today-hero h1 { font-size: var(--fs-h1); color: #fff; }
.today-hero .th-sub { color: #d9d6ee; font-size: var(--fs-sm); }
.today-hero .th-sub a { color: #fff; }
.today-hero .lvl { background: rgb(255 255 255 / 0.14); color: #fff; }
.th-main { display: grid; gap: 12px; }
.continue-card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-lg); text-decoration: none; color: inherit;
  background: rgb(255 255 255 / 0.09); border: 0; transition: transform 180ms var(--ease-out), background-color 180ms; }
.continue-card:hover { background: rgb(255 255 255 / 0.13); transform: translateY(-2px); }
.continue-card .cc-text { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.continue-card small { color: #d9d6ee; font-size: var(--fs-xs); }
.continue-card b { font-size: var(--fs-md); line-height: 1.55; }
.btn-sun { background: var(--tile-sun); color: var(--on-sun); font-weight: 700; }
.btn-sun:active { transform: scale(0.97); }
.continue-card .btn-sun { flex: none; }
@media (max-width: 560px) { .continue-card { flex-wrap: wrap; } .continue-card .btn { inline-size: 100%; } }
.mini-trail { display: flex; align-items: center; gap: 4px; text-decoration: none; color: #d9d6ee; font-size: var(--fs-xs); flex-wrap: wrap; }
.mini-trail .khatam { inline-size: 34px; }
.mini-trail .khatam.open { --tf: rgb(255 255 255 / 0.1); --ts: rgb(255 255 255 / 0.22); --tl: rgb(255 255 255 / 0.18); --ti: #d9d6ee; }
.mini-trail .dash-line { inline-size: 12px; block-size: 3px; border-radius: 4px; background: rgb(255 255 255 / 0.22); }
.mini-trail span.lbl { margin-inline-start: 8px; }
.th-goal { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 16px; border-radius: var(--r-lg); background: rgb(255 255 255 / 0.07); }
.th-goal .ring { inline-size: 128px; block-size: 128px; }
.th-goal .ring .track { stroke: rgb(255 255 255 / 0.14); }
.th-goal .ring .val { stroke: var(--tile-sun); }
.th-goal .ring b { color: #fff; font-size: var(--fs-lg); display: grid; place-content: center; line-height: 1.2; }
.th-goal .ring b small { font-size: var(--fs-2xs); font-weight: 500; color: #d9d6ee; }
.th-goal p { color: #d9d6ee; font-size: var(--fs-sm); }
.week-dots { display: flex; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.week-dots li { display: grid; gap: 2px; justify-items: center; font-size: var(--fs-2xs); color: #d9d6ee; }
.week-dots .khatam { inline-size: 24px; block-size: 26px; }
.week-dots li { align-content: start; }
.week-dots .khatam.open { --tf: rgb(255 255 255 / 0.08); --ts: rgb(255 255 255 / 0.2); --tl: rgb(255 255 255 / 0.12); }
.week-dots .today .khatam.open { --ts: var(--tile-sun); }
.th-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.th-stats span { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.08); font-weight: 700; font-size: var(--fs-sm); }
.th-stats .ic { color: var(--tile-sun); }

.quick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
@media (max-width: 560px) { .qtile { padding: 10px 12px; } .qtile b { font-size: var(--fs-lg); } .qtile b.word { font-size: var(--fs-base); } .qtile span { font-size: var(--fs-xs); } }
details.week-plan > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-block-size: 44px; }
details.week-plan > summary::-webkit-details-marker { display: none; }
details.week-plan > summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--indigo); }
details.week-plan[open] > summary::after { content: "–"; }
details.week-plan > summary h2 { margin: 0; }
.qtile { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--hair);
  text-decoration: none; overflow: hidden; transition: transform 180ms var(--ease-out), border-color 180ms; }
.qtile:hover { transform: translateY(-2px); border-color: var(--indigo); }
.qtile .ic { inline-size: 20px; block-size: 20px; color: var(--indigo); margin-block-end: 4px; }
.qtile b { font-size: var(--fs-xl); line-height: 1.25; font-variant-numeric: tabular-nums; }
.qtile span { color: var(--ink-2); font-size: var(--fs-sm); }
.qtile b.word { font-size: var(--fs-md); line-height: 1.6; }
.qtile.hot { border-color: color-mix(in srgb, var(--saffron) 60%, var(--hair)); background: linear-gradient(160deg, color-mix(in srgb, var(--saffron) 14%, var(--card)), var(--card)); }
.qtile.hot .ic { color: var(--tile-sun-ledge); }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.todo a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--r-md); min-block-size: 48px;
  border: 1px solid var(--hair); background: var(--paper); text-decoration: none; transition: border-color 160ms; }
.todo a:hover { border-color: var(--indigo); }
.todo .dot { inline-size: 30px; block-size: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--indigo) 12%, var(--card)); color: var(--indigo); }
.todo .dot .ic { inline-size: 17px; block-size: 17px; }
.todo .t { font-weight: 600; font-size: var(--fs-sm); }
.todo .m { color: var(--ink-2); font-size: var(--fs-xs); }

/* ---- lesson player ------------------------------------------------------------------------------------------- */
.lesson-wrap { background: var(--lattice), var(--paper); }
/* the girih lattice stays off behind the player at motion tier 0-1 and in high-contrast modes (docs/UI-DESIGN.md §2.8) */
html[data-motion="0"] .lesson-wrap, html[data-motion="1"] .lesson-wrap { background: var(--paper); }
@media (forced-colors: active) { .lesson-wrap, .today-hero, .lvl-gate, .now-card, .htile::after { background-image: none; forced-color-adjust: auto; } }
.lesson-top .bar { block-size: 12px; background: var(--paper-2); box-shadow: inset 0 1px 0 rgb(20 18 43 / 0.06); }
.lesson-top .bar > i { background: linear-gradient(to bottom, color-mix(in srgb, #fff 30%, var(--tile-done)) 0 30%, var(--tile-done) 30%); }
.lesson-main { padding-block-end: 220px; }
.qtype { display: inline-flex; gap: 6px; align-items: center; justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, var(--card)); }
.qtype .ic { inline-size: 14px; block-size: 14px; }
.lcard .opt { box-shadow: 0 var(--ledge) 0 var(--hair); }
.lcard button.opt:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--hair); }
.lcard .opt.right { box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--ok) 60%, var(--hair)); }
.lcard .opt.wrong { box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--bad) 55%, var(--hair)); }
.lcard .btn-primary { box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--indigo) 60%, #000); }
.lcard .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--indigo) 60%, #000); }
.lfoot { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; border-block-start: 1px solid var(--hair); background: var(--card);
  box-shadow: var(--sheet-shadow); padding-block: 12px calc(12px + var(--safe-b)); max-block-size: 70dvh; overflow-y: auto; }
.lfoot.ok { background: color-mix(in srgb, var(--ok) 11%, var(--card)); border-color: color-mix(in srgb, var(--ok) 45%, var(--hair)); }
.lfoot.no { background: color-mix(in srgb, var(--bad) 9%, var(--card)); border-color: color-mix(in srgb, var(--bad) 40%, var(--hair)); }
html[data-motion="2"] .lfoot, html[data-motion="3"] .lfoot { animation: foot-up 300ms var(--ease-out); }
.lfoot-in { max-inline-size: 640px; margin-inline: auto; display: grid; gap: 10px; }
@media (min-width: 760px) { .lfoot-in { grid-template-columns: 1fr auto; align-items: center; } }
.lfoot-msg { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.lfoot-msg .badge-ic { flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ink-2); }
.lfoot.ok .badge-ic { background: var(--ok); }
.lfoot.no .badge-ic { background: var(--bad); }
.lfoot-msg .badge-ic .ic { inline-size: 18px; block-size: 18px; stroke-width: 2.25; }
.lfoot-msg strong { font-size: var(--fs-md); display: block; }
.lfoot.ok strong { color: var(--ok); } .lfoot.no strong { color: var(--bad); }
.lfoot-msg p { margin-block-start: 2px; }
.lfoot .ans { font-family: var(--f-display); font-weight: 700; }
.lfoot #continue { min-inline-size: 160px; min-block-size: var(--ctl-lg); }
.lfoot.ok #continue { background: var(--ok); box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--ok) 60%, #000); color: #fff; }
.lfoot.no #continue { background: var(--bad); box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--bad) 60%, #000); color: #fff; }
:root[data-theme="dark"] .lfoot.ok #continue, :root[data-theme="dark"] .lfoot.no #continue { color: #0f0e22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lfoot.ok #continue, :root:not([data-theme="light"]) .lfoot.no #continue { color: #0f0e22; } }
.lcard.done { gap: 14px; }
.done-medal { position: relative; display: grid; place-items: center; }
.done-medal .khatam { inline-size: 124px; }
.done-medal .pct { position: absolute; inset: 0; display: grid; place-content: center; margin-block-end: 10px; font-size: var(--fs-xl); font-weight: 800; color: var(--on-sun); }
html[data-motion="2"] .done-medal .khatam, html[data-motion="3"] .done-medal .khatam { animation: medal-in 700ms var(--ease-pop) both; }

/* ---- lesson intro ------------------------------------------------------------------------------------------- */
.lesson-hero { --h: var(--sk-grammar); position: relative; overflow: hidden; display: grid; gap: 10px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--r-xl); color: #f4f1fb;
  background: var(--lattice-light), linear-gradient(135deg, #14122b, var(--h) 75%); }
.lesson-hero.sk-listening { --h: var(--sk-listening); } .lesson-hero.sk-pronunciation { --h: var(--sk-pronunciation); }
.lesson-hero.sk-vocabulary { --h: var(--sk-vocabulary); } .lesson-hero.sk-reading { --h: var(--sk-reading); }
.lesson-hero.sk-speaking { --h: var(--sk-speaking); } .lesson-hero.sk-function { --h: var(--sk-function); }
.lesson-hero.sk-writing { --h: var(--sk-writing); }
.lesson-hero .crumbs, .lesson-hero .crumbs a { color: #d9d6ee; }
.lesson-hero .lh-unit { margin: 0; font-size: var(--fs-xs); color: #d9d6ee; opacity: 0.85; }
.lh-main { display: flex; gap: 12px; align-items: center; }
.lesson-hero h1 { color: #fff; font-size: var(--fs-h1); }
.lh-en { color: #d9d6ee; text-align: start; } /* <bdi> keeps the English subtitle on the start (right) edge */
.lh-sum { color: #ebe8f7; max-inline-size: 62ch; font-size: var(--fs-sm); }
.lesson-hero .draftflag { color: #d9d6ee; }
.lesson-hero .tag.premium { color: var(--on-sun); background: var(--tile-sun); }
.teach { counter-reset: t; }
.tstep { font-size: var(--fs-xs); font-weight: 700; color: var(--teal); }
.tcard { box-shadow: 0 1px 0 rgb(20 18 43 / 0.03); }
.start-bar { position: sticky; inset-block-end: calc(12px + var(--safe-b)); z-index: 30; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  padding: 10px; border-radius: var(--r-xl); font-size: var(--fs-sm); background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--hair); box-shadow: var(--sheet-shadow); }
html[data-motion="2"] .start-bar, html[data-motion="3"] .start-bar { backdrop-filter: blur(10px); }
.has-tabbar .start-bar { inset-block-end: calc(76px + var(--safe-b)); }
/* the lesson intro hides the tab bar: the start bar is the only fixed bar there */
.no-tabbar.has-tabbar .start-bar { inset-block-end: calc(12px + var(--safe-b)); }
body.no-tabbar.has-tabbar { padding-block-end: 0; }
@media (min-width: 900px) { .has-tabbar .start-bar, .start-bar { inset-block-end: 16px; } }
.start-bar .btn-sun { flex: 1 1 auto; min-block-size: var(--ctl-lg); font-size: var(--fs-base); }
.start-bar .btn-sun small { font-weight: 600; opacity: 0.8; }
@media (max-width: 559px) { .start-bar .btn-sun small { display: none; } }
@media (min-width: 760px) { .start-bar .btn-sun { flex: 0 1 auto; } }
.sib-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sib-trail li { position: relative; }
.sib-trail a, .sib-trail li > b { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-md); text-decoration: none; min-block-size: 44px; font-size: var(--fs-sm); font-weight: 500; }
.sib-trail a:hover { background: var(--paper-2); }
.sib-trail li.current > b { background: color-mix(in srgb, var(--saffron) 16%, var(--card)); }
.sib-trail .khatam.xs { inline-size: 28px; }
.sib-trail li.done span { color: var(--ink-2); }

/* ---- catalogue --------------------------------------------------------------------------------------------- */
.lcardx .khatam.xs { inline-size: 28px; }
.lcardx { box-shadow: 0 2px 0 var(--hair); }
.lcardx.done { background: linear-gradient(160deg, color-mix(in srgb, var(--tile-done) 8%, var(--card)), var(--card) 60%); }
.unit h2 { padding-block-end: 6px; border-block-end: 1px dashed var(--hair); }

/* ---- vocabulary decks ------------------------------------------------------------------------------------- */
.deck-jump { margin-block-end: 18px; }
.deck-group { --h: var(--indigo); display: grid; gap: 12px; margin-block-end: 28px; scroll-margin-block-start: 76px; }
.dg-phrasal { --h: #b8336a; } .dg-academic { --h: #b4640a; } .dg-topics { --h: #07756d; }
.dg-head { display: flex; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.dg-head h2 { font-size: var(--fs-lg); }
.dg-ic { inline-size: 38px; block-size: 38px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; color: #fff; background: var(--h);
  box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--h) 60%, #000); }
.dg-ic .ic { inline-size: 20px; block-size: 20px; }
.deck-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
@media (max-width: 560px) {
  .deck-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .deckc { padding: 12px; gap: 6px; }
  .deckc h3 { font-size: var(--fs-sm); }
  .deckc .en, .deckc .tag.ok { display: none; }
  .deckc .btn { inline-size: 100%; padding-inline: 8px; gap: 4px; font-size: var(--fs-xs); }
}
.deckc { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--hair);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--h) 18%, var(--hair)), 0 6px 0 -2px color-mix(in srgb, var(--h) 9%, var(--paper)); margin-block-end: 6px; font-size: var(--fs-sm); }
.deckc.on { border-color: color-mix(in srgb, var(--h) 50%, var(--hair)); }
.deckc h3 { font-size: var(--fs-base); line-height: 1.55; }
.deckc h3 a { text-decoration: none; }
.deckc h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.deckc form { position: relative; z-index: 1; }
.deck-meter { display: grid; gap: 4px; }
.deck-meter .bar { block-size: 6px; }
.deck-meter .bar > i { background: var(--h); }

.wordcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.wcard { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: var(--r-lg); font-size: var(--fs-sm); background: var(--card); border: 1px solid var(--hair); }
.wcard.known { border-inline-start: 3px solid var(--tile-done); }
.wc-head { display: flex; gap: 8px; align-items: center; }
.wc-en { font-size: var(--fs-lg); }
.wc-fa { font-weight: 600; color: var(--teal); }
.wc-ex { padding: 6px 10px; border-radius: var(--r-sm); background: var(--paper-2); }
.wc-ex .en { display: block; }
.wc-coll { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; direction: ltr; }
.wc-coll li { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hair); font-size: var(--fs-xs); color: var(--ink-2); }

/* ---- authentic media (films, podcasts) ---------------------------------------------------------------------- */
.media-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.mcard { display: grid; border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--hair); text-decoration: none; color: var(--ink);
  transition: transform 200ms var(--ease-out), box-shadow 200ms; }
.mcard:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.mc-art { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; background: #14122b; }
.mc-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mc-art > .ic { inline-size: 36px; block-size: 36px; opacity: 0.9; stroke-width: 1.5; }
.mc-dur { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; padding: 0 6px; border-radius: var(--r-xs); background: rgb(0 0 0 / 0.65); color: #fff; font-size: var(--fs-2xs); }
.mc-lock { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tile-sun); color: var(--on-sun); }
.mc-lock .ic { inline-size: 16px; block-size: 16px; }
.mc-body { display: grid; gap: 4px; padding: 10px 12px 12px; font-size: var(--fs-sm); }
.mc-body b { line-height: 1.6; }
/* one hue per accent family (art placeholders and accent tags) */
.acc-us { background: var(--lattice-light), linear-gradient(135deg, #14122b, #2a4fb8); }
.acc-uk { background: var(--lattice-light), linear-gradient(135deg, #14122b, #8e2756); }
.acc-au, .acc-nz { background: var(--lattice-light), linear-gradient(135deg, #14122b, #07756d); }
.acc-ca { background: var(--lattice-light), linear-gradient(135deg, #14122b, #b4271f); }
.acc-ie, .acc-sc { background: var(--lattice-light), linear-gradient(135deg, #14122b, #0b7a3e); }
.acc-in, .acc-za, .acc-other { background: var(--lattice-light), linear-gradient(135deg, #14122b, #b4640a); }
.tag.acc { background: color-mix(in srgb, var(--indigo) 12%, var(--card)); color: var(--ink); }

.mp-player { display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--hair); background: var(--card); box-shadow: var(--shadow); }
.mp-stage { position: relative; background: #000; display: grid; place-items: center; }
.mp-stage video { inline-size: 100%; max-block-size: 70dvh; display: block; background: #000; }
.mp-stage.audio { min-block-size: 220px; color: #fff; }
.mp-art .ic { inline-size: 52px; block-size: 52px; opacity: 0.85; stroke-width: 1.25; }
.mp-sub { position: absolute; inset-inline: 12px; inset-block-end: 14px; margin: 0 auto; max-inline-size: 90%; inline-size: fit-content; text-align: center;
  padding: 4px 12px; border-radius: 10px; background: rgb(0 0 0 / 0.72); color: #fff; font-family: var(--f-display); font-size: clamp(1rem, 1.4vw + 0.7rem, 1.35rem);
  line-height: 1.45; pointer-events: none; opacity: 0; transition: opacity 160ms; }
.mp-sub.on { opacity: 1; }
.mp-turn { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; margin: 0; display: grid; gap: 6px; padding: 8px 14px; border-radius: 14px;
  background: var(--tile-sun); color: var(--on-sun); font-weight: 800; min-inline-size: 140px; }
.mp-turn i { display: block; block-size: 5px; border-radius: 5px; background: var(--on-sun); transform-origin: right center; }
.mp-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; border-block-start: 1px solid var(--hair); }
.mp-bar .play-btn.big { min-block-size: 52px; min-inline-size: 52px; }
.mp-cues { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; max-block-size: 420px; overflow-y: auto; border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 6px; background: var(--card); }
.mp-cues button { inline-size: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; direction: ltr; border: 0; background: none; padding: 8px 10px;
  border-radius: var(--r-sm); min-block-size: 44px; font: inherit; color: var(--ink); line-height: 1.55; }
.mp-cues button:hover { background: var(--paper-2); }
.mp-cues button.cur { background: color-mix(in srgb, var(--saffron) 22%, var(--card)); }
.mp-cues .t { flex: none; color: var(--ink-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; min-inline-size: 38px; }
.mp-cues b { flex: none; color: var(--indigo); }
.mp-credit { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line); color: var(--ink-2); }
.mp-credit .ic { inline-size: 14px; block-size: 14px; display: inline; vertical-align: -2px; }

.pick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pick { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); border: 1.5px dashed var(--line); background: var(--paper);
  cursor: pointer; min-block-size: 64px; font-size: var(--fs-sm); }
.pick:hover, .pick:focus-within { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 6%, var(--card)); }
.pick > .ic { inline-size: 24px; block-size: 24px; color: var(--indigo); flex: none; }
.pick span { display: grid; }
.pick small { color: var(--ink-2); }
.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pick:has(input:disabled) { opacity: 0.6; }
.own-film { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); margin-block-end: 16px; text-decoration: none; font-size: var(--fs-sm);
  background: var(--card); border: 1.5px solid color-mix(in srgb, var(--saffron) 55%, var(--hair)); box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--saffron) 40%, var(--hair)); }
.own-film b { font-size: var(--fs-md); }
.own-film > .ic:last-child { margin-inline-start: auto; }
.pod-art { display: grid; place-content: center; gap: 6px; text-align: center; padding: 12px; }
.pod-art b { font-size: var(--fs-md); line-height: 1.3; color: #fff; }
.pod-art .ic { margin-inline: auto; inline-size: 24px; block-size: 24px; opacity: 0.8; }
.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ep-list a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--card); border: 1px solid var(--hair); text-decoration: none; }
.ep-list a:hover { border-color: var(--indigo); }
.ep-list b { text-align: start; }
.ep-ic { inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--indigo) 12%, var(--card)); color: var(--indigo); }
.intro-hero.acc-us, .intro-hero.acc-uk, .intro-hero.acc-au, .intro-hero.acc-nz, .intro-hero.acc-ca, .intro-hero.acc-ie, .intro-hero.acc-sc, .intro-hero.acc-in, .intro-hero.acc-za, .intro-hero.acc-other { color: #fff; }
.media-banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-block-end: 16px; border-radius: var(--r-lg); text-decoration: none; color: #f4f1fb;
  background: var(--lattice-light), linear-gradient(135deg, #14122b, #8e2756 80%); box-shadow: var(--e2); }
.media-banner b { color: #fff; font-size: var(--fs-md); }
.media-banner .small { color: #e7e3f5; }
.media-banner > .ic { margin-inline-start: auto; flex: none; }
.mb-ic { inline-size: 40px; block-size: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--tile-sun); color: var(--on-sun); }

/* ---- practice hub bento -------------------------------------------------------------------------------------- */
.hub { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .hub { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.htile { --h: var(--indigo); position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--r-lg); min-block-size: 132px;
  background: var(--card); border: 1px solid var(--hair); text-decoration: none; color: var(--ink); transition: transform 200ms var(--ease-out), border-color 200ms, box-shadow 200ms; }
.htile::after { content: ""; position: absolute; inset-block-start: -36px; inset-inline-end: -36px; inline-size: 120px; block-size: 120px; border-radius: 50%;
  background: var(--lattice), color-mix(in srgb, var(--h) 16%, transparent); pointer-events: none; }
.htile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--h) 60%, var(--hair)); box-shadow: var(--e2); }
.htile .hic { position: relative; z-index: 1; inline-size: 38px; block-size: 38px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; background: var(--h);
  box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--h) 60%, #000); margin-block-end: 6px; }
.htile .hic .ic { inline-size: 20px; block-size: 20px; }
.htile h2 { font-size: var(--fs-md); position: relative; z-index: 1; }
.htile p { color: var(--ink-2); font-size: var(--fs-sm); position: relative; z-index: 1; }
.htile .count { position: relative; z-index: 1; justify-self: start; margin-block-start: auto; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  background: color-mix(in srgb, var(--h) 14%, var(--card)); color: var(--ink); }
.htile.big { grid-column: span 2; min-block-size: 184px; }
.htile.big h2 { font-size: var(--fs-lg); }
.htile .viz { position: relative; z-index: 1; block-size: 52px; display: flex; align-items: center; gap: 5px; direction: ltr; margin-block: 6px; }
.viz.wavebars i { inline-size: 4px; border-radius: 4px; background: var(--h); opacity: 0.8; }
.viz.lines { display: grid; gap: 8px; align-content: center; inline-size: 70%; }
.viz.lines i { block-size: 7px; border-radius: 4px; background: var(--hair); }
.viz.lines i.hl { background: linear-gradient(to right, color-mix(in srgb, var(--saffron) 70%, transparent) 0 55%, var(--hair) 55%); }
.htile.c-read { --h: var(--sk-reading); } .htile.c-listen { --h: var(--sk-listening); } .htile.c-write { --h: var(--sk-writing); }
.htile.c-speak { --h: var(--sk-speaking); }
.htile.c-place { --h: #14122b; } .htile.c-media { --h: #8e2756; } .htile.c-pron { --h: var(--sk-pronunciation); } .htile.c-tech { --h: #0b7a3e; } .htile.c-chat { --h: #2a78d6; } .htile.c-review { --h: #c0322b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .htile.c-place { --h: #8f8ab8; } }
:root[data-theme="dark"] .htile.c-place { --h: #8f8ab8; }
@media (min-width: 900px) {
  .htile.big { grid-column: span 6; }
  .htile.mid { grid-column: span 4; }
  .htile.sm { grid-column: span 3; }
}

/* ---- tests: list, intro, result ------------------------------------------------------------------------------ */
.ticket { --h: var(--sk-reading); position: relative; display: grid; gap: 8px; padding: 16px 14px 12px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--hair);
  text-decoration: none; color: var(--ink); overflow: hidden; transition: transform 200ms var(--ease-out), border-color 200ms, box-shadow 200ms; }
.ticket.listening { --h: var(--sk-listening); }
.ticket::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--h); }
.ticket:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--h) 55%, var(--hair)); box-shadow: var(--e2); }
.ticket h2 { font-size: var(--fs-base); line-height: 1.55; }
.ticket .tk-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ticket .tk-ic { inline-size: 30px; block-size: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--h) 14%, var(--card)); color: var(--h); }
.ticket .tk-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-2); font-size: var(--fs-xs); border-block-start: 1px dashed var(--hair); padding-block-start: 8px; }
.ticket .tk-meta span { display: inline-flex; gap: 4px; align-items: center; }
.ticket .tk-meta .ic { inline-size: 14px; block-size: 14px; }
.ticket .best { margin-inline-start: auto; color: var(--ok); font-weight: 700; }

.intro-hero { position: relative; overflow: hidden; display: grid; gap: 10px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--r-xl); color: #f4f1fb;
  background: var(--lattice-light), linear-gradient(135deg, #14122b, #2b2f8f 70%); }
.intro-hero.listening { background: var(--lattice-light), linear-gradient(135deg, #14122b, var(--sk-listening) 75%); }
.intro-hero h1 { font-size: var(--fs-h1); color: #fff; }
.intro-hero .en { color: #d9d6ee; }
.intro-hero .tag { background: rgb(255 255 255 / 0.12); color: #fff; }
.intro-hero .lvl { background: rgb(255 255 255 / 0.16); color: #fff; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts div { padding: 8px 12px; border-radius: var(--r-md); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); display: grid; }
.facts b { font-size: var(--fs-lg); line-height: 1.3; }
.facts span { font-size: var(--fs-xs); color: #d9d6ee; }
.modes { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .modes { grid-template-columns: 1fr 1fr; } }
fieldset.modes { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
fieldset.modes legend { padding: 0; margin-block-end: 10px; }
.mode { position: relative; }
.mode input[type="radio"] { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 18px; block-size: 18px; }
.mode:has(input:checked) { border-color: var(--indigo); box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--indigo) 55%, var(--hair)); background: color-mix(in srgb, var(--indigo) 6%, var(--card)); }
.mode:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.start-row { padding: 10px; border-radius: var(--r-lg); background: var(--paper-2); }
.start-row .btn-sun { min-inline-size: 150px; min-block-size: var(--ctl-lg); font-size: var(--fs-base); }
.mode { display: grid; gap: 6px; text-align: start; font: inherit; color: var(--ink); cursor: pointer; padding: 16px; border-radius: var(--r-lg); background: var(--card);
  border: 1.5px solid var(--hair); box-shadow: 0 var(--ledge) 0 var(--hair); transition: transform 160ms var(--ease-std), border-color 160ms; }
.mode:hover { border-color: var(--indigo); transform: translateY(-1px); }
.mode:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hair); }
.mode h2 { font-size: var(--fs-md); display: flex; gap: 8px; align-items: center; }
.mode .ic { inline-size: 20px; block-size: 20px; color: var(--indigo); }
.mode.exam { border-color: color-mix(in srgb, var(--indigo) 45%, var(--hair)); }
.mode ul { margin: 0; padding-inline-start: 18px; color: var(--ink-2); font-size: var(--fs-sm); }
.sec-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: s; }
.sec-steps li { counter-increment: s; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--fs-sm); }
.sec-steps li::before { content: counter(s); inline-size: 24px; block-size: 24px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--ink); color: var(--paper); font-weight: 700; font-size: var(--fs-2xs); flex: none; }

.result-hero { display: grid; gap: 18px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--r-xl); background: var(--lattice), var(--card); border: 1px solid var(--hair); box-shadow: var(--e2); }
@media (min-width: 760px) { .result-hero { grid-template-columns: auto 1fr; align-items: center; } }
.score-ring { position: relative; inline-size: 144px; block-size: 144px; justify-self: center; }
.score-ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.score-ring .track { stroke: var(--paper-2); }
.score-ring .val { stroke: var(--tile-done); stroke-linecap: round; }
.score-ring .inner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; direction: ltr; }
.score-ring b { font-size: var(--fs-3xl); line-height: 1; }
.score-ring small { color: var(--ink-2); }
.band-big { font-size: var(--fs-h1); }
.band-big .en { color: var(--indigo); }
.kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.kpis div { padding: 8px 12px; border-radius: var(--r-md); background: var(--paper-2); display: grid; min-inline-size: 100px; }
.kpis b { font-size: var(--fs-lg); }
.kpis span { color: var(--ink-2); font-size: var(--fs-xs); }
.typebars { display: grid; gap: 10px; }
.typebar { display: grid; gap: 4px; }
.typebar .row { justify-content: space-between; font-size: var(--fs-sm); }
.typebar .bar { block-size: 8px; }
.typebar.weak .bar > i { background: var(--bad); }
.typebar.few { opacity: 0.6; }
.weak-tag { color: var(--bad); font-size: var(--fs-xs); }
.estimate-note { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--saffron) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--saffron) 50%, var(--hair)); }
.estimate-note .ic { flex: none; }
.rv-filter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.rv-filter button { border: 0; background: transparent; padding: 4px 12px; min-block-size: var(--ctl-sm); border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); }
.rv-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.review-list.only-wrong .rv-item.ok { display: none; }

/* ---- keyframes + motion tiers --------------------------------------------------------------------------------- */
@keyframes halo { 0%, 100% { transform: scale(0.92); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 0.5; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes foot-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes medal-in { 0% { transform: scale(0.4) rotate(-45deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
html[data-motion="0"] .tile-btn:hover .k-face, html[data-motion="0"] .htile:hover, html[data-motion="0"] .ticket:hover, html[data-motion="0"] .qtile:hover,
html[data-motion="0"] .continue-card:hover, html[data-motion="0"] .mode:hover { transform: none; }

/* ==== additions: icon mirroring, new tile states, Today v2, select->check player, personal hub ================== */

/* direction-aware icons: the sprite is drawn LTR ("right" = forward); .ic-dir mirrors it in RTL, so one logical
   "next" icon is right in both the RTL app and the LTR test player */
.ic-dir:dir(rtl) { transform: scaleX(-1); }
@supports not selector(:dir(rtl)) { [dir="rtl"] .ic-dir { transform: scaleX(-1); } [dir="ltr"] .ic-dir { transform: none; } }

/* ---- tile states: in_progress (arc), review_due (saffron dot), frozen (week dots) ---- */
.khatam.in_progress { --ts: color-mix(in srgb, var(--indigo) 22%, var(--hair)); --tl: color-mix(in srgb, var(--indigo) 30%, var(--hair)); --ti: var(--indigo); }
.khatam .k-arc-track, .khatam .k-arc { fill: none; stroke-width: 5; transform: rotate(-90deg); transform-origin: 50px 50px; }
.khatam .k-arc-track { stroke: color-mix(in srgb, var(--tile-done) 18%, transparent); }
.khatam .k-arc { stroke: var(--tile-done); stroke-linecap: round; stroke-dasharray: calc(max(var(--arc, 0), 6) * 1px) 100px; }
.khatam.review_due { --tf: var(--tile-done); --ts: var(--tile-done); --tl: var(--tile-done-ledge); --ti: var(--on-done, #fff); }
.khatam .k-due { position: absolute; inset-block-start: 8%; inset-inline-start: 8%; inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: var(--tile-sun); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--tile-sun-ledge); }
.khatam.xs .k-due { inline-size: 8px; block-size: 8px; border-width: 1px; inset-block-start: 0; inset-inline-start: 0; }
.khatam.frozen { --tf: var(--ice); --ts: var(--ice); --tl: var(--ice-ledge); --ti: var(--on-ice); }
.khatam.frozen .ic { stroke: currentColor; }
.pop-note { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: var(--r-sm); background: var(--paper-2); font-size: var(--fs-sm); color: var(--ink); }
.pop-note.due { background: color-mix(in srgb, var(--saffron) 18%, var(--card)); }
.pop-note .ic { inline-size: 16px; block-size: 16px; flex: none; }
.pnode.in_progress .pnode-label, .pnode.review_due .pnode-label { color: var(--ink); }

/* floating "back to the current tile" (bottom, end side = left in RTL), above the tab bar on phones */
.to-current { position: fixed; z-index: 50; inset-inline-end: 16px; inset-block-end: calc(16px + var(--safe-b));
  display: inline-flex; gap: 6px; align-items: center; min-block-size: 44px; padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow); }
.to-current[hidden] { display: none; }
.to-current .ic { inline-size: 18px; block-size: 18px; transition: transform 160ms var(--ease-std); }
.to-current.up .ic { transform: rotate(180deg); }
.has-tabbar .to-current { inset-block-end: calc(72px + var(--safe-b)); }
@media (min-width: 900px) { .has-tabbar .to-current { inset-block-end: 24px; } }
html[data-motion="2"] .to-current:not([hidden]), html[data-motion="3"] .to-current:not([hidden]) { animation: sheet-in 220ms var(--ease-out); }

/* ---- Today v2: one primary action, Jalali week goal with freezes, getting-started checklist ---- */
.continue-card .cc-ic { inline-size: 44px; block-size: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--tile-sun); color: var(--on-sun); box-shadow: 0 var(--ledge) 0 var(--tile-sun-ledge); }
.continue-card .cc-ic .ic { inline-size: 22px; block-size: 22px; }
.continue-card.calm { background: rgb(255 255 255 / 0.05); }
.btn-glass { background: rgb(255 255 255 / 0.12); color: #fff; border: 1px solid rgb(255 255 255 / 0.28); }
.btn-glass:hover { background: rgb(255 255 255 / 0.2); }
.mini-trail .lbl .ic { inline-size: 14px; block-size: 14px; vertical-align: -3px; }
.th-goal-top { display: flex; gap: 14px; align-items: center; justify-content: center; inline-size: 100%; }
.th-goal .ring { inline-size: 100px; block-size: 100px; flex: none; }
.th-goal .ring.full .val { stroke: var(--tile-sun); }
.th-goal .ring b svg.ic { transform: none; }
.th-goal .ring b .ic { inline-size: 26px; block-size: 26px; color: var(--tile-sun); margin-inline: auto; stroke-width: 2.25; }
.wk-head { display: grid; gap: 4px; text-align: start; }
.wk-num { font-size: var(--fs-sm); font-weight: 600; color: #d9d6ee; line-height: 1.5; }
.wk-num span { display: block; font-size: var(--fs-xl); font-weight: 800; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
.week-dots li.future { opacity: 0.55; }
.week-dots .khatam.frozen .ic { inline-size: 52%; margin-block-end: 8%; }
.th-stats .minor { font-weight: 600; background: rgb(255 255 255 / 0.05); color: #d9d6ee; }
.th-stats .minor .ic { color: #d9d6ee; }
.th-stats svg.ic { inline-size: 16px; block-size: 16px; color: var(--ice); }
.wk-goal { inline-size: 100%; text-align: start; border-block-start: 1px solid rgb(255 255 255 / 0.12); padding-block-start: 8px; }
.wk-goal summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.wk-goal form { padding-block: 8px 4px; }
.wk-goal p { color: #d9d6ee; }
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.chips-pick label { position: relative; }
.chips-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips-pick span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--r-md); font-weight: 700;
  border: 1px solid rgb(255 255 255 / 0.35); color: #fff; }
.chips-pick input:checked + span { background: var(--tile-sun); color: var(--on-sun); border-color: var(--tile-sun); }
.chips-pick input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.starter { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: rgb(255 255 255 / 0.08); }
.starter h2 { font-size: var(--fs-md); color: #fff; }
.starter .small { color: #d9d6ee; }
.starter .bar { flex: none; block-size: 8px; background: rgb(255 255 255 / 0.14); }
.starter .bar > i { background: var(--tile-sun); }
.starter .btn-sun { justify-self: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-row { display: flex; gap: 10px; align-items: center; min-block-size: 44px; padding: 4px 6px; border-radius: var(--r-sm); text-decoration: none; color: inherit; font-size: var(--fs-sm); }
a.st-row:hover { background: rgb(127 127 127 / 0.12); }
.st-row > .ic { margin-inline-start: auto; inline-size: 16px; block-size: 16px; }
.st-dot { inline-size: 22px; block-size: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; opacity: 0.8; }
.steps li.is-done .st-dot { background: var(--tile-done); border-color: var(--tile-done); color: var(--on-done, #fff); opacity: 1; }
.steps li.is-done .st-dot .ic { inline-size: 14px; block-size: 14px; stroke-width: 2.5; }
.steps li.is-done .st-row > span:not(.st-dot) { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.8; }
.starter-card .st-row { color: var(--ink); }
.todo li.is-done a { background: color-mix(in srgb, var(--tile-done) 7%, var(--card)); }
.todo li.is-done .dot { background: var(--tile-done); color: var(--on-done, #fff); }
.todo li.is-done .t { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.todo li.is-done .m { color: var(--teal); font-weight: 700; }

/* ---- lesson player: select -> Check -> Continue with a fixed footer ---- */
.lcard label.opt, .lcard label.token { position: relative; cursor: pointer; }
.lcard label.opt input, .lcard label.token input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; pointer-events: none; }
.lcard label.opt:hover:not(.wrong) { border-color: var(--indigo); }
.lcard label.opt:has(input:checked), .lcard label.token:has(input:checked) {
  border-color: var(--indigo); background: var(--accent-soft); box-shadow: 0 4px 0 color-mix(in srgb, var(--indigo) 55%, var(--line)); }
.lcard label.opt:has(input:checked) kbd { border-color: var(--indigo); color: var(--indigo); }
.lcard label.opt:has(input:focus-visible), .lcard label.token:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 2px; }
.lcard label.opt.wrong, .lcard label.token.wrong { opacity: 0.55; cursor: not-allowed; }
.lcard label.opt:active:not(.wrong) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.lcard .opt { box-shadow: 0 4px 0 var(--line); }
.lcard .tfbtns label.opt { justify-content: center; direction: rtl; }
.lfoot.idle { background: var(--card); }
.lfoot.idle .lfoot-in { grid-template-columns: 1fr auto; align-items: center; }
.lfoot-tip { margin: 0; }
.lfoot #check { min-inline-size: 160px; min-block-size: var(--ctl-lg); font-size: var(--fs-base); }
.lfoot #check:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
@media (max-width: 559px) { .lfoot.idle .lfoot-in { grid-template-columns: 1fr; } .lfoot-tip { display: none; } .lfoot #check, .lfoot #continue { inline-size: 100%; } }
.lfoot.hint { background: var(--warning-bg); border-color: color-mix(in srgb, var(--saffron) 60%, var(--hair)); }
.lfoot.hint .badge-ic { background: var(--tile-sun); color: var(--on-sun); }
.lfoot.hint strong { color: var(--warning-fg); }
.lfoot-actions { display: flex; gap: 8px 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.lfoot .report-btn { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm); }
.lfoot .report-btn .ic { inline-size: 15px; block-size: 15px; }
@media (max-width: 559px) { .lfoot-actions { flex-direction: column-reverse; align-items: stretch; } .lfoot .report-btn { align-self: center; } }
.lfoot .why { margin-block-start: 6px; }
.lfoot .why summary { cursor: pointer; font-weight: 600; min-block-size: 32px; color: var(--ink); }
.lfoot .why p { margin-block-start: 4px; }
.again-note { display: flex; gap: 6px; align-items: center; color: var(--ink-2); }
.again-note .ic { inline-size: 16px; block-size: 16px; }
.tag.again { background: var(--info-bg); color: var(--info-fg); }
.lfoot-err { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm);
  background: var(--danger-bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--hair)); font-weight: 600; }
.lesson-top .icon-btn[popovertarget] { flex: none; }
.switch-row { display: flex; gap: 12px; align-items: center; min-block-size: 44px; cursor: pointer; }
.switch-row input { inline-size: 18px; block-size: 18px; flex: none; accent-color: var(--indigo); }
.report-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0; }
.report-form textarea { inline-size: 100%; }
.report-done .badge-ic.ok-ic { inline-size: 32px; block-size: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ok); color: #fff; }
.pop h2 { font-size: var(--fs-lg); }

/* ---- practice hub + test list: personal data ---- */
.resume-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; margin-block-end: 12px; border-radius: var(--r-lg); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--saffron) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--saffron) 60%, var(--hair)); }
.resume-bar .rb-text { display: grid; gap: 2px; flex: 1 1 220px; min-inline-size: 0; }
.resume-bar .rb-text small { color: var(--ink-2); }
.resume-bar .bar { flex: none; inline-size: 100%; block-size: 4px; }
.resume-bar .btn-sun { min-block-size: var(--ctl); }
.next-step { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); text-decoration: none; font-size: var(--fs-sm);
  color: #f4f1fb; background: var(--lattice-light), linear-gradient(135deg, #14122b, var(--sk-reading) 85%); box-shadow: var(--e2); }
.next-step.listening { background: var(--lattice-light), linear-gradient(135deg, #14122b, var(--sk-listening) 85%); }
.next-step b { color: #fff; font-size: var(--fs-md); }
.next-step .ns-text { display: grid; gap: 2px; flex: 1 1 240px; }
.next-step small { color: #d9d6ee; }
.htile .mine { position: relative; z-index: 1; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); display: flex; gap: 6px; align-items: center; }
.htile .mine .ic { inline-size: 14px; block-size: 14px; color: var(--h); }
.htile .weakest { position: relative; z-index: 1; justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  background: var(--warning-bg); color: var(--warning-fg); }
.chip-rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; margin-block-end: 16px; scroll-snap-type: x proximity;
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); padding-inline: 0 24px; }
.chip-rail::-webkit-scrollbar { display: none; }
.chip-rail .pill { flex: none; white-space: nowrap; scroll-snap-align: start; }
.list-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-block-end: 12px; }
.tk-status { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-xs); font-weight: 600; }
.tk-status .bar { flex: none; inline-size: 100%; block-size: 4px; }
.tag.new { background: var(--info-bg); color: var(--info-fg); }
.tag.prog { background: var(--warning-bg); color: var(--warning-fg); }
.answer-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, 38px); direction: ltr; }
.answer-grid a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: var(--r-sm); text-decoration: none; font-weight: 700; font-size: var(--fs-2xs);
  border: 1px solid var(--line); color: var(--ink); background: var(--card); position: relative; }
.answer-grid a.ok { background: var(--success-bg); border-color: var(--ok); color: var(--ok); }
.answer-grid a.no { background: var(--danger-bg); border-color: var(--bad); color: var(--bad); }
.answer-grid a.blank { border-style: dashed; color: var(--ink-2); }
.answer-grid a .m { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; font-size: 0.7rem; line-height: 1; }
.delta { display: inline-flex; gap: 4px; align-items: center; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: var(--fs-xs); background: var(--paper-2); }
.delta.up { background: var(--success-bg); color: var(--ok); }
.delta.down { background: var(--paper-2); color: var(--ink-2); }
/* `.done` is also the lesson-complete screen class in app.css (grid, centred, 24px padding): keep it off tiles and rows */
.pnode.done { padding: 0; gap: 0; }
.sib-trail li.done { display: block; padding: 0; text-align: start; }
.mini-trail .lbl { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.starter-card .steps { max-inline-size: 440px; }

/* ==== UI refresh (docs/UI-AUDIT.md): learner screens ============================================================ */
/* Persian prompts in the lesson player were laid out LTR (full stop on the wrong side) */
.qtext:not(:lang(en)) { direction: rtl; text-align: start; }
/* the mini trail sits on the dark hero: locked tiles must not glow white */
.mini-trail .khatam.locked { --tf: rgb(255 255 255 / 0.06); --ts: rgb(255 255 255 / 0.16); --tl: rgb(255 255 255 / 0.1); --ti: #b6b2d1; }
.mini-trail { padding: 4px 6px; margin-inline: -6px; border-radius: var(--r-md); transition: background-color 160ms var(--ease-std); }
.mini-trail:hover { background: rgb(255 255 255 / 0.06); }
/* week-goal chips: one row of seven on every phone */
.chips-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.chips-pick span { inline-size: 100%; }
/* lesson / test hero facts: an even grid instead of a ragged wrap */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.facts div { min-inline-size: 0; }
/* the English subtitle under a Persian title starts on the same (right) edge */
.lh-en, .intro-hero h1 + .en, .intro-hero p.en { text-align: right; }
/* Today: tidy empty states and the recent-tests list */
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recent-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-md);
  text-decoration: none; border: 1px solid var(--hair); background: var(--paper); transition: border-color 160ms; }
.recent-list a:hover { border-color: var(--indigo); }
.recent-list .ri { inline-size: 30px; block-size: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--sk-reading) 12%, var(--card)); color: var(--sk-reading); }
.recent-list .ri.listening { background: color-mix(in srgb, var(--sk-listening) 12%, var(--card)); color: var(--sk-listening); }
.recent-list .ri .ic { inline-size: 16px; block-size: 16px; }
.recent-list .t { font-weight: 600; font-size: var(--fs-sm); line-height: 1.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list .m { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.weekbars.is-empty i { opacity: 0.35; }
.chart-empty { margin-block-start: -4px; }
/* chat: the play button inside a partner bubble is a compact inline control */
.bubble .play-btn { min-block-size: 32px; min-inline-size: 32px; padding-inline: 6px; border-width: 1px; vertical-align: middle; margin-inline-start: 6px; display: inline-flex; }
.bubble .play-btn .ic { inline-size: 16px; block-size: 16px; }
.bubble.partner { box-shadow: 0 1px 2px rgb(20 18 43 / 0.05); }
.coach { border: 1px solid color-mix(in srgb, var(--saffron) 45%, var(--hair)); line-height: 1.9; }
.coach bdi { font-family: var(--f-en, "Atkinson Next", system-ui, sans-serif); }
.composer { padding-block: 10px; }
.composer input { border-radius: 999px; padding-inline: 18px; }
.composer .btn { min-inline-size: 44px; padding-inline: 12px; }
.has-tabbar .composer { inset-block-end: calc(62px + var(--safe-b)); }
@media (min-width: 900px) { .has-tabbar .composer { inset-block-end: 0; } }
/* the 7-day XP bars never grew: a %-height needs a definite grid track */
.weekbars .wb { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
.weekbars .wb i { align-self: end; inline-size: min(22px, 64%); border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--indigo) 75%, var(--card)), var(--indigo)); }
.weekbars .wb.today i { background: linear-gradient(to bottom, color-mix(in srgb, var(--tile-done) 70%, var(--card)), var(--tile-done)); }
.weekbars .wb.today small { color: var(--ink); font-weight: 800; }
.recent-list .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* stat strip: a few numbers + one action (vocab decks, notebook) */
.stat-strip { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px; margin-block-end: 16px;
  border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--hair); box-shadow: var(--e1); }
.stat-strip dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; flex: 1 1 320px; }
.stat-strip dl > div { padding: 8px 10px; border-radius: var(--r-md); background: var(--well); display: grid; gap: 0; min-inline-size: 0; }
.stat-strip dl > div.hot { background: color-mix(in srgb, var(--saffron) 20%, var(--card)); }
.stat-strip dt { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 500; line-height: 1.5; }
.stat-strip dd { margin: 0; font: 700 var(--fs-xl)/1.25 var(--f-display); }
.stat-strip dd small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); }
.stat-strip > .btn { flex: 1 1 auto; max-inline-size: 280px; }
@media (max-width: 559px) { .stat-strip > .btn { max-inline-size: none; inline-size: 100%; } }
.deck-jump { position: sticky; inset-block-start: 62px; z-index: 5; box-shadow: 0 6px 16px -14px rgb(20 18 43 / 0.5); }
/* ---- vocabulary review: a real flashcard ---- */
.rvcard { position: relative; overflow: hidden; gap: 12px; justify-items: center; text-align: center; padding: 20px 16px 18px; border-radius: var(--r-xl); background: var(--card);
  border: 1px solid var(--hair); box-shadow: 0 4px 0 color-mix(in srgb, var(--indigo) 12%, var(--hair)), 0 18px 40px -28px rgb(20 18 43 / 0.45); }
.rvcard::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 56px; pointer-events: none;
  background: var(--lattice), linear-gradient(to bottom, color-mix(in srgb, var(--indigo) 8%, var(--card)), transparent); }
.rvcard > * { position: relative; }
.rvcard .qn { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; color: var(--teal); }
.rvcard .qtext { text-align: center; font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem); line-height: 1.2; display: grid; gap: 4px; justify-items: center; }
.rvcard .qtext .pos { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); font-family: var(--f-body); }
.rvcard .row { justify-content: center; }
.rvcard .rvex { text-align: center; max-inline-size: 36ch; font-style: italic; }
.rvcard .rvfa { font-size: var(--fs-xl); font-weight: 700; color: var(--teal); }
.rvcard .sheet { text-align: start; justify-self: stretch; }
.rvcard #reveal { inline-size: 100%; max-inline-size: 400px; min-block-size: var(--ctl-lg); font-size: var(--fs-base); margin-block-start: 4px; }
.rvcard .rates { justify-self: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-block-start: 4px; }
.rvcard .rate { min-block-size: 64px; padding: 8px 4px; border-radius: var(--r-lg); box-shadow: 0 var(--ledge) 0 var(--hair); border-width: 1px; }
.rvcard .rate:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hair); }
.rvcard .rate.r1 { border-color: color-mix(in srgb, var(--bad) 55%, var(--hair)); } .rvcard .rate.r1 .rl { color: var(--bad); }
.rvcard .rate.r2 .rl { color: var(--warning-fg); }
.rvcard .rate.r3 { border-color: color-mix(in srgb, var(--indigo) 50%, var(--hair)); background: color-mix(in srgb, var(--indigo) 5%, var(--card)); } .rvcard .rate.r3 .rl { color: var(--indigo); }
.rvcard .rate.r4 { border-color: color-mix(in srgb, var(--ok) 50%, var(--hair)); } .rvcard .rate.r4 .rl { color: var(--ok); }
.rvstats { justify-content: center; gap: 8px; margin-block-end: 14px; }
.rvstats span { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 10px; border-radius: 999px; background: var(--well); font-size: var(--fs-xs); }
.rvcard.done .hero-cta { justify-content: center; margin-block-start: 6px; }
/* mistakes notebook card: same card language as the vocab flashcard, left-aligned English */
.nbcard { padding: 18px 16px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--hair);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--saffron) 22%, var(--hair)), 0 18px 40px -28px rgb(20 18 43 / 0.45); }
.nbcard .qtext { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem); padding: 10px 12px; border-radius: var(--r-md); background: var(--well); }
.nbcard .gapline input { flex: 1 1 200px; }
.nbcard > .linkbtn { justify-self: start; }
.nbcard.done { justify-items: center; text-align: center; }
.nbcard.done > .ic { inline-size: 44px; block-size: 44px; padding: 10px; border-radius: 50%; background: var(--success-bg); color: var(--ok); }
#nbstage > .sheet { margin-block-end: 14px; }
/* Today, desktop: the two card stacks flow as balanced columns instead of one short and one very long column */
@media (min-width: 980px) {
  .page > .dash:has(#todo-h) { display: block; columns: 2; column-gap: 12px; }
  .page > .dash:has(#todo-h) > .stack { display: contents; }
  .page > .dash:has(#todo-h) > .stack > * { break-inside: avoid; margin-block-end: 12px; inline-size: 100%; }
}
.deck-jump { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); padding-inline-end: 24px; }

/* ==== "small and classy" refinement (docs/UI-DESIGN.md §۷): touch sizes for controls that live in scroll rails or
   segmented groups, where an invisible hit area would be clipped. Mouse users get the compact 34px sizes. ========== */
@media (pointer: coarse) {
  .seg-tabs { padding: 2px; }
  .seg-tabs a, .pill, .rv-filter button, .seg button, .tab, .bl-chips a { min-block-size: 40px; }
  .rv-filter { padding: 2px; }
}

/* test list "all" view: one heading per skill so listening tests never sit in the reading grid */
.tl-skill { display: flex; align-items: center; gap: 8px; margin-block: 20px 10px; font-size: var(--fs-lg); }
.tl-skill .ic { color: var(--sk-reading); }
.tl-skill.listening .ic { color: var(--sk-listening); }
.tl-skill small { font-size: var(--fs-sm); font-weight: 400; }

/* ==== Apple-grade component layer (docs/DESIGN-APPLE.md §4–5) ====================================================
   Loaded last of the global sheets (base.html: app, ui, kashi) so it wins over both at equal specificity. One place that turns the existing components into grouped, borderless surfaces: resting cards lose their outline
   and get the soft --e1 lift (dark mode keeps a 0.5px light edge through --e1), nothing lifts on hover, pressing a
   tappable surface scales it down at once (feedback on pointer-down), segmented controls are iOS segments. */
:is(.card, .lrow, .lcardx, .tcard, .passage, .qtile, .htile, .prompt-card, .fbcard, .stat, .notice, .track-meter, .chart, .table-wrap,
  .rv-item, .issue, .auth-card, .next-item, .plan-day, .statchip, .todo a, .now-card, .empty-mini, .toast, .lockbox) {
  border-color: transparent; box-shadow: var(--e1);
}
:is(.card, .lrow, .lcardx, .htile, .qtile, .tcard, .passage, .prompt-card, .fbcard, .notice, .auth-card, .chart, .table-wrap) { border-radius: var(--r-lg); }
.card.link, .lcardx, .lrow, .htile, .qtile, .next-item, .todo a, .continue-card {
  transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std); }
.card.link:hover, .lcardx:hover, .lrow:hover, .htile:hover, .qtile:hover, .next-item:hover, .continue-card:hover, .bcard:hover, .note:hover,
.stile:hover, .rate:hover, button.opt:hover:not([disabled]), .chip:hover:not(:disabled) { transform: none; }
@media (hover: hover) {
  .card.link:hover, .lcardx:hover, .lrow:hover, .htile:hover, .qtile:hover, .next-item:hover, .todo a:hover { box-shadow: var(--e2); border-color: transparent; }
}
.card.link:active, .lcardx:active, .lrow:active, .htile:active, .qtile:active, .next-item:active, .todo a:active, .continue-card:active {
  transform: scale(0.98); transition-duration: var(--dur-1); }
.htile::after { display: none; }
.htile { padding: 16px; gap: 6px; }
.htile .hic { border-radius: 11px; box-shadow: none; }
.htile .count { background: color-mix(in srgb, var(--h) 12%, transparent); }
.qtile.hot { box-shadow: var(--e1), inset 0 0 0 1.5px color-mix(in srgb, var(--saffron) 70%, transparent); }
.lcardx.done { box-shadow: var(--e1), inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 45%, transparent); }
.todo a { background: var(--card); }
.card h2 { font-size: var(--fs-lg); }
.page { padding-block: 12px 64px; }
.page-head { gap: 8px; margin-block-end: 24px; }
.page-head .kicker { color: var(--ink-2); font-weight: 600; }
.crumbs { font-size: var(--fs-xs); }

/* segmented controls (iOS): a fill track; the selected segment is a raised card, not an inverted pill */
.seg-tabs, .seg { display: inline-flex; gap: 0; padding: 2px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow-x: auto; }
.seg-tabs a, .seg button { border: 0; background: transparent; border-radius: 8px; min-block-size: 32px; padding: 4px 14px; font-weight: 500; font-size: var(--fs-sm); color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std); }
.seg-tabs a.on, .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 650;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04); }
:root[data-theme="dark"] :is(.seg-tabs a.on, .seg button[aria-pressed="true"]) { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.seg-tabs a.on, .seg button[aria-pressed="true"]) { background: #636366; } }
@media (pointer: coarse) { .seg-tabs a, .seg button { min-block-size: 40px; } }

/* filter chips: capsules on a fill; the selected one takes the accent */
.pill { border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-weight: 500; transition: background-color var(--dur-2), color var(--dur-2); }
@media (hover: hover) { .pill:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: transparent; } }
.pill.on { background: var(--indigo); color: var(--on-indigo); border-color: transparent; box-shadow: none; font-weight: 650; }
.tag { font-weight: 500; }

/* inputs: 12px corners, a quiet edge, an accent halo on focus */
:is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="file"], [type="hidden"]), .input, select, textarea) {
  border-radius: 12px; border-color: color-mix(in srgb, var(--line) 55%, transparent); }
input:focus-visible, .input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--indigo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 22%, transparent); }
.choices label, .choice { border-radius: 12px; }
.choices label:has(input:checked), .choice:has(input:checked) { background: var(--tint); border-color: var(--indigo); }

/* empty states: no dashed box, just the symbol, a title, one line, one action */
.empty { border: 0; background: transparent; }
.empty > .ic:first-child { box-shadow: none; background: var(--tint); border-radius: 50%; }
.lockbox { border: 0; background: color-mix(in srgb, var(--saffron) 12%, var(--card)); }

/* dialogs: a centred card on desktop, a bottom sheet on phones */
.tp-dialog { border-radius: var(--r-xl); box-shadow: var(--e2); padding: 24px; }
.tp-dialog::backdrop { background: var(--scrim); }
@media (max-width: 599px) {
  .tp-dialog { margin: auto 0 0; inline-size: 100%; max-inline-size: 100%; border-end-start-radius: 0; border-end-end-radius: 0;
    padding-block-end: calc(24px + var(--safe-b)); }
  html:not([data-motion="0"]) .tp-dialog[open] { animation: sheet-rise var(--dur-3) var(--spring); }
}
/* the popover sheets of the learner layer (.pop) get the same treatment */
.pop { box-shadow: var(--e3); }
.pop::backdrop { background: var(--scrim); }

/* toasts */
.toast { border: 0; border-radius: var(--r-md); }

/* auth: a calm card, no glazed band */
.auth-card { border-radius: var(--r-xl); padding: 28px 24px; box-shadow: var(--e2); }
.auth-card::before { display: none; }
.auth-wrap { background: none; }

/* sticky learner bars over content use the material */
.start-bar, .court-head { border: 0; background: var(--mat-card); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); box-shadow: var(--e2); }
.has-tabbar .start-bar { inset-block-end: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
.court-head { inset-block-start: calc(var(--header-h) + var(--safe-t) + 8px); }
.lfoot { border-block-start: 0; box-shadow: var(--e3); border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl); }

/* tables: hairline rows */
.table th { background: transparent; font-weight: 600; }
.table th, .table td { border-block-end: 0.5px solid var(--sep); }
:is(.ticket, .deckc, .mode, .resume-bar, .stat-strip, .estimate-note) { border-color: transparent; box-shadow: var(--e1); }
.ticket::before { display: none; }
.ticket, .deckc { transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-std); }
.ticket:hover, .deckc:hover, .mode:hover { transform: none; }
@media (hover: hover) { .ticket:hover, .deckc:hover { box-shadow: var(--e2); border-color: transparent; } }
.ticket:active, .deckc:active { transform: scale(0.98); transition-duration: var(--dur-1); }
.ticket .tk-meta { border-block-start: 0.5px solid var(--sep); }
.deckc.on, .mode:has(input:checked) { box-shadow: var(--e1), inset 0 0 0 1.5px color-mix(in srgb, var(--h, var(--indigo)) 60%, transparent); }
.estimate-note { background: color-mix(in srgb, var(--saffron) 12%, var(--card)); }
/* large titles carry no decorative icon (Apple: the title is the symbol) */
.page-head h1 > .ic:first-child, .path-head h1 > .ic:first-child { display: none; }
/* inside the Android app (html.in-app, set by the boot script from the user agent): no website footer; its pages move
   into the menu sheet (.app-only), which is hidden on the website */
.in-app .site-footer { display: none; }
html:not(.in-app) .app-only { display: none; }
/* Android 15+ draws the page under a transparent status bar. Inside the app keep a strip of page ground behind it, so the
   icons (dark on light pages, light on dark ones: fx.js syncSystemBars) never sit on a dark card scrolling past.
   --safe-area-inset-top is injected by Capacitor (SystemBars insetsHandling "css"). */
.in-app body::before { content: ""; position: fixed; z-index: 2147483000; inset-block-start: 0; inset-inline: 0;
  block-size: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); background: var(--paper); pointer-events: none; }

/* ==== phones & the Android app: focused activities (mobile QA, 2026-10-15) ======================================
   Inside the app (Android 15+ edge-to-edge) the page runs under the status bar and the gesture bar; --safe-t/--safe-b
   (app.css) carry those insets. Pages without the site header (lesson player, checkpoint, placement, test player,
   writing focus mode) must pad for the status bar themselves, and fixed or sticky bottom bars for the gesture bar. */
.lesson-wrap { padding-block-start: var(--safe-t); }
/* the fixed answer sheet (.lfoot) never covers the last option: lesson.js measures it into --lfoot-h; the done screen
   (no sheet) keeps clear of the gesture bar */
.lesson-main { padding-block-end: calc(var(--lfoot-h, 220px) + 24px + var(--safe-b)); }
.lfoot { max-block-size: calc(70dvh - var(--safe-t)); overscroll-behavior: contain; }
.lfoot-msg { min-inline-size: 0; }
.lfoot-msg > div, .lfoot .ans, .lfoot-msg p { min-inline-size: 0; overflow-wrap: anywhere; }
/* programmatic focus targets (the question title after each swap, the done heading) draw no ring; real controls keep
   their :focus-visible ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
/* long English options, tokens and prompts wrap instead of pushing the page sideways */
.opt > span, .token, .stile, .qtext, .prompt-big, .tline, .pool { overflow-wrap: anywhere; min-inline-size: 0; }
/* a two-line button label (e.g. «درس بعدی: …») gets breathing room instead of touching the capsule edge */
.btn { padding-block: 8px; }
.btn-sm { padding-block: 5px; }
/* the lesson's passage bar (listen again / read again): compact, wraps at 360px */
.qpassage { flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-block-end: 4px; }
.qpassage > details { flex: 1 1 180px; min-inline-size: 0; }
.qpassage > details > summary { min-block-size: 40px; font-size: var(--fs-sm); }
.qpassage > details[open] > p { max-block-size: 40dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; margin-block-start: 6px;
  border-radius: var(--r-md); background: var(--well); font-size: var(--fs-sm); line-height: 1.7; }
/* bottom sheets never grow past the screen */
.pop { max-block-size: calc(100dvh - var(--safe-t) - var(--safe-b) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.tp-dialog { max-block-size: calc(100dvh - var(--safe-t) - 12px); overflow-y: auto; overscroll-behavior: contain; }

/* test player: the top bar clears the status bar; the navigator clears the gesture bar and keeps Prev/Next/Finish in
   view (only the question numbers scroll sideways) */
.tp:has(> .tp-tabs) { grid-template-rows: auto auto 1fr auto; }
.tp-top { padding-block-start: calc(8px + var(--safe-t)); flex-wrap: nowrap; min-inline-size: 0; }
.tp-title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-top > :not(.tp-title) { flex: none; }
.tp-top #tp-help { min-inline-size: 44px; }
.tp-nav { padding-block-end: calc(8px + var(--safe-b)); overflow: visible; }
.tp-navq { flex: 1 1 auto; min-inline-size: 0; display: flex; gap: 6px; align-items: center; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-block: 4px; padding-inline: 8px 18px; scroll-padding-inline: 12px; scroll-snap-type: x proximity; }
.tp-navq > * { scroll-snap-align: center; }
/* the strip fades at its ends, so a cut-off number reads as "more this way" (the navigator is LTR) */
.tp-navq { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 18px), transparent); }
.tp-navq::-webkit-scrollbar { display: none; }
.tp-nav > .tpt-step, .tp-nav > #tp-finish { flex: none; }
@media (pointer: coarse) { .navq { inline-size: 40px; block-size: 40px; } }
@media (max-width: 979px) {
  /* reading on a phone: the Passage / Questions switch stays under the top bar while either pane scrolls */
  .tp-tabs { position: sticky; inset-block-start: calc(var(--tp-top-h, 53px) + var(--safe-t)); z-index: 19; display: flex; margin: 0;
    padding: 6px 12px; border-radius: 0; background: var(--mat); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
  .tp-tabs button { flex: 1 1 0; }
  .tp-pane { padding: 16px 16px 32px; }
  .qitem { scroll-margin-block: calc(120px + var(--safe-t)) 90px; }
}

/* sticky bars under the site header: the header is taller inside the app (status bar), so offsets include --safe-t
   (writing.css, speaking.css and tools.css carry the same fix for their own bars) */
.deck-jump { inset-block-start: calc(var(--header-h) + var(--safe-t) + 10px); }
@media (max-width: 899px) {
  .has-tabbar .composer { inset-block-end: calc(var(--tabbar-h) + var(--safe-b)); }
  .has-tabbar .to-current { inset-block-end: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
}

/* htmx loading lines (htmx's own indicator styles are off: htmx-config includeIndicatorStyles=false) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* on-screen keyboard (phones): typing hides the tab bar, and the bars that sat above it drop to the keyboard edge.
   In the app the WebView shrinks above the keyboard (and in Chrome with interactive-widget=resizes-content), so
   without this the tab bar rode on top of the keyboard and ate a fifth of what was left of the screen. */
@media (max-width: 899px) and (pointer: coarse) {
  body:has(:is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="hidden"]), textarea, [contenteditable="true"]):focus) {
    padding-block-end: 0 !important;
  }
  body:has(:is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="hidden"]), textarea, [contenteditable="true"]):focus) .tabbar { display: none; }
  body:has(:is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="hidden"]), textarea, [contenteditable="true"]):focus)
    :is(.composer-wrap, .composer) { inset-block-end: 0; }
  body:has(:is(input:not([type="radio"], [type="checkbox"], [type="range"], [type="button"], [type="submit"], [type="file"], [type="hidden"]), textarea, [contenteditable="true"]):focus)
    .start-bar { inset-block-end: 8px; }
}
@media (max-width: 979px) and (pointer: coarse) {
  .tp:has(:is(.gapin, input[type="text"], textarea):focus) .tp-nav { display: none; }
}
/* touch screens: keyboard-shortcut badges are noise, and buttons that scripts focus after a swap («ادامه», the suggested
   rating, «نمایش پاسخ») must not look pressed or selected; keyboard users on a fine pointer keep both */
@media (pointer: coarse) {
  .opt kbd, .rate kbd, .tfbtns kbd { display: none; }
  :is(#continue, #check, #reveal, #rv-answer, .rate, .rv-choice, .lfoot .btn):focus-visible { outline: none; }
}