/* 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.
 */

@font-face {
  font-family: 'BazziFont';
  src: url('fonts/Bazzi.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DooriFont';
  src: url('fonts/Doori.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HafsFont';
  src: url('fonts/hafs-normal.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QaloonFont';
  src: url('fonts/Qaloon.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QunbulFont';
  src: url('fonts/Qunbul.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ShoubaFont';
  src: url('fonts/Shouba.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SoosiFont';
  src: url('fonts/Soosi.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WarshFont';
  src: url('fonts/Warsh.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ayah-marker-font';
  src: url('fonts/hafs-numbers-only.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 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 {
    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 {
    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 {
    border-color: var(--color-ink-2);
}

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

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

.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;
    padding: 0.1em 0.15em;
    -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);
}

.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);
}

#surah-text-display {
    text-align: justify;
    text-align-last: center;
    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. */
.search-result-arabic.font-bazzi { font-family: 'BazziFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-doori { font-family: 'DooriFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-hafs { font-family: 'HafsFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-qaloon { font-family: 'QaloonFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-qunbul { font-family: 'QunbulFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-shouba { font-family: 'ShoubaFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-soosi { font-family: 'SoosiFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }
.search-result-arabic.font-warsh { font-family: 'WarshFont', var(--font-arabic), 'Noto Naskh Arabic', serif; }

.font-bazzi #surah-text-display,
#basmala-display.font-bazzi { font-family: 'BazziFont', var(--arabic-fallback-font); }

.font-doori #surah-text-display,
#basmala-display.font-doori { font-family: 'DooriFont', var(--arabic-fallback-font); }

.font-hafs #surah-text-display,
#basmala-display.font-hafs { font-family: 'HafsFont', var(--arabic-fallback-font); }

.font-qaloon #surah-text-display,
#basmala-display.font-qaloon { font-family: 'QaloonFont', var(--arabic-fallback-font); }

.font-qunbul #surah-text-display,
#basmala-display.font-qunbul { font-family: 'QunbulFont', var(--arabic-fallback-font); }

.font-shouba #surah-text-display,
#basmala-display.font-shouba { font-family: 'ShoubaFont', var(--arabic-fallback-font); }

.font-soosi #surah-text-display,
#basmala-display.font-soosi { font-family: 'SoosiFont', var(--arabic-fallback-font); }

.font-warsh #surah-text-display,
#basmala-display.font-warsh { font-family: 'WarshFont', var(--arabic-fallback-font); }

#surah-text-display i,
#surah-text-display .verse-marker {
    font-family: 'ayah-marker-font', var(--arabic-fallback-font);
    color: var(--color-accent-text);
    margin: 0 0.18em;
    font-style: normal;
    display: inline-block;
    font-size: 1.25em;
}

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

.pdf-sidebar-button,
.pdf-toc-sidebar h2 {
    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,
.pdf-toc-sidebar h2:hover {
    border-color: var(--color-line-strong);
}

.pdf-sidebar-button.active,
.pdf-toc-sidebar h2.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%);
        transition: transform var(--dur-long) var(--ease-out);
        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);
    }

    #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;
    }
}