/* ============================================================================
   دفترِ خواندن — Reading Desk
   Shangarf extension for long-form pages · Claude Design lane · 2026-07-19

   The brief: a collapsible side index so the text can be read full-width, plus a
   font-size control. The reference (shahname.web.app) keeps one long list open
   beside the text — good, but it is binary: the list is either there, eating a
   third of the screen, or you lose your place entirely.

   This does three things it doesn't:

   1. THREE RAIL STATES, not two.  باز (full TOC + apparatus) → تیغه (a slim
      numbered spine that still shows where you are, and expands on hover) →
      بسته (gone; the text takes the full measure). The middle state is the
      point: you can reclaim ~85% of the rail's width and still never lose your
      position in an 11,000-word transcript.

   2. THE INDEX KNOWS WHERE YOU ARE. An IntersectionObserver marks the section
      being read; the spine shows it as a filled pip, the open rail highlights
      the row, and a hairline progress bar under the header reports how far
      through the session you are. The reference list is inert by comparison.

   3. TEXT SIZE IS A READING SETTING, not a zoom.  Four steps scale the body,
      the ayah and the translation together on their own ratios — scripture
      keeps its dominance over prose at every step — while the chrome stays put.

   Every setting persists per-reader in localStorage.
   ========================================================================= */

/* ---------- reading settings: four text steps --------------------------- */
/* Body, ayah and translation scale on separate curves so their hierarchy is
   preserved: prose 16→20, ayah 22→28, translation 15→18. */
:root[data-fs="1"]{--fs-body:16px;  --fs-ayah:22px; --fs-tr:14.5px; --lh-body:1.9}
:root[data-fs="2"]{--fs-body:17px;  --fs-ayah:24px; --fs-tr:15.5px; --lh-body:1.95}
:root[data-fs="3"]{--fs-body:18.5px;--fs-ayah:26px; --fs-tr:16.5px; --lh-body:2}
:root[data-fs="4"]{--fs-body:20px;  --fs-ayah:28px; --fs-tr:18px;   --lh-body:2.05}

/* ---------- the desk shell ---------------------------------------------- */
/* NOTE: no transition on grid-template-columns. Chrome freezes a var()-based track
   list mid-transition and stops re-resolving it, so switching to تیغه left the rail
   at its open width (measured: --rail-w read 3.25rem while the track stayed 304px).
   The rail animates its own width/opacity instead — same feel, no stuck track. */
.desk{--rail-w:19rem;
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);
  gap:clamp(20px,3.4vw,48px);align-items:start;padding-top:var(--s5)}
.desk > .deskrail{order:-1}

/* تیغه — the slim spine */
.desk[data-rail="mini"]{--rail-w:3.25rem}
/* بسته — full width */
.desk[data-rail="off"]{--rail-w:0px;gap:0}
.desk[data-rail="off"] .deskrail{opacity:0;pointer-events:none;overflow:hidden}

.deskrail{position:sticky;top:14px;max-height:calc(100vh - 28px);
  display:flex;flex-direction:column;gap:var(--s3);min-width:0;width:100%;
  transition:opacity .2s ease}
/* the head must be allowed to shrink with the track, or its flex content pins the
   rail open in تیغه */
.railhead,.spine{width:100%;min-width:0;box-sizing:border-box}

/* ---------- rail head ---------------------------------------------------- */
.railhead{display:flex;align-items:center;gap:6px;background:var(--paper-high);
  border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:var(--shadow)}
.desk[data-rail="mini"] .railhead{display:none}
.rbtn{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--ink-faint);display:grid;place-items:center;cursor:pointer;
  transition:background .14s,color .14s}
.rbtn:hover{background:var(--c-wash);color:var(--c-deep)}
.rbtn.on{background:var(--c-wash);color:var(--c-deep);border-color:var(--c-tint)}
.rbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.railhead .lbl{font-size:var(--fs-micro);font-weight:600;color:var(--ink-faint);
  margin-inline-end:auto;padding-inline-start:8px;white-space:nowrap}
.desk[data-rail="mini"] .railhead .lbl{display:none}

