/* ============================================================
   Bible Study Online — light, warm, low-friction.
   ============================================================ */
:root{
  color-scheme: light;
  --paper:#faf7f2;          /* page plane */
  --card:#ffffff;           /* raised surface */
  --sunk:#f4f1ea;           /* inset wells */
  --ink:#1c1a16;
  --ink-2:#57524a;
  --muted:#8d8578;
  --line:#e7e2d8;
  --line-2:#d6d0c3;

  --blue:#2a78d6;   --blue-ink:#1c5cab;  --blue-wash:#eaf2fd;
  --green:#0ca30c;  --green-ink:#0a7d18; --green-wash:#e8f6e8;
  --amber:#eda100;  --amber-ink:#8a5d00; --amber-wash:#fdf2dc;
  --coral:#eb6834;  --coral-ink:#b8431a; --coral-wash:#fdeee7;
  --violet:#4a3aa7; --violet-wash:#eeecfa;
  --aqua:#1baf7a;   --aqua-ink:#0f6b4a;  --aqua-wash:#e6f7f0;

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --heb:"SBL Hebrew","Ezra SIL","Times New Roman",serif;
  --grk:"SBL Greek","Gentium Plus","Times New Roman",serif;
  --r:14px;
  --read-size:18px; --read-line:1.9; --read-face:var(--serif); --read-track:0;
  --read-width:44em;
  --shadow:0 1px 2px rgba(28,26,22,.05), 0 4px 14px rgba(28,26,22,.05);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --paper:#131311; --card:#1c1c1a; --sunk:#232320;
  --ink:#f6f4ef; --ink-2:#c8c3b8; --muted:#8f887b;
  --line:#2d2d29; --line-2:#3d3c37;
  --blue:#3987e5; --blue-ink:#79b0f0; --blue-wash:#16233a;
  --green:#0ca30c; --green-ink:#5fcf5f; --green-wash:#152915;
  --amber:#c98500; --amber-ink:#e2ae4a; --amber-wash:#2c2110;
  --coral:#d95926; --coral-ink:#ef9166; --coral-wash:#2e1a12;
  --violet:#9085e9; --violet-wash:#1f1c33;
  --aqua:#199e70; --aqua-ink:#54cba0; --aqua-wash:#10261e;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
/* a display rule further down must not resurrect a hidden element */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%}
p,li,td,th,h1,h2,h3,.h-sub,.tb,.ssub,.pw,.vc-b,.bt{overflow-wrap:anywhere}
body{margin:0;min-height:100%;min-height:100dvh;background:var(--paper);color:var(--ink);
  font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:var(--blue-ink)}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;
  background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------- boot */
#backBtn{flex:none}

/* ---------------------------------------------------------- bottom tabs
   Roughly half of phone use is one-handed and about three quarters of taps are
   made with a thumb, so the things people reach for most live at the bottom of
   the screen rather than behind a menu in the top corner. */
.tabbar{display:none}
@media(max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:46;
    background:var(--card);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(28,26,22,.06)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;border-radius:12px;color:var(--muted);min-width:0}
  .tabbar button span{font-size:10.5px;font-weight:600;letter-spacing:.1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* six tabs on a small phone: give the labels room rather than clipping them */
  @media(max-width:380px){
    .tabbar{padding-left:1px;padding-right:1px}
    .tabbar button{padding:6px 0;gap:2px}
    .tabbar button span{font-size:9.5px;letter-spacing:-.1px}
  }
  .tabbar button svg{color:var(--muted)}
  .tabbar button.on{color:var(--blue-ink)}
  .tabbar button.on svg{color:var(--blue)}
  .tabbar button.on span{font-weight:700}
  /* nothing should hide underneath it */
  .view{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .readdone{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .player.on{bottom:calc(78px + env(safe-area-inset-bottom))}
  .readside{bottom:calc(70px + env(safe-area-inset-bottom))}
  .madeby{padding-bottom:12px}
}
@media(min-width:761px){#backBtn{margin-right:-4px}}
#boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);z-index:99}
#boot .in{text-align:center;width:min(380px,80vw)}
#boot .logo{width:52px;height:52px;border-radius:16px;margin:0 auto 16px;
  background:linear-gradient(145deg,var(--blue),var(--violet));display:grid;place-items:center}
#boot h1{font-size:20px;margin-bottom:6px}
#boot p{color:var(--muted);font-size:13px;margin:0 0 20px}
.pbar{height:5px;background:var(--line);border-radius:5px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--blue);border-radius:5px;
  transition:width .35s ease}

/* ---------------------------------------------------------- shell */
.app{display:none}
.app.on{display:block}
header.top{display:flex;align-items:center;gap:14px;padding:0 18px;height:58px;
  background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em}
.brand .mk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--blue),var(--violet))}
.brand span small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:0}
.search{flex:1;max-width:540px;position:relative}
.search input{width:100%;padding:9px 12px 9px 36px;border-radius:11px;background:var(--sunk);
  border:1px solid transparent;outline:none}
.search input:focus{border-color:var(--blue);background:var(--card)}
.search .ic{position:absolute;left:12px;top:10px;color:var(--muted);line-height:0}
.topright{margin-left:auto;display:flex;gap:8px;align-items:center}
.streakpill{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;
  background:var(--amber-wash);color:var(--amber-ink);font-weight:600;font-size:13px}
.iconbtn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.iconbtn:hover{background:var(--sunk);color:var(--ink)}

.body{display:grid;grid-template-columns:216px 1fr;align-items:start}
nav.side{background:var(--card);border-right:1px solid var(--line);padding:14px 12px;
  position:sticky;top:58px;height:calc(100vh - 58px);
  height:calc(100dvh - 58px);overflow-y:auto}
nav.side .sec{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  padding:14px 10px 6px;font-weight:600}
nav.side button{display:flex;width:100%;gap:11px;align-items:center;padding:9px 11px;
  border-radius:10px;color:var(--ink-2);font-size:14px;text-align:left;font-weight:500}
nav.side button:hover{background:var(--sunk);color:var(--ink)}
nav.side button.on{background:var(--blue-wash);color:var(--blue-ink);font-weight:600}
nav.side button.on svg{color:var(--blue)}
nav.side svg{width:17px;height:17px;flex:none;color:var(--muted)}
.morebtn{display:flex;width:100%;gap:11px;align-items:center;padding:9px 11px;border-radius:10px;
  color:var(--muted);font-size:14px;font-weight:550;margin-top:10px;border-top:1px solid var(--line);
  padding-top:14px;border-radius:0}
.morebtn span{flex:1;text-align:left}
.morebtn svg:last-child{transition:.18s}
.morebtn.open svg:last-child{transform:rotate(180deg)}
.morebox{display:none}
.morebox.open{display:block}
html.easyread body{font-family:var(--sans)}
html.easyread .h-sub,html.easyread .tb,html.easyread .opthint{line-height:1.7}
main{min-width:0;display:block}
.view{padding:26px max(30px, env(safe-area-inset-left)) 90px
        max(30px, env(safe-area-inset-right))}
.view{padding-left:max(30px, env(safe-area-inset-left));
      padding-right:max(30px, env(safe-area-inset-right))}
.wrap{max-width:1120px;margin:0 auto}

/* ---------------------------------------------------------- primitives */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow)}
.pad{padding:18px 20px}
.h-title{font-size:24px;letter-spacing:-.02em}
.h-sub{color:var(--muted);font-size:14px;margin-top:4px}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:600;margin:30px 0 11px}
.lbl:first-child{margin-top:0}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.btn{padding:9px 15px;border-radius:11px;border:1px solid var(--line-2);background:var(--card);
  font-size:14px;font-weight:550;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;transition:.13s}
