/* ── self-hosted fonts ── */
@font-face{font-family:"Noto Serif Hebrew";font-style:normal;font-weight:400;font-display:optional;src:url("/assets/fonts/noto-serif-hebrew-400.woff2") format("woff2")}
@font-face{font-family:"Noto Serif Hebrew";font-style:normal;font-weight:500;font-display:optional;src:url("/assets/fonts/noto-serif-hebrew-500.woff2") format("woff2")}
@font-face{font-family:"Noto Serif Hebrew";font-style:normal;font-weight:700;font-display:optional;src:url("/assets/fonts/noto-serif-hebrew-700.woff2") format("woff2")}
@font-face{font-family:"Heebo";font-style:normal;font-weight:400 500;font-display:optional;src:url("/assets/fonts/heebo-hebrew.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:"Heebo";font-style:normal;font-weight:400 500;font-display:optional;src:url("/assets/fonts/heebo-latin.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}
/* metric-matched fallbacks: nothing shifts if the web font is skipped */
@font-face{font-family:"Noto Serif Hebrew Fallback";src:local("Times New Roman"),local("Noto Serif Hebrew");size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Heebo Fallback";src:local("Arial"),local("Helvetica"),local("Arial Hebrew");size-adjust:100%;ascent-override:92%;descent-override:24%;line-gap-override:0%}

/* ── 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:#4F525B; --faint:#64666E;
  --tekhelet:#22376B; --tekhelet-soft:#E4E8F3; --tekhelet-line:#BCC7E2;
  --zahav:#7F6128; --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 Fallback","Times New Roman","Arial Hebrew","Narkisim",serif;
  --display:"Noto Serif Hebrew",var(--heb-fallback);
  --liturgy:"Noto Serif Hebrew",var(--heb-fallback);
  --ui:"Heebo","Heebo Fallback","Segoe UI",system-ui,"Arial Hebrew",sans-serif;
  --gut:18px;
  --measure:34rem;
  --radius:14px;
  --tap:44px;                       /* minimum comfortable touch target */
  --aside-bg:#EEEAE0;   /* instruction aside: a step sunken from vellum */
  --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:#8F919B;
    --tekhelet:#90A9EA; --tekhelet-soft:#1B2136; --tekhelet-line:#2F3A5C;
    --zahav:#C6A059; --zahav-soft:#241E12;
    --aside-bg:#242A3A;   /* lifted above the card so the aside reads as distinct */
    --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:#8F919B;
  --tekhelet:#90A9EA; --tekhelet-soft:#1B2136; --tekhelet-line:#2F3A5C;
  --zahav:#C6A059; --zahav-soft:#241E12;
  --aside-bg:#242A3A;
  --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:#9F8660;
  --tekhelet:#E3B872; --tekhelet-soft:#241B0F; --tekhelet-line:#3B2E1A;
  --zahav:#D8A94F; --zahav-soft:#241B0F;
  --aside-bg:#2A2115;
  --rule:#33281A; --hair:#291F13;
}
:root[data-shabbat="on"]{ --tekhelet:#7F612B; --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}
/* fixed three-row grid: the date, the civil date and the badge row each own
   a row, so filling them in cannot reflow the panel */
.now-date{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"heb heb" "greg greg" "badges badges";
  align-items:baseline;column-gap:10px;margin-bottom:12px}
.now-date .heb{grid-area:heb;min-height:1lh}
.now-date .greg{grid-area:greg;min-height:1lh}
.now-date .badges{grid-area:badges;min-height:26px;margin-top:6px}
@media (min-width:640px){.now-date{grid-template-areas:"heb greg" "badges badges"}}
.now-date .heb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);font-size:1.5rem;font-weight:500}
.now-date .greg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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{min-height:2lh;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;
  scroll-margin-top:70px;
}
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-txt{display:block}
body.show-tl .lit .tr-lat{display:block}
body[data-lang="es"].show-tr .lit .tr-lat{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(--aside-bg, var(--sunk));
  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:"Noto Serif Hebrew",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 .rp{font-family:var(--display);font-size:1rem;line-height:1.45;color:var(--ink)}
.res-pg{border-inline-start:2px solid var(--tekhelet-soft)}
.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{
  /* two fixed rows on narrow screens so the portion's name can never
     rewrap the strip; one row once there is room */
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"l n" "a a";align-items:center;column-gap:12px;
  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{grid-area:l;font-size:.688rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.parasha-now .pn-n{grid-area:n;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);font-size:1.375rem;font-weight:500}
.parasha-now a{grid-area:a;margin-inline-start:auto;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}
@media (min-width:560px){.parasha-now{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"l n a"}}

/* ── footer ────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--hair);margin-top:30px;padding-block:26px 34px;background:var(--vellum)}
html.is-app .web-only{display:none}
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-txt,body.show-tl.side .lit .tr-lat{margin-top:0}
}

/* privacy and other plain-prose pages */
.lit-plain p{max-width:38rem;line-height:1.85;margin:0 0 14px}

/* עוד על הפרשה — quiet in-place deep dive */
.iyun{margin-top:10px}
.iyun>summary{cursor:pointer;list-style:none;display:inline-block;
  font-weight:600;font-size:.88rem;color:var(--tekhelet);
  border-bottom:1px solid var(--tekhelet-line);padding-bottom:1px}
.iyun>summary::-webkit-details-marker{display:none}
.iyun[open]>summary{margin-bottom:4px}
.iyun section{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hair)}
.iyun section h3{margin:0 0 6px;font-size:1rem;color:var(--zahav)}
.iyun section p,.iyun section li{margin:0 0 8px;line-height:1.8}
.iyun ol{margin:0;padding-inline-start:20px}
.iyun.toc{margin-top:14px;padding:10px 12px;border:1px solid var(--tekhelet-line);border-radius:12px;background:var(--tekhelet-soft)}
.iyun.toc>summary{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;border-radius:0;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--tekhelet)}
.iyun.toc>summary::after{content:"▾";margin-inline-start:auto;font-size:.95rem;transition:transform .15s}
.iyun.toc:not([open])>summary::after{transform:rotate(-90deg)}
.iyun.toc[open]>summary{margin-bottom:0}
.iyun.toc>ol{margin:10px 0 0;padding:0;list-style:none;columns:auto;column-gap:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:toc}
.iyun.toc li{margin:0;line-height:1.4;break-inside:auto}
.iyun.toc a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 12px;border-radius:999px;background:var(--vellum);border:1px solid var(--tekhelet-line);color:var(--ink);font-size:.95rem;text-decoration:none}
.iyun.toc a::before{counter-increment:toc;content:counter(toc);font-size:.72rem;font-weight:700;color:var(--tekhelet);min-width:1.2em;text-align:center}
.iyun.toc a:hover{border-color:var(--tekhelet)}
.iyun-q{background:var(--zahav-soft);border:1px solid var(--zahav);border-top:1px solid var(--zahav) !important;
  border-radius:12px;padding:12px 14px !important;margin-top:16px !important}

