@font-face {
    font-family: 'KFGQPC Uthmanic Script HAFS';
    src: url('../fonts/UthmanicHafs.otf') format('opentype');
    font-display: swap;
}

/* Same theme as the rest of the site's tabs (Word by Word / Transliteration)
   - dark navy background, gold accent - kept identical so the experience is
   consistent across every tab. */
:root {
    --bg: #0a0a2e;
    --panel: #10103d;
    --border: #232357;
    --ink: #ffffff;
    --ink-soft: #b8b8d0;
    --blue: #f5c518;
    --blue-ink: #1a1a1a;
    --blue-deep: #f5c518;
    --blue-bright: #f5c518;
    --green: #22c55e;
    --green-ink: #062012;
}
/* Light alternative to the default navy-blue theme, toggled from
   index.html's #themeToggle (shared 'sitethemePref' localStorage key) -
   matches quranwbw.com's "Golden Glint" theme exactly (checked directly
   against its stylesheet: --theme-bg-rgb 255 255 255, --theme-text-rgb 0
   0 0, --theme-accent-rgb 177 144 31). Deliberately does NOT touch .sc-*
   below - those are the dependency graph's functional grammatical-category
   color-coding (PRON, N, V, etc.), not decorative theme chrome, and users
   rely on those colors staying consistent across every verse regardless of
   theme. --green/--green-ink also left untouched for the same "semantic,
   not decorative" reason. */
:root[data-theme="gold"] {
    --bg: #ffffff;
    --panel: #fdf9ef;
    --border: rgba(177,144,31,.35);
    --ink: #1a1408;
    --ink-soft: #6b6252;
    --blue: #b1901f;
    --blue-ink: #1a1408;
    --blue-deep: #b1901f;
    --blue-bright: #b1901f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.tab-nav { display: flex; gap: 6px; padding: 10px 3vw 0; }
.tab-btn {
    background: transparent; border: none; color: var(--ink-soft); padding: 10px 18px;
    border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 600; font-size: 15px;
    font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-block; text-decoration: none;
}
.tab-btn.active { color: var(--ink); border-bottom-color: var(--blue); }
.tab-btn:hover:not(.active) { color: var(--ink); }

body {
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 3vw;
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}
.topbar .title { font-weight: 700; font-size: 16px; color: var(--blue-deep); }
.topbar .jump-group { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 60vw; }
.topbar .jump-group select { flex: 1 1 auto; max-width: none; }
.topbar .go-btn {
    flex-shrink: 0; font-size: 13px; font-weight: 700; padding: 7px 14px;
    border: none; border-radius: 8px; background: var(--blue); color: var(--blue-ink);
    cursor: pointer;
}
.topbar .go-btn:hover { filter: brightness(1.08); }
.topbar select {
    font-size: 13px; font-weight: 600; padding: 7px 10px;
    border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--ink);
    flex: 1 1 auto; min-width: 0; max-width: 60vw;
}

.verse-jump-flash { animation: verseJumpFlash 1.3s ease; }
@keyframes verseJumpFlash {
    0%, 100% { background: transparent; }
    20% { background: rgba(245, 197, 24, .18); }
}

.surah { padding: 0 2vw 30px; max-width: 1200px; margin: 0 auto; }

.surah-header {
    text-align: center;
    padding: 34px 10px 18px;
    scroll-margin-top: 58px;
}
.surah-header .surah-title {
    font-weight: 700;
    font-size: clamp(20px, 4vw, 28px);
    color: var(--blue-deep);
    margin: 0;
}