.btn:hover{border-color:var(--muted);color:var(--ink)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{background:var(--blue-ink);border-color:var(--blue-ink);color:#fff}
.btn.ghost{border-color:transparent;background:var(--sunk)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:9px}
.btn.big{padding:13px 22px;font-size:15px;border-radius:13px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:13px;
  color:var(--ink-2);background:var(--card);display:inline-flex;align-items:center;gap:6px}
button.chip:hover{border-color:var(--blue);color:var(--blue-ink)}
.chip .n{color:var(--muted);font-size:12px}
.tag{font-size:11px;font-weight:650;letter-spacing:.3px;padding:3px 9px;border-radius:20px}
.tag.b{background:var(--blue-wash);color:var(--blue-ink)}
.tag.g{background:var(--green-wash);color:var(--green-ink)}
.tag.a{background:var(--amber-wash);color:var(--amber-ink)}
.tag.v{background:var(--violet-wash);color:var(--violet)}
.empty{color:var(--muted);font-size:14px;padding:30px;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--card)}
.divider{height:1px;background:var(--line);margin:20px 0}

.instep{margin-bottom:10px}
.instep .row{flex-wrap:wrap}
.inart{flex:none;border-radius:10px;overflow:hidden;line-height:0}
.artsvg{width:186px;height:auto;display:block}
@media(max-width:600px){
  .inart{width:100%;display:flex;justify-content:center;margin-top:14px;
    padding-top:14px;border-top:1px solid var(--line)}
  .artsvg{width:min(280px,100%)}
}
.installcard{background:linear-gradient(135deg,var(--aqua-wash),var(--blue-wash));
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;margin-top:16px}

/* ---------------------------------------------------------- reading settings */
.optrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.optrow button{padding:9px 14px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--card);font-size:14px;font-weight:550;color:var(--ink-2)}
.optrow button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.optlabel{font-size:14px;font-weight:650;margin-top:20px}
.optlabel:first-child{margin-top:0}
.opthint{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55}
.sample{margin-top:14px;padding:16px 18px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);
  font:var(--read-size)/var(--read-line) var(--read-face);letter-spacing:var(--read-track)}

/* ---------------------------------------------------------- guest bar */
.guestbar{display:flex;align-items:center;gap:10px;padding:9px 18px;background:var(--amber-wash);
  border-bottom:1px solid var(--line);position:sticky;top:58px;z-index:15;flex-wrap:wrap}
.guestbar .gb-t{font-size:13px;color:var(--amber-ink);font-weight:550;flex:1;min-width:140px}
.guestbar .gb-x{color:var(--amber-ink);opacity:.6;font-size:15px;padding:2px 6px}
.guestbar .gb-x:hover{opacity:1}
@media(max-width:760px){.guestbar{padding:8px 12px;gap:7px}
  .guestbar .gb-t{font-size:12px;flex-basis:100%}}

/* ---------------------------------------------------------- sign in */
.authwrap{position:fixed;inset:0;display:none;place-items:center;background:var(--paper);
  z-index:80;padding:20px;overflow-y:auto}
.authwrap.on{display:grid}
.authcard{width:min(400px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.authlogo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--blue),var(--violet));margin-bottom:16px}
.authcard h2{font-size:22px}
.authcard p{color:var(--muted);font-size:14px;margin:6px 0 20px;line-height:1.55}
.authcard label{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);
  margin:0 0 6px}
.authcard .fld{margin-bottom:14px}
.authcard .btn{width:100%;justify-content:center}
.authcard .alt{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.authcard .alt button{color:var(--blue-ink);font-weight:600}
.autherr{background:var(--coral-wash);color:var(--coral-ink);border-radius:10px;
  padding:10px 12px;font-size:13px;margin-bottom:14px;line-height:1.5}
.authnote{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.55;
  border-top:1px solid var(--line);padding-top:14px}

/* ---------------------------------------------------------- leaderboard */
.lbrow{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);margin-bottom:8px}
.lbrow.me{border-color:var(--blue);background:var(--blue-wash)}
.lbrow .rank{width:26px;text-align:center;font-weight:700;color:var(--muted);font-size:14px}
.lbrow .nm{font-weight:650;font-size:14.5px}
.lbrow .hd2{font-size:12px;color:var(--muted);margin-top:2px}
.lbrow .fire{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--amber-ink);
  background:var(--amber-wash);padding:5px 11px;border-radius:20px;font-size:14px}

.grabber{display:none;width:38px;height:4px;border-radius:4px;background:var(--line-2);
  margin:0 auto 10px}
.sheetclose{display:none;width:32px;height:32px;border-radius:50%;background:var(--sunk);
  color:var(--muted);place-items:center;font-size:15px;flex:none}
.sheetclose:hover{color:var(--ink)}
.sidetabs button{padding:8px 13px;font-size:13.5px;border-radius:10px}
.sidebody .sidetabs{gap:6px}
.sidebody .sidetabs button{background:var(--sunk);color:var(--ink-2)}
.sidebody .sidetabs button.on{background:var(--blue);color:#fff}

/* ---------------------------------------------------------- messages */
.dmbtn{position:relative;padding:8px 10px}
.dmbtn .badge{position:absolute;top:-6px;right:-6px;background:var(--coral);color:#fff;
  border-radius:20px;min-width:18px;height:18px;font-size:11px;font-weight:700;
  display:grid;place-items:center;padding:0 5px}
.thread{margin:16px 0 0;display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.daysep{text-align:center;font-size:11.5px;color:var(--muted);margin:14px 0 6px;font-weight:600}
.bubble{max-width:min(78%,540px);background:var(--card);border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;padding:10px 13px;align-self:flex-start}
.bubble.mine{background:var(--blue);border-color:var(--blue);color:#fff;align-self:flex-end;
  border-radius:16px 16px 5px 16px}
.bubble .bt{font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.bubble .bm{font-size:11px;opacity:.62;margin-top:5px;text-align:right}
.bubble .brefchip{display:inline-block;font-size:11.5px;font-weight:650;margin-bottom:6px;
  padding:2px 9px;border-radius:20px;background:var(--blue-wash);color:var(--blue-ink)}
.bubble.mine .brefchip{background:rgba(255,255,255,.2);color:#fff}
.composer{position:sticky;bottom:0;display:flex;gap:9px;align-items:flex-end;padding:12px 0
  calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 30%)}
.dmbox{flex:1;resize:none;background:var(--card);border:1px solid var(--line-2);border-radius:20px;
  padding:11px 15px;outline:none;font:15px/1.45 var(--sans);max-height:120px}
.dmbox:focus{border-color:var(--blue)}
.composer .btn{border-radius:50%;width:44px;height:44px;padding:0;justify-content:center;flex:none}

/* ---------------------------------------------------------- reader chip */
.whowrap{position:relative}
.whobtn{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:22px;
  border:1px solid var(--line);background:var(--card);font-weight:600;font-size:13.5px}
.whobtn:hover{border-color:var(--line-2)}
.av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.2px;flex:none}
.whomenu{position:absolute;right:0;top:calc(100% + 8px);min-width:216px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 34px rgba(28,26,22,.16);
  padding:7px;display:none;z-index:40}
.whomenu.open{display:block}
.wm-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:650;padding:7px 10px 5px}
.wm-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;
  text-align:left;font-size:14px;color:var(--ink-2)}
