/* =====================================================================
   Memorize (memorize-brief §5): the practice (#practice, practice.js) and the six review dots. Ported from
   app/mock/memorize-practise.html; the app's .modal, .modal-head, .lib-titles, .segmented, .btn and .close-btn do the
   rest. Desktop: a centred dialog 600 px wide with a fixed height (it doesn't jump between steps); a phone: a full
   sheet, as the Library. Typing is offered on every screen size (Ji: "the typing option … will help").
   ===================================================================== */
dialog.practice { --lamp-tint: color-mix(in srgb, var(--lamp) 15%, var(--bg-elev)); max-width: 600px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.practice { --lamp-tint: color-mix(in srgb, var(--lamp) 16%, var(--bg-elev)); } }
:root[data-theme="dark"] dialog.practice { --lamp-tint: color-mix(in srgb, var(--lamp) 16%, var(--bg-elev)); }
@media (min-width: 700px) { dialog.practice { height: min(600px, calc(100vh - 48px)); height: min(600px, calc(100dvh - 48px)); } }
.practice .modal-head { padding: 20px 18px 8px 26px; }
.practice .lib-sub { font-variant-numeric: tabular-nums; }
.mz-pr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 26px 8px; }
.practice .segmented { margin: 4px 0 24px; }
.mz-pane { min-height: 300px; }
.mz-pane[aria-busy="true"] .mz-hint { animation: fade .3s var(--ease-out) both; }
.mz-v { margin: 0; font: 400 26px/1.55 var(--serif); letter-spacing: 0; color: var(--read); text-wrap: pretty; }
.mz-v .sc { font-variant-caps: small-caps; }
.mz-vn { margin: 0 .22em 0 .06em; font: 600 .48em/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--label-2); vertical-align: .6em; }
.mz-v > .mz-vn:first-child, .mz-v > .mz-w:first-child > .mz-vn:first-child { margin-left: 0; }
.mz-hint { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--label-2); }

