/* Hasana · UI v2 - "contemporary editorial manuscript"
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V5
 * genre: editorial · motion: cut · colour: oklch tokens only, one accent
 * Script contract: script.js is untouched; every ID, data-* attribute and
 * state class styled here is required by it.
 */

/* One mushaf face for every rewayah: Scheherazade New (SIL, OFL).
 *
 * This replaced nine KFGQPC Uthmanic OTFs. Those fonts tag three Quranic marks
 * - U+06DF small high rounded zero, U+06E7 small high yeh, U+06E8 small high
 * noon - as GDEF class 1 (base glyph) with real advance widths and no GPOS
 * attachment anchor, so shapers lay them out as inline letters on the
 * baseline instead of stacking them on their base letter. Measured in-browser:
 * +11.2px, +21.5px and +13.3px of spurious advance. It is not a version bug
 * (KFGQPC v2.1 is byte-identical to v0.05) and the KFGQPC licence forbids
 * patching the binaries. A unicode-range override cannot fix it either:
 * browsers deliberately keep a base+mark cluster in a single font, so the
 * override is never consulted. Scheherazade measures 0px on every mark and
 * covers every codepoint used across all 8 rewayat plus the Ajzaa files.
 *
 * Keep `font-display: block`. `swap` paints fallback glyphs first, and no
 * fallback positions Quranic combining marks correctly - a wrong glyph is
 * worse than a briefly invisible one. The UI fonts load from Google Fonts via
 * <link> and keep `swap`, which is right for plain UI text. */

@font-face {
  font-family: 'MushafFont';
  src: url('fonts/ScheherazadeNew-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
    /* colour · light - warm paper, warm ink, one forest accent */
    --color-paper: oklch(96.6% 0.009 85);
    --color-surface: oklch(98.4% 0.005 85);
    --color-surface-2: oklch(93.2% 0.012 85);
    --color-ink: oklch(24.5% 0.012 85);
    --color-ink-2: oklch(44% 0.011 85);
    --color-line: oklch(87.5% 0.008 85);
    --color-line-strong: oklch(75% 0.014 85);
    --color-line-control: oklch(55% 0.012 85);
    --color-accent: oklch(43% 0.09 160);
    --color-accent-text: oklch(43% 0.09 160);
    --color-on-accent: oklch(97.5% 0.006 100);
    --color-accent-soft: oklch(94% 0.02 160);
    --color-highlight-bg: oklch(93.5% 0.024 165);
    --color-highlight-text: oklch(33% 0.055 165);
    --color-focus: oklch(42% 0.095 160);
    --color-danger: oklch(45% 0.14 28);
    --color-overlay: oklch(18% 0.012 85 / 0.5);
    --shadow-drawer: 0 16px 40px -16px oklch(20% 0.02 85 / 0.35);
    --icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6758' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* typography */
    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-arabic: 'Changa', sans-serif;
    --arabic-fallback-font: 'Changa', sans-serif;

    --text-micro: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5625rem;
    --text-xl: 1.953rem;
    --mushaf-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);

    --lh-tight: 1.2;
    --lh-body: 1.6;
    --lh-mushaf: 2.25;

    /* space · 4pt scale */
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* radius grammar · small controls 6, panels 12, reading/index 0 */
    --radius-s: 6px;
    --radius-m: 12px;

    /* depth · named z-scale */
    --z-base: 1;
    --z-raised: 10;
    --z-overlay: 100;
    --z-drawer: 200;
    --z-modal: 400;

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long: 420ms;

    color-scheme: light;
}