.wm-row:hover{background:var(--sunk);color:var(--ink)}
.wm-row.on{background:var(--blue-wash);color:var(--blue-ink)}
.wm-n{font-weight:600}
.wm-add{color:var(--muted);border-top:1px solid var(--line);border-radius:0;margin-top:4px;
  padding-top:11px}
.wm-add + .wm-add{border-top:none;margin-top:0;padding-top:9px}

/* ---------------------------------------------------------- week strip */
/* Seven equal columns, and a ring that can never be wider than the column it sits in —
   the old fixed 46px ring overflowed its cell on a narrow phone and the card clipped
   the first and last circle. The 6px side padding is for the dashed "today" ring,
   which sits 4px outside the circle. */
.weekstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
  align-items:start;padding:0 6px}
.day{min-width:0;text-align:center}
.day .dn{font-size:11px;font-weight:650;color:var(--muted);letter-spacing:.6px;margin-bottom:7px}
.day .ring{width:100%;max-width:46px;aspect-ratio:1/1;margin:0 auto;position:relative;
  display:grid;place-items:center}
.day .ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.day .ring .num{font-size:clamp(11px,3.3vw,14px);font-weight:650;color:var(--ink-2);position:relative}
.day.done .num{color:var(--green-ink)}
.day.today .ring:after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px dashed var(--blue);opacity:.55}
.day.today .num{color:var(--blue-ink)}
.day .sub{font-size:10px;color:var(--muted);margin-top:5px;height:12px}

/* ---------------------------------------------------------- progress */
.bigstat{display:flex;align-items:baseline;gap:10px}
.bigstat .v{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.bigstat .u{font-size:15px;color:var(--muted)}
.track{height:12px;background:var(--sunk);border-radius:8px;overflow:hidden;position:relative}
.track i{display:block;height:100%;border-radius:8px;transition:width .5s ease}
.track.slim{height:8px}
.tlegend{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:7px}
.splitbars{display:grid;gap:16px}
.sb .sbh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.sb .sbn{font-size:14px;font-weight:600}
.sb .sbv{font-size:13px;color:var(--muted)}

/* ---------------------------------------------------------- verse of the day */
.votd{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:14px;padding:18px 20px;margin-top:16px;box-shadow:var(--shadow)}
.votd .vk{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--amber-ink)}
.votd .vr{font-weight:700;font-size:16px;margin-top:6px}
.votd .vt{font:var(--read-size)/var(--read-line) var(--read-face);margin-top:8px;
  max-width:38em;letter-spacing:var(--read-track)}
.votd .vf{font-size:12.5px;color:var(--muted);margin-top:9px}

/* ---------------------------------------------------------- what brings you here */
.goalwrap{position:fixed;inset:0;background:rgba(28,26,22,.5);display:grid;place-items:center;
  z-index:85;padding:20px;overflow-y:auto}
.goalcard{width:min(440px,100%);background:var(--card);border-radius:20px;padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.3)}
.goalopt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;padding:14px;
  border:1px solid var(--line);border-radius:14px;margin-bottom:9px;background:var(--card)}
.goalopt:hover{border-color:var(--blue);background:var(--blue-wash)}
.goalopt .gi{width:34px;height:34px;border-radius:10px;background:var(--blue-wash);
  color:var(--blue-ink);display:grid;place-items:center;flex:none}
.goalopt .gt{display:block;font-weight:650;font-size:15px}
.goalopt .gs{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}

/* ---------------------------------------------------------- continue card */
.continue{background:linear-gradient(135deg,var(--blue-wash),var(--violet-wash));
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:flex;gap:20px;
  align-items:center;flex-wrap:wrap}
.continue .txt{flex:1;min-width:220px}
.continue .k{font-size:12px;font-weight:650;letter-spacing:.8px;text-transform:uppercase;
  color:var(--blue-ink)}
.continue .t{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-top:5px}
.continue .d{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}

/* ---------------------------------------------------------- book grid */
.bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.bookcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  text-align:left;transition:.13s}
.bookcard:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow)}
.bookcard .bn{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bookcard .bm{font-size:11.5px;color:var(--muted);margin-top:2px}
.bookcard .track{margin-top:9px;height:6px}
.testtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.testtabs button{padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--sunk)}
.testtabs button.on{background:var(--blue);color:#fff}

/* ---------------------------------------------------------- reader */
.readshell{display:grid;grid-template-columns:1fr 380px;align-items:start}
.readshell.wide{grid-template-columns:1fr}
.readmain{--rmx:28px;--rmy:20px;padding:var(--rmy) var(--rmx) 110px;min-width:0}
.readside{border-left:1px solid var(--line);background:var(--card);
  position:sticky;top:58px;max-height:calc(100vh - 58px);
  max-height:calc(100dvh - 58px);overflow-y:auto}
/* The book and chapter pickers follow you down the page. Having to scroll back to the
   top to change chapter — or to reach the panel for the verse you just tapped — was
   the single most tiring thing about reading on a laptop. */
.readbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  position:sticky;top:58px;z-index:12;background:var(--paper);
  margin:calc(var(--rmy) * -1) calc(var(--rmx) * -1) 14px;
  padding:12px var(--rmx) 11px;border-bottom:1px solid var(--line)}
.pick{padding:8px 11px;border-radius:10px;background:var(--card);border:1px solid var(--line-2);
  outline:none;font-weight:550}
.pick:focus{border-color:var(--blue)}
.iconbtn.bell{position:relative}
#dmBtn{position:relative}
.iconbtn .dot{display:none;position:absolute;top:6px;right:6px;width:8px;height:8px;
  border-radius:50%;background:var(--coral);border:1.5px solid var(--card)}
.guidestep{margin-top:14px}
.guidestep .gn{width:28px;height:28px;border-radius:50%;background:var(--blue-wash);
  color:var(--blue-ink);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.guidestep .gt{font-weight:650;font-size:16px}
.guidestep .gb{font-size:14px;color:var(--ink-2);margin-top:5px;line-height:1.65}
.newswrap{display:none;position:fixed;inset:0;background:rgba(28,26,22,.35);z-index:60;
  align-items:flex-start;justify-content:center;padding:70px 14px 14px}
.newswrap.on{display:flex}
.newscard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  width:min(430px,100%);max-height:min(70vh,70dvh);display:flex;flex-direction:column;
  box-shadow:0 12px 40px rgba(28,26,22,.25);overflow:hidden}
