/* ═══════════════════════════════════════════════════════════
 *  Anvár UI — base styles
 * ═══════════════════════════════════════════════════════════
 *
 * Foundation layer: web fonts, color/length CSS variables, the
 * universal box-sizing reset, and the `body` defaults that
 * everything else inherits from. Nothing here is component-
 * specific; if you find yourself reaching for a class selector,
 * the rule belongs in layout.css instead.
 *
 * Loaded first by persian_search_ui.html so the variables in
 * :root resolve before any of the rules in layout.css or auth.css
 * try to read var(--ink), var(--parchment), etc.
 *
 * Extracted in v20.0 from the inline <style> blocks at lines
 * 27-42 (font faces) and 43-55 (variables + body) of the
 * monolithic persian_search_ui.html.
 */

/* ── Web fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Scheherazade New';
  src: url('/fonts/ScheherazadeNew-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scheherazade New';
  src: url('/fonts/ScheherazadeNew-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* v2.31 — English UI webfonts. Self-hosted via /fonts-english/
   (served by anvar/routes/status.py:serve_static_ui). Persian/
   Arabic UI continues to use Scheherazade above — these fonts
   are only triggered by html[lang="en"] rules below.
   font-display: swap so the system fallback shows immediately
   while the woff2 downloads in the background; once the woff2
   loads, the page restyles to the proper font without a flash
   of invisible text. Missing files degrade gracefully via the
   font-family chain in body / .brand-title / etc. (see README
   in anvar-ui/fonts/). */
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts-english/EBGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts-english/EBGaramond-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style:  italic;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts-english/EBGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts-english/Fraunces-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts-english/Fraunces-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts-english/AlbertSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts-english/AlbertSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}

/* ── Variables, reset, body ─────────────────────────────── */
/*
 * v2.18 — Color palette is a 1:1 mirror of search-mockup_3.html
 * (bahai.org-inspired). Earlier attempts mapped only the top-level
 * tokens but missed two things:
 *   (a) the mockup defines four ink levels (--ink/--ink-2/--ink-3/
 *       --ink-4) for primary/secondary/tertiary/faint text — Anvár
 *       only had --ink, so muted text ended up too dark
 *   (b) the existing layout.css had ~88 hardcoded rgba() values
 *       using the OLD gold (#b8860b → 184,134,11) and OLD ink
 *       (#1a1008 → 26,16,8) literals, bypassing the variables.
 *       Updating the tokens didn't touch those.
 * v2.18 fixes both. New ink-N tokens added, and the hardcoded
 * rgbas in layout.css are migrated to the mockup's gold (163,123,43)
 * and ink (31,26,20) literals via a global rewrite. The variable
 * NAMES Anvár already uses (--parchment, --warm, --cream, --rust,
 * --gold, --shadow, etc.) keep their meaning; only values change.
 */
