@font-face{
    font-family:"Rashi";
    src:url("fonts/PFTRashi.ttf") format("truetype");
    font-display:swap;
    unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  }
  @font-face{
    font-family:"Heilig";
    src:url("fonts/OT Heilig.ttf") format("truetype");
    font-display:swap;
    unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  }
  @font-face{
    font-family:"Siddur";
    src:url("fonts/OT Sid Hei.ttf") format("truetype");
    font-display:swap;
    unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  }
  @font-face{
    font-family:"Hadassa";
    src:url("fonts/OT_HadasahVF.ttf") format("truetype");
    font-weight:400 700;
    font-display:swap;
    unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  }
  @font-face{
    font-family:"SBL Hebrew";
    src:url("fonts/SBLHebrew.woff") format("woff");
    font-weight:400;
    font-style:normal;
    font-display:swap;
    unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
  }
  :root{
    --ink:#2b2118;
    --parch:#f4ecdc;
    --gold:#9a7b3f;
    --line:#cdbd9a;
    --frame:#ffffff;
    /* Header height owned by CSS: .55rem×2 padding + 2.3rem buttons + 1px
       border + status-bar inset. The header pins its height to this and the
       panes pad by it, so they can never disagree — even if a stale cached
       app.js never runs (the old JS-published value left the panes padded
       60px under a ~103px header on notched iPhones). env() keeps it
       responsive to rotation without any JS. */
    --hdr-h:calc(3.4rem + 1px + env(safe-area-inset-top, 0px));
    /* Interface (chrome) font — home tiles, header, menus, settings, toasts
       and banners. Only the ENGLISH/Latin UI text changes to system sans-serif;
       Hebrew is deliberately left untouched. VilnaHebrew leads the stack and
       (via its Hebrew-only unicode-range) claims every Hebrew glyph, keeping it
       in the same serif as before, so Latin characters are the only ones that
       fall through to the sans-serif system fonts. */
    --ui-font:"VilnaHebrew",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  html.theme-dark{
    --ink:#ece2cc;
    --parch:#1a1611;
    --gold:#c9a85f;
    --line:#3a3024;
    --frame:#0f0d09;
  }
  /* ---------- Curated palettes ----------
     A second axis on top of the Light/Dark toggle. Each palette just
     re-tints the same five tokens, so nothing downstream needs new styles.
     "Parchment" is the default and lives in :root / .theme-dark above (no
     data-palette attribute). Sky and Coral override the tokens when
     html[data-palette=…] is set; the .theme-dark pair supplies their dark
     variant. Keep the dark --ink values here in sync with PALETTE_INK_RANGE
     in app.js (and the FOUC map in index.html), which drives the dark-mode
     Text Brightness slider. */
  html[data-palette="sky"]{
    --ink:#16303f;
    --parch:#e6f2fb;
    --gold:#1878b0;
    --line:#c2ddef;
    --frame:#ffffff;
  }
  html[data-palette="sky"].theme-dark{
    --ink:#d4e9f6;
    --parch:#0d1922;
    --gold:#48b2e6;
    --line:#213340;
    --frame:#081119;
  }
  html[data-palette="coral"]{
    --ink:#3a2420;
    --parch:#fdeee7;
    --gold:#d64e2a;
    --line:#f6cdbc;
    --frame:#fffaf8;
  }
  html[data-palette="coral"].theme-dark{
    --ink:#f3ddd2;
    --parch:#201310;
    --gold:#f47e5c;
    --line:#40261f;
    --frame:#150b09;
  }
  html[data-palette="sage"]{
    --ink:#1f3226;
    --parch:#e9f2ea;
    --gold:#3f8c5c;
    --line:#c6ddc9;
    --frame:#fbfefb;
  }
  html[data-palette="sage"].theme-dark{
    --ink:#d6ecdb;
    --parch:#101a13;
    --gold:#5cb57e;
    --line:#23342a;
    --frame:#0a120d;
  }
  html[data-palette="lavender"]{
    --ink:#2d2440;
    --parch:#efeaf8;
    --gold:#7a5cc0;
    --line:#d8cdee;
    --frame:#fdfbff;
  }
  html[data-palette="lavender"].theme-dark{
    --ink:#e2d9f4;
    --parch:#16111f;
    --gold:#a488e0;
    --line:#2e2640;
    --frame:#0d0913;
  }
  html[data-palette="rose"]{
    --ink:#3d1f2c;
    --parch:#fdeaf1;
    --gold:#d64e83;
    --line:#f6c9da;
    --frame:#fff8fb;
  }
  html[data-palette="rose"].theme-dark{
    --ink:#f6d9e5;
    --parch:#1f1017;
    --gold:#ec6ea0;
    --line:#3c2530;
    --frame:#150a0f;
  }
  html.theme-dark .accordion-body img,
  html.theme-dark #pdfWrap img{ filter:invert(1) hue-rotate(180deg) brightness(var(--img-brightness,1)); }
  /* Custom scrollbars on the scrollable areas. The OS default scrollbar is
     near-invisible against the white reader/page background in light mode
     (it only showed up in dark mode), so paint a gold thumb that reads
     clearly in both themes. */
  .home,#frameWrap,.hayom{
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
  }
  .home::-webkit-scrollbar,
  #frameWrap::-webkit-scrollbar,
  .hayom::-webkit-scrollbar{ width:10px;height:10px; }
  .home::-webkit-scrollbar-track,
  #frameWrap::-webkit-scrollbar-track,
  .hayom::-webkit-scrollbar-track{ background:transparent; }
  .home::-webkit-scrollbar-thumb,
  #frameWrap::-webkit-scrollbar-thumb,
  .hayom::-webkit-scrollbar-thumb{
    background:var(--gold);
    border-radius:8px;
  }
  /* Shiur scans are licensed content — block long-press save/callout, drag,
     and text-selection on the rendered page images across all views. */
  #pdfWrap img,
  .accordion-body img{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  /* Controlled rem root — 1rem = 16px on every device.
     Reader sizes (heFontSize, enFontSize, …) are already stored as rem in
     localStorage and applied via --he-size / --en-size. Without a fixed root,
     phone OS text-size settings change what those rem values render as, so the
     same saved +/- preference looks small on one phone and large on another.
     Stored preferences stay valid on the existing 0.25rem step grid; only the
     absolute pixel mapping is stabilized. */
  html{
    font-size:16px;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  html,body{height:100%}
  body{timeline-scope:--shiur-scroll;
    font-family:var(--ui-font);
    background:var(--parch);
    color:var(--ink);
    height:100vh; height:100svh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  /* wrapper that fills the space below the header; sections stack inside it */
  #screenWrap{
    flex:1;
    min-height:0;
    position:relative;
    overflow:hidden;
  }
  /* swappable body areas — absolutely stacked so home can sit behind reader
     during the swipe-back animation without a layout flash */
  .body{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
  }
  .body.active{display:flex}

  /* ---------- HOME ---------- */
  .home{
    overflow-y:auto;
    padding:calc(1.4rem + var(--hdr-h, 60px)) .8rem 2rem;
    align-items:center;
  }
  .tiles{
    width:100%;
    max-width:560px;
    display:flex;
    flex-direction:column;
    align-self:stretch;
    gap:1rem;
    /* Center with auto margins — not justify-content:center on a flex-grown
       child. Centered flex overflow clips equally top/bottom under the
       absolute header. Auto margins collapse to 0 when the list is taller
       than the pane. Portrait phones switch to .home-fit (equal slots +
       max type) via fitHomeTiles(). */
    margin-block:auto;
    margin-inline:auto;
  }
  .tile{
    font-family:var(--ui-font);
    background:var(--frame);
    color:var(--ink);
    border:1.5px solid var(--gold);
    border-radius:16px;
    padding:1.5rem 1rem;
    flex:0 0 auto;
    min-height:6.2rem;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:.25rem;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    transition:transform .12s, box-shadow .12s, background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  .tile:active{transform:scale(.97)}
  .tile .main{
    font-size:2.3rem;
    line-height:1.1;
    font-weight:400;
  }
  .tile .sub{
    font-size:1.15rem;
    color:var(--gold);
    line-height:1.1;
  }
  /* Two-column wrap on wider phones / tablets — tiles still flex-fit the row. */
  @media (min-width:520px){
    .tiles{
      flex-flow:row wrap;
    }
    .tile{
      flex:1 1 calc(50% - .5rem);
      max-width:calc(50% - .5rem);
    }
  }
  /* Portrait phone: equally divide the pane among visible buttons and size
     type via --home-* vars (set by fitHomeTiles to the largest scale that
     still shows every button without scrolling). Prefer tighter gaps between
     buttons over shrinking the padding inside each button. */
  .home.home-fit{
    overflow:hidden;
    padding:calc(.75rem + var(--hdr-h, 60px)) .8rem .9rem;
  }
  .home.home-fit .tiles{
    flex:1 1 auto;
    min-height:0;
    margin-block:0;
    gap:var(--home-gap, .55rem);
  }
  .home.home-fit .tile{
    flex:1 1 0;
    min-height:0;
    max-height:none;
    padding:var(--home-pad-y, 1.5rem) 1rem;
    border-radius:var(--home-radius, 16px);
    overflow:hidden;
  }
  /* Extra air above the title and below the subtitle only — keep the
     default title↔subtitle gap. */
  .home.home-fit .tile:has(.sub){
    padding-block:calc(var(--home-pad-y, 1.5rem) + var(--home-sub-extra, .32rem));
  }
  .home.home-fit .tile .main{font-size:var(--home-main, 2.3rem)}
  .home.home-fit .tile .sub{font-size:var(--home-sub, 1.15rem)}
  /* Edit mode adds side gutters so there's empty page to drag-scroll the list
     (edit-mode tiles use touch-action:none for dragging, so a scroll gesture
     can only start in the gutter). */
  @media (max-width:519px){
    body.editing-tiles .home{padding-left:2.75rem;padding-right:2.75rem}
    body.editing-tiles .tiles{gap:.6rem}
    body.editing-tiles .tile{padding:.7rem 1rem;min-height:3.1rem;border-radius:12px;flex:0 0 auto;max-height:none;overflow:visible}
    body.editing-tiles .tile .main{font-size:1.55rem}
    body.editing-tiles .tile .sub{font-size:.82rem}
  }

  /* ---------- Home-button edit mode (iPhone-style) ---------- */
  .edit-title{
    order:2;
    font-weight:700;
    font-size:1.02rem;
    color:var(--ink);
  }
  .edit-title[hidden]{display:none}
  /* Hide the day navigator while editing so a stray day-change can't reflow
     the grid mid-drag. */
  body.editing-tiles .center-stack .date-nav{display:none}

  .tile-edit{
    position:relative;
    cursor:grab;
    animation:tile-wobble .32s ease-in-out infinite alternate;
  }
  /* touch-action must also sit on the hit-tested descendants (the big Hebrew
     text fills the tile) — otherwise a touch that lands on a child span is
     claimed by the browser for scrolling and our drag gets pointercancel'd. */
  .tile-edit, .tile-edit *{touch-action:none}
  .tile-edit:nth-child(2n){animation-delay:-.14s;animation-duration:.30s}
  .tile-edit:nth-child(3n){animation-delay:-.23s;animation-duration:.36s}
  .tile-edit.tile-off{opacity:.42}
  .tile-edit.dragging{
    animation:none;
    box-shadow:0 10px 28px rgba(0,0,0,.32);
    opacity:.96;z-index:3;cursor:grabbing;
    transition:box-shadow .1s;   /* no transform transition — it must track the finger 1:1 */
  }
  .tile-edit .tile-grip{
    position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
    display:grid;place-items:center;color:var(--muted,#999);pointer-events:none;
  }
  .tile-grip .icon{width:1.15rem;height:1.15rem}
  /* Raised specificity so it wins over the later base `.switch{position:relative}`. */
  .tile-edit .tile-switch{
    position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  }
  @keyframes tile-wobble{
    from{transform:rotate(-.5deg)}
    to{transform:rotate(.5deg)}
  }
  @media (prefers-reduced-motion:reduce){
    .tile-edit{animation:none}
  }
  .edit-reset{
    order:3;flex:none;
    margin:.5rem auto 0;
    background:none;border:none;
    color:var(--gold);font-family:inherit;font-size:.85rem;font-weight:600;
    cursor:pointer;padding:.4rem .8rem;
    -webkit-tap-highlight-color:transparent;
  }
  .edit-reset:active{opacity:.55}
  .edit-reset[hidden]{display:none}

  /* ---------- READER ---------- */
  header{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .7rem;
    padding-top:calc(.55rem + env(safe-area-inset-top));
    border-bottom:1px solid var(--line);
    flex:none;
    height:var(--hdr-h);
    /* Smart header: overlays the panes and slides via transform so the
       motion is composited — animating layout (margin/height) reflows
       the scrolling content mid-gesture and feels janky. The panes pad
       their tops by var(--hdr-h) so content starts below the header.
       JS drives the translateY 1:1 with scroll deltas (no transition
       while tracking); .hdr-snap enables the transition only for the
       settle animation when a gesture ends. */
    position:absolute;
    top:0;left:0;right:0;
    z-index:1000;
    background:var(--parch);
    transform:translateY(calc(-1 * var(--hdr-off, 0px)));
    will-change:transform;
  }
  /* body.hdr-snap enables the settle transition on everything that follows
     the header offset (the header itself and the reading-progress bar). */
  .hdr-snap header,
  .hdr-snap #readingProgress{
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  /* In installed-PWA standalone mode the OS status bar overlays the page;
     this fixed strip stops content from showing through it while the header
     is hidden. Height collapses to 0 in a normal browser tab. */
  body::before{
    content:'';
    position:fixed;
    top:0;left:0;right:0;
    height:env(safe-area-inset-top, 0px);
    background:var(--parch);
    z-index:9;
    pointer-events:none;
  }
  @media (prefers-reduced-motion:reduce){
    .hdr-snap header,
    .hdr-snap #readingProgress{transition:none}
  }
  /* Home pinned to the visual LEFT, tools (classes + settings) to the visual
     RIGHT (RTL-safe). .hdr-tools carries the former .hdr-settings margin so
     the headphones and cog stay adjacent as a pair. */
  .hdr-menu{order:3; margin-inline-start:auto}
  .hdr-tools{
    order:1;
    margin-inline-end:auto;
    display:flex;
    align-items:center;
    gap:.1rem;
    flex:none;
  }
  .hdr-settings,.hdr-classes{/* order inherited from .hdr-tools */}
  .center-stack{
    order:2;
    display:flex;flex-direction:column;align-items:center;
    flex:1;min-width:0;
  }
  .date-nav{
    display:flex;
    align-items:center;
    gap:.5rem;
  }
  .date{
    font-size:1.3rem;
    font-weight:700;
    text-align:center;
    color:var(--ink);
    min-width:9.5ch;
    line-height:1.1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  /* Lock the date-nav arrows to their authored direction — without this,
     the RTL context mirrors «/» so they visually point the wrong way. */
  .date-nav button{
    display:grid;place-items:center;
    padding:0;
    direction:ltr;
    unicode-bidi:isolate;
  }
  /* subtle highlight when viewing a day other than today */
  .date.off-today{
    color:var(--gold);
    border-bottom:1px solid var(--gold);
  }
  header button{
    font-family:inherit;
    font-size:1.4rem;
    background:none;
    border:none;
    color:var(--gold);
    width:2.3rem;height:2.3rem;
    border-radius:0;
    cursor:pointer;
    line-height:1;
    transition:opacity .15s;
    flex:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  header button:active{opacity:.5;background:none;color:var(--gold)}
  #settingsBtn,
  #menuBtn,
  #classesBtn{display:inline-flex;align-items:center;justify-content:center}
  #settingsBtn[hidden],
  #menuBtn[hidden]{display:inline-flex;visibility:hidden}
  /* External classes link — styled like a header button; truly removed when
     hidden so it doesn't reserve a gap beside the cog. */
  #classesBtn{
    text-decoration:none;
    color:var(--gold);
    width:2.3rem;height:2.3rem;
    border-radius:0;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  #classesBtn:active{opacity:.5}
  #classesBtn[hidden]{display:none}
  #classesBtn .icon{width:1.25rem;height:1.25rem}
  /* Reader/Hayom: replace the cog with a compact אA type badge (Vilna + Arial). */
  .settings-type-badge{
    display:none;
    align-items:baseline;
    justify-content:center;
    gap:.1em;
    box-sizing:border-box;
    padding:.12rem .3rem .1rem;
    border:1px solid currentColor;
    border-radius:6px;
    line-height:1;
    color:var(--gold);
    pointer-events:none;
  }
  #settingsBtn.show-type .settings-btn-svg{display:none}
  #settingsBtn.show-type .settings-type-badge{display:inline-flex}
  .settings-type-he{
    font-family:var(--ui-font);
    font-size:1.14rem;
    font-weight:400;
  }
  .settings-type-en{
    font-family:Helvetica,sans-serif;
    font-size:.92rem;
    font-weight:400;
    margin-left:-2px;
  }
  /* icon helper */
  .icon{display:block;flex:none;width:1.15rem;height:1.15rem}
  /* Home button: match אA badge optical size; stroke stays thin via SVG stroke-width */
  #menuBtn .icon{width:1.5rem;height:1.5rem}
  .icon-btn-sm .icon{width:.85rem;height:.85rem}
  .chev .icon{width:.85em;height:.85em;display:inline-block;vertical-align:-.1em}

  /* settings popover — anchored just below the header, near the gear button */
  .settings-pop{
    position:absolute;
    top:calc(100% + 6px);
    right:.45rem;
    width:min(320px,calc(100vw - 1rem));
    max-height:60dvh;
    z-index:9999;
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,.28);
    display:flex;
    flex-direction:column;
    opacity:0;
    transform:translateY(-6px) scale(.97);
    transform-origin:top right;
    transition:opacity .18s ease,transform .18s ease;
    pointer-events:none;
  }
  .settings-pop.open{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .settings-pop[hidden]{display:none}
  .settings-sheet-scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:.6rem 1.2rem .9rem;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
  }
  .settings-sheet-scroll::-webkit-scrollbar{width:6px}
  .settings-sheet-scroll::-webkit-scrollbar-track{background:transparent}
  .settings-sheet-scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
  .settings-sheet-fade{
    position:absolute;
    left:0;right:0;bottom:0;
    height:3.5rem;
    background:linear-gradient(to bottom,transparent,var(--frame));
    pointer-events:none;
    border-radius:0 0 12px 12px;
    opacity:1;
    transition:opacity .2s;
  }
  .settings-sheet-fade.hidden-fade{opacity:0}
  /* ---------- Settings popover tabs (per-view popover) ----------
     A two-up segmented tab bar pinned above the scroll area: the view's own
     name on the left, General on the right. Hidden on the home popover, which
     shows a single flat list. */
  .settings-tabs{
    display:flex;
    flex:none;
    margin:.6rem 1.2rem 0;
    border:1px solid var(--gold);
    border-radius:8px;
    overflow:hidden;
  }
  .settings-tabs[hidden]{display:none}
  .settings-tab{
    flex:1;
    min-width:0;
    border:none;
    background:var(--frame);
    color:var(--ink);
    font-family:inherit;
    font-size:.88rem;
    font-weight:700;
    line-height:1.2;
    padding:.5rem .55rem;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:.12s;
  }
  .settings-tab + .settings-tab{border-inline-start:1px solid var(--line)}
  .settings-tab.active{background:var(--gold);color:var(--parch)}
  /* Untabbed (home / view with no own settings): panels flow together. Tabbed:
     only the active tab's panel shows. */
  .settings-pop.tabbed .settings-panel{display:none}
  .settings-pop.tabbed[data-active-tab="view"] .settings-panel[data-panel="view"]{display:block}
  .settings-pop.tabbed[data-active-tab="general"] .settings-panel[data-panel="general"]{display:block}
  /* Invisible full-screen tap-catcher shown while the settings popover is open.
     A tap anywhere over the page content dismisses the popover — including empty
     areas that never emit a document `click` on iOS Safari. It sits just below
     the header (z-index 1000, which owns the popover's stacking context) so the
     popover and the gear toggle stay above it and remain tappable. */
  #settingsOverlay{position:fixed;inset:0;z-index:999;display:none}
  #settingsOverlay.open{display:block}
  .settings-row{margin-bottom:.7rem}
  .settings-row:last-child{margin-bottom:0}
  .settings-row[hidden]{display:none}
  .settings-row#settingsAccount{text-align:center}
  /* Compact Reset — bottom of each settings tab; not full-width. */
  .settings-reset-row{
    display:flex;justify-content:flex-end;
    margin-top:.85rem;padding-top:.65rem;border-top:1px solid var(--line);
  }
  .settings-reset-row[hidden]{display:none}
  .settings-reset{
    flex:none;width:auto;margin:0;
    font-family:inherit;font-size:.72rem;font-weight:700;
    padding:.32rem .8rem;
    background:transparent;color:var(--ink);
    border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));
    border-radius:6px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .settings-reset:active{opacity:.55}
  /* .seg sets display:flex, which beats the UA [hidden] rule in some WebKits
     (notably iOS Safari). Keep every layout/seg control truly hidden when the
     attribute is set — otherwise a leftover Seg (e.g. Hayom Yom's) leaks into
     every other view's Layout popover. */
  .seg[hidden]{display:none}
  .settings-group[hidden]{display:none}
  /* English-language settings rows (Hayom: theme, toggles, birthday, family)
     read left-to-right in a plain UI sans-serif rather than the site's Hebrew serif. */
  #settingsPop [dir="ltr"],
  #bdayOverlay .picker{
    font-family:var(--ui-font);
  }
  [dir="ltr"] .switch input:checked + .switch-track .switch-thumb{transform:translateX(1.25rem)}
  .settings-label{
    font-size:.9rem;color:var(--ink);opacity:.8;margin-bottom:.4rem;text-align:center;
  }
  .size-stepper{
    display:flex;align-items:center;border:1px solid var(--gold);border-radius:8px;overflow:hidden;
  }
  .size-stepper button{
    flex:none;width:2.6rem;height:2.2rem;
    background:var(--frame);border:none;
    font-size:1.4rem;font-weight:300;line-height:1;
    color:var(--gold);cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .size-stepper button:active{opacity:.5}
  .size-stepper button:disabled{opacity:.22;cursor:default}
  /* Each font-size stepper shows the letter it resizes: the small glyph
     shrinks, the large glyph grows. Hebrew rows carry א, English rows A, and
     the "All Text Size" stepper carries the paired אA of the header config
     badge (the one control that moves both scripts at once). Vilna claims the
     alef via its unicode-range; Helvetica gives the Latin A its own weight —
     mirroring .settings-type-he / .settings-type-en on the badge. */
  .size-stepper button{display:inline-flex;align-items:center;justify-content:center}
  .sz-glyph{line-height:1;display:inline-block}
  .sz-he{font-family:var(--ui-font);font-weight:400}
  .sz-en{font-family:Helvetica,Arial,sans-serif;font-weight:400}
  /* Optical centering: Vilna reserves descent room the alef never uses, so a
     line-box-centered alef reads high — nudge the single Hebrew glyph down to
     the row's true middle (em-relative, so it tracks font-size). Helvetica's A
     is already balanced by the flex centering and needs no nudge. The paired
     אA of the global stepper aligns on its own baseline and is left alone. */
  .sz-glyph.sz-he{transform:translateY(.08em)}
  .sz-glyph.sz-he.sz-sm{font-size:1.02rem}
  .sz-glyph.sz-he.sz-lg{font-size:1.72rem}
  .sz-glyph.sz-en.sz-sm{font-size:.82rem}
  .sz-glyph.sz-en.sz-lg{font-size:1.42rem}
  .sz-pair{display:inline-flex;align-items:baseline;justify-content:center;gap:.08em;line-height:1}
  .sz-pair .sz-en{margin-left:-1px}
  .sz-pair.sz-sm .sz-he{font-size:.92rem}
  .sz-pair.sz-sm .sz-en{font-size:.72rem}
  .sz-pair.sz-lg .sz-he{font-size:1.42rem}
  .sz-pair.sz-lg .sz-en{font-size:1.06rem}
  .seg{
    display:flex;border:1px solid var(--gold);border-radius:8px;overflow:hidden;
  }
  .seg button{
    flex:1;width:auto;height:auto;border:none;border-radius:0;
    font-size:.95rem;font-weight:700;
    padding:.5rem .4rem;
    background:var(--frame);color:var(--ink);
    transition:.12s;
  }
  .seg button + button{border-inline-start:1px solid var(--line)}
  .seg button.active{background:var(--gold);color:var(--parch)}
  /* ---------- Palette picker (swatch chips) ----------
     A wrapping three-per-row chip grid in the home-screen settings popover.
     Each chip previews its palette's paper / ink / gold as a fixed mini colour
     bar (light-mode identity, set inline in the markup) so the choice reads
     the same whatever theme is active. */
  .pal-chips{display:flex;flex-wrap:wrap;gap:.5rem}
  .pal-chips button{
    flex:1 1 calc(33.333% - .5rem);height:40px;padding:3px;cursor:pointer;transition:.12s;
    background:var(--frame);border:1px solid var(--line);border-radius:9px;
  }
  .pal-chips .pal-sw{
    display:flex;width:100%;height:100%;border-radius:5px;overflow:hidden;
  }
  .pal-chips .pal-sw span{flex:1}
  .pal-chips button.active{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
  /* ---------- READER ---------- */
  .reader{flex-direction:column}
  /* Small right-side gutter so reader content (text lines / page images)
     doesn't butt up against the native overlay scrollbar iOS draws at the
     right edge. */
  #frameWrap{flex:1;min-height:0;overflow-y:auto;padding-top:var(--hdr-h, 60px);padding-right:2px;background:var(--frame);scroll-timeline:--shiur-scroll block}
  /* Tanya mode pager: horizontal snap between Original / דבר מלכות / HE.
     Each pane scrolls vertically on its own. When pinch-zoomed, .zoom-locked
     freezes the horizontal axis so pan stays inside the active page. */
  #frameWrap.tanya-modes{
    overflow:hidden;
    padding-top:0;
    padding-right:0;
  }
  #frameWrap.tanya-modes #zoomSurface{display:none}
  .tanya-carousel{
    display:flex;
    flex-direction:row;
    width:100%;
    height:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding:0;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    background:var(--frame);
  }
  .tanya-carousel[hidden]{display:none}
  .tanya-carousel.zoom-locked{overflow-x:hidden}
  .tanya-pane{
    flex:0 0 100%;
    width:100%;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    padding-top:var(--hdr-h, 60px);
    padding-right:2px;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  .tanya-zoom{width:100%;transform-origin:0 0;will-change:transform}
  .tanya-pdf{display:flex;flex-direction:column;align-items:stretch;min-height:100%;max-width:968px;width:100%;margin-inline:auto}
  .tanya-pdf img{display:block;width:100%}
  .tanya-pdf img + img{border-top:1px solid var(--line)}
  .tanya-pane #textWrap{max-width:968px;width:100%;margin-inline:auto}
  #readingProgress{
    position:fixed;
    top:calc(var(--hdr-h, 60px) - 1px);
    left:0;right:0;
    height:2px;pointer-events:none;z-index:11;overflow:hidden;
    display:none;
    background:var(--frame);
    /* Follows the header's bottom edge 1:1, but the min() clamp stops it at
       the top of the screen (below the safe-area strip in standalone mode)
       so the progress bar stays visible while the header is hidden. */
    transform:translateY(calc(-1 * min(var(--hdr-off, 0px), var(--hdr-h, 60px) - env(safe-area-inset-top, 0px) - 1px)));
    will-change:transform;
  }
  body:has(#reader.active) #readingProgress{display:block}
  #readingProgress::after{
    content:'';position:absolute;inset:0;
    background:var(--gold);opacity:.55;
    transform-origin:left;transform:scaleX(0);
    animation:read-progress linear both;
    animation-duration:auto;
    animation-timeline:--shiur-scroll;
  }
  @keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* Sticky scroll breadcrumb — same slide-with-header behavior as
     #readingProgress (see comment above it), docked just below the progress
     line. Only shown once JS has determined there's a passed heading to show. */
  #textBreadcrumb{
    display:none;
    position:fixed;
    top:calc(var(--hdr-h, 60px) + 1px);
    left:0;right:0;z-index:10;
    padding:.3rem 1rem;
    font-family:var(--he-font, inherit);
    font-size:.72rem;
    background:var(--frame);
    border-bottom:1px solid var(--line);
    opacity:0;
    transition:opacity .18s ease;
    transform:translateY(calc(-1 * min(var(--hdr-off, 0px), var(--hdr-h, 60px) - env(safe-area-inset-top, 0px) - 1px)));
    will-change:transform;
    pointer-events:none;
  }
  body:has(#reader.active) #textBreadcrumb{display:flex}
  body:has(#reader.active) #textBreadcrumb.crumb-visible{opacity:1}
  /* Multi-body shiurim: bar is tappable for the quick-jump menu. */
  #textBreadcrumb.crumb-has-nav{
    pointer-events:auto;
    cursor:pointer;
    gap:.15rem .25rem;
  }
  #textBreadcrumb.crumb-has-nav:active{background:color-mix(in srgb, var(--ink) 4%, var(--frame))}
  .crumb-row{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
    row-gap:.1rem;
  }
  .crumb-seg{color:var(--gold);opacity:.75}
  .crumb-seg.crumb-current{color:var(--ink);opacity:1;font-weight:600}
  .crumb-sep{color:var(--gold);opacity:.4;margin:0 .35em;font-size:.85em}
  .crumb-nav-chev{
    display:inline-flex;align-items:center;justify-content:center;
    margin-inline-start:.15rem;
    color:var(--gold);
    opacity:.7;
    transition:transform .18s ease, opacity .18s ease;
  }
  .crumb-nav-chev .icon{width:.7rem;height:.7rem}
  #textBreadcrumb.crumb-menu-open .crumb-nav-chev{transform:rotate(180deg);opacity:1}
  .crumb-menu{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    z-index:12;
    box-sizing:border-box;
    min-width:min(16rem, 86vw);
    max-width:min(22rem, 92vw);
    max-height:min(16rem, 50vh);
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--parch);
    border:1px solid var(--gold);
    border-radius:10px;
    box-shadow:0 8px 22px rgba(0,0,0,.22);
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
  }
  .crumb-menu[hidden]{display:none}
  .crumb-menu-opt{
    display:flex;align-items:center;gap:.55rem;width:100%;
    background:none;border:none;border-bottom:1px solid var(--line);
    padding:.55rem .75rem;cursor:pointer;color:var(--ink);
    font-family:var(--he-font, inherit);font-size:.9rem;text-align:start;
  }
  .crumb-menu-opt:last-child{border-bottom:none}
  .crumb-menu-opt:hover,
  .crumb-menu-opt:focus-visible{background:color-mix(in srgb, var(--gold) 14%, transparent);outline:none}
  .crumb-menu-opt.active{background:color-mix(in srgb, var(--gold) 22%, transparent);font-weight:600}
  .crumb-menu-label{flex:1;min-width:0;line-height:1.3}
  .crumb-menu-check{
    flex:0 0 auto;display:inline-flex;color:var(--gold);
  }
  .crumb-menu-check .icon{width:.85rem;height:.85rem}
  @media(prefers-color-scheme:dark){
    .crumb-menu{background:var(--frame)}
  }
  #zoomSurface{width:100%;transform-origin:0 0;will-change:transform}
  #pdfWrap{display:flex;flex-direction:column;align-items:stretch;min-height:100%;max-width:968px;width:100%;margin-inline:auto}
  #pdfWrap[hidden]{display:none}
  #pdfWrap img{display:block;width:100%}
  #pdfWrap img + img{border-top:1px solid var(--line)}
  #viewer{display:block;width:100%;height:100%;border:none;background:var(--frame)}
  #viewer[hidden]{display:none}
  .pdf-error{padding:2.4rem 1.2rem;text-align:center;color:var(--ink);opacity:.7;font-size:1rem}

  /* animated placeholder shown while the shiur fetch is in-flight */
  .page-loader{
    flex:1;
    width:100%;
    background:var(--frame);
    position:relative;
    overflow:hidden;
  }
  .page-loader::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
      90deg,
      transparent 0%,
      rgba(154,123,63,.18) 50%,
      transparent 100%
    );
    transform:translateX(-100%);
    animation:page-shimmer 1.6s ease-in-out infinite;
  }
  @keyframes page-shimmer{
    from{transform:translateX(-100%)}
    to{transform:translateX(100%)}
  }

  /* update-available toast */
  .update-toast{
    position:fixed;
    left:50%;
    bottom:1.1rem;
    transform:translateX(-50%);
    z-index:20;
    direction:ltr;
    display:flex;
    align-items:center;
    gap:.85rem;
    max-width:92vw;
    background:var(--frame);
    color:var(--ink);
    border:1px solid var(--gold);
    border-radius:12px;
    box-shadow:0 8px 26px rgba(0,0,0,.3);
    padding:.7rem .7rem .7rem 1rem;
    font-family:var(--ui-font);
    font-size:.92rem;
  }
  .update-toast[hidden]{display:none}
  .update-toast button{
    font-family:inherit;
    font-size:.88rem;
    font-weight:700;
    background:var(--gold);
    color:var(--parch);
    border:none;
    border-radius:8px;
    width:auto;height:auto;
    padding:.45rem 1rem;
    cursor:pointer;
    flex:none;
    line-height:1.1;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:opacity .15s;
  }
  .update-toast button:active{opacity:.6}

  /* Resume-where-you-left-off banner (see showResumeBanner in app.js). A
     top-centred pill just under the reader header; slides down + fades in
     on .show. z-index stays below the header so it never covers chrome. */
  .resume-banner{
    position:fixed;
    left:50%;
    top:calc(var(--hdr-h, 60px) + 0.55rem);
    transform:translateX(-50%) translateY(-0.75rem);
    z-index:19;
    display:flex;
    align-items:center;
    gap:.5rem;
    max-width:min(96vw,32rem);
    background:var(--frame);
    color:var(--ink);
    border:1px solid var(--gold);
    border-radius:999px;
    box-shadow:0 8px 26px rgba(0,0,0,.3);
    padding:.4rem .45rem .4rem .9rem;
    font-family:var(--ui-font);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .resume-banner.show{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .resume-banner[hidden]{display:none}
  .resume-text{
    font-size:.95rem;
    line-height:1.25;
    /* Keep the message on a single line. Shrink-to-fit (0 1 auto) so the pill
       hugs its content and stays centred; on a very narrow screen the text
       ellipsizes rather than wrapping or pushing the pill off-screen. */
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .resume-jump{
    display:inline-flex;
    align-items:center;
    gap:.2rem;
    flex:none;
    font-family:inherit;
    font-size:.95rem;
    font-weight:700;
    background:var(--gold);
    color:var(--parch);
    border:none;
    border-radius:999px;
    padding:.4rem .9rem;
    cursor:pointer;
    line-height:1.1;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:opacity .15s;
  }
  .resume-jump:active{opacity:.6}
  .resume-jump .icon{width:1.05em;height:1.05em}
  .resume-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:1.9rem;height:1.9rem;
    padding:0;
    background:transparent;
    color:var(--gold);
    border:none;
    border-radius:50%;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:opacity .15s;
  }
  .resume-close:active{opacity:.5}
  .resume-close .icon{width:1.15rem;height:1.15rem}

  /* Install prompt — a bottom-centred banner shown to browser (non-installed)
     users only; see the install block in app.js. Same theme as the update
     toast, with an optional second row of manual Home-Screen steps for iOS. */
  .install-banner{
    position:fixed;
    left:50%;
    bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%) translateY(1rem);
    z-index:18;
    direction:ltr;
    display:flex;
    flex-direction:column;
    gap:.55rem;
    width:max-content;
    max-width:92vw;
    background:var(--frame);
    color:var(--ink);
    border:1px solid var(--gold);
    border-radius:12px;
    box-shadow:0 8px 26px rgba(0,0,0,.3);
    padding:.7rem .7rem .7rem 1rem;
    font-family:var(--ui-font);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .install-banner.show{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .install-banner[hidden]{display:none}
  .install-main{
    display:flex;
    align-items:center;
    gap:.85rem;
  }
  .install-text{
    font-size:.92rem;
    line-height:1.25;
    flex:0 1 auto;
    min-width:0;
  }
  .install-action{
    font-family:inherit;
    font-size:.88rem;
    font-weight:700;
    background:var(--gold);
    color:var(--parch);
    border:none;
    border-radius:8px;
    width:auto;height:auto;
    padding:.45rem 1rem;
    cursor:pointer;
    flex:none;
    line-height:1.1;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:opacity .15s;
  }
  .install-action:active{opacity:.6}
  .install-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:1.9rem;height:1.9rem;
    padding:0;
    background:transparent;
    color:var(--gold);
    border:none;
    border-radius:50%;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:opacity .15s;
  }
  .install-close:active{opacity:.5}
  .install-close .icon{width:1.05rem;height:1.05rem}
  .install-steps{
    font-size:.86rem;
    line-height:1.35;
    color:var(--ink);
    opacity:.85;
    padding-inline-end:.3rem;
  }
  .install-steps[hidden]{display:none}
  .install-share{
    display:inline-block;
    width:1.05em;height:1.05em;
    vertical-align:-.18em;
    color:var(--gold);
  }

  /* picker */
  .overlay{
    position:fixed;inset:0;
    background:rgba(20,14,6,.55);
    display:none;
    align-items:center;justify-content:center;
    z-index:10000;
  }
  .overlay.open{display:flex}
  .picker{
    background:var(--parch);
    border:1px solid var(--gold);
    border-radius:10px;
    padding:1.2rem;
    width:min(92vw,360px);
    box-shadow:0 12px 40px rgba(0,0,0,.35);
  }
  .picker h2{
    font-size:1.2rem;font-weight:700;
    text-align:center;margin-bottom:1rem;color:var(--gold);
  }
  .picker label{
    display:block;font-size:.85rem;margin:.6rem 0 .25rem;color:var(--ink);
  }
  .picker select,.picker input[type="text"]{
    width:100%;
    font-family:inherit;font-size:1.1rem;
    padding:.5rem;
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--ink);
    color-scheme:light dark;
  }
  .picker input[type="text"],#bdayDay{direction:rtl}
  .picker .actions{
    display:flex;gap:.6rem;margin-top:1.2rem;
  }
  .picker .actions button{
    flex:1;width:auto;height:auto;border-radius:6px;
    font-size:1rem;padding:.6rem;
  }
  .picker .actions #bdaySave{background:var(--gold);color:var(--parch);border:none}
  .picker .actions #bdaySave:active{opacity:.6}
  .picker .actions #bdayCancel{background:none;color:var(--ink);border:1px solid var(--line)}

  /* ---------- HAYOM (היום) body ---------- */
  .hayom{
    overflow-y:auto;
    padding:calc(1rem + var(--hdr-h, 60px)) .8rem 2.6rem;
    max-width:968px;width:100%;margin:0 auto;
  }
  .accordion{
    margin-bottom:.9rem;
    flex:none;
  }
  .accordion-head{
    display:flex;align-items:center;gap:.6rem;
    padding:.85rem .9rem;cursor:pointer;user-select:none;
    -webkit-tap-highlight-color:transparent;
    border:1px solid var(--gold);border-radius:12px;background:var(--frame);
  }
  .accordion-title{font-weight:700;font-size:1.08rem;color:var(--ink)}
  .accordion-sub{margin-inline-start:auto;color:var(--gold);font-size:.95rem;white-space:nowrap}
  .accordion-head .chev{color:var(--gold);transition:transform .15s;font-size:.9em;direction:ltr;unicode-bidi:isolate}
  .accordion-head.open .chev{transform:rotate(-180deg)}
  .accordion.dimmed .accordion-head{opacity:.42}
  .accordion-body{
    display:none;padding:0;margin:.6rem 0 0;
    background:var(--frame);border-radius:12px;overflow:hidden;
    margin-left: -.7rem;
    margin-right: -.7rem;
  }
  .accordion-body.open{display:block}
  .accordion-body img{margin-bottom:.5rem;width:100%}
  .accordion-empty{color:var(--ink);opacity:.75;font-size:.95rem;padding:.3rem 0 .6rem}
  .accordion-empty a{color:var(--gold);font-weight:700;text-decoration:underline;cursor:pointer}

  .hayom-section{margin-bottom:1rem}
  .hayom-divider{border:none;border-top:1px solid var(--line);margin:1.4rem 0}
  .hayom-empty{color:var(--ink);opacity:.7;font-size:.95rem}

  /* ---------- Hayom rows inside the settings popover ---------- */
  .settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
  .settings-toggle .settings-label{margin-bottom:0;text-align:start}
  .settings-value{font-size:1rem;margin-bottom:.6rem;color:var(--ink);text-align:center}
  .settings-value.muted{opacity:.65}

  .switch{position:relative;display:inline-block;width:2.7rem;height:1.6rem;flex:none;-webkit-tap-highlight-color:transparent}
  .switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
  .switch-track{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
  .switch-thumb{
    position:absolute;top:50%;margin-top:-.6rem;inset-inline-start:2px;
    width:1.2rem;height:1.2rem;border-radius:50%;
    background:var(--frame);box-shadow:0 1px 3px rgba(0,0,0,.3);
    transition:transform .15s;
  }
  .switch input:checked + .switch-track{background:var(--gold)}
  .switch input:checked + .switch-track .switch-thumb{transform:translateX(-1.25rem)}

  .btn-gold{
    display:block;width:100%;
    font-family:inherit;font-size:.92rem;font-weight:700;
    background:var(--gold);color:var(--parch);
    border:none;border-radius:8px;padding:.55rem 1rem;
    cursor:pointer;transition:opacity .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .btn-gold:active{opacity:.6}
  .btn-gold-sm{display:inline-block;width:auto;font-size:.75rem;font-weight:600;padding:.25rem .7rem;border-radius:6px}
  .brightness-slider{width:100%;accent-color:var(--gold);cursor:pointer;margin:.3rem 0 0;display:block}
  .bday-row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.3rem}
  .bday-row .settings-value{margin-bottom:0}
  .family-row{
    display:flex;align-items:center;gap:.6rem;
    padding:.5rem 0;border-bottom:1px solid var(--line);
  }
  .family-row:last-child{border-bottom:none}
  .family-row .info{flex:1;min-width:0}
  .family-row .name{font-weight:700;font-size:.92rem}
  .family-row .bday{font-size:.82rem;color:var(--gold)}
  .family-row .row-actions{display:flex;gap:.35rem;flex:none}
  .drag-handle{
    display:grid;place-items:center;
    width:1.4rem;height:2rem;flex:none;
    color:var(--muted,#aaa);cursor:grab;
    touch-action:none;-webkit-tap-highlight-color:transparent;
  }
  .drag-handle:active{cursor:grabbing}
  .family-row.dragging{
    transform:scale(1.04);
    box-shadow:0 6px 20px rgba(0,0,0,.28);
    border-radius:8px;
    position:relative;z-index:2;
    opacity:.92;
    transition:transform .1s,box-shadow .1s;
  }
  .family-drop-line{height:2px;background:var(--gold);border-radius:1px;margin:2px 0;pointer-events:none}
  .icon-btn-sm{
    display:grid;place-items:center;
    background:none;border:1px solid var(--line);border-radius:8px;
    width:2rem;height:2rem;color:var(--ink);
    font-size:.95rem;cursor:pointer;padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .icon-btn-sm:active{background:var(--line)}
  #addFamilyBtn{margin-top: .6rem;}

  /* ---- Text-mode reader ---- */
  #textWrap{
    display:block;
    width:100%;
    max-width:968px;
    min-height:100%;
    padding:1rem .8rem calc(2rem + env(safe-area-inset-bottom));
    box-sizing:border-box;
    margin-inline:auto;
    --he-font:"VilnaHebrew","Frank Ruhl Libre",serif;
    --he-size:1.25rem;
    --en-font:"EB Garamond","Frank Ruhl Libre",serif;
    --en-size:1rem;
    /* English is the inherited default inside the reader so any translation
       apparatus that isn't wrapped in an English class (footnote bodies and
       markers, stray inline text) can never fall back to the Hebrew/Vilna
       stack. Every Hebrew element declares font-family:var(--he-font) itself,
       so Hebrew is unaffected. */
    font-family:var(--en-font);
    /* Override the global user-select:none so study text can be copied. */
    -webkit-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
  }
  #textWrap *{
    -webkit-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
  }
  #textWrap[hidden]{display:none}
  .text-offline{
    padding:2.4rem .8rem;
    text-align:center;
    color:var(--ink);
    opacity:.65;
    font-size:1rem;
    font-family:"EB Garamond","Frank Ruhl Libre",serif;
  }
  .text-retry-btn{
    display:block;
    margin:1rem auto 0;
    padding:.55rem 1.6rem;
    border:1px solid var(--line);
    border-radius:8px;
    background:transparent;
    color:var(--ink);
    font-family:inherit;
    font-size:1rem;
    cursor:pointer;
  }
  .text-loading{
    padding:1.4rem .8rem;
    max-width:968px;
    margin-inline:auto;
  }
  .skel-line{
    height:.9rem;
    border-radius:4px;
    background:var(--line);
    opacity:.35;
    margin-bottom:.75rem;
    position:relative;
    overflow:hidden;
  }
  .skel-line::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(154,123,63,.25) 50%,transparent 100%);
    transform:translateX(-100%);
    animation:page-shimmer 1.6s ease-in-out infinite;
  }
  .skel-line:nth-child(2n){width:85%}
  .skel-line:nth-child(3n){width:70%}
  .skel-line:nth-child(5n){width:60%}
  .skel-line.skel-gap{height:0;margin-bottom:1.4rem}
  .text-segment{margin-bottom:1.2rem}
  .text-he{
    font-family:var(--he-font);
    font-size:var(--he-size);
    direction:rtl;
    color:var(--ink);
    text-align:justify;
  }
  /* Sefaria's texts embed <small> runs (parenthetical notes, source refs,
     nikud/te'amim remarks). Inside the justified reader (text-align:justify),
     the smaller inline run threw off the even inter-word spacing of its line:
     the browser stretches every space on the line, but the small run's own
     spaces start narrower, so they blew out to inconsistent gaps. Rendering
     the run as an inline-block takes its internal spaces out of the parent
     line's justification set, so the surrounding text justifies cleanly while
     the note stays visually small. Scoped to #textWrap so it only touches
     reader text (chumash, rashi, mikra, tanya, rambam, …), not chrome. */
  #textWrap small{
    display:inline-block;
  }
  .text-en{
    font-family:var(--en-font);
    font-size:var(--en-size);
    direction:ltr;
    color:var(--ink);
    opacity:.88;
    margin-top:.4rem;
  }
  .text-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
    align-items:start;
    /* Hebrew is primary, so it takes the right column and the translation the
       left — matching reading direction and the Chumash side-by-side view. The
       .text-he/.text-en children set their own inner text direction, so only
       the column order flips here; the logical outer paddings below follow. */
    direction:rtl;
  }
  /* min-width:0 lets each column shrink below its longest word and wrap,
     instead of a long Hebrew word blowing the 1fr track out past the screen
     edge (the classic CSS-grid overflow). This keeps the two columns working
     even at narrow portrait-phone widths. */
  .text-columns .text-he,
  .text-columns .text-en{min-width:0;overflow-wrap:break-word}
  .text-columns .text-he{padding-inline-start:.5rem}
  .text-columns .text-en{padding-inline-end:.5rem;margin-top:0}
  .possuk-num{font-size:.72em;opacity:.55;margin-inline-end:.35em;white-space:nowrap}
  .chumash-trans{
    grid-column:1 / -1;
    direction:ltr;
    text-align:justify;
    font-family:var(--en-font);
    font-size:var(--en-size);
    color:var(--ink);
    opacity:.88;
  }
  /* One frame around the whole verse — possuk, onkelos and translation — rather
     than a box around the English alone. Only bordered when a translation is
     present (Hebrew-only verses stay frameless, as before). */
  .chumash-verse-card{border-radius:7px}
  .chumash-verse-card:has(.chumash-trans){
    border:1px solid var(--line);
    padding:.5em .65em;
    margin:.4em -.65em;
  }
  /* The card supplies the frame now, so the translation drops its own border and
     sits close under the possuk. */
  .chumash-verse-card .chumash-trans{
    border:0;
    padding:0;
    margin:.3em 0 0;
  }
  .chumash-rashien{
    font-family:var(--rashien-font);
    font-size:var(--rashien-size);
    direction:ltr;
    color:var(--ink);
    opacity:.8;
    margin:.3em 0;
  }
  .rashi-entry{display:block;margin:.15em 0}
  /* Rashi "Columns" layout — English (left) beside the dibbur (right). */
  .rashi-entry--cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
    align-items:start;
    direction:ltr;
  }
  .rashi-entry--cols .rashi-dibbur{display:block;text-align:justify}
  .rashi-entry--cols .chumash-rashien{margin:0}
  .rashi-entry:has(.chumash-rashien:not(.tap-rashien-hidden)){
    border:1px solid var(--line);
    border-radius:7px;
    padding:.4em .65em;
    margin: .4em -.65em;
  }
  .rashi-dibbur{display:inline}
  /* Shown before the Rashi text when it shares the possuk's font,
     so the reader can tell where the possuk ends and Rashi begins. */
  .rashi-heading{
    display:block;
    font-weight:700;
    font-size:.78em;
    opacity:.65;
    margin:.35em 0 .15em;
  }
  .rashi-has-en{cursor:pointer}
  .tap-rashien-hidden{display:none}
  /* ---- Swipe-to-reveal translation cards ----
     The Hebrew and its translation are two separate bordered cards sitting side
     by side. Only the Hebrew shows; the translation card waits just off the
     right edge with only its border peeking — its text stays hidden behind the
     card's own padding. Drag left (or tap) to bring the translation card fully
     into view, at which point the Hebrew card's border peeks back from the left.
     In this mode the cards run full-bleed to the right screen edge (and close
     to the left), so the peeking card is cut off by the edge / runs off-screen.
     A small gap (set from JS) keeps the two card borders visually distinct. */
  .swipe-seg{
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
    touch-action:pan-y;      /* let vertical scroll pass; we own horizontal */
    /* Pull most of the reader's gutter back on both sides so the cards run wide,
       keeping a matching sliver (.3rem) of padding left and right so the possuk
       and Rashi don't hug the screen edge once the peek is gone. Tracks the
       reader's .8rem side gutter (#textWrap): .8rem − .5rem = the .3rem sliver. */
    margin-right:-.5rem;
    margin-left:-.5rem;
  }
  .text-segment.swipe-seg{margin-bottom:.9rem}
  .swipe-window{
    position:relative;
    overflow:hidden;
    /* 2px keeps the fully-swiped card's right border just inside the clip so it
       is never shaved off, without adding any visible right gutter. */
    padding-right:2px;
  }
  .swipe-track{
    display:flex;
    align-items:flex-start;
    will-change:transform;
    direction:ltr;           /* fix pane order even inside an RTL (Rashi) block */
    width:100%;
  }
  /* Each pane fills the window; its height is driven from JS and overflow is
     clipped so the hidden card stays fully off-screen until swiped/tapped in. */
  .swipe-pane{
    flex:0 0 auto;
    box-sizing:border-box;
    min-width:0;
    /* Fallback so the reveal is safe without JS: each pane fills the window,
       pushing the sibling (translation) pane fully off-screen so its text stays
       hidden until swiped. Without this, an un-initialised card (e.g. a stale
       cached build, or a render before the pane has layout) collapses to its
       content width and the English shows through beside the Hebrew. The
       SwipeCard JS overrides this with a precise px width once it measures. */
    width:100%;
    padding:0;
    overflow:hidden;
    position:relative;
  }
  .swipe-fit{margin:0}
  /* Neutralise inner text margins so each card's height tracks its content */
  .swipe-pane .text-he,
  .swipe-pane .text-en,
  .swipe-pane .chumash-trans,
  .swipe-pane .chumash-rashien{margin:0}
  /* Strip the standalone translation's own reveal border/padding so it sits
     flush inside the pane. */
  .swipe-en .chumash-trans{border:0;padding:0;margin:0}
  /* Accent stripe on the revealed translation. Because the Hebrew and its
     English swap in place, readers who tapped/swiped can mistake the English
     for a stray verse that slipped into the Hebrew. This coloured left border
     (the theme's --gold accent, so it adapts across every theme and dark mode)
     marks the content as the deliberately-revealed translation.

     The stripe lives on the inner .swipe-fit — not the pane edge — for two
     reasons. (1) At rest the hidden English pane sits flush against the Hebrew
     pane's right edge, just inside the window's clip; a stripe on the pane
     border would peek a sub-pixel sliver there. The margin-left insets it well
     past the clip so nothing shows until the card is actually swiped in.
     (2) During the reveal the pane's left edge butts against the Hebrew card,
     so the same margin-left opens a gap between the Hebrew and the stripe.
     padding-left then holds the English text off the stripe. The pane keeps its
     JS-driven width and padding:0, so card geometry is untouched — and the
     Hebrew's own right padding is not affected. */
  /* Accent stripe on the revealed translation. Use a continuous ::before bar
     (not border-left) so the top/bottom don't grow corner ticks that look like
     a broken accent. Inset via left so the bar stays clipped while the English
     pane is parked off-screen, and so a gap opens beside the Hebrew on reveal. */
  .swipe-en .swipe-fit{
    position:relative;
    margin-left:.5rem;
    padding-left:.75rem;
    border-left:0;
  }
  .swipe-en .swipe-fit::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:var(--gold);
    border-radius:1px;
    pointer-events:none;
  }
  /* Instructional overlay: after a hidden card has lingered on screen for a
     couple of seconds, JS drops this low-opacity scrim over the Hebrew text with
     a "tap to reveal" pill, teaching the affordance in place of a peeking
     border. It's pointer-events:none so the tap still lands on the card, and it
     is retired for good once any translation has been revealed. */
  .swipe-hint{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    background:rgba(255,255,255,.55);
    opacity:0;
    transition:opacity .4s ease;
  }
  html.theme-dark .swipe-hint{background:rgba(0,0,0,.5)}
  .swipe-hint.swipe-hint-in{opacity:1}
  .swipe-hint-label{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--frame);
    background:var(--gold);
    padding:.3em .85em;
    border-radius:999px;
    box-shadow:0 1px 4px rgba(0,0,0,.18);
  }
  /* Each Rashi is its own pair of cards; give the rows room to breathe apart. */
  .chumash-rashi .swipe-seg{margin-block:.4em}
  .swipe-he .rashi-dibbur{display:block;margin:0}
  .swipe-he .rashi-dibbur b{font-weight:600}
  /* The Hebrew possuk/onkelos grid keeps its two-column layout inside the pane */
  .swipe-he .text-columns-chumash{margin:0}
  /* In swipe mode the Rashi block lives beside the frame rather than inside the
     possuk grid, so restate the styling it used to inherit from that grid. */
  .text-columns-chumash-outer{direction:ltr}
  .text-columns-chumash-outer .chumash-rashi{
    text-align:justify;
    direction:rtl;
    margin-top:.4rem;
  }
  .text-columns-chumash-outer .chumash-rashi .text-he{
    display:inline;
    margin-left:10px;
  }
  .text-columns-chumash-outer .chumash-rashi .text-he b{font-weight:600}
  /* Chumash layout: possuk right (70%) | onkelos left (30%); rashi spans full width.
     Always two columns — no responsive collapse. */
  .text-columns-chumash{
    display:grid;
    grid-template-columns:3fr 7fr;
    gap:.8rem;
    align-items:start;
    direction:ltr;
  }
  /* Onkelos toggled to Reveal (closed) or Columns off — collapse to a single
     full-width possuk column. Columns mode and an open Reveal both use the
     default 3fr/7fr above. */
  .text-columns-chumash--no-onk{
    grid-template-columns:1fr;
  }
  /* Pull-to-reveal Onkelos: the Onkelos rides in a fixed-width panel parked
     off-screen to the left (its final column width, laid out once — no reflow).
     Pulling slides it in while the possuk shrinks to 70% and shifts right to
     make room (JS drives the transform + the possuk's margin-left). The gold
     accent sits on the panel's right edge, so it only comes into view once the
     panel is pulled out — nothing peeks at rest. */
  .onk-reveal{
    touch-action:pan-y;
    -webkit-user-select:none;
    user-select:none;
  }
  .onk-reveal-win{
    position:relative;
    overflow:hidden;
  }
  .onk-reveal-win .chumash-possuk{
    text-align:justify;
  }
  .onk-reveal-win .chumash-possuk .footnote,
  .onk-reveal-win .chumash-possuk .footnote-marker{
    display:none;
  }
  .onk-reveal-panel{
    position:absolute;
    top:0;
    left:0;
    width:30%; /* matches the always-on Columns 3fr/7fr ratio */
    box-sizing:border-box;
    transform:translateX(-101%); /* off-screen left (accent hidden) until JS/drag */
  }
  .onk-reveal-panel .chumash-onkelos{
    width:100%;
    box-sizing:border-box;
    min-width:0;
    text-align:justify;
    /* Accent on the right edge (toward the possuk), with room to its right so
       the Targum never crowds the divider. Padding sits inside the off-screen
       panel, so it can't nudge the accent into view before the pull. */
    border-right:3px solid var(--gold);
    padding-right:.7rem;
  }
  .text-columns-chumash .chumash-onkelos{
    text-align:justify;
    padding-top:.3em;
  }
  .text-columns-chumash .chumash-possuk{
    text-align:justify;
  }
  .text-columns-chumash .chumash-possuk .footnote,
  .text-columns-chumash .chumash-possuk .footnote-marker{
    display: none;
  }
  .text-columns-chumash .chumash-rashi{
    grid-column:1 / -1;
    text-align:justify;
    direction: rtl;
  }
  .text-columns-chumash .chumash-rashi .text-he{
    display: inline;
    margin-left: 10px;
  }
  .text-columns-chumash .chumash-rashi .text-he b{
    font-weight: 600;
  }
  /* Side-by-side layout: translation left | possuk right, verse-aligned.
     Rashi (rendered outside this grid) spans the full card width below. */
  .text-sbs-chumash{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
    align-items:start;
    direction:ltr;
  }
  .text-sbs-chumash .chumash-possuk{text-align:justify}
  .text-sbs-chumash .chumash-sbs-trans{margin-top:0;padding-inline-end:.5rem}
  .rambam-sefer-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * 1.2);
    font-weight:700;
    text-align:center;
    color:var(--gold);
    margin:1.6rem 0 0;
    padding:.3rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .rambam-sefer-header:first-child{margin-top:0;border-top:none}
  .rambam-treatise-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * 1.1);
    font-weight:700;
    text-align:center;
    color:var(--gold);
    margin:.5rem 0 .3rem;
  }
  .rambam-treatise-header:first-child{margin-top:0}
  .text-segment .footnote-marker{
    color:var(--gold);
    cursor:pointer;
    font-size:.7em;
    vertical-align:super;
    font-weight:700;
    /* Enlarge the touch target so a tap opens the note instead of slipping onto
       the card (which would toggle the swipe). Padding grows the hit area; the
       equal negative margin pulls the surrounding text back so nothing shifts.
       position/z-index keep the marker on top of neighbouring text for hits. */
    padding:.5rem;
    margin:-.5rem;
    position:relative;
    z-index:2;
  }
  .text-segment i.footnote{
    display:none;
    font-style:normal;
    font-size:.85em;
    color:var(--ink);
    opacity:.8;
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:6px;
    padding:.4em .65em;
    margin:.3em 0;
  }
  .text-segment i.footnote.fn-visible{
    display:block;
  }
  .rambam-intro-block{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .85);
    color:var(--ink);
    opacity:.75;
    text-align:justify;
    direction:rtl;
    margin:.5rem 0 .8rem;
    padding:.6rem .8rem;
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:6px;
  }
  .rambam-perek-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .9);
    font-weight:600;
    text-align:center;
    color:var(--ink);
    opacity:.7;
    margin:.5rem 0 .8rem;
  }
  .text-attribution{
    font-size:.75rem;
    opacity:.55;
    margin-top:.6rem;
    direction:ltr;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  .text-commentary{
    margin:.35rem 0 0;
    padding:.38rem .65rem;
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:5px;
    font-size:.93em;
  }
  /* Shnayim Mikra layout */
  .mikra-parsha-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * 1.1);
    font-weight:700;
    text-align:center;
    color:var(--gold);
    margin-bottom:.5rem;
    padding-bottom:.3rem;
    border-bottom:1px solid var(--line);
  }
  .mikra-aliyah-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .9);
    font-weight:600;
    text-align:center;
    color:var(--ink);
    opacity:.6;
    margin:.8rem 0 .5rem;
  }
  .mikra-aliyah-header:first-of-type{margin-top:0}
  .mikra-haftorah-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * 1.1);
    font-weight:700;
    text-align:center;
    color:var(--gold);
    margin:1.5rem 0 .5rem;
    padding-bottom:.3rem;
    border-bottom:1px solid var(--line);
  }
  .mam-spi-pe, .mam-spi-samekh{opacity:.15}
  .mikra-verse .mam-spi-pe,.mikra-verse .mam-spi-samekh,.mikra-verse br,.mikra-verse .footnote,
  .mikra-haf-block .mam-spi-pe,.mikra-haf-block .mam-spi-samekh,.mikra-haf-block br{display:none}
  .mikra-haf-block{
    font-family:var(--he-font);
    font-size:var(--he-size);
    color:var(--ink);
    text-align:justify;
    direction:rtl;
  }
  .mikra-verse{margin-bottom:1.4rem;direction:rtl;text-align:justify}
  .mikra-inline .mikra-verse>div{display:inline}
  .mikra-he1{
    font-family:var(--he-font);
    font-size:var(--he-size);
    color:var(--ink);
    text-align:justify;
    padding-left: 10px;
  }
  .mikra-he2{
    font-family:var(--he-font2);
    font-size:var(--he-size2);
    color:var(--ink);
    opacity:.85;
    text-align:justify;
    padding-left: 10px;
  }
  .mikra-onkelos{
    font-family:var(--onkelos-font);
    font-size:var(--onkelos-size);
    color:var(--ink);
    font-weight:bold;
    opacity:.8;
    text-align:justify;
    padding-left: 10px;
  }
  /* settings groups */
  .settings-group{
    border-top:1px solid var(--line);
    padding:.5rem 0 .15rem;
    margin-top:.2rem;
  }
  /* First view-panel group under the tabs — skip the extra top rule. */
  .settings-panel[data-panel="view"] > .settings-group:first-child{
    border-top:none;
    margin-top:0;
    padding-top:.15rem;
  }
  .settings-font-size{
    display:inline-flex;
    align-items:stretch;
    gap:0;
    width:auto;
    max-width:100%;
    justify-self:end;   /* hug the row's trailing edge, like the nikud toggle */
  }
  /* One joined control per row: the smaller-glyph button on the leading edge,
     the font-name dropdown in the middle (sized to the SELECTED name, not the
     full row), the larger-glyph button on the trailing edge — so + and − flank
     the dropdown they size. The picker sits in a wrapper div (#chHeFontPicker
     etc.); that wrapper, not just .font-picker, must size to content. */
  .settings-font-size > :not(button){flex:0 1 auto;min-width:0}
  .settings-font-size .font-picker{width:auto}
  .settings-font-size .font-picker-btn{
    border-block:1px solid var(--gold);
    /* Middle segment owns the two internal dividers (lighter --line), so the
       seam survives even when a flanking button is disabled and dimmed. */
    border-inline:1px solid var(--line);
    border-radius:0;
    height:2.2rem;      /* match the flanking buttons exactly (was min-height) */
    min-height:0;
    padding:.35rem .6rem;
    width:auto;         /* collapse to the selected name's width */
  }
  .settings-font-size .font-picker-label{
    flex:0 1 auto;
    min-width:0;
    max-width:11rem;    /* ellipsis only kicks in for unusually long names */
    text-align:start;
  }
  /* Size buttons flanking the dropdown — same chrome as .size-stepper button,
     but they carry the row's outer border/rounding since they are the ends. */
  .settings-font-size button.sz-side{
    flex:none;width:2.2rem;height:2.2rem;
    background:var(--frame);border:1px solid var(--gold);
    color:var(--gold);cursor:pointer;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .settings-font-size button.sz-side:active{opacity:.5}
  .settings-font-size button.sz-side:disabled{opacity:.22;cursor:default}
  .settings-font-size button.sz-side-start{border-radius:8px 0 0 8px;border-inline-end:none}
  .settings-font-size button.sz-side-end{border-radius:0 8px 8px 0;border-inline-start:none}
  .settings-font-size .size-stepper button{width:2.2rem;height:2.2rem}
  /* ---------- Mode-line config (Layout / Order rows) ----------
     A labelled row holding a segmented control. Used by Chumash Layout /
     Onkelos / Rashi and by Mikra's Inline/Separate order toggle. */
  .ch-modes{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.2rem}
  .ch-modes[hidden]{display:none}
  .ch-mode-line,.ch-mode-sub{display:grid;grid-template-columns:4.3rem 1fr;align-items:center;gap:.55rem}
  .ch-mode-sub[hidden]{display:none}
  .ch-mlabel{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.55}
  .ch-mlabel.he{font-size:1rem;letter-spacing:0;text-transform:none;opacity:.72}
  .ch-mode-sub .ch-mlabel.sub{font-size:.66rem;opacity:.55}
  .ch-mode-line[hidden]{display:none}
  .ch-rule-lbl{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.72;margin:.9rem .1rem .45rem;border-top:1px solid var(--line);padding-top:.7rem}
  /* When Fonts & Sizes is the only content in a group, the head's own rule
     is the separator — drop the duplicate group border / head margin. */
  .settings-group > .ch-acc-head:first-child{
    margin-top:0;
    border-top:none;
    padding-top:.35rem;
  }
  /* Typography section collapses into an accordion. The rule label doubles as
     the tap target; a chevron flips when open, the font rows are the body. */
  .ch-acc-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;background:none;border:none;border-top:1px solid var(--line);cursor:pointer;font-family:inherit;color:inherit;text-align:start;-webkit-tap-highlight-color:transparent}
  .ch-acc-chev{width:.85rem;height:.85rem;flex:none;opacity:.85;transition:transform .18s}
  .ch-acc-head[aria-expanded="true"] .ch-acc-chev{transform:rotate(180deg)}
  .ch-acc-body:not(.open){display:none}
  .ch-types{display:flex;flex-direction:column}
  .ch-trow{display:grid;grid-template-columns:3.4rem 1fr;align-items:center;gap:.3rem .5rem;padding:.42rem 0}
  .ch-trow[hidden]{display:none}
  .ch-trow + .ch-trow{border-top:1px solid var(--line)}
  .ch-tname{display:flex;flex-direction:column;line-height:1.05;font-size:1.02rem;font-weight:400}
  .ch-tname:not(.he){text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}
  .ch-tsub{font-size:.54rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
  .ch-tname > .ch-tsub:only-child{margin-top:0}
  .ch-tctl{min-width:0}
  /* Fonts accordion — font-family picker fills the row; nikud sits under it. */
  .ch-acc-body .ch-tctl .font-picker{width:100%}
  .ch-acc-body .ch-tctl .font-picker-btn{width:100%}
  .ch-nikud{grid-column:1 / -1;justify-self:end;margin-top:.35rem}
  .ch-nikud .seg{display:inline-flex}
  .ch-nikud .seg button{font-family:"VilnaHebrew",serif;font-size:1rem;padding:.22rem .75rem;min-width:2.5rem}
  /* Mikra nikud applies to both readings — show it as a standalone right-aligned
     control at the foot of the group rather than pinned to one row. */
  .ch-nikud--standalone{display:flex;justify-content:flex-end;margin-top:.5rem}
  .ch-src{grid-column:1 / -1;margin-top:.4rem;display:flex;align-items:center;gap:.5rem}
  .ch-src .tg-src-lbl,.ch-src .settings-label{
    font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.72;white-space:nowrap;margin:0;
  }
  .ch-src .settings-select{flex:1;min-width:0;width:auto}
  /* Chumash layout picker — abstract icon stacked above a one-word label.
     Icon parts carry three weights: bold = possuk, mid = Targum, faint =
     translation, and flip to parchment on the active (gold) segment. */
  .seg.seg-layout button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;padding:.5rem .3rem;line-height:1}
  .seg.seg-layout button svg{width:22px;height:22px;display:block}
  .seg.seg-layout .seg-lbl{font-size:.78rem;font-weight:700}
  /* Icon-only variant (the generic Reveal/Stacked/Columns Layout picker) —
     no labels, slightly larger glyphs, matching the Chumash accordion icons. */
  .seg.seg-icononly button{padding:.6rem .3rem}
  .seg.seg-icononly button svg{width:24px;height:24px}
  /* Shared icon shades — bold = possuk/Hebrew, mid = Targum, faint = translation */
  .seg svg .ic-bold,.tg-layout-btn svg .ic-bold{fill:currentColor}
  .seg svg .ic-mid,.tg-layout-btn svg .ic-mid{fill:currentColor;opacity:.6}
  .seg svg .ic-faint,.tg-layout-btn svg .ic-faint{fill:currentColor;opacity:.32}
  .seg svg .ic-stroke,.tg-layout-btn svg .ic-stroke{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
  /* ---------- Typography: Layout section + Font Size matrix ----------
     Layout and Font Size are separate always-open sections. Font families
     live in the collapsed Fonts accordion below. */
  .tg-section{margin-top:.15rem}
  .tg-section-lbl{
    font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    opacity:.72;margin:.15rem .1rem .4rem;
  }
  /* Border only when a prior Layout/Order section is actually visible. */
  .tg-section:not([hidden]) ~ .tg-section .tg-section-lbl{
    border-top:1px solid var(--line);padding-top:.7rem;margin-top:.55rem;
  }
  .tg-section[hidden]{display:none}

  /* Layout — shared group + Customize (Chumash); per-type rows when expanded. */
  .tg-layout-head{
    display:flex;align-items:stretch;gap:.45rem;
    padding-inline:.05rem;
  }
  .tg-layout-head[hidden]{display:none}
  .tg-layout-head .tg-c-layout{flex:1 1 0;min-width:0}
  .tg-layout-head .tg-size-customize{align-self:center}
  .tg-layout-rows{
    display:flex;flex-direction:column;gap:.45rem;
    padding-inline:.05rem;
  }
  .tg-layout-rows[hidden]{display:none}
  .tg-layout-row{
    display:flex;align-items:center;gap:.45rem;
    min-width:0;
  }
  .tg-layout-row .tg-name{
    flex:0 0 3.2rem;align-items:flex-start;text-align:start;
  }
  .tg-layout-row .tg-c-layout{flex:1 1 0;min-width:0}
  /* Single-type sources (Tanya, Rambam, …): section label is enough — drop the
     redundant per-row name so the button group uses the full width. */
  .tg-layout-rows:has(> .tg-layout-row:only-child) > .tg-layout-row .tg-name{display:none}
  .tg-layout-rows:has(> .tg-layout-row:only-child) > .tg-layout-row{gap:0}
  .tg-size-cols.hide-onk .tg-onk,
  .tg-grid.hide-onk .tg-onk{display:none}
  /* Chumash bottom rows (under Fonts accordion) */
  #settingsChumashAccordion > .tg-src{
    margin-top:.75rem;padding-top:.65rem;border-top:1px solid var(--line);
  }
  #chOnkelosToggleRow{
    margin-top:.35rem;padding-inline:.05rem;
  }
  #chOnkelosToggleRow[hidden]{display:none}

  .tg-layout-wrap{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;
    width:100%;max-width:100%;gap:0;
  }
  .tg-layout-btn{
    box-sizing:border-box;
    flex:1 1 0;min-width:0;
    /* Tall enough for icon + 2-line .7rem label; padding (not min-height) sets air. */
    height:auto;min-height:0;padding:.7rem .15rem .65rem;
    background:var(--frame);
    border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));
    border-radius:0;
    color:var(--ink);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .tg-layout-btn:first-child{border-radius:7px 0 0 7px}
  .tg-layout-btn:last-child{border-radius:0 7px 7px 0}
  .tg-layout-btn:only-child{border-radius:7px}
  .tg-layout-btn + .tg-layout-btn{border-inline-start:none}
  .tg-layout-btn:active{opacity:.65}
  .tg-layout-btn svg{width:22px;height:22px;display:block;flex:none;margin:0}
  .tg-layout-lbl{
    display:block;font-size:.7rem;font-weight:700;letter-spacing:.01em;line-height:1.2;
    text-align:center;white-space:normal;max-width:100%;
    margin:0;padding:0;
  }
  .tg-layout-btn.active{background:var(--gold);color:var(--parch);border-color:var(--gold)}

  /* Font Size — label on its own line; next row is global steppers + a small
     right-aligned Customize. Per-type columns appear after Customize is tapped. */
  .tg-size-head{
    display:flex;align-items:center;gap:.5rem;
    margin:.05rem 0 .2rem;
  }
  .tg-size-head[hidden]{display:none}
  .tg-size-head .tg-global{flex:none}
  .tg-size-customize{
    flex:none;width:auto;margin:0;margin-inline-start:auto;
    padding:.28rem .55rem;
    background:var(--gold);color:var(--parch);
    border:none;border-radius:6px;
    font-family:inherit;font-size:.68rem;font-weight:700;
    cursor:pointer;text-align:center;transition:opacity .15s;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;gap:.28rem;
    -webkit-tap-highlight-color:transparent;
  }
  .tg-size-customize:active{opacity:.6}
  .tg-size-customize[hidden]{display:none}
  .tg-size-customize .tg-more-ic{width:12px;height:12px;display:block;flex:none}
  .tg-size-cols{
    display:flex;flex-wrap:nowrap;align-items:flex-start;gap:.25rem;
    width:100%;padding:0;margin-top:.2rem;
  }
  .tg-size-cols[hidden]{display:none}
  .tg-size-col{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:.2rem;
  }
  .tg-size-col[hidden]{display:none}
  /* Fixed label-slot height so 1-line names (אונקלוס) and 2-line names
     (קריאה + א׳/ב׳) share one baseline — steppers line up in a single row. */
  .tg-size-col > .tg-name:first-child{
    box-sizing:border-box;
    height:2.15rem;min-height:2.15rem;
    justify-content:flex-end;
    align-items:center;text-align:center;
    font-size:.95rem;
  }
  .tg-size-col > .tg-name:not(.he):first-child{
    text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;
  }
  .tg-size-col .tg-size-en{
    margin-top:.12rem;min-height:1.1rem;
    justify-content:flex-end;align-items:center;text-align:center;
    font-size:.72rem;
    text-transform:uppercase;letter-spacing:.04em;
  }
  .tg-size-col .tg-size{width:100%;justify-content:center}
  .tg-size-col .tg-size button{flex:1 1 0;min-width:0;padding:.38rem .12rem}

  /* Font Size — classic Name · Size rows (generic / Mikra). */
  .tg-grid{
    display:grid;
    grid-template-columns:minmax(3.6rem,max-content) auto;
    align-items:stretch;
  }
  .tg-cell{
    display:flex;align-items:center;min-width:0;
    padding:.3rem .2rem;
    border-top:1px solid var(--line);
  }
  .tg-c-name{grid-column:1;flex-direction:column;align-items:flex-start;gap:.24rem;padding-inline-start:.05rem}
  .tg-c-size{grid-column:2;justify-content:center}
  /* Continuation rows (translation under its Hebrew layer) share the group. */
  .tg-cont{border-top:none}
  /* .tg-cell/.tg-src/.tg-toggle/.ch-trow set display, which beats the UA [hidden]
     rule; restore it so JS .hidden actually hides matrix cells and font rows. */
  .tg-cell[hidden],.tg-src[hidden],.tg-toggle[hidden],.tg-global[hidden],.ch-nikud[hidden]{display:none}
  .tg-head{border-top:none;padding-bottom:.28rem;align-items:flex-end}
  .tg-hlabel{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.68}

  .tg-name{display:flex;flex-direction:column;line-height:1.02;font-size:.9rem;font-weight:400}
  .tg-name.he{font-size:1.04rem}
  .tg-sub{font-size:.5rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.62;margin-top:.05rem}
  .tg-name > .tg-sub:only-child{margin-top:0}
  .tg-toggle .seg{display:inline-flex}
  .tg-seg{border-radius:6px;border-color:color-mix(in srgb,var(--gold) 38%,var(--line))}
  .tg-seg button + button{border-inline-start-color:color-mix(in srgb,var(--gold) 30%,var(--line))}
  .tg-seg button{font-family:"VilnaHebrew",serif;font-size:.9rem;font-weight:700;padding:.1rem .45rem;min-width:1.9rem}

  .tg-size,.tg-global{display:inline-flex}
  .tg-size button,.tg-global button{
    flex:none;min-width:1.85rem;padding:.42rem .35rem;
    background:var(--frame);border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));color:var(--gold);
    cursor:pointer;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;gap:.14rem;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .tg-size button:active,.tg-global button:active{opacity:.5}
  .tg-size button:disabled,.tg-global button:disabled{opacity:.22;cursor:default}
  .tg-size .step-minus,.tg-global .step-minus{border-radius:7px 0 0 7px;border-inline-end:none}
  .tg-size .step-plus,.tg-global .step-plus{border-radius:0 7px 7px 0}
  /* − / + sit next to the letter glyph (א− · א+ / A− · A+). */
  .tg-size .step-minus::after,.tg-global .step-minus::after,
  .tg-size .step-plus::after,.tg-global .step-plus::after{
    font-size:.72rem;font-weight:800;line-height:1;opacity:.9;
  }
  .tg-size .step-minus::after,.tg-global .step-minus::after{content:"−"}
  .tg-size .step-plus::after,.tg-global .step-plus::after{content:"+"}
  .tg-global button{min-width:2.8rem}
  .tg-size .sz-glyph{display:block;line-height:1;transform:none}
  .tg-size .sz-he.sz-sm{font-size:1rem}
  .tg-size .sz-he.sz-lg{font-size:1.34rem}
  .tg-size .sz-en.sz-sm{font-size:.82rem}
  .tg-size .sz-en.sz-lg{font-size:1.18rem}

  /* English source selector — a quiet full-width control below the sections */
  .tg-src{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;padding-inline:.05rem}
  .tg-src-lbl{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.72;white-space:nowrap}
  .tg-src .settings-select{flex:1;min-width:0}
  /* font-picker custom dropdown */
  .font-picker{position:relative}
  .font-picker-btn{
    display:flex;align-items:center;gap:.5rem;width:100%;
    background:var(--frame);border:1px solid var(--line);border-radius:8px;
    padding:.4rem .6rem;cursor:pointer;color:var(--ink);
    font-family:inherit;font-size:.86rem;
  }
  .font-picker-btn:hover{border-color:var(--gold)}
  .font-picker-label{flex:1;min-width:0;font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .font-picker-chevron{width:.7rem;height:.7rem;flex-shrink:0;opacity:.5;transition:transform .18s}
  .font-picker.open .font-picker-chevron{transform:rotate(180deg)}
  .font-picker-menu{
    /* Fixed + centered on the trigger (JS sets --fp-x / --fp-y / --fp-w on open)
       so the menu matches the button width and isn't clipped by the settings sheet. */
    position:fixed;
    left:var(--fp-x, 50%);
    top:var(--fp-y, 50%);
    transform:translate(-50%, -50%);
    z-index:10001;
    box-sizing:border-box;
    /* Open menu sizes to its widest option (max-content), never to the
       collapsed trigger — but never narrower than the trigger either. */
    width:max-content;
    min-width:var(--fp-w, 6rem);
    max-width:min(90vw, 22rem);
    background:var(--parch);border:1px solid var(--gold);border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);overflow:hidden;
    max-height:min(16rem,70vh);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
  }
  .font-picker-menu[hidden]{display:none}
  .font-picker-opt{
    display:flex;align-items:center;gap:.5rem;width:100%;
    background:none;border:none;border-bottom:1px solid var(--line);
    padding:.45rem .6rem;cursor:pointer;color:var(--ink);
    font-family:inherit;font-size:.86rem;text-align:left;
  }
  .font-picker-opt:last-child{border-bottom:none}
  .font-picker-opt:hover{background:rgba(154,123,63,.12)}
  .font-picker-opt.active{background:var(--gold);color:var(--parch)}
  .font-picker-opt-label{flex:1;min-width:0;font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(prefers-color-scheme:dark){
    .font-picker-menu{background:var(--frame)}
  }
  /* translation <select> inside settings */
  .settings-select{
    width:100%;
    font-family:inherit;
    font-size:.86rem;
    padding:.4rem .5rem;
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--ink);
    color-scheme:light dark;
  }
