/* ============================================================
   Quran Web — stylesheet
   Mobile-first, no frameworks, no external fonts.
   - All colors are CSS variables, switched by [data-theme]
   - Honors OS dark/light via prefers-color-scheme by default
   - Honors user override stored in localStorage ("quran.theme")
   ============================================================ */

:root {
    /* Light theme (default) — warm cream paper, deep emerald accent */
    --bg: #fbf7ee;
    --bg-elevated: #ffffff;
    --bg-variant: #ede6d3;
    --fg: #1b1b1b;
    --fg-muted: #555050;
    --fg-faint: #7a7670;
    --primary: #0e5c3f;
    --on-primary: #ffffff;
    --outline: #d7cfb8;
    --divider: #e8e0c8;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Type system — system fonts for native feel, no network calls */
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-arabic: "Geeza Pro", "SF Arabic", "Al Bayan", "Geeza",
        "Times New Roman", "Noto Naskh Arabic", "Amiri", serif;
    --font-arabic-fallback: "Geeza Pro", "SF Arabic", "Al Bayan",
        "Geeza", "Times New Roman", serif;

    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #101312;
    --bg-elevated: #161a19;
    --bg-variant: #222827;
    --fg: #e7e5de;
    --fg-muted: #b7b6b0;
    --fg-faint: #888a85;
    --primary: #7bd0a7;
    --on-primary: #003824;
    --outline: #2e3633;
    --divider: #1f2624;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* Honor system preference only if user hasn't picked one. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #101312;
        --bg-elevated: #161a19;
        --bg-variant: #222827;
        --fg: #e7e5de;
        --fg-muted: #b7b6b0;
        --fg-faint: #888a85;
        --primary: #7bd0a7;
        --on-primary: #003824;
        --outline: #2e3633;
        --divider: #1f2624;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}

/* ============= Reset ============= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100%;
    overscroll-behavior-y: contain;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

a {
    color: var(--primary);
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

img,
svg {
    max-width: 100%;
    display: block;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============= Splash ============= */
.splash {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 16px;
    background: var(--bg);
}

.splash__emblem {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    position: relative;
}

.splash__emblem::before,
.splash__emblem::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    bottom: -16px;
}

.splash__emblem::before {
    left: 12px;
}

.splash__emblem::after {
    right: 12px;
}

.splash__text {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--fg-muted);
    letter-spacing: 0.02em;
}

/* ============= App shell ============= */
#app {
    /* Use height (not min-height) so flex children fit inside the
       viewport. min-height would let #app grow to fit overflowing
       content, which would push the page-navigation buttons off
       the bottom of the screen in mushaf view. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ============= Top app bar ============= */
.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
    padding-top: var(--safe-top);
    /* The system status bar is transparent over our bg thanks to the
       viewport-fit=cover + body bg, so the appbar bleeds upward. */
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.appbar__inner {
    display: grid;
    /* The actions slot is auto-sized so it expands to fit however
       many buttons are inside. Title stays 1fr and gets whatever is
       left. */
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    min-height: 56px;
    /* Right padding keeps the trailing action button (e.g. the gear
       icon on the home page) from being clipped by the screen edge
       on narrow viewports. */
    padding: 0 4px 0 4px;
    gap: 4px;
}

.appbar__slot {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appbar__title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--fg);
    margin: 0;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appbar__back,
.appbar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    border-radius: 50%;
    color: var(--fg);
}

.appbar__back:hover,
.appbar__back:focus-visible,
.appbar__action:hover,
.appbar__action:focus-visible {
    background: var(--bg-variant);
}

.appbar__back:focus-visible,
.appbar__action:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Language toggle button — looks like an action button but is
   rectangular, not circular, so the EN/عربي text fits nicely. */
.appbar__lang {
    border-radius: 999px;
    width: auto;
    padding: 0 14px;
    min-width: 48px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    border: 1px solid var(--primary);
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

.appbar__lang:hover,
.appbar__lang:focus-visible {
    background: var(--primary);
    color: var(--on-primary);
    outline: none;
}

/* ============= Home ============= */
.home__header {
    padding: 16px 20px 8px;
}

.home__subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--fg-muted);
    line-height: 1.4;
}

.home__count {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--fg-faint);
}

.search {
    position: relative;
    padding: 8px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
}

