/* ── Tokens ──────────────────────────────────────────────
   Warm plum-black ground so the screen never glares at 2am.
   No pure white, no pure black, nothing above ~85% luminance. */
:root{
  --ground:      #17131A;
  --ground-soft: #1E1922;
  --surface:     #241E29;
  --surface-hi:  #2C2532;
  --line:        #382F3E;

  --ink:         #E7DAE2;   /* softest possible "white" */
  --ink-dim:     #B5A3B3;
  --ink-faint:   #7E7085;

  --rose:        #E0A3B4;   /* sleep */
  --sage:        #9EC2AC;   /* gut */
  --mauve:       #B79ACB;   /* stress */
  --sand:        #D9BE9B;   /* food */
  --clay:        #C98F8F;   /* bloating */

  --radius: 18px;
  --pad: 20px;

  --display: "Fraunces", Georgia, serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,textarea{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* ── Lock ─────────────────────────────────────────────── */
.lock{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 80% at 50% 12%, #241C28 0%, var(--ground) 62%);
}
.lock.is-out{opacity:0; pointer-events:none; transition:opacity .5s ease}
.lock-inner{text-align:center; padding:32px}
.lock-mark{
  width:96px; height:96px; border-radius:24px; display:block; margin:0 auto;
  box-shadow:0 14px 40px rgba(224,163,180,.16);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.lock-title{
  font-family:var(--display); font-weight:300;
  font-size:38px; letter-spacing:.02em; margin:14px 0 4px;
}
.lock-sub{color:var(--ink-faint); font-size:14px; margin:0 0 30px; letter-spacing:.04em}
.pin-dots{display:flex; gap:16px; justify-content:center}
.pin-dots i{
  width:11px; height:11px; border-radius:50%;
  border:1px solid var(--ink-faint); transition:.22s;
}
.pin-dots i.on{background:var(--rose); border-color:var(--rose)}
.pin-dots.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
#pinInput{
  position:absolute; opacity:0; height:1px; width:1px; border:0;
}
.pin-error{color:var(--clay); font-size:13px; height:18px; margin:18px 0 0}

/* ── Layout ───────────────────────────────────────────── */
#app{
  max-width:520px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 96px);
}
.view{animation:rise .38s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.head{margin:6px 0 22px}
.eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 6px;
}
.head-title{
  font-family:var(--display); font-weight:300;
  font-size:31px; line-height:1.15; margin:0; letter-spacing:.01em;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad);
  margin-bottom:14px;
}
.card-label{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; margin:0 0 16px;
}
.body-copy{color:var(--ink-dim); font-size:14px; margin:0 0 14px}
.hint{color:var(--ink-faint); font-size:12px}
.hint.center{text-align:center; display:block; margin:12px 0 0}

/* ── Date nav ─────────────────────────────────────────── */
.date-nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; color:var(--ink-dim); font-size:13px; letter-spacing:.05em;
}
.ghost-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink-dim); font-size:15px;
}
.ghost-btn:disabled{opacity:.28}

/* ── Sliders ──────────────────────────────────────────── */
.field{margin-bottom:22px}
.field:last-child{margin-bottom:4px}
.field-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px}
.field-name{font-size:15px; color:var(--ink)}
.field-val{font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.field-label{
  font-size:12px; color:var(--ink-dim); margin:20px 0 10px; letter-spacing:.03em;
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:3px;
  background:linear-gradient(90deg, var(--track-c) 0 var(--fill,50%), var(--line) var(--fill,50%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--track-c); margin-top:-8.5px;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--track-c) 16%, transparent);
}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--line)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border:none;border-radius:50%;background:var(--track-c);
}

/* ── Chips ────────────────────────────────────────────── */
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap; overflow:visible}
.chip{
  flex:0 0 auto;
  padding:9px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--ground-soft);
  color:var(--ink-dim); font-size:13.5px; transition:.18s;
}
.chip.on{
  background:color-mix(in srgb, var(--rose) 20%, var(--surface));
  border-color:var(--rose); color:var(--ink);
}
.chip.num{min-width:42px; text-align:center; font-variant-numeric:tabular-nums}

/* ── Steppers ─────────────────────────────────────────── */
.steppers{display:grid; gap:13px}
.stepper{display:flex; align-items:center; justify-content:space-between}
.stepper-name{font-size:14.5px; color:var(--ink-dim)}
.stepper-ctl{display:flex; align-items:center; gap:14px}
.stepper-ctl button{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink-dim); font-size:17px; line-height:1;
}
.stepper-ctl span{
  min-width:26px; text-align:center; font-variant-numeric:tabular-nums; font-size:15px;
}

