/* ============================================================================
   شنگرفِ سراسری — Shangarf Site Rollout
   dars-goftarha.ir · Claude Design lane (Fable) · 2026-07-23

   The homepage, the series pages and the transcripts already speak Shangarf.
   This layer finishes the sentence: every component that still leaned on the
   mustard-era styles.css, on section-index.css, or on a page's private inline
   palette is re-expressed here IN TOKENS ONLY — no raw hex except where a
   token is being defined. Loading order on a converted page:

       [legacy layout css, if the page needs its machinery]
       shangarf.css → reading-desk.css → mvp2-compat.css →
       final-light-center.css → THIS FILE (the skin always wins)

   Because everything below keys off shangarf custom properties, dark reading
   (data-theme="dark") works on every converted page for free.

   Collection identities are canon and end the old drift:
     تفسیر قرآن   lajvard   ·  ادیان   zangar  ·  روانکاوی  nili (teal — the
     rust #743320 era is over) · موضوعاتِ قرآنی fooladi · سخنرانی‌ها boronz.
   Gold stays scripture-only.
   ========================================================================= */

/* ---------- legacy-var bridge -------------------------------------------
   Pages that keep their old machinery (section indexes, old refs) still read
   --muted/--rule/--gold/--section… Those names are re-pointed at the tokens,
   so the machinery keeps working while every colour it paints is Shangarf. */
:root{
  --muted:var(--ink-soft);
  --faint:var(--ink-faint);
  --rule:var(--line);
  --rule-soft:var(--line-cool);
  --gold:var(--zar);
  --gold-bright:var(--zar-line);
  --paper-2:var(--paper-mid);
  --surface:var(--paper-high);
  --surface-2:var(--paper-mid);
}
.catalog{--section:var(--c-deep);--accent:var(--c-deep)}

/* the old mustard body themes must never tint a converted page again */
body.t-mustard{--navy:var(--c-deep);--navy-2:var(--c);--navy-deep:var(--c-deep)}

/* ---------- جستجو · the archive search field ----------------------------- */
.search{position:relative;margin:0 0 var(--s4)}
.search input{width:100%;box-sizing:border-box;font:500 15px/1.4 var(--ff);
  color:var(--ink);background:var(--paper-high);border:1px solid var(--line);
  border-radius:12px;padding:12px 44px 12px 16px;box-shadow:var(--shadow);
  transition:border-color .14s}
.search input::placeholder{color:var(--ink-faint)}
.search input:hover{border-color:var(--line-strong)}
.search input:focus{outline:none;border-color:var(--c-tint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.search svg{position:absolute;inset-inline-end:15px;top:50%;width:17px;height:17px;
  transform:translateY(-50%);stroke:var(--ink-faint);pointer-events:none}
.empty{display:none;font-size:var(--fs-side);color:var(--ink-faint);
  text-align:center;padding:22px 0;margin:0}
.empty.show{display:block}

/* ---------- ادامهٔ پخش · resume strip ------------------------------------
   A deep-collection plate on the paper: the one dark object on an index page,
   so the eye lands on «where you left off» first. Fixed cream type — the
   plate stays deep in both themes. */
.resume{margin:0 0 var(--s4)}
.resume-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-micro);
  font-weight:700;color:var(--c-deep);margin:0 0 8px}
