/* EZLain preview — palette and hierarchy from Yaakov's Oct 15 spec */
:root {
  --navy: #102A3A;      /* headers, important labels, active navigation */
  --teal: #0F6B5B;      /* play buttons, primary buttons, selected states */
  --bg: #FAF7EF;        /* main app background */
  --card: #FFFDF8;      /* cards */
  --gold: #B8872E;      /* milestones only */
  --text: #171717;      /* main text */
  --muted: #807B72;     /* secondary text, inactive nav */
  --line: #E4DED2;      /* borders */
  --teal-t: rgba(15, 107, 91, .1);
  --navy-t: rgba(16, 42, 58, .06);
  --track: #ECE6D9;
  --shadow: 0 1px 2px rgba(16, 42, 58, .05), 0 6px 18px rgba(16, 42, 58, .05);
  --r: 18px;
  --tab-h: 74px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --heb: "Frank Ruhl Libre", "Noto Serif Hebrew", "David Libre", "Times New Roman", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0 auto; max-width: 520px; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
#app { padding: 0 20px calc(var(--tab-h) + var(--safe-b) + 28px); }
body.has-mini #app { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 100px); }
body[data-screen=player] #app, body[data-screen=welcome] #app { padding-bottom: 40px; }
a { color: var(--teal); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; color: var(--navy); }
.ic { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.heb { font-family: var(--heb); font-weight: 600; color: var(--navy); unicode-bidi: isolate; }
.muted { color: var(--muted); }
.hide, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid rgba(15, 107, 91, .45); outline-offset: 2px; border-radius: 10px; }
.fine { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 14px 2px; }
.fine .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.center { text-align: center; }
.link { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* cards: soft white, very light shadow, hairline border */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid rgba(228, 222, 210, .55); }

/* page titles */
.ph { padding: calc(env(safe-area-inset-top, 0px) + 26px) 2px 18px; }
.ph h1 { font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.ph-s { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }
.sh { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 14px; }
.sh h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.sh .heb { font-size: 20px; padding-right: 4px; }
.sh-b { width: 44px; height: 44px; display: grid; place-items: center; color: var(--navy); border-radius: 50%; margin-left: -10px; }
.sec { margin-top: 34px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 2px 12px; }
.sec .sec-h { margin-top: 0; }
.sec-h h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.sec-m { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.intro { color: var(--muted); font-size: 15px; margin: -4px 2px 18px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: .005em; }
.btn .ic { width: 18px; height: 18px; }
.btn.primary { background: var(--teal); color: #fff; box-shadow: 0 6px 16px rgba(15, 107, 91, .22); }
.btn.tonal { background: var(--teal-t); color: var(--teal); }
.btn.full { width: 100%; }
.btn.big { min-height: 56px; font-size: 17px; border-radius: 16px; }
.btn:active, .playbig:active, .pp:active { transform: scale(.97); }
.sm-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--teal-t); color: var(--teal); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ic-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--navy); border-radius: 50%; position: relative; }
.ic-btn.sm { width: 36px; height: 36px; color: var(--muted); }
.ic-btn.sm .ic { width: 18px; height: 18px; }

/* bottom navigation: large icon, word underneath */
#tabbar { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 253, 248, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + var(--safe-b)); height: calc(var(--tab-h) + var(--safe-b)); }
#tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
#tabbar .ic { width: 28px; height: 28px; stroke-width: 1.9; }
#tabbar a.on { color: var(--navy); }
#tabbar a.on .ic { stroke-width: 2.3; }
#tabbar a.on span { font-weight: 800; }

/* mini-player */
.mini { position: fixed; z-index: 29; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 8px); width: calc(100% - 16px); max-width: 504px; height: 66px;
  display: grid; grid-template-columns: 1fr 48px 44px; align-items: center; gap: 2px; padding: 0 6px 0 10px; background: var(--card); border-radius: 16px;
  box-shadow: 0 2px 4px rgba(16, 42, 58, .06), 0 10px 28px rgba(16, 42, 58, .14); border: 1px solid rgba(228, 222, 210, .7); overflow: hidden; }
.mini-main { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); height: 100%; }
.mini-main img { width: 44px; height: 44px; border-radius: 10px; }
.mini-txt { min-width: 0; display: flex; flex-direction: column; }
.mini-txt b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.mini-txt small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-pp { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.mini-pp .ic { width: 20px; height: 20px; }
.mini-x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); }
.mini-x .ic { width: 20px; height: 20px; }
.mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--track); }
.mini-bar i { display: block; height: 100%; background: var(--teal); }

/* onboarding */
.ob { padding: calc(env(safe-area-inset-top, 0px) + 54px) 4px 30px; }
.ob-logo { width: 68px; height: 68px; border-radius: 17px; box-shadow: var(--shadow); }
.ob h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 30px 0 10px; }
.ob-s { color: var(--muted); font-size: 16.5px; margin: 0; }
.ob-cards { display: grid; gap: 14px; margin-top: 30px; }
.ob-card { display: flex; align-items: center; gap: 16px; min-height: 96px; width: 100%; padding: 18px 16px 18px 18px; text-align: left;
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow); border: 1.5px solid rgba(228, 222, 210, .7); }
.ob-card.on { border-color: var(--teal); background: #F4F8F3; }
.ob-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-t); color: var(--teal); flex-shrink: 0; }
.ob-ic .ic { width: 28px; height: 28px; }
.ob-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ob-tx b { font-size: 18px; font-weight: 700; color: var(--navy); }
.ob-tx small { font-size: 15px; color: var(--muted); }
.ob-go { color: var(--muted); }

