/* My Hifz — the page skin (HZ-15/16). Tokens and maths from
   docs/superpowers/specs/hifz/02-visual-and-page-rendering.md §2-§3 and §5.
   No dark mode (D17): a three-step paper dim keeps black ink on cream paper. */

/* HZ-16: the King Fahd Complex's own Unicode Hafs face, served unmodified from our
   origin (D2'). `block` because a mushaf page in a fallback face shows wrong glyph
   shapes, and a wrong page is worse than a wait (§5, "the glyphs appear"). */
@font-face {
  font-family: 'UthmanicHafs';
  src: url('fonts/uthmanic_hafs_v20.ttf') format('truetype');
  font-display: block;
  font-weight: 400;
  font-style: normal;
}

:root {
  --paper: #fdfaf3;
  --rule: #e4d9c0;
  --script: #231c12;
  --rubric: #8a6a1f;
  --focus: #1f6b4f;
  --ghost: rgba(35, 28, 18, .07);
  --ghost-done: rgba(35, 28, 18, .2);
  --shell: #f6f1e7;
  /* The UI face as a token, because `font: 700 20px/1 inherit` is INVALID CSS — `inherit` is
     only legal as the whole value of the shorthand, so every such declaration is dropped and
     the control falls back to the UA default 13.3px Arial, under the 20px floor (§2.0).
     var() substitutes before the shorthand is parsed, so this is the one-token fix. */
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Small-text and disabled ink. Darkened per paper step below because the shell is darker
     than the paper and this colour has to clear 4.5:1 on BOTH surfaces (07 §a dim. 8-9). */
  --ink-soft: #6b6150;
  --press: #f2ecdb;

  /* V8 / 07 §b: the mushaf ornament. All four are decoration, so none of them is ever the only
     carrier of information, and all four are TOKENS overridden per paper step (07 §e rule 1) -
     never a filter, which would kill subpixel antialiasing on the glyphs. */
  --gold: #8a6a1f;        /* the heavier of the two rules; the cartouche rule and frame stroke  */
  --gold-2: #b9983f;      /* the companion hairline - lighter on purpose, so the pair reads as
                             a double rule and not as one thick band                            */
  --cartouche: #f7efdc;   /* the fill inside the surah-name panel: a tint, not a colour         */
  --frame: #a8863a;       /* the ornament on pages 1-2                                          */

  /* HZ-17 calibration knob: em of advance per mushaf line (02-visual §3.1). 16.9 is the
     DEFAULT, chosen so a 375px phone lands on exactly 21.0px — the D11 floor. It is also
     the widest line a 375px phone can hold at that floor, and measured with
     uthmanic_hafs_v20.ttf the real pages run 11.3em to 18.7em: page 2 is 13.83em, page 302
     16.42em, page 575 18.70em. Pages over 16.9em therefore get their own divisor, measured
     once at render (game.js fitPage), and render a little under 21px rather than clipped.
     See the HZ-17 handoff: this is a consequence of D2' that the lead should see. */
  --line-em: 16.9;
  /* 2px either side of the sheet + 8px of paper padding. 36px does not fit: at the 21px
     floor a 375px phone has only 355px of measure to give, and 16.9 x 21 = 354.9. */
  --page-pad: 20px;
  --pitch: 1.95;
}

/* D17 steps 2 and 3. Polarity never flips; only the emitted light drops. */
/* D12: the one-tap "blank" setting. Only the ink goes; every word keeps the box it had, so
   the page shape - the recall asset - is untouched. */
[data-ghost="blank"] { --ghost: transparent; }

