/* ── tefilati · mobile first ───────────────────────────────────────
   Base styles are the phone. Media queries add room, never take it away. */

:root{
  --stone:#E9E5DC; --vellum:#FFFDF8; --sunk:#DFDBD0;
  --ink:#14161C; --mist:#5C5F69; --faint:#8A8C95;
  --tekhelet:#22376B; --tekhelet-soft:#E4E8F3; --tekhelet-line:#BCC7E2;
  --zahav:#8A6A2C; --zahav-soft:#F1EAD8;
  --rule:#D9D4C7; --hair:#E6E1D5;
  /* elevation: a tight key shadow for contact, a wide ambient one for lift,
     both tinted toward the ink so they read as shadow rather than grey haze */
  --shadow:0 1px 1px rgba(20,26,48,.05), 0 2px 4px rgba(20,26,48,.05),
           0 8px 20px -10px rgba(20,26,48,.18);
  --shadow-lift:0 1px 1px rgba(20,26,48,.06), 0 4px 10px rgba(20,26,48,.07),
                0 18px 40px -18px rgba(20,26,48,.26);
  --shadow-page:0 1px 2px rgba(20,26,48,.05), 0 10px 26px -14px rgba(20,26,48,.20),
                0 34px 60px -40px rgba(20,26,48,.22);
  /* the lip of light along a raised edge */
  --edge:inset 0 1px 0 rgba(255,255,255,.75);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --ground:radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 58%);
  --heb-fallback:"Noto Serif Hebrew","Times New Roman","Arial Hebrew","Narkisim",serif;
  --display:"David Libre","Frank Ruhl Libre",var(--heb-fallback);
  --liturgy:"Frank Ruhl Libre",var(--heb-fallback);
  --ui:"Heebo","Segoe UI",system-ui,"Arial Hebrew",sans-serif;
  --gut:18px;
  --measure:34rem;
  --radius:14px;
  --tap:44px;                       /* minimum comfortable touch target */
  --liturgy-size:1.24rem;
  --liturgy-lead:2.05;
  --tabbar-h:60px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stone:#0E1017; --vellum:#1A1E29; --sunk:#080A10;
    --ink:#E9E6DE; --mist:#A2A4B0; --faint:#71747F;
    --tekhelet:#90A9EA; --tekhelet-soft:#1B2136; --tekhelet-line:#2F3A5C;
    --zahav:#C6A059; --zahav-soft:#241E12;
    --rule:#272B38; --hair:#20242F;
    --shadow:0 1px 1px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.36),
             0 10px 24px -12px rgba(0,0,0,.72);
    --shadow-lift:0 1px 2px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.42),
                  0 22px 46px -20px rgba(0,0,0,.85);
    --shadow-page:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.7),
                  0 40px 70px -44px rgba(0,0,0,.9);
    --edge:inset 0 1px 0 rgba(255,255,255,.055);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
    --ground:radial-gradient(120% 70% at 50% 0%, rgba(94,110,160,.10) 0%, rgba(0,0,0,0) 60%);
  }
}
:root[data-theme="dark"]{
  --stone:#0E1017; --vellum:#1A1E29; --sunk:#080A10;
  --ink:#E9E6DE; --mist:#A2A4B0; --faint:#71747F;
  --tekhelet:#90A9EA; --tekhelet-soft:#1B2136; --tekhelet-line:#2F3A5C;
  --zahav:#C6A059; --zahav-soft:#241E12;
  --rule:#272B38; --hair:#20242F;
  --shadow:0 1px 1px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.36),
       0 10px 24px -12px rgba(0,0,0,.72);
  --shadow-lift:0 1px 2px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.42),
          0 22px 46px -20px rgba(0,0,0,.85);
  --shadow-page:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -14px rgba(0,0,0,.7),
          0 40px 70px -44px rgba(0,0,0,.9);
  --edge:inset 0 1px 0 rgba(255,255,255,.055);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
  --ground:radial-gradient(120% 70% at 50% 0%, rgba(94,110,160,.10) 0%, rgba(0,0,0,0) 60%);
}
:root[data-warm="on"]{
  --stone:#14100A; --vellum:#1E1810; --sunk:#0D0A05;
  --ink:#F0DDB6; --mist:#B49B71; --faint:#7E6A4C;
  --tekhelet:#E3B872; --tekhelet-soft:#241B0F; --tekhelet-line:#3B2E1A;
  --zahav:#D8A94F; --zahav-soft:#241B0F;
  --rule:#33281A; --hair:#291F13;
}
:root[data-shabbat="on"]{ --tekhelet:#8A6A2F; --tekhelet-soft:#F5EEDC; --tekhelet-line:#DFCEA4; }
@media (prefers-color-scheme: dark){
  :root[data-shabbat="on"]:not([data-theme="light"]){
    --tekhelet:#E0BE79; --tekhelet-soft:#241C10; --tekhelet-line:#41341C; }
}
:root[data-theme="dark"][data-shabbat="on"]{
  --tekhelet:#E0BE79; --tekhelet-soft:#241C10; --tekhelet-line:#41341C; }

*,*::before,*::after{box-sizing:border-box}
/* the hidden attribute must beat any display: rule of ours */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  background-color:var(--stone);
  background-image:var(--grain), var(--ground);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0; text-wrap:balance; line-height:1.25}
p{margin:0}
a{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent}
button,select{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--tekhelet); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:99;background:var(--vellum);padding:10px 16px;border-radius:8px;box-shadow:var(--shadow-lift)}
.mt{margin-top:24px}

.wrap{max-width:1080px; margin:0 auto; padding-inline:var(--gut)}
.eyebrow{font-size:.688rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--zahav)}
[dir="ltr"] .eyebrow{letter-spacing:.1em}