:root[data-theme="dark"] {
    /* colour · dark - green-tinted near-black, surfaces lighter than paper */
    --color-paper: oklch(16.5% 0.014 160);
    --color-surface: oklch(20.5% 0.013 160);
    --color-surface-2: oklch(24.5% 0.012 160);
    --color-ink: oklch(93% 0.008 90);
    --color-ink-2: oklch(73% 0.008 90);
    --color-line: oklch(26% 0.01 160);
    --color-line-strong: oklch(36% 0.011 160);
    --color-line-control: oklch(48% 0.012 160);
    --color-accent: oklch(50% 0.08 160);
    --color-accent-text: oklch(70% 0.09 160);
    --color-on-accent: oklch(97.5% 0.006 100);
    --color-accent-soft: oklch(27% 0.028 160);
    --color-highlight-bg: oklch(26.5% 0.026 160);
    --color-highlight-text: oklch(76% 0.08 160);
    --color-focus: oklch(70% 0.09 160);
    --color-danger: oklch(72% 0.11 25);
    --color-overlay: oklch(12% 0.01 160 / 0.6);
    --shadow-drawer: 0 16px 40px -16px oklch(0% 0 0 / 0.6);
    --icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b3a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-paper: oklch(16.5% 0.014 160);
        --color-surface: oklch(20.5% 0.013 160);
        --color-surface-2: oklch(24.5% 0.012 160);
        --color-ink: oklch(93% 0.008 90);
        --color-ink-2: oklch(73% 0.008 90);
        --color-line: oklch(26% 0.01 160);
        --color-line-strong: oklch(36% 0.011 160);
        --color-line-control: oklch(48% 0.012 160);
        --color-accent: oklch(50% 0.08 160);
        --color-accent-text: oklch(70% 0.09 160);
        --color-on-accent: oklch(97.5% 0.006 100);
        --color-accent-soft: oklch(27% 0.028 160);
        --color-highlight-bg: oklch(26.5% 0.026 160);
        --color-highlight-text: oklch(76% 0.08 160);
        --color-focus: oklch(70% 0.09 160);
        --color-danger: oklch(72% 0.11 25);
        --color-overlay: oklch(12% 0.01 160 / 0.6);
        --shadow-drawer: 0 16px 40px -16px oklch(0% 0 0 / 0.6);
        --icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b3a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: var(--z-modal);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-md);
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-xl)));
    transition: transform var(--dur-short) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

#main-content:focus,
#main-content:focus-visible {
    outline: none;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    min-height: 100dvh;
    overflow-x: clip;
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    font-synthesis: none;
    text-wrap: pretty;
    display: flex;
    justify-content: center;
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

button,
select,
input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: none;
    border: none;
}

::selection {
    background: var(--color-accent);
    color: var(--color-paper);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.app-container {
    position: relative;
    z-index: var(--z-base);
    width: 100%;
    max-width: 1060px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.main-content {
    flex-grow: 1;
    width: 100%;
    padding: var(--space-lg) var(--space-lg) calc(48px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------ */
/* Header · single-line editorial masthead                             */
/* ------------------------------------------------------------------ */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    min-height: 64px;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-line);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.brand-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.brand-mark svg {
    width: 100%;
    height: 100%;
}

h1 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-ink-2);
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.theme-toggle:hover {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.theme-toggle:active {
    transform: scale(0.98);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun {
        display: none;
    }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon {
        display: block;
    }
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    height: 44px;
    padding: var(--space-3xs);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
}

.lang-button {
    min-height: 40px;
    padding: 0 var(--space-sm);
    border-radius: 4px;
    background: transparent;
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 600;
    transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.lang-button:hover {
    color: var(--color-ink);
}

.lang-button:active {
    transform: scale(0.98);
}

.lang-button.active {
    background: var(--color-ink);
    color: var(--color-paper);
}

main {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Section toggle · rules-delimited tab bar                            */
/* ------------------------------------------------------------------ */

.section-toggle {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-xl);
    border-block: 1px solid var(--color-line);
}

.section-toggle .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-lg);
    color: var(--color-ink-2);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.section-toggle .nav-button svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.section-toggle .nav-button:hover {
    color: var(--color-ink);
}

.section-toggle .nav-button.active {
    color: var(--color-ink);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

.section-toggle .nav-button:active,
.readable-nav-button:active,
.lang-button:active {
    transform: scale(0.98);
}

/* ------------------------------------------------------------------ */
/* Audible · selectors + audio panel                                   */
/* ------------------------------------------------------------------ */

.selectors {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.selector-container {
    min-width: 0;
}

.selector-container label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2);
}

.selectors select {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 var(--space-sm);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.95rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--icon-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.selectors select:hover {
    border-color: var(--color-ink-2);
}

.selectors select:focus-visible {
    border-color: var(--color-accent);
}

html[dir="rtl"] .selectors select {
    background-position: left 14px center;
    padding: 0 var(--space-sm) 0 40px;
}

.audio-player-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "audio audio audio"
        "back toolbar fwd"
        "error error error";
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-m);
    padding: var(--space-md) var(--space-lg);
}

.skip-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.skip-backward-group {
    grid-area: back;
}

.skip-forward-group {
    grid-area: fwd;
}

.skip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-ink-2);
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.skip-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.skip-button:hover {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.skip-button:active {
    transform: scale(0.98);
}

audio {
    grid-area: audio;
    display: block;
    width: 100%;
    min-width: 0;
}

audio::-webkit-media-controls-panel {
    background-color: var(--color-surface);
}

.audio-toolbar {
    grid-area: toolbar;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs) var(--space-sm);
}

.speed-control,
.sleep-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
}