.ayah-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px 20px;
    margin: 0 0 16px;
    background: var(--panel);
    /* One page has 1,000+ of these, each holding a full SVG dependency
       graph (dozens of paths/text nodes) plus a per-word breakdown -
       rendering and painting all of it upfront, all the time, is what made
       scrolling stutter. content-visibility:auto lets the browser skip
       layout/style/paint entirely for whichever cards are off-screen,
       without changing anything about what's actually shown once a card
       scrolls into view. contain-intrinsic-size reserves an approximate
       placeholder height for skipped cards so the scrollbar/scroll
       position stay stable instead of jumping as cards pop in and out. */
    content-visibility: auto;
    contain-intrinsic-size: 0 550px;
}
.ayah-card .ref {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    color: var(--blue);
    background: none;
    padding: 0;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.tb-translation {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    font-weight: 600;
    margin: 4px 0 18px;
}

.tb-unavailable {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-style: italic;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}

.tb-graph-wrap {
    overflow-x: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 16px;
    text-align: center;
}
/* Self-rendered SVG dependency graph (qul.tarteel.ai data, for the small
   subset of verses that have it where corpus.quran.com has nothing) -
   same wrapper as the downloaded-image graphs above, just an inline SVG
   instead of an <img>, so it inherits the site's own colors via the
   var(--blue) etc. fallbacks baked into the SVG's own fill/stroke values. */
.tb-qgraph-svg {
    max-width: 100%;
    height: auto;
}
.tb-graph-wrap img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: 4px;
}
/* Self-rendered dependency graph, built straight from the corpus's own
   head-token/relation-label data (build_dep_graphs.py -> dep_graph_svg.py) -
   real text, not an image, so every verse gets a complete diagram (no more
   pagination truncation) and relation labels get the same hover/tap
   tooltip as the traditional-Arabic term under each word card. */