/* text-size stepper */
.fsx{display:flex;align-items:center;gap:2px;border-inline-start:1px solid var(--line);
  padding-inline-start:5px;margin-inline-start:3px}
.desk[data-rail="mini"] .fsx{border:0;border-top:1px solid var(--line);
  padding:5px 0 0;margin:3px 0 0;flex-direction:column}
.fsx b{font-size:var(--fs-micro);font-weight:700;color:var(--c-deep);
  min-width:1.5em;text-align:center;font-variant-numeric:tabular-nums}
.desk[data-rail="mini"] .fsx b{display:none}

/* ---------- open rail: TOC with position ------------------------------- */
.deskpanels{display:flex;flex-direction:column;gap:var(--s3);overflow:auto;
  min-height:0;scrollbar-width:thin;padding-bottom:4px}
.desk[data-rail="mini"] .deskpanels{display:none}

.dtoc{background:var(--paper-high);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;flex:none}
.dtoc > h2{font-size:var(--fs-micro);font-weight:700;color:var(--c-deep);
  background:var(--c-wash);border-bottom:1px solid var(--line);padding:9px 15px;
  display:flex;justify-content:space-between;align-items:center}
.dtoc > h2 .of{font-weight:600;opacity:.75}
.dtoc ol{list-style:none;margin:0;padding:6px 0;counter-reset:dt}
.dtoc li{counter-increment:dt}
/* Two columns by default; a third opens only for the entries that carry a session
   range, so the plain tables of contents on other pages are untouched. */
.dtoc a{display:grid;grid-template-columns:1.6em 1fr;gap:9px;align-items:baseline;
  padding:6px 15px;font-size:var(--fs-side);line-height:1.62;color:var(--ink-soft)}
.dtoc a:has(.rng){grid-template-columns:1.6em 1fr auto}
.dtoc a .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dtoc a .rng{font-size:var(--fs-micro);color:var(--ink-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dtoc a:hover .rng,.dtoc a.now .rng{color:var(--c-deep)}
.dtoc a::before{content:counter(dt, persian);font-size:var(--fs-micro);font-weight:600;
  color:var(--c);background:var(--c-wash);border-radius:5px;padding:1px 0;text-align:center}
.dtoc a:hover{background:var(--paper-deep);color:var(--ink);text-decoration:none}
.dtoc a.now{background:var(--c-wash);color:var(--c-deep);font-weight:600;
  box-shadow:inset 2.5px 0 0 var(--c)}
.dtoc a.now::before{background:var(--c);color:var(--paper)}

/* ---------- mini rail: the numbered spine ------------------------------- */
.spine{display:none;flex-direction:column;gap:3px;align-items:center;overflow:auto;
  padding:8px 0;background:var(--paper-high);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);scrollbar-width:none}
.spine::-webkit-scrollbar{display:none}
.desk[data-rail="mini"] .spine{display:flex}
.spine a{position:relative;width:30px;height:26px;border-radius:7px;display:grid;
  place-items:center;font-size:var(--fs-micro);font-weight:600;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.spine a:hover{background:var(--c-wash);color:var(--c-deep);text-decoration:none}
.spine a.now{background:var(--c);color:var(--paper)}
/* hover reveals the section title without leaving the spine */
.spine a::after{content:attr(data-t);position:absolute;inset-inline-end:calc(100% + 9px);
  top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  background:var(--ink);color:var(--paper);font-size:var(--fs-micro);font-weight:500;
  padding:5px 11px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;max-width:15rem;overflow:hidden;
  text-overflow:ellipsis;z-index:20;box-shadow:var(--shadow)}
.spine a:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- reading progress -------------------------------------------- */
.progress{position:sticky;top:0;z-index:30;height:2.5px;background:var(--line);
  margin-bottom:-2.5px}
.progress i{display:block;height:100%;width:0;background:var(--c);
  transition:width .12s linear}

/* ---------- the reading bar: sticky, between header and text --------------
   Three placements were tried and rejected. A dock pinned to the screen edge read
   as a browser extension bolted onto the page. Inside the سرلوح it scrolled away
   exactly when a long read starts needing it. Floating and centred needed a
   show/hide rule, which meant it was sometimes absent when reached for.

   This is the plain answer: a bar that sits where the reader's eye already goes —
   between the title block and the first line — and then sticks to the top of the
   viewport for the rest of the session. Always there, never in the way, and it
   costs one strip of height instead of hovering over the words. */
.readbar{position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:8px;
  margin:0 0 var(--s4);padding:8px 14px;
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);
  transition:box-shadow .18s ease, border-color .18s ease}
/* once it has parted from the header it lifts off the page slightly */
.readbar.stuck{border-color:var(--line-strong);
  box-shadow:0 1px 3px rgba(38,33,25,.10), 0 12px 28px -14px rgba(38,33,25,.40)}

.readbar .rb-label{font-size:var(--fs-micro);font-weight:600;color:var(--ink-faint);
  margin-inline-end:auto;white-space:nowrap}
/* the label yields first when space is tight — the controls never wrap */
@media (max-width:34rem){.readbar .rb-label{display:none}}

.rbtn2{width:32px;height:32px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--ink-faint);display:grid;place-items:center;
  cursor:pointer;transition:background .14s,color .14s;flex:none}