/* navigation must feel instant: pressed states + a top progress bar */
.tabbar a:active,.card:active,.chip:active,.band-d summary:active{opacity:.55;transition:opacity .05s}
/* back-to-top: appears after two screens of scroll, fades away at the top */
#toTop{
  position:fixed;left:14px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  width:44px;height:44px;border-radius:999px;z-index:60;
  background:var(--vellum);border:1px solid var(--tekhelet-line);color:var(--tekhelet);
  display:grid;place-items:center;box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){#toTop{transition:none}}

#navbar{position:fixed;top:0;right:0;left:0;height:3px;z-index:999;pointer-events:none;
  background:linear-gradient(90deg,var(--zahav),var(--tekhelet));transform:scaleX(0);transform-origin:100% 0;opacity:0}
#navbar.go{animation:navgo 1.6s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes navgo{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(.75);opacity:1}100%{transform:scaleX(.95);opacity:1}}
@media (prefers-reduced-motion:reduce){#navbar{display:none}}

/* ══ refinement layer ═══════════════════════════════════════════════
   Same identity, more light: a single breathing gold point (the ner
   tamid) at the brand mark, gold hairlines instead of grey ones, warm
   light pooling at the top of every page, and headings with presence. */
:root{--gold-hi:#C9A557; --gold-glow:rgba(201,165,87,.55);
      --pool:rgba(255,251,242,.95); --sheen:rgba(255,255,255,.55)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--gold-hi:#D8B76A; --gold-glow:rgba(216,183,106,.38);
      --pool:rgba(144,169,234,.07); --sheen:rgba(255,255,255,.045)}}
:root[data-theme="dark"]{--gold-hi:#D8B76A; --gold-glow:rgba(216,183,106,.38);
      --pool:rgba(144,169,234,.07); --sheen:rgba(255,255,255,.045)}

