/* Quran — Shared App Styles */
/* Structural layout and FluentUI overrides reused by all Quran Blazor apps. */
/* Host app must define the --b-* CSS custom properties (colours stay per-app).   */

/* ─── Quran fonts (self-hosted) ──────────────────────────────────────────── */
/* Relative paths, same convention as fa-all.min.css. Family names must match
   the --quran-font-family values below, or the browser silently falls to serif. */
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/amiri-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../webfonts/amiri-bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Scheherazade New';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/scheherazade-new-regular.woff2) format('woff2');
}

@font-face {
    font-family: 'Scheherazade New';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../webfonts/scheherazade-new-bold.woff2) format('woff2');
}

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

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--b-bg);
    color: var(--b-text);
    -webkit-font-smoothing: antialiased;
}


/* ─── FluentNavMenu ───────────────────────────────────────────────────────── */
fluent-nav-menu {
    background: var(--b-sidebar-bg) !important;
    border-right: 1px solid var(--b-border) !important;
}

/* ─── FluentFooter ────────────────────────────────────────────────────────── */
fluent-footer {
    background: var(--b-bg) !important;
    border-top: 1px solid var(--b-border) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.version, .copy {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
}

/* ─── Blazor error UI ─────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #1A0000;
    color: #FF4757;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}


.f-select { background:var(--b-surface-2); border:1px solid var(--b-border); color:var(--b-text); border-radius:4px; padding:6px 10px; width:100%; font-family:inherit; font-size:14px; cursor:pointer; height:36px; }
.f-select:focus { outline:none; border-color:var(--b-accent); }

.f-label { display:block; font-size:12px; font-weight:500; color:var(--b-text-2); margin-bottom:4px; }
.f-field { margin-bottom:12px; }

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    margin: 0 0 12px;
}
.breadcrumb-link,
.breadcrumb-link:visited {
    color: var(--b-accent);
    text-decoration: none;
}
.breadcrumb-link:hover {
    text-decoration: underline;
}
.breadcrumb-sep {
    color: var(--b-border);
    user-select: none;
}
.breadcrumb-current {
    color: var(--b-text);
    font-weight: 600;
}

/* ─── Colour tokens (dark defaults) ──────────────────────────────────────── */
/* Layout tokens only — every colour lives in app-theme.css. */
:root {
    --r: 12px;
    --r-sm: 8px;
    --r-pill: 50px;
}

/* ── App shell — matches the design mock ─────────────────────────────────── */
.app-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.side {
    flex: 0 0 300px;
    width: 300px;
    max-width: 320px;
    box-sizing: border-box;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100vh;
    overflow: hidden;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.logo { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.logo img { width: 40px; height: 40px; display: block; }
.brandname { font-size: 17px; font-weight: 700; line-height: 1.2; }
.brandsub { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.sidesearch { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--muted); }
.sidesearch:focus-within { border-color: var(--accent); }
.sidesearch input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; }
.seg.sidetabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srows { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.srow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.srow:hover { background: var(--surface2); }
.srow[data-active] { background: var(--soft); }
.diamond { position: relative; flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.diamond i { position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--border); border-radius: 6px; transform: rotate(45deg); }
.srow[data-active] .diamond i { border-color: var(--accent); }
.diamond b { position: relative; font-size: 13px; font-weight: 600; }
.sname { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sname b { font-size: 15px; font-weight: 600; }
.sname span { font-size: 12.5px; color: var(--muted); }
.sar { font-size: 22px; color: var(--accent); }

/* ── Main column ─────────────────────────────────────────────────────────── */
.main { flex: 1 1 auto; min-width: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.col { width: 100%; max-width: 880px; box-sizing: border-box; padding: 8px 40px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0 auto; }
.page-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.page-body.is-fixed { overflow: hidden; display: flex; flex-direction: column; }
/* Scrolling pages stack their sections with a tight 4px rhythm (the saved verse cards). */
.page-body:not(.is-fixed) { display: flex; flex-direction: column; gap: 4px; }
/* A shrink-to-fit flex item: without an explicit width, .qr-page (whose own `margin:0 auto`
   opts out of the flex `stretch`) collapses to its content width. */
.qr-page { width: 100%; flex: 1 1 auto; min-height: 0; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; flex: 0 0 auto; background: var(--bg); border: 0; padding: 0; position: static; }
.app-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.where { font-size: 14px; color: var(--muted); }
.mobbrand { display: none; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.mobbrand .logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
.mobbrand .logo img { width: 20px; height: 20px; }
.iconbtn { width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: 12px; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.iconbtn:hover:not(:disabled) { background: var(--surface2); color: var(--text); }
.iconbtn:disabled { opacity: 0.35; cursor: default; }
.foot { width: 100%; box-sizing: border-box; padding: 8px 40px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* ── Mobile bottom tab bar ───────────────────────────────────────────────── */
.mobnav { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 8px 8px; z-index: 20; }
.navbtn { display: flex; flex-direction: column; gap: 2px; height: 56px; min-height: 56px; padding: 0 6px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; justify-content: center; align-items: center; cursor: pointer; }
.navbtn[data-active] { color: var(--accent); font-weight: 600; }
.navbtn .nav-icon { font-size: 20px; }

/* ── Settings drawer ─────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; border: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100%; box-sizing: border-box; background: var(--surface); border-left: 1px solid var(--border); z-index: 50; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; overflow: auto; box-shadow: var(--shadow); }
.drawer h2 { margin: 0; font-size: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--text); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

@media (max-width: 820px) {
    .side { display: none; }
    .mobnav { display: grid; }
    .mobbrand { display: flex; }
    /* Header and tools must stay on one line at phone widths: shrink the brand, count and
       controls, and never let them wrap (a two-line brand/count is what made the bar look off). */
    .app-header { gap: 8px; }
    .app-header-left { gap: 8px; }
    .mobbrand { font-size: 15px; gap: 8px; white-space: nowrap; }
    .mobbrand .logo { width: 28px; height: 28px; flex-basis: 28px; }
    .mobbrand .logo img { width: 18px; height: 18px; }
    .where { font-size: 13px; white-space: nowrap; }
    .iconbtn { width: 40px; height: 40px; min-width: 40px; }
    /* Let content scroll right down behind the fixed tab bar instead of stopping short and
       leaving a blank strip. The clearance the bar needs lives inside the scroll panes, so the
       empty space only appears as scroll tail, never as a permanent gap below the content. The
       desktop footer would sit entirely behind the bar, so hide it rather than reserve a row. */
    .col { padding: 12px 16px 0; }
    .foot { display: none; }
    .page-body:not(.is-fixed) { padding-bottom: 76px; }
    .qr-body { padding-bottom: 76px; }
}



/* ─── Progress bar ────────────────────────────────────────────────────────── */
.b-progress {
    height: 4px;
    background: var(--b-surface-2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

    .b-progress::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 40%;
        background: var(--b-accent);
        border-radius: 4px;
        animation: b-progress-slide 1.2s ease-in-out infinite;
    }

@keyframes b-progress-slide {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* ─── Inline error message ────────────────────────────────────────────────── */
.b-error-msg {
    color: var(--b-danger);
    background: rgba(255,71,87,0.10);
    border: 1px solid rgba(255,71,87,0.25);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 8px;
}


/* ─── b-btn — outline button ─────────────────────────────────────────────── */
.b-btn {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 20px;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.b-btn-outline {
    color: var(--b-accent);
    background: transparent;
    border: 1px solid var(--b-accent);
}

    .b-btn-outline:hover {
        background: var(--b-accent-dim);
        color: var(--b-accent);
    }

    .b-btn-outline:active {
        transform: translateY(1px);
    }

.b-btn-secondary {
    color: var(--b-text);
    background: var(--b-surface-2);
    border: 1px solid var(--b-accent);
    font-size: 12px;
    padding: 8px 16px;
    border-radius: var(--r-sm);
}

    .b-btn-secondary:hover:not(:disabled) {
        background: var(--b-surface-3);
    }

/* ─── SfButton — minimum dimensions ─────────────────────────────────────── */
.e-btn:not(.e-icon-btn) {
    min-height: 35px !important;
    min-width: 90px !important;
}

/* ─── SfButton — primary uses accent green ───────────────────────────────── */
.e-btn.e-primary,
.e-btn.e-primary:focus {
    background: var(--b-accent) !important;
    border-color: var(--b-accent) !important;
    color: #fff !important;
}

    .e-btn.e-primary:hover {
        background: var(--b-accent) !important;
        border-color: var(--b-accent) !important;
        color: #fff !important;
        opacity: 0.88;
    }

body[data-app-theme="dark"] .e-btn.e-primary,
body[data-app-theme="dark"] .e-btn.e-primary:focus,
body[data-app-theme="dark"] .e-btn.e-primary:hover {
    color: #0D1810 !important;
}

/* ─── SfButton — icons always inherit button colour ──────────────────────── */
.e-btn .e-btn-icon,
.e-btn .e-btn-icon.e-icons {
    font-family: 'e-icons' !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

    .e-btn .e-btn-icon::before,
    .e-btn .e-btn-icon.e-icons::before {
        font-family: 'e-icons' !important;
        color: inherit !important;
    }

/* ─── SfButton — flat / icon-only buttons ────────────────────────────────── */
.e-btn.e-flat {
    color: var(--b-text-2) !important;
    background: transparent !important;
    border-color: transparent !important;
}

    .e-btn.e-flat:hover {
        background: var(--b-accent-dim) !important;
        color: var(--b-text) !important;
        border-color: transparent !important;
    }


/* ─── Header icon buttons ─────────────────────────────────────────────────── */
.app-header-btn {
    background: transparent;
    border: none;
    color: var(--b-text-2);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

    .app-header-btn:hover {
        color: var(--b-text);
        background: var(--b-surface-2);
    }




.app-settings-panel {
    width: 320px;
    max-width: 90vw;
    background: var(--b-surface);
    border-left: 1px solid var(--b-border);
    padding: 24px;
    overflow-y: auto;
}

/* ─── Quran Reader ─────────────────────────────────────────────────────────── */
:root {
    --qr-gold: #C8A951;
    --qr-gold-dim: rgba(200, 169, 81, 0.12);

    /* Selected Quran font. The default must be Scheherazade New: the app
       default, and the page prerenders before the preference cookie is read,
       so the unclassed state has to be already correct with no flash.
       The scale compensates measured glyph heights (Scheherazade's glyphs
       measure ~2% larger than the face the metrics were calibrated against). */
    --quran-font-family: 'Scheherazade New', 'Amiri', serif;
    --quran-font-scale: 0.98;
}

/* Per-font overrides, applied to the layout root by the font state.
   These class names are a contract with the font state and its tests. */
.qf-amiri            { --quran-font-family: 'Amiri', serif;                    --quran-font-scale: 1; }
.qf-scheherazade-new { --quran-font-family: 'Scheherazade New', 'Amiri', serif; --quran-font-scale: 0.98; }



.qr-ayah {
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--r);
    padding: 20px 24px;
    transition: border-color 0.15s;
    scroll-margin-top: 240px;
}

    .qr-ayah:hover {
        border-color: rgba(200, 169, 81, 0.2);
    }

body[data-app-theme="light"] .qr-ayah {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border-color: rgba(0, 0, 0, 0.10);
}

    body[data-app-theme="light"] .qr-ayah:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
        border-color: rgba(0, 159, 61, 0.25);
    }


.qr-ayah-arabic {
    font-family: var(--quran-font-family);
    font-size: calc(1.9rem * var(--quran-font-scale));
    line-height: 2.2;
    direction: rtl;
    text-align: right;
    color: var(--b-text);
    margin-bottom: 14px;
}


/* ─── Arabic on the unrouted pages ───────────────────────────────────────── */

.surah-header-arabic {
    font-family: var(--quran-font-family);
    font-size: calc(1.8rem * var(--quran-font-scale));
    line-height: 1.4;
}

.surah-card-arabic {
    font-family: var(--quran-font-family);
    font-size: calc(1.5rem * var(--quran-font-scale));
    line-height: 1.4;
}

.juz-surah-group-arabic {
    font-family: var(--quran-font-family);
    font-size: calc(1.4rem * var(--quran-font-scale));
    line-height: 1.4;
}

.bismillah {
    font-family: var(--quran-font-family);
    font-size: calc(2.2rem * var(--quran-font-scale));
    line-height: 1;
    text-align: center;
}


.qr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0;
    width: fit-content;
    margin: 0 auto;
}

.qr-pagination-info {
    font-size: 0.85rem;
    color: var(--b-text-3);
    white-space: nowrap;
}

.qr-pagination .b-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state-icon {
    margin-bottom: 16px;
    color: var(--b-text-3);
}

.empty-state-text {
    font-size: 0.95rem;
    color: var(--b-text-3);
}

/* ─── Store links ─────────────────────────────────────────────────────────── */
.app-store-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: 16px;
}

.app-store-link {
    color: var(--b-text-2);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: color 0.2s;
}

    .app-store-link:hover {
        color: var(--b-text);
    }

/* ─── Favorite heart button ─────────────────────────────────────────────────── */
/* Outlined/gray when un-favorited, filled red when favorited. Matches the MAUI
   AyahCard palette (#A0A8A3 idle, #FF4757 active).                              */
.heart-btn {
    background: transparent;
    border: none;
    color: #A0A8A3;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, transform 0.1s;
}

    .heart-btn:hover {
        color: var(--b-text);
        background: var(--b-surface-2);
    }

    .heart-btn:active {
        transform: scale(0.92);
    }

    .heart-btn.is-favorite {
        color: #FF4757;
    }

        .heart-btn.is-favorite:hover {
            color: #FF4757;
            background: rgba(255, 71, 87, 0.10);
        }


.favorite-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--r);
    padding: 16px 20px;
    transition: border-color 0.15s;
}

    .favorite-card:hover {
        border-color: rgba(200, 169, 81, 0.2);
    }

body[data-app-theme="light"] .favorite-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.favorite-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}

    .favorite-main:hover {
        text-decoration: none;
    }

.favorite-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--b-text);
}

.favorite-tag {
    align-self: flex-start;
    background: var(--b-accent-dim);
    color: var(--b-accent);
    border-radius: var(--r-pill);
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.favorite-memo {
    font-size: 13px;
    color: var(--b-text-2);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.favorite-date {
    font-size: 11px;
    color: var(--b-text-3);
}


.study-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--r);
    padding: 16px 20px;
    transition: border-color 0.15s;
}

    .study-card:hover {
        border-color: rgba(200, 169, 81, 0.2);
    }

body[data-app-theme="light"] .study-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.study-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}

    .study-main:hover {
        text-decoration: none;
    }

.study-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--b-text);
}