.toolbar-label {
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2);
    white-space: nowrap;
}

html[dir="rtl"] .toolbar-label {
    letter-spacing: 0;
    text-transform: none;
}

.speed-control select,
.sleep-control select {
    height: 40px;
    padding: 0 32px 0 var(--space-sm);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--icon-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
    transition: border-color var(--dur-micro) var(--ease-out);
}

.speed-control select:hover,
.sleep-control select:hover {
    border-color: var(--color-ink-2);
}

.speed-control select:focus-visible,
.sleep-control select:focus-visible {
    border-color: var(--color-accent);
}

html[dir="rtl"] .speed-control select,
html[dir="rtl"] .sleep-control select {
    background-position: left 12px center;
    padding: 0 var(--space-sm) 0 32px;
}

.sleep-status {
    font-size: var(--text-micro);
    color: var(--color-ink-2);
    white-space: nowrap;
}

.loop-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-ink-2);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.loop-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.loop-toggle:hover {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.loop-toggle.active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.loop-toggle:active {
    transform: scale(0.98);
}

.download-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-ink-2);
    text-decoration: none;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.download-audio svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.download-audio:hover {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.download-audio:active {
    transform: scale(0.98);
}

.audio-error {
    grid-area: error;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    color: var(--color-danger);
    font-size: 0.9rem;
}

.audio-resume-hint {
    grid-area: error;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: 0.9rem;
    color: var(--color-ink-2);
}

.audio-resume-hint button {
    min-height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    color: var(--color-accent-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.audio-resume-hint button:hover {
    border-color: var(--color-line-strong);
    color: var(--color-accent-text);
}

.audio-resume-hint button:active {
    transform: scale(0.98);
}

/* Full-text search screen */
.full-search {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.full-search-bar {
    display: flex;
    gap: var(--space-xs);
}

.full-search-bar input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: 1rem;
}

.full-search-bar input[type="search"]:focus-visible {
    border-color: var(--color-accent);
    outline-offset: 1px;
}

.full-search-go {
    height: 46px;
    padding: 0 var(--space-lg);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-s);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform var(--dur-micro) var(--ease-out), filter var(--dur-micro) var(--ease-out);
}

.full-search-go:hover {
    filter: brightness(1.06);
}

.full-search-go:active {
    transform: scale(0.98);
}

.search-status {
    font-size: 0.9rem;
    color: var(--color-ink-2);
    min-height: 1.2em;
}

.search-results {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.search-result {
    display: block;
    width: 100%;
    text-align: start;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.search-result:hover {
    border-color: var(--color-line-strong);
}

.search-result:active {
    transform: scale(0.99);
}

.search-result-info {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-ink);
    margin-bottom: var(--space-2xs);
}

.search-result-arabic {
    font-family: var(--font-arabic);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-ink);
}

.search-result-english {
    margin-top: var(--space-2xs);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-ink-2);
}

/* Search-result and full-search highlights. Dedicated highlight tokens
   (AA-verified in both themes) so the pair can never mix a theme-inverted
   accent. The bare `mark` rule also overrides the UA yellow
   (background-color: mark / color: marktext) everywhere. */
mark,
.search-results mark,
.full-search mark {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-text);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Temporary highlight of the target verse after a search-result jump */
.verse-highlight {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
    border-radius: 4px;
    /* Inline-axis padding MUST be zero. CSS Text 3 §7.3 requires the shaper to
       break at an inline box boundary whose inline-axis margin/border/padding is
       non-zero, which severs Arabic cursive joining and mark attachment at both
       ends of the highlight. Block-axis padding is safe and keeps the tint from
       hugging the glyphs. Colour-only styling is explicitly allowed to shape
       across, so the highlight still reads fine. */
    padding: 0.1em 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-color 1s var(--ease-out), color 1s var(--ease-out);
}

.verse-highlight.fading {
    background: transparent;
    color: inherit;
}

.shortcuts-disclosure {
    margin-top: var(--space-lg);
    border-block: 1px solid var(--color-line);
}

.shortcuts-disclosure summary {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    color: var(--color-ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.shortcuts-disclosure summary::-webkit-details-marker {
    display: none;
}

.shortcuts-disclosure summary::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    background-image: var(--icon-chevron);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    transition: transform var(--dur-micro) var(--ease-out);
}

.shortcuts-disclosure[open] summary::after {
    transform: rotate(180deg);
}

.shortcuts-disclosure summary:hover {
    color: var(--color-ink);
}

.shortcuts-list {
    list-style: none;
    padding: 0 0 var(--space-md);
}

.shortcuts-list li {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    padding: var(--space-2xs) 0;
    padding-inline-start: var(--space-lg);
}

.content-section {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Readable · full/divided toggle                                      */
/* ------------------------------------------------------------------ */

.readable-toggle {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-lg);
    border-block: 1px solid var(--color-line);
}

.readable-nav-button {
    min-height: 44px;
    padding: 0 var(--space-lg);
    background: transparent;
    color: var(--color-ink-2);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.readable-nav-button:hover {
    color: var(--color-ink);
}

.readable-nav-button.active {
    color: var(--color-ink);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

#rewayah-selector-container {
    margin-bottom: var(--space-md);
}

.selector-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-2);
}

.rewayah-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
    width: 100%;
}