.sirtut{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sirtut::after{content:"";flex:1;height:1px;background:var(--rule);min-width:20px}
.sirtut h2{font-size:1.375rem}
.sirtut .nusach{flex:none;order:1}
.sirtut.mt{margin-top:32px}

/* ── masthead ──────────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--stone);
  background:color-mix(in srgb, var(--stone) 90%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 rgba(255,255,255,.5), 0 6px 16px -12px rgba(20,26,48,.5);
  padding-top:env(safe-area-inset-top);
}
.masthead .wrap{display:flex;align-items:center;gap:8px;height:54px}
.brand{display:flex;align-items:baseline;gap:8px;margin-inline-end:auto;min-width:0}
.brand b{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:.688rem;color:var(--faint);letter-spacing:.08em;white-space:nowrap}
.mark{width:25px;height:25px;flex:none;align-self:center;color:var(--tekhelet);display:block}
.mast-tools{display:flex;align-items:center;gap:2px}
.navbtn{
  width:var(--tap);height:var(--tap);border-radius:999px;display:grid;place-items:center;
  color:var(--mist);transition:background .16s,color .16s;
}
.navbtn:active{background:var(--sunk)}
.navbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.navbtn.back{margin-inline-start:calc(var(--gut) * -0.4)}
[dir="rtl"] .navbtn.back svg{transform:scaleX(-1)}

.langsw{position:relative;display:flex;align-items:center;height:var(--tap);padding-inline:6px;color:var(--mist)}
.langsw svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;pointer-events:none}
.langsw select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}

/* ── bottom tab bar: the primary navigation on a phone ─────────── */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:44;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--vellum);
  background:color-mix(in srgb, var(--vellum) 94%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid var(--hair);
  box-shadow:0 -1px 0 rgba(255,255,255,.5), 0 -10px 26px -16px rgba(20,26,48,.5);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--tabbar-h);color:var(--faint);font-size:.625rem;font-weight:500;
  transition:color .16s;
}
.tabbar a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linejoin:round}
.tabbar a[aria-current="page"]{color:var(--tekhelet)}
.tabbar a:active{color:var(--ink)}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:4px}