.rbtn2:hover{background:var(--c-wash);color:var(--c-deep)}
.rbtn2.on{background:var(--c-wash);color:var(--c-deep);border-color:var(--c-tint)}
.rbtn2:disabled{opacity:.3;cursor:default}
.rbtn2 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* the A-A size mark is type, so it is filled rather than stroked */
.rmark{width:30px;display:grid;place-items:center;color:var(--ink-faint);flex:none}
.rmark svg{fill:currentColor;stroke:none;width:20px;height:20px}
.readbar .sep{width:1px;height:19px;background:var(--line);margin:0 2px;flex:none}
/* Latin digit: a setting value beside a Latin size mark, not Persian prose */
.readbar .fsn{min-width:1.6em;text-align:center;font:700 12px/1 var(--ff-latin);
  color:var(--c-deep);font-variant-numeric:tabular-nums;direction:ltr}

/* the theme switch joins the other reading settings — it was a lone floating pill
   in the corner, which split one set of controls across two places */
.rbtn2.theme-on .ic-sun{display:none}
.rbtn2 .ic-moon{display:none}
.rbtn2.theme-on .ic-moon{display:block}

@media print{.readbar{display:none!important}}
@media (prefers-reduced-motion:reduce){.readbar{transition:none}}

/* ---------- body measure follows the rail ------------------------------- */
/* The measure grows in step with the reclaimed space, but never past the point
   where a Persian line becomes tiring to track (~52rem ≈ 85 characters). */
.desk .matn{max-width:var(--measure);margin-inline:0}
.desk[data-rail="mini"] .matn{max-width:47rem}
.desk[data-rail="off"] .matn{max-width:52rem;margin-inline:auto}

/* ---------- mobile: the rail becomes a sheet ---------------------------- */
@media (max-width:64rem){
  .desk,.desk[data-rail="mini"],.desk[data-rail="off"]{grid-template-columns:1fr;gap:var(--s4)}
  .deskrail{position:static;max-height:none;opacity:1;pointer-events:auto}
  .desk[data-rail="off"] .deskrail{display:none}
  .desk[data-rail="mini"] .deskpanels{display:flex}
  .desk[data-rail="mini"] .spine{display:none}
  .spine{display:none!important}
  .railpop{inset-inline-start:14px;bottom:16px;top:auto;transform:none}
  .desk .matn,.desk[data-rail="off"] .matn{max-width:none}
  .dtoc{max-height:19rem;display:flex;flex-direction:column}
  .dtoc ol{overflow:auto}
}

