/* Noble Vine Study & Discipleship · 2.2.0 · all styles */
@font-face { font-family: 'Lora'; src: url('lora.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('lora-italic.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #F7F7F2; --panel: #FFFFFF; --ink: #1F2A22; --soft: #5B665D; --rule: #D9DDD3;
  --accent: #3F5634; --accent-ink: #FFFFFF; --name: #8A6420; --sel: rgba(63,86,52,.13); --hit: rgba(154,116,48,.25);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --heb: 'Frank Ruhl Libre', 'Times New Roman', 'David', serif;
  --size: 19px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D0B; --panel: #151915; --ink: #ECEDE6; --soft: #9AA396; --rule: #283026;
    --accent: #A9C596; --accent-ink: #0B0D0B; --name: #E2C27D; --sel: rgba(169,197,150,.16); --hit: rgba(226,194,125,.28);
  }
}
:root[data-theme="dark"] {
  --bg: #0B0D0B; --panel: #151915; --ink: #ECEDE6; --soft: #9AA396; --rule: #283026;
  --accent: #A9C596; --accent-ink: #0B0D0B; --name: #E2C27D; --sel: rgba(169,197,150,.16); --hit: rgba(226,194,125,.28);
}
*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 4.5rem); }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.bar { transition: transform .25s ease; }
.bar.away { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
.bar-in { max-width: 46rem; margin: 0 auto; display: flex; gap: .5rem; align-items: center; padding: .55rem .8rem; }
.refbtn {
  flex: none; background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: .4rem .85rem; font-weight: 500; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.search { flex: 1; min-width: 0; position: relative; }
.search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); border-radius: 999px; padding: .45rem 2rem .45rem .95rem;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search .x { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--soft); padding: .3rem .5rem; font-size: 1.1rem; line-height: 1; }
.iconbtn { flex: none; background: none; border: 0; padding: .4rem .45rem; color: var(--soft); font-size: 1.35rem; line-height: 1; border-radius: 8px; }

main { max-width: 46rem; margin: 0 auto; padding: 1.2rem 1.1rem 7rem; }

/* ---------- reading ---------- */
.ch-title { font-weight: 400; font-size: 2rem; margin: .6rem 0 .2rem; letter-spacing: .01em; }
.ch-sub { color: var(--soft); font-size: .85rem; margin: 0 0 1.4rem; }
.text { font-size: var(--size); line-height: 1.85; }
.text p { margin: 0 0 .9em; }
.shead { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 1.6em 0 .5em; font-weight: 600; font-family: var(--serif); }
.v { border-radius: 4px; transition: background-color .25s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v.sel { background: var(--sel); box-shadow: inset 0 -2px 0 var(--accent); }
.v.flash { background: var(--hit); }
.vn { font-size: .58em; font-weight: 600; color: var(--accent); vertical-align: super; line-height: 0; margin: 0 .18em 0 .1em; font-family: var(--serif); }
.nm { color: var(--name); }
.heb { font-family: var(--heb); font-size: 1.1em; font-weight: 500; unicode-bidi: isolate; }
.chnav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.chnav button { background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .55rem .9rem; color: var(--ink); }
.chnav button[disabled] { opacity: .35; cursor: default; }

.empty { text-align: center; padding: 3rem .5rem; }
.empty .mark { font-family: var(--heb); font-size: 4rem; color: var(--name); line-height: 1; direction: rtl; }
.empty h2 { font-weight: 400; font-size: 1.6rem; margin: 1rem 0 .4rem; }
.empty p { color: var(--soft); margin: 0 auto 1.4rem; max-width: 28rem; }
.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 8px; padding: .65rem 1.2rem; font-weight: 500; }
.quiet { background: none; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: .65rem 1.2rem; }

/* ---------- search results ---------- */
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.res-head .count { color: var(--soft); font-size: .92rem; }
.scope { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip { background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .25rem .75rem; font-size: .85rem; color: var(--soft); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.goto { display: block; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; color: var(--ink); }
.goto b { color: var(--accent); font-weight: 600; }
.hit { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: .8rem .1rem; color: var(--ink); }
.hit .ref { font-size: .8rem; font-weight: 600; color: var(--accent); letter-spacing: .04em; display: block; margin-bottom: .15rem; }
.hit .t { font-size: 1.02rem; line-height: 1.6; }
mark { background: var(--hit); color: inherit; border-radius: 3px; padding: 0 .08em; }
.more { margin: 1.2rem auto; display: block; }
.hint { color: var(--soft); font-size: .88rem; }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--panel); color: var(--ink);
  border-radius: 16px 16px 0 0; max-height: 88%; overflow: auto; overscroll-behavior: contain;
  padding: 0 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  max-width: 46rem; margin: 0 auto; border: 1px solid var(--rule); border-bottom: 0;
}
.sheet-head { position: sticky; top: 0; background: var(--panel); display: flex; justify-content: space-between; align-items: center; padding: 1rem 0 .7rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; z-index: 1; }
.sheet-head h2 { margin: 0; font-weight: 500; font-size: 1.15rem; }
.sheet-head button { background: none; border: 0; color: var(--accent); font-weight: 500; padding: .3rem 0 .3rem .8rem; }
.grp { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 1.1rem 0 .5rem; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; }
.book { text-align: left; background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .65rem; color: var(--soft); font-size: .93rem; }
.book.has { color: var(--ink); border-color: var(--accent); }
.book.cur { background: var(--sel); }
.chaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .4rem; }
.chap { background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .55rem 0; color: var(--soft); font-variant-numeric: tabular-nums; }
.chap.has { color: var(--ink); border-color: var(--accent); }
.chap.cur { background: var(--accent); color: var(--accent-ink); }
.backlink { background: none; border: 0; color: var(--accent); padding: 0; margin-bottom: .6rem; }

