/* ===========================================================================
   The narrator seal, and the two cards built on it: Browse by Narrator (home page and
   narrators hub, fragments/narrator-card.html) and the preview that opens from a name inside
   an isnad (narrator-preview.js).

   Loaded after manuscript.css so these rules win without editing that file. The old
   .browse-narrator-card rules there are now unused by these two pages.

   Why a seal at all: the old card was a white box with a rank, a name and one verdict, so
   Ibrahim b. Hashim (4,056 narrations) and a man in 12 chains looked the same. The tile is
   colour-coded by generation and the ring measures how much runs through him; the word the
   books use sits beside it, never an average, because Sahl b. Ziyad has three different
   words from four books.
   =========================================================================== */
:root {
    --nc-for: #2f6b4f;
    --nc-for-wash: #eef6f1;
    --nc-against: #9a3b2f;
    --nc-against-wash: #fbf0ee;
    --nc-ref: "Literata", Georgia, serif;
}

/* ── The seal ─────────────────────────────────────────────────────────────── */
.nseal { display: block; flex: none; }
.nseal__track { stroke: var(--border-strong, #d1d8e0); }
.nseal__ring  { stroke: var(--gold, #c8a23d); }

/* ── Browse by Narrator card ─────────────────────────────────────────────── */
/* 15.5rem is the narrowest a card can be and still hold a two-line Arabic name beside a
   44px seal; at 400px that is one column, which is what the narrow screen wants anyway. */
.browse-narrator-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

.ncard {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* The last row takes the slack, and the foot sits at the bottom of it, so cards in a
       row are one height whether the standing is one pill or two lines. */
    grid-template-rows: auto auto auto 1fr;
    gap: 0.2rem 0.75rem;
    padding: 0.85rem 0.9rem 0.75rem;
    min-width: 0;
    background: var(--surface-warm, #fefdfb);
    border: 1px solid var(--border, #e8ecf1);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ncard:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 10px 22px rgba(0, 0, 0, 0.07);
    border-color: var(--border-strong, #d1d8e0);
    transform: translateY(-1px);
    color: inherit;
}

.ncard:focus-visible {
    outline: 2px solid var(--border-focus, #2563eb);
    outline-offset: 2px;
}

.ncard__seal { grid-row: 1 / span 2; grid-column: 1; }

.ncard__rank {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.7rem;
    font-family: var(--nc-ref);
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* Two lines, then an ellipsis: al-Najashi heads some men with eleven generations. The
   right padding keeps the first line clear of the rank. */
.ncard__ar {
    grid-column: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    /* Physical sides, because the span is dir=rtl on both sites while the card's own
       direction follows the page: the rank sits at the card's inline end. */
    padding-right: 1.1rem;
    font-family: var(--font-arabic, "Scheherazade New", serif);
    /* Scheherazade New is loaded at 400 and 700. The Arabic is the name here - the
       English under it is the gloss - so it carries the weight and the Latin does not. */
    font-weight: 700;
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--text, #1a1a2e);
    text-align: left;
}

html[dir="rtl"] .ncard__ar { text-align: right; padding-right: 0; padding-left: 1.1rem; }

.ncard__en {
    grid-column: 2;
    display: block;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The standing: the books' own word, and nothing of ours. */
.ncard__stand {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
    align-content: flex-start;
    margin-top: 0.45rem;
}

.ncard .word,
.pv .word {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1.5;
}

.ncard .word b {
    font-family: var(--font-arabic, "Scheherazade New", serif);
    font-size: 1rem;
    font-weight: 700;
    unicode-bidi: isolate;
}

.word--for { background: var(--nc-for-wash); color: var(--nc-for); }
.word--against { background: var(--nc-against-wash); color: var(--nc-against); }
.word--none, .word--neutral, .word--mixed {
    background: var(--surface-cool, #f8fafc);
    color: var(--text-secondary, #4a5568);
    border: 1px solid var(--border, #e8ecf1);
}

.ncard .whose { font-size: 0.72rem; color: var(--text-muted, #94a3b8); }

.ncard__foot {
    grid-column: 1 / -1;
    align-self: end;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dotted var(--border-strong, #d1d8e0);
}

.ncard__count {
    font-family: var(--nc-ref);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary, #1e3a5f);
    font-variant-numeric: tabular-nums;
}

.ncard__books { margin-inline-start: auto; font-size: 0.72rem; color: var(--text-muted, #94a3b8); }

/* ── The preview card ─────────────────────────────────────────────────────── */
/* Drawn over the old navy-headed one in manuscript.css: same shell (position, open/close
   state), new inside. The head is tinted by his generation instead of filled navy. */
.narrator-preview {
    width: min(23rem, calc(100vw - 2rem));
    border-radius: 12px;
    border: 1px solid var(--border-strong, #d1d8e0);
    background: var(--surface-warm, #fefdfb);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07), 0 16px 34px rgba(0, 0, 0, 0.10);
}

.narrator-preview .np__shut {
    top: 0.3rem;
    right: auto;
    left: auto;
    inset-inline-end: 0.45rem;
    z-index: 1;
    color: var(--text-muted, #94a3b8);
    border-radius: 4px;
}

.narrator-preview .np__shut:hover { color: var(--text, #1a1a2e); }
.narrator-preview .np__shut:focus-visible,
.narrator-preview .np__go:focus-visible {
    outline: 2px solid var(--border-focus, #2563eb);
    outline-offset: 2px;
}

.pv__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.9rem 1rem 0.75rem;
    background: linear-gradient(180deg, var(--tint, transparent), transparent 75%);
}

.pv__ar {
    margin: 0;
    padding-right: 1.4rem;
    font-family: var(--font-arabic, "Scheherazade New", serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    text-align: left;
    color: var(--text, #1a1a2e);
}

html[dir="rtl"] .pv__ar { text-align: right; padding-right: 0; padding-left: 1.4rem; }

.pv__en { margin: 0.1rem 0 0.4rem; font-size: 0.78rem; color: var(--text-muted, #94a3b8); }
.pv__life { margin: 0; font-size: 0.76rem; color: var(--text-secondary, #4a5568); }
.pv__life:empty { display: none; }
.pv__dot { margin: 0 0.3rem; color: var(--text-muted, #94a3b8); }

.pv__says { padding: 0.1rem 1rem 0.2rem; }

.pv__says h3 {
    margin: 0.55rem 0 0.4rem;
    font-family: var(--font-ui, Inter, system-ui, sans-serif);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
}

.pv__rows { display: flex; flex-direction: column; gap: 0.3rem; }

.pv__row {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: baseline;
}

.pv__w {
    font-family: var(--font-arabic, "Scheherazade New", serif);
    font-weight: 700;
    font-size: 1.12rem;
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
    white-space: nowrap;
}

[dir="rtl"] .pv__w { text-align: left; }
.pv__w--for { color: var(--nc-for); }
.pv__w--against { color: var(--nc-against); }
.pv__w--none { color: var(--text-muted, #94a3b8); font-size: 0.95rem; }
.pv__b { font-size: 0.76rem; color: var(--text-secondary, #4a5568); }

.pv__rests { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--text-muted, #94a3b8); }

.pv__foot {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem 0.7rem;
    border-top: 1px solid var(--border, #e8ecf1);
    background: var(--surface-cool, #f8fafc);
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
}

.pv__foot b {
    font-family: var(--nc-ref);
    font-size: 0.95rem;
    color: var(--primary, #1e3a5f);
    font-variant-numeric: tabular-nums;
}

.pv__foot .np__go {
    margin-inline-start: auto;
    color: var(--primary, #1e3a5f);
    font-weight: 500;
    text-decoration: none;
}

.pv__foot .np__go:hover { text-decoration: underline; }

@media (max-width: 520px) {
    /* «ضعيف جدا» is two words and wraps in 4.4rem, leaving «جدا» alone on a line. */
    .pv__row { grid-template-columns: 5.6rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ncard { transition: none; }
    .ncard:hover { transform: none; }
}

/* ── The preview card, royal blue ────────────────────────────────────────────
   It opens over the rijal panel, which is navy, so a parchment card read as something pasted
   on the chain. Only .pv goes dark; the grid cards stay light.

   Measured against #152d4e, the lighter end and so the worst case: name #fffdf8 13.6:1,
   transliteration #c3cfe2 8.8, life line and books #bccadf 8.3, small-caps heading and
   caveat #a9bad3 7.0, thiqa #7fd9a6 8.2, daif #ff9d8c 6.9, "His page" #d9b35c 7.0. */
.narrator-preview.pv {
    background: linear-gradient(180deg, #152d4e, #0f2440);
    border: 1px solid #36568a;
    color: #fffdf8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 38px rgba(0, 0, 0, 0.45);
    --nc-for: #7fd9a6;
    --nc-against: #ff9d8c;
}
.pv .nseal__track { stroke: rgba(255, 255, 255, 0.24); }
.pv .np__shut { color: #bccadf; }
.pv .np__shut:hover { color: #fffdf8; }
.pv .np__shut:focus-visible,
.pv .np__go:focus-visible { outline-color: #d9b35c; }
.pv__head { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 75%);
    border-bottom: 1px solid rgba(200, 162, 61, 0.55); }
.pv__ar { color: #fffdf8; }
.pv__en { color: #c3cfe2; }
.pv__life { color: #bccadf; }
.pv__dot { color: #8ea3c4; }
.pv__says h3, .pv__rests { color: #a9bad3; }
.pv__w--none { color: #bccadf; }
.pv__b { color: #bccadf; }
.pv__foot { background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #bccadf; }
.pv__foot b { color: #fffdf8; }
.pv__foot .np__go { color: #d9b35c; }

/* Thirteen marks: the Prophet and the twelve Imams. His are lit in his pigment (inline),
   the rest are a faint rule. No labels; the aria-label carries the names. */
.pv__gens { display: flex; gap: 2px; width: min(100%, 14rem); height: 6px; margin-top: 0.5rem; }
.pv__gen { flex: 1 1 0; border-radius: 1px; background: rgba(255, 255, 255, 0.16); }
/* ── Contrast ────────────────────────────────────────────────────────────────
   A card at #fefdfb on a #f5f7fa page differs from its background by about one per
   cent of luminance, so the grid read as text floating on a sheet rather than as
   cards. The edge does the work instead of the fill: a stronger rule, a shadow with
   enough spread to separate the card from the page, and a hairline of the page's own
   navy along the top where the light would catch it. */
.ncard {
    border-color: var(--border-strong, #d1d8e0);
    box-shadow:
        0 1px 2px rgba(15, 36, 64, .06),
        0 10px 22px -14px rgba(15, 36, 64, .35);
}
.ncard::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg,
        transparent, rgba(200, 162, 61, .55) 22%, rgba(200, 162, 61, .2) 70%, transparent);
    opacity: .7; pointer-events: none;
}
.ncard:hover {
    border-color: var(--primary-light, #2d5a8e);
    box-shadow:
        0 2px 4px rgba(15, 36, 64, .10),
        0 16px 30px -16px rgba(15, 36, 64, .5);
}
.ncard:hover::after { opacity: 1; }

/* ===========================================================================
   The cards in navy.

   Paper cards put the seal — a coloured tile with a gold ring — on a near-white
   ground, where the ring had nothing to read against and the generation colour
   was the loudest thing in the grid. On navy the tile is a jewel, the ring is
   gold on blue as it is everywhere else on this site, and a wall of them reads
   as one shelf of men rather than as a page of boxes.

   The verdict words have to be respelled, not merely dimmed: #2f6b4f and
   #9a3b2f were mixed for 5.9:1 and 6.4:1 on paper and are close to invisible
   on this ground. The pair below run 7.9:1 and 6.1:1 on the card's mid-navy.
   =========================================================================== */

.ncard {
    background: linear-gradient(145deg, #0f2440 0%, #16304f 45%, #1e3a5f 100%);
    border-color: rgba(243, 229, 184, 0.16);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 20px -10px rgba(10, 22, 40, 0.5);
}

.ncard:hover {
    border-color: rgba(243, 229, 184, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 16px 30px -12px rgba(10, 22, 40, 0.6);
}

.ncard .nseal__track { stroke: rgba(255, 255, 255, 0.18); }
.ncard .nseal__ring { stroke: var(--gold-light, #f3e5b8); }

.ncard__rank { color: rgba(243, 229, 184, 0.42); }
.ncard__ar { color: #fff; }

/* The transliteration is the gloss under the name, and it was sitting on the
   Arabic's descenders. It needs a line of its own, not a tighter one. */
.ncard__en {
    margin-top: 0.35rem;
    color: rgba(243, 229, 184, 0.72);
}

.ncard .whose { color: rgba(245, 236, 214, 0.55); }

.ncard .word--for { background: rgba(126, 217, 163, 0.14); color: #a9e8c4; }
.ncard .word--against { background: rgba(240, 150, 130, 0.15); color: #f6bdb0; }
.ncard .word--none,
.ncard .word--neutral,
.ncard .word--mixed {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(245, 236, 214, 0.8);
    border-color: rgba(243, 229, 184, 0.18);
}

.ncard__foot { border-top-color: rgba(243, 229, 184, 0.22); }
.ncard__count { color: var(--gold-light, #f3e5b8); }
.ncard__books { color: rgba(245, 236, 214, 0.58); }

.ncard:focus-visible { outline-color: var(--gold-light, #f3e5b8); }

/* ── Room for the hamza, and weight on the Latin ─────────────────────────────
   Scheherazade sets the hamza of «أ» well above the alif's shoulder, and at
   line-height 1.3 inside a two-line clamp with overflow hidden the top of the
   first line was cutting it off. 1.55 gives the ascender its room; the clamp
   still holds the card to two lines.

   And the transliteration is a name, not a caption, so it takes the weight the
   gold suggests it already has. */
/* The clamp needs `overflow: hidden`, and the hamza rides above the first line box,
   so line-height alone cannot save it — leading moves baselines apart, it does not
   raise the top of the box. The padding does, and it is inside the clamped box, so
   two lines are still two lines. */
.ncard__ar {
    line-height: 1.5;
    padding-top: 0.45rem;
}

.ncard__en {
    font-weight: 600;
    font-size: 0.82rem;
}

/* ── The drawer, on a phone ──────────────────────────────────────────────────
   Twelve cards is one comfortable screen on a desktop and three of scrolling on
   a phone before the next section starts. Four, then a button, as the bookcase
   already does for books. The overflow is hidden here rather than in script, so
   a reader without JavaScript simply gets all twelve. */
.narrator-drawer-toggle {
    display: none;
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 0.1rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-strong, #d1d8e0);
    border-radius: 9px;
    background: var(--surface, #fff);
    font-family: var(--font-ui);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary, #1e3a5f);
    cursor: pointer;
}

.narrator-drawer-toggle:hover { border-color: var(--gold, #c8a23d); }
.narrator-drawer-toggle:focus-visible {
    outline: 2px solid var(--border-focus, #2563eb);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .browse-narrator-list:not(.is-expanded) .ncard:nth-of-type(n+5) { display: none; }
    .narrator-drawer-toggle { display: block; }
}

/* ===========================================================================
   The rijāl panel, and the strip of narrators over a search, brought onto the
   same card as the grid.

   Three places now show a man as a card — the grid on /narrators and the home
   page, the panel beside an isnād, and the strip over a set of results — and
   they were three different objects. The panel was a flat translucent slab on
   the dark rail; the strip was a pale box on paper. Both become the navy card,
   so a man looks like the same thing wherever the site shows him.

   The supporting lines go up with it: 0.72rem on a translucent white was the
   smallest type on the page, under the one heading a reader opens that panel
   to read.
   =========================================================================== */

.rijal-link__card {
    padding: 0.7rem 0.85rem 0.75rem;
    border-color: rgba(243, 229, 184, 0.18);
    border-radius: 10px;
    background:
        linear-gradient(145deg, rgba(15, 36, 64, 0.62) 0%, rgba(22, 48, 79, 0.52) 45%,
                        rgba(30, 58, 95, 0.46) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 18px -10px rgba(10, 22, 40, 0.55);
}

.rijal-link:hover .rijal-link__card,
.rijal-link.is-open .rijal-link__card {
    border-color: rgba(243, 229, 184, 0.45);
}

.rijal-link__who { font-size: 0.85rem; color: rgba(243, 229, 184, 0.82); }
.rijal-link__said { font-size: 0.82rem; }

.rijal-link__said--none,
.rijal-link__books,
.rijal-link__life,
.rijal-link__note { font-size: 0.78rem; color: rgba(245, 236, 214, 0.66); }

/* ── The strip of narrators over a set of search results ─────────────────── */

.narrator-strip__card {
    border: 1px solid rgba(243, 229, 184, 0.16);
    border-radius: 10px;
    background: linear-gradient(145deg, #0f2440 0%, #16304f 45%, #1e3a5f 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 20px -10px rgba(10, 22, 40, 0.5);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.narrator-strip__card:hover,
.narrator-strip__card:focus-visible {
    border-color: rgba(243, 229, 184, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 16px 30px -12px rgba(10, 22, 40, 0.6);
    transform: translateY(-1px);
}

.narrator-strip__name { color: #fff; }

/* As on the grid card: the transliteration is a name, not a caption on one. */
.narrator-strip__name-en {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(243, 229, 184, 0.72);
}

.narrator-strip__meta { color: rgba(245, 236, 214, 0.6); }
.narrator-strip__standing--for { color: #a9e8c4; }
.narrator-strip__standing--against { color: #f6bdb0; }
.narrator-strip__standing--mixed,
.narrator-strip__standing--none { color: rgba(245, 236, 214, 0.8); }

.narrator-strip__more {
    align-self: center;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border-strong, #d1d8e0);
    border-radius: 9px;
    background: var(--surface, #fff);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary, #1e3a5f);
    cursor: pointer;
}

.narrator-strip__more:hover { border-color: var(--gold, #c8a23d); }

/* ── The cue that hands the reader the site search ───────────────────────── */
/* This page used to carry its own search field. With that gone it has to point at
   the one in the nav, and point at it with something pressable: "search above" set
   in muted grey is read by nobody who did not already know. */

.narrator-cue {
    margin: 0.25rem 0 1.6rem;
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--border, #e8ecf1);
    border-inline-start: 3px solid var(--gold, #c8a23d);
    border-radius: 10px;
    background: var(--gold-bg, #fdf8ed);
}

.narrator-cue__button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 1.15rem;
    border: 1px solid var(--primary-dark, #10233f);
    border-radius: 10px;
    background: var(--primary, #1e3a5f);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gold-light, #f3e5b8);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.narrator-cue__button:hover {
    background: var(--primary-dark, #10233f);
    border-color: var(--gold, #c8a23d);
    color: #fff;
}

.narrator-cue__button:focus-visible {
    outline: 2px solid var(--border-focus, #2563eb);
    outline-offset: 2px;
}

.narrator-cue__note {
    max-width: 72ch;
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary, #4a5568);
}

.narrator-cue__note b { color: var(--text, #1a1a2e); font-weight: 700; }

/* ── The two halves of the suggestion list ───────────────────────────────────
   Narrators and words are different answers to the same keystrokes, and the
   list ran them together under headers no heavier than the rows beneath. The
   headers now read as headers, the men take the site's navy and a seal-shaped
   mark so a narrator row looks like a narrator wherever it appears, and a rule
   separates the two sections. */

.ts-dropdown .optgroup-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 0.8rem 0.35rem;
    background: var(--surface, #fff);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark, #a07e28);
}

.ts-dropdown .optgroup + .optgroup .optgroup-header {
    margin-top: 0.3rem;
    border-top: 1px solid var(--border, #e8ecf1);
}

/* A man, not a word: the navy the cards use, with a gold spine down the start
   edge standing in for the seal at this size. */
.ts-dropdown [data-group="narrators"] .option,
.ts-dropdown .optgroup[data-group="narrators"] .option {
    border-inline-start: 3px solid var(--gold, #c8a23d);
    background: linear-gradient(90deg, rgba(30, 58, 95, 0.07), transparent 60%);
    font-weight: 600;
    color: var(--primary-dark, #10233f);
}

.ts-dropdown [data-group="narrators"] .option.active,
.ts-dropdown .optgroup[data-group="narrators"] .option.active {
    background: linear-gradient(90deg, rgba(30, 58, 95, 0.16), rgba(30, 58, 95, 0.04) 70%);
}

/* ── The nav field's placeholder, with its two words marked ──────────────────
   A real element over the field: an HTML placeholder takes a weight as a whole
   and cannot carry markup, so «narrations» and «narrators» could not be picked
   out of it. Shown only while the control is empty, and it does not take the
   pointer except to hand focus to the field under it. */

.nav-search__shell { position: relative; }

.nav-search__hint {
    position: absolute;
    top: 50%;
    inset-inline-start: 2.6rem;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 7rem);
    text-overflow: ellipsis;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    /* The nav's own tracking is negative, which pulls a bold word into the plain
       one beside it. Normal tracking, and a little air between words. */
    letter-spacing: 0;
    word-spacing: 0.08em;
    /* The ellipsis needs overflow:hidden, and that clips whatever leaves the line
       box — which in Arabic is the tail of every «ج» and «ي». The box has to be
       tall enough to hold them: at 1.6 the descenders of «الرجال» were cut flat. */
    line-height: 2.2;
    color: rgba(238, 243, 250, 0.62);
}

.nav-search__hint b {
    font-weight: 700;
    color: var(--gold-light, #f3e5b8);
    /* Padding rather than a margin, so the bold word keeps its own space without
       the browser collapsing it against the thin text either side. */
    padding-inline: 0.06em;
}

.nav-search__shell.has-hint .nav-search__hint { opacity: 1; pointer-events: auto; cursor: text; }

/* The native placeholder steps aside while ours is up, or the two print on top of
   each other. Any input inside the shell: Tom Select's text box is not a direct
   child of .ts-control in every version, and the first selector missed it. */
.nav-search__shell.has-hint input::placeholder { color: transparent !important; }
.nav-search__shell.has-hint input::-webkit-input-placeholder { color: transparent !important; }