/* home */
.brand-banner { margin: 0 -20px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 16px; background: var(--card, #FFFDF8); border-bottom: 1px solid #E4DED2; line-height: 0; }
.brand-banner img { display: block; height: 86px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.hello { display: flex; align-items: center; gap: 12px; padding: 16px 2px 14px; }
.hello-logo { width: 42px; height: 42px; border-radius: 11px; }
.hello-s { font-size: 14px; color: var(--muted); font-weight: 500; }
.hello-t { font-size: 23px; font-weight: 800; color: var(--navy); letter-spacing: -.015em; line-height: 1.2; }
.nudge { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--teal-t); color: var(--navy); font-size: 14.5px; font-weight: 600; }
.nudge span { flex: 1; } .nudge .ic { width: 20px; height: 20px; color: var(--teal); }
.nudge button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted); }
.cp { padding: 24px 22px 8px; }
.cp-k { font-size: 14px; font-weight: 700; color: var(--teal); margin-bottom: 8px; }
.cp-t { font-size: 27px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.cp-t .heb { font-size: 22px; margin-left: 6px; color: var(--muted); font-weight: 500; }
.cp-s { margin-top: 8px; font-size: 15.5px; color: var(--muted); font-weight: 500; }
.bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.cp-prog { display: flex; align-items: center; gap: 12px; margin: 20px 0 22px; }
.cp-prog .bar { flex: 1; }
.cp-prog span { font-size: 13.5px; color: var(--muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.playbig { width: 76px; height: 76px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 10px 24px rgba(15, 107, 91, .3); }
.playbig .ic { width: 34px; height: 34px; }
.cp-row-t { display: flex; flex-direction: column; gap: 2px; }
.cp-row-t b { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-row-t small { font-size: 14px; color: var(--muted); }
.cp-rec { display: flex; align-items: center; gap: 12px; padding: 16px 0 16px; border-top: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: 15.5px; }
.cp-rec span { flex: 1; } .cp-rec .ic { width: 22px; height: 22px; } .cp-rec .ic:first-child { color: var(--teal); } .cp-rec .ic:last-child { color: var(--muted); width: 18px; }

/* progress path: completed / current / next, read right to left like a sefer */
.path-card { padding: 20px 14px 4px; }
.path { display: flex; align-items: flex-start; overflow-x: auto; padding: 4px 4px 14px; scrollbar-width: none; }
.path::-webkit-scrollbar { display: none; }
.node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 66px; flex-shrink: 0; color: var(--muted); }
.node .dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--card); border: 2px solid var(--line); color: var(--muted); }
.node .dot .ic { width: 20px; height: 20px; }
.node .nl { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; direction: ltr; }
.node.done .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.node.done .nl { color: var(--teal); }
.node.cur .dot { width: 50px; height: 50px; margin-top: -4px; background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 5px rgba(16, 42, 58, .12); }
.node.cur .nl { color: var(--navy); font-weight: 800; }
.node.mile .dot { border-color: var(--gold); color: var(--gold); background: #FBF4E6; }
.node.mile .nl { color: var(--gold); font-weight: 700; }
.link-l { flex: 1 0 12px; min-width: 12px; height: 3px; margin-top: 20px; border-radius: 2px; background: var(--line); }
.node.done + .link-l { background: var(--teal); }
.path-next { border-top: 1px solid var(--line); padding: 14px 4px 16px; font-size: 15px; }
.pn-k { color: var(--muted); font-weight: 500; margin-right: 4px; }
.path-next b { color: var(--navy); }
.hrow { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hrow::-webkit-scrollbar { display: none; }
.wk { flex: 0 0 152px; scroll-snap-align: start; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.wk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wk-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-t); color: var(--navy); }
.wk-ic .ic { width: 20px; height: 20px; }
.wk b { font-size: 15.5px; font-weight: 600; color: var(--navy); }
.wk small { font-size: 13px; color: var(--muted); }
.wk .heb { font-size: 17px; margin-top: 6px; text-align: right; }
.list-card { padding: 4px 0; }
.rp { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; }
.rp + .rp { border-top: 1px solid var(--line); }
.rp-play { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-t); color: var(--teal); display: grid; place-items: center; }
.rp-play .ic { width: 18px; height: 18px; }
.rp-m { display: flex; flex-direction: column; min-width: 0; color: var(--text); }
.rp-m b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-m small { font-size: 13px; color: var(--muted); }
.rp .heb { font-size: 17px; }
.empty { display: flex; align-items: center; gap: 12px; padding: 18px; color: var(--muted); font-size: 15px; }
.empty .ic { color: var(--muted); }
.empty span .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.up { margin-top: 34px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.up h3 { font-size: 18px; font-weight: 700; }
.up p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.up .btn { align-self: flex-start; }
.dedic { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px; color: var(--text); }
.dedic > .ic:first-child { color: var(--navy); }
.dedic span { flex: 1; display: flex; flex-direction: column; }
.dedic b { font-size: 15.5px; font-weight: 600; color: var(--navy); }
.dedic small { font-size: 13px; color: var(--muted); }
.dedic > .ic:last-child { color: var(--muted); width: 18px; }
.foot { display: flex; justify-content: center; gap: 8px; margin: 26px 0 0; font-size: 13.5px; color: var(--muted); }
.foot a { font-weight: 600; }

/* status icons: available to download / downloaded / locked */
.st { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); position: relative; }
.st .ic { width: 22px; height: 22px; }
.st.dl { color: var(--teal); }
.st.buy { color: var(--teal); }
.st.dl.busy { opacity: .4; }
.st.dl-done { color: var(--teal); }
.st.lock { color: var(--muted); }
.st.soon { font-size: 12px; font-weight: 600; color: var(--muted); width: auto; padding: 0 12px 0 4px; }
.wk .st { width: 28px; height: 28px; } .wk .st .ic { width: 20px; height: 20px; } .wk .st.soon { padding: 0; }

/* library */
.search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: var(--card); border-radius: 15px; box-shadow: var(--shadow); border: 1px solid rgba(228, 222, 210, .7); color: var(--muted); margin-bottom: 8px; }
.search input { flex: 1; border: 0; background: none; font: inherit; font-size: 16.5px; color: var(--text); outline: none; min-width: 0; height: 100%; }
.search input::placeholder { color: var(--muted); }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat { display: flex; flex-direction: column; gap: 3px; min-height: 120px; padding: 16px; color: var(--text); text-align: left; }
.cat-top { display: flex; align-items: flex-start; justify-content: space-between; min-height: 40px; margin-bottom: 8px; }
.cat-top .heb { font-size: 27px; line-height: 1.1; }
.cat-top .st { width: 26px; height: 26px; margin: -2px -4px 0 0; } .cat-top .st .ic { width: 19px; height: 19px; }
.cat-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-t); color: var(--navy); }
.cat-ic .ic { width: 22px; height: 22px; }
.cat b { font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.cat small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.free { font-size: 12px; font-weight: 700; color: var(--teal); background: var(--teal-t); padding: 3px 9px; border-radius: 10px; }
.list { list-style: none; margin: 0; padding: 2px 0; }
.list > li { display: flex; align-items: center; padding-right: 6px; }
.list > li + li { border-top: 1px solid var(--line); }
.row-m { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 4px 14px 16px; color: var(--text); }
.row-n { width: 22px; flex-shrink: 0; text-align: center; font-size: 14px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.row-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-t); color: var(--navy); flex-shrink: 0; }
.row-ic.ok { background: var(--teal-t); color: var(--teal); }
.row-ic .ic { width: 19px; height: 19px; }
.row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-tx b { font-size: 16px; font-weight: 600; }
.row-tx small { font-size: 13px; color: var(--muted); }
.row-m .heb { font-size: 18px; flex-shrink: 0; }
.row.soon .row-tx b { color: #3d3a35; }
.minibar { display: block; height: 4px; border-radius: 2px; background: var(--track); margin-top: 6px; max-width: 160px; overflow: hidden; }
.minibar i { display: block; height: 100%; background: var(--teal); }
.lockbar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; color: var(--text); }
.lockbar span { flex: 1; display: flex; flex-direction: column; } .lockbar b { color: var(--navy); font-weight: 700; } .lockbar small { color: var(--muted); font-size: 13px; }
.lockbar .ic { color: var(--navy); } .lockbar .ic:last-child { color: var(--muted); width: 18px; }