/* ── now panel ─────────────────────────────────────────────────── */
.now{padding:22px 0 18px}
.now-grid{display:grid;gap:16px}
.now-date{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;min-height:1.2em}
.now-date .heb{font-family:var(--display);font-size:1.5rem;font-weight:500}
.now-date .greg{font-size:.813rem;color:var(--faint);font-variant-numeric:tabular-nums}
.badge{
  font-size:.688rem;font-weight:500;padding:3px 9px;border-radius:999px;
  background:var(--zahav-soft);color:var(--zahav);
  border:1px solid var(--zahav-soft);
  border:1px solid color-mix(in srgb, var(--zahav) 26%, transparent);
}
.now-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--vellum) 96%, #fff) 0%, var(--vellum) 62%);
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--shadow-lift), var(--edge);
  position:relative;overflow:hidden;
}
.now-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--tekhelet)}
.now-card.glow{background:radial-gradient(120% 90% at 50% -10%, var(--tekhelet-soft) 0%, transparent 62%),var(--vellum)}
.now-card .eyebrow{display:block;margin-bottom:8px}
.now-card h1{font-size:1.875rem;font-weight:700;letter-spacing:-.015em}
.now-card .until{margin-top:8px;color:var(--mist);font-size:.938rem}
.now-card .until b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.now-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 20px;border-radius:999px;
  font-size:.875rem;font-weight:500;transition:transform .12s,background .16s;
}
.btn:active{transform:scale(.98)}
.btn-primary{
  color:var(--stone);
  background:var(--tekhelet);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tekhelet) 88%, #fff) 0%, var(--tekhelet) 100%);
  box-shadow:0 1px 1px rgba(20,26,48,.18), 0 6px 16px -6px color-mix(in srgb, var(--tekhelet) 70%, transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:active{box-shadow:0 1px 1px rgba(20,26,48,.2), inset 0 1px 2px rgba(0,0,0,.18)}
:root[data-theme="dark"] .btn-primary,:root[data-warm="on"] .btn-primary{color:#10121A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{color:#10121A}}
.btn-quiet{border:1px solid var(--rule);color:var(--mist)}

.zmanim{background:var(--vellum);border:1px solid var(--hair);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow), var(--edge)}
.zmanim header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.zmanim .loc{font-size:.75rem;color:var(--faint);display:flex;align-items:center;gap:6px}
.zmanim .loc button{color:var(--tekhelet);font-size:.75rem;text-decoration:underline;text-underline-offset:2px;min-height:32px}
.zrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:.875rem}
.zrow:last-child{border-bottom:0}
.zrow .zn{color:var(--mist);flex:1}
.zrow .zt{font-variant-numeric:tabular-nums;font-weight:500}
.zrow.past .zn,.zrow.past .zt{color:var(--faint)}
.zrow.next .zn,.zrow.next .zt{color:var(--tekhelet);font-weight:500}
.zdot{width:5px;height:5px;border-radius:50%;background:var(--rule);flex:none}
.zrow.next .zdot{background:var(--tekhelet);box-shadow:0 0 0 3px var(--tekhelet-soft)}
.znote{margin-top:12px;font-size:.688rem;line-height:1.6;color:var(--faint)}

.moment{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--tekhelet-soft);border:1px solid var(--tekhelet-line);
  border-radius:var(--radius);padding:13px 16px;margin-top:12px;
  font-size:.875rem;color:var(--tekhelet);
}
.moment b{font-weight:500;font-variant-numeric:tabular-nums}
.moment a{text-decoration:underline;text-underline-offset:3px;margin-inline-start:auto;white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}

/* a band folds away when it is not this hour's business */
.band-d > summary{list-style:none;cursor:pointer;margin-bottom:16px}
.band-d > summary::-webkit-details-marker{display:none}
.band-d > summary::before{
  content:"";flex:none;width:8px;height:8px;order:2;
  border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);
  transform:rotate(45deg);margin-bottom:3px;transition:transform .18s;
}
.band-d[open] > summary::before{transform:rotate(-135deg);margin-bottom:-3px}
.band-d > summary:hover h2{color:var(--tekhelet)}