:root {
  /* v1.6.5 — Pin the page to a light color scheme. Without this,
     browsers fall back to the OS preference for native form-control
     rendering. On a Mac/Windows/Linux machine in dark mode, the
     native <select> popup (the menu that drops down when an option
     list is opened) gets dark text on a dark background, making
     the option labels look blank — even though they're there and
     clickable (clicking a "blank" line still selects that option).
     The closed select itself isn't affected because the page CSS
     forces its colors; only the OS-rendered popup is. The
     parchment palette is a light-only theme, so pinning to "light"
     here is correct, not just a workaround. */
  color-scheme: light;

  /* Backgrounds — direct maps from mockup paper levels */
  --parchment:  #f6f1e8;            /* mockup --paper       (page bg) */
  --warm:       #d9cfb7;            /* mockup --rule        (hairlines + paper-2 mids) */
  --cream:      #efe7d7;            /* mockup --paper-2     (card surfaces) */
  --paper-3:    #e6dcc7;            /* mockup --paper-3     (deeper paper, also rule-soft) */
  --rule-soft:  #e6dcc7;            /* alias of --paper-3 for clarity */

  /* Text — mockup ink ladder. Anvár's existing rules use --ink for
     primary; the new tokens are available for secondary/tertiary
     usages where the old code hardcoded faded ink rgbas. */
  --ink:        #1f1a14;            /* primary text */
  --ink-2:      #4a4036;            /* secondary text (e.g. body in cards) */
  --ink-3:      #7a6f60;            /* tertiary / labels / counts */
  --ink-4:      #a89e8c;            /* faintest / disabled */

  /* Accents */
  --rust:        #7a3b2e;           /* mockup --accent      (deep terracotta) */
  --rust-lt:     #b86b50;           /* mockup --accent-soft (soft terracotta) */
  --accent-hl:   #f3d8a8;           /* mockup --accent-hl   (highlight wash for <mark>) */
  --gold:        #a37b2b;           /* mockup --gold        (muted gold) */
  --gold-lt:     #b8924b;           /* lighter gold tint */

  /* Status colors — kept for indexing strip + saved toast.
     Desaturated to fit the warmer palette. */
  --sage:       #5a6b48;
  --teal:       #4a6f7e;
  --teal-lt:    #6b8a96;

  /* Shadow — mockup uses a 2-stop shadow for depth without bulk. */
  --shadow:     0 1px 0 rgba(31,26,20,.04), 0 8px 24px -12px rgba(31,26,20,.18);
  --r:2px;                           /* mockup --radius (2px instead of 4px) */

  /* v1.5.3 — Single height for the three header bars at the top
     of the search screen (filter-pane .rt-head, cards-pane
     .cards-meta, full-book .full-book-toolbar) so their bottom
     borders all sit on the same y-coordinate and read as one
     continuous rule across the page. Was three independent
     min-heights before; the full-book toolbar in particular was
     a hard 52px which sat noticeably below the other two. */
  --header-rule-y: 52px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Scheherazade New',Arial,Helvetica,sans-serif;background:var(--parchment);color:var(--ink);min-height:100vh;direction:rtl}

/* v1.6.6 — Force light colors on every native <select> and the
   <option> elements inside its dropdown popup. The color-scheme:
   light rule on :root above is the standards-track way to pin
   native form-control rendering to a light palette, but on some
   browser/OS combinations (Chrome with the "auto-dark" flag,
   certain GTK-themed Linux popups, Windows High Contrast settings,
   and Dark Reader-style extensions) the popup STILL inherits dark
   colors — option labels disappear into a dark background even
   though they're there and clickable.
   Most existing <select> elements in the markup already carry an
   inline `background:var(--parchment); color:var(--ink)` so the
   CLOSED control reads correctly; the popup is what was failing.
   These rules are the belt-and-braces fix: explicit on both
   select AND option, no !important (no inline rule on <option>
   to override, and selects already supply their own inline
   styles which we don't want to fight). */
select { background-color: var(--parchment); color: var(--ink); }
select option { background-color: var(--parchment); color: var(--ink); }

/* Diagonal hatch matches the mockup's subtle paper grain — rust
   and gold each at 2.5% alpha. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(122,59,46,.025) 40px,rgba(122,59,46,.025) 41px),
  repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(163,123,43,.025) 40px,rgba(163,123,43,.025) 41px)}

/* ═══════════════════════════════════════════════════════════
 *  v2.4 — English-mode overrides
 * ═══════════════════════════════════════════════════════════
 *
 * Switching the UI to English flips <html lang="en" dir="ltr">
 * via applyUILang() in i18n.js. These rules pick up that flag
 * and:
 *   1. Use a Latin-leaning font stack (Scheherazade has decent
 *      Latin glyphs but is tuned for Arabic-script body text;
 *      switching to a sans pairs better with English UI labels).
 *   2. Keep the parchment palette and accent colours unchanged
 *      so the brand identity holds across both modes.
 *
 * We pin to system fonts rather than loading a webfont — the
 * UI is short-text-heavy in English mode (button labels, tab
 * names, brand) so a system stack is fine and avoids the FOUT
 * of an additional font fetch. Reading-pane bodies still use
 * Scheherazade because Persian content often appears there.
 *
 * Specificity: html[lang="en"] body wins over the body rule in
 * the file header, even at equal weight, because the attribute
 * selector raises specificity by 1.
 *
 * v2.31 — English chrome now uses Albert Sans (the mockup's
 * --sans), reading bodies use EB Garamond (the mockup's --serif).
 * If those webfonts haven't been dropped into anvar-ui/fonts/ yet,
 * the chain falls back to system serif/sans gracefully.
 */
html[lang="en"] body {
  font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  direction: ltr;
}

/* Reader / full-book bodies that hold actual scripture content
   keep Scheherazade because they almost always render Persian
   or Arabic text — only the chrome around them flips to Latin.
   The lang="en" attribute is set on those bodies separately by
   the reader code based on the document's own language, not the
   UI language. */
html[lang="en"] .full-book-body,
html[lang="en"] .reader-body,
html[lang="en"] .rc-text {
  font-family: 'Scheherazade New', Arial, Helvetica, sans-serif;
}
html[lang="en"] .full-book-body.lang-en,
html[lang="en"] .reader-body[data-lang="en"],
html[lang="en"] .rc-lang-en .rc-text {
  /* English documents in English UI: serif reading face, mockup-aligned. */
  font-family: 'EB Garamond', Garamond, Georgia, "Times New Roman", serif;
}