/* full player */
.fp-h { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 6px; margin: 0 -8px; }
.fp-h .ic { width: 26px; height: 26px; }
.fp-from { text-align: center; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-art { height: 196px; border-radius: 24px; background: linear-gradient(160deg, #173A4F, var(--navy) 70%); display: grid; place-items: center; margin: 10px 0 22px; box-shadow: 0 14px 30px rgba(16, 42, 58, .2); }
.fp-art img { width: 120px; border-radius: 26px; }
.fp-art-in { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fp-art .heb { font-size: 58px; color: var(--card); font-weight: 600; line-height: 1; }
.fp-art-k { color: rgba(255, 253, 248, .72); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.fp-tt { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fp-t { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.fp-s { font-size: 15.5px; color: var(--muted); margin-top: 6px; font-weight: 500; min-height: 22px; }
.ic-btn.mark { color: var(--teal); margin-right: -8px; }
.scrub { position: relative; margin: 22px 0 6px; height: 28px; }
.scrub input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; position: relative; z-index: 2; touch-action: none; }
.scrub input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--teal) var(--p, 0%), var(--track) var(--p, 0%)); }
.scrub input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--teal) var(--p, 0%), var(--track) var(--p, 0%)); }
.scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); margin-top: -7px; box-shadow: 0 0 0 4px rgba(255, 253, 248, .95), 0 2px 6px rgba(16, 42, 58, .3); }
.scrub input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--teal); border: 3px solid var(--card); }
.ticks { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; pointer-events: none; z-index: 3; }
.ticks i { position: absolute; top: 9px; width: 2px; height: 10px; margin-left: -1px; background: rgba(16, 42, 58, .45); border-radius: 1px; }
.abz { position: absolute; top: 8px; height: 12px; background: rgba(15, 107, 91, .28); border-radius: 3px; z-index: 1; }
.times { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctrls { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.ic-btn.lg { width: 56px; height: 56px; }
.ic-btn.lg .ic { width: 32px; height: 32px; stroke-width: 1.8; }
.pp { width: 80px; height: 80px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(15, 107, 91, .3); }
.pp .ic { width: 36px; height: 36px; }
.chip-btn { min-width: 52px; height: 40px; padding: 0 8px; border-radius: 20px; border: 1.5px solid var(--line); font-weight: 800; font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums; }
.ic-btn.rep .ic { width: 26px; height: 26px; }
.ic-btn.rep.on { color: #fff; background: var(--teal); }
.lk { position: absolute; right: 2px; bottom: 4px; color: var(--muted); background: var(--bg); border-radius: 50%; }
.lk .ic { width: 13px; height: 13px; }
.panel { margin: 10px 0 4px; padding: 14px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); }
.panel-h { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 10px; }
.panel .fine { margin: 10px 2px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { height: 38px; padding: 0 14px; border-radius: 19px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 14.5px; color: var(--text); }
.chips button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chips.sm button { height: 34px; padding: 0 12px; font-size: 14px; }
.fp-act { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 6px; }
.act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); color: var(--navy); font-size: 13px; font-weight: 600; text-align: center; border: 1px solid rgba(228, 222, 210, .55); }
.act.on { color: var(--teal); }
.act .lk { right: 8px; top: 8px; bottom: auto; background: none; }
.aliyos li.cur { background: var(--teal-t); }
.aliyos li:first-child.cur { border-radius: 17px 17px 0 0; } .aliyos li:last-child.cur { border-radius: 0 0 17px 17px; }
.al { flex: 1; display: flex; align-items: center; gap: 14px; padding: 13px 10px 13px 16px; text-align: left; min-width: 0; }
.al-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; }
.aliyos li.done .al-dot { background: var(--teal); border-color: var(--teal); }
.aliyos li.cur .al-dot { border-color: var(--navy); background: var(--navy); }
.al-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.al-tx b { font-size: 16px; font-weight: 600; }
.aliyos li.cur .al-tx b { color: var(--teal); font-weight: 700; }
.al-tx small { font-size: 13px; color: var(--muted); }
.al-t { font-size: 14px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.marks .al .ic { color: var(--teal); width: 20px; height: 20px; }
.soonbox { padding: 22px; margin-top: 18px; } .soonbox h2 { font-size: 20px; } .soonbox p { color: var(--muted); }

/* forms */
.form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy); }
.form input, .form select { height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 0 12px; font: inherit; font-size: 16px; color: var(--text); width: 100%; min-width: 0; }
.form input:focus, .form select:focus { border-color: var(--teal); outline: none; }
.form input:disabled { opacity: .5; }
.form .chk { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; color: var(--text); font-size: 15px; }
.form .chk input { width: 20px; height: 20px; accent-color: var(--teal); }
.inp-ic { position: relative; display: block; } .inp-ic .ic { position: absolute; left: 12px; top: 12px; color: var(--muted); } .inp-ic input { padding-left: 42px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 10px; }
.opt-h { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.places { display: flex; flex-direction: column; gap: 4px; }
.places button { text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--navy-t); }
.places button span { color: var(--muted); font-size: 14px; }
.seg-l { font-size: 14px; font-weight: 600; color: var(--navy); }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--track); border-radius: 13px; padding: 4px; margin-top: -6px; }
.seg button { height: 40px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--muted); }
.seg button.on { background: var(--teal); color: #fff; }
.err { color: #A33A2A; font-size: 14px; font-weight: 600; min-height: 0; }
.err:empty { display: none; }

/* my parsha */
.born { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--text); }
.born > .ic { color: var(--navy); }
.born span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.born small { font-size: 13px; color: var(--muted); }
.born b { font-size: 15.5px; font-weight: 600; }
.born-e { color: var(--teal); font-weight: 700; font-size: 15px; }
.result { margin-top: 16px; padding: 24px 22px 22px; }
.r-k { font-size: 14px; font-weight: 700; color: var(--teal); }
.r-p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 10px; }
.r-p h2 { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.r-p .heb { font-size: 30px; }
.r-d { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; color: var(--muted); }
.r-d b { font-size: 17px; font-weight: 600; color: var(--text); }
.r-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 14px; }
.r-stats div { background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.r-stats b { display: block; font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.r-stats small { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.tl { list-style: none; margin: 22px 0 22px; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 18px; width: 2px; background: var(--line); }
.tl li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; }
.tl-dot { width: 28px; flex-shrink: 0; display: grid; place-items: center; position: relative; z-index: 1; }
.tl-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--muted); margin-top: 4px; }
.tl li.now .tl-dot::before { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-t); }
.tl li.mile .tl-dot { width: 28px; height: 28px; border-radius: 50%; background: #FBF4E6; border: 2px solid var(--gold); color: var(--gold); }
.tl li.mile .tl-dot::before { display: none; }
.tl li.mile .tl-dot .ic { width: 16px; height: 16px; }
.tl-tx { display: flex; flex-direction: column; } .tl-tx b { font-size: 15.5px; font-weight: 600; color: var(--text); } .tl-tx small { font-size: 13.5px; color: var(--muted); }
.tl li.now b { color: var(--teal); } .tl li.mile b { color: var(--gold); font-weight: 700; }
.result .btn .ic { width: 18px; height: 18px; }
.cal { padding: 16px 14px 14px; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-g i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.cal-g span { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; line-height: 1.1; }
.cal-g span b { font-size: 14.5px; font-weight: 600; } .cal-g span small { font-size: 10.5px; color: var(--muted); }
.cal-g span.sat b { color: var(--navy); font-weight: 800; }
.cal-g span.shab { background: var(--teal); } .cal-g span.shab b, .cal-g span.shab small { color: #fff; }
.cal-g span.bm { box-shadow: inset 0 0 0 2px var(--gold); }
.cal-l { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.cal-l .k { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }
.k.bm { box-shadow: inset 0 0 0 2px var(--gold); } .k.shab { background: var(--teal); }
.more { margin-top: 14px; padding: 4px 18px; }
.more summary { padding: 14px 0; font-weight: 600; color: var(--navy); cursor: pointer; }
.facts { margin: 0 0 10px; } .facts dt { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 10px; } .facts dd { margin: 2px 0 0; font-size: 15px; } .facts small { color: var(--muted); }
.notes { padding-left: 18px; font-size: 14px; color: #3d3a35; } .notes li { margin: 6px 0; }

/* account */
.acct { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--card); display: grid; place-items: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.acct-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.acct-tx b { font-size: 18px; font-weight: 700; color: var(--navy); }
.acct-tx small { font-size: 13px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { margin-top: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 9px; background: var(--track); color: #5e5a53; }
.badge.pro { background: var(--teal-t); color: var(--teal); }
.menu { padding: 2px 0; display: flex; flex-direction: column; }
.mi { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 16px; color: var(--text); font-size: 16px; font-weight: 500; text-align: left; width: 100%; }
.mi + .mi { border-top: 1px solid var(--line); }
.mi > .ic:first-child { color: var(--navy); width: 22px; height: 22px; }
.mi > span { flex: 1; display: flex; flex-direction: column; }
.mi small { font-size: 13px; color: var(--muted); }
.mi > .ic:last-child:not(:first-child) { color: var(--muted); width: 18px; height: 18px; }
#signout { color: var(--navy); }
.stack { display: grid; gap: 14px; }
.stack > .fine { margin: 0 2px; }
.stack > .btn, .stack > .link { justify-self: start; }
.set { padding: 14px 16px; }
.set-r { display: flex; align-items: center; gap: 12px; }
.set-r > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-r b { font-size: 16px; font-weight: 600; } .set-r small { font-size: 13px; color: var(--muted); }
.set-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-t); color: var(--navy); flex-shrink: 0; }
.set-ic .ic { width: 20px; height: 20px; }
.set .fine { margin: 12px 0 0; }
.set .chips { margin-top: 12px; }
.sw { position: relative; width: 52px; height: 32px; flex-shrink: 0; }
.sw input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 16px; background: var(--line); transition: .2s; }
.sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: .2s; }
.sw input:checked + i { background: var(--teal); } .sw input:checked + i::after { transform: translateX(20px); }
.evlog { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; max-height: 220px; overflow: auto; }
.evlog li { padding: 4px 0; border-top: 1px solid var(--line); } .evlog span { color: var(--muted); font-variant-numeric: tabular-nums; } .evlog small { color: var(--muted); }

/* paywall */
.pw { padding: 6px 2px 10px; }
.pw h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.pw-s { color: var(--muted); font-size: 16px; margin: 6px 0 18px; }
.ben { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.ben li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; } .ben .ic { color: var(--teal); width: 20px; height: 20px; }
.plans { display: grid; gap: 12px; margin-bottom: 18px; }
.plan { text-align: left; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 2px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.plan.on { border-color: var(--teal); background: #F4F8F3; }
.pl-t { font-weight: 700; font-size: 17px; color: var(--navy); }
.pl-t em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--teal); background: var(--teal-t); padding: 2px 8px; border-radius: 8px; margin-left: 6px; vertical-align: 2px; }
.pl-p { grid-row: span 2; font-size: 26px; font-weight: 800; color: var(--navy); } .pl-p small { font-size: 14px; font-weight: 600; color: var(--muted); }
.pl-s { font-size: 13.5px; color: var(--muted); }
.pw-links { text-align: center; font-size: 14px; color: var(--muted); }

/* practice */
.prac { padding: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: relative; }
.v1 { position: absolute; right: 16px; top: 18px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--track); padding: 2px 9px; border-radius: 9px; }
.pr-t { font-size: 22px; font-weight: 800; padding-right: 90px; } .pr-r { color: var(--muted); font-size: 14.5px; margin-top: -6px; }
.step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); text-align: left; }
.sn { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--card); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.step-tx { flex: 1; display: flex; flex-direction: column; } .step-tx b { font-size: 15.5px; font-weight: 600; } .step-tx small { font-size: 13px; color: var(--muted); }
.step .go { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; } .step .go .ic { width: 18px; height: 18px; }
.mic { align-self: center; width: 84px; height: 84px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; margin-top: 6px; box-shadow: 0 10px 24px rgba(15, 107, 91, .3); }
.mic .ic { width: 34px; height: 34px; } .mic.on { background: var(--navy); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(16, 42, 58, .12); } }
.meter { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; } .meter i { display: block; height: 100%; width: 0; background: var(--teal); }
.rstat { text-align: center; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.how { padding: 18px 20px; margin-top: 14px; } .how b { color: var(--navy); } .how p { color: #3d3a35; font-size: 14.5px; }
.res { padding: 18px; margin-top: 14px; }
.res-top { display: flex; gap: 16px; align-items: center; }
.ring { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(var(--teal) calc(var(--p) * 1%), var(--track) 0); }
.ring span { width: 60px; height: 60px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-weight: 800; color: var(--navy); font-size: 18px; }
.res-l { font-weight: 700; color: var(--navy); } .res-v { font-size: 15px; } .res-s { font-size: 13px; color: var(--muted); }
.graph { width: 100%; height: auto; margin-top: 14px; background: var(--bg); border-radius: 12px; }
.legend { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lg { display: inline-block; width: 18px; height: 4px; border-radius: 2px; } .lg.ref { background: var(--navy); } .lg.usr { background: var(--teal); margin-left: 8px; }

/* dedication */
.dedi { padding: 26px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dd-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--navy-t); color: var(--navy); display: grid; place-items: center; } .dd-ic .ic { width: 28px; height: 28px; }
.dedi h2 { font-size: 24px; font-weight: 800; } .dedi p { color: #3d3a35; margin: 0; }
.dedi blockquote { margin: 6px 0 8px; padding: 12px 14px; background: var(--bg); border-radius: 12px; font-style: italic; color: var(--navy); }

/* toast + sample notification */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 90px); transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: var(--navy); color: var(--card); padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 14.5px; z-index: 50; max-width: 90vw; text-align: center; box-shadow: 0 8px 24px rgba(16, 42, 58, .25); }
.toast.in { opacity: 1; transform: translate(-50%, 0); }
.notif { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -140%); transition: .35s; width: min(94vw, 420px); background: rgba(255, 253, 248, .97); border-radius: 18px; padding: 12px 14px; display: flex; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); z-index: 60; }
.notif.in { transform: translate(-50%, 0); } .notif img { width: 38px; height: 38px; border-radius: 9px; } .notif div { flex: 1; } .notif span { float: right; font-size: 12px; color: var(--muted); } .notif p { margin: 2px 0 0; font-size: 14.5px; }