/* ── cards & grids ─────────────────────────────────────────────── */
section.band{padding-block:22px}
.grid{display:grid;gap:10px}
.grid.g3{grid-template-columns:1fr}
.grid.g4{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.card{
  display:block;background:var(--vellum);border:1px solid var(--hair);border-radius:var(--radius);
  padding:16px 18px;min-height:var(--tap);
  box-shadow:var(--shadow), var(--edge);
  transition:border-color .16s, transform .14s, box-shadow .18s;
}
.card:active{transform:translateY(1px) scale(.995);box-shadow:var(--shadow)}
.card h3{font-size:1.0625rem;margin-bottom:3px}
.card p{font-size:.813rem;color:var(--mist);line-height:1.5}

.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.day{
  background:var(--vellum);border:1px solid var(--hair);border-radius:11px;
  padding:13px 8px;text-align:center;min-height:var(--tap);
  box-shadow:var(--shadow), var(--edge);transition:transform .14s, box-shadow .18s;
}
.day:active{transform:translateY(1px);box-shadow:var(--shadow)}
.day .dn{font-family:var(--display);font-size:1.125rem;display:block}
.day .dc{font-size:.688rem;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:2px;display:block}
.day.sm{padding:10px 6px}
.day.sm .dn{font-size:1rem}
.day.today{background:var(--tekhelet-soft);border-color:var(--tekhelet);color:var(--tekhelet)}
.day.today .dc{color:var(--tekhelet)}

.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.chip{
  aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--hair);border-radius:9px;
  background:var(--vellum);font-family:var(--display);font-size:1rem;min-height:44px;
  box-shadow:var(--shadow), var(--edge);transition:transform .12s, box-shadow .16s;
}
.chip:active{transform:translateY(1px);box-shadow:none}
.chip:active{background:var(--tekhelet);border-color:var(--tekhelet);color:var(--stone)}

/* ── reader ────────────────────────────────────────────────────── */
.reader{padding-block:18px 44px}
.crumb{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--faint);margin-bottom:12px;flex-wrap:wrap}
.reader-head{max-width:var(--measure);margin:0 auto 22px}
.reader-head.wide-head,main.wide .reader-head{max-width:none}
.reader-head h1{font-size:1.75rem;font-weight:700;letter-spacing:-.015em}
.reader-head .sub{color:var(--mist);margin-top:6px;font-size:.938rem}
.hint{margin-top:14px;font-size:.75rem;color:var(--faint)}

.part{
  max-width:var(--measure);margin:0 auto;
  background:var(--vellum);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow-page), var(--edge);
  padding:4px 20px 22px;
}
main.wide .part{max-width:var(--measure)}
.part + .part{margin-top:26px}
/* the pager is navigation, not a page */
.part.pager{background:none;border:0;box-shadow:none;padding:0}
@media (max-width:639px){
  .part{margin-inline:calc(var(--gut) * -1);border-radius:0;border-inline-width:0;padding-inline:var(--gut)}
}
.part-h{
  /* in-flow, not sticky: a header that rides along through a 110-verse
     reading gets in the way — the reader knows what they are reading */
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-block:14px 10px;
}
.part-h::after{content:"";flex:1;height:1px;background:var(--rule)}
.part-h h2{font-size:1.1875rem;color:var(--tekhelet)}
.part-h .idx{font-size:.688rem;color:var(--faint);font-variant-numeric:tabular-nums;
  border:1px solid var(--rule);border-radius:999px;padding:1px 8px;flex:none}

