/* ==========================================================================
   MitzvahQuest — stylesheet
   Replaces BOTH <style> blocks in index.html.

   Two things to know before editing:
   1. Every original CSS variable name is preserved and repointed, because the
      JS emits var(--blue), var(--gold), var(--lb) etc. inside template strings.
      --lb was never defined in the original; it is defined here.
   2. The JS writes color/border/background INLINE on .hsp, .pchip, .pbadge,
      .tct and .tdot. Inline always beats a stylesheet rule, so those elements
      are styled with transform/shadow/currentColor instead of color.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Works today on system fonts. Better once frank-ruhl-libre + assistant
   woff2 files are dropped into /fonts.
   -------------------------------------------------------------------------- */

@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/frank-ruhl-libre-v21-hebrew_latin-500.woff2') format('woff2');}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/frank-ruhl-libre-v21-hebrew_latin-700.woff2') format('woff2');}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/frank-ruhl-libre-v21-hebrew_latin-900.woff2') format('woff2');}

@font-face{font-family:'Assistant';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/assistant-v19-hebrew_latin-regular.woff2') format('woff2');}
@font-face{font-family:'Assistant';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/assistant-v19-hebrew_latin-600.woff2') format('woff2');}
@font-face{font-family:'Assistant';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/assistant-v19-hebrew_latin-700.woff2') format('woff2');}
@font-face{font-family:'Assistant';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/assistant-v19-hebrew_latin-800.woff2') format('woff2');}

/* kept so any leftover reference still resolves */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/nunito-v32-latin-regular.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/nunito-v32-latin-700.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/nunito-v32-latin-800.woff2') format('woff2');}
@font-face{font-family:'Fredoka One';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fredoka-v17-latin-regular.woff2') format('woff2');}


/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root{
  --ink:        #1d1a17;
  --ink-2:      #453e35;
  --ink-3:      #736a5c;

  --page:       #faf8f4;
  --card:       #ffffff;
  --rule:       #e6e0d4;
  --rule-2:     #cec5b2;

  --scroll:     #f1e8d6;   /* parchment — Hebrew surfaces only */
  --scroll-2:   #e4d8bd;

  --brass:      #a3762a;
  --brass-2:    #c99a3e;
  --brass-wash: #f8f1df;
  --night:      #22314f;
  --night-2:    #33456b;
  --rimon:      #8e2b32;
  --seal:       #2f6152;
  --violet:     #574a80;

  --f-display:  'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --f-ui:       'Assistant', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-hebrew:   'Frank Ruhl Libre', 'Taamey Frank CLM', 'SBL Hebrew', 'David Libre',
                'Times New Roman', 'Arial Hebrew', serif;

  /* --- LEGACY ALIASES — the JS emits these, don't delete --- */
  --navy:       var(--night);
  --blue:       var(--night-2);
  --blue-light: #5d7099;
  --lb:         var(--brass);   /* used 5x in the JS, never defined originally */
  --sky:        var(--brass-wash);
  --gold:       var(--brass);
  --gold-light: var(--brass-wash);
  --green:      var(--seal);
  --red:        var(--rimon);
  --purple:     var(--violet);
  --pink:       #8e2b32;
  --orange:     var(--brass-2);
  --white:      #ffffff;
  --gray-50:    var(--page);
  --gray-100:   #f3efe6;
  --gray-200:   var(--rule);
  --gray-500:   var(--ink-3);
  --gray-700:   var(--ink-2);

  --sh:         0 1px 2px rgba(29,26,23,.05);
  --sh-lg:      0 14px 34px rgba(29,26,23,.13);

  --radius:      10px;
  --radius-sm:    6px;
  --radius-pill: 999px;
}


/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ touch-action:manipulation; -webkit-text-size-adjust:100%; }
*{ touch-action:manipulation; }

body{
  font-family:var(--f-ui);
  font-size:17px;
  line-height:1.55;
  background:var(--page);
  color:var(--ink-2);
  min-height:100vh;
  padding-bottom:92px;
  -webkit-font-smoothing:antialiased;
}

.hidden{ display:none !important; }
footer{ display:none; }

:focus-visible{ outline:2.5px solid var(--brass); outline-offset:2px; border-radius:4px; }

/* every element that renders Hebrew */
.lch,.vch,.tch,.phname,.qq,.hstage-text,.hsp,#tropeSymbol,
[style*="direction:rtl"],[style*="direction: rtl"]{
  font-family:var(--f-hebrew);
  font-feature-settings:"kern" 1;
}


/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

header{
  background:var(--card);
  border-bottom:1px solid var(--rule);
  text-align:center;
  padding:26px 20px 20px;
  color:var(--ink);
  position:relative;
}
header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,var(--brass) 30%,var(--brass) 70%,transparent);
  opacity:.5;
}
header h1{ display:none; }

.hd-greeting{ font-size:.86em; font-weight:600; color:var(--ink-3); margin-bottom:2px; }

.hd-countdown{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--brass-wash);
  border:1px solid var(--scroll-2);
  border-radius:var(--radius-pill);
  padding:6px 16px; margin-top:8px;
  font-size:.86em; font-weight:700; color:var(--ink);
  cursor:pointer;
}
.hd-countdown.soon  { background:#fdf3dd; border-color:var(--brass-2); color:#7a5610; }
.hd-countdown.urgent{ background:#f9ecec; border-color:var(--rimon);   color:var(--rimon); }

.hd-edit{
  display:inline-block; margin-top:9px;
  font-size:.76em; font-weight:600; color:var(--ink-3);
  cursor:pointer; text-decoration:none;
  border-bottom:1px solid var(--rule-2);
}
.hd-edit:hover{ color:var(--ink); border-color:var(--brass); }

.sub{ font-size:.85em; font-weight:400; color:var(--ink-3); opacity:1; }


/* --------------------------------------------------------------------------
   5. BOTTOM NAV
   -------------------------------------------------------------------------- */

.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--rule);
  display:flex; z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:0 -1px 24px rgba(29,26,23,.07);
}
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:10px 4px 9px; min-height:56px;
  background:none; border:none; cursor:pointer;
  font-family:var(--f-ui); font-size:.66em; font-weight:700;
  color:var(--ink-3); position:relative;
  transition:color .18s;
}
.nav-btn .nav-icon{ font-size:1.5em; line-height:1; filter:grayscale(.55); transition:filter .18s; }
.nav-btn.active{ color:var(--ink); }
.nav-btn.active .nav-icon{ filter:none; transform:none; }
.nav-btn.active::before{
  content:""; position:absolute; top:0; left:26%; right:26%;
  height:2.5px; background:var(--brass); border-radius:0 0 3px 3px;
}


