/* ===========================================================
   mirror — theme tokens + component styles
   Light (warm cream) and Dark (warm charcoal) share all markup;
   only the [data-theme] token block changes.
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ---------------- tokens ---------------- */
[data-theme="light"] {
  --bg:        #f3f2ea;
  --surface:   #fbfaf4;
  --surface-2: #ffffff;
  --ink:       #211e1a;
  --ink-soft:  #8b867c;
  --ink-faint: #aaa495;
  --line:      #211e1a;          /* the near-black card outline */
  --hair:      rgba(33,30,26,.12);
  --cell-empty:#e7e4db;
  --shadow:    rgba(33,30,26,.10);

  --coral:  #d4775f;
  --orange: #e0925f;
  --gold:   #e0bd57;
  --sage:   #a3c267;
  --green:  #5f9a4e;
  --purple: #8f6fb0;
  --sky:    #94bdda;

  --coral-soft:   #f6e5df;
  --decay-ink:    #c06a52;
  --sage-chip-bg: #d7e3bf;
  --sage-chip-ink:#4f6a36;
  --pink-chip-bg: #eccfc8;
  --pink-chip-ink:#b3705e;
  --avatar:       #d98a5f;
  --danger-soft:  #ecc3ba;
  --glyph-ink:    #211e1a;

  --nav-home:    #d4775f;
  --nav-entries: #8a9a52;
  --nav-goals:   #7fa8cf;
  --nav-me:      #c9a24a;
}

[data-theme="dark"] {
  --bg:        #201e1b;
  --surface:   #2a2724;
  --surface-2: #322e29;
  --ink:       #ece7dd;
  --ink-soft:  #a39c90;
  --ink-faint: #7d766b;
  --line:      #574f45;
  --hair:      rgba(236,231,221,.12);
  --cell-empty:#36322d;
  --shadow:    rgba(0,0,0,.40);

  --coral:  #db8b76;
  --orange: #e3a173;
  --gold:   #e3c46c;
  --sage:   #b0cb7d;
  --green:  #79ab5c;
  --purple: #a98cc6;
  --sky:    #a3c6e3;

  --coral-soft:   #3a2b27;
  --decay-ink:    #e0917b;
  --sage-chip-bg: #374030;
  --sage-chip-ink:#bcd394;
  --pink-chip-bg: #43302b;
  --pink-chip-ink:#e2a08c;
  --avatar:       #cf8259;
  --danger-soft:  #5a3b34;
  --glyph-ink:    #241f1a;

  --nav-home:    #db8b76;
  --nav-entries: #aabd72;
  --nav-goals:   #8fb4d6;
  --nav-me:      #e0bd6a;
}

/* ---------------- phone frame ---------------- */
.phone {
  position: relative;
  width: 322px;
  height: 700px;
  border-radius: 30px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  color: var(--ink);
  font-family: 'Mulish', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.45);
}

/* status bar */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 32px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; z-index: 8;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  color: var(--ink);
}
.statusbar .sb-r { display: flex; align-items: center; gap: 5px; }
.batt {
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700;
  color: var(--bg); background: var(--ink);
  padding: 1px 6px 1px 5px; border-radius: 7px; letter-spacing: .02em;
}
.sb-bars { display:flex; align-items:flex-end; gap:1.5px; height:10px; }
.sb-bars i { width:2.5px; background:var(--ink); border-radius:1px; }

/* scrollable screen body */
.screen {
  position: absolute; left: 0; right: 0;
  top: 32px; bottom: 0;
  padding: 6px 18px 0;
  overflow: hidden;
}
.screen.with-nav { bottom: 58px; }
.screen.scroll  { overflow-y: auto; }
.screen::-webkit-scrollbar { width: 0; }

/* ---------------- typography ---------------- */
.scr-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:27px; letter-spacing:-.02em; color:var(--ink); margin:0; line-height:1.05; }
.scr-sub   { font-family:'Mulish',sans-serif; font-weight:400; font-size:14.5px; color:var(--ink-soft); margin:4px 0 0; line-height:1.35; }
.mono      { font-family:'JetBrains Mono',monospace; }
.h-sec     { font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:var(--ink); margin:0; letter-spacing:-.01em; }

/* ---------------- cards & rows ---------------- */
.card {
  background: var(--surface);
  border: 1.6px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 3px 0 -1px var(--shadow);
}

.me-row {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 14px;
  background: var(--surface);
  border: 1.6px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 3px 0 -1px var(--shadow);
}
.me-row .label { font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--ink); line-height:1.15; }
.me-row .value { font-family:'Mulish',sans-serif; font-size:14px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.glyph {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 13px;
  border: 1.6px solid var(--line);
  display: grid; place-items: center;
  color: var(--glyph-ink);
}
.glyph.green  { background: var(--sage); }
.glyph.gold   { background: var(--gold); }
.glyph.sky    { background: var(--sky); }
.glyph.coral  { background: var(--coral); }

.chev { color: var(--ink-faint); display: grid; place-items: center; }

/* dashed danger row */
.dashed-row {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 15px;
  border: 1.6px dashed var(--coral);
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
.dashed-row .d-glyph {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--coral);
  border: 1.6px solid var(--line);
  display: grid; place-items: center; color: #fff;
}
.dashed-row .d-title { font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--coral); line-height:1.15; }
.dashed-row .d-sub   { font-family:'Mulish',sans-serif; font-size:13.5px; color:var(--ink-soft); margin-top:3px; line-height:1.3; }

