/* مصحف المعلم — درجات. Pages are drawn in em units of --fs, so everything stays sharp at any size. */

@font-face { font-family: 'KFGQPC Hafs'; src: url('../fonts/UthmanicHafs1Ver18.woff2') format('woff2'); font-display: swap; }
/* the surah names as the Madinah mushaf writes them in its headers: one calligraphic glyph per surah (U+E001..U+E072)
   and the word سورة (U+E000), from Quran Foundation's font server (kept offline by sw.js like the page fonts) */
@font-face { font-family: 'SuraNames'; src: url('https://verses.quran.foundation/fonts/quran/surah-names/v1/sura_names.woff2') format('woff2'); font-display: block; }

:root {
  --W: 20.5; --M: 1.5; --K: 1.75; --fs: 22px;
  --accent: #1c6b57;
  --gold: #b8923a;
  --radius: 14px;
  --chrome-h: 48px;
  --ui-font: 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, system-ui, sans-serif;
}

/* light is the default: a white page on a soft light desk, nothing dark around the mushaf */
body[data-theme="light"] {
  --desk: #eef0f3; --desk2: #dfe3e9; --page: #ffffff; --page-edge: #e9ebef; --ink: #111111; --frame: #a8905a; --frame2: #d8cb9f;
  --banner1: #f6efd6; --banner2: #efe3b9; --cover: #e3e6eb;
  --chrome: rgba(255, 255, 255, .94); --chrome-ink: #1b1f24; --chrome-line: rgba(20, 30, 50, .12); --soft: rgba(28, 107, 87, .1);
}
body[data-theme="paper"] {
  --desk: #e6dfcc; --desk2: #d6cdb3; --page: #fbf5e4; --page-edge: #eadfc0; --ink: #231f17; --frame: #b39a58; --frame2: #d9c98f;
  --banner1: #f3e7bf; --banner2: #ead9a2; --cover: #d8cfb8;
  --chrome: rgba(252, 249, 240, .94); --chrome-ink: #20241f; --chrome-line: rgba(60, 50, 20, .14); --soft: rgba(28, 107, 87, .1);
}
/* kids: a bright, friendly frame around the page; the page itself stays cream and black so it reads exactly like the mushaf */
body[data-theme="kids"] {
  --desk: #e9e3ff; --desk2: #cfe8ff; --page: #fffdf5; --page-edge: #f1e9d2; --ink: #1b1b2f; --frame: #8338ec; --frame2: #ffb703;
  --banner1: #fff1c2; --banner2: #ffd98a; --cover: #ffe5b4;
  --chrome: rgba(255, 255, 255, .96); --chrome-ink: #2b2550; --chrome-line: rgba(90, 60, 180, .18); --soft: rgba(131, 56, 236, .12);
  --accent: #7b3fe4; --gold: #f58a07; --radius: 20px; --chrome-h: 52px;
}
body[data-theme="sepia"] {
  --desk: #a8916c; --desk2: #957d58; --page: #efdfc0; --page-edge: #dcc79d; --ink: #3a2a16; --frame: #9a7430; --frame2: #c4a566;
  --banner1: #e4cf9f; --banner2: #d9bf86; --cover: #cdb88f;
  --chrome: rgba(243, 230, 203, .94); --chrome-ink: #33261a; --chrome-line: rgba(70, 45, 10, .18); --soft: rgba(120, 80, 20, .12);
}
body[data-theme="night"] {
  --desk: #0b0e14; --desk2: #060810; --page: #1c2230; --page-edge: #151a26; --ink: #e9e4d8; --frame: #8a7440; --frame2: #5d4f2e;
  --banner1: #2a3144; --banner2: #232a3b; --cover: #2f374b;
  --chrome: rgba(22, 27, 38, .94); --chrome-ink: #e8eaf0; --chrome-line: rgba(255, 255, 255, .12); --soft: rgba(90, 200, 170, .14);
  --accent: #4cc3a2; --gold: #d4af5a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--desk); color: var(--chrome-ink); font-family: var(--ui-font); overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
/* rows: top bar / the page (+ the meanings column beside it) / page slider / teacher tools */
/* columns: tool rail (start side) / the pages / tool rail (end side) / meanings column. In Arabic the start is the right */
#app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--chrome-h) minmax(0, 1fr) auto auto; grid-template-columns: auto minmax(0, 1fr) auto auto;
  background: radial-gradient(1200px 700px at 50% 40%, var(--desk), var(--desk2)); }
#topbar, #seekbar, #dock { grid-column: 1 / -1; }
#rail-a { grid-row: 2; grid-column: 1; }
#stage { grid-row: 2; grid-column: 2; }
#rail-b { grid-row: 2; grid-column: 3; }
#aside { grid-row: 2; grid-column: 4; }
/* the top bar lies on the desk itself (no white strip): the tools at the start side, the gear alone at the end side */
#topbar { display: flex; align-items: center; gap: 2px; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  background: transparent; z-index: 20; }
#btn-layout .one { display: none; } #btn-layout[aria-pressed="true"] .one { display: block; } #btn-layout[aria-pressed="true"] .two { display: none; }
@media (max-width: 999px) { #btn-layout { display: none; } }
/* the tool rails: a slim column of small icons, centred beside the pages */
.rail { width: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 0; z-index: 15; min-height: 0; }
body:not(.rails) .rail { display: none !important; }
.rail .grp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px; border-radius: 22px; background: var(--chrome); border: 1px solid var(--chrome-line); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.rail button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative; color: var(--chrome-ink); }
.rail button svg { width: 21px; height: 21px; }
.rail button:hover { background: var(--soft); }
.rail button.on { background: var(--accent); color: #fff; }
.rail button .badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .62rem; display: grid; place-items: center; }
.rail .dot { width: 26px; height: 26px; }
.rail .dot i { width: 16px; height: 16px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.rail .dot.on { background: none; } .rail .dot.on i { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--accent); }
.rail .size i { background: currentColor; border-radius: 50%; display: block; }
.rail .sep { width: 22px; height: 1px; background: var(--chrome-line); margin: 3px 0; }
.rail .zoom { font-size: 1.25rem; font-weight: 600; line-height: 1; }
body.rails #subpanel { bottom: 16px; }
/* no backdrop-filter anywhere: the blur is drawn by the graphics card and crashed the browser on some laptops when
   entering or leaving full screen (Chrome "STATUS_BREAKPOINT") */