/* --------------------------------------------------------------------------
   6. LAYOUT + CARDS
   -------------------------------------------------------------------------- */

.container{ max-width:680px; margin:0 auto; padding:22px 16px 0; }

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:26px 24px;
  margin-bottom:18px;
  box-shadow:var(--sh);
}

.sec-title{
  font-family:var(--f-display); font-weight:700;
  font-size:1.38em; line-height:1.2;
  color:var(--ink); margin-bottom:8px; text-align:left;
}

.card p{ font-size:.9em; line-height:1.6; color:var(--ink-3); max-width:62ch; text-align:left; }
.card p strong{ color:var(--ink-2); font-weight:700; }

.subsec{ margin-top:38px; padding-top:28px; border-top:1px solid var(--rule); }


/* --------------------------------------------------------------------------
   7. HOME
   -------------------------------------------------------------------------- */

.home-hero{
  position:relative;
  background:var(--scroll);
  border:1px solid var(--scroll-2);
  border-radius:var(--radius);
  padding:34px 34px 28px;
  text-align:center; color:var(--ink);
  margin-bottom:18px; overflow:hidden;
  box-shadow:none;
}
/* the etz chayim — the two rollers of the scroll */
.home-hero::before,.home-hero::after{
  content:""; position:absolute; top:0; bottom:0; width:7px;
  background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,#8a6220);
}
.home-hero::before{ left:0; }
.home-hero::after { right:0; }

.home-days{
  font-family:var(--f-display); font-weight:900;
  font-size:5.4em; line-height:.92; letter-spacing:-.02em;
  color:var(--ink); text-shadow:none;
  font-variant-numeric:lining-nums tabular-nums;
}
.home-days-label{ font-size:.9em; font-weight:600; color:var(--brass); opacity:1; margin-top:8px; }
.home-date-label{ font-size:.8em; font-weight:400; color:var(--ink-3); opacity:1; margin-top:3px; }

.home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.home-tile{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:20px 16px; text-align:left; cursor:pointer;
  box-shadow:none;
  transition:border-color .18s, background .18s;
}
.home-tile:hover{ border-color:var(--brass); background:#fffdf8; transform:none; box-shadow:none; }
.home-tile .tile-icon{ font-size:1.6em; margin-bottom:10px; }
.home-tile .tile-label{ font-family:var(--f-display); font-weight:700; font-size:1.02em; color:var(--ink); line-height:1.25; }
.home-tile .tile-sub{ font-size:.76em; font-weight:400; color:var(--ink-3); margin-top:3px; }


/* --------------------------------------------------------------------------
   8. LETTERS · VOWELS · TROPE
   -------------------------------------------------------------------------- */

.ab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:9px; }

.lc{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:13px 6px 11px;
  text-align:center; cursor:pointer;
  transition:background .16s, border-color .16s;
}
.lc:hover,.lc.sel{ background:var(--night); border-color:var(--night); transform:none; box-shadow:none; }
.lc:hover .lch,.lc.sel .lch{ color:var(--brass-2); }
.lc:hover .lcn,.lc:hover .lcs,.lc.sel .lcn,.lc.sel .lcs{ color:rgba(255,255,255,.72); }
.lch{ font-size:2.1em; font-weight:500; color:var(--ink); display:block; line-height:1.1; }
.lcn{ font-size:.66em; font-weight:700; color:var(--ink-2); display:block; margin-top:4px; }
.lcs{ font-size:.64em; font-weight:400; color:var(--ink-3); display:block; }