.newshead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line);font-weight:650;font-size:15px}
.newshead button{color:var(--muted);font-size:14px}
.newsbody{overflow-y:auto;padding:6px}
.newsrow{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  padding:11px 12px;border-radius:11px}
.newsrow:hover{background:var(--sunk)}
.newsrow .nt{display:block;font-size:14px;font-weight:600}
.newsrow .ns{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.newsfoot{padding:11px 14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.cameback{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;
  border-radius:11px;background:var(--blue-wash);border:1px solid var(--blue)}
.cameback button{font-size:13px;font-weight:650;color:var(--blue-ink);flex:1;text-align:left}
.cameback button.x{flex:none;opacity:.65;font-size:12px}
.ctxbar{background:var(--amber-wash);border:1px solid var(--line);border-radius:12px;
  padding:12px 15px;margin-bottom:16px}
.ctxbar .ch{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:12px}
.ctxbar .era{background:var(--card);border-radius:20px;padding:2px 10px;font-weight:600;
  color:var(--amber-ink)}
.ctxbar .meta{color:var(--ink-2)}
.ctxbar .part{background:var(--card);border-radius:20px;padding:2px 10px;color:var(--ink-2)}
.ctxbar .ch{row-gap:7px}
.ctxbar .bg{font-size:14px;line-height:1.6;margin-top:10px;color:var(--ink)}
.ctxbar .pairs{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.ctxbar .pairs .pl{font-size:11.5px;color:var(--amber-ink);font-weight:650;align-self:center;
  margin-right:2px}
.ctxbar button.toggle{margin-left:auto;color:var(--amber-ink);font-size:12px;font-weight:600}
.chaptertitle{display:flex;align-items:baseline;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.chaptertitle h2{font-size:28px;letter-spacing:-.025em}
.chaptertitle .cm{font-size:13px;color:var(--muted)}
.chapter{font:var(--read-size)/var(--read-line) var(--read-face);margin-top:18px;
  max-width:var(--read-width);letter-spacing:var(--read-track)}
.v{display:block;padding:4px 10px;border-radius:9px;margin:0 -10px;cursor:pointer}
.v:hover{background:var(--sunk)}
.v.sel{background:var(--blue-wash);box-shadow:inset 3px 0 0 var(--blue)}
.v .n{font:650 11px var(--sans);color:var(--muted);vertical-align:super;margin-right:6px;
  user-select:none}
.v .vgo{float:right;color:var(--line-2);margin-left:8px;line-height:1.9;opacity:0;transition:.13s}
.v:hover .vgo,.v.sel .vgo{opacity:1;color:var(--blue)}
.flow .v .vgo{display:none}
.taphint{display:flex;align-items:center;gap:11px;background:var(--blue-wash);
  border:1px solid var(--blue);border-radius:12px;padding:11px 14px;margin-bottom:16px;
  font:13.5px/1.55 var(--sans);color:var(--blue-ink)}
.taphint .gb-x{flex:none;font-size:12.5px;font-weight:650;color:var(--blue-ink);
  border:1px solid var(--blue);border-radius:8px;padding:5px 10px;background:var(--card)}
.sidenote{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.commref{display:flex;width:100%;justify-content:space-between;align-items:center;
  gap:10px;padding:8px 11px;margin:6px 0 9px;border-radius:9px;background:var(--sunk);
  font-size:13px;font-weight:650;color:var(--blue-ink);text-align:left}
.commref .cn2{font-weight:500;font-size:11.5px;color:var(--muted)}
.verrow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--line)}
.verrow .vid{width:46px;flex:none;font:700 12px var(--sans);color:var(--blue-ink);
  background:var(--blue-wash);border-radius:7px;padding:4px 0;text-align:center}
.verrow .vnm{font-size:13.5px;font-weight:650}
.verrow .vwhy{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.ponder{margin-top:12px;padding:13px 14px;border-radius:12px;background:var(--sunk);
  border:1px solid var(--line)}
.ponder .plabel{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);font-weight:650;margin-bottom:7px}
.ponder .pq{font:600 14px/1.55 var(--sans);color:var(--ink);margin-bottom:10px}
.ponder textarea.note{min-height:78px;font-size:14px}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:650}
.chip.addchip{border-style:dashed;color:var(--blue-ink)}
.wquote{margin-top:10px;padding:12px 14px;border-radius:11px;background:var(--card);
  border:1px solid var(--line)}
.wquote .wq-t{font:15px/1.7 var(--serif);color:var(--ink)}
.wquote .wq-a{font-size:12px;color:var(--muted);margin-top:8px;font-weight:600}
/* who is speaking, before they speak */
.wq-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:9px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.wq-nm{font-weight:700;font-size:14.5px}
.wq-yr{font-size:12.5px;color:var(--muted);font-weight:600}
.steptext{font:calc(var(--read-size) - 2px)/1.75 var(--read-face);margin-top:10px;
  padding-left:12px;border-left:2px solid var(--line-2);color:var(--ink)}
.steptext .v{display:inline;padding:0;margin:0;cursor:default}
.steptext .v .n{font:650 10.5px var(--sans);color:var(--muted);vertical-align:super;margin-right:4px}
.steptext .v .vgo{display:none}
.vthread{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.vcmt{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px}
.vcmt .vc-h{font-size:12.5px;font-weight:650}
.vcmt .vc-h span{font-weight:400;color:var(--muted);margin-left:6px;font-size:11.5px}
.vcmt .vc-b{font-size:14px;line-height:1.6;margin-top:3px;white-space:pre-wrap}
.vcbox{display:flex;gap:8px;align-items:flex-end;margin-top:6px}
.vcbox textarea.note{min-height:44px;font-size:14px}
.namerow{display:flex;gap:11px;align-items:center;margin-top:10px}
.namerow .dot{width:26px;height:26px;border-radius:8px;border:1.5px solid;flex:none}
.namerow input{max-width:260px}
.hlrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.sw{width:38px;height:34px;border-radius:10px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;transition:.13s}
.sw span{display:block;width:14px;height:14px;border-radius:50%}
.sw.on{outline:2px solid var(--ink);outline-offset:1px}
.sw.off{background:var(--sunk);border-style:dashed;font-size:13px;color:var(--muted)}
.madeby{text-align:center;padding:26px 0 34px;font-size:11px;letter-spacing:2px;
  color:var(--line-2);font-weight:700;user-select:none}
.madeby span{cursor:default}
.moretxt{margin-top:10px;font-size:12.5px;font-weight:650;color:var(--blue-ink);
  border-bottom:1px solid transparent;padding:2px 0}
.moretxt:hover{border-bottom-color:var(--blue-ink)}
.ctxbar .bg.deep{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);
  color:var(--ink-2);font-size:13.5px}
.deepbox{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2);
  font:14px/1.7 var(--sans);color:var(--ink-2)}
.vernote{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.v.saying{background:var(--aqua-wash);box-shadow:inset 3px 0 0 var(--aqua)}
.v.saying .n{color:var(--aqua-ink)}
.v.mk{background:var(--amber-wash)}
.v.mk .n{color:var(--amber-ink)}
.flow .v{display:inline;padding:0;margin:0;border-radius:0}
.player{display:none}
.player.on{display:flex;align-items:center;gap:10px;
  position:fixed;left:50%;transform:translateX(-50%);z-index:40;
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(460px,calc(100vw - 24px));padding:10px 12px;border-radius:16px;
  background:var(--card);border:1px solid var(--line-2);
  box-shadow:0 2px 8px rgba(28,26,22,.10), 0 12px 30px rgba(28,26,22,.16)}
.player .pw1{font-weight:650;font-size:14px}
.player .pw2{font-size:11.5px;color:var(--muted);margin-top:2px}
.pbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--sunk);color:var(--ink-2);border:1px solid transparent}
.pbtn:hover{background:var(--blue-wash);color:var(--blue-ink)}
.pbtn.sm{width:30px;height:30px;font-size:16px;font-weight:700}
.pspeed{font-size:12.5px;font-weight:650;color:var(--muted);min-width:32px;text-align:center}
.readdone{position:sticky;bottom:0;background:linear-gradient(transparent,var(--paper) 40%);
  padding:26px 0 10px;margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* side panel */
.sidehead{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);
  padding:14px 18px;z-index:3}
.readdone{position:static;background:none;padding:24px 0 0}
.sidetabs{display:flex;gap:4px;margin-top:11px;flex-wrap:wrap}
.sidetabs button{padding:6px 11px;border-radius:9px;font-size:12.5px;color:var(--muted);
  font-weight:550}
.sidetabs button.on{background:var(--sunk);color:var(--ink)}
.sidebody{padding:16px 18px 60px}
.sideref{font-size:16px;font-weight:650}
.sidetext{font:14.5px/1.6 var(--serif);color:var(--ink-2);margin-top:6px}

/* interlinear */
.iw{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;align-items:baseline;
  margin-bottom:7px}