.rewayah-button {
    min-height: 48px;
    padding: var(--space-sm) var(--space-xs);
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    font-family: var(--font-arabic);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-ink);
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.rewayah-button:hover {
    border-color: var(--color-line-strong);
}

.rewayah-button.active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 600;
}

.rewayah-button:active {
    transform: scale(0.98);
}

.validation-message {
    color: var(--color-danger);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

#rewayah-validation-message {
    width: 100%;
    text-align: left;
}

html[dir="rtl"] #rewayah-validation-message {
    text-align: right;
}

p[data-lang-key="readablePlaceholder"] {
    text-align: center;
    color: var(--color-ink-2);
    padding: 48px var(--space-md);
    font-size: 0.95rem;
    max-width: 65ch;
    margin-inline: auto;
}

.resume-reading-button {
    display: block;
    margin: 0 auto var(--space-lg);
    min-height: 44px;
    padding: 0 var(--space-md);
    color: var(--color-accent-text);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-line-strong);
    cursor: pointer;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.resume-reading-button:hover {
    border-bottom-color: var(--color-accent);
}

.resume-reading-button:active {
    transform: scale(0.98);
}

/* --- khatma progress (juz grid) --- */
.khatma-panel {
    margin: 0 auto var(--space-md);
    text-align: center;
}

.khatma-progress {
    margin: 0 0 var(--space-xs);
    color: var(--color-ink-2);
    font-size: 0.9rem;
}

.khatma-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.khatma-continue,
.khatma-reset {
    min-height: 44px;
    padding: 0 var(--space-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.khatma-continue {
    color: var(--color-accent-text);
    border-bottom: 1px solid var(--color-line-strong);
}

.khatma-reset {
    color: var(--color-ink-2);
}

.khatma-continue:hover {
    border-bottom-color: var(--color-accent);
}

.khatma-reset:hover {
    color: var(--color-ink);
}

.juz-button.read {
    border-color: var(--color-accent);
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

.juz-read-toggle {
    min-height: 40px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-s);
    color: var(--color-ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.juz-read-toggle:hover,
.juz-read-toggle.active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

/* --- bookmarks (selection screen) --- */
.bookmarks-panel {
    margin: 0 auto var(--space-lg);
    text-align: center;
}

.bookmarks-toggle {
    min-height: 44px;
    padding: 0 var(--space-md);
    color: var(--color-accent-text);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-line-strong);
    cursor: pointer;
}

.bookmarks-toggle:hover {
    border-bottom-color: var(--color-accent);
}

.bookmarks-list {
    list-style: none;
    margin: var(--space-sm) auto 0;
    padding: 0;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.bookmarks-list li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background-color: var(--color-paper);
}

.bookmarks-list .bookmark-open {
    flex: 1;
    min-height: 44px;
    padding: 0 var(--space-sm);
    text-align: start;
    color: var(--color-ink);
    font-size: 0.95rem;
    cursor: pointer;
}

.bookmarks-list .bookmark-remove {
    min-width: 44px;
    min-height: 44px;
    color: var(--color-ink-2);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.bookmarks-list .bookmark-remove:hover {
    color: var(--color-accent);
}

.bookmarks-empty {
    padding: var(--space-sm);
    color: var(--color-ink-2);
    font-size: 0.9rem;
}

/* --- verse action popover (reading view) --- */
.verse-actions {
    position: fixed;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-drawer);
}

.verse-actions-ref {
    padding: 0 var(--space-xs);
    color: var(--color-ink-2);
    font-size: var(--text-micro);
    white-space: nowrap;
}

.verse-actions button {
    min-height: 40px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-s);
    color: var(--color-ink);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.verse-actions button:hover,
.verse-actions button.active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

.surah-search {
    margin-bottom: var(--space-md);
}

#surah-search {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.95rem;
    transition: border-color var(--dur-micro) var(--ease-out);
}

#surah-search:hover {
    border-color: var(--color-ink-2);
}

#surah-search:focus-visible {
    border-color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* Surah / Juz index · ruled manuscript index                          */
/* ------------------------------------------------------------------ */

.surah-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: var(--space-2xs);
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 1px solid var(--color-line);
}