.vg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:9px; }
.vc{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:14px 8px;
  text-align:center; cursor:pointer;
  transition:background .16s, border-color .16s;
}
.vc:hover{ background:var(--night); border-color:var(--night); transform:none; box-shadow:none; }
.vc:hover .vch{ color:var(--brass-2); }
.vc:hover .vcn{ color:rgba(255,255,255,.72); }
.vch{ font-size:2.3em; font-weight:500; color:var(--ink); display:block; direction:rtl; line-height:1.15; }
.vcn{ font-size:.74em; font-weight:700; color:var(--ink-2); display:block; margin-top:5px; }
.vcs{
  font-size:.72em; font-weight:700; color:var(--brass);
  background:var(--brass-wash); border-radius:4px;
  padding:2px 8px; margin-top:4px; display:inline-block;
}
.vc:hover .vcs{ background:rgba(255,255,255,.14); color:var(--brass-2); }

.trope-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(106px,1fr)); gap:9px; margin-bottom:14px; }
.tc{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:12px 8px;
  text-align:center; cursor:pointer;
  transition:background .16s, border-color .16s;
}
.tc:hover,.tc.sel{ background:var(--night); border-color:var(--night); transform:none; box-shadow:none; }
.tc:hover .tch,.tc.sel .tch{ color:var(--brass-2); }
.tc:hover .tcn,.tc.sel .tcn{ color:rgba(255,255,255,.72); }
/* .tct carries an inline color from the JS — brighten it instead of recoloring */
.tc:hover .tct,.tc.sel .tct{ filter:brightness(2.1) saturate(.6); }
.tch{ font-size:2em; font-weight:500; color:var(--ink); display:block; direction:rtl; line-height:1.45; }
.tcn{ font-size:.71em; font-weight:700; color:var(--ink-2); display:block; margin-top:4px; }
.tct{ font-size:.64em; font-weight:600; display:block; }

.tdot{ /* background set inline by the JS */
  width:13px; height:13px; border-radius:50%; display:inline-block;
  opacity:.22; transition:transform .15s, opacity .15s;
}
.tdot.active{ transform:scale(1.5); opacity:1; }

.tip{
  background:var(--brass-wash);
  border:1px solid var(--scroll-2);
  border-left:3px solid var(--brass);
  border-radius:var(--radius-sm);
  padding:14px 16px; margin-top:20px;
  font-size:.87em; font-weight:400; line-height:1.62;
  color:#6a4d15; max-width:62ch;
}
.tip strong{ font-weight:700; color:#543c0f; }


/* --------------------------------------------------------------------------
   9. PRAYERS
   -------------------------------------------------------------------------- */

.pfilters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.fpill{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-pill); padding:7px 15px;
  font-family:var(--f-ui); font-weight:600; font-size:.82em;
  color:var(--ink-2); cursor:pointer;
  transition:background .16s, border-color .16s, color .16s;
}
.fpill:hover{ border-color:var(--rule-2); transform:none; box-shadow:none; }
.fpill.active{ background:var(--ink); color:var(--page); border-color:var(--ink); transform:none; box-shadow:none; }

.plist{ display:flex; flex-direction:column; gap:9px; }
.pcard{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:none; transition:border-color .18s;
}
.pcard:hover{ border-color:var(--rule-2); box-shadow:none; }
.pcard.open{ border-color:var(--brass); background:var(--card); }