/* ---------- Fade: a hidden word is a soft blank of its own width; tap it to peek ---------- */
.mz-gap { position: relative; display: inline; padding: 0 .12em; margin: 0 -.02em; border-radius: 0; background: none; box-shadow: inset 0 -1.5px 0 var(--label-3); color: transparent; font: inherit; letter-spacing: inherit; line-height: inherit; vertical-align: baseline; transition: background-color var(--d-2), color var(--d-2); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mz-gap:hover { background: var(--fill-3); }
.mz-gap.peek { color: var(--lamp-ink); background: var(--lamp-tint); box-shadow: none; }
.mz-gap:focus-visible { outline-offset: 1px; }
.mz-w { white-space: nowrap; }

/* ---------- First letters ---------- */
.mz-v.mz-fl { word-spacing: .3em; }
.mz-l { display: inline; padding: 0 .06em; border-radius: 6px; font: inherit; color: var(--read); letter-spacing: inherit; line-height: inherit; word-spacing: normal; transition: background-color var(--d-1); }
.mz-l:hover { background: var(--fill-2); }
.mz-l.peek { color: var(--lamp-ink); background: var(--lamp-tint); }

/* ---------- Recall: an empty space to say it into, with a text box ---------- */
.mz-blank { position: relative; display: grid; min-height: 156px; border-radius: 16px; border: 1.5px dashed var(--sep-2); transition: border-color var(--d-2), box-shadow var(--d-2); }
.mz-blank:focus-within { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
dialog.practice .mz-blank textarea { width: 100%; min-height: 152px; padding: 14px 16px; border: 0; border-radius: 14px; outline: none; resize: none; background: transparent; font: 400 21px/1.5 var(--serif); letter-spacing: 0; color: var(--read); }
.mz-blank textarea::placeholder { color: var(--label-3); }

/* ---------- the check: the verse with the missed words underlined in lamp, and what was typed ---------- */
.mz-miss { padding: 0; background: none; color: inherit; text-decoration: underline 2px var(--lamp-ink); text-underline-offset: .2em; text-decoration-skip-ink: none; }   /* lamp ink: the only visual sign of a missed word, so ≥ 3:1 */
.mz-score { margin: 16px 0 0; font: 600 15px/1.4 var(--sans); color: var(--label); font-variant-numeric: tabular-nums; }
.mz-typed { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--fill-3); }
.mz-typed p { margin: 0; font: 400 16px/1.5 var(--serif); color: var(--label-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mz-typed small { display: block; margin-bottom: 3px; font: 600 12px/1.3 var(--sans); color: var(--label-2); }
.mz-extra { text-decoration: line-through 1px var(--label-2); color: var(--label-2); }   /* struck lightly; the text and the line both ≥ 4.5:1 */

/* ---------- licensed texts: the publisher's line; a verse shown in the KJV instead ---------- */
.mz-pr-meta { margin-top: 20px; }
.mz-fb { display: flex; align-items: flex-start; gap: 7px; margin: 0; font: 400 13px/1.45 var(--sans); color: var(--label-2); }
.mz-fb > .i { flex: none; width: 15px; height: 15px; margin-top: 1px; stroke-width: 1.8; }
.practice .copyright.mz-copy { max-width: none; margin: 12px 0 0; padding-top: 12px; }
.mz-pr-meta > .mz-copy:first-child { margin-top: 0; }

/* ---------- the footer: what to do next ---------- */
.mz-pr-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 20px 26px; }
.mz-pr-foot .btn { height: 40px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.mz-pr-foot .btn .i { width: 16px; height: 16px; stroke-width: 2; }
.mz-pr-foot .btn:disabled { opacity: .55; }
.mz-pr-foot .mz-step { font-size: 13px; color: var(--label-2); }
.mz-pr-foot .mz-r { display: flex; gap: 8px; margin-left: auto; }
.mz-judge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
/* the labels may wrap ('Next review in about three months' on a narrow phone), so the buttons grow, never clip */
.mz-pr-foot .mz-judge .btn { height: auto; min-height: 58px; padding: 8px 12px; flex-direction: column; gap: 4px; border-radius: 16px; font-size: 16px; white-space: normal; }
.mz-judge .btn small { font: 500 12.5px/1.25 var(--sans); letter-spacing: -.005em; text-align: center; text-wrap: balance; }
.mz-judge .btn-gray small { opacity: .86; }   /* Not yet only: white on --accent-fill needs full strength for 4.5:1 */

/* ---------- the end of a practice ---------- */
.mz-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 300px; text-align: center; }
.mz-end .tile-i { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 4px; background: var(--lamp-tint); color: var(--lamp-ink); }
.mz-end .tile-i .i { width: 24px; height: 24px; stroke-width: 1.8; }
.mz-end h3 { margin: 0; font: 600 30px/1.15 var(--serif); letter-spacing: -.015em; }
.mz-end p { margin: 0; font-size: 16px; color: var(--label-2); }
.mz-end .mz-steps { margin-top: 6px; }
:is(.mz-end, .mz-heart) .mz-dry { font-size: 13px; color: var(--label-3); }
.mz-end .mz-dry { margin-top: 6px; }

/* ---------- Written on the heart: quiet; the verse, the line, the date and Proverbs 3:3 ---------- */
.mz-heart { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px 4px; }
.mz-heart .mz-v { font-size: 24px; }
.mz-heart hr { width: 48px; height: 1px; margin: 26px auto 22px; border: 0; background: var(--lamp); opacity: .7; }
.mz-heart .mz-wh { margin: 0; font: italic 500 22px/1.3 var(--serif); letter-spacing: 0; color: var(--lamp-ink); }
.mz-heart .mz-date { margin: 6px 0 0; font-size: 14px; color: var(--label-2); }
.mz-heart .mz-date + .mz-date { margin-top: 2px; }
.mz-heart blockquote { margin: 22px 0 0; font: italic 400 15px/1.5 var(--serif); letter-spacing: 0; color: var(--label-2); }
.mz-heart blockquote cite { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--sans); font-style: normal; }
.mz-heart .mz-dry { margin: 14px 0 0; }

/* ---------- review dots: six steps; done = lamp, due now = a lamp ring (Home and the Library use them too) ---------- */
.mz-steps { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mz-steps i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--label) 20%, transparent); }   /* --label here, so Home's night band gets light dots */
.mz-steps i.d { background: var(--lamp); }
.mz-steps i.n { background: none; box-shadow: inset 0 0 0 1.5px var(--lamp); }
.mz-steps.off i.d { background: var(--label-3); }
.mz-steps.off i.n { box-shadow: inset 0 0 0 1.5px var(--label-3); }