.study-summary {
    font-size: 13px;
    color: var(--b-text-2);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.study-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    color: var(--b-text-3);
}

.study-meta-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.study-card-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--b-text-2);
    flex-wrap: wrap;
}

/* Form inputs (generic, match .f-select) */
.f-input,
.f-textarea {
    background: var(--b-surface-2);
    border: 1px solid var(--b-border);
    color: var(--b-text);
    border-radius: 4px;
    padding: 8px 10px;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

    .f-input:focus,
    .f-textarea:focus {
        outline: none;
        border-color: var(--b-accent);
    }

.f-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

.study-form-card {
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--r);
    padding: 20px;
}

.study-form-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--b-text);
    margin-bottom: 12px;
}

.study-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

/* ─── Study detail ─────────────────────────────────────────────────────────── */
.study-detail {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.study-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.study-detail-header-main {
    flex: 1;
    min-width: 0;
}

.study-detail-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.study-detail-description {
    font-size: 14px;
    color: var(--b-text-2);
    line-height: 1.6;
    white-space: pre-wrap;
    margin-top: 8px;
}

.study-delete-confirm {
    font-size: 13px;
    color: var(--b-danger);
}

.study-ayah-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.study-ayah-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--r-sm);
    padding: 10px 14px;
}

.study-ayah-link {
    font-weight: 600;
    color: var(--b-accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

    .study-ayah-link:hover {
        text-decoration: underline;
    }

.study-ayah-note {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--b-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .study-ayah-note.empty {
        color: var(--b-text-3);
        font-style: italic;
    }

.study-note-input {
    flex: 1;
    min-width: 0;
}

/* ─── Add-to-study picker ──────────────────────────────────────────────────── */
.study-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.study-picker-panel {
    width: 420px;
    max-width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--b-surface);
    border: 1px solid var(--b-border);
    border-radius: var(--r);
    padding: 20px;
}

.study-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.study-picker-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--b-text);
}

