/* tehfiz-shared.css — s6
   Theme tokens, the theme picker, the one-row header and the mushaf page
   style (Illuminated / Quiet), shared by both apps.
   Loaded in <head> before each app's own <style>, from
   /app/shared/tehfiz-shared.css?v=s6. Each app's own .topbar rules still
   exist and load later, so header rules here are written one class stronger
   (.topbar.tzh-bar) to win without !important. */
/* ═══ THEMES ════════════════════════════════════════════════════════════
   Shared verbatim between the teacher app and the viewer — diff them after
   editing either. Selected by <html data-tz-theme>, set before first paint
   by the bootstrap in <head> and changed by TehfizTheme (Settings → Display).

   Bare :root is Graphite, the default, so a page whose bootstrap failed still
   renders a complete palette.

   Only the interface changes between themes. The mistake colours (levels,
   types, tajweed, spot blue) are data and are defined once in :root above.

   Roles — --gold keeps its name so 1,600 existing references keep working,
   but it now means ONE thing: the accent used as a fill, border or outline.
     --gold         accent fill / border / outline
     --on-gold      text on an accent fill
     --gold-ink     accent used as text on a light surface
     --gold-light   light accent tint (borders, washes)
     --gold-pale    selected / highlighted background
     --chrome       dark surfaces: top bar, view bar, dark buttons, panel heads
     --chrome-2/3   controls on chrome, and their hover
     --chrome-input text inputs on chrome
     --on-ink       text on chrome (was --gold-light used as text)
     --chrome-accent  the accent where it sits ON chrome (brand, active tab,
                      Import) — Graphite's black accent would vanish there
     --chrome-rule  the rule under the top bar
     --ornament     the mushaf page frame and surah band — decoration, so
                    Graphite draws it grey rather than in its black accent
     --ui-font      interface face; the mushaf keeps its QCF fonts          */
:root{
  --ink:#17191c;--ink2:#3f444b;--ink3:#626973;
  --parchment:#f5f5f3;--parchment2:#ecece8;--parchment3:#dcdcd7;
  --gold:#17191c;--on-gold:#ffffff;--gold-ink:#17191c;--gold-light:#d6d8dc;--gold-pale:#e9eaed;
  --chrome:#17191c;--chrome-2:#26292e;--chrome-3:#32363c;--chrome-input:#0f1113;
  --on-ink:#e8e9ea;--chrome-accent:#e8e9ea;--chrome-rule:#17191c;
  --ornament:#a6abb2;
  --surface:#ffffff;
  --border:rgba(23,25,28,0.13);--border2:rgba(23,25,28,0.25);
  --ui-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Lapis, Mulberry and Classic share Graphite's neutral ground — page, panels,
   top bar, text — and differ ONLY in accents: fills, selected outlines, accent
   text, the active tab, the rule under the top bar and the mushaf frame. A
   tinted ground made every surface read blue (or plum, or cream) and the
   tinted near-white text sat poorly on it.
   --gold-pale (selected / highlighted background) is the neutral one too; the
   selected state shows its theme through its accent border instead. */
:root[data-tz-theme="lapis"]{
  --ink:#17191c;--ink2:#3f444b;--ink3:#626973;
  --parchment:#f5f5f3;--parchment2:#ecece8;--parchment3:#dcdcd7;
  --chrome:#17191c;--chrome-2:#26292e;--chrome-3:#32363c;--chrome-input:#0f1113;--on-ink:#e8e9ea;
  --border:rgba(23,25,28,0.13);--border2:rgba(23,25,28,0.25);
  --gold:#3a5585;--on-gold:#ffffff;--gold-ink:#3a5585;--gold-light:#d3dbe9;--gold-pale:#e9eaed;
  --chrome-accent:#a9b8d6;--chrome-rule:#3a5585;--ornament:#3a5585;
  --ui-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
:root[data-tz-theme="mulberry"]{
  --ink:#17191c;--ink2:#3f444b;--ink3:#626973;
  --parchment:#f5f5f3;--parchment2:#ecece8;--parchment3:#dcdcd7;
  --chrome:#17191c;--chrome-2:#26292e;--chrome-3:#32363c;--chrome-input:#0f1113;--on-ink:#e8e9ea;
  --border:rgba(23,25,28,0.13);--border2:rgba(23,25,28,0.25);
  --gold:#6a3f5c;--on-gold:#ffffff;--gold-ink:#6a3f5c;--gold-light:#e3d3dd;--gold-pale:#e9eaed;
  --chrome-accent:#d2aec6;--chrome-rule:#6a3f5c;--ornament:#6a3f5c;
  --ui-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Gold accents on the neutral ground, keeping the original Lora face. Stored
   as 'classic' so existing choices carry over. Gold as TEXT is darkened
   (#b8841a was 3.1:1 on a light ground); as a fill it stays the original gold. */
:root[data-tz-theme="classic"]{
  --ink:#17191c;--ink2:#3f444b;--ink3:#626973;
  --parchment:#f5f5f3;--parchment2:#ecece8;--parchment3:#dcdcd7;
  --chrome:#17191c;--chrome-2:#26292e;--chrome-3:#32363c;--chrome-input:#0f1113;--on-ink:#e8e9ea;
  --border:rgba(23,25,28,0.13);--border2:rgba(23,25,28,0.25);
  --gold:#b8841a;--on-gold:#17191c;--gold-ink:#8a6212;--gold-light:#f5e8c8;--gold-pale:#e9eaed;
  --chrome-accent:#d9a53a;--chrome-rule:#b8841a;--ornament:#b8841a;
  --ui-font:'Lora',Georgia,serif;
}
/* Theme picker (Settings → Display) */
.tz-theme-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.tz-theme-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border2);background:var(--parchment);color:var(--ink);font-family:var(--ui-font);
  font-size:13px;text-align:left;min-height:40px;}
.tz-theme-opt:hover{background:var(--parchment2);}
.tz-theme-opt.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);font-weight:600;}
.tz-theme-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.tz-theme-sw{display:inline-flex;flex:none;border-radius:4px;overflow:hidden;border:1px solid rgba(0,0,0,.15);}
.tz-theme-sw i{display:block;width:10px;height:20px;}
.tz-theme-name{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.tz-theme-name small{font-size:12px;font-weight:400;color:var(--ink3);}

/* ═══ HEADER — one row (TehfizHeader, h1) ═══════════════════════════════
   Markup in each app; the menu, View popover and Go to sheet are built by
   tehfiz-header.js. Every selector is prefixed .tzh-.
   Wide screens: Menu · brand · inline position controls · … · auto-scroll ·
   View · app buttons · timer · account.
   Compact (body.compact-ui): Menu · position button · … · timer. App buttons
   marked .tzh-roomy stay on tablets (>700px) and go into the menu on phones. */
.topbar.tzh-bar{flex-direction:row;align-items:center;gap:8px;height:56px;padding:0 10px;
  box-sizing:border-box;flex-wrap:nowrap;border-bottom:2px solid var(--chrome-rule);}
.tzh-bar .tzh-btn{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 12px;border:1px solid var(--chrome-3);border-radius:8px;background:var(--chrome-2);
  color:var(--on-ink);font:500 14px var(--ui-font);cursor:pointer;white-space:nowrap;flex:none;}
.tzh-bar .tzh-btn:hover{background:var(--chrome-3);}
.tzh-bar .tzh-btn:focus-visible,.tzh-bar select:focus-visible,.tzh-bar input:focus-visible{
  outline:2px solid var(--chrome-accent);outline-offset:1px;}
.tzh-bar .tzh-btn[aria-expanded="true"]{background:var(--on-ink);color:var(--chrome);border-color:var(--on-ink);}
.tzh-bar .tzh-icon-btn{width:40px;padding:0;}
.tzh-bar .tzh-menu-btn{padding:0 12px 0 10px;}
.tzh-brand{font:600 15px var(--ui-font);letter-spacing:.02em;color:var(--on-ink);margin:0 4px;white-space:nowrap;flex:none;}
.tzh-brand span{color:var(--chrome-accent);font-weight:400;font-size:13px;margin-left:5px;}
.tzh-spacer{flex:1 1 auto;min-width:4px;}
.tzh-vsep{width:1px;height:26px;background:var(--chrome-3);flex:none;margin:0 2px;}

/* Inline position controls (wide): one bordered group. */
.tzh-bar .tzh-nav{display:flex;align-items:center;height:40px;flex:0 1 auto;justify-content:flex-start;border:1px solid var(--chrome-3);
  border-radius:8px;background:var(--chrome-2);overflow:visible;flex-wrap:nowrap;gap:0;min-width:0;}
.tzh-bar .tzh-nav .sel{height:38px;border:none;background:transparent;color:var(--on-ink);
  font:400 14px var(--ui-font);padding:0 8px;max-width:200px;border-radius:8px 0 0 8px;}
.tzh-bar .tzh-nav .sel option{color:var(--ink);background:var(--parchment);}
.tzh-bar .tzh-nav .tzh-nav-sep{display:block;width:1px;height:38px;flex:none;background:var(--chrome-3);}
.tzh-bar .tzh-nav .tzh-pgbtn{width:30px;height:38px;border:none;background:transparent;color:var(--on-ink);
  cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;}
.tzh-bar .tzh-nav .tzh-pgbtn:hover{background:var(--chrome-3);}
.tzh-bar .tzh-nav #jumpPageInput{width:46px!important;height:30px;text-align:center;background:transparent!important;
  border:none!important;color:var(--on-ink)!important;font:500 14px 'IBM Plex Mono',monospace!important;padding:0!important;
  -moz-appearance:textfield;appearance:textfield;}
.tzh-bar .tzh-nav #jumpPageInput::-webkit-inner-spin-button,.tzh-bar .tzh-nav #jumpPageInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.tzh-bar .tzh-nav .tzh-pglbl{font:400 12px var(--ui-font);color:rgba(255,255,255,.55);padding-left:4px;}
.tzh-bar .tzh-nav .pos-nav{margin:0;}
.tzh-bar .tzh-nav .pos-nav-label{border:none;background:transparent;height:38px;display:inline-flex;align-items:center;
  padding:0 12px;font-size:14px;border-radius:0 8px 8px 0;}

/* The viewer's sessions-panel toggle has id-level styles of its own. */
.topbar.tzh-bar #panelToggleBtn{background:var(--chrome-2);border:1px solid var(--chrome-3);border-radius:8px;
  padding:0 12px;height:40px;font:500 14px var(--ui-font);color:var(--on-ink);}
.topbar.tzh-bar #panelToggleBtn:hover{background:var(--chrome-3);}
/* Compact position button. */
.tzh-bar .tzh-goto{display:none;flex:1 1 auto;min-width:0;max-width:320px;justify-content:space-between;
  text-align:left;padding:0 10px;height:44px;}
.tzh-goto-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.tzh-goto-main{font:600 15px var(--ui-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tzh-goto-sub{font:400 12px var(--ui-font);color:rgba(255,255,255,.6);white-space:nowrap;}

/* Timer: one pill — the time (tap to correct) and Start/Pause. Reset shows
   only while the time is being corrected. */
.tzh-bar .tzh-timer{display:flex;align-items:center;height:40px;border:1px solid var(--chrome-3);border-radius:8px;
  background:var(--chrome-2);flex:none;gap:0;padding:0 2px 0 6px;}
.tzh-bar .tzh-timer .tdisplay{font:500 15px 'IBM Plex Mono',monospace;padding:4px 6px;border-radius:6px;min-width:0;}
.tzh-bar .tzh-timer .btn-t{height:34px;border:none;background:transparent;font:600 14px var(--ui-font);
  display:inline-flex;align-items:center;gap:4px;padding:0 10px;border-radius:6px;color:var(--on-ink);}
.tzh-bar .tzh-timer .btn-t:hover{background:var(--chrome-3);}
.tzh-bar .tzh-timer .tzh-reset{display:none;}
.tzh-bar .tzh-timer.editing .tzh-reset{display:inline-flex;}
.tzh-bar .tzh-timer .tdisplay-input{height:30px;box-sizing:border-box;}

/* Account (wide): initials with a status dot. */
.tzh-who{display:flex;align-items:center;flex:none;}
.tzh-who .tzh-av{width:36px;height:36px;border-radius:50%;background:var(--chrome-3);color:var(--on-ink);
  display:inline-flex;align-items:center;justify-content:center;font:600 13px var(--ui-font);position:relative;
  border:none;cursor:pointer;padding:0;}
.tzh-who .tzh-av:hover{background:#41464d;}
.tzh-who .tzh-av .tzh-dot{position:absolute;right:-1px;bottom:-1px;border:2px solid var(--chrome);}

.tzh-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#8a9099;flex:none;}
.tzh-dot.ok{background:#52b788;}
.tzh-dot.warn{background:#e0a030;}

/* Auto-scroll toggle on the bar (wide) — the app's own #asToggleBtn. */
.tzh-bar #tzhAsWrap{display:flex;flex:none;}
.tzh-bar #tzhAsWrap .vc-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--chrome-3);
  background:var(--chrome-2);color:var(--on-ink);font-size:15px;padding:0;}
.tzh-bar #tzhAsWrap .vc-btn.active-vc{background:var(--chrome-accent);color:var(--chrome);}

/* View popover (wide): the app's zoom and speed controls, on chrome so their
   existing chrome styling holds. */
.tzh-viewpop{position:fixed;z-index:1100;background:var(--chrome);color:var(--on-ink);border:1px solid var(--chrome-3);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:10px 12px;display:flex;flex-direction:column;gap:8px;
  font-family:var(--ui-font);}
.tzh-viewpop[hidden]{display:none;}
.tzh-viewpop .view-controls{display:flex!important;align-items:center;gap:6px;padding:2px 0;flex-wrap:nowrap;}
.tzh-viewpop .tzh-vp-l{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.55);min-width:84px;}
.tzh-viewpop .vc-btn{min-width:32px;height:32px;}
.tzh-viewpop .vc-label{color:rgba(255,255,255,.7);}

/* Compact: the bar shrinks to Menu · position · timer. */
body.compact-ui .topbar.tzh-bar{padding:0 6px;gap:6px;}
body.compact-ui .tzh-bar .tzh-nav,
body.compact-ui .tzh-bar .tzh-wide,
body.compact-ui .tzh-bar #tzhViewBtn,
body.compact-ui .tzh-bar #tzhAsWrap,
body.compact-ui .tzh-bar .tzh-who,
body.compact-ui .tzh-bar .tzh-vsep{display:none;}
body.compact-ui .tzh-bar .tzh-goto{display:inline-flex;}
body.compact-ui .tzh-bar .tzh-btn{height:44px;}
body.compact-ui .tzh-bar .tzh-menu-btn{width:44px;padding:0;border-color:transparent;background:transparent;}
body.compact-ui .tzh-bar .tzh-timer{height:44px;}
body.compact-ui .tzh-bar .tzh-timer .btn-t-label{display:none;}
@media (max-width:700px){ body.compact-ui .tzh-bar .tzh-roomy{display:none;} }
/* Narrow desktop windows: drop the words before anything wraps. */
@media (max-width:1180px){ body:not(.compact-ui) .tzh-bar .tzh-brand{display:none;} }
@media (max-width:1040px){ body:not(.compact-ui) .tzh-bar .tzh-menu-btn .tzh-wide{display:none;} }

/* ── menu ── */
#tzhRoot{font-family:var(--ui-font);}
.tzh-menu-wrap.is-pop .tzh-menu{position:fixed;z-index:1200;width:290px;max-height:calc(100vh - 80px);overflow:auto;
  background:var(--parchment);color:var(--ink);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 12px 32px rgba(23,25,28,.22);opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s;}
.tzh-menu-wrap.is-pop.on .tzh-menu{opacity:1;transform:none;}
.tzh-menu-wrap.is-pop .tzh-mh{padding:12px 14px 10px;border-bottom:1px solid var(--border);}
.tzh-menu-wrap.is-pop .tzh-mh-top{display:none;}
.tzh-menu-wrap.is-drawer{position:fixed;inset:0;z-index:1200;pointer-events:none;}
.tzh-menu-wrap.is-drawer.on{pointer-events:auto;}
.tzh-scrim{position:absolute;inset:0;background:rgba(23,25,28,.45);opacity:0;transition:opacity .2s;}
.on > .tzh-scrim{opacity:1;}
.tzh-menu-wrap.is-drawer .tzh-menu{position:absolute;left:0;top:0;bottom:0;width:min(318px,86vw);display:flex;flex-direction:column;
  background:var(--parchment);color:var(--ink);box-shadow:6px 0 24px rgba(23,25,28,.25);
  transform:translateX(-102%);transition:transform .22s cubic-bezier(.4,0,.2,1);}
.tzh-menu-wrap.is-drawer.on .tzh-menu{transform:none;}
.tzh-menu-wrap.is-drawer .tzh-mh{background:var(--chrome);color:var(--on-ink);padding:10px 12px 14px 16px;
  padding-top:max(10px, env(safe-area-inset-top));}
.tzh-mh-top{display:flex;align-items:center;justify-content:space-between;}
.tzh-mh-brand{font-weight:600;font-size:16px;letter-spacing:.02em;}
.tzh-mh-name{font-size:14px;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tzh-mh-sub{font-size:12px;opacity:.75;display:flex;align-items:center;gap:6px;margin-top:2px;}
.tzh-menu-wrap.is-pop .tzh-mh-sub{opacity:1;color:var(--ink3);}
.tzh-mh-act{margin-top:8px;height:36px;padding:0 12px;border-radius:8px;border:1px solid currentColor;background:transparent;
  color:inherit;font:500 13px var(--ui-font);cursor:pointer;}
.tzh-x{width:40px;height:40px;border:none;border-radius:8px;background:transparent;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;}
.tzh-x:hover{background:rgba(255,255,255,.1);}
.tzh-mbody{flex:1 1 auto;overflow:auto;padding:6px;display:flex;flex-direction:column;}
.tzh-mi{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;
  border-radius:8px;font-size:15px;cursor:pointer;color:var(--ink);}
.tzh-menu-wrap.is-pop .tzh-mi{min-height:40px;font-size:14px;}
.tzh-mi:hover,.tzh-mi:focus-visible{background:var(--parchment3);}
.tzh-mi:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.tzh-mi .tzh-ic{flex:none;color:var(--ink2);}
.tzh-mi-l{flex:1 1 auto;}
.tzh-kbd{font:400 12px 'IBM Plex Mono',monospace;color:var(--ink3);background:none;border:none;}
.tzh-sep-h{height:1px;background:var(--border);margin:6px 10px;}
.tzh-mlabel{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink3);padding:6px 12px 2px;text-transform:uppercase;}
.tzh-mrow{display:flex;align-items:center;gap:8px;padding:4px 12px;min-height:48px;font-size:14px;}
.tzh-mrow > span:first-child{flex:1 1 auto;}
.tzh-step{min-width:44px;height:40px;border:1px solid var(--border2);border-radius:8px;background:var(--surface,#fff);color:var(--ink);
  font:500 18px var(--ui-font);cursor:pointer;}
.tzh-step-w{font-size:13px;padding:0 10px;}
.tzh-step:hover{background:var(--parchment2);}
.tzh-speed{font:500 14px 'IBM Plex Mono',monospace;min-width:40px;text-align:center;}
.tzh-mfoot{border-top:1px solid var(--border);padding:6px;display:flex;gap:4px;
  padding-bottom:max(6px, env(safe-area-inset-bottom));}
.tzh-mf{flex:1 1 0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;
  background:transparent;border-radius:8px;font:500 14px var(--ui-font);color:var(--ink2);text-decoration:none;cursor:pointer;}
.tzh-mf:hover{background:var(--parchment3);color:var(--ink);}

/* ── Go to sheet ── */
.tzh-goto-wrap{position:fixed;inset:0;z-index:1200;pointer-events:none;}
.tzh-goto-wrap.on{pointer-events:auto;}
.tzh-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:var(--parchment);color:var(--ink);
  border-radius:16px 16px 0 0;padding:8px 16px 18px;padding-bottom:max(18px, env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;box-shadow:0 -6px 24px rgba(23,25,28,.22);
  transform:translateY(102%);transition:transform .22s cubic-bezier(.4,0,.2,1);max-width:560px;margin:0 auto;}
.tzh-goto-wrap.on .tzh-sheet{transform:none;}
.tzh-grab{width:40px;height:4px;border-radius:999px;background:var(--parchment3);align-self:center;}
.tzh-sheet-head{display:flex;align-items:center;justify-content:space-between;}
.tzh-sheet-head h2{margin:0;font-size:18px;font-weight:600;}
.tzh-x-light{border:1px solid var(--border2);background:var(--surface,#fff);}
.tzh-x-light:hover{background:var(--parchment2);}
.tzh-f{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;}
.tzh-f2{display:grid;grid-template-columns:1fr 96px;gap:10px;}
.tzh-f select,.tzh-f input{height:46px;box-sizing:border-box;padding:0 10px;border:1px solid var(--border2);border-radius:8px;
  background:var(--surface,#fff);color:var(--ink);font:400 16px var(--ui-font);text-transform:none;letter-spacing:0;min-width:0;width:100%;}
.tzh-f input{font-family:'IBM Plex Mono',monospace;font-weight:500;}
.tzh-pager{display:flex;gap:8px;align-items:center;}
/* Surah search in the Go to sheet (h2) */
.tzh-sp{display:flex;flex-direction:column;gap:6px;text-transform:none;letter-spacing:0;}
.tzh-sp-list{max-height:min(260px,38vh);overflow:auto;background:var(--surface,#fff);border:1px solid var(--border2);border-radius:8px;
  padding:4px;display:flex;flex-direction:column;}
.tzh-sp-list[hidden]{display:none;}
.tzh-sp-opt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:6px;
  cursor:pointer;color:var(--ink);font:400 15px var(--ui-font);}
.tzh-sp-opt.hi,.tzh-sp-opt:hover{background:var(--gold-pale);}
.tzh-sp-n{font:500 12px 'IBM Plex Mono',monospace;color:var(--ink3);min-width:26px;}
.tzh-sp-name{flex:1 1 auto;}
.tzh-sp-v{font:400 12px 'IBM Plex Mono',monospace;color:var(--ink3);}
.tzh-sp-empty{padding:10px;color:var(--ink3);font-size:14px;}
.tzh-pager input{text-align:center;flex:1 1 auto;}
.tzh-pg{width:52px;height:46px;flex:none;border:1px solid var(--border2);border-radius:8px;background:var(--surface,#fff);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.tzh-chips{display:flex;gap:8px;flex-wrap:wrap;}
.tzh-chip{height:40px;padding:0 12px;border:1px solid var(--border2);border-radius:999px;background:var(--surface,#fff);color:var(--ink);
  font:500 13px var(--ui-font);cursor:pointer;text-transform:none;letter-spacing:0;}
.tzh-go{height:50px;border:none;border-radius:10px;background:var(--gold);color:var(--on-gold);font:600 16px var(--ui-font);cursor:pointer;}
@media (prefers-reduced-motion:reduce){
  .tzh-menu,.tzh-sheet,.tzh-scrim{transition:none!important;}
}

/* ═══ MUSHAF PAGE STYLE — Islimi (default) / Quiet ══════════════════════
   Chosen in Settings → Display (TehfizPageStyle) and set as
   <html data-tz-page="islimi|quiet"> by tehfiz-shared.js before first paint.
   Every rule is prefixed :root[data-tz-page…] so it outranks each app's own
   mushaf rules, which load later; the apps' rules remain the fallback.

   Islimi is an arabesque illumination drawn by tehfiz-ornament.js as one
   shared SVG sprite: each page carries a <svg class="tzo-frame"> (border),
   surah titles a <svg class="tzo-cart"> (cartouche), and pages 1–2 a
   <svg class="tzo-shamsa"> (sunburst medallion). Quiet is drawn in CSS.

   Every colour comes from the frame tokens below, set per theme and per
   light/dark mode:
     --frame       lines, buds, rules
     --frame-tint  leaves, beads, petals
     --frame-mid   dots, rays, inner petals (frame mixed with the page)
     --frame-ink   running heads and marker text
   Sizes inside the page body are in em of the body's font size, which the
   zoom code sets, so the frame scales with the text at every zoom.
   Phones (body.compact-ui) get a thin double rule instead of the border. */
:root{
  --frame:#4a5058;--frame-tint:#eceef1;--frame-ink:#3f444b;
  --frame-mid:color-mix(in srgb,var(--frame) 45%,var(--parchment));
  --tz-star-solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3L24.98 7.98L32.02 7.98L32.02 15.02L37 20L32.02 24.98L32.02 32.02L24.98 32.02L20 37L15.02 32.02L7.98 32.02L7.98 24.98L3 20L7.98 15.02L7.98 7.98L15.02 7.98Z'/%3E%3C/svg%3E");
}
:root[data-tz-theme="lapis"]{--frame:#3a5585;--frame-tint:#e9edf3;--frame-ink:#33476b;}
:root[data-tz-theme="mulberry"]{--frame:#6a3f5c;--frame-tint:#f2eaef;--frame-ink:#583550;}
:root[data-tz-theme="classic"]{--frame:#9c7424;--frame-tint:#f5eedd;--frame-ink:#6e5212;}

/* Ornament paint (the sprite's classes) */
.tzo-ground,.tzo-paper,.tzo-paperfill{fill:var(--parchment);}
.tzo-fill{fill:var(--frame-tint);}
.tzo-thin{stroke:var(--frame);stroke-width:.8;stroke-linejoin:round;}
.tzo-solid{fill:var(--frame);}
.tzo-dot,.tzo-mid-fill,.tzo-midfill{fill:var(--frame-mid);}
.tzo-strap{fill:none;stroke:var(--frame);stroke-linejoin:round;stroke-linecap:round;}
.tzo-core{fill:none;stroke:var(--parchment);stroke-linejoin:round;stroke-linecap:round;}
.tzo-butt{stroke-linecap:butt;}
.tzo-bead{fill:var(--frame-tint);stroke:var(--frame);stroke-width:5;}
.tzo-leaf{fill:var(--frame-tint);stroke:var(--frame);stroke-linejoin:round;}
.tzo-rule{fill:none;stroke:var(--frame);}
.tzo-plaque{fill:var(--parchment);stroke:var(--frame);stroke-width:1.2;}
.tzo-ray{fill:none;stroke:var(--frame-mid);stroke-width:1.1;stroke-linecap:round;}
.tzo-frame,.tzo-cart,.tzo-shamsa{display:none;}

/* ── Both styles ── */
:root[data-tz-page] .mushaf-page{border:none;border-radius:1px;background:var(--parchment);
  box-shadow:0 2px 14px rgba(0,0,0,.09),0 0 0 1px rgba(127,127,127,.08);}
:root[data-tz-page] .mushaf-page-header{background:transparent;border-bottom:none;align-items:flex-end;
  padding:calc(var(--mz-header-pad-v,7px) * 1.6) calc(var(--mz-header-pad-h,18px) * 1.2) 2px;}
:root[data-tz-page] .mph-juz{font-family:var(--ui-font);text-transform:none;letter-spacing:0;color:var(--frame-ink);
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
:root[data-tz-page] .mph-ar{font-family:'Scheherazade New','Amiri',serif;font-size:var(--mz-header-surah-font,13px);
  font-weight:600;line-height:1.15;color:var(--frame-ink);}
:root[data-tz-page] .mph-en,
:root[data-tz-page] .mph-surah-en{direction:ltr;unicode-bidi:isolate;font-family:var(--ui-font);font-size:var(--mz-header-surahen-font,9px);font-weight:400;
  color:var(--ink3);letter-spacing:.05em;text-transform:uppercase;line-height:1.3;}
:root[data-tz-page] .mph-surah{order:3;flex:none;text-align:right;font-weight:600;line-height:1.15;color:var(--frame-ink);}
:root[data-tz-page] .mph-right{order:2;flex:1;min-width:0;}

:root[data-tz-page] .mushaf-page-body{position:relative;isolation:isolate;border-radius:0;background:var(--parchment);box-shadow:none;}
:root[data-tz-page] .msl-surah-name{color:var(--ink);}
:root[data-tz-page] .qcf-ruku-ain{color:var(--frame);}

/* Hizb and ruku discs in the margin */
:root[data-tz-page] .msl-hizb{background:var(--parchment);color:var(--frame-ink);border:1.5px solid var(--frame);
  box-shadow:0 0 0 2px var(--parchment),0 0 0 3px color-mix(in srgb,var(--frame) 45%,transparent);}
:root[data-tz-page] .msl-hizb.hizb-full{background:var(--frame-tint);color:var(--frame-ink);}
:root[data-tz-page] .msl-hizb.hizb-half,
:root[data-tz-page] .msl-hizb.hizb-quarter{background:var(--parchment);color:var(--frame-ink);border-color:var(--frame);}

/* Footer: progress either side, page number in the middle */
:root[data-tz-page] .mushaf-page-footer{background:transparent;border-top:none;align-items:center;}
:root[data-tz-page] .mpf-ornament{visibility:hidden;flex:1;}
:root[data-tz-page] .mpf-divider{display:none;}
:root[data-tz-page] .mpf-prog{background:transparent;color:var(--ink3);}
:root[data-tz-page] .mpf-num{position:relative;isolation:isolate;color:var(--ink);letter-spacing:0;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;}
:root[data-tz-page] .mpf-num.ar{font-family:'Scheherazade New','Amiri',serif;font-size:calc(var(--mz-footer-num-font,11px) * 1.3);}

/* Pages 1–2: the text sits in a medallion (Islimi) or an arch (Quiet) */
:root[data-tz-page] .msl-opening{position:relative;align-self:center;flex-shrink:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;box-sizing:border-box;}
:root[data-tz-page] .msl-opening .msl{width:auto;justify-content:center;gap:.3em;position:static!important;}
:root[data-tz-page] .msl-buffer{flex-shrink:0;}

/* ── Islimi ── */
:root[data-tz-page="islimi"] body:not(.compact-ui) .mushaf-page-body{border:none;
  padding:1.75em!important;}
:root[data-tz-page="islimi"] body:not(.compact-ui) .tzo-frame{display:block;position:absolute;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;overflow:visible;}

:root[data-tz-page="islimi"] .msl-surah-header{min-height:1.9em;}
:root[data-tz-page="islimi"] .msl-surah-ornament{position:relative;border:none;background:none;box-shadow:none;
  padding:0;height:1.77em;display:flex;align-items:center;justify-content:center;}
:root[data-tz-page="islimi"] .msl-surah-ornament::before,
:root[data-tz-page="islimi"] .msl-surah-ornament::after{content:none;}
:root[data-tz-page="islimi"] .tzo-cart{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
:root[data-tz-page="islimi"] .msl-surah-name{position:relative;z-index:1;font-size:.7em;line-height:1;background:none;border:none;padding:0 0 .12em;}

:root[data-tz-page="islimi"] .mpf-num{width:var(--mz-footer-height,32px);height:var(--mz-footer-height,32px);padding:0;margin:0 auto;}
:root[data-tz-page="islimi"] .mpf-num::before,
:root[data-tz-page="islimi"] .mpf-num::after{content:'';position:absolute;z-index:-1;
  -webkit-mask:var(--tz-star-solid) center/contain no-repeat;mask:var(--tz-star-solid) center/contain no-repeat;}
:root[data-tz-page="islimi"] .mpf-num::before{inset:-12%;background:var(--frame);}
:root[data-tz-page="islimi"] .mpf-num::after{inset:-3%;background:var(--parchment);}

:root[data-tz-page="islimi"] .msl-opening{width:15.8em;height:15.8em;margin:2.6em 0 2.4em;border-radius:50%;z-index:0;}
/* The opening text is set a little smaller and tighter so all seven lines sit
   inside the medallion's disc, the way the printed opening pages do. */
:root[data-tz-page="islimi"] .msl-opening .msl{font-size:.88em;height:2.2em;}
:root[data-tz-page="islimi"] .tzo-shamsa{display:block;position:absolute;left:50%;top:50%;width:21.85em;height:21.85em;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;overflow:visible;}
/* The shamsa fills the width, so the opening page's hizb and ruku markers go
   in the empty top corners of its square rather than out to the sides. */
:root[data-tz-page="islimi"] .msl-opening .msl-hizb{left:-.4em!important;right:auto!important;top:-.4em!important;transform:none!important;}
:root[data-tz-page="islimi"] .msl-opening .msl-hizb.msl-ruku{left:auto!important;right:-.4em!important;}

/* Islimi on phones: a thin double rule, as Quiet draws it */
:root[data-tz-page="islimi"] body.compact-ui .mushaf-page-body{--band:.16em;border:1.5px solid var(--frame);
  padding-top:calc(var(--band) + .5em)!important;padding-bottom:calc(var(--band) + .45em)!important;}
:root[data-tz-page="islimi"] body.compact-ui .mushaf-page-body::before{content:'';position:absolute;inset:var(--band);z-index:-1;
  pointer-events:none;background:var(--parchment);border:1px solid color-mix(in srgb,var(--frame) 40%,transparent);}

/* ── Quiet ── */
:root[data-tz-page="quiet"] .mushaf-page-body{--band:.2em;--star:.7em;border:1.5px solid var(--frame);
  padding-top:calc(var(--band) + .5em)!important;padding-bottom:calc(var(--band) + .45em)!important;}
body.compact-ui .mushaf-page-body{--band:.16em!important;}
:root[data-tz-page="quiet"] .mushaf-page-body::before{content:'';position:absolute;inset:var(--band);z-index:-1;
  pointer-events:none;background:var(--parchment);border:1px solid color-mix(in srgb,var(--frame) 40%,transparent);}
:root[data-tz-page="quiet"] .mushaf-page-body::after{content:'';position:absolute;inset:-.37em;z-index:-1;pointer-events:none;
  background:var(--frame);
  -webkit-mask:var(--tz-star-solid) top left/var(--star) no-repeat,var(--tz-star-solid) top right/var(--star) no-repeat,
               var(--tz-star-solid) bottom left/var(--star) no-repeat,var(--tz-star-solid) bottom right/var(--star) no-repeat;
          mask:var(--tz-star-solid) top left/var(--star) no-repeat,var(--tz-star-solid) top right/var(--star) no-repeat,
               var(--tz-star-solid) bottom left/var(--star) no-repeat,var(--tz-star-solid) bottom right/var(--star) no-repeat;}

:root[data-tz-page="quiet"] .msl-surah-ornament{border:none;border-radius:999px;background:var(--frame-tint);
  padding:.14em 1.4em;box-shadow:none;}
:root[data-tz-page="quiet"] .msl-surah-ornament::before,
:root[data-tz-page="quiet"] .msl-surah-ornament::after{width:22%;height:1px;border:none;border-radius:0;
  background:color-mix(in srgb,var(--frame) 45%,transparent);}
:root[data-tz-page="quiet"] .msl-surah-ornament::before{right:.9em;}
:root[data-tz-page="quiet"] .msl-surah-ornament::after{left:.9em;}

:root[data-tz-page="quiet"] .mpf-num{font-family:var(--ui-font);gap:8px;}
:root[data-tz-page="quiet"] .mpf-num::before,
:root[data-tz-page="quiet"] .mpf-num::after{content:'';width:5px;height:5px;flex:none;transform:rotate(45deg);
  border:1px solid var(--frame);}

:root[data-tz-page="quiet"] .msl-opening{width:18.5em;padding:4.6em 0 1.1em;margin:.6em 0 .4em;
  border-radius:9.25em 9.25em .45em .45em;background:var(--frame-tint);border:.06em solid var(--frame);
  box-shadow:inset 0 0 0 .22em var(--parchment),inset 0 0 0 .26em color-mix(in srgb,var(--frame) 40%,transparent);}
:root[data-tz-page="quiet"] .msl-opening .msl-hizb{left:auto!important;right:calc(100% + .55em)!important;}
:root[data-tz-page="quiet"] .msl-opening .msl-hizb.msl-ruku{right:auto!important;left:calc(100% + .55em)!important;}

/* Settings → Display: the page-style picker reuses .tz-theme-opt */
.tz-page-sw{flex:none;width:22px;height:26px;box-sizing:border-box;border-radius:1px;background:var(--parchment);}
.tz-page-sw.islimi{border:1.5px solid var(--frame);box-shadow:inset 0 0 0 3px var(--frame-tint),inset 0 0 0 4px var(--frame);}
.tz-page-sw.quiet{border:1px solid var(--frame);box-shadow:inset 0 0 0 2px var(--parchment),inset 0 0 0 3px color-mix(in srgb,var(--frame) 40%,transparent);}

/* ═══ DARK MODE ═════════════════════════════════════════════════════════
   Settings → Display → Appearance (TehfizMode) sets <html data-tz-mode="dark">;
   'Device' follows the system setting. Light is the default.
   Every colour in both apps comes from tokens, so dark mode is these blocks
   alone: neutrals and the semantic colours first, then each theme's accent.
   Selectors are :root[data-tz-mode] (two parts), so they outrank both the
   theme blocks above and each app's own :root tokens, which load later.
   Semantic colours (mistake levels, types, status) keep their hue; text
   versions get lighter and the -bg versions become dark tints. */
:root[data-tz-mode="dark"]{
  color-scheme:dark;
  --ink:#e7e5df;--ink2:#c4c1b9;--ink3:#9c9890;
  --parchment:#1a1b1e;--parchment2:#222428;--parchment3:#2e3035;
  --chrome:#0e0f11;--chrome-2:#1b1d21;--chrome-3:#272a2f;--chrome-input:#08090a;--on-ink:#e8e9ea;
  --border:rgba(231,229,223,0.12);--border2:rgba(231,229,223,0.24);
  --gold:#e7e5df;--on-gold:#17191c;--gold-ink:#e7e5df;--gold-light:#34373c;--gold-pale:#26282c;
  --chrome-accent:#e8e9ea;--chrome-rule:#2a2d32;--ornament:#6b7078;
  --frame:#a3a8b0;--frame-tint:#25282d;--frame-ink:#c4c1b9;
  /* Mid tones: readable as text on the dark page AND as fills under white
     text, since the apps use each semantic colour both ways. */
  --surface:#232529;
  --tajweed:#3a95b3;--tajweed-bg:#16323b;
  --slate:#7d8aa0;--slate-bg:#262b33;
  --green:#3f9a68;--green-bg:#16301f;
  --lvl1-yellow:#c9a227;--lvl1-yellow-bg:#3a3214;--lvl1-ink:#e8c860;
  --lvl2-orange:#d06a20;--lvl2-orange-bg:#3e2512;
  --amber:#c08a2c;--amber-bg:#3a2d12;
  --red:#d05a5a;--red-bg:#3d1c1c;
  --teal:#2f9aa3;--teal-bg:#123236;
  --purple:#8c7ad8;--purple-bg:#29233f;
  --coral:#d0744a;--coral-bg:#3d2318;
  --spot-blue:#4d82c8;--spot-blue-bg:#1a2a40;
  --shadow-lg:0 8px 32px rgba(0,0,0,0.5);
}
:root[data-tz-mode="dark"][data-tz-theme="lapis"]{
  --gold:#8ea2c8;--on-gold:#10141c;--gold-ink:#a9bbdd;--gold-light:#26324a;
  --chrome-accent:#a9bbdd;--chrome-rule:#3a5585;--ornament:#8ea2c8;
  --frame:#8ea2c8;--frame-tint:#1f2633;--frame-ink:#a9bbdd;}
:root[data-tz-mode="dark"][data-tz-theme="mulberry"]{
  --gold:#c49bb6;--on-gold:#1c1219;--gold-ink:#d4b0c8;--gold-light:#3a2834;
  --chrome-accent:#d4b0c8;--chrome-rule:#6a3f5c;--ornament:#c49bb6;
  --frame:#c49bb6;--frame-tint:#2d2229;--frame-ink:#d4b0c8;}
:root[data-tz-mode="dark"][data-tz-theme="classic"]{
  --gold:#c9a35b;--on-gold:#17191c;--gold-ink:#d4b06a;--gold-light:#3a3020;
  --chrome-accent:#d4b06a;--chrome-rule:#9c7424;--ornament:#c9a35b;
  --frame:#c9a35b;--frame-tint:#2b251a;--frame-ink:#d4b06a;
  --parchment:#1c1a16;}
:root[data-tz-mode="dark"] img.tz-invert-dark{filter:invert(1) hue-rotate(180deg);}
/* Settings → Display: the appearance picker (Light / Dark / Device) */
.tz-mode-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.tz-mode-sw{flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.45);}
.tz-mode-sw.light{background:#f5f5f3;}
.tz-mode-sw.dark{background:#1a1b1e;}
.tz-mode-sw.device{background:linear-gradient(135deg,#f5f5f3 50%,#1a1b1e 50%);}