/* The reader (build 30, Reader Phase A). Colors are the Halachoo! tokens (brand.css, day / night, checked by tests/contrast.cjs);
   the prototype's hard-coded colors were reference only. Reading column ~680 px (Wide 820 px), Nunito Sans at the chosen size,
   line height 1.7; chapter title Fredoka ~32 px; section titles ~21 px. */
body.reader{max-width:none;padding:0}
html.rd-lock,html.rd-lock body{overflow:hidden}
.rd{--rd-size:17px;--rd-measure:680px;min-height:100vh;background:var(--hc-bg);color:var(--hc-text)}
.rd[data-measure=wide]{--rd-measure:820px}
.rd-skel,.rd-state{max-width:720px;margin:0 auto;padding:16px}

/* header: ✕ · kicker + title · Contents · Aa · Focus; the progress line on its lower edge */
.rd-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--hc-bg);
  border-bottom:1px solid var(--hc-border)}
.rd-kick{flex:1;min-width:0;line-height:1.2}
.rd-kick small{display:block;font-size:var(--hc-t13);color:var(--hc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-kick b{display:block;font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t17);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-head .hc-iconbtn{color:var(--hc-text)}
.rd-head .hc-iconbtn[aria-pressed=true],.rd-head .hc-iconbtn[aria-expanded=true]{background:var(--hc-tint-blue);color:var(--hc-primary)}
.rd-aa{font-family:var(--hc-display);font-weight:600;font-size:17px}
.rd-prog{position:absolute;left:0;right:0;bottom:-1px;height:3px}
.rd-prog span{display:block;height:100%;width:0;background:var(--hc-primary);transition:width .2s linear}
@media (prefers-reduced-motion:reduce){.rd-prog span{transition:none}}
:root[data-calm] .rd-prog span{transition:none}
/* Focus view: only ✕, contents and Aa stay (and the progress line) */
.rd[data-focus="1"] .rd-kick,.rd[data-focus="1"] #rd-focus{display:none}
.rd[data-focus="1"] #rd-toc{margin-left:auto}
.rd[data-focus="1"] .rd-head{padding:4px 12px;border-bottom-color:transparent}
.rd[data-focus="1"] .rd-acts .rd-lbl{display:none}

/* layout: desktop side panel (contents) + the centered reading column */
.rd-body{display:flex}
.rd-side{display:none}
.rd-main{flex:1;min-width:0;display:flex;justify-content:center}
.rd-col{width:100%;max-width:calc(var(--rd-measure) + 40px);padding:4px 20px 120px;font-size:var(--rd-size);line-height:1.7}
@media (min-width:1024px){
  .rd-side{display:block;position:sticky;top:61px;align-self:flex-start;width:300px;flex:none;height:calc(100vh - 61px);overflow-y:auto;
    padding:12px 10px 40px;border-right:1px solid var(--hc-border)}
  .rd[data-side=off] .rd-side,.rd[data-focus="1"] .rd-side{display:none}
  /* room on the left for the page markers */
  .rd-col{max-width:calc(var(--rd-measure) + 140px);padding:12px 32px 140px 108px}
}
.rd-sideh{font-family:var(--hc-display);font-size:var(--hc-t17);margin:4px 8px 8px}

/* the text */
.rd-zivi{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--hc-muted);font-family:var(--hc-display);font-size:var(--hc-t15)}
.rd-zivi img{width:56px;height:56px;object-fit:contain}
.rd-zivi:has(span:empty){display:none}
.rd-chk{font-family:var(--hc-display);font-weight:500;color:var(--hc-muted);font-size:var(--hc-t15);margin:20px 0 0}
.rd-ch{font-family:var(--hc-display);font-weight:600;font-size:32px;line-height:1.2;margin:2px 0 20px}
.rd-h2{font-family:var(--hc-display);font-weight:600;font-size:21px;line-height:1.3;margin:36px 0 2px}
.rd-h2 .rn{color:var(--hc-muted)}
.rd-h3{font-family:var(--hc-display);font-weight:600;font-size:18px;line-height:1.3;margin:22px 0 2px}
.rd-sec{scroll-margin-top:72px}
.rd-b{position:relative}
.rd-t{margin:0 0 .85em;overflow-wrap:break-word}
.rd-b.k-item .rd-t{padding-left:1.9em;text-indent:-1.9em}
.rd-b.k-item .num{font-weight:700}
.rd-b.k-heading .rd-t{font-family:var(--hc-body);font-weight:700;font-size:1em;margin:1.1em 0 .35em}
.rd-t [lang=he]{font-family:var(--hc-hebrew)}
.rd-pa{display:inline}

/* per-section actions: small, muted, right-aligned; 44 px targets */
.rd-acts{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:0 0 2px;font-size:var(--hc-t13);color:var(--hc-muted);
  user-select:none;-webkit-user-select:none}
.rd-acts .rd-lbl{margin-right:auto;font-family:var(--hc-display);font-weight:500}
.rd-act{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:none;
  color:var(--hc-primary);font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t13);cursor:pointer;text-decoration:none}