.lit{
  font-family:var(--liturgy);font-size:var(--liturgy-size);line-height:var(--liturgy-lead);
  text-align:right;margin-block:0 1.1em;border-radius:6px;
  transition:background .2s;
}
[dir="ltr"] .lit{direction:rtl}
.lit:last-child{margin-bottom:0}
.lit.marked{background:var(--zahav-soft);box-shadow:0 0 0 6px var(--zahav-soft)}
.lit .t{display:block}
/* translation sits under its Hebrew line, in the reading direction of the page */
.lit .tr{
  display:none;font-family:var(--ui);font-size:.813rem;line-height:1.65;
  color:var(--mist);margin-top:.4em;
  direction:ltr;text-align:left;
}
[dir="rtl"] .lit .tr{text-align:left}
body.show-tr .lit .tr{display:block}
.dir{
  font-family:var(--ui);font-size:.813rem;line-height:1.65;color:var(--mist);
  /* an instruction is an aside on the page, not a block that competes with it */
  background:var(--sunk);
  background:color-mix(in srgb, var(--sunk) 55%, var(--vellum));
  border-inline-start:2px solid color-mix(in srgb, var(--zahav) 55%, transparent);
  padding:8px 12px;border-radius:0 6px 6px 0;margin-block:.2em 1.1em;
  direction:rtl;text-align:right;
}
.verse{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.verse .vn{
  font-family:var(--ui);font-size:.625rem;font-weight:500;color:var(--faint);
  min-width:1.6em;text-align:center;flex:none;font-variant-numeric:tabular-nums;
}
.verse .t{flex:1;min-width:0}
.verse .tr{flex-basis:100%}
.pager{display:flex;gap:10px;justify-content:space-between;margin-top:30px}

.nusach{display:flex;align-items:center;gap:2px;padding:3px;background:var(--sunk);
  border:1px solid var(--hair);border-radius:999px;width:fit-content;max-width:100%;overflow-x:auto}
.nusach a,.nusach button{
  padding:8px 13px;border-radius:999px;font-size:.75rem;font-weight:500;color:var(--mist);
  white-space:nowrap;transition:background .15s,color .15s;
}
.nusach a.on,.nusach button.on{background:var(--vellum);color:var(--tekhelet);box-shadow:var(--shadow)}
.reader-head .nusach{margin-top:14px}
.nusach-note{
  font-size:.813rem;color:var(--mist);background:var(--sunk);
  border-inline-start:2px solid var(--zahav);border-radius:0 7px 7px 0;
  padding:10px 14px;margin-top:14px;
}
.nusach-note.quiet{border-inline-start-color:var(--rule)}
.nusach-note b{color:var(--ink);font-weight:500}

/* ── control dock: floats above the tab bar ────────────────────── */
.dock{
  position:fixed;inset-inline:0;z-index:45;pointer-events:none;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
  display:flex;justify-content:center;padding-inline:var(--gut);
}
.dock-inner{
  pointer-events:auto;display:flex;align-items:center;gap:2px;padding:5px;
  background:color-mix(in srgb, var(--vellum) 95%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--rule);border-radius:999px;
  box-shadow:var(--shadow-lift), var(--edge);
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.dock-inner::-webkit-scrollbar{display:none}
.dk{width:40px;height:40px;flex:none;border-radius:999px;display:grid;place-items:center;color:var(--mist);transition:background .14s,color .14s}
.dk:active{background:var(--sunk)}
.dk.on{background:var(--tekhelet-soft);color:var(--tekhelet)}
.dk svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dk .txt{font-family:var(--display);font-weight:700;line-height:1}
.dk-sep{width:1px;height:20px;background:var(--rule);margin-inline:2px;flex:none}
.dk-lbl{font-size:.75rem;color:var(--faint);padding-inline:6px;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:center;flex:none}

/* the reader's own choice of face */
:root[data-font="noto"]  { --liturgy:"Noto Serif Hebrew",var(--heb-fallback) }
:root[data-font="david"] { --liturgy:"David Libre",var(--heb-fallback) }
:root[data-font="sans"]  { --liturgy:"Heebo","Arial Hebrew",system-ui,sans-serif }
.civil{color:var(--faint);font-size:.9em}

/* ── settings ──────────────────────────────────────────────────── */
.set-title{flex:1;font-family:var(--display);font-size:1.125rem;font-weight:700}
.set-body{overflow-y:auto;flex:1;padding:6px 0 28px;-webkit-overflow-scrolling:touch}
.set-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:15px var(--gut);
  border-bottom:1px solid var(--hair)}
.set-row > label{flex:1;font-size:.938rem;min-width:8em}
.set-note{flex-basis:100%;font-size:.75rem;color:var(--faint);line-height:1.55;margin-top:-2px}
.seg{display:flex;gap:2px;padding:3px;background:var(--sunk);border:1px solid var(--hair);
  border-radius:999px;flex-wrap:wrap}
.seg button,.seg a{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;font-size:.813rem;font-weight:500;
  color:var(--mist);min-height:36px;white-space:nowrap;transition:background .15s,color .15s}
.seg button.on,.seg a.on{background:var(--vellum);color:var(--tekhelet);box-shadow:var(--shadow)}
.stepper{display:flex;align-items:center;gap:4px;background:var(--sunk);border:1px solid var(--hair);
  border-radius:999px;padding:3px}
.stepper button{width:38px;height:36px;border-radius:999px;font-size:1.05rem;color:var(--mist)}
.stepper button:active{background:var(--vellum)}
.stepper span{min-width:3.4em;text-align:center;font-size:.813rem;font-variant-numeric:tabular-nums}
#setCity{background:var(--sunk);border:1px solid var(--hair);border-radius:999px;
  padding:9px 14px;font-size:.813rem;color:var(--ink);min-height:36px}
