/* ========================================================================
   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.5rem 2.75rem 0.5rem 1rem;
    background: linear-gradient(90deg, #12294d, #1a3a6b 45%, #12294d);
    color: #fff;
    font-size: 0.83rem;
    letter-spacing: 0.01em;
    text-align: center;
}
.site-announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
}
.site-announcement__icon { color: #d5aa4d; }
.site-announcement__text { font-weight: 500; }
.site-announcement__link {
    color: #f0d69a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.site-announcement__link:hover,
.site-announcement__link:focus { color: #fff; }
.site-announcement__close {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0 0.4rem;
    cursor: pointer;
}
.site-announcement__close:hover,
.site-announcement__close:focus { color: #fff; }

@media (max-width: 575.98px) {
    .site-announcement {
        font-size: 0.78rem;
        padding: 0.45rem 2.25rem 0.45rem 0.75rem;
    }
}

/* ── 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;
    margin-left: -30px;
}

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

/* ── 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-right: 0.25rem;
}

.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;
    margin-left: auto;
    padding-left: 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;
    margin-left: 0.75rem;
}

.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 ───────────────────────────────────────────────────────── */
.top-actions {
    display: flex;
    gap: 0.5rem;
    flex-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-left: 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 {
    position: fixed;
    top: 5rem;
    left: 1rem;
    width: 320px;
    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;
}

.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); }
.ts-control.has-items 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-left: 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-left: 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;
}
.home-search .ts-control .item {
    background: rgba(247,225,166,0.1) !important;
    border: 1px solid rgba(247,225,166,0.3) !important;
    color: var(--gold-light) !important;
    border-radius: var(--radius-sm) !important;
}
.home-search .ts-control .item .remove {
    color: var(--gold-light) !important;
}
.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;
}

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

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

.site-nav .ts-control .item {
    background: rgba(247,225,166,0.1) !important;
    border: 1px solid rgba(247,225,166,0.3) !important;
    color: var(--gold-light) !important;
    border-radius: var(--radius-sm) !important;
}

.site-nav .ts-control .item .remove {
    color: var(--gold-light) !important;
    opacity: 0.7;
}

.site-nav .ts-control .item .remove:hover {
    color: #fff !important;
    opacity: 1;
}

.site-nav .ts-wrapper.multi .ts-control > div {
    border: 1px solid rgba(247,225,166,0.25) !important;
}

/* 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;
}

.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-search .ts-control .item {
    background: rgba(247,225,166,0.1) !important;
    border: 1px solid rgba(247,225,166,0.3) !important;
    color: var(--gold-light) !important;
    border-radius: var(--radius-sm) !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;
    padding: 0.58rem 1.6rem 0.58rem 0.72rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    text-align: left;
    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;
}

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

.home-search .ts-control .item {
    background: rgba(17, 47, 88, 0.08) !important;
    border: 1px solid rgba(17, 47, 88, 0.12) !important;
    color: #173964 !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;
}

.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,
.home-search .ts-control .item,
.navbar-search .ts-control .item {
    min-height: 26px !important;
    padding: 3px 9px !important;
    border-radius: 5px !important;
    font-size: 0.84rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.site-nav .ts-control .item {
    background: rgba(17, 47, 88, 0.08) !important;
    border: 1px solid #0000003b !important;
    color: #173964 !important;
}

.site-nav .ts-wrapper.multi .ts-control > div,
.navbar-search .ts-wrapper.multi .ts-control > div,
.home-search .ts-wrapper.multi .ts-control > div {
    border: 1px solid #0000003b !important;
    background: rgba(17, 47, 88, 0.08) !important;
    color: #173964 !important;
}

.site-nav .ts-control > .item,
.navbar-search .ts-control > .item,
.home-search .ts-control > .item {
    border: 1px solid #0000003b !important;
}

.home-search .ts-control .item,
.navbar-search.home-search .ts-control .item {
    background: rgba(17, 47, 88, 0.08) !important;
    border: 1px solid #0000003b !important;
    color: #173964 !important;
}

.site-nav .ts-control .item .remove {
    color: #173964 !important;
    opacity: 0.6 !important;
    /* Sits at the pill's top-right rather than centred on the text baseline.
       Kept in normal flow, so it always reserves its own width and can never
       overlap the label. */
    align-self: flex-start !important;
    margin-left: 6px !important;
    margin-top: -2px !important;
    min-width: 12px !important;
    line-height: 1 !important;
    font-size: 0.78rem !important;
    background: transparent !important;
    border-left: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2px 4px 0 0 !important;
}

.site-nav .ts-control .item .remove:hover {
    color: #0b1728 !important;
    opacity: 1 !important;
}

.home-search .ts-control .item .remove,
.navbar-search .ts-control .item .remove {
    color: #173964 !important;
    opacity: 0.6 !important;
    /* Sits at the pill's top-right rather than centred on the text baseline.
       Kept in normal flow, so it always reserves its own width and can never
       overlap the label. */
    align-self: flex-start !important;
    margin-left: 6px !important;
    margin-top: -2px !important;
    min-width: 12px !important;
    line-height: 1 !important;
    font-size: 0.78rem !important;
    background: transparent !important;
    border-left: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2px 4px 0 0 !important;
}

.home-search .ts-control .item .remove:hover,
.navbar-search .ts-control .item .remove:hover {
    color: #0b1728 !important;
    opacity: 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);
}

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