.rd-act svg{width:17px;height:17px}
.rd-act:hover{background:var(--hc-soft)}
.rd-act:disabled{color:var(--hc-muted)}

/* page markers: outside the text (no text nodes; the label is CSS), never selected or copied */
.rd-pm{float:right;position:relative;display:inline-flex;align-items:center;gap:4px;margin:2px 0 4px 10px;min-height:28px;padding:2px 9px;
  border:1px solid var(--hc-border);border-radius:999px;background:var(--hc-card);color:var(--hc-muted);font:600 13px/1 var(--hc-body);
  cursor:pointer;user-select:none;-webkit-user-select:none;text-indent:0}
.rd-pm::before{content:attr(data-label)}
.rd-pm::after{content:"";position:absolute;inset:-8px -6px}
.rd-pm svg{width:15px;height:15px;order:2}
.rd-pm.approx{border-style:dotted;font-weight:500}
.rd-pm.na{cursor:default}
.rd-pm:hover:not(.na){color:var(--hc-primary)}
@media (min-width:1024px){
  .rd-pm{float:none;position:absolute;left:-92px;top:0;margin:0;padding:3px 6px;border:0;background:none;min-height:24px;max-width:84px;white-space:normal;
    line-height:1.2;justify-content:flex-end;text-align:right}
  .rd-pm.approx{border:1px dotted var(--hc-border)}
}

/* gaps, end of chapter */
.rd-gap{background:var(--hc-warning-bg);color:var(--hc-warning);border-radius:var(--hc-r1);padding:10px 14px;margin:16px 0 0;font-size:var(--hc-t15);line-height:1.45}
.rd-end{margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--hc-border);text-align:center;font-size:var(--hc-t17);line-height:1.45}
.rd-end .rd-zivi{justify-content:center}
.rd-end .rd-zivi img{width:72px;height:72px}
.rd-end h2{font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t20);margin:12px 0 4px}
.rd-end .hc-btns{max-width:360px;margin:16px auto 0}

/* contents tree (side panel and sheet) */
.rd-tree,.rd-tsecs{list-style:none;margin:0;padding:0}
.rd-tchb{display:flex;gap:10px;align-items:center;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:none;
  color:var(--hc-text);font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t15);text-align:left;cursor:pointer;line-height:1.25}
.rd-tchb .n{min-width:22px;color:var(--hc-muted);font-weight:500}
.rd-tch.on>.rd-tchb{color:var(--hc-primary)}
.rd-tsecs{padding:0 0 6px 30px}
.rd-tsec{display:block;width:100%;min-height:44px;padding:8px 8px;border:0;border-radius:10px;background:none;color:var(--hc-text);
  font-family:var(--hc-body);font-size:var(--hc-t15);text-align:left;cursor:pointer;line-height:1.3}
.rd-tsec .rn{color:var(--hc-muted);font-weight:700}
.rd-tsec.sub{padding-left:22px;color:var(--hc-muted);font-size:var(--hc-t13)}
.rd-tsec.start{color:var(--hc-primary);font-weight:700}
.rd-tsec[aria-current]{background:var(--hc-tint-blue);color:var(--hc-primary);font-weight:700}
.rd-tsec[aria-current] .rn{color:var(--hc-primary)}
.rd-tchb:hover,.rd-tsec:hover{background:var(--hc-soft)}
.rd-sheet .hc-psheet{max-height:86vh}
.rd-sheetbody{overflow-y:auto;min-height:0}
.rd-switch{display:flex;align-items:center;gap:12px;min-height:56px;margin:12px 0 4px;font-weight:400;cursor:pointer}
.rd-switch input{width:44px;height:26px;flex:none;accent-color:var(--hc-primary)}
.rd-switch b{display:block;font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t15)}
.rd-switch small{display:block;color:var(--hc-muted);font-size:var(--hc-t13)}