.set-geo{color:var(--tekhelet);font-size:.813rem;text-decoration:underline;text-underline-offset:3px;min-height:36px}
.set-reset{margin:18px var(--gut) 0;padding:12px 18px;border:1px solid var(--rule);border-radius:999px;
  color:var(--mist);font-size:.875rem;width:calc(100% - var(--gut) * 2);min-height:var(--tap)}
#setContinue a{display:flex;align-items:center;gap:10px;width:100%;color:var(--tekhelet);font-size:.938rem}
#setContinue .cont-t{flex:1;font-family:var(--display);font-size:1.0625rem}
#setContinue .cont-empty{font-size:.813rem;color:var(--faint);line-height:1.55}

/* ── search ────────────────────────────────────────────────────── */
.sheet{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(0,0,0,.45);
  background:color-mix(in srgb, var(--sunk) 72%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:0;
}
.sheet.open{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-box{
  background:var(--vellum);box-shadow:var(--shadow-lift);
  display:flex;flex-direction:column;height:100%;
  padding-top:env(safe-area-inset-top);
}
.sheet-in{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--hair)}
.sheet-in svg{width:19px;height:19px;stroke:var(--faint);fill:none;stroke-width:1.8;flex:none}
.sheet-in input{flex:1;border:0;background:none;font-family:var(--display);font-size:1.125rem;color:var(--ink);outline:none;min-width:0;min-height:var(--tap)}
.sheet-in input::placeholder{color:var(--faint)}
.sheet-x{width:var(--tap);height:var(--tap);flex:none;color:var(--faint);font-size:1.05rem;border-radius:999px}
.results{overflow-y:auto;padding:6px;-webkit-overflow-scrolling:touch;flex:1}
.res{display:block;padding:12px 13px;border-radius:10px}
.res.sel{background:var(--tekhelet-soft)}
.res .rt{font-size:.75rem;color:var(--tekhelet);font-weight:500;margin-bottom:3px}
.res .rx{font-family:var(--liturgy);font-size:1.0625rem;line-height:1.75;color:var(--ink);direction:rtl;text-align:right;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.res .rr{font-size:.75rem;color:var(--mist);margin-top:3px;direction:ltr;text-align:left;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.res mark{background:var(--zahav-soft);color:var(--zahav);border-radius:3px;padding:0 1px}
.res-empty{padding:28px 20px;text-align:center;color:var(--faint);font-size:.875rem}

/* ── reading ───────────────────────────────────────────────────── */
/* a long passage reads as paragraphs, not a slab */
.lit .sent{display:block}
.lit .sent + .sent{margin-top:.55em}

/* how far through the page you are */
.progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;background:var(--tekhelet);transform:scaleX(0);
  transform-origin:right center;transition:transform .1s linear}
[dir="ltr"] .progress i{transform-origin:left center}

/* chrome steps aside while you read downward, returns the moment you scroll back */
.masthead,.tabbar,.dock{transition:transform .26s cubic-bezier(.4,0,.2,1)}
body.chrome-hidden .masthead{transform:translateY(-100%)}
body.chrome-hidden .tabbar{transform:translateY(100%)}
@media (prefers-reduced-motion: reduce){
  body.chrome-hidden .masthead,body.chrome-hidden .tabbar,body.chrome-hidden .dock{transform:none}
}

/* ── the plain-language parasha summary ────────────────────────── */
.parasha-about{
  max-width:var(--measure);margin:0 auto 22px;padding:16px 20px;
  background:var(--tekhelet-soft);border:1px solid var(--tekhelet-line);
  border-radius:var(--radius);
}
.parasha-about h2{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--ui);font-weight:500;color:var(--tekhelet);margin-bottom:8px}
.parasha-about p{font-size:1rem;line-height:1.85;color:var(--ink)}

/* ── seasonal markers: the siddur knows the date ───────────────── */
.chip-season{
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  font-family:var(--ui);font-size:.625rem;font-weight:500;letter-spacing:.02em;
  padding:2px 8px;border-radius:999px;margin-inline-end:8px;white-space:nowrap;
}
.chip-season.on{background:var(--zahav-soft);color:var(--zahav);
  border:1px solid color-mix(in srgb, var(--zahav) 35%, transparent)}
.chip-season.off{background:none;color:var(--faint);border:1px solid var(--rule)}
.dir .chip-season{margin-inline-start:0}

/* ── ad slots ──────────────────────────────────────────────────── */
/* reserved space so the layout never jumps when a unit loads (CLS) */
.ad-slot{max-width:var(--measure);margin:26px auto;min-height:110px}
.ad-slot .ad-lbl{display:block;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-align:center;margin-bottom:6px}
.ad-slot.demo{border:1.5px dashed var(--rule);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--faint);
  font-size:.688rem;letter-spacing:.16em;text-transform:uppercase}