.tb-dep-svg {
    max-width: 100%;
    height: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* A long verse is split into multiple chunks (see CHUNK_MAX in
   build_grammar_page.py's buildDepSvg), stacked top to bottom like
   corpus.quran.com's own multi-page graphs for long verses, instead of one
   wide row that needs horizontal scrolling to follow. */
.tb-dep-chunks { display: flex; flex-direction: column; gap: 10px; }
.tb-dep-chunk + .tb-dep-chunk { padding-top: 10px; border-top: 1px dashed var(--border); }
.tb-dep-word {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif;
    font-size: 36px; /* must match WORD_FONT_PX in build_grammar_page.py - the
       JS measures real widths at this exact size to lay everything out */
    fill: var(--ink);
}
/* Same Uthmanic calligraphy font as every other word, just muted - verified
   directly against the reference image (1:5's "(نَحْنُ)" elided-subject
   marker renders in the identical script font, grey, not italic, not
   sans-serif - a previous sans-serif/italic override here was based on a
   one-off headless-Chrome font-substitution artifact, not the real source). */
.tb-dep-elided {
    fill: var(--ink-soft);
}
/* No default fill here (unlike the old version) - the POS code under a
   real word is colored to match that word via the same sc-* class, exactly
   like the reference diagram; only elided words' POS code stays the muted
   .tb-dep-elided gray, via the class swap in buildDepSvg(). */
.tb-dep-pos { font-size: 12px; }
.tb-dep-dot { }
/* path.tb-dep-arc (element+class, specificity 0,1,1) is needed to beat the
   .sc-* rules' `fill: ... !important` (0,1,0) - those exist so the SAME
   classes can color word/label <text> fills, but an arc <path> must stay
   hollow (colored via `stroke` only) or it renders as a solid filled blob
   instead of a thin curved line. */
path.tb-dep-arc { fill: none !important; stroke-width: 1.7px; opacity: .9; }
.tb-dep-bracket-line { stroke: var(--ink-soft); stroke-width: 1.2px; }
/* A background-colored "halo" stroke, painted BEHIND the fill (paint-order),
   punches a solid hole through anything drawn earlier in the SVG - namely a
   nested/converging arc that happens to pass through this exact spot (two
   relations sharing an endpoint, e.g. 1:1's two "صفة" arcs both pointing at
   the same PN, is a routine, unavoidable layout - the reference itself has
   this same convergence). Combined with labels now being rendered in their
   own final pass (see buildChunkSvg's labelParts), every label paints over
   every arc regardless of draw order, and the halo keeps the text crisp
   instead of visibly cut through by the line - matching var(--bg), the real
   background color behind the SVG (.tb-graph-wrap), so the halo is
   invisible against the page and only does its job where a line crosses. */
/* 18px, bumped from 15px - even with the correct font and a thin halo, 15px
   read noticeably smaller/fainter than the ayah's own 36px word text right
   above it. MUST stay in sync with build_grammar_page.py's
   measureLabelText, which measures at this same size for its label-
   collision-avoidance pass - changing one without the other misaligns
   labels against their actual rendered footprint. */
.tb-dep-bracket-lbl { font-size: 18px; font-family: 'KFGQPC Uthmanic Script HAFS', serif; }
/* Relation labels are traditional-Arabic script (e.g. مضاف إليه) - same
   font as everywhere else this kind of text appears on the site (the
   .tb-grammar line under each word card), not the SVG's own default
   sans-serif, which looked mismatched next to it. */
.tb-dep-lbl { font-size: 18px; font-family: 'KFGQPC Uthmanic Script HAFS', serif; }
/* text.tb-dep-lbl (element+class, specificity 0,1,1) needed to beat the
   .sc-* rules' `stroke: ... !important` (0,1,0), same reasoning as
   path.tb-dep-arc above - otherwise the halo stroke below would inherit
   each label's own text color instead of the background, making it a
   thicker blob of the SAME color rather than a background-colored halo. */
text.tb-dep-bracket-lbl, text.tb-dep-lbl {
    /* 4px (relative to the OLD 15px label size) was thick enough to fill
       in the Uthmani script's fine loops/connecting strokes and turn the
       whole label into an illegible blob - visible side-by-side against
       the reference, which renders these same small labels crisp. 1.8px
       keeps the same ~1:10 ratio now that labels render at 18px, still
       masking a line crossing behind the text without eating the
       letterforms. */
    paint-order: stroke fill; stroke: var(--bg) !important; stroke-width: 1.8px; stroke-linejoin: round;
}
.tb-dep-lbl .tb-ar-term, .tb-dep-xref .tb-ar-term { cursor: pointer; }
.tb-dep-xref { font-size: 10px; fill: var(--ink-soft); font-family: 'KFGQPC Uthmanic Script HAFS', serif; }
.tb-dep-xref-stub { stroke: var(--border); stroke-width: 1px; stroke-dasharray: 2,2; }
.tb-words {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tb-word {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 140px;
    max-width: 220px;
    flex: 1 1 160px;
    background: var(--bg);
}
.tb-word .tb-translit {
    font-weight: 700; font-size: 14px;
}
.tb-word .tb-translit span { display: inline; }
/* Per-part-of-speech colors, matching corpus.quran.com's own diagram color
   coding (their .segXXX classes) - brightened for this site's dark
   background while keeping the same hue per category. Applied to both the
   transliteration (split per morphological segment) and the role badges. */
/* !important: these are authoritative part-of-speech color assignments
   applied in several different contexts (badges, translit pieces) that
   each have their own more-specific default text color - the category
   color must always win over those. `fill`/`stroke` are the SVG-world
   equivalent of `color` (SVG <text>/<path> ignore `color` entirely) -
   needed so the same classes color the dependency-graph SVG's word text
   and arcs too, not just HTML badges/translit spans. */
.sc-sky { color: #6498d8 !important; fill: #6498d8 !important; stroke: #6498d8 !important; }
.sc-blue { color: #62bcda !important; fill: #62bcda !important; stroke: #62bcda !important; }
.sc-purple { color: #aa5ddf !important; fill: #aa5ddf !important; stroke: #aa5ddf !important; }
.sc-brown { color: #d0b76d !important; fill: #d0b76d !important; stroke: #d0b76d !important; }
.sc-metal { color: #8c9eb0 !important; fill: #8c9eb0 !important; stroke: #8c9eb0 !important; }
.sc-gold { color: #e1d05c !important; fill: #e1d05c !important; stroke: #e1d05c !important; }
.sc-seagreen { color: #66d864 !important; fill: #66d864 !important; stroke: #66d864 !important; }
.sc-green { color: #6ae05c !important; fill: #6ae05c !important; stroke: #6ae05c !important; }
.sc-red { color: #f76e46 !important; fill: #f76e46 !important; stroke: #f76e46 !important; }
.sc-rust { color: #de5e5e !important; fill: #de5e5e !important; stroke: #de5e5e !important; }
.sc-pink { color: #fe3eca !important; fill: #fe3eca !important; stroke: #fe3eca !important; }
.sc-rose { color: #fd5162 !important; fill: #fd5162 !important; stroke: #fd5162 !important; }
.sc-navy { color: #513efe !important; fill: #513efe !important; stroke: #513efe !important; }
.sc-orange { color: #f2974a !important; fill: #f2974a !important; stroke: #f2974a !important; }
/* Every .sc-* color above was tuned bright/pastel for contrast against the
   dark navy background (checked: each has under 3:1 contrast against
   white, several under 2:1 - e.g. sc-gold #e1d05c is a pale yellow that
   nearly vanishes on a white page). Rather than leave the POS
   color-coding unreadable in the Golden Glint theme, each gets a
   hue-preserving DARKENED variant here, computed by reducing HSL
   lightness until contrast against white reaches ~4.6:1, so the same
   category still reads as "that color family" (still blue, still green,
   etc.) but is actually legible on a light background. */
:root[data-theme="gold"] .sc-sky { color: #153153 !important; fill: #153153 !important; stroke: #153153 !important; }
:root[data-theme="gold"] .sc-blue { color: #0f3441 !important; fill: #0f3441 !important; stroke: #0f3441 !important; }
:root[data-theme="gold"] .sc-purple { color: #561980 !important; fill: #561980 !important; stroke: #561980 !important; }
:root[data-theme="gold"] .sc-brown { color: #372d12 !important; fill: #372d12 !important; stroke: #372d12 !important; }
:root[data-theme="gold"] .sc-metal { color: #262f37 !important; fill: #262f37 !important; stroke: #262f37 !important; }
:root[data-theme="gold"] .sc-gold { color: #342f0a !important; fill: #342f0a !important; stroke: #342f0a !important; }
:root[data-theme="gold"] .sc-seagreen { color: #0f3a0e !important; fill: #0f3a0e !important; stroke: #0f3a0e !important; }
:root[data-theme="gold"] .sc-green { color: #103a0b !important; fill: #103a0b !important; stroke: #103a0b !important; }
:root[data-theme="gold"] .sc-red { color: #711d05 !important; fill: #711d05 !important; stroke: #711d05 !important; }
:root[data-theme="gold"] .sc-rust { color: #7a1919 !important; fill: #7a1919 !important; stroke: #7a1919 !important; }
:root[data-theme="gold"] .sc-pink { color: #a9017b !important; fill: #a9017b !important; stroke: #a9017b !important; }
:root[data-theme="gold"] .sc-rose { color: #c70216 !important; fill: #c70216 !important; stroke: #c70216 !important; }
:root[data-theme="gold"] .sc-navy { color: #2f18fe !important; fill: #2f18fe !important; stroke: #2f18fe !important; }
:root[data-theme="gold"] .sc-orange { color: #4f2706 !important; fill: #4f2706 !important; stroke: #4f2706 !important; }
/* The overrides above set `fill` unconditionally, but a dependency arc
   (path.tb-dep-arc) needs fill:none - its color only shows via `stroke`,
   the `fill` is what makes it render as a solid wedge/blob rather than a
   thin outlined curve (reproduced live: 1:2's متعلق arc rendered as a
   solid brown teardrop in this theme). The base rule already says
   `path.tb-dep-arc { fill: none !important; }`, but that selector's
   specificity (one element + one class) is LOWER than this override
   block's (:root pseudo-class + attribute + class = three), so it loses
   the tie despite also being !important. Re-asserting fill:none here with
   a selector specific enough to win back (:root+attribute+path+both
   classes) restores the correct thin-line arc rendering without touching
   the color values above. */
:root[data-theme="gold"] path.tb-dep-arc.sc-sky,
:root[data-theme="gold"] path.tb-dep-arc.sc-blue,
:root[data-theme="gold"] path.tb-dep-arc.sc-purple,
:root[data-theme="gold"] path.tb-dep-arc.sc-brown,
:root[data-theme="gold"] path.tb-dep-arc.sc-metal,
:root[data-theme="gold"] path.tb-dep-arc.sc-gold,
:root[data-theme="gold"] path.tb-dep-arc.sc-seagreen,
:root[data-theme="gold"] path.tb-dep-arc.sc-green,
:root[data-theme="gold"] path.tb-dep-arc.sc-red,
:root[data-theme="gold"] path.tb-dep-arc.sc-rust,
:root[data-theme="gold"] path.tb-dep-arc.sc-pink,
:root[data-theme="gold"] path.tb-dep-arc.sc-rose,
:root[data-theme="gold"] path.tb-dep-arc.sc-navy,
:root[data-theme="gold"] path.tb-dep-arc.sc-orange {
    fill: none !important;
}
.tb-word .tb-gloss {
    font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 8px; line-height: 1.3; font-style: italic;
}
.tb-segs { display: flex; flex-direction: column; gap: 6px; }
.tb-seg {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tb-seg .tb-term {
    font-weight: 800;
    font-size: 12px;
    color: var(--ink);
}
.tb-grammar {
    direction: rtl;
    font-family: 'KFGQPC Uthmanic Script HAFS', serif;
    font-size: 28px;
    line-height: 1.9;
    color: var(--blue-bright);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
/* Individual Arabic words within the traditional grammar term - hover shows
   a custom-styled tooltip with the transliteration (matches the site's own
   font/sizing, unlike a native title="" tooltip which can't be styled and
   renders tiny); tapping/clicking shows a short English explanation
   instead, in the same tooltip style used for the role badges below. */
.tb-ar-term {
    border-bottom: 1.5px dotted var(--blue-bright);
    cursor: pointer;
}
.tb-ar-term:hover, .tb-ar-term:focus-visible { background: rgba(245, 197, 24, .12); }

.tb-loading, .tb-empty {
    text-align: center; color: var(--ink-soft); font-size: 13px; padding: 30px 10px;
}

/* ---- Tappable plain-English tooltip terms (role badges) ---- */
.tb-term {
    border-bottom: 1.5px dotted var(--blue);
    cursor: pointer;
    color: inherit;
}
.tb-term:hover, .tb-term:focus-visible { background: rgba(245, 197, 24, .12); }
.tb-tip-bubble {
    position: absolute;
    z-index: 200;
    max-width: 280px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tb-tip-hover {
    pointer-events: none;
    font-weight: 600;
    color: var(--blue-bright);
}

/* ---- Dictionary entry modal (triggered by clicking a word's Arabic text
   in the per-word breakdown) - ported verbatim from wordbyword.css, same
   variable names, so it themes identically with zero changes needed. ---- */
.dict-modal-overlay {
    position: absolute; left: 0; right: 0; background: rgba(0,0,0,.65); z-index: 100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.dict-modal {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    max-width: 700px; width: 100%; padding: 24px 26px; position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: dictModalIn .18s ease;
}
@keyframes dictModalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dict-modal-toolbar {
    position: sticky; top: -4px; z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin: -12px -14px 8px -12px;
    background: var(--panel);
    padding: 8px 14px 6px 12px;
}
.dict-modal-top-btn {
    font-size: 12px; font-weight: 700; padding: 5px 10px; border: none; border-radius: 6px;
    background: var(--blue); color: var(--blue-ink); cursor: pointer; white-space: nowrap;
    font-family: sans-serif;
}
.dict-modal-top-btn:hover { filter: brightness(1.08); }
.dict-modal-close {
    cursor: pointer; font-size: 26px;
    color: var(--ink-soft); line-height: 1; font-family: sans-serif;
}
.dict-modal-close:hover, .dict-modal-close:focus-visible { color: var(--ink); }
.dict-origin-link {
    position: absolute; top: 14px; left: 20px; font-family: sans-serif; font-size: 13px;
    font-weight: 700; color: var(--blue); text-decoration: none; border-bottom: 1px dotted var(--blue);
}
.dict-origin-link:hover, .dict-origin-link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.dict-entry-arabic {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif; font-weight: bold;
    font-size: 32px; direction: rtl; color: var(--blue); margin: 0 30px 8px 0;
}
.dict-entry-desc { font-family: sans-serif; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.6; }
.dict-section-heading {
    font-family: sans-serif; font-size: 13px; font-weight: 700; color: var(--ink);
    margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px dashed var(--border);
}
.dict-section-heading.exact { color: var(--green); border-bottom-color: var(--green); }
.dict-occ { padding: 8px 0; border-bottom: 1px dotted var(--border); font-family: sans-serif; }
.dict-occ:last-child { border-bottom: none; }
.dict-occ.exact { border-left: 2px solid var(--green); padding-left: 8px; }
.dict-occ .meta { font-size: 12px; color: var(--ink-soft); }
.dict-occ .meta.form-heading { font-weight: 700; color: var(--ink); }
.dict-occ .translit { font-style: italic; color: var(--ink-soft); font-size: 13px; }
.dict-occ .gloss { font-weight: 600; color: var(--ink); }
.dict-occ .arabic-line {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif; direction: rtl; text-align: right;
    font-size: 17px; color: var(--ink); margin-top: 6px;
}
.dict-occ .arabic-line mark { background: var(--blue); color: var(--blue-ink); padding: 0 2px; border-radius: 3px; }
.dict-occ .arabic-line mark.exact { background: var(--green); color: var(--green-ink); }
.dict-interlinear {
    display: flex; flex-wrap: wrap; gap: 10px 14px; direction: rtl;
    margin-top: 8px; padding: 10px 12px;
    background: rgba(255,255,255,.03); border-radius: 8px;
}
.dict-interlinear .word-unit { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.dict-interlinear .word-unit .ar {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif; font-size: 19px; color: var(--ink); white-space: nowrap;
}
.dict-interlinear .word-unit .gloss {
    font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: center;
    direction: ltr; max-width: 12ch; line-height: 1.25;
}
.dict-interlinear .word-unit.hl .ar {
    background: var(--blue); color: var(--blue-ink); padding: 0 3px; border-radius: 3px;
}
.dict-interlinear .word-unit.hl.exact .ar {
    background: var(--green); color: var(--green-ink);
}
/* Per-word audio (audios.quranwbw.com) - right-click a word here to hear it,
   same mechanism/feedback as wordbyword.html's own .word-unit .ar.playing. */
.dict-interlinear .word-unit .ar.playing {
    background: var(--green); color: var(--green-ink);
}
.quran-ref-link { color: var(--blue); text-decoration: none; border-bottom: 1px dotted var(--blue); }
.quran-ref-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.dict-view-full {
    display: inline-block; margin-top: 16px; font-family: sans-serif; font-size: 13px;
    color: var(--blue); text-decoration: none; border-bottom: 1px dotted var(--blue);
}
.dict-view-full:hover { color: var(--ink); }

/* ---- Lane's Lexicon classical-usage section (within the same modal) ---- */
.lane-entries { font-family: sans-serif; }
.lane-entry { padding: 10px 0; border-bottom: 1px dotted var(--border); }
.lane-entry:last-child { border-bottom: none; }
.lane-headword {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif; direction: rtl; text-align: right;
    font-size: 22px; color: var(--blue); margin-bottom: 6px;
}
.lane-headword.exact { color: var(--green); }
.lane-itype { font-family: sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-soft); direction: ltr; display: inline-block; }
.lane-body { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.lane-body .lane-ar {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif; direction: rtl; unicode-bidi: embed;
    color: var(--ink); font-size: 15px; padding: 0 2px;
}
.lane-body .lane-ar.exact { background: var(--green); color: var(--green-ink); border-radius: 3px; }
.lane-body em { color: var(--ink); font-style: italic; }
.lane-body .lane-tropical { color: var(--blue); font-style: normal; font-size: 12px; }
.lane-body .lane-sense-num { color: var(--blue); font-weight: 700; }
.lane-body .lane-note { color: var(--ink-soft); font-size: 12px; }
.lane-body .lane-quote {
    display: block; margin: 6px 0; padding: 4px 10px; border-left: 2px solid var(--border);
    font-style: italic;
}
.lane-body .lane-verse-line { direction: rtl; text-align: right; }

.hidden { display: none !important; }

/* Grammar's own per-word Arabic text (.tb-word .ar) - the clickable word
   that opens the dictionary modal above. Bigger and bolder than the
   surrounding transliteration/gloss text, matching how prominently
   wordbyword.html's own .word-unit .ar reads. */
.tb-word .ar {
    font-family: 'KFGQPC Uthmanic Script HAFS', serif;
    font-weight: bold;
    font-size: 22px;
    color: var(--ink);
    text-align: center;
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 5px;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.tb-word .ar:hover, .tb-word .ar:focus-visible {
    background-color: var(--blue);
    color: var(--blue-ink);
}