/* Vazirmatn @font-face removed 2026-07-25 — project font rule is Estedad + Inter only. */

    :root{--paper:#fbf6ec;--paper-2:#f7efe0;--ink:#191714;--muted:#6f675b;--rule:#d8cbb6;--gold:#b08434}
    *{box-sizing:border-box}
    [hidden]{display:none!important}
    html{background:var(--paper)}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter','Estedad',system-ui,sans-serif;line-height:1.65}
    button,input,select{font:inherit}
    a{color:inherit}
    p{text-align:justify}
    .page-head{max-width:1180px;margin:auto;padding:34px 22px 20px;border-bottom:1px solid var(--rule)}
    .eyebrow{margin:0 0 5px;color:var(--gold);font-size:.8rem;font-weight:800;text-align:start}
    h1{margin:0;font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.2}
    .lead{margin:10px 0 0;color:var(--muted)}
    main{max-width:1180px;margin:auto;padding:24px 22px 50px}
    .catalog{--section:#15294e;margin:0 0 48px;border-top:5px solid var(--section)}
    .catalog-head{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:15px 0 12px;border-bottom:1px solid var(--rule)}
    .catalog-head h2{margin:0;color:var(--section);font-size:1.45rem}
    .catalog-head p{margin:3px 0 0;color:var(--muted);font-size:.88rem}
    .count{flex:none;color:var(--section);font-weight:850;border-bottom:3px solid var(--section)}
    .toolbar{display:grid;grid-template-columns:minmax(170px,1.35fr) repeat(2,minmax(150px,.8fr)) auto;gap:8px;padding:11px 0;border-bottom:1px solid var(--rule)}
    .catalog[data-kind="topics"] .toolbar{grid-template-columns:minmax(170px,1.35fr) minmax(150px,.8fr) minmax(150px,.8fr) auto}
    .toolbar label{display:grid;gap:3px;color:var(--muted);font-size:.7rem;font-weight:800}
    .toolbar input,.toolbar select{width:100%;min-width:0;height:40px;padding:6px 8px;border:1px solid var(--rule);border-radius:0;background:#fffdf7;color:var(--ink)}
    .direction{align-self:end;height:40px;padding:5px 12px;border:1px solid var(--section);border-radius:0;background:transparent;color:var(--section);font-weight:850;cursor:pointer}
    .direction:hover,.direction:focus-visible{background:var(--section);color:#fffaf0}
    .coverage{margin:0;padding:8px 0;color:var(--muted);font-size:.78rem;border-bottom:1px solid var(--rule)}
    .coverage strong{color:var(--section)}
    .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,30%);gap:30px;align-items:start}
    .master{min-width:0}
    .rows{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
    .entry{display:grid;grid-template-columns:2.25rem minmax(180px,1fr) 5.1rem 5.4rem 4.8rem 4.3rem;align-items:center;gap:9px;min-height:62px;padding:7px 4px;border-bottom:1px solid var(--rule);transition:border-color .15s,background .15s}
    .entry:hover{background:color-mix(in srgb,var(--section) 4%,transparent)}
    .entry.is-active{border-inline-start:4px solid var(--section);padding-inline-start:8px;background:color-mix(in srgb,var(--section) 6%,transparent)}
    .seq{color:var(--muted);font-size:.75rem}
    .identity{min-width:0}
    .identity a{display:inline-block;color:var(--section);font-size:1.03rem;font-weight:850;text-decoration:none}
    .identity a:hover,.identity a:focus-visible{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
    .identity small{display:block;overflow:hidden;color:var(--muted);font-size:.69rem;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
    .datum{display:grid;justify-items:start;line-height:1.2}
    .datum strong{font-size:.9rem}
    .datum small{color:var(--muted);font-size:.65rem}
    .inspect{justify-self:end;padding:4px 6px;border:0;border-bottom:1px solid var(--gold);border-radius:0;background:transparent;color:var(--section);font-size:.7rem;font-weight:850;cursor:pointer}
    .inspect:hover,.inspect:focus-visible{border-color:var(--section)}
    .catalog[data-kind="topics"] .entry{grid-template-columns:2.25rem minmax(180px,1fr) 5.2rem minmax(120px,.55fr) 4.3rem}
    .topic-group{color:var(--muted);font-size:.75rem}
    .margin-detail{position:sticky;top:18px;min-height:270px;margin-top:0;padding:2px 0 18px 20px;border-inline-start:1px solid var(--section)}
    .detail-kicker{color:var(--gold);font-size:.72rem;font-weight:850}
    .margin-detail h3{margin:4px 0 2px;color:var(--section);font-size:1.55rem;line-height:1.3}
    .detail-open{display:inline-block;margin-bottom:16px;color:var(--section);font-size:.78rem;font-weight:800;text-decoration-color:var(--gold);text-underline-offset:4px}
    .facts{margin:0;border-top:1px solid var(--rule)}
    .facts div{display:grid;grid-template-columns:1fr auto;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule)}
    .facts dt{color:var(--muted);font-size:.74rem}
    .facts dd{margin:0;font-size:.82rem;font-weight:850;text-align:end}
    .detail-note{margin:13px 0 0;color:var(--muted);font-size:.75rem}
    .empty{display:none;margin:0;padding:22px 6px;color:var(--muted);border-bottom:1px solid var(--rule)}
    .empty.show{display:block}
    noscript p{margin:0;padding:9px 0;color:var(--muted);font-size:.78rem;border-bottom:1px solid var(--rule)}
    .why{margin-top:4px;padding:18px 20px;border-inline-start:5px solid var(--gold);background:var(--paper-2)}
    .why h2{margin:0 0 5px;font-size:1.15rem}
    .why p{margin:0;color:#494238}
    @media(max-width:820px){
      .toolbar,.catalog[data-kind="topics"] .toolbar{grid-template-columns:1fr 1fr}.toolbar label:first-child{grid-column:1/-1}.split{grid-template-columns:minmax(0,1fr) minmax(220px,34%);gap:20px}
      .entry{grid-template-columns:2.1rem minmax(150px,1fr) 4.4rem 4.3rem}.entry .year,.entry .ayahs{display:none}.catalog[data-kind="topics"] .entry{grid-template-columns:2.1rem minmax(150px,1fr) 4.5rem 4rem}.catalog[data-kind="topics"] .topic-group{display:none}
    }
    @media(max-width:620px){
      .page-head{padding:26px 14px 16px}main{padding:15px 14px 36px}.catalog-head{display:block}.count{display:inline-block;margin-top:7px}.toolbar,.catalog[data-kind="topics"] .toolbar{grid-template-columns:1fr}.toolbar label:first-child{grid-column:auto}.split{display:block}.margin-detail{position:static;min-height:0;margin:20px 0 0;padding:0 0 12px;border-inline-start:0;border-top:3px solid var(--section);padding-top:12px}
      .entry,.catalog[data-kind="topics"] .entry{grid-template-columns:2rem minmax(0,1fr) 3.7rem;gap:7px;min-height:66px;padding-block:6px}.entry.is-active{padding-inline-start:5px}.entry .year,.entry .ayahs,.entry .topic-group{display:none}.inspect{grid-column:3;grid-row:1}.sessions{grid-column:3;grid-row:2}.identity{grid-row:1/3}.identity small{white-space:normal}.catalog-head p{font-size:.82rem}
    }
    @media(max-width:380px){.page-head,main{padding-inline:11px}.entry{gap:5px}.direction{width:100%}.coverage{font-size:.72rem}}
  
/* ── ارتقا · type and the header strip ──────────────────────────────────────
   Codex already used the site stack for body text; these pin the NUMERALS to the
   same treatment the rest of the site uses (tabular figures so a column lines up,
   tracking pulled in because Persian digits set loose), and give the row's sequence
   numeral the weight the owner asked for. */
body,.entry,.identity,.datum,.toolbar,.catalog-head,.margin-detail{
  font-family:'Inter','Estedad',system-ui,sans-serif}
.seq,.datum strong,.count,.facts dd,.identity small{
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.seq{font-size:1.05rem;font-weight:800;letter-spacing:-.04em}

/* The header strip must share the DATA ROW's track list, not invent one — laid out
   on its own grid every label piled into a single column. The tracks and padding
   below are read out of .entry at build time (see GRID below) so the two can never
   drift apart. */
.rows-head{display:grid;align-items:center;
  font-size:.74rem;font-weight:700;
  color:color-mix(in srgb,var(--accent,#15294e) 82%,transparent);
  background:color-mix(in srgb,var(--accent,#15294e) 10%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent,#15294e) 24%,transparent);
  border-radius:10px 10px 0 0}
.rows-head > *{justify-self:stretch;text-align:center;min-width:0}
.rows-head .col-nm{text-align:start}
.rows-head .col-nm{padding-inline-start:2px}
@media(max-width:46rem){.rows-head{display:none}}




/* ════════ ارتقای چندمرحله‌ای — one pass per numbered stage ════════ */

/* ── stage 1 · type ── */
body,.entry,.identity,.datum,.toolbar,.catalog-head,.margin-detail,.rows-head,
button,input,select{font-family:'Inter','Estedad',system-ui,sans-serif!important}
.seq,.datum strong,.count,.facts dd,.rows-head{font-feature-settings:'tnum' 1}
.identity a{font-size:1.02rem;font-weight:600}
.datum strong{font-size:1.02rem;font-weight:700}
.seq{font-size:.92rem;font-weight:600;opacity:.55}

/* ── stage 2 · one sorting surface ──
   The toolbar's sort select and direction button duplicated the header row; they
   drop from view (the engine still reads them) and the headers take over. */
.toolbar label:has([data-sort]),.toolbar .direction{display:none}
.rows-head .col-h{cursor:pointer;position:relative;padding-block:2px;
  border-radius:6px;transition:background .13s}
.rows-head .col-h:hover{background:rgba(255,255,255,.5)}
.rows-head .col-h.on{color:var(--accent,#15294e)}
.rows-head .col-h.on::after{content:"↓";margin-inline-start:3px;font-size:.9em}
.rows-head .col-h.on.asc::after{content:"↑"}
.rows-head .col-group{cursor:default}

/* ── stage 3 · ink-proportional rows ──
   The bar takes its own line UNDER the numeral. The first cut absolutely-positioned
   it inside the cell and the digits landed on top of it — the two were sharing one
   box. column-reverse puts the DOM-first bar visually second, numeral above, with a
   real gap between them. */
.entry{min-height:0;padding-block:8px}
.entry:nth-child(even){background:color-mix(in srgb,var(--accent,#15294e) 3%,transparent)}
.datum.sessions{display:flex;flex-direction:column-reverse;align-items:center;gap:5px}
.datum.sessions .wbar{position:relative;width:74%;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--accent,#15294e) 22%,transparent);overflow:hidden}
.datum.sessions .wbar::before{content:"";position:absolute;inset-block:0;
  inset-inline-start:0;width:var(--w,0%);border-radius:2px;
  background:var(--accent,#15294e)}

/* ── stage 4 · states ── */
.rows-head{position:sticky;top:0;z-index:6;
  background:color-mix(in srgb,var(--accent,#15294e) 10%,#FBF6EC)}
.entry:hover{background:color-mix(in srgb,var(--accent,#15294e) 7%,transparent)}
:is(a,button,input,select):focus-visible{outline:2px solid var(--accent,#15294e);
  outline-offset:2px;border-radius:6px}
@media print{
  .toolbar,.inspect,.margin-detail{display:none!important}
  .split{display:block}
  .entry{break-inside:avoid}
}
@media(max-width:46rem){
  .datum.sessions .wbar{display:none}
}

/* Production header-grid and Persian numeral typography hotfix. */
.rows-head{grid-template-columns:2.25rem minmax(180px,1fr) 5.1rem 5.4rem 4.8rem 4.3rem;
  gap:9px;min-height:48px;padding-inline:4px;font-family:'Estedad','Inter',system-ui,sans-serif!important;
  font-size:.78rem;line-height:1.35;font-feature-settings:'ss01' 1,'tnum' 1}
.rows-head>*{display:flex;align-items:center;justify-content:center;height:100%;padding-inline:4px;white-space:nowrap}
.rows-head .col-nm{justify-content:flex-start;text-align:start;font-weight:800}
.rows-head .col-seq,.rows-head .col-go{color:color-mix(in srgb,var(--accent,#15294e) 64%,transparent)}
.seq,.datum strong,.count,.facts dd{font-family:'Estedad','Inter',system-ui,sans-serif!important;font-feature-settings:'ss01' 1,'tnum' 1}
.catalog:not([data-kind="surah"]) :is(.entry,.rows-head){grid-template-columns:2.25rem minmax(180px,1fr) 5.1rem 4.3rem}
.catalog:not([data-kind="surah"]) :is(.year,.ayahs,.col-year,.col-extra){display:none}
@media(max-width:820px){
  .rows-head{grid-template-columns:2.1rem minmax(150px,1fr) 4.4rem 4.3rem}
  .rows-head :is(.col-year,.col-extra){display:none}
  .catalog:not([data-kind="surah"]) :is(.entry,.rows-head){grid-template-columns:2.1rem minmax(150px,1fr) 4.4rem 4.3rem}
}
@media(max-width:46rem){.rows-head{display:none}}

/* ── stage 5 · the margin pane becomes its own object ──
   It hung off the split's vertical rule with text touching that rule and hairlines
   under every fact — an appendix, not a place. It gets the identity the stat tiles
   already established: its own field, its own frame, an accent bar on top, and air
   between every line and every rule. */
.split{gap:34px}
.margin-detail{border-inline-start:0;padding:16px 18px 18px;min-height:0;
  background:color-mix(in srgb,var(--accent,#15294e) 5%,#FFFCF4);
  border:1px solid color-mix(in srgb,var(--accent,#15294e) 22%,#FFFCF4);
  border-top:3px solid var(--accent,#15294e);border-radius:13px}
.detail-kicker{font-size:.7rem;font-weight:600;letter-spacing:.02em;
  color:color-mix(in srgb,var(--accent,#15294e) 72%,#FFFCF4);margin-bottom:6px}
.margin-detail h3{margin:0 0 2px}
.detail-open{display:inline-block;margin:2px 0 12px}
.facts div{padding:9px 2px;gap:14px;align-items:baseline}
.facts div:last-child{border-bottom:0}
.facts dt{line-height:1.7}
.facts dd{font-weight:700;line-height:1.7}


#gal-back{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:99999;
  font:600 12.5px/1 'Inter','Estedad',system-ui,sans-serif;text-decoration:none;
  color:#FDF8EC;background:#15294e;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:10px 16px;box-shadow:0 4px 16px rgba(0,0,0,.28)}
#gal-back:hover{background:#1d3460}
@media print{#gal-back{display:none}}