.surah-button {
    font-family: var(--font-arabic);
    font-size: 0.8rem;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: none;
    border-inline-end: 1px solid var(--color-line);
    border-block-end: 1px solid var(--color-line);
    border-radius: 0;
    color: var(--color-ink);
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: var(--space-sm) var(--space-xs);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.surah-button:hover {
    background: var(--color-surface-2);
    color: var(--color-accent-text);
}

.surah-button:active {
    transform: scale(0.98);
}

.divided-quran-container {
    max-width: 800px;
    margin: 0 auto;
}

.juz-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 1px solid var(--color-line);
}

.juz-button {
    font-family: var(--font-arabic);
    font-size: 0.9rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: none;
    border-inline-end: 1px solid var(--color-line);
    border-block-end: 1px solid var(--color-line);
    border-radius: 0;
    color: var(--color-ink);
    min-width: 0;
    min-height: 48px;
    padding: var(--space-sm) var(--space-xs);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.juz-button:hover {
    background: var(--color-surface-2);
    color: var(--color-accent-text);
}

.juz-button:active {
    transform: scale(0.98);
}

/* ------------------------------------------------------------------ */
/* Reading view · the crown jewel: pure typography                     */
/* ------------------------------------------------------------------ */

.surah-text-display-container {
    position: relative;
    max-width: 680px;
    margin: var(--space-xl) auto 0;
    padding: 0 clamp(0px, 4vw, var(--space-lg)) 48px;
    border-radius: 0;
    --reading-font-size: 1.6rem;
}

.surah-navigation-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-line);
}

.reading-toolbar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-line);
}

.font-size-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}

.font-size-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-xs);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.font-size-controls button:hover {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.font-size-controls button:active {
    transform: scale(0.98);
}

.share-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--color-ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.share-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.share-button:hover {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.share-button:active {
    transform: scale(0.98);
}

.surah-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-ink-2);
    font-family: var(--font-arabic);
    cursor: pointer;
    transition: color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.surah-nav-button.prev {
    justify-self: start;
}

.surah-nav-button.next {
    justify-self: end;
}

.surah-nav-button:hover {
    color: var(--color-accent-text);
}

.surah-nav-button:active {
    transform: scale(0.98);
}

.surah-nav-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.surah-nav-button .arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.surah-nav-button .arrow svg {
    width: 18px;
    height: 18px;
}

.surah-nav-button .surah-name {
    font-size: 0.9rem;
    color: var(--color-ink-2);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[dir="rtl"] .surah-nav-button .arrow svg {
    transform: scaleX(-1);
}

#back-to-surah-select {
    min-height: 44px;
    padding: var(--space-xs) var(--space-md);
    color: var(--color-ink-2);
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-line-strong);
    cursor: pointer;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

#back-to-surah-select:hover {
    color: var(--color-accent-text);
    border-bottom-color: var(--color-accent);
}

#back-to-surah-select:active {
    transform: scale(0.98);
}

.surah-display-title {
    text-align: center;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-ink);
    font-family: var(--font-arabic);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
    text-wrap: balance;
}

.basmala-display {
    text-align: center;
    font-size: 1.4rem;
    line-height: 2.2;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    font-family: var(--font-arabic);
}

/* Loading placeholder for the reading view. Bars sit on the same line rhythm as
   the mushaf text (--lh-mushaf x the reading size) so the swap to real text
   doesn't jump. Widths vary to read as centred, justified verse lines rather
   than a generic content block. */
.reading-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc((var(--lh-mushaf) - 1) * var(--reading-font-size, var(--mushaf-size)) * 0.62);
    padding: var(--space-2xs) 0 var(--space-sm);
}

.reading-skeleton span {
    display: block;
    height: calc(var(--reading-font-size, var(--mushaf-size)) * 0.42);
    border-radius: 2px;
    background: var(--color-surface-2);
    opacity: 0.85;
    animation: reading-skeleton-pulse 1.5s var(--ease-out, ease-out) infinite;
}

