/* Daily Communion — app styles
   Light by default, with a sun/moon toggle (not tied to system dark mode).
   The Sit timer is always dark regardless of the toggle.
   Scale: phone-first. Base type 17px+, tap targets 44px+, generous
   spacing (direction set from the user's Insight Timer references). */

:root{
  --paper:#F7F4EC; --paper-2:#FFFFFF; --card:#FFFFFF;
  --line:#E6E0D2; --ink:#211E19; --ink-soft:#6B6457; --ink-dim:#A49C8C;
  --gold:#B5791E; --gold-soft:#F3E3C4;
  --moon:#3E5C85; --moon-soft:#DCE6F2;
  --lotus:#C2556B; --lotus-soft:#F3DCE1;
  --teal:#2E8B74; --teal-soft:#D9EEE7;
  --danger:#B5432E; --danger-soft:#F6DCD4;
  --display:"EB Garamond",Georgia,serif;
  --body:"Cardo",Georgia,serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0D1017; --paper-2:#161B24; --card:#161B24;
  --line:#272E3B; --ink:#ECE8E0; --ink-soft:#8D8779; --ink-dim:#5E5A52;
  --gold:#D9A441; --gold-soft:#3A2E16;
  --moon:#8FA6C4; --moon-soft:#1E2A3A;
  --lotus:#E38099; --lotus-soft:#3A2630;
  --teal:#4FBFA0; --teal-soft:#16302A;
  color-scheme:dark;
}
/* Timer screens force dark regardless of app theme */
.dk{
  --paper:#0D1017; --paper-2:#161B24; --card:#161B24;
  --line:#272E3B; --ink:#ECE8E0; --ink-soft:#8D8779; --ink-dim:#5E5A52;
  --gold:#D9A441; --gold-soft:#3A2E16;
  --moon:#8FA6C4; --moon-soft:#1E2A3A;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  padding-left:max(0px,env(safe-area-inset-left,0px));
  padding-right:max(0px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}

.ic{width:24px;height:24px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:19px;height:19px}
.ic.lg{width:42px;height:42px}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px max(18px,env(safe-area-inset-left,0px)) 12px max(18px,env(safe-area-inset-right,0px));
  padding-top:max(16px,env(safe-area-inset-top,0px));
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;color:var(--ink)}
.brand .ic{color:var(--gold)}
.themebtn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}

/* ---------- Screens ---------- */
.screen{display:none;flex:1;padding:6px max(18px,env(safe-area-inset-left,0px)) 28px max(18px,env(safe-area-inset-right,0px));}
.screen.on{display:block}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.title{font-family:var(--display);font-size:31px;margin:6px 0 4px}
.title.sm{font-size:21px}
.sub{color:var(--ink-soft);font-size:15.5px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* ---------- Quote card ---------- */
.quote-card{margin:16px 0 20px;text-align:left}
.quote-card .word{font-family:var(--display);font-size:33px;margin:8px 0 12px;color:var(--gold)}
.quote-card .text{font-size:18.5px;line-height:1.7;margin-bottom:12px}
.quote-card .src{font-size:14px;color:var(--ink-dim)}

/* ---------- Check-in ---------- */
.ci-row{display:flex;gap:12px;margin:16px 0}
.ci{flex:1;border:1px solid var(--line);border-radius:16px;padding:20px 14px;text-align:center;background:var(--card);cursor:pointer}
.ci .lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.ci .state{font-family:var(--display);font-size:19px}
.ci.done{background:var(--gold-soft);border-color:var(--gold)}
.ci.done .state{color:var(--gold)}

.streak-row{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--ink-soft);margin:12px 0 0}
.streak-row .ic{color:var(--lotus)}
.streak-row b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Ring button (Sit) ---------- */
.ringwrap{display:flex;justify-content:center;margin:24px 0 8px}
.ringbtn{
  width:96px;height:96px;border-radius:50%;background:var(--moon-soft);color:var(--moon);
  display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;
  box-shadow:0 0 0 7px rgba(63,92,133,.14),0 6px 18px rgba(63,92,133,.26);
  animation:ringpulse 2.6s ease-in-out infinite; cursor:pointer;
}
.ringbtn .t{font-family:var(--display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
@keyframes ringpulse{
  0%,100%{box-shadow:0 0 0 7px rgba(63,92,133,.14),0 6px 18px rgba(63,92,133,.26)}
  50%{box-shadow:0 0 0 13px rgba(63,92,133,.07),0 8px 26px rgba(63,92,133,.38)}
}
@media (prefers-reduced-motion:reduce){.ringbtn{animation:none}}

/* ---------- Rows / lists ---------- */
.row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-size:17px}
.row .m span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:2px}
.thumb{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.thumb .ic{width:26px;height:26px}

/* ---------- Bottom nav — direct icons, no circle/chip background ---------- */
.nav{
  display:flex;border-top:1px solid var(--line);background:var(--paper-2);
  padding:10px max(16px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));
}
.nav button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;color:var(--ink-dim);font-family:var(--body);font-size:13px;
  letter-spacing:.03em;padding:8px 0;cursor:pointer;min-height:56px;
}
.nav button .ic{width:27px;height:27px}
.nav button.on{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  background:var(--gold);color:#17120A;border:none;border-radius:14px;
  padding:16px 22px;font-family:var(--body);font-size:17px;font-weight:600;
  text-align:center;cursor:pointer;min-height:52px;
}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.block{display:block;width:100%}
.btn:disabled{opacity:.5;cursor:default}

input[type=text],input[type=tel],input[type=password]{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);color:var(--ink);font-family:var(--body);font-size:17px;
}
label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);display:block;margin-bottom:8px}
.field{margin-bottom:16px}

.toast{
  position:fixed;left:50%;bottom:100px;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;
  font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;
}
.toast.show{opacity:1}

.center{text-align:center}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}

.gentle-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.gentle-item:last-child{border-bottom:none}
.gentle-item .days{font-size:14px;color:var(--danger)}