/* ════════════════════════════════════════════════════════════════
   abri-live.css — «ابر و باد» applied to the live site.
   Loaded AFTER folio.css (inner pages) / the landing's inline style,
   overriding the manuscript theme: a slow ink-on-water sim (abri.js)
   becomes the page, content floats on frosted sea-glass.
   Tokens keep folio.css names (--crimson is now the SEA accent) so
   every component restyles itself; only surfaces are overridden here.
   ════════════════════════════════════════════════════════════════ */

:root {
  --paper: #f1e7d2; --paper-2: rgba(255, 252, 244, 0.45); --paper-fold: #e9dec6;
  --ink: #211610; --ink-soft: #5a4530;
  --gold: #a3782e; --gold-deep: #7a5a20; --gold-soft: rgba(163, 120, 46, 0.14);
  --crimson: #14586e; --crimson-dk: #0e3d4d;
  --rule: rgba(255, 255, 255, 0.55); --rule-soft: rgba(90, 69, 48, 0.13);

  --glass: rgba(250, 245, 233, 0.50);
  --glass-2: rgba(255, 252, 244, 0.42);
  --glass-deep: rgba(255, 252, 244, 0.66);
  --glass-line: rgba(255, 255, 255, 0.55);
  --sea-shadow: 0 18px 50px rgba(16, 46, 64, 0.13), 0 2px 10px rgba(16, 46, 64, 0.06);
  --glass-blur: 18px;
  --r-leaf: 28px; --r-card: 16px; --r-ctl: 12px;
}
:root[data-theme="dark"] {
  --paper: #0b1118; --paper-2: rgba(20, 33, 48, 0.44); --paper-fold: #080d13;
  --ink: #d9e4ec; --ink-soft: #8da3b4;
  --gold: #c9a14e; --gold-deep: #d8b870; --gold-soft: rgba(201, 161, 78, 0.13);
  --crimson: #7fc4d6; --crimson-dk: #a8d8e4;
  --rule: rgba(170, 210, 235, 0.18); --rule-soft: rgba(180, 205, 225, 0.10);

  --glass: rgba(15, 26, 38, 0.52);
  --glass-2: rgba(20, 33, 48, 0.44);
  --glass-deep: rgba(28, 45, 64, 0.66);
  --glass-line: rgba(170, 210, 235, 0.16);
  --sea-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ── glass alternatives (the Aa control: frost · crystal · tide · mist) ── */
html[data-glass="crystal"] {
  --glass: rgba(255, 255, 255, 0.26); --glass-2: rgba(255, 255, 255, 0.20);
  --glass-deep: rgba(255, 255, 255, 0.44); --glass-line: rgba(255, 255, 255, 0.72);
  --glass-blur: 30px;
}
html[data-glass="crystal"][data-theme="dark"] {
  --glass: rgba(12, 22, 34, 0.34); --glass-2: rgba(16, 28, 42, 0.30);
  --glass-deep: rgba(24, 40, 58, 0.52); --glass-line: rgba(180, 220, 240, 0.24);
}
html[data-glass="tide"] {
  --glass: rgba(203, 228, 233, 0.46); --glass-2: rgba(213, 234, 238, 0.40);
  --glass-deep: rgba(225, 242, 244, 0.66); --glass-line: rgba(255, 255, 255, 0.66);
  --glass-blur: 22px;
}
html[data-glass="tide"][data-theme="dark"] {
  --glass: rgba(13, 34, 44, 0.56); --glass-2: rgba(16, 40, 52, 0.48);
  --glass-deep: rgba(22, 52, 66, 0.70); --glass-line: rgba(130, 210, 225, 0.20);
}
html { --mist-core: rgba(248, 243, 231, 0.93); --mist-mid: rgba(248, 243, 231, 0.78); --mist-fade: rgba(248, 243, 231, 0.42); }
html[data-theme="dark"] { --mist-core: rgba(13, 20, 29, 0.94); --mist-mid: rgba(13, 20, 29, 0.80); --mist-fade: rgba(13, 20, 29, 0.45); }
html[data-glass="mist"] .folio {
  background: radial-gradient(ellipse 120% 100% at 50% 0%,
    var(--mist-core), var(--mist-mid) 70%, var(--mist-fade) 100%) !important;
  border-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ── the sheet ── */
#sheet {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh;
  display: block; cursor: crosshair; touch-action: pan-y; z-index: 0;
}
body.no-gl #sheet { display: none; }
body.no-gl::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 18% 12%, rgba(29, 58, 114, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 86% 78%, rgba(20, 88, 110, 0.09), transparent 60%),
    radial-gradient(ellipse 60% 70% at 72% 22%, rgba(46, 110, 94, 0.08), transparent 60%),
    var(--paper);
  filter: url(#abri-static);
}

body {
  background: var(--paper);
  /* the water flows under the iPhone notch (viewport-fit=cover); content
     starts below the status bar */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* ── the folio becomes the glass leaf ── */
.folio {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-line); border-radius: var(--r-leaf);
  box-shadow: var(--sea-shadow), inset 0 1px 0 var(--glass-line);
  z-index: 2;
}
.folio::before { content: none; }
/* promote the big glass to its own layer ONLY on iOS (its Safari flickers
   backdrop-filter over a repainting canvas) — on desktop the giant promoted
   texture made scroll rasterization lag behind (blue-flash blank glass) */
@supports (-webkit-touch-callout: none) {
  .folio, body.float-head .leafbox { transform: translateZ(0); }
}
.corner { display: none; }
/* if the browser can't blur, the glass must carry the weight alone */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .folio { background: rgba(250, 245, 233, 0.92); }
  :root[data-theme="dark"] .folio { background: rgba(15, 26, 38, 0.94); }
}

