/* ========================================================================
   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 */
    --font-body:        "Inter", "Segoe UI", system-ui, sans-serif;
    --font-display:     "Inter", "Segoe UI", system-ui, sans-serif;
    --font-ui:          "Inter", "Segoe UI", system-ui, sans-serif;
    --font-reference:   "Source Serif 4", Georgia, serif;
    --font-ornament:    "Cormorant Garamond", "Source Serif 4", 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: 'Source Serif 4', serif;
    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: 42px;
    width: auto;
    display: block;
    transition: opacity 150ms ease;
}
.brand-logo--emblem:hover { opacity: 0.85; }

/* ── 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;
    }
}
body.is-collection-mode .home-nav-links,
body.is-search-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;
}

.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: 34px; }

    .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);
    font-size: 0.88rem;
    margin-bottom: 0;
}

/* 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;
    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: 34px; }
    .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: 'Source Serif 4', Georgia, serif;
    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: 'Source Serif 4', Georgia, serif;
    /* 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;
}