/* components.css — Site design system v2.2.0 «کاغذِ ساده» — FROZEN by owner decision, Sep 2026.
   Spec: _specs/site-design-system.md · registry: _specs/design-registry.md · hash: FREEZE file.
   A restyle is a Claude Design session, never a hand edit. Consumes tokens.css only — no raw hex except the ruled-paper
   SVG data-URI line stroke. */

/* ============ shared: ruled-paper SVG tile (never a gradient) ============ */
/* v2.2.0: ruled repeat retired (owner 2026-09-01) — flat paper; see .margin-rule */
.paper-rules{
  background:var(--paper);
}

/* v2.2.0 — the notebook whisper on marketing/article grounds */
.margin-rule{ position:relative; }
.margin-rule::before{ content:""; position:absolute; inset-block:0; inset-inline-start:16px; width:1.5px; background:var(--line-gold); pointer-events:none; }

/* ============ reduced motion — resets every transition/animation ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
  .lbar__toggle,.btn,.header__pill{ transform:none !important; }
}

/* ============ C-Chrome: .header ============ */
/* FROZEN v2 — Site design system v2 «دفترچهٔ وب» — by owner decision, Aug 2026.
   Source: _tools/data/redesign/system/components-handoff.md. A restyle is a Claude Design
   session, never a hand edit. */
.header{
  background:var(--slip);
  border-bottom:1.5px solid var(--ink);
}
.header__inner{ min-height:56px; }
.header__trail{
  min-height:44px;
  border-top:1px solid var(--line-gold);
}
.header__pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--slip);
  border:1.5px dashed var(--line-dash);
  border-radius:var(--r-row);
  color:var(--ink);
  font-weight:700;
  min-height:44px;
  box-shadow:none;
}
@media (hover:hover){
  .header__pill:hover{ background:var(--paper); border-color:var(--ink); }
}
.header__pill:focus-visible{ background:var(--slip); border-color:var(--ink); outline:2px solid var(--ink); outline-offset:2px; }
.header__pill:active{ background:var(--paper); border-color:var(--ink); border-style:solid; }
.header__crumb,.header__rail-crumb{ color:var(--ink-soft); font-size:var(--fs-meta); }
.header__current{ color:var(--ink); font-weight:700; }

/* ============ C-Chrome: .footer ============ */
.footer{
  background:var(--slip);
  border:1.5px solid var(--ink);
  border-radius:var(--r-surface);
}
.footer a{
  color:var(--ink-soft);
  font-weight:600;
  font-size:var(--fs-body);
  min-height:44px;
}
.footer a:last-child{ color:var(--ink); font-weight:700; }
.footer a:hover,.footer a:focus-visible{ color:var(--ink); }
.footer a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:var(--r-chip);
}
.footer__wordmark-divider{ border-top:1px dashed var(--line-dash); }

/* ============ C-Chrome: .lbar (mobile bottom wayfinding bar) ============ */
.lbar{
  background:var(--slip);
  border-top:1.5px solid var(--ink);
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.lbar__fill{ background:var(--ink); height:2px; }
.lbar__sheet{ border-radius:var(--r-surface) var(--r-surface) 0 0; }
.lbar__item{ min-height:44px; }
.lbar__item.is-current{
  background:var(--paper);
  color:var(--ink);
  font-weight:700;
  border-radius:var(--r-control);
}
.lbar__toggle:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ============ C-Base: reset + document (added 2026-08-27 — the sweep removes each page's
   inline base block, so the system must carry it; extracted from the pre-v2 base and re-tokened) ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-fa);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { text-wrap: balance; margin: 0; color: var(--ink); }
p, li, blockquote { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; font-weight: 600; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font-family: inherit; cursor: pointer; }

/* ============ C-Chrome: skip-link ============ */
.skip-link{
  position:absolute;
  inset-block-start:12px;
  inset-inline-start:12px;
  z-index:100;
  padding:8px 16px;
  font-family:var(--font-fa);
  font-weight:600;
  font-size:var(--fs-body);
  border-radius:var(--r-control);
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-200%);
  transition:transform var(--dur-base) var(--ease);
}
.skip-link:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--highlighter);
  outline-offset:2px;
}