/* ── dedications: a candle-lit line, never louder than the prayer ── */
.dedication{
  max-width:var(--measure);margin:14px auto 0;padding:12px 16px;text-align:center;
  background:var(--zahav-soft);border:1px solid color-mix(in srgb, var(--zahav) 30%, transparent);
  border-radius:var(--radius);color:var(--zahav);
  font-family:var(--display);font-size:1rem;line-height:1.6;
}
.now .dedication{margin-bottom:14px}
.ded-row{margin-top:10px}
.dedicate-btn{color:var(--zahav);font-size:.813rem;min-height:32px;
  text-decoration:underline;text-underline-offset:3px}

/* ── candles ───────────────────────────────────────────────────── */
.candles{
  display:flex;justify-content:center;align-items:flex-end;gap:26px;
  margin-bottom:4px;padding-top:66px;position:relative;
}
/* the light the flames throw down onto the page they stand on */
.candles::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-14px;width:210px;height:54px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,190,90,.30) 0%, rgba(255,190,90,.10) 42%, rgba(255,190,90,0) 72%);
  opacity:0;transition:opacity .9s ease;
}
.candles.lit::after{opacity:1}
.candle{
  position:relative;width:16px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  /* the tap target is larger than the candle it draws */
  touch-action:manipulation;
}
.candle::after{content:"";position:absolute;inset:-14px -12px -8px;border-radius:12px}
.candle .wax{
  display:block;width:16px;height:60px;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#F6EEDC 0%,#EADFC4 55%,#DCCFAF 100%);
  box-shadow:inset -3px 0 5px rgba(120,100,60,.22);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="dark"] .candle .wax{background:linear-gradient(180deg,#EDE3CC 0%,#CFC2A2 60%,#A99B78 100%)}
.candle .wick{position:absolute;bottom:60px;width:1.6px;height:6px;background:#4A4030;border-radius:1px}
.candle .flame{position:absolute;bottom:58px;width:40px;height:64px;pointer-events:none}
.candle.flick .wax{transform:translateY(-2px) scaleY(1.03)}
.candle:active .wax{transform:translateY(1px)}

.menorah{gap:6px;align-items:flex-end;padding-top:52px}
.menorah .candle{width:10px}
.menorah .candle .wax{width:10px;height:38px}
.menorah .candle .wick{bottom:38px}
.menorah .candle .flame{bottom:37px;width:26px;height:44px}
.menorah .candle.shamash{margin-inline-end:12px}
.menorah .candle.shamash .wax{height:50px}
.menorah .candle.shamash .wick{bottom:50px}
.menorah .candle.shamash .flame{bottom:49px}

/* this week's portion, surfaced where the week matters */
.parasha-now{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--tekhelet-soft);border:1px solid var(--tekhelet-line);
  border-radius:var(--radius);padding:14px 17px;margin-bottom:18px;color:var(--tekhelet);
}
.parasha-now .pn-l{font-size:.688rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.parasha-now .pn-n{font-family:var(--display);font-size:1.375rem;font-weight:500}
.parasha-now a{margin-inline-start:auto;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}

/* ── footer ────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);margin-top:30px;padding-block:26px 34px;background:var(--vellum)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px}
footer h4{font-size:.688rem;letter-spacing:.1em;text-transform:uppercase;color:var(--zahav);font-family:var(--ui);font-weight:500;margin-bottom:8px}
footer ul{margin:0;padding:0}
footer li{list-style:none;font-size:.875rem;color:var(--mist);line-height:2}
.colophon{margin-top:24px;padding-top:16px;border-top:1px solid var(--hair);font-size:.75rem;color:var(--faint);line-height:1.7}
.colophon a,footer .colophon a{color:var(--tekhelet);text-decoration:underline;text-underline-offset:2px}
.hidden{display:none !important}

/* ── wider screens ─────────────────────────────────────────────── */
@media (min-width:640px){
  :root{--gut:28px}
  .grid.g3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .now-card h1{font-size:2.25rem}
  .reader-head h1{font-size:2.25rem}
  .sheet{padding:6vh var(--gut) 20px}
  .sheet-box{height:auto;max-height:min(70vh,620px);max-width:640px;margin:0 auto;
    border:1px solid var(--rule);border-radius:var(--radius);padding-top:0}
  .card:hover{border-color:var(--tekhelet-line);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
  .chip:hover{border-color:var(--tekhelet);color:var(--tekhelet)}
  .day:hover{border-color:var(--tekhelet-line)}
  .res:hover{background:var(--tekhelet-soft)}
}
@media (min-width:900px){
  :root{--gut:40px;--tabbar-h:0px}
  body{padding-bottom:0}
  .tabbar{display:none}
  .dock{bottom:max(16px, env(safe-area-inset-bottom))}
  .now{padding:44px 0 34px}
  .now-grid{grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
  .now-date .heb{font-size:2rem}
  .now-card{padding:28px}
  .now-card h1{font-size:2.75rem}
  section.band{padding-block:40px}
  .reader{padding-block:32px 56px}
  .masthead .wrap{height:60px}
  /* translations read side by side when there is room */
  body.show-tr.side .lit{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:baseline}
  body.show-tr.side .lit .tr{margin-top:0}
}