[hidden]{ display:none !important }
:root{
  --paper:#F7F3EC; --paper-2:#EAF3E6; --ink:#0E2D2C; --ink-soft:#4A6663;
  --line:#C3DACB; --tech:#004645; --tech-soft:#D6EBCE; --done:#004645; --done-ink:#F7F3EC;
  --warn:#8A3B12;
  --he:"Frank Ruhl Libre", "Times New Roman", serif;
  --en:"Source Serif 4", Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1F1E; --paper-2:#16302E; --ink:#E8EFE9; --ink-soft:#9DB5AF;
    --line:#2A4744; --tech:#7FC4BC; --tech-soft:#1F3D3A; --done:#5FAFA6; --done-ink:#0F1F1E; --warn:#E59B6E;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1F1E; --paper-2:#16302E; --ink:#E8EFE9; --ink-soft:#9DB5AF;
  --line:#2A4744; --tech:#7FC4BC; --tech-soft:#1F3D3A; --done:#5FAFA6; --done-ink:#0F1F1E; --warn:#E59B6E;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit }
html{ scroll-padding-top:env(safe-area-inset-top,0px) }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--en); font-size:17px; line-height:1.5; -webkit-text-size-adjust:100% }
[lang="he"],.he{ font-family:var(--he) }
button,input,select{ font:inherit; color:inherit }
a{ color:var(--tech) }
:focus-visible{ outline:2px solid var(--tech); outline-offset:2px }

/* header */
.top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:5; display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem; background:var(--paper); border-bottom:1px solid var(--line) }
.mark{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1.15; margin-inline-end:auto }
.mark-he{ font-family:var(--he); font-weight:700; font-size:1.25rem; color:var(--tech) }
.mark-en{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.02em }
.back{ background:none; border:0; color:var(--tech); padding:.3rem 0; cursor:pointer }
.menu{ display:flex; gap:1rem; align-items:center; font-size:.92rem }
.link{ background:none; border:0; padding:0; color:var(--tech); cursor:pointer; text-decoration:underline }

main{ max-width:960px; margin:0 auto; padding:1rem 1rem 4rem }
h1{ font-family:var(--he); font-weight:500; font-size:1.9rem; margin:.4rem 0 .2rem; line-height:1.2 }
h2{ font-size:1.05rem; font-weight:600; margin:1.6rem 0 .5rem; color:var(--ink-soft) }
.sub{ color:var(--ink-soft); margin:0 0 1rem }

/* sign-in */
.signin{ max-width:26rem; margin:12vh auto 0; text-align:center }
.signin .big{ font-family:var(--he); font-size:3rem; font-weight:700; color:var(--tech); margin:0; line-height:1.1 }
.signin p{ color:var(--ink-soft) }
.field{ display:flex; flex-direction:column; gap:.5rem; margin:1.4rem 0 .8rem; text-align:start }
input[type=email],input[type=number],input[type=datetime-local]{ width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:8px; background:var(--paper-2) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.7rem 1.1rem; border-radius:8px;
  border:1px solid var(--tech); background:var(--tech); color:var(--paper); cursor:pointer; font-weight:600 }
.btn.ghost{ background:transparent; color:var(--tech) }
.btn.wide{ width:100% }
.btn:disabled{ opacity:.5; cursor:default }
.or{ margin:1rem 0; color:var(--ink-soft); font-size:.9rem }

/* library */
.shelf{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.book{ display:grid; grid-template-columns:auto 1fr; gap:.15rem 1rem; align-items:center; padding:.8rem .2rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; direction:rtl }
.book:hover{ background:var(--paper-2) }
.book .t-he{ grid-column:2; grid-row:1; font-family:var(--he); font-size:1.3rem; font-weight:500; text-align:right }
.book .t-en{ grid-column:2; grid-row:2; font-size:.85rem; color:var(--ink-soft); text-align:right }
.book .pct{ grid-column:1; grid-row:1 / span 2; text-align:left; direction:ltr; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.85rem; min-width:4.5rem }
.book .pct b{ display:block; color:var(--tech); font-size:1.15rem; font-weight:600 }
.book.crown .t-he{ color:var(--tech); font-weight:700 }
.bar{ grid-column:1 / -1; grid-row:3; height:3px; background:var(--tech-soft); border-radius:2px; overflow:hidden }
.bar i{ display:block; height:100%; background:var(--done) }

/* line picker inside an app */
.tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem }
.tab{ padding:.35rem .8rem; border-radius:999px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:.9rem }
.tab[aria-pressed="true"]{ background:var(--tech); border-color:var(--tech); color:var(--paper) }

