/* ==========================================================================
   Lesson intro and the lesson player (also the checkpoint, technique drills that reuse the player cards).
   Loaded only by the templates that need it ({% block feature_css %}); split out of app.css, ui.css and
   kashi.css (docs/PERFORMANCE.md §7) in their original order, so the cascade is unchanged.
   ========================================================================== */

/* ---- from app.css ---- */
/* ---- lesson page --------------------------------------------------------- */
.lesson-wrap { min-block-size: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.lesson-top { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.lesson-top .bar { block-size: 10px; }
.lesson-main { display: grid; align-content: start; padding-block: 8px 40px; }
.lcard { max-inline-size: 640px; margin-inline: auto; inline-size: 100%; display: grid; gap: 16px; }
.lcard .qn { font-weight: 700; color: var(--teal); font-size: var(--fs-sm); }
.qtext { font-family: var(--f-display); font-size: clamp(1.25rem, 1.4vw + 0.95rem, 1.625rem); font-weight: 700; direction: ltr; text-align: start; unicode-bidi: isolate; line-height: 1.4; }
.qhint { color: var(--ink-2); }
.opts { display: grid; gap: 10px; }
.opt {
  text-align: start; direction: ltr; border: 1.5px solid var(--hair); border-radius: var(--r-lg); background: var(--card); padding: 10px 16px; font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; min-block-size: 52px;
  display: flex; align-items: center; gap: 12px; transition: transform 160ms var(--ease-std), border-color 160ms, background-color 160ms;
}
.opt kbd { font-family: var(--f-display); font-size: var(--fs-2xs); border: 1px solid var(--hair); border-radius: var(--r-xs); padding: 0 6px; color: var(--ink-2); line-height: 1.6; }
@media (hover: hover) and (pointer: fine) { button.opt:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--indigo); } }
.opt[disabled] { cursor: default; }
.opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
html[data-motion="2"] .opt.wrong.fresh, html[data-motion="3"] .opt.wrong.fresh { animation: shake 280ms var(--ease-std); }
html[data-motion="2"] .opt.right.fresh, html[data-motion="3"] .opt.right.fresh { animation: opt-pop 420ms var(--ease-pop); }
.opt .mark { margin-inline-start: auto; font-weight: 800; }
.opt.right .mark { color: var(--ok); }
.opt.wrong .mark { color: var(--bad); }
.htmx-request .opt { opacity: 0.7; }
.fix del { color: var(--bad); }
.fix ins { color: var(--ok); text-decoration: none; font-weight: 700; }
.ex { color: var(--ink-2); font-size: var(--fs-sm); }
.checks, .selfcheck { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html[data-motion="0"] .stile, html[data-motion="0"] .rate { transition-duration: 0.01ms; }
@media (hover: hover) and (pointer: fine) { html[data-motion="0"] .stile:hover, html[data-motion="0"] .rate:hover { transform: none; } }
.sheet + .tileactions { margin-block-start: 14px; }
#sres { margin-block-start: 16px; }
/* ---- from ui.css ---- */
/* lesson intro: teach cards ------------------------------------------------------ */
.teach { display: grid; gap: 12px; }
.tcard { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 8px; }
.tcard.tip { border-inline-start: 3px solid var(--saffron); }
.tcard.rule { border-inline-start: 3px solid var(--indigo); }
.tcard h3 { font-size: var(--fs-md); }
.passage { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 8px; }
.passage .text { white-space: pre-line; line-height: 1.8; }
.tcard h2, .passage h2 { font-size: var(--fs-md); }
/* the locked next lesson beside «درس بعدی» on the lesson end screen (templates/learn/_done.html) */
.next-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
/* ---- from kashi.css ---- */
/* ---- 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); }
.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-card); color: var(--ink);
  background: var(--surface); box-shadow: var(--e1); }  /* Soft Precision: a light card; the skill colour stays on the khatam */
.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: var(--ink-2); }
.lesson-hero .lh-unit { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.lh-main { display: flex; gap: 12px; align-items: center; }
.lesson-hero h1 { color: var(--ink); font-size: var(--fs-h1); font-weight: 800; }
.lh-en { color: var(--ink-2); text-align: start; } /* <bdi> keeps the English subtitle on the start (right) edge */
.lh-sum { color: var(--ink-2); max-inline-size: 62ch; font-size: var(--fs-md); line-height: 1.8; }
.lesson-hero .draftflag { color: var(--ink-2); }
.lesson-hero .draftflag a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lesson-hero .tag.premium { color: var(--warn-ink); background: var(--warn-soft); }
.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; }
@media (hover: hover) and (pointer: fine) { .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); }
/* ---- 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; }
@media (hover: hover) and (pointer: fine) { .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); }
.accent-pick { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-block-size: 44px; }
.accent-pick .seg button { min-block-size: 40px; padding-inline: 16px; }
.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; }
.sib-trail li.done { display: block; padding: 0; text-align: start; }
/* ==== 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; }
/* ==== 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; }
/* 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; }