/* Frank Ruhl Libre — self-hosted (no external HTTP dependency) */
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/j8_w6_fAw7jrcalD7oKYNX0QfAnPW7Ll4ajn.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/j8_w6_fAw7jrcalD7oKYNX0QfAnPW77l4ajn.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/j8_w6_fAw7jrcalD7oKYNX0QfAnPW7Dl4Q.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/j8_w6_fAw7jrcalD7oKYNX0QfAnPW7Ll4ajn.woff2") format("woff2");
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/j8_w6_fAw7jrcalD7oKYNX0QfAnPW77l4ajn.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/j8_w6_fAw7jrcalD7oKYNX0QfAnPW7Dl4Q.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  /* ---- Standalone PWA: full-height layout + safe-area insets ----
     Two forms of the same rules: the media query for true manifest installs,
     and html.standalone (set by JS from navigator.standalone) for iOS
     home-screen installs that run fullscreen without matching the query. */
  @media (display-mode: standalone) {
    /* Must be 100vh (the LARGE viewport): on iOS standalone the layout
       viewport / ICB / svh / dvh are all 47pt short of the screen (measured
       on-device: 797 vs 844 on an iPhone 14), so percentages and small or
       dynamic units leave a page-background band along the bottom. Only
       vh/lvh resolve to the full screen height there. */
    body { height:100vh; }
    .home  { padding-bottom: calc(2rem   + env(safe-area-inset-bottom)); }
    .hayom { padding-bottom: calc(2.6rem + env(safe-area-inset-bottom)); }
    #frameWrap { padding-bottom: env(safe-area-inset-bottom); }
    .update-toast { bottom: calc(1.1rem  + env(safe-area-inset-bottom)); }
    /* resume-banner is top-pinned under the header — do NOT set bottom here
       or the fixed pill stretches between top+bottom into a tall oval. */
    .install-banner { bottom: calc(1.1rem  + env(safe-area-inset-bottom)); }
    .settings-sheet-scroll { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
  }
  html.standalone body { height:100vh; }
  html.standalone .home  { padding-bottom: calc(2rem   + env(safe-area-inset-bottom)); }
  html.standalone .hayom { padding-bottom: calc(2.6rem + env(safe-area-inset-bottom)); }
  html.standalone #frameWrap { padding-bottom: env(safe-area-inset-bottom); }
  html.standalone .update-toast { bottom: calc(1.1rem  + env(safe-area-inset-bottom)); }
  html.standalone .install-banner { bottom: calc(1.1rem  + env(safe-area-inset-bottom)); }
  html.standalone .settings-sheet-scroll { padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }

  /* ---------- Likkutei Torah / Torah Ohr ---------- */
  /* Sefer → Parsha → Maamar hierarchy, mirroring the Rambam reader. */
  .lk-sefer-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * 1.2);
    font-weight:700;
    text-align:center;
    color:var(--gold);
    margin:1.8rem 0 0;
    padding:.3rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .lk-sefer-header:first-child{margin-top:0;border-top:none}
  .lk-toc-sefer{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .9);
    font-weight:700;
    color:var(--gold);
    text-align:center;
    margin:.4rem .25rem .3rem;
    padding-bottom:.25rem;
    border-bottom:1px solid var(--line);
  }
  .lk-toc-sefer ~ .lk-toc-sefer,
  .lk-toc-item + .lk-toc-sefer{margin-top:.7rem}
  .lk-toc{
    background:var(--frame);
    border:1px solid var(--line);
    border-radius:8px;
    padding:.5rem .35rem;
    margin:0 0 1.4rem;
  }
  .lk-toc-heading{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .8);
    font-weight:700;
    color:var(--ink);
    opacity:.7;
    text-align:center;
    margin:0 .25rem .35rem;
  }
  .lk-toc-group{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .8);
    font-weight:700;
    color:var(--gold);
    text-align:center;
    margin:.5rem .25rem .25rem;
  }
  .lk-toc-item{
    display:flex;
    align-items:center;
    gap:.5rem;
    width:100%;
    text-align:right;
    background:none;
    border:none;
    border-radius:6px;
    padding:.4rem .5rem;
    color:var(--ink);
    cursor:pointer;
    font-family:var(--he-font);
  }
  .lk-toc-item:active{background:rgba(127,127,127,.12)}
  .lk-toc-num{
    flex:0 0 auto;
    min-width:1.6em;
    font-weight:700;
    color:var(--gold);
    font-size:calc(var(--he-size) * .85);
  }
  .lk-toc-label{
    flex:1 1 auto;
    font-size:calc(var(--he-size) * .85);
    line-height:1.4;
    text-align:right;
  }
  /* Trailing "go to maamar" chevron — visual left in RTL, gold like other chrome. */
  .lk-toc-go{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    color:var(--gold);
    opacity:.75;
  }
  .lk-toc-go .icon{width:1em;height:1em;display:block}
  .lk-parsha-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * 1.1);
    font-weight:700;
    text-align:center;
    color:var(--ink);
    margin:.9rem 0 .5rem;
  }
  .lk-maamar-header{
    font-family:var(--he-font);
    font-size:calc(var(--he-size) * .95);
    font-weight:700;
    color:var(--ink);
    text-align:right;
    direction:rtl;
    margin:1.5rem 0 .6rem;
    padding-bottom:.25rem;
    border-bottom:1px dashed var(--line);
    scroll-margin-top:4rem;
  }
  .lk-maamar-header:first-of-type{margin-top:.3rem}
  .lk-maamar-num{color:var(--gold);font-weight:700}
  .lk-maamar{
    font-family:var(--he-font);
    font-size:var(--he-size);
    color:var(--ink);
    direction:rtl;
  }
  .lk-para{
    direction:rtl;
    text-align:justify;
    line-height:1.35;
    margin:0 0 .45rem;
  }
  .lk-para b{font-weight:700}
  .lk-para.lk-pending{opacity:.35;text-align:center}