/* page photo viewer: full screen, zoom / pan */
.rd-vhost{position:fixed;inset:0;z-index:60}
.rd-viewer{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--hc-soft)}
.rd-vbar{display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px);background:var(--hc-card);color:var(--hc-text);border-bottom:1px solid var(--hc-border)}
.rd-vbar b{font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t17)}
.rd-vsp{flex:1}
.rd-vstage{flex:1;position:relative;overflow:hidden;touch-action:none;cursor:grab}
.rd-vstage:active{cursor:grabbing}
.rd-vstage img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center;user-select:none;-webkit-user-drag:none;
  box-shadow:var(--hc-shadow-2);background:#fff}
.rd-vmsg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--hc-text);font-family:var(--hc-display);font-size:var(--hc-t17)}

/* the now-playing bar in the reader (no tabs under it) */
.rd .hc-mini{bottom:calc(12px + env(safe-area-inset-bottom))}

/* Home: the "Continue reading" card (beside the listening card; in its place when there is none) */
.hc-journey.hc-reading:not(.first){margin-top:12px}
.hc-reading .rd-art{width:56px;height:56px;flex:none;border-radius:16px;background:var(--hc-tint-gold);color:var(--hc-text);display:flex;
  align-items:center;justify-content:center}
.hc-reading .rd-art svg{width:30px;height:30px}
/* the contents tree inside a sheet: not the picker sheet's list rows */
.hc-psheet .rd-tree li button{justify-content:flex-start;gap:10px;min-height:44px;border-bottom:0;padding:8px;font-family:inherit}
.hc-psheet .rd-tree li .rd-tchb{font-family:var(--hc-display);font-weight:600}
.hc-psheet .rd-tree li .rd-tsec{display:block}
.hc-psheet .rd-tree li .rd-tsec.sub{padding-left:22px}

/* build 30a: with the now-playing bar on screen, the column ends above it (the last lines are never under the bar) */
body.has-mini .rd-col{padding-bottom:calc(120px + 76px + env(safe-area-inset-bottom))}
@media (min-width:1024px){body.has-mini .rd-col{padding-bottom:calc(140px + 76px)}}
.hc-mini .hc-miniclose{background:transparent;box-shadow:none;color:var(--hc-on-primary)}
.hc-mini .hc-miniclose:focus-visible{outline-color:var(--hc-on-primary)}

/* ---------- Saved Passages (build 31) ---------- */
/* markings in the text: spans cut from the block's own text; Highlight yellow, Study Later amber with an underline (amber wins
   where both cover the same words); the colours are tokens (brand.css --hc-hl / --hc-sl), checked by tests/contrast.cjs */
.rd-t .an{border-radius:0;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rd-t .an-hl{background:var(--hc-hl)}
.rd-t .an-sl{background:var(--hc-sl);box-shadow:inset 0 -2px 0 var(--hc-sl-line)}
.rd-t .an.rd-glow{outline:3px solid var(--hc-glow);outline-offset:2px;transition:outline-color 1.6s ease}
@media (prefers-reduced-motion:reduce){.rd-t .an.rd-glow{outline:none;transition:none}}
:root[data-calm] .rd-t .an.rd-glow{outline:none}

/* the selection toolbar: near the selection (floating); on iPhone / iPad a strip under it */
.rd-seltb{position:fixed;z-index:55;display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--hc-text);color:var(--hc-bg);
  box-shadow:var(--hc-shadow-2);user-select:none;-webkit-user-select:none}
.rd-seltb button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;
  color:inherit;font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t15);cursor:pointer}
.rd-seltb button svg{width:18px;height:18px}
.rd-seltb button:hover,.rd-seltb button:focus-visible{background:rgba(255,255,255,.14)}
.rd-seltb button:focus-visible{outline:2px solid var(--hc-gold);outline-offset:-2px}
.rd-seltb #rd-sel-hl svg{color:var(--hc-hl)}.rd-seltb #rd-sel-sl svg{color:var(--hc-sl)}
.rd-seltb.strip{justify-content:space-around}
.rd-seltb.strip button{flex:1;justify-content:center}