[data-paper="dim"] { --paper: #e8e0d0; --shell: #ded5c2; --rule: #d3c6a8; --press: #ddd3bd; --ink-soft: #645b4b;
  --gold-2: #9c7d2c; --cartouche: #ded3b8; --frame: #8f7126; }
[data-paper="lamp"] { --paper: #cfc7b6; --script: #1a150e; --shell: #c3bba9; --rule: #bcae92; --press: #c4baa5; --ink-soft: #504a3c;
  /* --gold needs the lamp override too: without it it falls to exactly 3.00 and --gold-2 to
     1.64, leaving a single visible rule where the design says double (07 §e rule 2). */
  --gold: #7d6224; --gold-2: #8f7126; --cartouche: #c6bca4; --frame: #7d6224; }
@media (prefers-color-scheme: dark) {
  /* the dim gold values belong here beside the dim paper values, or a phone in night mode gets
     dim paper with bright-step gold (07 §e, the one line that is easiest to forget) */
  :root:not([data-paper]) { --paper: #e8e0d0; --shell: #ded5c2; --rule: #d3c6a8; --press: #ddd3bd; --ink-soft: #645b4b;
    --gold-2: #9c7d2c; --cartouche: #ded3b8; --frame: #8f7126; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--shell);
  color: var(--script);
  font: 20px/1.45 var(--ui);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
.view { display: flex; flex-direction: column; height: 100%; }

/* ---------- chrome shared by both screens ---------- */

.bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: env(safe-area-inset-top) 4px 0;
  background: var(--shell);
  border-bottom: 1px solid var(--rule);
}
.bar h1 { margin: 0 auto; min-width: 0; overflow: hidden; font-size: 26px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.icon {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--rubric);
  font: 700 20px/1 var(--ui);
  text-decoration: none;
  cursor: pointer;
}
.icon:active { background: var(--press); }
/* The back control is a labelled, high-contrast button: the thin arrow was invisible to her. */
.icon.back { min-width: 0; padding: 0 18px; border-radius: 14px; background: var(--focus); color: #fff; font: 800 22px/1 var(--ui); gap: 6px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.icon.back:active { background: var(--focus); transform: translateY(2px); box-shadow: none; }
/* The one 14px string in the app, so it is small text and owes 4.5:1. In --rubric on the lamp
   step it was 3.00:1, and the `opacity: .85` on top of that made the real figure lower still -
   opacity is exactly what breaks a contrast calculation, so it is gone and --ink-soft (>=4.5:1
   against the shell on all three steps) carries the colour instead (07 §a dim. 9). */
.credit-line { margin: 4px 0 0; padding: 4px 16px calc(4px + env(safe-area-inset-bottom)); text-align: center; color: var(--ink-soft); font: 500 14px/1.3 var(--ui); }
.icon[aria-pressed="true"] { color: var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- surah index (HZ-18) ---------- */

.rows { flex: 1 1 auto; overflow-y: auto; background: var(--paper); }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  color: var(--script);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.row:active { background: var(--press); }
.row-no { flex: 0 0 2.2em; color: var(--rubric); font-size: 20px; font-variant-numeric: tabular-nums; }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-name { display: block; font-size: 26px; line-height: 1.25; }
.row-meta { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 20px; }
.row-page { flex: 0 0 auto; color: var(--rubric); font: 700 20px/1 var(--ui); font-variant-numeric: tabular-nums; }
/* the Continue row is the only row with a mark on its leading edge — a mark in a book */
.row.cont { box-shadow: inset 4px 0 0 var(--rubric); }
.row.cont .row-name { color: var(--focus); font-weight: 700; }
html[dir="ltr"] .row.cont { box-shadow: inset -4px 0 0 var(--rubric); }

/* ---------- page view (HZ-17) ---------- */

/* surah over juz, both centred: "الجُزء التَّاسِع وَالعِشرون" is 230px at 20px and will not
   share one 375px row with a 56px back button and stay above the 20px floor. */
.bar-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.bar-mid b { max-width: 100%; overflow: hidden; font: 700 20px/1.2 var(--ui); white-space: nowrap; text-overflow: ellipsis; }
.juz { max-width: 100%; overflow: hidden; color: var(--rubric); font: 400 20px/1.2 var(--ui); white-space: nowrap; text-overflow: ellipsis; }

.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 8px 2px;
  touch-action: pan-y;        /* horizontal is our swipe, vertical stays the browser's */
}
.scroll.whole { overflow: hidden; }

.paper {
  position: relative;        /* containing block for the frame layer; layout-neutral */
  max-width: calc(24px * var(--line-em) + 16px);
  margin-inline: auto;
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--paper);
  /* 07 §c1: the thin double gold inner rule. PAINT ONLY - three inset rings (offset 0, blur 0,
     increasing spread, earlier entries painting over later ones) fill bands inside the border
     edge, so the measure and all fifteen line boxes are untouched. The four pixels come out of
     the sheet's own 8px side pad, leaving 4px of air before the first glyph. The old
     `0 1px 0 #fff` highlight is gone: it stood in for a defined sheet edge, which the gold
     rule now does properly. Do NOT widen the pad behind a media query - that changes line
     boxes on large phones only, which is the worst outcome (07 §c1 risk). */
  box-shadow:
    0 10px 22px rgba(70, 50, 20, .13),   /* the sheet's lift                             */
    inset 0 0 0 1px var(--gold),         /* 0-1px: the heavier rule, at the trim edge     */
    inset 0 0 0 3px var(--paper),        /* 1-3px: the gap that makes it a *double* rule  */
    inset 0 0 0 4px var(--gold-2);       /* 3-4px: the companion hairline                 */
  transform-origin: top center;
}

.mushaf {
  /* §3.2: the size is derived from the width and the page's own widest line, so horizontal
     overflow is structural rather than a rule to remember — there is no floor to override it
     and no page can be clipped. Capped at the Pro Max size so a desktop window does not
     render 70px type; print-size tablet rendering is deferred (D11, Q1 = iPhone only). */
  --mushaf: min(24px, calc((100dvw - var(--page-pad)) / var(--line-em)));
  font-family: 'UthmanicHafs';
  font-size: var(--mushaf);
  color: var(--script);
  font-feature-settings: normal;
}
.line {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  /* no gap: at the 21px floor the widest Madina line leaves ~1px between words and
     space-between must be free to give every pixel of slack to the line that needs it */
  height: calc(var(--mushaf) * var(--pitch));
  line-height: calc(var(--mushaf) * var(--pitch));
  white-space: nowrap;
}
.line.mid { justify-content: center; }
/* the focus rail: absolutely positioned, so it is not a flex item and cannot reflow */
.line::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 14%;
  bottom: 14%;
  width: 3px;
  border-radius: 2px;
  background: var(--focus);
  opacity: 0;
  transition: opacity .18s linear;
}
.line.railed::before { opacity: 1; }

/* a surah header is one of the fifteen, never taller. 07 §c2: the two hairlines become a
   cartouche - the same span, inset inside the line box it already had, with the same ring trick
   and the same two gold tones as the sheet rule. `align-self: center` stops the stretch from
   `.line { align-items: stretch }` so the explicit height holds; the height is the line box
   less 3px of air top and bottom, so the fifteen line heights do not move. The name stays in
   --rubric, not --script: this band is our chrome, not something the Complex put on the page. */
.sname {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72%;
  height: calc(var(--mushaf) * var(--pitch) - 6px);
  border-radius: 7px;
  background: var(--cartouche);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 3px var(--cartouche),
    inset 0 0 0 4px var(--gold-2);
  color: var(--rubric);
  font-family: 'UthmanicHafs';
  font-size: calc(var(--mushaf) * .8);
  line-height: 1.5;
}
/* 07 §c3: the basmala gets NO ornament - the printed Madina basmala is the ligature, centred, a
   little smaller than the body, and that is all. The change is structural: its own class, so the
   drill ghosting below (which keys off `.w`) cannot reach it. As a `.w` with no data-k it faded
   to 7% ink the moment any drill started and nothing could ever add `.on` to bring it back.
   The line box is unchanged: the span is centred in a fixed-height `.line.mid`. */
.bism { color: var(--script); font-size: calc(var(--mushaf) * .92); }
/* the 15 ruled lines she sees while the face loads; never a shimmer */
.skel { position: absolute; inset-inline: 6%; top: 55%; height: 1px; background: var(--rule); }

/* 07 §c4: the ornamental corner frame, pages 1-2 ONLY - the two pages where the print has one,
   and the only two whose line 1 is a 72% surah-name cartouche and whose lines 9-15 are blank, so
   the corner art lands in line boxes that hold nothing at their outer edges. Each corner is a
   110-unit box in a 1000x1730 viewBox = 11% of the width = 41px = exactly one line box, which is
   what keeps it clear of every glyph.
   MASK, not background-image: a data-URI background would bake one hex into the asset and need
   three copies for three paper steps, while masking a token-coloured block lets one asset serve
   all three. Both are allowed by `img-src 'self' data:` in the CSP (_headers:2, :14).
   The asset is a derivative of the public-domain tools/prototype/frame-candidate.svg
   (freesvg.org / Openclipart); see hifz/data/ATTRIBUTION.md. */
.paper.framed::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--frame);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201730%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22%23000%22%3E%3Cg%20transform%3D%22translate%280%2C0%29%20scale%280.47850%29%20translate%28-147.7%2C-99.68%29%22%3E%3Cpath%20d%3D%22m160.31%2099.68-12.598%200.01-0.01%2012.598v25.21h25.22v12.594h-25.22v55.625l9.9962%209.985-9.9962%209.99v92.421l25.279-25.272%2012.592-12.598-0.0238-54.541h-0.0387l-9.9762-9.9762%2010.005-10.009-0.02-43.019h12.589v50.401l31.514-31.499%2031.499-31.519h-50.4v-12.584l43.018%200.015%2010.014-10%209.9712%209.975v0.035l54.541%200.0288%2037.871-37.871h-92.418l-9.995%209.995-9.985-9.995h-55.62v25.22h-12.599v-25.22h-25.21zm0%2012.608h12.602v12.612c4.21%204.19%208.4088%208.3988%2012.608%2012.598h12.594l0.009%2012.602h-0.009l-12.594-0.009v-12.594c-4.1988-4.2038-8.4075-8.3938-12.608-12.598-4.1988%200-8.4025-0.01-12.602-0.01v-12.602zm50.411%200h37.792l6.2988%206.2988-6.3325%206.3338-37.759-0.01v-12.622zm68.218%200h57.514l-12.66%2012.661-44.795-0.01-6.3525-6.3525%206.2938-6.2988zm-47.212%2050.401-10.502%2010.512c1.1088%201.0788%202.2112%202.1925%203.305%203.305-1.1125-1.0988-2.2212-2.1962-3.305-3.305l-10.512%2010.502%200.01-21.006%2021.005-0.009zm-71.416%200.009h12.622l0.01%2037.759-6.3338%206.3338-6.2988-6.2988v-37.794zm6.2988%2061.92%206.3538%206.3525%200.009%2044.799-12.661%2012.661v-57.514l6.2988-6.2988z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28890%2C0%29%20scale%280.47850%29%20translate%28-377.585%2C-99.68%29%22%3E%3Cpath%20d%3D%22m594.86%2099.68%2012.592%200.01%200.01%2012.598v25.21h-25.22v12.594h25.22v55.625l-9.995%209.985%209.995%209.99v92.421l-37.871-37.87%200.03-54.541h0.0387l9.97-9.9762-10-10.009%200.02-43.019h-12.588v50.401l-31.519-31.499-31.494-31.519h50.4v-12.584l-43.022%200.015-10.01-10-9.975%209.975v0.035l-54.541%200.0288-12.592-12.598-25.279-25.274h92.421l9.995%209.995%209.9812-9.995h55.625v25.22h12.598v-25.22h25.21zm0%2012.608h-12.608v12.612c-4.2038%204.19-8.4038%208.3988-12.602%2012.598h-12.598l-0.01%2012.602h0.01l12.598-0.009v-12.594c4.1988-4.2038%208.4038-8.3938%2012.602-12.598%204.2038%200%208.4038-0.01%2012.608-0.01v-12.602zm-50.41%200h-37.798l-6.3%206.2988%206.3388%206.3338%2037.759-0.01v-12.622zm-68.222%200h-57.515l12.661%2012.661%2044.8-0.01%206.3525-6.3525-6.2988-6.2988zm47.216%2050.401%2010.502%2010.512c-1.1075%201.0788-2.2112%202.1925-3.305%203.305%201.1138-1.0988%202.2212-2.1962%203.305-3.305l10.514%2010.502-0.01-21.006-21.006-0.009zm71.416%200.009h-12.628l-0.005%2037.759%206.3338%206.3338%206.2988-6.2988v-37.794zm-6.2988%2061.92-6.3525%206.3525-0.01%2044.799%2012.661%2012.661v-57.514l-6.2988-6.2988z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28890%2C1620%29%20scale%280.47850%29%20translate%28-377.585%2C-339.425%29%22%3E%3Cpath%20d%3D%22m594.86%20579.17%2012.592-0.01%200.01-12.598v-25.21h-25.22v-12.592h25.22v-55.625l-9.995-9.985%209.995-9.99v-92.422l-37.871%2037.871%200.03%2054.541h0.0387l9.97%209.975-10%2010.01%200.02%2043.018h-12.588v-50.4l-31.519%2031.499-31.494%2031.519h50.4v12.582l-43.022-0.0137-10.01%2010-9.975-9.9762v-0.0337l-54.541-0.03-12.592%2012.598-25.279%2025.274h92.421l9.995-9.995%209.9812%209.995h55.625v-25.22h12.598v25.22h25.21zm0-12.608h-12.608v-12.612c-4.2038-4.1888-8.4038-8.3975-12.602-12.598h-12.598l-0.01-12.602h0.01l12.598%200.01v12.592c4.1988%204.205%208.4038%208.3938%2012.602%2012.598%204.2038%200%208.4038%200.01%2012.608%200.01v12.602zm-50.41%200h-37.798l-6.3-6.2988%206.3388-6.3325%2037.759%200.01v12.621zm-68.222%200h-57.515l12.661-12.661%2044.8%200.01%206.3525%206.3525-6.2988%206.2988zm47.216-50.4%2010.502-10.512c-1.1075-1.0788-2.2112-2.1925-3.305-3.3062%201.1138%201.0988%202.2212%202.1975%203.305%203.3062l10.514-10.504-0.01%2021.006-21.006%200.01zm71.416-0.01h-12.628l-0.005-37.759%206.3338-6.3325%206.2988%206.2988v37.792zm-6.2988-61.919-6.3525-6.3525-0.01-44.8%2012.661-12.661v57.515l-6.2988%206.2988z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%2C1620%29%20scale%280.47850%29%20translate%28-147.7%2C-339.425%29%22%3E%3Cpath%20d%3D%22m160.31%20579.17-12.598-0.01-0.01-12.598v-25.21h25.22v-12.592h-25.22v-55.625l9.9962-9.985-9.9962-9.99v-92.422l25.279%2025.274%2012.592%2012.598-0.0238%2054.541h-0.0387l-9.9762%209.975%2010.005%2010.01-0.02%2043.018h12.589v-50.4l31.514%2031.499%2031.499%2031.519h-50.4v12.582l43.018-0.0137%2010.014%2010%209.9712-9.9762v-0.0337l54.541-0.03%2037.871%2037.871h-92.418l-9.995-9.995-9.985%209.995h-55.62v-25.22h-12.599v25.22h-25.21zm0-12.608h12.602v-12.612c4.21-4.1888%208.4088-8.3975%2012.608-12.598h12.594l0.009-12.602h-0.009l-12.594%200.01v12.592c-4.1988%204.205-8.4075%208.3938-12.608%2012.598-4.1988%200-8.4025%200.01-12.602%200.01v12.602zm50.411%200h37.792l6.2988-6.2988-6.3325-6.3325-37.759%200.01v12.621zm68.218%200h57.514l-12.66-12.661-44.795%200.01-6.3525%206.3525%206.2938%206.2988zm-47.212-50.4-10.502-10.512c1.1088-1.0788%202.2112-2.1925%203.305-3.3062-1.1125%201.0988-2.2212%202.1975-3.305%203.3062l-10.512-10.504%200.01%2021.006%2021.005%200.01zm-71.416-0.01h12.622l0.01-37.759-6.3338-6.3325-6.2988%206.2988v37.792zm6.2988-61.919%206.3538-6.3525%200.009-44.8-12.661-12.661v57.515l6.2988%206.2988z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201730%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22%23000%22%3E%3Cg%20transform%3D%22translate%280%2C0%29%20scale%280.47850%29%20translate%28-147.7%2C-99.68%29%22%3E%3Cpath%20d%3D%22m160.31%2099.68-12.598%200.01-0.01%2012.598v25.21h25.22v12.594h-25.22v55.625l9.9962%209.985-9.9962%209.99v92.421l25.279-25.272%2012.592-12.598-0.0238-54.541h-0.0387l-9.9762-9.9762%2010.005-10.009-0.02-43.019h12.589v50.401l31.514-31.499%2031.499-31.519h-50.4v-12.584l43.018%200.015%2010.014-10%209.9712%209.975v0.035l54.541%200.0288%2037.871-37.871h-92.418l-9.995%209.995-9.985-9.995h-55.62v25.22h-12.599v-25.22h-25.21zm0%2012.608h12.602v12.612c4.21%204.19%208.4088%208.3988%2012.608%2012.598h12.594l0.009%2012.602h-0.009l-12.594-0.009v-12.594c-4.1988-4.2038-8.4075-8.3938-12.608-12.598-4.1988%200-8.4025-0.01-12.602-0.01v-12.602zm50.411%200h37.792l6.2988%206.2988-6.3325%206.3338-37.759-0.01v-12.622zm68.218%200h57.514l-12.66%2012.661-44.795-0.01-6.3525-6.3525%206.2938-6.2988zm-47.212%2050.401-10.502%2010.512c1.1088%201.0788%202.2112%202.1925%203.305%203.305-1.1125-1.0988-2.2212-2.1962-3.305-3.305l-10.512%2010.502%200.01-21.006%2021.005-0.009zm-71.416%200.009h12.622l0.01%2037.759-6.3338%206.3338-6.2988-6.2988v-37.794zm6.2988%2061.92%206.3538%206.3525%200.009%2044.799-12.661%2012.661v-57.514l6.2988-6.2988z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28890%2C0%29%20scale%280.47850%29%20translate%28-377.585%2C-99.68%29%22%3E%3Cpath%20d%3D%22m594.86%2099.68%2012.592%200.01%200.01%2012.598v25.21h-25.22v12.594h25.22v55.625l-9.995%209.985%209.995%209.99v92.421l-37.871-37.87%200.03-54.541h0.0387l9.97-9.9762-10-10.009%200.02-43.019h-12.588v50.401l-31.519-31.499-31.494-31.519h50.4v-12.584l-43.022%200.015-10.01-10-9.975%209.975v0.035l-54.541%200.0288-12.592-12.598-25.279-25.274h92.421l9.995%209.995%209.9812-9.995h55.625v25.22h12.598v-25.22h25.21zm0%2012.608h-12.608v12.612c-4.2038%204.19-8.4038%208.3988-12.602%2012.598h-12.598l-0.01%2012.602h0.01l12.598-0.009v-12.594c4.1988-4.2038%208.4038-8.3938%2012.602-12.598%204.2038%200%208.4038-0.01%2012.608-0.01v-12.602zm-50.41%200h-37.798l-6.3%206.2988%206.3388%206.3338%2037.759-0.01v-12.622zm-68.222%200h-57.515l12.661%2012.661%2044.8-0.01%206.3525-6.3525-6.2988-6.2988zm47.216%2050.401%2010.502%2010.512c-1.1075%201.0788-2.2112%202.1925-3.305%203.305%201.1138-1.0988%202.2212-2.1962%203.305-3.305l10.514%2010.502-0.01-21.006-21.006-0.009zm71.416%200.009h-12.628l-0.005%2037.759%206.3338%206.3338%206.2988-6.2988v-37.794zm-6.2988%2061.92-6.3525%206.3525-0.01%2044.799%2012.661%2012.661v-57.514l-6.2988-6.2988z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28890%2C1620%29%20scale%280.47850%29%20translate%28-377.585%2C-339.425%29%22%3E%3Cpath%20d%3D%22m594.86%20579.17%2012.592-0.01%200.01-12.598v-25.21h-25.22v-12.592h25.22v-55.625l-9.995-9.985%209.995-9.99v-92.422l-37.871%2037.871%200.03%2054.541h0.0387l9.97%209.975-10%2010.01%200.02%2043.018h-12.588v-50.4l-31.519%2031.499-31.494%2031.519h50.4v12.582l-43.022-0.0137-10.01%2010-9.975-9.9762v-0.0337l-54.541-0.03-12.592%2012.598-25.279%2025.274h92.421l9.995-9.995%209.9812%209.995h55.625v-25.22h12.598v25.22h25.21zm0-12.608h-12.608v-12.612c-4.2038-4.1888-8.4038-8.3975-12.602-12.598h-12.598l-0.01-12.602h0.01l12.598%200.01v12.592c4.1988%204.205%208.4038%208.3938%2012.602%2012.598%204.2038%200%208.4038%200.01%2012.608%200.01v12.602zm-50.41%200h-37.798l-6.3-6.2988%206.3388-6.3325%2037.759%200.01v12.621zm-68.222%200h-57.515l12.661-12.661%2044.8%200.01%206.3525%206.3525-6.2988%206.2988zm47.216-50.4%2010.502-10.512c-1.1075-1.0788-2.2112-2.1925-3.305-3.3062%201.1138%201.0988%202.2212%202.1975%203.305%203.3062l10.514-10.504-0.01%2021.006-21.006%200.01zm71.416-0.01h-12.628l-0.005-37.759%206.3338-6.3325%206.2988%206.2988v37.792zm-6.2988-61.919-6.3525-6.3525-0.01-44.8%2012.661-12.661v57.515l-6.2988%206.2988z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%2C1620%29%20scale%280.47850%29%20translate%28-147.7%2C-339.425%29%22%3E%3Cpath%20d%3D%22m160.31%20579.17-12.598-0.01-0.01-12.598v-25.21h25.22v-12.592h-25.22v-55.625l9.9962-9.985-9.9962-9.99v-92.422l25.279%2025.274%2012.592%2012.598-0.0238%2054.541h-0.0387l-9.9762%209.975%2010.005%2010.01-0.02%2043.018h12.589v-50.4l31.514%2031.499%2031.499%2031.519h-50.4v12.582l43.018-0.0137%2010.014%2010%209.9712-9.9762v-0.0337l54.541-0.03%2037.871%2037.871h-92.418l-9.995-9.995-9.985%209.995h-55.62v-25.22h-12.599v25.22h-25.21zm0-12.608h12.602v-12.612c4.21-4.1888%208.4088-8.3975%2012.608-12.598h12.594l0.009-12.602h-0.009l-12.594%200.01v12.592c-4.1988%204.205-8.4075%208.3938-12.608%2012.598-4.1988%200-8.4025%200.01-12.602%200.01v12.602zm50.411%200h37.792l6.2988-6.2988-6.3325-6.3325-37.759%200.01v12.621zm68.218%200h57.514l-12.66-12.661-44.795%200.01-6.3525%206.3525%206.2938%206.2988zm-47.212-50.4-10.502-10.512c1.1088-1.0788%202.2112-2.1925%203.305-3.3062-1.1125%201.0988-2.2212%202.1975-3.305%203.3062l-10.512-10.504%200.01%2021.006%2021.005%200.01zm-71.416-0.01h12.622l0.01-37.759-6.3338-6.3325-6.2988%206.2988v37.792zm6.2988-61.919%206.3538-6.3525%200.009-44.8-12.661-12.661v57.515l6.2988%206.2988z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%;
}