/* the grid: one square per unit, right to left for Hebrew sefarim */
.section{ margin:1.2rem 0 .4rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); padding-bottom:.2rem }
.section .sh{ font-family:var(--he); font-size:1.2rem; font-weight:500 }
.section .se{ font-size:.82rem; color:var(--ink-soft) }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(3.1rem,1fr)); gap:4px; margin:.5rem 0 }
.grid.rtl{ direction:rtl }
.sq{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:2px;
  border:1px solid var(--line); background:var(--paper); border-radius:4px; cursor:pointer; font-size:.72rem; line-height:1.1;
  color:var(--ink-soft); overflow:hidden; word-break:break-word }
.sq:hover{ border-color:var(--tech) }
.grid.wide .sq{ aspect-ratio:auto; min-height:3.2rem; font-size:.82rem; padding:.3rem .4rem }
.sq.done{ background:var(--done); border-color:var(--done); color:var(--done-ink) }
.sq.part{ background:var(--tech-soft) }

/* daily lines */
.day{ display:flex; justify-content:space-between; align-items:center; padding:.55rem 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums }
.day .when{ color:var(--ink-soft); font-size:.9rem }
.streak{ font-size:.95rem; color:var(--ink-soft) }

/* sheet (unit actions) */
.sheet{ border:0; border-radius:14px 14px 0 0; padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px)); width:min(560px,100%);
  margin:auto auto 0; background:var(--paper); color:var(--ink); max-height:85vh }
.sheet::backdrop{ background:rgba(0,0,0,.35) }
.sheet-x{ position:absolute; inset-inline-end:.6rem; top:.4rem }
.sheet-x button{ background:none; border:0; font-size:1.6rem; color:var(--ink-soft); cursor:pointer }
.sheet h3{ font-family:var(--he); font-size:1.5rem; font-weight:500; margin:.2rem 0 .1rem }
.sheet .meta{ color:var(--ink-soft); font-size:.9rem; margin:0 0 1rem }
.timer{ font-size:2.6rem; font-variant-numeric:tabular-nums; text-align:center; margin:.6rem 0 1rem; color:var(--tech) }
.stack{ display:flex; flex-direction:column; gap:.6rem }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.hist{ margin:1rem 0 0; padding:0; list-style:none; font-size:.88rem; color:var(--ink-soft) }
.hist li{ padding:.25rem 0; border-top:1px solid var(--line) }
details summary{ cursor:pointer; color:var(--tech); margin:.8rem 0 .4rem }

/* sharing */
.share{ direction:rtl; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line) }
.share .nm{ display:flex; flex-direction:column; text-align:right }
.share .nm small{ direction:ltr }
.share .nm small{ color:var(--ink-soft) }
.switch{ appearance:none; width:2.8rem; height:1.6rem; border-radius:999px; background:var(--line); position:relative; cursor:pointer; flex:none; transition:background .15s }
.switch::after{ content:""; position:absolute; top:3px; inset-inline-start:3px; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--paper); transition:inset-inline-start .15s }
.switch:checked{ background:var(--tech) }
.switch:checked::after{ inset-inline-start:calc(100% - 1.15rem - 3px) }
.note{ background:var(--paper-2); border-inline-start:3px solid var(--tech); padding:.7rem .9rem; border-radius:4px; font-size:.92rem; margin:1rem 0 }

.toast{ position:fixed; inset-inline:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); margin:auto; max-width:420px;
  background:var(--ink); color:var(--paper); padding:.7rem 1rem; border-radius:8px; text-align:center; z-index:20 }
