/* ========================================================================
   REWAYAAT — Premium Hadith Database UI
   Child product of Academy for Learning Islam (academyofislam.com)
   Color lineage: navy/blue + warm gold
   ======================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
    /* Primary / Navy */
    --primary:          #1e3a5f;
    --primary-light:    #2d5a8e;
    --primary-lighter:  #3b72b0;
    --primary-dark:     #0f2440;
    --primary-bg:       #eef3fa;

    /* Accent — deep navy for professional look */
    --accent:           #1e3a5f;
    --accent-hover:     #2d5a8e;
    --accent-light:     #e2e8f0;
    --accent-lighter:   #eef2f7;

    /* Gold / Brand — warm gold used sparingly for premium accents */
    --gold:             #c8a23d;
    --gold-dark:        #a07e28;
    --gold-light:       #f3e5b8;
    --gold-bg:          #fdf8ed;

    /* Surfaces */
    --surface:          #ffffff;
    --surface-warm:     #fefdfb;
    --surface-cool:     #f8fafc;
    --bg:               #f5f7fa;
    --bg-subtle:        #eef1f6;

    /* Text */
    --text:             #1a1a2e;
    --text-secondary:   #4a5568;
    --text-muted:       #94a3b8;
    --text-faint:       #cbd5e1;

    /* Borders */
    --border:           #e8ecf1;
    --border-strong:    #d1d8e0;
    --border-focus:     #2563eb;

    /* Status */
    --success:          #059669;
    --success-bg:       #ecfdf5;
    --warning:          #d97706;
    --warning-bg:       #fffbeb;
    --danger:           #dc2626;
    --danger-bg:        #fef2f2;
    --info:             #0284c7;
    --info-bg:          #f0f9ff;

    /* Typography */
    /* Each Latin face is followed by the Arabic face that plays its part: Inter has
       no Arabic, so Arabic text in a UI stack is set in IBM Plex Sans Arabic, and in
       a serif stack in Noto Naskh Arabic, rather than in whatever the device falls
       back to. Google Fonts serves those two by unicode-range, so a page without
       Arabic in them never downloads them. */
    --font-body:        "Manrope", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --font-display:     "Manrope", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --font-ui:          "Manrope", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --font-reference:   "Literata", "Noto Naskh Arabic", Georgia, serif;
    --font-ornament:    "Cormorant Garamond", "Noto Naskh Arabic", "Literata", serif;
    --font-arabic:      "Scheherazade New", "Amiri", serif;
    --font-mono:        "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Shadows */
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:        0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:        0 10px 20px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-xl:        0 20px 40px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
    --shadow-card:      0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.06);
    --shadow-card-hover:0 4px 12px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.08);

    /* Radii */
    --radius-sm:        6px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-xl:        16px;
    --radius-pill:      999px;

    /* Bootstrap overrides */
    --bs-primary:       var(--primary);
    --bs-primary-rgb:   30, 58, 95;
    --bs-link-color:    var(--primary);
    --bs-link-hover-color: var(--primary-light);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--radius-md);
    --bs-body-font-family: var(--font-body);
    --bs-body-bg:       var(--bg);

    /* Legacy compat */
    --nav-surface:      rgba(255,255,255,0.97);
    --nav-border:       var(--border);
    --nav-shadow:       var(--shadow-sm);
    --ornament-bg:      var(--gold-bg);
    --ornament-accent:  var(--gold);
}

/* ── Base Reset ─────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background: var(--bg) !important;
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
    position: relative;
}

.auth-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.25rem;
}

.auth-segment-btn {
    margin: 0;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 150ms ease, border-color 150ms ease;
}

.auth-segment-btn:hover {
    color: #343a40;
}

.auth-segment-btn.active {
    color: #1a3a6b;
    border-bottom-color: #1a3a6b;
}

/* Background depth layer - gradient washes */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(30,58,95,0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 100%, rgba(200,162,61,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(241,245,249,0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* Background texture - dot grid */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(30,58,95,0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: -1;
}

[v-cloak] { display: none !important; }

h1, h2, h3, h4, h5, h6, .display-6, .display-5, .navbar-brand {
    font-family: var(--font-display);
    color: var(--text);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 150ms ease;
}
a:hover {
    color: var(--accent-hover);
}

::selection {
    background: var(--accent-light);
    color: var(--primary-dark);
}

/* ── News Bar ───────────────────────────────────────────────────────────── */
#latest-news-bar {
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    border-bottom: none;
}
#latest-news-bar:empty { display: none; }

/* Every one of these is decoration. Someone who has asked their system for less motion
   gets the same layout with none of it - the hero keeps its glow, the cards keep their
   hover states, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
    .hub-hero::before {
        animation: none;
        background-position: -150% 0, 0 0, 0 0;
    }
    .hub-card::before,
    .hub-chapter::before {
        display: none;
    }
}

/* ── Site Announcement Bar ───────────────────────────────────────────────── */
/* Injected as the first child of <body> by js/site-announcement.js, so it sits above the
   sticky nav on every page. It scrolls away with the page rather than sticking: it is an
   announcement, not navigation, and a permanently pinned strip costs vertical space on a
   phone for something a reader only needs to see once. */
.site-announcement {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 2.5rem 0.35rem 1rem;
    /* Light gold rather than navy: it sits directly on top of the navy nav, and a second
       navy strip reads as part of the menu instead of as news. Kept pale, with only a
       faint top-to-bottom gradient, so it announces without shouting; black text is far
       past WCAG AAA contrast on every part of it. */
    background: linear-gradient(180deg, #fcefc3, #f8e3a3);
    border-bottom: 1px solid #dcb94f;
    color: #000;
    font-size: 0.82rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-align: center;
}
.site-announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}
.site-announcement__icon { color: #000; }
.site-announcement__text { font-weight: 400; }
.site-announcement__label { font-weight: 700; }
.site-announcement__link {
    color: #000;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.site-announcement__link:hover,
.site-announcement__link:focus { color: #5c4400; }
.site-announcement__close {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.4rem;
    cursor: pointer;
}
.site-announcement__close:hover,
.site-announcement__close:focus { color: #000; }

@media (max-width: 575.98px) {
    .site-announcement {
        font-size: 0.74rem;
        padding: 0.3rem 2rem 0.3rem 0.75rem;
    }
    /* One flowing sentence on a phone: as separate flex items the icon, the text and the
       link each took a row of their own, and the bar grew to a sixth of the screen. */
    .site-announcement__inner { display: block; }
    .site-announcement__icon { margin-right: 0.3rem; }
    .site-announcement__link { margin-left: 0.35rem; }
}

/* ── Eid al-Ghadeer Banner ────────────────────────────────────────────────── */
.eid-banner {
    background: linear-gradient(90deg, #faf6ee, #f5edd8, #faf6ee);
    border-bottom: 1.5px solid #c9a84c;
    border-top: 1.5px solid #c9a84c;
    padding: 0.45rem 0;
}
.eid-banner__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    position: relative;
}
.eid-banner__ornament {
    font-size: 0.65rem;
    color: #b8942e;
    flex-shrink: 0;
}
.eid-banner__text {
    font-family: var(--font-reference);
    font-size: 0.82rem;
    font-weight: 500;
    color: #1a2a3a;
    line-height: 1.45;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eid-banner__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(26,42,58,0.35);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
}
.eid-banner__close:hover { color: #1a2a3a; }
.eid-banner__link { color: #8b6914; text-decoration: underline; font-weight: 600; }
.eid-banner__link:hover { color: #1a2a3a; }
.eid-banner.is-hidden { display: none; }
@media (max-width: 640px) {
    .eid-banner__inner { padding: 0 1.8rem 0 0.6rem; }
    .eid-banner__text { font-size: 0.74rem; white-space: normal; }
    .eid-banner__ornament { display: none; }
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.navbar {
    padding: 0.5rem 0;
}

.site-nav {
    background: var(--primary-dark);
    border-bottom: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3), 0 12px 36px rgba(0,0,0,0.18);
    position: relative;
    transition: box-shadow 200ms ease;
}

.site-nav .container {
    position: relative;
}

.navbar-top {
    row-gap: 0.5rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.navbar-brand {
    margin-right: 0.2rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.brand-logo--full {
    height: 44px;
    width: auto;
    display: block;
    transition: opacity 150ms ease;
}
.brand-logo--full:hover { opacity: 0.85; }

.brand-logo--full-v2 {
    height: 40px;
    width: auto;
    max-width: min(18vw, 220px);
    object-fit: contain;
    /* Logical: a physical -30px pulled the mark the wrong way in RTL, into the links. */
    margin-inline-start: -30px;
}

/* The Arabic lockup is a squarer block than the English one, but it is cropped tight
   rather than carrying the English asset's margins, so it reads at the same height and
   does not need to make the bar taller. */
[dir="rtl"] .brand-logo--full-v2 {
    margin-inline-start: -12px;
}

.brand-logo--icon {
    height: 40px;
    width: auto;
    display: block;
}

/* The database's own mark, carried by every host except the Academy's. It is the emblem
   lifted out of the full lockup and cropped tight, so unlike the Academy asset it has no
   built-in margin and wants no negative inline start to sit against the edge. Square, so
   one asset serves the phone and the desktop rather than a wordmark plus an icon. */
.brand-logo--emblem {
    height: 36px;
    width: auto;
    display: block;
    transition: opacity 150ms ease;
}
.brand-logo--emblem:hover { opacity: 0.85; }
/* On a wide screen the emblem was what set the bar's height, and it filled it to
   within 6px top and bottom. The brand keeps that 42px so the bar stays as it was,
   and the emblem sits smaller inside it with room around it. */
@media (min-width: 993px) {
    .navbar-brand:has(.brand-logo--emblem) { min-height: 42px; }
}

/* ── Search Bar ─────────────────────────────────────────────────────────── */
#queryBar {
    display: flex;
    flex: 1 1 70%;
    max-width: 1040px;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    margin-left: auto;
    margin-right: auto;
}
#queryBar.is-hidden { display: none !important; }
#queryBar.is-visible { display: flex; }

.navbar-search {
    flex: 1 1 70%;
    max-width: 1040px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    margin-left: auto;
    margin-right: auto;
}

.navbar-search__input {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.search-controls {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
}

/* Search strictness toggle */
.search-match-toggle {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    overflow: hidden;
    box-shadow: none;
}

.search-match-toggle--inline {
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.search-match-toggle__btn {
    border: none;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.56rem;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    transition: all 150ms ease;
}

.search-match-toggle__btn + .search-match-toggle__btn {
    margin-left: 0.2rem;
}

.search-match-toggle__btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.search-match-toggle__btn:not(.active):hover {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
}

/* Toggle active state - better contrast */
.search-match-toggle__btn.active {
    background: var(--gold);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* Search button - gold */
.search-inline-btn {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.search-inline-btn:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #fff;
}

/* Search mode dropdown - Compact with bright border */
.search-mode-dropdown {
    position: relative;
    z-index: 2;
}

.search-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 32px;
    padding: 0.32rem 0.56rem;
    border: 1px solid #f1d66a;
    border-radius: var(--radius-sm);
    background: #f1d66a;
    color: #0d2142;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    outline: none;
    box-shadow: 0 2px 8px rgba(214, 192, 92, 0.26);
}

.search-mode-toggle:hover,
.search-mode-toggle:focus {
    border-color: #e4c44a;
    background: #e9cb57;
    box-shadow: 0 4px 12px rgba(214, 192, 92, 0.32);
}

.search-mode-toggle.active {
    background: #e9cb57;
    border-color: #e4c44a;
    color: #0d2142;
}

.search-mode-text {
    display: inline-block;
    min-width: 50px;
}

.search-mode-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    right: 0;
    min-width: 180px;
    border: 1px solid rgba(226, 195, 78, 0.34);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fffbea 0%, #f4e29f 100%);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.2rem);
    transition: all 150ms ease;
    z-index: 2;
}

.search-mode-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-mode-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.56rem;
    cursor: pointer;
    transition: background-color 150ms ease;
    border-bottom: 1px solid rgba(26, 58, 107, 0.08);
}

.search-mode-option:last-child {
    border-bottom: none;
}


.mode-content {
    flex: 1;
}

.mode-title {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--primary-dark);
    margin-bottom: 0.05rem;
}

.mode-description {
    font-size: 0.6rem;
    color: rgba(26, 58, 107, 0.78);
    line-height: 1.2;
}

/* Search button with border instead of background - inside search bar */
.search-btn-with-border {
    border: 1.5px solid rgba(243, 229, 184, 0.34);
    background: rgba(8, 17, 29, 0.38);
    color: rgba(255, 255, 255, 0.88);
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0.84rem;
    border-radius: 50%;
    transition: all 150ms ease;
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex: 0 0 36px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.search-btn-with-border:hover {
    background: rgba(8, 17, 29, 0.54);
    border-color: rgba(243, 229, 184, 0.58);
    color: #fff;
}

/* Removed glow effect - search button does not glow */

/* Toast notification */
.search-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--primary-dark);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transition: all 300ms ease;
    z-index: 9999;
    max-width: 500px;
    width: 90%;
}

.search-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.search-toast__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--gold);
}

.search-toast__subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
}

.search-toast__suggestions {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--gold);
}

.search-toast__suggestions-title {
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-toast__suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.search-toast__suggestion {
    background: rgba(200, 162, 61, 0.2);
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(200, 162, 61, 0.3);
}

.search-help {
    border: none;
    background: transparent;
    padding: 0.15rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 150ms ease;
}
.search-help:hover { color: var(--gold); }

/* Search button */
.search-inline-btn,
.top-actions .top-action {
    padding: 0.4rem 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    line-height: 1;
    min-height: 36px;
    transition: all 150ms ease;
    cursor: pointer;
}

.search-inline-btn {
    flex: 0 0 auto;
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.search-inline-btn i {
    font-size: 0.8rem;
    margin-right: 0.3rem;
}
.search-inline-btn:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: #fff;
}

.search-inline-btn--outer {
    position: static;
    min-height: 36px;
    border-radius: var(--radius-sm);
    margin-left: 0.1rem;
}

/* Sign in / profile button */
.top-actions .top-action {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(200,162,61,0.3);
}
.top-actions .top-action:hover {
    background: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200,162,61,0.35);
    color: #fff !important;
}

.top-actions .top-action i {
    color: inherit;
    font-size: 0.85rem;
    margin-inline-end: 0.25rem;
}

/* ── Language toggle ────────────────────────────────────────────────────────
   A globe, because the icon reads the same whichever language you arrive in,
   and the word beside it names the language you are switching TO, written in
   that language — so a reader who cannot read the current one still recognises
   it. Outlined rather than gold: it sits next to Sign In and must not compete
   with it for the eye.

   Last in the row, so it lands on the outer edge of the bar. Nothing here is
   side-specific, so the mirror is the browser's job, not a second rule. */
.top-actions .lang-toggle,
.top-actions .lang-toggle:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.top-actions .lang-toggle:hover {
    border-color: var(--gold) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.lang-toggle__label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
/* Below the point where the bar gets crowded the globe speaks for itself. */
@media (max-width: 991.98px) {
    .lang-toggle__label { display: none; }
    .top-actions .lang-toggle i { margin-inline-end: 0; }
}

.auth-mobile-menu-wrapper { position: relative; }
.auth-action__mobile-toggle { display: none !important; }
.auth-mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 160px;
    padding: 0.35rem;
    z-index: 1100;
}
.auth-mobile-dropdown.is-open { display: block; }
.auth-mobile-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a3a6b;
    text-decoration: none;
    border-radius: 8px;
}
.auth-mobile-dropdown__item:hover {
    background: #eef3fb;
}
.search-btn__icon-mobile { display: none; }

/* ── Context Row / Reading Scope ────────────────────────────────────────── */
.menu-context-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Logical, not margin-left. A physical margin-left:auto does not flip, so on the
       Arabic site it fought the RTL build's margin-right:auto and the pair resolved to
       margin:auto - which centres. The sign-in button sat in the middle of the bar
       instead of against the edge, and the whole nav read as badly spaced. */
    margin-inline-start: auto;
    padding-inline-start: 0.3rem;
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

/* Homepage nav links — left side */
/* ── Primary nav links ──────────────────────────────────────────────────── */
/* Set as small tabs rather than bare underlined words: an icon to read at a glance,
   and a gold rule that grows from the centre on hover and stays put on the section
   you are in. The interpunct separators are gone — the spacing does that work now. */
.home-nav-links {
    align-items: center;
    gap: 0.15rem;
    /* Logical: a physical margin-left put the gap on the far side of the group in RTL,
       so the Arabic links sat hard against the logo with a gap trailing into space. */
    margin-inline-start: 0.75rem;
}

/* Arabic script carries no case and its letterforms are finer, so the treatment that
   makes the English links read as a nav — small, uppercase, widely tracked — makes the
   Arabic ones read as fine print. Tracking an Arabic word also breaks the joins between
   its letters, which is why letter-spacing goes to zero rather than down. */
[dir="rtl"] .home-nav-link {
    font-size: 0.92rem;
    letter-spacing: 0;
    text-transform: none;
    padding-inline: 0.85rem;
}
[dir="rtl"] .home-nav-links {
    gap: 0.35rem;
    margin-inline-start: 1.5rem;
}
[dir="rtl"] .lang-toggle__label {
    font-size: 0.8rem;
    letter-spacing: 0;
}

.home-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.7rem 0.46rem;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(252, 233, 168, 0.82);
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, background 180ms ease;
}

.home-nav-link i {
    font-size: 0.82em;
    opacity: 0.75;
    transition: opacity 180ms ease, transform 180ms ease;
}

/* The rule under a link, drawn from the centre out. */
.home-nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.16rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), #f6df88, var(--gold));
    transition: left 200ms ease, right 200ms ease, opacity 200ms ease;
    opacity: 0;
}

.home-nav-link:hover,
.home-nav-link:focus-visible {
    color: #fff5d6;
    background: rgba(255, 255, 255, 0.07);
}

.home-nav-link:hover::after,
.home-nav-link:focus-visible::after {
    left: 0.7rem;
    right: 0.7rem;
    opacity: 1;
}

.home-nav-link:hover i {
    opacity: 1;
    transform: translateY(-1px);
}

/* The section you are on keeps its rule, at a quieter weight than hover. */
.home-nav-link.is-current {
    color: #fff5d6;
}

.home-nav-link.is-current::after {
    left: 0.7rem;
    right: 0.7rem;
    opacity: 0.65;
}

.home-nav-link:focus-visible {
    outline: 2px solid rgba(246, 223, 136, 0.55);
    outline-offset: 2px;
}

/* Kept as a selector because the markup may still carry one; it is not drawn. */
.home-nav-dot {
    display: none;
}

@media (max-width: 575.98px) {
    .home-nav-link {
        padding: 0.36rem 0.5rem 0.4rem;
        font-size: 0.7rem;
        letter-spacing: 0.06em;
    }

    .home-nav-link i {
        display: none;
    }
}
/* Collection mode replaces the whole chrome with the collection's own, so the home
   nav goes. A search does not: the reader is still on the site and still wants Books,
   Rijal and Updates. Hiding them left the results page with no visible navigation at
   all above a phone, and the only way out was the hamburger. */
body.is-collection-mode .home-nav-links {
    display: none !important;
}

.reading-path__value { display: block; min-width: 0; }

/* The reading scope and the account actions belong on one line together. Letting the
   row wrap dropped the scope onto a second line beside the sign-in button around
   1026px, which read as a broken navbar rather than a responsive one. */
.menu-context-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-width: 0;
}

/* The actions cluster is exactly as wide as its buttons, and no wider.
   With flex-basis auto it was resolving to 582px against 99px of buttons between
   768px and 992px, which left the reading scope beside it crushed to a 34px sliver
   reading "RE SC". max-content states the intent the cascade was not delivering. */
.menu-context-row > .top-actions {
    flex: 0 0 auto;
    width: max-content;
}

/* ── Profile Chip ───────────────────────────────────────────────────────── */
/* align-items matters here because the buttons in this row are not the same height: the
   language toggle and the profile chip carry a min-height the sign-in button does not, so
   the row is taller than Sign In is. Without centring, the default stretch alignment left
   Sign In flush against the top of the row and visibly higher than everything else in the
   bar - its midpoint sat 3px above the midpoint of the logo, the search field and the
   reading scope, which all centre together.

   flex-wrap was written here as "flex-nowrap", which is the Bootstrap class name, not a
   declaration. It has no colon, so the parser dropped it and the row was never actually
   held on one line by this rule. */
.top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.3rem 0.6rem 0.3rem 0.35rem !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.88) !important;
    box-shadow: var(--shadow-xs) !important;
    color: #1a1a2e !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: var(--radius-pill) !important;
    transition: all 150ms ease;
    cursor: pointer;
}
.profile-chip:hover {
    border-color: rgba(255,255,255,0.6) !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: var(--shadow-sm) !important;
}

.profile-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.profile-chip__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.1;
    max-width: 10rem;
}

.profile-chip__name {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1a2e;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip__email {
    font-size: 0.62rem;
    color: rgba(26,26,46,0.5);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chip .fa-angle-down {
    font-size: 0.85rem;
    margin-inline-start: 0.05rem;
    transition: transform 150ms ease;
    color: rgba(26,26,46,0.5);
}
.profile-chip.is-open .fa-angle-down { transform: rotate(180deg); }

.profile-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── Profile Dropdown ───────────────────────────────────────────────────── */
.profile-dropdown {
    /* Anchored to the chip that opens it. It was position:fixed at a hardcoded
       left:1rem, which pinned it to the corner of the window wherever the chip
       actually was — on the English site that put it clean across the page from its
       own trigger, and on the Arabic site, where the chip is on the left, it landed
       beside the chip as a wide pale slab that read as a stray bar.
       .profile-menu is already position:relative, which is what this was written for. */
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    /* Sized to what is in it. The fixed 320px was cut for the rich panel the search app
       builds — header, stats, the lot — but the hub pages inject two links into the same
       container, which left most of it empty and reading as a stray pale bar under the
       chip. */
    width: max-content;
    min-width: 11rem;
    max-width: min(320px, 92vw);
    max-height: calc(100vh - 6rem);
    z-index: 2200;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-xl);
    padding: 1rem;
    overflow-y: auto;
}

/* The two-item menu the hub pages build. It had no styles of its own at all, so the
   links sat as bare inline text inside a panel's padding. */
.profile-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.profile-dropdown__item:hover,
.profile-dropdown__item:focus-visible {
    background: rgba(11, 23, 40, 0.06);
    color: #0b1728;
}
.profile-dropdown__item i {
    width: 1rem;
    text-align: center;
    opacity: 0.7;
}

.profile-dropdown__panel {
    border: none;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden;
}

.profile-dropdown__header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.profile-dropdown__eyebrow {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile-dropdown__title {
    margin-top: 0.15rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown__subtitle {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-shrink: 0;
}

.profile-dropdown__stat {
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
}

.profile-dropdown__stat-inline {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.profile-dropdown__stat-value {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
}

.profile-dropdown__stat-label {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-dropdown__collections {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 20rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.profile-dropdown__collections::-webkit-scrollbar { width: 4px; }
.profile-dropdown__collections::-webkit-scrollbar-track { background: transparent; }
.profile-dropdown__collections::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 2px;
}

.profile-dropdown__collection-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0.45rem 0.55rem;
}

.profile-dropdown__collection-details {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.profile-dropdown__collection-name {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-dropdown__collection-meta {
    margin-top: 0.05rem;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.profile-dropdown__collection-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.profile-dropdown__collection-actions .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border-width: 1px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.profile-dropdown__collection-actions .btn-outline-dark {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.profile-dropdown__collection-actions .btn-outline-dark:hover {
    color: var(--text);
    border-color: var(--text-secondary);
    background: var(--bg-subtle);
}

.profile-dropdown__collection-actions .btn-outline-danger {
    color: var(--danger);
    border-color: rgba(220, 38, 38, 0.3);
}
.profile-dropdown__collection-actions .btn-outline-danger:hover {
    color: #991b1b;
    border-color: var(--danger);
    background: var(--danger-bg);
}

.profile-dropdown__nested { position: relative; }

.profile-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    transition: all 150ms ease;
}
.profile-dropdown__toggle:hover { background: var(--surface); }
.profile-dropdown__toggle.is-open .fa-angle-down { transform: rotate(180deg); }
.profile-dropdown__toggle .fa-angle-down {
    font-size: 0.7rem;
    transition: transform 150ms ease;
}

.profile-dropdown__submenu {
    display: none;
    margin-top: 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}
.profile-dropdown__submenu.is-open { display: block; }

.profile-dropdown__submenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    transition: background 100ms ease;
}
.profile-dropdown__submenu-item:hover { background: var(--accent-lighter); }

.profile-dropdown__delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.78rem;
    opacity: 0;
    transition: opacity 150ms ease, color 150ms ease;
    flex-shrink: 0;
}
.profile-dropdown__submenu-item:hover .profile-dropdown__delete-btn {
    opacity: 1;
}
.profile-dropdown__delete-btn:hover {
    color: #dc2626;
}

.profile-dropdown__action-item {
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    transition: all 150ms ease;
}
.profile-dropdown__action-item:hover { background: var(--surface); }

.profile-dropdown__empty {
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-strong);
    padding: 0.75rem;
    background: var(--bg-subtle);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.82rem;
}

.profile-dropdown__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.profile-dropdown__footer .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.profile-dropdown__footer .btn-link {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.profile-dropdown__footer .btn-link:hover {
    color: var(--text);
    background: var(--bg-subtle);
}

.profile-dropdown__footer .btn-primary {
    background: var(--accent);
    border: none;
    color: #fff;
    font-size: 0.65rem;
}
.profile-dropdown__footer .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .profile-dropdown__nested--mobile-only { display: none; }
}

@media (max-width: 1023px) {
    .profile-dropdown__nested--desktop-only { display: none; }
}

/* ── Mode Switch ────────────────────────────────────────────────────────── */
.mode-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.mode-switch__btn {
    border: none;
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.45rem 0.8rem;
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 150ms ease;
    cursor: pointer;
}
.mode-switch__btn i { font-size: 0.85rem; }
.mode-switch__btn + .mode-switch__btn { border-left: 1px solid var(--border); }

.mode-switch__btn.active {
    background: var(--accent);
    color: #fff;
}
.mode-switch__btn:disabled {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 150ms ease;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-link {
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.btn-link:hover, .btn-link:focus {
    color: var(--accent-hover);
    text-decoration: none;
}

.search-inline-btn,
.top-actions .top-action {
    border-radius: var(--radius-sm);
}

/* ── Tom Select / Search Input ──────────────────────────────────────────── */
.select2-container { width: 100% !important; }
.ts-wrapper { width: 100%; }

.ts-control {
    min-height: 44px;
    max-height: 68px;
    padding: 6px 140px 6px 12px;
    border-radius: 6px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    box-shadow: var(--shadow-xs);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    outline: none;
}

.ts-control:focus-within {
    border-color: var(--gold);
    box-shadow: none;
}

.ts-control *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Kill the ugly purple/blue native focus ring on Tom Select */
.ts-wrapper.focus .ts-control,
.ts-wrapper:focus .ts-control,
.ts-control:focus,
.ts-control:focus-within,
.ts-control input:focus,
.ts-dropdown input:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.ts-control input {
    font-size: 0.92rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--text);
}
.ts-control input::placeholder { color: var(--text-muted); }
/* Tom Select sets has-items on the wrapper, not on the control, so the original
   selector never matched and the placeholder went on sitting beside the chips
   it was meant to make way for. */
.ts-wrapper.has-items .ts-control input::placeholder { color: transparent; opacity: 0; }

.ts-control .item {
    background: var(--primary-bg);
    border: 1px solid var(--primary) !important;
    color: var(--primary);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.88rem;
}

.ts-wrapper.multi .ts-control > div {
    border: 1px solid var(--primary) !important;
}

.ts-control .item .remove {
    margin-left: 5px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    order: 2;
    color: var(--primary);
}

.ts-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1030 !important;
    width: auto !important;
    min-width: 180px;
    max-width: min(420px, 50vw);
}
.ts-dropdown .option {
    padding: 6px 10px;
    font-size: 0.88rem;
}
.ts-dropdown .highlight {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 600;
}

/* Select2 compat */
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.45rem + 2px);
    max-height: 54px;
    padding: 0.08rem 1.8rem 0.08rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-family: var(--font-body);
    overflow-y: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--accent-lighter);
    border: 1px solid var(--accent-light);
    color: var(--accent-hover);
    border-radius: var(--radius-sm);
    padding: 0.08rem 0.85rem 0.08rem 0.45rem;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 44px;
    overflow-y: auto;
}

.select2-search__field {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.2;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0;
    margin-left: 0.35rem;
    font-weight: 700;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
}

/* ── Glow animation ─────────────────────────────────────────────────────── */
.button-glow { animation: buttonGlow 1400ms infinite; }
.search-bar-glow { border-radius: 999px; }
.search-bar-glow .navbar-search__input,
.navbar-search__input.search-bar-glow {
    border-radius: 999px;
}
.search-bar-glow .ts-control,
.navbar-search__input.search-bar-glow .ts-control,
#queryBar.search-bar-glow .ts-control {
    border-radius: 999px !important;
    animation: searchBarGlow 1400ms infinite;
}
/* Removed buttonGlow animation - no longer used */
@keyframes searchBarGlow {
    0% {
        box-shadow:
            inset 0 0 0 1px rgba(247, 225, 166, 0.16),
            0 0 0 0 rgba(247, 225, 166, 0);
    }
    50% {
        box-shadow:
            inset 0 0 0 2px rgba(247, 225, 166, 0.52),
            0 0 0 0 rgba(247, 225, 166, 0);
    }
    100% {
        box-shadow:
            inset 0 0 0 1px rgba(247, 225, 166, 0.16),
            0 0 0 0 rgba(247, 225, 166, 0);
    }
}

.arabic-suggestion-toast {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 260px;
}

.arabic-suggestion-toast__label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.arabic-suggestion-toast__hint {
    display: block;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.arabic-suggestion-toast__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.arabic-suggestion-toast__term {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.72rem;
    border: 1px solid rgba(16, 35, 63, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-secondary);
    font-family: var(--font-arabic);
    font-size: 1.15rem;
    line-height: 1.35;
    direction: rtl;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.arabic-suggestion-toast__term:hover {
    background: rgba(16, 35, 63, 0.94);
    color: #fff;
    border-color: rgba(16, 35, 63, 0.94);
}

/* ── Collections toggle ─────────────────────────────────────────────────── */
#userCollectionsSection { display: none !important; }

.collections-toggle { padding: 0.35rem 0.5rem; }
.collections-toggle.is-active {
    background: var(--primary-dark);
    border-color: var(--primary);
}

body.is-collection-mode .top-actions { margin-inline-start: auto !important; }
body.is-collection-mode .menu-context-row { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* ========================================================================
   HADITH CARDS
   ======================================================================== */
.hadith-layout {
    max-width: 100%;
}
.hadith-content {
    /* outer wrapper */
}

.hadith-card {
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        0 10px 24px rgba(0,0,0,0.12),
        0 24px 48px rgba(0,0,0,0.08) !important;
    padding: 0;
    transition: box-shadow 250ms ease;
}
.hadith-card:hover {
    box-shadow:
        0 4px 12px rgba(0,0,0,0.1),
        0 16px 36px rgba(0,0,0,0.15),
        0 32px 64px rgba(0,0,0,0.1) !important;
}

.hadith-card .card-body {
    padding: 1.75rem 2rem;
}

main.container {
    max-width: 1140px;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    position: relative;
}

/* Gradient transition from nav to content.
   Inset to 0 rather than -5%: the overhang bought nothing (the gradient runs top to
   bottom, so its horizontal extent is invisible) and on a narrow window, where the
   container is full-bleed, it spilled past the viewport and gave the whole page a
   horizontal scrollbar. */
main.container::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Visible section dividers */
.home-hero + .home-browse {
    border-top: none;
    margin-top: 2.5rem;
}

/* Subtle content zone highlight */
.home-browse::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-strong) 50%, transparent 100%);
    z-index: 0;
}

.hadith-card--loading .card-body {
    padding: 1.25rem;
}

.hadith-card--loading .hadith-card__main {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.45rem 2.15rem 1.8rem 1.85rem !important;
    grid-column: 3;
    grid-row: 1;
}

.hadith-card--loading .hadith-card__meta {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.hadith-card--loading .hadith-card__resizer {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Spacing between cards */
.vstack.gap-3 > .hadith-card {
    margin-bottom: 0.75rem;
}

/* ── Skeleton loading ───────────────────────────────────────────────────── */
.hadith-card-loading-lines { margin: 0; }

.hadith-loading-skeleton {
    position: relative;
    overflow: hidden;
}

.hadith-skeleton-bar {
    height: 10px;
    background: linear-gradient(90deg, var(--border) 0%, var(--surface-cool) 50%, var(--border) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
    margin-bottom: 8px;
}
.hadith-skeleton-bar--short  { width: 60%; }
.hadith-skeleton-bar--medium { width: 80%; }
.hadith-skeleton-bar--long   { width: 100%; }
.hadith-skeleton-bar--title  {
    height: 14px;
    width: 40%;
    margin-bottom: 12px;
}
.hadith-skeleton-bar--meta {
    height: 8px;
    width: 25%;
    margin-bottom: 16px;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hadith-loading-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* ── Realistic card skeleton ─────────────────────────────────────────────── */

/* Sidebar (matches .hadith-sidecar) */
.skeleton-sidebar {
    background: linear-gradient(180deg, #1a3a6b 0%, #0b1728 100%) !important;
    padding: 0 !important;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* Rail (matches .hadith-sidecar__rail) */
.skeleton-rail {
    display: flex;
    flex-direction: row;
    gap: 0.45rem;
    padding: 0.58rem 0.6rem 0.54rem;
    background: linear-gradient(180deg, rgba(12, 28, 49, 0.99), rgba(21, 43, 70, 0.98));
    border-bottom: 1px solid rgba(248, 244, 231, 0.24);
}

.skeleton-rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 46px;
    border-radius: 10px;
}

.skeleton-rail-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(247,225,166,0.08) 0%, rgba(247,225,166,0.22) 50%, rgba(247,225,166,0.08) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
}

/* Panel (matches .hadith-sidecar__panel) */
.skeleton-panel {
    flex: 1;
    padding: 0.74rem 0.56rem 0.8rem 0.52rem;
}

.skeleton-panel-meta {
    display: flex;
    gap: 0.55rem;
    padding: 0.48rem 0;
    align-items: flex-start;
}

.skeleton-panel-lines {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    flex: 1;
    min-width: 0;
}

.skeleton-bar {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.8s infinite;
}

/* Sidebar panel items */
.skeleton-bar--dot {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(247,225,166,0.06) 0%, rgba(247,225,166,0.15) 50%, rgba(247,225,166,0.06) 100%);
    background-size: 200% 100%;
    flex-shrink: 0;
}

.skeleton-bar--sm {
    height: 5px;
    width: 40%;
    background: linear-gradient(90deg, rgba(247,225,166,0.08) 0%, rgba(247,225,166,0.2) 50%, rgba(247,225,166,0.08) 100%);
    background-size: 200% 100%;
}

.skeleton-bar--md {
    height: 7px;
    width: 65%;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 100%);
    background-size: 200% 100%;
}

/* Resizer */
.skeleton-resizer {
    background: repeating-linear-gradient(
        135deg,
        rgba(247, 225, 166, 0) 0 4px,
        rgba(247, 225, 166, 0.08) 4px 6px
    ) !important;
}

/* Ornament */
.skeleton-bar--ornament {
    height: 2px;
    width: 80px;
    margin: 0 auto 0.8rem;
}

/* English text lines */
.skeleton-bar--line {
    height: 10px;
    margin-bottom: 11px;
    background: linear-gradient(90deg, rgba(30,58,95,0.08) 0%, rgba(30,58,95,0.18) 50%, rgba(30,58,95,0.08) 100%);
    background-size: 200% 100%;
}

/* Chain line (shorter, lighter - simulates isnad) */
.skeleton-chain {
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(30,58,95,0.06);
}

.skeleton-bar--chain {
    height: 7px;
    width: 72%;
    background: linear-gradient(90deg, rgba(30,58,95,0.06) 0%, rgba(30,58,95,0.12) 50%, rgba(30,58,95,0.06) 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    animation: shimmer 2s infinite;
}

/* Arabic text lines (shorter segments, slight gold tint) */
.skeleton-bar--line-ar {
    height: 13px;
    margin-bottom: 9px;
    background: linear-gradient(90deg, rgba(30,58,95,0.06) 0%, rgba(30,58,95,0.16) 50%, rgba(30,58,95,0.06) 100%);
    background-size: 200% 100%;
    border-radius: 3px;
}

.skeleton-bar--w100 { width: 100%; }
.skeleton-bar--w95  { width: 95%; }
.skeleton-bar--w90  { width: 90%; }
.skeleton-bar--w85  { width: 85%; }
.skeleton-bar--w80  { width: 80%; }
.skeleton-bar--w75  { width: 75%; }
.skeleton-bar--w70  { width: 70%; }
.skeleton-bar--w60  { width: 60%; }

/* Text blocks */
.skeleton-text-block {
    padding: 0.35rem 0 0.25rem;
}

.skeleton-text-block--arabic {
    direction: rtl;
}

.skeleton-ornament {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Tags (matches .hadith-card__footer tags) */
.skeleton-tags {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(16,35,63,0.07);
    justify-content: flex-start;
}

.skeleton-bar--tag {
    height: 24px;
    width: 68px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(10,30,55,0.06) 0%, rgba(10,30,55,0.14) 50%, rgba(10,30,55,0.06) 100%);
    background-size: 200% 100%;
    border: 1px solid rgba(247, 225, 166, 0.12);
}

.hadith-card.hadith-focus {
    border-color: var(--accent) !important;
    outline: 3px solid rgba(30, 58, 95, 0.2);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(30,58,95,0.08), var(--shadow-xl) !important;
    scroll-margin-top: 6.5rem;
}

/* ── Meta sidebar ───────────────────────────────────────────────────────── */
.hadith-meta {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.hadith-meta > * { min-width: 0; }

.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.meta-item:last-child {
    border-bottom: none;
}
.meta-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.meta-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.2rem;
}
.meta-text {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.4;
    font-weight: 500;
}
.meta-text.link {
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
    transition: color 100ms ease;
}
.meta-text.link:hover {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Hadith text ────────────────────────────────────────────────────────── */
.hadith-text-block {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.hadith-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.reading-number-banner {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.reading-number-label {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.reading-number-value {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
}

.hadith-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.icon-action {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: none;
}
.icon-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-cool);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.icon-action--save:hover { border-color: var(--success); color: var(--success); }
.icon-action--remove:hover { border-color: var(--danger); color: var(--danger); }
.icon-action--edit:hover { border-color: var(--info); color: var(--info); }

.hadith-copy-dropdown .dropdown-menu { min-width: 9rem; }

.hadith-copy-trigger {
    border-color: var(--border);
    color: var(--text-secondary);
}
.hadith-copy-trigger::after { display: none !important; }
.hadith-copy-trigger:hover,
.hadith-copy-trigger:focus-visible,
.hadith-copy-trigger.show {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.hadith-copy-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.2rem;
    box-shadow: var(--shadow-lg);
}
.hadith-copy-menu .dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.35rem 0.6rem;
}
.hadith-copy-menu .dropdown-item:hover,
.hadith-copy-menu .dropdown-item:focus {
    background: var(--primary-bg);
    color: var(--primary);
}

.hadith-content {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--surface-cool);
    border: 1px solid var(--border);
}

.hadith-content::-webkit-scrollbar {
    width: 6px;
}
.hadith-content::-webkit-scrollbar-track {
    background: transparent;
}
.hadith-content::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
.hadith-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.hadith-english {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--text);
    letter-spacing: -0.005em;
}

.hadith-chain {
    margin-bottom: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted) !important;
    font-size: 0.88rem;
    line-height: 1.55;
}
.hadith-chain--arabic { line-height: 1.5; }
.hadith-chain--arabic.arabic-text {
    color: var(--text-muted) !important;
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
}
.hadith-chain *,
.hadith-chain a,
.hadith-chain span,
.hadith-chain p,
.hadith-chain strong,
.hadith-chain em {
    color: inherit !important;
}

/* Each name in the isnād that the rijāl books identify is a link to that man's page. A chain
   is read as one sentence, so the links are marked by an underline and not by colour: eight
   names in eight bright words would read as a list of buttons rather than a chain. */
.hadith-chain .chain-name {
    text-decoration: none;
    border-bottom: 1px dotted rgba(200, 162, 61, 0.5);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.hadith-chain .chain-name:hover,
.hadith-chain .chain-name:focus-visible {
    color: var(--accent-gold, #c8a23d) !important;
    border-bottom-color: rgba(200, 162, 61, 0.9);
}

.arabic-text,
.hadith-arabic {
    font-family: var(--font-arabic);
    font-size: 1.4rem;
    line-height: 1.5;
    direction: rtl;
    text-align: right;
    color: var(--text);
    font-feature-settings: "rlig" 1, "liga" 1, "calt" 1;
    font-variant-ligatures: common-ligatures contextual;
}

/* Scholarly apparatus: a cool teal panel with a cyan-green rule, so notes
   read as marginalia rather than as a continuation of the narration itself.
   The card grows to fit them, so nothing here competes for the text's height. */
.hadith-notes {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 0.8rem 1rem 0.85rem;
    background: #effaf8;
    border: 1px solid rgba(13, 148, 136, 0.22);
    border-left: 3px solid #0d9488;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
}

.hadith-notes__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.hadith-notes__head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.35), transparent);
}

.hadith-notes__label {
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #0f766e;
}

/* Preview state: show the opening lines and fade them out, so there is
   visibly more to read rather than a bare toggle. */
.hadith-notes__body--clamped {
    max-height: 6.2rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

/* A search hit has to be findable by glance. #1a3a6b20 - navy at 12.5% - blends to
   rgb(226,230,236) on a white card, which is a neutral grey a shade off the background:
   the markup was there and nobody could see it. A highlight reads by hue, not lightness,
   so this is the site's gold at an alpha that actually registers, with a slightly
   stronger underline edge to hold the shape at small sizes. */
.hadith-content .highlight,
.hadith-text-block .highlight,
.hadith-english .highlight,
.hadith-arabic .highlight,
.hadith-inline-context .highlight {
    background: rgba(200, 162, 61, 0.34);
    box-shadow: inset 0 -1px 0 rgba(160, 126, 40, 0.45);
    border-radius: 3px;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hadith-sidecar .highlight,
.hadith-sidecar__panel-body .highlight {
    background: #ffffff4f;
}

.arabic-text .highlight,
.arabic-text .similar-term-highlight {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variant-ligatures: inherit;
}

/* ── Hadith card scroll ─────────────────────────────────────────────────── */
.hadith-card .hadith-content {
    max-height: 700px;
    overflow-y: auto;
}

/* ── Copy button ────────────────────────────────────────────────────────── */
.text-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 150ms ease;
}
.text-copy-btn:hover {
    background: var(--accent-lighter);
    color: var(--accent);
    border-color: var(--accent-light);
}

/* ========================================================================
   NOTIFICATIONS (Noty)
   ======================================================================== */
#noty_layout__topRight {
    top: 80px;
    right: 16px;
    width: min(360px, calc(100vw - 24px));
}

.noty_theme__mint.noty_bar {
    margin: 0 0 10px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.98);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(12px);
}

.noty_theme__mint.noty_bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: var(--accent);
}

.noty_theme__mint.noty_bar .noty_body {
    padding: 0.85rem 2.5rem 0.85rem 1rem;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--text);
}

.noty_theme__mint.noty_bar .noty_close_button {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-weight: 700;
}

.facet-select-wrap {
    position: relative;
}
.browse-field.is-hidden {
    display: none !important;
}
.browse-field .form-select:disabled,
.browse-field select:disabled {
    opacity: 0.5;
    background-color: var(--bs-gray-200);
    color: var(--text-muted);
    cursor: not-allowed;
}
.browse-field:has(select:disabled) label {
    opacity: 0.5;
    color: var(--text-muted);
}

/* Glow animation for update button when changes pending */
@keyframes updateBtnGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(247, 225, 166, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 0 18px rgba(247, 225, 166, 0.6), 0 4px 16px rgba(0, 0, 0, 0.15); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================================================
   ARABIC TERM SUGGESTIONS
   ======================================================================== */
.arabic-term-suggestion {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--info-bg);
    border: 1px solid rgba(2,132,199,0.15);
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: center;
}

.arabic-term-suggestion__term {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(16, 35, 63, 0.1);
    font-family: var(--font-arabic);
    font-size: 0.85rem;
    direction: rtl;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.15;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    margin-right: 0.35rem;
    margin-bottom: 0.25rem;
}
.arabic-term-suggestion__term:hover {
    background: rgba(16, 35, 63, 0.94);
    color: #f7e1a6;
    border-color: rgba(16, 35, 63, 0.94);
}

/* ========================================================================
   RESULTS HEADER
   ======================================================================== */
.tag-filter-bar--results {
    padding-top: 0.75rem;
}

.tag-filter-bar__results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.results-heading-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.results-heading-title {
    font-family: var(--font-ui);
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.results-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.results-toolbar__count {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.results-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.results-toolbar__summary {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Export inline */
.export-inline-menu {
    display: inline-flex;
    align-items: center;
}
.export-inline-trigger {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(16, 35, 63, 0.15) !important;
    border-radius: 8px;
    box-shadow: none;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.6);
    padding: 0;
    font-size: 0.82rem;
    transition: all 150ms ease;
}
.export-inline-trigger:hover,
.export-inline-trigger:focus {
    color: var(--primary);
    border-color: var(--primary) !important;
    background: rgba(26, 58, 107, 0.06);
    box-shadow: 0 2px 6px rgba(16, 35, 63, 0.1);
}

/* ── Collection hero ────────────────────────────────────────────────────── */
.collection-hero { padding: 0.15rem 0; }

.collection-hero__eyebrow {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.collection-hero__title {
    font-family: var(--font-ui);
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    font-weight: 800;
    color: var(--text);
    position: relative;
    display: inline-block;
    padding-right: 1.5rem;
}

.collection-title-wrapper { display: inline-block; }

.collection-title-edit {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    opacity: 0.5;
    transition: all 150ms ease;
}
.collection-title-edit:hover {
    opacity: 1;
    background: var(--accent-lighter);
    color: var(--accent);
}

.collection-title-edit-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.collection-title-input {
    font-family: var(--font-ui);
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    font-weight: 800;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    background: var(--surface);
    min-width: 200px;
    max-width: 400px;
}
.collection-title-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(30,58,95,0.08);
}

.collection-title-save,
.collection-title-cancel {
    opacity: 0.6;
    transition: all 150ms ease;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
}
.collection-title-save { color: var(--success); }
.collection-title-save:hover { opacity: 1; }
.collection-title-cancel { color: var(--danger); }
.collection-title-cancel:hover { opacity: 1; }

.collection-hero__meta {
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* ========================================================================
   TAG FILTER BAR
   ======================================================================== */
.tag-filter-bar {
    padding: 0.85rem 1rem;
    border: 1px solid gray;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.tag-filter-bar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.tag-filter-bar__title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tag-filter-bar__title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    background: var(--primary);
    border-radius: 2px;
}

.tag-filter-bar__toggle {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}
.tag-filter-bar__toggle:hover { color: var(--accent-hover); }

.tag-filter-bar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.tag-filter-bar__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0;
}
.tag-filter-bar__pill-label {
    display: inline-flex;
    align-items: center;
}
.tag-filter-bar__pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}
.topic-pill--active .tag-filter-bar__pill-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* ── Topic pills ────────────────────────────────────────────────────────── */
.topic-filter-pills,
.topic-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.topic-tag-pills {
    margin-top: 0.85rem;
    justify-content: flex-end;
    align-items: center;
    row-gap: 0.35rem;
}
.topic-tag-pills__label {
    display: inline-flex;
    align-self: center;
    padding: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.topic-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.topic-filter-children {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-left: 0.75rem;
}

.topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1;
    font-weight: 600;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all 150ms ease;
}
.topic-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.topic-pill em {
    font-style: normal;
    color: var(--primary);
    font-weight: 700;
}

.topic-pill--active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30,58,95,0.2);
    font-weight: 700;
}
.topic-pill--active em { color: #fff; }

.topic-pill--parent {
    align-self: flex-start;
    font-weight: 700;
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.topic-pill--parent em { color: var(--gold-light); }
.topic-pill--child {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

/* ========================================================================
   SIMILAR HADITH
   ======================================================================== */
.similar-sidecar {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.similar-sidecar__title {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.similar-sidecar__empty {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Accordion triggers ─────────────────────────────────────────────────── */
.accordion-triggers {
    padding: 0 1rem;
}

.accordion-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.accordion-trigger:hover {
    background: var(--surface-cool);
    border-color: var(--primary);
    color: var(--primary);
}
.accordion-trigger.is-open {
    background: var(--surface-cool);
    border-color: var(--primary);
    color: var(--primary);
}
.accordion-trigger.is-open.quranic-trigger {
    color: var(--success);
}
.accordion-trigger__arrow {
    font-size: 0.6rem;
    opacity: 0.7;
}

/* ── Compact tab pills inside accordions ─────────────────────────────────── */
.similar-tab-strip-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.similar-tab-pill {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.similar-tab-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.similar-tab-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.similar-tab-pill.quranic-tab-pill.active {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

/* ── Chip dropdown menu ─────────────────────────────────────────────────── */
.chip-dropdown {
    position: relative;
    z-index: 10;
}
.chip-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 0.35rem 0;
}
.chip-dropdown__menu::-webkit-scrollbar {
    width: 5px;
}
.chip-dropdown__menu::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
.chip-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}
.chip-dropdown__item:hover {
    background: var(--surface-cool);
    color: var(--primary);
}
.chip-dropdown__item.is-active {
    background: rgba(30, 58, 95, 0.06);
    color: var(--primary);
    font-weight: 700;
}
.chip-dropdown__item.is-active .chip-dropdown__item-score {
    color: var(--primary);
}
.chip-dropdown__item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chip-dropdown__item-score {
    color: rgba(247, 225, 166, 0.6);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* ── Why matched lightbulb ──────────────────────────────────────────────── */
.why-match-bulb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 150ms ease;
}
.why-match-bulb:hover {
    color: #eab308;
    border-color: #eab308;
    background: rgba(234, 179, 8, 0.08);
}
.why-match-popover {
    min-width: 260px;
    max-width: 340px;
    padding: 1rem;
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: var(--surface);
}
.why-match-popover__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.why-match-popover__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.why-match-popover .similar-why-match__chip {
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    font-weight: 600;
}
.why-match-popover .similar-why-match__chip.topic {
    background: rgba(5, 150, 105, 0.12);
    color: var(--success);
    border: 1px solid rgba(5, 150, 105, 0.25);
}
.why-match-popover .similar-why-match__chip.syntactic {
    background: rgba(30, 58, 95, 0.1);
    color: var(--primary);
    border: 1px solid rgba(30, 58, 95, 0.2);
}
.why-match-popover .similar-why-match__chip.semantic {
    background: rgba(200, 162, 61, 0.12);
    color: var(--gold-dark);
    border: 1px solid rgba(200, 162, 61, 0.25);
}
.why-match-popover .similar-why-match__chip.is-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.why-match-popover .similar-why-match__chip.is-active {
    box-shadow: 0 0 0 2px var(--primary);
}

.accordion-body {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    background: var(--surface);
}

.similar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #4ade80;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.similar-trigger:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    color: #86efac;
}
.similar-trigger:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.5; }
.similar-trigger--loading { color: var(--text-muted); }

.similar-trigger__count {
    font-weight: 800;
    font-size: 0.88rem;
}
.similar-trigger__label {
    font-weight: 500;
}
.similar-trigger__arrow {
    font-size: 0.85rem;
    transition: transform 150ms ease;
}
.similar-trigger__loading {
    color: var(--text-muted);
}

.similar-loading-dots span {
    animation: dotPulse 1.4s infinite;
    font-weight: 800;
}
.similar-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.similar-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

/* Side tabs */
.similar-sidecar__tabs { margin-top: 0.5rem; }

.similar-tab-strip {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.similar-tab-strip--side {
    max-height: 240px;
    overflow-y: auto;
}

.similar-tab-btn {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: all 150ms ease;
}
.similar-tab-btn:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
}
.similar-tab-btn.active {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.similar-tab-btn--side {
    padding: 0.4rem 0.5rem;
}

.similar-tab-btn__eyebrow {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.similar-tab-btn__text {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.similar-tab-btn--placeholder .similar-tab-btn__eyebrow,
.similar-tab-btn--placeholder .similar-tab-btn__text {
    background: linear-gradient(90deg, var(--border) 0%, var(--surface-cool) 50%, var(--border) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 3px;
    color: transparent;
}
.similar-tab-btn--placeholder .similar-tab-btn__eyebrow { height: 10px; width: 50px; }
.similar-tab-btn--placeholder .similar-tab-btn__text { height: 8px; width: 80px; }

/* Similar inline panel */
.similar-inline-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-cool);
    padding: 1rem;
}

.similar-inline-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
}

.similar-inline-panel__title {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.similar-inline-status {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
}

.similar-location-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
}
.similar-location-link {
    color: var(--accent);
    font-weight: 600;
    transition: color 100ms ease;
}
.similar-location-link:hover { color: var(--accent-hover); text-decoration: underline; }
.similar-location-sep {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.similar-why-match { margin-bottom: 0.65rem; }
.similar-why-match__title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.similar-why-match__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.similar-why-match__chip {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
}
.similar-why-match__chip.is-clickable {
    cursor: pointer;
    transition: all 150ms ease;
}
.similar-why-match__chip.is-clickable:hover {
    border-color: var(--accent-light);
    background: var(--accent-lighter);
    color: var(--accent);
}
.similar-why-match__chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.similar-full-card {
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
}
.similar-full-english {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text);
}
.similar-full-arabic {
    font-size: 1.35rem;
    line-height: 2;
}

/* ========================================================================
   QURANIC INSIGHTS
   ======================================================================== */
.quranic-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #22d3ee;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.quranic-trigger:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    color: #67e8f9;
}
.quranic-trigger__count {
    color: #22d3ee;
    font-weight: 800;
}

.quranic-inline-panel {
    border-color: rgba(213, 170, 77, 0.2);
}
.quranic-inline-panel__title {
    color: rgba(247, 225, 166, 0.92);
}

.quranic-tab-btn {
    border-color: rgba(213, 170, 77, 0.15);
}
.quranic-tab-btn:hover {
    border-color: rgba(213, 170, 77, 0.3);
    background: rgba(247, 225, 166, 0.06);
}
.quranic-tab-btn.active {
    border-color: rgba(213, 170, 77, 0.7);
    background: rgba(247, 225, 166, 0.08);
}

.quranic-tab-body {
    font-size: 0.92rem;
    line-height: 1.7;
}

.quranic-verse-head {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.quranic-verse-reference {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(247, 225, 166, 0.92);
}

.quranic-section {
    margin-bottom: 0.75rem;
}
.quranic-section__label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #51627a;
    margin-bottom: 0.35rem;
}
.quranic-verse-english {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    font-style: italic;
}
.quranic-verse-arabic {
    font-size: 1.35rem;
    line-height: 2;
}
.quranic-snippet {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid rgba(213, 170, 77, 0.7);
    background: rgba(244, 248, 255, 0.6);
    border-radius: 0 4px 4px 0;
}
.quranic-snippet__head {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(213, 170, 77, 0.9);
    margin-bottom: 0.3rem;
}
.quranic-snippet__source--link,
.quranic-snippet__source-link {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px dotted rgba(213, 170, 77, 0.5);
    transition: border-color 0.15s;
}
.quranic-snippet__source--link:hover,
.quranic-snippet__source-link:hover {
    border-bottom-style: solid;
    border-color: rgba(213, 170, 77, 0.9);
}

.quranic-snippet__expand {
    margin-inline-start: auto;
    border: 1px solid rgba(16, 35, 63, 0.15);
    border-radius: 4px;
    background: rgba(16, 35, 63, 0.04);
    color: #51627a;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    transition: all 150ms ease;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quranic-snippet__expand:hover {
    background: rgba(16, 35, 63, 0.08);
    border-color: rgba(16, 35, 63, 0.25);
    color: #193150;
}
.quranic-snippet__section {
    color: var(--text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.quranic-snippet__text {
    font-size: 0.93rem;
    line-height: 1.74;
    color: var(--text-secondary);
}
.quranic-snippet__text strong {
    font-weight: 700;
    color: #193150;
}
.quranic-snippet__text mark.tag-highlight {
    background: rgba(199, 154, 59, 0.18);
    color: inherit;
    padding: 0.05em 0.25em;
    border-radius: 3px;
    font-style: inherit;
    font-weight: 600;
}
.quranic-snippet__text em {
    font-style: normal;
    color: var(--text-primary);
    font-weight: 700;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 2px;
    padding: 0 2px;
}

/* ========================================================================
   HOME / WELCOME PAGE
   ======================================================================== */
.home-hero {
    padding: 3rem 0 2.5rem;
}

.home-hero__card {
    background: linear-gradient(135deg, #0a1628 0%, #0f2440 20%, #1e3a5f 50%, #1a4a7a 80%, #1e3a5f 100%);
    border: none;
    border-radius: var(--radius-xl);
    padding: 3.5rem 2.5rem 2.75rem;
    text-align: center;
    box-shadow:
        0 8px 16px rgba(0,0,0,0.15),
        0 20px 50px rgba(10,22,40,0.35),
        0 40px 80px rgba(10,22,40,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.home-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 10%, rgba(255,255,255,0.1) 0%, transparent 35%),
        radial-gradient(ellipse at 75% 90%, rgba(200,162,61,0.12) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 50%, rgba(30,58,95,0.03) 0%, transparent 60%);
    pointer-events: none;
    animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

.home-hero__card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold));
}

.home-hero__eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--gold);
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 1;
    font-weight: 600;
}

.home-hero__title {
    font-size: 2.6rem;
    color: #fff;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.home-hero__lead {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
}

.home-hero__search {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.home-hero__search .navbar-search {
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 920px);
    max-width: 920px;
    overflow: visible;
}

/* Home hero search button - more prominent */
.home-hero__search .search-inline-btn {
    padding: 0.5rem 1.2rem;
    font-size: 0.82rem;
    box-shadow: 0 2px 8px rgba(200,162,61,0.3);
}

.home-search {
    width: min(100%, 920px);
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.home-search .ts-wrapper,
.home-search .ts-wrapper.form-control {
    background: transparent !important;
    border: none !important;
}
.home-search .ts-control {
    border: 1px solid rgba(247, 225, 166, 0.35) !important;
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    box-shadow: var(--shadow-lg);
    font-size: 1rem;
    min-height: 48px;
    outline: none;
    border-radius: 6px;
}
.home-search .ts-control:focus-within {
    border-color: rgba(247, 225, 166, 0.5) !important;
    background: rgba(255,255,255,0.10) !important;
    box-shadow: none !important;
    outline: none;
    border-radius: 16px !important;
}
.home-search .ts-control input {
    color: rgba(255,255,255,0.9) !important;
    font-size: 1rem !important;
}
.home-search .ts-control input::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

/* Colour lives with the chip at the end of this file: the fill is gold now, so
   a gold glyph on it is invisible. */
.home-search .ts-dropdown { border-color: var(--border-strong); }

.home-hero__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.home-hero__social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 150ms ease;
}

.home-hero__social-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.home-hero__note {
    margin-top: 1.25rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    position: relative;
    z-index: 1;
}

/* ── Browse Section ─────────────────────────────────────────────────────── */
.home-browse {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background: var(--surface);
    border: none;
    border-top: 4px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06),
        0 16px 32px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* Subtle navy glow at top of browse section */
.home-browse::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, rgba(30,58,95,0.08) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.home-browse > * {
    position: relative;
    z-index: 1;
}

.home-browse .home-section-title {
    color: var(--text) !important;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.home-browse .home-section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-browse .home-section-header::after {
    content: "Archive Catalogue";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-browse .home-section-subtitle,
.home-browse .browse-meta {
    color: var(--text-secondary) !important;
}
.home-browse .browse-meta { margin-top: 0.85rem; }
.home-browse .browse-book-title { color: var(--text); }
.home-browse .browse-book-count { color: var(--text-muted); }

.home-browse .browse-panel {
    background: var(--surface-cool);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
}

.home-browse .browse-panel .browse-action {
    margin-top: 0.75rem;
    justify-self: start;
}

.home-browse .browse-field label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    display: block;
}

.home-browse .browse-panel .form-select {
    background-color: var(--surface);
    border: 1.5px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 10px;
    padding-right: 1.8rem;
    min-height: 36px;
}
.home-browse .browse-panel .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(30,58,95,0.12);
    outline: none;
}

.home-browse .browse-action.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.5rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 700;
    background: linear-gradient(180deg, #1a3a6b 0%, #0f2440 100%);
    border: 1px solid var(--gold-light);
    color: var(--gold-light);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 250ms ease;
    line-height: 1;
}
.home-browse .browse-action.btn-primary i {
    margin-right: 0.45rem;
}
.home-browse .browse-action.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #1d467f 0%, #122945 100%);
    border-color: #f7e1a6;
    color: #f7e1a6;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 35, 63, 0.2);
}
.home-browse .browse-action.btn-primary:disabled {
    background: var(--border-strong);
    border-color: var(--border-strong);
    color: var(--text-muted);
    box-shadow: none;
}
.home-browse .browse-action.btn-primary.needs-update .fa-refresh {
    animation: spin 1.2s linear infinite;
}

.home-tips, .home-notice { margin-top: 1.5rem; }

/* ── Recent Updates ─────────────────────────────────────────────────────── */
.home-updates {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background: var(--surface);
    border: none;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06),
        0 16px 32px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
.home-updates > * { position: relative; z-index: 1; }

/* ── Home page skeleton loaders ──────────────────────────────────────────── */
.home-skeleton-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.93), rgba(245,248,252,0.96));
    overflow: hidden;
    position: relative;
}

.home-skeleton-bar {
    height: 12px;
    background: linear-gradient(90deg, var(--border) 0%, var(--surface-cool) 50%, var(--border) 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: shimmer 1.5s infinite;
}

.home-skeleton-bar--title {
    height: 16px;
    width: 55%;
    margin-bottom: 10px;
}

.home-skeleton-bar--date {
    height: 8px;
    width: 30%;
    margin-bottom: 12px;
}

.home-skeleton-bar--line1 { height: 10px; width: 100%; margin-bottom: 8px; }
.home-skeleton-bar--line2 { height: 10px; width: 85%; margin-bottom: 8px; }
.home-skeleton-bar--line3 { height: 10px; width: 60%; }

.home-skeleton-book {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.93), rgba(245,248,252,0.96));
    min-height: 102px;
    overflow: hidden;
    position: relative;
}

.home-skeleton-book-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

.home-skeleton-book-copy {
    flex: 1;
}

.home-skeleton-book-title {
    height: 14px;
    width: 70%;
    margin-bottom: 8px;
}

.home-skeleton-book-count {
    height: 8px;
    width: 40%;
}

.home-skeleton-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
}

.home-skeleton-nav-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.home-skeleton-nav-search {
    flex: 1;
    height: 45px;
    border-radius: 11px;
}

.home-skeleton-nav-actions {
    width: 80px;
    height: 32px;
    border-radius: 8px;
}

/* Mobile pagination: hide label on desktop */
.pagination__mobile-label {
    display: none;
}

.recent-updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.recent-update-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.recent-update-card:hover,
.recent-update-card:focus-within {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* The link covers the card's text, not the card, so that a video inside it stays
   playable - an iframe within an anchor would navigate away on the first click. */
.recent-update-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.recent-update-card__link:hover,
.recent-update-card__link:focus {
    text-decoration: none;
    color: inherit;
}
/* focus-within lifts the card; this marks which part actually has focus. */
.recent-update-card__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.recent-update-video {
    margin-top: 0.85rem;
    width: 100%;
    /* The recording is 4:3, which in a card-width column stands taller than the whole of
       the card beside it. Capped so the two stay comparable; the player letterboxes. */
    max-height: 240px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0b1728;
}
.recent-update-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Our own preview keeps its proportions instead of the cap above, which exists for the
   4:3 recording: this one is wider than it is tall and would sit letterboxed inside it. */
.recent-update-video--file {
    max-height: none;
}
/* Fitted rather than cropped: the walkthrough carries a caption strip along its bottom
   edge, and cropping to fill would be what cuts it off. */
.recent-update-video__file {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.recent-update-date {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-light);
    margin-bottom: 0.3rem;
}

.recent-update-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: #fffdf8;
}

.recent-update-summary {
    margin-bottom: 0.4rem;
    color: rgba(236, 242, 251, 0.82);
    font-size: 0.85rem;
}

.recent-update-list {
    margin: 0;
    padding-left: 1rem;
    color: rgba(236, 242, 251, 0.76);
    font-size: 0.82rem;
}

/* ── Home card / disclaimer ─────────────────────────────────────────────── */
.home-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
}
.home-card .text-muted { color: var(--text-secondary) !important; }

/* ── Collections ────────────────────────────────────────────────────────── */
.home-collections {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.collection-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 150ms ease;
}
.collection-card:hover { box-shadow: var(--shadow-md); }

.collection-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text);
}
.collection-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}
.collection-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.collection-viewer {
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 0.2rem;
}
.collection-view-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--surface);
}

/* ========================================================================
   AUTH MODAL
   ======================================================================== */
.auth-modal {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.35rem;
}

.auth-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.auth-modal-close:hover {
    background: var(--bg-subtle);
    color: var(--text);
}

/* ========================================================================
   COLLECTION PICKER MODAL
   ======================================================================== */
.collection-picker-modal {
    display: grid;
    gap: 0.65rem;
    min-width: min(380px, 84vw);
    max-width: 420px;
    padding-top: 0.4rem;
    position: relative;
}

.collection-picker-modal__title {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}
.collection-picker-modal__subtitle {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.collection-picker-modal__list,
.profile-modal__collections {
    display: grid;
    gap: 0.45rem;
    max-height: 42vh;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.collection-picker-modal__option,
.profile-modal__collection-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 0.7rem 0.85rem;
    text-align: left;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all 150ms ease;
}
.collection-picker-modal__option:hover,
.collection-picker-modal__option.is-selected {
    border-color: var(--accent-light);
    background: var(--accent-lighter);
}

.collection-picker-modal__option-title,
.profile-modal__collection-name {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
}
.collection-picker-modal__option-meta,
.profile-modal__collection-meta {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.collection-picker-modal__input {
    min-height: 2.8rem;
    border-radius: var(--radius-md);
    border-color: var(--border-strong);
    background: var(--surface);
    font-size: 0.92rem;
}

.collection-picker-modal__select {
    min-height: 2.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    padding: 0.55rem 2rem 0.55rem 0.7rem;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
    background-size: 12px;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 0.92rem;
    transition: border-color 150ms ease;
}
.collection-picker-modal__select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.collection-picker-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.collection-picker-modal__submit {
    min-width: 150px;
    border-radius: var(--radius-pill);
    padding-left: 1rem;
    padding-right: 1rem;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* ========================================================================
   HADITH EDITOR MODAL
   ======================================================================== */
.hadith-editor-modal { min-width: min(880px, 92vw); }

.hadith-editor-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.hadith-editor-modal__meta-id {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--accent-lighter);
    border: 1px solid var(--accent-light);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--accent-hover);
}

.hadith-editor-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.hadith-editor-modal__field { display: grid; gap: 0.25rem; }
.hadith-editor-modal__field--full { margin-top: 0.2rem; }

.hadith-editor-modal__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
}

.hadith-editor-modal__help,
.hadith-editor-modal__section-copy {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.hadith-editor-modal__input {
    min-height: 2.6rem;
    border-radius: var(--radius-md);
    border-color: var(--border-strong);
    background: var(--surface);
    font-size: 0.92rem;
}
.hadith-editor-modal__textarea { min-height: auto; padding-top: 0.65rem; padding-bottom: 0.65rem; }
.hadith-editor-modal__code { font-family: var(--font-mono); font-size: 0.82rem; }

.hadith-editor-modal__group { display: grid; gap: 0.55rem; padding-top: 0.2rem; }

.hadith-editor-modal__repeatable-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.hadith-editor-modal__section-title {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
}

.hadith-editor-modal__repeatable-list { display: grid; gap: 0.55rem; }

.hadith-editor-modal__repeatable-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.hadith-editor-modal__row-actions { display: flex; align-items: flex-end; }

.hadith-editor-modal__status { min-height: 1.2rem; font-size: 0.82rem; color: var(--success); }
.hadith-editor-modal__status.is-error { color: var(--danger); }
.hadith-editor-modal__actions { margin-top: 0.1rem; }

.hadith-editor-modal .ts-control,
.hadith-editor-modal .ts-wrapper.multi .ts-control {
    min-height: 2.6rem;
    border-radius: var(--radius-md);
    border-color: var(--border-strong);
    background: var(--surface);
    padding: 0.35rem 0.5rem;
    box-shadow: none;
}
.hadith-editor-modal .ts-dropdown {
    border-radius: var(--radius-md);
    border-color: var(--border);
}

/* Profile modal stats */
.profile-modal__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}
.profile-modal__stat {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 0.55rem 0.65rem;
}

/* ========================================================================
   PAGINATION
   ======================================================================== */
.pagination {
    gap: 0.35rem;
}

.page-item .page-link {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    min-width: 34px;
    height: 34px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
    box-shadow: var(--shadow-xs);
}
.page-item .page-link:hover {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
    font-weight: 700;
}

.page-item.disabled .page-link {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-faint);
    box-shadow: none;
}

/* ========================================================================
   FOOTER
   ======================================================================== */
.site-footer {
    margin-top: 4rem;
    border-top: none;
    background: var(--primary-dark);
    color: rgba(255,255,255,0.7);
    position: relative;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 5%, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, transparent 95%);
}

.site-footer::after {
    content: "۞";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -46%);
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-arabic);
    font-size: 1.15rem;
    color: rgba(247,225,166,0.92);
    background: var(--primary-dark);
    box-shadow: 0 0 0 1px rgba(247,225,166,0.14);
}

.site-footer .container {
    padding-top: 2.75rem;
    padding-bottom: 2rem;
    position: relative;
}

.site-footer .container::before {
    content: "";
    position: absolute;
    inset: 1.1rem 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(247,225,166,0.16) 18%, rgba(247,225,166,0.16) 82%, transparent 100%);
    pointer-events: none;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2rem;
}

.site-footer__title {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: #fff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.site-footer__title::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
    margin-left: 0.2rem;
}

.site-footer__text {
    margin: 0;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 480px;
}

.site-footer__link {
    color: var(--gold-light) !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 150ms ease;
}
.site-footer__link:hover {
    color: #fff !important;
    text-decoration: underline;
}

.site-footer__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-light);
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.site-footer__links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 150ms ease;
}
.site-footer__links a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__bottom {
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    position: relative;
}

.site-footer__social {
    display: flex;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.site-footer__social a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 150ms ease;
}

.site-footer__social a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
}

.site-footer__bottom::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 10px;
    background: linear-gradient(90deg, transparent 0%, rgba(247,225,166,0.62) 18%, rgba(247,225,166,0.62) 82%, transparent 100%);
    clip-path: polygon(0 55%, 40% 55%, 47% 0, 50% 55%, 53% 0, 60% 55%, 100% 55%, 100% 100%, 0 100%);
    opacity: 0.9;
}

/* ========================================================================
   TERM CHIPS
   ======================================================================== */
.term-chip {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}
.term-chip--arabic {
    font-family: var(--font-arabic);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
}

code.welcome {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* ========================================================================
   BULK COLLECTION BAR
   ======================================================================== */
.bulk-collection-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--accent-lighter);
    border: 1px solid var(--accent-light);
    margin-bottom: 0.75rem;
}

.bulk-collection-bar__count {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
}

.bulk-collection-bar .btn {
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
}

/* ========================================================================
   SCROLL SENTINEL
   ======================================================================== */
.search-reveal-sentinel {
    text-align: center;
    color: var(--text-muted);
    padding: 1rem 0 0.5rem;
    font-size: 0.88rem;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 992px) {
    /* Deliberately class-only: #queryBar's id-specificity flex wins here, and
       letting this rule apply pushes the bar onto its own row on tablets,
       growing the sticky nav from 98px to 154px. Only the <=768px block below
       is raised to id specificity. */
    .navbar-search {
        flex: 1 1 100%;
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
    }

    .top-actions { width: 100%; justify-content: flex-end; }

    .site-footer__grid { grid-template-columns: 1fr; }

    .hadith-editor-modal { min-width: min(92vw, 92vw); }
}

@media (max-width: 768px) {
    .brand-logo--full { height: 38px; }
    .brand-logo--icon { height: 30px; }
    .brand-logo--emblem { height: 30px; }

    .site-nav { padding-top: 0.45rem; padding-bottom: 0.5rem; }

    .navbar-brand { align-self: center; }

    .profile-chip { padding-right: 0.45rem !important; }
    .profile-chip__meta { max-width: 6rem; }
    .profile-dropdown { width: min(300px, 92vw); }

    .navbar-top {
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 0.4rem;
    }
    /* One row: the search sits between the logo and the menu rather than
       below them, which removes the dead gap across the middle of the header.
       Viable now that the term pills stay on a single line and scroll
       sideways instead of wrapping the bar to three rows.
       #queryBar is included because it is this same element and sets flex with
       id specificity, so the class selector alone silently loses here. */
    #queryBar,
    .navbar-search {
        order: 0;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar-top {
        flex-wrap: nowrap !important;
    }

    /* Partially persistent header (NN/g). The two-row nav is the right shape
       for a query with filter pills, but it is sticky, so on a 390x844 phone
       it would cost 116px - 14% of the viewport - for the entire read. Stow it
       while the reader scrolls down and return it the moment they scroll up,
       so the cost is paid only when the search is actually wanted.
       translateY keeps this off the layout path: no reflow, no CLS. */
    .site-nav {
        transition: transform 220ms ease;
    }

    .site-nav--stowed {
        transform: translateY(-100%);
    }
    .menu-context-row {
        order: 0;
        margin-inline-start: auto;
    }
    .search-inline-btn--outer {
        order: 3;
        flex: 0 0 auto;
    }

    .home-hero__card { padding: 1.5rem 1rem; }
    .home-hero__title { font-size: 1.6rem; }

    .home-browse { padding: 1rem; }

    .hadith-card .card-body { padding: 1rem; }
    .hadith-content { padding: 0.75rem; }
    .hadith-arabic { font-size: 1.35rem; }

    /* Stack English/Arabic on mobile */
    .hadith-content .row.g-4 > .col-12.col-lg-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .site-footer__bottom { flex-direction: column; gap: 0.2rem; }
}

@media (max-width: 640px) {
    .topic-tag-pills { justify-content: flex-start; }

    .hadith-editor-modal {
        min-width: min(92vw, 92vw);
    }
    .hadith-editor-modal__grid,
    .hadith-editor-modal__repeatable-row {
        grid-template-columns: 1fr;
    }
    .hadith-editor-modal__row-actions { justify-content: flex-end; }
}

/* ========================================================================
   MISC UTILITIES
   ======================================================================== */
.arabic-text {
    font-family: var(--font-arabic);
    direction: rtl;
    text-align: right;
}

.form-select {
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(30,58,95,0.12);
    outline: none;
}

.form-control {
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(30,58,95,0.12);
    outline: none;
}

/* SweetAlert override */
.swal-modal {
    border-radius: var(--radius-lg);
}

/* Bootstrap overrides */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.3rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.35rem 0.65rem;
    transition: all 100ms ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-bg);
    color: var(--primary);
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}
.alert-warning {
    background: var(--warning-bg);
    border-color: rgba(217, 119, 6, 0.2);
    color: var(--warning);
}

.text-muted {
    color: var(--text-muted) !important;
}

.small {
    font-size: 0.82rem;
}

/* Browse book list */
.browse-book-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.browse-book-drawer-toggle {
    display: none;
}

.browse-book-item {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: all 200ms ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-xs);
}
.browse-book-item:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.browse-book-item.is-selected {
    border-color: var(--primary);
    background: var(--primary-bg);
    box-shadow: var(--shadow-sm);
}

.browse-book-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.browse-book-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Section header */
.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-section-title {
    font-family: var(--font-ui);
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.15rem;
}

.home-section-subtitle {
    color: var(--text-secondary);
    /* 0.88rem sat tight under an 800-weight title and read as a caption on it rather
       than as the line that says what the section is for. */
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* The header and the grid under it had nothing between them, so "The men these books
   lean on most…" sat on the first row of cards. */
.home-section-header { margin-bottom: 1.15rem; }

/* Pace loading */
.pace {
    pointer-events: none;
    user-select: none;
}
.pace-inactive { display: none; }
.pace .pace-progress {
    background: var(--accent);
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
}

/* ========================================================================
   UI ITERATION — PREMIUM SAAS REFINEMENT
   ======================================================================== */
:root {
    --primary: #10233f;
    --primary-light: #18345c;
    --primary-lighter: #24508a;
    --primary-dark: #09111f;
    --primary-bg: #edf3ff;
    --accent: #245bc6;
    --accent-hover: #1948a4;
    --accent-light: #d7e4ff;
    --accent-lighter: #eef4ff;
    --gold: #c79a3b;
    --gold-dark: #9f7625;
    --gold-light: #f7e1a6;
    --gold-bg: #fff8e8;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-warm: #fbfcff;
    --surface-cool: #f4f7fc;
    --bg: #eff3f9;
    --bg-subtle: #e8edf5;
    --text: #122033;
    --text-secondary: #516277;
    --text-muted: #8292a7;
    --text-faint: #b3bfce;
    --border: rgba(16, 35, 63, 0.09);
    --border-strong: rgba(16, 35, 63, 0.16);
    --border-focus: #2e6cff;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 16px 38px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 34px 90px rgba(8, 15, 28, 0.14);
    --shadow-card: 0 18px 48px rgba(15, 23, 42, 0.08);
    --shadow-card-hover: 0 28px 68px rgba(15, 23, 42, 0.14);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
}

body {
    background:
        radial-gradient(circle at top left, rgba(30, 58, 95, 0.1), transparent 32%),
        radial-gradient(circle at 100% 10%, rgba(199, 154, 59, 0.08), transparent 26%),
        linear-gradient(180deg, #f5f8fd 0%, #eef3f9 48%, #edf1f7 100%) !important;
    color: var(--text);
}

body::before {
    background:
        radial-gradient(circle at 0% 0%, rgba(30, 58, 95, 0.12), transparent 24%),
        radial-gradient(circle at 100% 12%, rgba(199, 154, 59, 0.1), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
    opacity: 1;
}

body::after {
    background-image:
        linear-gradient(rgba(16, 35, 63, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 35, 63, 0.035) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.08));
}

@media (prefers-reduced-motion: reduce) {
    .site-nav {
        transition: none !important;
    }
}

.site-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    background:
        radial-gradient(circle at top left, rgba(30, 58, 95, 0.18), transparent 26%),
        linear-gradient(180deg, #1a3a6b 0%, #0b1728 100%) !important;
    border-bottom: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3), 0 12px 36px rgba(0,0,0,0.18);
}

/* Silver shimmer on navbar hover */
.site-nav::before {
    content: "";
    position: absolute;
    top: 20%;
    left: -40%;
    width: 30%;
    height: 60%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 55%,
        transparent 70%
    );
    transition: none;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
.site-nav:hover::before {
    animation: navShimmer 0.7s ease-out forwards;
}
@keyframes navShimmer {
    0% { left: -40%; }
    100% { left: 140%; }
}

/* Shimmer on tags */
.topic-tag-pills::before {
    content: "";
    position: absolute;
    top: 15%;
    left: -40%;
    width: 25%;
    height: 70%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 70%
    );
    transition: none;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
.topic-tag-pills:hover::before {
    animation: navShimmer 0.7s ease-out forwards;
}
.hadith-meta { overflow: hidden; }
.topic-tag-pills { position: relative; overflow: hidden; }

.navbar {
    padding: 0.7rem 0;
}

.brand-logo--full {
    filter: brightness(0) invert(1);
}

.brand-logo--icon {
    filter: none;
}

.brand-logo--full-v2 {
    filter: none;
}

.navbar-top {
    align-items: center;
    gap: 0.9rem;
}

.navbar-search,
#queryBar {
    gap: 0.8rem;
}

.navbar-search__input {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Dark search input on dark nav */
.site-nav .ts-wrapper,
.site-nav .ts-wrapper.form-control,
.site-nav .navbar-search .ts-wrapper {
    background: transparent !important;
    border: none !important;
}

.site-nav .ts-control,
.site-nav .ts-wrapper .ts-control,
.site-nav .ts-wrapper.form-control .ts-control,
.site-nav .navbar-search .ts-control,
.site-nav .form-control.ts-control {
    padding-left: 1.36rem !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(247,225,166,0.35) !important;
    color: #fff !important;
}

.site-nav .ts-control:focus-within,
.site-nav .ts-wrapper.focus .ts-control,
.site-nav .form-control.ts-control:focus-within {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(247,225,166,0.5) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.site-nav .ts-control input {
    color: rgba(255,255,255,0.9) !important;
}

.site-nav .ts-control input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}


/* Colour lives with the chip at the end of this file, for the same reason. */


/* Hidden select shouldn't leak white bg */
.site-nav select.form-control,
.site-nav .ts-dropdown {
    background: #fff;
    border: 1.5px solid rgba(26, 58, 107, 0.15);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 6px;
    margin-top: 4px;
}
.site-nav .ts-dropdown .ts-dropdown-content {
    padding: 0;
}
.site-nav .ts-dropdown .option {
    padding: 8px 14px;
    font-size: 0.88rem;
    border-radius: 10px;
    color: #1a3a6b;
    transition: background 120ms ease;
}
.site-nav .ts-dropdown .option:hover,
.site-nav .ts-dropdown .option.active {
    background: #eef3fb;
}
.site-nav .ts-dropdown .highlight {
    font-weight: 700;
    color: #0d2142;
    background: transparent;
}

.site-nav .ts-wrapper.form-control select {
    background: transparent !important;
    color: transparent !important;
    border: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* Kill Bootstrap form-control white bg leak in nav */
.site-nav .form-control {
    background: transparent !important;
    background-color: transparent !important;
}

.search-actions {
    right: 0.85rem;
    gap: 0.45rem;
}

.search-match-toggle--inline,
.search-match-toggle {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    box-shadow: none;
}

.search-match-toggle__btn {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.55rem;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}

.search-match-toggle__btn.active {
    background: var(--gold-light) !important;
    color: #0b1728 !important;
}

.search-match-toggle__btn:not(.active):hover {
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
}

.search-help {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    justify-content: center;
    background: transparent;
    color: rgba(255,255,255,0.5);
}
.search-help:hover {
    color: var(--gold-light);
}

.search-inline-btn,
.top-actions .top-action {
    min-height: 34px;
    border-radius: 10px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.search-inline-btn {
    background: rgba(255,255,255,0.12) !important;
    border: 1.5px solid var(--gold-light) !important;
    color: var(--gold-light) !important;
    box-shadow: none;
}

.search-inline-btn:hover {
    background: var(--gold-light) !important;
    border-color: var(--gold-light) !important;
    color: #0b1728 !important;
}

.top-actions .top-action {
    background: var(--gold-light) !important;
    border: 1px solid var(--gold-light) !important;
    color: #0b1728 !important;
    box-shadow: none;
    font-weight: 600;
}

.top-actions .top-action:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #0b1728 !important;
}

/* The ornament pass repaints .top-action, so the language toggle is restated here to
   stay outlined. It sits beside Sign In and must not read as a second primary action. */
.top-actions .lang-toggle {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none;
    font-weight: 600;
}
.top-actions .lang-toggle:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--gold-light) !important;
    color: #fff !important;
}

.profile-chip {
    border-radius: 16px !important;
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.profile-chip__avatar {
    background: var(--gold-light) !important;
    color: #0b1728 !important;
}

/* 1440px was too wide twice over. A narration card holds two text columns, English and
   Arabic, and at that width each ran to a line length that is tiring to read while the
   card itself carried large empty margins around them. It also collided with Bootstrap's
   container gutter, which is about 12px: between roughly 1440 and 1520 the container hit
   its cap with almost nothing left over, so the card sat flush against both edges of the
   window - full-bleed at 1440, comfortably inset at 1920, for no reason a reader could
   see.

   1280 keeps the sidebar-plus-card layout intact and gives the columns a sane measure.
   The explicit inline padding is the other half: a max-width alone cannot stop the
   container touching the edges at the widths just above it. */
main.container {
    max-width: 1280px;
    padding-top: 1.5rem;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

.home-hero {
    padding: 1.2rem 0 2.2rem;
}

.home-hero__card {
    padding: clamp(1.6rem, 2.4vw, 2.5rem);
    border: 1px solid rgba(243, 229, 184, 0.18);
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(90, 135, 220, 0.3), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(243, 229, 184, 0.08), transparent 26%),
        radial-gradient(circle at bottom right, rgba(199, 154, 59, 0.18), transparent 24%),
        linear-gradient(135deg, #08111d 0%, #0d1b31 26%, #122847 56%, #173964 100%);
    box-shadow: 0 28px 80px rgba(7, 15, 28, 0.34);
}

.home-hero__card::before {
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.06), transparent 38%),
        url('/img/home-hero-calligraphy.svg') right center / cover no-repeat;
    opacity: 0.88;
    animation: none;
}

.home-hero__card::after {
    inset: 0;
    background:
        radial-gradient(circle at 76% 42%, rgba(243, 229, 184, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%);
    opacity: 0.72;
    height: auto;
}

.home-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    position: relative;
    z-index: 1;
}

.home-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 700px;
    margin: 0;
}

.home-hero__eyebrow {
    margin-bottom: 0.8rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f7e1a6;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.home-hero__title {
    max-width: 10ch;
    font-size: clamp(2.55rem, 5vw, 4.7rem);
    line-height: 0.95;
    margin-bottom: 0.9rem;
    color: #fffaf0;
}

.home-hero__lead {
    max-width: 60ch;
    margin: 0 0 1.15rem;
    font-size: 1.04rem;
    line-height: 1.65;
    color: rgba(234, 240, 251, 0.82);
}

.home-hero__signals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.05rem;
}

.home-hero__signal {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.48rem 0.8rem;
    border-radius: 999px;
    background: rgba(248, 250, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.8rem;
    font-weight: 600;
}

.home-hero__search {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.home-search {
    width: 100%;
    max-width: 720px;
}

.home-search .navbar-search__input {
    background: transparent;
    box-shadow: none;
}

.home-search .ts-control {
    background: rgba(7, 15, 28, 0.34) !important;
    border: 1px solid rgba(247, 225, 166, 0.3) !important;
    color: #fff !important;
    box-shadow: var(--shadow-lg);
    min-height: 58px;
    padding-right: 168px;
    border-radius: 18px;
    backdrop-filter: blur(14px);
}

.home-search .ts-control:focus-within {
    border-color: rgba(247, 225, 166, 0.5) !important;
    background: rgba(7, 15, 28, 0.42) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.home-search .ts-control input {
    color: rgba(255,255,255,0.9) !important;
    font-size: 1rem !important;
}

.home-search .ts-control input::placeholder {
    color: rgba(255,255,255,0.4) !important;
}


.home-hero__search .search-inline-btn {
    min-height: 50px;
    padding-inline: 1.25rem;
}

.home-hero__note {
    margin-top: 0.95rem;
    color: rgba(235, 240, 250, 0.68);
    text-align: left;
}

.home-hero__visual {
    display: flex;
    justify-content: center;
}

.home-hero__visual-panel {
    position: relative;
    width: min(100%, 420px);
    min-height: 430px;
    padding: 1.5rem;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        linear-gradient(135deg, rgba(10, 22, 40, 0.14), rgba(10, 22, 40, 0.02));
    border: 1px solid rgba(243, 229, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 40px rgba(3, 8, 16, 0.32);
    backdrop-filter: blur(10px);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.home-hero__visual-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 64% 40%, rgba(243, 229, 184, 0.12), transparent 26%),
        url('/img/hero-pattern-5ce0b2d233b70e13381a1a6280107f95.svg') center / cover no-repeat;
    opacity: 0.24;
    pointer-events: none;
}

.home-hero__visual-panel::after {
    content: "";
    position: absolute;
    inset: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.home-hero__visual-mark {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(12, 23, 41, 0.74), rgba(12, 23, 41, 0.54)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(243, 229, 184, 0.18);
    border-radius: 22px;
    box-shadow:
        0 18px 36px rgba(3, 8, 16, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    width: min(100%, 290px);
    padding: 1.25rem 1.2rem 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
}

.home-hero__visual-mark-icon {
    width: 42px;
    height: auto;
    display: block;
    margin-bottom: 0.2rem;
}

.home-hero__visual-mark-icon--calligraphy {
    width: 220px;
    max-width: 100%;
    margin-bottom: 0.15rem;
    filter: drop-shadow(0 10px 26px rgba(8, 17, 29, 0.26));
}

.home-hero__visual-mark-title {
    font-family: var(--font-reference);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.96);
}

.home-hero__visual-mark-divider {
    width: 84px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243, 229, 184, 0.8), transparent);
}

.home-hero__visual-mark-subtitle {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(243, 229, 184, 0.78);
}

.home-browse,
.home-updates,
.home-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(250, 252, 255, 0.88)) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(18px);
}

.home-browse {
    padding: 1.8rem;
}

.home-browse::before {
    height: 96px;
    background: linear-gradient(180deg, rgba(30, 58, 95, 0.08) 0%, rgba(30, 58, 95, 0) 100%);
}

.home-browse::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid rgba(16, 35, 63, 0.06);
    background:
        radial-gradient(circle at 20px 20px, rgba(16, 35, 63, 0.08) 0 1px, transparent 1.5px),
        radial-gradient(circle at calc(100% - 20px) 20px, rgba(16, 35, 63, 0.08) 0 1px, transparent 1.5px),
        radial-gradient(circle at 20px calc(100% - 20px), rgba(16, 35, 63, 0.08) 0 1px, transparent 1.5px),
        radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), rgba(16, 35, 63, 0.08) 0 1px, transparent 1.5px);
    pointer-events: none;
    z-index: 0;
}

.home-browse .home-section-header,
.home-updates .home-section-header {
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
}

.home-browse .home-section-title,
.home-updates .home-section-title {
    font-size: 1.5rem;
    color: var(--primary) !important;
}

.home-browse .home-section-subtitle,
.home-updates .home-section-subtitle,
.home-browse .browse-meta {
    max-width: 70ch;
    color: var(--text-secondary) !important;
}

.browse-book-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}

.browse-book-item,
.browse-book-card {
    /* Now an <a> rather than a div, so it has to shed the default link styling. */
    display: block;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    min-height: 102px;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.98));
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-top: 3px solid rgba(30, 58, 95, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(15, 23, 42, 0.05);
    position: relative;
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.browse-book-item:hover,
.browse-book-item.is-selected,
.browse-book-card:hover,
.browse-book-card.is-active {
    border-color: rgba(26, 58, 107, 0.35);
    border-top-color: #d5aa4d;
    background: linear-gradient(180deg, #eef3fb, #dde8f7);
    box-shadow: 0 8px 24px rgba(26, 58, 107, 0.15), inset 0 1px 0 rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

.browse-book-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 8px;
    border: 1px solid rgba(16, 35, 63, 0.05);
    pointer-events: none;
}

.browse-book-card::after {
    content: "";
    position: absolute;
    inset: auto auto 10px 10px;
    width: 22px;
    height: 22px;
    border-left: 1px solid rgba(16, 35, 63, 0.08);
    border-bottom: 1px solid rgba(16, 35, 63, 0.08);
    border-bottom-left-radius: 14px;
    pointer-events: none;
}

.browse-book-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 0.8rem;
    width: 100%;
}

.browse-book-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
        linear-gradient(180deg, rgba(30, 58, 95, 0.15), rgba(30, 58, 95, 0.08));
    border: 1px solid rgba(213, 170, 77, 0.2);
    color: rgba(30, 58, 95, 0.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    line-height: 1;
}

.browse-book-item:hover .browse-book-icon,
.browse-book-card:hover .browse-book-icon {
    border-color: rgba(213, 170, 77, 0.4);
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
        linear-gradient(180deg, rgba(30, 58, 95, 0.18), rgba(30, 58, 95, 0.1));
}

.browse-book-icon i {
    font-size: 1rem;
    line-height: 1;
}

.browse-book-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
}

.browse-book-title {
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 700;
    margin: 0;
}

.browse-book-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 35, 63, 0.12);
    background: rgba(213, 170, 77, 0.08);
    color: rgba(30, 58, 95, 0.7);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-browse .browse-panel {
    border-radius: 22px;
    padding: 1.35rem;
    background: #dde6f3;
    border: 1.5px solid rgba(26, 58, 107, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(15, 23, 42, 0.1);
}

.home-browse .browse-panel.is-hidden {
    display: none !important;
}

.recent-updates-grid {
    gap: 1rem;
}

.recent-update-card {
    border-radius: 20px;
    padding: 1.15rem;
    background:
        linear-gradient(180deg, rgba(15, 36, 64, 0.96), rgba(20, 48, 86, 0.94)),
        linear-gradient(135deg, rgba(243, 229, 184, 0.06), transparent 42%);
    border: 1px solid rgba(243, 229, 184, 0.18);
    box-shadow: 0 18px 34px rgba(8, 17, 29, 0.18);
}

.recent-update-card:hover {
    box-shadow: 0 24px 44px rgba(8, 17, 29, 0.24);
}

.recent-updates-more {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #3a5a8a;
    text-decoration: none;
}
.recent-updates-more:hover {
    color: #0b1728;
    text-decoration: underline;
}
.tag-filter-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.92));
    border: 1px solid #8080805c;
    border-left: 0;
    border-radius: 22px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
}
.tag-filter-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #245bc6 0%, #5e8df1 56%, #c79a3b 100%);
}
.home-browse .browse-panel .form-select {
    min-height: 42px;
    border-radius: 12px;
    background-color: #fff;
    border: 1.5px solid rgba(26, 58, 107, 0.2);
    font-weight: 500;
    color: #1a3a6b;
}

.tag-filter-bar {
    padding: 1.1rem 1.15rem;
    background: linear-gradient(180deg, rgb(191 191 191 / 22%), rgba(248, 250, 255, 0.94)), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.92));
}

.tag-filter-bar__results-head {
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(16, 35, 63, 0.08);
}

.results-heading-inline {
    gap: 0.75rem;
}

.results-heading-title {
    font-size: clamp(1.55rem, 2vw, 2rem);
    color: var(--primary);
}

.results-heading-meta {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(30, 58, 95, 0.08);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(30, 58, 95, 0.12);
}

.pagination .page-link {
    border-radius: 12px;
    min-width: 38px;
    height: 38px;
    border-color: rgba(16, 35, 63, 0.08);
}

.topic-pill {
    position: relative;
    min-height: 2.1rem;
    padding: 0.42rem 0.82rem !important;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 45, 80, 0.95) 0%, rgba(10, 30, 55, 0.9) 100%);
    border: 1px solid var(--gold-light);
    color: #f7e1a6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    clip-path: polygon(
        0% 5px,
        5px 0%,
        calc(100% - 5px) 0%,
        100% 5px,
        100% calc(100% - 5px),
        calc(100% - 5px) 100%,
        0% 100%,
        0% calc(100% - 5px)
    );
}

.topic-pill::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #f3e5b8 0%, #f7e1a6 100%);
    border: 1px solid var(--gold-light);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0.9;
}

.topic-pill::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #f3e5b8 0%, #f7e1a6 100%);
    border: 1px solid var(--gold-light);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0.9;
}

.topic-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.topic-pill:hover::before,
.topic-pill:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 10px rgba(247, 225, 166, 0.6);
}

.topic-pill--active {
    background: #f7e1a6;
    border-color: #0f2440;
    color: #0f2440;
    box-shadow: 0 0 0 2px #0f2440, 0 4px 12px rgba(247, 225, 166, 0.4);
    font-weight: 700;
}

.topic-pill--active::before,
.topic-pill--active::after {
    background: #0f2440;
    border-color: #0f2440;
    box-shadow: 0 0 6px rgba(15, 36, 64, 0.5);
}

.topic-pill .tag-filter-bar__pill-label {
    color: inherit;
}

.tag-filter-bar__pill-count {
    background: rgba(247, 225, 166, 0.16);
    color: #f7e1a6;
    border: 1px solid rgba(247, 225, 166, 0.24);
}

.topic-pill:hover .tag-filter-bar__pill-count {
    background: rgba(255, 255, 255, 0.94);
    color: #18345d;
    border: 2px solid #0f2440;
}

.topic-pill--active.tag-filter-bar__pill .tag-filter-bar__pill-count {
    background: rgba(15, 36, 64, 0.92);
    color: #f7e1a6;
    border: 2px solid #0f2440;
}

/* Islamic ornamental frame for filter bar pills */

.tag-filter-bar__pill {
    position: relative;
    padding: 0.42rem 0.82rem !important;
    background: linear-gradient(135deg, rgba(20, 45, 80, 0.95) 0%, rgba(10, 30, 55, 0.9) 100%);
    border: 1px solid var(--gold-light);
    color: #f7e1a6;
    clip-path: polygon(
        0% 5px,
        5px 0%,
        calc(100% - 5px) 0%,
        100% 5px,
        100% calc(100% - 5px),
        calc(100% - 5px) 100%,
        0% 100%,
        0% calc(100% - 5px)
    );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tag-filter-bar__pill::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #f3e5b8 0%, #f7e1a6 100%);
    border: 1px solid var(--gold-light);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0.9;
}

.tag-filter-bar__pill::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #f3e5b8 0%, #f7e1a6 100%);
    border: 1px solid var(--gold-light);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0.9;
}

.topic-pill--active.tag-filter-bar__pill {
    background: #f7e1a6 !important;
    border-color: #0f2440 !important;
    color: #0f2440 !important;
    box-shadow: 0 0 0 2px #0f2440, 0 4px 12px rgba(247, 225, 166, 0.4) !important;
}

.topic-pill--active.tag-filter-bar__pill::before,
.topic-pill--active.tag-filter-bar__pill::after {
    background: #0f2440 !important;
    border-color: #0f2440 !important;
    box-shadow: 0 0 6px rgba(15, 36, 64, 0.5);
}

.tag-filter-bar__pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.tag-filter-bar__pill:hover::before,
.tag-filter-bar__pill:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 10px rgba(247, 225, 166, 0.6);
}

.vstack.gap-3 {
    gap: 1.35rem !important;
}

.hadith-card {
    --hadith-content-min-height: 0px;
    /* The card grows to fit: expanding the notes or opening a related /
       tafsir panel must not steal height from the narration text. */
    --hadith-card-max-height: none;
    --hadith-inline-max-height: min(32dvh, 22rem);
    --hadith-inline-snippet-max-height: min(36dvh, 24rem);
    border: 1px solid #d0d4da !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 8px 24px rgba(0, 0, 0, 0.07) !important;
    position: relative;
}

.hadith-card--metadata {
    --hadith-content-min-height: 0px;
}

.hadith-card--similar,
.hadith-card--quran {
    --hadith-content-min-height: min(56rem, 86dvh);
    --hadith-inline-max-height: min(35dvh, 24rem);
    --hadith-inline-snippet-max-height: min(40dvh, 28rem);
}

.hadith-card::before {
    content: none;
}

.hadith-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.10) !important;
}

.hadith-card .card-body {
    padding: 0;
    display: grid;
    grid-template-columns: minmax(248px, var(--hadith-sidecar-width, 304px)) 18px minmax(0, 3fr);
    align-items: start;
    max-height: var(--hadith-card-max-height);
    overflow: hidden;
}

.hadith-card .card-body > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
    display: contents;
}

.hadith-card__layout,
.hadith-card__meta,
.hadith-card__main {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hadith-card .hadith-card__main .hadith-content {
    padding: 15px !important;
    max-height: none !important;
    overflow: visible !important;
}

.hadith-card .hadith-sidecar {
    padding: 0;
    min-height: 100%;
    align-self: stretch;
    max-height: var(--hadith-card-max-height);
    grid-column: 1;
    grid-row: 1 / span 2;
}

.hadith-card .hadith-card__main {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.45rem 2.15rem 1.8rem 1.85rem !important;
    grid-column: 3;
    grid-row: 1;
    max-height: var(--hadith-card-max-height);
    overflow-y: auto;
}

.hadith-card__main {
    min-width: 0;
}

.hadith-card__resizer {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    align-self: stretch;
    width: 18px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(247, 225, 166, 0) 0 4px,
            rgba(247, 225, 166, 0.34) 4px 5px,
            rgba(247, 225, 166, 0) 5px 8px
        ) center / 10px 24px no-repeat;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    transition: background-size 150ms ease, background-position 150ms ease;
}

.hadith-card__resizer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.05rem;
    bottom: 1.05rem;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(38, 70, 113, 0.22) 0%, rgba(38, 70, 113, 0.44) 18%, rgba(38, 70, 113, 0.44) 82%, rgba(38, 70, 113, 0.22) 100%);
    box-shadow:
        0 0 0 1px rgba(247, 225, 166, 0.16),
        0 0 12px rgba(247, 225, 166, 0.12);
    transition: width 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.hadith-card__resizer::after {
    content: "۞";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(248, 243, 226, 0.98), rgba(238, 229, 201, 0.94));
    border: 1px solid rgba(38, 70, 113, 0.14);
    box-shadow:
        0 0 0 3px rgba(247, 225, 166, 0.12),
        0 8px 16px rgba(20, 42, 74, 0.08);
    color: rgba(30, 58, 95, 0.76);
    font-family: var(--font-arabic);
    font-size: 0.98rem;
    line-height: 1;
}

.hadith-card__resizer:hover::before,
.hadith-card__resizer:focus-visible::before,
body.is-resizing-sidecar .hadith-card__resizer::before {
    width: 3px;
    background: linear-gradient(180deg, rgba(38, 70, 113, 0.3) 0%, rgba(247, 225, 166, 0.82) 50%, rgba(38, 70, 113, 0.3) 100%);
    box-shadow:
        0 0 0 1px rgba(247, 225, 166, 0.2),
        0 0 16px rgba(247, 225, 166, 0.22);
}

.hadith-card__resizer:hover,
.hadith-card__resizer:focus-visible,
body.is-resizing-sidecar .hadith-card__resizer {
    background-size: 12px 30px;
}

body.is-resizing-sidecar,
body.is-resizing-sidecar * {
    cursor: col-resize !important;
    user-select: none !important;
}

.hadith-card .card-body > .row.g-4 {
    --bs-gutter-x: 1.15rem;
    --bs-gutter-y: 1.15rem;
    align-items: stretch;
}

.hadith-sidecar {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg, #22466f 0%, #183554 46%, #112844 100%);
    border: 1px solid rgba(215, 227, 243, 0.16);
    box-shadow: 0 10px 24px rgba(10, 24, 46, 0.28);
    align-self: stretch;
    overflow: hidden;
}

.hadith-sidecar__rail {
    display: flex;
    flex-direction: row;
    gap: 0.45rem;
    padding: 0.58rem 0.6rem 0.54rem;
    background: linear-gradient(180deg, rgba(12, 28, 49, 0.99), rgba(21, 43, 70, 0.98));
    border-bottom: 1px solid rgba(248, 244, 231, 0.24);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
        0 6px 16px rgba(16, 35, 63, 0.12);
    position: relative;
    overflow: hidden;
}

.hadith-sidecar__rail::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(247, 225, 166, 0.06) 50%, transparent 70%);
    animation: railShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes railShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.hadith-sidecar__rail-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    width: auto;
    padding: 0.48rem 0.38rem 0.48rem 0.62rem;
    gap: 0.2rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(242, 247, 255, 0.68);
    transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    cursor: pointer;
}

.hadith-sidecar__rail-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateY(-1px);
}

.hadith-sidecar__rail-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(247, 225, 166, 0.34);
    color: #fff;
}

.hadith-sidecar__rail-btn:disabled {
    cursor: not-allowed;
    color: rgba(233, 240, 250, 0.32);
}

.hadith-sidecar__rail-btn.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff0bf;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.hadith-sidecar__rail-btn.is-active .hadith-sidecar__rail-indicator {
    opacity: 1;
    width: 60%;
}

.hadith-sidecar__rail-indicator {
    position: absolute;
    bottom: 0.15rem;
    left: 20%;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f8e9b6 0%, #e8c96b 100%);
    box-shadow: 0 0 10px rgba(247, 225, 166, 0.36);
    opacity: 0;
    transition: opacity 200ms ease, width 250ms cubic-bezier(0.4, 0, 0.2, 1), left 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hadith-sidecar__rail-icon {
    font-size: 1.08rem;
    line-height: 1;
}

.hadith-sidecar__rail-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: inherit;
    opacity: 0.6;
}

/* Anchored beside the icon, not to the tab's corner. The tab is a column with
   the label above the icon, so a corner-pinned badge ends up diagonally
   opposite the icon it counts for - most visible in landscape, where the tabs
   are widest. Offsetting from 50% tracks the centred icon at any tab width. */
.hadith-sidecar__rail-badge {
    position: absolute;
    top: auto;
    right: auto;
    /* Top-right of the icon, the conventional place for a count. Nudged down
       a few px because the tab is a column with the label directly above the
       icon, and a badge centred on the corner would run into it. */
    left: calc(50% + 0.125rem);
    bottom: 0.9rem;
    margin-left: 0;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.18rem;
    border-radius: 999px;
    background: rgba(8, 20, 38, 0.96);
    border: 1px solid rgba(232, 241, 252, 0.28);
    color: #fff0bf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

.hadith-sidecar__rail-badge.is-zero {
    color: rgba(241, 246, 253, 0.66);
    border-color: rgba(241, 246, 253, 0.18);
}

.hadith-sidecar__rail-badge.is-loading {
    animation: badgePulse 1s ease-in-out infinite;
    min-width: 1.1rem;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hadith-sidecar__panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0.74rem 0.56rem 0.8rem 0.52rem;
    background:
        linear-gradient(180deg, rgba(42, 80, 125, 0.18), rgba(17, 38, 64, 0.22)),
        rgba(9, 22, 40, 0.22);
    box-shadow: inset 0 10px 18px rgba(248, 243, 226, 0.03);
}

.hadith-sidecar__panel-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.hadith-sidecar__panel-body--split {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

.hadith-sidecar__panel-body::-webkit-scrollbar,
.hadith-sidecar__list::-webkit-scrollbar,
.hadith-sidecar__detail::-webkit-scrollbar {
    width: 5px;
}

.hadith-sidecar__panel-body::-webkit-scrollbar-thumb,
.hadith-sidecar__list::-webkit-scrollbar-thumb,
.hadith-sidecar__detail::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.hadith-sidecar__split {
    display: grid;
    grid-template-columns: minmax(150px, 172px) minmax(0, 1fr);
    gap: 0.85rem;
    min-height: 0;
}

.hadith-sidecar__list {
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.hadith-sidecar__panel-note {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    line-height: 1.45;
}

.hadith-sidecar__accordion {
    gap: 0.55rem;
}

.hadith-sidecar__show-more {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.3rem;
    border: 1px dashed rgba(247, 225, 166, 0.35);
    border-radius: 8px;
    background: transparent;
    color: rgba(242, 247, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.hadith-sidecar__show-more:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(242, 247, 255, 0.9);
}

.hadith-sidecar__accordion-item {
    position: relative;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(247, 225, 166, 0.15);
    border-left: 3px solid var(--gold-light);
    overflow: hidden;
}

.hadith-sidecar__list-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Logical: the wide side holds the chevron, which is on the reader's trailing
       side, and the text starts where their line starts. */
    padding-block: 0.58rem;
    padding-inline: 0.72rem 1.6rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    text-align: start;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    cursor: pointer;
}

.hadith-sidecar__accordion-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.66rem;
    width: 0.46rem;
    height: 0.46rem;
    border-right: 2px solid rgba(241, 246, 253, 0.58);
    border-bottom: 2px solid rgba(241, 246, 253, 0.58);
    transform: translateY(-60%) rotate(45deg);
    transition: transform 150ms ease, border-color 150ms ease;
}

/* The second line of a related-narration row: the chapter it sits in, and on the English
   card the reason the pair was judged similar. The row is a link now rather than an
   accordion, so this is read in place instead of behind a disclosure. */
.hadith-sidecar__list-sub {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
}

.hadith-sidecar__list-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.hadith-sidecar__list-item:hover .hadith-sidecar__list-eyebrow {
    color: rgba(247, 225, 166, 0.95);
    text-shadow: 0 0 8px rgba(247, 225, 166, 0.25);
}

.hadith-sidecar__list-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(247, 225, 166, 0.18);
}

.hadith-sidecar__list-item.is-active {
    background: linear-gradient(180deg, rgba(246, 234, 190, 0.12), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 0 0 1px rgba(247, 225, 166, 0.12);
}

.hadith-sidecar__list-item.is-active::after {
    border-color: rgba(247, 225, 166, 0.9);
    transform: translateY(-40%) rotate(225deg);
}

.hadith-sidecar__accordion-body {
    padding: 0 0.62rem 0.68rem;
    border-top: 0;
}

.hadith-sidecar__accordion-meta {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.hadith-sidecar__accordion-meta-row {
    display: grid;
    gap: 0.12rem;
}

.hadith-sidecar__accordion-meta-label {
    color: rgba(247, 225, 166, 0.72);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hadith-sidecar__accordion-meta-value {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem;
    line-height: 1.42;
    font-weight: 600;
}

.hadith-sidecar__accordion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    margin-top: 0.7rem;
}

.hadith-sidecar__accordion-body--quran {
    margin-top: 0.6rem;
}

.hadith-sidecar__accordion-body--quran .quranic-verse-english {
    font-size: 0.84rem;
    line-height: 1.58;
    color: rgba(255, 255, 255, 0.88);
    font-style: italic;
}

.hadith-sidecar__accordion-body--quran .quranic-verse-arabic {
    margin-top: 0.55rem;
    font-size: 1.04rem;
    line-height: 1.76;
    color: #f6fbff;
}

.hadith-sidecar__list-eyebrow {
    color: rgba(247, 225, 166, 0.82);
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hadith-sidecar__list-line {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.hadith-sidecar__list-line .hadith-sidecar__list-eyebrow {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hadith-sidecar__list-separator {
    flex: 0 0 auto;
    color: rgba(247, 225, 166, 0.42);
    font-size: 0.72rem;
    line-height: 1;
}

.hadith-sidecar__list-text {
    flex: 0 0 auto;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.32;
    white-space: nowrap;
}

.hadith-sidecar__list-meta {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Match type badges */
.hadith-sidecar__list-meta.match-type-badge {
    font-size: 0.72rem;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    font-weight: 500;
    text-transform: capitalize;
}
.match-type--wording {
    background: rgba(255, 180, 210, 0.18);
    color: #ff7eb3;
    text-shadow: 0 0 8px rgba(255, 126, 179, 0.5);
}
.match-type--conceptual {
    background: rgba(255, 210, 180, 0.18);
    color: #ffb89a;
    text-shadow: 0 0 8px rgba(255, 184, 154, 0.5);
}
.match-type--thematic {
    background: rgba(255, 224, 61, 0.15);
    color: #ffe03d;
}

/* Similar match reason in accordion */
.hadith-sidecar__accordion-body--similar {
    padding: 0.4rem 0.75rem 0.6rem;
}
.similar-reason-text {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}

.similar-reason-label {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.hadith-sidecar .hadith-details,
.hadith-sidecar .hadith-details * {
    color: rgba(255, 255, 255, 0.85);
}

.hadith-sidecar .hadith-details {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hadith-sidecar .meta-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.78rem;
    padding: 0.62rem 0;
}

.hadith-sidecar .meta-item + .meta-item::before {
    content: none;
}

.hadith-sidecar .meta-item > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
}

.hadith-sidecar .meta-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: var(--gold-light);
}

.hadith-sidecar .meta-label {
    color: rgba(243, 229, 184, 0.88);
    font-family: var(--font-ui);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.16rem;
}

.hadith-sidecar .meta-text,
.hadith-sidecar .meta-value {
    color: rgba(255, 255, 255, 0.93);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    line-height: 1.42;
    letter-spacing: -0.006em;
    font-weight: 600;
}

.hadith-sidecar .meta-text.link,
.hadith-sidecar .meta-value a,
.hadith-sidecar .meta-text a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

.hadith-sidecar .meta-text.link:hover,
.hadith-sidecar .meta-value a:hover,
.hadith-sidecar .meta-text a:hover {
    color: var(--gold-light);
    text-decoration: underline;
}

/* ── Metadata sublist (similar/quranic inline list) ──────────────────────── */
.meta-sublist {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 180px;
    overflow-y: auto;
}
.meta-sublist::-webkit-scrollbar {
    width: 3px;
}
.meta-sublist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
.meta-sublist__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    text-align: left;
    cursor: pointer;
    transition: all 120ms ease;
}
.meta-sublist__item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.meta-sublist__item.is-active {
    background: rgba(247, 225, 166, 0.1);
    color: var(--gold-light);
    font-weight: 600;
}
.meta-sublist__score {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
    margin-left: 0.4rem;
}
.meta-sublist__item.is-active .meta-sublist__score {
    color: rgba(247, 225, 166, 0.6);
}

.reading-number-banner {
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid #d0d4da;
    border-radius: 6px;
    background: #fff;
}

.reading-number-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.reading-number-value {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 700;
}

.hadith-header-actions {
    gap: 0.45rem;
}

.icon-action {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.icon-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-cool);
    box-shadow: var(--shadow-sm);
}

.hadith-content {
    padding: 2.5rem;
    min-height: var(--hadith-content-min-height);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(255, 255, 255, 0.92));
    border-color: rgba(16, 35, 63, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 1rem;
}

.hadith-card--metadata .hadith-content {
    min-height: 0;
}

.hadith-content .row.g-4 {
    --bs-gutter-x: 1.35rem;
}

.hadith-reading-row {
    --bs-gutter-y: 1rem;
    align-items: flex-start;
}

.hadith-content .row.g-4 > .col-12.col-lg-6:first-child {
    padding-right: 1.45rem;
}

.hadith-content .row.g-4 > .col-12.col-lg-6:last-child {
    padding-left: 1.45rem;
    border-left: 1px solid rgba(16, 35, 63, 0.08);
}

.hadith-pane-head {
    display: flex;
    align-items: center;
    margin-bottom: 0.9rem;
}

.hadith-pane-head--arabic {
    justify-content: flex-end;
}

.hadith-pane-label {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.36rem 0.72rem;
    border-radius: 999px;
    background: rgba(30, 58, 95, 0.08);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hadith-text-block--primary {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* No inner scroll on the narration: a scroll region inside the page scroll
   traps the wheel and makes the page feel like it sticks. Long narrations are
   clamped with an explicit control instead, so results stay scannable without
   forcing the reader to scroll a whole hadith to reach the next one. */
.hadith-reading-scroll {
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0.35rem;
    margin-top: -15px;
}

.hadith-reading-scroll--clamped {
    max-height: 20rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}

.hadith-reading-scroll::-webkit-scrollbar,
.hadith-inline-context__scroll::-webkit-scrollbar,
.hadith-inline-context__snippets::-webkit-scrollbar {
    width: 5px;
}

.hadith-reading-scroll::-webkit-scrollbar-thumb,
.hadith-inline-context__scroll::-webkit-scrollbar-thumb,
.hadith-inline-context__snippets::-webkit-scrollbar-thumb {
    background: rgba(26, 58, 107, 0.22);
    border-radius: 999px;
}

.hadith-chain {
    margin-bottom: 0.95rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(16, 35, 63, 0.07);
    font-size: 0.84rem;
    line-height: 1.56;
    color: var(--text-secondary) !important;
}

.hadith-english {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.68;
    color: #233247;
}

.hadith-arabic,
.arabic-text {
    font-size: 1.45rem;
    line-height: 1.5;
    color: #162841;
}

.hadith-text-block--arabic .hadith-arabic {
    font-size: 1.48rem;
    line-height: 1.74;
}

.hadith-text-block--arabic .hadith-chain--arabic.arabic-text {
    font-size: 1.1rem !important;
    line-height: 1.72 !important;
}

/* This panel replaces the reader's view when they pick a related hadith or a
   tafsir source, so it has to announce itself. It was #f5f8fd against a card
   that is already near-white, which made the switch easy to miss. Give it a
   warm parchment surface with a gold rule. Blue is no use here - the nav,
   sidecar, tag pills and card accents are all navy already - so warm is the
   only direction that actually separates it, and it suits the manuscript
   identity. Teal for apparatus on this hadith, parchment for other corpora. */
.hadith-inline-context {
    margin-top: 0.55rem;
    padding: 0.95rem 0.98rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(199, 154, 59, 0.42);
    border-left: 3px solid var(--gold);
    box-shadow: 0 3px 12px rgba(120, 90, 30, 0.12);
}

.hadith-inline-context--similar {
    background: linear-gradient(180deg, #fbf1dc, #fdf8ec);
}

.hadith-inline-context--quran {
    background: linear-gradient(180deg, #fbf1dc, #fdf8ec);
}

.hadith-inline-context__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.hadith-inline-context__head-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hadith-inline-context__eyebrow {
    color: #1e3a5f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.18rem;
}

.hadith-inline-context__title {
    color: #193150;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.hadith-inline-context__status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    background: rgba(25, 49, 80, 0.08);
    color: #193150;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.hadith-inline-context__row {
    --bs-gutter-y: 0.75rem;
    align-items: stretch;
}

.hadith-inline-context__scroll {
    max-height: var(--hadith-inline-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.3rem;
}

.hadith-inline-context__panel {
    height: 100%;
    border-radius: 16px;
    border: 1px solid rgba(16, 35, 63, 0.1);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 20px rgba(16, 35, 63, 0.05);
    overflow: hidden;
}

.hadith-inline-context__panel--similar {
    border-top: 3px solid rgba(213, 170, 77, 0.95);
}

.hadith-inline-context__panel--quran {
    border-top: 3px solid rgba(213, 170, 77, 0.95);
}

.hadith-inline-context__body {
    padding: 0.88rem 0.92rem;
}

.hadith-inline-context__body--arabic {
    text-align: right;
}

.hadith-inline-context__body .hadith-chain {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid rgba(16, 35, 63, 0.07);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.hadith-inline-context__snippets {
    margin-top: 0;
    max-height: var(--hadith-inline-snippet-max-height);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.hadith-inline-context__body .similar-full-english {
    font-size: 0.95rem;
    line-height: 1.68;
    color: #26364c;
}

.hadith-inline-context__body .similar-full-arabic {
    font-size: 1.34rem;
    line-height: 1.8;
}

.hadith-inline-context__meta-band {
    margin-bottom: 0.9rem;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(16, 35, 63, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 248, 255, 0.94)),
        rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 8px 16px rgba(16, 35, 63, 0.04);
}

.hadith-inline-context__meta-band--compact {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.hadith-inline-context__title-block {
    min-width: 0;
}

.hadith-inline-context__title-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #193150;
    font-family: var(--font-reference);
    font-size: 1.08rem;
    line-height: 1.24;
    letter-spacing: -0.012em;
    font-weight: 600;
    text-align: left;
}

.hadith-inline-context__title-link:hover {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
}

.hadith-inline-context__meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem;
    margin-top: 0.3rem;
    color: #51627a;
    font-size: 0.82rem;
    line-height: 1.52;
}

.hadith-inline-context__meta-inline-link,
.hadith-inline-context__meta-inline-text {
    font-family: var(--font-ui);
    font-size: inherit;
    line-height: inherit;
}

.hadith-inline-context__meta-inline-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #2a4d7a;
    font-weight: 600;
}

.hadith-inline-context__meta-inline-link:hover {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

.hadith-inline-context__meta-inline-text {
    color: #51627a;
    font-weight: 600;
}

.hadith-inline-context__meta-separator {
    color: rgba(25, 49, 80, 0.3);
    font-size: 0.78rem;
    padding: 0 0.08rem;
}

.hadith-inline-context__meta-band--quran {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 248, 255, 0.94)),
        rgba(255, 255, 255, 0.9);
}

.hadith-inline-context__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
}

.hadith-inline-context__meta-card {
    min-width: 0;
    padding: 0.72rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(16, 35, 63, 0.07);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.hadith-inline-context__meta-label {
    margin-bottom: 0.24rem;
    color: rgba(30, 58, 95, 0.72);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hadith-inline-context__meta-value,
.hadith-inline-context__meta-link {
    color: #193150;
    font-size: 0.9rem;
    line-height: 1.52;
    font-weight: 600;
}

.hadith-inline-context__meta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.hadith-inline-context__meta-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.hadith-inline-context__meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.8rem;
}

.hadith-inline-context .similar-location-link {
    color: var(--primary);
}

.hadith-inline-context .similar-location-link:hover {
    color: var(--primary-light);
}

.hadith-inline-context .similar-location-sep {
    color: rgba(16, 35, 63, 0.34);
}

.hadith-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(16, 35, 63, 0.08);
}

.hadith-card__tags {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    overflow: visible;
}

.hadith-card__actions {
    margin-inline-start: auto;
    justify-content: flex-end;
}

.hadith-sidecar__source-tree {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    margin-top: 0.8rem;
    padding: 0.15rem 0 0.1rem;
}

.hadith-sidecar__source-tree-label {
    color: rgba(247, 225, 166, 0.82);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.08rem;
}

.hadith-sidecar__source-tree-children {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.34rem;
    margin-left: 0.35rem;
    padding-left: 1.15rem;
}

.hadith-sidecar__source-tree-children::before {
    display: none;
}

.hadith-sidecar__source-node:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold-light);
    transform: translateY(-1px);
}

.hadith-sidecar__source-node:hover .hadith-sidecar__source-name {
    color: rgba(247, 225, 166, 0.92);
    text-shadow: 0 0 8px rgba(247, 225, 166, 0.22);
}

.hadith-sidecar__source-node.is-active {
    background: linear-gradient(180deg, rgba(247, 225, 166, 0.14), rgba(255, 255, 255, 0.06));
    border-color: var(--gold-light);
    box-shadow: inset 0 0 0 1px rgba(247, 225, 166, 0.14);
}

.hadith-sidecar__source-branch {
    display: none;
}

.hadith-sidecar__source-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 0;
    padding: 0.46rem 0.56rem 0.46rem 0.72rem;
    border: 1px solid rgba(247, 225, 166, 0.15);
    border-left: 3px solid var(--gold-light);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.84);
    text-align: left;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.hadith-sidecar__source-node::before {
    content: "›";
    position: static;
    color: rgba(247, 225, 166, 0.5);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.hadith-sidecar__source-node-icon {
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(247, 225, 166, 0.84);
    font-size: 0.74rem;
    line-height: 1;
}

.hadith-sidecar__source-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
}

.hadith-sidecar__source-name--link {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px dotted rgba(247, 225, 166, 0.4);
    transition: border-color 0.15s;
}
.hadith-sidecar__source-name--link:hover {
    border-bottom-style: solid;
    border-color: rgba(247, 225, 166, 0.9);
}

.quranic-verse-link {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 0.3rem;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}
.quranic-verse-link:hover {
    opacity: 1;
    color: var(--gold);
}

.hadith-sidecar__source-count {
    display: none;
}

.hadith-inline-context__meta-band--quran .hadith-inline-context__meta-inline-text {
    color: #193150;
}

.similar-sidecar {
    margin-top: 0.4rem;
    padding-top: 0.95rem;
    border-top-color: rgba(16, 35, 63, 0.08);
}

.similar-sidecar__title {
    color: var(--text-muted);
}

.similar-tab-btn,
.similar-inline-panel,
.similar-full-card {
    border-radius: 18px;
}

.similar-inline-panel {
    background: linear-gradient(180deg, rgba(244, 247, 252, 0.82), rgba(255, 255, 255, 0.92));
}

.topic-tag-pills {
    margin-top: 0;
    justify-content: flex-start;
    padding: 0;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
}

.site-footer {
    margin-top: 4.8rem;
    background:
        radial-gradient(circle at top left, rgba(30, 58, 95, 0.18), transparent 26%),
        linear-gradient(180deg, #1a3a6b 0%, #0b1728 100%);
}

/* ========================================================================
   ISLAMIC ORNAMENT PASS
   Keep existing palette; add only subtle patterning and dividers
   ======================================================================== */
.home-hero__card {
    position: relative;
    overflow: hidden;
}

.home-hero__card::before {
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.06), transparent 38%),
        url('/img/home-hero-calligraphy.svg') right center / cover no-repeat;
    opacity: 0.88;
    animation: none;
}

.home-browse,
.home-updates,
.home-card {
    position: relative;
    overflow: hidden;
}

.home-browse::after,
.home-updates::after,
.home-card::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(247, 225, 166, 0.14);
    opacity: 0.9;
    pointer-events: none;
    box-shadow:
        0 0 0 10px rgba(247, 225, 166, 0.05),
        0 0 0 20px rgba(247, 225, 166, 0.025);
}

.home-section-title::after {
    content: "۞";
    display: inline-block;
    margin-inline-start: 0.45rem;
    color: rgba(247, 225, 166, 0.9);
    font-size: 0.66em;
    vertical-align: middle;
}

.hadith-entry {
    position: relative;
}

.vstack.gap-3 {
    gap: 0 !important;
}

.hadith-card {
    position: relative;
}

.hadith-card::before {
    content: none;
}

.hadith-card__result-num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1a3a6b;
    background: #f0f2f5;
    border: 1px solid #d0d5dd;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
}

/* Final control overrides: keep these last so they win over older theme layers */
.search-controls {
    right: 0.65rem;
    gap: 0.38rem;
}

.navbar-search .ts-control,
.home-search .ts-control {
    padding-right: 154px !important;
}

.search-mode-toggle {
    min-height: 36px !important;
    padding: 0.42rem 0.7rem !important;
    border: 1px solid var(--gold) !important;
    background: var(--gold) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(200, 162, 61, 0.32) !important;
}

.search-mode-toggle:hover,
.search-mode-toggle:focus,
.search-mode-toggle.active {
    border-color: var(--gold-dark) !important;
    background: var(--gold-dark) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(200, 162, 61, 0.36) !important;
}

.search-mode-toggle .fa-chevron-down,
.search-mode-toggle .search-mode-text {
    color: inherit !important;
}

.search-mode-dropdown-menu {
    border: 1px solid rgba(200, 162, 61, 0.45) !important;
    background: linear-gradient(180deg, #fff7e4 0%, #f5e2b4 100%) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2) !important;
}

.search-mode-option:hover,
.search-mode-option.active {
    background: rgba(200, 162, 61, 0.2) !important;
}

.search-btn-with-border {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    border: 2px solid var(--gold) !important;
    background: rgba(8, 17, 29, 0.56) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(200, 162, 61, 0.08) !important;
}

.search-btn-with-border:hover,
.search-btn-with-border:focus {
    border-color: var(--gold-dark) !important;
    background: rgba(8, 17, 29, 0.72) !important;
    color: #fff !important;
}

.hadith-card__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}

.hadith-card__ornament-line {
    flex: 1 1 120px;
    max-width: 220px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #1a3a6b 50%, transparent 100%);
}

.hadith-card__ornament-mark {
    font-family: var(--font-arabic);
    font-size: 1.15rem;
    line-height: 1;
    color: #1a3a6b;
}

.hadith-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.35rem 0 1.55rem;
}

.hadith-divider__line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(243, 229, 184, 0.48) 100%);
}

.hadith-divider__line:last-child {
    background: linear-gradient(90deg, rgba(243, 229, 184, 0.48) 0%, transparent 100%);
}

.hadith-divider__motif {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    height: 2.8rem;
    font-family: var(--font-arabic);
    font-size: 1.2rem;
    color: rgba(243, 229, 184, 0.96);
    margin: 0 0.3rem;
    z-index: 0;
}

.hadith-divider__motif::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #1a3a6b;
    box-shadow: inset 0 0 0 1px rgba(243, 229, 184, 0.18);
    z-index: -2;
}

.hadith-divider__motif::after {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: 50%;
    border: 1.5px solid rgba(243, 229, 184, 0.72);
    background: rgba(243, 229, 184, 0.08);
    z-index: -1;
}

/* Ornamental side brackets */
.hadith-divider__line:first-child,
.hadith-divider__line:last-child {
    position: relative;
}

.hadith-divider__line:first-child::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 18px;
    border-right: 1.5px solid rgba(243, 229, 184, 0.52);
    border-top: 1.5px solid rgba(243, 229, 184, 0.52);
    border-bottom: 1.5px solid rgba(243, 229, 184, 0.52);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.hadith-divider__line:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 18px;
    border-left: 1.5px solid rgba(243, 229, 184, 0.52);
    border-top: 1.5px solid rgba(243, 229, 184, 0.52);
    border-bottom: 1.5px solid rgba(243, 229, 184, 0.52);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.hadith-content {
    position: relative;
}

.hadith-content::after {
    display: none;
}

@media (max-width: 1200px) {
    .home-hero__layout {
        grid-template-columns: 1fr;
    }

    .home-hero__content {
        max-width: 820px;
        margin: 0 auto;
        align-items: center;
        text-align: center;
    }

    .home-hero__title {
        max-width: none;
    }

    .home-hero__signals,
    .home-hero__search {
        justify-content: center;
    }

    .home-hero__note {
        text-align: center;
    }

    .home-hero__visual-panel {
        width: min(100%, 560px);
        min-height: 320px;
    }

    .hadith-card .card-body {
        grid-template-columns: minmax(240px, var(--hadith-sidecar-width, 296px)) 18px minmax(0, 2.8fr);
    }
}

@media (max-width: 900px) {
    .home-hero__visual-panel {
        min-height: 300px;
    }

    .hadith-card .card-body {
        grid-template-columns: minmax(236px, var(--hadith-sidecar-width, 282px)) 16px minmax(0, 2.6fr);
    }
}

@media (max-width: 768px) {
    .pagination__number { display: none !important; }
    .pagination__first { display: none !important; }
    .pagination__last { display: none !important; }
    .pagination__mobile-label { display: block !important; }
    .pagination__mobile-label .page-link {
        border: none;
        background: transparent;
        color: var(--text);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.35rem 0.6rem;
        cursor: default;
    }

    .hadith-card {
        --hadith-content-min-height: auto;
        --hadith-inline-max-height: min(28dvh, 18rem);
        --hadith-inline-snippet-max-height: min(31dvh, 18rem);
    }

    .home-hero__card {
        padding: 1.2rem;
        border-radius: 24px;
    }

    .home-hero__content {
        max-width: none;
    }

    .home-hero__title {
        font-size: 2.2rem;
    }

    .home-search .ts-control {
        min-height: 54px;
        padding-right: 12px;
    }

    .home-hero__search .navbar-search,
    .home-search {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero__search .search-inline-btn {
        width: 100%;
    }

    .home-hero__visual-panel {
        min-height: 260px;
        padding: 1rem;
    }

    .home-hero__visual-mark {
        width: min(100%, 250px);
        padding: 1rem 0.95rem;
        gap: 0.35rem;
    }

    .home-hero__visual-mark-title {
        font-size: 1.4rem;
    }

    .home-hero__visual-mark-subtitle {
        font-size: 0.62rem;
        letter-spacing: 0.13em;
    }

    .hadith-card .card-body {
        padding: 1rem;
    }

    .hadith-card__result-num {
        top: 0;
        right: 0.75rem;
        left: auto;
        transform: translate(0, -50%);
    }

    .hadith-sidecar,
    .hadith-content {
        border-radius: 18px;
    }

    .hadith-card .card-body {
        padding: 0;
        display: block;
    }

    .hadith-card__resizer {
        display: none;
    }

    .hadith-card .card-body {
        max-height: none;
        overflow: visible;
    }

    .hadith-card .hadith-card__main {
        max-height: none;
        overflow: visible;
    }

    .hadith-card .card-body > .row {
        display: block;
        margin: 0;
    }

    .hadith-card .hadith-sidecar {
        border-radius: 18px 18px 0 0;
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        max-height: none;
    }

    /* On mobile, hide main hadith text when similar/quran tab is active.
       The notes go with it: they annotate the narration, so leaving them
       behind shows a gloss for text that is no longer on screen. */
    .hadith-content.sidecar-active--similar .hadith-reading-scroll,
    .hadith-content.sidecar-active--quran .hadith-reading-scroll,
    .hadith-content.sidecar-active--similar .hadith-notes,
    .hadith-content.sidecar-active--quran .hadith-notes {
        display: none;
    }
    .hadith-content.sidecar-active--similar .hadith-card__ornament,
    .hadith-content.sidecar-active--quran .hadith-card__ornament {
        display: none;
    }

    .hadith-content.sidecar-active--similar .hadith-inline-context,
    .hadith-content.sidecar-active--quran .hadith-inline-context {
        max-height: min(60dvh, 24rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hadith-content.sidecar-active--similar .hadith-inline-context__scroll,
    .hadith-content.sidecar-active--quran .hadith-inline-context__scroll {
        max-height: none;
        overflow: visible;
    }

    .hadith-content.sidecar-active--similar .hadith-inline-context__snippets,
    .hadith-content.sidecar-active--quran .hadith-inline-context__snippets {
        max-height: none;
        overflow: visible;
    }

    .hadith-sidecar__rail {
        flex-direction: row;
        gap: 0.55rem;
        padding: 0.72rem 0.75rem;
        border-right: 0;
        border-bottom: 1px solid rgba(236, 243, 252, 0.24);
        overflow-x: auto;
    }

    .hadith-sidecar__rail-btn {
        min-width: 72px;
        flex: 1 1 0;
        padding: 0.55rem 0.42rem 0.45rem 0.62rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .hadith-sidecar__rail-indicator {
        top: 50%;
        left: 0.08rem;
        bottom: auto;
        width: 3px;
        height: 34px;
        transform: translateY(-50%);
        box-shadow: none;
    }

    .hadith-sidecar__rail-btn.is-active .hadith-sidecar__rail-indicator {
        opacity: 1;
        width: 3px;
        height: 34px;
    }

    .hadith-sidecar__rail-btn.is-active {
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
        box-shadow: none;
    }

    .hadith-sidecar__rail-label {
        display: block;
        color: inherit;
        font-size: 0.67rem;
        font-weight: 700;
        line-height: 1;
    }

    .hadith-sidecar__panel {
        padding: 0.82rem 0.82rem 0.92rem;
    }

    .hadith-sidecar .hadith-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.45rem 0.85rem;
    }

    .hadith-card .hadith-card__main {
        padding: 1.2rem 0.4rem 0.6rem !important;
    }

    .hadith-content {
        padding: 1rem !important;
    }

    .hadith-card .hadith-card__main .hadith-content {
        padding: 1rem !important;
    }

    .hadith-sidecar .meta-item {
        width: 100%;
        min-width: 0;
        align-items: center;
        gap: 0.55rem;
        padding: 0.28rem 0;
    }

    .hadith-sidecar .meta-item + .meta-item::before {
        content: none;
    }

    .hadith-sidecar .meta-item > div:last-child {
        min-width: 0;
    }

    .hadith-sidecar .meta-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .hadith-sidecar .meta-label {
        font-size: 0.56rem;
    }

    .hadith-sidecar .meta-text,
    .hadith-sidecar .meta-value {
        font-size: 0.96rem;
        line-height: 1.36;
    }

    .meta-sublist {
        margin-top: 0.25rem;
        padding-top: 0;
    }

    .topic-tag-pills {
        padding: 0;
        justify-content: flex-start;
    }

    .hadith-card__footer {
        align-items: flex-start;
    }

    .hadith-card__tags,
    .hadith-card__actions {
        width: 100%;
    }

    /* No max-height here: the pane no longer scrolls, so a cap would let the
       narration spill out of the card and render over the tags. Long
       narrations are bounded by the --clamped modifier instead. */
    .hadith-reading-scroll {
        padding-right: 0.2rem;
    }

    .hadith-english {
        font-size: 0.95rem;
        line-height: 1.62;
    }

    .hadith-text-block--arabic .hadith-arabic {
        font-size: 1.38rem;
        line-height: 1.66;
    }

    .hadith-text-block--arabic .hadith-chain--arabic.arabic-text {
        font-size: 1rem !important;
        line-height: 1.62 !important;
    }

    .hadith-inline-context {
        padding: 0.78rem 0.82rem 0.84rem;
    }

    .hadith-inline-context__scroll {
        max-height: min(26dvh, 16rem);
    }

    .hadith-inline-context__snippets {
        max-height: min(28dvh, 17rem);
    }

    .hadith-inline-context__body .similar-full-english,
    .quranic-snippet__text {
        font-size: 0.89rem;
        line-height: 1.62;
    }

    .hadith-inline-context__body .similar-full-arabic {
        font-size: 1.24rem;
        line-height: 1.72;
    }

    .hadith-divider {
        gap: 0.5rem;
        margin: 1rem 0 1.15rem;
    }

    .hadith-divider__motif {
        min-width: 2rem;
        height: 2rem;
        font-size: 1.05rem;
    }

    .hadith-inline-context__meta-grid {
        grid-template-columns: 1fr;
    }

    .hadith-content .row.g-4 > .col-12.col-lg-6:first-child {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }

    .hadith-content .row.g-4 > .col-12.col-lg-6:last-child {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        border-left: 0;
        border-top: 1px solid rgba(16, 35, 63, 0.08);
        padding-top: 1rem;
    }
}

/* ========================================================================
   HOME HERO REFRESH
   ======================================================================== */
.home-hero {
    padding: 0.75rem 0 1.6rem;
}

.home-hero__card {
    padding: clamp(1.2rem, 2.2vw, 2rem);
    border-radius: 34px;
    border: 1px solid rgba(243, 229, 184, 0.16);
    background:
        radial-gradient(circle at 14% 16%, rgba(111, 164, 255, 0.24), transparent 20%),
        radial-gradient(circle at 84% 14%, rgba(250, 231, 164, 0.18), transparent 22%),
        radial-gradient(ellipse at 50% 7%, rgba(255, 245, 203, 0.14), transparent 30%),
        radial-gradient(circle at 20% 84%, rgba(47, 94, 173, 0.18), transparent 24%),
        radial-gradient(circle at 80% 82%, rgba(47, 94, 173, 0.16), transparent 22%),
        radial-gradient(circle at 50% 116%, rgba(7, 20, 41, 0.72), transparent 34%),
        linear-gradient(145deg, #08162b 0%, #0d2142 44%, #133467 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 207, 0.08),
        inset 0 24px 44px rgba(255, 243, 198, 0.03),
        inset 0 -18px 42px rgba(4, 10, 20, 0.18),
        0 28px 78px rgba(6, 13, 25, 0.3);
}

.home-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 3%, rgba(255, 247, 215, 0.18), transparent 22%),
        radial-gradient(circle at 12% 82%, rgba(243, 219, 117, 0.12), transparent 18%),
        radial-gradient(circle at 88% 78%, rgba(243, 219, 117, 0.12), transparent 19%),
        url('/img/hero-pattern-5ce0b2d233b70e13381a1a6280107f95.svg') left -36px top 26px / 240px 240px no-repeat,
        url('/img/hero-pattern-5ce0b2d233b70e13381a1a6280107f95.svg') right -36px top 26px / 240px 240px no-repeat,
        url('/img/hero-pattern-5ce0b2d233b70e13381a1a6280107f95.svg') center top / 320px 320px repeat;
    opacity: 0.46;
}

.home-hero__card::after {
    content: none;
}

.home-hero__layout {
    display: block;
    position: relative;
    z-index: 1;
}

.home-hero__content,
.home-hero__content--stacked {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-hero__presents {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #ffffff1a;
    display: inline-block;
}
.home-hero__presents a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.home-hero__presents a:hover {
    color: #fff;
}

.home-hero__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: -0.12rem;
}

.home-hero__brand::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(52vw, 380px);
    height: min(52vw, 380px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 240, 176, 0.28) 0%, rgba(255, 240, 176, 0.12) 22%, rgba(255, 240, 176, 0.03) 48%, transparent 72%);
    filter: blur(10px);
    opacity: 0.62;
    pointer-events: none;
}

.home-hero__brand::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(46vw, 320px);
    height: min(46vw, 320px);
    transform: translate(-50%, -50%);
    background: url('/img/hero-pattern-5ce0b2d233b70e13381a1a6280107f95.svg') center / contain no-repeat;
    opacity: 0.16;
    pointer-events: none;
}

/* The card was ~807px tall at 1280x720 - taller than the viewport it opens in, so
   nothing below the fold was ever visible on a laptop without scrolling. The logo was
   most of that on its own; the glow and pattern behind it are sized off it and come
   down proportionally, or a smaller mark sits inside a halo built for a bigger one. */
.home-hero__logo {
    width: clamp(200px, 24vw, 320px);
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: -0.18rem;
    filter: drop-shadow(0 14px 28px rgba(4, 10, 20, 0.24));
    position: relative;
    z-index: 1;
}

.home-hero__brand-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.home-hero__arabic-mark {
    display: block;
    width: clamp(360px, 42vw, 560px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 22px rgba(8, 16, 30, 0.16));
}

.home-hero__english-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: min(100%, 520px);
    color: #f5df9d;
}

.home-hero__english-rule {
    flex: 1 1 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 223, 157, 0.78) 100%);
}

.home-hero__english-rule:last-child {
    background: linear-gradient(90deg, rgba(245, 223, 157, 0.78) 0%, transparent 100%);
}

.home-hero__english-mark {
    font-size: 0.84rem;
    color: #e0b54c;
}

.home-hero__english-copy {
    font-family: var(--font-reference);
    font-size: clamp(1.15rem, 2vw, 1.8rem);
    font-weight: 600;
    line-height: 1.15;
    color: #fff4d2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.home-hero__search {
    width: min(100%, 900px);
    margin: 0 auto;
}

.home-hero__search-note {
    width: min(100%, 760px);
    margin: 0 0 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    line-height: 1.38;
    color: rgba(245, 236, 214, 0.84);
    text-align: center;
}

.home-hero__search-note span {
    color: #fff2c2;
    color: #f6df88;
    font-weight: 700;
}

.home-search .navbar-search__input .search-input-icon {
    color: #0d2142;
}

.home-search {
    width: 100%;
    max-width: none;
}

.home-search .navbar-search__input {
    position: relative;
}

.navbar-search__input .search-input-icon {
    position: absolute;
    left: 1.45rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(247, 225, 166, 0.88);
    opacity: 1;
    pointer-events: none;
    font-size: 1.12rem;
}

.site-nav .navbar-search__input .search-input-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(247, 225, 166, 0.14);
    border: 1px solid rgba(247, 225, 166, 0.28);
    color: #f7e1a6;
}

.navbar-search .ts-control,
.home-search .ts-control {
    padding-left: 1.36rem !important;
    padding-right: 212px !important;
}

.navbar-search .ts-control,
.home-search .ts-control {
    padding-right: 212px !important;
}

.home-search .ts-control {
    min-height: 60px;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1.5px solid rgba(243, 220, 118, 0.88) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(8, 17, 29, 0.18) !important;
    backdrop-filter: none !important;
}

.home-search .ts-control:focus-within {
    background: #fff !important;
    border-color: rgba(243, 220, 118, 0.98) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.home-search .ts-control input {
    color: #173964 !important;
}

.home-search .ts-control input::placeholder {
    color: #7d8493 !important;
}


.search-controls {
    right: 0.8rem;
    gap: 0.35rem;
    align-items: center;
}

.search-mode-toggle {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0.28rem 0.46rem 0.28rem 0.52rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(187, 195, 206, 0.92) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #0d2142 !important;
    box-shadow: 0 8px 18px rgba(8, 17, 29, 0.12) !important;
    justify-content: space-between;
    width: 112px;
}

.search-mode-toggle:hover,
.search-mode-toggle:focus,
.search-mode-toggle.active {
    border-color: rgba(162, 171, 183, 0.98) !important;
    background: #ffffff !important;
    color: #0d2142 !important;
}

.search-mode-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.12rem;
    min-width: 0;
}

.search-mode-row {
    display: block;
    width: 100%;
    font-size: 0.52rem;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 800;
    text-transform: uppercase;
    color: #7f8894;
    transition: color 140ms ease;
}

.search-mode-row.is-active {
    color: #d0ab31;
}

.search-mode-toggle .search-mode-text {
    min-width: 0;
}

.search-mode-toggle .fa-chevron-down {
    font-size: 0.62rem;
    color: #7b8794;
}

.search-mode-dropdown-menu {
    border: 1px solid rgba(243, 220, 118, 0.34) !important;
    background: linear-gradient(180deg, #fffdf5 0%, #f9f0c7 100%) !important;
}

.search-btn-with-border {
    width: auto !important;
    height: 44px !important;
    min-width: 102px !important;
    padding: 0 1.15rem !important;
    flex: 0 0 auto !important;
    border: 1px solid #bcc4cf !important;
    border-radius: 14px !important;
    background: #f3dc76 !important;
    color: #0d2142 !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(214, 192, 92, 0.24) !important;
    margin-right: 5px !important;
}

.search-btn-with-border:hover,
.search-btn-with-border:focus {
    border-color: #e9cc60 !important;
    background: #efd468 !important;
    color: #0d2142 !important;
}

.home-hero__refine.is-hidden {
    display: none;
}

.home-hero__refine-toggle-row {
    width: min(100%, 900px);
    margin: 0.85rem auto 0;
    display: flex;
    justify-content: center;
}

.home-hero__refine-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 42px;
    padding: 0.58rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 220, 118, 0.82);
    background: rgba(10, 24, 48, 0.78);
    color: #f6e19a;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(6, 13, 25, 0.18);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.home-hero__refine-toggle span {
    display: inline-flex;
    align-items: center;
}

.home-hero__refine-caret {
    font-size: 0.74rem;
    transition: transform 180ms ease;
}

.home-hero__refine-toggle:hover,
.home-hero__refine-toggle:focus,
.home-hero__refine-toggle.is-open {
    background: rgba(13, 31, 60, 0.94);
    border-color: #f6e19a;
    color: #fff3c8;
    transform: translateY(-1px);
}

.home-hero__refine-toggle.is-open .home-hero__refine-caret,
.home-hero__refine-toggle[aria-expanded="true"] .home-hero__refine-caret {
    transform: rotate(180deg);
}

.home-hero__refine {
    width: min(100%, 900px);
    margin: 1rem auto 0;
}

.browse-panel--hero {
    display: grid;
    gap: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.browse-panel--hero .browse-panel__advanced {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
}

.browse-field--hero {
    max-width: none;
    margin: 0;
}

.home-hero .browse-field label {
    display: block;
    margin: 0 0 0.42rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 246, 223, 0.9);
    text-align: center;
}

.home-hero .browse-field .form-select,
.home-hero .browse-field select {
    min-height: 48px;
    padding-right: 2.2rem;
    border-radius: 14px;
    background: rgba(11, 26, 48, 0.78);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f6e19a' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 11px;
    border: 1px solid rgba(243, 229, 184, 0.28);
    color: #f7f0dd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(5, 12, 24, 0.16);
}

.home-hero .browse-field .form-select:focus,
.home-hero .browse-field select:focus {
    background: rgba(11, 26, 48, 0.9);
    border-color: rgba(214, 169, 72, 0.72);
    box-shadow: 0 0 0 3px rgba(214, 169, 72, 0.12);
    color: #fff7e8;
}

.home-hero .browse-field .form-select:disabled,
.home-hero .browse-field select:disabled {
    opacity: 1;
    background: rgba(11, 26, 48, 0.78);
    color: #f7f0dd;
    cursor: default;
}

.browse-panel--hero .browse-action {
    grid-column: 2 / span 3;
    justify-self: center;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: #0d2142;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(214, 169, 72, 0.22);
    width: 100%;
}

.browse-panel--hero .browse-action:hover:not(:disabled),
.browse-panel--hero .browse-action:focus:not(:disabled) {
    border-color: var(--gold-dark);
    background: var(--gold-dark);
    color: #0d2142;
}

.browse-panel--hero .browse-action i {
    margin-right: 0.5rem;
}

.browse-meta--hero {
    margin-top: 0.7rem;
    color: rgba(238, 243, 251, 0.68) !important;
    text-align: center;
    font-size: 0.86rem;
}

.home-browse {
    padding-top: 1.6rem;
}

.hadith-card__result-num {
    top: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    padding: 0.24rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

@media (max-width: 960px) {
    .browse-panel--hero .browse-panel__advanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .browse-panel--hero .browse-action {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .home-hero,
    .home-browse,
    .home-updates,
    .home-collections,
    .home-notice {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .home-hero__card {
        padding: 1.25rem;
        border-radius: 26px;
    }

    .home-hero__card::after {
        inset: 12px;
        border-radius: 20px;
    }

    .home-hero__brand {
        margin-bottom: -0.08rem;
    }

    .home-hero__brand::before {
        width: min(88vw, 420px);
        height: min(88vw, 420px);
    }

    .home-hero__brand::after {
        width: min(82vw, 340px);
        height: min(82vw, 340px);
        opacity: 0.12;
    }

    .home-hero__logo {
        width: min(84vw, 390px);
        margin-bottom: -0.12rem;
    }

    .home-hero__search-note {
        font-size: 0.8rem;
        margin-bottom: 0.34rem;
    }

    .home-hero__arabic-mark {
        width: min(92vw, 420px);
    }

    .home-hero__english-shell {
        gap: 0.45rem;
        width: 100%;
    }

    .home-hero__english-copy {
        font-size: 1.02rem;
        white-space: normal;
    }

    .navbar-search .ts-control,
    .home-search .ts-control {
        min-height: 56px;
        padding-left: 1.36rem !important;
        padding-right: 118px !important;
    }

    .navbar-search__input .search-input-icon {
        left: 1.15rem;
        width: 1.45rem;
        height: 1.45rem;
        font-size: 1rem;
    }

    .search-mode-dropdown {
        display: none;
    }

    .search-controls {
        right: 0.7rem;
    }

    .browse-panel--hero .browse-panel__advanced {
        grid-template-columns: 1fr;
    }

    .browse-panel--hero .browse-action {
        grid-column: 1 / -1;
    }

    .browse-field--hero,
    .home-hero__refine,
    .home-hero__search {
        width: 100%;
        max-width: none;
    }

    .hadith-card__result-num {
        top: 0;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
}

/* Final search-control sizing + canonical flexible/precise UI */
:root {
    --search-shell-height: 45px;
    --search-action-height: 35px;
    --search-entry-side-pad: 6.5rem;
}

/* Arabic sets a taller line box than Latin at the same font size — its letters carry
   marks above and tails below the baseline — so a term token that is 22px in English
   grows to 26px in Arabic, and .ts-control, which scrolls so several terms can wrap,
   answered with a scrollbar inside the search field.
 
   That was fixed by raising the whole shell to 52px, which bought the four pixels the
   token needed by making the field seven pixels taller than the English one everywhere
   it appears — 76px of navbar against 69px on the search page, and a home page hero
   field of 54px against 47px. The extra height went almost entirely into padding.
 
   Take it out of the padding instead. The shell matches English again and the wrapper
   gives back the four pixels the token actually wanted.

   Unscoped, because English has the same defect and was simply never reported: a token
   there measures 26px too, against 27px of content, so the field has been scrolling by
   one pixel all along. The padding is the thing that was wrong in both, and the outer
   height does not move — an English field is 45px before this change and after it. */
.search-entry-shell .ts-wrapper,
.search-entry-shell .ts-wrapper.form-control {
    padding-top: 4px;
    padding-bottom: 4px;
}

.navbar-search__input {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 6px 4px;
    border-radius: 8px;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 0.32rem;
    background: #f1f1f1fa;
    border: 1px solid #b5bdc891;
    box-shadow: 0 10px 24px rgba(8, 18, 32, 0.07);
    min-height: 50px;
}

.site-nav .navbar-search__input {
    min-height: auto;
    background: #efefef;
}

body.is-search-mode #queryBar,
body.is-search-mode .navbar-search {
    max-width: 900px;
}

.home-search .navbar-search__input,
body.is-search-mode .site-nav .navbar-search__input {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
}

.home-search .navbar-search__input,
body.is-search-mode .site-nav .navbar-search__input {
    min-height: auto;
    border-radius: 0;
}

.home-search .navbar-search__input,
body.is-search-mode .site-nav .navbar-search__input {
    overflow: visible;
}

/* Magnifying glass icon in search bar */
.search-magnifier {
    font-size: 0.95rem;
    color: rgba(132, 147, 171, 0.86);
}

.site-nav .search-magnifier {
    color: rgba(79, 88, 101, 0.72);
}

.search-entry-shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--search-shell-height);
    border-radius: 11px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(79, 88, 101, 0.5);
    align-self: center;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.site-nav .search-entry-shell {
    /* Slightly translucent so the navy tints it, instead of a pure-white slab
       punched out of the header. Still a filled field, so it keeps reading as
       an input. */
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    margin-top: 0;
}

.home-search .search-entry-shell {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(79, 88, 101, 0.5);
    border-radius: 11px;
}

body.is-search-mode .site-nav .search-entry-shell {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 11px;
}

.search-entry-shell .ts-wrapper,
.search-entry-shell .ts-wrapper.form-control {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 11px;
}

.search-entry-shell .search-magnifier {
    position: absolute;
    left: 0.72rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    font-size: 0.92rem;
    color: rgba(79, 88, 101, 0.72);
}

.site-nav .search-entry-shell .search-magnifier {
    color: rgba(79, 88, 101, 0.72);
    left: 0.72rem;
}

.navbar-search .search-entry-shell .ts-control,
.site-nav .search-entry-shell .ts-control,
.home-search .search-entry-shell .ts-control {
    min-height: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 1.92rem !important;
    padding-right: var(--search-entry-side-pad) !important;
    border-radius: 11px !important;
    align-content: flex-start;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.navbar-search .search-entry-shell .ts-control input,
.site-nav .search-entry-shell .ts-control input,
.home-search .search-entry-shell .ts-control input {
    min-height: 18px !important;
    line-height: 22px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 1.14rem !important;
    font-weight: 500 !important;
    caret-color: #173964 !important;
    color: #1a1a2e !important;
}

.search-ghost-text {
    position: absolute;
    left: 1.92rem;
    right: var(--search-entry-side-pad);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-ui);
    font-size: 0.94rem;
    line-height: 1.2;
    text-align: left;
    color: rgba(132, 147, 171, 0.92);
    opacity: 0;
    transition: opacity 180ms ease;
}

.site-nav .search-ghost-text {
    left: 1.92rem;
}

.home-search .search-ghost-text.is-visible {
    opacity: 1;
}

.home-search .search-ghost-text.is-visible::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.05em;
    margin-right: 0.24rem;
    vertical-align: -0.12em;
    background: #173964;
    animation: search-ghost-caret-blink 1s steps(1, end) infinite;
}

@keyframes search-ghost-caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.site-nav .search-ghost-text {
    color: rgba(132, 147, 171, 0.92);
}


.site-nav .ts-control > .item,
.navbar-search .ts-control > .item,
.home-search .ts-control > .item {
    border: 1px solid #0000003b !important;
}

/* The ninth chip skin. The eight removed earlier were all written
   .home-search .ts-control .item; this one carried a second selector beside it and
   so survived the sweep, which is why the home page kept its navy chips while the
   search page went gold. The chip is one rule at the end of this file. */

.site-nav .ts-control .item .remove {
    /* Position and size are the chip block's at the end of this file, which
       centres it. This kept it at the pill's top-right, a 14px glyph riding a
       pixel above a 24px chip; the chip is a Material chip now and its close
       sits on the middle of the label. */
    line-height: 1 !important;
}


.home-search .ts-control .item .remove,
.navbar-search .ts-control .item .remove {
    /* Position and size are the chip block's at the end of this file, which
       centres it. This kept it at the pill's top-right, a 14px glyph riding a
       pixel above a 24px chip; the chip is a Material chip now and its close
       sits on the middle of the label. */
    line-height: 1 !important;
}


.topic-pill {
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}

.topic-pill:hover {
    color: #0f2440 !important;
}

.search-entry-actions {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    height: var(--search-action-height);
    z-index: 35;
}

.search-submit-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--search-action-height);
}

#authSignInBtn,
.search-btn-with-border,
.search-mode-gauge {
    min-height: var(--search-action-height) !important;
    height: var(--search-action-height) !important;
}

#authSignInBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.95rem !important;
    border-radius: 12px !important;
    line-height: 1 !important;
    background: #efefef !important;
    border: 1px solid rgba(181, 189, 200, 0.95) !important;
    color: #0b1728 !important;
    box-shadow: none !important;
}

#authSignInBtn:hover,
#authSignInBtn:focus-visible {
    background: #ffffff !important;
    border-color: rgba(181, 189, 200, 1) !important;
    color: #0b1728 !important;
}

.search-btn-with-border {
    min-width: 84px !important;
    padding: 0 0.72rem !important;
    border: 1px solid #b7bec8 !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-right: 0 !important;
    background: var(--gold-light) !important;
    color: #0b1728 !important;
    box-shadow: none !important;
    font-family: var(--font-ui);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    align-self: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.search-btn-with-border i {
    font-size: 0.72rem;
}

.site-nav .search-btn-with-border {
    align-self: center !important;
}

.search-mode-menu {
    position: absolute;
    top: calc(100% + 0.38rem);
    right: 0;
    min-width: 176px;
    width: max-content;
    padding: 0.22rem;
    border: 1px solid rgba(182, 191, 202, 0.95);
    border-radius: 9px;
    background: #efefef;
    box-shadow: 0 12px 28px rgba(10, 18, 32, 0.16);
    display: grid;
    gap: 0.12rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    z-index: 2200;
}

.search-submit-menu:hover .search-mode-menu,
.search-submit-menu:focus-within .search-mode-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Set once a mode is chosen, so the menu closes while the pointer is still over it.
   Equal specificity to the rule above, so it must stay after it. */
.search-submit-menu.is-dismissed .search-mode-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
}

.search-mode-option {
    appearance: none;
    border: 0;
    outline: none;
    width: 100%;
    min-height: 38px;
    padding: 0.34rem 0.68rem 0.36rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    border-radius: 7px;
    background: transparent;
    color: #0b0b0b;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    transition: color 150ms ease;
}

.search-mode-option__label {
    display: block;
    grid-column: 1;
    grid-row: 1;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    color: #0b0b0b;
}

.search-mode-option__label,
.search-mode-option__meta {
    flex: 0 0 auto;
}

.search-mode-option__meta {
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.12rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.12;
    color: rgba(11, 11, 11, 0.72);
    white-space: normal;
}

.search-mode-option:hover,
.search-mode-option:focus-visible {
    background: transparent;
    color: #0b0b0b;
}

.search-mode-option:hover .search-mode-option__meta,
.search-mode-option:focus-visible .search-mode-option__meta {
    color: rgba(11, 11, 11, 0.82);
}

.search-mode-option::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.82rem;
    grid-column: 2;
    grid-row: 1;
    opacity: 0;
    align-self: center;
    color: #0b1728;
    transition: opacity 150ms ease, transform 150ms ease;
}

.search-mode-option:hover::after,
.search-mode-option:focus-visible::after {
    opacity: 0.92;
    transform: translateX(1px);
}

.search-mode-option.is-active,
.search-mode-option[aria-pressed="true"] {
    background: transparent;
    color: #0b1728;
}

.search-mode-option.is-active .search-mode-option__meta,
.search-mode-option[aria-pressed="true"] .search-mode-option__meta {
    color: rgba(11, 23, 40, 0.72);
}

.home-hero__card {
    overflow: visible;
}

.home-hero__card::before,
.home-hero__card::after {
    border-radius: inherit;
}

.search-mode-help {
    width: 1.08rem;
    height: 1.08rem;
    padding: 0;
    border: 1px solid rgba(24, 40, 68, 0.18);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 252, 244, 0.98) 0%, rgba(245, 239, 225, 0.98) 100%);
    color: #10233f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.08rem;
    font-size: 0.56rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(14, 26, 44, 0.06);
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}

.search-mode-help i {
    font-weight: 900;
    line-height: 1;
}

.search-mode-help:hover,
.search-mode-help:focus-visible {
    background: rgba(225, 232, 242, 0.96);
    color: #10233f;
    border-color: rgba(24, 40, 68, 0.34);
    transform: translateY(-1px);
}

.home-hero__brand {
    margin-top: -1rem;
    margin-bottom: -0.04rem;
}

.hadith-card__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.38rem;
}

.hadith-card__ornament-line {
    flex: 1 1 132px;
    max-width: 240px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(13, 33, 66, 0.24) 50%, transparent 100%);
}

.hadith-card__ornament-mark {
    color: rgba(13, 33, 66, 0.52);
}

.hadith-entry {
    position: relative;
    padding-top: 0.5rem;
    isolation: isolate;
}

.hadith-card__result-num {
    top: 0;
    left: 33.333%;
    right: auto;
    transform: translate(-50%, -46%);
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    z-index: 320;
    box-shadow: 0 14px 28px rgba(8, 17, 29, 0.2);
}

.hadith-card,
.hadith-entry,
.hadith-card .card-body {
    overflow: visible !important;
}

.hadith-divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: auto;
    margin: 1.2rem 0 1.45rem;
}

.hadith-divider__line {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(13, 33, 66, 0.08) 18%, rgba(13, 33, 66, 0.18) 58%, rgba(210, 180, 96, 0.34) 82%, transparent 100%);
}

.hadith-divider__line:first-child {
    left: auto;
    right: auto;
}

.hadith-divider__line:last-child {
    width: auto;
    background: linear-gradient(90deg, transparent 0%, rgba(210, 180, 96, 0.34) 18%, rgba(13, 33, 66, 0.18) 42%, rgba(13, 33, 66, 0.08) 82%, transparent 100%);
}

.hadith-divider__motif {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 33, 66, 0.2);
    background:
        radial-gradient(circle at center, rgba(241, 221, 164, 0.94) 0 18%, rgba(241, 221, 164, 0) 19%),
        radial-gradient(circle at center, rgba(13, 33, 66, 0.08) 0 62%, rgba(13, 33, 66, 0) 63%);
    box-shadow: 0 0 0 3px rgba(13, 33, 66, 0.03);
    color: rgba(13, 33, 66, 0.72);
    font-size: 0.68rem;
    letter-spacing: 0;
    z-index: 1;
}

.hadith-divider__motif::before,
.hadith-divider__motif::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.34rem;
    height: 0.34rem;
    border: 1px solid rgba(13, 33, 66, 0.22);
    transform: rotate(45deg);
    margin-top: -0.17rem;
}

.hadith-divider__motif::before {
    left: 0.32rem;
}

.hadith-divider__motif::after {
    right: 0.32rem;
}

.hadith-divider__line:first-child::before {
    border-right-color: rgba(13, 33, 66, 0.16);
    border-top-color: rgba(13, 33, 66, 0.16);
    border-bottom-color: rgba(13, 33, 66, 0.16);
}

.hadith-divider__line:last-child::after {
    border-left-color: rgba(13, 33, 66, 0.16);
    border-top-color: rgba(13, 33, 66, 0.16);
    border-bottom-color: rgba(13, 33, 66, 0.16);
}

@media (max-width: 768px) {
    :root {
        --search-shell-height: 34px;
        --search-action-height: 34px;
        --search-entry-side-pad: 0.78rem;
    }

    .navbar-search__input {
        gap: 0.42rem;
        padding: 3px;
    }

    .search-leading-controls {
        gap: 0.34rem;
    }

    .search-controls {
        position: static;
    }

    .search-btn-with-border {
        min-width: 94px !important;
        padding: 0 0.8rem !important;
    }

    .search-mode-choice {
        font-size: 0.51rem;
        padding: 0 0.34rem;
    }

    .search-mode-help {
        width: 0.88rem;
        height: 0.88rem;
        flex-basis: 0.88rem;
        font-size: 0.36rem;
    }

    .search-leading-separator {
        height: 1.3rem;
    }

    .search-ghost-text {
        font-size: 0.86rem;
    }

    .home-hero__brand {
        margin-top: -0.55rem;
    }

    .hadith-card__result-num {
        top: 0;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
}

/* Final mobile/result-density pass */
.hadith-details__mobile-toggle,
.hadith-tags-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 28px;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 33, 66, 0.12);
    background: rgba(17, 47, 88, 0.06);
    color: #173964;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.hadith-details__mobile-toggle:hover,
.hadith-tags-toggle:hover {
    background: rgba(17, 47, 88, 0.1);
    color: #0b1728;
}

.hadith-divider {
    gap: 0.55rem;
}

.hadith-divider__line {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(13, 33, 66, 0.14) 20%, rgba(13, 33, 66, 0.28) 50%, transparent 100%);
}

.hadith-divider__line:last-child {
    background: linear-gradient(90deg, transparent 0%, rgba(13, 33, 66, 0.28) 50%, rgba(13, 33, 66, 0.14) 80%, transparent 100%);
}

.hadith-divider__motif {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(13, 33, 66, 0.72);
    font-family: var(--font-arabic);
    font-size: 1rem;
    line-height: 1;
}

.hadith-divider__motif::before,
.hadith-divider__motif::after,
.hadith-divider__line:first-child::before,
.hadith-divider__line:last-child::after {
    content: none;
}

@media (max-width: 768px) {
    :root {
        --search-shell-height: 44px;
        --search-action-height: 34px;
        --search-entry-side-pad: 3rem;
    }

    .search-entry-shell {
        height: auto;
        min-height: 44px;
        max-height: 88px;
        overflow: hidden;
    }

    .search-entry-shell .ts-wrapper,
    .search-entry-shell .ts-wrapper.form-control {
        height: auto;
        min-height: 44px;
    }

    .navbar-search .search-entry-shell .ts-control,
    .site-nav .search-entry-shell .ts-control,
    .home-search .search-entry-shell .ts-control {
        height: auto !important;
        min-height: 44px !important;
        max-height: 88px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    main.container,
    main.container.py-3 {
        max-width: 100%;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .browse-book-card--overflow {
        display: none;
    }

    .browse-book-list.is-expanded .browse-book-card--overflow {
        display: flex;
    }

    .browse-book-drawer-toggle {
        display: block;
        width: 100%;
        padding: 0.6rem;
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--primary);
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
        transition: background 150ms ease;
    }

    .browse-book-drawer-toggle:hover {
        background: rgba(26, 58, 107, 0.04);
    }

    .browse-book-list.is-expanded .browse-book-drawer-toggle {
        margin-top: 0.5rem;
    }

    .navbar-search__input {
        padding: 2px 0;
    }

    .search-entry-shell {
        border-radius: 9px;
    }

    .search-entry-shell .search-magnifier {
        left: 0.74rem;
    }

    .navbar-search .search-entry-shell .ts-control,
    .site-nav .search-entry-shell .ts-control,
    .home-search .search-entry-shell .ts-control {
        padding-left: 2.1rem !important;
        padding-right: var(--search-entry-side-pad) !important;
    }

    .search-ghost-text,
    .site-nav .search-ghost-text {
        left: 2.08rem;
        right: var(--search-entry-side-pad);
    }

    .search-entry-actions {
        right: 4px;
    }

    /* Pin the search row to a single compact line. Inner tom-select wrappers
       were padding the shell out to 58px around a 26px pill. */
    .site-nav .search-entry-shell {
        overflow: hidden;
        height: var(--search-shell-height);
        min-height: var(--search-shell-height);
        max-height: var(--search-shell-height);
    }

    .site-nav .search-entry-shell .ts-wrapper,
    .site-nav .search-entry-shell .navbar-search__input {
        height: 100%;
        min-height: 0;
    }

    .site-nav .search-entry-shell .ts-control .item {
        min-height: 22px !important;
        padding: 2px 8px !important;
        font-size: 0.78rem !important;
    }

    /* The strip scrolls under the search button, so fade it out just before
       the button instead of letting a term be sliced mid-word. */
    .site-nav .search-entry-shell::after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: var(--search-entry-side-pad);
        width: 1.4rem;
        background: linear-gradient(90deg, rgba(225, 226, 228, 0), rgb(225, 226, 228));
        pointer-events: none;
        z-index: 2;
    }

    /* Keep the terms on one line and let them scroll sideways. Wrapping made
       the bar grow to two and three rows, so the pills took half the height
       of the header. */
    .site-nav .search-entry-shell .ts-control,
    .site-nav .ts-wrapper .ts-control,
    .site-nav .navbar-search .ts-control {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        flex-wrap: nowrap !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav .search-entry-shell .ts-control::-webkit-scrollbar {
        display: none;
    }

    .site-nav .search-entry-shell .ts-control .item {
        flex: 0 0 auto;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-btn-with-border {
        min-width: 34px !important;
        width: 34px !important;
        padding: 0 !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.06em;
    }
    .search-btn__text { display: none !important; }
    .search-btn-caret { display: none !important; }
    .search-btn__icon-mobile { display: inline-block !important; font-size: 0.82rem; }

    .top-actions {
        width: auto !important;
    }

    .auth-action { display: none !important; }
    .auth-action__mobile-toggle { display: inline-flex !important; font-size: 1rem; margin-right: 0 !important; }
    .auth-action__mobile-toggle.is-hidden { display: none !important; }

    .profile-chip {
        width: 40px;
        min-width: 40px;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .profile-chip__meta,
    .profile-chip .fa-angle-down {
        display: none !important;
    }

    .profile-chip__avatar {
        margin-right: 0 !important;
    }

    .hadith-card {
        border-radius: 6px !important;
    }

    .hadith-card .hadith-card__main {
        padding: 1.1rem 0.3rem 0.6rem !important;
    }

    .hadith-card .hadith-card__main .hadith-content {
        padding: 4px !important;
    }

    .hadith-sidecar__rail {
        padding: 0.58rem 0.56rem;
        gap: 0.38rem;
    }

    .hadith-sidecar__rail::after {
        display: none;
    }

    .hadith-sidecar__rail-btn {
        min-width: 64px;
        min-height: 42px;
        padding: 0.46rem 0.34rem 0.4rem 0.5rem;
        gap: 0.26rem;
    }

    .hadith-sidecar__rail-btn.is-active {
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
        box-shadow: none;
    }

    .hadith-sidecar__rail-label {
        font-size: 0.62rem;
    }

    .hadith-sidecar__panel {
        padding: 0.62rem 0.58rem 0.68rem;
    }

    .hadith-sidecar .hadith-details {
        grid-template-columns: 1fr;
        gap: 0.24rem;
    }

    .hadith-sidecar .meta-item {
        gap: 0.5rem;
        padding: 0.26rem 0;
    }

    .hadith-sidecar .meta-icon {
        width: 27px;
        height: 27px;
        border-radius: 8px;
    }

    .hadith-sidecar .meta-label {
        font-size: 0.52rem;
        margin-bottom: 0.15rem;
    }

    .hadith-sidecar .meta-text,
    .hadith-sidecar .meta-value {
        font-size: 0.88rem;
        line-height: 1.28;
    }

    .hadith-details__mobile-toggle {
        width: 100%;
        margin-top: 0.32rem;
        justify-content: space-between;
        border-radius: 10px;
        padding: 0.45rem 0.7rem;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(247, 225, 166, 0.18);
        color: #eef3fb;
    }

    .hadith-details__mobile-toggle:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .hadith-card__footer {
        gap: 0.55rem 0.45rem;
        padding-top: 0.78rem;
    }

    .hadith-card__tags {
        gap: 0.34rem;
        align-items: center;
    }

    .hadith-tags-toggle {
        min-height: 26px;
        padding: 0.22rem 0.58rem;
        font-size: 0.68rem;
    }

    .hadith-sidecar__accordion {
        gap: 0.36rem;
    }

    .hadith-sidecar__accordion-item {
        border-radius: 10px;
    }

    .hadith-sidecar__list-item {
        padding: 0.46rem 1.26rem 0.44rem 0.58rem;
    }

    .hadith-sidecar__accordion-toggle::after {
        right: 0.54rem;
        width: 0.4rem;
        height: 0.4rem;
    }

    .hadith-sidecar__accordion-body {
        padding: 0 0.48rem 0.5rem;
    }

    .hadith-sidecar__source-tree {
        margin-top: 0.45rem;
        gap: 0.22rem;
    }

    .hadith-sidecar__source-tree-children {
        margin-left: 0;
        padding-left: 0;
        gap: 0.22rem;
    }

    .hadith-sidecar__source-node {
        padding: 0.4rem 0.48rem 0.4rem 0.54rem;
        gap: 0.36rem;
    }

    .hadith-sidecar__source-node::before {
        display: none;
    }

    .hadith-sidecar__source-node-icon {
        width: 0.82rem;
        font-size: 0.66rem;
    }

    .hadith-sidecar__source-name {
        font-size: 0.72rem;
        line-height: 1.24;
    }

    .hadith-inline-context {
        padding: 0.68rem 0.72rem 0.76rem;
    }

    .hadith-inline-context__meta-band {
        margin-bottom: 0.62rem;
        padding: 0.66rem 0.72rem;
    }

    .hadith-inline-context__meta-band--compact {
        gap: 0.54rem;
    }

    .hadith-inline-context__title-link {
        font-size: 0.98rem;
    }

    .hadith-inline-context__meta-line {
        gap: 0.14rem;
        font-size: 0.76rem;
        line-height: 1.38;
    }

    .hadith-inline-context__body {
        padding: 0.68rem 0.72rem;
    }

    .quranic-snippet {
        padding: 0.56rem 0.62rem;
    }

    .quranic-snippet__head {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.26rem;
        overflow: visible;
    }

    .quranic-snippet__source,
    .quranic-snippet__source-link {
        min-width: 0;
        max-width: 100%;
    }

    .quranic-snippet__section {
        display: block;
        flex-basis: 100%;
        margin-top: -0.06rem;
    }

    .quranic-snippet__expand {
        margin-inline-start: auto;
        align-self: flex-start;
        white-space: nowrap;
        padding: 0.22rem 0.5rem;
        font-size: 0.66rem;
    }

    .hadith-divider {
        margin: 0.95rem 0 1.08rem;
    }

    .hadith-divider__motif {
        font-size: 0.94rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPACT HEADER  (phones portrait and landscape, small tablets)
   A landscape phone is ~844px wide, above the 768px phone breakpoint, so it
   was still getting the tall two-row header - 120px out of a 390px-tall
   viewport. Apply the compact single-row header everywhere below the desktop
   layout instead of by device width alone.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    :root {
        --search-shell-height: 44px;
        --search-action-height: 34px;
        --search-entry-side-pad: 3rem;
    }

    .site-nav {
        padding-top: 0.45rem;
        padding-bottom: 0.5rem;
    }

    .brand-logo--icon { height: 30px; }
    .brand-logo--emblem { height: 30px; }
    .navbar-brand { align-self: center; }

    .navbar-top {
        flex-wrap: nowrap !important;
        align-items: center;
    }

    /* Search sits between the logo and the menu rather than below them. */
    #queryBar,
    .navbar-search {
        order: 0;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .site-nav .search-entry-shell {
        position: relative;
        overflow: hidden;
        height: var(--search-shell-height);
        min-height: var(--search-shell-height);
        max-height: var(--search-shell-height);
    }

    .site-nav .search-entry-shell .ts-wrapper,
    .site-nav .search-entry-shell .navbar-search__input {
        height: 100%;
        min-height: 0;
    }

    /* Terms stay on one line and scroll sideways. */
    .site-nav .search-entry-shell .ts-control,
    .site-nav .ts-wrapper .ts-control,
    .site-nav .navbar-search .ts-control {
        flex-wrap: nowrap !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav .search-entry-shell .ts-control::-webkit-scrollbar {
        display: none;
    }

    .site-nav .search-entry-shell .ts-control .item {
        flex: 0 0 auto;
        min-height: 22px !important;
        padding: 2px 8px !important;
        font-size: 0.78rem !important;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Fade the strip out before the search button rather than slicing a term. */
    .site-nav .search-entry-shell::after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: var(--search-entry-side-pad);
        width: 1.4rem;
        background: linear-gradient(90deg, rgba(225, 226, 228, 0), rgb(225, 226, 228));
        pointer-events: none;
        z-index: 2;
    }
}

/* ---------------------------------------------------------------------------
   Home page prose and the book index.

   Both are rendered by the server. The home page body used to be fetched over
   XHR, so it carried no readable copy and no links; these are the styles for the
   copy and the links that replaced that.
   --------------------------------------------------------------------------- */

/* Sits on the dark hero card, so it takes the hero's palette rather than the
   page's body colours the way the rest of the home page prose does. */
.home-hero__lede {
    font-family: var(--font-reference);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(245, 236, 214, 0.82);
    width: min(100%, 760px);
    /* A clear gap before the search instructions: the lede describes the site, the
       note below it explains the box, and running them together read as one block. */
    margin: 0 auto 1.9rem;
    text-align: center;
}

.home-hero__lede strong {
    color: #f6df88;
    font-weight: 600;
}

/* "Primary Collections" — the one coloured word in the lede, so it reads as the way in. */
.home-hero__lede-link,
.home-hero__lede a {
    color: var(--gold-light);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 162, 61, 0.45);
    padding-bottom: 1px;
    transition: color 160ms ease, border-color 160ms ease;
}

.home-hero__lede-link:hover,
.home-hero__lede a:hover {
    color: #f6df88;
    border-bottom-color: #f6df88;
}

@media (max-width: 575.98px) {
    .home-hero__lede {
        font-size: 0.95rem;
        text-align: left;
    }

}

/* ========================================================================
   BOOK HUBS — /books, /books/{book}, /books/{book}/volume/{n},
                /books/{book}/{chapter}

   Built on the same navy-and-gold manuscript language as the home page:
   the navy gradient panel, the gold rule beneath it, Cormorant for display
   type, Source Serif for anything meant to be read, and the ۞ ornament as
   the divider. The first pass at these pages used bare Bootstrap defaults
   and looked like a different product.
   ======================================================================== */

/* ── Hero panel ─────────────────────────────────────────────────────────── */
.hub-hero {
    position: relative;
    overflow: hidden;
    margin: 0.5rem 0 2.5rem;
    padding: 3rem 2.5rem 2.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #0a1628 0%, #0f2440 20%, #1e3a5f 50%, #1a4a7a 80%, #1e3a5f 100%);
    box-shadow:
        0 8px 16px rgba(0,0,0,0.15),
        0 20px 50px rgba(10,22,40,0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
    color: #fff;
    text-align: center;
}

/* Soft light pooling, matching the home page hero. */
.hub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg,
            transparent 42%,
            rgba(255, 255, 255, 0.05) 47%,
            rgba(243, 229, 184, 0.07) 50%,
            rgba(255, 255, 255, 0.05) 53%,
            transparent 58%),
        radial-gradient(ellipse at 25% 8%, rgba(255,255,255,0.10) 0%, transparent 38%),
        radial-gradient(ellipse at 78% 92%, rgba(200,162,61,0.14) 0%, transparent 32%);
    background-size: 250% 100%, auto, auto;
    background-position: 250% 0, 0 0, 0 0;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: hub-hero-sheen 11s ease-in-out infinite;
}

/* The sweep occupies a fifth of the cycle and the rest is stillness, so it reads as a
   catch of light on a surface rather than a loading state. Peak opacity is 0.07 - at
   0.15 it looked like a skeleton placeholder, which is the wrong association for a page
   whose content has already arrived. Only the first background layer moves; the two
   radial glows underneath stay where they are. */
@keyframes hub-hero-sheen {
    0%   { background-position: 250% 0, 0 0, 0 0; }
    22%  { background-position: -150% 0, 0 0, 0 0; }
    100% { background-position: -150% 0, 0 0, 0 0; }
}

/* The gold rule that closes every navy panel on this site. */
.hub-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-light) 50%, var(--gold) 78%, transparent);
}

.hub-hero__eyebrow {
    position: relative;
    display: inline-block;
    margin-bottom: 0.65rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 229, 184, 0.75);
}

.hub-hero__title {
    position: relative;
    margin: 0 0 0.5rem;
    font-family: var(--font-ornament);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
}

/* ── Search button ──────────────────────────────────────────────────────── */
/* It was a pale gold fill (#f7e1a6) inside the light search field, and measured against
   that field it came to 1.04:1 - the button and its container were the same lightness,
   so only a 1px border said a button was there at all. That is why it looked wrong
   without looking like anything in particular: it read as a highlighted patch of the
   input rather than the primary action on the page. Recolouring the border, which is
   what I tried first, changed nothing anyone could see.

   Navy fill with gold-light text instead: 9.29:1 against the nav's grey field, 11.5:1
   against the white field in the hero, and 9.15:1 for the text on the fill. It is also
   the site's own pairing - navy surface, gold on top - and it puts the search button
   above the neighbouring Sign In, which is the correct order of the two.

   The radius follows the field it sits inside rather than an arbitrary 9px: concentric
   rounded shapes want inner = outer - gap. */
.search-btn-with-border {
    background: var(--primary) !important;
    border: 1px solid var(--primary-dark) !important;
    border-radius: 10px !important;
    color: var(--gold-light) !important;
}

.search-btn-with-border:hover,
.search-btn-with-border:focus-visible {
    background: var(--primary-dark) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
}

.search-btn-with-border i {
    color: inherit !important;
}

/* ── Search tips ─────────────────────────────────────────────────────────── */
/* The page used to load Bootswatch "materia" - a different Bootstrap theme from the
   rest of the site - with no nav and no footer, which is why it read as someone else's
   page. It now uses the site's own chrome, and these are the only rules it needs. */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.1rem;
    margin-top: 1.5rem;
}

.tips-card {
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-top: 3px solid rgba(30, 58, 95, 0.7);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,252,0.99));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 24px rgba(15, 23, 42, 0.05);
}

.tips-card__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.7rem;
    font-family: var(--font-ornament);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark, #10233f);
}

.tips-card__title .fa {
    font-size: 0.85rem;
    color: var(--gold);
}

.tips-card p {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.tips-card p:last-child { margin-bottom: 0; }

.tips-card__example {
    padding: 0.6rem 0.75rem;
    border-left: 2px solid var(--gold);
    border-radius: 0 8px 8px 0;
    background: rgba(200, 162, 61, 0.07);
    line-height: 1.9;
}

.tips-card code {
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(16, 35, 63, 0.06);
    color: #10233f;
    font-size: 0.86em;
    direction: ltr;
    unicode-bidi: isolate;
}

.tips-card__note {
    font-size: 0.86rem !important;
    color: var(--text-muted, #5a6a7a);
}

.tips-footnote {
    margin: 1.75rem 0 0;
    font-size: 0.92rem;
    color: var(--text-muted, #5a6a7a);
}

/* ── Text toggles ────────────────────────────────────────────────────────── */
/* One control for every "this text is longer than what you can see" case. There were
   three: the narration said "Show full hadith" in a grey pill centred under the text,
   the notes said "Show more" in a teal pill at the bottom left, and a tafsir snippet
   said "Expand" in a small navy chip at the top right. Same job, three vocabularies and
   three positions.

   "Show more" wins over "Expand" because all three are truncated running text rather
   than containers, and it is the word the tag lists already use. Top right of the
   block's header wins on position: it is the one spot that does not move when the text
   grows, so the control a reader just clicked is still under the cursor. */
.text-toggle {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid rgba(16, 35, 63, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #3d5170;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.text-toggle:hover,
.text-toggle:focus-visible {
    background: #fff;
    border-color: var(--gold);
    color: var(--primary-dark, #10233f);
}

.text-toggle .fa {
    font-size: 0.62rem;
    opacity: 0.75;
}

/* Under the narration, centred. The block is two columns with mirrored reading
   directions - English left, Arabic right - so aligning the control to either side would
   attach it to one language. Centred belongs to both, which is what it controls. */
.hadith-reading-foot {
    display: flex;
    justify-content: center;
    margin-top: 0.85rem;
}

/* .text-toggle carries margin-left:auto so it sits at the far end of a header row. A
   flex child with an auto margin absorbs the free space itself and justify-content has
   nothing left to distribute, so centring only works once that margin is cleared. */
.hadith-reading-foot .text-toggle {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* In a header the control is pushed to the far end; standing under its own text it
   should sit at the start of that text instead. */
.text-toggle--start {
    margin-left: 0 !important;
    margin-top: 0.5rem;
}

/* The notes header was a label alone; it now has to place one against the other. */
.hadith-notes__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Book hero, split ────────────────────────────────────────────────────── */
/* The banner already reserved a full-width band for a centred title and three stat
   pills, which left most of its area empty. On book pages it now carries the
   introduction in a second column: identity on one side, what the collection is on the
   other.

   Body text in gold on this navy measures about 4.5:1 - defensible for a 21px uppercase
   eyebrow, not for a paragraph - so the introduction is set in near-white and gold stays
   the accent it is everywhere else on the site. The identity column also stops being
   centred here: a paragraph beside a centred title has no shared edge to line up on. */
.hub-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 2.25rem;
    text-align: left;
    padding: 2.5rem;
}

.hub-hero--split .hub-hero__identity,
.hub-hero--split .hub-hero__intro {
    position: relative;   /* above ::before, which paints the glow */
    z-index: 1;
}

.hub-hero--split .hub-hero__stats {
    justify-content: flex-start;
}

.hub-hero__intro {
    border-left: 2px solid rgba(200, 162, 61, 0.45);
    padding-left: 1.75rem;
}

.hub-hero__intro-text {
    margin: 0;
    font-family: var(--font-reference);
    /* Smaller than body copy on purpose. At 1rem a 150-word overview pushed the banner
       past the fold on a laptop; at 0.86 it reads as the standfirst it is, and the volume
       grid stays on the first screen. Line height stays generous to keep it readable at
       that size. */
    font-size: 0.86rem;
    line-height: 1.68;
    color: rgba(255, 255, 255, 0.86);
}

/* One column below the split, with the rule moved to the top so it still reads as a
   separator rather than an orphaned edge. The hero is the whole first screen on a
   phone, so the type comes down a step and the padding with it. */
@media (max-width: 767.98px) {
    .hub-hero--split {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 2rem 1.5rem;
        text-align: center;
    }
    .hub-hero--split .hub-hero__stats {
        justify-content: center;
    }
    .hub-hero__intro {
        border-left: 0;
        border-top: 2px solid rgba(200, 162, 61, 0.4);
        padding-left: 0;
        padding-top: 1.3rem;
        text-align: left;
    }
    .hub-hero__intro-text {
        font-size: 0.82rem;
        line-height: 1.6;
    }
}

.hub-hero__lede {
    position: relative;
    max-width: 62ch;
    margin: 0 auto;
    font-family: var(--font-reference);
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(245, 236, 214, 0.82);
}

.hub-hero__lede strong {
    color: var(--gold-light);
    font-weight: 600;
}

.hub-hero__lede a {
    color: rgba(245, 236, 214, 0.95);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 162, 61, 0.45);
}

.hub-hero__lede a:hover {
    color: #f6df88;
    border-bottom-color: #f6df88;
}

/* Stat pills under the hero title. */
.hub-hero__stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.15rem;
}

.hub-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(243, 229, 184, 0.18);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(245, 236, 214, 0.7);
}

.hub-stat__value {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--gold-light);
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.hub-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0 0.9rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.hub-crumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 150ms ease;
}

.hub-crumbs a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hub-crumbs__sep {
    color: var(--gold);
    opacity: 0.55;
}

.hub-crumbs > span:last-child {
    color: var(--text);
    font-weight: 600;
}

/* ── Ornament divider ───────────────────────────────────────────────────── */
.hub-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin: 0 0 1.75rem;
}

.hub-ornament__line {
    flex: 1 1 120px;
    max-width: 260px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 162, 61, 0.5) 50%, transparent);
}

.hub-ornament__mark {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.85;
}

/* ── Section headings ───────────────────────────────────────────────────── */
.hub-group__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
}

/* A quiet aside on a section heading, for saying what a list is without a paragraph. */
.hub-group__note {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-muted);
}

.hub-group__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(200, 162, 61, 0.45), transparent);
}

.hub-group {
    margin-bottom: 2.75rem;
}

/* ── Cards (books, volumes) ─────────────────────────────────────────────── */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 1rem;
}

.hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.35rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,252,0.99));
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-top: 3px solid rgba(30, 58, 95, 0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 24px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

/* A sweep across the card on hover. Hover-only on purpose: a chapter listing can carry
   hundreds of these, and animating them all at rest would be both distracting and a
   pointless compositing cost. ::before is free here; ::after is the medallion below. */
.hub-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 55%;
    background: linear-gradient(105deg,
        transparent,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(200, 162, 61, 0.16) 55%,
        transparent);
    transform: translateX(-190%);
    pointer-events: none;
    z-index: 0;
}

.hub-card:hover::before {
    transform: translateX(340%);
    transition: transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A faint corner medallion, so a card is not just a rectangle. */
.hub-card::after {
    content: "۞";
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(200, 162, 61, 0.16);
    transition: color 180ms ease;
    pointer-events: none;
}

.hub-card:hover {
    border-color: rgba(26, 58, 107, 0.35);
    border-top-color: var(--gold);
    background: linear-gradient(180deg, #eef3fb, #dde8f7);
    box-shadow: 0 8px 24px rgba(26, 58, 107, 0.15), inset 0 1px 0 rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

.hub-card:hover::after {
    color: rgba(200, 162, 61, 0.4);
}

.hub-card__title {
    flex: 1;
    margin-bottom: 0.6rem;
    padding-right: 1.5rem;
    font-family: var(--font-ornament);
    font-weight: 700;
    font-size: 1.32rem;
    line-height: 1.2;
    color: var(--primary-dark);
}

.hub-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-family: var(--font-ui);
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hub-card__meta span strong {
    color: var(--text-secondary);
    font-weight: 700;
}

.hub-card__meta span + span::before {
    content: "\2022";
    margin-right: 0.55rem;
    color: var(--gold);
    opacity: 0.6;
}

/* ── Chapter lists ──────────────────────────────────────────────────────── */
/* A volume can carry 600 chapters, so these are built for scanning: a numbered
   index to keep your place, a real reading face at a readable size, and rows with
   enough height to separate without needing rules between them. Two columns on a
   wide screen, because a single column of 600 rows is a mile long. */
.hub-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    gap: 0.2rem 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub-chapters li {
    min-width: 0;
}

/* The row holds two links, so it is the flex container rather than the anchor. */
.hub-chapter-row {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    border-radius: var(--radius-md);
    transition: background 150ms ease;
}

.hub-chapter-row:hover {
    background: var(--gold-bg);
}

.hub-chapter-row .hub-chapter {
    flex: 1;
    min-width: 0;
}

.hub-chapter-row:hover .hub-chapter {
    background: transparent;
    transform: none;
}

.hub-chapter {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hub-chapter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(105deg,
        transparent,
        rgba(255, 255, 255, 0.6) 45%,
        rgba(200, 162, 61, 0.14) 55%,
        transparent);
    transform: translateX(-190%);
    pointer-events: none;
}

.hub-chapter:hover::before {
    transform: translateX(420%);
    transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The row's own content has to sit above the sweep. */
.hub-chapter > * {
    position: relative;
    z-index: 1;
}

.hub-chapter:hover {
    background: var(--gold-bg);
    border-left-color: var(--gold);
    transform: translateX(2px);
}

/* An ordinal, reading as one: right-aligned, trailed by a period, and set in the
   numeric face so it does not compete with the labelled count on the other side. */
.hub-chapter__index {
    flex: none;
    min-width: 2.1rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    text-align: right;
    transition: color 150ms ease;
}

.hub-chapter:hover .hub-chapter__index {
    color: var(--gold-dark);
}

.hub-chapter__title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-reference);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--text);
}

.hub-chapter:hover .hub-chapter__title {
    color: var(--primary-dark);
}

.hub-chapter__count {
    flex: none;
    align-self: flex-start;
    margin-top: 0.05rem;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    border: 1px solid #0000001f;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
    color: var(--text-muted);
    transition: background 150ms ease, color 150ms ease;
}

.hub-chapter__count-unit {
    margin-left: 0.2rem;
    font-weight: 600;
    opacity: 0.75;
}

.hub-chapter:hover .hub-chapter__count {
    background: rgba(200, 162, 61, 0.18);
    color: var(--gold-dark);
}

/* ── Book blurb ─────────────────────────────────────────────────────────── */
/* The panel spans the column; the measure is capped on the text inside it, so a
   long blurb stays readable without leaving a narrow card stranded in white space. */
.hub-blurb {
    position: relative;
    margin-bottom: 2.75rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(200, 162, 61, 0.28);
    background: linear-gradient(180deg, var(--gold-bg), var(--surface-warm));
    font-family: var(--font-reference);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* The blurb opens with the book's name, which the hero already carries. */
.hub-blurb__body > h2:first-child {
    display: none;
}

.hub-blurb__body {
    max-width: 74ch;
}

.hub-blurb h2 {
    margin-bottom: 0.75rem;
    font-family: var(--font-ornament);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-dark);
}

.hub-blurb b {
    color: var(--primary);
}

.hub-blurb p:last-child {
    margin-bottom: 0;
}

/* ── Narration entries on a chapter page ────────────────────────────────── */
.hub-narration {
    position: relative;
    padding: 1.5rem 0 1.6rem 3.25rem;
    border-bottom: 1px solid var(--border);
}

.hub-narration:last-child {
    border-bottom: none;
}

/* The hadith number as a gold-ringed marker in the margin. */
.hub-narration__num {
    position: absolute;
    left: 0;
    top: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 0.4rem;
    border-radius: 50%;
    border: 1px solid rgba(200, 162, 61, 0.45);
    background: var(--gold-bg);
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gold-dark);
}

.hub-narration__text {
    max-width: 74ch;
    margin: 0 0 0.6rem;
    font-family: var(--font-reference);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text);
}

.hub-narration__link {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--primary);
    text-decoration: none;
}

.hub-narration__link:hover {
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .hub-hero {
        margin-bottom: 1.75rem;
        padding: 2.25rem 1.25rem 1.9rem;
    }

    .hub-hero__lede {
        font-size: 0.95rem;
    }

    .hub-grid {
        grid-template-columns: 1fr;
    }

    .hub-chapters {
        grid-template-columns: 1fr;
    }

    .hub-narration {
        padding-left: 0;
    }

    .hub-narration__num {
        position: static;
        margin-bottom: 0.6rem;
    }
}

/* ── Save-to-collection on the server-rendered pages ────────────────────── */
/* The same affordance the search results carry, so a reader moving between the
   two does not lose the ability to keep a narration. */
.hub-narration__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.hub-save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.hub-save:hover {
    color: var(--gold-dark);
    border-color: var(--gold);
    background: var(--gold-bg);
}

/* ── Collection picker ──────────────────────────────────────────────────── */
.hub-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 22, 40, 0.55);
    backdrop-filter: blur(2px);
}

.hub-modal {
    width: min(100%, 27rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.hub-modal__head {
    padding: 1.15rem 1.35rem 0.9rem;
    background: linear-gradient(135deg, #0f2440, #1e3a5f);
    color: #fff;
}

.hub-modal__title {
    display: block;
    font-family: var(--font-ornament);
    font-weight: 700;
    font-size: 1.25rem;
}

.hub-modal__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: rgba(245, 236, 214, 0.7);
}

.hub-modal__body {
    padding: 1.25rem 1.35rem;
}

.hub-modal__label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hub-modal__select,
.hub-modal__input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface);
}

.hub-modal__input {
    margin-top: 0.6rem;
}

.hub-modal__select:focus,
.hub-modal__input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.hub-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0 1.35rem 1.25rem;
}

.hub-modal__btn {
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.hub-modal__btn--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.hub-modal__btn--primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.hub-toast {
    position: fixed;
    left: 50%;
    bottom: 1.75rem;
    z-index: 1090;
    transform: translate(-50%, 0.75rem);
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--primary-dark);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}

.hub-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hub-toast--error {
    background: var(--danger);
}

/* ── Save-to-collection on the server-rendered pages ────────────────────── */
/* The same affordance the search results carry, so a reader moving between the
   two does not lose the ability to keep a narration. */
.hub-narration__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.hub-save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.hub-save:hover {
    color: var(--gold-dark);
    border-color: var(--gold);
    background: var(--gold-bg);
}

/* ── Collection picker ──────────────────────────────────────────────────── */
.hub-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 22, 40, 0.55);
    backdrop-filter: blur(2px);
}

.hub-modal {
    width: min(100%, 27rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.hub-modal__head {
    padding: 1.15rem 1.35rem 0.9rem;
    background: linear-gradient(135deg, #0f2440, #1e3a5f);
    color: #fff;
}

.hub-modal__title {
    display: block;
    font-family: var(--font-ornament);
    font-weight: 700;
    font-size: 1.25rem;
}

.hub-modal__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: rgba(245, 236, 214, 0.7);
}

.hub-modal__body {
    padding: 1.25rem 1.35rem;
}

.hub-modal__label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hub-modal__select,
.hub-modal__input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface);
}

.hub-modal__input {
    margin-top: 0.6rem;
}

.hub-modal__select:focus,
.hub-modal__input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.hub-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0 1.35rem 1.25rem;
}

.hub-modal__btn {
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.hub-modal__btn--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.hub-modal__btn--primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.hub-toast {
    position: fixed;
    left: 50%;
    bottom: 1.75rem;
    z-index: 1090;
    transform: translate(-50%, 0.75rem);
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--primary-dark);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}

.hub-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hub-toast--error {
    background: var(--danger);
}

/* ── Reading-mode call to action ────────────────────────────────────────── */
.hub-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: -1rem 0 1.75rem;
}

.hub-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--gold);
    background: linear-gradient(180deg, #f6df88, var(--gold));
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--primary-dark);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(200, 162, 61, 0.25);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.hub-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(200, 162, 61, 0.32);
    color: var(--primary-dark);
}

/* ── Server-rendered hadith card ────────────────────────────────────────── */
/* The card on a chapter page is the same component as on the search page, with the
   same classes, so it inherits every style above. Two differences, both because there
   is no Vue instance behind it: the search card clamps its height and offers a "show
   full hadith" toggle, and its sidecar is resizable. Here the narration is shown in
   full and the sidecar is a fixed column. */
.hadith-card--static .card-body {
    max-height: none;
    overflow: visible;
}

.hadith-card--static .hadith-card__resizer {
    cursor: default;
}

.hadith-static-list .hadith-entry + .hadith-entry {
    margin-top: 1.5rem;
}

.hadith-card--static .hadith-sidecar__rail-btn {
    text-decoration: none;
}

/* The card menus on server-rendered pages are driven by hub-pages.js rather than
   Bootstrap's JS, so .show has to do the work data-bs-toggle would have done. */
.hub-menu { position: relative; }

.hub-menu .dropdown-menu.show {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 1000;
}

.hadith-sidecar__list-reason {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(245, 236, 214, 0.66);
}

/* ── Tag facet on server-rendered chapter pages ─────────────────────────── */
/* Reuses .tag-filter-bar and .topic-pill from the results page, so the facet looks
   the same whichever way the reader arrived. Links rather than buttons: each filtered
   view is a real URL, which works without scripts and can be shared. */
.tag-filter-bar__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.tag-filter-bar__label {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.tag-filter-bar__clear {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
}

.tag-filter-bar__clear:hover { text-decoration: underline; }

.tag-filter-bar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tag-filter-bar__pills .topic-pill {
    text-decoration: none;
}

/* Hero chips and eyebrows that lead somewhere look like it, without becoming loud
   enough to compete with the title they sit under. */
a.hub-stat,
a.hub-hero__eyebrow {
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

a.hub-stat:hover {
    border-color: rgba(243, 229, 184, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(245, 236, 214, 0.9);
}

a.hub-hero__eyebrow:hover {
    color: var(--gold-light);
}

/* ── Sibling chapter navigation ─────────────────────────────────────────── */
.hub-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.hub-pager__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-secondary);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.hub-pager__link--next {
    justify-content: flex-end;
    text-align: right;
    margin-inline-start: auto;
}

.hub-pager__link:hover {
    border-color: var(--gold);
    background: var(--gold-bg);
    color: var(--primary-dark);
}

.hub-pager__meta { min-width: 0; }

.hub-pager__eyebrow {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hub-pager__title {
    display: block;
    font-family: var(--font-reference);
    font-size: 0.95rem;
    line-height: 1.4;
}

.hub-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* Tag overflow on the server-rendered card: the first few show, the rest wait
   behind the toggle, as they do on the search card. */
.hadith-card__tags .topic-pill--overflow { display: none; }
.hadith-card__tags.is-expanded .topic-pill--overflow { display: inline-flex; }

/* The resizer does something now, so it should look like it does. */
.hadith-card--static .hadith-card__resizer { cursor: col-resize; }
.hadith-card.is-resizing { user-select: none; }

/* ── Tafsir snippets inside the Quranic Insight panel ───────────────────── */
/* The panel is already an accented surface — a cream gradient with a gold edge —
   and each snippet inside it carried its own tinted block and gold left bar, so
   every snippet read as a highlight within a highlight. The panel keeps the accent;
   the snippets inside it are plain, separated by a hairline rather than by a second
   colour. Scoped to the panel so a snippet shown anywhere else keeps its own styling,
   and shared by both renderers because both emit this markup. */
.hadith-inline-context--quran .quranic-snippet {
    background: transparent;
    border-left: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.hadith-inline-context--quran .quranic-snippet + .quranic-snippet {
    border-top: 1px solid rgba(160, 126, 40, 0.18);
    margin-top: 0.35rem;
    padding-top: 0.7rem;
}

/* ── Share-card preview ─────────────────────────────────────────────────────
   Shown from the share menu on both cards. The panel deliberately gives most of
   its height to the image: the point of the dialog is that you see the card
   before you send it anywhere. */

.share-card-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.share-card-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.share-card-modal__panel {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-strong, #d1d8e0);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    padding: 1.25rem 1.35rem 1.1rem;
}

.share-card-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.share-card-modal__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold-dark, #a07e28);
}

.share-card-modal__title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--accent, #1e3a5f);
    margin-top: 0.15rem;
}

.share-card-modal__close {
    border: 1px solid var(--border, #e8ecf1);
    background: #fff;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    flex: 0 0 auto;
}

.share-card-modal__close:hover {
    border-color: var(--border-strong, #d1d8e0);
    color: #0f172a;
}

/* A fixed 1200:630 box, so switching theme cannot make the dialog jump. */
.share-card-modal__frame {
    position: relative;
    aspect-ratio: 1200 / 630;
    border: 1px solid var(--border, #e8ecf1);
    border-radius: 10px;
    overflow: hidden;
    background: var(--accent-lighter, #eef2f7);
}

.share-card-modal__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.share-card-modal__frame.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: share-card-shimmer 1.1s ease-in-out infinite;
}

@keyframes share-card-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .share-card-modal__frame.is-loading::after { animation: none; }
}

.share-card-modal__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.4rem;
    margin: 0.9rem 0 0.85rem;
}

.share-card-modal__control-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.3rem;
}

.share-card-modal__segmented {
    display: inline-flex;
    border: 1px solid var(--border-strong, #d1d8e0);
    border-radius: 999px;
    overflow: hidden;
}

.share-card-modal__seg {
    border: 0;
    background: #fff;
    padding: 0.34rem 0.95rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
}

.share-card-modal__seg + .share-card-modal__seg {
    border-left: 1px solid var(--border, #e8ecf1);
}

.share-card-modal__seg.is-active {
    background: var(--accent, #1e3a5f);
    color: #fff;
}

/* A full card is many times taller than the Open Graph ratio; give it a scrolling
   window rather than letterboxing it into a stripe. */
.share-card-modal__frame.is-full {
    aspect-ratio: auto;
    max-height: 46dvh;
    overflow-y: auto;
}

.share-card-modal__frame.is-full img {
    height: auto;
    object-fit: fill;
}

.share-card-modal__address {
    display: block;
    margin-bottom: 0.5rem;
}

.share-card-modal__address span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.share-card-modal__address input {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--border, #e8ecf1);
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
}

.share-card-modal__hint {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 0.85rem;
}

.share-card-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.share-card-modal__btn {
    border: 1px solid var(--border-strong, #d1d8e0);
    background: #fff;
    border-radius: 8px;
    padding: 0.44rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent, #1e3a5f);
    cursor: pointer;
}

.share-card-modal__btn:hover {
    background: var(--accent-lighter, #eef2f7);
}

.share-card-modal__btn--primary {
    background: var(--accent, #1e3a5f);
    border-color: var(--accent, #1e3a5f);
    color: #fff;
}

.share-card-modal__btn--primary:hover {
    background: var(--accent-hover, #2d5a8e);
}

.share-card-modal__note {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: #15803d;
    min-height: 1.2em;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.share-card-modal__note.is-visible { opacity: 1; }
.share-card-modal__note.is-error   { color: #b91c1c; }

@media (max-width: 575.98px) {
    .share-card-modal__panel { padding: 1rem; }
    .share-card-modal__actions .share-card-modal__btn { flex: 1 1 auto; }
}

/* ── Search mode menu ────────────────────────────────────────────────────── */
/* It was a flat #efefef panel with centred uppercase labels, no icons, and - the part
   that actually mattered - an .is-active rule that set `background: transparent`, so the
   mode you were currently in looked exactly like the one you were not. A menu whose only
   job is to show a current choice was not showing it.

   It is now an extension of the button it hangs from: same navy, gold on top. Each row
   carries an icon for what the mode does, a label, a line of plain English, and a check
   that appears only on the mode in force. Rows are left-aligned so the labels share an
   edge, which is what makes even a two-item menu scannable. */
.search-mode-menu {
    min-width: 268px !important;
    padding: 0.3rem !important;
    border: 1px solid rgba(200, 162, 61, 0.42) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #16305a 0%, #0f2440 100%) !important;
    box-shadow: 0 18px 38px rgba(6, 13, 25, 0.42) !important;
    gap: 0.15rem !important;
}

.search-mode-option {
    grid-template-columns: 1.35rem 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.6rem !important;
    row-gap: 0.1rem !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 9px !important;
    border-left: 2px solid transparent !important;
    text-align: left !important;
    background: transparent !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}

.search-mode-option__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    font-size: 0.8rem;
    color: rgba(243, 229, 184, 0.55);
    transition: color 150ms ease;
}

.search-mode-option__label {
    grid-column: 2 !important;
    grid-row: 1 !important;
    color: #f3e5b8 !important;
    text-align: left;
}

.search-mode-option__meta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.63rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    line-height: 1.35;
    color: rgba(226, 234, 246, 0.62) !important;
    text-align: left;
    white-space: normal;
}

/* The arrow that used to appear on hover said "this row is under the pointer", which the
   highlight already says. A check on the active row says the thing the menu exists for. */
.search-mode-option::after {
    content: none !important;
}

.search-mode-option__check {
    /* !important because an older rule set every .fa-check in this menu to transparent
       and undid it only for .active - a class the script never sets, it sets .is-active.
       That pair is deleted above; this stays explicit so reintroducing it cannot make the
       check silently invisible again. */
    color: var(--gold) !important;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 0.72rem;
    opacity: 0;
    transition: opacity 150ms ease;
}

.search-mode-option:hover,
.search-mode-option:focus-visible {
    background: rgba(255, 255, 255, 0.07) !important;
}

.search-mode-option:hover .search-mode-option__icon,
.search-mode-option:focus-visible .search-mode-option__icon {
    color: rgba(243, 229, 184, 0.85);
}

.search-mode-option.is-active,
.search-mode-option[aria-pressed="true"] {
    background: rgba(200, 162, 61, 0.16) !important;
    border-left-color: var(--gold) !important;
}

.search-mode-option.is-active .search-mode-option__icon,
.search-mode-option[aria-pressed="true"] .search-mode-option__icon {
    color: var(--gold-light);
}

.search-mode-option.is-active .search-mode-option__meta,
.search-mode-option[aria-pressed="true"] .search-mode-option__meta {
    color: rgba(243, 229, 184, 0.78) !important;
}

.search-mode-option.is-active .search-mode-option__check,
.search-mode-option[aria-pressed="true"] .search-mode-option__check {
    opacity: 1;
}

/* ==========================================================================
   Right-to-left
   ==========================================================================
   Appended as its own pass, like the ornament block above it, rather than
   folded into the rules it corrects.

   Bootstrap's own RTL build handles the layout primitives; what it cannot know
   about is this file's decorations. Several of them are light sweeps parked off
   the left edge of their host until a hover animates them across:

       .site-nav::before      left: -40%
       .hub-card::before      transform: translateX(-190%)
       .topic-tag-pills::before, the action rail, the share card

   In a left-to-right document a box hanging off the left edge is invisible and
   costs nothing: the browser does not make leftward overflow scrollable. In a
   right-to-left document the left edge is the *end* of the inline axis, so the
   same box becomes scrollable overflow. .site-nav::before is 40% of the navbar
   wide, which made the document 1,771px in a 1,280px viewport and pushed the
   whole page sideways, with the content cut off at one edge and 506px of empty
   space at the other. */

[dir="rtl"] body {
    /* clip, not hidden: hidden would make the body a scroll container and break
       position: sticky on the navbar. clip creates no scroll container, so the
       decorations are trimmed and the sticky header still sticks. */
    overflow-x: clip;
}

/* Mirror the sweeps so they enter from the side the reader's eye starts on.
   The clip above already stops them distorting the page; this is what makes
   them sweep the right way rather than backwards. */
[dir="rtl"] .site-nav::before {
    left: auto;
    right: -40%;
}

[dir="rtl"] .hub-card::before {
    left: auto;
    right: 0;
    transform: translateX(190%);
}

[dir="rtl"] .hub-card:hover::before {
    transform: translateX(-30%);
}

/* The ۞ that marks a card sits in the corner the reader ends on. */
[dir="rtl"] .hub-card::after {
    left: 12px;
    right: auto;
}

/* Text set in CSS cannot reach the message bundle, so the Arabic is stated here.
   This is the only generated-content string on the site; anything else a reader
   has to read is rendered by the server. */
[dir="rtl"] .home-browse .home-section-header::after {
    content: "فهرس المجاميع";
}


/* ── Arabic type sizing on the static pages ─────────────────────────────────
   Arabic reads smaller than Latin at the same font-size. The em box is spent
   differently: Arabic has no capitals and a small notional x-height, so the
   letterforms occupy less of the box, and a face set at 0.98rem that reads
   comfortably in English reads cramped in Arabic. The usual correction is
   10-20%, and the smaller the text the more it needs, because the deficit is
   a fixed proportion of a shrinking number.

   Everything here is a size, scoped to the Arabic document. The English pages
   are untouched, and so is the narration body, which was already set at
   1.45rem for exactly this reason and is the one thing on these pages that did
   not need the adjustment.

   letter-spacing is zeroed alongside. The labels it was set on are uppercase
   Latin tracking - .hub-group__label at 0.16em, .meta-label at 0.12em - and
   uppercase does nothing to Arabic while the tracking does: it pulls apart
   letters that are supposed to join, so a word arrives as disconnected pieces
   with the connecting strokes stretched between them. */

/* Hero */
[dir="rtl"] .hub-hero__eyebrow { font-size: 0.82rem; letter-spacing: 0.04em; }
[dir="rtl"] .hub-hero__intro-text { font-size: 1rem; line-height: 1.85; }
[dir="rtl"] .hub-stat { font-size: 0.9rem; letter-spacing: 0; }
[dir="rtl"] .hub-stat__value { font-size: 1.04rem; }
[dir="rtl"] .hub-crumbs { font-size: 0.9rem; }

/* Section headings and cards */
[dir="rtl"] .hub-group__label { font-size: 0.88rem; letter-spacing: 0.02em; }
[dir="rtl"] .hub-card__title { font-size: 1.46rem; }
[dir="rtl"] .hub-card__meta { font-size: 0.85rem; letter-spacing: 0; }

/* Chapter listings. A volume can carry 600 rows, so the title carries the bump
   and the ordinal and count follow it up rather than being left behind. */
[dir="rtl"] .hub-chapter__title { font-size: 1.12rem; line-height: 1.6; }
[dir="rtl"] .hub-chapter__index { font-size: 0.82rem; }
[dir="rtl"] .hub-chapter__count { font-size: 0.8rem; }

/* Book blurb */
[dir="rtl"] .hub-blurb { font-size: 1.14rem; line-height: 1.9; }
[dir="rtl"] .hub-blurb h2 { font-size: 1.62rem; }

/* Pager */
[dir="rtl"] .hub-pager__eyebrow { font-size: 0.8rem; letter-spacing: 0.04em; }
[dir="rtl"] .hub-pager__title { font-size: 1.08rem; }

/* Narration cards: the metadata rail, the tag bar and the result number. The
   narration itself is already sized for Arabic and is deliberately absent. */
[dir="rtl"] .hadith-sidecar .meta-label { font-size: 0.72rem; letter-spacing: 0.02em; }
[dir="rtl"] .hadith-sidecar .meta-text,
[dir="rtl"] .hadith-sidecar .meta-value { font-size: 1.08rem; letter-spacing: 0; }
[dir="rtl"] .meta-label { font-size: 0.74rem; letter-spacing: 0.02em; }
[dir="rtl"] .meta-text { font-size: 1rem; }
[dir="rtl"] .hadith-card__result-num { font-size: 0.8rem; letter-spacing: 0; }
[dir="rtl"] .tag-filter-bar__label { font-size: 0.82rem; letter-spacing: 0.04em; }
[dir="rtl"] .tag-filter-bar__clear { font-size: 0.84rem; }

/* Topic pills: the filter bar above a chapter and the tags under a narration. */
[dir="rtl"] .topic-pill { font-size: 0.92rem; letter-spacing: 0; }
[dir="rtl"] .topic-tag-pills__label { font-size: 0.8rem; letter-spacing: 0.03em; }

/* The isnad. Set apart from the matn by size, and that gap is what carries the
   distinction, so it goes up with everything else rather than closing on it. */
[dir="rtl"] .hadith-chain--arabic.arabic-text { font-size: 1.3rem !important; }
[dir="rtl"] .hadith-text-block--arabic .hadith-chain--arabic.arabic-text {
    font-size: 1.2rem !important;
}


/* The submit button says what it does; the magnifying glass in front of the word
   repeats it, and the field already carries one at its other end. Font Awesome's own
   `.fa { display: … }` loads after this file and matches at the same specificity, which
   is why the existing `.search-btn__icon-mobile { display: none }` never took effect and
   the icon has been showing on desktop all along.

   Still shown under 768px, where the rule below it hides the button's text and the icon
   is the only label the button has. */
.search-btn-with-border .search-btn__icon-mobile {
    display: none;
}

@media (max-width: 768px) {
    .search-btn-with-border .search-btn__icon-mobile {
        display: inline-block;
    }
}


/* ── The search field: one size, one surface ────────────────────────────────
   There are two of these — the hero field on the home page and the one in the
   navbar on every other page — and they were the same height already, 45px
   both, while looking nothing alike: a white pill in the hero, a translucent
   white slab in the navbar. Same size, different surface, which reads as a
   size difference. So they are unified here rather than tuned apart.

   Compact, because the field is the tallest thing in the navbar row and so
   sets the navbar's height: at 45px the bar came to 69px before the first
   result. The floor is not the field, it is the logo at 40px, so the row stops
   there and the saving comes from the field plus the navbar's own padding —
   69px to 52px.

   The field's own floor is the term tokens. Each is 20px here, the control
   pads 2px either side, so 24px of content must fit or .ts-control
   (overflow-y: auto) puts a scrollbar inside the field. 36px of shell over 3px
   of wrapper padding leaves 30px. Measured against three long Arabic terms,
   which are the worst case: Arabic tokens run taller than Latin ones. */
:root {
    --search-shell-height: 36px;
    --search-action-height: 28px;
}

.site-nav {
    padding-top: 6px;
    padding-bottom: 6px;
}

.search-entry-shell .ts-wrapper,
.search-entry-shell .ts-wrapper.form-control {
    padding-top: 3px;
    padding-bottom: 3px;
}

.site-nav .ts-control .item,
.home-search .ts-control .item,
.navbar-search .ts-control .item {
    min-height: 20px !important;
    padding: 1px 7px !important;
    font-size: 0.8rem !important;
}

.navbar-search .search-entry-shell .ts-control input,
.site-nav .search-entry-shell .ts-control input,
.home-search .search-entry-shell .ts-control input {
    font-size: 1.02rem !important;
    line-height: 18px !important;
}

/* Glass. Both fields sit on navy — the navbar's gradient and the hero's panel —
   so the surface can be the backdrop itself, barely lifted and lightly blurred,
   inside a thin silver rule. That also settles what the two fields have in
   common: not a shared colour but a shared absence of one.

   Three things are deliberately restrained. The fill is 4% white, not 8: at 8
   it stopped reading as glass and started reading as a lighter panel laid on
   the navy. There is no saturate() in the filter — it was at 140%, and since
   everything behind the field is navy, all it did was deepen the blue coming
   through, so the "glass" had a colour of its own. And the blur is 4px, enough
   to soften the pattern behind the field without smearing it into a haze. */
.search-entry-shell,
.site-nav .search-entry-shell,
.home-search .search-entry-shell,
body.is-search-mode .site-nav .search-entry-shell {
    background: rgb(0 0 0 / 42%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* border: 1px solid rgba(226, 232, 240, 0.38); */
    box-shadow: 0 6px 18px rgba(4, 12, 24, 0.18);
}

/* Focus brightens the rule rather than adding a second ring, so the field does
   not grow by two pixels the moment it is clicked. */
.search-entry-shell:focus-within,
.site-nav .search-entry-shell:focus-within,
.home-search .search-entry-shell:focus-within {
    border-color: rgba(241, 245, 249, 0.68);
    background: rgba(255, 255, 255, 0.07);
}

.navbar-search .search-entry-shell .ts-control input,
.site-nav .search-entry-shell .ts-control input,
.home-search .search-entry-shell .ts-control input {
    color: #f1f5f9 !important;
    caret-color: #e2e8f0 !important;
}

.search-entry-shell .ts-control input::placeholder,
.site-nav .ts-control input::placeholder,
.home-search .ts-control input::placeholder {
    color: rgba(226, 232, 240, 0.52) !important;
}

.search-entry-shell .search-magnifier,
.site-nav .search-entry-shell .search-magnifier,
.home-search .search-entry-shell .search-magnifier {
    color: rgba(226, 232, 240, 0.78);
}

.search-ghost-text,
.site-nav .search-ghost-text {
    color: rgba(226, 232, 240, 0.46);
}

.home-search .search-ghost-text.is-visible::before {
    background: #e2e8f0;
}

/* The chosen terms. Gold-tinted glass on glass, so they read as part of the
   field rather than as chips dropped into it. */
/* The chips' own skin went with the glass pass; it is the gold chip at the end
   of this file now. */


/* The submit button keeps its navy fill and its gold-light text: that pairing
   was chosen for contrast — 9.29:1 — and it is what keeps the button reading as
   the action rather than as more of the field. Its rule follows the field's to
   silver, so the gold is carried by the word alone and there is one warm thing
   in the bar rather than two. */
.search-btn-with-border {
    border-color: rgba(226, 232, 240, 0.34) !important;
}

.search-btn-with-border:hover,
.search-btn-with-border:focus-visible {
    border-color: rgba(241, 245, 249, 0.6) !important;
}


/* One rule around the field, not two.
 
   .ts-control — Tom Select's inner box, which holds the tokens and the caret —
   carries a gold border and a translucent white fill of its own, in .site-nav
   and .home-search both. Those are an earlier, partial run at this same glass
   idea, from when the shell around them was opaque white and hid them entirely.
   With the shell now transparent they showed through, half a pixel inside the
   shell's own rule, and the field had two bright outlines a hairsbreadth apart.
 
   The shell is the surface. The control inside it is just a box for the text. */
.search-entry-shell .ts-control,
.site-nav .ts-control,
.site-nav .ts-wrapper .ts-control,
.site-nav .ts-wrapper.form-control .ts-control,
.site-nav .navbar-search .ts-control,
.site-nav .form-control.ts-control,
.home-search .ts-control,
.navbar-search .ts-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.search-entry-shell .ts-control:focus-within,
.site-nav .ts-control:focus-within,
.site-nav .ts-wrapper.focus .ts-control,
.site-nav .form-control.ts-control:focus-within,
.home-search .ts-control:focus-within,
.home-search .ts-wrapper.focus .ts-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* The profile menu, flipped above its chip when the window has no room below.
   Set as a class rather than an inline top, because the panel is anchored by
   the stylesheet — see positionUserProfileMenu, which used to write a viewport
   `left` into an absolutely positioned element and pushed the whole page
   sideways. */
.profile-dropdown.profile-dropdown--above {
    top: auto;
    bottom: calc(100% + 0.5rem);
}


/* ── The navbar is one row, at every width ──────────────────────────────────
   It was one row below 992px and one row above about 1150, and two rows in
   between: at 1024 the three children measured 1106px inside a 960px
   container, so the sign-in and language controls dropped underneath and the
   bar doubled to 102px.

   Two things caused it, and neither applied under 992px because the mobile
   block below already overrides both. The row carries Bootstrap's .flex-wrap
   from the template, so it is allowed to wrap; and the search field is
   flex: 1 1 70% with a 900px cap, so it claims a share of the row rather than
   taking what is left of it. Between 992 and 1150 the container is 960px —
   Bootstrap's lg step — which is the one range where 70% plus the logo plus
   the actions does not fit.

   So the row never wraps, and the search field shrinks instead. min-width: 0
   is the part that makes that work: a flex item will not shrink below its
   content without it, and the field's content is a text input, which reports a
   default intrinsic width. */
.navbar-top {
    flex-wrap: nowrap !important;
}

#queryBar,
.navbar-search {
    flex: 1 1 auto;
    min-width: 0;
}

/* The sign-in and language controls are buttons: they are as wide as their
   labels and there is nothing in them to give up. They were shrinking anyway —
   flex-shrink defaults to 1 — so at 320px the group was squeezed to 81px while
   the buttons inside it still measured 97 and spilled 9px past the window,
   which is where the horizontal scrollbar on a small phone came from. The
   search field is the one thing in the row that can give, so it is the only
   thing that does. */
.menu-context-row {
    flex: 0 0 auto;
}


/* On a phone the header links are in the menu, not in the row.

   They were icons here for a while, and the reason was that the hub and updates
   headers had no mobile menu of their own: hiding the links would have left a
   phone with no way out of the page, so they were shrunk to a magnifier, a book
   and a bolt instead. There is a menu on every page now and Browse and Updates
   are items in it, so the icons offer the same two destinations a second time —
   in the one row with no room to spare.

   Hidden on the breakpoint the menu appears on, so the two swap exactly rather
   than both showing across a stretch of widths. !important because the markup
   carries Bootstrap's .d-flex, which is itself !important. */
@media (max-width: 767.98px) {
    .home-nav-links {
        display: none !important;
    }
}

/* Prose from the data files can carry a run with nothing to break on — a bare
   URL in a references line, or sources joined by semicolons with no spaces. At
   320px al-Kafi's ":al-islam.org;en.wikishia.net;en.wikipedia.org;" measured
   270px inside a 246px column and pushed the whole document to 359px, giving
   the page a horizontal scrollbar with no element visibly out of place — the
   run is inside a paragraph whose own box stays put.
 
   `anywhere` rather than `break-word` on purpose: only `anywhere` lowers the
   element's min-content width, and it is the min-content width that was
   forcing the column, the section and the page wider. */
.hub-blurb__body,
.hub-hero__intro-text,
.hub-hero__lede {
    overflow-wrap: anywhere;
}


/* The chip's skin and size are one rule, at the end of this file. Successive
   design passes each left one of these behind — gold-on-glass, navy-on-white,
   two more — and because they are a class more specific than a plain
   .ts-control .item they quietly outranked it. */

/* ── The chosen search terms ────────────────────────────────────────────────
   Material-style chips in the navbar's gold — var(--gold-light) over #0b1728,
   the same pairing as the signed-in chip at the other end of the bar, so the
   two things that show the reader's own state look like each other.

   Not scoped to .site-nav / .home-search / .navbar-search any more. There is
   one Tom Select per page and it is always the search field, so scoping it
   three ways only left room for a fourth to be forgotten.

   They fill the field: the control's content box is 24px — 36 of shell, less 2
   of border, less 6 of wrapper padding, less 4 of the control's own — and the
   chip is 24, so it sits flush and the breathing room is the shell's.

   The label is 500, not 600. At 600 in a 13px face on a light fill the words
   read as shouting, and a chip is a quiet object: it is the thing you typed,
   not a button. */
.ts-control .item,
.ts-wrapper.multi .ts-control > div {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 2px 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: var(--gold-light) !important;
    border: 0 !important;
    color: #0b1728 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.005em !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    margin: 0 4px 0 0 !important;
}

[dir="rtl"] .ts-control .item,
[dir="rtl"] .ts-wrapper.multi .ts-control > div {
    padding: 0 10px 0 2px !important;
    margin: 0 0 0 4px !important;
}

/* The × that drops a term.
 
   Tom Select ships it with a negative top margin and one-sided padding, which
   is what had it sitting a pixel above the chip's own top edge and two-thirds
   of the way up — a 14px glyph floating in a 24px chip. Those are cleared and
   it becomes what it looks like: a round 18px target, centred by the chip's
   own flex, dark like the label but quieter until you reach for it. */
.ts-control .item .remove {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: rgba(11, 23, 40, 0.5) !important;
    background: transparent !important;
    transition: background 120ms ease, color 120ms ease;
}

.ts-control .item .remove:hover,
.ts-control .item .remove:focus-visible {
    color: #0b1728 !important;
    background: rgba(11, 23, 40, 0.12) !important;
}

/* Tom Select marks the chip being removed; keep it from flashing its old skin. */
.ts-control .item.active {
    background: var(--gold) !important;
    color: #0b1728 !important;
}


/* ── The navbar's search field on every page but the search page ────────────
   A plain input wearing the same glass shell as the Tom Select field, so the
   header does not change shape as a reader moves between a book page and the
   results. It sits between the links and the account controls and takes the
   slack in the row, the way the real field does. */
.nav-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
    margin-inline: 0.75rem;
}

.nav-search__shell {
    display: flex;
    align-items: center;
    padding-inline-start: 1.92rem;
    padding-inline-end: 3px;
}

.nav-search .search-magnifier,
.site-nav .nav-search .search-magnifier {
    position: absolute;
    /* Both ends, not just the start. The shared .search-entry-shell rule pins this
       with a physical `left`, so setting only inset-inline-start left that in place
       on the Arabic side: left and right both set, and a 15px icon stretched to
       615px across the whole field. The .site-nav arm of the selector is there for
       the same reason — the rule that pins it carries that ancestor and so outranks
       a plain .nav-search one. */
    inset-inline-start: 0.72rem;
    inset-inline-end: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.nav-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #f1f5f9;
    font-family: var(--font-ui);
    font-size: 1.02rem;
    line-height: 1;
    outline: none;
}

.nav-search__input::placeholder {
    color: rgba(226, 232, 240, 0.52);
}

/* Chrome draws its own clear affordance on a search input, which would be a
   second × in a bar that already has one idea of how to drop a term. */
.nav-search__input::-webkit-search-cancel-button,
.nav-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.nav-search__btn {
    flex: 0 0 auto;
    height: var(--search-action-height);
    padding-inline: 0.75rem !important;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* On a phone the button's word is not the point of the row; the button is. It
   used to go away entirely under 576px, on the reasoning that the magnifier at
   the other end of the field already said what the field does — and then the
   magnifier went too, because the button on every other field is itself a
   magnifying glass and two of them side by side said the same thing twice. That
   left this field, on the hub and static pages, with no search affordance at
   all: no icon, no button, just a dark box.

   So it stays, as the same 34px square the home and search fields shrink to. The
   padding override has to be undone by name because the rule above sets it with
   !important, which the square's `padding: 0` would otherwise lose to. */
@media (max-width: 575.98px) {
    .nav-search {
        margin-inline: 0.4rem;
    }

    .nav-search__btn {
        padding-inline: 0 !important;
    }

    .nav-search__shell {
        padding-inline-end: 3px;
    }
}


/* ── The field, lit ─────────────────────────────────────────────────────────
   Darker than the navy it sits on rather than lighter, so the field reads as a
   recess rather than a panel laid on top, with a soft gold bloom around the
   rule — enough to look lit, not enough to look like a focus ring. The rule
   itself stays the cool light grey; the warmth is all in the glow.

   Three shadows, each doing one thing: a hairline gold halo tight to the edge,
   a wider soft bloom outside it, and a faint inner warmth so the glass looks
   lit from within rather than outlined. */
.search-entry-shell,
.site-nav .search-entry-shell,
.home-search .search-entry-shell,
body.is-search-mode .site-nav .search-entry-shell {
    background: rgba(6, 14, 28, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(226, 232, 240, 0.34);
    box-shadow:
        0 0 0 1px rgba(247, 225, 166, 0.10),
        0 0 12px rgba(247, 225, 166, 0.14),
        inset 0 0 10px rgba(247, 225, 166, 0.045);
}

.search-entry-shell:focus-within,
.site-nav .search-entry-shell:focus-within,
.home-search .search-entry-shell:focus-within {
    background: rgba(6, 14, 28, 0.62);
    border-color: rgba(241, 245, 249, 0.6);
    box-shadow:
        0 0 0 1px rgba(247, 225, 166, 0.20),
        0 0 16px rgba(247, 225, 166, 0.24),
        inset 0 0 12px rgba(247, 225, 166, 0.06);
}

/* Refine Search sat at 43px and 13.8px beside a Search button of 28px and
   11.5px — two controls a centimetre apart, one half again the size of the
   other. The submit button cannot grow, since it lives inside the field, so
   this comes down to meet it: same height, same type, same tracking. It keeps
   its pill and its gold, because it is a disclosure and not a submit. */
.home-hero__refine-toggle {
    min-height: var(--search-action-height);
    padding: 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    gap: 0.4rem;
}


/* ── The field: warmer light, squarer chips, a visible button, and a mirror ──
   Everything below is the search field, in the order it was asked for. */

/* 1. A dark field inside one plain grey rule. No shadow at all: the glow that
      was here read as light coming off the edge, and the edge is enough. */
.search-entry-shell,
.site-nav .search-entry-shell,
.home-search .search-entry-shell,
body.is-search-mode .site-nav .search-entry-shell {
    background: rgba(6, 14, 28, 0.58);
    border: 1px solid rgba(226, 232, 240, 0.34);
    box-shadow: none;
}

/* Focus brightens the same rule rather than adding a ring, so the field does
   not grow by two pixels the moment it is clicked. */
.search-entry-shell:focus-within,
.site-nav .search-entry-shell:focus-within,
.home-search .search-entry-shell:focus-within {
    background: rgba(6, 14, 28, 0.64);
    border-color: rgba(226, 232, 240, 0.6);
    box-shadow: none;
}

/* 2. Squarer. A pill made every term look like a tag to be dismissed; a chip
      with a small radius reads as a word you put there. */
.ts-control .item,
.ts-wrapper.multi .ts-control > div {
    border-radius: 5px !important;
}

/* 3. The submit button. Navy with gold text was chosen when the field behind it
      was near-white, and on dark glass it disappeared. Gold fixed the contrast
      and created a different problem: gold on navy is what the term chips are,
      so the button read as one more chip — the only one you could not remove.

      White, then. It is the only solid light mass in the bar that is not gold,
      so it separates from the chips by hue rather than by brightness, and dark
      navy on white is the strongest contrast available here. It matches Sign In
      at the other end of the row, which is the other thing in the header that
      does something rather than describes something. */
.search-btn-with-border {
    background: #f4f7fb !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    color: #0b1728 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.search-btn-with-border:hover,
.search-btn-with-border:focus-visible {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0b1728 !important;
}

.search-btn-with-border i {
    color: inherit !important;
}

/* 4. Arabic reads right to left, so the field starts on the right and ends on
      the left: the magnifier belongs at the right edge and the submit at the
      left. The Tom Select field had both pinned with physical properties — the
      actions absolutely placed at right: 5px, the control reserving its room
      with padding-right — so in Arabic the button sat at the start of the line,
      on the right, while the plain field in the header put it on the left. Same
      bar, two different sides depending on the page. Mirrored here. */
[dir="rtl"] .search-entry-actions {
    right: auto;
    left: 5px;
}

[dir="rtl"] .navbar-search .search-entry-shell .ts-control,
[dir="rtl"] .site-nav .search-entry-shell .ts-control,
[dir="rtl"] .home-search .search-entry-shell .ts-control {
    padding-left: var(--search-entry-side-pad) !important;
    padding-right: 1.92rem !important;
}

[dir="rtl"] .search-entry-shell .search-magnifier,
[dir="rtl"] .site-nav .search-entry-shell .search-magnifier,
[dir="rtl"] .home-search .search-entry-shell .search-magnifier {
    left: auto;
    right: 0.72rem;
}

[dir="rtl"] .search-ghost-text,
[dir="rtl"] .site-nav .search-ghost-text {
    left: var(--search-entry-side-pad);
    right: 1.92rem;
    text-align: right;
}

/* 4b. The mode menu opens into the page, not off the side of it.
      .search-mode-menu is anchored right: 0 to the submit button and opens
      leftward. That was fine while the button sat at the right of the field;
      with the button mirrored to the left in Arabic it put a 324px panel 179px
      past the left edge and gave the Arabic home page a horizontal scrollbar
      between 820 and 1366px. Anchored to the other edge, it opens inward. */
[dir="rtl"] .search-mode-menu {
    right: auto;
    left: 0;
}

/* 5. The white shimmer. A fade strip sits at the end of the term list so a
      chip scrolling under the button is not sliced mid-word, and it was painted
      in the old field's near-white — an opaque rgb(225,226,228) smear across a
      field that is now dark glass. It fades to the field's own colour instead,
      and moves to the other end in Arabic with everything else. */
.site-nav .search-entry-shell::after,
.home-search .search-entry-shell::after {
    background: linear-gradient(90deg, rgba(8, 17, 33, 0), rgba(8, 17, 33, 0.92)) !important;
}

[dir="rtl"] .site-nav .search-entry-shell::after,
[dir="rtl"] .home-search .search-entry-shell::after {
    right: auto !important;
    left: var(--search-entry-side-pad) !important;
    background: linear-gradient(270deg, rgba(8, 17, 33, 0), rgba(8, 17, 33, 0.92)) !important;
}

/* 6. Arabic has no capitals and finer strokes, so a weight that reads as
      medium in Latin reads as light in Arabic. The chips carry the reader's own
      words and should be the firmest thing in the field. */
[dir="rtl"] .ts-control .item,
[dir="rtl"] .ts-wrapper.multi .ts-control > div {
    font-weight: 700 !important;
}


/* ── The announcement bar is one line ───────────────────────────────────────
   It wrapped: .site-announcement__inner was flex-wrap: wrap, so on a narrow
   window the sentence took two rows and the bar doubled in height, pushing the
   whole page down. It runs off the end with an ellipsis instead.

   The text is what truncates, not the row. The link at the end — "See how" —
   keeps its own nowrap and stays whole, because a call to action cut to "See
   h…" is worse than a sentence cut short: the sentence still reads, and the
   link is the thing the bar exists for. */
.site-announcement {
    overflow: hidden;
}

.site-announcement__inner {
    /* display too. A rule under 576px turns this back into a block so the icon,
       sentence and link flow as one paragraph — which is what used to keep them
       off three separate rows, back when this wrapped. It also undoes the flex
       layout the truncation depends on, so the sentence went inline again and
       the bar grew to 60px on a phone. Nowrap flex does the same job in one
       line at every width. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

/* display: block matters. The sentence is a <span>, and text-overflow does
   nothing to an inline box — nowrap alone just pushed it off the side of the
   page and gave the document a horizontal scrollbar. As a block flex item that
   is allowed to shrink, it clips and shows the ellipsis. */
.site-announcement__text {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-announcement__icon,
.site-announcement__link {
    flex: 0 0 auto;
}


/* ── Nothing grey before the field arrives ──────────────────────────────────
   For the first quarter-second of a page load the search area painted a light
   grey slab 50px tall, and a native multi-select list box under it, before the
   script replaced both with the real field.

   Two causes, both of them things that should never have been visible.

   .navbar-search__input is a wrapper around the field, not the field: the
   surface belongs to .search-entry-shell inside it. It carried a #efefef fill,
   a border, a shadow and a 50px floor from before the shell existed, and every
   state that matters already overrode all four to transparent — search mode
   does, the home hero does. It only ever showed in the gap before the class
   that hides it was applied, which is exactly the flash.

   And the <select> the field is built from renders as a list box until Tom
   Select wraps it. It is hidden until then, keyed on the class Tom Select adds
   when it takes over, so nothing here has to guess when that happened. */
.navbar-search__input,
.site-nav .navbar-search__input {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    min-height: 0;
    /* The padding goes with them. It was 6px, which both real states already
       set to 0, so all it did was make the wrapper 50px before the script ran
       and 38px after — a twelve-pixel jolt in the navbar on every load. */
    padding: 0;
}

.search-entry-shell > select:not(.ts-hidden-accessible),
.search-entry-shell > select.form-control:not(.ts-hidden-accessible) {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* ── The header's menu on a phone ───────────────────────────────────────────
   Hidden on a desktop, where the links and the globe have room to be
   themselves. Under 768px it is the only one of them left: the links have
   already become icons, and the globe becomes an item inside this instead of a
   button of its own. */
.nav-menu {
    position: relative;
    display: none;
}

/* Size and shape only. The colour is the row's: .top-actions .top-action paints
   everything in it gold on navy, with !important, and this is one of them — it
   stands where the globe stood and should look like what stood there. Setting a
   surface of its own here would only be dead CSS losing to that rule. */
.nav-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    font-size: 0.95rem;
    cursor: pointer;
}

.nav-menu__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    /* Anchored to the end of the row, which mirrors on its own: the button sits
       on the outer edge in both languages and the panel hangs inward from it. */
    inset-inline-end: 0;
    z-index: 2200;
    min-width: 12rem;
    max-width: min(16rem, 86vw);
    padding: 0.3rem;
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: 10px;
    background: #0e1c33;
    box-shadow: 0 14px 30px rgba(4, 12, 24, 0.45);
}

.nav-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 7px;
    color: rgba(245, 248, 251, 0.92);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu__item i {
    width: 1rem;
    text-align: center;
    color: var(--gold-light);
}

.nav-menu__item:hover,
.nav-menu__item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Signed in, the sign-in item goes. The class is set by whichever auth script
   the page runs, so this never has to know which one that is. */
body.is-authed .nav-menu__item--signin {
    display: none;
}

@media (max-width: 767.98px) {
    .nav-menu {
        display: inline-flex;
    }

    /* Its job is now an item in the menu. */
    .top-action.lang-toggle {
        display: none !important;
    }
}


/* ── The field is the same height on a phone as on a desktop ────────────────
   A block at 768px sized it for touch before the bar was made compact: 44px of
   minimum growing to 88px, so the field on a phone was half again the height of
   the one on a laptop and the hero field came out at 52px against 36.

   The reason it could grow was to let the chosen terms wrap onto a second row.
   They do not wrap anywhere else — the control scrolls them sideways instead —
   so the growth bought a taller bar for a behaviour the rest of the site does
   not have. Same height, same scrolling, everywhere.

   The submit height comes down with it: at 34px inside a 36px shell it was
   flush against both edges. */
@media (max-width: 768px) {
    :root {
        --search-shell-height: 36px;
        --search-action-height: 28px;
    }

    .search-entry-shell {
        height: var(--search-shell-height);
        min-height: var(--search-shell-height);
        max-height: var(--search-shell-height);
    }

    .search-entry-shell .ts-wrapper,
    .search-entry-shell .ts-wrapper.form-control {
        height: 100%;
        min-height: 0;
    }

    .navbar-search .search-entry-shell .ts-control,
    .site-nav .search-entry-shell .ts-control,
    .home-search .search-entry-shell .ts-control {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        flex-wrap: nowrap !important;
    }
}


/* ── One magnifying glass on a phone, not two ───────────────────────────────
   On a desktop the field carries a magnifier at its start and the submit at its
   end says "Search" in words: an icon and a label, each doing a different job.
   Under 768px the button loses its label and becomes a magnifying glass itself,
   so the same field ends up with the same icon at both ends — the left one
   decoration, the right one the control.

   The decorative one goes, and the room it was holding goes with it. The start
   padding here is the width of that icon plus its inset; left in place it would
   read as an unexplained indent with the caret floating in the middle of the
   field. */
@media (max-width: 768px) {
    .search-entry-shell .search-magnifier,
    .site-nav .search-entry-shell .search-magnifier,
    .home-search .search-entry-shell .search-magnifier,
    .nav-search .search-magnifier,
    .site-nav .nav-search .search-magnifier {
        display: none !important;
    }

    .nav-search__shell {
        padding-inline-start: 0.6rem;
    }

    /* .ts-wrapper.form-control is in the selector to outrank
       `.site-nav .ts-wrapper.form-control .ts-control`, a four-class rule from an
       older pass that also sets padding-left with !important. Written the obvious
       way, at three classes, this rule matched and lost, and the field kept the
       old indent with nothing in it. */
    .navbar-search .search-entry-shell .ts-wrapper.form-control .ts-control,
    .site-nav .search-entry-shell .ts-wrapper.form-control .ts-control,
    .home-search .search-entry-shell .ts-wrapper.form-control .ts-control {
        padding-left: 0.7rem !important;
    }

    .search-ghost-text,
    .site-nav .search-ghost-text {
        left: 0.7rem;
    }

    [dir="rtl"] .navbar-search .search-entry-shell .ts-wrapper.form-control .ts-control,
    [dir="rtl"] .site-nav .search-entry-shell .ts-wrapper.form-control .ts-control,
    [dir="rtl"] .home-search .search-entry-shell .ts-wrapper.form-control .ts-control {
        padding-left: var(--search-entry-side-pad) !important;
        padding-right: 0.7rem !important;
    }

    [dir="rtl"] .search-ghost-text,
    [dir="rtl"] .site-nav .search-ghost-text {
        left: var(--search-entry-side-pad);
        right: 0.7rem;
    }
}

/* ── Search field: where the caret and the placeholder actually sit ──────────

   Two things were wrong in the same bar, and both were measured against the
   live page rather than guessed at.

   Vertically, the caret and the typed text rendered 3px above the magnifier,
   the Search button and the reading scope, all of which centre on the same
   line. The cause is that Tom Select's control is a wrapping flex container:
   align-items centres items *within* a flex line, but with a single line in a
   box taller than it, align-content is what decides where that line sits - and
   it was flex-start, which pinned the line to the top of the content box.

   Horizontally, the left inset stacked three deep - the shell's inset, which
   exists to clear the magnifier, plus Tom Select's own wrapper and control,
   each adding their own - so the placeholder began about 65px into a bar whose
   icon ends at 27px. Only the shell's inset has a job to do. */

.search-entry-shell .ts-control {
    align-content: center !important;
    /* `safe` matters once terms wrap onto a second line. Centring lines in a box
       they overflow pushes the first one above the top edge, and a scroll
       container cannot scroll to negative offsets - the row would be
       unreachable. `safe` falls back to start alignment in exactly that case,
       so centring applies when it helps and gets out of the way when it would
       hide something. Declared after the plain value, so a browser that does
       not understand it keeps the line above. */
    align-content: safe center !important;
}

/* Only the nav bar's control is narrowed, and only its own inset.

   The two search bars are built differently, which is the trap here. The nav
   shell carries the inset that clears the magnifier and its control adds more
   on top; the search page's shell carries none, so its control's inset is the
   only clearance the icon has. An earlier attempt zeroed Tom Select's wrapper
   padding for both, which read correctly in the nav and left the search page
   with four pixels - a selected term sat on top of the magnifier there.

   So the wrapper keeps its padding, and this is scoped by .nav-search__shell -
   the class only the nav's shell carries - rather than by .navbar-search, which
   also matches the search page and took that page's only clearance away.

   Enough is left that a chip, which carries a filled background and a border,
   still clears the icon - plain grey placeholder text looks comfortable at a
   distance where a chip does not.

   The wrapper is named in these selectors to carry the same weight as
   `.site-nav .ts-wrapper.form-control .ts-control`, which sets the inset this
   replaces. Being later in the file is not enough against it - that one counts
   four classes to a plain three, so without the wrapper here it simply loses. */
.site-nav .search-entry-shell.nav-search__shell .ts-wrapper .ts-control,
.site-nav .search-entry-shell.nav-search__shell .ts-wrapper.form-control .ts-control {
    padding-left: 0.25rem !important;
}

/* The mirror. Only the start side moves; the end side keeps the room the
   Search button needs, which in Arabic is on the left. */
[dir="rtl"] .site-nav .search-entry-shell.nav-search__shell .ts-wrapper .ts-control,
[dir="rtl"] .site-nav .search-entry-shell.nav-search__shell .ts-wrapper.form-control .ts-control {
    padding-left: var(--search-entry-side-pad) !important;
    padding-right: 0.25rem !important;
}

/* The nav bar's placeholder is a hint, not a heading. At the input's own 1.02rem it
   read as large as the page title beside it, so in English it steps down a size and
   recedes. Only the placeholder: what the reader types keeps the full size. Arabic
   is left as it was, which already reads right. */
html:not([dir="rtl"]) .site-nav .nav-search__shell input::placeholder {
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    color: rgba(226, 232, 240, 0.4) !important;
}

/* ── The book in its pages: covers on the cards, stars on the numbers ────────
   The bookcase on /books is where a reader picks a book; these carry it down the
   levels below, so a volume page of al-Kāfi still looks like al-Kāfi. Each page's
   <main> carries the book's leather as --leather (BookShelf.thumb).

   A volume or part card starts with the book itself, drawn small and standing
   face on, its page block as thick as the share of the book the card holds -
   al-Kāfi's 594-chapter eighth volume is a fat one, its 165-chapter seventh a
   slimmer one. The fore-edge is on the left because these are Arabic books,
   bound on the right, whichever language the page is in. */
.hub-card--book {
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
    padding-inline-start: 1.15rem;
    border-top-color: color-mix(in srgb, var(--leather, #1e3a5f) 80%, transparent);
}

.hub-card__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    justify-content: center;
}

.hub-card__book {
    position: relative;
    z-index: 1;
    flex: none;
    width: 46px;
    aspect-ratio: 2 / 3;
    margin-inline-start: var(--pages, 4px);
    border-radius: 2px 3px 3px 2px;
    background: var(--leather, #16213d);
    filter: drop-shadow(0 5px 6px rgba(15, 23, 42, 0.28));
    transform: rotate(-1.5deg);
    transition: transform 220ms ease, filter 220ms ease;
}

/* The page block, showing past the fore-edge. */
.hub-card__book::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 100%;
    width: var(--pages, 4px);
    border-radius: 2px 0 0 2px;
    background: repeating-linear-gradient(90deg, #efe5cb 0 1px, #cdb98d 1px 2px);
}

.hub-card__book img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* The joint at the spine and the rounding of the board, so the cover is not flat. */
.hub-card__book::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.14) 7%, transparent 14%,
        transparent 88%, rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.hub-card--book:hover .hub-card__book {
    transform: rotate(0deg) translateY(-3px) scale(1.06);
    filter: drop-shadow(0 9px 10px rgba(15, 23, 42, 0.3));
}

/* The volume number, on a leather label across the lower cover. */
.hub-card__book-no {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 13%;
    min-width: 20px;
    padding: 1px 5px;
    transform: translateX(-50%);
    border: 1px solid rgba(226, 196, 120, 0.85);
    border-radius: 2px;
    background: var(--leather, #16213d);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-family: var(--font-ornament);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: #e9cf8a;
}

/* The ۞ in the corner was there so a card was not just a rectangle; the book does
   that now. */
.hub-card--book::after {
    content: none;
}

.hub-card--book .hub-card__title {
    flex: none;
    margin-bottom: 0.45rem;
    padding-right: 0;
}

/* Chapters and narrations are numbered inside an eight-pointed star, the ۞ the site
   already uses for ornament: a faint gold outline at rest, and on hover it fills
   with the book's leather and the number turns gold, as the book's own gilding does
   on the shelf. The star is two masks, a filled one for the leather and an outline
   for the gold, so the colour can come from --leather. */
.hub-chapter {
    align-items: flex-start;
}

.hub-chapter__index {
    display: grid;
    place-items: center;
    width: 2.15rem;
    min-width: 0;
    height: 2.15rem;
    /* Centred on the title's first line: (line height - star) / 2. */
    margin-top: calc((0.98rem * 1.5 - 2.15rem) / 2);
    /* Digits carry their ink above the middle of the line box, in Inter and in the
       system Arabic face alike; measured, this puts them in the middle of the star. */
    padding-top: 2px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: var(--text-muted);
}

.hub-chapter__index::before,
.hub-chapter__index::after,
.hadith-static-list .hadith-card__result-num::before {
    content: "";
    -webkit-mask: var(--star-mask) center / contain no-repeat;
    mask: var(--star-mask) center / contain no-repeat;
}

.hub-chapter__index::before,
.hub-chapter__index::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: background 150ms ease;
}

.hub-chapter__index::before,
.hadith-static-list .hadith-card__result-num::before {
    --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='4.5' width='15' height='15'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
}

.hub-chapter__index::before {
    background: color-mix(in srgb, var(--leather, #1e3a5f) 6%, transparent);
}

.hub-chapter__index::after {
    --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.1'%3E%3Crect x='4.5' y='4.5' width='15' height='15'/%3E%3Crect x='4.5' y='4.5' width='15' height='15' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
    background: rgba(200, 162, 61, 0.55);
}

.hub-chapter:hover .hub-chapter__index {
    color: #ecd391;
}

.hub-chapter:hover .hub-chapter__index::before {
    background: var(--leather, #1e3a5f);
}

.hub-chapter:hover .hub-chapter__index::after {
    background: #d9b65c;
}

[dir="rtl"] .hub-chapter__index { font-size: 0.74rem; }

/* A narration's number in a chapter carries the same star, filled, in the book's
   leather. Only on the chapter page: the card is shared with the search results,
   where narrations from many books sit side by side. */
.hadith-static-list .hadith-card__result-num {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hadith-static-list .hadith-card__result-num::before {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    background: var(--leather, #1e3a5f);
}

@media (prefers-reduced-motion: reduce) {
    .hub-card__book {
        transition: none;
    }
}

/* The Arabic chapter title is set larger and looser (1.12rem at 1.6), so its first
   line is taller and the star centres on that instead. */
[dir="rtl"] .hub-chapter__index {
    margin-top: calc((1.12rem * 1.6 - 2.15rem) / 2);
}
/* ── Narrator pages ─────────────────────────────────────────────────────────────
   A narrator page is a page of quotations: every line on it belongs to a named book
   at a named page, and the layout has to keep that visible. The entry blocks carry
   the book's own words in Arabic; the verdict chips at the top carry the books'
   disagreement, which is usually the reason a reader came. */

.narrator-name-ar {
    font-family: var(--font-arabic);
    line-height: 1.5;
}

.narrator-name-en {
    margin: 0.35rem 0 0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
}

.narrator-verdicts {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.narrator-verdict {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.86);
}

.narrator-verdict__book {
    font-family: var(--font-ui);
    letter-spacing: 0.02em;
}

/* The grade is a word from the book, not a score of ours, so it is set as a quoted
   label rather than a coloured badge; only trust and its opposite are tinted, and
   then only enough to be scannable down a column. */
.narrator-verdict__grade {
    font-family: var(--font-ui);
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
}

.narrator-verdict__grade--thiqa,
.narrator-verdict__grade--saduq,
.narrator-verdict__grade--hasan {
    background: rgba(120, 190, 140, 0.22);
}

.narrator-verdict__grade--daif,
.narrator-verdict__grade--very_weak,
.narrator-verdict__grade--kadhdhab,
.narrator-verdict__grade--non_existent {
    background: rgba(220, 120, 110, 0.24);
}

.narrator-verdict__where {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
}

.narrator-entries {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.narrator-entry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.1rem 1.3rem;
}

.narrator-entry__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.narrator-entry__book {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

.narrator-entry__author,
.narrator-entry__page {
    font-family: var(--font-ui);
    font-size: 0.76rem;
    color: var(--text-muted);
}

.narrator-entry__grade {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.narrator-entry__heading {
    margin: 0 0 0.5rem;
    font-family: var(--font-arabic);
    font-size: 1.15rem;
    color: var(--text);
}

/* Ibn al-Ghada'iri's book carries Khoei's doubt about its ascription. It sits above the
   text rather than below it: a reader should meet the caveat before the verdict. */
.narrator-entry__note {
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--gold);
    background: var(--gold-bg);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.narrator-entry__text {
    margin: 0;
    font-family: var(--font-arabic);
    font-size: 1.22rem;
    line-height: 2.05;
    color: var(--text);
}

.narrator-entry__text-en {
    margin: 0.7rem 0 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.narrator-entry__generation {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.narrator-entry__label {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.4rem;
}

.narrator-facts,
.narrator-names {
    margin-bottom: 2rem;
}

.narrator-facts__list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.2rem;
    font-size: 0.88rem;
}

/* The columns are named, not left to auto-placement. A <dt> is followed by one <dd>
   per book that states the fact, and auto-placement drops every <dd> after the first
   into whichever cell comes next - which is column 1, the max-content label column. One
   long statement there sized that column to 1,359px and pushed the document 193px wider
   than the viewport. It was a horizontal scrollbar in English and, once the page could
   be read right to left, half of it off the edge. */
.narrator-facts__list dt {
    grid-column: 1;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 0.15rem;
}

.narrator-facts__list dd {
    grid-column: 2;
    margin: 0;
    color: var(--text);
}

.narrator-facts__source {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.narrator-names__list {
    font-family: var(--font-arabic);
    font-size: 1.05rem;
    line-height: 2;
    color: var(--text-secondary);
}

.narrator-provenance {
    margin: 0 0 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .narrator-facts__list {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .narrator-facts__list dt,
    .narrator-facts__list dd {
        grid-column: 1;
    }

    .narrator-facts__list dt {
        margin-top: 0.6rem;
    }

    .narrator-entry__grade {
        margin-left: 0;
    }
}

/* The narrator search: one field, because a name is all a reader has. */

.narrator-search__lead {
    max-width: 52ch;
    margin: 0.6rem auto 0;
    font-family: 'Literata', Georgia, serif;
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.narrator-search {
    display: flex;
    gap: 0.5rem;
    max-width: 34rem;
    margin: 1.2rem auto 0;
}

.narrator-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 0.92rem;
    color: var(--text);
}

.narrator-search__button {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 5px;
    background: var(--gold);
    color: #23180a;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.narrator-search__button:hover {
    background: var(--gold-dark);
    color: #fff;
}

.narrator-results {
    margin-bottom: 2rem;
}

.narrator-result__name {
    font-family: var(--font-arabic);
    font-size: 1.28rem;
    line-height: 1.6;
    color: var(--text);
}

.narrator-result__name-en {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* What tells one man of a name from another: the Imams he transmitted under, the year he
   died, where he lived. Dim, because it is there to be scanned down a column of twenty
   cards rather than read, and separated by middots so a row reads as one line. */

.narrator-result__life {
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* The middot hangs off the end of the part before it, not the start of the part after:
   on a card narrow enough to wrap, a leading separator opens the second line. */

.narrator-result__life > span:not(:last-child)::after {
    content: "·";
    margin: 0 0.4rem;
    opacity: 0.55;
}

.narrator-result__era {
    color: var(--text-secondary);
}

.narrator-result__died {
    white-space: nowrap;
}

/* Said by a record with no passage behind it. Fainter and dotted, because the page is
   repeating it rather than standing behind it. */

/* On whose authority a verdict rests, where it is not the early rijāl. Set under the badge
   rather than beside it: a reader who takes in «Held weak» and stops reading has still been
   told the wrong thing, so the qualification sits in the same breath. */

/* The books quoted rather than summarised. The word they used carries the colour, since
   that is the thing a reader is looking for; the book's name sits quieter beside it. */

.narrator-said {
    margin-top: 0.8rem;
}

.narrator-said__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.narrator-said__word {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.6rem;
    border-radius: 3px;
}

.narrator-said__row--for .narrator-said__word {
    background: rgba(120, 190, 140, 0.26);
    color: #d7f0dd;
}

.narrator-said__row--against .narrator-said__word {
    background: rgba(220, 120, 110, 0.26);
    color: #f6dcd9;
}

.narrator-said__row--mixed .narrator-said__word {
    background: rgba(200, 162, 61, 0.28);
    color: #f3e5b8;
}

.narrator-said__books {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
}

.narrator-said__relayed,
.narrator-stands__relays {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    opacity: 0.7;
    font-style: italic;
}

.narrator-standing__rests {
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    opacity: 0.82;
}

/* A long entry folded away. The summary is a line a reader chooses to open, not a control
   that looks like a button: this is a book's own text, and the page should not dress it up. */

.narrator-entry__long > summary {
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--gold-dark);
    padding: 0.45rem 0;
    list-style-position: inside;
}

.narrator-entry__long > summary:hover {
    text-decoration: underline;
}

.narrator-entry__long[open] > summary {
    margin-bottom: 0.4rem;
}

.narrator-result__source {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.narrator-result__said {
    opacity: 0.72;
    border-bottom: 1px dotted currentColor;
}

/* The verdict is the one thing on the card a reader came for, so it carries colour where
   nothing else on the card does — and only where a book actually grades him. */

.narrator-result__standing {
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* The hero's badges are light on a dark panel; a card is dark on light, so the same three
   hues are taken down rather than reused as they stand. */

.narrator-result__standing--trusted {
    color: #2f6b43;
}

.narrator-result__standing--weakened {
    color: #9b3028;
}

.narrator-result__standing--disputed {
    color: var(--gold-dark);
}

/* Where each book stands: a table, because the reader's question is comparative — who says
   what — and chips scattered under a heading answered it badly. */

.narrator-standing {
    display: inline-block;
    margin-top: 0.7rem;
    padding: 0.2rem 0.7rem;
    border-radius: 3px;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.narrator-standing--disputed { background: rgba(200, 162, 61, 0.28); color: #f3e5b8; }
.narrator-standing--trusted  { background: rgba(120, 190, 140, 0.26); color: #d7f0dd; }
.narrator-standing--weakened { background: rgba(220, 120, 110, 0.26); color: #f6dcd9; }
.narrator-standing--unstated { background: rgba(255, 255, 255, 0.14); color: rgba(255,255,255,0.8); }
.narrator-standing--not_graded { background: rgba(255, 255, 255, 0.10); color: rgba(255,255,255,0.72); }

.narrator-imam-note {
    margin: 0.9rem 0 0;
    max-width: 48ch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.narrator-stands {
    margin-bottom: 2.4rem;
}

.narrator-stands__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.narrator-stands__table th {
    width: 16rem;
    padding: 0.5rem 1rem 0.5rem 0;
    text-align: left;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.narrator-stands__table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.narrator-stands__position {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-right: 0.8rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    background: var(--bg-subtle);
}

.narrator-stands__position--for { background: rgba(120, 190, 140, 0.2); }
.narrator-stands__position--against { background: rgba(220, 120, 110, 0.18); }
/* A grade we cannot tie to a passage: shown, but without the colour that reads as a verdict
   the reader can check. No green, no red — it is not evidence until there is a page behind it. */
.narrator-stands__position--unsourced {
    background: rgba(140, 140, 140, 0.14);
    font-style: italic;
}
.narrator-stands--unsourced { opacity: 0.86; margin-block-start: 1.25rem; }
/* Why this grade is set aside, beside the grade itself: quiet, because it is a note
   about our evidence and not part of what the book says. */
/* Relations our records hold out of an entry that does not name the man: the same quiet
   treatment the set-aside grades get, because it is the same admission. */
.chains__indexed--unsaid { opacity: 0.9; }
.chains__indexed--unsaid .chains__name { font-style: italic; }

.narrator-stands__why {
    margin-inline-start: 0.4rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.narrator-stands__page {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.narrator-stands__divided {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.narrator-stands__note {
    margin: 0.9rem 0 0;
    max-width: 62ch;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* The narrator strip above search results: present only when the query names a man. */

.narrator-strip {
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 5px;
    background: var(--surface-warm);
}

.narrator-strip__label {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.narrator-strip__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.narrator-strip__card {
    flex: 1 1 15rem;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
}

.narrator-strip__card:hover {
    border-color: var(--gold);
}

.narrator-strip__name {
    font-family: var(--font-arabic);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text);
}

.narrator-strip__name-en {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.narrator-strip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.narrator-strip__standing {
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
}

.narrator-strip__standing--disputed { background: var(--gold-bg); color: var(--gold-dark); }
.narrator-strip__standing--trusted  { background: rgba(120, 190, 140, 0.22); color: #2f6b45; }
.narrator-strip__standing--weakened { background: rgba(220, 120, 110, 0.18); color: #8d3a32; }

.narrator-narrations {
    margin-bottom: 2.5rem;
}

.narrator-narrations__caveat {
    max-width: 72ch;
    margin: 0 0 1.1rem;
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.narrator-narrations__caveat p {
    margin: 0 0 0.5rem;
}

.narrator-narrations__caveat .narrator-names__chip {
    font-size: 0.95rem;
    padding: 0.12rem 0.55rem;
}

/* A Rijal entry folded to a readable height, with the same control a long narration uses. */
.narrator-entry__text--clamped {
    max-height: 15rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* A hero chip says what it is before it says the value. */
.hub-stat__label {
    margin-right: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.62;
}

.narrator-entry__grade {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.8rem;
}

/* Narrator page tabs. Links, not script: each tab is a URL, and the page works without JS. */

.narrator-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1.6rem;
    border-bottom: 1px solid var(--border);
}

.narrator-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}

.narrator-tab:hover {
    color: var(--primary);
    background: var(--bg-subtle);
}

.narrator-tab--active {
    border-color: var(--border);
    background: var(--surface);
    color: var(--primary);
}

.narrator-tab__count {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-subtle);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.narrator-tab--active .narrator-tab__count {
    background: var(--gold-bg);
    color: var(--gold-dark);
}

/* Aliases as chips. A dot-separated run of twenty Arabic names reads as one long name. */
.narrator-names__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
}

.narrator-names__chip {
    padding: 0.22rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-arabic);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text);
}

.narrator-names__chips--latin .narrator-names__chip {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   The narrator's seal and the chronology band
   ==========================================================================
   Both sit in the blue hero on a narrator page.

   The seal is the man's name in a roundel and never a portrait. No likeness of
   any of these people exists, there are more than sixteen thousand of them, and
   for the Prophet and the Imams a depiction is prohibited outright. Calligraphy
   inside an ornamental frame is the tradition's own answer, and because it is
   text rather than an image it needs no exception for any entry.

   The band answers "when was he". A rijal entry says "a companion of al-Sadiq"
   and leaves the reader to know what that means; the band shades that imamate
   and marks the death year on the same axis, so an entry whose generation and
   whose death year disagree shows it rather than hiding it. */

.narrator-seal {
    float: inline-end;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-inline-start: 1rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.20));
    border: 1px solid rgba(200, 162, 61, 0.55);
    box-shadow: inset 0 0 0 3px rgba(200, 162, 61, 0.12);
}

.narrator-seal__mark {
    font-family: "Scheherazade New", "Amiri", serif;
    /* The mark is one or two words and the roundel is fixed, so the type gives way
       rather than the frame: أبو رافع has to sit where زرارة does. */
    font-size: clamp(0.66rem, 1.4vw, 1.05rem);
    line-height: 1.1;
    max-width: 3.2rem;
    text-align: center;
    color: var(--gold, #c8a23d);
    overflow: hidden;
}

/* Six ring treatments, picked by the person's id, so two seals side by side in a
   list of narrators are told apart by more than the word inside them. */
.narrator-seal--v0 { box-shadow: inset 0 0 0 3px rgba(200, 162, 61, 0.12); }
.narrator-seal--v1 { box-shadow: inset 0 0 0 1px rgba(200, 162, 61, 0.45); }
.narrator-seal--v2 { box-shadow: inset 0 0 0 5px rgba(200, 162, 61, 0.10); }
.narrator-seal--v3 { box-shadow: inset 0 0 0 2px rgba(200, 162, 61, 0.30), inset 0 0 0 6px rgba(200, 162, 61, 0.10); }
.narrator-seal--v4 { border-style: double; border-width: 3px; }
.narrator-seal--v5 { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.10); }

@keyframes chronoSheen {
    from { background-position: 180% 0; opacity: 0.9; }
    to   { background-position: -80% 0; opacity: 0; }
}

@keyframes chronoStrike {
    from { opacity: 0; transform: translate(-50%, 0.7rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 575.98px) {
    .narrator-seal { width: 3rem; height: 3rem; }}

/* ── The narrator in numbers ────────────────────────────────────────────────────
   A ledger row rather than a set of cards: these are figures read across against
   each other — how many take from him, how the books divide on him, how much of
   the corpus his name carries — and boxes would break that reading into five
   unrelated facts. */

.ledger {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 2rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-warm);
}

.ledger__cell {
    flex: 1 1 9rem;
    min-width: 0;
    padding: 0.95rem 1.1rem;
    border-inline-start: 1px solid var(--border);
}

.ledger__cell:first-child {
    border-inline-start: none;
}

.ledger__value {
    font-family: 'Literata', Georgia, serif;
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--primary);
}

.ledger__for { color: #2f6b45; }
.ledger__against { color: #8d3a32; }

.ledger__slash {
    color: var(--text-faint);
    margin: 0 0.1rem;
}

.ledger__label {
    margin-top: 0.3rem;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.ledger__note {
    margin-top: 0.15rem;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-muted);
}

@media (max-width: 575.98px) {
    .ledger__value { font-size: 1.4rem; }
}

/* Teachers and students, side by side: the two directions of a chain read against
   each other, not one list after the other. */

.chains {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 1.2rem;
}

.chains__side {
    flex: 1 1 22rem;
    min-width: 0;
}

.chains__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.chains__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid var(--border);
}

.chains__name {
    font-size: 0.92rem;
    color: var(--text);
}

/* Which books record the link — the weight behind the name. */
.chains__books {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: end;
}

.chains__note,
.chains__caveat {
    max-width: 72ch;
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.chains__caveat {
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    margin-bottom: 2.5rem;
}

/* The ledger's cells are links now. */
a.ledger__cell {
    text-decoration: none;
    color: inherit;
    transition: background 160ms ease;
}

a.ledger__cell:hover {
    background: var(--gold-bg);
}

a.ledger__cell:hover .ledger__note {
    color: var(--gold-dark);
}

.narrator-tab.is-active {
    border-color: var(--border);
    background: var(--surface);
    color: var(--primary);
}

.narrator-tab.is-active .narrator-tab__count {
    background: var(--gold-bg);
    color: var(--gold-dark);
}

/* ===========================================================================
   The narrator preview — what a reader gets when he taps a name in an isnād.

   Six lines and a way through: his name, what the books call him and which
   books, when and where he lived, how much is written about him. It sits beside
   the name on a desktop and rises from the bottom edge on a phone, where a
   popover anchored to a word inside a line of Arabic has nowhere to go.

   The grade word is allowed its colour here. Inside the hadith text the names
   stay uncoloured - a chain must read as the compiler wrote it, not as this
   site scores it - but a card the reader asked for is apparatus, and apparatus
   may say which way a judgement leans.
   =========================================================================== */
.narrator-preview {
    position: absolute;
    z-index: 1090;
    width: min(20rem, calc(100vw - 2rem));
    overflow: hidden;
    /* --surface is translucent in the later palette, and the hadith underneath read
       straight through the card. A popover over running text must be opaque — and a
       white card on a near-white page is only a shadow, so it carries a dark head, a
       drawn edge and a shadow deep enough to lift it off the text it covers. */
    background: var(--surface-warm, #fff);
    border: 1px solid rgba(15, 36, 64, 0.22);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 18px 40px -12px rgba(15, 36, 64, 0.45),
                0 4px 12px -4px rgba(15, 36, 64, 0.28),
                0 0 0 1px rgba(15, 36, 64, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.985);
    /* visibility is a discrete property: transitioned, it flips at the halfway mark, so
       the card would still be `hidden` for 80ms after it was told to open - and focus()
       on a hidden element is silently ignored. The reader who opened the card by keyboard
       was then left on the name he came from. So it flips at once on the way in, and is
       held back to the end of the fade on the way out. */
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.narrator-preview.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.narrator-preview.is-waiting {
    /* The fetch is one small document; a spinner would flash and go. */
    cursor: progress;
}

/* The head, where the name is: the navy the rest of the site names things on, under a
   gold rule. It is also what the card is recognised by at a glance. */
.narrator-preview .np__head {
    padding: 0.8rem 1rem 0.75rem;
    background: linear-gradient(180deg, var(--primary, #1e3a5f), var(--primary-dark, #0f2440));
    border-bottom: 2px solid var(--gold, #c8a23d);
}

.narrator-preview .np__rest {
    padding: 0.8rem 1rem 1rem;
}

.narrator-preview .np__shut {
    position: absolute;
    top: 0.25rem;
    right: 0.45rem;
    padding: 0.1rem 0.35rem;
    font-size: 1.3rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: 0;
    cursor: pointer;
}

[dir="rtl"] .narrator-preview .np__shut {
    right: auto;
    left: 0.4rem;
}

.narrator-preview .np__shut:hover {
    color: #fff;
}

.narrator-preview .np__name {
    margin: 0;
    /* The name is RTL inside an LTR card, so its line starts at the right - where the
       close button is. The inset keeps the two apart in either direction. */
    padding-right: 1.5rem;
    padding-left: 0.1rem;
    font-family: var(--font-arabic);
    font-size: 1.3rem;
    line-height: 1.45;
    color: #fff;
}

.narrator-preview .np__name-en {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.72);
}

.narrator-preview .np__said-rows {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.65rem;
    background: var(--surface-cool, #f8fafc);
    border-left: 3px solid var(--border-strong, #d1d8e0);
    border-radius: 3px;
}

[dir="rtl"] .narrator-preview .np__said-rows {
    border-left: 0;
    border-right: 3px solid var(--border-strong, #d1d8e0);
}

.narrator-preview .np__said {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.narrator-preview .np__said + .np__said {
    margin-top: 0.3rem;
}

.narrator-preview .np__word {
    display: inline;
    font-weight: 600;
    color: var(--text, #1a1a2e);
}

.narrator-preview .np__word[lang="ar"] {
    font-family: var(--font-arabic);
    font-size: 1.05rem;
}

/* The English reading of the term, following the term itself. */
.narrator-preview .np__gloss {
    margin-left: 0.4rem;
    font-weight: 400;
    color: var(--text-secondary, #4a5568);
}

.narrator-preview .np__gloss::before {
    content: "\2014\00a0";
    color: var(--text-faint, #cbd5e1);
}

.narrator-preview .np__said--for .np__word {
    color: #0a7a5a;
}

.narrator-preview .np__said--against .np__word {
    color: #a33a2a;
}

.narrator-preview .np__books,
.narrator-preview .np__rests,
.narrator-preview .np__unstated {
    display: block;
    font-size: 0.74rem;
    color: var(--text-secondary, #4a5568);
}

.narrator-preview .np__rests {
    margin: 0.35rem 0 0;
    font-style: italic;
}

.narrator-preview .np__unstated {
    margin: 0;
}

.narrator-preview .np__life,
.narrator-preview .np__weight {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary, #4a5568);
}

.narrator-preview .np__weight {
    color: var(--text-muted, #94a3b8);
}

.narrator-preview .np__dot {
    padding: 0 0.4rem;
    color: var(--text-faint, #cbd5e1);
}

.narrator-preview .np__go {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent, #1e3a5f);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 162, 61, 0.55);
}

.narrator-preview .np__go::after {
    content: " \2192";
}

[dir="rtl"] .narrator-preview .np__go::after {
    content: " \2190";
}

.narrator-preview .np__go:hover {
    color: var(--gold-dark, #a07e28);
    border-bottom-color: var(--gold, #c8a23d);
}

/* On a phone the card leaves the name behind and rises from the bottom edge,
   where a thumb already is and where nothing has to be measured against the
   width of one word in a line of Arabic. */
.narrator-preview.is-sheet {
    position: fixed;
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 72vh;
    overflow-y: auto;
    padding: 0;
    border: 0;
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 32px -8px rgba(15, 36, 64, 0.35);
}

.narrator-preview.is-sheet.is-open {
    transform: none;
}

/* The grab bar a sheet is expected to have, even though this one is dismissed by
   tapping away rather than by dragging. */
.narrator-preview.is-sheet .np__head {
    position: relative;
    padding: 1.1rem 1.15rem 0.85rem;
}

.narrator-preview.is-sheet .np__rest {
    padding: 0.95rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
}

/* The grab bar a sheet is expected to have, even though this one is dismissed by
   tapping away rather than by dragging. */
.narrator-preview.is-sheet .np__head::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: 2.4rem;
    height: 4px;
    margin-left: -1.2rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .narrator-preview,
    .narrator-preview.is-sheet {
        transition: opacity 0.01s linear, visibility 0.01s;
        transform: none;
    }
}

/* A linked name should look reachable without turning the isnād into a row of
   buttons. The dotted gold rule above stays; this adds a faint gold wash under
   the word on hover, so the whole name lights rather than just its underline. */
.hadith-chain .chain-name {
    border-radius: 2px;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.hadith-chain .chain-name:hover,
.hadith-chain .chain-name:focus-visible {
    background-color: rgba(200, 162, 61, 0.1);
    box-shadow: 0 0 0 2px rgba(200, 162, 61, 0.1);
}

/* A grade is coloured by which way it leans - «ثقة» for the man, «كذاب» against him,
   and everything the lists do not classify in neither hue. These names come from the
   books' own words, which is what both cards now show; the older names kept their rules
   above and are left where they are. */
.narrator-result__standing--for {
    color: #2f6b43;
}

.narrator-result__standing--against {
    color: #9b3028;
}

.narrator-result__standing--mixed {
    color: var(--gold-dark, #a07e28);
}

.narrator-strip__standing--for {
    background: rgba(120, 190, 140, 0.22);
    color: #2f6b45;
}

.narrator-strip__standing--against {
    background: rgba(220, 120, 110, 0.18);
    color: #8d3a32;
}

.narrator-strip__standing--mixed {
    background: var(--gold-bg, #fdf8ed);
    color: var(--gold-dark, #a07e28);
}

/* ── The rijāl tab ─────────────────────────────────────────────────────────────
   The isnād drawn as a chain: a list item to a link, the visual chain being CSS over an
   ordered list. The sidecar is navy, so a link is a pane of lighter navy with a hairline
   edge, and the mark is what tells the four kinds apart at a glance — a filled gold
   diamond for a man the books know, a hollow one for a name they do not, a hexagon for a
   phrase that names nobody, a star for the Imam. Colour by standing lives here and
   nowhere in the hadith text, which must read as the compiler wrote it. */
.rijal {
    --rijal-line: rgba(200, 162, 61, 0.7);
    --rijal-gap: 0.95rem;
    --rijal-mark: 1.5rem;
    color: #eef3fa;
}

.rijal__summary {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(238, 243, 250, 0.82);
}

.rijal__summary strong {
    color: #fff0bf;
    font-weight: 700;
}

.rijal__dot {
    margin-inline: 0.3rem;
    opacity: 0.55;
}

.rijal__status {
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    color: rgba(238, 243, 250, 0.7);
}

.rijal__chain {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.rijal-link {
    position: relative;
    display: grid;
    grid-template-columns: var(--rijal-mark) minmax(0, 1fr);
    column-gap: 0.5rem;
    margin-block-start: var(--rijal-gap);
}

.rijal-link:first-child {
    margin-block-start: 0;
}

/* The connector to the link below: a rule down the centre of the mark column, from this
   link's own mark to the next one. */
.rijal-link:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--rijal-mark) / 2 - 1px);
    top: 0.9rem;
    height: calc(100% + var(--rijal-gap) - 0.9rem + 0.8rem);
    width: 0;
    border-inline-start: 2px solid var(--rijal-line);
    transform-origin: top;
    transition: border-color 160ms ease;
}

/* Where the step is a collective or an unidentified man the chain is open, and the
   connector says so without a word. */
.rijal-link.is-open::before {
    border-inline-start-style: dashed;
    border-inline-start-color: rgba(238, 243, 250, 0.5);
}

.rijal-link__mark {
    position: relative;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    margin-block-start: 0.35rem;
    justify-self: center;
    background: var(--gold, #c8a23d);
    transform: rotate(45deg) scale(0.82);
    border-radius: 2px;
    box-shadow: 0 0 0 3px rgba(17, 40, 68, 0.9);
}

.rijal-link--unknown .rijal-link__mark {
    background: #183554;
    border: 2px solid var(--gold, #c8a23d);
}

.rijal-link--collective .rijal-link__mark {
    background: rgba(238, 243, 250, 0.55);
    border: 0;
    border-radius: 0;
    transform: none;
    width: 1.1rem;
    height: 1.1rem;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
    box-shadow: none;
}

.rijal-link--imam .rijal-link__mark {
    background: var(--gold, #c8a23d);
    border: 0;
    border-radius: 0;
    transform: none;
    width: 1.3rem;
    height: 1.3rem;
    margin-block-start: 0.2rem;
    clip-path: polygon(50% 0, 62% 35%, 98% 38%, 70% 60%, 80% 95%, 50% 75%, 20% 95%, 30% 60%, 2% 38%, 38% 35%);
    box-shadow: none;
}

.rijal-link__card {
    min-width: 0;
    padding: 0.55rem 0.7rem 0.6rem;
    border: 1px solid rgba(238, 243, 250, 0.16);
    border-radius: 8px;
    background: rgba(238, 243, 250, 0.07);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.rijal-link--collective .rijal-link__card,
.rijal-link--unknown .rijal-link__card {
    border-style: dashed;
}

.rijal-link--imam .rijal-link__card {
    border-color: rgba(200, 162, 61, 0.65);
    background: rgba(200, 162, 61, 0.12);
}

.rijal-link:hover .rijal-link__card {
    transform: translateY(-1px);
    border-color: rgba(238, 243, 250, 0.34);
}

.rijal-link:hover::before {
    border-inline-start-color: var(--gold, #c8a23d);
}

.rijal-link__card p {
    margin: 0.2rem 0 0;
}

.rijal-link__words {
    display: block;
    font-size: 1.12rem;
    line-height: 1.7;
    color: #fff;
    text-decoration: none;
}

a.rijal-link__words:hover,
a.rijal-link__words:focus-visible {
    color: #fff0bf;
    text-decoration: underline;
    text-decoration-color: rgba(200, 162, 61, 0.7);
    text-underline-offset: 0.2em;
}

.rijal-link__who {
    font-size: 0.8rem;
    color: rgba(238, 243, 250, 0.82);
}

.rijal-link__said {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
}

.rijal-link__grade {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
}

.rijal-link__word {
    font-weight: 700;
    color: #f3e5b8;
}

.rijal-link__grade--for .rijal-link__word {
    color: #8fd3a4;
}

.rijal-link__grade--against .rijal-link__word {
    color: #f4a097;
}

.rijal-link__said--none,
.rijal-link__books,
.rijal-link__life,
.rijal-link__note {
    font-size: 0.72rem;
    color: rgba(238, 243, 250, 0.62);
}

.rijal-link__note {
    font-style: italic;
}

[dir="rtl"] .rijal-link__note {
    font-style: normal;
}

[dir="rtl"] .rijal-link__who {
    font-size: 0.95rem;
}

[dir="rtl"] .rijal-link__said,
[dir="rtl"] .rijal-link__said--none,
[dir="rtl"] .rijal-link__books,
[dir="rtl"] .rijal-link__life,
[dir="rtl"] .rijal-link__note,
[dir="rtl"] .rijal__summary,
[dir="rtl"] .rijal__status {
    font-size: 0.9rem;
}

/* The assembly. Every link and connector is in the page from the first frame; these only
   animate it into place once, when the panel is first opened (rijal-chain.js adds
   .is-assembling and takes it away again, so returning to the tab does not replay it). */
@keyframes rijalLand {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rijalDraw {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes rijalGlow {
    from { top: -4rem; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    to   { top: 100%; opacity: 0; }
}

.rijal.is-assembling .rijal-link {
    animation: rijalLand 260ms ease-out backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}

.rijal.is-assembling .rijal-link:not(:last-child)::before {
    animation: rijalDraw 260ms ease-out backwards;
    animation-delay: calc((var(--i, 0) + 1) * 60ms);
}

.rijal.is-assembling .rijal__chain::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 4rem;
    top: -4rem;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(243, 229, 184, 0.26), transparent);
    animation: rijalGlow 900ms ease-in-out both;
    animation-delay: calc(var(--n, 1) * 60ms + 200ms);
}

@media (prefers-reduced-motion: reduce) {
    .rijal.is-assembling .rijal-link,
    .rijal.is-assembling .rijal-link:not(:last-child)::before,
    .rijal.is-assembling .rijal__chain::after {
        animation: none;
    }

    .rijal-link__card {
        transition: none;
    }
}

/* The region a narrator's tabs switch. It is replaced in place rather than fetched as a
   new page, and this is the only sign of that: a half-second of dimming if the request
   takes long enough to notice, and nothing at all if it does not. */
.narrator-view {
    transition: opacity 0.18s ease;
}

.narrator-view.is-loading {
    opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
    .narrator-view {
        transition: none;
    }
}

/* ===========================================================================
   Browse by Narrator — the other way into the corpus, built to stand beside
   Browse by Book rather than under it: same grid, same card weight, same gold
   top rule, and the counts in the same place. What differs is what a card is
   about, so the Arabic name leads at reading size and the book's own word for
   the man sits under it.
   =========================================================================== */
.browse-narrator-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}

.browse-narrator-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 132px;
    padding: 1rem 1rem 0.9rem;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 252, 0.98));
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-top: 3px solid rgba(30, 58, 95, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(15, 23, 42, 0.05);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease,
                background 180ms ease;
}

.browse-narrator-card:hover,
.browse-narrator-card:focus-visible {
    border-color: rgba(26, 58, 107, 0.35);
    border-top-color: #d5aa4d;
    background: linear-gradient(180deg, #eef3fb, #dde8f7);
    box-shadow: 0 8px 24px rgba(26, 58, 107, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* The place in the order, which is the whole point of the section: these twelve
   are not a selection, they are the top of a count. */
.browse-narrator-rank {
    position: absolute;
    top: 0.55rem;
    right: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-faint, #cbd5e1);
}

[dir="rtl"] .browse-narrator-rank {
    right: auto;
    left: 0.75rem;
}

.browse-narrator-name {
    font-family: var(--font-arabic);
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--text, #1a1a2e);
    padding-inline-end: 1.4rem;
}

.browse-narrator-latin {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary, #4a5568);
}

.browse-narrator-said {
    margin-top: 0.35rem;
    font-size: 0.76rem;
    line-height: 1.4;
}

.browse-narrator-word {
    font-weight: 700;
    color: var(--text, #1a1a2e);
}

.browse-narrator-said--for .browse-narrator-word {
    color: #2f6b43;
}

.browse-narrator-said--against .browse-narrator-word {
    color: #9b3028;
}

.browse-narrator-said--mixed .browse-narrator-word {
    color: var(--gold-dark, #a07e28);
}

.browse-narrator-whose {
    display: block;
    color: var(--text-muted, #94a3b8);
}

.browse-narrator-count {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--primary-light, #2d5a8e);
}

/* The verdict cell of the ledger. «2 / 5» under «Reliable / weak» read as a fraction or a
   score out of something; they are two counts of books, so each now carries its own word
   and the slash is gone. */
.ledger__value--verdicts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.9rem;
    font-size: 1rem;
    line-height: 1.3;
}

.ledger__verdict {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    white-space: nowrap;
}

.ledger__verdict-count {
    font-size: 1.5rem;
    font-weight: 700;
}

.ledger__verdict-word {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.ledger__verdict--for {
    color: #2f6b43;
}

.ledger__verdict--against {
    color: #9b3028;
}

.ledger__verdict--none {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    /* The standing is a word of the discipline's, and «مهمل · Muhmal» is longer than the
       counts in the tiles beside it. Nowrap is right for «3 call him reliable» and wrong
       here: it ran the line out of its tile and over the narration count. */
    white-space: normal;
    line-height: 1.35;
}

/* Reporting a mistake. Quiet, at the foot of the page, next to the line that says what the
   page was assembled from - the two belong together: here is where this came from, and
   here is how to tell us it is wrong. */
.narrator-report {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.9rem;
    margin: 2rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e8ecf1);
}

.narrator-report__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary, #1e3a5f);
    text-decoration: none;
    background: var(--surface-cool, #f8fafc);
    border: 1px solid var(--border-strong, #d1d8e0);
    border-radius: 999px;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.narrator-report__link:hover,
.narrator-report__link:focus-visible {
    color: var(--gold-dark, #a07e28);
    border-color: var(--gold, #c8a23d);
    background: var(--gold-bg, #fdf8ed);
}

.narrator-report__note {
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}

/* ===========================================================================
   The narrator page's tab strip and its reading column.

   Two faults, one of them silent: the template marks the open tab `is-active`
   and the rules above style `.narrator-tab--active`, so for as long as the page
   has existed no tab has ever looked open — five grey words in a row, and the
   reader left to work out which one he was on from the content below. The
   second is that the strip was styled like a form control rather than like the
   spine of the page it heads.

   So: the open tab now carries the page's surface and a gold rule along its
   top, the strip scrolls rather than wraps on a narrow screen, and the column
   of text under it is set to a width and a measure a scholar can read down.
   =========================================================================== */
.narrator-tabs {
    gap: 0.15rem;
    margin: 0 0 1.8rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: linear-gradient(180deg, rgba(238, 243, 250, 0), rgba(238, 243, 250, 0.55));
}

.narrator-tabs::-webkit-scrollbar {
    display: none;
}

.narrator-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 0.7rem 1.15rem 0.65rem;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    transition: color 150ms ease, background 150ms ease;
}

/* The open tab, which the stylesheet never matched: it lifts out of the strip,
   takes the page's own surface, and is capped in gold so the eye finds it from
   across the page. */
.narrator-tab.is-active {
    color: var(--primary, #1e3a5f);
    font-weight: 700;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e8ecf1);
    border-bottom-color: var(--surface, #fff);
}

.narrator-tab.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold, #c8a23d), var(--gold-light, #f3e5b8));
    border-radius: 8px 8px 0 0;
}

.narrator-tab.is-active .narrator-tab__count {
    background: var(--gold-bg, #fdf8ed);
    color: var(--gold-dark, #a07e28);
}

.narrator-tab:focus-visible {
    outline: 2px solid var(--border-focus, #2563eb);
    outline-offset: -2px;
}

/* The reading column. An entry from al-Kashshī runs for pages, and it was being
   set the full width of a desktop window: ninety words to the line, which no
   one reads twice. A measure, a larger size and more leading turn the tab into
   something a reader stays inside. */
.narrator-entry__text,
.narrator-stands__note,
.narrator-facts p,
.narrator-provenance {
    max-width: 68ch;
}

.narrator-entry__text {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text, #1a1a2e);
}

.narrator-entry__text[dir="rtl"],
.narrator-entry__text .arabic-text {
    font-size: 1.28rem;
    line-height: 2.1;
}

/* One entry from one book is one unit of reading, so it is given the edges of
   one: a rule down its start side, air around it, and the book's name sitting
   on that rule rather than floating above a wall of text. */
.narrator-entry {
    /* Logical, and air on both sides. This was `0.2rem 0 1.4rem 1.1rem` — physical, with
       nothing on the right — so the rule and its padding landed on the left of an English
       page while the Arabic notice inside, being RTL, began hard against the right edge of
       the card with no margin at all. */
    padding-block: 0.2rem 1.4rem;
    padding-inline: 1.2rem;
    border-inline-start: 2px solid var(--border, #e8ecf1);
    margin-bottom: 1.6rem;
}

.narrator-entry:hover {
    border-inline-start-color: var(--gold, #c8a23d);
}

.narrator-entry__head {
    margin-bottom: 0.55rem;
}

/* An Arabic passage inside an English page: the measure above cut it to a column, and the
   column then sat against the page's left edge while the words themselves ran to the
   right, which reads as a mistake. A printed Arabic edition anchors the block to the right
   margin, so this does the same — and because «right» is right in either page direction,
   the margins here are deliberately physical rather than logical. */
.narrator-entry__text[dir="rtl"] {
    max-width: 46rem;
    margin-left: auto;
    margin-right: 0;
}

/* The translation sits under it on the other side, as a facing page would. */
.narrator-entry__text-en {
    max-width: 62ch;
    margin-inline-end: auto;
}

/* «The books disagree about him» on a card: the one line that keeps a count from reading
   as an endorsement. */
.browse-narrator-divided {
    display: block;
    margin-top: 0.15rem;
    font-weight: 600;
    color: var(--gold-dark, #a07e28);
}

/* ===========================================================================
   The citation layer.

   A design review read this page as a rijālī would and found that everything he
   would copy into a footnote — the page number, the author, the book a fact is
   attributed to — was the faintest and smallest text on the screen: 12px at
   around 3:1 against white, under every contrast floor there is. The page's
   whole promise is that each verdict is quoted from the book named beside it,
   and the naming was set as decoration.

   So the apparatus is raised to the body's own grey and to a size it can be
   read at. The grade word keeps its colour and its weight; what changes is that
   the citation beside it is no longer a whisper.
   =========================================================================== */
.narrator-entry__author,
.narrator-entry__page,
.narrator-stands__page,
.narrator-facts__source,
.ledger__note {
    color: var(--text-secondary, #4a5568);
}

.narrator-entry__author,
.narrator-entry__page {
    font-size: 0.845rem;
}

.narrator-stands__page {
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.narrator-facts__source {
    font-size: 0.845rem;
}

.ledger__note {
    font-size: 0.78rem;
}

/* The page number is what a reader came for, so it sits on the chip rather than
   trailing after it, and it does not wrap away from the word it belongs to. */
.narrator-stands__position {
    white-space: nowrap;
}

/* The books' own word, in the books' own script, on the English page too. A
   reader of rijāl looks for «ثقة» — "thiqa — trustworthy" is a transliteration
   of a lexeme he was never shown. */
.narrator-stands__word-ar,
.narrator-entry__word-ar,
.narrator-said__word-ar {
    margin-inline-end: 0.4rem;
    font-family: var(--font-arabic);
    font-size: 1.08em;
    font-weight: 700;
}

/* ===========================================================================
   The phone tab strip.

   At 390px the strip scrolls, silently: «Overview | What the books say | Teache»
   and nothing to say that Narrations and Names exist 300px to the right. The
   two tabs a researcher reaches for are the two he cannot see, on the device he
   is most likely to be holding during a lesson.

   The counts make each tab self-explanatory, so they wrap instead of scrolling.
   =========================================================================== */
@media (max-width: 640px) {
    .narrator-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.3rem 0.2rem;
        border-bottom: 0;
    }

    .narrator-tab {
        flex: 1 1 calc(50% - 0.2rem);
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.82rem;
        border: 1px solid var(--border, #e8ecf1);
        border-radius: 8px;
        background: var(--surface-cool, #f8fafc);
    }

    .narrator-tab.is-active {
        border-color: var(--gold, #c8a23d);
        background: var(--surface, #fff);
    }

    /* The gold cap belongs to a strip of tabs along an edge; wrapped into a grid
       they are cards, and the cap reads as a crack across one of them. */
    .narrator-tab.is-active::before {
        display: none;
    }

    /* «men the books name →» wrapped the arrow onto a line of its own. */
    .ledger__note {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================================================
   Narrator page: legibility and what looks clickable
   ========================================================================== */

/* The ledger's cell for the span he was active in is the page the reader is already on, so
   it is a div. It keeps the look of its linked neighbours and none of their hover, which
   would promise a destination that is not there. */
div.ledger__cell {
    color: inherit;
}

/* The label sat at 10.9px in gold on a pale ground, about 4.0:1 and short of AA for text
   this small. It is the navy of the page at 70% and a touch larger: a label that is read
   before the figure under it is understood, not an ornament. */
.ledger__label {
    font-size: 0.74rem;
    color: color-mix(in srgb, var(--primary) 70%, transparent);
}

/* «Narrator» over the title, 11px at three-quarters opacity on navy. A little larger and
   nearer to opaque, still smaller and quieter than the name beneath it. */
.hub-hero__eyebrow {
    font-size: 0.82rem;
    color: rgba(243, 229, 184, 0.92);
}

/* The hero's facts were rounded, bordered, gold-valued pills, which is what a button looks
   like, and two of the three do nothing when clicked. A fact is plain type: a muted gold
   label, a white value, no outline. The one that does lead somewhere, the books that wrote
   about him, is an anchor and keeps only an underline on hover to say so. */
.hub-hero .hub-stat {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.hub-hero .hub-stat__label {
    opacity: 1;
    color: rgba(243, 229, 184, 0.78);
}

.hub-hero .hub-stat__value {
    color: rgba(255, 255, 255, 0.9);
}

.hub-hero a.hub-stat:hover {
    background: none;
    border: none;
}

.hub-hero a.hub-stat:hover .hub-stat__value {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (max-width: 480px) {
    /* Three facts side by side, wrapping only when they must, instead of three rows each
       the width of the screen. */
    .hub-hero .hub-hero__stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem 1rem;
    }

    .hub-hero .hub-stat {
        gap: 0.3rem;
        font-size: 0.72rem;
    }

    .hub-hero .hub-stat__value {
        font-size: 0.84rem;
    }
}

/* The same grade word, tinted as it is in the overview's table: green for a book that
   speaks for him, red for one that speaks against, nothing for a word the indexer leaves
   undecided. The tint is the table's own, so one word is never two colours. */
.narrator-entry__grade--for {
    background: rgba(120, 190, 140, 0.2);
}

.narrator-entry__grade--against {
    background: rgba(220, 120, 110, 0.18);
}

/* ===========================================================================
   The narrator page, second reading.

   A design review read the page the way a scholar who cites rijāl entries does and found
   five things; this block is the CSS half of them. It is appended rather than folded into
   the blocks above because those repeat by design.
   =========================================================================== */

/* Scheherazade sets small for its nominal size: at 20.48px a line of al-Kashshī read as
   fine print. 22px with 1.85 leading is 40.7px a line, a little tighter than the 43px it
   replaces because the larger face carries more of the space itself. The measure is given
   in em of the new size, not rem, so that it follows the type: an entry with no English
   beside it, which Zurāra's al-Najāshī entry is, would otherwise run the whole width of the
   card at a size that no longer fits its 46rem. */
.narrator-entry__text[dir="rtl"],
.narrator-entry__text .arabic-text {
    font-size: 1.375rem;
    line-height: 1.85;
}

.narrator-entry__text[dir="rtl"] {
    max-width: 34em;
}

/* The explanation of the set-aside grades is one sentence with the rest behind a
   disclosure. It ran four lines above a table that is sometimes three rows. */
.narrator-stands__note--short {
    margin-block-end: 0.3rem;
}

.narrator-stands__more {
    margin: 0 0 0.9rem;
    max-width: 62ch;
}

.narrator-stands__more > summary {
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--text-secondary, #4a5568);
}

.narrator-stands__more > .narrator-stands__note {
    margin-block-start: 0.4rem;
}

/* A grade chip is the word and its page on one line, and the quoted scholar sits beneath
   it. Inside the chip the relay note on the Arabic page («نقلاً عن …») stacked a word to a
   line at 390px, which made one chip a block six lines tall. */
.narrator-stands__entry {
    display: inline-block;
    vertical-align: top;
    margin-inline-end: 0.8rem;
    margin-block-end: 0.15rem;
}

.narrator-stands__entry > .narrator-stands__position {
    margin-inline-end: 0;
}

.narrator-stands__entry > .narrator-stands__relays {
    display: block;
    margin-block-start: 0.15rem;
    padding-inline-start: 0.5rem;
    white-space: normal;
}

/* Under 640px the row is a stack: the book's name, then its chips. Beside the name the
   chips had only what the 16rem name column left them. */
@media (max-width: 640px) {
    .narrator-stands__table,
    .narrator-stands__table tbody,
    .narrator-stands__table tr,
    .narrator-stands__table th,
    .narrator-stands__table td {
        display: block;
        width: 100%;
    }

    .narrator-stands__table th {
        padding: 0.6rem 0 0.1rem;
        border-bottom: 0;
        text-align: start;
    }

    .narrator-stands__table td {
        padding: 0.1rem 0 0.6rem;
    }
}

/* The narrations tab as an index: the chain, the opening of the text, the citation and a
   way through. A full card is about 570px and Zurāra has 1,233 narrations, which made the
   tab a landing page. */
.narration-index {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.narration-index__row {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border, #e8ecf1);
}

.narration-index__chain {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a5568);
}

.narration-index__chain[dir="rtl"] {
    font-family: var(--font-arabic);
    font-size: 1rem;
    line-height: 1.8;
}

.narration-index__matn {
    margin: 0.25rem 0 0.35rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.narration-index__matn[dir="rtl"] {
    font-family: var(--font-arabic);
    font-size: 1.15rem;
    line-height: 1.8;
}

.narration-index__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--text-secondary, #4a5568);
}

.narration-index__cite {
    font-weight: 600;
}

.narration-index__open {
    margin-inline-start: auto;
    font-weight: 600;
}

.narrator-layout {
    margin: 0 0 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    text-align: end;
}

/* The filters and the list of names searched are folded so that the first narration is
   close to the top. The summary keeps the label the open block used to carry. */
.narrator-filter > summary,
.narrator-narrations__names > summary {
    cursor: pointer;
    list-style: none;
}

.narrator-filter > summary::-webkit-details-marker,
.narrator-narrations__names > summary::-webkit-details-marker {
    display: none;
}

.narrator-filter > summary::before,
.narrator-narrations__names > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-inline-end: 0.4rem;
    transition: transform 0.15s ease;
}

.narrator-filter[open] > summary::before,
.narrator-narrations__names[open] > summary::before {
    transform: rotate(90deg);
}

[dir="rtl"] .narrator-filter > summary::before,
[dir="rtl"] .narrator-narrations__names > summary::before {
    content: "\25C2";
}

.narrator-narrations__names > summary {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--text-secondary, #4a5568);
}

.narrator-filter:not([open]) {
    margin-bottom: 0.4rem !important;
}

/* A folded filter is one line, not a card. The shared filter bar is padded and shadowed for
   a block of pills, and folded it was a 90px slab holding a single label pushed to the far
   edge by the bar's space-between. */
.tag-filter-bar.narrator-filter {
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    box-shadow: none;
}

.narrator-filter > .tag-filter-bar__head {
    justify-content: flex-start;
    margin-bottom: 0;
}

.narrator-filter[open] > .tag-filter-bar__head {
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   The narrator page, last pass: the citation apparatus, the grouped names, the Imams and
   the indexed lists, and a quieter use of gold.
   ========================================================================== */

/* The apparatus under an entry's heading line. A footnote needs the entry number and, for
   al-Khoei, the volume, so they are stated, but in small type: they are how a reader finds
   the passage in print, not what the entry says. */
.narrator-entry__cite,
.narrator-entry__edition,
.narrator-entry__series {
    margin: 0.25rem 0 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a5568);
}

.narrator-entry__cite span + span::before {
    content: "·";
    margin: 0 0.45rem;
    color: var(--text-muted);
}

.narrator-entry__edition {
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* Al-Khoei heads one man three times on one page; the note says so in a sentence the
   reader meets before the text, so a second discussion is not read as a second book. */
.narrator-entry__series {
    margin-bottom: 0.6rem;
}

.narrator-entry__series-heading {
    font-family: var(--font-arabic);
    font-size: 1rem;
    margin-inline-end: 0.35rem;
    color: var(--text);
}

.narrator-entry__cite + .narrator-entry__edition,
.narrator-entry__cite + .narrator-entry__series,
.narrator-entry__edition + .narrator-entry__series {
    margin-top: 0.1rem;
}

.narrator-entry__cite {
    margin-bottom: 0.1rem;
}

/* A grade that leans both ways takes the same warm neutral the overview's table gives it,
   so one word is never two colours. Sahl b. Ziyād's «كذاب» has no said_by row at all and
   was grey until the tint came from the entry's own leaning. */
.narrator-entry__grade--mixed {
    background: var(--bg-subtle);
    color: var(--gold-dark, #a07e28);
}

/* Family and epithet, each on a row of its own under a small label. «آل أعين» is a house,
   not a spelling of his name, and set among the chips it read as one. */
.narrator-names__group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.8rem;
    margin-top: 0.3rem;
}

.narrator-names__group-label {
    flex: 0 0 5.5rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

[dir="rtl"] .narrator-names__group-label {
    letter-spacing: 0.02em;
    font-size: 0.82rem;
}

.narrator-names__chips--group {
    flex: 1 1 12rem;
    margin-bottom: 0.3rem;
}

.narrator-names__chip--latin {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* The Imams under the same two-column rows as the teachers: one Imam to a row, the roster
   name, and the books that say it. */
.chains__imams {
    max-width: 34rem;
    margin: 0 0 2rem;
}

/* The indexed lists were 50 rows each with «from» or «to» alone in a left column and the
   name centred in what was left. The direction is now a small label inside the name's own
   cell, the row is the teachers' row, and the list runs in two columns so a long one is
   half as tall. */
.chains__who {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.chains__dir {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

[dir="rtl"] .chains__dir {
    letter-spacing: 0;
    font-size: 0.78rem;
}

.chains__list--indexed {
    column-count: 2;
    column-gap: 2.5rem;
}

.chains__list--indexed .chains__row {
    break-inside: avoid;
}

@media (max-width: 767.98px) {
    .chains__list--indexed {
        column-count: 1;
    }

    .narrator-names__group-label {
        flex-basis: 100%;
    }
}

/* Gold keeps the chronology and the ornament. The section rules, the open tab's cap and
   its count had all been gold as well, so nothing on the page was marked by it. The rule
   under a section label is the page's own hairline here, and the open tab is capped in the
   navy its label is set in. The hadith pages and the home page use gold the same sparing
   way, for a mark and not for structure. */
.narrator-view .hub-group__label::after {
    background: var(--border);
}

.narrator-tab.is-active::before {
    background: var(--primary);
}

.narrator-tab.is-active .narrator-tab__count,
.narrator-tab--active .narrator-tab__count {
    background: var(--bg-subtle);
    color: var(--primary);
}

/* The series note is two short lines, not one run of prose: set inline, Arabic headings
   and an English sentence flipped each other's punctuation in al-Khoei's three entries on
   Muhammad b. Yahya. Each heading is isolated, and the note is kept off the entry's text. */
.narrator-entry__series {
    margin: 0.2rem 0 0.9rem;
}

.narrator-entry__series-line {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--text-secondary, #4a5568);
}

.narrator-entry__series-heading + .narrator-entry__series-heading::before {
    content: "·";
    margin-inline-end: 0.35rem;
    color: var(--text-muted);
}

.narrator-entry__edition {
    margin-bottom: 0.2rem;
}

/* The Imams' rows are as wide as the teachers' are, and the books wrap rather than push
   the name into a three-line column, which is what Jaʿfar al-Ṣādiq's six books did. */
.chains__imams {
    max-width: 52rem;
}

.chains__imams .chains__name {
    flex: 0 0 auto;
    white-space: nowrap;
}

.chains__imams .chains__books {
    flex: 1 1 auto;
}

/* The wrapped tab grid on a phone outlined the open tab in gold; it takes the same navy
   the open tab has on a desktop. */
@media (max-width: 640px) {
    .narrator-tab.is-active {
        border-color: var(--primary);
    }
}

/* ===========================================================================
   The verdict chips.

   «ثقة thiqa — trustworthy» was set as a pastel wash behind a word: readable, but it
   read as a highlighter mark rather than as a thing the page is asserting. A grade is
   the most consequential word on a narrator's page — a reader scans for it and stops —
   so it is set as a chip with an edge: a jewelled green that holds its own beside the
   gold, a hairline border, and an inner highlight that lifts it off the paper.

   Four surfaces carry the same word and two of them are navy, so the tokens come in
   pairs. Nothing here changes which word is shown or which colour it earns; that is
   decided by the book, upstream.
   =========================================================================== */

:root {
    /* Jade rather than the generic --success green: this sits next to gold on navy. */
    --verdict-for-ink:        #0c5138;
    --verdict-for-face:       linear-gradient(180deg, #f1fbf6 0%, #e2f4ea 100%);
    --verdict-for-edge:       #9bd2b6;

    --verdict-against-ink:    #8a2e25;
    --verdict-against-face:   linear-gradient(180deg, #fdf4f3 0%, #f8e6e3 100%);
    --verdict-against-edge:   #e0aaa3;

    --verdict-plain-ink:      var(--text-secondary);
    --verdict-plain-face:     linear-gradient(180deg, #f9fbfd 0%, #eff3f8 100%);
    --verdict-plain-edge:     var(--border-strong);

    /* On the navy hero and in the rijāl panel, where the paper is dark. */
    --verdict-for-ink-dark:    #c8efda;
    --verdict-for-face-dark:   linear-gradient(180deg, rgba(32,116,82,0.60) 0%, rgba(18,78,55,0.72) 100%);
    --verdict-for-edge-dark:   rgba(150, 221, 183, 0.55);

    --verdict-against-ink-dark:  #f6cdc7;
    --verdict-against-face-dark: linear-gradient(180deg, rgba(140,52,44,0.58) 0%, rgba(104,36,30,0.72) 100%);
    --verdict-against-edge-dark: rgba(230, 160, 150, 0.5);

    --verdict-plain-ink-dark:    rgba(238, 243, 250, 0.82);
    --verdict-plain-face-dark:   linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
    --verdict-plain-edge-dark:   rgba(200, 162, 61, 0.42);
}

/* The chip itself, on light paper. A pill, because a grade is a label and not a heading. */
.narrator-entry__grade,
.narrator-said__word {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--verdict-plain-edge);
    background: var(--verdict-plain-face);
    color: var(--verdict-plain-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-family: var(--font-ui);
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
}

.narrator-said__row--for .narrator-said__word,
.narrator-entry__grade--for {
    border-color: var(--verdict-for-edge);
    background: var(--verdict-for-face);
    color: var(--verdict-for-ink);
}

.narrator-said__row--against .narrator-said__word,
.narrator-entry__grade--against {
    border-color: var(--verdict-against-edge);
    background: var(--verdict-against-face);
    color: var(--verdict-against-ink);
}

/* Where the books divide on one man, the chip carries both edges rather than picking
   a side: a gold hairline, which is the page's colour for «it depends who you follow». */
.narrator-entry__grade--mixed {
    border-color: rgba(200, 162, 61, 0.55);
    background: linear-gradient(180deg, #fefaf0 0%, #faf2df 100%);
    color: #7a5c14;
}

/* The books' own word keeps its script and its weight inside the chip. */
.narrator-said__word-ar,
.narrator-entry__word-ar,
.narrator-stands__word-ar {
    font-size: 1.04em;
    opacity: 0.92;
}

/* The navy hero, where the same chips sit on dark paper. */
.narrator-verdict__grade {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.16rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--verdict-plain-edge-dark);
    background: var(--verdict-plain-face-dark);
    color: var(--verdict-plain-ink-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(6, 18, 34, 0.3);
    letter-spacing: 0.03em;
}

/* The light tokens, not the dark ones. These classes are emitted in exactly one
   place — narrator.html's entry chip, which sits on the white card of a Tarājim
   notice — so the dark set put #c8efda on near-white at 1.25:1, a chip whose word
   could not be read at all. The block that set them assumed this was the hero's
   chip; the hero renders .narrator-said__word, which keeps the dark set below. */
.narrator-verdict__grade--thiqa,
.narrator-verdict__grade--saduq,
.narrator-verdict__grade--hasan {
    border-color: var(--verdict-for-edge);
    background: var(--verdict-for-face);
    color: var(--verdict-for-ink);
}

.narrator-verdict__grade--daif,
.narrator-verdict__grade--very_weak,
.narrator-verdict__grade--kadhdhab,
.narrator-verdict__grade--non_existent {
    border-color: var(--verdict-against-edge);
    background: var(--verdict-against-face);
    color: var(--verdict-against-ink);
}

/* The rijāl panel on a hadith card: the same word, the same chip, a size down, because
   there it sits inside a chain step rather than under a name. */
.rijal-link__word {
    display: inline-flex;
    align-items: baseline;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--verdict-plain-edge-dark);
    background: var(--verdict-plain-face-dark);
    color: var(--verdict-plain-ink-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-weight: 650;
}

.rijal-link__grade--for .rijal-link__word {
    border-color: var(--verdict-for-edge-dark);
    background: var(--verdict-for-face-dark);
    color: var(--verdict-for-ink-dark);
}

.rijal-link__grade--against .rijal-link__word {
    border-color: var(--verdict-against-edge-dark);
    background: var(--verdict-against-face-dark);
    color: var(--verdict-against-ink-dark);
}

/* ===========================================================================
   The verdict chips, placed on the right paper.

   The block above assumed the hero's chips were .narrator-verdict__grade. They are not:
   the hero renders .narrator-said__word, which sits on navy, and the light treatment put
   a near-white pill on a dark card. The table under «Where each book stands» is the one
   on paper, and it renders .narrator-stands__position, which the block above never named.

   So: .narrator-said__word and .rijal-link__word are dark-paper chips, and
   .narrator-stands__position, .narrator-entry__grade and the ledger's word are light.
   =========================================================================== */

/* On the navy hero. */
.narrator-said__word {
    border: 1px solid var(--verdict-plain-edge-dark);
    background: var(--verdict-plain-face-dark);
    color: var(--verdict-plain-ink-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(6, 18, 34, 0.32);
    text-transform: none;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.narrator-said__row--for .narrator-said__word {
    border-color: var(--verdict-for-edge-dark);
    background: var(--verdict-for-face-dark);
    color: var(--verdict-for-ink-dark);
}

.narrator-said__row--against .narrator-said__word {
    border-color: var(--verdict-against-edge-dark);
    background: var(--verdict-against-face-dark);
    color: var(--verdict-against-ink-dark);
}

/* On paper: the table of where each book stands, and the entries tab. */
.narrator-stands__position {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--verdict-plain-edge);
    background: var(--verdict-plain-face);
    color: var(--verdict-plain-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

.narrator-stands__position--for {
    border-color: var(--verdict-for-edge);
    background: var(--verdict-for-face);
    color: var(--verdict-for-ink);
}

.narrator-stands__position--against {
    border-color: var(--verdict-against-edge);
    background: var(--verdict-against-face);
    color: var(--verdict-against-ink);
}

/* A grade with no passage behind it keeps its deliberate colourlessness: it is not
   evidence until there is a page under it, and a chip must not make it look like one. */
.narrator-stands__position--unsourced {
    border-color: var(--border-strong);
    background: linear-gradient(180deg, #fafafa 0%, #f1f2f4 100%);
    color: var(--text-muted);
    box-shadow: none;
}

/* The ledger cell. «1 call him reliable» is a count and a verdict in one line, so the
   word takes the chip's colour without its box — a pill around a running phrase would
   fight the number beside it. */
.ledger__verdict--for .ledger__verdict-word,
.ledger__verdict--for .ledger__verdict-count {
    color: var(--verdict-for-ink);
}

.ledger__verdict--against .ledger__verdict-word,
.ledger__verdict--against .ledger__verdict-count {
    color: var(--verdict-against-ink);
}

/* The Imam the report rests on, where the isnād did not name him. Below the chain and
   quieter than a step, because he is not one: he stands in the narration's own words. */
.rijal__in-body {
    margin: 0.75rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(200, 162, 61, 0.35);
    font-size: 0.76rem;
    line-height: 1.6;
    color: rgba(238, 243, 250, 0.72);
}

.rijal__in-body-lede {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: rgba(238, 243, 250, 0.52);
}

.rijal__in-body-name {
    color: #f3e5b8;
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 162, 61, 0.5);
}

.rijal__in-body-name:hover {
    color: #fff;
}

.rijal__in-body-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-style: italic;
    color: rgba(238, 243, 250, 0.5);
}

[dir="rtl"] .rijal__in-body-note {
    font-style: normal;
}

[dir="rtl"] .rijal__in-body-lede {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.74rem;
}


/* ── The navbar between a tablet and a laptop ───────────────────────────────
   Bootstrap's .container is 696px wide up to 992px and 936px above it, but the
   search button takes its word back at 768px and the sign-in button never gave
   its label up at all. Between those two points the row asked for more than it
   had — 34px of mark, 277px of links, 84px of button and 156px of account
   controls inside 696px — and the field took the shortfall: 142px, of which
   31px is its own padding and 84px the button, leaving 27px of input and a
   placeholder reading "S".

   So the compact treatment now runs to the point where the container actually
   widens, which is where the language toggle has always dropped its own label.
   The icon each button keeps is the label it has at phone widths, and says the
   same thing in both languages. */
@media (max-width: 991.98px) {
    /* The width has to be taken by name: the rule that sets it to 84px, and the one
       that widens it to 94px, both use !important. */
    .site-nav .search-btn-with-border {
        min-width: var(--search-action-height) !important;
        width: var(--search-action-height) !important;
        padding: 0 !important;
    }

    .site-nav .search-btn-with-border .search-btn__text {
        display: none;
    }

    .site-nav .search-btn-with-border .search-btn__icon-mobile {
        display: inline-block;
        font-size: 0.82rem;
    }

    .site-nav .top-actions .auth-action__label {
        display: none;
    }

    .site-nav .top-actions .auth-action i {
        margin-inline-end: 0;
    }
}

/* Overview pass: the short "also named" row. Six chips and a link to the full list on the
   Tarajim tab replace up to forty (al-Hasan ibn Mahbub) that sat above the verdicts. */
.narrator-names--short .narrator-names__chips { margin-bottom: 0.5rem; }
.narrator-names__all {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--navy-700, #1e3a5f);
    text-decoration: underline;
    text-underline-offset: 3px;
}
[dir="rtl"] .narrator-names__all { text-align: right; }

/* The seal beside the name in a narrator's hero. Logical properties, so the seal sits at
   the start edge in both directions. On a phone the hero centres its text, so the seal
   stacks above it. */
.narrator-id { display: flex; align-items: center; gap: 1.1rem; }
.narrator-id__seal { flex: none; display: block; line-height: 0; }
.narrator-id__text { min-width: 0; flex: 1 1 auto; }
.narrator-id .nseal__track { stroke: rgba(255, 255, 255, 0.22); }
@media (max-width: 767.98px) {
    .narrator-id { flex-direction: column; gap: 0.7rem; }
}

/* The seal costs the identity column 72px plus its gap, and the name paid for it:
   «الحسن بن محبوب السراد» broke across two lines while the blurb beside it sat on one.
   The narrator hero gets the even split, and the seal lines up with the eyebrow rather
   than floating against the middle of the name. */
.hub-hero--sealed { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hub-hero--sealed .narrator-id { align-items: flex-start; }
.hub-hero--sealed .narrator-id__seal { margin-top: 0.15rem; }
@media (max-width: 767.98px) {
    .hub-hero--sealed { grid-template-columns: 1fr; }
    .hub-hero--sealed .narrator-id { align-items: center; }
}
/* ── A linked name in an isnād, made plainly clickable ───────────────────────
   The earlier passes marked these with a dotted gold rule and nothing else:
   no weight, no colour at rest. The reasoning was sound — eight bright words
   in a chain read as a row of buttons rather than as a sentence — but the
   result was a link most readers never found.

   Weight and colour, not an icon. An icon per name would put eight glyphs in a
   sentence of eight names, and the convention it borrows (↗) means "leaves this
   site", which these do not. Weight picks the name out of the connective tissue
   («from», «عن») that surrounds it; the navy says link in the site's own palette
   rather than browser blue; the solid gold rule under it replaces the dotted
   hint. Hover and keyboard focus then light the whole word in gold.

   #1b4a7a on the card is 7.6:1, and the gold hover state 5.1:1, both above AA.
   The backref links (a repeated «عنه» pointing up the chain) are deliberately
   left out: they are not names and do not lead to a man's page. */
.hadith-chain .chain-name {
    font-weight: 600;
    /* `.hadith-chain *` sets `color: inherit !important` so the chain reads as one
       muted line, which is why the hover rule above has always carried !important
       too. The resting colour needs the same to be seen at all. */
    color: #1b4a7a !important;
    border-bottom: 1px solid rgba(200, 162, 61, 0.45);
    border-radius: 2px;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.hadith-chain .chain-name:hover,
.hadith-chain .chain-name:focus-visible {
    color: #8a6420 !important;
    border-bottom-color: var(--gold, #c8a23d);
    background-color: rgba(200, 162, 61, 0.13);
    box-shadow: 0 0 0 2px rgba(200, 162, 61, 0.13);
}

/* The Arabic chain carries the same names at a larger size, where a 600 weight in
   Scheherazade is heavy enough to shout. It takes the colour and the rule only. */
.hadith-chain--arabic .chain-name {
    font-weight: 400;
}

/* ── Contact page ───────────────────────────────────────────────────────────
   Appended as one block; the file's earlier duplicate blocks are left alone.
   Logical properties throughout so /ar/contact mirrors. */
.contact {
    max-inline-size: 44rem;
    margin-inline: auto;
    padding-block-end: 2rem;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.contact-field label {
    display: block;
    margin-block-end: 0.35rem;
    font-weight: 600;
    color: var(--text);
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field select,
.contact-field textarea {
    inline-size: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(16, 35, 63, 0.35);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
}
.contact-field textarea { resize: vertical; min-block-size: 9rem; }
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 1px;
}
.contact-field__help {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #4a5568;
}
.contact-context {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--gold);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
}
.contact-context__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a5568;
}
.contact-context__value {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: baseline;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.contact-context__note {
    margin: 0.3rem 0 0;
    font-size: 0.875rem;
    color: #4a5568;
}
.contact-error {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid #b42318;
    border-radius: 10px;
    background: #fef3f2;
    color: #7a271a;
}
.contact-error[hidden], .contact-done[hidden], .contact-form[hidden] { display: none; }
.contact-submit {
    align-self: flex-start;
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.contact-submit:hover { filter: brightness(1.15); }
.contact-submit:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.contact-submit:disabled { opacity: 0.65; cursor: progress; }
.contact-done {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-block-start: 3px solid var(--gold);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
}
.contact-done__title { margin-block-start: 0; font-size: 1.35rem; }
@media (max-width: 480px) {
    .contact-submit { inline-size: 100%; align-self: stretch; }
}

/* ── The recent updates on the home page ─────────────────────────────────────
   Two cards that were two different heights with two different clip shapes and
   a wall of bullets each. One frame, one crop, three bullets, and a clamp on
   the summary, so the row reads as a pair. */

.recent-updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.1rem;
    align-items: stretch;
}

.recent-update-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border, #e8ecf1);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    box-shadow: 0 1px 2px rgba(16, 35, 63, 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.recent-update-card:hover {
    border-color: rgba(200, 162, 61, 0.55);
    box-shadow: 0 2px 6px rgba(16, 35, 63, 0.08), 0 16px 32px -16px rgba(16, 35, 63, 0.3);
    transform: translateY(-2px);
}

.recent-update-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem 0.9rem;
    text-decoration: none;
    color: inherit;
}

.recent-update-date {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark, #a07e28);
}

.recent-update-title {
    margin: 0;
    font-family: var(--font-reference);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text, #1a1a2e);
    text-wrap: balance;
}

/* Two lines each, whatever the entry writes, so the titles beneath them line up. */
.recent-update-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a5568);
}

.recent-update-list {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.05rem;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a5568);
}

.recent-update-list li { margin-bottom: 0.15rem; }
.recent-update-list li::marker { color: var(--gold, #c8a23d); }

.recent-update-list__more {
    list-style: none;
    margin-inline-start: -1.05rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary, #1e3a5f);
}

/* One frame for every clip. The recordings are 4:3, 16:9 and 1600x1088; left to
   their own ratios they gave the row three different cards. */
.recent-updates-grid .recent-update-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--border, #e8ecf1);
    background: #0a1628;
    overflow: hidden;
}

.recent-updates-grid .recent-update-video__file,
.recent-updates-grid .recent-update-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
}

/* ── The home page's sections, all on the same ground ────────────────────────
   Browse and Updates sat in a bordered, rounded, tinted panel; Narrators and
   Collections sat on the page. Three sections down the same column, two of them
   boxed, reads as though the boxes mean something. They do not. The page itself
   is the ground, and the bookcase and the cards are objects enough on it. */
.home-browse,
.home-updates {
    padding: 0;
    /* !important only because the rule this undoes carries it, and the panel is
       painted by three things at once: the element, a ::before glow and an
       ::after corner. All three go. */
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.home-browse::before,
.home-browse::after,
.home-updates::before,
.home-updates::after { content: none !important; }

/* The space the panel's padding used to give between sections now belongs to
   the sections themselves. */
.home-browse,
.home-narrators,
.home-updates { margin-block: 0 2.6rem; }

/* ── A type-to-filter box over a long list (chapters, parts, volumes) ───────
   Appended, per this file's convention. The control sits under the section
   heading and above the list it narrows, close enough to read as belonging to
   it. Logical properties throughout so the Arabic page mirrors.               */
.hub-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: -0.35rem 0 1.15rem;
}

.hub-filter__field {
    position: relative;
    display: block;
    flex: 1 1 18rem;
    max-width: 26rem;
}

.hub-filter__icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    line-height: 1;
    opacity: 0.5;
    pointer-events: none;
}

.hub-filter__input {
    width: 100%;
    padding: 0.55rem 0.9rem;
    padding-inline-start: 2.35rem;
    font-family: var(--font-ui);
    font-size: 0.94rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hub-filter__input::placeholder {
    color: #64748b;
}

.hub-filter__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 162, 61, 0.18);
}

/* The running tally beside the box. It says how much of the list is left rather
   than how much was taken away: a reader scanning for one chapter wants to know
   whether to keep typing. */
.hub-filter__count {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}

.hub-filter__empty {
    margin: 0 0 1.4rem;
    font-family: var(--font-ui);
    font-size: 0.94rem;
    color: #64748b;
}

@media (max-width: 576px) {
    .hub-filter__field {
        flex-basis: 100%;
        max-width: none;
    }
}

/* The matched run inside a filtered row. A wash rather than a block of colour:
   the row is a link, and a solid highlight behind link text reads as a second
   control. Inherits the colour so the mark never fights the row's own ink. */
.hub-filter__hit {
    padding: 0;
    color: inherit;
    background: rgba(200, 162, 61, 0.34);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(200, 162, 61, 0.28);
}

/* A step the resolver found several men for and would not choose between. The card is the
   navy one, so its ink is light: the lede sits at 0.82 of the panel's pale ink, which
   measured 6.0:1 to 6.7:1 against the card as rendered (#284361 to #284b73), and the names
   are the full pale ink at 8.0:1 to 9.1:1 with a gold underline to say they are links. The dashed border is the
   unidentified step's, because the joint above and below it is just as open. */
.rijal-link--several .rijal-link__mark {
    background: #183554;
    border: 2px dashed var(--gold, #c8a23d);
}

.rijal-link--several .rijal-link__card {
    border-style: dashed;
}

.rijal-link__candidates {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    margin: 0.35rem 0 0;
    padding-block-start: 0.35rem;
    border-block-start: 1px solid rgba(238, 243, 250, 0.16);
    font-size: 0.74rem;
    color: rgba(238, 243, 250, 0.82);
}

.rijal-link__candidates-lede {
    flex-basis: 100%;
    margin-inline-start: 0.1rem;
}

.rijal-link__candidate {
    color: #eef3fa;
    font-size: 0.95rem;
    text-decoration: underline;
    text-decoration-color: var(--gold, #c8a23d);
    text-underline-offset: 0.25em;
}

.rijal-link__candidate:hover,
.rijal-link__candidate:focus-visible {
    color: #ffffff;
    text-decoration-thickness: 2px;
}

[dir="rtl"] .rijal-link__candidates {
    font-size: 0.9rem;
}

/* The epithet that tells three men of one name apart, set after the name in a quieter
   weight and the same pale ink, so it stays above 4.5:1 on the card. */
.rijal-link__candidate-title {
    margin-inline-start: 0.4em;
    font-size: 0.8em;
    opacity: 0.9;
}

.rijal-link__candidate-title::before {
    content: "\00b7\00a0";
}

/* The tarājim card had 0.2rem of padding above its heading and 1.4rem below it.
   That top value is left over from when the entry was a rule down one side and
   nothing else: with no top edge to clear, the book's name starting almost at the
   element's own origin looked deliberate. The card gained a border, a background
   and a 6px radius afterwards, and the heading has sat 3px off a visible edge ever
   since, while the sides kept 19px and the foot 22px. Matched to the sides. */
.narrator-entry {
    padding-block: 1.1rem 1.4rem;
}

/* The grade pill is pushed to the far end of the header row by an auto margin, and
   that margin was `margin-left`. On the Arabic site the row runs the other way, so
   the auto absorbed the space on the pill's left and left it stranded mid-row
   against the citation instead of out at the edge — «ثقة» floating beside the page
   number while its English twin sat pinned to the opposite margin. Logical, and the
   physical end reset to zero, because the rule above still names `margin-left` and
   two auto margins would centre the pill rather than push it anywhere. */
.narrator-entry__grade {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

@media (max-width: 640px) {
    /* Narrow enough that the pill belongs on the line with the citation rather than
       pushed away from it. The existing rule says `margin-left: 0`, which only
       cancels the push on an English page. */
    .narrator-entry__grade {
        margin-inline-start: 0;
    }
}

/* A teacher or student the books let us identify is now a link to his own page. The anchor
   was added without a rule of its own, so it took the browser's default blue — the one
   colour on a manuscript page that announces itself as a web link, and it fell on exactly
   the rows we know most about, so the better-attested half of the column looked foreign.
   Treated like the names in an isnād instead: the row's own colour, a dotted gold rule
   underneath, gold on hover. .chain-name is not reused because that rule is scoped to
   .hadith-chain and carries a background and box-shadow that belong to running prose. */
.chains__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(200, 162, 61, 0.5);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.chains__name a:hover,
.chains__name a:focus-visible {
    color: var(--accent-gold, #c8a23d);
    border-bottom-color: rgba(200, 162, 61, 0.9);
}

/* Where a row in «In the same isnād» comes from. A book's chain index prints as the book's
   name, in the muted grey every citation on this page uses; a pairing the served chains
   attest prints as a count, in gold, so the two readings are told apart at a glance without
   a legend. A row both hold names the books first and puts the count after them. */
.chains__here {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--accent-gold, #c8a23d);
    white-space: nowrap;
}

.chains__here--after::before {
    content: " · ";
    color: var(--text-muted);
}

/* The way out of an empty column. Where no book names a man's teachers the column used to
   end on its own note; it now carries a link to the isnād section below, set in the same
   small muted type as the note it follows so it reads as the rest of that sentence, and
   gold on the arrow so it is visibly somewhere to go. */
a.chains__note--to {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--accent-gold, #c8a23d);
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent-gold, #c8a23d) 45%, transparent);
    padding-bottom: 1px;
    width: fit-content;
}

a.chains__note--to:hover,
a.chains__note--to:focus-visible {
    border-bottom-style: solid;
}


/* The qualification on a count, on its own line under the column's name so the number is
   never read bare. */
.chains__basis {
    margin: -0.7rem 0 1.1rem;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint, var(--text-muted));
}

[dir="rtl"] .chains__basis {
    letter-spacing: normal;
    text-transform: none;
    font-size: 0.7rem;
}