/* ---------- the ghosting (D12): colour only, never geometry ---------- */

/* One attribute write on the page drives the whole effect; the per-ayah `.on` writes come
   from the prebuilt focusIndex, so a change costs O(words in two ayat), not O(page).
   The (line x ayah) segment is the index entry, not a wrapper element: every word is already
   its own flex item, so a wrapper would buy nothing and `display: contents` on it costs the
   straightforward colour transition (04-architecture §2.2 puts the key on the word). */
.w { transition: color .18s linear; }
.mushaf[data-focus] .w { color: var(--ghost); }
/* HZ-35: an ayah already recited on this page keeps a faint trace — more than resting ink,
   less than the current ayah. Declared before `.on` so the focus wins when she steps back. */
.mushaf[data-focus] .w.done { color: var(--ghost-done); }
.mushaf[data-focus] .w.on { color: var(--script); }

.msg { margin: 16px auto; max-width: 30ch; color: var(--rubric); text-align: center; }

/* ---------- footer strip and bottom bar (D13) ---------- */

.foot {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  min-height: 56px;
  background: var(--shell);
  border-top: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.arrow {
  min-width: 56px;
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--rubric);
  font: 400 30px/1 var(--ui);
  cursor: pointer;
}
.arrow:active { background: var(--press); }
/* WCAG exempts disabled text; a 70-year-old reader does not. --rule was 1.34:1 (07 §a dim. 8).
   --ink-soft clears 4.5:1 on every step, and the gold-to-grey hue shift is what reads as off. */