.field { display: block; margin: 0 0 1rem; }
.field > span { display: block; font-size: .85rem; color: var(--soft); margin-bottom: .3rem; }
.field select, .field input, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 8px; padding: .55rem .7rem;
}
textarea { min-height: 12rem; resize: vertical; line-height: 1.5; }
.row3 { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem; gap: .6rem; }
.detect { margin: -.4rem 0 1rem; font-size: .9rem; color: var(--accent); min-height: 1.3em; }
.detect.warn { color: var(--name); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .6rem; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button { background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .85rem; color: var(--ink); }
.seg button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0; cursor: pointer; }
.check input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.set { padding: .2rem 0 1rem; border-bottom: 1px dashed var(--rule); margin-bottom: 1rem; }
.set:last-child { border-bottom: 0; }
.set-t { font-size: .92rem; margin-bottom: .5rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.preview { margin-top: 1rem; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.pv { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); font-size: .93rem; }
.pv:last-child { border-bottom: 0; }
.pv .warn { color: var(--name); }
.pv .ok { color: var(--accent); }
.status { font-size: .85rem; color: var(--soft); margin: .2rem 0 0; }
.danger { background: none; border: 1px solid var(--name); color: var(--name); border-radius: 8px; padding: .5rem .9rem; }

/* ---------- selection bar and toast ---------- */
.selbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; gap: .4rem; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: 999px;
  padding: .35rem .4rem .35rem 1rem; box-shadow: 0 6px 24px rgba(0,0,0,.35); max-width: calc(100% - 2rem);
}
.selbar .lbl { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selbar button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: .4rem .9rem; font-size: .9rem; white-space: nowrap; }
.selbar button.q { background: none; color: var(--soft); padding: .4rem .6rem; }
@media (max-width: 560px) { .selbar { flex-wrap: wrap; justify-content: center; row-gap: .4rem; border-radius: 18px; width: calc(100% - 2rem); padding: .45rem .5rem; } .selbar .lbl { flex: 1 0 100%; text-align: center; } .selbar button { padding: .4rem .75rem; font-size: .86rem; } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--ink); color: var(--bg); padding: .5rem 1rem; border-radius: 8px; font-size: .9rem; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100% - 2rem); text-align: center; }
.toast.show { opacity: 1; }
.todaybtn { flex: none; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 999px; padding: .4rem .8rem; font-weight: 500; font-size: .92rem; white-space: nowrap; }
.todaybtn.plain { background: none; color: var(--accent); }
.planbar { display: flex; align-items: center; gap: .6rem; background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; padding: .55rem .6rem .55rem .85rem; margin: 0 0 1rem; font-size: .9rem; }
.planbar .pb-t { flex: 1; min-width: 0; }
.planbar .pb-t b { font-weight: 600; color: var(--accent); }
.planbar .pb-t span { color: var(--soft); display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planbar button { background: none; border: 0; color: var(--accent); padding: .3rem .4rem; font-size: .88rem; }
.daychips { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.4rem 0 1.2rem; }
.daychip { border: 1px solid var(--rule); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; color: var(--soft); background: none; }
.daychip.done { border-color: var(--accent); color: var(--accent); }
.daychip.now { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plannav { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: .6rem; }
.plannav .row { display: flex; justify-content: space-between; gap: .8rem; }
.plannav .row button { background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .55rem .9rem; color: var(--ink); }
.plannav .row button[disabled] { opacity: .35; }
.plannav .big { width: 100%; padding: .8rem 1rem; font-size: 1.02rem; }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1rem .9rem; margin: 0 0 1rem; }
.card h3 { margin: 0 0 .25rem; font-weight: 500; font-size: 1.1rem; }
.card p { margin: .2rem 0; }
.opt-card { display: block; width: 100%; text-align: left; background: none; border: 1px solid var(--rule); border-radius: 12px; padding: .8rem .95rem; margin-bottom: .6rem; color: var(--ink); }
.opt-card b { display: block; font-weight: 500; margin-bottom: .15rem; }
.opt-card span { color: var(--soft); font-size: .88rem; }
.opt-card.on { border-color: var(--accent); background: var(--sel); }
.bigstat { font-size: 1.7rem; font-weight: 400; margin: 0; line-height: 1.2; }
.hebbtn { background: none; border: 1px solid var(--rule); color: var(--accent); border-radius: 999px; padding: .25rem .8rem; font-size: .88rem; margin: -.8rem 0 1.2rem; }
.ilbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ilbar .sp { flex: 1; }
.ilbar button { background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: 999px; padding: .25rem .75rem; font-size: .82rem; }
.ilbar button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ilv { display: flex; flex-wrap: wrap; direction: rtl; gap: .9rem .35rem; margin: 0 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.ilv.flash { background: var(--hit); border-radius: 8px; }
.ilv .vno { direction: ltr; align-self: center; color: var(--accent); font-weight: 600; font-size: .95rem; padding: 0 .2rem; }
.iw { direction: ltr; background: none; border: 0; border-radius: 8px; padding: .25rem .3rem; text-align: center; color: var(--ink); min-width: 3.4rem; }
.iw:active, .iw.sel { background: var(--sel); }
.iw .h { display: block; direction: rtl; font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: calc(var(--size) * 1.45); line-height: 1.35; }
.iw .t { display: block; font-size: .78rem; color: var(--soft); margin-top: .1rem; }
.iw .g { display: block; font-size: .86rem; font-style: italic; margin-top: .1rem; }
.iw .m { display: block; font-size: .72rem; color: var(--name); margin-top: .1rem; }
.wsh { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.wsh .hw { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: 2.3rem; line-height: 1.1; direction: rtl; }
.wrow { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.wrow span:first-child { color: var(--soft); flex: none; }
.wrow span:last-child { text-align: right; }
.wdef { font-size: .9rem; color: var(--soft); white-space: pre-line; margin: .6rem 0; }
.refchips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .8rem; }
.refchips button { background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; color: var(--accent); }
.cmpv { border-top: 1px solid var(--rule); padding: .8rem 0 .9rem; }
.cmpv.flash { background: var(--hit); border-radius: 8px; }
.cmpv .vno { color: var(--accent); font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.cmpr { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .6rem; padding: .25rem 0; align-items: baseline; }
.cmpr .lbl { font-size: .75rem; letter-spacing: .04em; color: var(--soft); font-weight: 600; }
.cmpr .txt { line-height: 1.55; }
.cmpr .txt.miss { color: var(--soft); font-style: italic; font-size: .9rem; }
.cmph { width: 100%; text-align: right; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .7rem; margin-top: .35rem; color: var(--ink); }
.cmph .hh { display: block; direction: rtl; font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: calc(var(--size) * 1.25); line-height: 1.5; }
.cmph .ws { display: flex; flex-wrap: wrap; direction: rtl; gap: .55rem .5rem; }
.cmph .cw { direction: ltr; text-align: center; min-width: 3rem; }
.cmph .cw .h { display: block; direction: rtl; font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: calc(var(--size) * 1.2); line-height: 1.35; }
.cmph .cw .t { display: block; font-size: .8rem; color: var(--accent); margin-top: .05rem; }
.cmph .cw .g { display: block; font-size: .78rem; font-style: italic; color: var(--soft); }
.cmph .tap { display: block; text-align: left; font-size: .72rem; color: var(--soft); margin-top: .4rem; }
.cmph .ll { display: block; text-align: left; font-size: .85rem; font-style: italic; color: var(--soft); margin-top: .2rem; }
.mcat { margin-bottom: .45rem; }
.mhead { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: .75rem .9rem; color: var(--ink); }
.mcat.open .mhead { border-color: var(--accent); }
.mhead .ic { font-size: 1.15rem; width: 1.5rem; text-align: center; color: var(--soft); }
.mhead .tx { flex: 1; }
.mhead .nm2 { display: block; font-size: 1rem; }
.mhead .ds { display: block; font-size: .8rem; color: var(--soft); }
.mhead .cv { color: var(--soft); transition: transform .15s; }
.mcat.open .mhead .cv { transform: rotate(90deg); }
.msub { margin: .2rem 0 .5rem 2.6rem; }
.msub button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: .65rem .2rem; color: var(--ink); font-size: .98rem; }
.msub button:last-child { border-bottom: 0; }
.memsteps { display: flex; gap: 4px; margin: .7rem 0 .2rem; }
.memsteps i { flex: 1; height: 5px; border-radius: 3px; background: var(--rule); }
.memsteps i.dn { background: var(--accent); }
.memsl { display: flex; justify-content: space-between; font-size: .72rem; color: var(--soft); }
.memtext { font-size: calc(var(--size) * 1.08); line-height: 1.75; margin: .8rem 0 1rem; }
.memtext.he { direction: rtl; text-align: right; font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: calc(var(--size) * 1.45); line-height: 1.8; }
.memw { display: inline-block; }
.memw.gap { min-width: 2.6em; border-bottom: 2px solid var(--soft); color: transparent; }
.memw.gap.peek { color: var(--soft); border-bottom-color: transparent; }
.memw.ok { color: var(--accent); }
.memw.bad { color: var(--name); text-decoration: underline; }
.memw.todo { color: var(--soft); opacity: .45; }
.memtext .speaking .memw, .memtext .speaking.memw { background: var(--sel); border-radius: 4px; }
.memhw { display: inline-flex; flex-direction: column; align-items: center; margin: 0 .25rem .4rem; vertical-align: top; }
.memhw .s { font-family: 'Lora', serif; font-size: .78rem; color: var(--accent); }
.memslot { display: inline-block; min-width: 3.4rem; height: 2.2rem; border-bottom: 2px dashed var(--soft); margin: 0 .25rem; vertical-align: top; }
.memtiles { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .6rem 0 1rem; }
.memtiles button { direction: rtl; font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: calc(var(--size) * 1.35); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: .35rem 1rem; color: var(--ink); }
.memtiles button.wrong { border-color: var(--name); opacity: .5; }
.memtype { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cmnav { display: flex; justify-content: space-between; align-items: center; margin: -.2rem 0 .7rem; }
.cmnav button { background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem; color: var(--ink); font-size: .85rem; }
.cmbody p { margin: 0 0 .8rem; line-height: 1.6; }
.cmbody .heb { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; }
.cmlinks a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: .95rem; }
.cmlinks a span:last-child { color: var(--soft); font-size: .82rem; text-align: right; }
.cmtog { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.cmtog small { display: block; color: var(--soft); font-size: .8rem; }
.cmtog input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent); flex: none; }
.cvhead { display: flex; justify-content: space-between; align-items: baseline; }
.cvhead button { background: none; border: 0; color: var(--accent); font-size: .82rem; padding: 0; }
.tn { line-height: 1.65; }
.tn h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.tn h3 { font-size: 1.02rem; margin: 1.3rem 0 .4rem; }
.tn p { margin: 0 0 .8rem; }
.tn ul, .tn ol { margin: 0 0 .9rem; padding-left: 1.3rem; }
.tn li { margin-bottom: .4rem; }
.tn table { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; font-size: .92rem; }
.tn th, .tn td { border-bottom: 1px solid var(--rule); padding: .45rem .4rem; text-align: left; vertical-align: top; }
.tn th { color: var(--soft); font-weight: 600; font-size: .8rem; }
.tn .heb, .tn td:nth-child(2) { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; }
.tn a.vref { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; }
.tn[contenteditable="true"] { outline: 1px dashed var(--rule); border-radius: 8px; padding: .6rem; min-height: 40vh; }
@media (max-width: 640px) {
  .tn table, .tn tbody, .tn tr, .tn td { display: block; width: 100%; }
  .tn thead { display: none; }
  .tn tr { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .55rem; }
  .tn td { border: 0; padding: .12rem 0; }
  .tn td:empty { display: none; }
  .tn td[data-l]::before { content: attr(data-l); display: block; font-size: .7rem; color: var(--soft); letter-spacing: .03em; }
  .tn td:nth-child(2) { font-size: 1.35rem; }
}
.tnbar { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; position: sticky; top: 0; background: var(--bg); padding: .3rem 0; z-index: 2; }
.tnbar button { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: .3rem .7rem; color: var(--ink); font-size: .85rem; }
.greet { font-size: 1.35rem; margin: 0 0 .15rem; }
.greet-d { color: var(--soft); font-size: .85rem; margin: 0 0 1rem; }
.votd { position: relative; border-radius: 16px; overflow: hidden; min-height: 19rem; margin: 0 0 1rem; background: #23301f center / cover no-repeat; color: #fff; display: flex; flex-direction: column; }
.votd::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.6) 100%); }
.votd > * { position: relative; }
.votd-in { padding: 1.2rem 1.25rem 0; flex: 1; }
.votd-l { font-size: .82rem; opacity: .92; margin: 0; }
.votd-r { font-size: 1.05rem; font-weight: 600; margin: .15rem 0 1rem; }
.votd-t { font-size: 1.42rem; line-height: 1.42; margin: 0 0 1rem; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.votd-t .nm, .votd-t .heb { color: #F4D88E; }
.votd-a { display: flex; gap: .5rem; padding: 0 1.25rem 1.1rem; flex-wrap: wrap; }
.votd-a button { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); color: #fff; border-radius: 999px; padding: .45rem 1rem; font-size: .9rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.picgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .8rem 0 1rem; }
.picgrid div { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--rule); }
.picgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picgrid button { position: absolute; top: .3rem; right: .3rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1rem; line-height: 1; }
.bkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .35rem; }
.bkgrid button { background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .4rem .3rem; color: var(--ink); font-size: .85rem; }
.bkgrid button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tc-l { font-size: .8rem; color: var(--soft); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tc-l button { background: none; border: 0; padding: .2rem 0; color: var(--accent); font-size: .85rem; }
.tc-r { color: var(--ink); }
.meter { height: 6px; background: var(--rule); border-radius: 99px; overflow: hidden; margin: .7rem 0 .4rem; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.15rem, 1fr)); gap: .3rem; }
.day { aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 6px; background: none; color: var(--soft); font-size: .72rem; padding: 0; font-variant-numeric: tabular-nums; }
.day.done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.day.miss { border-color: var(--name); color: var(--name); }
.day.today { box-shadow: 0 0 0 2px var(--ink) inset; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8rem; color: var(--soft); margin: .6rem 0 0; }
.legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid var(--rule); vertical-align: -1px; margin-right: .3rem; }
.dl-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.dl-item:last-child { border-bottom: 0; }
.dl-item .nm2 { flex: 1; }
.dl-item .nm2 small { display: block; color: var(--soft); font-size: .78rem; }
.dl-item input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.dl-item button { background: none; border: 1px solid var(--rule); border-radius: 8px; padding: .3rem .7rem; color: var(--accent); font-size: .88rem; }
.nmark { display: inline-block; background: none; border: 0; padding: .15em .3em; margin: -.3em 0 -.3em -.1em; color: var(--name); font-size: .75em; vertical-align: .4em; line-height: 1; cursor: pointer; }
.v.noted { text-decoration: underline dotted var(--name); text-underline-offset: .28em; text-decoration-thickness: 1px; }
.quote { border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .8rem; color: var(--soft); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; max-height: 9.5rem; overflow: auto; }
.nsec { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 1.2rem 0 .3rem; }
.loading { text-align: center; color: var(--soft); padding: 4rem 0; }
@media (prefers-reduced-motion: reduce) { .v, .toast { transition: none; } }
/* ---- Home v2: clean dark, torn paper ---- */
#home { background: #0b0c0a; }
.h2in { position: relative; max-width: 40rem; margin: 0 auto; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + 1.3rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 6.4rem);
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; color: #f3f1ea; }
.h2he { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: .85rem; opacity: .75; }
.h2gr { font-size: 1.95rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: .15rem; }
.h2dt { font-size: .82rem; opacity: .6; margin-top: .2rem; }
.h2sec { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; margin: 1.5rem .2rem .65rem; display: flex; justify-content: space-between; align-items: baseline; }
.h2sec small { font-size: .75rem; font-weight: 500; opacity: .55; }
.pc { position: relative; display: block; width: 100%; text-align: left; border: 0; padding: 0; color: inherit; font: inherit; border-radius: 22px; overflow: hidden; background: #1c1c1e;
  touch-action: pan-y; transition: transform .3s ease, opacity .3s ease; margin-bottom: .75rem; cursor: pointer; }