nav.top { border-bottom-color: var(--rule-soft); }

/* Persian kickers: Cinzel's wide tracking shreds Arabic-script joins —
   RTL interfaces read them in Markazi, untracked */
body[data-ui-dir="rtl"] .phead .kicker {
  font-family: "Markazi Text", serif; font-size: 15.5px;
  letter-spacing: 0.06em; text-transform: none;
}

/* the water is the entrance — content never hides behind a transition */
.reveal { opacity: 1 !important; transform: none !important; }

/* ── the beyt forms like a cloud crossing the sky: a soft vapor front
      drifts over the verse and the words are simply THERE behind it —
      no blur, no movement of the text itself (blur was nauseating).
      Base mask-position is the END state, so with animations disabled
      (reduced-motion, old browsers) the verse is always fully visible. ── */
@keyframes beyt-cloud {
  0%   { opacity: 0; -webkit-mask-position: 0% 50%; mask-position: 0% 50%; }
  35%  { opacity: 1; }
  100% { opacity: 1; -webkit-mask-position: 100% 50%; mask-position: 100% 50%; }
}
/* The mask lives on the PARENT couplet, padded outward so every stroke of
   Gulzar's overflowing ink (ک/گ sarkash, alef, deep sweeps) stays inside the
   masked border box — mask-clip always clips to the border box, so masking
   the bare line boxes amputated the ascenders no matter the mask size. */