.arrow:disabled { color: var(--ink-soft); cursor: default; }
.arrow[aria-pressed="true"] { color: var(--focus); }
#whole { font-size: 24px; }
.pageno { min-width: 3.5em; color: var(--rubric); font: 700 26px/1 var(--ui); font-variant-numeric: tabular-nums; text-align: center; }
.pageno.done { padding-bottom: 3px; border-bottom: 2px solid var(--rubric); }

.bottom {
  flex: 0 0 auto;
  /* 16px either side: D13's 343 x 72 at 375 px, and the HK guide's padding-as-error-prevention */
  padding: 0 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--shell);
}
.start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 72px;
  border: 0;
  border-radius: 14px;
  background: var(--focus);
  color: #fff;
  font: 800 24px/1 var(--ui);
  cursor: pointer;
}
/* white on this grey was 2.88:1 (07 §a dim. 8). The grey stays - it is already the "off" shape -
   and the label switches to page ink: 5.85:1 bright/dim, 6.30:1 lamp. */
.start:disabled { background: #8f9b96; color: var(--script); cursor: default; }
/* loading and playing: the bar is inert but must not read as broken, so it keeps its colour
   and only loses light (01-ux-flow §2.5, "disabled and at 70% opacity"). It keeps the white
   label too - the dark label above is for the grey bar only. */
.start.quiet:disabled { background: var(--focus); opacity: .7; color: #fff; }
.start.count { font-size: 34px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* HZ-36: replay leading, undo-one-count trailing, never adjacent along the thumb arc (§4.4) */
.pair { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; padding: 8px 0; }
.pill {
  flex: 0 1 auto;
  min-width: 100px;
  max-width: 48%;
  min-height: 56px;
  padding: 6px 10px;
  border: 2px solid var(--rubric);
  border-radius: 12px;
  background: var(--paper);
  color: var(--rubric);
  font: 700 20px/1.2 var(--ui);
  white-space: normal;
  cursor: pointer;
}
.pill:active { background: var(--press); }
.pill:disabled { border-color: var(--rule); color: var(--ink-soft); cursor: default; }  /* was --rule: 1.34:1 */
/* HZ-72: her section, in ayah numbers, above the bar. --rubric because it is a marginal mark -
   something we put on the page, not something the Complex printed (02-visual 2.1). */
.sect { margin: 0 0 6px; color: var(--rubric); font: 700 20px/1.3 var(--ui); text-align: center; }
.hint { margin: 6px 0 0; color: var(--ink-soft); font-size: 20px; text-align: center; }

/* HZ-37/38: the one card block. Page-complete hides the bar; the two error cards leave it. */
.card {
  flex: 0 0 auto;
  padding: 14px 8px;
  background: var(--shell);
  border-top: 1px solid var(--rule);
}
.card-t { margin: 0 0 14px; font: 700 26px/1.35 var(--ui); text-align: center; }
.card-btns { display: flex; flex-direction: column; gap: 10px; }
.card-btns .wide {
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  border: 2px solid var(--rubric);
  border-radius: 14px;
  background: var(--paper);
  color: var(--rubric);
  font: 700 22px/1.25 var(--ui);
  cursor: pointer;
}
.card-btns .wide:active { background: var(--press); }

/* ---------- settings / export / About sheet (HZ-40/55/61) ---------- */

.sheet {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--paper);
}
.sgroup { padding: 10px 0 14px; border-bottom: 1px solid var(--rule); }
.slabel { margin: 0 0 8px; font: 400 26px/1.3 var(--ui); }
.sdesc { margin: 0 0 10px; color: var(--ink-soft); font-size: 20px; }

/* segmented choices, never a slider or a stepper: three 100px+ targets and nothing to drag
   (01-ux-flow §2.8). 68px tall, so every one clears the 56px floor on its own. */
.segs { display: flex; flex-wrap: wrap; gap: 10px; }
.seg {
  flex: 1 1 0;
  min-width: 100px;
  min-height: 68px;
  padding: 8px 10px;
  border: 2px solid var(--rubric);
  border-radius: 12px;
  background: var(--paper);
  color: var(--rubric);
  font: 700 22px/1.25 var(--ui);
  cursor: pointer;
}
/* HZ-71: fourteen voices, so the list is two columns of full-width rows rather than three
   squeezed segments - and 20px, not 22, because 'Mahmoud Khalil Al-Husary' has to sit on two
   lines in half a 375px screen and stay above the type floor. */
.segs.two .seg { flex: 1 1 calc(50% - 5px); min-width: 0; font-size: 20px; }
.seg:active { background: var(--press); }
.seg[aria-pressed="true"] { border-color: var(--focus); background: var(--focus); color: #fff; }

/* a whole-row control: the label is the target, so there is no small switch to hit */
.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--script);
  font: 400 26px/1.3 var(--ui);
  text-align: start;
  cursor: pointer;
}
.srow:active { background: var(--press); }
.sstate { flex: 0 0 auto; color: var(--rubric); font: 700 22px/1.2 var(--ui); }
.srow[aria-pressed="true"] .sstate { color: var(--focus); }

.ta {
  display: block;
  width: 100%;
  min-height: 220px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  color: var(--script);
  font: 400 22px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: none;
}
.about { margin: 0 0 18px; font-size: 22px; }
.credit { margin: 0 0 12px; color: var(--ink-soft); font-size: 20px; }

/* ---------- tracker (HZ-73) ---------- */

/* Thirty small sheets of the same paper: the same gold hairline as the big sheet, the same cream.
   `auto-fit` with a 56px floor means no tile can fall under the target size at any width - at
   375px that lands on five across and six down. */
.jmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; margin: 0 0 20px; }
.jtile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 4px 2px;
  border: 0;
  border-radius: 7px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--rubric);
  cursor: pointer;
}
.jtile:active { background: var(--press); }
/* The pages she has recited, rising from the foot of the tile the way a page fills. A tint of the
   same cartouche cream and NEVER a status colour: V1 says nothing here is a pass or a fail, so
   there is no red and no green on this screen. The number carries the same information in words
   through the tile's aria-label, so the fill is never the only carrier. */