.resume-ic{display:inline-grid;place-items:center;width:20px;height:20px;
  border-radius:6px;background:var(--c);color:#FBF6EC;font-size:9px}
.resume-row{display:grid;gap:8px}
/* quiet second action under the resume card: the card continues the audio, this
   opens the lecture's own page. Deliberately unemphatic — one loud call to action
   per block, and the loud one is Play. */
.resume-page{display:inline-flex;align-items:center;gap:5px;justify-self:start;
  margin-top:-2px;padding:3px 2px;color:var(--ink-soft,#6b675e);
  font-size:var(--fs-micro);line-height:1.7;text-decoration:none;
  border-bottom:1px solid transparent}
.resume-page svg{opacity:.62;flex:none}
.resume-page:hover{color:var(--ink,#232320);text-decoration:none;
  border-bottom-color:currentColor}
.resume-card{display:block;background:linear-gradient(150deg,var(--c) 0%,var(--c-deep) 92%);
  color:#FBF6EC;border-radius:var(--radius-lg);padding:13px 17px;
  box-shadow:var(--shadow);text-decoration:none}
.resume-card:hover{text-decoration:none;filter:brightness(1.06)}
.resume-meta{float:left;font:600 11.5px/1.8 var(--ff-latin);opacity:.75}
.resume-tx{display:block;min-width:0}
.resume-sec{display:block;font-size:var(--fs-micro);opacity:.72;line-height:1.7}
.resume-title{display:block;font-size:15px;font-weight:700;line-height:1.6;
  margin:1px 0 9px}
.resume-bar{display:block;height:4px;border-radius:999px;
  background:rgba(251,246,236,.22);overflow:hidden}
.resume-bar > span{display:block;height:100%;border-radius:999px;
  background:var(--zar-line)}

/* ---------- سیرِ زمانی · chips + frame around the gahshomar --------------
   The timeline rows themselves are shangarf's .g-year/.g-item; each entry
   carries its collection class (gi-*) instead of a hard-coded --tc. */
.tl-wrap{margin:var(--s6) 0 0}
.tl-h{font-size:var(--fs-h2);font-weight:700;color:var(--c-deep);margin:0 0 4px;
  display:flex;gap:12px;align-items:baseline}
.tl-h::after{content:"";flex:1;height:1px;background:var(--line-strong);
  opacity:.6;transform:translateY(-6px)}
.tl-sub{font-size:var(--fs-meta);color:var(--ink-faint);margin:0 0 var(--s3)}
.tl-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 var(--s4);
  padding:10px 13px;background:var(--paper-high);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow)}
.tl-chip{display:inline-flex;align-items:center;gap:7px;
  font:600 12.5px/1 var(--ff);color:var(--ink-soft);cursor:pointer;
  background:var(--paper-mid);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;transition:background .14s,border-color .14s,color .14s;
  --cc:var(--n-500);--cc-deep:var(--n-300)}
.tl-chip::before{content:"";width:8px;height:8px;border-radius:2.5px;
  background:var(--cc);flex:none}
.tl-chip:hover{border-color:var(--cc);color:var(--ink)}
.tl-chip.on{background:var(--cc-deep);border-color:var(--cc-deep);color:#FBF6EC}
.tl-chip.on::before{background:#FBF6EC}
.ch-tafsir {--cc:var(--lajvard);--cc-deep:var(--lajvard-deep)}
.ch-adyan  {--cc:var(--zangar); --cc-deep:var(--zangar-deep)}
.ch-ravan  {--cc:var(--nili);   --cc-deep:var(--nili-deep)}
.ch-mawzuat{--cc:var(--fooladi);--cc-deep:var(--fooladi-deep)}
.ch-sokhan {--cc:var(--boronz); --cc-deep:var(--boronz-deep)}
.tl-count{margin-inline-start:auto;font-size:var(--fs-micro);color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.tl-noref{opacity:.62}
.tl-noref .t{font-weight:500}
.tl-src{font-size:var(--fs-micro);color:var(--ink-faint);margin-top:var(--s3)}
.tl-src a{color:var(--c-deep)}
.tl-year.gone,.tl-item.gone{display:none}
/* an entry that belongs to no collection keeps the quiet neutral spine */
.gi-none{--gc:var(--n-600)}
/* narrow screens: the venue string wraps under the title instead of pushing
   the row past the viewport (the nowrap column was the old page's overflow) */
@media (max-width:36rem){
  .g-item{grid-template-columns:4px 1fr}
  .g-item i{grid-row:1 / span 2;height:100%;min-height:22px}
  .g-item .m{grid-column:2;white-space:normal;line-height:1.65;margin-top:1px}
}

/* ---------- فهرستِ بخش · the catalog skin --------------------------------
   section-index.css keeps doing the LAYOUT (grids, sticky header, sort,
   master–detail). Everything it painted is repainted here: navy-slate ink on
   shangarf paper, the collection colour as wayfinding, Estedad everywhere —
   the Vazirmatn experiment ends here. */
.page-head,.catalog,.margin-detail,.rows-head,.toolbar,
.catalog :is(.entry,.identity,.datum),
.catalog button,.catalog input,.catalog select{font-family:var(--ff)!important}

.page-head{border-bottom:0;padding-block:0 6px}
.page-head .eyebrow{color:var(--c-deep);font-weight:600;letter-spacing:.02em}
.page-head .lead{color:var(--ink-soft);margin-inline:auto}

.catalog{border-top:0}
.catalog-head{border-bottom:1px solid var(--line)}
.catalog-head h2{color:var(--c-deep);font-size:19px;font-weight:700}
.catalog-head p{color:var(--ink-faint)}
.count{color:var(--c-deep);border-bottom:0;background:var(--c-wash);
  border:1px solid var(--c-tint);border-radius:999px;padding:3px 13px;
  font-size:var(--fs-meta);font-weight:600}

.toolbar{border-bottom:0;padding-block:13px}
.toolbar label{color:var(--ink-faint);font-weight:600}
.toolbar input,.toolbar select{background:var(--paper-high);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--c-tint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent)}
.direction{border-radius:10px}

.rows-head{background:var(--c-wash);color:var(--c-deep);
  border-bottom:1px solid var(--c-tint);border-radius:10px 10px 0 0}
.rows-head .col-h:hover{background:color-mix(in srgb,var(--paper-high) 55%,transparent)}
.rows-head .col-h.on{color:var(--c-deep)}
.rows-head .col-seq,.rows-head .col-go{color:color-mix(in srgb,var(--c-deep) 62%,transparent)}

.entry{border-bottom:1px solid var(--line)}
.entry:nth-child(even){background:color-mix(in srgb,var(--c) 4%,transparent)}
.entry:hover{background:color-mix(in srgb,var(--c) 9%,transparent)}
.entry.is-active{border-inline-start:3px solid var(--c);
  background:color-mix(in srgb,var(--c) 11%,transparent)}
.seq{color:var(--ink-faint)}
.identity a{color:var(--ink)}
.identity a:hover,.identity a:focus-visible{color:var(--c-deep);
  text-decoration-color:var(--c-tint)}
.identity small{color:var(--ink-faint)}
.datum strong{color:var(--ink)}
.datum small{color:var(--ink-faint)}
.datum.sessions .wbar{background:color-mix(in srgb,var(--c) 20%,transparent)}
.datum.sessions .wbar::before{background:var(--c)}
.inspect{color:var(--c-deep);border-bottom-color:var(--c-tint)}
.inspect:hover,.inspect:focus-visible{border-color:var(--c-deep)}

.margin-detail{background:var(--paper-high);border:1px solid var(--line);
  border-top:3px solid var(--c);border-radius:var(--radius-lg);
  box-shadow:var(--shadow)}
.detail-kicker{color:var(--c);font-weight:600}
.margin-detail h3{color:var(--c-deep)}
.detail-open{color:var(--c-deep);text-decoration-color:var(--c-tint)}
.facts,.facts div{border-color:var(--line)}
.facts dt{color:var(--ink-faint)}
.facts dd{color:var(--ink)}
.detail-note{color:var(--ink-faint)}
.why{background:var(--paper-mid);border-inline-start:4px solid var(--zar-line);
  border-radius:0 10px 10px 0}
.why p{color:var(--ink-soft)}
.coverage{color:var(--ink-faint);border-bottom:1px solid var(--line)}
.coverage strong{color:var(--c-deep)}
#gal-back{font-family:var(--ff);background:var(--c-deep);color:#FBF6EC;
  border-color:transparent}
#gal-back:hover{background:var(--c)}

/* ---------- ارجاعاتِ v3 · references uplift ------------------------------
   The /references tree gave Shangarf its palette; what it never got back was
   the chrome. Converted pages carry body.refs3: the reading ground lifts from
   the recessed paper-deep to the site's paper, cards stand on paper-high, and
   the private var names of that tree are re-pointed at tokens — which is all
   dark reading needs. */
body.refs3{background:var(--paper);
  /* the page's private :root shadows the tokens, so every one of its var
     names is re-pointed here at body level — which outranks that :root,
     while the dark theme's :root[data-theme] outranks this in turn. */
  --paper:#FBF6EC;              /* dark: token wins over this literal */
  --paper-2:var(--paper-mid);
  --surface:var(--paper-high);--surface-2:var(--paper-mid);
  --ink-2:var(--ink-soft);--muted:var(--ink-soft);--faint:var(--ink-faint);
  --line-2:var(--line-cool);--rule:var(--line);--rule-soft:var(--line-cool);
  --accent:var(--c-deep);--accent-2:var(--c);
  --accent-soft:color-mix(in srgb,var(--c) 12%,var(--paper-high));
  --gold:var(--zar);--gold-bright:var(--zar-line);
  --gold-soft:var(--g-500);--gold-ghost:color-mix(in srgb,var(--zar) 14%,transparent);
  --bar:var(--g-500);
  --shadow-sm:0 1px 2px rgba(38,33,25,.05)}
:root[data-theme="dark"] body.refs3{--paper:#131722}
body.refs3 .wrap{padding-top:26px}
body.refs3 .crumb{display:none}     /* the sarlouh's crumbs replace it */
body.refs3 :is(.wrap > h1,.headtxt > h1){display:none} /* sarlouh owns the title */
body.refs3 .wrap > h1 + .gloss{margin-top:0}

/* ---------- کارت‌های منابع (resources / ai) ------------------------------- */
.res-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.res-card{background:var(--paper-high);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 22px;
  transition:border-color .14s,transform .16s ease}
.res-card:hover{border-color:var(--c-tint);transform:translateY(-2px);
  text-decoration:none}
.res-card h2{font-size:17px;font-weight:700;color:var(--c-deep);line-height:1.6}
.res-card p{font-size:var(--fs-meta);color:var(--ink-soft);margin:6px 0 0;
  line-height:1.8}
.res-card .m{font-size:var(--fs-micro);color:var(--ink-faint)}

/* ---------- شب‌خوانی · system repairs -------------------------------------
   Three defects the homepage ships today, fixed at the layer every converted
   page loads:
   1) the dark theme paints سرلوح text near-black onto a still-navy band;
   2) stat and row numerals keep their light-theme deep navy and sink into the
      dark ground;
   3) Chrome freezes a color-mix(var()) background mid-transition when only
      the theme token changes (the same engine quirk reading-desk documents
      for grid tracks), so rows kept their light wash after switching to dark.
      Colour now jumps; motion stays on transform. */
:root[data-theme="dark"] .sarlouh{color:#E9E6DE}
:root[data-theme="dark"] .sarlouh .kicker{background:rgba(251,246,236,.10);
  border-color:rgba(251,246,236,.22)}
:root[data-theme="dark"] .stat b{color:var(--n-200)}
:root[data-theme="dark"] :is(.row-item .rn b,.row-item .go){color:var(--c-tint)}
.row-item,[data-view] > *,.g-item,.tl-chip,.stat{transition:transform .16s ease}
/* Chromium serves color-mix(var()) fills from the matched-properties cache, so an
   element styled in the light theme keeps its light wash after the switch (a fresh
   element resolves correctly). Dark-scoped twins change the matched set, which
   forces a real re-resolution — and the wash deepens a step so it reads on the
   dark ground. */
:root[data-theme="dark"] :is(.row-item,[data-view="list"] > *,[data-view="grid"] > *){
  background:color-mix(in srgb,var(--c) 22%,var(--paper-high));
  border-color:color-mix(in srgb,var(--c) 32%,var(--paper-high))}
:root[data-theme="dark"] :is(a.row-item:hover,[data-view="list"] > *:hover,
  [data-view="grid"] > *:hover){
  background:color-mix(in srgb,var(--c) 28%,var(--paper-high));
  border-color:color-mix(in srgb,var(--c) 48%,var(--paper-high))}
:root[data-theme="dark"] .g-item{
  background:color-mix(in srgb,var(--gc,var(--c)) 20%,var(--paper-high));
  border-color:color-mix(in srgb,var(--gc,var(--c)) 30%,var(--paper-high))}
:root[data-theme="dark"] a.g-item:hover{
  background:color-mix(in srgb,var(--gc,var(--c)) 26%,var(--paper-high));
  border-color:color-mix(in srgb,var(--gc,var(--c)) 46%,var(--paper-high))}
:root[data-theme="dark"] .g-item .t{color:var(--ink)}
:root[data-theme="dark"] .rows-head{
  background:color-mix(in srgb,var(--c) 26%,var(--paper-high));
  color:var(--c-tint);border-bottom-color:color-mix(in srgb,var(--c) 40%,var(--paper-high))}

/* ════════════════════════════════════════════════════════════════════════
   فهرستِ مجموعه‌ها — REDESIGN (v2)
   The reskin kept section-index.css's spreadsheet: a bordered data table with
   a sortable header strip and a master–detail margin pane. Against the cream
   homepage that read as a database export, not an archive. This rebuilds the
   SAME markup and the SAME engine as the homepage's row idiom — one clean row
   per entry: quiet index numeral · name + meta · session-count figure · arrow.
   The sort <select> (the engine still wires it) comes back, since the sortable
   header strip is gone; the detail pane — pure duplication of the row's meta —
   is retired. Nothing in the data or the engine is touched.
   ════════════════════════════════════════════════════════════════════════ */
/* narrower measure, like the home list, centred (owner: عرضِ فهرست‌ها کمتر) */
.page-head,main:has(.catalog){max-width:46rem}
/* each index wears its OWN collection colour: the body's c-* class already
   drives --c (c-adyan→zangar, c-ravan→nili…), so nothing is forced here.
   (Owner: همه موضوعات همرنگِ موضوعشون — the old forced-lajvard override is gone.) */
/* toolbar → one calm bar: search grows, sort + direction return */
.catalog .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;
  border-bottom:0;padding:0 0 var(--s4)}
.catalog .toolbar label{display:grid;gap:5px;font-size:var(--fs-micro);
  font-weight:600;color:var(--ink-faint)}
.catalog .toolbar label:first-child{flex:1 1 220px}
.catalog .toolbar label:has([data-sort]){display:grid;flex:0 0 auto}
.catalog .toolbar .direction{display:inline-flex;align-items:center;flex:0 0 auto;
  align-self:end;height:42px;padding:0 16px;border:1px solid var(--c-tint);
  color:var(--c-deep);background:var(--paper-high);border-radius:11px;font-weight:700}
.catalog .toolbar .direction:hover{background:var(--c-wash)}
.catalog .toolbar input,.catalog .toolbar select{height:42px;border-radius:11px;
  border:1px solid var(--line);background:var(--paper-high);color:var(--ink)}

/* the list: single column of clean rows */
.catalog .split{display:block}
.catalog .rows-head{display:none!important}
.catalog .margin-detail{display:none!important}
.catalog .rows{display:flex;flex-direction:column;gap:6px}
.catalog .coverage{border:0;padding:0 0 var(--s3)}

.catalog .rows .entry{
  display:grid;grid-template-columns:minmax(0,1fr) auto 1.1rem;
  align-items:center;gap:15px;min-height:0;padding:12px 16px;
  border:1px solid color-mix(in srgb,var(--c) 24%,var(--paper-high));
  border-bottom:1px solid color-mix(in srgb,var(--c) 24%,var(--paper-high));
  border-radius:12px;
  background:color-mix(in srgb,var(--c) 16%,var(--paper-high));
  transition:background .14s,border-color .14s,transform .16s ease}
.catalog .rows .entry:nth-child(even){background:color-mix(in srgb,var(--c) 16%,var(--paper-high))}
.catalog .rows .entry:hover{transform:translateY(-1px);
  background:color-mix(in srgb,var(--c) 15%,var(--paper-high));
  border-color:color-mix(in srgb,var(--c) 44%,var(--paper-high))}
.catalog .rows .entry.is-active{padding-inline-start:16px;
  border-color:color-mix(in srgb,var(--c) 42%,var(--paper-high));
  box-shadow:inset 3px 0 0 var(--c)}

/* the sequence badge is a row-ordinal — it reorders on sort and reads as a
   surah/mushaf number it is not, so it is dropped. */
.catalog .seq{display:none!important}

.catalog .identity{min-width:0}
/* whole-row click: stretch the name's real link over the entire entry, so a
   click anywhere on the box opens it — not only on the سوره/موضوع name.
   (The detail button is hidden, so nothing competes for the surface.) */
.catalog .rows .entry{position:relative;cursor:pointer}
.catalog .identity a::after{content:"";position:absolute;inset:0;z-index:1}
.catalog .identity a{font-size:17px;font-weight:700;color:var(--ink);
  text-decoration:none;letter-spacing:-.005em}
.catalog .rows .entry:hover .identity a{color:var(--c-deep)}
.catalog .identity small{display:block;font-size:var(--fs-micro);color:var(--ink-faint);
  white-space:normal;line-height:1.6;margin-top:3px;text-overflow:clip}

/* the session count as the visual anchor — the homepage .rn figure */
.catalog .datum.sessions{display:flex;flex-direction:column;align-items:center;
  gap:0;line-height:1;text-align:center}
.catalog .datum.sessions strong{font-size:20px;font-weight:800;color:var(--c-deep);
  letter-spacing:0.02em;font-variant-numeric:proportional-nums}
.catalog .datum.sessions strong::after{content:" جلسه";display:block;margin-top:4px;
  font-size:10px;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.catalog .datum.sessions .wbar{display:none}
/* every other data column + the detail trigger fold into the meta line */
.catalog .datum.year,.catalog .datum.ayahs,.catalog .topic-group,
.catalog .inspect{display:none!important}

.catalog .rows .entry::after{content:"←";justify-self:end;color:var(--c-deep);
  font-size:13px;opacity:.5;transition:opacity .14s}
.catalog .rows .entry:hover::after{opacity:1}
/* dark: the deep figure/arrow sit navy-on-navy — lift to the collection tint */
:root[data-theme="dark"] .catalog .datum.sessions strong,
:root[data-theme="dark"] .catalog .rows .entry::after{color:var(--c-tint)}

@media (max-width:34rem){
  .catalog .rows .entry{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:11px 13px}
  .catalog .rows .entry::after{display:none}
}

/* ════════════════════════════════════════════════════════════════════════
   خطِ زمانیِ جلسات — REDESIGN (v2)
   The reskin recoloured the old gahshomar but kept its shape: a gold rule down
   the side with a dot at every year — the exact look of the pre-theme page.
   The rule and the dots go; each year becomes a quiet pill with a hairline
   running off it, and the entries sit beneath as the site's clean colour-spined
   rows. Same markup, same filter script.
   ════════════════════════════════════════════════════════════════════════ */
/* mvp2-compat.css sets `body.mvp2-live .tl{border-inline-start:2px…!important}`
   — the gold rule that made the timeline read as the old page. It is !important,
   so the override must be too (scoped to these two properties only). */
body.mvp2-live .tl-wrap .gahshomar,.tl-wrap .gahshomar{
  border-inline-start:0!important;padding-inline-start:0!important}
.tl-wrap .g-year{margin:22px 0 9px;gap:11px;display:flex;align-items:center}
.tl-wrap .g-year::before{display:none}
/* the year is a time marker, not a collection — give it a NEUTRAL pill (ink on
   paper) so it never reads as one of the coloured topic boxes. On the hub the
   page colour is lajvard, which made the year look identical to the تفسیر rows. */
.tl-wrap .g-year b{font-size:13.5px;font-weight:800;color:var(--ink-soft);
  background:var(--paper-deep);border:1px solid var(--line-cool);border-radius:999px;
  padding:3px 14px;font-variant-numeric:tabular-nums}
.tl-wrap .g-year::after{content:"";flex:1;height:1px;
  background:var(--line);opacity:.8}
.tl-wrap .g-year:first-child{margin-top:6px}
/* the entry rows: keep the shangarf g-item card, just tighten the spine so the
   collection colour reads as a clean bar rather than a hairline */
.tl-wrap .g-item{padding:9px 14px;border-radius:10px}
.tl-wrap .g-item > i{width:4px;height:26px;border-radius:2px}
/* colour each box by its OWN topic (--gc from the gi-* class), not the page's
   collection. mvp2-compat.css paints every .tl-item with the page colour
   (var(--c)) under !important, which is why they all read the same grey-blue;
   this restores per-topic tint and works in both themes (paper-high is
   theme-aware). Items with no collection keep the neutral --gc from .gi-none. */
body.mvp2-live .tl-wrap .g-item{
  background:color-mix(in srgb,var(--gc,var(--n-600)) 15%,var(--paper-high))!important;
  border:1px solid color-mix(in srgb,var(--gc,var(--n-600)) 28%,var(--paper-high))!important}
body.mvp2-live .tl-wrap a.g-item:hover{
  background:color-mix(in srgb,var(--gc,var(--n-600)) 22%,var(--paper-high))!important;
  border-color:color-mix(in srgb,var(--gc,var(--n-600)) 48%,var(--paper-high))!important}

/* ---------- print --------------------------------------------------------- */
@media print{
  .search,.resume,.tl-bar,#gal-back{display:none!important}
  .entry,.g-item,.res-card{break-inside:avoid}
}

/* ---------- خانهٔ سری · per-series homepage rows -------------------------
   The scripture row wears زر (gold = Quran only, per the system); the other
   rows wear the page's collection colour. */
.row-item.r-zar{--c:var(--zar);--c-deep:var(--zar-deep);
  --c-tint:var(--zar-line);--c-wash:var(--zar-wash)}
.rows .row-item.r-self{--c:var(--c);--c-deep:var(--c-deep)}
/* series-home: «تکمیلی» in place of a count, at the label's size */
.row-item .rn-supp{display:block;font-size:11px;font-weight:700;color:var(--c-deep);line-height:1.35}

/* ══ راهبار · the page-path bar ═══════════════════════════════════════════
   Replaces the tab strip AND the big title header on series view pages
   (owner: «مسیرِ صفحه بالاش، به‌جای تیترها»). Ancestors are links; the last
   segment is the current view, set in the collection colour. */
.rahbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  max-width:58rem;margin:18px auto 6px;padding:13px 20px;
  font-size:14.5px;font-weight:600;color:var(--ink-faint);
  background:var(--paper-high);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow)}
.rahbar a{color:var(--ink-soft);text-decoration:none}
.rahbar a:hover{color:var(--c-deep);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}
.rahbar .sep{color:var(--zar-line);font-weight:400;font-size:.85em}
.rahbar b[data-view]{color:var(--c-deep);font-weight:800}
@media (max-width:40rem){.rahbar{margin-inline:14px;padding:11px 14px;font-size:13px}}
/* view pages: the path replaces the banner and the tab strip */
body.rahbar-mode .s-head{display:none!important}
body.rahbar-mode .tabmenu,body.rahbar-mode nav.tabs{display:none!important}
/* the old sticky mini-header duplicated the path (with a stale tab label) and
   overlapped the rahbar — it goes with the tabs. */
body.rahbar-mode .topbar{display:none!important}

/* home list: tighten the count↔label gap (owner: فاصله زیاد، چیدمان خراب) */
.row-item .rn{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.row-item .rn b{transform:none;line-height:1}
.row-item .rn span{margin-top:2px}
.stat b{line-height:1}
.stat span{margin-top:2px}

/* ════════════════════════════════════════════════════════════════════════
   بازخوردِ QAِ مالک — 2026-07-24
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · نوارِ خواندن — بازگردانده شد  2026-07-27
   The 2026-07-24 rule was «این دکمه‌ها رو فعلاً کامل از همه صفحات حذف کن» and it
   read `.readbar,.readbar2{display:none!important}` right here. RESTORED by owner
   instruction after the T-03 rebuild gave the bar a real size / leading / theme
   axis. There was a twin of this rule in shangarf.css; BOTH had to go, because
   the transcript pages load shangarf.css and the index/series pages load this
   file — removing only one leaves half the site with a dead toolbar, which is
   exactly what the first pass of this restore did.
   Visibility now lives in reading-desk.css alone. Do not re-add a hide here. */

/* 2 · ارقام از هم فاصله داشتند — pull the display numerals tight everywhere
   (Estedad's tabular set set them loose). (Owner: «فاصلهٔ ارقام زیاده، فشرده‌تر».) */
.row-item .rn b,.stat b,.kicker .num,.catalog .datum.sessions strong,
.count,.pl-num{letter-spacing:0.02em;font-feature-settings:'tnum' 0}
.catalog .datum.sessions strong{font-variant-numeric:proportional-nums}

/* 3 · ادامهٔ پخش — a play control on the LEFT of the plate; the triangle points
   RIGHT (site rule: no left-pointing play anywhere). The heading ▶ is now an
   SVG (markup) centred in its chip. (Owner: «سمت چپِ پلیر دکمهٔ play نیست».) */
.resume-card{position:relative;padding-left:64px}
.resume-card::before{content:"";position:absolute;left:15px;top:50%;
  transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(251,246,236,.14)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23FBF6EC'/%3E%3C/svg%3E")
    center/14px no-repeat;border:1px solid rgba(251,246,236,.34)}
.resume-ic svg{width:10px;height:10px;fill:currentColor;display:block}

/* چکیدهٔ جلسه — its CSS lives in shangarf.css: some series pages
   (ravankavi/sessions.html) load shangarf.css but NOT this file. */

/* 4 · فهرستِ کاتالوگ — pin the scriptural religions (یهودیت · مسیحیت) above the
   rest and cut them off with a simple hairline. Only rows carrying [data-pin]
   float up (ادیان only); every other index is untouched.
   (Owner: «یهودیت و مسیحیت رو بیار بالا و با یک خطِ ساده جدا کن».) */
.catalog .rows .pin-div{list-style:none;height:0;margin:5px 4px 9px;padding:0;
  border:0;border-top:1px dashed var(--c-tint);opacity:.85}

/* ════════════════════════════════════════════════════════════════════════
   سطرهای فشردهٔ یک‌خطی — owner 2026-07-25. Lives HERE, not in shangarf.css:
   this file loads after it, and the catalog-row rules above use the same
   specificity, so an override in the earlier sheet would lose the cascade.
   ════════════════════════════════════════════════════════════════════════ */
/* ── 2 · سطرهای فشردهٔ یک‌خطی ────────────────────────────────────────── */
.catalog .rows{gap:5px}
.catalog .rows .entry{padding:7px 14px;gap:12px}
.catalog .identity{display:flex;align-items:baseline;gap:9px;min-width:0}
.catalog .identity a{font-size:15.5px;flex:none;white-space:nowrap}
.catalog .identity small{display:block;margin-top:0;min-width:0;flex:1 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.catalog .datum.sessions{flex-direction:row;align-items:baseline;gap:4px;line-height:1.1}
.catalog .datum.sessions strong{font-size:16px;letter-spacing:0.02em}
.catalog .datum.sessions strong::after{display:inline;margin:0 0 0 4px;font-size:9.5px}
.catalog .rows .entry::after{font-size:12px}
@media (max-width:34rem){
  /* on a phone the meta drops below rather than truncating to nothing */
  .catalog .identity{display:block}
  .catalog .identity a{white-space:normal}
  .catalog .identity small{white-space:normal;font-size:10.5px;margin-top:1px}
}