.frame .beyt {
  padding: 0.85em 0.7em; margin: -0.85em -0.7em;
  -webkit-mask-image: linear-gradient(265deg, #000 35%, rgba(0,0,0,0.4) 55%, transparent 78%);
  mask-image: linear-gradient(265deg, #000 35%, rgba(0,0,0,0.4) 55%, transparent 78%);
  -webkit-mask-size: 300% 140%; mask-size: 300% 140%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 50%; mask-position: 100% 50%;
  animation: beyt-cloud 1.2s ease-out both;
}
.frame .beyt span:nth-child(2) { animation: beyt-cite 0.7s ease 0.4s both; }
@keyframes beyt-cite { from { opacity: 0; } to { opacity: 1; } }
.frame .cite { animation: beyt-cite 0.6s ease 1s both; }

/* the verse's rendering in the reader's language, resting under it */
.frame .btrans {
  margin: 6px auto 0; max-width: 560px; text-align: center;
  font-family: "EB Garamond", serif; font-style: italic;
  font-size: calc(16.5px * var(--rs, 1)); line-height: calc(1.7 * var(--rs-lh, 1));
  color: var(--ink-soft);
  animation: beyt-cite 0.9s ease 0.7s both;
}
.frame .btrans .l { display: block; }
.frame .btrans[dir="rtl"] { font-family: "Markazi Text", serif; font-style: normal; font-size: calc(17.5px * var(--rs, 1)); line-height: calc(1.9 * var(--rs-lh, 1)); }
/* Aa "under the verse": translation (default) or meaning — both render,
   the mode shows one (u-only ignores the mode: it's all we have).
   !important outranks the reader's data-rl display rules. */
html:not([data-under="mean"]) .u-mean:not(.u-only) { display: none !important; }
html[data-under="mean"] .u-trans:not(.u-only) { display: none !important; }
.blist .btr-mean { color: var(--ink-soft); }

/* the plain معنی under the couplet: quiet prose, clamped — the full
   text lives in the meaning area below */
.frame .bmean {
  font-size: calc(16.5px * var(--rs, 1)); color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
html[data-rs-font="sans"] .frame .btrans[dir="ltr"] { font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; }
body.float-head .frame .btrans { text-shadow: 0 0 10px var(--paper), 0 0 18px var(--paper); }
.frame .btrans-cta {
  display: block; width: fit-content; margin-inline: auto;
  margin-top: 12px; text-decoration: none;
  font-family: "EB Garamond", serif; font-style: italic; font-size: 14.5px;
  color: var(--crimson); background: var(--glass-2);
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 7px 20px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s;
  animation: beyt-cite 0.9s ease 0.7s both;
}
.frame .btrans-cta:hover { border-color: var(--crimson); background: var(--glass-deep); }
.frame .btrans-cta.is-busy { pointer-events: none; }
.frame .btrans-cta.is-busy .xlate-spin { vertical-align: -2px; margin-inline-end: 6px; }
.frame .btrans-cta.is-busy { animation: cta-pulse 1.6s ease-in-out infinite; }
@keyframes cta-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.55; } }

/* the verse breathes: more air between the crumb and the couplet
   (the beyt page's frame is a direct folio child; the daftar's lives
   inside the leafbox and keeps its spacing) */
body.float-head .folio > .frame { margin-top: 52px; }

/* render-offer boxes (meaning + soroush translate): glass, not dashed plates */
.ml-cta {
  border: 1px solid var(--glass-line); border-radius: var(--r-card);
  background: var(--glass-2);
}
.ml-go {
  border-radius: 999px; color: var(--paper);
  background: var(--crimson); border-color: var(--crimson);
}
:root[data-theme="dark"] .ml-go { color: var(--paper); }
body[data-ui-dir="rtl"] .frame .btrans-cta { font-style: normal; font-family: "Markazi Text", serif; font-size: 15.5px; }

/* ── components: rounded sea-glass instead of sharp manuscript plates ── */
.glist li { border-bottom: 1px solid var(--rule-soft); }
.glist a { border-radius: var(--r-ctl); }
.glist a:hover { background: var(--glass-deep); }

.pnav a { border-radius: var(--r-card); background: var(--glass-2); border-color: var(--glass-line); }
.pnav a:hover { background: var(--glass-deep); border-color: var(--glass-line); }
.pnav.prev-next a:not(.ghost) { border-radius: var(--r-card); background: var(--glass-2); border-color: var(--glass-line); }
.pnav.prev-next a:not(.ghost):hover { background: var(--glass-deep); border-color: var(--glass-line); box-shadow: var(--sea-shadow); }

.frame {
  border: 1px solid var(--glass-line); border-radius: var(--r-card);
  background: var(--glass-2);
}
.frame::before { content: none; }

.panel { background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: var(--r-card); }
.panel::before, .panel::after { content: none; }
.panel .ph .tag { border-radius: 999px; padding: 2px 9px; }
.panel .prose-fa code, .panel .prose-en code { background: var(--glass-deep); border-radius: 6px; }

.langbar { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
nav.top .langsel, .langsel { background: var(--glass-2); border-color: var(--glass-line); }

/* the language pill announces itself: a globe + a chevron (it's a select) */
.langwrap { position: relative; display: inline-flex; align-items: center; }
.langwrap .lw-ic {
  position: absolute; inset-inline-start: 12px; width: 13px; height: 13px;
  color: var(--gold-deep); pointer-events: none;
}
.langwrap .lw-ch {
  position: absolute; inset-inline-end: 10px; font-size: 8px;
  color: var(--ink-soft); pointer-events: none;
}
nav.top .langwrap .langsel, .langwrap .langsel {
  padding-inline-start: 31px; padding-inline-end: 24px; max-width: 150px;
}
/* phones: a native select sizes to its LONGEST option (31 language names)
   — cap it, and tighten the whole nav row so brand + controls share one line
   even at iPhone widths */
@media (max-width: 720px) {
  nav.top .langwrap .langsel, .langwrap .langsel {
    max-width: 92px; padding-inline-start: 26px; padding-inline-end: 16px;
    font-size: 12px;
  }
  .langwrap .lw-ic { inset-inline-start: 9px; width: 12px; height: 12px; }
  .langwrap .lw-ch { inset-inline-end: 6px; }
  nav.top { gap: 8px; }
  nav.top .links { gap: 9px; }
  nav.top .theme-toggle { padding: 4px 9px; }
  nav.top .rs-btn { padding: 6px 10px; font-size: 13px; }
  .rs-wrap { margin-inline-start: 2px; }
}

.rs-btn, .theme-toggle { background: var(--glass-2); border-color: var(--glass-line); }
.rs-btn:hover, .theme-toggle:hover { border-color: var(--crimson); }
.rs-pop {
  background: var(--glass-deep); border: 1px solid var(--glass-line); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--sea-shadow);
}
.rs-seg { border-color: var(--glass-line); background: var(--glass-2); }
.rs-step { background: var(--glass-2); border-color: var(--glass-line); }
.rs-seg button.on { background: var(--crimson); color: var(--paper); }
.seg { border-color: var(--glass-line); background: var(--glass-2); }
.seg button.on { background: var(--crimson); color: var(--paper); }

/* glass swatches in the Aa popover */
.rs-glass button {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--glass-line);
  cursor: pointer; padding: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(16, 46, 64, 0.25);
}
.rs-glass button::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid transparent; transition: border-color .2s;
}
.rs-glass button.on::after { border-color: var(--crimson); }
.rs-glass [data-glass-opt="frost"]   { background: linear-gradient(135deg, #f4ecda 40%, #cfdfe3); }
.rs-glass [data-glass-opt="crystal"] { background: linear-gradient(135deg, #ffffff 30%, #cde6ee); }
.rs-glass [data-glass-opt="tide"]    { background: linear-gradient(135deg, #cfe7eb 30%, #8fc3cd); }
.rs-glass [data-glass-opt="mist"]    { background: radial-gradient(circle at 50% 35%, #f6efdf 35%, #cdd9d4); }

.blist li { border-radius: var(--r-ctl); }
.blist li:hover { background: var(--glass-deep); }
.bcit { background: var(--glass-deep); border-color: var(--glass-line); border-radius: 999px; padding: 2px 9px; }
.blist li:hover .bcit { border-color: var(--crimson); }

.trbar { background: var(--glass-2); border-color: var(--glass-line); border-radius: var(--r-card); }

.pill { background: var(--glass-2); border-color: var(--glass-line); }
.pill:hover { background: var(--glass-deep); border-color: var(--crimson); }

.d-pip { background: var(--glass-2); border-color: var(--glass-line); border-radius: 999px; }
.d-pip:hover { background: var(--glass-deep); border-color: var(--crimson); }
.d-pip.cur { background: var(--crimson); border-color: var(--crimson); color: var(--paper); }

.xlate-select, .xlate-other, .xlate-model { background: var(--glass-deep); border-color: var(--glass-line); border-radius: var(--r-ctl); }
.xlate-go { border-radius: 999px; }
.xlate-regen { border-radius: 999px; background: var(--glass-2); border-color: var(--glass-line); }
.xlate-chip { background: var(--glass-2); border-color: var(--glass-line); }
.xlate-chip:hover { background: var(--glass-deep); border-color: var(--crimson); }
.xlate-card { background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: var(--r-card); }
.xlate-card::before, .xlate-card::after { content: none; }
.xlate-draft-note, .xlate-badge, .xlate-mchip, .xlate-aidraft { border-radius: 999px; }
.xlate-meaning { background: rgba(29, 138, 150, 0.08); border-radius: var(--r-ctl); }
.xlate-refine { border-radius: 999px; }

footer.foot { border-top-color: var(--rule-soft); }

/* ── audit fixes: page-local manuscript leftovers → glass ── */
/* daftar preface teaser: the text itself dissolves (mask) — an overlay
   gradient painted a pale band across the glass */
.di-teaser {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
}
.di-teaser.open { -webkit-mask-image: none; mask-image: none; }
.di-teaser::after { content: none; }

/* section-list subtitles follow the reader on LTR pages — Persian title
   flows from the right, the translation starts from the left (the same
   two-voice grammar as the beyt rows) */
body:not([data-ui-dir="rtl"]) .glist .t-tr {
  direction: ltr; text-align: left;
  margin-left: -60px;   /* start flush with the section-number column */
}
@media (max-width: 720px) {
  body:not([data-ui-dir="rtl"]) .glist .t-tr { margin-left: -50px; }
}

/* preface quick-read: one quiet invitation in the page's language */
.pf-quick { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pf-read.xlate-chip {
  font-size: 16px; padding: 8px 22px;
  border-color: var(--crimson); color: var(--crimson);
}
.pf-read.xlate-chip:hover { background: var(--glass-deep); }
.pf-more {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-2); border: 1px solid var(--glass-line);
  color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer;
}
.pf-more:hover { border-color: var(--firuze); color: var(--crimson); }
.di-open { background: var(--glass-2); }
/* section reader ask bar */
.askbar { border-color: var(--rule-soft) !important; }
.askbar input { background: var(--glass-deep); border-color: var(--glass-line); border-radius: var(--r-ctl); }
/* /ask: surfaces + the orphaned old-crimson reds → sea */
.composer, .opt-sel { background: var(--glass-deep); border-color: var(--glass-line); border-radius: var(--r-ctl); }
.seg2-btn.is-on { background: var(--crimson); color: var(--paper); }
.examples .ex { border-color: rgba(122, 90, 32, 0.35); }
:root[data-theme="dark"] .examples .ex { border-color: var(--glass-line); }
.error-box { background: rgba(20, 88, 110, 0.07); }
:root[data-theme="dark"] .error-box { background: rgba(127, 196, 214, 0.08); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(20, 88, 110, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(20, 88, 110, 0); }
}
.answer { border-radius: var(--r-card); }
.answer::before, .answer::after { content: none; }

/* ── float-head pages (beyt view): nav + verse on the open water,
      only the working parts below sit in the glass box — like the landing ── */
body.float-head .folio {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-glass="mist"] body.float-head .folio { background: transparent !important; }
body.float-head nav.top { border-bottom: none; }
body.float-head nav.top a, body.float-head .crumbs, body.float-head .phead .kicker,
body.float-head .phead .title-tr, body.float-head .phead .sub {
  text-shadow: 0 0 10px var(--paper), 0 0 18px var(--paper);
}
body.float-head .phead h1 {
  text-shadow: 0 0 12px var(--paper), 0 0 24px var(--paper), 0 0 40px var(--paper);
}
body.float-head .frame { border: none; background: none; }
body.float-head .frame .beyt, body.float-head .frame .cite {
  text-shadow: 0 0 12px var(--paper), 0 0 24px var(--paper), 0 0 40px var(--paper);
}
body.float-head .leafbox {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-line); border-radius: var(--r-leaf);
  box-shadow: var(--sea-shadow), inset 0 1px 0 var(--glass-line);
  padding: 30px 38px 36px; margin: 18px -24px 0;
}
html[data-glass="mist"] body.float-head .leafbox {
  background: radial-gradient(ellipse 120% 100% at 50% 0%,
    var(--mist-core), var(--mist-mid) 70%, var(--mist-fade) 100%);
  border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.float-head .leafbox { background: rgba(250, 245, 233, 0.92); }
  :root[data-theme="dark"] body.float-head .leafbox { background: rgba(15, 26, 38, 0.94); }
}
body.float-head footer.foot { border-top: none; }
@media (max-width: 720px) {
  body.float-head .leafbox { padding: 24px 16px 30px; margin: 14px -10px 0; }
}

/* ── the landing: hero and opener written on the water, cards as glass ── */
body.landing .folio {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-glass="mist"] body.landing .folio { background: transparent !important; }
body.landing nav.top { border-bottom: none; }
body.landing nav.top a, body.landing .hero .kicker, body.landing .hero .en-sub,
body.landing .hero .pitch, body.landing .colophon {
  text-shadow: 0 0 10px var(--paper), 0 0 18px var(--paper);
}
body.landing .hero h1, body.landing .opener .beyt {
  text-shadow: 0 0 12px var(--paper), 0 0 24px var(--paper), 0 0 40px var(--paper);
}
body.landing .opener { border: none; background: none; max-width: 680px; }
body.landing .opener::before { content: none; }
body.landing .cta { border-radius: 999px; }
body.landing .cta.p { background: var(--crimson); border-color: var(--crimson); box-shadow: var(--sea-shadow); }
body.landing .cta.s {
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--crimson);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
body.landing .door {
  background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}
body.landing .door::before, body.landing .door::after { content: none; }
body.landing .door:hover { background: var(--glass-deep); border-color: var(--glass-line); box-shadow: var(--sea-shadow); }
body.landing .props { border-color: var(--rule-soft); }
body.landing .daf { border-bottom: 1px solid var(--rule-soft); border-radius: var(--r-ctl); }
body.landing .daf:hover { background: var(--glass-deep); }
body.landing .agents {
  background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}
body.landing .plate .u { border-radius: 999px; }
body.landing .copybtn { border-radius: 999px; }
body.landing .colophon { border-top-color: var(--rule-soft); }
body.landing .shamsa { opacity: 0.92; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.landing .door, body.landing .agents { background: rgba(250, 245, 233, 0.9); }
  :root[data-theme="dark"] body.landing .door, :root[data-theme="dark"] body.landing .agents { background: rgba(15, 26, 38, 0.92); }
}

/* reading surfaces ignore double-tap zoom (pinch still works) */
* { touch-action: manipulation; }
#sheet { touch-action: pan-y; }

/* Aa popover must open INTO the viewport on RTL pages */
body[data-ui-dir="rtl"] .rs-pop { right: auto; left: 0; }

/* crumb pager separates at the inline end in both directions */
.crumbs .crumb-pager { margin-left: 0; margin-inline-start: auto; }

/* font ladder: no tiny steps, two bigger ones (1.0 → 1.8);
   the DEFAULT is step 2 — readers kept pressing +1 once */
:root { --rs: 1.14; }
html[data-rs-size="1"] { --rs: 1; }
html[data-rs-size="2"] { --rs: 1.14; }
html[data-rs-size="3"] { --rs: 1.3; }
html[data-rs-size="4"] { --rs: 1.55; }
html[data-rs-size="5"] { --rs: 1.8; }

/* trans-mode fallback keyed on a plain li class, not :has() — Safari's
   :has() invalidation lagged during live sweep fills (ghost strokes of
   half-hidden verses); class toggling invalidates reliably */
.blist[data-rl="trans"] li .bfa { display: block; }      /* fallback: verse shows */
.blist[data-rl="trans"] li.has-tr .bfa { display: none; } /* translated: verse hides */

/* sweep button: spin a true ring, not the off-center ✦ glyph */
.trbtn .ic { display: inline-block; line-height: 1; }
.trbar.is-running .trbtn .ic {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(253, 250, 242, 0.45); border-top-color: transparent;
  color: transparent;
}

/* Aa → Alignment: center — verses and their renderings sit on the axis */
/* desktop rows reserve a one-sided 92px chip gutter — centered text needs
   the same on both sides or the axis drifts */
@media (min-width: 721px) {
  html[data-align="center"] .blist a { padding-left: 92px; padding-right: 92px; }
}
html[data-align="center"] .blist .bfa,
html[data-align="center"] .blist .btr { text-align: center; }
html[data-align="center"] body:not([data-ui-dir="rtl"]) .glist .t-tr,
html[data-align="center"] .glist .t-tr { text-align: center; margin-left: 0; }
html[data-align="center"] .glist .t { text-align: center; }
/* centered mode: the number column skewed the optical center — the number
   floats at the edge and the title gets the full, symmetric width */
html[data-align="center"] .glist a {
  grid-template-columns: 1fr; position: relative; padding-inline: 56px;
}
html[data-align="center"] .glist .no {
  position: absolute; inset-inline-start: 14px; top: 19px;
}
html[data-align="center"] .glist .m {
  position: absolute; inset-inline-end: 14px; top: 19px;
}

/* reading-mode toggle: a centered glass capsule with pill options —
   it hugged one edge and read as heavy tabs */
.rl-row { justify-content: center !important; }
.rl-row .seg {
  padding: 4px; gap: 4px;
  background: var(--glass-2); border: 1px solid var(--glass-line);
}
.rl-row .seg button {
  border-inline-end: none; border-radius: 999px; padding: 6px 18px;
}
.rl-row .seg button.on { background: var(--crimson); color: var(--paper); }

/* corner marks are metadata, not buttons — they whisper.
   citation: bare faint mono; شرح: a small gold ❋ (word kept for a11y) */
.bcit {
  background: none; border: none; padding: 0;
  color: var(--ink-soft); opacity: 0.6;
}
.blist li:hover .bcit { color: var(--crimson); border: none; opacity: 1; }
.bcmt {
  background: none; border: none; padding: 0;
  color: var(--gold); font-size: 14px; opacity: 0.85;
}
/* folio's filled-pill era left a near-black dark-mode text color behind */
:root[data-theme="dark"] .bcmt { color: var(--gold); }
/* narrow screens: the corner OPPOSITE the citation chip, physically per
   page direction — the chips can never meet */
@media (max-width: 720px) {
  /* the language picker stacks on phones: select full-width, button below
     (side-by-side overflowed the frame after the ＋ expand) */
  .xlate-pick .xlate-select, .xlate-pick .xlate-other { flex: 1 1 100%; }
  .xlate-pick .xlate-go { flex: 0 0 auto; }
  /* nested leafbox→frame→card paddings strangled the preface and its
     translation on phones — collapse them */
  .frame { padding: 20px 14px 16px; }
  .xlate-card { padding: 16px 13px 12px; }
  .xlate-meaning { padding: 9px 11px; }
  .blist a { padding-top: 52px; }
  .bcit { position: absolute; top: 15px; left: 10px; margin: 0; }
  body[data-ui-dir="rtl"] .bcit { left: auto; right: 10px; }
  .bcmt {
    position: absolute; top: 15px; bottom: auto;
    right: 12px; left: auto; margin: 0;
  }
  body[data-ui-dir="rtl"] .bcmt { right: auto; left: 12px; }
}