.iw:hover{border-color:var(--blue)}
.iw .orig{font:21px/1.4 var(--heb);white-space:nowrap}
.iw.gk .orig{font:19px/1.4 var(--grk)}
.iw .gl{font-size:14px;font-weight:550}
.iw .sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.sn{font-weight:650;color:var(--blue-ink);font-size:11.5px}
.mo{color:var(--aqua-ink)}
.pre{color:var(--amber-ink)}

/* history panel */
.histrow{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);margin-bottom:7px;background:var(--card)}
.histrow .hn{font-weight:600;font-size:13.5px}
.histrow .hd{font-size:11.5px;color:var(--muted)}
.dotgrid{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.dotgrid button{width:26px;height:26px;border-radius:7px;font-size:11px;font-weight:600;
  background:var(--sunk);color:var(--muted)}
.dotgrid button.read{background:var(--green-wash);color:var(--green-ink)}
.dotgrid button.here{outline:2px solid var(--blue);outline-offset:1px;color:var(--blue-ink)}
.dotgrid button:hover{background:var(--blue-wash);color:var(--blue-ink)}

/* xref + occurrence lists */
.xr{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);margin-bottom:7px}
.xr:hover{border-color:var(--blue)}
.xr .rf{font-weight:650;font-size:12.5px;color:var(--blue-ink)}
.xr .tx{font:14px/1.55 var(--serif);color:var(--ink-2);margin-top:3px}
.occ{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.occ .orow{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:11px 14px;
  border-top:1px solid var(--line);cursor:pointer;align-items:baseline}
.occ .orow:first-child{border-top:none}
.occ .orow:hover{background:var(--sunk)}
.occ .rf{font-weight:650;font-size:12.5px;color:var(--blue-ink)}
.occ .tx{font:calc(var(--read-size) - 2px)/1.6 var(--read-face)}
.occ .tx mark{background:var(--amber-wash);color:var(--amber-ink);border-radius:3px;padding:0 2px}

/* commentary */
.cmt{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 15px;
  margin-bottom:10px}
.cmt .ch{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.cmt .cn{font-weight:650;font-size:14px}
.cmt .cy{font-size:12px;color:var(--muted)}
.cmt .ct{font:calc(var(--read-size) - 2px)/var(--read-line) var(--read-face);white-space:pre-wrap}
.cmt .ct.clip{max-height:140px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}

/* topics */
.topicgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.topiccard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 16px;
  text-align:left;transition:.13s}
.topiccard:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow)}
.topiccard .tn{font-weight:650;font-size:15px}
.topiccard .tb{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.topiccard .tf{font-size:11.5px;color:var(--blue-ink);margin-top:9px;font-weight:600}
.plan{counter-reset:step}
.planstep{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:14px 0;
  border-top:1px solid var(--line)}
.planstep:first-child{border-top:none}
.planstep .sn2{width:26px;height:26px;border-radius:50%;background:var(--blue-wash);
  color:var(--blue-ink);display:grid;place-items:center;font-size:12px;font-weight:700}
.planstep.done .sn2{background:var(--green);color:#fff}
.planstep .pt{font-weight:650;font-size:15px}
.planstep .pw{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.planstep .pv{font:calc(var(--read-size) - 3px)/var(--read-line) var(--read-face);color:var(--ink-2);margin-top:8px;
  padding-left:12px;border-left:2px solid var(--line-2)}

/* timeline */
.tl{position:relative;padding-left:24px}
.tl:before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tlrow{position:relative;margin-bottom:22px}
.tlrow:before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--paper)}
.tlrow .tn{font-weight:650;font-size:16px}
.tlrow .tr{font-size:12.5px;color:var(--blue-ink);font-weight:600;margin-top:2px}
.tlrow .td{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.6}

/* facts */
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.fact .fl{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:650}
.fact .fv{font-size:14px;margin-top:6px;line-height:1.6}

/* parallel */
.para-grid{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.para-row{display:grid;border-top:1px solid var(--line)}
.para-row:first-child{border-top:none}
.para-row.head{background:var(--sunk);position:sticky;top:0;z-index:2}
.para-cell{padding:11px 14px;font:15px/1.6 var(--serif);border-left:1px solid var(--line);min-width:0}
.para-cell:first-child{border-left:none}
.para-row.head .para-cell{font:650 11px var(--sans);letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted)}
.para-row .vn{font:650 11px var(--sans);color:var(--muted);padding:13px 0 0 14px}

textarea.note{width:100%;min-height:96px;background:var(--card);border:1px solid var(--line-2);
  border-radius:11px;padding:11px 13px;outline:none;resize:vertical;font:14.5px/1.65 var(--sans)}
textarea.note:focus{border-color:var(--blue)}
/* ---------------------------------------------------------- folding sections */
.foldsec{border:1px solid var(--line);border-radius:14px;background:var(--card);
  margin-bottom:11px;overflow:hidden}
.foldhead{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px 16px;background:none;border:0;cursor:pointer}
.foldhead .grow{display:block;min-width:0}
.foldhead .fh-t{display:block;font-weight:700;font-size:16px}
.foldhead .fh-s{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.foldhead .chev{color:var(--muted);transition:transform .2s;flex:none;display:grid}
.foldsec.open .foldhead .chev{transform:rotate(180deg)}
.foldbody{display:none;padding:2px 16px 18px;border-top:1px solid var(--line)}
.foldsec.open .foldbody{display:block}
.foldbody > .lbl:first-child{margin-top:12px}

/* ---------------------------------------------------------- walkthrough
   The dim is a single huge box-shadow spilling out of a transparent hole, which is
   the one technique for this that works in every browser we care about. */
.tour{position:fixed;inset:0;z-index:120}
.tourhole{position:absolute;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,18,14,.66), 0 0 0 3px var(--blue) inset;
  outline:2px solid var(--blue);outline-offset:2px;transition:top .22s,left .22s,width .22s,height .22s}
.tourcard{position:absolute;left:50%;transform:translateX(-50%);width:min(400px,calc(100vw - 28px));
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 17px 13px;box-shadow:0 12px 40px rgba(20,18,14,.34);
  transition:top .22s}
.tourcard .tt{font-weight:750;font-size:16.5px;margin-bottom:6px}
.tourcard .tx{font-size:14px;line-height:1.62;color:var(--ink-2)}
.tourcard .tdots{display:flex;gap:5px;margin:13px 0 11px}
.tourcard .tdots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.tourcard .tdots i.on{background:var(--blue);width:18px;border-radius:4px}
.tourcard .trow{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tourcard .trow .btn:first-child{margin-right:auto}
.tourlink{opacity:.9}
/* the one-line explanation under the verse panel's five tabs */
.tabhint{font-size:13px;line-height:1.55;color:var(--ink-2);
  background:var(--sunk);border-radius:10px;padding:9px 12px;margin:-4px 0 10px}
.tourlink.linkbtn{display:block;margin:0 0 14px;font-size:12.5px}

/* Messages: a count on the right reads as a count. Beside the name it read as a name. */
.msgmeta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap}
.unreadpill{background:var(--blue);color:#fff;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;line-height:1.5}
.lbrow.unread .nm{font-weight:750}
.pickwrap{margin-bottom:10px}
.pickwrap input.tx{margin-bottom:6px}

/* Whether a note has been kept should never be a guess. */
.saverow{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.saverow .btn[disabled]{opacity:.45;pointer-events:none}
.savenote{font-size:12.5px;color:var(--muted);transition:color .2s,opacity .3s}
.savenote.dirty{color:var(--amber-ink,#8a6300)}
.savenote.ok{color:var(--green-ink,#2f6b46)}
.savenote.ok:before{content:'✓ ';font-weight:700}
.savenote.flash{animation:savepop 1.4s ease}
@keyframes savepop{0%{opacity:0;transform:translateY(3px)}12%{opacity:1;transform:none}100%{opacity:1}}
input.tx{width:100%;padding:10px 13px;border-radius:11px;background:var(--card);
  border:1px solid var(--line-2);outline:none}
input.tx:focus{border-color:var(--blue)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);border-radius:12px;padding:11px 18px;font-size:14px;
  font-weight:550;z-index:60;opacity:0;transition:.22s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:0 24px 70px rgba(0,0,0,.22)}
dialog::backdrop{background:rgba(28,26,22,.42)}
dialog .dh{padding:18px 20px;border-bottom:1px solid var(--line);font-weight:650;font-size:17px}
dialog .db{padding:18px 20px}
dialog .df{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;
  justify-content:flex-end}

/* shared studies */
.lbl2{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-weight:650;margin:16px 0 8px}
.studycard{display:block;width:100%;text-align:left;margin-top:12px;cursor:pointer;
  transition:.13s;background:var(--card)}
.studycard:hover{border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow)}
.stico{width:34px;height:34px;border-radius:11px;background:var(--blue-wash);color:var(--blue-ink);
  display:grid;place-items:center;flex:none}
.stico.sm{width:26px;height:26px;border-radius:9px}
.sname{font-weight:650;font-size:15.5px;display:block}
.ssub{font-size:12.5px;color:var(--muted);margin-top:4px;display:block;line-height:1.5}
.ministudy{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);transition:.13s}
.ministudy:hover{border-color:var(--blue)}
.ministudy .sname{font-size:14px}
.ministudy .ssub{font-size:12px;margin-top:2px}
.ministudy .pcm{font-size:12.5px;font-weight:700;color:var(--blue-ink);flex:none}
.linkbtn{font-size:13px;font-weight:600;color:var(--blue-ink);padding:6px 4px;
  border-bottom:1px solid transparent}
.linkbtn:hover{border-bottom-color:var(--blue-ink)}
.codein{text-transform:uppercase;letter-spacing:2px;font-weight:600}
.codein::placeholder{text-transform:none;letter-spacing:0;font-weight:400}
.codebox{margin-top:12px;font:700 24px/1 var(--sans);letter-spacing:5px;text-align:center;
  padding:15px 10px;border-radius:12px;background:var(--sunk);border:1px dashed var(--line-2);
  color:var(--ink)}
.saidby{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  font-weight:600;margin:8px 0 -2px}
.attachchip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;
  background:var(--blue-wash);color:var(--blue-ink);padding:5px 10px;border-radius:20px}
.attachchip button{color:inherit;opacity:.7;font-size:12px;line-height:1}
.attachchip button:hover{opacity:1}

.celebrate{position:fixed;inset:0;pointer-events:none;z-index:70}
.celebrate i{position:absolute;width:9px;height:9px;border-radius:2px;animation:fall 1.5s ease-in forwards}
@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}
  100%{transform:translateY(60vh) rotate(420deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.celebrate{display:none}
  *{animation-duration:.001s !important;transition-duration:.001s !important}}

@media(max-width:1100px){
  .readshell{grid-template-columns:1fr}
  .readside{display:none;border-left:none;position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:82vh;max-height:82dvh;overflow-y:auto;z-index:45;border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(28,26,22,.22);
    padding-bottom:env(safe-area-inset-bottom)}
  .readshell.showside .readside{display:block;animation:sheetup .22s ease}
  .readshell.showside .readmain{display:block}
  .sidehead{border-radius:20px 20px 0 0}
  .grabber{display:block}
  .sheetclose{display:grid}
  body.sheet-open{overflow:hidden}
  body.sheet-open:after{content:'';position:fixed;inset:0;background:rgba(28,26,22,.34);z-index:44}
}
@keyframes sheetup{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media(max-width:760px){
  .body{grid-template-columns:1fr}   /* nav is fixed, so it leaves the grid flow */
  /* "More" is the last tab at the bottom of the screen, so what it opens comes up
     from the bottom too — a drawer sliding in from the far left, away from the thumb
     that just tapped, was the wrong shape for the gesture. Tapping anywhere off it
     closes it, which is what everybody tries first. */
  nav.side{position:fixed;left:0;right:0;top:auto;
    bottom:calc(58px + env(safe-area-inset-bottom));width:auto;height:auto;
    max-height:min(66vh,66dvh);overflow-y:auto;border-right:none;
    border-top:1px solid var(--line);border-radius:20px 20px 0 0;
    padding:8px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 40px rgba(28,26,22,.24);
    transform:translateY(115%);transition:transform .22s ease;z-index:47}
  nav.side.open{transform:none}
  nav.side:before{content:'';display:block;width:38px;height:4px;border-radius:3px;
    background:var(--line-2);margin:2px auto 10px}
  #navScrim{position:fixed;inset:0;background:rgba(28,26,22,.36);z-index:46;
    opacity:0;pointer-events:none;transition:opacity .2s}
  #navScrim.on{opacity:1;pointer-events:auto}
  .view{padding:18px max(18px, env(safe-area-inset-right)) 96px max(18px, env(safe-area-inset-left))}
  /* --rmx/--rmy must move with the padding, or the sticky bar's negative margins
     hang off the sides and the page scrolls sideways */
  .readmain{--rmx:max(18px, env(safe-area-inset-left));--rmy:16px;
    padding:var(--rmy) var(--rmx) 96px}
  .tl{padding-left:22px}
  .tlrow:before{left:-22px;width:10px;height:10px}
  .h-title{font-size:22px}
  .card.pad{padding:15px 16px}
  .brand span{display:none}
  .continue .t{font-size:22px}
  .continue{padding:18px}
  .btn{padding:11px 16px}
  .btn.sm{padding:8px 13px}
  .dotgrid button{width:34px;height:34px;font-size:12px}
  .chapter{font-size:19px;line-height:1.95}
  .readdone{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .weekstrip{gap:3px}
  .day .ring{max-width:40px}
  header.top{padding:0 12px;gap:9px}
  .search input{padding:10px 12px 10px 34px}
  .streakpill{padding:6px 9px}
  /* Friends already has its own tab down at the thumb; a sixth header icon only
     crowds the top bar and pushes the others off the edge */
  /* Friends is a header icon on every size now — it is the only way in */
  .whobtn .wn{display:none}
  .whobtn{padding:4px;border-color:transparent}
  .whomenu{position:fixed;left:12px;right:12px;top:64px;min-width:0}
}

/* "Add another plan" — the moment a group finishes something is worth a real button */
.addplan{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
/* which studies you and a friend are both in */
.together{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px}
.together .tg-n{font-size:12px;color:var(--muted);font-weight:600}
.chip.sm{font-size:12px;padding:3px 10px}
/* an invitation waiting on you */
.invitecard{border-color:var(--blue);margin-bottom:10px}

/* ---------------------------------------------------------- swipe a card away
   The action sits underneath and the card slides off it. The button is always in
   the DOM, so anything that is not a finger can still reach it. */
.swipe{position:relative;overflow:hidden;border-radius:var(--r);margin-bottom:10px}
.swipeback{position:absolute;inset:0;display:flex;border-radius:var(--r);opacity:0}
.swipeback.left{justify-content:flex-end;background:var(--coral)}
.swipeback.right{justify-content:flex-start;background:var(--blue)}
.swipe.open-l .swipeback.left,.swipe.open-r .swipeback.right{opacity:1}
.swipeact{width:100px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;color:#fff;font-size:12px;font-weight:650}
.swipeact svg{color:#fff}
.swipefront{position:relative;margin-bottom:0 !important;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);will-change:transform;
  background:var(--card)}
.swipe.open-l .swipefront{box-shadow:-6px 0 14px rgba(28,26,22,.14)}
.swipe.open-r .swipefront{box-shadow:6px 0 14px rgba(28,26,22,.14)}
/* a pinned study keeps its place at the top */
.studycard.pinned:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--blue);border-radius:3px 0 0 3px}
.studycard{position:relative}
/* the pointer equivalent of the swipe: a button, not a hair trigger */
.cardmenu{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .15s}
.swipe:hover .cardmenu,.cardmenu:focus-visible{opacity:1}
.cardmenu:hover{background:var(--sunk);color:var(--ink)}
.cardmenubox{display:none;position:absolute;top:42px;right:8px;z-index:12;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;min-width:132px}
.swipe.menu .cardmenubox{display:block}
.swipe.menu .cardmenu{opacity:1}
.cardmenubox button{display:block;width:100%;text-align:left;padding:10px 14px;
  font-size:14px;color:var(--ink-2)}
.cardmenubox button:hover{background:var(--sunk);color:var(--ink)}
.cardmenubox button.danger{color:var(--coral-ink)}
@media(hover:none){.cardmenu{display:none}}
/* who is in a study */
.faces{display:flex;align-items:center;gap:5px;margin:11px 0 4px;flex-wrap:wrap}
.facesmore{font-size:12px;color:var(--muted);font-weight:600;margin-left:2px}
/* the worked example on an empty Studies page */
.studycard.example{border-style:dashed;border-color:var(--line-2);cursor:default}
.exwhy{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:13px;
  padding-top:12px;border-top:1px solid var(--line)}
.exnote{font-size:12px;color:var(--muted);margin-top:11px;font-style:italic}

/* ---------------------------------------------------------- one word at a time */
.wordlit{background:var(--blue-wash);color:inherit;border-radius:4px;padding:0 2px;
  box-shadow:inset 0 -2px 0 var(--blue)}
.wordpop{position:fixed;left:12px;right:12px;z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  box-shadow:0 12px 40px rgba(28,26,22,.26);max-width:440px;margin:0 auto;
  animation:wpin .16s ease}
@keyframes wpin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:761px){.wordpop{left:auto;right:auto;width:min(440px,90vw)}}
.wp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wp-o{font-size:22px;font-weight:700;line-height:1.2}
.wp-t{font-weight:700;font-size:15px}
.wp-c{font-size:12px;color:var(--muted);font-weight:650}
.wp-s{font-size:15px;font-weight:600;margin-top:8px;color:var(--ink)}
.wp-d{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:7px}
.wp-k{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.wp-r{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.wp-loading{font-size:14px;color:var(--ink-2);line-height:1.6}

/* how long a plan takes, and the pace you picked */
.pacebox{margin-bottom:16px;border-color:var(--blue)}
.pace-t{font-weight:700;font-size:15.5px}
.pace-s{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:5px}
.pace-n{font-size:13px;color:var(--muted);margin-top:11px;line-height:1.6}
.pace-n b{color:var(--ink-2)}
.continue .mins{font-size:13px;color:var(--muted);margin-top:6px;font-weight:600}

/* the shareable verse picture */
.sharecv{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;
  border-radius:14px;box-shadow:0 6px 22px rgba(28,26,22,.2)}

/* the questions a study has raised */
.asknote{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:6px 0 4px}
.askcard{margin-bottom:10px;cursor:pointer}
.askcard.openq{border-color:var(--amber)}
.ask-q{font-size:15px;line-height:1.6}
.ask-m{display:flex;gap:8px;align-items:center;margin-top:11px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted)}

/* my notes, read as a thread */
.notecard{cursor:pointer}
.nc-when{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted)}
.nc-ref{font-weight:650;font-size:13px;color:var(--blue-ink);margin-top:4px}
.nc-v{font:15px/1.68 var(--serif);color:var(--ink-2);margin:8px 0 0;padding-left:12px;
  border-left:3px solid var(--line-2)}
.nc-n{white-space:pre-wrap;font-size:14.5px;line-height:1.65;margin-top:11px}

/* what happened while you were away */
.awaycard{margin-top:18px;border-color:var(--blue)}
.away-t{font-weight:700;font-size:15.5px;margin-bottom:4px}
.away-r{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  margin-top:11px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.away-r b{color:var(--ink)}
.away-r:hover{color:var(--ink)}

/* what the search actually matched on */
.matchon{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:16px 0 4px;
  font-size:13px;color:var(--muted)}
.matchon b{background:var(--blue-wash);color:var(--blue-ink);border-radius:20px;
  padding:3px 11px;font-weight:650}

/* reading the same chapter at the same time */
.togetherbar{position:fixed;left:10px;right:10px;z-index:44;display:flex;gap:12px;
  align-items:center;background:var(--card);border:1px solid var(--blue);
  border-radius:16px;padding:11px 13px;box-shadow:0 10px 30px rgba(28,26,22,.2);
  bottom:calc(78px + env(safe-area-inset-bottom));animation:wpin .2s ease}
@media(min-width:761px){.togetherbar{left:auto;right:20px;bottom:20px;width:min(360px,90vw)}}
.togetherbar .tg-f{display:flex}
.togetherbar .tg-f .av{margin-right:-8px;border:2px solid var(--card)}
.togetherbar .tg-x{flex:1;min-width:0}
.togetherbar .tg-t{font-weight:650;font-size:14px}
.togetherbar .tg-s{font-size:12.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peerdot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:9px;font-weight:700;color:#fff;vertical-align:middle;margin-left:6px}

/* ============================================================================
   v33 — tap and hold, the ask box, the three-part prompt, where a topic lands,
   the journal, zen reading, and printing.
   ========================================================================== */

/* ---------------------------------------------------------- the wordmark */
header.top .brand.clickable{cursor:pointer;border-radius:10px;padding:4px 6px;margin-left:-6px;
  transition:background .15s}
header.top .brand.clickable:hover{background:var(--sunk)}
header.top .brand.clickable:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------------------------------------------------------- press and hold a word
   A tap is the verse; a hold is the word. The verse dims very slightly while the
   hold is counting so the wait does not feel like nothing happening. On a touch
   screen the iOS callout bubble would fight the same gesture, so it is turned off
   over the text only. */
.chapter .v.holding{background:var(--sunk);border-radius:5px;transition:background .12s}
@media(hover:none){
  .chapter .v{-webkit-touch-callout:none}
}

/* ---------------------------------------------------------- ask it a question */
.search{position:relative}
.askpop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 34px rgba(28,26,22,.16);padding:12px 12px 10px;
  max-height:min(64vh,420px);overflow:auto}
html[data-theme="dark"] .askpop{box-shadow:0 10px 34px rgba(0,0,0,.5)}
.askpop-h{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;font-weight:650;
  color:var(--muted);padding:2px 6px 8px}
.askpop-l{display:flex;flex-direction:column;gap:2px}
.askpop-l button{text-align:left;padding:9px 10px;border-radius:10px;font-size:14px;
  color:var(--ink);line-height:1.45}
.askpop-l button:hover,.askpop-l button:focus-visible{background:var(--blue-wash);color:var(--blue-ink)}
.askpop-f{font-size:12px;line-height:1.6;color:var(--muted);padding:10px 6px 2px;
  margin-top:6px;border-top:1px solid var(--line)}
.askline{margin:14px 0 4px}
.askline-h{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.chip.ask{background:var(--blue-wash);border-color:transparent;color:var(--blue-ink);
  font-weight:550;text-align:left;line-height:1.4}
.chip.ask:hover{border-color:var(--blue)}

/* ---------------------------------------------------------- the three-part prompt
   Nothing is open until it is chosen, so nothing on the page is asking. */
.ponderacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.ponderact{border:1px solid var(--line-2);background:var(--card);border-radius:20px;
  padding:6px 13px;font-size:13px;font-weight:600;color:var(--ink-2);
  transition:background .14s,border-color .14s,color .14s}
.ponderact:hover{border-color:var(--blue);color:var(--blue-ink)}
.ponderact.written{border-color:var(--green);color:var(--green-ink)}
.ponderact.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ponderact.on.written{background:var(--green);border-color:var(--green);color:#fff}
.ponderslot:empty{display:none}
.ponderbox{margin-top:11px}
.ponderwho{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:7px;
  display:flex;align-items:center;gap:6px}
.ponderwho:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.ponderwho.share{color:var(--blue-ink)}
.ponderwho.share:before{background:var(--blue)}
.ponder .saverow .opthint{flex-basis:100%;margin-top:2px}
.nc-n.private{border-left:3px solid var(--line-2);padding-left:10px;margin-top:8px;
  color:var(--muted);font-style:italic}

/* ---------------------------------------------------------- where a topic lands */
.finishedcard{margin:16px 0;border-color:var(--green);background:var(--green-wash)}
.finishedcard .fc-t{font-weight:700;font-size:16px;color:var(--green-ink)}
.finishedcard .fc-s{font-size:13.5px;color:var(--ink-2);margin:5px 0 13px;line-height:1.6}
.restcard{margin-top:18px;border-left:4px solid var(--aqua)}
.restcard .rc-k{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;font-weight:700;
  color:var(--aqua-ink)}
.restcard .rc-r{font-weight:700;font-size:17px;margin-top:7px}
.restcard .rc-t{font:var(--read-size)/1.85 var(--read-face);margin-top:10px;color:var(--ink)}
.restcard .rc-w{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.6}
.restcard .btn{margin-top:14px}
.carrylist{display:flex;flex-direction:column;gap:8px}
.carryrow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card);
  transition:border-color .14s,background .14s}
.carryrow:hover{border-color:var(--blue)}
.carryrow.on{border-color:var(--green);background:var(--green-wash)}
.carryrow .cr-r{font-weight:650;font-size:14px}
.carryrow .cr-t{grid-column:1/-1;font:14.5px/1.6 var(--serif);color:var(--ink-2)}
.carryrow .cr-x{font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap;align-self:center}
.carryrow.on .cr-x{color:var(--green-ink)}
.carrycard{margin-top:16px;border-left:4px solid var(--aqua);background:var(--aqua-wash)}
.carrycard .cc-k{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--aqua-ink)}
.carrycard .cc-r{font-weight:700;font-size:16px;margin-top:6px}
.carrycard .cc-t{font:var(--read-size)/var(--read-line) var(--read-face);margin-top:8px}
.carrycard .cc-f{font-size:12.5px;color:var(--muted);margin-top:9px}

/* ---------------------------------------------------------- the journal */
.journalcard{border-left:4px solid var(--violet)}
.journalcard .jc-k{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--violet)}
.journalcard .jc-t{font-weight:650;font-size:16px;margin-top:6px}
.journalcard .jc-b{font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.65}
.journalcard .btn{margin-top:13px}
.j-when{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
textarea.j-note{min-height:150px;font:16px/1.75 var(--serif)}
.chips.feelings{gap:7px}
.chips.feelings .chip{padding:7px 14px}
.jverse{margin-bottom:10px;border-left:3px solid var(--violet)}
.jverse .jv-r{font-weight:650;font-size:14.5px}
.jverse .jv-t{font:var(--read-size)/1.8 var(--read-face);margin-top:8px;color:var(--ink)}
.jverse .jv-w{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.6}

/* ---------------------------------------------------------- zen reading
   The header steps aside while the page is moving down. Phones only: on a laptop
   the header is not what is in the way. */
@media(max-width:760px){
  header.top{transition:transform .24s cubic-bezier(.2,.8,.3,1);will-change:transform}
  .readbar{transition:top .24s cubic-bezier(.2,.8,.3,1)}
  body.zen-mode header.top{transform:translateY(-100%)}
  body.zen-mode .readbar{top:6px}
}
@media(prefers-reduced-motion:reduce){header.top,.readbar{transition:none}}
/* a dialog or the verse sheet must never be left under a hidden header */
body.sheet-open header.top{transform:none !important}

/* ---------------------------------------------------------- print / save as PDF */
@media print{
  /* print in daylight whatever the screen was set to */
  :root,html[data-theme="dark"]{
    --paper:#fff; --card:#fff; --sunk:#f3f3f3;
    --ink:#000; --ink-2:#222; --muted:#555;
    --line:#ccc; --line-2:#ddd; --shadow:none;
    --blue-wash:#fff; --amber-wash:#fff; --green-wash:#fff;
    --coral-wash:#fff; --violet-wash:#fff; --aqua-wash:#fff;
  }
  html,body{background:#fff !important;color:#000 !important}
  #boot,.authwrap,.newswrap,.toast,dialog,
  header.top,nav.side,nav.tabbar,.tabbar,.guestbar,.togetherbar,
  .readbar,.readside,.readdone,.player,.taphint,.sidetabs,.cameback,
  .swipeback,.cardmenu,.cardmenubox,.madeby,.testtabs,.askpop,.askline,
  .ponderacts,.ponderslot,.carrylist,.saverow,
  .btn,button.btn,.morebtn,.iconbtn,.linkbtn,.moretxt{display:none !important}
  .app,.app.on{display:block !important}
  .body{display:block !important}
  main{display:block !important}
  .view{padding:0 !important}
  .wrap{max-width:none !important;margin:0 !important}
  .readshell{display:block !important}
  .readmain{padding:0 !important}
  .swipe{overflow:visible !important;margin-bottom:8px !important}
  .swipefront{transform:none !important;box-shadow:none !important;transition:none !important}
  .card{box-shadow:none !important;border:1px solid #ccc !important;
    page-break-inside:avoid;break-inside:avoid}
  .notecard,.jverse,.restcard{page-break-inside:avoid;break-inside:avoid}
  .h-title,.lbl{page-break-after:avoid;break-after:avoid}
  @page{margin:16mm}
}

/* ---------------------------------------------------------- notes search + habit
   (the v32 heatmap and note search, given the styles they were written against) */
.notesearch{position:relative;margin-top:16px;max-width:520px}
.notesearch .tx{width:100%}
.caltext{font:17px/1.75 var(--serif);color:var(--ink);background:var(--sunk);
  border-radius:12px;padding:16px 18px;max-height:46vh;overflow:auto}
.heat{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.hc{display:inline-block;width:16px;height:16px;border-radius:3px;background:var(--sunk);
  vertical-align:-2px}
.hc.l0{background:var(--sunk)}
.hc.l1{background:var(--green);opacity:.34}
.hc.l2{background:var(--green);opacity:.64}
.hc.l3{background:var(--green)}
.heat .hc.today{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--blue)}
.heatfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:13px;font-size:12px;color:var(--muted)}
.heatfoot .key{display:flex;align-items:center;gap:4px}
.heatfoot .key .hc{width:11px;height:11px}
@media print{.heat .hc,.hc{-webkit-print-color-adjust:exact;print-color-adjust:exact}}