/* testimonials */
.tq { margin: 0; padding: 22px 22px 20px; position: relative; }
.tq-mark { display: block; font-family: Georgia, var(--heb); font-size: 54px; line-height: .6; height: 26px; color: var(--navy); opacity: .18; }
.tq-q { margin: 0; color: var(--text); font-size: 16.5px; line-height: 1.6; }
.tq-q p { margin: 0 0 10px; }
.tq-q.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tq-q.clamp p { display: inline; } .tq-q.clamp p + p::before { content: " "; }
.tq-more { margin-top: 6px; font-size: 15px; }
.tq figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.tq figcaption b { color: var(--navy); font-weight: 700; font-size: 15.5px; } .tq figcaption small { color: var(--muted); font-size: 13.5px; }
.stars { display: flex; gap: 2px; color: var(--gold); margin-bottom: 10px; } .stars .ic { width: 18px; height: 18px; }
#tabbar { grid-template-columns: repeat(5, 1fr); padding-left: 2px; padding-right: 2px; }
#tabbar a { font-size: 11.5px; letter-spacing: 0; white-space: nowrap; }

.nw { white-space: nowrap; }
.cp-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cp-k .heb { font-size: 22px; color: var(--navy); font-weight: 600; }
.sh { grid-template-columns: 44px 1fr; align-items: start; }
.sh-b { margin-top: -6px; }
.sh-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-t h1 { line-height: 1.2; padding-top: 2px; }
.sh-t .heb { font-size: 18px; color: var(--muted); font-weight: 500; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lg.ref { background: rgba(16, 42, 58, .38); }

/* Maftir & Haftorah of the Bar Mitzvah Shabbos */
.haft { margin: 16px 0 4px; padding: 14px 14px 12px; border-radius: 14px; background: var(--navy-t); }
.haft-k { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.haft-k .ic, .haft-k svg { width: 17px; height: 17px; }
.haft-k em { font-style: normal; font-weight: 600; font-size: 12.5px; color: #fff; background: var(--navy); border-radius: 99px; padding: 2px 9px; }
.haft-r { display: grid; grid-template-columns: 74px 1fr; column-gap: 8px; margin: 6px 0; font-size: 14.5px; line-height: 1.35; }
.haft-r small { grid-row: span 2; color: #6E6A62; font-size: 12.5px; padding-top: 2px; }
.haft-r b { color: var(--text); font-weight: 600; }
.haft-r span { color: #5F5B54; font-size: 14px; }
.haft-why { margin: 10px 0 0; font-size: 13.5px; color: var(--navy); line-height: 1.45; }
.haft-reg { margin: 8px 0 0; font-size: 13px; color: #6E6A62; line-height: 1.45; }
.haft-reg span { font-weight: 600; }
.haft-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: #5F5B54; line-height: 1.45; }
.haft-notes li { margin: 3px 0; }
.haft-au { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--teal); font-weight: 600; }
.haft-au svg { width: 16px; height: 16px; flex: none; }
.haft-go { text-decoration: none; } .haft-go b { font-weight: 700; } .haft-go.br { font-weight: 500; margin-top: 6px; } .hlk { display: inline-flex; color: var(--muted); margin-left: auto; } .hlk svg { width: 13px !important; height: 13px !important; }
.bmh { padding: 18px 18px 14px; margin: 18px 0; }
.bmh-h b { display: block; color: var(--navy); font-size: 16px; }
.bmh-h small { color: #6E6A62; font-size: 13px; }
.bmh .haft { margin-top: 10px; }
.wk .wk-sp { color: var(--navy); font-weight: 600; }

/* practice v3: aliyah picker, modes, strictness, line-by-line results */
.prac { --amber: #C7861C; --red: #B4442F; }
.res, .how { --amber: #C7861C; --red: #B4442F; }
.pick { display: flex; gap: 8px; overflow-x: auto; margin: 2px -20px 0; padding: 2px 20px 4px; scrollbar-width: none; }
.pick::-webkit-scrollbar { display: none; }
.pk { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 17px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--bg); border: 1px solid var(--line); }
.pk.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.seg { display: flex; background: var(--track); border-radius: 12px; padding: 3px; gap: 3px; }
.seg a, .seg button { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--muted); }
.seg .on { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(16, 42, 58, .12); }
.seg.sm a, .seg.sm button { padding: 6px 4px; font-size: 13.5px; }
.strict { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .strict > span { font-size: 14px; font-weight: 700; color: var(--navy); } .strict .seg { flex: 1; }
.res-h { margin-top: 14px; font-weight: 700; color: var(--navy); font-size: 15px; } .res-h small { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 6px; }
.lines { list-style: none; margin: 6px 0 4px; padding: 0; }
.ln { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.ln:first-child { border-top: 0; }
.qd { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.qd.q-g { background: var(--teal); } .qd.q-a { background: var(--amber); } .qd.q-r { background: var(--red); } .qd.q-n { background: var(--track); }
.ln-t { flex: 1; font-size: 15px; font-weight: 600; color: var(--navy); } .ln-t small { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 8px; font-variant-numeric: tabular-nums; }
b.q-g { color: var(--teal); } b.q-a { color: var(--amber); } b.q-r { color: var(--red); } b.q-n { color: var(--muted); }
.ln b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ln-p { width: 34px; height: 34px; border-radius: 50%; background: var(--teal-t); color: var(--teal); display: grid; place-items: center; flex-shrink: 0; } .ln-p .ic { width: 16px; height: 16px; }
.alist { list-style: none; margin: 12px 0 6px; padding: 0; }
.alist > li { border-top: 1px solid var(--line); } .alist > li:first-child { border-top: 0; }
.alist summary, .al-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; list-style: none; cursor: pointer; }
.alist summary::-webkit-details-marker { display: none; }
.al-n { font-weight: 700; color: var(--navy); font-size: 15.5px; min-width: 76px; } .al-s { flex: 1; color: var(--muted); font-size: 13.5px; }
.pc { min-width: 52px; text-align: center; padding: 3px 8px; border-radius: 10px; font-size: 14px; background: var(--bg); }
.alist details[open] summary .al-s { color: var(--navy); }

/* ---- Record & Compare v9: where it doesn't match (words coloured by the tune) ---- */
.res { --green: #0F6B5B; --amber-t: rgba(199,134,28,.16); --red-t: rgba(180,68,47,.13); }
.fix { margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: var(--red-t); color: var(--navy); font-size: 15px; line-height: 1.5; }
.fix b { color: #8E3221; margin-right: 4px; } .fix a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(16,42,58,.3); text-underline-offset: 3px; white-space: nowrap; }
.fix.ok { background: var(--teal-t, rgba(15,107,91,.1)); color: var(--teal); font-weight: 600; }
.wkey { display: flex; gap: 8px; margin: 12px 0 2px; font-size: 13px; } .wkey .w { font-family: inherit; font-size: 13px; padding: 2px 8px; }
.pk-card { border-top: 1px solid var(--line); padding: 12px 0 10px; } .alist .pk-card:first-of-type, .res > .pk-card:first-of-type { border-top: 0; }
.pk-h { display: flex; align-items: center; gap: 9px; }
.pk-ref { font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; } .pk-n { flex: 1; font-size: 13px; color: var(--muted); }
.pk-h .pc { font-size: 14px; font-variant-numeric: tabular-nums; }
.pv { font-family: "Taamey Frank CLM", "SBL Hebrew", "Noto Serif Hebrew", "Frank Ruhl Libre", "Times New Roman", serif; font-size: 23px; line-height: 2.05; text-align: right; margin: 8px 0 2px; color: var(--navy); word-spacing: 2px; }
.w { font: inherit; display: inline-block; white-space: nowrap; padding: 1px 3px; border-radius: 7px; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.w-g { color: var(--teal); } .w-n { color: #B3ADA2; }
.w-a { background: var(--amber-t); color: #8A5A0D; box-shadow: inset 0 -2px 0 #C7861C; cursor: pointer; }
.w-r { background: var(--red-t); color: #9A3422; box-shadow: inset 0 -2px 0 #B4442F; cursor: pointer; font-weight: 700; }
.w.on { outline: 2px solid var(--navy); outline-offset: 1px; }
.pk-card.ok .pv { font-size: 20px; line-height: 1.9; }
.mg { width: 100%; height: auto; background: var(--bg); border-radius: 10px; margin-top: 6px; display: block; }
.mg-l { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 5px; } .lg.bad { background: rgba(180,68,47,.35); height: 10px; width: 12px; margin-left: 8px; }
.hints { list-style: none; padding: 0; margin: 8px 0 0; } .hints li { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; color: var(--text); }
.w-tag { font-family: "Taamey Frank CLM", "SBL Hebrew", "Noto Serif Hebrew", "Times New Roman", serif; font-size: 19px; padding: 1px 8px; border-radius: 8px; border: 0; min-width: 64px; text-align: center; flex-shrink: 0; }
.w-tag.w-a { background: var(--amber-t); color: #8A5A0D; } .w-tag.w-r { background: var(--red-t); color: #9A3422; }
.pk-st { font-size: 13px; color: var(--teal); margin-top: 6px; min-height: 18px; } .heb-in { font-family: "Noto Serif Hebrew", "Times New Roman", serif; font-size: 16px; }
.okp { margin-top: 10px; border-top: 1px solid var(--line); } .okp summary { padding: 11px 0; color: var(--teal); font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; } .okp summary::-webkit-details-marker { display: none; }
.okp summary small { color: var(--muted); font-weight: 500; margin-left: 6px; } .okp[open] summary small { display: none; }
.honest { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.45; } .honest b { color: var(--navy); }

/* ---- Nusach Hatefila (v10) ---- */
.nus-home { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-top: 14px; text-decoration: none; color: inherit; }
.nus-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--teal-t); color: var(--teal); display: grid; place-items: center; flex-shrink: 0; } .nus-ic .ic { width: 24px; height: 24px; }
.nus-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; } .nus-tx b { color: var(--navy); font-size: 16px; } .nus-tx small { color: var(--muted); font-size: 13px; }
.nus-home .heb { font-size: 19px; }
.sec-h.grp { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; } .sec-h.grp .heb { font-size: 17px; color: var(--muted); font-weight: 500; }

/* ---------- Tikkun: scroll letters beside the text with nekudos and trop ---------- */
@font-face { font-family: "Stam Ashkenaz CLM"; src: url(fonts/stam-ashkenaz-clm.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Keter YG"; src: url(fonts/keter-yg.woff2) format("woff2"); font-display: swap; }
/* Taamey Frank CLM (c) 2010 Yoram Gnat, Culmus project, GPL v2 with font exception; subset for the trop chart only */
@font-face { font-family: "Taamey Frank CLM"; src: url(fonts/taamey-frank-trop.woff2) format("woff2"); font-display: block; }
body[data-screen=tikkun] { max-width: 980px; }
body[data-screen=tikkun] #app { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 128px); } /* dock (bar 64 + 18) + room so the last lines scroll clear of it */
body[data-screen=tikkun].has-mini .mini { display: none; }
.fp-act { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
.btn.ghost { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); margin-top: 10px; }
.tk-top { margin: 2px 0 10px; }
.tk-t { font-size: 20px; margin: 0 2px 10px; }
.tk-pick { margin-bottom: 10px; }
.tk-pick .pk { cursor: pointer; }
.tk-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-ctl .seg { flex: 1 1 auto; margin: 0; }
.tk-ctl .seg button { flex: 1; white-space: nowrap; }
.tk-size { display: flex; gap: 6px; }
.tk-size button { width: 40px; height: 36px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--navy); font-weight: 700; font-family: var(--heb); font-size: 17px; }
.tk-size button small { font-size: 12px; margin-left: 1px; }
.tk-note { font-size: 13.5px; color: var(--muted); margin: 10px 2px 0; line-height: 1.45; }
.tk { --tk: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px 12px 14px; }
.tk-sec { padding-top: 4px; }
.tk-h { display: flex; justify-content: space-between; align-items: baseline; direction: ltr; padding: 12px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.tk-h b { color: var(--navy); font-size: 15px; } .tk-h span { color: var(--muted); font-size: 13px; }
.tk-sec.tk-cur .tk-h b { color: var(--teal); }
.tk-sec.tk-cur .tk-h { border-bottom-color: var(--teal); }
.tk-sc, .tk-both .tk-sc, .tk-scroll .tk-flow { font-family: "Stam Ashkenaz CLM", var(--heb); color: #111; font-size: calc(23px * var(--tk)); line-height: 1.55; }
.tk-vo, .tk-voc .tk-flow { font-family: "Keter YG", "Taamey Frank CLM", "SBL Hebrew", var(--heb); color: var(--text); font-size: calc(25px * var(--tk)); line-height: 1.9; }
.tk-row { display: grid; grid-template-columns: 1fr 1.12fr; gap: 0 14px; padding: 7px 0; border-bottom: 1px dashed rgba(228, 222, 210, .8); }
.tk-row:last-child { border-bottom: 0; }
.tk-row .tk-sc { border-left: 1px solid var(--line); padding-left: 12px; text-align: right; }
.tk-row.tk-p { padding-bottom: 18px; }
.tk-row.cur { background: rgba(184, 135, 46, .14); border-radius: 10px; }
.tk-pn { font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--muted); background: var(--navy-t); border-radius: 7px; padding: 4px 5px; vertical-align: 3px; direction: ltr; margin-left: 2px; cursor: pointer; }
.tk-pn.start { background: var(--teal); color: #fff; }
.tk-ps { font-style: normal; color: var(--muted); font-size: .62em; margin: 0 6px; vertical-align: 2px; }
.tk-gap { display: inline-block; width: 4.2em; }
.tk-pet { display: block; height: .5em; }
.tk-flow { text-align: justify; text-align-last: right; padding: 6px 2px; }
.tk-scroll .tk { padding: 6px 20px 14px; }
.tk-scroll .tk-flow { max-width: 30em; margin: 0 auto; line-height: 1.7; }
.tk .tw { border-radius: 6px; transition: background-color .12s, color .12s; padding: 0 1px; }
.tk .tw.on, .tk-sc .tw.on, .tk-scroll .tw.on { background: #0F6B5B; color: #fff; box-shadow: 0 0 0 2px #0F6B5B; }
.tk-pr.cur { background: rgba(184, 135, 46, .16); border-radius: 6px; }
.tk .big { font-size: 1.45em; line-height: 0; } .tk .small { font-size: .7em; }
.tk .sp { color: var(--muted); }
/* the bar sits in an opaque dock on top of the tab bar, so no Tikkun line shows around or under it */
.tk-dock { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); z-index: 30; padding: 8px 12px 10px; background: var(--bg);
  box-shadow: 0 -10px 14px -6px rgba(250, 247, 239, .95), 0 -1px 0 var(--line); }
.tk-bar { position: relative; margin: 0 auto; width: min(560px, 100%); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--navy); color: #fff; border-radius: 20px; box-shadow: 0 8px 24px rgba(16, 42, 58, .25); }
.tk-bar .ic-btn { color: #fff; }
.tk-bar .pp.sm { width: 46px; height: 46px; flex: 0 0 46px; touch-action: manipulation; }
.pp .ic, .mini-pp .ic, .playbig .ic, .tk-bar .ic-btn .ic { pointer-events: none; }
.tk-bar-m { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tk-bar-m b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk-bar-m small { font-size: 12px; opacity: .75; }
.tk-bar .chip-btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.tk-test { display: flex; align-items: center; gap: 6px; background: var(--teal); color: #fff; padding: 9px 12px; border-radius: 14px; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tk-test .ic { width: 18px; height: 18px; }
.tk-card { padding: 14px 14px 16px; }
.tk-card .tk { box-shadow: none; padding: 2px 4px 6px; border: 0; margin-top: 8px; background: transparent; }
.tk-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tk-card-h b { color: var(--navy); font-size: 16px; }
.beta { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); background: var(--teal-t); border-radius: 6px; padding: 2px 6px; }
.tk-fold { margin-left: auto; color: var(--teal); font-weight: 600; font-size: 14px; }
@media (max-width: 430px) {
  .tk { padding: 4px 8px 12px; }
  .tk-row { gap: 0 8px; grid-template-columns: 1fr 1.18fr; }
  .tk-row .tk-sc { padding-left: 8px; }
  .tk-both .tk-sc { font-size: calc(18px * var(--tk)); line-height: 1.65; }
  .tk-both .tk-vo { font-size: calc(21px * var(--tk)); line-height: 1.85; }
  .tk-ctl .seg button { font-size: 13px; padding-left: 4px; padding-right: 4px; }
  .tk-test span { display: none; }
}
@media (min-width: 760px) { .tk-row { gap: 0 26px; } .tk-row .tk-sc { padding-left: 24px; } .tk { padding: 8px 22px 18px; } }

/* ---------- Tikkun: Sefer Torah amud layout (Both / Scroll only) ---------- */
.tk.tk-am { background: transparent; border: 0; box-shadow: none; padding: 0; }
.tk-am-wrap { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 2px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tk-amud { flex: 0 0 auto; box-sizing: border-box; width: calc(var(--aw) * var(--tk)); scroll-snap-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px 10px 14px 32px; }
.tk-ah { display: flex; align-items: center; gap: 8px; direction: ltr; padding: 4px 0 8px; margin: 0 -2px 6px -24px; border-bottom: 1px solid var(--line); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.tk-ah b { font-family: var(--heb); color: var(--navy); font-size: 16px; margin-left: auto; direction: rtl; }
.tk-ah span { color: var(--muted); font-size: 12.5px; margin-right: auto; }
.tk-an { width: 32px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; }
.tk-ah .tk-an:first-of-type { order: 3; } .tk-ah span { order: 2; } .tk-ah b { order: 1; } .tk-ah .tk-an:last-of-type { order: 0; }
.tk-ah .tk-an:only-child { order: 0; }
.tk-ln { position: relative; }
.tk-am .tk-sc, .tk-am .tk-vo { display: flex; white-space: nowrap; min-width: 0; }
.tk-am .tk-sc { font-family: "Stam Ashkenaz CLM", var(--heb); color: #111; font-size: calc(var(--aw) * var(--tk) * var(--ks) * var(--fit, 1)); line-height: 1.5; }
.tk-am .tk-vo { font-family: "Keter YG", "Taamey Frank CLM", "SBL Hebrew", var(--heb); color: var(--text); font-size: calc(var(--aw) * var(--tk) * var(--kv) * var(--fit, 1)); line-height: 1.85; }
.tk-c { flex: 1 1 auto; display: flex; justify-content: space-between; min-width: 0; }
.tk-f { display: flex; justify-content: space-between; gap: .45em; flex: 1 1 auto; min-width: max-content; }
.tk-ls .tk-f, .tk-lp .tk-f { flex: 0 0 auto; justify-content: flex-start; }
.tk-lp .tk-c { justify-content: flex-start; }
.tk-lk .tk-c + .tk-c { margin-right: 9%; }
.tk-le .tk-sc, .tk-le .tk-vo { min-height: 1.5em; }
.tk-stack .tk-amud, .tk-solo .tk-amud { --ks: .041; --kv: .039; }
.tk-side .tk-amud { --ks: .0205; --kv: .0196; }
.tk-side .tk-ln { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4%; }
.tk-side .tk-ln .tk-sc { border-left: 1px solid var(--line); padding-left: 4%; margin-left: -4%; }
.tk-stack .tk-ln { padding: 1px 0 3px; border-bottom: 1px dashed rgba(228, 222, 210, .7); }
.tk-stack .tk-ln .tk-vo { color: #3c4a52; }
.tk-stack .tk-le { border-bottom: 0; }
.tk-lab { position: absolute; left: -31px; top: 2px; width: 28px; font-style: normal; }
.tk-al { display: block; width: 100%; font: 700 9.5px/1.15 var(--heb); color: #fff; background: var(--teal); border-radius: 5px; padding: 2px 1px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; }
.tk-am .tw { border-radius: 4px; transition: background-color .12s, color .12s; padding: 0 1px; cursor: pointer; }
.tk-am .tx { color: #a9a49a; }
.tk-am .tk-vo .tx { color: #b5b0a5; }
.tk-am .tw.al { background: rgba(184, 135, 46, .10); }
.tk-am .tw.cur { background: rgba(184, 135, 46, .26); box-shadow: 0 0 0 1px rgba(184, 135, 46, .35); }
.tk-am .tw.on, .tk-am .tk-vo .tw.on { background: #0F6B5B; color: #fff; box-shadow: 0 0 0 2px #0F6B5B; }
@media (max-width: 430px) { .tk-amud { padding: 4px 6px 12px 30px; } .tk-lab { left: -29px; } }

/* ---------- Record & Compare: word check (v18.1) ---------- */
.wck { margin-top: 12px; }
.wck-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .wck-h b { font-size: 17px; color: var(--navy); }
.wck-st { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 4px 0; }
.wck .spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: wckspin .8s linear infinite; flex: none; }
@keyframes wckspin { to { transform: rotate(360deg); } }
.wck-sc { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
.wck-sc > div { background: var(--bg); border-radius: 12px; padding: 10px 4px; } .wck-sc b { display: block; font-size: 22px; color: var(--navy); } .wck-sc small { color: var(--muted); font-size: 12.5px; }
.wck-sc .tot { background: var(--teal-t); } .wck-sc .tot b { color: var(--teal); }
.wck-sum { margin: 12px 2px 6px; font-weight: 600; color: var(--text); } .wck-sum .muted { font-weight: 400; color: var(--muted); font-size: 13px; }
.wck-l { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.wck-k { font-size: 12.5px; font-weight: 700; margin-inline-end: 4px; } .wck-k.r { color: #9A3422; } .wck-k.y { color: #8A6411; }
.wck-w { font: inherit; font-family: "Keter YG", "SBL Hebrew", "Times New Roman", serif; font-size: 21px; line-height: 1.3; padding: 2px 10px; border-radius: 8px; border: 0; cursor: pointer; }
.wck-w.wc-r, .tk .wc-r { background: #F6D5CE; color: #9A3422; box-shadow: inset 0 -3px 0 #C0392B; border-radius: 4px; }
.wck-w.wc-x, .tk .wc-x { background: #C0392B; color: #fff; box-shadow: inset 0 -3px 0 #7B1E12; border-radius: 4px; } .wck-k.x { color: #fff; background: #C0392B; padding: 1px 7px; border-radius: 6px; } .wck-x { background: #FBE3DE; border: 1px solid #E6A79A; border-radius: 10px; padding: 8px 10px; margin: 8px 0; } .wck-x p { margin: 6px 0 0; font-size: 13.5px; color: #6B2418; }
.wck-w.wc-y, .tk .wc-y { background: #FBEAB8; color: #6E5010; box-shadow: inset 0 -3px 0 #D9A520; border-radius: 4px; }
.wck-tip { font-size: 13px; color: var(--muted); margin: 4px 2px 0; }
.wck .btn.ghost.sm { height: 38px; padding: 0 14px; font-size: 14.5px; }

/* Date picker (v18.6): our own calendar so Sunday stays dark and only Shabbos is red */
.form .dp-in { height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; padding: 0 12px; font: inherit; font-size: 16px; font-weight: 400; color: var(--text); width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.form .dp-in .ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--teal); }
.form .dp-in span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form .dp-in.ph span { color: var(--muted); }
.form .dp-in:focus-visible { border-color: var(--teal); outline: none; }
html.dp-open, html.dp-open body { overflow: hidden; }
.dp-ov { position: fixed; inset: 0; z-index: 80; background: rgba(16, 42, 58, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dp { width: min(100%, 400px); background: var(--card); border-radius: 20px; box-shadow: 0 18px 50px rgba(16, 42, 58, .3); padding: 14px 12px 10px; outline: none; color: var(--navy); }
.dp-h { display: flex; align-items: center; gap: 6px; }
.dp-nav { width: 44px; height: 44px; flex-shrink: 0; border: 0; background: var(--teal-t); color: var(--teal); border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.dp-nav .ic { width: 20px; height: 20px; }
.dp-nav:disabled { opacity: .3; cursor: default; }
.dp-h select { height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; padding: 0 8px; min-width: 0; cursor: pointer; }
.dp-h .dp-m { flex: 1.6; } .dp-h .dp-y { flex: 1; }
.dp-h select:focus { border-color: var(--teal); outline: none; }
.dp-hm { text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 6px 0 4px; min-height: 18px; }
.dp-w, .dp-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-w i { font-style: normal; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--navy); padding: 4px 0; }
.dp-w i.sat { color: #C0392B; }
.dp-g button { height: 48px; border: 0; background: transparent; border-radius: 12px; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: var(--navy); font: inherit; }
.dp-g b { font-size: 17px; font-weight: 600; line-height: 1.15; }
.dp-g small { font-size: 10px; line-height: 1; color: var(--muted); font-weight: 500; }
.dp-g button.sat { color: #C0392B; }
.dp-g button.sat small { color: rgba(192, 57, 43, .7); }
.dp-g button.om { color: #C4BEB2; }
.dp-g button.om small { color: #D6D0C4; }
.dp-g button.om.sat { color: rgba(192, 57, 43, .38); }
.dp-g button.om.sat small { color: rgba(192, 57, 43, .3); }
.dp-g button.tdy { box-shadow: inset 0 0 0 1.5px var(--teal); }
.dp-g button.sel { background: var(--teal); color: #fff; box-shadow: none; }
.dp-g button.sel small { color: rgba(255, 255, 255, .8); }
.dp-g button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .dp-g button:not(.sel):not(:disabled):hover { background: var(--teal-t); } }
.dp-a { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-a button { flex: 1; height: 44px; border: 0; border-radius: 12px; background: var(--teal-t); color: var(--teal); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.dp-a .dp-x { background: transparent; color: var(--muted); }

/* v18.8 טעמי המקרא (trop chart, free) */
.tp-home .heb { font-size: 22px; font-weight: 700; text-align: left; }
.tp-home .free { flex-shrink: 0; }
.tp-ic { font-family: "Keter YG", var(--heb); font-size: 26px; line-height: 1; padding-bottom: 6px; color: var(--teal); }
.tp-head { display: flex; align-items: center; gap: 12px; margin: -6px 0 6px; }
.tp-h1 { font-family: var(--heb); font-size: 34px; font-weight: 700; color: var(--navy); }
.tp-lead { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; }
.tp-sec + .tp-sec { margin-top: 26px; }
.tp-pl { display: flex; align-items: center; gap: 16px; padding: 16px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 5; }
.tp-pl .playbig { width: 64px; height: 64px; }
.tp-pp .ic, .tp-pp svg { pointer-events: none; }
.tp-pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-pl-t .heb { font-size: 21px; text-align: right; }
.tp-pl-t small { color: var(--muted); font-size: 13px; text-align: right; }
.tp-bar { height: 22px; display: flex; align-items: center; cursor: pointer; margin-top: 4px; }
.tp-bar i { display: block; height: 5px; width: 0; background: var(--teal); border-radius: 3px; }
.tp-bar { background: linear-gradient(var(--line), var(--line)) center / 100% 5px no-repeat; border-radius: 3px; }
.tp-time { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* (v18.51) the classic chart: the names in running lines, each carrying its own trop (Taamey Frank CLM, subset to the chart's letters and marks) */
.tp-cl { margin-top: 12px; padding: 12px 4px 14px; background: #FAF7EF; color: #102A3A; font-family: "Taamey Frank CLM", "Keter YG", var(--heb); font-size: clamp(19px, 5.25vw, 46px); line-height: 1; text-align: center; }
.tp-ln { padding: .05em 0; }
.tp-w { display: inline-block; font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: .28em .11em .38em; line-height: 1.25; border-radius: .28em; cursor: pointer; direction: rtl; -webkit-tap-highlight-color: transparent; transition: background-color .22s ease, color .22s ease, box-shadow .22s ease; }
.tp-w:hover { background: rgba(15, 107, 91, .09); }
.tp-w.on { background: #0F6B5B; color: #FAF7EF; box-shadow: 0 3px 10px rgba(15, 107, 91, .28); }
.tp-w:focus-visible { outline: 2px solid #0F6B5B; outline-offset: 1px; }
@media (min-width: 700px) { body[data-screen=trop] { max-width: 820px; } }

/* (v18.11) Tune to my voice */
#recArea { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
#calib:empty { display: none; }
.cal { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--teal-t); border: 1px solid rgba(15, 107, 91, .18); }
.cal-h { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.cal-h b { font-size: 17px; font-weight: 800; }
.cal-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; flex-shrink: 0; border: 0; padding: 0; cursor: pointer; font: inherit; }
.cal-ic.on { background: var(--navy); }
.cal-ic:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cal-ic .ic { width: 18px; height: 18px; }
.cal-n { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cal-p { margin: 0; color: #2c2a26; font-size: 15px; line-height: 1.45; }
.cal-ref { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.cal-v { margin: 0; font-family: var(--heb); font-size: 23px; line-height: 1.9; color: var(--navy); text-align: right; unicode-bidi: isolate; }
.cal-v mark { background: rgba(184, 135, 46, .2); color: inherit; padding: 2px 4px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cal-l { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0; padding: 0; font-size: 14.5px; }
.cal-l .ic { width: 18px; height: 18px; }
.cal .mic { margin-top: 2px; }
.cal-f { font-size: 13px; color: var(--muted); text-align: center; }
.link.sm { font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; }
.cal.done { background: #fff; border-color: var(--line); }
.cal-ok { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.cal-ok.sm { width: 20px; height: 20px; font-size: 12px; }
.cal .strict { margin-top: 0; }
.cal-row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); padding: 8px 12px; border-radius: 12px; background: var(--teal-t); }
.cal-row .link { margin-left: auto; }
/* v18.14 Brachos for the Haftorah card on every Haftorah player */
.brk .haft-go { margin-top: 8px; } .brk-t { display: flex; flex-direction: column; } .brk-t small { font-weight: 500; font-size: 13px; color: #6E6A62; text-align: left; }

/* (v18.18, beta) מלעיל / מלרע emphasis marks in Record & Compare */
.w-e { background: #EEE6FA; color: #5B2E91; box-shadow: inset 0 -2px 0 #7B4FB8; cursor: pointer; }
.w-a.w-e, .w-r.w-e { box-shadow: inset 0 -2px 0 #7B4FB8, inset 0 2px 0 #7B4FB8; }
.w-tag.w-e { background: #EEE6FA; color: #5B2E91; }
.e-l { color: #5B2E91; font-weight: 600; }
.st-s { margin: 6px 0 2px; } .st-s .link { font-size: inherit; padding: 0; }
.beta { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5B2E91; background: #EEE6FA; border-radius: 6px; padding: 1px 5px; vertical-align: 1px; }

/* v18.26 Quick find on the home page */
.qf { padding: 14px 16px 6px; margin-bottom: 14px; }
.qf-h { display: flex; align-items: center; gap: 8px; color: var(--navy); margin-bottom: 8px; }
.qf-h svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.qf-h b { font-size: 16px; font-weight: 800; }
.qf-h small { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.qf-r { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; padding: 0 0 10px; }
.qf-l { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.15; }
.qf-l .heb { font-size: 15px; color: var(--teal); text-align: left; }
.qf-r select { -webkit-appearance: none; appearance: none; height: 44px; min-width: 0; width: 100%; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; color: var(--navy); padding: 0 34px 0 12px; cursor: pointer; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F6B5B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.qf-r select:focus { border-color: var(--teal); outline: none; }
.dlm b { display: block; font-size: 17px; margin: 4px 6px 6px; }
.dlm p { margin: 0 6px 4px; font-size: 15px; line-height: 1.4; color: var(--text); }
.dlm .dp-a button { font-size: 14px; }
/* (v18.31) trop-tune note on Record & Compare */
.tnote { margin: 14px 0 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--gold); font-size: 13px; line-height: 1.45; color: var(--muted); } .tnote b { color: var(--navy); }
/* (v18.31) darga drawn as a backwards Z on the trop chart */
/* (v18.31) ואזלא mark mirrored in place (only the mark: the copy is clipped above the letter) */

/* (v18.34) "Why this score": encouraging breakdown on every trop score card */
.why { margin: 12px 0 2px; padding: 11px 13px; border-radius: 12px; background: var(--card); border: 1px solid rgba(15,107,91,.2); font-size: 14px; color: var(--navy); }
.why-hd { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.why-l { margin: 3px 0 6px; font-weight: 600; font-size: 15px; line-height: 1.4; }
.why-c { list-style: none; padding: 0; margin: 0; } .why-c li { display: flex; gap: 8px; padding: 2px 0; line-height: 1.4; } .why-c b { flex: 0 0 82px; color: var(--teal); font-weight: 600; }
.why-t { margin-top: 8px; font-weight: 600; } .why-t small { font-weight: 400; color: var(--muted); }
.why-p { list-style: none; padding: 0; margin: 4px 0 0; } .why-p li { display: flex; align-items: center; gap: 9px; padding: 3px 0; } .why-p .ln-p { width: 30px; height: 30px; }
.why-w { font-family: "Taamey Frank CLM", "SBL Hebrew", "Noto Serif Hebrew", "Times New Roman", serif; font-size: 18px; color: var(--navy); flex-shrink: 0; } .why-w:not([lang]) { font-family: inherit; font-size: 14px; font-weight: 600; }
.why-h { font-size: 13px; color: var(--muted); line-height: 1.35; }
.why-e { margin: 8px 0 0; padding-left: 8px; border-left: 3px solid var(--gold); font-size: 13px; color: var(--teal); }
.fix { background: rgba(184,135,46,.1); } .fix b { color: #8A6420; }

/* (v18.35) R&C "What are you reading?" */
.wr { display: grid; gap: 8px; margin: 2px 0 4px; }
.wr-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wr-c > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.wr-c > .wr-l { font-size: 14px; color: var(--navy); }
.wr select { height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F6B5B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; padding: 0 30px 0 12px; min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
.wr select:focus { border-color: var(--teal); outline: none; }
.wr-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wr-g .wr-w { grid-column: 1 / -1; }
.wr-g select { font-size: 16px; padding-left: 10px; }
/* v18.43 ±5 s buttons beside every play/pause */
.skip5 { color: var(--teal); touch-action: manipulation; }
.skip5 .ic { pointer-events: none; }
.mini-sk { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; }
.mini-sk .ic { width: 24px; height: 24px; }
.cp-pp { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.cp-pp .skip5 { width: 44px; height: 44px; }
.cp-pp .skip5 .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.cp-row { gap: 10px; }
.cp-row-t { min-width: 0; } .cp-row-t b { white-space: nowrap; font-size: 17px; }
.rc-sk { display: flex; justify-content: flex-end; gap: 6px; margin: -4px 4px 4px; }
.rc-sk .ic { width: 26px; height: 26px; }
.tp-ctl { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.tp-ctl .skip5 .ic { width: 26px; height: 26px; }
.mini { grid-template-columns: 1fr 44px 48px 44px 44px; gap: 0; }
@media (max-width: 400px) { .mini-main img { display: none; } }

/* v18.48: save my recording; result play buttons are stop toggles */
.save-rec { display: flex; align-items: center; gap: 6px; margin: 10px auto 0; font-weight: 600; color: var(--teal); }
.save-rec[hidden] { display: none; } .save-rec .ic { width: 18px; height: 18px; }
.ln-p.playing { background: var(--teal); color: #fff; }
button.w.playing, button.w-tag.playing { outline: 2px solid var(--teal); outline-offset: 1px; }

/* (v18.54) My recordings */
.mr { padding: 16px 16px 14px; margin-top: 14px; }
.mr-h { display: flex; align-items: center; gap: 8px; } .mr-h h3 { font-size: 18px; }
.mr-n { background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.mr-s { margin: 4px 0 8px; font-size: 14px; color: var(--navy); opacity: .75; }
.mr-w { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(184, 135, 46, .12); color: #6b4d12; font-size: 14px; }
.mr-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); margin: 2px 0 6px; cursor: pointer; }
.mr input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal); flex: none; margin: 0; }
.mr-l { list-style: none; margin: 0; padding: 0; }
.mr-l li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(16, 42, 58, .08); }
.mr-p { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; }
.mr-p .ic { width: 18px; height: 18px; }
.mr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-tx b { font-size: 15px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.mr-tx small { font-size: 13px; color: var(--navy); opacity: .65; }
.mr-sc { flex: none; min-width: 48px; text-align: center; font-weight: 800; font-size: 15px; border-radius: 10px; padding: 4px 6px; }
.mr-sc.hi { background: rgba(15, 107, 91, .12); color: var(--teal); } .mr-sc.md { background: rgba(184, 135, 46, .14); color: #8a6420; }
.mr-sc.lo { background: rgba(16, 42, 58, .07); color: var(--navy); } .mr-sc.na { color: var(--navy); opacity: .5; }
.mr-d { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: var(--navy); opacity: .55; border-radius: 50%; }
.mr-d:hover { opacity: 1; background: var(--navy-t); } .mr-d .ic { width: 18px; height: 18px; }
.mr-a { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .mr-a .btn { flex: 1 1 140px; padding: 0 14px; }
.mr-em { background: #fff; color: var(--teal); border: 2px solid var(--teal); }
.mr-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--navy); opacity: .7; }
.mr-st { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--teal); } .mr-st:empty { display: none; }
.mr-g { border-top: 1px solid rgba(16, 42, 58, .1); padding: 10px 0 4px; }
.mr-gh { display: flex; align-items: center; gap: 10px; } .mr-gt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-gt b { font-size: 16px; color: var(--navy); text-align: start; } .mr-gt small { font-size: 13px; color: var(--teal); font-weight: 700; }
.mr-sp { flex: none; }
.mr-fl { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; } .mr-fl .ic { width: 16px; height: 16px; }
.mr-g .mr-l li { border-top: 0; padding: 6px 0; }
.mr-a .btn { white-space: nowrap; font-size: 15px; padding: 0 10px; gap: 6px; }
.mr-l li { gap: 8px; } .mr-p { width: 38px; height: 38px; } .mr-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr-sc { min-width: 44px; font-size: 14px; }

/* v18.56 trop chart: Record & Compare for תלישא קטנה / גדולה */

/* v18.56 desktop / PC: wider page, two columns, less scrolling (phone layout untouched) */
.fp-l, .fp-r { display: contents; }
@media (min-width: 1000px) {
  body:is([data-screen=home], [data-screen=library], [data-screen=player], [data-screen=practice]) { max-width: 1180px; }
  body:is([data-screen=home], [data-screen=library], [data-screen=player], [data-screen=practice]) #app { padding-left: 28px; padding-right: 28px; }
  #tabbar { border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; }
  body[data-screen=home] #app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  body[data-screen=home] #app > :is(.brand-banner, .hello, .nudge, .foot) { grid-column: 1 / -1; }
  .cats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  body[data-screen=library] .list { columns: 2; column-gap: 0; }
  body[data-screen=library] .list > * { break-inside: avoid; }
  .fp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 36px; align-items: start; }
  .fp-l { display: block; position: sticky; top: 0; }
  .fp-r { display: block; padding-top: 58px; }
  .fp-r > :first-child { margin-top: 0; }
  body[data-screen=practice] #app:has(#tkp > *) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  body[data-screen=practice] #app:has(#tkp > *) > * { grid-column: 1; }
  body[data-screen=practice] #app:has(#tkp > *) > .sh { grid-column: 1 / -1; }
  body[data-screen=practice] #app #tkp { grid-column: 2; grid-row: 2 / span 8; position: sticky; top: 10px; max-height: calc(100vh - 110px); overflow: auto; border-radius: var(--r); }
  body[data-screen=practice] #tkp > .card { margin-top: 0; }
  body[data-screen=trop] { max-width: 1180px; }
  #tp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 24px; align-items: start; }
  #tp > :is(.tp-head, .tp-lead) { grid-column: 1 / -1; }
}

/* (v18.61) טעמי המקרא flash cards (#/trop/cards) + the entry on #/trop */
.tp-fcgo { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; min-height: 64px; border-radius: var(--r); background: #0F6B5B; color: #FAF7EF; box-shadow: 0 6px 16px rgba(15, 107, 91, .22); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tp-fcgo:active { transform: scale(.99); }
.tp-fcgo-ic { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.tp-fcgo-ic i { position: absolute; width: 22px; height: 28px; border-radius: 5px; border: 2px solid #FAF7EF; background: #0F6B5B; }
.tp-fcgo-ic i:first-child { left: 2px; top: 4px; transform: rotate(-12deg); border-color: #B8872E; }
.tp-fcgo-ic i:last-child { left: 10px; top: 2px; transform: rotate(8deg); }
.tp-fcgo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-fcgo-t b { font-size: 18px; font-weight: 800; }
.tp-fcgo-t small { font-size: 13.5px; opacity: .88; }
.tp-fcgo .ic { width: 22px; height: 22px; flex-shrink: 0; }
#fc { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.fc-top { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.fc-n { font-size: 17px; font-weight: 800; color: #102A3A; font-variant-numeric: tabular-nums; }
.fc-hint { font-size: 13.5px; color: var(--muted); }
.fc { perspective: 1400px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fc-in { position: relative; height: clamp(300px, 52vh, 440px); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.fc.flip .fc-in { transform: rotateY(180deg); }
.fc.fc-new .fc-in { animation: fcnew .35s ease; }
@keyframes fcnew { 0% { transform: translateY(8px) scale(.97); opacity: .4; } 100% { transform: none; opacity: 1; } }
.fc-f, .fc-b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-top: 5px solid #B8872E; overflow: hidden; }
.fc-b { transform: rotateY(180deg); background: #FFFDF8; border-top-color: #0F6B5B; }
.fc:focus-visible .fc-f, .fc:focus-visible .fc-b { outline: 3px solid #0F6B5B; outline-offset: 2px; }
.fc-w { font-family: "Taamey Frank CLM", "Keter YG", var(--heb); font-size: clamp(76px, 24vw, 128px); line-height: 1.6; color: #102A3A; white-space: nowrap; direction: rtl; }
.fc-dim { color: #102A3A; opacity: .28; }
.fc-w.two { font-size: clamp(60px, 18vw, 112px); }
.fc-f small { font-size: 15px; color: var(--muted); font-weight: 600; }
.fc-nm { font-family: "Taamey Frank CLM", "Keter YG", var(--heb); font-size: clamp(54px, 15vw, 88px); line-height: 1.5; color: #102A3A; text-align: center; direction: rtl; }
.fc-en { font-size: 20px; font-weight: 700; color: #0F6B5B; letter-spacing: .01em; }
.fc-pl { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; margin-top: 4px; border-radius: 24px; border: 0; background: rgba(15, 107, 91, .1); color: #0F6B5B; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.fc-pl .ic { width: 20px; height: 20px; }
.fc-ctl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fc-ctl .btn { min-height: 58px; padding: 0 8px; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; }
.fc-ctl .btn .ic { width: 20px; height: 20px; }
.fc-ctl .btn:disabled { opacity: .4; cursor: default; }
.fc-shuf { background: #FAF7EF; color: #102A3A; box-shadow: inset 0 0 0 2px #B8872E; }
.fc-shuf .ic { color: #B8872E; }
.fc-sw { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .fc-sw { display: none; } }
@media (min-width: 1000px) { #tp > .tp-fcgo { grid-column: 1 / -1; max-width: 560px; } body[data-screen=trop]:has(#fc) { max-width: 720px; } }
/* (v18.62) flash cards = symbol + name only (like the PDF), no flip, tap = hear it; Library bar under the trop bar */
.lib-fc { margin-top: 10px; }
.lib-fc-ic { position: relative; padding: 0; }
.lib-fc-ic i { position: absolute; width: 17px; height: 22px; border-radius: 4px; border: 2px solid var(--teal); background: var(--teal-t); }
.lib-fc-ic i:first-child { left: 9px; top: 12px; transform: rotate(-12deg); border-color: #B8872E; }
.lib-fc-ic i:last-child { left: 17px; top: 9px; transform: rotate(8deg); }
.fc-in { transform: none; transition: none; }
.fc-f { gap: 4px; padding: 16px 14px 18px; }
.fc:active .fc-f { background: #FFFDF8; }
.fc-face { flex: 1; min-height: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.fc-sym { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; width: 100%; }
.fc-sv { width: 100%; height: 100%; max-height: 360px; overflow: visible; display: block; }
.fc-sv text { font-family: "Taamey Frank CLM"; font-size: 2048px; fill: #102A3A; }
.fc-face .fc-nm { font-size: clamp(46px, 13vw, 80px); line-height: 1.45; max-width: 100%; }
.fc-pl { position: absolute; top: 10px; left: 10px; width: 48px; height: 48px; min-height: 0; padding: 0; margin: 0; justify-content: center; border-radius: 50%; font-size: 22px; }

/* (v18.65) Miketz "A rare Haftorah" box: gold accent */
.bmh.rare-h { border: 1px solid #E8D5AE; border-left: 4px solid var(--gold); background: #FFFBF3; padding: 14px 16px; }
.rare-h p { margin: 0 0 .6em; font-size: 14px; line-height: 1.5; color: var(--navy); }
.rare-k { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.rare-k bdi { font-size: 15px; letter-spacing: 0; text-transform: none; }
.rare-h .rare-he { font-size: 15px; color: var(--muted); }
.rare-next { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: #FBF4E6; display: flex; flex-direction: column; gap: 2px; }
.rare-next small { font-size: 12px; color: var(--muted); } .rare-next b { font-size: 17px; color: var(--gold); } .rare-next span { font-size: 15px; color: var(--navy); }
.rare-next em { font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.rare-h .rare-rec { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--muted); }
.rare-h .rare-rec .ic { flex: none; width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }
.rare-h .rare-il { margin: 0; font-size: 13px; color: var(--muted); }

/* (v18.71) מלעיל marker: a gold line under the stressed syllable, below the nekudos and trop */
.ml { background: linear-gradient(#B8872E, #B8872E) no-repeat 50% 100% / 100% calc(1px + .05em); padding-bottom: .12em; }
.ml-off .ml:not(.ml-s) { background: none; } .ml-off .ml-key { display: none; }
.ml-key { margin: 6px 2px 0; font-size: 13px; color: var(--muted); } .ml-key b, .set .fine b { font: 400 20px "Keter YG", var(--heb); color: var(--navy); margin: 0 4px; }