/* reading view (default): top bar only. The teacher's dock and the page slider show when "tools" is on */
body:not(.tools) #seekbar, body:not(.tools) #dock, body:not(.tools):not(.rails) #subpanel { display: none !important; }
/* full screen: the page fills the screen edge to edge. The tool rails float in the empty space beside it, and three
   small buttons sit in a corner (leave, one / two pages, rails on / off); all of them fade while the mouse is still */
body.full #topbar, body.full #seekbar, body.full #dock, body.full #aside { display: none !important; }
body.full:not(.rails) #subpanel { display: none !important; }
body.full #app { grid-template-rows: 0 1fr 0 0; grid-template-columns: 0 minmax(0, 1fr) 0 0; }
body.full #stage { grid-column: 1 / -1; }
body.full .rail { position: fixed; top: 50%; transform: translateY(-50%); max-height: 100vh; overflow: auto; scrollbar-width: none; z-index: 60; transition: opacity .5s; }
body.full #rail-a { inset-inline-start: max(8px, env(safe-area-inset-left)); top: calc(50% + 64px); max-height: calc(100vh - 150px); } /* under the corner bar */
body.full #rail-b { inset-inline-end: max(8px, env(safe-area-inset-right)); }
body.full.calm .rail { opacity: .35; }
body.full .rail:hover, body.full .rail:focus-within { opacity: 1 !important; }
/* in the top corner of the start side, in the free space beside the page (the shorter teaching rail is below it) */
#full-bar { position: fixed; top: max(8px, env(safe-area-inset-top)); inset-inline-start: max(8px, env(safe-area-inset-left)); z-index: 70; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  border-radius: 24px; background: rgba(30, 34, 44, .72); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); opacity: .95; transition: opacity .5s; }
#full-bar button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
#full-bar button svg { width: 21px; height: 21px; }
#full-bar button:hover { background: rgba(255, 255, 255, .14); }
#full-bar button[aria-pressed="true"] { background: rgba(255, 255, 255, .2); }
#fb-layout .one { display: none; } #fb-layout[aria-pressed="true"] .one { display: block; } #fb-layout[aria-pressed="true"] .two { display: none; }
#full-bar.dim { opacity: .18; }
#full-bar:hover, #full-bar:focus-within { opacity: 1 !important; }
.ib { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ib[aria-pressed="true"] { background: var(--soft); color: var(--accent); }
#lang-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); object-fit: cover; }
/* theme dots: one per page colour, the chosen one ringed */
#themes { display: flex; gap: 6px; align-items: center; padding: 0 6px; }
.tdot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .18); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); padding: 0; transition: transform .15s; }
.tdot:hover { transform: scale(1.15); }
.tdot.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--accent); }
body[data-theme="night"] .tdot { border-color: rgba(255, 255, 255, .25); }
.ib:hover, .tool:hover { background: var(--soft); }
/* where the mushaf is open is written on the page itself (header, footer, margin marks), not in the top bar */
#topbar .spacer { flex: 1; }

.tj-switch { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 6px; border-radius: 20px; border: 1px solid var(--chrome-line);
  background: color-mix(in srgb, var(--chrome-ink) 6%, transparent); }
.tj-switch .dots { display: flex; gap: 2px; }
.tj-switch .dots i { width: 9px; height: 9px; border-radius: 50%; opacity: .35; }
.tj-switch .lbl { font-size: .85rem; font-weight: 700; }
.tj-switch .knob { width: 34px; height: 20px; border-radius: 12px; background: color-mix(in srgb, var(--chrome-ink) 28%, transparent); position: relative; transition: background .2s; }
.tj-switch .knob::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s; }
.tj-switch[aria-checked="true"] { background: var(--soft); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tj-switch[aria-checked="true"] .dots i { opacity: 1; }
.tj-switch[aria-checked="true"] .knob { background: var(--accent); }
.tj-switch[aria-checked="true"] .knob::after { transform: translateX(-14px); }

/* one finger: sideways swipes turn the page (the browser only takes vertical scrolling); two fingers zoom;
   when zoomed in, one finger moves the page around */
#stage { position: relative; overflow: auto; display: flex; touch-action: pan-y; scrollbar-width: thin; }
body.zoomed #stage { touch-action: pan-x pan-y; }
#book { margin: auto; flex: none; position: relative; display: flex; flex-direction: row; direction: rtl; align-items: flex-start; padding: 8px; }
body.drawing #stage, body.drawing.zoomed #stage { touch-action: none; }

#seekbar { display: flex; align-items: center; gap: 10px; padding: 2px 14px 0; background: transparent; direction: rtl; }
#seek { flex: 1; min-width: 0; height: 18px; accent-color: var(--accent); margin: 0; }
.zb { width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; line-height: 1; background: var(--chrome); border: 1px solid var(--chrome-line); color: var(--chrome-ink); flex: none; }
.zb:hover { background: var(--soft); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); outline-offset: 2px; }