/* ---------- a phone: a full sheet, 44 px targets ---------- */
@media (max-width: 699px) {
  dialog.practice { width: 100%; max-width: none; height: calc(100vh - 10px); height: calc(100dvh - 10px); max-height: none; margin: auto 0 0; border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
  .practice .modal-head { padding: 16px 14px 6px 20px; }
  .mz-pr-body { padding: 4px 20px 8px; }
  .mz-v { font-size: 22px; }
  .mz-heart .mz-v { font-size: 21px; }
  .mz-pane { min-height: 0; }
  .mz-pr-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) 20px; }
  .mz-pr-foot .btn { height: 48px; padding: 0 22px; }
  .mz-pr-foot .mz-r { flex: 1; justify-content: flex-end; }
  .practice .segmented { height: 36px; }
  .practice .segmented > button::after { content: ""; position: absolute; inset: -6px 0; }   /* 32 + 12 = 44 px */
  /* touch: blanks and letters get 44 px targets (memorize-brief §5) on a 44 px line pitch, without overlapping a neighbour */
  .mz-v:has(.mz-gap) { line-height: 2; }
  .mz-v.mz-fl { word-spacing: .95em; line-height: 2; }
  .mz-gap { display: inline-block; min-width: 2em; text-align: center; line-height: 1.3; }
  .mz-gap::after { content: ""; position: absolute; inset: calc(50% - 22px) -2px; }
  .mz-l { position: relative; display: inline-block; min-width: .8em; text-align: center; }
  .mz-l::after { content: ""; position: absolute; inset: calc(50% - 22px); }
  .mz-blank { min-height: 132px; }
  dialog.practice .mz-blank textarea { min-height: 128px; font-size: 19px; }
}
@media (pointer: coarse) {
  .practice .close-btn { position: relative; }
  .practice .close-btn::after { content: ''; position: absolute; inset: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-gap, .mz-l, .mz-blank { transition: none; }
}
/* forced colours: a blank stays an outline (its word hidden until peeked); the dots and the missed words keep an edge */
@media (forced-colors: active) {
  .mz-gap { outline: 1px solid ButtonText; outline-offset: -1px; }
  .mz-gap:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .mz-gap > span { visibility: hidden; }
  .mz-gap.peek > span { visibility: visible; }
  .mz-blank { border-color: CanvasText; }
  .mz-steps i { forced-color-adjust: none; border: 1px solid CanvasText; }
  .mz-steps i.d { background: Highlight; }
  .mz-miss { text-decoration-color: Highlight; }
}

/* =====================================================================
   Library (memorize-brief §6, library.js memoryCard / memoryView): the home's Memory card and Library › Memory, the
   memory verse pinned (the Continue card's look), then Up next and Written on the heart. Ported from
   app/mock/memorize-library.html; the app's .lib-card, .lib-continue, .lc-*, .lib-cols, .lib-sec, .lh, .group, .cell,
   .navbar, .pc-title, .tile-i and .menu do the rest. Scoped to the Library dialog, so Home's rules stay its own.
   ===================================================================== */
dialog.library { --lamp-tint: color-mix(in srgb, var(--lamp) 15%, var(--bg-elev)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.library { --lamp-tint: color-mix(in srgb, var(--lamp) 16%, var(--bg-elev)); } }
:root[data-theme="dark"] dialog.library { --lamp-tint: color-mix(in srgb, var(--lamp) 16%, var(--bg-elev)); }
.library .sc { font-variant-caps: small-caps; }
.library .mz-when { font-weight: 500; color: var(--lamp-ink); }
.library .mz-when.calm { font-weight: 400; color: var(--label-2); }
/* the first words of a verse (a hint, not the whole text): no fade here, as these words are grey on a light cell and a
   fade takes them under 4.5:1; a narrow row ends in an ellipsis, never mid-word */
.library .mz-first { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- the home's card (after Study's, and laid out as it is) ---------- */
.lib-mem-card .lh > span:empty { display: none; }
.lib-mem-card .lh { flex-wrap: wrap; row-gap: 2px; }   /* a narrow phone: the count goes under 'Memory', never over it */
.lib-mem-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.lib-mem-card p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--label-2); max-width: 60ch; font-variant-numeric: tabular-nums; }
.lib-mem-card p b { font-weight: 600; color: var(--label); }
.lib-mem-card .btn { flex: none; }