.pc.gone { transform: translateX(-110%) !important; opacity: 0; }
.pc .art { display: block; width: 100%; height: 9rem; }
.pc .art svg { display: block; width: 100%; height: 100%; }
.pc .bd { padding: .85rem 1rem 1rem; }
.pc .k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.pc .t { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: .2rem 0 .25rem; line-height: 1.15; }
.pc .s { display: block; font-size: .88rem; opacity: .82; line-height: 1.35; }
.pc .vs { font-family: Lora, Georgia, serif; font-size: 1.12rem; line-height: 1.45; }
.pc .vs .nm, .pc .vs .heb { color: #F4D88E; }
.pc .x { position: absolute; top: .6rem; right: .6rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: .8rem; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.pgrid .pc { margin: 0; }
.pgrid .pc .art { height: 5.3rem; }
.pgrid .pc .bd { padding: .65rem .75rem .8rem; }
.pgrid .pc .t { font-size: 1.05rem; }
.pgrid .pc .s { font-size: .78rem; }
.pgrid .pc .k { font-size: .6rem; }
.pgrid .pc.wide { grid-column: 1 / -1; }
.pc.slim .art { height: 4.2rem; }
.fdeck { position: relative; height: 7.4rem; }
.fdk { position: absolute; left: 0; right: 0; top: 0; height: 6.3rem; border-radius: 20px; padding: .85rem 1rem; box-sizing: border-box; touch-action: pan-y; text-align: left; color: inherit; font: inherit;
  transition: transform .35s ease, opacity .35s ease; background: #2a2410; border: 1px solid rgba(233,196,106,.35); cursor: pointer; }
.fdk .k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #e9c46a; }
.fdk .t { display: block; font-size: 1.15rem; font-weight: 700; margin: .2rem 0 .1rem; }
.fdk .s { display: block; font-size: .8rem; opacity: .75; }
.fdk .x { position: absolute; top: .55rem; right: .55rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: .8rem; }
.fdk.gone { transform: translateX(-115%) rotate(-6deg) !important; opacity: 0; }
.fempty { position: absolute; inset: 0 0 1.1rem; border-radius: 20px; border: 1px dashed rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: .82rem; opacity: .6; }
.hundo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); z-index: 40; background: #f3f1ea; color: #111; border-radius: 999px; padding: .5rem .9rem; font-size: .85rem; display: flex; gap: .8rem; align-items: center; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; }
.hundo button { background: none; border: 0; font-weight: 700; color: #3d5a2a; font-size: .85rem; }
#wordpage { position: fixed; inset: 0; z-index: 60; color: #fff; background: #23301f center / cover no-repeat; display: flex; flex-direction: column; }
#wordpage.hidden { display: none; }
#wordpage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.6) 100%); }
#wordpage > * { position: relative; }
.wp-top { display: flex; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + .9rem) 1rem 0; }
.wp-btn { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; font-size: 1rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wp-in { margin-top: auto; padding: 0 1.4rem calc(env(safe-area-inset-bottom, 0px) + 2rem); max-width: 40rem; width: 100%; box-sizing: border-box; align-self: center; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; }
.wp-lab { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.wp-ref { font-size: 1.05rem; font-weight: 600; margin: .25rem 0 .7rem; }
.wp-vs { font-family: Lora, Georgia, serif; font-size: 1.85rem; line-height: 1.35; text-shadow: 0 2px 18px rgba(0,0,0,.55); margin: 0 0 1.2rem; }
.wp-vs .nm, .wp-vs .heb { color: #F4D88E; }
.wp-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wp-acts button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: .5rem 1rem; font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .6rem 0 1rem; }
.pp-grid button { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #23301f center / cover no-repeat; }
.pp-grid button.on { border-color: var(--accent); }
.pp-grid button span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .7rem; padding: .2rem; background: rgba(0,0,0,.5); color: #fff; }
/* ---- Alphabet flip cards ---- */
.fc { perspective: 1200px; height: min(56vh, 25rem); margin: .4rem 0 .8rem; cursor: pointer; }
.fc-in { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.fc.flip .fc-in { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 22px; border: 1px solid var(--rule);
  background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.2rem; box-sizing: border-box; text-align: center; }
.fc-back { transform: rotateY(180deg); }
.fc-big { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: min(10rem, 28vh); line-height: 1; }
.fc-fin { font-size: .9rem; color: var(--soft); margin-top: .6rem; }
.fc-fin b { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: 1.6rem; font-weight: 400; color: var(--ink); }
.fc-name { font-size: 2rem; }
.fc-gl { font-style: italic; color: var(--soft); }
.fc-strip { display: flex; gap: .5rem; justify-content: center; align-items: flex-end; color: var(--accent); margin: .9rem 0 .5rem; }
.fc-strip figure { margin: 0; flex: 1; }
.fc-strip figcaption { font-size: .7rem; color: var(--soft); }
.fc-blk { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: 2.9rem; line-height: 56px; height: 56px; color: var(--ink); }
.fc-kw { font-style: italic; margin-top: .3rem; }
.fc-tip { position: absolute; bottom: .9rem; left: 0; right: 0; font-size: .78rem; color: var(--soft); }
.fc-bar { height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; margin: .3rem 0 .2rem; }
.fc-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
@media (prefers-reduced-motion: reduce) { .fc-in { transition: none; } }
/* ---- Your voice ---- */
.recbig { width: 5rem; height: 5rem; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); background: #c0392b; display: block; margin: 1rem auto .4rem; box-shadow: 0 0 0 0 rgba(192,57,43,.5); }
.recbig.on { border-radius: 1.2rem; transform: scale(.82); animation: recpulse 1.4s ease-out infinite; }
@keyframes recpulse { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,.55); } 100% { box-shadow: 0 0 0 1.3rem rgba(192,57,43,0); } }
.rectime { text-align: center; font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--soft); }
.prompter { font-size: calc(var(--size) * 1.12); line-height: 1.75; max-height: 46vh; overflow-y: auto; padding: .6rem .2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prompter.he { direction: rtl; text-align: right; font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: calc(var(--size) * 1.4); }
.mine { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; opacity: .85; }
.hrec { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* ---- Home, glass tab bar, orb, Selah ---- */
#todayBtn, #menuBtn { display: none; }
body.home header.bar, body.home main, body.home #selbar { display: none !important; }
#home { position: fixed; inset: 0; z-index: 15; overflow-y: auto; -webkit-overflow-scrolling: touch; color: #fff; background: #0b0d0b; }
#home.hidden { display: none; }
.hbg { position: fixed; inset: 0; background: #23301f center / cover no-repeat; transition: opacity 1.6s ease; }
.hbg.drift { animation: hdrift 12s ease-in-out infinite alternate; }
@keyframes hdrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hbg.drift { animation: none; } }
.hbg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.35) 52%, rgba(11,13,11,.92) 78%, #0b0d0b 100%); }
.hin { position: relative; max-width: 40rem; margin: 0 auto; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 1.4rem) 1.3rem calc(env(safe-area-inset-bottom, 0px) + 6.2rem); }
.htop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.hhe { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: .95rem; letter-spacing: .04em; opacity: .9; }
.hgr { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; margin: .1rem 0 0; line-height: 1.15; }
.hdt { font-size: .85rem; opacity: .75; margin-top: .2rem; }
.hpic { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hword { margin-top: auto; padding-top: 18vh; }
.hlab { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.href { font-size: .95rem; font-weight: 600; margin: .2rem 0 .5rem; }
.hvs { font-size: 1.55rem; line-height: 1.38; text-shadow: 0 2px 16px rgba(0,0,0,.55); margin: 0; }
.hvs .nm, .hvs .heb { color: #F4D88E; }
.hlisten { display: inline-flex; align-items: center; gap: .65rem; background: none; border: 0; color: #fff; padding: .9rem 0 1.1rem; font-size: .92rem; }
.htiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ht { text-align: left; border-radius: 18px; padding: .8rem .85rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); min-height: 6.2rem; display: flex; flex-direction: column; gap: .15rem; }
.ht.wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: .8rem; }
.ht svg { width: 1.3rem; height: 1.3rem; opacity: .9; margin-bottom: .2rem; }
.ht .k { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.ht .t { font-size: 1.02rem; font-weight: 600; }
.ht .s { font-size: .78rem; opacity: .78; }
.ht:active { transform: scale(.98); }
.hfeast { margin-top: 1.1rem; display: grid; gap: .55rem; }
.hfb { text-align: left; width: 100%; border-radius: 18px; padding: .85rem .95rem; color: #FAEEDA; background: rgba(65,36,2,.62); border: 1px solid rgba(239,159,39,.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); display: flex; flex-direction: column; gap: .12rem; }
.hfb .k { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #FAC775; }
.hfb .t { font-size: 1.25rem; font-weight: 600; }
.hfb .s { font-size: .82rem; color: #EF9F27; }
.hfb .r { font-size: .8rem; margin-top: .35rem; opacity: .9; }
.hfb:active, .hfc:active { transform: scale(.98); }
.hfrow { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.hfc { flex: 1 0 8.5rem; text-align: left; border-radius: 14px; padding: .55rem .7rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; flex-direction: column; }
.hfc .t { font-size: .88rem; font-weight: 600; }
.hfc .s { font-size: .74rem; opacity: .75; }
.hflab { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: .2rem 0 -.1rem .2rem; }
#tabs { position: fixed; left: .7rem; right: .7rem; bottom: calc(env(safe-area-inset-bottom, 0px) + .55rem); z-index: 28; max-width: 30rem; margin: 0 auto; height: 3.7rem; border-radius: 1.85rem;
  display: flex; justify-content: space-around; align-items: center; background: rgba(20,24,20,.82); border: 1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .25s ease; }
html[data-theme="light"] #tabs { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); }
html[data-theme="light"] #tabs button { color: rgba(30,30,30,.65); }
html[data-theme="light"] #tabs button.on { color: #111; }
html[data-theme="light"] #tabs button.on svg { background: rgba(0,0,0,.07); }
body.home #tabs { background: rgba(24,28,24,.55); border-color: rgba(255,255,255,.13); }
body.home #tabs button { color: rgba(255,255,255,.72); }
body.home #tabs button.on { color: #fff; }
#tabs.away { transform: translateY(calc(100% + 1.5rem + env(safe-area-inset-bottom, 0px))); }
#tabs button { flex: 1; background: none; border: 0; color: rgba(255,255,255,.68); display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; padding: .2rem 0; }
#tabs button svg { width: 1.35rem; height: 1.35rem; padding: .18rem .8rem; border-radius: .9rem; box-sizing: content-box; }
#tabs button.on { color: #fff; }
#tabs button.on svg { background: rgba(255,255,255,.14); }
.selbar { bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px)) !important; }
.toast { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)) !important; }
.orb { width: 2.6rem; height: 2.6rem; border-radius: 50%; position: relative; flex: none; display: inline-block; }
.orb::before, .orb::after { content: ''; position: absolute; border-radius: 50%; }
.orb::before { inset: -2px; background: conic-gradient(from 0deg, #E9C46A, #8FB996, #3D5A80, #C77D9B, #E9C46A); filter: blur(6px); animation: orbspin 7s linear infinite; }
.orb::after { inset: 18%; background: radial-gradient(circle at 35% 30%, #fff 0%, rgba(255,255,255,.65) 22%, rgba(233,196,106,.55) 45%, rgba(61,90,128,.25) 70%, transparent 76%); filter: blur(1.5px); animation: orbbreathe 3.4s ease-in-out infinite; }
.orb.live::before { animation-duration: 2.2s; filter: blur(8px) brightness(1.25); }
.orb.live::after { animation-duration: 1.1s; }
.orb.sm { width: 1.7rem; height: 1.7rem; }
@keyframes orbspin { to { transform: rotate(360deg); } }
@keyframes orbbreathe { 0%, 100% { transform: scale(.82); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .orb::before, .orb::after { animation-duration: 20s; } }
.orbbtn { display: inline-flex !important; align-items: center; gap: .5rem; }
#selah { position: fixed; inset: 0; z-index: 70; color: #fff; display: flex; align-items: center; background: #3f3a38 center / cover no-repeat; opacity: 0; transition: opacity .8s ease; cursor: pointer; }
#selah.show { opacity: 1; }
#selah::before { content: ''; position: absolute; inset: 0; background: rgba(20,16,14,.45); }
#selah .sin { position: relative; padding: 0 1.8rem; max-width: 34rem; margin: 0 auto; }
#selah .sk { font-size: .78rem; letter-spacing: .24em; font-weight: 600; opacity: .9; }
#selah .st { font-size: 2.1rem; font-weight: 700; line-height: 1.18; margin: 1.2rem 0; letter-spacing: -.01em; }
#selah .sr { font-size: 1.05rem; opacity: .9; }
#selah .sh { font-family: 'Frank Ruhl Libre', 'Times New Roman', serif; font-size: 2.4rem; margin-top: 1.8rem; opacity: .95; }
#selah .stap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem); text-align: center; font-size: .85rem; opacity: .7; }
/* ---- RNB look: one colour per area, rounded cards, Lora for Scripture ---- */
:root { --c-clay: #E5946A; --c-gold: #D9B84E; --c-blue: #6FB0C2; --c-pom: #E68A8A; --c-purple: #B39AD3; --c-olive: #A3C184; --c-stone: #BDAAB1;
  --ui: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --panel2: #F1F1EC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B0C0A; --panel: #161816; --panel2: #1F221F; --rule: rgba(255,255,255,.08); --soft: #A9AAA2; --ink: #F3F1EA; --accent: #D9B84E; --accent-ink: #0B0C0A; } }
:root[data-theme="dark"] { --bg: #0B0C0A; --panel: #161816; --panel2: #1F221F; --rule: rgba(255,255,255,.08); --soft: #A9AAA2; --ink: #F3F1EA; --accent: #D9B84E; --accent-ink: #0B0C0A; }
:root[data-theme="light"] { --c-clay: #A9532A; --c-gold: #8A6A10; --c-blue: #2C6B7C; --c-pom: #AE3A3A; --c-purple: #6B4C9A; --c-olive: #4C6B2F; --c-stone: #6B5860; }
body { font-family: var(--ui); }
.text, .ch-title, .memtext:not(.he), .quote, .cmpr .txt, .hit .t, .votd-t, .cmbody, .prompter:not(.he), .tn, .wp-vs, .hvs { font-family: var(--serif); }
.ch-title { font-size: 2.35rem; }
.ch-sub { color: var(--c-clay); text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 600; }
.shead { color: var(--c-clay); }
.c-clay { --c: var(--c-clay); } .c-gold { --c: var(--c-gold); } .c-blue { --c: var(--c-blue); } .c-pom { --c: var(--c-pom); } .c-purple { --c: var(--c-purple); } .c-olive { --c: var(--c-olive); } .c-stone { --c: var(--c-stone); }
.dsc { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); }
.dsc-he { font-family: var(--heb); font-size: 22px; line-height: 1; color: var(--c); }
.sheet { border-radius: 22px 22px 0 0; }
.sheet-head h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; }
.card { border-radius: 22px; }
.sheet .card { background: var(--panel2); }
.primary, .quiet { border-radius: 14px; min-height: 44px; }
.mhero { border-radius: 22px; background: var(--panel2); border: 1px solid var(--rule); padding: 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mchips { display: flex; align-items: center; }
.mchip { border-radius: 50%; box-shadow: 0 0 0 3px var(--panel2); display: flex; }
.mhero-h { font-size: 1.15rem; font-weight: 600; }
.mhero-s { font-size: .9rem; color: var(--soft); line-height: 1.4; }
.mhero-b { width: 100%; min-height: 48px; border-radius: 14px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; }
.mlab { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin: 1.4rem .3rem .5rem; }
.mgrp { border-radius: 20px; background: var(--panel2); border: 1px solid var(--rule); overflow: hidden; }
.mrow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; background: none; border: 0; border-top: 1px solid var(--rule); color: var(--ink); text-align: left; }
.mgrp .mrow:first-child { border-top: 0; }
.mrow:active { background: var(--sel); }
.mrow-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mrow-h { font-size: 1.02rem; font-weight: 600; }
.mrow-s { font-size: .82rem; color: var(--soft); }
.mrow-c { color: var(--soft); display: flex; }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 136px; padding: 16px; border-radius: 22px; background: color-mix(in srgb, var(--c) 7%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); color: var(--ink); text-align: left; }
.stile b { font-size: 1.02rem; margin-top: auto; }
.stile .s { font-size: .82rem; color: var(--soft); line-height: 1.35; }
.hebbtn { --c: var(--c-stone); border-radius: 999px; min-height: 40px; padding: 0 14px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
#toHeb { --c: var(--c-blue); } #toCmp { --c: var(--c-olive); } #toVoice { --c: var(--c-clay); }
.selbar { border-radius: 20px; }
.selbar button:not(.q) { --c: var(--c-stone); background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); font-weight: 600; }
#selNote { --c: var(--c-purple); } #selMem { --c: var(--c-pom); } #selRec { --c: var(--c-clay); }
.cmpv { background: var(--panel); border: 1px solid var(--rule); border-radius: 22px; padding: 14px 16px; margin-bottom: 12px; }
.cmpr { grid-template-columns: 3.6rem minmax(0, 1fr); }
.cmpr .lbl { --c: var(--c-stone); justify-self: start; padding: 4px 8px; border-radius: 6px; font-size: .7rem; letter-spacing: .06em; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.cmpr .lbl[data-v="esv"] { --c: var(--c-gold); } .cmpr .lbl[data-v="web"] { --c: var(--c-blue); } .cmpr .lbl[data-v="asv"] { --c: var(--c-purple); }
.ilbar button[data-ver] { --c: var(--c-stone); min-height: 38px; }
.ilbar button[data-ver="esv"] { --c: var(--c-gold); } .ilbar button[data-ver="web"] { --c: var(--c-blue); } .ilbar button[data-ver="asv"] { --c: var(--c-purple); } .ilbar button[data-ver="heb"] { --c: var(--c-olive); }
.ilbar button[data-ver].on { background: var(--c); border-color: var(--c); color: var(--accent-ink); }
.cmph { background: var(--panel2); border-radius: 14px; }
.book, .chap { border-radius: 12px; }
:root:not([data-theme="light"]) #tabs { background: rgba(28,31,28,.92); }
/* ---- Noble Vine ---- */
#nvSplash { position: fixed; inset: 0; z-index: 200; background: #0B0C0A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; transition: opacity .6s ease; }
#nvSplash.gone { opacity: 0; pointer-events: none; }
#nvSplash .nvtag { text-align: center; font: 500 16px -apple-system, system-ui, sans-serif; letter-spacing: .02em; color: #C9C4B6; padding: 0 1.5rem; }
.nvtagline { text-align: center; font-size: .9rem; font-weight: 500; letter-spacing: .02em; color: var(--soft); margin-top: .8rem; }
.nvlock .nv-sp, .nvlock .nv-sb { color: #9DB49A; } .nvlock .nv-wm { color: #EFE9DA; }
:root[data-theme="light"] .sheet .nvlock .nv-sp, :root[data-theme="light"] .sheet .nvlock .nv-sb, :root[data-theme="light"] .sheet .nvlock .nv-wm { color: #6F8270; }
.nvlock { display: block; max-width: 100%; height: auto; }
.nvcard { margin-top: 1.6rem; border-radius: 22px; background: var(--panel2); border: 1px solid var(--rule); padding: 24px 18px 18px; display: flex; flex-direction: column; align-items: center; }
.nvverse { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; text-align: center; margin: 1.2rem .4rem .3rem; }
.h2in { position: relative; }
.h2in .h2he, .h2in .h2gr, .h2in .h2dt { padding-right: 52px; }
.h2brand { position: absolute; right: 1rem; top: calc(env(safe-area-inset-top, 0px) + 1.1rem); color: #9DB49A; }
.jall { background: none; border: 0; color: #9DB49A; font: inherit; font-size: .85rem; padding: .3rem 0; opacity: 1; }
.h2sec small:has(.jall) { opacity: 1; }
.jlist { border-radius: 22px; background: #1c1c1e; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.jlist .mrow { color: #f3f1ea; border-top-color: rgba(255,255,255,.08); }
.jlist .mrow:first-child { border-top: 0; }
.jlist .mrow-s { color: rgba(243,241,234,.65); }
.jempty { padding: 1rem 1.1rem; font-size: .9rem; opacity: .65; }
.jk { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.jd { font-size: .78rem; color: var(--soft); white-space: nowrap; }
.jlist .jd { color: rgba(243,241,234,.55); }
/* ---- Noble Vine Study & Discipleship ---- */
.nvmark { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.nvsd { font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: .3em; padding-left: .3em; color: #9DB49A; margin-top: .55rem; white-space: nowrap; }
:root[data-theme="light"] .sheet .nvsd { color: #6F8270; }
.nvfrom { text-align: center; font-size: .82rem; letter-spacing: .02em; color: var(--soft); margin-top: .9rem; }
#nvSplash .nvtag { font-weight: 400; font-size: 14px; color: #A9AAA2; }
.nvwhy { border-radius: 20px; background: var(--panel2); border: 1px solid var(--rule); padding: .4rem 1.1rem .6rem; line-height: 1.6; }
.nvwhy p { margin: .7rem 0; }
/* ---- More menu: folding sections ---- */
.mfold { margin-top: .7rem; border-radius: 20px; background: var(--panel2); border: 1px solid var(--rule); overflow: hidden; }
.mfold .mgrp { border: 0; border-radius: 0; background: none; border-top: 1px solid var(--rule); }
.mgrp-solo { margin-top: .7rem; }
.mgh { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 12px 16px; background: none; border: 0; color: var(--ink); text-align: left; }
.mgh:active { background: var(--sel); }
.mgh-t { font-size: 1.08rem; font-weight: 700; }
.mgh .mrow-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgdots { width: 40px; height: 40px; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 7px; box-sizing: border-box; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.mgdots i { border-radius: 50%; background: var(--c); }
.mgch { color: var(--soft); display: flex; transition: transform .2s ease; }
.mfold.open .mgch { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .mgch { transition: none; } }
/* ===================== 2.0 additions ===================== */
/* The divine Names: tap to learn */
.nmw { cursor: pointer; border-radius: 3px; -webkit-tap-highlight-color: transparent; }
.nmw.nmu { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--name) 55%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.nmw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nm-say, .nm-trad { font-size: .82em; }
.nm-trad { color: var(--soft); font-variant: small-caps; }
.nmcard { position: fixed; left: 50%; bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); width: min(30rem, calc(100% - 1.6rem)); z-index: 80;
  background: var(--panel2); color: var(--ink); border: 1px solid var(--rule); border-radius: 22px; padding: 1rem 1.1rem 1rem; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.nmcard.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nmcard p { margin: .5rem 0; line-height: 1.5; font-size: .95rem; }
.nmc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.nmc-k { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold); }
.nmc-t { font-size: 1.15rem; font-weight: 700; }
.nmc-heb { font-family: var(--heb); font-size: 2.2rem; line-height: 1; color: var(--name); }
.nmc-say { font-size: .95rem; color: var(--soft); margin-top: .3rem; }
.nmc-say b { color: var(--ink); }
.nmc-tr, .nmc-nt { color: var(--soft); font-size: .88rem !important; }
@media (prefers-reduced-motion: reduce) { .nmcard { transition: none; } }
.ngrow { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--rule); }
.mgrp .ngrow:first-child { border-top: 0; }
.ng-heb { font-family: var(--heb); font-size: 1.6rem; line-height: 1.2; color: var(--name); min-width: 4.2rem; text-align: center; }
.ng-t { font-weight: 700; } .ng-t span { font-weight: 400; color: var(--soft); }
.ng-m { font-size: .88rem; color: var(--soft); line-height: 1.45; margin-top: .15rem; }
/* Favourite verses */
.v.fav { --fc: var(--c, var(--c-gold)); background: color-mix(in srgb, var(--fc) 22%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--fc) 70%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v.fav.sel { background: var(--sel); }
#selFav { --c: var(--c-gold); }
.favrow { display: flex; align-items: stretch; border-top: 1px solid var(--rule); }
.mgrp .favrow:first-child { border-top: 0; }
.favmain { flex: 1; display: flex; gap: 12px; align-items: stretch; background: none; border: 0; padding: 12px 6px 12px 14px; color: var(--ink); text-align: left; min-width: 0; }
.favbar { width: 4px; border-radius: 2px; background: var(--c); flex: none; }
.favtxt { font-family: var(--serif); font-size: .98rem; line-height: 1.5; color: var(--ink); opacity: .9; }
.favmore { background: none; border: 0; color: var(--soft); min-width: 48px; font-size: 1.1rem; letter-spacing: .05em; }
.favedit { padding: 6px 16px 14px; border-top: 1px dashed var(--rule); }
.favcols { display: flex; gap: 10px; flex-wrap: wrap; }
.favcol { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: var(--c); padding: 0; }
.favcol.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--panel2) inset; }
.fchip i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); margin-right: .35rem; vertical-align: -1px; }
/* Themes */
.tagbox { margin: .6rem 0 .2rem; }
.tchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tchip { --c: var(--c-stone); min-height: 34px; padding: 0 .8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: none; color: var(--ink); font-size: .85rem; }
.tchip.on { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); }
.tchip.add { border-style: dashed; color: var(--soft); }
.tchip.sm { min-height: 0; padding: .1rem .55rem; font-size: .72rem; display: inline-block; margin-top: .3rem; }
.tpick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; padding: .7rem; border-radius: 16px; background: var(--panel2); border: 1px solid var(--rule); }
.tnew { display: inline-flex; gap: .4rem; align-items: center; }
.tnew input { width: 9rem; font: inherit; font-size: 16px; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
.tdot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.mrow .tdot { margin: 0 6px 0 4px; }
.tcount { color: var(--soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.thedit { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--rule); }
.mgrp .thedit:first-child { border-top: 0; }
.thedit .tdot { width: 26px; height: 26px; cursor: pointer; }
.thedit input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); }
.tdel { background: none; border: 0; color: var(--soft); min-width: 44px; min-height: 44px; }
/* My music */
.nvmini { position: fixed; left: .9rem; right: .9rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 4.8rem); z-index: 27; max-width: 30rem; margin: 0 auto; display: flex; align-items: center; gap: .3rem;
  padding: .4rem .4rem .4rem .5rem; border-radius: 20px; background: rgba(31,34,31,.97); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.45); color: #f3f1ea; overflow: hidden; }
html[data-theme="light"] .nvmini { background: rgba(255,255,255,.97); color: #1F2A22; border-color: rgba(0,0,0,.1); }
.nvmini[hidden] { display: none; }
.nvm-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; background: none; border: 0; color: inherit; text-align: left; padding: 0; min-height: 44px; }
.nvm-art { width: 40px; height: 40px; border-radius: 10px; background: #141814; display: flex; align-items: center; justify-content: center; color: #9DB49A; flex: none; }
.nvm-t { display: flex; flex-direction: column; min-width: 0; }
.nvm-t span:first-child { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvm-t span:last-child { font-size: .74rem; opacity: .7; }
.nvm-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: inherit; display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.nvm-btn.on { background: var(--c-purple); color: #0B0C0A; }
.nvm-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.nvm-bar i { display: block; height: 100%; width: 0; background: var(--c-purple); }
body.nvm-on .selbar { bottom: calc(9.6rem + env(safe-area-inset-bottom, 0px)) !important; }
body.nvm-on .toast { bottom: calc(9.8rem + env(safe-area-inset-bottom, 0px)) !important; }
body.nvm-on .nmcard { bottom: calc(9.8rem + env(safe-area-inset-bottom, 0px)); }
body.home .nvmini { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.8rem); }
.plart { width: min(240px, 62vw); aspect-ratio: 1; margin: .4rem auto 1rem; border-radius: 28px; background: #141814; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: #9DB49A; }
.pl-t { font-size: 1.35rem; font-weight: 700; text-align: center; }
.pl-s { font-size: .92rem; color: var(--soft); text-align: center; margin: .2rem 0 1rem; }
.plseek { width: 100%; accent-color: var(--c-purple); height: 32px; }
.pl-times { display: flex; justify-content: space-between; font-size: .82rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.plctl { display: flex; justify-content: space-between; align-items: center; margin: .6rem .4rem 1rem; }
.plbtn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0; }
.plbtn.big { width: 76px; height: 76px; background: var(--c-purple); color: #0B0C0A; }
.plbtn.big svg { width: 32px; height: 32px; }
.plsm { width: 44px; height: 44px; border: 0; background: none; color: var(--soft); position: relative; display: flex; align-items: center; justify-content: center; padding: 0; }
.plsm.on { color: var(--c-purple); }
.plsm b { position: absolute; right: 4px; top: 4px; font-size: .62rem; }
.mlrow { padding: 0 !important; gap: 0 !important; }
.ml-main { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; background: none; border: 0; color: var(--ink); text-align: left; min-width: 0; }
.ml-num { width: 28px; text-align: center; color: var(--soft); font-variant-numeric: tabular-nums; flex: none; }
.mlrow.now .mrow-h, .mlrow.now .ml-num { color: var(--c-purple); }
.ml-ed { width: 44px; min-height: 44px; border: 0; background: none; color: var(--soft); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.ml-ed.del { color: var(--name); }
/* Update banner and problem log */
.nvupd { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + .8rem); transform: translateX(-50%); z-index: 210; display: flex; align-items: center; gap: .8rem;
  padding: .55rem .6rem .55rem 1rem; border-radius: 999px; background: #f3f1ea; color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: .9rem; max-width: calc(100% - 2rem); }
.nvupd button { border: 0; border-radius: 999px; background: #3F5634; color: #fff; padding: .45rem .9rem; font-weight: 600; min-height: 36px; }
.errlog { white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, Menlo, monospace; background: var(--panel2); border: 1px solid var(--rule); border-radius: 12px; padding: .8rem; max-height: 40vh; overflow: auto; }
/* Back buttons (2.0.1) */
.sheet-head { gap: .6rem; }
.sheet-head h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheetback { background: none; border: 0; color: var(--accent); font-weight: 500; padding: .3rem .6rem .3rem 0; min-height: 44px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; flex: none; }
.navback { flex: none; display: inline-flex; align-items: center; gap: .25rem; min-height: 40px; padding: 0 .75rem 0 .55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-size: .88rem; font-weight: 600; max-width: 34%; white-space: nowrap; }
.navback[hidden] { display: none; }
.navback span:first-child { font-size: 1.3rem; line-height: 1; color: var(--accent); }
.navback #navBackL { overflow: hidden; text-overflow: ellipsis; }
/* ===================== 2.1 additions ===================== */
/* Study panel */
#toPanel { --c: var(--c-gold); }
#toPanel.on { background: var(--c-gold); border-color: var(--c-gold); color: #0B0C0A; }
.nvpanel { position: fixed; z-index: 26; background: #111311; color: var(--ink); display: flex; flex-direction: column; border: 1px solid var(--rule); }
html[data-theme="light"] .nvpanel { background: #FBFBF7; }
.nvpanel[hidden], body.home .nvpanel { display: none !important; }
/* upright phone: slides up over the lower half */
.nvpanel { left: 0; right: 0; bottom: 0; height: 52vh; border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: 0 -12px 30px rgba(0,0,0,.45); padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + .6rem); }
.nvpanel.tall { height: 82vh; }
body.panel-on:not(.panel-side) #tabs, body.panel-on:not(.panel-side) .nvmini { display: none; }
body.panel-on:not(.panel-side) main { padding-bottom: 56vh; }
body.panel-on:not(.panel-side) .selbar { bottom: calc(52vh + .6rem) !important; }
/* wide screens: beside the text */
body.panel-side .nvpanel { left: auto; top: calc(env(safe-area-inset-top, 0px) + 3.6rem); right: 0; bottom: 0; width: 44vw; height: auto; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; padding: 0 1.4rem 5.5rem; }
body.panel-side main { max-width: none; margin: 0 44vw 0 0; padding-left: max(1.4rem, 3vw); padding-right: max(1.4rem, 3vw); }
body.panel-side .nvp-handle { display: none; }
body.panel-side .selbar { left: 28vw; max-width: calc(54vw - 1rem); flex-wrap: wrap; justify-content: center; border-radius: 18px; }
.nvp-handle { display: flex; justify-content: center; padding: .55rem 0 .2rem; cursor: pointer; }
.nvp-handle span { width: 42px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); }
html[data-theme="light"] .nvp-handle span { background: rgba(0,0,0,.2); }
.nvp-head { display: flex; align-items: center; gap: .6rem; padding: .6rem 0 .4rem; }
.nvp-t { flex: 1; min-width: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nvp-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--soft); flex: none; }
.nvp-tabs { display: flex; gap: .4rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.nvp-tab { min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--soft); font-weight: 600; font-size: .88rem; }
.nvp-tab.on { background: var(--c); border-color: var(--c); color: #0B0C0A; }
.nvp-tab[hidden] { display: none; }
.nvp-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: .8rem 0 1rem; }
.nvp-k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); margin: .2rem 0 .7rem; }
.nvp-words { display: flex; flex-wrap: wrap; direction: rtl; gap: .45rem; }
.nvp-w { direction: ltr; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: .5rem .6rem; border-radius: 12px; border: 0; background: var(--panel2); color: var(--ink); }
.nvp-w .h { font-family: var(--heb); font-size: calc(var(--size) * 1.35); line-height: 1.3; direction: rtl; }
.nvp-w .t { font-size: .78rem; color: var(--c-blue); }
.nvp-w .g { font-size: .78rem; font-style: italic; color: var(--soft); }
.nvp-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.nvp-chip { min-height: 34px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--soft); font-size: .82rem; }
.nvp-chip.on { border-color: var(--c-stone); color: var(--ink); background: color-mix(in srgb, var(--c-stone) 18%, transparent); }
.nvp-note { display: block; width: 100%; text-align: left; margin-bottom: .6rem; padding: .7rem .9rem; border-radius: 16px; background: var(--panel2); border: 1px solid var(--rule); color: var(--ink); }
.nvp-note.here { border-color: var(--c-purple); }
.nvp-nref { display: block; font-size: .8rem; font-weight: 700; color: var(--c-purple); margin-bottom: .2rem; }
.nvp-ntxt { display: block; font-family: var(--serif); line-height: 1.55; }
.nvp-add { display: block; width: 100%; text-align: left; min-height: 48px; padding: .7rem .9rem; border-radius: 16px; border: 1px dashed var(--rule); background: none; color: var(--soft); }
/* Start-up notice */
.nvstart { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem); transform: translateX(-50%); z-index: 260; width: min(26rem, calc(100% - 2rem)); background: #f3f1ea; color: #111; border-radius: 18px; padding: .9rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); font: 15px/1.45 -apple-system, system-ui, sans-serif; }
.nvstart p { margin: 0 0 .6rem; }
.nvstart-a { display: flex; gap: .5rem; }
.nvstart button { min-height: 44px; border-radius: 12px; border: 0; padding: 0 1rem; font-weight: 600; background: #3F5634; color: #fff; }
.nvstart button + button { background: none; color: #3F5634; border: 1px solid #3F5634; }
.sheet-head h2:focus { outline: none; }
.sheet-head h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ===================== 2.2: study tools on the side ===================== */
.nvtools { --nvt-y: 150px; }
.nvtools[hidden], body.home .nvtools { display: none !important; }
.nvt-fab { position: fixed; right: 14px; bottom: calc(var(--nvt-y) + env(safe-area-inset-bottom, 0px)); z-index: 31; width: 54px; height: 54px; border-radius: 50%; padding: 0;
  background: rgba(31,34,31,.9); border: 1px solid rgba(157,180,154,.45); color: #9DB49A; box-shadow: 0 8px 22px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; touch-action: none; transition: transform .25s ease, opacity .25s ease, background .2s ease; }
html[data-theme="light"] .nvt-fab { background: rgba(255,255,255,.94); border-color: rgba(111,130,112,.5); color: #6F8270; }
.nvtools.left .nvt-fab { right: auto; left: 14px; }
.nvt-fab .nvt-x { display: none; }
.nvtools.open .nvt-fab { background: #9DB49A; color: #0B0C0A; }
.nvtools.open .nvt-fab .nvt-x { display: flex; }
.nvtools.open .nvt-fab .nvt-sprig { display: none; }
/* tucked into the edge while scrolling: only a small sliver shows */
.nvtools.tucked .nvt-fab { transform: translateX(calc(100% - 4px)); opacity: .55; }
.nvtools.left.tucked .nvt-fab { transform: translateX(calc(-100% + 4px)); }
.nvt-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.35); display: none; }
.nvtools.open .nvt-scrim { display: block; }
.nvt-rail { position: fixed; right: 14px; bottom: calc(var(--nvt-y) + 66px + env(safe-area-inset-bottom, 0px)); z-index: 31; display: none; flex-direction: column; align-items: flex-end; gap: 10px; max-height: calc(100vh - var(--nvt-y) - 140px); overflow-y: auto; }
.nvtools.left .nvt-rail { right: auto; left: 14px; align-items: flex-start; }
.nvtools.open .nvt-rail { display: flex; }
.nvt-head { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-olive); background: rgba(22,24,22,.96); border: 1px solid color-mix(in srgb, var(--c-olive) 50%, transparent); padding: .35rem .75rem; border-radius: 999px; }
.nvt-item { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--ink); }
.nvtools.left .nvt-item { flex-direction: row-reverse; }
.nvt-lab { padding: .45rem .8rem; border-radius: 999px; background: rgba(22,24,22,.96); border: 1px solid var(--rule); font-size: .88rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); color: #f3f1ea; }
.nvt-disc { width: 50px; height: 50px; border-radius: 50%; background: #1B1E1B; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); color: var(--c); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.4); flex: none; }
.nvt-heb { font-family: var(--heb); font-size: 1.45rem; line-height: 1; }
.nvt-item:focus-visible .nvt-disc { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nvt-fab { transition: none; } }
/* keep clear of the music bar, the selection bar and the study panel */
body.panel-on:not(.panel-side) .nvt-fab { bottom: calc(52vh + 14px); }
body.panel-on:not(.panel-side) .nvt-rail { bottom: calc(52vh + 80px); }
body.panel-side .nvt-fab, body.panel-side .nvt-rail { right: calc(44vw + 14px); }
/* lift the sprig above the selection bar while verses are selected */
body.sel-on:not(.panel-on) .nvt-fab { bottom: calc(var(--nvt-y) + 110px + env(safe-area-inset-bottom, 0px)); }
body.sel-on:not(.panel-on) .nvt-rail { bottom: calc(var(--nvt-y) + 176px + env(safe-area-inset-bottom, 0px)); }