/* ============================================================
   LANGUAGE SELECTOR
   Built from the same tokens as the rest of the site: antique gold on
   night, eight-point geometry, the established easing curves. Every offset
   is logical, so the panel mirrors itself between RTL and LTR with no
   direction-specific rules.
   ============================================================ */

/* ---------- Header: the globe is reachable from the first screen ----------
   The header keeps its existing entrance. Only the language control is
   present before the reader has scrolled, so the hero stays quiet. */
.site-head {
  transform: none;
  opacity: 1;
  pointer-events: none;
}
.site-head::before { opacity: 0; transition: opacity 0.8s var(--e-out); }
.site-head.is-visible::before { opacity: 1; }
/* Hidden means hidden: visibility keeps these links out of the tab order
   while the header is still tucked away, which opacity alone would not. */
.site-head :is(.site-head__mark, .site-head__nav, .site-head__menu) {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s var(--e-out), transform 0.8s var(--e-soft), color var(--d-fast), visibility 0s linear 0.7s;
}
.site-head.is-visible :is(.site-head__mark, .site-head__nav, .site-head__menu) {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.site-head__tools { display: flex; align-items: center; gap: 0.35rem; pointer-events: auto; }
/* Some languages set these chapter names far longer than the Persian ones;
   they may shrink the row, but they must never wrap it onto two lines. */
.site-head__nav a { white-space: nowrap; }

/* ---------- Trigger ---------- */
.lang { position: relative; }
.lang__trigger {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--t-2);
  font-family: var(--f-sans); font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  transition: color var(--d-fast), background-color var(--d-fast), border-color var(--d-fast);
}
.lang__trigger:hover, .lang__trigger[aria-expanded="true"] {
  color: var(--c-gold-light);
  background: rgba(200, 167, 93, 0.09);
  border-color: var(--hairline);
}
.lang__globe {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.25;
  color: var(--c-gold);
  transition: transform 1.2s var(--e-soft), color var(--d-fast);
}
.lang__trigger:hover .lang__globe, .lang__trigger[aria-expanded="true"] .lang__globe {
  color: var(--c-gold-light);
  transform: rotate(22deg);
}
.lang__current { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 419px) { .lang__current { display: none; } }

/* ---------- Panel ---------- */
.lang-panel {
  position: absolute; z-index: 96;
  top: calc(100% + 0.6rem); inset-inline-end: 0;
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(0.985);
  transform-origin: 100% 0;
  transition: opacity 0.35s var(--e-out), transform 0.45s var(--e-soft), visibility 0s linear 0.45s;
}
.lang-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.lang-panel__sheet {
  display: flex; flex-direction: column;
  max-height: min(30rem, calc(100vh - 7rem));
  background: linear-gradient(170deg, rgba(19, 27, 58, 0.97), rgba(10, 15, 30, 0.98));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft), 0 0 0 1px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  overflow: hidden;
}
.lang-panel__grip { display: none; }

.lang-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem 0.35rem;
}
.lang-panel__title {
  font-family: var(--f-sans); font-weight: 500; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--c-gold);
}
.lang-panel__close {
  display: none; place-items: center;
  width: 2.5rem; height: 2.5rem; margin: -0.5rem -0.4rem -0.5rem 0;
  color: var(--t-2); border-radius: 999px;
  transition: color var(--d-fast), background-color var(--d-fast);
}
.lang-panel__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang-panel__close:hover { color: var(--c-gold-light); background: rgba(200, 167, 93, 0.1); }