/* ---------- the page ---------- */
.page { position: relative; flex: none; font-size: var(--fs, 22px);
  width: calc(1em * var(--W)); height: calc(1em * (3.24 + 15 * var(--K, 1.75))); /* header 1.25 + frame air .74 + footer 1.25 (reader.js HF) */
  background: linear-gradient(180deg, var(--page), var(--page) 70%, var(--page-edge)); color: var(--ink);
  font-family: 'KFGQPC Hafs', serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.page.pending { visibility: hidden; }
/* the stacked paper edges show on the outer side of each page: right for odd pages, left for even pages */
.page.even { box-shadow: -.35em .1em .9em rgba(0, 0, 0, .28), -.08em 0 0 var(--page-edge), -.16em 0 0 color-mix(in srgb, var(--page-edge) 70%, #000 8%), -.24em 0 0 var(--page-edge); border-radius: .25em 0 0 .25em; }
.page.odd { box-shadow: .35em .1em .9em rgba(0, 0, 0, .28), .08em 0 0 var(--page-edge), .16em 0 0 color-mix(in srgb, var(--page-edge) 70%, #000 8%), .24em 0 0 var(--page-edge); border-radius: 0 .25em .25em 0; }
body:not(.spread) .page { box-shadow: 0 .2em 1em rgba(0, 0, 0, .25), .08em 0 0 var(--page-edge), -.08em 0 0 var(--page-edge); border-radius: .25em; }
/* a soft darkening toward the edges, so the page feels like paper and not a flat screen. (The paper-grain SVG
   filter that used to be here was drawn again at every size change and is gone: cheaper to draw, steadier.) */
.page::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(120, 90, 30, .11)); }
body[data-theme="night"] .page::before { opacity: .35; }
/* the shade near the spine of an open book */
body.spread .page.even::after, body.spread .page.odd::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2.6em; pointer-events: none; z-index: 3; }
body.spread .page.odd::after { left: 0; background: linear-gradient(90deg, rgba(60, 40, 10, .28), transparent); }
body.spread .page.even::after { right: 0; background: linear-gradient(270deg, rgba(60, 40, 10, .28), transparent); }

/* The page header, as printed: juz (and hizb) on one side, the surah on the other, a fine rule under them. Every size
   here is in the page's own em, and everything sits inside the header's 1.25em row, so nothing pokes out of the paper. */
.pg-head { position: absolute; left: calc(1em * var(--M)); right: calc(1em * var(--M)); top: 0; height: 1.25em; display: flex; align-items: center; justify-content: space-between;
  padding: .12em .1em .18em; color: var(--ink); line-height: 1; overflow: hidden; }
.pg-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: 1px; background: linear-gradient(90deg, transparent 2%, var(--frame) 22%, var(--frame) 78%, transparent 98%); opacity: .85; }
.pg-head .hs, .pg-head .hj { white-space: nowrap; max-width: 50%; display: flex; align-items: center; gap: .22em; min-width: 0; }
.pg-head button { color: inherit; padding: .06em .28em; border-radius: .3em; line-height: 1.25; font-family: 'KFGQPC Hafs', var(--ui-font); font-size: .6em; }
.pg-head .sn { font-family: 'SuraNames', 'KFGQPC Hafs', serif; font-size: 1.45em; line-height: 1; }
.pg-head .sn-txt, body.no-sn .pg-head .sn { display: none; } body.no-sn .pg-head .sn-txt { display: inline; }
.pg-head .sn-txt small { font-size: .7em; }
.pg-head button:hover, .pg-foot button:hover, .pg-head button:focus-visible { background: var(--soft); color: var(--accent); }
/* numbers (surah number, hizb) in the screen font, as small pills: the mushaf font would draw its digits as ayah marks */
.pg-head small, .pg-head .hz { font-family: var(--ui-font); font-weight: 700; font-size: .34em; padding: .12em .6em; border: 1px solid var(--frame2); border-radius: 1em; line-height: 1.2; color: color-mix(in srgb, var(--ink) 80%, transparent); }
body.compact .pg-head small, body.compact .pg-head .hz { display: none; }
html[dir="ltr"] .pg-head { direction: ltr; } /* "Juz 30 · Hizb 60 … 89 · Makki  Surah Al-Fajr" reads in the screen's direction */
/* the page number: plain, centred under the frame, as in the printed mushaf */
.pg-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 1.25em; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.pg-foot button { font-size: .46em; line-height: 1; letter-spacing: .04em; font-family: var(--ui-font); font-weight: 600; font-variant-numeric: tabular-nums; padding: .25em .9em; border-radius: 1em; color: inherit; }

/* the frame keeps a little air above the first line and under the last one (.3em), so tall marks such as the small
   alef, the shadda or the stop signs never touch or cross the gold lines; the page grows by the same amount (HF) */
.pg-frame { position: absolute; left: calc(1em * var(--M)); right: calc(1em * var(--M)); top: 1.25em; height: calc(1em * (15 * var(--K, 1.75) + .74));
  border: .07em solid var(--frame); padding: .3em .6em;
  box-shadow: inset 0 0 0 .2em var(--page), inset 0 0 0 .25em var(--frame2); }
.pg-text { height: 100%; display: grid; grid-template-rows: repeat(var(--rows, 15), calc(1em * var(--K, 1.75))); direction: rtl; font-family: var(--qp, 'KFGQPC Hafs'), var(--qv, 'KFGQPC Hafs'), 'KFGQPC Hafs', serif; }
.page.opening .pg-text { align-content: center; grid-template-rows: repeat(var(--rows, 8), calc(1em * var(--K, 1.75) * 1.5)); }
.pg-text .ln { display: flex; align-items: center; justify-content: space-between; direction: rtl; white-space: nowrap; min-width: 0; font-size: calc(var(--fs, 22px) * var(--k, 1)); }
.pg-text .ln.short { justify-content: center; gap: .22em; }
.pg-text .ln.t { line-height: 1; }
.w { flex: none; position: relative; display: flex; align-items: center; align-self: stretch; border-radius: .14em; transition: background-color .15s; cursor: pointer; }
.w i { font-style: normal; display: block; }
/* Ayah numbers in the screen's digits. On an Arabic or Urdu screen the font's own medallion (Arabic-Indic digits) shows.
   Elsewhere the font's medallion is hidden and an equal gold medallion with the screen's digits is drawn in its place. */
/* The drawn medallion is exactly as wide as the font's own (the word box) and every ring is drawn inward, so it never
   spills onto the neighbouring words. */
html:not([data-digits="ar"]) .page:not(.tx) .w.end > i { opacity: 0; }
html:not([data-digits="ar"]) .page:not(.tx) .w.end::after { content: attr(data-a); position: absolute; left: 3%; right: 3%; top: 50%; aspect-ratio: 1; transform: translateY(-50%);
  display: grid; place-items: center; font: 700 .36em/1 var(--ui-font); letter-spacing: -.04em; color: var(--ink); background: var(--page);
  border-radius: 50%; box-shadow: inset 0 0 0 .14em var(--gold), inset 0 0 0 .3em var(--page), inset 0 0 0 .4em color-mix(in srgb, var(--gold) 55%, transparent); pointer-events: none; }
html:not([data-digits="ar"]) .page:not(.tx) .w.end.n3::after { font-size: .28em; letter-spacing: -.06em; }
/* tajweed colours: the standard colour code of the Madinah tajweed mushaf, made a little deeper and richer so the
   light ones (gold, light blue, grey) read clearly on the page; the black text stays black */
body[data-tj="1"]:not([data-theme="night"]) .page:not(.tx) .pg-text { filter: saturate(1.35) brightness(.9); }
/* ayah medallions in the mushaf's gold (the colour font paints them pink and green): the medallion alone is turned
   to sepia tones, its digits stay dark */
body:not([data-theme="night"]) .page:not(.tx) .w.end > i { filter: grayscale(1) sepia(1) saturate(1.5) hue-rotate(-8deg) brightness(.97); }

/* tajweed on = the colour font with its own built-in colours; tajweed off = the plain font in the theme's ink colour.
   (No font-palette: see fonts.js.) The night theme keeps the colour font readable by inverting its lightness while
   keeping each tajweed hue; the plain font just takes the light ink colour. */
body[data-tj="0"] .pg-text { font-family: var(--qv, 'KFGQPC Hafs'), var(--qp, 'KFGQPC Hafs'), 'KFGQPC Hafs', serif; color: var(--ink); }
body[data-theme="night"][data-tj="1"] .pg-text { filter: invert(.9) hue-rotate(180deg) brightness(1.15); }

/* surah title band: the name in the mushaf's own calligraphy, a double gold frame, a rosette at each end */
.ln.banner > span { display: flex; width: 100%; height: 90%; align-items: center; justify-content: center; gap: .35em; text-align: center; line-height: 1;
  color: var(--ink); border: .06em solid var(--frame); border-radius: .35em; background: linear-gradient(180deg, var(--banner1), var(--banner2));
  box-shadow: inset 0 0 0 .1em var(--banner1), inset 0 0 0 .15em var(--frame2), 0 .05em .15em rgba(0, 0, 0, .12); position: relative; font-family: 'KFGQPC Hafs', serif; }
.ln.banner .sn, .pg-head .sn { unicode-bidi: isolate; direction: ltr; white-space: nowrap; }
.ln.banner .sn { font-family: 'SuraNames', 'KFGQPC Hafs', serif; font-size: 1.08em; letter-spacing: .04em; padding-top: .08em; }
.ln.banner .sn-txt { display: none; font-size: .82em; font-weight: 700; }
.ln.banner .sn-txt small { font-size: .66em; opacity: .85; }
body.no-sn .ln.banner .sn { display: none; } body.no-sn .ln.banner .sn-txt { display: inline; }
.ln.banner { cursor: pointer; }
.ln.banner:hover > span { box-shadow: inset 0 0 0 .1em var(--banner1), inset 0 0 0 .15em var(--frame2), 0 0 0 .12em color-mix(in srgb, var(--accent) 35%, transparent); }
.ln.banner > span::before, .ln.banner > span::after { content: ''; position: absolute; top: 50%; width: 1.05em; height: 1.05em; transform: translateY(-50%); background: var(--frame);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='15.5'/%3E%3Ccircle cx='20' cy='20' r='6.5'/%3E%3Cpath d='M20 1.5v9M20 29.5v9M1.5 20h9M29.5 20h9M6.9 6.9l6.4 6.4M26.7 26.7l6.4 6.4M33.1 6.9l-6.4 6.4M13.3 26.7l-6.4 6.4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='15.5'/%3E%3Ccircle cx='20' cy='20' r='6.5'/%3E%3Cpath d='M20 1.5v9M20 29.5v9M1.5 20h9M29.5 20h9M6.9 6.9l6.4 6.4M26.7 26.7l6.4 6.4M33.1 6.9l-6.4 6.4M13.3 26.7l-6.4 6.4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.ln.banner > span::before { right: .7em; } .ln.banner > span::after { left: .7em; }
.ln.bsm { justify-content: center; font-size: calc(var(--fs, 22px) * .86); font-family: 'KFGQPC Hafs', serif; }

/* Margin notes (juz, hizb, its quarters, sajdah) in the outer margin, level with their line, written along the margin
   as in the printed mushaf: a slim gold-edged cartouche, the text running top to bottom. */
.pg-marks { position: absolute; top: 1.62em; bottom: 1.62em; width: calc(1em * var(--M)); pointer-events: none; } /* 1.62 = header + frame border + air */
/* the outer margin: odd pages are on the right of the open book, even pages on the left */
.page.odd .pg-marks { right: 0; } .page.even .pg-marks { left: 0; }
.mk { position: absolute; left: 0; right: 0; display: flex; justify-content: center; line-height: 1;
  top: calc(1em * var(--K, 1.75) * (var(--ln) - .5)); transform: translateY(-50%); pointer-events: auto; cursor: pointer; }
/* vertical-rl alone would make Arabic read from the bottom up; turned half a turn it reads from the top down */
.mk b { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .34em/1.15 'KFGQPC Hafs', var(--ui-font); white-space: nowrap; letter-spacing: .02em;
  padding: .7em .32em; border: 1px solid var(--frame2); border-radius: 1.2em; background: linear-gradient(90deg, var(--banner1), var(--banner2));
  color: color-mix(in srgb, var(--ink) 82%, transparent); box-shadow: 0 .05em .2em rgba(0, 0, 0, .08); transition: background .15s, color .15s; }
.mk.juz b, .mk.hizb b { border-color: var(--frame); color: var(--ink); font-size: .37em; }
.mk b .num { font: 700 .92em/1 var(--ui-font); font-style: normal; }
.mk.saj b { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mk:hover b { background: var(--soft); color: var(--accent); }
/* phones: the margin is too narrow for words; a small gold dot marks the line (it still opens the explanation) */
body.compact .mk b { display: none; }
body.compact .mk::before { content: ''; width: .28em; height: .28em; border-radius: 50%; background: var(--gold); }
body.no-margins .pg-marks { display: none; }

/* States painted on words. Each word box is as tall as its line (see .w above), so a highlight covers the tall marks
   (small alef, shadda, stop signs) as well as the letters, and lines of highlighted words join into one band.
   A word shows ONE colour, the most important state winning (later rules win): homework < teacher mark < playing <
   selected ayah < chosen words. Colours never mix. */
.w { --hl: transparent; background: var(--hl); }
.w.hw { --hl: color-mix(in srgb, var(--gold) 22%, transparent); }
.w[data-mk] { --hl: color-mix(in srgb, var(--mkc) 22%, transparent); box-shadow: inset 0 -.12em 0 var(--mkc); }
.w.play { --hl: color-mix(in srgb, #f5a524 34%, transparent); }
.w.sel { --hl: color-mix(in srgb, var(--accent) 22%, transparent); }
.w.rsel { --hl: color-mix(in srgb, #2f6bff 22%, transparent); }
.w.sel, .w.rsel, .w.play, .w.hw { border-radius: 0; }
/* part of one word, chosen by dragging inside it: a band over just those letters */
/* chosen text (js/tools.js): one smooth band per line, like selecting text on a web page; the ink stays sharp
   through it (multiply), and the band is drawn over the words, never moving them */
.selband { position: absolute; z-index: 3; pointer-events: none; background: rgba(47, 107, 255, .26); mix-blend-mode: multiply; border-radius: .08em; }
body[data-theme="night"] .selband { background: rgba(110, 160, 255, .38); mix-blend-mode: screen; }
body[data-tool="browse"] .pg-text, body[data-tool="session"] .pg-text, body.selecting, body.selecting .w { cursor: text; }
body.selecting { -webkit-user-select: none; user-select: none; }
.w[data-mk="h"] { --mkc: #e5484d; } .w[data-mk="t"] { --mkc: #f5a524; } .w[data-mk="m"] { --mkc: #9b5de5; }
.w[data-mk="p"] { --mkc: #2f9bff; } .w[data-mk="w"] { --mkc: #12a594; }
.page.tx .pg-text .ln.t { font-size: calc(var(--fs, 22px) * var(--k, 1) * .66); }
.w.cv { background: var(--cover); box-shadow: inset 0 0 0 .05em color-mix(in srgb, var(--ink) 18%, transparent); }
.w.cv i { opacity: 0; }

/* pen layer over each page */
.page > canvas.ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
body[data-tool="pen"] .page > canvas.ink { pointer-events: auto; touch-action: none; cursor: crosshair; }
body[data-tool="laser"] #stage { cursor: none; }
body[data-tool="mark"] .w:not(.end) { cursor: cell; }
body.turning .w { pointer-events: none; }

.edge { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; display: none; place-items: center; z-index: 5;
  background: var(--chrome); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); opacity: .0; transition: opacity .2s; }
.edge.prev { right: 10px; } .edge.next { left: 10px; }
@media (hover: hover) and (pointer: fine) { .edge { display: grid; } #stage:hover .edge { opacity: .85; } .edge:hover { opacity: 1 !important; } }
.edge:disabled { visibility: hidden; }

/* ---------- page turn ---------- */
/* turning by hand: the page's outer edge can be taken (js/reader.js) */
#stage.grab-edge, #stage.grab-edge .pg-marks { cursor: grab; }
body.hand-turning, body.hand-turning * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
/* a page turning (js/curl.js): the flat part of the sheet, its folded-over back, and the shading of the fold */
.curl { position: absolute; z-index: 10; transform-origin: 0 0; pointer-events: none; }
.curl.back { z-index: 11; }
.curl.shade { z-index: 12; }
.curl .page { box-shadow: none; }
.curl.paper { background: linear-gradient(90deg, color-mix(in srgb, var(--page) 90%, #6b5a3a), var(--page) 18%, var(--page) 82%, color-mix(in srgb, var(--page) 94%, #6b5a3a)); }
.slot { flex: none; position: relative; }

/* ---------- loading, laser, toast ---------- */
.loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 24px;
  background: var(--chrome); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); font-size: .9rem; z-index: 30; }
.loading i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--soft); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#laser { position: fixed; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; z-index: 60;
  background: radial-gradient(circle, #ff2d2d 0 22%, rgba(255, 45, 45, .55) 40%, rgba(255, 45, 45, 0) 70%); filter: drop-shadow(0 0 8px #ff2d2d); }
/* tooltips: the button's name in the screen language, and its keyboard key */
#tip { position: fixed; z-index: 200; display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 10px; border-radius: 9px; background: #1f2430; color: #fff;
  font-size: .8rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); pointer-events: none; }
#tip kbd, .keys-list kbd { font: 700 .74rem/1 ui-monospace, Consolas, monospace; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); direction: ltr; }
.keys-list kbd { background: var(--soft); border-color: var(--chrome-line); color: var(--chrome-ink); }
.keys-list li { cursor: default; } .keys-list .keys { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: #1f2430; color: #fff; padding: 10px 18px; border-radius: 22px; font-size: .92rem;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 100; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- dock, sub panels, selection bar ---------- */
#dock { display: flex; justify-content: flex-start; gap: 2px; padding: 6px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)); background: var(--chrome);
  border-top: 1px solid var(--chrome-line); overflow-x: auto; z-index: 20; scrollbar-width: none; }
#dock::-webkit-scrollbar { display: none; }
.tool { flex: none; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 12px; font-size: .72rem; font-weight: 600; position: relative; }
.tool:first-child { margin-inline-start: auto; } .tool:last-child { margin-inline-end: auto; } /* centred when there is room, scrollable when not */
.tool.on { background: var(--soft); color: var(--accent); }
body[data-theme="night"] .tool.on { color: var(--accent); }
.tool .badge { position: absolute; top: 2px; left: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .68rem; display: grid; place-items: center; }

#subpanel { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; width: min(760px, 96vw); background: var(--chrome); border: 1px solid var(--chrome-line); border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3); padding: 2px 12px 8px; z-index: 25; max-height: 44vh; overflow: auto; color: var(--chrome-ink); }
.sp-handle { display: grid; place-items: center; width: 100%; height: 20px; }
.sp-handle i { width: 38px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--chrome-ink) 30%, transparent); }
#subpanel.min #spc { display: none; }
#subpanel.min { padding-bottom: 0; }
.sp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.sp-row + .sp-row { margin-top: 6px; }
@media (max-height: 760px) { .chip { height: 34px !important; } .sp-title { font-size: .72rem; } }
.sp-title { width: 100%; text-align: center; font-size: .78rem; opacity: .72; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 19px; border: 1px solid var(--chrome-line); background: color-mix(in srgb, var(--chrome-ink) 5%, transparent); font-size: .86rem; font-weight: 600; }
.chip.on { background: var(--soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.chip .sw { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.chip .n { background: #0002; border-radius: 9px; padding: 0 7px; font-size: .75rem; }
.chip.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:disabled { opacity: .45; }
.sp-row select, .sheet select, .sheet input[type="text"], .sheet input[type="search"], .sheet input[type="number"], .sheet textarea { height: 38px; border-radius: 10px; border: 1px solid var(--chrome-line); background: var(--page); color: var(--ink); padding: 0 10px; font: inherit; max-width: 100%; }
.sheet textarea { height: auto; padding: 8px 10px; width: 100%; }

#selbar { position: fixed; z-index: 40; display: flex; gap: 2px; padding: 4px; background: #1f2430; color: #fff; border-radius: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .4); max-width: 96vw; }
#selbar button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 9px; border-radius: 12px; font-size: .68rem; min-width: 52px; }
#selbar button:hover { background: #ffffff1f; }
#selbar svg { width: 20px; height: 20px; }
#selbar { overflow-x: auto; scrollbar-width: none; }
body.compact #selbar .ref { display: none; }
body.compact #selbar button { min-width: 44px; padding: 6px 4px; }
#selbar .ref { align-self: center; padding: 0 10px; font-size: .78rem; opacity: .85; white-space: nowrap; border-inline-end: 1px solid #fff3; }

/* ---------- sheets (index, search, settings...) ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(8, 12, 20, .45); z-index: 80; display: flex; align-items: flex-end; justify-content: center; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--chrome); color: var(--chrome-ink); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); animation: rise .22s ease-out; }
@keyframes rise { from { transform: translateY(40px); opacity: .6; } }
@media (min-width: 760px) { .backdrop { align-items: center; } .sheet { border-radius: 22px; max-height: 82vh; } }
.sheet > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.sheet > header h2 { flex: 1; margin: 0; font-size: 1.1rem; }
.sheet .body { padding: 4px 14px 16px; overflow: auto; }
/* only the last part of a sheet scrolls; the search box and the tabs above it keep their height */
.sheet-inner > .body:not(:last-child), .sheet-inner > .tabs { flex: none; }
.tabs { display: flex; gap: 6px; padding: 0 14px 8px; overflow-x: auto; }
.tabs .chip { flex: none; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--chrome-line); cursor: pointer; border-radius: 10px; }
.list li:hover { background: var(--soft); }
.list .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 700; font-size: .85rem; flex: none; }
.list .name { font-weight: 700; font-family: 'KFGQPC Hafs', var(--ui-font); font-size: 1.12rem; }
.list .sub { font-size: .76rem; opacity: .7; }
.list .grow { flex: 1; min-width: 0; }
.list .pg { font-size: .8rem; opacity: .75; white-space: nowrap; }
.list li.cur { background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
.list li.cur .num { background: var(--accent); color: #fff; }
.list .ar-name { font-size: .8em; opacity: .7; margin-inline-start: 6px; }
.ib.sm { width: 34px; height: 34px; opacity: .7; }
.ib.sm:hover { opacity: 1; }
.note.def { margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--soft); opacity: 1; }
/* surah information sheet */
.si-head { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 10px; }
.si-name { font-family: 'KFGQPC Hafs', serif; font-size: 1.7rem; line-height: 1.4; }
.si-sub { font-size: .9rem; opacity: .75; }
.si-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.si-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--chrome-line); font-size: .9rem; }
.si-row span { opacity: .7; }
.si-row b { text-align: end; }
.si-ar { font-family: 'KFGQPC Hafs', serif; font-size: 1.15em; }
.si-notes { margin: 10px 0 0; }
.si-text { margin-top: 12px; line-height: 1.9; font-size: .95rem; }
.si-text p { margin: 0 0 8px; }
.si-text h4 { margin: 10px 0 4px; font-size: .95rem; color: var(--accent); }
.si-text.en { text-align: left; }
.list .ayah-text { font-family: 'KFGQPC Hafs', serif; font-size: 1.25rem; line-height: 1.9; }
.list mark { background: color-mix(in srgb, var(--gold) 45%, transparent); color: inherit; border-radius: 4px; }
.list mark.df { background: color-mix(in srgb, #e5484d 18%, transparent); color: #c62828; padding: 0 3px; font-weight: 700; }
body[data-theme="night"] .list mark.df { color: #ff8a8a; }
.ayah-text.sim { font-size: 1.12rem; line-height: 2; }
.ayah-text .tag { display: inline-block; font: 700 .68rem var(--ui-font); padding: 1px 7px; margin-inline-end: 8px; border-radius: 9px; background: var(--soft); color: var(--accent); vertical-align: middle; }
.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lang { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--chrome-line); font-size: .95rem; text-align: start; }
.lang img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.lang.on { background: var(--soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.lang:hover { background: var(--soft); }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.field > label, .field > .lab { font-size: .85rem; font-weight: 700; }
.row-set { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-set label { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }
.chk { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 12px; font-size: .88rem; line-height: 1.6; cursor: pointer; }
.chk input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.theme-sw { width: 56px; height: 56px; border-radius: 14px; border: 3px solid transparent; display: grid; place-items: end center; font-size: .7rem; padding-bottom: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.theme-sw.on { border-color: var(--accent); }
.legend-item { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--chrome-line); }
.legend-item .sw { width: 22px; height: 22px; border-radius: 50%; flex: none; filter: saturate(1.35) brightness(.9); } /* same as on the page */
.legend-item > span[dir] { filter: saturate(1.35) brightness(.9); }
.legend-item b { display: block; }
.legend-item span { font-size: .8rem; opacity: .75; }
.note { font-size: .8rem; opacity: .75; line-height: 1.6; }
.progress { height: 10px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
/* the student's plan (js/plan.js): a ring and a map of the 30 juz, the next lesson as three cards, three questions */
.pn-top { display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; }
.pn-ring { --size: 92px; width: var(--size); height: var(--size); flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--accent) calc(var(--share) * 360deg), color-mix(in srgb, var(--chrome-ink) 10%, transparent) 0); }
.pn-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: linear-gradient(var(--chrome), var(--chrome)), linear-gradient(var(--chrome), var(--chrome)); }
.pn-ring b, .pn-ring small { position: relative; line-height: 1.1; }
.pn-ring b { font-size: 1.5rem; } .pn-ring small { font-size: .7rem; opacity: .7; }
.pn-facts { display: flex; flex-direction: column; gap: 4px; line-height: 1.6; } .pn-facts span { font-size: .85rem; opacity: .75; }
.pn-map { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; direction: inherit; }
.pn-juz { position: relative; height: 34px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--chrome-ink) 7%, transparent); color: color-mix(in srgb, var(--chrome-ink) 70%, transparent); border: 0; padding: 0; }
.pn-juz i { position: absolute; inset: auto 0 0 0; height: calc(var(--share) * 100%); background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pn-juz b { position: relative; }
.pn-juz.full { background: var(--accent); color: #fff; } .pn-juz.full i { display: none; }
.pn-map.edit .pn-juz { cursor: pointer; transition: transform .12s; } .pn-map.edit .pn-juz:hover { transform: scale(1.08); }
.pn-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; opacity: .8; margin-top: 8px; }
.pn-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pn-legend i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--chrome-ink) 9%, transparent); }
.pn-legend i.full { background: var(--accent); } .pn-legend i.part { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 55%, transparent) 50%, color-mix(in srgb, var(--chrome-ink) 9%, transparent) 50%); }
.pn-h { font-size: 1rem; margin: 18px 0 8px; }
.pn-ok { margin: 0 0 8px; color: #1f8a4c; font-weight: 700; }
.pn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pn-card { --c: var(--accent); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 14px; text-align: start;
  background: color-mix(in srgb, var(--c) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-top: 4px solid var(--c); color: inherit; transition: transform .15s, box-shadow .15s; }
.pn-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.pn-card.new { --c: #1f8a4c; } .pn-card.recent { --c: #d98a00; } .pn-card.old { --c: #2f6bff; }
.pn-card-h { font-weight: 800; color: var(--c); font-size: .95rem; }
.pn-card-p { font-size: 1.15rem; font-weight: 700; }
.pn-card-s { font-size: .85rem; } .pn-card-n { font-size: .75rem; opacity: .7; line-height: 1.5; }
.pn-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .8rem; font-weight: 700; color: var(--c); }
.pn-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pn-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.pn-steps span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 700; background: color-mix(in srgb, var(--chrome-ink) 8%, transparent); }
.pn-steps span.on { background: var(--accent); color: #fff; } .pn-steps span.done { background: var(--soft); color: var(--accent); }
.pn-steps i { width: 26px; height: 2px; background: var(--chrome-line); }
.pn-q { font-size: 1.1rem; margin: 6px 0 12px; }
.pn-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pn-choice { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: start; padding: 16px; border-radius: 14px; border: 2px solid var(--chrome-line); color: inherit; }
.pn-choice b { font-size: 1.05rem; } .pn-choice span { font-size: .82rem; opacity: .75; line-height: 1.6; }
.pn-choice.on { border-color: var(--accent); background: var(--soft); }
.pn-reach { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pn-reach label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.pn-reach select { height: 38px; border-radius: 10px; border: 1px solid var(--chrome-line); background: var(--chrome); color: inherit; padding: 0 8px; font: inherit; max-width: 240px; }
.pn-sum { font-weight: 700; margin: 8px 0; }
.pn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--chrome-line); }
.pn-row > div:first-child { display: flex; flex-direction: column; gap: 2px; } .pn-row span { font-size: .8rem; opacity: .7; }
.pn-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* «المصحف على جهازك» (js/pack.js) */
.pk .pk-app { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 8px; font-size: .9rem; line-height: 1.7; }
.pk .ok { display: inline-flex; align-items: center; gap: 4px; color: #1f8a4c; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pk .pk-app.ok { font-size: .9rem; white-space: normal; }
.pk-h { font-size: .95rem; margin: 14px 0 4px; }
.pk-h2 { font-size: .85rem; margin: 14px 0 2px; opacity: .8; }
.pk-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--chrome-line); }
.pk-row label { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.pk-row input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.pk-row input:disabled { visibility: hidden; } /* already saved: the green «محفوظ» says it */
.pk-row .nm { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.pk-row .nm small { display: block; font-weight: 400; opacity: .7; font-size: .78rem; }
.pk-row.main .nm { font-size: 1rem; }
.pk-row .sz { font-size: .8rem; opacity: .75; white-space: nowrap; }
.pk-row .ib { width: 34px; height: 34px; flex: none; }
.pk-audio { display: flex; flex-direction: column; gap: 10px; padding: 10px 2px 4px; }
.pk-sel { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; }
.pk-sel select { flex: 1; min-width: 0; height: 38px; border-radius: 10px; border: 1px solid var(--chrome-line); background: var(--chrome); color: inherit; padding: 0 8px; font: inherit; font-weight: 400; }
.pk-juz-head .lab { font-size: .85rem; font-weight: 700; }
.pk-juz { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.pk-juz .chip { height: 34px; padding: 0; justify-content: center; border-radius: 10px; }
.pk-juz .chip.have { box-shadow: inset 0 -3px 0 #1f8a4c; }
.pk-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.pk-wrap > .body { flex: 1; min-height: 0; }
.pk-foot { flex: none; padding: 10px 14px 14px; border-top: 1px solid var(--chrome-line); display: flex; flex-direction: column; gap: 8px; }
.pk-total { font-weight: 700; font-size: .92rem; margin: 0; }
.pk-total.bad { color: #c0392b; }
.pk-run { display: flex; flex-direction: column; gap: 6px; }
.pk-run .note { margin: 0; }
.report { white-space: pre-wrap; line-height: 1.9; background: var(--page); color: var(--ink); border-radius: 12px; padding: 12px; font-size: .95rem; border: 1px solid var(--chrome-line); }

/* a phone held sideways: slim bars so the page gets the height; tool names hidden, icons stay */
body.sideways { --chrome-h: 42px; }
body.sideways #seekbar { display: none; }
body.sideways .ib { width: 36px; height: 36px; }
body.sideways .tj-switch { height: 32px; }
body.sideways #dock { padding-top: 2px; padding-bottom: 2px; }
body.sideways .tool { min-width: 52px; padding: 5px 6px; }
body.sideways .tool span:not(.n) { display: none; }
body.sideways #subpanel { bottom: 52px; max-height: 60vh; }

/* ---------- the meanings column (tafsir / translation of the selected ayah) ---------- */
#aside { width: min(360px, 34vw); display: flex; flex-direction: column; background: var(--chrome); border-inline-start: 1px solid var(--chrome-line); color: var(--chrome-ink); min-height: 0; z-index: 15; }
#aside-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--chrome-line); font-size: .95rem; }
#aside-body { flex: 1; overflow: auto; padding: 10px 14px 16px; line-height: 1.9; font-size: .98rem; }
#aside-body .ref { font-weight: 700; color: var(--accent); margin-bottom: 6px; }
#aside-body .ayah-text { font-family: 'KFGQPC Hafs', serif; font-size: 1.25rem; line-height: 2; direction: rtl; text-align: right; margin-bottom: 8px; }
#aside-body .txt { white-space: pre-wrap; }
#aside-body .txt.ar { font-family: 'KFGQPC Hafs', var(--ui-font); font-size: 1.08rem; direction: rtl; text-align: right; }
#aside-body .tabs { padding: 0 0 8px; flex-wrap: wrap; }
/* formatted sources (تدبر وعمل): headings, numbered stops, the quoted ayat in the mushaf font, the question in colour */
.rich { white-space: normal; line-height: 1.9; font-family: var(--ui-font) !important; font-size: 1rem !important; }
.rich h3 { margin: 12px 0 6px; font-size: 1.02em; color: var(--accent); font-family: var(--ui-font); font-weight: 700; }
.rich h3:first-child { margin-top: 0; }
.rich p { margin: 0 0 8px; }
.rich .q { font-family: 'KFGQPC Hafs', serif; font-size: 1.12em; color: color-mix(in srgb, var(--accent) 70%, var(--chrome-ink)); }
.rich p:has(> .q:only-child) { margin-bottom: 2px; }
@media (max-width: 899px) {
  #app { grid-template-rows: var(--chrome-h) minmax(0, 1fr) auto auto auto; }
  #stage { grid-column: 1 / -1; }
  #aside { grid-row: 3; grid-column: 1 / -1; width: auto; max-height: 30vh; border-inline-start: 0; border-top: 1px solid var(--chrome-line); }
}

/* ---------- kids: bigger, rounder, more colour in the frame around the page ---------- */
body[data-theme="kids"] #app { background: linear-gradient(135deg, #ffe9f3, #e3f0ff 50%, #e9ffe6); }
body[data-theme="kids"] .rail .grp { border: 2px solid #ffd98a; }
body[data-theme="kids"] #dock { background: linear-gradient(90deg, #fff6e0ee, #ffffffee); border-top: 3px solid #8338ec; }
body[data-theme="kids"] .tool { min-width: 74px; font-size: .78rem; border-radius: 16px; }
body[data-theme="kids"] .tool.on { background: #ffd98a; color: #5a2d9a; }
body[data-theme="kids"] .chip { border-radius: 22px; }
body[data-theme="kids"] .chip.primary { background: linear-gradient(90deg, #fb5607, #ff8a3d); border-color: transparent; }
body[data-theme="kids"] .page.odd, body[data-theme="kids"] .page.even { box-shadow: 0 .3em 1.2em rgba(100, 60, 200, .25); }
body[data-theme="kids"] .pg-frame { border-color: #8338ec; box-shadow: inset 0 0 0 .2em var(--page), inset 0 0 0 .3em #ffb703; border-radius: .4em; }
body[data-theme="kids"] .ln.banner span { background: linear-gradient(90deg, #ffd6e8, #fff1c2, #d6f0ff); border-color: #8338ec; }
body[data-theme="kids"] .w.sel { background: #ffd98a99; }
body[data-theme="kids"] .edge { background: #ffb703; color: #5a2d9a; }

@media (max-width: 999px) { #themes { display: none; } }
@media (max-width: 620px) {
  .tj-switch .lbl { display: none; } .tj-switch { padding: 0 8px 0 6px; }
  #btn-lang, #btn-meanings { display: none; }
  .ib { width: 40px; height: 40px; }
  #topbar { gap: 0; }
  .tool { flex: 1 1 0; min-width: 0; padding: 5px 1px; font-size: .64rem; line-height: 1.15; text-align: center; }
  .tool span { white-space: normal; }
  #subpanel { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .backdrop, .sheet { animation: none; } }