/* ============ C-Actions: .btn ============ */
.btn{ min-height:56px; border-radius:var(--r-surface); box-shadow:none; font-size:var(--fs-body); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.btn.btn--primary{
  border:1.5px solid var(--ink);
  background:var(--highlighter);
  color:var(--ink);
  font-weight:700;
}
.btn.btn--primary:hover{ background:var(--highlighter); opacity:.82; }
.btn.btn--primary:active{ background:var(--highlighter); opacity:.68; transform:translateY(1px); }
.btn.btn--primary:disabled{
  border-color:var(--line-disabled);
  background:var(--paper-rule);
  color:var(--line-disabled);
  opacity:.7;
}
.btn.btn--primary.is-loading{ background:var(--highlighter); color:var(--ink); }
.btn--primary__spinner{ stroke:var(--ink); animation:btn-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce){ .btn--primary__spinner{ animation:none; } }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

.btn.btn--secondary{
  border:1.5px solid var(--ink);
  background:var(--slip);
  color:var(--ink);
  min-height:56px;
  border-radius:var(--r-surface);
}
.btn.btn--secondary:hover{ background:var(--paper); }
.btn.btn--secondary:active{ transform:translateY(1px); opacity:.9; }
.btn.btn--secondary:disabled{
  border-color:var(--line-disabled);
  background:var(--paper-rule);
  color:var(--line-disabled);
  opacity:.7;
}

.btn.btn--quiet{
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-weight:600;
  min-height:44px;
}
.btn.btn--quiet:hover{ color:var(--ink); border-bottom:1.5px solid var(--ink); }
.btn.btn--quiet:disabled{ color:var(--line-disabled); }

/* ============ C-Actions: .bridge ============ */
.bridge{
  background:var(--slip);
  border:1.5px solid var(--ink);
  border-radius:var(--r-surface);
  transform:rotate(-0.6deg);
  transition:transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.bridge:hover{ transform:rotate(-0.6deg) translateY(-2px); background:var(--paper); }

/* ============ C-Actions: the «مشاوره» consult door ============ */
.consult-door{
  border:1.5px dashed var(--line-dash);
  border-radius:var(--r-row);
}
.consult-door:hover{ border:1.5px solid var(--ink); }
.consult-door:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ============ C-Cards: a.lesson / div.lesson.lesson--soon (frozen contract) ============ */
a.lesson,.lesson{
  border:1.5px solid var(--ink);
  border-radius:var(--r-row);
  background:var(--slip);
  transition:transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
a.lesson:hover{ background:var(--paper); transform:translateY(-2px); }
a.lesson:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.lesson.lesson--soon{ opacity:.42; pointer-events:none; }

/* ============ C-Cards: .dcard ============ */
.dcard{
  border:1.5px solid var(--ink);
  border-radius:var(--r-row);
  background:var(--slip);
}
.dcard:hover{ background:var(--paper); transform:translateY(-2px); }
.dcard:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.dcard.is-selected,.dcard.is-active{
  border-inline-start:5px solid var(--highlighter);
}

/* ============ C-Cards: .recog ============ */
.recog__claim{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--ink); }
.recog__leadin{ font-size:var(--fs-meta); color:var(--ink-meta); }
.recog__btn{ min-height:44px; border:1.5px solid var(--ink); border-radius:var(--r-control); }
.recog__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.recog__btn[data-recog="yes"]:hover,
.recog__btn[data-recog="yes"]:focus-visible{ background:var(--highlighter); }
.recog__btn[data-recog="no"]{
  border:1.5px solid var(--line-disabled);
  color:var(--ink-soft);
}
.recog__cause{
  border-inline-start:var(--mark-annotation-border);
  padding-inline-start:var(--sp-3);
}

/* ============ C-Cards: .blindspot ============ */
.blindspot__text em{ border-bottom:var(--mark-dash); font-style:normal; }
.blindspot__opt{
  border:1.5px solid var(--ink);
  border-radius:var(--r-control);
  background:var(--slip);
  min-height:52px;
  font-size:var(--fs-body);
  font-weight:600;
}
.blindspot__opt:hover{ background:var(--paper); }
.blindspot__opt:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.blindspot__opt.is-correct{
  background:var(--highlighter);
  border:1.5px solid var(--ink);
}
.blindspot__opt.is-wrong{
  border-color:var(--ink-soft);
  color:var(--ink-soft);
}
.blindspot__reveal{
  border-inline-start:var(--mark-annotation-border);
  padding-inline-start:var(--sp-3);
}

/* ============ C-Article ============ */
.lrail__item.is-current,.lbar__item.is-current{
  background:var(--paper);
  border-inline-start:3px solid var(--highlighter);
}
.beat{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
}
.il{
  color:var(--ink);
  font-weight:700;
  border-bottom:1.5px solid var(--highlighter);
  text-decoration:none;
}
.il--pending{
  border-bottom:1.5px dashed var(--line-dash);
  color:var(--ink-soft);
}
.lfig{
  background:var(--paper);
  border:1px dashed var(--line-gold);
  border-radius:var(--r-control);
}
.lfig__caption{
  font-size:var(--fs-meta);
  color:var(--ink-meta);
  text-align:center;
}
.audit{
  background:var(--slip);
  border:1.5px solid var(--ink);
  border-radius:var(--r-surface);
}
.mark-read{
  min-height:44px;
  min-width:44px;
}
.mark-read__box{
  width:24px;
  height:24px;
  border:1.5px solid var(--line-disabled);
}
.mark-read.is-read .mark-read__box{
  border:1.5px solid var(--ink);
  background:var(--highlighter);
}

/* ============ C-Drill: .choices / .chip ============ */
.choices,.chip{
  border:1.5px solid var(--ink);
  border-radius:var(--r-control);
  background:var(--slip);
  min-height:52px;
  font-size:var(--fs-body);
  font-weight:600;
}
.choices:hover,.chip:hover{ background:var(--paper); }
.choices:focus-visible,.chip:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.opt[aria-pressed="true"]:not([data-revealed]){
  background:var(--paper);
  border-inline-start:5px solid var(--highlighter);
}
.opt.is-correct{ background:var(--highlighter); font-weight:700; }
.opt.is-wrong{ border-color:var(--ink-soft); color:var(--ink-soft); }
.opt[disabled],.opt.is-disabled{ opacity:.6; pointer-events:none; }

/* ============ C-Drill: .feedback / .mentor ============ */
.feedback,.feedback.bad,.mentor{
  border-inline-start:var(--mark-annotation-border);
  padding-inline-start:var(--sp-3);
}
.feedback__verdict{ font-weight:700; }
.mentor{
  color:var(--ink-soft);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

/* ============ C-Drill: progress-calm ============ */
.progress-calm{
  background:var(--line-gold);
  height:4px;
  border-radius:2px;
}
.progress-calm__fill{
  background:var(--ink);
  height:4px;
  border-radius:2px;
}

/* ============ C-Forms ============ */
input,textarea,select{
  font-size:16px;
  min-height:52px;
  border:1.5px solid var(--ink);
  border-radius:var(--r-control);
  background:var(--paper);
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
input:disabled,textarea:disabled,select:disabled{
  border-color:var(--line-disabled);
  background:var(--paper-rule);
  color:var(--line-disabled);
}
.field.is-error input,.field.is-error textarea,.field.is-error select{
  border-color:var(--ink-soft);
}
.field__error{ color:var(--ink-soft); }

.autosave-chip{
  border:1px solid var(--line-gold);
  color:var(--ink-meta);
}
.autosave-chip.is-saving .autosave-chip__spinner{
  stroke:var(--ink-meta-deco);
  animation:autosave-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .autosave-chip.is-saving .autosave-chip__spinner{ animation:none; } }
@keyframes autosave-spin{ to{ transform:rotate(360deg); } }
.autosave-chip.is-saved{ border:none; color:var(--ink-meta); }

.slot-row{ min-height:44px; }
.slot-row.is-selected{ background:var(--highlighter); }
.slot-row.is-full,.slot-row:disabled{
  border:1.5px dashed var(--line-disabled);
  color:var(--line-disabled);
}

.skeleton{
  background:var(--paper-rule);
}

.empty-state{ border:1.5px dashed var(--ink-soft); }
.empty-state__text{ color:var(--ink-soft); }

.toast{
  background:var(--ink);
  color:var(--on-ink);
  inset-inline:12px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ============ C-Product: organ doors ============ */
.organ-door{ border-radius:var(--r-row); min-height:44px; }
.organ-door.is-current{
  border:1.5px solid var(--ink);
  background:var(--paper);
}
.organ-door__chip{
  background:var(--highlighter);
  border-radius:var(--r-chip);
}
.organ-door.is-open{ border:1.5px solid var(--ink); }
.organ-door.is-open:hover{ background:var(--paper); }
.organ-door.is-open:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.organ-door.is-locked{
  border:1.5px dashed var(--line-disabled);
  pointer-events:none;
}
.organ-door.is-locked .organ-door__label{ color:var(--ink-soft); }
.organ-door.is-locked .organ-door__teach{
  color:var(--ink-meta);
  font-size:var(--fs-meta);
  line-height:var(--lh-body);
  padding-inline-start:var(--sp-4);
}
.organ-door__progress{
  font-size:var(--fs-meta);
  color:var(--ink-meta);
}

/* ============ C-Product: .app-loading ============ */
.app-loading__sigil path,.app-loading__sigil line,.app-loading__sigil circle{
  stroke:var(--ink);
}
.app-loading__line{
  font-size:var(--fs-body);
  color:var(--ink-soft);
}
.app-loading__bar{ background:var(--paper-rule); }
.app-loading__bar-fill{
  background:var(--ink);
  animation:app-loading-slide var(--dur-base) var(--ease) infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .app-loading__bar-fill{ animation:none; width:40%; }
}
@keyframes app-loading-slide{ from{ width:20%; } to{ width:60%; } }

/* ============ Mobile laws (viewport-height pairing, kept global) ============ */
.viewport-full{ height:100vh; height:100dvh; }

/* ============ C-Chrome parity (2026-08-27) ============
   The residual extractor dropped any rule whose SELECTOR also appeared in this file,
   even when this file only carried its paint (not its layout). Restored here from the
   pre-sweep sources (git show 62c52356 / dd85bf93 / fbe7697a) — layout/positioning only;
   paint values already live above or in each archetype's residual.
   See _tools/data/redesign/sweep/chrome-parity-report.md for the full diff. */

/* .header — was missing the sticky mechanism entirely (symptom: header + breadcrumb chrome
   scroll away / collide with content). */
.header{ position:sticky; top:0; z-index:var(--z-chrome); }
.header__inner{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  max-width:var(--measure-wide,1100px); margin:0 auto;
  padding:0 var(--gutter,24px);
}
/* .header__trail is the SEO breadcrumb rail — it must stay hidden below 769px (this is the
   mechanism symptom (b)/(d) trace to: without it the breadcrumb text runs unstyled at the
   viewport edge on mobile). */
.header__trail{ display:none; align-items:center; gap:10px; min-width:0; }
@media (min-width:769px){
  .header__trail{ display:flex; }
}
.header__current{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.header__pill{ position:relative; }
@media (max-width:768px){
  .header__rail-crumb{ flex:0 0 auto; }
}

/* .lbar — mobile bottom/top wayfinding bar (lesson · blog share this TOP-anchored shell;
   ebook overrides to BOTTOM-anchored in its own residual — see residual-ebook.css). */
.lbar{
  position:fixed; top:0; inset-inline:0; z-index:49;
  padding-top:env(safe-area-inset-top,0px);
  transform:translateY(-100%);
}
.lbar__toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--measure-reading,760px); margin:0 auto;
}
.lbar__fill{ width:0; }
.lbar__sheet{ display:none; max-width:var(--measure-reading,760px); margin:0 auto; }
.lbar__item{ display:block; }

/* a.lesson / .lesson card — the frozen-contract card lost its own vertical stacking. */
a.lesson,.lesson{ display:flex; flex-direction:column; min-height:168px; }

/* .bridge card — lost its vertical stack + gap. */
.bridge{ display:flex; flex-direction:column; gap:18px; }

/* .recog__btn / .recog__cause — the Nested-Recognition organ lost its inline layout and its
   settle-in motion (kept as a fade, guarded by reduced-motion per the original). */
.recog__btn{ display:inline-flex; align-items:center; gap:7px; }
.recog__cause{
  max-width:56ch; margin:36px 0 0;
  opacity:0; transform:translateY(6px);
  transition:opacity 420ms ease, transform 420ms ease;
}
@media (prefers-reduced-motion: reduce){
  .recog__cause{ transition:none; transform:none; }
}

/* .choices — the drill option-group container lost its own flex-column layout (the
   .choices.row modifier had nothing to override without this base rule). */
.choices{ display:flex; flex-direction:column; gap:10px; }

/* .btn on a touch device should fill its row. */
@media (pointer:coarse){
  .btn{ width:100%; }
}

/* ---- Run 9 (2026-08-27) · the eyebrow tether — a label on a thing ----
   Judgment pass 3: eyebrows sat orphaned, flush to the viewport edge on home + hub. An .eyebrow
   starts on the content column's start edge (the same edge as the title beneath it), 8px above
   that title, 13px --ink-meta 600. Tracking stays: it is uppercase LATIN; the no-tracking rule is
   a Persian rule. Chrome selector → lives here, not in three residuals (handoff-A §shared fix). */
.eyebrow{
  margin:0 0 8px; text-align:end;
  font-size:var(--fs-meta); font-weight:600; letter-spacing:.08em;
  color:var(--ink-meta);
}
.eyebrow + h1, .eyebrow + h2{ margin-block-start:0; }


/* ---- Run 9 pass-4 decisions (2026-08-27, Farhad) ----
   1. The English SEO breadcrumb («Home › Tutorials › Reading») stays in the DOM + JSON-LD for
      Google and leaves the eye: visually hidden, never display:none (crawlers read it either way,
      but a hidden-by-clip node keeps its accessible name for screen readers too).
   2. The Wild Moon sigil is RETIRED on every surface (DECISIONS 2026-08-27 — supersedes
      non-negotiable #8's freeze for the website; the path itself is untouched in the sprite).
      The wordmark carries the chrome; the face carries proof surfaces; Farhad's signature takes
      the sigil's stamp jobs in Run 10. Until then the slots are empty, never a placeholder. */
.recog__crumb, .hero__crumb{
  position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.header__sigil, .footer__sigil, .cover__sigil, .featured__poster-sigil, .identity__sigil,
.handoff-brand-stamp .sigil, .drill__sigil{ display:none !important; }


/* ============ C-Product v2.1 «دفترچه، جلد دوم» (site-honing, 2026-08-27) ============
   The notebook product world. Additive only — implements the whole-site boards
   (plans/site-honing-directions/whole-site/); law in _specs/site-design-system.md
   §C-Product v2.1. No new hexes, no renames. */

/* --- .neshanak — the bookmark slip (THE product signature; one per surface max).
       No counts, no streaks: an invitation, never a meter. --- */
.neshanak{
  position:relative; background:var(--slip); border:1px solid var(--line-gold);
  border-radius:var(--r-row); transform:rotate(-.7deg); padding:18px 48px 16px 16px;
}
.neshanak__ribbon{
  position:absolute; inset-block-start:-6px; inset-inline-start:22px;
  inline-size:14px; block-size:34px; background:var(--highlighter);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
}
.neshanak__where{ font-size:var(--fs-meta); color:var(--ink-meta); }
.neshanak__title{ font-size:var(--fs-lead); font-weight:700; margin-block-start:4px; }
.neshanak__note{ font-size:var(--fs-meta); color:var(--ink-soft); margin-block-start:4px; }
.neshanak--quiet{ transform:rotate(-.4deg); } /* Room variant: label only, action lives in the list */

/* --- .week-ruled — the drip week as a notebook row. Past=✓ stroke, today=ink ring,
       future=quiet line-disabled letters. NO streak count anywhere. --- */
.week-ruled{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;
  background:var(--slip); border:1px solid var(--paper-rule);
  border-radius:var(--r-row); padding:12px 10px;
}
.week-ruled__day{ text-align:center; font-size:var(--fs-meta); color:var(--ink-soft); }
.week-ruled__day.is-future{ color:var(--line-disabled); }
.week-ruled__day.is-today{ color:var(--ink); font-weight:700; }
.week-ruled__today-ring{
  inline-size:22px; block-size:22px; margin:4px auto 0;
  border:2px solid var(--ink); border-radius:var(--r-chip);
}

/* --- .karnameh — the graded-paper slip. A result is a marked paper, never a dashboard:
       Markazi band digit, ✓/✗ stroke rows, one dashed-rule verdict line. --- */
.karnameh{
  background:var(--slip); border:1px solid var(--paper-rule);
  border-radius:var(--r-row); padding:16px; transform:rotate(.4deg);
}
.karnameh__band{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h1); }
.karnameh__band--display{ font-size:var(--fs-display); }
.karnameh__rows{
  border-block-start:2px dashed var(--line-dash);
  margin-block-start:10px; padding-block-start:10px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 16px;
  font-size:var(--fs-meta); color:var(--ink-soft);
}
.karnameh__rows--stacked{ grid-template-columns:1fr; }
.karnameh__verdict{
  font-size:var(--fs-meta); color:var(--ink-soft); margin-block-start:10px;
  border-inline-start:2px dashed var(--line-dash); padding-inline-start:10px;
}

/* --- calm-desk mock chrome: the in-test surface is the calmest on the site.
       Bare timer digits (no ring, no urgency), answers ON a ruled blank,
       number strip = navigation, never a meter. Zero highlighter mid-test. --- */
.mockbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--slip); border-block-end:1px solid var(--paper-rule);
  padding:10px 16px; font-size:var(--fs-meta); color:var(--ink-soft);
}
.mockbar__timer{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ruled-blank{
  display:inline-block; min-inline-size:120px; background:transparent;
  border:0; border-block-end:2px dashed var(--line-dash);
  font-size:var(--fs-body); color:var(--ink); padding:2px 6px;
}
.ruled-blank:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.qstrip{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.qstrip__n{
  min-inline-size:28px; min-block-size:28px; display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-meta); color:var(--line-disabled); border-radius:var(--r-chip);
  padding:8px; /* pads the 28px glyph to a 44px tap box */
}
.qstrip__n.is-answered{ color:var(--paper); background:var(--ink); }
.qstrip__n.is-current{ color:var(--ink); border:2px solid var(--ink); }

/* --- .letter-diff — دفترِ دیکته: the teacher's dash under the exact letter the ear
       missed, correction above in meta ink. Never a red correction. --- */
.letter-diff{ font-size:var(--fs-lead); font-weight:700; direction:ltr; text-align:left; }
.letter-diff__miss{
  border-block-end:2px dashed var(--ink); position:relative; font-style:normal;
}
.letter-diff__fix{
  position:absolute; inset-block-start:-14px; inset-inline-start:0;
  font-size:var(--fs-meta); font-weight:600; color:var(--ink-meta);
}

/* --- word card (جعبه‌ی واژه‌ها): the vocabulary slip torn from a lesson.
       Source line is mandatory chrome; grade chips equal-weight; no queue counts. --- */
.wordcard{
  background:var(--slip); border:1px solid var(--paper-rule);
  border-radius:var(--r-row); padding:24px 18px; transform:rotate(-.5deg);
}
.wordcard__word{ direction:ltr; text-align:left; font-size:var(--fs-h2); font-weight:700; }
.wordcard__colloc{ direction:ltr; text-align:left; font-size:var(--fs-body); color:var(--ink-soft); margin-block-start:8px; }
.wordcard__recall{ border-block-end:1px solid var(--line-gold); margin-block-start:16px; min-block-size:28px; }
.wordcard__source{ font-size:var(--fs-meta); color:var(--ink-meta); }
.grade-row{ display:flex; gap:8px; }
.grade-row .opt, .grade-row__chip{
  flex:1; min-block-size:44px; font-size:var(--fs-body); font-weight:600;
  background:var(--slip); color:var(--ink); border:1.5px solid var(--ink);
  border-radius:var(--r-control); text-align:center;
}

/* --- credits as paper (billing surface): a credit is a small slip, not a badge.
       The account page carries ZERO highlighter. --- */
.credit-slips{ display:flex; gap:10px; }
.credit-slip{
  inline-size:56px; block-size:72px; background:var(--slip);
  border:1.5px solid var(--line-gold); border-radius:var(--r-chip);
  transform:rotate(-2deg); position:relative;
}
.credit-slip + .credit-slip{ transform:rotate(1.5deg); }
.credit-slip::before{ /* perforated top edge */
  content:""; position:absolute; inset-inline:6px; inset-block-start:4px;
  border-block-start:2px dashed var(--line-dash);
}

/* --- app states (logged-out / loading / error / empty) — designed rooms, not gates. --- */
.state-slip{
  background:var(--slip); border:1px solid var(--paper-rule);
  border-radius:var(--r-row); padding:18px 16px;
}
.state-slip--error{ border:2px dashed var(--line-dash); }
.state-shimmer{
  block-size:2px; background:var(--paper-rule); border-radius:1px;
  position:relative; overflow:hidden; margin-block-start:12px;
}
.state-shimmer::after{
  content:""; position:absolute; inset-block:0; inline-size:36%;
  background:var(--line-gold);
  animation:state-shimmer-slide 1.2s var(--ease) infinite;
}
@keyframes state-shimmer-slide{ from{ inset-inline-start:-36%; } to{ inset-inline-start:100%; } }
@media (prefers-reduced-motion: reduce){
  .state-shimmer::after{ animation:none; inline-size:100%; }
}