/* Daily Bible Journal app — styled to match dailybiblejournal.com (src/styles/global.css).
   Same tokens, same two typefaces, same flat paper-and-rule look, same ribbon accent. */
@font-face{font-family:"Literata";src:url("fonts/literata-latin-opsz-normal.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("fonts/literata-latin-opsz-italic.woff2") format("woff2-variations");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#f7f8f5;--paper-2:#eef1ec;--card:#ffffff;--ink:#1d2b27;--dim:#4a5a55;
  --accent:#2f5d50;--accent-2:#24493f;--ribbon:#9b2335;--mist:#dde3dc;--line:#c9d2c9;--accent-soft:#e3eae4;
  --s-law:#7c5a3a;--s-history:#a07d3b;--s-poetry:#6d7f3c;--s-prophets:#3f6f73;--s-gospels:#9b2335;--s-epistles:#4e4a7a;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius:6px;--on-accent:#fff;--scrim:linear-gradient(180deg,rgba(14,24,21,.30) 0%,rgba(14,24,21,.12) 38%,rgba(14,24,21,.72) 100%);
  /* legacy names used inline in app.js */
  --sage-card:var(--paper-2);--note-bg:var(--paper-2);--tan:var(--mist);--tan-light:var(--paper-2)
}
body:not(.night)[data-paper="white"]{--paper:#ffffff;--paper-2:#f3f5f2}
body.night{--on-accent:#0f1915;--paper:#111916;--paper-2:#18221e;--card:#18221e;--ink:#e8ede9;--dim:#a9b5af;--accent:#8cc5a8;--accent-2:#a6d6bd;--ribbon:#d9768a;--mist:#26332e;--line:#33433d;--accent-soft:#1f3229;
  --s-law:#b08d6c;--s-history:#c9a868;--s-poetry:#9db06a;--s-prophets:#76a6aa;--s-gospels:#d9768a;--s-epistles:#9893c4}
body[data-accent="terracotta"]{--accent:#b0532a;--accent-2:#8f4321} body.night[data-accent="terracotta"]{--accent:#e08a5a}
body[data-accent="sage"]{--accent:#5d7150;--accent-2:#4a5b40} body.night[data-accent="sage"]{--accent:#9db08d}
body[data-accent="navy"]{--accent:#24365e;--accent-2:#1b2948} body.night[data-accent="navy"]{--accent:#8aa0c8}
body[data-accent="plum"]{--accent:#5e2f4d;--accent-2:#4a243c} body.night[data-accent="plum"]{--accent:#c08aa8}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
h2{font-size:30px;margin:28px 0 8px}
h3{font-size:21px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 12px;text-wrap:pretty}
strong,b{font-weight:600}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--ribbon);outline-offset:2px;border-radius:2px}
button,input,select,textarea{font:inherit}
button,.btn,label,nav.tabs button,.segmented button,.pill,.verse-pill,.active-pill,.done-pill,.section-label,.small,.reading-sub,.xp-label,.plan-meta,.eyebrow,.when,.stat-tile span,.premium-sub,.check-list,.plan-price{font-family:var(--sans)}

/* Header — the site's bar: book mark, name, thin mist rule */
header.site{background:var(--paper);border-bottom:1px solid var(--mist);padding:env(safe-area-inset-top,0px) 20px 0;position:sticky;top:0;z-index:30}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.mark{display:inline-flex;align-items:center;gap:10px;font:600 18px/1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.icon-btn{width:40px;height:40px;min-height:40px;border-radius:50%;background:transparent;border:0;color:var(--dim);display:grid;place-items:center;padding:0;box-shadow:none}
.header-meta:empty{display:none}
main{max-width:640px;margin:0 auto;padding:0 20px 104px;position:relative;z-index:10}
body.onboarding nav.tabs{display:none} body.onboarding main{padding-bottom:32px;padding-top:8px}
.view{display:none}.view.active{display:block}

/* Text helpers */
.small{font-size:14px;color:var(--dim);line-height:1.5}
.eyebrow,.section-label{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:28px 0 8px}
.plans-sub,.settings-sub,.lede-muted{color:var(--dim);font-size:17px;margin:0 0 20px}
.settings-sub{font-style:normal}
label{display:block;font:500 14px/1.4 var(--sans);color:var(--dim);margin:14px 0 4px}

/* Buttons — the site's .btn */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--sans);padding:14px 18px;min-height:48px;border-radius:var(--radius);border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;box-shadow:none;margin:4px 0;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
button:active,.btn:active{background:var(--accent-2);border-color:var(--accent-2)}
button.secondary,.btn.secondary{background:transparent;color:var(--accent)}
button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-small,button.btn-small{font-size:14px;padding:10px 14px;min-height:40px}
.link-btn{background:transparent;border:0;color:var(--accent);padding:10px 4px;min-height:44px;font:600 15px/1 var(--sans);margin:0}
.link-btn:active{background:transparent;color:var(--ribbon)}

/* Inputs */
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);font-size:16px;margin:4px 0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
textarea{font-family:var(--serif);min-height:120px;line-height:1.55}
input[type=checkbox]{width:auto;accent-color:var(--ribbon)}

/* Cards — flat paper, thin mist border, small radius. No tilt, no blur. */
.card{background:var(--card);border:1px solid var(--mist);border-radius:var(--radius);padding:20px;margin:16px 0;position:relative}
.card h3:first-child{margin-top:0}

/* Photo sections — the site's mountain photos under a dark scrim */
.photo{position:relative;isolation:isolate;color:#f2f4f0;background:#1d2b27 center/cover no-repeat}
.photo::after{content:"";position:absolute;inset:0;background:var(--scrim);z-index:-1;border-radius:inherit}
.photo h2,.photo h3{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.3)}

/* Today: hero */
.hero{margin:0 -20px;padding:26px 20px 22px;background-image:url("img/machapuchare-dawn.webp");background-position:center 35%}
.hero .when{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(242,244,240,.82);margin:0 0 10px}
.hero .greeting{font-size:34px;margin:0 0 4px;font-weight:500;letter-spacing:-.025em}
.hero .lede{font-size:18px;color:rgba(242,244,240,.86);margin:0}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;border-top:1px solid rgba(255,255,255,.28)}
.hero-stats>div{padding:12px 0 0}
.hero-stats>div+div{padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.hero-stats strong{display:flex;align-items:center;gap:6px;font:500 28px/1.1 var(--serif);color:#fff}
.hero-stats span{display:block;font:500 12.5px/1.35 var(--sans);color:rgba(242,244,240,.8);margin-top:4px}
.hero-xp{display:flex;align-items:center;gap:12px;margin-top:16px;font:500 12.5px/1.3 var(--sans);color:rgba(242,244,240,.8)}
.hero-xp .xp-bar{flex:1;height:3px;background:rgba(255,255,255,.22);margin:0}
.hero-xp .xp-bar-fill{background:#f7f8f5}
.btn-photo{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.72);font-size:14px;padding:9px 14px;min-height:38px;margin:0}
.btn-photo:active{background:rgba(255,255,255,.14);border-color:#fff}

/* Today: the readings card (the site's "Today's readings" card, ribbon and all) */
.today-card{position:relative;background:var(--card);border:1px solid var(--mist);border-radius:4px;padding:22px 20px 8px;margin:20px 0 12px;box-shadow:0 18px 40px -30px rgba(29,43,39,.55)}
.today-card::before{content:"";position:absolute;top:-1px;right:24px;width:16px;height:50px;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}
.today-card .eyebrow{margin:0 0 6px;padding-right:36px}
.today-card h2{font-size:24px;margin:0 0 12px;padding-right:36px}
.group-label{font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:16px 0 8px;border-top:1px solid var(--mist)}
.reading-row{display:flex;align-items:center;gap:14px;border-top:1px solid var(--mist);padding:10px 0;min-height:64px}
.group-label+.reading-row{border-top:0}
.reading-row .check{width:26px;height:26px;min-width:26px;min-height:26px;border-radius:4px;border:1.5px solid var(--dim);background:var(--card);color:#fff;padding:0;margin:0;display:grid;place-items:center;position:relative}
.reading-row .check::after{content:"";position:absolute;inset:-11px}
.reading-row .check.done{background:var(--ribbon);border-color:var(--ribbon)}
body.night .reading-row .check.done{color:#111916}
.reading-body{flex:1;min-width:0}
.reading-title{font:500 19px/1.2 var(--serif);margin:0;color:var(--ink)}
.reading-sub{font-size:13px;color:var(--dim);margin:3px 0 0}
.reading-row.done .reading-title{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--ribbon);text-decoration-thickness:1.5px}
.reading-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.xp-label{font-size:12px;color:var(--dim);margin-top:-6px}
.xp-label.done{color:var(--ribbon)}
.today-foot{display:flex;align-items:center;gap:10px;border-top:2px solid var(--ink);margin-top:4px;padding:10px 0 6px}
.today-foot .count{flex:1;font:500 14px/1.3 var(--sans);color:var(--dim);text-align:center}
.mini-bar{height:3px;background:var(--mist);border-radius:2px;margin-top:6px;overflow:hidden}
.mini-bar i{display:block;height:100%;background:var(--ribbon)}
.day-nav-btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink);padding:0;margin:0;font:400 22px/1 var(--serif)}
.hint{margin:4px 2px 0}
.pacing{margin:22px 0 0}.pacing .eyebrow{margin:0 0 8px}
.pacing-note{color:var(--dim);font-size:14px;line-height:1.5;margin:8px 0 0;font-family:var(--sans)}

/* Segmented control — squared to the site's 6px radius */
.segmented{display:flex;gap:0;margin:8px 0;border:1px solid var(--line);border-radius:var(--radius);padding:3px;background:var(--paper-2)}
.segmented button{flex:1;background:transparent;color:var(--dim);border:0;border-radius:4px;padding:10px 6px;min-height:40px;font-size:14px;font-weight:600;margin:0}
.segmented button.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(29,43,39,.12)}

/* Reminder banner */
.reminder-card{display:flex;gap:12px;align-items:flex-start;border-left:3px solid var(--ribbon);padding:14px 14px 14px 16px}
.bell-circle{color:var(--ribbon);padding-top:2px}
.reminder-title{font:600 16px/1.3 var(--sans)}
.reminder-text{color:var(--dim);font-size:15px;line-height:1.45;margin:2px 0 0}
.reminder-x{margin:0 0 0 auto;background:transparent;border:0;color:var(--dim);font-size:18px;padding:0;min-height:32px;width:32px}

/* Journal */
.journal-card h3{margin-bottom:4px}
.note-textarea{background:var(--paper);border:1px solid var(--line)}
.save-note-btn{width:100%}

/* Verse of the week — a photo panel like the site's photo sections */
.verse-card{background-image:url("img/peak-above-clouds.webp");background-size:cover;background-position:center;border:0;border-radius:var(--radius);padding:26px 22px 22px;margin:24px 0 16px;overflow:hidden}
.verse-card::after{background:linear-gradient(180deg,rgba(14,24,21,.62),rgba(14,24,21,.86))}
.verse-card .eyebrow{color:rgba(242,244,240,.8);margin:0 0 12px}
#verse-text{font:italic 400 20px/1.55 var(--serif);color:#fff;margin:0 0 14px}
.verse-pill{font:600 13px/1 var(--sans);color:rgba(242,244,240,.86);background:none;padding:0}
.verse-quote-close{display:none}

/* Plans — the site's plan list: ink rule on top, rules between, Pace / Length */
.plan-list{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink)}
.plan-row{padding:20px 0;border-bottom:1px solid var(--line)}
.plan-row h3{font-size:22px;font-weight:500;margin:0 0 4px}
.plan-row .covers{color:var(--dim);font-size:16px;margin:0 0 12px}
.pmeta{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 14px;font-family:var(--sans)}
.pmeta dt{font-size:12px;color:var(--dim)}
.pmeta dd{margin:0;font-weight:600;font-size:14px}
.plan-row details{margin:0 0 12px}
.plan-row summary{font:600 14px/1.4 var(--sans);color:var(--accent);cursor:pointer;padding:6px 0;list-style:none}
.plan-row summary::-webkit-details-marker{display:none}
.plan-row summary::after{content:" +"}
.plan-row details[open] summary::after{content:" –"}
.plan-row details p{color:var(--dim);font-size:16px;margin:6px 0 0}
.plan-row.active-row{background:var(--paper-2);margin:0 -20px;padding:20px}
.reading-now{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);color:var(--ribbon);margin:0 0 8px}
.reading-now::before{content:"";width:8px;height:8px;background:var(--ribbon);border-radius:1px}
.start-label{font:500 13px/1.3 var(--sans);color:var(--dim);margin:0 0 2px}
.dashed-btn{width:100%;background:transparent;color:var(--accent);border:1.5px dashed var(--line);font-size:16px}
.chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.book-chip{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:8px 10px;font:500 14px/1 var(--sans);min-height:36px;margin:0}
.book-chip.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.book-chip.expanded{border-color:var(--ribbon);border-width:1.5px}

/* Radio rows (onboarding / start choices) */
.radio-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:8px 0;background:var(--card);cursor:pointer;font-family:var(--sans);font-size:16px}
.radio-row.selected{border-color:var(--accent);background:var(--accent-soft)}
.radio-dot{width:20px;height:20px;min-width:20px;border-radius:50%;border:1.5px solid var(--dim);display:grid;place-items:center;font-size:11px;color:var(--accent)}
.radio-row.selected .radio-dot{border-color:var(--accent)}

/* Progress */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin:8px 0 16px}
.stat-row>div{padding:12px 0}
.stat-row>div+div{padding-left:14px;border-left:1px solid var(--mist)}
.stat-row strong{display:block;font:500 28px/1.1 var(--serif)}
.stat-row span{display:block;font:500 12.5px/1.35 var(--sans);color:var(--dim);margin-top:4px}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:32px 0 4px}
.field-head h2{margin:0;font-size:26px}
.field{margin:12px 0 0}
.cells{display:flex;flex-wrap:wrap;gap:2px;line-height:0}
.cells i{width:7px;height:7px;border-radius:1px;background:var(--mist);display:block}
.cells i.on{background:var(--c)}
.cells i[data-sec="law"]{--c:var(--s-law)}.cells i[data-sec="history"]{--c:var(--s-history)}.cells i[data-sec="poetry"]{--c:var(--s-poetry)}.cells i[data-sec="prophets"]{--c:var(--s-prophets)}.cells i[data-sec="gospels"]{--c:var(--s-gospels)}.cells i[data-sec="epistles"]{--c:var(--s-epistles)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font:500 12.5px/1.3 var(--sans);color:var(--dim)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend b{width:10px;height:10px;border-radius:2px;background:var(--c);display:inline-block}
.legend [data-sec="law"]{--c:var(--s-law)}.legend [data-sec="history"]{--c:var(--s-history)}.legend [data-sec="poetry"]{--c:var(--s-poetry)}.legend [data-sec="prophets"]{--c:var(--s-prophets)}.legend [data-sec="gospels"]{--c:var(--s-gospels)}.legend [data-sec="epistles"]{--c:var(--s-epistles)}
.xp-bar{height:6px;background:var(--mist);border-radius:3px;overflow:hidden;margin:10px 0 6px}
.xp-bar-fill{height:100%;background:var(--accent);border-radius:3px}
.pill{display:inline-block;background:var(--accent-soft);color:var(--ink);border-radius:4px;padding:4px 8px;font-size:13px;font-weight:600}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:16px 0}
.stat-card{padding:14px 0;border-bottom:1px solid var(--mist)}
.stat-card:nth-child(even){padding-left:14px;border-left:1px solid var(--mist)}
.stat-card strong{font:500 24px/1.1 var(--serif);display:block}
.stat-card span{font:500 13px/1.3 var(--sans);color:var(--dim)}
.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0;max-width:210px}
.hm-cell{aspect-ratio:1;border-radius:2px;background:var(--mist)}
.hm-cell.partial{background:color-mix(in srgb,var(--accent) 40%,var(--mist))}
.hm-cell.full{background:var(--accent)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}
.badge-card{background:var(--card);border:1px solid var(--mist);border-radius:var(--radius);padding:14px}
.badge-card .badge-icon{display:block;width:28px;height:28px;color:var(--dim);opacity:.45;margin-bottom:8px}
.badge-card.earned{border-color:var(--line)}
.badge-card.earned .badge-icon{color:var(--ribbon);opacity:1}
.badge-card:not(.earned) .badge-name{color:var(--dim)}
.badge-name{font:600 16px/1.25 var(--serif);margin:0}
.badge-desc{color:var(--dim);font:400 13px/1.4 var(--sans);margin:4px 0 0}
details summary{font-family:var(--sans);font-weight:600;cursor:pointer;padding:8px 0}