.toast.err{ background:var(--warn) }
.empty{ color:var(--ink-soft); text-align:center; padding:3rem 1rem }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important } }

/* running-recital bar */
.runbar{ position:sticky; top:calc(env(safe-area-inset-top,0px) + 3.6rem); z-index:4; display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1rem; background:var(--tech); color:var(--paper); font-size:.92rem }
.runbar .rt{ font-variant-numeric:tabular-nums; font-weight:600 }
.runbar .rl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.runbar button{ background:var(--paper); color:var(--tech); border:0; border-radius:6px; padding:.35rem .7rem; font-weight:600; cursor:pointer }
.runbar button.ghost{ background:transparent; color:var(--paper); border:1px solid var(--paper) }

/* reader */
.reader{ max-width:40rem; margin:0 auto; padding-bottom:6rem }
.crumb{ margin:.2rem 0; font-size:.88rem }
.r-title{ font-family:var(--en); font-size:1.7rem }
.reader[dir="rtl"] .r-title{ font-family:var(--he) }
.r-body{ font-size:1.12rem; line-height:1.7 }
.r-body .blk{ margin:0 0 1em }
.r-body h3.blk{ font-size:1.18rem; font-weight:600; color:var(--tech); margin:1.6em 0 .5em; line-height:1.35 }
.r-body .b-hebrew,.r-body [lang="he"]{ font-family:var(--he); font-size:1.3rem; line-height:1.8 }
.r-body .b-list_item{ padding-inline-start:1.6em; position:relative }
.r-body .mk{ position:absolute; inset-inline-start:0; color:var(--ink-soft) }
.r-body .bd{ font-weight:600 } .r-body .it{ font-style:italic }
.r-body pre{ white-space:pre-wrap; font-size:.9rem; background:var(--paper-2); padding:.7rem; border-radius:6px; overflow-x:auto }
.r-body .cont{ display:block; font-size:.8rem; color:var(--ink-soft); margin-top:.2rem }
.r-body sup.fn a{ text-decoration:none; font-size:.75em; padding:0 .1em }
.r-body .notes{ border-top:1px solid var(--line); margin-top:2rem; padding-top:.8rem; font-size:.9rem; color:var(--ink-soft) }
.r-bar{ position:fixed; inset-inline:0; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px)); background:var(--paper); border-top:1px solid var(--line) }
.r-bar .nav{ font-size:2rem; line-height:1; text-decoration:none; width:2.4rem; text-align:center; color:var(--tech) }
.r-bar .mid{ display:flex; flex-direction:column; align-items:center; gap:.2rem }
.r-bar .hint{ color:var(--ink-soft); font-size:.9rem }
.r-bar .link{ font-size:.82rem }

.r-body .psk{ font-family:var(--he); font-size:1.42rem; line-height:2.05; text-align:justify; margin:0 0 1em }
.r-body .vn{ font-family:var(--he); font-size:.62em; color:var(--tech); margin-inline-end:.15em; font-weight:700 }
.r-body .rashi{ margin:.2rem 0 1rem; padding-inline-start:.8rem; border-inline-start:2px solid var(--tech-soft) }
.r-body .rashi p{ font-family:var(--he); font-size:1.12rem; line-height:1.8; margin:0 }
.r-body .rashi .rashi-en{ font-family:var(--en); font-size:.95rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.55 }
.r-body .rashi + .psk{ margin-top:1.4rem }
.r-opts{ margin:.2rem 0 1rem }

.r-body .seif{ font-family:var(--he); font-size:1.3rem; line-height:1.95; margin:0 0 1em; text-align:justify }
.r-body .sn{ font-weight:700; color:var(--tech); margin-inline-end:.45em; font-size:.85em }
.r-body .mut{ color:var(--ink-soft); font-size:.88em }
.r-body .parasha{ font-family:var(--he); font-size:.95rem; font-weight:700; color:var(--ink-soft); margin:1.2em 0 .2em; letter-spacing:.02em }
.reader[dir="rtl"] .r-body .blk[lang="he"], .reader[dir="rtl"] .r-body p.blk{ font-family:var(--he); font-size:1.28rem; line-height:1.9 }