@media print{
  .deskrail,.railpop,.progress,.railhead{display:none!important}
  .desk{display:block}
  .desk .matn{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .desk,.progress i,.spine a::after{transition:none}
}

/* ---------- references index: the entry grid ----------------------------- */
/* layout is [data-view]'s job; these are the reference card's own details */
.refgrid{margin:0 0 var(--s5)}
.rc-n{font-size:var(--fs-side);font-weight:600;color:var(--ink);line-height:1.55}
.rc-m{font-size:var(--fs-micro);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.refcard:hover .rc-n{color:var(--c-deep)}
.h2-count{margin-inline-start:auto;font-size:var(--fs-micro);font-weight:600;
  color:var(--c-deep);background:var(--c-wash);border:1px solid var(--c-tint);
  border-radius:999px;padding:2px 11px;transform:translateY(-3px)}
.matn h2 .h2-count + *{margin:0}
/* the apparatus list reuses .dtoc chrome but keeps its two-line rows */
.appx-in{list-style:none;margin:0;padding:6px 0}
.appx-in a{display:block;padding:7px 15px}
.appx-in a:hover{background:var(--paper-deep);text-decoration:none}
.appx-in .t{display:block;font-size:var(--fs-side);font-weight:600;color:var(--ink)}
.appx-in .m{display:block;font-size:var(--fs-micro);color:var(--ink-faint);
  margin-top:1px;line-height:1.65}


/* ---------- reference sub-groups: no more orphaned labels ----------------
   The archive nests category → sub-group → sub-sub-group («اشخاص» →
   «متفکرین اسلامی و ایرانی» → «حکمت، عرفان و تفسیر»). Rendered as bare headings
   they float between card grids with nothing binding them to what they label.
   Here each sub-group is a bounded band: a tinted strip with a rule that runs to
   the margin and a count chip, and its cards indent under it, so the label
   visibly owns the block beneath it. */
.subgroup{margin:0 0 var(--s4);border-inline-start:2px solid var(--c-tint);
  padding-inline-start:16px}
.subgroup + .subgroup{margin-top:var(--s5)}
.sg-head{display:flex;align-items:center;gap:11px;margin:0 0 11px}
.sg-head .t{font-size:15.5px;font-weight:700;color:var(--c-deep);white-space:nowrap}
.sg-head .rule{flex:1;height:1px;background:var(--line-strong);opacity:.55}
.sg-head .n{flex:none;font-size:var(--fs-micro);font-weight:600;color:var(--c-deep);
  background:var(--c-wash);border:1px solid var(--c-tint);border-radius:999px;padding:2px 10px}
/* third level: quieter, no border, just a small caps-ish label */
.subsub{margin:0 0 var(--s3)}
.subsub + .subsub{margin-top:var(--s4)}
.ss-head{display:flex;align-items:baseline;gap:9px;margin:0 0 8px}
.ss-head .t{font-size:13px;font-weight:600;color:var(--ink-faint);letter-spacing:.01em}
.ss-head .n{font-size:var(--fs-micro);color:var(--ink-faint);opacity:.8}
.ss-head .rule{flex:1;height:1px;background:var(--line);opacity:.7}

/* ---------- فهرست‌های سطری — quieter, more formal than the plate cards -----
   The gate/plate cards were large gradient blocks with the title reversed out of
   a dark field; at 19px on a saturated gradient the Persian title lost contrast
   and the page read as a marketing splash rather than an archive index. These
   rows carry the same information in a fraction of the height: ink on paper for
   the title, the collection colour as a spine and a small chip, the count set as
   a number rather than a display figure. */
.rows{display:flex;flex-direction:column;gap:8px}
/* The box itself wears the collection colour: a wash of it as the fill, a
   stronger cut of the same colour as the border. Flat paper boxes with a 3px
   spine read as lifeless; the wash keeps rows apart at a glance without ever
   competing with the ink. */
.row-item{display:grid;grid-template-columns:3px auto 1fr auto;gap:16px;align-items:center;
  padding:13px 18px 13px 15px;
  background:color-mix(in srgb, var(--c) 16%, var(--paper-high));
  border:1px solid color-mix(in srgb, var(--c) 24%, var(--paper-high));
  border-radius:12px;transition:background .14s,border-color .14s}
a.row-item:hover{background:color-mix(in srgb, var(--c) 15%, var(--paper-high));
  border-color:color-mix(in srgb, var(--c) 44%, var(--paper-high));text-decoration:none}
.row-item > .spine-i{display:block;width:3px;height:34px;border-radius:2px;background:var(--c)}
.row-item .rt{min-width:0}
.row-item .rt b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5}
.row-item .rt span{display:block;font-size:var(--fs-micro);color:var(--ink-faint);
  line-height:1.7;margin-top:1px}
.row-item .rn{text-align:center;white-space:nowrap}
/* A standalone display numeral, not a column of figures: proportional digits with
   a touch of negative tracking sit tight, where tabular spacing splays them apart.
   The small downward nudge seats the numeral toward its «جلسه» label. */
.row-item .rn b{display:block;font-size:20px;font-weight:800;color:var(--c-deep);
  line-height:1;letter-spacing:-.05em;transform:translateY(4px)}
.row-item .rn span{font-size:10.5px;color:var(--ink-faint)}
.row-item .go{font-size:var(--fs-micro);color:var(--c-deep);font-weight:600}
/* ---------- ارقامِ شاخص — stat tiles ----------
   Figures used to sit bare on the paper and read as leftovers. Each one now
   holds a tile: a wash of its colour for the field, a solid bar of it on top,
   the numeral at full depth. Colour here is the spectrum of the archive, one
   collection colour per tile. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px;margin:26px 0 0}
/* One neutral surface for all four. These are totals about the archive — sessions,
   collections, years, references — not subjects, so colour-coding them said something
   untrue: four different hues implied four different topics. Plain paper, navy figures,
   and the colour system is left to mean what it means everywhere else. */
.stat{padding:13px 16px 12px;border-radius:11px;
  background:var(--paper-mid);border:1px solid var(--line)}
.stat b{display:block;font-size:24px;font-weight:800;color:var(--lajvard-deep);
  line-height:1;letter-spacing:-.05em}
.stat span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:6px}
/* the per-tile classes stay in the markup and are deliberately inert */
.st-lajvard,.st-zangar,.st-nili,.st-fooladi,.st-boronz{--tc:initial;--tcd:initial}