/* Settings */
.support-list{padding:0 20px}
.support-row{width:100%;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--mist);border-radius:0;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;min-height:0;margin:0;font:600 16px/1.3 var(--sans)}
.support-row strong{font-weight:600}
.support-row .small{font-weight:400}
.support-row:last-child{border-bottom:0}
.support-row:active{background:transparent;color:var(--accent)}
.toggle{width:52px;height:30px;min-height:30px;border-radius:999px;background:var(--line);border:0;position:relative;padding:0;margin:0;flex-shrink:0}
.toggle.on{background:var(--accent)}
.toggle span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;display:block;transition:left .15s}
.toggle.on span{left:25px}
.preset-grid,.accent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.preset-card,.accent-card{background:var(--card);border:1px solid var(--mist);border-radius:var(--radius);padding:14px;cursor:pointer;font-family:var(--sans);font-size:15px}
.preset-card.selected,.accent-card.selected{border:1.5px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.preset-card p:first-child{display:none}
.accent-dot{width:28px;height:28px;border-radius:4px;display:block;margin-bottom:8px}
.paper-swatch{height:32px;border-radius:4px;border:1px solid var(--line);margin-bottom:8px}
.theme-preview .flame-circle{width:40px;height:40px;border-radius:4px;background:var(--accent);color:#fff;display:grid;place-items:center}
.honest-note{background:var(--paper-2)}
.reader-preview{background:var(--paper-2);border-radius:var(--radius);padding:16px;font-family:var(--serif);margin-top:12px}
.reader-preview.small{font-size:15px}.reader-preview.medium{font-size:18px}.reader-preview.large{font-size:22px}.reader-preview.compact{line-height:1.4}.reader-preview.comfortable{line-height:1.7}.reader-preview.relaxed{line-height:2}
.premium-card h3{font-size:28px;font-weight:500}
.premium-sub{color:var(--dim);font-size:16px;margin:0 0 16px}
.check-list{list-style:none;padding:0;margin:0;font-size:15px;line-height:1.45}
.check-list li{position:relative;padding-left:20px;margin:8px 0}
.check-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--ribbon);border-radius:1px}
.best-pill,.soon-pill,.active-pill,.done-pill{display:inline-block;border-radius:4px;padding:3px 8px;font:600 12px/1.4 var(--sans);white-space:nowrap}
.best-pill,.active-pill{background:var(--ribbon);color:#fff}
.soon-pill{background:var(--paper-2);color:var(--dim)}
.premium-rule{border-top:1px solid var(--line);margin:22px 0 0}
.plan-option{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:8px 0;background:var(--card);cursor:pointer}
.plan-option.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plan-radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:1.5px solid var(--dim);display:grid;place-items:center;font-size:11px;color:#fff}
.plan-option.selected .plan-radio{background:var(--accent);border-color:var(--accent)}
.plan-price{text-align:right;flex-shrink:0}
.plan-price strong{font-size:16px}
.plan-price span{display:block;font-size:13px;color:var(--dim)}
.journal-feature{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--mist)}
.journal-feature:first-of-type{border-top:2px solid var(--ink)}
.journal-feature img{width:92px;border-radius:2px;box-shadow:0 10px 20px -12px rgba(29,43,39,.6)}
.journal-feature h3{font-size:18px;margin:0 0 4px}
.journal-feature p{font-size:15px;color:var(--dim);margin:0 0 10px}
.journal-feature .btn{font-size:14px;padding:10px 14px;min-height:40px}
.ink-panel{background:var(--ink);color:#d6ddd8;border-color:var(--ink);font-family:var(--sans);font-size:15px}
.ink-panel h3{color:#fff;font-family:var(--serif)}
.ink-panel .small{color:#a9b5af}
body.night .ink-panel{background:#0b120f;border-color:#26332e}

/* Reader */
.reader-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0}
.reader-top .segmented{width:150px;margin:0}
.reader{font-family:var(--serif);font-size:19px;line-height:1.75;max-width:36em;margin:16px 0 24px}
.reader.large{font-size:22px}.reader.small{font-size:16px}.reader.relaxed{line-height:2}.reader.compact{line-height:1.45}
.reader sup{font:600 11px/1 var(--sans);color:var(--ribbon);margin-right:2px}
.translation-note{font:500 13px/1.3 var(--sans);color:var(--dim);margin:2px 0 0}

/* Tab bar — the site's nav: ink when active, ribbon rule */
nav.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:30;background:var(--paper);border-top:1px solid var(--mist);padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs button{flex:1;position:relative;background:transparent;color:var(--dim);border:0;border-radius:0;padding:9px 2px 10px;margin:0;min-height:62px;font:500 12px/1 var(--sans);display:flex;flex-direction:column;align-items:center;gap:5px}
nav.tabs button:active{background:transparent}
nav.tabs button.active{color:var(--ink);font-weight:600}
nav.tabs button.active::before{content:"";position:absolute;top:-1px;left:50%;width:28px;margin-left:-14px;height:2px;background:var(--ribbon)}

/* Misc */
#dust{position:fixed;inset:0;pointer-events:none;z-index:15}
.journal-cover{width:100%;border-radius:2px;display:block;margin-bottom:12px}
#toast{position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--radius);text-align:center;font:500 15px/1.4 var(--sans);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s}
#toast.show{opacity:1;transform:translateY(0)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
#verse-text sup{font:600 11px/1 var(--sans);color:rgba(242,244,240,.7);margin-right:3px}
.journal-feature .btn{color:var(--on-accent)}

/* ---------- Web version ---------- */
.webgate-wrap{max-width:520px;margin:0 auto;padding:40px 0 24px}
.webgate-mark{display:flex;align-items:center;gap:12px;font:600 20px/1 var(--serif);margin-bottom:28px}
.webgate-wrap h2{font-size:34px;margin:6px 0 10px}
.webgate-wrap .eyebrow{margin:0}
body.webgate header.site{display:none}
.today-grid{display:block}
.col-main,.col-side{min-width:0}

/* Desktop: the site's header navigation, a wider page, Today in two columns */
@media (min-width:960px){
  header.site{padding:0 max(32px,calc((100vw - 1120px)/2 + 32px))}
  .bar{min-height:64px}
  main{max-width:1120px;padding:0 32px 64px}
  nav.tabs{top:0;bottom:auto;left:auto;right:calc(max(32px,calc((100vw - 1120px)/2 + 32px)) + 52px);height:64px;border:0;background:transparent;padding:0;gap:26px;z-index:31}
  nav.tabs button{flex:none;flex-direction:row;min-height:0;height:64px;padding:0;font:500 15.5px/1 var(--sans);gap:0}
  nav.tabs button svg{display:none}
  nav.tabs button.active::before{top:auto;bottom:12px;left:0;right:0;width:auto;margin:0}
  body.onboarding nav.tabs{display:none}
  #toast{left:auto;right:32px;bottom:32px;max-width:420px}
  .hero{margin:24px 0 0;border-radius:var(--radius);padding:34px 40px 30px}
  .hero .greeting{font-size:44px}
  .hero-stats{max-width:640px}
  .hero-xp{max-width:640px}
  .today-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
  .col-side .journal-card{margin-top:20px}
  .col-side .verse-card{margin-top:16px}
  #view-plans,#view-progress,#view-notes,#view-settings,#view-reader,#view-partner{max-width:760px;margin:0 auto}
  #view-onboarding{max-width:640px;margin:0 auto}
  .reader{font-size:20px}
  .cells i{width:9px;height:9px}
}
button:disabled{opacity:.5;cursor:not-allowed}
.google-btn{min-height:44px;display:flex;justify-content:center;margin:8px 0 4px}
.or-rule{display:flex;align-items:center;gap:12px;margin:14px 0 2px;font:500 13px/1 var(--sans);color:var(--dim)}
.or-rule::before,.or-rule::after{content:"";flex:1;height:1px;background:var(--line)}
/* Phone: native Google button and app lock */
.google-native{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);font:600 15px/1 var(--sans);gap:10px;margin:6px 0 2px}
.google-native:active{background:var(--paper-2);border-color:var(--line)}
#lock-screen{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;padding:24px}
#lock-screen[hidden]{display:none}
#lock-screen .lock-inner{max-width:340px;text-align:center}
#lock-screen h2{font-size:26px;margin:18px 0 6px}
#lock-screen button{width:100%;margin-top:18px}
body.locked main,body.locked nav.tabs,body.locked header.site{visibility:hidden}