/* ---------- Library › Memory: the title, and the memory verse pinned at the top ---------- */
.mz-vh { margin: 4px 0 16px; }
.mz-vh .pc-title { font-size: 28px; }
.mz-vh .pc-sub { margin-bottom: 0; }
.mz-cur { position: relative; grid-template-columns: minmax(0, 1fr) auto; }
.mz-cur .lc-t { font-size: 32px; }
.mz-cur .lc-q { display: block; -webkit-line-clamp: none; white-space: nowrap; font-size: 17px; min-height: 1.5em; }
.mz-cur .lc-s { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mz-cur .lc-s > * { white-space: nowrap; }
.mz-cur .lc-s.mz-when-l { margin-top: 4px; }   /* when, on a line of its own, as on Home */
.mz-cur .lc-s.mz-when-l:has(> .mz-when:empty) { display: none; }
.mz-cur .btn { height: 40px; padding: 0 22px; font-size: 15px; font-weight: 600; }
.mz-cur .btn .i { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- the groups: Up next and Written on the heart; a row opens its practice, ⋯ sits apart ---------- */
.mz-cols { margin-top: 6px; }
.mz-cols .lib-sec > .lh:first-child { margin-top: 20px; }
.mz-row { position: relative; }
.mz-row .cell { align-items: flex-start; padding-right: 58px; cursor: pointer; }
.mz-row .cell-title .mz-tr { font-weight: 500; color: var(--label-2); }
.mz-row .cell-sub.serif.mz-first { display: block; font-size: 15.5px; }
.mz-row .mz-meta { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--label-2); font-variant-numeric: tabular-nums; }
.mz-row .mz-meta > * { white-space: nowrap; }   /* the separator travels with what follows it, so it never ends a line */
.mz-dot { margin-right: 8px; }
.mz-more { position: absolute; top: 10px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--label-2); transition: background-color var(--d-1), color var(--d-1); }
.mz-more .i { width: 18px; height: 18px; }
.mz-more:hover, .mz-more[aria-expanded="true"] { background: var(--fill-2); color: var(--label); }
.mz-more:focus-visible { outline-offset: -2px; }
.menu.mz-menu { min-width: 200px; }

/* ---------- nothing memorized yet ---------- */
.mz-none { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 48px auto 0; max-width: 360px; text-align: center; }
.mz-none .tile-i { width: 52px; height: 52px; border-radius: 16px; background: var(--lamp-tint); color: var(--lamp-ink); }
.mz-none .tile-i .i { width: 26px; height: 26px; }
.mz-none h3 { margin: 4px 0 0; font: 600 19px/1.25 var(--display); letter-spacing: -.02em; }
.mz-none p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--label-2); }

@media (max-width: 699px) {
  .mz-vh .pc-title { font-size: 26px; }
  .mz-cur { grid-template-columns: minmax(0, 1fr); }
  .mz-cur .btn { width: 100%; height: 46px; }
  .mz-cur .lc-t { font-size: 28px; }
  .mz-more { top: 6px; right: 4px; width: 44px; height: 44px; }
  .mz-row .cell { padding-right: 50px; }
}
@media (pointer: coarse) {
  .mz-menu [role="menuitem"] { min-height: 44px; }
  /* Open Memory stays 28 px to look at; its tap area grows to 44 (alone on its row, so it overlaps nothing) */
  .lib-mem-card .btn { position: relative; }
  .lib-mem-card .btn::after { content: ""; position: absolute; inset: -8px 0; }
}