.study-picker-verse {
    font-size: 12px;
    color: var(--b-text-2);
    margin-bottom: 14px;
}

.study-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.study-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--b-border);
    border-radius: var(--r-sm);
}

.study-picker-item-main {
    flex: 1;
    min-width: 0;
}

.study-picker-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--b-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.study-picker-item-meta {
    font-size: 11px;
    color: var(--b-text-3);
}

.study-picker-instudy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--b-accent);
    font-weight: 600;
    white-space: nowrap;
}

.study-picker-feedback {
    font-size: 12px;
    color: var(--b-accent);
    margin: 10px 0 0;
}

.study-picker-empty {
    font-size: 13px;
    color: var(--b-text-2);
    padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Redesigned pages — shared primitives and the reader (verse by verse / mushaf).
   Values are taken from docs/design/previews. This block is deliberately last so
   the mock class names win over the legacy page styles they replace.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared primitives ───────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; }

.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface2); border-radius: 12px; }
.segbtn { min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.segbtn:hover { color: var(--text); }
.segbtn[data-active] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 33, 30, 0.12); }

.btn { min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--accent); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: default; }

.pillbtn { min-width: 44px; height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.pillbtn:hover { background: var(--surface2); color: var(--text); }
.pillbtn[data-active] { background: var(--soft); border-color: var(--accent); color: var(--accent); }

.pagehead { margin-bottom: 6px; }
.pagehead h1 { margin: 0; font-size: 30px; font-weight: 700; }
.pagehead p { margin: 0; font-size: 15px; color: var(--muted); }
.count { font-size: 14px; color: var(--muted); }

.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.crumbs button { border: 0; background: transparent; color: var(--accent); font-size: 14px; font-weight: 600; padding: 0; min-height: 44px; cursor: pointer; }
.crumb-current { color: var(--text); font-weight: 600; }

/* Integrated search pill: icon, input, match-mode and submit all on one bar. */
.searchbar { display: flex; gap: 8px; }
.sfield { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 16px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--muted); }
.sfield:focus-within { border-color: var(--accent); }
.sfield input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; outline: none; color: var(--text); }
.sfield .iconbtn { width: 36px; height: 36px; min-width: 36px; }
.sfield .mode { flex: 0 0 auto; height: 36px; border: 0; border-radius: 10px; background: var(--surface2); color: var(--text); font-size: 13px; font-weight: 600; padding: 0 8px; cursor: pointer; }
.sfield .go { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--accent); color: var(--ink); font-size: 14px; cursor: pointer; }
.sfield .go:hover:not(:disabled) { filter: brightness(1.1); }
.sfield .go:disabled { opacity: 0.5; cursor: default; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 24px; color: var(--muted); }
.empty h2 { margin: 0; font-size: 20px; color: var(--text); }
.empty p { margin: 0; max-width: 420px; line-height: 1.55; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.sel { height: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 12px; font-size: 15px; color: var(--text); box-sizing: border-box; }
.sel.grow { flex: 1 1 200px; min-width: 0; width: auto; }

.note { width: 100%; box-sizing: border-box; min-height: 84px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 12px; font-size: 15px; line-height: 1.5; resize: vertical; color: var(--text); }

/* Arabic face for verse text and hero titles (driven by the font setting). */
.arf { font-family: var(--quran-font-family, 'Amiri', serif); }

/* ── Hero banner (teal, artwork from the design kit) ─────────────────────── */
.hero { position: relative; overflow: hidden; border-radius: 24px; color: #FFFFFF; padding: 36px 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Frame + corner ornaments are drawn here (not in the SVG) so their radius tracks the hero's
   rounded corners at any size, and the corners survive the artwork being cover-cropped. */
.hero::before,
.hero::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.hero::before {
    inset: 10px;
    border: 1.2px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
}
.hero::after { inset: 17px; border: 0.8px solid rgba(255, 255, 255, 0.12); border-radius: 7px; }
.herol { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.herolabel { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; }
.heromean { font-size: 18px; margin-top: 6px; color: #D4E9E4; }
.herochips { display: flex; flex-wrap: wrap; gap: 8px; }
.herochips span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 13px; font-weight: 500; }
.heroar { position: relative; z-index: 2; font-size: 84px; line-height: 1.4; }

/* ── Tools row (view toggle + text size) ─────────────────────────────────── */
.tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.aa { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.aabtn { height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 600; color: var(--text); cursor: pointer; }
.aabtn:hover:not(:disabled) { background: var(--surface2); }
.aabtn:disabled { opacity: 0.4; cursor: default; }

/* Mobile surah picker; the desktop sidebar handles surah selection instead. */
.pickbar { display: none; align-items: center; gap: 8px; }

/* ── Verse cards ─────────────────────────────────────────────────────────── */
.verse { padding: 12px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 24px; }
.vhead { display: flex; align-items: center; gap: 8px; padding-left: 8px;}
.vnum { height: 32px; min-width: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 16px; background: var(--soft); color: var(--accent); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.vmeta { flex: 1; min-width: 0; text-align: left; font-size: 13.5px; color: var(--muted); padding: 0 8px; min-height: 44px; display: flex; align-items: center; }
.act { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.act:hover { background: var(--surface2); color: var(--text); }
.act[data-on] { color: var(--goldtext); }
.act.fav[data-on] { color: var(--heart); }

.ar { margin: 0; direction: rtl; text-align: right; font-size: 36px; line-height: 2; padding-right: 12px; }
.en { margin: 0; font-size: 18px; line-height: 1; }
.enrow { display: flex; align-items: flex-start; gap: 10px; padding-left: 12px;}
.enrow .en { flex: 1; }
.tr { margin: 0; font-size: 18px; line-height: 1; color: var(--muted); padding-left: 12px;}
.expl { position: relative; background: var(--bg); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.expl .act { position: absolute; top: 6px; right: 6px; }
.expltext { margin: 0; padding-right: 40px; }

/* Matched search terms. */
span[data-hit="true"] { background: var(--hit); border-radius: 4px; padding: 0 2px; }

.app-layout[data-size="s"] .ar { font-size: 30px; }
.app-layout[data-size="l"] .ar { font-size: 46px; }

/* ── Mushaf (continuous flow) ────────────────────────────────────────────── */
.mush { padding: 36px 28px; }
.mtext { direction: rtl; text-align: center; font-size: 42px; line-height: 2.5; }
.app-layout[data-size="s"] .mtext { font-size: 34px; }
.app-layout[data-size="l"] .mtext { font-size: 52px; }
/* Mushaf verses are static reading text, not controls. */
.mseg { padding: 2px 8px; }
.mmark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; box-sizing: border-box; border: 1.5px solid var(--goldtext); border-radius: 50%; font-size: 19px; line-height: 1; color: var(--goldtext); vertical-align: middle; margin: 0 4px; }

/* Bismillah line that precedes a surah. */
.qr-bismillah { font-family: var(--quran-font-family, 'Amiri', serif); direction: rtl; text-align: center; font-size: 36px; line-height: 2; color: var(--text); margin: 4px 0 8px; }
.app-layout[data-size="s"] .qr-bismillah { font-size: 30px; }
.app-layout[data-size="l"] .qr-bismillah { font-size: 46px; }
/* In the mushaf the Bismillah is Quran text like the verses - same size, no separate scale. */
.mtext .qr-bismillah { text-align: center; font-size: inherit; }

/* The reader page stacks hero / tools / cards. */
.qr-page { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; min-height: 0; }
.qr-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: 20px; }
.qr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding-right: 2px; }

@media (max-width: 820px) {
    .hero { padding: 22px; }
    .hero h1 { font-size: 32px; }
    .heroar { font-size: 56px; }
    .ar { font-size: 30px; }
    .mtext { font-size: 32px; }
    .pickbar { display: flex; }
    .tools { flex-wrap: nowrap; gap: 10px; }
    .segbtn { padding: 0 12px; font-size: 13px; }
    .aa { font-size: 13px; gap: 4px; }
    .aabtn { height: 40px; min-width: 40px; padding: 0 8px; }
}

/* Phone: the hero banner keeps its proportions by scaling its type down (DESIGN.md "Type" table,
   Phone column) instead of letting the desktop/mobile sizes dominate a narrow card. */
@media (max-width: 480px) {
    .hero { padding: 18px 20px; gap: 16px; border-radius: 20px; }
    .herol { gap: 10px; }
    .hero h1 { font-size: 22px; }
    .heroar { font-size: 44px; }
    .herolabel,
    .herochips span { font-size: 12.5px; }
    .heromean { font-size: 15px; }
    .herochips span { padding: 5px 10px; }
}

/* ── Saved pages (Favorites / Studies) ───────────────────────────────────── */
.favorite-card,
.study-card { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.favorite-main,
.study-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); }
.favorite-title,
.study-title { font-size: 16px; font-weight: 600; }
.favorite-tag { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--soft); border-radius: 999px; padding: 2px 10px; }
.favorite-memo,
.study-summary { font-size: 14px; color: var(--muted); }
.favorite-date { font-size: 12.5px; color: var(--muted); }
.study-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.study-meta-count { display: inline-flex; align-items: center; gap: 6px; }
.study-card-confirm { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.study-form-card { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.study-form-title { font-size: 16px; font-weight: 600; }
.study-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Site Settings drawer fields ─────────────────────────────────────────── */
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drawer-header h2 { flex: 1; min-width: 0; }
.f-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.f-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 0; }
.f-select { width: 100%; height: 44px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); padding: 0 12px; font-size: 15px; cursor: pointer; }
.f-select:focus { outline: none; border-color: var(--accent); }
.f-checkbox-label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--text); cursor: pointer; }
.f-checkbox-label input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ── Scrollbars (styled like the segmented toggle control) ───────────────── */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); border: 2px solid transparent; background-clip: padding-box; }

/* The ayah card for the verse selected in the mushaf view stands out. */
.card.verse.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--soft); }