/* Irregular widths + staggered phase so it reads as text, not a loading bar. */
.reading-skeleton span:nth-child(1) { width: 92%; animation-delay: 0s; }
.reading-skeleton span:nth-child(2) { width: 97%; animation-delay: 0.09s; }
.reading-skeleton span:nth-child(3) { width: 88%; animation-delay: 0.18s; }
.reading-skeleton span:nth-child(4) { width: 95%; animation-delay: 0.27s; }
.reading-skeleton span:nth-child(5) { width: 90%; animation-delay: 0.36s; }
.reading-skeleton span:nth-child(6) { width: 96%; animation-delay: 0.45s; }
.reading-skeleton span:nth-child(7) { width: 86%; animation-delay: 0.54s; }
.reading-skeleton span:nth-child(8) { width: 61%; animation-delay: 0.63s; }

@keyframes reading-skeleton-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
    .reading-skeleton span { animation: none; opacity: 0.7; }
}

#surah-text-display {
    /* Not justified. Browsers cannot elongate Arabic cursively (CSS Text 3
       §6.4.4 forbids inter-letter gaps, and no engine implements kashida
       justification), so `justify` can only stretch the word spaces - measured
       here at up to 5.7x natural on a ~327px phone column, which is what made
       the text look broken apart. W3C ALREQ notes this produces rivers and
       uneven colour; quran.com does not justify either. */
    text-align: start;
    text-align-last: auto;
    font-size: var(--reading-font-size, var(--mushaf-size));
    line-height: var(--lh-mushaf);
    color: var(--color-ink);
    padding: var(--space-2xs) 0 var(--space-sm);
    overflow-wrap: break-word;
}

/* Search result snippets use the selected rewayah's mushaf font. The Qaloon/Warsh
   texts contain rare marks (۬ U+06EC, ە, ے ...) absent from the Changa UI font; a
   per-character glyph fallback is what visually "cuts" words, so the snippet must
   render in the same OTF as the reading view. */
/* All rewayat now share one mushaf face, so these differ only by class name.
   The class is still emitted by script.js (rewayahFontMap), so keep them. */
.search-result-arabic.font-bazzi,
.search-result-arabic.font-doori,
.search-result-arabic.font-hafs,
.search-result-arabic.font-qaloon,
.search-result-arabic.font-qunbul,
.search-result-arabic.font-shouba,
.search-result-arabic.font-soosi,
.search-result-arabic.font-warsh { font-family: 'MushafFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }








.font-bazzi #surah-text-display,
#basmala-display.font-bazzi,
.font-doori #surah-text-display,
#basmala-display.font-doori,
.font-hafs #surah-text-display,
#basmala-display.font-hafs,
.font-qaloon #surah-text-display,
#basmala-display.font-qaloon,
.font-qunbul #surah-text-display,
#basmala-display.font-qunbul,
.font-shouba #surah-text-display,
#basmala-display.font-shouba,
.font-soosi #surah-text-display,
#basmala-display.font-soosi,
.font-warsh #surah-text-display,
#basmala-display.font-warsh { font-family: 'MushafFont', var(--arabic-fallback-font); }

/* --- verse-by-verse recitation --- */
.verse-audio-toggle {
    min-height: 40px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-s);
    color: var(--color-ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.verse-audio-toggle:hover,
.verse-audio-toggle.active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

.verse-audio-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-m);
    background-color: var(--color-surface);
}

.verse-audio-bar button {
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-xs);
    border-radius: var(--radius-s);
    color: var(--color-ink);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.verse-audio-bar button:hover,
.verse-audio-bar button.active {
    background-color: var(--color-accent-soft);
    color: var(--color-accent-text);
}

.verse-audio-position {
    color: var(--color-ink-2);
    font-size: 0.85rem;
    white-space: nowrap;
}

.verse-audio-repeat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.verse-audio-repeat select {
    height: 36px;
    padding: 0 var(--space-xs);
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-size: 0.85rem;
    cursor: pointer;
}

/* --- English translation reading view --- */
/* The translation renders in the UI font, so .font-english deliberately adds no
   mushaf face - the class exists because script.js emits one per rewayah. */
.font-english #surah-text-display {
    font-size: calc(var(--reading-font-size, var(--mushaf-size)) * 0.62);
    line-height: 1.8;
    text-align: start;
}

.verse-en {
    margin: 0 0 var(--space-sm);
    border-radius: 4px;
}