/* The level line is a 1px gold-2 rule, not just the edge of the tint: the cartouche cream is a
   ~1.1:1 tint by design (07 §b) and a tint alone is not a readable gauge, while the hairline sits
   in the same 2.6-3.0 band as the sheet's companion rule. Same two tones, no new colour. */
.jfill { position: absolute; inset-inline: 0; bottom: 0; background: var(--cartouche); box-shadow: 0 -1px 0 var(--gold-2); }
.jno { position: relative; font: 700 22px/1.1 var(--ui); font-variant-numeric: tabular-nums; }
/* V2: the star for a juz she knew before the app existed - ink, in the rule's own gold */
.jstar { position: relative; color: var(--gold); font-size: 20px; line-height: 1.2; }
/* the two counts that only ever rise (V1), at the same step as a settings label */
.tline { margin: 0 0 10px; font: 400 26px/1.35 var(--ui); }
/* the last-revised list is the surah index's own row, inside the sheet's scroller rather than
   owning one of its own */
.rows.flat { flex: 0 0 auto; overflow: visible; background: none; }

/* ---------- review card (HZ-74) ---------- */

/* One invitation on the index, above the list. The ayah's opening words sit in the same cartouche
   the surah names use, in the page face: what she is being asked to recall looks like the book. */
.rcard { flex: 0 0 auto; padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.rcard-t { margin: 0 0 10px; color: var(--ink-soft); font-size: 20px; }
.rcard-ayah {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 7px;
  background: var(--cartouche);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 3px var(--cartouche),
    inset 0 0 0 4px var(--gold-2);
  color: var(--script);
  font: 400 26px/1.9 'UthmanicHafs';
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .scroll { scroll-behavior: auto; }
  .w, .line::before { transition: none !important; }
}