.search input {
    width: 100%;
    height: 44px;
    /* Use logical properties: padding-inline-start is the start side
       (left in LTR, right in RTL), so the icon space is always on
       the leading edge of the text. */
    padding-block: 0;
    padding-inline-start: 44px;
    padding-inline-end: 16px;
    border-radius: 22px;
    background: var(--bg-variant);
    border: 1px solid transparent;
    color: var(--fg);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, background 0.15s;
}

.search input::placeholder {
    color: var(--fg-faint);
}

.search input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-elevated);
}

.search__icon {
    position: absolute;
    /* inset-inline-start = start side, follows the writing direction */
    inset-inline-start: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-faint);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.filters {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg);
    border-bottom: 1px solid var(--divider);
}

.filters::-webkit-scrollbar {
    display: none;
}

.chip {
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    background: var(--bg-variant);
    color: var(--fg-muted);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chip[aria-pressed="true"] {
    background: var(--primary);
    color: var(--on-primary);
}

.surah-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
}

.surah-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid transparent;
    box-shadow: var(--shadow);
    margin-bottom: 8px;
    transition: transform 0.1s ease-out, background 0.15s;
}

.surah-card:hover,
.surah-card:focus-visible {
    background: var(--bg-variant);
    outline: none;
}

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

.surah-card__num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-variant);
    color: var(--fg-muted);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.surah-card__body {
    flex: 1;
    min-width: 0;
}

.surah-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    margin: 0 0 2px;
}

.surah-card__meta {
    font-size: 13px;
    color: var(--fg-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surah-card__arabic {
    font-family: var(--font-arabic);
    font-size: 22px;
    color: var(--primary);
    text-align: right;
    line-height: 1.2;
    flex-shrink: 0;
}

.empty {
    text-align: center;
    color: var(--fg-muted);
    padding: 48px 16px;
    font-size: 14px;
}

/* ============= Reader ============= */
.reader {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    padding-bottom: calc(32px + var(--safe-bottom));
}

.reader__header {
    text-align: center;
    padding: 16px 8px 20px;
}

.reader__arabic-name {
    font-family: var(--font-arabic);
    font-size: 32px;
    line-height: 1.4;
    color: var(--primary);
    margin: 0 0 8px;
}

.reader__meta {
    font-size: 14px;
    color: var(--fg-muted);
    margin: 0;
    line-height: 1.5;
}

.reader__divider {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: 8px 16px 0;
}

.ayah {
    background: var(--bg-elevated);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 10px;
    box-shadow: var(--shadow);
}

.ayah__num {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--bg-variant);
    color: var(--fg-muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.ayah__text {
    font-family: var(--font-arabic);
    font-size: 26px;
    line-height: 2;
    color: var(--fg);
    text-align: right;
    direction: rtl;
    margin: 0;
    word-spacing: 0.05em;
}

.reader__footer {
    text-align: center;
    color: var(--fg-faint);
    font-size: 13px;
    margin-top: 24px;
    padding: 16px 0;
}

/* ============= Settings ============= */
.settings,
.licenses,
.about {
    padding: 16px;
    padding-bottom: calc(32px + var(--safe-bottom));
}

.settings h2,
.licenses h2,
.about h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    margin: 16px 0 8px;
}

.settings h2:first-child,
.licenses h2:first-child,
.about h2:first-child {
    margin-top: 0;
}

.radio-list {
    background: var(--bg-elevated);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.radio-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    min-height: 52px;
    color: var(--fg);
    border-top: 1px solid var(--divider);
    font-size: 15px;
}

.radio-list__item:first-child {
    border-top: 0;
}

.radio-list__item:active {
    background: var(--bg-variant);
}

.radio-list__item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--outline);
    margin: 0;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}

.radio-list__item input[type="radio"]:checked {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: inset 0 0 0 3px var(--bg-elevated);
}

.link-list {
    background: var(--bg-elevated);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.link-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    min-height: 52px;
    color: var(--fg);
    border-top: 1px solid var(--divider);
    font-size: 15px;
}

.link-list__item:first-child {
    border-top: 0;
}

.link-list__item:active {
    background: var(--bg-variant);
}

.link-list__icon {
    width: 22px;
    height: 22px;
    color: var(--fg-muted);
    flex-shrink: 0;
}

.link-list__chev {
    /* margin-inline-start: auto pushes the chev to the trailing edge
       of the list, regardless of writing direction. */
    margin-inline-start: auto;
    color: var(--fg-faint);
    flex-shrink: 0;
}

.licenses p,
.about p {
    color: var(--fg);
    line-height: 1.6;
    margin: 0 0 12px;
}

