/* Home — the night is the primary world: a dark room with a warm lamp on. */

:root {
  --ground:#15111b; --raised:#1e1826; --raised-2:#282130;
  --ink:#f1ebf3; --ink-dim:#a99eb3; --ink-faint:#6e6479;
  --line:rgba(255,255,255,.09); --line-firm:rgba(255,255,255,.16);
  --accent:#e9a35f; --feed:#e9a35f; --sleep:#9d9ae0; --nappy:#8fb08a;
  --warn:#e08a7a;
  --f-display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --ground:#f7f5f8; --raised:#ffffff; --raised-2:#f1eef3;
    --ink:#241d2b; --ink-dim:#675e70; --ink-faint:#948b9d;
    --line:rgba(36,29,43,.10); --line-firm:rgba(36,29,43,.18);
    --accent:#9c5c1e; --feed:#9c5c1e; --sleep:#4f4ba0; --nappy:#47703f;
    --warn:#a8412c;
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  margin:0; padding:0; height:100%;
  background:var(--ground); color:var(--ink);
  font-family:var(--f-ui);
  overscroll-behavior-y:none;
}

#app { display:flex; flex-direction:column; height:100dvh; }

/* ---------- lock ---------- */
.lock { flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
        justify-content:center; gap:24px; padding:0 34px; }
.mark { width:52px; height:52px; border-radius:50%;
        background:radial-gradient(circle at 38% 32%, var(--accent), transparent 68%), var(--raised-2);
        border:1px solid var(--line-firm); }
.lock h1 { font-family:var(--f-display); font-size:27px; font-weight:600; margin:0; letter-spacing:-.015em; }
.lock .sub { font-size:13px; color:var(--ink-dim); margin:-14px 0 0; text-align:center; line-height:1.5; }
.lock .sub.bad { color:var(--warn); }
.dots { display:flex; gap:13px; }
.dot { width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line-firm); transition:background .15s,border-color .15s; }
.dot.filled { background:var(--accent); border-color:var(--accent); }
.keypad { display:grid; grid-template-columns:repeat(3,74px); gap:15px; }
.key { height:74px; border-radius:50%; border:1px solid var(--line); background:var(--raised);
       color:var(--ink); font-size:25px; font-family:var(--f-ui); font-variant-numeric:tabular-nums;
       cursor:pointer; transition:background .12s, transform .12s; }
.key:active { background:var(--raised-2); transform:scale(.94); }
.key.blank { background:none; border:none; }

/* ---------- shell ---------- */
.screen { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.view { display:none; padding:16px 22px 26px; flex-direction:column; gap:18px; }
.view.on { display:flex; }
.vhead { display:flex; align-items:baseline; justify-content:space-between; }
.vhead h2 { font-family:var(--f-display); font-size:27px; font-weight:600; margin:0; letter-spacing:-.015em; }
.vhead .meta { font-size:12.5px; color:var(--ink-faint); }

/* ---------- the PIN is off ----------
   Unmissable on purpose. This is the only thing between "open for a demo" and
   "open for months without anyone noticing". */
.openbar {
  flex:0 0 auto;
  background:var(--warn);
  color:#1a0f0c;
  padding:9px 22px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
}
@media (prefers-color-scheme: light) { .openbar { color:#fff; } }

/* ---------- offline banner ---------- */
.offline { display:none; background:var(--raised-2); border-bottom:1px solid var(--line);
           padding:9px 22px; font-size:12.5px; color:var(--ink-dim); text-align:center; }
.offline.on { display:block; }
.offline b { color:var(--ink); }

/* ---------- prediction ---------- */
.predict { background:linear-gradient(155deg, color-mix(in srgb, var(--sleep) 20%, var(--raised)), var(--raised));
           border:1px solid color-mix(in srgb, var(--sleep) 34%, var(--line));
           border-radius:18px; padding:17px; }
.predict .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); font-weight:600; }
.predict .big { font-family:var(--f-display); font-size:29px; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }
.predict .why { font-size:12.5px; color:var(--ink-dim); line-height:1.5; margin-top:7px; }
.predict .conf { font-size:11.5px; color:var(--ink-faint); margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }

/* ---------- since ---------- */
.since { display:flex; flex-direction:column; gap:9px; }
.scard { background:var(--raised); border:1px solid var(--line); border-radius:17px;
         padding:15px 17px; display:flex; align-items:center; gap:14px; }
.scard .stripe { width:3px; align-self:stretch; border-radius:3px; flex:0 0 auto; }
.scard .body { flex:1 1 auto; min-width:0; }
.scard .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); font-weight:600; }
.scard .val { font-family:var(--f-display); font-size:31px; line-height:1.12; margin-top:3px;
              font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.scard .note { font-size:12.5px; color:var(--ink-dim); margin-top:2px; }
.scard.live { border-color:var(--sleep); background:color-mix(in srgb, var(--sleep) 11%, var(--raised)); }

/* ---------- buttons ---------- */
.quick { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.qbtn { background:var(--raised); border:1px solid var(--line); color:var(--ink); border-radius:15px;
        padding:15px 6px 13px; display:flex; flex-direction:column; align-items:center; gap:7px;
        cursor:pointer; font-family:var(--f-ui); font-size:13px; font-weight:600;
        transition:transform .12s, border-color .12s; }
.qbtn:active { transform:scale(.96); }
.qbtn .glyph { width:21px; height:21px; border-radius:6px; }

.btn { border:none; border-radius:13px; padding:15px; font-family:var(--f-ui); font-size:15px;
       font-weight:600; cursor:pointer; width:100%; transition:transform .12s; }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--accent); color:var(--ground); }