.verse-en .verse-num {
    display: inline-block;
    min-width: 2.2em;
    margin-inline-end: var(--space-xs);
    color: var(--color-accent-text);
    font-size: 0.75em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Element-level highlight for the English view (the Arabic one is an inline
   span and must stay padding-free; this one has no shaping to break). */
.verse-en.verse-highlight {
    padding: 0.2em var(--space-xs);
    margin-inline-start: calc(var(--space-xs) * -1);
}

.english-credit-line {
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-line-control);
    color: var(--color-ink-2);
    font-size: 0.8rem;
}

.english-edition-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--color-ink-2);
    font-size: 0.85rem;
}

.english-pdf-link {
    min-height: 40px;
    padding: 0 var(--space-sm);
    color: var(--color-accent-text);
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-line-strong);
    cursor: pointer;
}

.english-pdf-link:hover {
    border-bottom-color: var(--color-accent);
}

/* Removed: styling for `#surah-text-display i, .verse-marker`. Both loaders
   write the raw verse file with textContent, so no <i> or .verse-marker element
   is ever created - verse numbers render as ordinary inline text in the mushaf
   font. If per-marker styling is wanted later, the markers have to be wrapped
   at load time first, and that must not split a base+mark grapheme cluster. */

/* ------------------------------------------------------------------ */
/* PDF viewer · same system: tokens, hairlines, 12px panels            */
/* ------------------------------------------------------------------ */

.pdf-viewer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-lg);
}

.pdf-toc-sidebar {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-m);
    max-height: 78vh;
    overflow: hidden;
}

/* Wrapper only: keeps the document heading structure while the real control
   inside it is a <button>. Must add no box of its own. */
.pdf-sidebar-heading {
    margin: 0;
    padding: 0;
    font: inherit;
    display: block;
}

.pdf-sidebar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
    margin: 0;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.pdf-sidebar-button:hover {
    border-color: var(--color-line-strong);
}

.pdf-sidebar-button.active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
    cursor: default;
}

#custom-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

#custom-toc-list li {
    margin: 0;
}

#custom-toc-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-s);
    text-decoration: none;
    color: var(--color-ink-2);
    font-size: 0.9rem;
    line-height: 1.55;
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

#custom-toc-list a:hover {
    background: var(--color-surface-2);
    color: var(--color-ink);
}

#custom-toc-list ul {
    list-style: none;
    padding-inline-start: var(--space-md);
    margin: 0;
}

.toc-link-disabled {
    color: var(--color-ink-2) !important;
    opacity: 0.45;
    cursor: default !important;
    text-decoration: none !important;
}

.toc-link-disabled:hover {
    background: transparent !important;
}

.pdf-download-button {
    margin-top: auto;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-ink);
    color: var(--color-paper);
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-s);
    text-align: center;
    transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.pdf-download-button:hover {
    background: var(--color-ink-2);
    border-color: var(--color-ink-2);
}

.pdf-download-button:active {
    transform: scale(0.98);
}

.pdf-download-button:disabled {
    background: var(--color-surface-2);
    border-color: var(--color-line);
    color: var(--color-ink-2);
    cursor: not-allowed;
    opacity: 0.7;
}

.pdf-viewer-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
}

.pdf-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-m);
    width: 100%;
}

.pdf-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: var(--color-paper);
    color: var(--color-ink);
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.pdf-controls button svg {
    width: 17px;
    height: 17px;
}

.pdf-controls button:hover {
    border-color: var(--color-line-strong);
    color: var(--color-accent-text);
}

.pdf-controls button:active {
    transform: scale(0.98);
}

.pdf-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.pdf-page-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-2);
    margin-inline: var(--space-2xs);
    white-space: nowrap;
}

#pdf-page-input {
    width: 54px;
    height: 40px;
    padding: var(--space-xs) var(--space-2xs);
    text-align: center;
    border: 1px solid var(--color-line-control);
    border-radius: var(--radius-s);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

#pdf-page-input:focus-visible {
    border-color: var(--color-accent);
}

#hamburger-toc {
    display: none;
}

.pdf-canvas-container {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    overflow: auto;
    padding: var(--space-sm);
    max-height: 78vh;
}

.pdf-stage {
    position: relative;
}

/* Side page-turn buttons (physical sides: the PDF is an English, LTR document) */
.pdf-side-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: color-mix(in oklab, var(--color-surface-2) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-ink-2);
    cursor: pointer;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.pdf-side-nav svg {
    width: 20px;
    height: 20px;
}

.pdf-side-prev {
    left: var(--space-sm);
}

.pdf-side-next {
    right: var(--space-sm);
}