/* each row carries its own collection colour */
.r-tafsir{--c:var(--lajvard);--c-deep:var(--lajvard-deep);--c-tint:var(--lajvard-tint);--c-wash:var(--lajvard-wash)}
.r-adyan{--c:var(--zangar);--c-deep:var(--zangar-deep);--c-tint:var(--zangar-tint);--c-wash:var(--zangar-wash)}
.r-ravan{--c:var(--nili);--c-deep:var(--nili-deep);--c-tint:var(--nili-tint);--c-wash:var(--nili-wash)}
.r-mawzuat{--c:var(--fooladi);--c-deep:var(--fooladi-deep);--c-tint:var(--fooladi-tint);--c-wash:var(--fooladi-wash)}
.r-sokhan{--c:var(--boronz);--c-deep:var(--boronz-deep);--c-tint:var(--boronz-tint);--c-wash:var(--boronz-wash)}
@media (max-width:34rem){
  .row-item{grid-template-columns:3px 1fr auto;gap:12px;padding:11px 14px}
  .row-item .go{display:none}
}

/* ---------- سیرِ زمانی in the rail --------------------------------------
   It was a collapsible box in the body first, with its own toggle chevron — a
   second collapse idiom on a site that already has one. Moving it into the rail
   means the hub navigates like every other page: the same باز/تیغه/بسته control
   in the reading bar, the same sticky column, the same spine of numbers when
   narrowed. One pattern, learned once. */
.tl-panel .tl-filter{padding:9px 13px;border-bottom:1px solid var(--line);
  background:var(--paper-mid)}