/* ---------- Search ---------- */
.lang-panel__search { position: relative; padding: 0.35rem 1.1rem 0.75rem; }
.lang-panel__glass {
  position: absolute; top: 50%; inset-inline-start: 1.8rem;
  width: 0.95rem; height: 0.95rem; margin-top: -0.65rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  color: var(--c-gold-deep); pointer-events: none;
}
.lang-panel__input {
  width: 100%; min-height: 2.6rem;
  padding: 0.55rem 2.5rem 0.55rem 0.9rem;
  padding-inline: 2.5rem 0.9rem;
  font-family: var(--f-sans); font-size: var(--fs-sm); line-height: 1.5;
  color: var(--t-1);
  background: rgba(255, 250, 235, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color var(--d-fast), background-color var(--d-fast);
  -webkit-appearance: none; appearance: none;
}
.lang-panel__input::placeholder { color: var(--t-3); }
.lang-panel__input:focus { outline: none; border-color: var(--hairline-strong); background: rgba(255, 250, 235, 0.08); }
.lang-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- List ---------- */
.lang-panel__list {
  flex: 1 1 auto; min-height: 0;
  padding: 0 0.55rem 0.6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2b3050 transparent;
}
.lang-panel__list::-webkit-scrollbar { width: 8px; }
.lang-panel__list::-webkit-scrollbar-track { background: transparent; }
.lang-panel__list::-webkit-scrollbar-thumb { background: #2b3050; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

.lang-group + .lang-group { margin-top: 0.35rem; }
.lang-group[hidden] { display: none; }
.lang-group__label {
  position: sticky; top: 0; z-index: 1;
  padding: 0.7rem 0.55rem 0.4rem;
  font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: 500; line-height: 1.6;
  color: var(--c-gold-deep);
  background: linear-gradient(to bottom, rgba(13, 19, 42, 0.97) 65%, rgba(13, 19, 42, 0));
}

.lang-opt {
  display: flex; align-items: baseline; gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--r-sm);
  color: var(--t-1);
  transition: background-color 0.25s var(--e-out), color 0.25s var(--e-out);
}
.lang-opt[hidden] { display: none; }
.lang-opt:hover, .lang-opt.is-active { background: rgba(200, 167, 93, 0.1); color: var(--c-gold-light); }
.lang-opt:focus-visible { outline-offset: -2px; }
/* The option names span some twenty-five scripts, so they deliberately do
   not use the page's own type stack: doing so would make every page load a
   full Arabic or Latin face to draw names nobody has opened yet. System
   fonts hold the place until fonts/menu.css arrives with faces cut to
   exactly these names, which happens on the selector's first open.
   Isolation keeps a right-to-left name from reordering the row around it. */
.lang-opt__native, .lang-opt__english { font-family: system-ui, "Segoe UI", sans-serif; }
.lang-opt__native {
  flex: 0 1 auto;
  unicode-bidi: isolate;
  font-size: var(--fs-md); line-height: 1.7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-opt__english {
  flex: 1 1 auto; min-width: 0;
  unicode-bidi: isolate;
  font-size: var(--fs-xs); line-height: 1.6;
  color: var(--t-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: end;
}
.lang-opt__tick { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; }
.lang-opt[aria-selected="true"] { color: var(--c-gold-light); }
.lang-opt[aria-selected="true"] .lang-opt__tick {
  background: var(--c-gold); clip-path: var(--star8);
  box-shadow: 0 0 10px rgba(200, 167, 93, 0.6);
}

.lang-panel__empty {
  padding: 1.4rem 1.1rem 1.8rem;
  text-align: center;
  font-family: var(--f-sans); font-size: var(--fs-sm); line-height: 1.7;
  color: var(--t-3);
}

/* ---------- Mobile: a bottom sheet ---------- */
@media (max-width: 719px) {
  .lang-panel {
    position: fixed; inset: 0; top: auto;
    width: 100%;
    transform: none;
    transition: opacity 0.3s var(--e-out), visibility 0s linear 0.4s;
  }
  .lang-panel::before {
    content: ""; position: absolute; inset: -100vh 0 0;
    background: rgba(6, 9, 18, 0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.4s var(--e-out);
  }
  .lang-panel.is-open::before { opacity: 1; }
  .lang-panel__sheet {
    position: relative;
    max-height: 82vh; max-height: 82svh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
    transition: transform 0.5s var(--e-soft);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .lang-panel.is-open .lang-panel__sheet { transform: none; }
  .lang-panel__grip {
    display: block; width: 2.5rem; height: 3px; margin: 0.7rem auto 0.1rem;
    background: var(--hairline-strong); border-radius: 3px;
  }
  .lang-panel__close { display: grid; }
  .lang-panel__head { padding-top: 0.5rem; }
  .lang-panel__list { padding-bottom: 1.2rem; }
  .lang-opt { min-height: 3rem; padding-block: 0.65rem; }
}

/* ============================================================
   DIRECTION
   The original document was right-to-left throughout, so a handful of
   rules were written with a fixed side. These give them the other one.
   ============================================================ */

/* The reading bar and the navigation underline grow from the edge the
   language starts at. */
html[dir="ltr"] .progress__bar {
  transform-origin: 0 50%;
  background: linear-gradient(to right, var(--c-gold-light), var(--c-gold) 70%, rgba(200, 167, 93, 0.2));
}
html[dir="ltr"] .site-head__nav a::after { transform-origin: 0 50%; }

/* The panel opens from the corner it is pinned to. */
html[dir="ltr"] .lang-panel { transform-origin: 100% 0; }
html[dir="rtl"] .lang-panel { transform-origin: 0 0; }

/* The genealogy's thread fades in from the side the names enter from. */
html[dir="ltr"] .lineage__track::before {
  background: linear-gradient(to right, transparent, var(--c-gold) 6%, var(--c-gold) 94%, transparent);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lang-panel, .lang-panel__sheet, .lang__globe, .lang-opt, .lang__trigger,
  .site-head::before, .site-head :is(.site-head__mark, .site-head__nav, .site-head__menu) {
    transition: none !important;
  }
  .lang-panel { transform: none; }
  .lang-panel__sheet { transform: none; }
  .site-head :is(.site-head__mark, .site-head__nav, .site-head__menu) { transform: none; }
}

/* Returning in another language, or arriving at a section: the content is
   simply there, with none of the first-visit choreography. */
html.is-returning .veil { transition: opacity 0.35s var(--e-in-out), visibility 0s linear 0.35s; }
html.is-returning.is-ready .hero__content > *,
html.is-returning.is-ready .hero__cue { animation-duration: 0.5s; animation-delay: 0s; }
html.is-returning .hero__arch path { stroke-dashoffset: 0; animation: none; }
html.is-returning.is-ready .hero__arch .arch-fill,
html.is-returning.is-ready .hero__arch .arch-finial { opacity: 1; animation: none; }

/* ---------- Switching: a short settle, never a blank page ---------- */
.lang-switching main,
.lang-switching .site-head__nav { opacity: 0.34; filter: blur(3px); transition: opacity 0.28s var(--e-out), filter 0.28s var(--e-out); }
@media (prefers-reduced-motion: reduce) { .lang-switching main, .lang-switching .site-head__nav { opacity: 1; filter: none; transition: none; } }

/* ============================================================
   PER-SCRIPT TYPOGRAPHY
   The build points --f-display / --f-serif / --f-sans at this language's
   faces. These rules only correct the things a different script needs:
   headline weight, the amount of vertical padding Nastaliq reserved, and
   the letterforms' optical size.
   ============================================================ */
body:not([data-script="arab"]) .t-display,
body:not([data-script="arab"]) .heading,
body:not([data-script="arab"]) .hero__name,
body:not([data-script="arab"]) .obligations__title,
body:not([data-script="arab"]) .karamat__title,
body:not([data-script="arab"]) .node {
  padding-block: 0;
}
body:not([data-script="arab"]) :is(.heading, .hero__name, .obligations__title, .karamat__title) {
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Nastaliq's chain leans; upright scripts want the name centred plainly. */
body:not([data-script="arab"]) .node { font-size: 1.15rem; }
body:not([data-script="arab"]) .node--first,
body:not([data-script="arab"]) .node--last { font-size: 1.45rem; }
body:not([data-script="arab"]) .link { font-size: 0.92rem; }

/* CJK sets tighter and needs no word-level balancing. */
body:is([data-script="hans"], [data-script="hant"], [data-script="jpan"], [data-script="kore"]) :is(.mission__text span, .prophecy__text, .stack__quote, .moment__text, .fact dd, .closing .fact dd) {
  text-wrap: initial;
  line-break: strict;
}
body:is([data-script="hans"], [data-script="hant"], [data-script="jpan"], [data-script="kore"]) .hero__name { letter-spacing: 0.02em; }

/* Scripts with tall ascenders and deep descenders need the extra room the
   design already reserves for Nastaliq. */
body:is([data-script="deva"], [data-script="beng"], [data-script="telu"], [data-script="mlym"], [data-script="knda"], [data-script="taml"], [data-script="gujr"], [data-script="guru"], [data-script="orya"], [data-script="sinh"], [data-script="thai"], [data-script="laoo"], [data-script="khmr"], [data-script="mymr"]) .hero__name {
  line-height: 1.55;
}
body:is([data-script="thai"], [data-script="laoo"], [data-script="khmr"], [data-script="mymr"]) :is(.prophecy__text, .stack__quote, .moment__text) {
  line-height: 1.95;
}

/* Latin and Cyrillic quotations read better a touch smaller than Nastaliq. */
body:is([data-script="latn"], [data-script="cyrl"], [data-script="grek"]) .hadith__arabic { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem); }