.phdr{ padding:16px 18px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.phdr-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pbadge{ /* background comes from the JS */
  font-size:.66em; font-weight:700; padding:3px 10px;
  border-radius:3px; color:#fff; font-family:var(--f-ui);
  white-space:nowrap; letter-spacing:.02em;
}
.pname{ font-family:var(--f-display); font-weight:700; font-size:1.05em; color:var(--ink); }
.phname{ font-size:1.4em; font-weight:500; color:var(--brass); direction:rtl; flex-shrink:0; }
.pbody{ padding:2px 18px 22px; }

.yt-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--rimon); color:#fff;
  border:none; border-radius:var(--radius-pill);
  padding:8px 16px;
  font-family:var(--f-ui); font-weight:700; font-size:.85em;
  cursor:pointer; margin-top:10px; box-shadow:none;
  transition:background .16s;
}
.yt-btn:hover{ background:#75232a; transform:none; box-shadow:none; }
.yt-embed{ margin-top:10px; border-radius:var(--radius-sm); overflow:hidden; display:none; }
.yt-embed.open{ display:block; }
.yt-embed iframe{ width:100%; aspect-ratio:16/9; border:none; display:block; }


/* --------------------------------------------------------------------------
   10. THE PLAYER — the one place the design gets loud
   -------------------------------------------------------------------------- */

.hplayer{ margin-top:16px; }

.hstage{
  position:relative;
  background:var(--scroll);
  border:1px solid var(--scroll-2);
  border-radius:var(--radius);
  padding:30px 26px 22px;
  text-align:center; margin-bottom:14px; min-height:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.hstage::before,.hstage::after{
  content:""; position:absolute; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,#8a6220);
}
.hstage::before{ left:0; }
.hstage::after { right:0; }

.hstage-text{
  font-size:2.9em; direction:rtl; font-weight:500;
  line-height:1.75; letter-spacing:2px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:2px 14px;
}
.hstage-text.sw{ font-size:4.8em; letter-spacing:3px; }

/* .hsp carries an inline color — animate with transform/shadow, never color */
.hsp{ display:inline-block; cursor:pointer; border-radius:4px; padding:0 3px; transition:transform .18s, opacity .18s, filter .18s; }
.hsp:hover{ opacity:.72; }
.hsp.sa  { transform:scale(1.26); filter:drop-shadow(0 2px 10px currentColor); z-index:2; }
.hsp.wa  { transform:scale(1.14); filter:drop-shadow(0 2px 7px currentColor); }
.hsp.dim { opacity:.18; }
.hsp.done{ opacity:.4; }

.engline{
  font-size:.85em; color:var(--ink-3); font-weight:400; font-style:normal;
  margin-top:12px; max-width:56ch; text-align:center;
  border-top:1px solid var(--scroll-2); padding-top:12px;
}

.pron-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:14px; direction:ltr; }
/* .pchip carries inline color + border-color */
.pchip{
  background:var(--card); border:1px solid var(--rule);
  border-radius:4px; padding:5px 11px;
  font-size:.79em; font-weight:600; cursor:pointer;
  transition:transform .16s, box-shadow .16s, background .16s;
}
.pchip:hover{ background:var(--brass-wash); }
.pchip.sa  { font-weight:800; transform:translateY(-3px) scale(1.1); box-shadow:0 4px 12px rgba(29,26,23,.2); }
.pchip.wa  { transform:translateY(-2px) scale(1.04); box-shadow:0 2px 8px rgba(29,26,23,.1); }
.pchip.done{ opacity:.34; }

.mtoggle{
  display:flex; gap:3px;
  background:var(--gray-100); border:1px solid var(--rule);
  border-radius:var(--radius-pill); padding:3px;
  max-width:340px; margin:0 auto 14px;
}
.mtbtn{
  flex:1; border:none; border-radius:999px; padding:8px 10px;
  font-family:var(--f-ui); font-weight:700; font-size:.8em;
  cursor:pointer; background:transparent; color:var(--ink-3);
  transition:background .16s, color .16s;
}
.mtbtn.active{ background:var(--card); color:var(--ink); box-shadow:var(--sh); }

.pcontrols{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-bottom:10px; }

.cb{
  border:1px solid transparent; border-radius:var(--radius-pill);
  padding:10px 20px;
  font-family:var(--f-ui); font-weight:700; font-size:.9em;
  cursor:pointer; box-shadow:none;
  transition:background .16s, border-color .16s, color .16s;
}
.cb:hover:not(:disabled){ transform:none; }
/* bl and rd swap on the same button (Play/Pause) so both are filled */
.cb.bl{ background:var(--ink);   color:var(--page); }
.cb.bl:hover:not(:disabled){ background:var(--night); }
.cb.rd{ background:var(--rimon); color:#fff; }
.cb.rd:hover:not(:disabled){ background:#75232a; }
/* Back / Next flank Play, so they stay quiet */
.cb.te{ background:transparent; color:var(--seal);   border-color:var(--rule-2); }
.cb.te:hover:not(:disabled){ border-color:var(--seal); background:#f1f7f5; }
.cb.pu{ background:transparent; color:var(--violet); border-color:var(--rule-2); }
.cb.pu:hover:not(:disabled){ border-color:var(--violet); background:#f5f3fa; }
.cb.go{ background:var(--brass); color:#fff; }
.cb.go:hover:not(:disabled){ background:#8a6220; }
.cb:disabled{ opacity:.35; cursor:default; }

.pctr{ text-align:center; font-size:.83em; font-weight:600; color:var(--ink-3); min-height:20px; }


/* --------------------------------------------------------------------------
   11. WORD PRACTICE
   -------------------------------------------------------------------------- */

.wgrid{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.wbtn{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:8px 15px;
  font-family:var(--f-hebrew); font-weight:500; font-size:.88em;
  color:var(--ink); cursor:pointer;
  transition:background .16s, border-color .16s, color .16s;
}
.wbtn:hover{ border-color:var(--brass); transform:none; box-shadow:none; }
.wbtn.active{ background:var(--night); color:#fff; border-color:var(--night); transform:none; box-shadow:none; }

.ttsnote{ text-align:center; font-size:.76em; color:var(--ink-3); margin-top:10px; }


/* --------------------------------------------------------------------------
   12. QUIZ
   -------------------------------------------------------------------------- */

.qcard{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius); padding:26px 22px;
  text-align:center; box-shadow:none;
}

.qprog{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.qpbar{ flex:1; height:5px; background:var(--rule); border-radius:5px; overflow:hidden; }
.qpfill{ height:100%; background:var(--brass); border-radius:5px; transition:width .4s ease; }
.qscore{
  background:var(--brass-wash); color:#6a4d15;
  border:1px solid var(--scroll-2);
  font-family:var(--f-ui); font-weight:700; font-size:.82em;
  padding:3px 12px; border-radius:var(--radius-pill); white-space:nowrap;
}

.qnext{
  display:inline-block; margin-top:16px;
  background:var(--ink); color:var(--page);
  border:none; border-radius:var(--radius-pill);
  padding:12px 28px;
  font-family:var(--f-ui); font-weight:700; font-size:1em;
  cursor:pointer; box-shadow:none; transition:background .16s;
}
.qnext:hover{ background:var(--night); transform:none; }

.bigscore{
  font-family:var(--f-display); font-weight:900;
  font-size:3.6em; color:var(--ink); line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.scoremsg{ font-size:1.02em; font-weight:600; color:var(--ink-2); margin:10px 0 18px; }


/* --------------------------------------------------------------------------
   13. MY QUEST
   -------------------------------------------------------------------------- */

.mm-parsha-card{
  background:var(--scroll);
  border:1px solid var(--scroll-2);
  border-left:3px solid var(--brass);
  border-radius:var(--radius);
  padding:20px; margin-bottom:12px;
}
.mm-theme{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:16px 18px;
  margin-bottom:9px; box-shadow:none;
}
.mm-theme-title{ font-family:var(--f-display); font-weight:700; font-size:1em; color:var(--ink); margin-bottom:5px; }
.mm-theme-desc{ font-size:.86em; color:var(--ink-3); font-weight:400; line-height:1.62; }

.mm-speech-idea{
  background:var(--brass-wash); border:1px solid var(--scroll-2);
  border-left:3px solid var(--brass);
  border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:9px;
}
.mm-speech-idea-title{ font-family:var(--f-display); font-weight:700; font-size:.98em; color:#543c0f; margin-bottom:4px; }
.mm-speech-idea-desc{ font-size:.85em; color:#6a4d15; font-weight:400; line-height:1.62; }

.mm-aliyah-row{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--rule); }
.mm-aliyah-row:last-child{ border-bottom:none; }
.mm-aliyah-num{
  font-family:var(--f-display); font-weight:700; font-size:.88em;
  color:var(--brass); background:var(--brass-wash);
  border:1px solid var(--scroll-2); border-radius:4px;
  padding:5px 9px; white-space:nowrap; min-width:34px; text-align:center;
}
.mm-aliyah-input{
  flex:1; min-width:0;
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:9px 13px;
  font-family:var(--f-ui); font-weight:400; font-size:.9em;
  color:var(--ink); outline:none; background:var(--page);
  transition:border-color .16s, background .16s;
}
.mm-aliyah-input:focus{ border-color:var(--brass); background:var(--card); }
.mm-share-btn{
  background:var(--ink); color:var(--page);
  border:none; border-radius:var(--radius-sm); padding:9px 13px;
  font-family:var(--f-ui); font-weight:700; font-size:.8em;
  cursor:pointer; white-space:nowrap; box-shadow:none;
  transition:background .16s;
}
.mm-share-btn:hover{ background:var(--night); }

.mm-check-item{
  display:flex; align-items:center; gap:13px; padding:13px 15px;
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer;
  transition:background .16s, border-color .16s;
}
.mm-check-item:hover{ border-color:var(--rule-2); }
.mm-check-item.done{ background:#f4f8f6; border-color:#c3ddd4; }
.mm-check-item.done .mm-check-label{ text-decoration:line-through; color:var(--ink-3); }
.mm-check-box{
  width:22px; height:22px;
  border:1.5px solid var(--rule-2); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:.85em;
  transition:background .16s, border-color .16s;
}
.mm-check-item.done .mm-check-box{ background:var(--seal); border-color:var(--seal); color:#fff; }
.mm-check-label{ font-weight:600; font-size:.9em; color:var(--ink); }


/* --------------------------------------------------------------------------
   14. ONBOARDING
   -------------------------------------------------------------------------- */

#onboarding{
  position:fixed; inset:0; z-index:1000;
  background:var(--night);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
}
#onboarding.hidden{ display:none !important; }

.ob-logo{ text-align:center; margin-bottom:26px; }
.ob-logo p{ color:rgba(255,255,255,.6); font-weight:400; font-size:.92em; margin-top:8px; }

.ob-card{
  background:var(--card); border-radius:14px;
  padding:30px 26px; width:100%; max-width:420px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.ob-step{ display:none; }
.ob-step.active{ display:block; }

.ob-step-label{
  font-size:.76em; font-weight:600;
  text-transform:none; letter-spacing:0;
  color:var(--brass); margin-bottom:10px;
}
.ob-title{ font-family:var(--f-display); font-weight:700; font-size:1.55em; line-height:1.22; color:var(--ink); margin-bottom:6px; }
.ob-sub{ font-size:.88em; color:var(--ink-3); font-weight:400; margin-bottom:20px; }

.ob-input,.ob-select{
  width:100%;
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:13px 15px;
  font-family:var(--f-ui); font-weight:400; font-size:1em;
  color:var(--ink); outline:none; background:var(--page);
  transition:border-color .16s, background .16s;
}
.ob-input:focus,.ob-select:focus{ border-color:var(--brass); background:var(--card); }
.ob-select{
  font-size:.94em; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3762a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px; margin-top:4px;
}

.ob-toggle{ display:flex; gap:9px; margin-top:14px; }
.ob-tog-btn{
  flex:1; border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:14px 10px;
  font-family:var(--f-ui); font-weight:600; font-size:.93em;
  color:var(--ink-2); background:var(--card);
  cursor:pointer; text-align:center;
  transition:border-color .16s, background .16s, color .16s;
}
.ob-tog-btn:hover{ border-color:var(--rule-2); }
.ob-tog-btn.sel{ background:var(--ink); color:var(--page); border-color:var(--ink); transform:none; box-shadow:none; }

.ob-countdown-preview{
  text-align:center; margin-top:14px; padding:16px;
  background:var(--scroll); border:1px solid var(--scroll-2);
  border-radius:var(--radius-sm);
}
.ob-countdown-preview .days{
  font-family:var(--f-display); font-weight:900;
  font-size:2.6em; color:var(--ink); line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.ob-countdown-preview .days-label{ font-size:.8em; font-weight:600; color:var(--brass); margin-top:5px; }

.ob-focus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:4px; }
.ob-focus-btn{
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:15px 10px;
  font-family:var(--f-ui); font-weight:600; font-size:.86em;
  color:var(--ink-2); background:var(--card);
  cursor:pointer; text-align:center;
  transition:border-color .16s, background .16s, color .16s;
}
.ob-focus-btn:hover{ border-color:var(--rule-2); }
.ob-focus-btn.sel{ background:var(--ink); color:var(--page); border-color:var(--ink); }
.ob-focus-btn .ob-focus-icon{ font-size:1.4em; display:block; margin-bottom:5px; }

.ob-nav{ display:flex; gap:9px; margin-top:24px; align-items:center; }
.ob-btn-next{
  flex:1; background:var(--ink); color:var(--page);
  border:none; border-radius:var(--radius-sm); padding:15px;
  font-family:var(--f-ui); font-weight:700; font-size:1.02em;
  cursor:pointer; box-shadow:none; transition:background .16s;
}
.ob-btn-next:hover{ background:var(--night); transform:none; }
.ob-btn-back{
  background:transparent; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:15px 17px;
  font-family:var(--f-ui); font-weight:700; font-size:1em;
  cursor:pointer; transition:border-color .16s;
}
.ob-btn-back:hover{ border-color:var(--ink); }

.ob-dots{ display:flex; justify-content:center; gap:6px; margin-top:20px; }
.ob-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); transition:all .3s; }
.ob-dot.active{ background:var(--brass-2); width:20px; border-radius:4px; }


/* ==========================================================================
   15. OVERRIDES FOR INLINE STYLES
   These need !important only because the markup or the JS sets them inline.
   Grouped by source so they're easy to retire later.
   ========================================================================== */

/* --- wordmark, in header and onboarding --- */
header > div > div:first-child,
.ob-logo > div:first-child{
  font-family:var(--f-display) !important;
  font-weight:900 !important;
  font-size:2.1em !important;
  letter-spacing:-.01em !important;
  text-shadow:none !important;
  line-height:1.1 !important;
}
header > div > div:first-child{ color:var(--ink) !important; }
.ob-logo > div:first-child{ color:#fff !important; }

/* --- home hero greeting --- */
#home-greeting{
  font-family:var(--f-ui) !important;
  font-size:.85em !important; font-weight:600 !important;
  color:var(--ink-3) !important; opacity:1 !important;
  margin-bottom:14px !important;
}

/* --- My Quest countdown banner --- */
#mm-countdown-banner{
  position:relative; overflow:hidden;
  background:var(--scroll) !important;
  border:1px solid var(--scroll-2) !important;
  border-radius:var(--radius) !important;
  padding:28px 30px !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
#mm-countdown-banner::before,#mm-countdown-banner::after{
  content:""; position:absolute; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,var(--brass-2),var(--brass) 45%,#8a6220);
}
#mm-countdown-banner::before{ left:0; }
#mm-countdown-banner::after { right:0; }
#mm-greeting{ color:var(--ink-3) !important; opacity:1 !important; font-weight:600 !important; }
#mm-days{
  font-family:var(--f-display) !important; font-weight:900 !important;
  font-size:3.4em !important; color:var(--ink) !important;
  font-variant-numeric:lining-nums tabular-nums;
}
#mm-days-label{ color:var(--brass) !important; opacity:1 !important; font-weight:600 !important; }
#mm-date-label{ color:var(--ink-3) !important; opacity:1 !important; }

/* --- trope player --- */
#tropePlayer{
  background:var(--scroll) !important;
  border:1px solid var(--scroll-2) !important;
  border-radius:var(--radius) !important;
  padding:20px !important;
}
#tropeName{
  font-family:var(--f-display) !important; font-weight:700 !important;
  color:var(--ink) !important; font-size:1.15em !important;
}
#tropeSymbol{ color:var(--brass) !important; }
#tropeDesc{ color:var(--ink-3) !important; }

/* --- locked My Quest state --- */
#mm-locked > div:nth-child(2){
  font-family:var(--f-display) !important; font-weight:700 !important;
  color:var(--ink) !important;
}
#mm-locked > div:nth-child(3){ color:var(--ink-3) !important; }

/* --- every hardcoded grey the markup and JS emit --- */
[style*="color:#555"],[style*="color:#666"],[style*="color:#777"],
[style*="color:#888"],[style*="color:#aaa"],[style*="color:#bbb"],
[style*="color:#ccc"],[style*="color:#333"]{
  color:var(--ink-3) !important;
}

/* --- the ALL-CAPS eyebrow labels --- */
[style*="text-transform:uppercase"]{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:.8em !important;
  color:var(--ink-3) !important;
}

/* --- dashed pale-blue dividers --- */
[style*="dashed"]{ border-top-color:var(--rule) !important; border-top-width:1px !important; }

/* --- pale-blue and pale-purple panels in the quiz and review --- */
[style*="#f0f6ff"],[style*="#e8f0ff"],[style*="#e0eaff"]{
  background:var(--card) !important;
  border-color:var(--rule) !important;
}
[style*="#f8f0ff"],[style*="#d0aaff"]{
  background:var(--brass-wash) !important;
  border-color:var(--scroll-2) !important;
}
[style*="#c5d8ff"]{ border-color:var(--rule) !important; }
input[style*="#c5d8ff"]{
  background:var(--page) !important;
  border-radius:var(--radius-sm) !important;
  font-family:var(--f-ui) !important;
  color:var(--ink) !important;
}

/* --- review mark buttons --- */
[style*="#e8f8ee"]{ background:#f1f7f5 !important; border-color:var(--seal) !important; color:#1e4438 !important; }
[style*="background:#fee"]{ background:#faf1f1 !important; border-color:var(--rimon) !important; color:#6b2027 !important; }

/* --- big Hebrew display words in Word Practice and Quiz --- */
[style*="font-size:4.8em"],[style*="font-size:4.2em"]{
  font-family:var(--f-hebrew) !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  letter-spacing:2px !important;
}

/* --- Fredoka headings still emitted by the JS --- */
[style*="Fredoka"]{ font-family:var(--f-display) !important; font-weight:700 !important; }

/* --- "Start My Quest" green --- */
.ob-btn-next[style*="27ae60"]{ background:var(--brass) !important; }

/* --- paired Hebrew + transliteration columns on the stage --- */
.hsp{
  display:inline-flex; flex-direction:column; align-items:center;
  cursor:pointer; border-radius:6px; padding:2px 4px;
  transition:transform .18s, opacity .18s, filter .18s;
}
.hspw{ display:block; line-height:1.35; }
.hspt{
  display:block; direction:ltr;
  font-family:var(--f-ui);
  font-size:.3em;          /* relative to the Hebrew size */
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-3);
  margin-top:.25em;
  white-space:nowrap;
}
.hsp.sa .hspt,.hsp.wa .hspt{ color:var(--brass); }
.hplayer.tr-off .hspt{ display:none; }

/* transliteration on/off */
.troggle{ display:flex; justify-content:center; margin-bottom:12px; }
.trbtn{
  background:transparent;
  border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  padding:5px 14px;
  font-family:var(--f-ui); font-weight:600; font-size:.76em;
  color:var(--ink-3); cursor:pointer;
  transition:border-color .16s, color .16s, background .16s;
}
.trbtn:hover{ border-color:var(--rule-2); color:var(--ink); }
.trbtn.active{ background:var(--brass-wash); border-color:var(--scroll-2); color:#6a4d15; }

/* --- Hebrew reading rules --- */
.rules-list{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.rule{
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .18s;
}
.rule.open{ border-color:var(--brass); }
.rule-hdr{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 16px; cursor:pointer;
}
.rule-num{
  font-family:var(--f-display); font-weight:700; font-size:.8em;
  color:var(--brass); background:var(--brass-wash);
  border:1px solid var(--scroll-2); border-radius:4px;
  padding:2px 8px; white-space:nowrap; flex-shrink:0;
}
.rule-title{ font-weight:600; font-size:.92em; color:var(--ink); flex:1; line-height:1.35; }
.rule-chev{ color:var(--ink-3); font-size:.8em; transition:transform .2s; flex-shrink:0; }
.rule.open .rule-chev{ transform:rotate(180deg); }
.rule-body{ display:none; padding:0 16px 18px; }
.rule.open .rule-body{ display:block; }
.rule-text{ font-size:.88em; line-height:1.65; color:var(--ink-3); margin-bottom:14px; }
.rule-text strong{ color:var(--ink); font-weight:700; }
.rule-ex{ display:flex; flex-direction:column; gap:6px; }
.rule-ex-row{
  display:flex; align-items:center; gap:12px;
  background:var(--scroll); border:1px solid var(--scroll-2);
  border-radius:var(--radius-sm); padding:9px 14px; cursor:pointer;
  transition:border-color .16s;
}
.rule-ex-row:hover{ border-color:var(--brass); }
.rule-ex-heb{
  font-family:var(--f-hebrew); font-size:1.5em; font-weight:500;
  color:var(--ink); direction:rtl; min-width:5.5em; text-align:right;
}
.rule-ex-tr{ flex:1; font-size:.85em; font-weight:600; color:var(--ink-2); }
.rule-ex-play{ font-size:.85em; opacity:.45; }

/* --- Cantor Wolman recording button --- */
.cantor-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--night); color:#fff;
  border:none; border-radius:var(--radius-pill);
  padding:7px 15px;
  font-family:var(--f-ui); font-weight:700; font-size:.8em;
  cursor:pointer; transition:background .16s;
}
.cantor-btn:hover{ background:var(--night-2); }

/* --- iOS silent-switch hint under the trope controls --- */
.trope-hint{
  flex-basis:100%;
  font-size:.76em;
  color:var(--ink-3);
  margin-top:10px;
  text-align:center;
}
.trope-hint:empty{ display:none; }

/* --- quiz: word card, recorder, review --- */
.qsub-note{ font-size:.82em !important; color:var(--ink-3) !important; margin-top:4px; }
.qstart-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

.qword{
  font-family:var(--f-hebrew); font-size:3.4em; font-weight:500;
  direction:rtl; color:var(--ink); letter-spacing:2px;
  line-height:1.35; margin:6px 0 2px;
}
.qword-en{ font-size:.88em; color:var(--ink-3); margin-bottom:20px; }

.recbox{
  background:var(--scroll);
  border:1px solid var(--scroll-2);
  border-radius:var(--radius);
  padding:18px 16px;
  max-width:320px; margin:0 auto 18px;
  transition:border-color .2s;
}
.recbox.pulsing{ border-color:var(--rimon); }
.recbox-label{ font-size:.82em; font-weight:600; color:#6a4d15; margin-bottom:12px; }
.recbox .cb{ width:100%; }
.recstatus{ font-size:.78em; font-weight:600; color:var(--ink-3); margin-top:9px; min-height:18px; }
.recstatus.rec { color:var(--rimon); }
.recstatus.ok  { color:var(--seal); }
.recstatus.warn{ color:#8a5a10; }
.recplayer{ display:none; width:100%; height:34px; margin-top:10px; }

.qnav{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.qnav .cb, .qnav .qnext{ min-width:160px; }
.qskip{
  background:none; border:none; cursor:pointer;
  font-family:var(--f-ui); font-size:.8em; font-weight:600;
  color:var(--ink-3); border-bottom:1px solid var(--rule-2);
}
.qskip:hover{ color:var(--ink); border-color:var(--brass); }

.review-title{ font-family:var(--f-display); font-weight:700; font-size:1.3em; color:var(--ink); }
.review-sub{ font-size:.85em; color:var(--ink-3); margin-top:3px; }

.rrow{
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:13px 15px; margin-bottom:8px; background:var(--card);
  transition:background .25s, border-color .25s;
}
.rrow.marked-ok { background:#f2f8f5; border-color:#bcd8cc; }
.rrow.marked-bad{ background:#fbf2f2; border-color:#e0c0c0; }
.rrow-top{ display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.rrow-heb{
  font-family:var(--f-hebrew); font-size:1.8em; font-weight:500;
  direction:rtl; color:var(--ink); flex-shrink:0;
}
.rrow-meta{ flex:1; min-width:0; }
.rrow-pron{ font-size:.83em; font-weight:700; color:var(--brass); }
.rrow-en{ font-size:.78em; color:var(--ink-3); }
.rrow-audio{ width:100%; height:32px; margin-bottom:9px; }
.rrow-norec{ font-size:.78em; color:var(--ink-3); margin-bottom:9px; }
.rrow-marks{ display:flex; gap:8px; }
.rmark{
  flex:1; border-radius:var(--radius-sm); padding:7px;
  font-family:var(--f-ui); font-size:.82em; font-weight:700;
  cursor:pointer; background:var(--card);
  transition:opacity .2s;
}
.rmark.ok { border:1px solid var(--seal);  color:#1e4438; }
.rmark.bad{ border:1px solid var(--rimon); color:#6b2027; }
.rmark:disabled{ opacity:.35; cursor:default; }

.recerr{ display:inline-block; margin-top:4px; font-size:.85em; opacity:.6; font-family:ui-monospace,monospace; }

/* --- word practice shuffle --- */
.wgrid-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
  font-size:.8em; font-weight:600; color:var(--ink-3);
}
.wshuffle{
  background:transparent; border:1px solid var(--rule);
  border-radius:var(--radius-pill); padding:5px 13px;
  font-family:var(--f-ui); font-weight:600; font-size:.95em;
  color:var(--ink-3); cursor:pointer;
  transition:border-color .16s, color .16s;
}
.wshuffle:hover{ border-color:var(--brass); color:var(--ink); }

/* --- resume-quiz card + YouTube fallback link --- */
.qresume{
  background:var(--brass-wash);
  border:1px solid var(--scroll-2);
  border-left:3px solid var(--brass);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:18px;
  text-align:left;
}
.qresume-title{ font-family:var(--f-display); font-weight:700; font-size:1.05em; color:var(--ink); }
.qresume-sub{ font-size:.84em; color:#6a4d15; margin-top:3px; }
.qresume-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.yt-fallback{
  font-size:.78em; color:var(--ink-3);
  padding:8px 2px 0; text-align:center;
}
.yt-fallback a{ color:var(--brass); font-weight:600; }


/* --------------------------------------------------------------------------
   16. MOTION + MOBILE
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:430px){
  body{ font-size:16px; }
  header{ padding:20px 14px 16px; }
  .container{ padding:16px 13px 0; }
  .card{ padding:20px 17px; }

  .home-hero{ padding:28px 24px 22px; }
  .home-days{ font-size:4.2em; }

  .hstage{ padding:24px 20px 18px; }
  .hstage-text{ font-size:2.1em; }
  .hstage-text.sw{ font-size:3.4em; }

  .bigscore{ font-size:2.7em; }
  .cb{ padding:9px 16px; font-size:.86em; }
  .pchip{ font-size:.74em; padding:4px 9px; }
  .sec-title{ font-size:1.24em; }

  .ob-card{ padding:24px 19px; }
  .ob-title{ font-size:1.34em; }

  [style*="font-size:4.8em"],[style*="font-size:4.2em"]{ font-size:3em !important; }

  header > div > div:first-child,
  .ob-logo > div:first-child{ font-size:1.75em !important; }
}