/* toast with an action */
.sv-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:flex;align-items:center;
  gap:12px;width:max-content;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border-radius:14px;background:var(--hc-text);color:var(--hc-bg);
  box-shadow:var(--hc-shadow-2);font-size:var(--hc-t15)}
body.has-mini .sv-toast{bottom:calc(86px + env(safe-area-inset-bottom))}
.sv-toast .tx{min-height:28px;display:flex;align-items:center}
.sv-tact{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:inherit;font-family:var(--hc-display);
  font-weight:700;font-size:var(--hc-t15);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}

/* the lists */
.sv-tabs{margin:4px 0 10px}
.sv-tabs button[role=tab][aria-selected=true]{background:var(--hc-primary);color:var(--hc-on-primary);font-weight:600}
.sv-tabs .n{display:inline-block;min-width:22px;padding:0 6px;margin-left:4px;border-radius:999px;background:rgba(0,0,0,.08);font-size:var(--hc-t13)}
.sv-filters{display:flex;flex-wrap:wrap;gap:0 8px}
.sv-filters .hc-seg{margin:0 0 8px;flex:1 1 150px}
.sv-filters .hc-seg button{min-height:40px;font-size:var(--hc-t13)}
.sv-row{display:flex;gap:8px;margin:0 0 10px;flex-basis:100%}
.sv-row input[type=search]{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--hc-border);border-radius:var(--hc-r1);
  background:var(--hc-card);color:var(--hc-text);font:inherit}
.sv-chpick{width:auto;flex:none;min-height:44px;max-width:46%}
.sv-list{display:flex;flex-direction:column;gap:10px}
.sv-empty{padding:28px 16px;border:1px dashed var(--hc-border);border-radius:var(--hc-r2);color:var(--hc-muted);text-align:center;line-height:1.5}
.sv-card{padding:12px 14px;border:1px solid var(--hc-border);border-left:4px solid var(--hc-hl);border-radius:var(--hc-r2);background:var(--hc-card);color:var(--hc-text);
  box-shadow:var(--hc-shadow-1)}
.sv-card.k-sl{border-left-color:var(--hc-sl-line)}
.sv-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.sv-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-weight:700;font-size:var(--hc-t13);color:var(--hc-text)}
.sv-chip svg{width:14px;height:14px}
.sv-chip.hl{background:var(--hc-hl)}.sv-chip.sl{background:var(--hc-sl)}
.sv-where{color:var(--hc-muted);font-size:var(--hc-t13)}
.sv-relink{padding:2px 9px;border-radius:999px;background:var(--hc-warning-bg);color:var(--hc-warning);font-weight:700;font-size:var(--hc-t13)}
.sv-quote{margin:8px 0;padding:0 0 0 10px;border-left:3px solid var(--hc-border);font-size:var(--hc-t15);line-height:1.5}
.sv-quote [lang=he]{font-family:var(--hc-hebrew)}
.sv-note{margin:6px 0;font-size:var(--hc-t15);color:var(--hc-text);white-space:pre-wrap}
.sv-note::before{content:"Note: ";font-weight:700}
.sv-date{display:block;color:var(--hc-muted);font-size:var(--hc-t13)}
.sv-acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.sv-act{min-height:44px;padding:0 12px;border:1px solid var(--hc-border);border-radius:999px;background:var(--hc-card);color:var(--hc-primary);
  font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t13);cursor:pointer}
.sv-act.primary{background:var(--hc-primary);border-color:var(--hc-primary);color:var(--hc-on-primary)}
.sv-act.danger{color:var(--hc-error)}
.sv-act:disabled{opacity:.5}
.sv-sheet textarea{width:100%;min-height:110px;padding:10px 12px;border:1px solid var(--hc-border);border-radius:var(--hc-r1);background:var(--hc-card);
  color:var(--hc-text);font:inherit;resize:vertical}
.sv-sheetbody,.rd-sheetbody{overflow-y:auto;min-height:0}
#rd-svpanel .sv-card{box-shadow:none}
.rd-side[data-mode=saved]{width:380px}
.hc-drow .hc-tile.t-gold{color:var(--hc-gold-text)}