.tl-panel select{appearance:none;width:100%;font:600 12.5px/1 var(--ff);color:var(--ink);
  background:var(--paper-high);border:1px solid var(--line-strong);border-radius:8px;
  padding:8px 12px 8px 28px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(11px) calc(50% - 1px), calc(16px) calc(50% - 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tl-panel select:hover{border-color:var(--c-tint)}
.tl-years{list-style:none;margin:0;padding:6px 0;max-height:22rem;overflow:auto;
  scrollbar-width:thin}
.tl-years a{display:block;padding:6px 15px;font-size:var(--fs-side);color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.tl-years a:hover{background:var(--paper-deep);color:var(--ink);text-decoration:none}
.tl-years a.now{background:var(--c-wash);color:var(--c-deep);font-weight:600;
  box-shadow:inset 2.5px 0 0 var(--c)}
.tl-empty{font-size:var(--fs-side);color:var(--ink-faint);text-align:center;padding:26px 0}
.h2-count.tl-count{font-variant-numeric:tabular-nums}

/* ---------- references index: the entry grid ----------------------------- */
/* layout is [data-view]'s job; these are the reference card's own details */
.refgrid{margin:0 0 var(--s5)}
.rc-n{font-size:var(--fs-side);font-weight:600;color:var(--ink);line-height:1.55}
.rc-m{font-size:var(--fs-micro);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.refcard:hover .rc-n{color:var(--c-deep)}
.h2-count{margin-inline-start:auto;font-size:var(--fs-micro);font-weight:600;
  color:var(--c-deep);background:var(--c-wash);border:1px solid var(--c-tint);
  border-radius:999px;padding:2px 11px;transform:translateY(-3px)}
.matn h2 .h2-count + *{margin:0}
/* the apparatus list reuses .dtoc chrome but keeps its two-line rows */
.appx-in{list-style:none;margin:0;padding:6px 0}
.appx-in a{display:block;padding:7px 15px}
.appx-in a:hover{background:var(--paper-deep);text-decoration:none}
.appx-in .t{display:block;font-size:var(--fs-side);font-weight:600;color:var(--ink)}
.appx-in .m{display:block;font-size:var(--fs-micro);color:var(--ink-faint);
  margin-top:1px;line-height:1.65}


/* ---------- reference sub-groups: no more orphaned labels ----------------
   The archive nests category → sub-group → sub-sub-group («اشخاص» →
   «متفکرین اسلامی و ایرانی» → «حکمت، عرفان و تفسیر»). Rendered as bare headings
   they float between card grids with nothing binding them to what they label.
   Here each sub-group is a bounded band: a tinted strip with a rule that runs to
   the margin and a count chip, and its cards indent under it, so the label
   visibly owns the block beneath it. */
.subgroup{margin:0 0 var(--s4);border-inline-start:2px solid var(--c-tint);
  padding-inline-start:16px}
.subgroup + .subgroup{margin-top:var(--s5)}
.sg-head{display:flex;align-items:center;gap:11px;margin:0 0 11px}
.sg-head .t{font-size:15.5px;font-weight:700;color:var(--c-deep);white-space:nowrap}
.sg-head .rule{flex:1;height:1px;background:var(--line-strong);opacity:.55}
.sg-head .n{flex:none;font-size:var(--fs-micro);font-weight:600;color:var(--c-deep);
  background:var(--c-wash);border:1px solid var(--c-tint);border-radius:999px;padding:2px 10px}
/* third level: quieter, no border, just a small caps-ish label */
.subsub{margin:0 0 var(--s3)}
.subsub + .subsub{margin-top:var(--s4)}
.ss-head{display:flex;align-items:baseline;gap:9px;margin:0 0 8px}
.ss-head .t{font-size:13px;font-weight:600;color:var(--ink-faint);letter-spacing:.01em}
.ss-head .n{font-size:var(--fs-micro);color:var(--ink-faint);opacity:.8}
.ss-head .rule{flex:1;height:1px;background:var(--line);opacity:.7}

/* ---------- فهرست‌های سطری — quieter, more formal than the plate cards -----
   The gate/plate cards were large gradient blocks with the title reversed out of
   a dark field; at 19px on a saturated gradient the Persian title lost contrast
   and the page read as a marketing splash rather than an archive index. These
   rows carry the same information in a fraction of the height: ink on paper for
   the title, the collection colour as a spine and a small chip, the count set as
   a number rather than a display figure. */
.rows{display:flex;flex-direction:column;gap:8px}
/* The box itself wears the collection colour: a wash of it as the fill, a
   stronger cut of the same colour as the border. Flat paper boxes with a 3px
   spine read as lifeless; the wash keeps rows apart at a glance without ever
   competing with the ink. */
.row-item{display:grid;grid-template-columns:3px auto 1fr auto;gap:16px;align-items:center;
  padding:13px 18px 13px 15px;
  background:color-mix(in srgb, var(--c) 16%, var(--paper-high));
  border:1px solid color-mix(in srgb, var(--c) 24%, var(--paper-high));
  border-radius:12px;transition:background .14s,border-color .14s}
a.row-item:hover{background:color-mix(in srgb, var(--c) 15%, var(--paper-high));
  border-color:color-mix(in srgb, var(--c) 44%, var(--paper-high));text-decoration:none}
.row-item > .spine-i{display:block;width:3px;height:34px;border-radius:2px;background:var(--c)}
.row-item .rt{min-width:0}
.row-item .rt b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.5}
.row-item .rt span{display:block;font-size:var(--fs-micro);color:var(--ink-faint);
  line-height:1.7;margin-top:1px}
.row-item .rn{text-align:center;white-space:nowrap}
/* A standalone display numeral, not a column of figures: proportional digits with
   a touch of negative tracking sit tight, where tabular spacing splays them apart.
   The small downward nudge seats the numeral toward its «جلسه» label. */
.row-item .rn b{display:block;font-size:20px;font-weight:800;color:var(--c-deep);
  line-height:1;letter-spacing:-.05em;transform:translateY(4px)}
.row-item .rn span{font-size:10.5px;color:var(--ink-faint)}
.row-item .go{font-size:var(--fs-micro);color:var(--c-deep);font-weight:600}
/* each row carries its own collection colour */
.r-tafsir{--c:var(--lajvard);--c-deep:var(--lajvard-deep);--c-tint:var(--lajvard-tint);--c-wash:var(--lajvard-wash)}
.r-adyan{--c:var(--zangar);--c-deep:var(--zangar-deep);--c-tint:var(--zangar-tint);--c-wash:var(--zangar-wash)}
.r-ravan{--c:var(--nili);--c-deep:var(--nili-deep);--c-tint:var(--nili-tint);--c-wash:var(--nili-wash)}
.r-mawzuat{--c:var(--fooladi);--c-deep:var(--fooladi-deep);--c-tint:var(--fooladi-tint);--c-wash:var(--fooladi-wash)}
.r-sokhan{--c:var(--boronz);--c-deep:var(--boronz-deep);--c-tint:var(--boronz-tint);--c-wash:var(--boronz-wash)}
@media (max-width:34rem){
  .row-item{grid-template-columns:3px 1fr auto;gap:12px;padding:11px 14px}
  .row-item .go{display:none}
}

/* ---------- سیرِ زمانی — the collapsible, filterable timeline -------------- */
.timeline-box{border:1px solid var(--line);border-radius:16px;background:var(--paper-high);
  box-shadow:var(--shadow);overflow:hidden;margin-top:var(--s4)}
.tl-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;
  background:var(--paper-mid);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tl-toggle{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;
  cursor:pointer;font:700 16px/1.5 var(--ff);color:var(--ink)}
.tl-toggle .chev{width:20px;height:20px;display:grid;place-items:center;color:var(--c-deep);
  transition:transform .2s ease}
.tl-toggle .chev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.timeline-box[data-open="false"] .tl-toggle .chev{transform:rotate(-90deg)}
.tl-count{font-size:var(--fs-micro);font-weight:600;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.tl-pick{margin-inline-start:auto;position:relative}
.tl-pick select{appearance:none;font:600 13px/1 var(--ff);color:var(--ink);
  background:var(--paper-high);border:1px solid var(--line-strong);border-radius:9px;
  padding:9px 34px 9px 14px;cursor:pointer;min-width:13rem}
.tl-pick select:hover{border-color:var(--c-tint)}
.tl-pick::after{content:"";position:absolute;inset-inline-start:13px;top:50%;
  width:7px;height:7px;border-inline-end:1.8px solid var(--ink-faint);
  border-block-end:1.8px solid var(--ink-faint);transform:translateY(-70%) rotate(45deg);
  pointer-events:none}
.tl-body{padding:20px 22px 22px;max-height:none;overflow:hidden}
.timeline-box[data-open="false"] .tl-body{display:none}
.tl-empty{font-size:var(--fs-side);color:var(--ink-faint);text-align:center;padding:26px 0}
@media (max-width:34rem){
  .tl-bar{gap:10px}
  .tl-pick{margin-inline-start:0;width:100%}
  .tl-pick select{width:100%}
}

/* ---------- نما: سطری یا موزاییکی ----------------------------------------
   One switch governs every index on the site. Rows are the default because a
   long index is read by scanning down a single column of names — the eye makes
   one pass, and each row has room for the metadata (session count, year, chapter
   count) that a tile has to drop. The mosaic stays available: for the reference
   index at 127 entries, and for the Bible's 66 books, seeing many names at once
   is genuinely faster once you know what you are looking for.

   Both views are the SAME markup. The container carries data-view and the items
   re-flow; nothing is duplicated, so the two can never drift apart. */

/* ── list view (default) ── */
[data-view="list"]{display:flex;flex-direction:column;gap:5px}
[data-view="list"] > *{display:grid;grid-template-columns:1fr auto;gap:14px;
  align-items:center;padding:9px 15px;
  background:color-mix(in srgb, var(--c) 16%, var(--paper-high));
  border:1px solid color-mix(in srgb, var(--c) 22%, var(--paper-high));
  border-radius:9px;min-height:0}
[data-view="list"] > *:hover{background:color-mix(in srgb, var(--c) 14%, var(--paper-high));
  border-color:color-mix(in srgb, var(--c) 42%, var(--paper-high))}
/* the name stays on one line and truncates rather than wrapping the row open */
[data-view="list"] .rc-n,[data-view="list"] .bk-n,[data-view="list"] .nz-nm{
  font-size:14.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-view="list"] .rc-m,[data-view="list"] .bk-c,[data-view="list"] .nz-v{
  font-size:var(--fs-micro);color:var(--ink-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* nazm rows keep their numeral in a third column */
[data-view="list"] .nz-s{grid-template-columns:auto 1fr auto}

/* ── mosaic view ── */
[data-view="grid"]{display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(var(--tile,186px),1fr))}
[data-view="grid"] > *{display:flex;flex-direction:column;gap:3px;padding:10px 13px;
  background:color-mix(in srgb, var(--c) 16%, var(--paper-high));
  border:1px solid color-mix(in srgb, var(--c) 22%, var(--paper-high));border-radius:10px}
[data-view="grid"] > *:hover{background:color-mix(in srgb, var(--c) 14%, var(--paper-high));
  border-color:color-mix(in srgb, var(--c) 42%, var(--paper-high))}
[data-view="grid"] .nz-s{display:grid;grid-template-columns:auto 1fr auto;
  gap:10px;align-items:center}

[data-view] > *{text-decoration:none;transition:background .14s,border-color .14s}
[data-view] > *:hover{text-decoration:none}

/* ── the switch itself ── */
.viewsw{display:inline-flex;gap:3px;padding:3px;background:var(--paper-high);
  border:1px solid var(--line);border-radius:9px}
.viewsw button{width:30px;height:26px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--ink-faint);display:grid;place-items:center;cursor:pointer;
  transition:background .14s,color .14s}
.viewsw button:hover{color:var(--ink)}
.viewsw button.on{background:var(--c-wash);color:var(--c-deep);border-color:var(--c-tint)}
.viewsw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:34rem){
  /* below this width the mosaic is a single column anyway, so the switch is noise */
  .viewsw{display:none}
  [data-view="grid"]{display:flex;flex-direction:column;gap:5px}
}

/* ── the chronology's filter, now a bar above it rather than a rail beside it ── */
.tl-bar2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 var(--s3);
  padding:10px 15px;background:var(--paper-high);border:1px solid var(--line);
  border-radius:12px}
.tl-bar2 .lbl{font-size:var(--fs-micro);font-weight:700;color:var(--c-deep)}
.tl-bar2 .tl-pick{font:600 12.5px/1 var(--ff);color:var(--ink);background:var(--paper);
  border:1px solid var(--line-strong);border-radius:8px;padding:8px 12px;cursor:pointer}
.tl-bar2 .tl-count{margin-inline-start:auto;font-size:var(--fs-micro);color:var(--ink-faint)}