.pdf-side-nav:hover:not(:disabled) {
    border-color: var(--color-line-strong);
    color: var(--color-accent-text);
}

.pdf-side-nav:active:not(:disabled) {
    transform: translateY(-50%) scale(0.96);
}

.pdf-side-nav:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .pdf-side-nav {
        width: 44px;
        height: 44px;
    }
}

#pdf-canvas {
    display: block;
    width: 100%;
    height: auto;
}

#toc-overlay {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .surah-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .rewayah-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .juz-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: var(--space-md) var(--space-md) calc(40px + env(safe-area-inset-bottom));
    }

    .site-header {
        margin-bottom: var(--space-lg);
    }

    .selectors {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .audio-player-container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "audio audio"
            "back fwd"
            "toolbar toolbar"
            "error error";
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .skip-buttons {
        justify-self: center;
    }

    .surah-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .juz-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .pdf-viewer {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .pdf-toc-sidebar {
        flex: none;
        width: auto;
        max-height: none;
    }

    .pdf-viewer-main {
        width: 100%;
    }

    #hamburger-toc {
        display: inline-flex;
    }

    #custom-toc-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(84vw, 320px);
        max-height: none;
        height: 100dvh;
        margin: 0;
        border: none;
        border-inline-end: 1px solid var(--color-line);
        border-radius: 0;
        background: var(--color-paper);
        z-index: var(--z-drawer);
        padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
        transform: translateX(-105%);
        /* visibility:hidden takes the closed drawer out of the tab order. A
           translated element is still focusable, so tabbing through the PDF
           controls used to walk into the whole off-screen TOC link list -
           hundreds of entries for the main Quran PDF - with no visible focus.
           Delaying it until the slide-out finishes keeps the animation intact. */
        visibility: hidden;
        transition: transform var(--dur-long) var(--ease-out),
                    visibility 0s linear var(--dur-long);
        box-shadow: var(--shadow-drawer);
        overflow-y: auto;
    }

    html[dir="rtl"] #custom-toc-sidebar {
        inset-inline-start: auto;
        inset-inline-end: 0;
        border-inline-end: none;
        border-inline-start: 1px solid var(--color-line);
        transform: translateX(105%);
    }

    #custom-toc-sidebar.toc-mobile-visible {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--dur-long) var(--ease-out),
                    visibility 0s linear 0s; /* visible immediately on open */
    }

    #toc-overlay {
        position: fixed;
        inset: 0;
        background: var(--color-overlay);
        z-index: var(--z-overlay);
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-long) var(--ease-out);
    }

    #toc-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 640px) {
    .section-toggle {
        width: 100%;
    }

    .section-toggle .nav-button {
        flex: 1 1 0;
        padding: 0 var(--space-xs);
    }

    .readable-toggle {
        width: 100%;
    }

    .readable-nav-button {
        flex: 1 1 0;
        padding: 0 var(--space-xs);
    }
}

@media (max-width: 560px) {
    .surah-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .juz-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .surah-button {
        min-height: 44px;
        font-size: 0.72rem;
        padding: var(--space-xs) var(--space-2xs);
    }

    .juz-button {
        min-height: 44px;
        font-size: 0.85rem;
        padding: var(--space-xs) var(--space-2xs);
    }

    .surah-nav-button .surah-name {
        display: none;
    }

    .surah-nav-button {
        padding: var(--space-xs);
    }

    .surah-text-display-container {
        margin-top: var(--space-lg);
    }

    .pdf-controls {
        gap: var(--space-2xs);
        padding: var(--space-xs);
    }

    .pdf-page-indicator {
        font-size: 0.82rem;
        gap: var(--space-2xs);
        margin-inline: 0;
    }

    #pdf-page-input {
        width: 46px;
    }
}

@media (max-width: 380px) {
    .surah-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .juz-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (pointer: coarse) {
    .pdf-controls button {
        min-width: 44px;
        height: 44px;
    }

    #pdf-page-input {
        height: 44px;
    }
}

/* ------------------------------------------------------------------ */
/* RTL                                                                 */
/* ------------------------------------------------------------------ */

html[dir="rtl"] h1 {
    font-family: var(--font-arabic);
    letter-spacing: 0;
}

html[dir="rtl"] body {
    font-family: var(--font-arabic);
}

html[dir="rtl"] .brand-mark {
    font-family: var(--font-arabic);
}

html[dir="rtl"] .selector-container label,
html[dir="rtl"] .selector-label {
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    html {
        scroll-behavior: auto;
    }
}