/* warm light pooling from the top, a faint gold horizon at the bottom */
body{
  background-image:
    var(--grain),
    radial-gradient(130% 62% at 50% -12%, var(--pool) 0%, transparent 62%),
    radial-gradient(80% 40% at 50% 108%, rgba(201,165,87,.10) 0%, rgba(201,165,87,0) 70%);
}

.mark{color:var(--tekhelet);filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}

/* a thin gold thread under the masthead instead of a grey line */
.masthead{border-bottom-color:transparent}
.masthead::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, rgba(201,165,87,0) 0%, var(--gold-hi) 35%, var(--gold-hi) 65%, rgba(201,165,87,0) 100%);
  opacity:.75;
}
.masthead{position:sticky}  /* keep; ::after needs a positioned parent */

/* cards: vellum with a gold hairline that catches light at the top edge */
.card,.now-card,.zmanim,.parasha-about{
  background:
    linear-gradient(180deg, var(--sheen) 0%, transparent 38%),
    var(--vellum);
  border-color:rgba(201,165,87,.28);
  box-shadow:var(--shadow-lift), var(--edge), 0 0 0 1px rgba(255,255,255,.35) inset;
}
.card h3{font-weight:700;color:var(--tekhelet)}
.now-card::before{background:linear-gradient(180deg, var(--gold-hi), var(--zahav))}
.now-card h1{font-size:2.1rem;line-height:1.15}
.now-card.glow{background:
  radial-gradient(110% 80% at 85% -10%, rgba(201,165,87,.18) 0%, rgba(201,165,87,0) 60%),
  linear-gradient(180deg, var(--sheen) 0%, transparent 38%), var(--vellum)}

/* section headers: gold thread, tekhelet title with more presence */
.sirtut::after,.part-h::after{
  background:linear-gradient(90deg, rgba(201,165,87,.75), rgba(201,165,87,0));
}
[dir="ltr"] .sirtut::after,[dir="ltr"] .part-h::after{
  background:linear-gradient(90deg, rgba(201,165,87,.75), rgba(201,165,87,0));
}
.sirtut h2,.part-h h2{font-weight:700;letter-spacing:-.01em}
.part-h .idx{border-color:rgba(201,165,87,.5);color:var(--zahav)}
.reader-head h1{font-size:1.95rem;line-height:1.15}
.reader-head .sub{color:var(--zahav);font-weight:500}

/* tab bar: the active tab carries a single gold point */
.tabbar a{position:relative;font-weight:600}
.tabbar a[aria-current="page"]::before{
  content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--gold-hi);box-shadow:0 0 8px var(--gold-glow);
}

/* buttons: a lip of light on the primary, vellum ground for the quiet ones */
.btn-primary{box-shadow:0 1px 1px rgba(20,26,48,.18), 0 8px 18px -8px rgba(34,55,107,.6),
             inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(201,165,87,.35)}
.btn-quiet{background:var(--vellum);border-color:rgba(201,165,87,.35);color:var(--ink)}

/* psalm chips: gold hairlines, the pressed one goes tekhelet as before */
.chip{border-color:rgba(201,165,87,.3)}
.day.today{border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(201,165,87,.18)}

/* dedication keeps its gold, now matching the new hairlines */
.dedication{border-color:rgba(201,165,87,.45)}

/* shared Tehillim: quiet entry link + the reading banner on a claimed chapter */
.quiet-link{color:var(--tekhelet);font-weight:500;border-bottom:1px solid var(--tekhelet-line)}
.koreh{display:grid;gap:10px;padding:16px 18px;margin:0 auto 18px;max-width:var(--measure);
  background:var(--zahav-soft);border:1px solid rgba(201,165,87,.55);border-radius:var(--radius);box-shadow:var(--shadow)}
.koreh b{font-family:var(--display);font-size:1.1rem;color:var(--zahav)}
.koreh small{color:var(--mist)}
.koreh .btn{justify-self:start}

/* rubric lines that have been translated read in the page's own direction */
.dir-tr{font-family:var(--ui)}

/* transliteration rides the translation slot, in the page's own script */
.tr-lat{font-family:var(--ui);font-style:italic;letter-spacing:.01em}

/* iOS: fixed/sticky bars with backdrop-filter can detach mid-scroll unless
   promoted to their own compositing layer */