/* ---- Hayom Yom / Sefer Hamitzvos body (from Hamesivta HTML) ---- */
.hayom-body .hayom-p,
.hayom-body .hayom-eng-p{text-align:justify;margin-top:0;margin-bottom:.65rem}
.hayom-body .hayom-day-in-adar-caption,
.hayom-body .hayom-center{text-align:center;font-weight:600}
.hayom-body .hayom-mevorchim,
.hayom-body .hayom-haftora,
.hayom-body .hayom-mevorchim-y,
.hayom-body .hayom-haftora-y{display:none}
.hayom-body .shiurim{
  border:1px dotted color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius:.75rem;
  background:color-mix(in srgb, var(--ink) 4%, transparent);
  padding:.45rem .65rem;
  margin:.55rem 0;
}
.hayom-body .hayom-day{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.9em;
  width:100%;
  direction:rtl;
  margin:0 0 .85rem;
}
.hayom-body .hayom-day-row{
  display:grid;
  grid-template-columns:minmax(4.25rem,1fr) minmax(0,2.2fr) minmax(4.25rem,1fr);
  gap:.2rem .55rem;
  align-items:start;
}
.hayom-body .hayom-day-row-span{grid-template-columns:1fr}
.hayom-body .hayom-shiurim-row{grid-template-columns:auto minmax(0,1fr)}
.hayom-body .hayom-cell{min-width:0}
.hayom-body .hayom-cell.hayom-center{text-align:center;font-weight:600}
.hayom-body .hayom-cell.hayom-right{text-align:start}
.hayom-body .hayom-cell.hayom-left{text-align:end}
.hayom-body .hayom-cell.hayom-w-20{white-space:nowrap}
.hayom-body .hayom-shiurim{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.85em;
  width:100%;
}
.hayom-body .before-moreh{
  font-size:1em;
  color:var(--gold);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.hayom-body .hayom-list{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin:.35rem 0 .75rem;
  padding:0;
}
.hayom-body .hayom-item{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
}
.hayom-body .hayom-item-num{
  flex:0 0 auto;
  min-width:1.35em;
  font-weight:700;
  color:var(--gold);
  line-height:1.45;
}
.hayom-body .hayom-item-body{
  flex:1;
  min-width:0;
  text-align:justify;
}
.hayom-body .hayom-item-body > p,
.hayom-body .hayom-item-body .hayom-eng-p{margin:0}
.hayom-body .hayom-hr-172,
.hayom-body .hayom-hr-210{height:1px;border:0;background:color-mix(in srgb, var(--ink) 35%, transparent);margin:1rem 0}

.sehm-body .sehm-heb-title{display:none} /* renderer prints שיעור N */
.sehm-body .sehm-heb-h,
.sehm-body .sehm-title,
.sehm-body .sehm-h,
.sehm-body .sehm-h3,
.sehm-body .sehm-h4{
  text-align:center;
  font-weight:700;
  margin:.45rem 0 .7rem;
  color:var(--gold);
}
.sehm-body .sehm-heb-mitzvah,
.sehm-body .sehm-heb-mitzvah-positive,
.sehm-body .sehm-heb-mitzvah-negative{
  text-align:center;
  font-weight:700;
  margin:.55rem 0 .45rem;
  color:var(--ink);
}
.sehm-body .sehm-mitzvah-label,
.sehm-body .sehm-mitzvah-positive,
.sehm-body .sehm-mitzvah-negative{color:var(--gold);font-weight:700}
.sehm-body .sehm-heb-caption,
.sehm-body .sehm-heb-positive-caption,
.sehm-body .sehm-heb-negative-caption{font-weight:700;color:var(--gold)}
.sehm-body .sehm-heb-body,
.sehm-body .sehm-heb-positive,
.sehm-body .sehm-heb-negative,
.sehm-body .sehm-heb-p,
.sehm-body .sehm-p{text-align:justify;margin:0 0 .65rem;color:var(--ink)}
.sehm-body .sehm-heb-blsi,
.sehm-body .sehm-blsi,
.sehm-body .sehm-csip,
.sehm-body .sehm-b{font-size:.85em;font-style:italic;text-align:center;margin:.35rem 0;color:var(--ink);opacity:.85}
.sehm-body .sehm-reference{
  color:var(--gold);
  font-size:.92em;
  margin:.15rem 0 .55rem;
  text-align:start;
}
.sehm-body .sehm-mitzvah{margin-top:.55rem}
.sehm-body .sehm-hrsp{height:1px;border:0;background:color-mix(in srgb, var(--ink) 35%, transparent);margin:.85rem 10%}
.sehm-body sehm-eng,
.sehm-body sehm-heb{font-weight:600}