textarea{
  width:100%; background:var(--ground-soft); border:1px solid var(--line);
  border-radius:12px; padding:13px; font-size:15px; resize:none; line-height:1.45;
}
textarea::placeholder{color:var(--ink-faint)}
textarea:focus,input:focus,button:focus-visible{outline:2px solid var(--rose); outline-offset:2px}

/* ── Buttons ──────────────────────────────────────────── */
.save-btn{
  width:100%; padding:17px; border-radius:14px; margin-top:6px;
  background:linear-gradient(145deg, #E0A3B4, #C98CAF);
  color:#241019; font-size:16px; font-weight:600; letter-spacing:.02em;
}
.save-btn:active{transform:scale(.985)}
.save-btn.done{background:var(--sage); color:#16261D}
.ghost-wide{
  width:100%; padding:13px; border-radius:12px; margin-top:9px;
  border:1px solid var(--line); color:var(--ink-dim); font-size:14.5px;
}
.ghost-wide.danger{color:var(--clay)}
.sync-line{text-align:center; color:var(--ink-faint); font-size:12px; margin:14px 0 0}

/* ── Trends ───────────────────────────────────────────── */
.range-row{display:flex; gap:8px; margin-bottom:14px}
.range-btn{
  flex:1; padding:10px; border-radius:11px; font-size:13.5px;
  border:1px solid var(--line); color:var(--ink-faint);
}
.range-btn.is-on{background:var(--surface-hi); color:var(--ink); border-color:var(--ink-faint)}
.chart-card{padding:16px 12px}
svg{display:block; width:100%; overflow:visible}
.scale-key{
  display:flex; align-items:center; gap:9px; justify-content:center;
  margin-top:14px; font-size:11px; color:var(--ink-faint); letter-spacing:.05em;
}
.scale-key i{width:90px; height:7px; border-radius:4px; display:block}
.two-key{
  display:flex; gap:18px; justify-content:center; margin-top:12px;
  font-size:12.5px; letter-spacing:.03em;
}
#compareChips{margin-bottom:16px}
.explainer{
  background:var(--ground-soft); border:1px solid var(--line);
  border-radius:14px; padding:17px 18px; margin-bottom:16px;
}
.explainer h4{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; margin:0 0 10px;
}
.explainer p{margin:0 0 9px; font-size:13.5px; color:var(--ink-dim); line-height:1.6}
.explainer p:last-child{margin-bottom:0}
.legend{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:14px}
.leg{
  display:flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px; border:1px solid var(--line);
  font-size:12.5px; color:var(--ink-faint); transition:.18s;
}
.leg .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.leg.off{opacity:.38}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.stat{background:var(--ground-soft); border-radius:13px; padding:14px}
.stat b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:25px; font-variant-numeric:tabular-nums; margin-bottom:2px;
}
.stat span{font-size:11.5px; color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase}

/* ── Patterns ─────────────────────────────────────────── */
.finding{
  background:var(--surface); border:1px solid var(--line);
  border-left:2px solid var(--edge, var(--rose));
  border-radius:14px; padding:17px 18px; margin-bottom:11px;
}
.finding h4{
  font-family:var(--display); font-weight:400; font-size:18px;
  margin:0 0 6px; line-height:1.3;
}
.finding p{margin:0; font-size:14px; color:var(--ink-dim); line-height:1.55}
.strength{
  display:inline-block; margin-top:11px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.empty{
  text-align:center; padding:52px 26px; color:var(--ink-faint);
}
.empty p{font-size:14.5px; line-height:1.6}

/* ── Tabs ─────────────────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; max-width:520px; margin:0 auto;
  padding:10px 10px calc(env(safe-area-inset-bottom) + 10px);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1; padding:9px 0; font-size:12px; letter-spacing:.05em;
  color:var(--ink-faint); border-radius:10px; transition:.2s;
}
.tab.is-on{color:var(--rose)}

/* ── Toast ────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%, 14px);
  background:var(--surface-hi); border:1px solid var(--line);
  padding:11px 19px; border-radius:999px; font-size:13.5px; color:var(--ink);
  opacity:0; pointer-events:none; transition:.3s; z-index:40; white-space:nowrap;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}