.tabbar{transform:translateZ(0);will-change:transform}
.masthead{transform:translateZ(0)}

/* our own App Store banner: unmistakable, contrasting, dismissible forever */
.appband{display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:linear-gradient(180deg,#2C4B8F,#26407D);color:#F3F2ED;font-size:.82rem}
.appband b{font-weight:600}
.appband .get{margin-inline-start:auto;flex:none;background:#C9A557;color:#1A2340;
  font-weight:700;font-size:.8rem;padding:7px 16px;border-radius:99px;text-decoration:none}
.appband .x{flex:none;width:32px;height:32px;display:grid;place-items:center;color:#B9C4E2;font-size:1rem}


/* ── performance: long prayer pages ─────────────────────────────── */
/* each ברכה / פרק block renders only when it nears the viewport */
.reader .part,
.reader .perek,
.reader article.part{content-visibility:auto;contain-intrinsic-size:auto 600px}
/* Layout reservation is structural, not a pixel guess: the now panel, the
   zmanim box and the parasha strip ship their full skeleton in the HTML, so
   only the empty single-line nodes need a line box held open. */
#nowUntil,.now-card .eyebrow,.parasha-now .pn-n{min-height:1lh}
#nowDate .badges{display:inline-flex;gap:8px;flex-wrap:wrap}
.now-card{position:relative}
.now-card .lede{margin-top:8px;color:var(--mist);font-size:.938rem}
.flame-slot:empty{display:none}
.tabbar{min-height:var(--tabbar-h)}

/* ── floating "jump to a prayer" pill + sheet ───────────────────────── */
.toc-fab{
  position:fixed;left:50%;transform:translateX(-50%);z-index:46;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 2*var(--gut));
  min-height:44px;padding:8px 14px 8px 12px;border-radius:999px;
  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:1px solid var(--tekhelet-line);box-shadow:var(--shadow-lift), var(--edge);
  color:var(--ink);font-family:var(--ui);font-size:.9rem;line-height:1.2;cursor:pointer;
  transition:transform .26s cubic-bezier(.4,0,.2,1),bottom .26s cubic-bezier(.4,0,.2,1);
}
.toc-fab .tf-l{font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--tekhelet);white-space:nowrap}
.toc-fab .tf-n{font-family:var(--display);font-weight:500;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.toc-fab .tf-n:empty{display:none}
.toc-fab .tf-n:not(:empty)::before{content:"·";color:var(--faint);margin-inline-end:8px}
.toc-fab svg{width:16px;height:16px;flex:none;stroke:var(--tekhelet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.toc-fab[aria-expanded="true"] svg{transform:rotate(180deg)}
body.chrome-hidden .toc-fab{bottom:calc(env(safe-area-inset-bottom) + 12px)}
@media (min-width:900px){.toc-fab{bottom:max(16px, env(safe-area-inset-bottom))}}

.toc-sheet{
  position:fixed;left:50%;transform:translateX(-50%);z-index:47;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 64px);
  width:min(420px, calc(100% - 2*var(--gut)));max-height:min(60vh, 460px);overflow:auto;
  padding:8px;border-radius:16px;
  background:var(--vellum);border:1px solid var(--tekhelet-line);
  box-shadow:0 18px 40px rgba(0,0,0,.18), var(--edge);
}
body.chrome-hidden .toc-sheet{bottom:calc(env(safe-area-inset-bottom) + 64px)}
@media (min-width:900px){.toc-sheet{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 54px)}}
.toc-sheet ol{list-style:none;margin:0;padding:0}
.toc-sheet li+li{border-top:1px solid var(--hair)}
.toc-sheet button{
  display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:8px 10px;
  border-radius:10px;background:none;border:0;color:var(--ink);font:inherit;font-size:1rem;text-align:start;cursor:pointer;
}
.toc-sheet button:active{background:var(--sunk)}
.toc-sheet .ts-i{flex:none;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--tekhelet);background:var(--tekhelet-soft)}
.toc-sheet li.on button{background:var(--tekhelet-soft);font-weight:600}
.toc-sheet li.on .ts-i{background:var(--tekhelet);color:#fff}
/* the pill must not sit on the last lines of the prayer */
body:has(.toc-fab){padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 72px)}

.parasha-note{margin:8px 2px 0;color:var(--mist);font-size:.875rem;line-height:1.7}
.parasha-note[hidden]{display:none}