.btn.ghost { background:var(--raised-2); color:var(--ink); border:1px solid var(--line); }

.tally { display:flex; border:1px solid var(--line); border-radius:15px; overflow:hidden; }
.tally div { flex:1 1 0; padding:13px 8px; text-align:center; background:var(--raised); }
.tally div + div { border-left:1px solid var(--line); }
.tally .n { font-family:var(--f-display); font-size:21px; font-variant-numeric:tabular-nums; }
.tally .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-top:3px; font-weight:600; }

/* ---------- timeline ---------- */
.tl { display:flex; flex-direction:column; }
.tl .row { display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.tl .row:last-child { border-bottom:none; }
.tl .row.pending { opacity:.55; }
.tl .when { font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; width:58px; flex:0 0 auto; padding-top:1px; }
.tl .pip { width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:5px; }
.tl .what { flex:1 1 auto; font-size:14.5px; }
.tl .what small { display:block; color:var(--ink-dim); font-size:12.5px; margin-top:2px; }
.tl .who { font-size:11px; color:var(--ink-faint); padding-top:2px; }
.daylabel { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
            font-weight:600; padding:14px 0 2px; }
.empty { color:var(--ink-faint); font-size:13.5px; line-height:1.55; padding:14px 0; }

/* ---------- milestones ---------- */
.mstone { display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.mstone:last-child { border-bottom:none; }
.mstone .d { font-size:12px; color:var(--ink-faint); width:58px; flex:0 0 auto; }
.mstone .t { font-size:14.5px; flex:1 1 auto; }

/* ---------- sheet ---------- */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none;
         transition:opacity .22s; z-index:20; }
.scrim.on { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:21; background:var(--raised);
         border-top:1px solid var(--line-firm); border-radius:24px 24px 0 0; padding:10px 22px 30px;
         transform:translateY(102%); transition:transform .26s cubic-bezier(.32,.72,0,1);
         display:flex; flex-direction:column; gap:16px; max-height:88%; overflow-y:auto; }
.sheet.on { transform:translateY(0); }
.grab { width:34px; height:4px; border-radius:4px; background:var(--line-firm); margin:0 auto 4px; }
.sheet h3 { font-family:var(--f-display); font-size:21px; margin:0; font-weight:600; }
.sheet p.hint { margin:-6px 0 0; font-size:13px; color:var(--ink-dim); line-height:1.5; }

.seg { display:flex; background:var(--raised-2); border-radius:12px; padding:3px; gap:3px; }
.seg button { flex:1 1 0; border:none; background:none; color:var(--ink-dim); padding:11px 6px;
              border-radius:9px; font-family:var(--f-ui); font-size:14px; font-weight:600;
              cursor:pointer; transition:background .15s, color .15s; }
.seg button.on { background:var(--raised); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.16); }
.seg.mini button { padding:8px 6px; font-size:12.5px; }

.pick { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pick.three { grid-template-columns:repeat(3,1fr); }
.pick button { border:1px solid var(--line); background:var(--raised-2); color:var(--ink);
               border-radius:13px; padding:17px 8px; font-family:var(--f-ui); font-size:14.5px;
               font-weight:600; cursor:pointer; transition:border-color .14s, background .14s; }
.pick button.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, var(--raised-2)); }

.fieldlbl { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint);
            font-weight:600; margin-bottom:-7px; }
.whenrow { display:flex; gap:7px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:var(--raised-2); color:var(--ink-dim);
        border-radius:999px; padding:8px 14px; font-size:13px; font-family:var(--f-ui);
        cursor:pointer; font-weight:500; transition:border-color .14s, color .14s; }
.chip.on { border-color:var(--accent); color:var(--ink); }

.stepper { display:flex; align-items:center; justify-content:space-between; background:var(--raised-2);
           border:1px solid var(--line); border-radius:13px; padding:9px 13px; }
.stepper button { width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
                  background:var(--raised); color:var(--ink); font-size:21px; cursor:pointer; }
.stepper .amt { font-family:var(--f-display); font-size:27px; font-variant-numeric:tabular-nums; }
.stepper .amt span { font-size:14px; color:var(--ink-dim); font-family:var(--f-ui); }

.field { background:var(--raised-2); border:1px solid var(--line); border-radius:13px;
         padding:13px 15px; color:var(--ink); font-family:var(--f-ui); font-size:15px;
         width:100%; outline:none; }
.field::placeholder { color:var(--ink-faint); }

/* ---------- nav ---------- */
.nav { flex:0 0 auto; display:grid; grid-template-columns:repeat(5,1fr);
       border-top:1px solid var(--line); background:var(--raised);
       padding:9px 4px calc(18px + env(safe-area-inset-bottom)); }
.nav button { background:none; border:none; cursor:pointer; padding:5px 0; display:flex;
              flex-direction:column; align-items:center; gap:5px; color:var(--ink-faint);
              font-family:var(--f-ui); font-size:10.5px; font-weight:600; }
.nav button .ic { width:19px; height:19px; border-radius:6px; border:1.7px solid currentColor; }
.nav button.on { color:var(--accent); }
.nav button.on .ic { background:currentColor; border-color:currentColor; }

/* ---------- toast ---------- */
.toast { position:fixed; left:18px; right:18px; bottom:96px; z-index:30; background:var(--ink);
         color:var(--ground); border-radius:13px; padding:13px 16px; display:flex;
         align-items:center; justify-content:space-between; gap:12px; font-size:13.5px;
         font-weight:600; opacity:0; transform:translateY(11px); pointer-events:none;
         transition:opacity .22s, transform .22s; }
.toast.on { opacity:1; transform:translateY(0); pointer-events:auto; }
.toast button { background:none; border:none; color:var(--ground); font-family:var(--f-ui);
                font-size:13px; font-weight:700; text-decoration:underline; cursor:pointer; opacity:.8; }

.callout { background:var(--raised); border:1px solid var(--line); border-left:2px solid var(--accent);
           border-radius:12px; padding:13px 15px; font-size:12.5px; line-height:1.55; color:var(--ink-dim); }
.callout b { color:var(--ink); font-weight:600; }

.callout.warn { border-left-color:var(--warn); }
.callout.quiet { border-left-color:var(--line-firm); }

/* ---------- roadmap ---------- */
.planbasis { font-size:12.5px; color:var(--ink-dim); line-height:1.5; margin:0 0 4px; }
.plan { display:flex; flex-direction:column; margin-bottom:14px; }
.plan .slot { display:flex; gap:13px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); }
.plan .slot:last-child { border-bottom:none; }
.plan .slot.done { opacity:.45; }
.plan .hr { font-size:13px; color:var(--ink-faint); width:62px; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.plan .act { font-size:14.5px; flex:1 1 auto; }
.plan .act small { display:block; font-size:12px; color:var(--ink-dim); margin-top:1px; }

/* ---------- patterns ---------- */
.chartwrap { margin-top:4px; }
.chart { display:flex; align-items:flex-end; gap:6px; height:124px; }
.chart .bar { flex:1 1 0; background:var(--sleep); border-radius:4px 4px 2px 2px; min-height:3px; }
/* Today is hatched, not just a different colour — an unfinished day must not
   read as a real drop. */
.chart .bar.partial {
  background:repeating-linear-gradient(45deg, var(--accent), var(--accent) 4px,
             transparent 4px, transparent 8px);
  border:1px solid var(--accent);
}
.xaxis { display:flex; gap:6px; margin-top:7px; }
.xaxis span { flex:1 1 0; text-align:center; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; }
.chartnote { font-size:12.5px; color:var(--ink-dim); line-height:1.5; margin:12px 0 4px; }
#obs { display:flex; flex-direction:column; gap:9px; }

/* ---------- photos, not built yet ----------
   A visible placeholder rather than nothing, so it reads as "coming" instead of
   "missing". Deliberately empty outlines — never fake photographs, which would
   make an unbuilt feature look finished. */
.photoslot { border:1px dashed var(--line-firm); border-radius:16px; padding:15px; }
.photoslot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.photoslot-grid span { aspect-ratio:1; border-radius:10px; background:var(--raised-2);
                       border:1px solid var(--line); }
.photoslot-note { font-size:12.5px; line-height:1.55; color:var(--ink-dim); margin:14px 0 0; }
.photoslot-note b { color:var(--ink); font-weight:600; }

/* ---------- ask ---------- */
.chat { display:flex; flex-direction:column; gap:11px; }
.msg { max-width:86%; border-radius:16px; padding:12px 15px; font-size:14.5px;
       line-height:1.55; white-space:pre-wrap; }
.msg.them { background:var(--raised); border:1px solid var(--line); align-self:flex-start;
            border-bottom-left-radius:5px; }
.msg.you { background:var(--accent); color:var(--ground); align-self:flex-end;
           border-bottom-right-radius:5px; font-weight:500; }
.msg.pending { color:var(--ink-faint); font-style:italic; }
.msg.bad { border-color:var(--warn); color:var(--warn); }
.suggest { display:flex; gap:7px; flex-wrap:wrap; }
.suggest button { border:1px solid var(--line); background:var(--raised); color:var(--ink-dim);
                  border-radius:999px; padding:9px 14px; font-size:12.5px;
                  font-family:var(--f-ui); cursor:pointer; text-align:left; }
.suggest button:hover { border-color:var(--line-firm); color:var(--ink); }
.aibar { display:flex; gap:8px; align-items:center; background:var(--raised);
         border:1px solid var(--line); border-radius:14px; padding:5px 5px 5px 15px; }
.aibar input { flex:1 1 auto; background:none; border:none; color:var(--ink);
               font-family:var(--f-ui); font-size:15px; padding:11px 0; outline:none; min-width:0; }
.aibar input::placeholder { color:var(--ink-faint); }
.aibar button { flex:0 0 auto; border:none; background:var(--accent); color:var(--ground);
                border-radius:10px; padding:11px 16px; font-family:var(--f-ui);
                font-size:13.5px; font-weight:700; cursor:pointer; }
.aibar button:disabled { opacity:.5; cursor:default; }

/* ---------- shop ---------- */
.winner { background:var(--raised); border:1px solid var(--line); border-radius:17px;
          padding:17px; display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.winner .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-faint); font-weight:600; }
.winner .big { font-family:var(--f-display); font-size:27px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.winner .cmp { font-size:12.5px; color:var(--ink-dim); margin-top:4px; line-height:1.5; }

.prow { padding:14px 0; border-bottom:1px solid var(--line); }
.prow:last-of-type { border-bottom:none; }
.prow .nm { font-size:14.5px; margin-bottom:9px; }
.prow .nm small { display:block; color:var(--ink-faint); font-size:11.5px; margin-top:2px; }
.stores { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.st { border:1px solid var(--line); border-radius:11px; padding:9px 6px; text-align:center;
      background:var(--raised); color:var(--ink); font-family:var(--f-ui); cursor:pointer;
      transition:border-color .14s; }
.st:hover { border-color:var(--line-firm); }
.st.best { border-color:var(--nappy); background:color-mix(in srgb, var(--nappy) 13%, var(--raised)); }
.st .s { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; }
.st .p { font-family:var(--f-display); font-size:17px; margin-top:3px; font-variant-numeric:tabular-nums; }
.st .u { font-size:10.5px; color:var(--ink-dim); margin-top:1px; font-variant-numeric:tabular-nums; min-height:13px; }
.st .sp { font-size:10px; color:var(--warn); margin-top:2px; }
.st .p.na { color:var(--ink-faint); font-size:12.5px; font-family:var(--f-ui); font-weight:600; }

button:focus-visible, .field:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition-duration:.01ms !important; } }

/* ---- a link that needs a decision -------------------------------------- */
/* Deliberately louder than a price row and placed above them: these say a
   number below is missing, or may not be the product you chose. */
.callout.ask { text-align: left; padding: 14px 16px; }
.callout.ask b { display: block; margin-bottom: 4px; }
.callout.ask span { display: block; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
.callout.ask .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.callout.ask .acts .btn { flex: 1 1 auto; min-width: 96px; padding: 9px 12px; font-size: 13px; }
.callout.ask .opt {
  margin-top: 12px; padding: 11px 12px; border-radius: 12px;
  background: var(--raised-2); border: 1px solid var(--line);
}
.callout.ask .opt .on { font-weight: 600; font-size: 14px; line-height: 1.35; }
.callout.ask .opt .om {
  color: var(--ink-dim); font-size: 13px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* A size change is the one that moves the unit price, so it is called out
   rather than left for the reader to spot in the title. */
.callout.ask .flag {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--warn); white-space: nowrap;
}
.hint.or {
  text-align: center; margin: 14px 0 10px; position: relative; color: var(--ink-dim);
}
.hint.or::before, .hint.or::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 22px); height: 1px;
  background: var(--line);
}
.hint.or::before { left: 0; }
.hint.or::after { right: 0; }