/* ---------------- bottom nav ---------------- */
.bottomnav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
  border-top: 1.5px solid var(--line);
  background: var(--surface);
  display: grid; grid-template-columns: repeat(4,1fr);
  align-items: center; z-index: 6;
}
.nav-item { text-align: center; position: relative; }
.nav-item .nav-ico { display:grid; place-items:center; height:22px; margin-bottom:3px; }
.nav-item .nav-lbl { font-family:'Mulish',sans-serif; font-weight:700; font-size:12px; }
.nav-item.active .nav-lbl { color: var(--ink); }
.nav-item:not(.active) .nav-lbl { color: var(--ink-faint); }
.nav-item .nav-bar {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 2px;
}

/* ---------------- floating action buttons ---------------- */
.fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.45);
  border: none;
}
.fab.small { width: 50px; height: 50px; }
.fab.compose { width: 46px; height: 46px; }
.fab.close { width: 50px; height: 50px; }
.fab.green { background: var(--sage); color: var(--glyph-ink); border: 1.6px solid var(--line); }
.fab.muted { background: var(--cell-empty); color: var(--ink-faint); border: 1.6px solid var(--line); }

/* ---------------- chips / search ---------------- */
.searchbar {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1.6px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  color: var(--ink-faint);
  font-family:'Mulish',sans-serif; font-size: 16px;
}
.chip {
  font-family:'Mulish',sans-serif; font-style: italic; font-weight: 600; font-size: 12.5px;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.chip.sage { background: var(--sage-chip-bg); color: var(--sage-chip-ink); }
.chip.pink { background: var(--pink-chip-bg); color: var(--pink-chip-ink); }

/* ---------------- heatmap ---------------- */
.heat { display: grid; gap: 4px; }
.heat-row { display: grid; gap: 4px; grid-auto-flow: column; }
.heat-cell { width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--cell-empty); }
.legend { display:flex; align-items:center; justify-content:center; gap:6px; }
.legend .sw { width:15px; height:15px; border-radius:4px; }

/* ---------------- buttons & inputs ---------------- */
.btn {
  font-family:'Poppins',sans-serif; font-weight:700; font-size:15px;
  border-radius: 12px; padding: 13px; cursor: pointer;
  border: 1.6px solid var(--line); background: var(--surface); color: var(--ink);
}
.btn.ink     { background: var(--ink); color: var(--bg); }
.btn.disabled{ background: var(--ink-faint); color: var(--surface); border-color: var(--ink-faint); cursor: default; }
.btn.danger  { background: var(--coral); color: #fff; }
.btn.danger-soft { background: var(--danger-soft); color: #fff; border-color: var(--danger-soft); cursor: default; }

.input {
  width: 100%; background: var(--surface);
  border: 1.6px solid var(--line); border-radius: 13px;
  padding: 14px 15px; color: var(--ink);
  font-family:'Mulish',sans-serif; font-size: 17px; outline: none;
}
.input::placeholder { color: var(--ink-faint); }
.field-label {
  font-family:'JetBrains Mono',monospace; font-size: 11px; letter-spacing:.08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; display: block;
}

/* requirement checklist */
.reqs { border: 1.5px solid var(--hair); border-radius: 14px; padding: 12px 14px; }
.req { display:flex; align-items:center; gap:11px; padding:5px 0; color:var(--ink-soft); font-size:15px; }
.req .ring { width:20px; height:20px; border-radius:50%; border:2px solid var(--ink-faint); flex-shrink:0; }

/* strength meter */
.meter { display:flex; gap:6px; }
.meter .seg { flex:1; height:5px; border-radius:3px; background:var(--cell-empty); }

/* ---------------- modal / dialog ---------------- */
.scrim { position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:20; display:grid; place-items:center; padding:18px; }
.scrim.sheet-anchor { align-items:center; }
.modal {
  width: 100%; background: var(--surface);
  border-radius: 22px; padding: 22px 20px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.5);
}
.dialog {
  width: 100%; background: var(--surface);
  border-radius: 22px; padding: 22px 18px 18px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.5);
}
.warn-mark {
  width:60px; height:60px; border-radius:50%; margin:0 auto 14px;
  background: var(--coral); color:#fff; display:grid; place-items:center;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:30px;
}
.what-box {
  background: var(--surface-2); border:1.5px solid var(--hair);
  border-radius: 14px; padding: 14px 16px;
  font-family:'Mulish',sans-serif; font-size:15px; color:var(--ink);
}
.what-box li { padding: 3px 0; }

/* small pill (e.g. "→ flat", "see all") */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  border:1.6px solid var(--line); border-radius:999px;
  padding:6px 13px; font-family:'JetBrains Mono',monospace;
  font-size:13px; font-weight:500; color:var(--ink); background:transparent;
}

/* goal compact row (overview) */
.goal-row { display:flex; align-items:center; gap:10px; padding:12px 4px; }
.goal-row + .goal-row { border-top:1.5px solid var(--hair); }
.sw-box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line); flex-shrink:0; }

/* entries */
.entry-card { background:var(--surface); border:1.6px solid var(--line); border-radius:16px; padding:14px 15px; box-shadow:0 3px 0 -1px var(--shadow); }
.day-h { font-family:'Poppins',sans-serif; font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-.01em; }

/* segmented theme control */
.seg-ctrl { display:flex; gap:4px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:11px; padding:4px; }
.seg-ctrl button {
  flex:1; border:none; background:transparent; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600;
  color:var(--ink-soft); padding:7px 4px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition: background .2s, color .2s;
}
.seg-ctrl button.on { background:var(--ink); color:var(--bg); }

/* misc */
.divider { height:1.5px; background:var(--hair); border:none; }
.text-soft  { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }