/* ===== Mushaf reader — styles ===== */
/* Theme tokens. The reader is always light (no dark mode, whatever the device asks for). */
:root{
  color-scheme:light;
  --bg:#F2F8FC; --bg-panel:#FBFDFE; --ink:#24262B; --ink-soft:#5B6672;
  --teal:#B85C38; --teal-deep:#6B3420; --teal-tint:#EFE1D3; --gold:#A67C3D; --gold-soft:#C9A268;
  --border:#C3D8E3; --border-soft:#DCE9F0; --radius:6px;
  --red-soft:#A23B32; --pill-learned-bg:#DCEEE1; --pill-learned-ink:#2E6B47;
  /* known = green fill + solid underline; same root = paler blue fill + dashed underline, so the two
     differ by pattern as well as hue. Underlines are >= 3:1 against their fill (WCAG 1.4.11). */
  --mq-known:#2E7D46; --mq-known-bg:#D6F0DE;
  --mq-root:#2D63B8; --mq-root-bg:#E6EFFC;
  --mq-ayah-num:#8A6420;
  --mq-flash:rgba(255,190,30,.62);
  --mq-dash:#7D8790; --mq-sq-learn:#B07A1E; --mq-sq-mem:#3F9E62; --mq-sq-none:#7D8F9B;
  --mq-playing:rgba(201,162,104,.30); --mq-playing-line:#C9A268; --mq-ok:#2E7D46; --mq-miss-bg:#FCE7C3; --mq-miss:#9A6F1C;
  --mq-tip-bg:#6B3420; --mq-tip-ink:#FBEFE2;
  --mq-on-accent:#FFFFFF;
  --mq-shadow:rgba(36,38,43,.12);
  --arc-0:#B85C38; --arc-1:#2D63B8; --arc-2:#7A4FA3; --arc-3:#2E7D46; --arc-4:#9A6F1C; --arc-5:#C0447A;
  /* the tajweed colour key (Quran.com's eight colours). The three light ones are darkened only as far as needed to reach
     3:1 against the page, the known-word fill and the same-root fill (the Arabic is large text); the hues are kept. */
  --tw-grey:#868686; --tw-gold:#A57F00; --tw-orange:#D46600; --tw-red:#F40000; --tw-darkred:#B50000;
  --tw-green:#089C00; --tw-lightblue:#008AE4; --tw-darkblue:#3F48E6;
}
:root[data-theme="light"]{color-scheme:light;}
/* the page itself must carry the theme: without this the canvas stayed white and every
   line of Arabic (which just inherits) was the browser's default black on a dark panel */
html{background:var(--bg);}
body{margin:0; background:var(--bg); color:var(--ink);}
/* the off-screen slide-in panels (position:fixed + transform) can otherwise
   make Chromium report a wider document.scrollWidth than the viewport,
   producing a phantom horizontal scrollbar on phones */
html, body{overflow-x:clip;}   /* clip, not hidden: hidden would stop the site's top bar and the reader bar from sticking */
.mq-wrap{max-width:min(1760px,97vw); margin:0 auto; padding:22px 16px 70px;}
.mq-hero{text-align:center; padding:6px 0 18px;}
.mq-hero .en{font-family:'Karla',sans-serif; font-size:14px; font-weight:400; line-height:1.4; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 6px;}
.mq-hero .ar{font-size:34px; color:var(--teal-deep); font-family:'Amiri Quran','Amiri',serif; direction:rtl;}

/* ---------- Toolbar ---------- */
.mq-toolbar{background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; font-family:'Karla',sans-serif; font-size:15px;}
.mq-field{display:flex; align-items:center; gap:7px;}
.mq-field label{color:var(--ink-soft); white-space:nowrap;}
.mq-field select, .mq-field input[type=number]{font-family:'Karla',sans-serif; font-size:15px; background:var(--bg); color:var(--ink); border:1px solid var(--border); border-radius:4px; padding:7px 9px;}
.mq-field input[type=number]{width:70px;}
.mq-nav-btn{font-family:'Karla',sans-serif; font-size:14.5px; background:var(--bg); color:var(--ink); border:1px solid var(--border); border-radius:4px; padding:8px 15px; cursor:pointer;}
.mq-nav-btn:hover{border-color:var(--teal);}
.mq-page-label{font-weight:600; color:var(--teal-deep); min-width:96px; text-align:center;}
.mq-spacer{flex:1 1 auto;}
.mq-know-field{display:flex; align-items:center; gap:8px; background:var(--teal-tint); border-radius:20px; padding:6px 14px;}
.mq-know-field label{color:var(--teal-deep); font-weight:600;}
.mq-know-chapter-name{color:var(--ink-soft); font-size:12px; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:640px){ .mq-know-field{flex-wrap:wrap; border-radius:16px; row-gap:2px;} .mq-know-chapter-name{max-width:none; flex:1 1 100%; white-space:normal;} }
.mq-nav-btn:disabled{opacity:.4; cursor:default;}
.mq-nav-btn:disabled:hover{border-color:var(--border);}

/* the reading options: a fold-away "Reading options" line at every width (folded at first, then as the reader left
   it), on the toolbar's row while folded and a full row of its own when open; the colour key is inside */
.mq-settings{flex:1 1 100%;}
.mq-settings:not([open]){flex:0 1 auto; margin-left:auto;}
.mq-settings > summary{display:block; cursor:pointer; font-weight:600; color:var(--teal-deep); list-style:none; padding:4px 0;}
.mq-settings > summary::before{content:'▸ '; display:inline-block; width:1em;}
.mq-settings[open] > summary::before{content:'▾ ';}
.mq-settings[open] > summary{margin-bottom:10px;}
.mq-settings-body .mq-legend{order:9; flex:1 1 100%; margin:0; padding:10px 0 0; border-top:1px solid var(--border-soft);}   /* last, after the switches mushaf-modes.js adds */
.mq-settings > summary::-webkit-details-marker{display:none;}
.mq-settings-body{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center;}

.mq-hints{font-family:'Karla',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:0 0 10px; padding:0 4px;}
.mq-hints .mq-hint{display:block;}
.mq-hints .mq-hint-touch{display:none;}
.mq-hint b{color:var(--ink); font-weight:700;}
/* phones and tablets: a finger can't hover or right-click, so the hint (and the hover switch) change */
@media (hover:none) and (pointer:coarse){
  .mq-hints .mq-hint-mouse{display:none;}
  .mq-hints .mq-hint-touch{display:block;}
  .mq-hover-row{display:none;}
  .mq-word{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
}


.mq-bottom-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin:18px 0 0; font-family:'Karla',sans-serif;}
.mq-bottom-nav .mq-nav-btn{min-width:110px; padding:12px 18px; font-size:16px;}

/* ---------- Legend (the colour key, just above the page) ---------- */
.mq-legend{display:flex; gap:8px 18px; flex-wrap:wrap; align-items:center; font-family:'Karla',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; padding:0 4px;}
.mq-legend > span{display:inline-flex; align-items:center; gap:7px;}
.mq-legend b{color:var(--ink); font-weight:700;}
.mq-legend .mq-key-title{font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.06em; font-size:11px;}
/* each swatch is drawn exactly like a highlighted word */
.mq-legend i{width:22px; height:15px; border-radius:4px; display:inline-block; flex:none;}
.mq-legend .known i{background:var(--mq-known-bg); box-shadow:inset 0 -3px 0 var(--mq-known);}
.mq-legend .root i{background-color:var(--mq-root-bg); background-image:repeating-linear-gradient(90deg, var(--mq-root) 0 4px, transparent 4px 7px); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%;}
.mq-legend .plain i{background:var(--bg-panel); box-shadow:inset 0 0 0 1px var(--border);}

/* ---------- First-visit preview bar ("Show the words a student knows after …") ---------- */
.mq-intro{position:relative; margin:0 0 12px; padding:12px 44px 12px 16px; background:var(--bg-panel); border:1px solid var(--border-soft); border-left:4px solid var(--mq-known); border-radius:var(--radius); font-family:'Karla',sans-serif; font-size:14px; color:var(--ink);}
.mq-intro[hidden]{display:none;}
.mq-intro-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.mq-intro-label{font-weight:700; color:var(--ink);}
/* the intro's level control is .mq-segctl, never .mq-seg: .mq-seg is a word piece's colour only (a box on it broke the letters apart) */
.mq-segctl{display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:3px;}
.mq-segctl button{font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-soft); background:none; border:none; border-radius:16px; padding:5px 12px; cursor:pointer;}
.mq-segctl button:hover{color:var(--ink); background:var(--teal-tint);}
.mq-segctl button[aria-pressed="true"]{background:var(--mq-known); color:var(--mq-on-accent);}
.mq-segctl button:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}
.mq-intro-cov{margin:8px 0 0; color:var(--ink-soft); line-height:1.5;}
.mq-cta{display:flex; align-items:flex-start; gap:10px; margin:8px 0 0; padding-top:8px; border-top:1px solid var(--border-soft); color:var(--ink); line-height:1.5;}
.mq-cta[hidden]{display:none;}
.mq-cta span{flex:1 1 auto;}
.mq-cta a{color:var(--teal-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
.mq-cta a:hover{color:var(--teal);}
.mq-intro-x{position:absolute; top:6px; right:6px; width:32px; height:32px; border:none; background:none; color:var(--ink-soft); font-size:20px; line-height:1; border-radius:50%; cursor:pointer;}
.mq-intro-x:hover{background:var(--teal-tint); color:var(--ink);}

/* ---------- Tajweed toggle + legend ---------- */
.mq-tw-field{display:flex; align-items:center; gap:8px;}
.mq-tw-legend{display:none; font-family:'Karla',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:-6px 0 14px; padding:8px 12px; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius);}
.mq-tw-legend.mq-on{display:block;}
.mq-tw-chips{display:flex; gap:6px 16px; flex-wrap:wrap; align-items:center;}
.mq-tw-chip{display:inline-flex; align-items:center; gap:6px;}
.mq-tw-dot{width:11px; height:11px; border-radius:50%; display:inline-block; flex:none;}
.mq-tw-bg-grey{background:var(--tw-grey);} .mq-tw-bg-gold{background:var(--tw-gold);} .mq-tw-bg-orange{background:var(--tw-orange);}
.mq-tw-bg-red{background:var(--tw-red);} .mq-tw-bg-darkred{background:var(--tw-darkred);} .mq-tw-bg-green{background:var(--tw-green);}
.mq-tw-bg-lightblue{background:var(--tw-lightblue);} .mq-tw-bg-darkblue{background:var(--tw-darkblue);}
.mq-tw-help{margin-top:6px;}
.mq-tw-help > summary{cursor:pointer; color:var(--teal-deep); font-weight:700; padding:6px 0; min-height:28px;}
.mq-tw-help p{margin:6px 0; line-height:1.5;}
.mq-tw-help-list{list-style:none; margin:6px 0; padding:0; display:grid; gap:5px;}
.mq-tw-help-list li{display:flex; align-items:flex-start; gap:8px;}
.mq-tw-help-list .mq-tw-dot{margin-top:4px;}
.mq-tw-credit{font-size:11.5px; color:var(--ink-soft);}
/* Arabic inside the English of the help and the word panel (mushaf-tajweed.js arHTML): the reader's Arabic font (line-height 0,
   so its tall ascent doesn't open up the English lines), and a mark with no letter under it (ٰ, a tanwīn, the stop signs)
   drawn on a tatweel, as the mushaf writes ـٰ. Not on a dotted circle ◌: Google Fonts serves Amiri Quran without U+25CC,
   and the circle then comes from another font that doesn't place the marks (they float off it). */
.mq-tw-ar{font-family:'Amiri Quran','Amiri',serif; font-size:1.2em; line-height:0;}
.mq-tw-bare{margin:0 .1em;}
.mq-tw-sign{line-height:1.8;}   /* a stop sign sits high above its letter: room for it above the line */
.mq-tw-bare::before{content:'\0640';}
/* the coloured stretches inside a word (classes, never inline colours, so Memorise can grey them all) */
.mq-tw-grey{color:var(--tw-grey);} .mq-tw-gold{color:var(--tw-gold);} .mq-tw-orange{color:var(--tw-orange);}
.mq-tw-red{color:var(--tw-red);} .mq-tw-darkred{color:var(--tw-darkred);} .mq-tw-green{color:var(--tw-green);}
.mq-tw-lightblue{color:var(--tw-lightblue);} .mq-tw-darkblue{color:var(--tw-darkblue);}
/* a stretch that is a mark on a tatweel (ـٰ ـٰٓ ـۧ: mushaf-tajweed.js markPieces / segClass). In Amiri Quran the two are
   one glyph, drawn by the mark's stretch: this paints the tatweel's stroke in the ink (a band from 0.06em below the
   baseline to 0.17em above it; the font's ascent is 1.815em, the stroke reaches 0.093em, the mark starts at 0.25em) and
   the mark in the stretch's colour. Only on a stretch with a glyph of its own: a stretch of bare marks has no width, so
   background-clip:text would draw nothing. background-clip:text paints only inside the box, and a maddah over the glyph
   reaches past it, so the box is 0.15em wider each side, the padding cancelled by a negative margin: nothing moves and
   Chromium still shapes the word as one (checked on all 5,787 such words: the glyphs are the same as before). */
.mq-tw-mk{padding:0 .15em; margin:0 -.15em; -webkit-text-fill-color:transparent; background-image:linear-gradient(to bottom, currentColor 1.645em, var(--ink) 1.645em, var(--ink) 1.875em, currentColor 1.875em); -webkit-background-clip:text; background-clip:text;}
body.mq-memorising .mq-tw-mk, .mq-word.mq-h-faded .mq-tw-mk, .mq-word.mq-h-hidden .mq-tw-mk, .mq-word.mq-h-first .mq-tw-mk{-webkit-text-fill-color:currentColor; background:none;}
/* the word panel's "Tajweed in this word" */
.mq-tj{font-family:'Karla',sans-serif;}   /* the English; its Arabic is in .mq-tj-ar, .mq-tj-letters and .mq-tw-ar */
.mq-tj-word{font-family:'Amiri Quran','Amiri',serif; font-size:44px; line-height:1.7; text-align:center; margin:4px 0 8px;}
.mq-tj-row{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border-soft);}
.mq-tj-row .mq-tw-dot{margin-top:5px;}
.mq-tj-body{min-width:0;}
.mq-tj-name{font-weight:700; color:var(--ink);}
.mq-tj-ar{font-family:'Amiri Quran','Amiri',serif; font-weight:400; font-size:18px; margin-left:6px;}
.mq-tj-on{font-size:13px; color:var(--ink-soft);}
.mq-tj-letters{font-family:'Amiri Quran','Amiri',serif; font-size:20px; color:var(--ink);}
.mq-tj-line{font-size:13.5px; line-height:1.5; margin-top:2px;}

/* ---------- Spread ---------- */
.mq-spread{display:flex; direction:rtl; gap:24px; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:12px; min-height:560px;}
.mq-spread.mq-spread-one{max-width:820px; margin:0 auto;}
.mq-leaf{flex:1 1 0; min-width:0; padding:26px 24px; direction:rtl;}
.mq-leaf + .mq-leaf{border-right:1px dashed var(--border);}
.mq-passage{--mq-fs:28px;}
.mq-leaf-empty{display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-family:'Karla',sans-serif; font-size:13px;}
.mq-page-num{text-align:center; font-family:'Karla',sans-serif; font-size:12px; color:var(--ink-soft); margin-top:12px;}
.mq-loading{padding:60px 0; text-align:center; color:var(--ink-soft); font-family:'Karla',sans-serif; font-size:13px;}

.mq-surah-header{text-align:center; font-family:'Amiri Quran','Amiri',serif; font-size:calc(var(--mq-fs) * .85); line-height:1.6; color:var(--teal-deep); background:var(--teal-tint); border-radius:4px; padding:.35em 0; margin:.3em 0 .4em;}
.mq-basmala{text-align:center; font-family:'Amiri Quran','Amiri',serif; font-size:calc(var(--mq-fs) * .92); line-height:calc(var(--mq-fs) * 2.15); color:var(--ink); margin:0;}
/* mushaf mode: mushaf.js sizes the page font (--mq-fs) so the widest line fits, then
   sets each line's font-size and word-spacing so every line runs edge to edge.
   Lines never wrap; rows that are too sparse to stretch just sit right-aligned. */
.mq-line{font-family:'Amiri Quran','Amiri',serif; font-size:var(--mq-fs); line-height:var(--mq-row, calc(var(--mq-fs) * 2.15)); height:var(--mq-row, auto); white-space:nowrap; text-align:start; direction:rtl;}
.mq-line.mq-line-short{text-align:center;}
/* in mushaf mode every row (verse line, surah header, bismillah) is exactly one row high, so rows line up across both pages */
.mq-passage:not(.mq-flow) .mq-surah-header{height:calc(var(--mq-row, 3em) * .84); margin:calc(var(--mq-row, 3em) * .08) 0; padding:0; display:flex; align-items:center; justify-content:center; line-height:1;}
.mq-passage:not(.mq-flow) .mq-basmala{height:var(--mq-row, auto); display:flex; align-items:center; justify-content:center; line-height:1;}

/* flowing mode: ordinary wrapped, justified text at a comfortable reading size */
.mq-passage.mq-flow{--mq-fs:26px; font-family:'Amiri Quran','Amiri',serif; font-size:var(--mq-fs); line-height:2.25; text-align:justify; text-align-last:start;}
.mq-flow .mq-line{display:inline; white-space:normal; font-size:inherit; line-height:inherit; word-spacing:normal !important;}
.mq-flow .mq-surah-header{margin:.5em 0 .3em;}
.mq-flow .mq-basmala{line-height:2.25;}

/* word / ayah tokens (reuses the .q-cr-word / .q-cr-sent hover-tooltip mechanics from shared.css, wired independently in mushaf.js) */
/* every word is a fixed-height pill (not the font's own content box), so highlights line up evenly row after row whatever diacritics a word carries */
.mq-word{position:relative; cursor:pointer; display:inline-block; vertical-align:baseline; border-radius:7px; padding:0 3px;
  height:calc(var(--mq-row, calc(var(--mq-fs) * 2.15)) * .8); line-height:calc(var(--mq-row, calc(var(--mq-fs) * 2.15)) * .8);}
.mq-flow .mq-word{height:calc(var(--mq-fs) * 1.75); line-height:calc(var(--mq-fs) * 1.75);}
.mq-word:focus{outline:none;}
.mq-word:focus-visible{outline:2px solid var(--teal); outline-offset:1px;}   /* an outline never moves the letters */
.mq-word:hover{background:var(--teal-tint);}
.mq-word.mq-known{background:var(--mq-known-bg); box-shadow:inset 0 -3px 0 var(--mq-known);}
.mq-word.mq-root-known{background-color:var(--mq-root-bg); background-image:repeating-linear-gradient(90deg, var(--mq-root) 0 5px, transparent 5px 9px); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%;}
.mq-word.mq-holding{background:var(--teal-tint); box-shadow:0 0 0 2px var(--teal);}
.mq-word.mq-selected{outline:2px solid var(--teal); outline-offset:1px;}
.mq-ayah-wrap{position:relative; cursor:default;}
.mq-passage.mq-sentence-mode .mq-ayah-wrap{cursor:help; border-radius:4px;}
.mq-passage.mq-sentence-mode .mq-ayah-wrap:hover, .mq-passage.mq-sentence-mode .mq-ayah-wrap.mq-tapped{background:var(--teal-tint);}

/* the hover / tap tooltip (one box, placed by mushaf.js inside the window). It lives outside the
   fitted lines, and resets spacing anyway, so the English never picks up the Arabic's stretching. */
.mq-tip{position:fixed; left:0; top:0; z-index:30; box-sizing:border-box; width:max-content; max-width:min(280px, calc(100vw - 16px));
  padding:7px 11px; border-radius:6px; background:var(--mq-tip-bg); color:var(--mq-tip-ink); box-shadow:0 4px 14px var(--mq-shadow);
  font-family:'Karla',sans-serif; font-size:13px; line-height:1.45; font-weight:500; text-align:left; direction:ltr;
  white-space:normal; word-spacing:normal; letter-spacing:normal; overflow-wrap:break-word; hyphens:none;
  pointer-events:none; visibility:hidden; opacity:0; transition:opacity .12s ease;}
.mq-tip.mq-on{visibility:visible; opacity:1;}
.mq-tip.mq-tip-wide{max-width:min(400px, calc(100vw - 16px)); padding:9px 13px; font-size:13.5px; line-height:1.5; font-weight:400;}
.mq-tip-note{display:block; margin-top:3px; font-size:11.5px; font-weight:600; letter-spacing:.02em; opacity:.85;}
.mq-tip::after{content:''; position:absolute; left:var(--mq-tip-x, 50%); top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--mq-tip-bg);}
.mq-tip.mq-below::after{top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--mq-tip-bg);}
.mq-ayah-num{font-family:'Amiri Quran','Amiri',serif; font-size:.62em; color:var(--mq-ayah-num);}

/* POS-colored word segments (used in the click panel + treebank, not the running text) */
.mq-seg{color:var(--pc-light, inherit);}
/* ---------- toggle switch (matches .q-cr-toggle visuals) ---------- */
.mq-toggle-row{display:flex; align-items:center; gap:8px; font-family:'Karla',sans-serif; font-size:12.5px;}
.mq-toggle-label{color:var(--ink-soft); transition:color .15s ease;}
.mq-toggle-label.mq-active{color:var(--teal-deep); font-weight:700;}
.mq-toggle{width:38px; height:22px; border-radius:11px; background:var(--border); border:none; position:relative; cursor:pointer; flex:none;}
.mq-toggle-knob{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--bg-panel); transition:transform .15s ease;}
.mq-toggle[aria-checked="true"]{background:var(--teal-tint);}
.mq-toggle[aria-checked="true"] .mq-toggle-knob{transform:translateX(16px); background:var(--teal);}

/* ---------- Search box ---------- */
.mq-search{max-width:860px; margin:0 auto 16px; font-family:'Karla',sans-serif;}
.mq-search-bar{position:relative; display:flex; align-items:center;}
.mq-search-icon{position:absolute; left:14px; color:var(--ink-soft); pointer-events:none;}
#mq-search-input{width:100%; font:inherit; font-size:17px; color:var(--ink); background:var(--bg-panel); border:1.5px solid var(--border); border-radius:26px; padding:13px 46px 13px 44px; -webkit-appearance:none; appearance:none;}
#mq-search-input::-webkit-search-cancel-button{display:none;}
#mq-search-input::placeholder{color:var(--ink-soft); opacity:.85;}
#mq-search-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint);}
.mq-search-clear{position:absolute; right:8px; width:32px; height:32px; border:none; background:none; color:var(--ink-soft); font-size:24px; line-height:1; cursor:pointer; border-radius:50%;}
.mq-search-clear:hover{background:var(--teal-tint); color:var(--teal-deep);}
.mq-search-try{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; margin-top:9px; font-size:13px; color:var(--ink-soft);}
.mq-search-try[hidden]{display:none;}
.mq-search-try button{font:inherit; font-size:14px; color:var(--teal-deep); background:var(--teal-tint); border:none; border-radius:14px; padding:3px 12px; cursor:pointer;}
.mq-search-try button[lang=ar]{font-family:'Amiri Quran','Amiri',serif; font-size:17px; line-height:1.25; padding:2px 12px;}
.mq-search-try button:hover{background:var(--teal); color:var(--mq-on-accent);}
.mq-search-reopen{display:block; margin:9px auto 0; font:inherit; font-size:13.5px; font-weight:600; color:var(--teal-deep); background:var(--teal-tint); border:none; border-radius:16px; padding:6px 16px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mq-search-reopen[hidden]{display:none;}
.mq-search-reopen:hover{background:var(--teal); color:var(--mq-on-accent);}

.mq-results{margin-top:10px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 6px 22px var(--mq-shadow);}
.mq-results[hidden]{display:none;}
.mq-results-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border-soft); font-size:14px; color:var(--ink-soft);}
.mq-results-head strong{color:var(--teal-deep);}
.mq-results-q{color:var(--ink); font-weight:600;}
.mq-results-msg{color:var(--ink-soft);}
.mq-results-hide{flex:none; font:inherit; font-size:12.5px; color:var(--ink-soft); background:none; border:1px solid var(--border); border-radius:14px; padding:3px 11px; cursor:pointer;}
.mq-results-hide:hover{border-color:var(--teal); color:var(--teal);}
.mq-results-list{list-style:none; margin:0; padding:0; max-height:min(62vh,640px); overflow-y:auto; overscroll-behavior:contain;}
.mq-results-list li + li{border-top:1px solid var(--border-soft);}
.mq-result{display:block; width:100%; text-align:left; font:inherit; color:var(--ink); background:none; border:none; padding:11px 16px 12px; cursor:pointer;}
.mq-result:hover, .mq-result:focus-visible{background:var(--teal-tint); outline:none;}
.mq-result.mq-current{box-shadow:inset 4px 0 0 var(--teal); background:var(--teal-tint);}
.mq-r-ref{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:13px; color:var(--ink-soft); margin-bottom:4px;}
.mq-r-num{font-weight:700; font-size:14px; color:var(--teal); background:var(--teal-tint); border-radius:10px; padding:0 9px;}
.mq-result:hover .mq-r-num, .mq-result.mq-current .mq-r-num{background:var(--bg-panel);}
.mq-r-sur{font-weight:600; color:var(--ink);}
.mq-r-surar{font-family:'Amiri Quran','Amiri',serif; font-size:16px; direction:rtl;}
.mq-r-pg{margin-left:auto; font-size:12px;}
.mq-r-ar{font-family:'Amiri Quran','Amiri',serif; font-size:24px; line-height:1.9; direction:rtl; text-align:right; color:var(--ink);}
.mq-r-title{font-size:26px; color:var(--teal-deep);}
.mq-r-en{font-size:15px; line-height:1.45; color:var(--ink-soft); margin:2px 0;}
.mq-r-ar + .mq-r-en{margin-top:0;}
.mq-r-en + .mq-r-ar{margin-top:4px; font-size:21px;}
.mq-results mark{background:var(--mq-flash); color:inherit; border-radius:3px; padding:0 1px;}
.mq-results-more{display:block; width:calc(100% - 28px); margin:10px 14px 12px; text-align:center;}
.mq-results-more[hidden]{display:none;}
@media (max-width:560px){
  .mq-intro{padding:10px 12px; font-size:13.5px;}
  .mq-segctl{gap:2px;}
  .mq-segctl button{font-size:13px; padding:4px 7px;}
  #mq-search-input{font-size:16px; padding-left:40px;}
  .mq-r-ar{font-size:22px;}
  .mq-results-list{max-height:58vh;}
}

/* ---------- Ayah flash (after opening a search result) ----------
   Gold wash over the whole ayah for ~1.8s, held for the first part, then fading back.
   The words' own backgrounds (known-word green etc.) are painted over while it runs. */
.mq-ayah-wrap.mq-flash{border-radius:6px; animation:mqFlash 1.8s ease-out 1;}
.mq-ayah-wrap.mq-flash .mq-word{animation:mqFlashWord 1.8s ease-out 1;}
@keyframes mqFlash{
  0%{background-color:transparent; box-shadow:0 0 0 0 transparent;}
  10%{background-color:var(--mq-flash); box-shadow:0 0 0 5px var(--mq-flash);}
  62%{background-color:var(--mq-flash); box-shadow:0 0 0 5px var(--mq-flash);}
  100%{background-color:transparent; box-shadow:0 0 0 5px transparent;}
}
@keyframes mqFlashWord{
  0%{background-color:transparent;}
  10%{background-color:var(--mq-flash); box-shadow:none;}
  62%{background-color:var(--mq-flash); box-shadow:none;}
  100%{background-color:transparent;}
}

/* ---------- Side panel (click detail) ---------- */
.mq-panel-backdrop{position:fixed; inset:0; background:rgba(20,27,34,.4); z-index:40; opacity:0; pointer-events:none; transition:opacity .15s ease;}
.mq-panel-backdrop.mq-open{opacity:1; pointer-events:auto;}
.mq-panel{position:fixed; top:0; right:0; bottom:0; width:480px; max-width:92vw; background:var(--bg-panel); border-left:1px solid var(--border); z-index:41; box-shadow:-8px 0 24px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .18s ease; display:flex; flex-direction:column;}
.mq-panel.mq-open{transform:translateX(0);}
.mq-panel.mq-resizing{transition:none;}
.mq-panel-resize-handle{position:absolute; top:0; bottom:0; left:-5px; width:10px; cursor:ew-resize; z-index:2;}
.mq-panel-resize-handle:hover, .mq-panel.mq-resizing .mq-panel-resize-handle{background:var(--teal); opacity:.35;}
.mq-panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border-soft); flex:none;}
.mq-panel-head h3{margin:0; font-family:'Karla',sans-serif; font-size:13px; letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase;}
.mq-panel-close{background:none; border:none; font-size:24px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:2px 8px; border-radius:4px;}
.mq-panel-close:hover{color:var(--ink); background:var(--teal-tint);}
.mq-panel-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:16px 16px calc(16px + env(safe-area-inset-bottom));}
/* wide screens: the page stays clickable beside an open panel, so a click on another word swaps the panel at once */
@media (min-width:1180px){
  .mq-panel-backdrop, .mq-panel-backdrop.mq-open{background:transparent; pointer-events:none;}
}
.mq-panel-word{font-family:'Amiri Quran','Amiri',serif; font-size:36px; text-align:center; direction:rtl; margin-bottom:4px; unicode-bidi:isolate;}
.mq-panel-translit{text-align:center; color:var(--ink-soft); font-family:'Karla',sans-serif; font-size:12.5px; margin-bottom:16px;}
.mq-panel-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); font-family:'Karla',sans-serif; font-size:13px;}
.mq-panel-row .k{color:var(--ink-soft); white-space:nowrap;}
.mq-panel-row .v{text-align:right; direction:rtl; font-family:'Amiri','Karla',serif;}
.mq-panel-row .v .en{font-family:'Karla',sans-serif; direction:ltr; display:inline-block; color:var(--ink);}
.mq-panel-gloss{background:var(--teal-tint); border-radius:5px; padding:10px 12px; font-family:'Lora',serif; font-style:italic; font-size:14px; margin:14px 0;}
.mq-panel-ayah-en{font-family:'Lora',serif; font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-top:6px;}
.mq-panel-section-label{font-family:'Karla',sans-serif; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 6px;}

/* ---------- The root card (mushaf-roots.js): translations, the root's basic idea, al-Rāghib, its words ---------- */
.mq-rc{font-family:'Karla',sans-serif; font-size:14px; line-height:1.5; color:var(--ink);}
.mq-rc:empty{display:none;}
.mq-rc-block{border:1px solid var(--border-soft); border-radius:8px; background:#fff; padding:12px 14px; margin:12px 0;}
.mq-rc-root{border-left:4px solid var(--gold);}
.mq-rc-lab{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px;}
.mq-rc-lab .mq-rc-ar{font-size:18px; text-transform:none; letter-spacing:0; color:var(--teal-deep); font-weight:400;}
.mq-rc-ar{font-family:'Amiri Quran','Amiri',serif; font-size:18px; line-height:1.4;}
.mq-rc-senses{margin:0; padding-left:22px; font-size:15px;}
.mq-rc-senses li{margin:0 0 2px;}
.mq-rc-senses li::marker{color:var(--gold); font-weight:700;}
.mq-rc-note{margin:6px 0 0; font-size:13px; color:var(--ink-soft);}
.mq-rc-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:6px;}
.mq-rc-head .mq-rc-lab{margin:0;}
.mq-rc-letters{font-family:'Amiri','Amiri Quran',serif; font-size:24px; font-weight:700; color:var(--teal-deep); letter-spacing:.06em;}
.mq-rc-count{margin-left:auto; font-size:12.5px; color:var(--ink-soft);}
.mq-rc-core{margin:0 0 10px; font-size:15px;}
.mq-rc-core b, .mq-rc-grow b{color:var(--teal-deep);}
.mq-rc-raghib{margin:0 0 10px; padding:10px 12px; background:var(--bg); border-radius:6px;}
.mq-rc-raghib blockquote{margin:0 0 4px; font-family:'Amiri','Amiri Quran',serif; font-size:21px; line-height:1.7; text-align:right; color:var(--ink);}
.mq-rc-raghib figcaption{font-family:'Lora',serif; font-style:italic; font-size:14px; color:var(--ink);}
.mq-rc-src{font-family:'Karla',sans-serif; font-style:normal; font-size:12px; color:var(--ink-soft);}
.mq-rc-grow{margin:0 0 12px; font-size:14px; color:var(--ink);}
.mq-rc-words{display:flex; flex-wrap:wrap; gap:6px; direction:rtl; margin-bottom:8px;}
.mq-rc-w{display:inline-flex; align-items:center; gap:6px; font:inherit; background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:2px 10px; cursor:pointer; color:var(--ink);}
.mq-rc-w:hover, .mq-rc-w[aria-expanded="true"]{border-color:var(--teal); background:var(--teal-tint);}
.mq-rc-w.mq-rc-cur{box-shadow:inset 0 0 0 1.5px var(--gold);}
.mq-rc-w .mq-rc-ar{font-size:19px;}
.mq-rc-n{font-size:11.5px; font-weight:700; color:var(--ink-soft); direction:ltr;}
.mq-rc-wd{border-top:1px dashed var(--border); padding-top:8px; margin-bottom:8px;}
.mq-rc-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.mq-rc-btn{font:inherit; font-size:13px; font-weight:600; color:var(--teal-deep); background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:5px 12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;}
.mq-rc-btn:hover, .mq-rc-btn[aria-expanded="true"]{border-color:var(--teal); background:var(--teal-tint);}
.mq-rc-wd .mq-rc-btn{margin-top:6px;}
.mq-rc-more{margin-top:10px; border-top:1px dashed var(--border); padding-top:10px;}
.mq-rc-entry{font-family:'Amiri','Amiri Quran',serif; font-size:19px; line-height:1.9; text-align:right; max-height:46vh; overflow-y:auto; padding:2px 4px 2px 8px; overscroll-behavior:contain;}
.mq-rc-entry p{margin:0 0 6px;}
.mq-rc-places{list-style:none; margin:0; padding:0; max-height:46vh; overflow-y:auto; overscroll-behavior:contain;}
.mq-rc-places li + li{border-top:1px solid var(--border-soft);}
.mq-rc-place{display:block; width:100%; text-align:left; font:inherit; background:none; border:none; padding:7px 4px; cursor:pointer; color:var(--ink);}
.mq-rc-place:hover, .mq-rc-place:focus-visible{background:var(--teal-tint); outline:none;}
.mq-rc-ref{display:block; font-size:12px; font-weight:700; color:var(--teal);}
.mq-rc-line{display:block; font-family:'Amiri Quran','Amiri',serif; font-size:19px; line-height:1.9; text-align:right;}
.mq-rc-line mark{background:var(--mq-flash); color:inherit; border-radius:3px;}
.mq-rc-moreplaces{margin-top:8px;}
.mq-rc-wait{font-size:13px; color:var(--ink-soft); margin:8px 0;}
.mq-rc-link{font:inherit; font-size:13px; font-weight:700; color:var(--teal); background:none; border:none; padding:2px 4px; cursor:pointer;}
.mq-rc-link:hover{text-decoration:underline;}
.mq-rc-clamp blockquote{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mq-rc-clamp figcaption{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.mq-rc-words [hidden]{display:none;}
.mq-panel-hear{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; margin:0 0 6px;}
.mq-panel-loc{font-family:'Karla',sans-serif; font-size:12.5px; color:var(--ink-soft);}
.mq-hear{font-family:'Karla',sans-serif; font-size:13px; font-weight:700; color:var(--teal-deep); background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:5px 12px; cursor:pointer; min-height:34px;}
.mq-hear:hover, .mq-hear.mq-au-playing{border-color:var(--teal); background:var(--teal-tint);}
#mq-play-ayah{margin-top:8px;}
.mq-gram{margin:14px 0 0; border-top:1px solid var(--border-soft);}
.mq-gram > summary{cursor:pointer; list-style:none; padding:10px 0; font-family:'Karla',sans-serif; font-size:13px; display:flex; gap:8px; align-items:baseline;}
.mq-gram > summary::-webkit-details-marker{display:none;}
.mq-gram > summary::before{content:'▸'; color:var(--teal);}
.mq-gram[open] > summary::before{content:'▾';}
.mq-gram-l{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;}
.mq-gram-sum{color:var(--ink);}
/* English under each ayah (flowing text) */
.mq-ayah-en{display:block; direction:ltr; text-align:left; font-family:'Lora',Georgia,serif; font-size:15px; line-height:1.55; color:var(--ink-soft); margin:2px 0 14px; padding:0 4px;}
@media (pointer:coarse){ .mq-hear{min-height:40px;} .mq-rc-link{min-height:36px;} }
@media (pointer:coarse){ .mq-rc-btn, .mq-rc-w{min-height:40px;} }

/* ---------- Treebank: large centered modal ---------- */
.mq-panel-wide{position:fixed; top:3vh; bottom:3vh; left:50%; right:auto; width:min(1360px,94vw); max-width:94vw; transform:translateX(-50%) translateY(10px) scale(.98); opacity:0; border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.25); transition:opacity .16s ease, transform .16s ease; pointer-events:none;}
.mq-panel-wide.mq-open{opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto;}
.mq-panel-wide .mq-panel-body{padding:20px 24px 28px;}

.mq-tb-header{text-align:center; margin-bottom:6px;}
.mq-tb-header .surah-name{font-family:'Lora',serif; font-weight:600; color:var(--mq-known); font-size:16px;}
.mq-tb-header .ayah-ref{font-family:'Karla',sans-serif; font-size:12px; color:var(--ink-soft);}
.mq-tb-legend{display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; margin:10px 0 18px; font-family:'Karla',sans-serif; font-size:11.5px; color:var(--ink-soft);}
.mq-tb-legend span{display:inline-flex; align-items:center; gap:5px;}
.mq-tb-legend i{width:10px; height:10px; border-radius:50%; display:inline-block;}

.mq-tb-scroll{overflow-x:auto; overflow-y:visible; padding-bottom:8px; direction:rtl; -webkit-overflow-scrolling:touch;}
/* position:relative so the arc code can read each column's offsetLeft from here; block-level +
   max-content so the columns and the arc SVG below them are always exactly the same width */
.mq-tb-cols{position:relative; display:flex; direction:rtl; gap:4px; padding:4px 8px 0; width:max-content; min-width:100%; box-sizing:border-box; justify-content:center;}
.mq-tb-col{flex:none; width:118px; text-align:center; padding:6px 4px 10px; border-radius:6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;}
.mq-tb-col:hover, .mq-tb-col.mq-tb-active{background:var(--teal-tint);}
.mq-tb-col.mq-tb-head{background:var(--teal-tint); box-shadow:inset 0 0 0 1.5px var(--teal);}
.mq-tb-col .loc{font-family:'Karla',sans-serif; font-size:9.5px; color:var(--ink-soft); opacity:.75;}
.mq-tb-col .tl{font-family:'Lora',serif; font-style:italic; font-size:11.5px; color:var(--teal); direction:ltr;}
.mq-tb-col .gl{font-family:'Karla',sans-serif; font-size:10.5px; color:var(--ink-soft); direction:ltr; line-height:1.25; min-height:2.4em;}
.mq-tb-col .ar{font-family:'Amiri','Amiri Quran',serif; font-size:22px; line-height:1.5; white-space:nowrap; margin:2px 0;}
.mq-tb-col .pos{font-family:'Karla',sans-serif; font-size:10px; font-weight:700; letter-spacing:.02em;}
.mq-tb-col.mq-tb-prefix{opacity:.68;}
.mq-tb-col.mq-tb-prefix .ar{font-size:18px;}

.mq-tb-svg{display:block; overflow:visible;}
.mq-tb-svg .arc{fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.mq-tb-svg .arc-part{cursor:pointer; transition:opacity .12s ease;}
.mq-tb-svg.mq-dim .arc-part{opacity:.16;}
.mq-tb-svg.mq-dim .arc-part.mq-on{opacity:1;}
.mq-tb-svg.mq-dim .arc.mq-on{stroke-width:2.4;}
.mq-tb-svg text{font-family:'Amiri','Karla',serif; font-size:14px; font-weight:700;}
.mq-tb-svg .arc-bg{fill:var(--bg-panel); stroke-width:1;}
.mq-tb-svg .arc-c0.arc{stroke:var(--arc-0);} .mq-tb-svg .arc-c1.arc{stroke:var(--arc-1);} .mq-tb-svg .arc-c2.arc{stroke:var(--arc-2);}
.mq-tb-svg .arc-c3.arc{stroke:var(--arc-3);} .mq-tb-svg .arc-c4.arc{stroke:var(--arc-4);} .mq-tb-svg .arc-c5.arc{stroke:var(--arc-5);}
.mq-tb-svg .arc-c0.arc-head{fill:var(--arc-0);} .mq-tb-svg .arc-c1.arc-head{fill:var(--arc-1);} .mq-tb-svg .arc-c2.arc-head{fill:var(--arc-2);}
.mq-tb-svg .arc-c3.arc-head{fill:var(--arc-3);} .mq-tb-svg .arc-c4.arc-head{fill:var(--arc-4);} .mq-tb-svg .arc-c5.arc-head{fill:var(--arc-5);}
.mq-tb-svg .arc-c0 text{fill:var(--arc-0);} .mq-tb-svg .arc-c1 text{fill:var(--arc-1);} .mq-tb-svg .arc-c2 text{fill:var(--arc-2);}
.mq-tb-svg .arc-c3 text{fill:var(--arc-3);} .mq-tb-svg .arc-c4 text{fill:var(--arc-4);} .mq-tb-svg .arc-c5 text{fill:var(--arc-5);}
.mq-tb-svg .arc-c0 .arc-bg{stroke:var(--arc-0);} .mq-tb-svg .arc-c1 .arc-bg{stroke:var(--arc-1);} .mq-tb-svg .arc-c2 .arc-bg{stroke:var(--arc-2);}
.mq-tb-svg .arc-c3 .arc-bg{stroke:var(--arc-3);} .mq-tb-svg .arc-c4 .arc-bg{stroke:var(--arc-4);} .mq-tb-svg .arc-c5 .arc-bg{stroke:var(--arc-5);}

.mq-tb-swipe{text-align:center; font-family:'Karla',sans-serif; font-size:12px; color:var(--ink-soft); margin:0 0 6px;}
.mq-tb-info{margin-top:16px; font-family:'Karla',sans-serif; font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--border-soft); border-radius:6px; padding:12px 14px; min-height:20px; line-height:1.6;}
.mq-tb-info .role{font-weight:700; color:var(--teal-deep);}
.mq-tb-note{font-family:'Karla',sans-serif; font-size:11.5px; color:var(--ink-soft); margin-top:12px; line-height:1.55;}

@media (max-width: 720px){
  .mq-wrap{padding:14px 8px 50px;}
  .mq-hero{padding:0 0 8px; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0 10px;}
  .mq-hero .en{margin:0; font-size:12.5px; letter-spacing:.03em;}
  .mq-hero .ar{font-size:24px; line-height:1.3;}
  /* the search suggestions on one line that scrolls sideways */
  .mq-search-try{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin-top:7px;}
  .mq-search-try::-webkit-scrollbar{display:none;}
  .mq-search-try button{flex:none;}
  .mq-toolbar{padding:12px; gap:10px 14px;}
  .mq-field.mq-surah-field{flex:1 1 100%;}
  .mq-field.mq-surah-field select{flex:1 1 auto; min-width:0;}
  .mq-legend{gap:4px 12px; margin-bottom:8px;}
  .mq-spread{padding:2px; min-height:0;}
  .mq-leaf{padding:14px 8px;}
  .mq-passage.mq-flow{--mq-fs:24px;}
  .mq-panel{width:100%; max-width:100%;}
  .mq-panel-wide{top:0; bottom:0; width:100vw; max-width:100vw; border-radius:0;}
}

/* Touch screens: the reader's controls at least ~40px to tap (the toolbar, the week switch, the
   search suggestions, the panels' close buttons) */
@media (pointer:coarse){
  .mq-nav-btn{min-height:42px;}
  .mq-field select, .mq-field input[type=number]{min-height:42px; font-size:16px; box-sizing:border-box;}
  .mq-field.mq-surah-field{min-width:0;}   /* the larger select text must not widen the row past the screen */
  .mq-segctl button{min-height:38px;}
  .mq-search-try button{min-height:38px;}
  .mq-settings > summary{min-height:40px; display:flex; align-items:center;}
  .mq-panel-close{min-width:42px; min-height:42px;}
  .mq-intro-x{width:40px; height:40px; top:2px; right:2px;}
  .mq-search-clear{width:40px; height:40px;}
  .mq-results-hide{min-height:36px;}
  .mq-know-field input[type=number]{font-size:16px; min-height:34px;}
  .mq-toggle{position:relative;}
  .mq-toggle::after{content:''; position:absolute; inset:-9px -4px;}
}
@media (max-width:640px){
  .mq-legend .mq-key-title{font-size:12px;}
  .mq-panel-row .v{font-size:17px;}
  .mq-panel-row .v .en{font-size:15px;}
  .mq-tb-note{font-size:12.5px;}
}

/* ===================== Read / Memorise, the Listen player, the ayah menu (mushaf-modes.js) ===================== */
/* the reader bar: always in reach under the site's top bar */
.mq-rbar{position:sticky; top:var(--mq-stick, 0px); z-index:25; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:8px 10px;
  background:rgba(251,253,254,.96); border:1px solid var(--border-soft); border-radius:var(--radius); box-shadow:0 4px 12px var(--mq-shadow); font-family:'Karla',sans-serif;}
.mq-modeswitch{display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:3px; gap:2px;}
.mq-modeswitch button{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:15px; font-weight:700; color:var(--teal-deep); background:none; border:none; border-radius:100px; padding:7px 16px; cursor:pointer; min-height:40px;}
.mq-modeswitch button[aria-pressed="true"]{background:var(--teal); color:var(--mq-on-accent);}
.mq-modeswitch button:focus-visible, .mq-listen-btn:focus-visible{outline:2px solid var(--teal-deep); outline-offset:2px;}
.mq-listen-btn{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:15px; font-weight:700; color:var(--teal-deep); background:var(--bg-panel); border:1px solid var(--teal); border-radius:100px; padding:7px 16px; cursor:pointer; min-height:40px;}
.mq-listen-btn:hover{background:var(--teal-tint);}
@media (max-width:560px){ .mq-modeswitch button, .mq-listen-btn{padding:7px 12px; font-size:14px;} .mq-rbar{gap:6px; padding:6px;} }

/* the one-time "How will you use the reader?" */
.mq-stagebar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:0 0 12px; padding:10px 12px; background:var(--bg-panel); border:1px solid var(--border-soft); border-left:4px solid var(--gold); border-radius:var(--radius); font-family:'Karla',sans-serif;}
.mq-sb-q{font-weight:700; color:var(--ink); margin-right:4px;}
.mq-stagebar button{font:inherit; font-size:14px; font-weight:600; color:var(--teal-deep); background:var(--teal-tint); border:none; border-radius:100px; padding:6px 13px; cursor:pointer; min-height:36px;}
.mq-stagebar button:hover{background:var(--teal); color:var(--mq-on-accent);}
.mq-stagebar .mq-sb-x{background:none; color:var(--ink-soft); margin-left:auto;}
.mq-sb-opts{display:contents;}
/* inside the welcome strip (#mq-intro): the strip's own box and × */
.mq-stagebar.mq-stagebar-in{margin:0 0 10px; padding:0 0 10px; background:none; border:none; border-bottom:1px solid var(--border-soft); border-radius:0;}
@media (max-width:720px){
  .mq-stagebar-in .mq-sb-q{flex:1 1 100%;}
  .mq-stagebar-in .mq-sb-opts{display:flex; flex:1 1 100%; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -40px 0 0; padding-right:8px;}
  .mq-stagebar-in .mq-sb-opts::-webkit-scrollbar{display:none;}
  .mq-stagebar-in .mq-sb-opts button{flex:none;}
  /* a first visit on a phone: just the question (the week, the coverage line and the way into the course come
     once it is answered; the week is in Reading options too), so the text is on the first screen */
  .mq-intro.mq-asking > :not(.mq-stagebar):not(.mq-intro-x){display:none;}
  .mq-intro.mq-asking .mq-stagebar-in{margin:0; padding:0; border:none;}
}
.mq-stage-field{display:flex; align-items:center; gap:8px; font-family:'Karla',sans-serif; font-size:13px; color:var(--ink-soft);}
.mq-stage-field select{font:inherit; font-size:14px; color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:5px 8px;}

/* the ayah being recited */
.mq-ayah-wrap.mq-playing{background:var(--mq-playing); box-shadow:0 0 0 4px var(--mq-playing); border-radius:6px;}
.mq-ayah-wrap.mq-playing .mq-word.mq-known, .mq-ayah-wrap.mq-playing .mq-word.mq-root-known{background:transparent; box-shadow:inset 0 -3px 0 var(--mq-playing-line);}
.mq-ayah-num[role=button]{cursor:pointer; border-radius:6px;}
.mq-ayah-num[role=button]:hover, .mq-ayah-num[role=button]:focus-visible{background:var(--teal-tint); outline:none;}

/* docks at the bottom: the player and the memorise coach (above the phone tab bar) */
.mq-dock{position:fixed; z-index:35; left:50%; transform:translateX(-50%); bottom:calc(var(--mq-tab-h, 0px) + 10px + env(safe-area-inset-bottom)); width:min(720px, calc(100vw - 16px)); box-sizing:border-box;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(20,40,60,.22); font-family:'Karla',sans-serif; font-size:14px; color:var(--ink);}
.mq-dock[hidden]{display:none;}
body.mq-has-dock .mq-wrap{padding-bottom:calc(var(--mq-bottom-room, 120px) + 20px);}
@media (max-width:600px){ .mq-dock{width:calc(100vw - 8px); bottom:calc(var(--mq-tab-h, 0px) + 4px + env(safe-area-inset-bottom)); border-radius:12px;} }
.mq-p-bar{display:flex; align-items:center; gap:4px; padding:6px 8px;}
.mq-p-ic{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:none; background:none; color:var(--teal-deep); border-radius:50%; cursor:pointer; flex:none;}
.mq-p-ic:hover{background:var(--teal-tint);}
.mq-p-main{width:48px; height:48px; background:var(--teal); color:var(--mq-on-accent);}
.mq-p-main:hover{background:var(--teal-deep);}
.mq-p-what{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; font:inherit; text-align:left; background:none; border:none; padding:4px 8px; border-radius:8px; cursor:pointer; color:var(--ink);}
.mq-p-what:hover{background:var(--bg);}
.mq-p-now{font-weight:700; font-size:14.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mq-p-sub{font-size:12px; color:var(--ink-soft); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mq-p-sub::after{content:' · settings ▴'; color:var(--teal);}
.mq-p-what[aria-expanded="true"] .mq-p-sub::after{content:' · settings ▾';}
.mq-p-more{padding:10px 12px 4px; border-bottom:1px solid var(--border-soft); max-height:min(60vh, 460px); overflow-y:auto;}
.mq-p-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px;}
.mq-p-row > span:first-child{min-width:120px; font-weight:700; font-size:13px; color:var(--ink-soft);}
.mq-p-row select{font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--ink); max-width:100%;}
.mq-pseg{display:inline-flex; flex-wrap:wrap; gap:3px; background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:2px;}
.mq-pseg button{font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); background:none; border:none; border-radius:100px; padding:5px 10px; cursor:pointer; min-height:32px;}
.mq-pseg button[aria-pressed="true"]{background:var(--teal); color:var(--mq-on-accent);}
.mq-p-note{margin:2px 0 8px; font-size:12px; color:var(--ink-soft);}

/* the ۝ menu */
.mq-amenu{position:fixed; z-index:45; width:min(340px, calc(100vw - 16px)); box-sizing:border-box; background:var(--bg-panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(20,40,60,.22); padding:10px 12px 12px; font-family:'Karla',sans-serif; font-size:14px;}
.mq-am-head{display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--teal-deep);}
.mq-am-x{border:none; background:none; font-size:22px; line-height:1; color:var(--ink-soft); width:36px; height:36px; border-radius:50%; cursor:pointer;}
.mq-am-x:hover{background:var(--teal-tint);}
.mq-am-en{font-family:'Lora',serif; font-size:14.5px; line-height:1.55; color:var(--ink); margin:4px 0 10px; max-height:30vh; overflow-y:auto;}
.mq-am-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.mq-am-acts button{display:inline-flex; align-items:center; gap:6px; justify-content:center; font:inherit; font-size:13.5px; font-weight:700; color:var(--teal-deep); background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px; cursor:pointer; min-height:42px;}
.mq-am-acts button:hover{border-color:var(--teal); background:var(--teal-tint);}
.mq-am-acts svg{width:16px; height:16px;}

.mq-toast{position:fixed; z-index:50; left:50%; transform:translateX(-50%) translateY(10px); top:calc(var(--mq-stick, 0px) + 12px); max-width:calc(100vw - 24px); box-sizing:border-box; padding:9px 14px; border-radius:10px; background:var(--mq-tip-bg); color:var(--mq-tip-ink); font-family:'Karla',sans-serif; font-size:14px; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; overflow-wrap:anywhere;}
.mq-toast.mq-on{opacity:1; transform:translateX(-50%) translateY(0);}
.mq-toast.mq-toast-html.mq-on{pointer-events:auto;}
.mq-toast a{color:inherit; font-weight:700;}
#mq-stage-primer{font-weight:700; color:var(--teal-deep); white-space:nowrap;}
.mq-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- Memorise: the coach ---------- */
.mq-coach{max-height:min(70vh, 560px); display:flex; flex-direction:column;}
.mq-c-head{display:flex; align-items:center; gap:6px; padding:8px 8px 6px 12px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap;}
.mq-c-head > b{font-size:15px; color:var(--teal-deep); margin-right:auto;}
.mq-c-portion{font:inherit; font-weight:700; font-size:14px; color:var(--teal-deep); background:var(--teal-tint); border:none; border-radius:100px; padding:6px 12px; cursor:pointer; min-height:36px;}
.mq-c-x{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none; background:none; color:var(--ink-soft); border-radius:50%; cursor:pointer;}
.mq-c-x:hover{background:var(--teal-tint);}
.mq-c-steps{display:flex; gap:3px; flex-wrap:wrap;}
.mq-c-steps button{display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:13px; font-weight:700; color:var(--ink-soft); background:none; border:1px solid transparent; border-radius:100px; padding:5px 9px; cursor:pointer; min-height:34px;}
.mq-c-steps button span{display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--bg); align-items:center; justify-content:center; font-size:11.5px;}
.mq-c-steps button[aria-pressed="true"]{color:var(--teal-deep); border-color:var(--teal); background:var(--bg-panel);}
.mq-c-steps button[aria-pressed="true"] span{background:var(--teal); color:var(--mq-on-accent);}
.mq-c-tag{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-deep); padding:4px 8px;}
.mq-c-body{padding:10px 12px 12px; overflow-y:auto;}
.mq-c-tip{margin:0 0 8px; font-size:14.5px;}
.mq-c-note{margin:8px 0 0; font-size:12px; color:var(--ink-soft);}
.mq-c-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 6px;}
.mq-c-go{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:15px; font-weight:700; color:var(--mq-on-accent); background:var(--teal); border:none; border-radius:100px; padding:10px 18px; cursor:pointer; min-height:44px;}
.mq-c-go:hover{background:var(--teal-deep);}
.mq-c-go svg{width:18px; height:18px;}
.mq-c-small{font:inherit; font-size:13.5px; font-weight:700; color:var(--teal-deep); background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:8px 13px; cursor:pointer; min-height:40px;}
.mq-c-small:hover{border-color:var(--teal);}
.mq-c-next{display:block; margin:8px 0 0 auto; font:inherit; font-size:14px; font-weight:700; color:var(--teal-deep); background:none; border:none; padding:6px 0; cursor:pointer;}
.mq-c-rec{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft);}
.mq-c-rec select{font:inherit; font-size:13.5px; padding:6px; border:1px solid var(--border); border-radius:6px; background:var(--bg); max-width:200px;}
.mq-c-mic{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:15px; font-weight:700; color:var(--teal-deep); background:var(--bg-panel); border:2px solid var(--teal); border-radius:100px; padding:9px 18px 9px 12px; cursor:pointer; min-height:48px;}
.mq-c-mic[aria-pressed="true"]{background:#FDECEA; border-color:#B3261E; color:#8C1D18; animation:mqPulse 1.4s ease-in-out infinite;}
@keyframes mqPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.25);} 50%{box-shadow:0 0 0 8px rgba(179,38,30,0);}}
@media (prefers-reduced-motion:reduce){ .mq-c-mic[aria-pressed="true"]{animation:none;} }
.mq-c-levels{display:inline-flex; flex-wrap:wrap; gap:3px; background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:2px; margin:0 0 10px;}
.mq-c-levels button{font:inherit; font-size:13px; font-weight:700; color:var(--ink-soft); background:none; border:none; border-radius:100px; padding:6px 11px; cursor:pointer; min-height:34px;}
.mq-c-levels button[aria-pressed="true"]{background:var(--teal); color:var(--mq-on-accent);}
.mq-c-grade{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px;}
.mq-c-grade button{font:inherit; font-size:14px; font-weight:700; color:var(--ink); background:var(--bg); border:1.5px solid var(--border); border-radius:100px; padding:8px 14px; cursor:pointer; min-height:42px;}
.mq-c-grade button[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-tint); color:var(--teal-deep);}
.mq-c-sec{margin:0 0 12px;}
.mq-c-lab{margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.mq-c-review{display:flex; justify-content:space-between; width:100%; font:inherit; font-size:14.5px; font-weight:700; color:var(--teal-deep); background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin:0 0 6px; cursor:pointer;}
.mq-c-review span{font-weight:400; color:var(--ink-soft);}
.mq-c-pick{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px;}
.mq-c-pick label{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft);}
.mq-c-pick select, .mq-c-pick input{font:inherit; font-size:15px; padding:7px 8px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--ink);}
.mq-c-pick select{max-width:min(260px, 70vw);}
.mq-c-pick input{width:64px;}
.mq-c-quick{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px;}
.mq-c-quick button{font:inherit; font-size:13px; font-weight:600; color:var(--teal-deep); background:var(--teal-tint); border:none; border-radius:100px; padding:6px 12px; cursor:pointer; min-height:34px;}
.mq-c-mine{list-style:none; margin:0; padding:0;}
.mq-c-mine li{display:grid; grid-template-columns:minmax(0,1fr) 90px auto; gap:8px; align-items:center; font-size:13.5px; padding:3px 0;}
.mq-c-bar{height:8px; background:var(--border-soft); border-radius:8px; overflow:hidden;}
.mq-c-bar i{display:block; height:100%; background:var(--mq-ok);}
@media (pointer:coarse){ .mq-pseg button, .mq-c-levels button, .mq-c-steps button{min-height:40px;} }

/* ---------- Memorise: the page ---------- */
body.mq-memorising .mq-word.mq-known:not(.mq-h-mask), body.mq-memorising .mq-word.mq-root-known:not(.mq-h-mask){background:transparent; box-shadow:none; background-image:none;}
body.mq-memorising .mq-word.mq-h-mask{background-color:transparent; box-shadow:none;}   /* known-word colours would only distract here */
.mq-ayah-wrap.mq-h-out{opacity:.28;}
.mq-ayah-wrap.mq-h-cur{background:rgba(201,162,104,.13); border-radius:6px; box-shadow:0 0 0 3px rgba(201,162,104,.13);}
/* a hidden word keeps its width, so the line keeps its shape and the student learns where each word sits */
.mq-word.mq-h-faded, .mq-word.mq-h-faded .mq-tw{color:rgba(36,38,43,.22) !important;}
.mq-word.mq-h-hidden, .mq-word.mq-h-hidden .mq-tw, .mq-word.mq-h-first, .mq-word.mq-h-first .mq-tw{color:transparent !important;}
.mq-word.mq-h-hidden, .mq-word.mq-h-first{background-image:linear-gradient(90deg, var(--mq-dash) 0 60%, transparent 60%); background-size:9px 2px; background-repeat:repeat-x; background-position:0 82%;}
.mq-word.mq-h-first::after, .mq-word.mq-h-hint::after{content:attr(data-h) 'ـ'; position:absolute; right:3px; top:0; color:var(--ink-soft); font-family:'Amiri Quran','Amiri',serif;}
.mq-word.mq-h-hint::after{color:var(--gold);}
.mq-word.mq-h-next, body.mq-memorising .mq-word.mq-h-next{box-shadow:inset 0 -3px 0 var(--teal);}
.mq-word.mq-h-ok{animation:mqIn .35s ease-out 1;}
@keyframes mqIn{from{background:rgba(46,125,70,.28);} to{background:transparent;}}
.mq-word.mq-h-miss, body.mq-memorising .mq-word.mq-h-miss{background:var(--mq-miss-bg); box-shadow:inset 0 -2px 0 var(--mq-miss);}
@media (prefers-reduced-motion:reduce){ .mq-word.mq-h-ok{animation:none;} }
/* reader bar extras */
.mq-modeswitch button{position:relative;}
.mq-due{position:absolute; top:-6px; right:-4px; min-width:20px; height:20px; box-sizing:border-box; padding:0 5px; border-radius:100px; background:var(--teal-deep); color:#fff; font-size:11.5px; line-height:20px; text-align:center;}
.mq-due[hidden]{display:none;}
.mq-more-opts{display:flex; flex-wrap:wrap; gap:10px 22px; flex:1 1 100%;}
/* player extras */
.mq-p-back{flex:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--teal-deep); background:var(--gold-pale, #F0E4CC); border:none; border-radius:100px; padding:6px 10px; cursor:pointer; white-space:nowrap;}
.mq-p-back[hidden]{display:none;}
.mq-p-cycle{position:relative;}
.mq-p-cycle b{position:absolute; right:2px; bottom:2px; font-size:10px; font-weight:700; color:var(--teal-deep);}
.mq-p-cycle.mq-on{color:var(--teal); background:var(--teal-tint);}
.mq-am-acts .mq-am-wide{grid-column:1 / -1;}
@media (max-width:420px){ .mq-p-ic{width:38px; height:38px;} .mq-p-main{width:44px; height:44px;} .mq-p-back{padding:6px 8px; font-size:12px;} }
/* phones: the ayah playing and the reciter get a line of their own above the buttons (beside them they had ~40px) */
@media (max-width:600px){
  .mq-p-bar{flex-wrap:wrap; justify-content:center; row-gap:0;}
  .mq-p-what{order:-1; flex:1 1 100%; align-items:center; text-align:center; padding:2px 8px 0;}
}
/* the coach: Today and a session */
.mq-c-saved{font-size:12px; color:var(--ink-soft); margin-right:auto;}
.mq-c-head > b + .mq-c-saved{margin-left:6px;}
.mq-c-link{font:inherit; font-size:13.5px; font-weight:700; color:var(--teal); background:none; border:none; padding:6px 4px; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.mq-c-review b{color:var(--teal); font-weight:700;}
.mq-c-newp{margin-bottom:8px;}
.mq-c-lab2{font-size:12.5px; color:var(--ink-soft); font-weight:700;}
.mq-c-size{font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--bg); border:1px solid var(--border); border-radius:100px; padding:5px 11px; cursor:pointer; min-height:34px;}
.mq-c-size[aria-pressed="true"]{border-color:var(--teal); color:var(--teal-deep); background:var(--teal-tint);}
.mq-c-quick button small{display:block; font-size:11px; font-weight:400; color:var(--ink-soft);}
.mq-c-quick button small:empty{display:none;}
.mq-c-pickbox{margin-top:8px;}
.mq-c-mine li{display:block; padding:6px 0; border-top:1px solid var(--border-soft);}
.mq-c-mine li:first-child{border-top:none;}
.mq-c-mrow{display:flex; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:600; margin-bottom:4px;}
.mq-sqs{display:flex; flex-wrap:wrap; gap:3px; direction:ltr;}
.mq-sq{width:12px; height:12px; padding:0; border:none; border-radius:3px; background:transparent; box-shadow:inset 0 0 0 1.5px var(--mq-sq-none); cursor:pointer;}
.mq-sq.learn{background:var(--mq-sq-learn); box-shadow:none;} .mq-sq.mem{background:var(--mq-sq-mem); box-shadow:none;} .mq-sq.strong{background:var(--mq-ok); box-shadow:none;}
.mq-sq.due{box-shadow:0 0 0 2px var(--teal-deep);}
.mq-sq:focus-visible{outline:2px solid var(--teal-deep); outline-offset:1px;}
@media (pointer:coarse){
  .mq-sqs{gap:6px;}
  .mq-sq{width:22px; height:22px; border-radius:4px;}
  .mq-stagebar button, .mq-c-quick button, .mq-c-size, .mq-c-link, .mq-c-next, .mq-c-portion, .mq-c-steps button{min-height:40px;}
  .mq-stagebar .mq-sb-x{min-width:40px;}
  .mq-stage-field select, .mq-p-row select, .mq-c-rec select{min-height:40px;}
  .mq-ayah-num[role=button]{position:relative;}
  .mq-ayah-num[role=button]::before{content:''; position:absolute; inset:-6px -8px;}
}
.mq-c-grades{list-style:none; margin:0 0 10px; padding:0; max-height:32vh; overflow-y:auto;}
.mq-c-grades li{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 0; border-top:1px solid var(--border-soft);}
.mq-c-grades li:first-child{border-top:none;}
.mq-c-gk{min-width:52px; font-weight:700; color:var(--teal-deep);}
.mq-c-grades .mq-c-grade{margin:0;}
.mq-c-grades .mq-c-grade button{padding:5px 10px; min-height:36px; font-size:13px;}
.mq-c-bar3{justify-content:space-between;}
.mq-c-bar3 .mq-c-go{flex:1 1 auto; justify-content:center; max-width:240px;}
@media (max-width:600px){
  .mq-c-head{gap:4px; padding:6px 6px 4px 8px;}
  .mq-c-steps button{padding:4px 6px; font-size:12px;}
  .mq-c-steps button span{width:18px; height:18px;}
  .mq-c-levels button{padding:5px 8px; font-size:12.5px;}
  .mq-coach{max-height:62vh;}
}
/* while memorising: no green highlights, tajweed, hover tips or preview bar */
body.mq-memorising #mq-intro, body.mq-memorising .mq-hints, body.mq-memorising .mq-tw-legend, body.mq-memorising .mq-tip, body.mq-memorising .mq-stagebar{display:none !important;}
body.mq-memorising .mq-tw{color:inherit !important;}
body.mq-memorising .mq-word.mq-h-weak, .mq-word.mq-h-weak{background-image:radial-gradient(circle, var(--mq-miss) 1px, transparent 1.5px); background-size:5px 3px; background-repeat:repeat-x; background-position:0 92%;}
.mq-word.mq-h-stuck{animation:mqStuck 1.2s ease-in-out infinite;}
@keyframes mqStuck{0%,100%{box-shadow:inset 0 -3px 0 var(--teal);} 50%{box-shadow:inset 0 -3px 0 var(--teal), 0 0 0 4px rgba(184,92,56,.25);}}
@media (prefers-reduced-motion:reduce){ .mq-word.mq-h-stuck{animation:none; box-shadow:inset 0 -3px 0 var(--teal), 0 0 0 3px rgba(184,92,56,.3);} }
.mq-word.mq-h-miss::after{content:'?'; position:absolute; top:-2px; left:1px; font-family:'Karla',sans-serif; font-size:11px; font-weight:700; color:var(--mq-miss);}
/* on phones the docks take the place of the site's tab bar while they are open */
@media (max-width:600px){ body.mq-has-dock #q-tabbar{display:none;} }

/* short screens (a phone held sideways): the reader bar scrolls with the page, the docks take less height */
@media (max-height:500px){
  .mq-rbar{position:static;}
  .mq-coach{max-height:48vh;}
  .mq-coach .mq-c-body{overflow-y:auto;}
  .mq-coach .mq-c-tip{margin-bottom:4px;}
  .mq-player .mq-p-more{max-height:40vh; overflow-y:auto;}
}