.licenses .credit-verse {
    text-align: center;
    font-family: var(--font-arabic);
    font-size: 24px;
    color: var(--primary);
    margin: 24px 0 0;
    direction: rtl;
}

.licenses .url {
    font-size: 12px;
    color: var(--fg-faint);
    word-break: break-all;
}

.about .version {
    font-size: 13px;
    color: var(--fg-faint);
    margin: 0 0 16px;
}

/* ============= Modal (jump to ayah) ============= */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.4);
    animation: fade-in 0.15s ease-out;
}

.modal__panel {
    width: 100%;
    max-width: 360px;
    background: var(--bg-elevated);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: scale-in 0.15s ease-out;
}

.modal__title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
}

.modal__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--bg-variant);
    border: 1px solid var(--outline);
    color: var(--fg);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

.modal__input:focus {
    outline: none;
    border-color: var(--primary);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.btn {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    transition: background 0.15s;
}

.btn:hover,
.btn:focus-visible {
    background: var(--bg-variant);
    outline: none;
}

.btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.btn--primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--primary);
    filter: brightness(0.9);
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============= Larger screens ============= */
@media (min-width: 720px) {
    .home__header {
        padding: 24px 32px 12px;
    }
    .search,
    .filters {
        padding-left: 32px;
        padding-right: 32px;
    }
    .surah-list {
        padding: 12px 24px 24px;
        max-width: 720px;
        margin: 0 auto;
    }
    .reader {
        max-width: 720px;
        margin: 0 auto;
    }
    .ayah__text {
        font-size: 30px;
        line-height: 2.1;
    }
    .settings,
    .licenses,
    .about {
        max-width: 640px;
        margin: 0 auto;
    }
}

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

/* ============= Mushaf (paginated book-style) view ============= */

.mushaf-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mushaf-page {
    flex: 1;
    /* min-height: 0 is the magic incantation that lets a flex item
       shrink below its content's intrinsic height. Without it, the
       page would expand to fit the whole surah and push the nav
       buttons off-screen. */
    min-height: 0;
    overflow-y: auto;
    /* Side margins give the page a "book" feel — text doesn't bleed
       to the screen edge the way the card view does. */
    margin: 12px 12px 0;
    padding: 24px 20px 16px;
    background: var(--bg-elevated);
    border-radius: 16px;
    box-shadow: var(--shadow);
    /* Slightly darker outline in dark mode for the book-edge feel */
    border: 1px solid var(--outline);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Subtle inner frame so the page feels like a paper mushaf
       rather than a flat card. Two layered borders give a
       pressed-in look without being noisy. */
    position: relative;
}

/* Decorative inner border on the mushaf page — gives the page the
   look of a printed mushaf, where every page is framed. The border
   sits inside the card's edge. */
.mushaf-page::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--divider);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0.6;
}

.mushaf-page__mushaf-num {
    /* Small "Page X" indicator at the top of each mushaf page —
       matches the layout of the printed mushaf where the page
       number appears at the top of the verso page. */
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-arabic);
    font-size: 13px;
    color: var(--fg-faint);
    margin: 0 0 8px;
    direction: ltr;
}

.mushaf-page__mushaf-num-text {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 600;
}

.mushaf-page__mushaf-num-value {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.mushaf-page__surah-name {
    text-align: center;
    font-family: var(--font-arabic);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    margin: 8px 0 4px;
}

.mushaf-page__surah-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin: 0 0 12px;
    direction: ltr;
}

.mushaf-page__surah-info-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

.mushaf-page__surah-info-sep {
    opacity: 0.4;
}

/* The bismillah frame is the signature decoration of every mushaf
   page. We surround the bismillah with two ornaments (۞) and a thin
   green border so it visually mirrors the printed Madinah mushaf. */
.mushaf-page__bismillah-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0 24px;
    padding: 12px 8px;
    border-top: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    position: relative;
    /* Soft glow behind the frame for an elegant, paper-like feel. */
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary) 4%, transparent) 0%,
            color-mix(in srgb, var(--primary) 8%, transparent) 50%,
            color-mix(in srgb, var(--primary) 4%, transparent) 100%
        );
    border-radius: 4px;
}

.mushaf-page__bismillah-ornament {
    color: var(--primary);
    font-size: 22px;
    flex-shrink: 0;
    opacity: 0.85;
}

