/* Shared look for Iqra, the children's pages (read.php, books.php): fonts, colour tokens, base.
   Shape rule: controls are full pills, panels 28px, printed pages 14px, tap areas 8px.

   Type, as in the Istidaad project (Amir, 2026-10-09): headings and the wordmark in Spectral,
   everything else in the device's own system sans; the letters and words a child taps in
   KFGQPC Uthmanic Script HAFS (licence note beside it in fonts/). The "Mufti Moosa Academy" wordmark
   is Lexend Bold (Amir preferred it), cut down to just those letters. */
@font-face {
    font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(fonts/Spectral-400-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(fonts/Spectral-600-latin.woff2) format('woff2');
}
@font-face {
    /* subset to the Arabic blocks; covers every character in all 16 books (checked 2026-10-09) */
    font-family: 'KFGQPC Uthmanic Script HAFS'; font-style: normal; font-weight: 400; font-display: block;
    src: url(fonts/kfgqpc-uthmanic-hafs.woff2) format('woff2');
}
@font-face {
    font-family: 'Iqra Latin'; font-style: normal; font-weight: 700; font-display: block;
    src: url(fonts/lexend-wordmark.woff2) format('woff2');
}

/* ---------- tokens ----------
   shape rule: controls are full pills, panels 28px, the printed page 14px, tap areas 8px */
:root {
    --ground:   #ECEFF3;
    --surface:  #FBFCFD;
    --surface-2:#E4E8EE;
    --ink:      #1B2130;
    --ink-2:    #556072;
    --line:     #D6DBE2;
    --accent:   #8F1D2F;          /* the madrasa's maroon */
    --accent-ink:#FFFFFF;
    --accent-soft: rgb(143 29 47 / .09);
    --glow:     #E9A92B;          /* "this one is speaking" */
    --glow-soft:rgb(233 169 43 / .30);
    --spot:     rgb(143 29 47 / .06);
    --spot-line:rgb(143 29 47 / .26);
    --page-filter: none;
    --shadow-page: 0 1px 2px rgb(27 33 48 / .08), 0 18px 40px -14px rgb(27 33 48 / .28);
    --shadow-dock: 0 1px 2px rgb(27 33 48 / .06), 0 14px 34px -12px rgb(27 33 48 / .22);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-quran: 'KFGQPC Uthmanic Script HAFS', serif;
    --font-wordmark: 'Iqra Latin', var(--font-ui);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground:   #111419;
        --surface:  #1B2028;
        --surface-2:#262C36;
        --ink:      #EDEFF3;
        --ink-2:    #A4ACBA;
        --line:     #2C333E;
        --accent:   #D9606F;
        --accent-ink:#1C0A0F;
        --accent-soft: rgb(217 96 111 / .14);
        --glow:     #F4C058;
        --glow-soft:rgb(244 192 88 / .34);
        --spot:     rgb(217 96 111 / .08);
        --spot-line:rgb(217 96 111 / .34);
        --page-filter: brightness(.96);
        --shadow-page: 0 1px 2px rgb(0 0 0 / .4), 0 18px 44px -14px rgb(0 0 0 / .7);
        --shadow-dock: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -12px rgb(0 0 0 / .6);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --ground:#111419; --surface:#1B2028; --surface-2:#262C36; --ink:#EDEFF3; --ink-2:#A4ACBA;
    --line:#2C333E; --accent:#D9606F; --accent-ink:#1C0A0F; --accent-soft:rgb(217 96 111 / .14);
    --glow:#F4C058; --glow-soft:rgb(244 192 88 / .34); --spot:rgb(217 96 111 / .08);
    --spot-line:rgb(217 96 111 / .34); --page-filter:brightness(.96);
    --shadow-page:0 1px 2px rgb(0 0 0 / .4), 0 18px 44px -14px rgb(0 0 0 / .7);
    --shadow-dock:0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: var(--ground); color: var(--ink);
    font-family: var(--font-ui); font-size: 16px; line-height: 1.45;
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--accent-soft); color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* a quick second tap (Next, Next) must not zoom the page; pinching to zoom still works */
html { touch-action: manipulation; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ic { width: 1em; height: 1em; display: block; flex: none; }
[hidden] { display: none !important; }


/* ---------- shared controls ---------- */
.round {
    justify-self: start; height: 48px; min-width: 48px; padding: 0 16px 0 14px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
    background: var(--surface); box-shadow: var(--shadow-dock); font-weight: 500; font-size: 15px;
    transition: transform .15s var(--ease), background .15s;
}
.round .ic { font-size: 22px; color: var(--accent); }
.round:active { transform: scale(.96); }

/* ---------- moving between pages ----------
   Shelf and reader cross-fade into each other, and the book you open grows out of its cover
   (the cover and the reader's first page share the name "book"). Browsers without cross-page
   view transitions simply load the page as before. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease-in both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
::view-transition-group(book) { animation-duration: .42s; animation-timing-function: var(--ease); }
::view-transition-old(book), ::view-transition-new(book) { animation-duration: .42s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}