.mushaf-page__bismillah {
    text-align: center;
    font-family: var(--font-arabic);
    font-size: 24px;
    line-height: 1.6;
    color: var(--primary);
    margin: 0;
    padding: 0;
    font-weight: 600;
    flex: 0 1 auto;
    border: 0;
}

.mushaf-page__running-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-arabic);
    font-size: 15px;
    color: var(--fg-muted);
    margin: 0 0 12px;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--divider);
    direction: rtl;
}

.mushaf-page__running-header-name {
    font-weight: 600;
    color: var(--primary);
}

.mushaf-page__running-header-juz {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.mushaf-page__body {
    /* Continuous text — verses flow as one block, just like the
       printed mushaf. */
    font-family: var(--font-arabic);
    font-size: 30px;
    line-height: 2.2;
    color: var(--fg);
    text-align: justify;
    /* For RTL text the last line is right-aligned by default, which
       is the mushaf convention. */
    text-align-last: right;
    direction: rtl;
    word-spacing: 0.02em;
    margin: 0;
    padding: 8px 0 16px;
}

/* Page footer — sits at the bottom of each page (inside the scroll
   area). Mirrors the printed mushaf where the absolute page number
   + Juz/Hizb info sits centered at the bottom of the page. */
.mushaf-page__footer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--divider);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.mushaf-page__footer-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 18px;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-arabic);
}

.mushaf-page__footer-meta {
    font-size: 12px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/*
 * The Quran.com QPC Hafs source bakes waqf (pause) marks into the
 * text as Unicode small characters in the range U+06D6..U+06ED
 * (Arabic Supplement block). Real mushaf typography renders these
 * as small marks above/below the line. We approximate this with
 * a slight size reduction and a vertical offset so they don't
 * crowd the surrounding letters.
 */
.mushaf-page__body {
    /* Target the waqf-mark characters individually. */
}

.mushaf-page__body {
    font-variant-numeric: tabular-nums;
}

/*
 * Modern browsers support Unicode-range with a font-size override
 * — but since we use the system font, we wrap the waqf marks in a
 * span at render time. The .waqf-mark span handles styling.
 */
.waqf-mark {
    font-size: 0.45em;
    color: var(--primary);
    position: relative;
    top: -0.55em;
    padding: 0 0.05em;
    font-weight: 600;
    /* Disable the user-select highlight to keep marks unobtrusive */
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.mushaf-ayah {
    /* Each ayah is an inline-block so it flows as continuous text
       while still being individually addressable (e.g., for jump-to-ayah
       in card view, or for a11y tools). */
    display: inline;
}

/* Verse marker — the small decorated number that appears at the end
   of each ayah. In real mushaf this is an ornate ornament; here we
   use a filled circular badge with the number inside, mirroring the
   printed mushaf. The slight margin keeps it from crowding the
   surrounding text. */
.verse-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.35em;
    margin: 0 0.15em;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-arabic);
    font-size: 0.55em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mushaf-nav {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    padding: 8px 16px;
    padding-bottom: calc(8px + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
}

.mushaf-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--fg);
    background: var(--bg-variant);
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.mushaf-nav__btn:hover:not(:disabled),
.mushaf-nav__btn:focus-visible:not(:disabled) {
    background: var(--primary);
    color: var(--on-primary);
    outline: none;
}

.mushaf-nav__btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.mushaf-nav__info {
    text-align: center;
}

.mushaf-nav__page {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

/* When the action slot in the app bar has more than 2 buttons, we
   need to ensure they don't overflow. The grid in the appbar__inner
   gives the title 1fr and the actions slot 48px; for a tighter
   header with the view toggle + lang + jump (3 buttons) we let the
   slot expand. */
.appbar__slot--actions {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Small gap between buttons, plus inner padding so the last
       action (e.g. the gear icon on the home page) never sits flush
       against the screen edge where it can get clipped. */
    gap: 2px;
    padding-inline-end: 4px;
}

@media (min-width: 720px) {
    .mushaf-view {
        max-width: 720px;
        margin: 0 auto;
        width: 100%;
    }
    .mushaf-page__body {
        font-size: 32px;
        line-height: 2.3;
    }
    .mushaf-page {
        margin: 16px 24px 0;
        padding: 32px 32px 24px;
    }
    .mushaf-page__surah-name {
        font-size: 42px;
    }
    .mushaf-page__bismillah {
        font-size: 26px;
    }
    .mushaf-page__bismillah-frame {
        margin: 20px 0 28px;
        padding: 14px 12px;
    }
}