/* hearth.css — full app styling (pastel, girl/boy themes) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
input, select, textarea, button { font-family: inherit; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.app { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { user-select: text; }

body {
  font-family: var(--font-sans);
  background: radial-gradient(120% 80% at 50% 0%, var(--page-glow), transparent 70%), var(--page);
  display: flex; align-items: center; justify-content: center;
  height: 100dvh; overflow: hidden; color: var(--ink);
  transition: background .4s ease;
}
#app { width: 100%; max-width: 432px; height: 100dvh; display: flex; flex-direction: column; }
@media (min-width: 520px) { #app { max-width: 560px; } }

/* ---- themes ---- */
:root, [data-theme="girl"] {
  --page:    oklch(0.828 0.125 40); --page-glow: oklch(0.78 0.17 42 / .75);
  --bg:          oklch(0.882 0.120 42); --surface: oklch(0.918 0.092 46);
  --ink: oklch(0.28 0.045 48); --soft: oklch(0.44 0.042 50); --muted: oklch(0.58 0.034 53);
  --hair:        oklch(0.820 0.062 48);
  --accent: oklch(0.56 0.12 45); --accent-ink: oklch(0.46 0.115 43);
  --accent-soft: oklch(0.86 0.082 50); --accent-tint: oklch(0.905 0.055 54);
  --on-accent: oklch(0.985 0.012 70);
  --good: oklch(0.60 0.10 145); --good-deep: oklch(0.46 0.085 145); --good-halo: oklch(0.87 0.06 142);
  --good-tint: oklch(0.91 0.05 142 / .5); --ring-track: oklch(0.88 0.028 62); --ring-awake: oklch(0.72 0.14 50);
  /* material system — raking amber light, fired clay */
  --mat-highlight: oklch(0.86 0.10 58 / 0.40);
  --mat-shadow:    oklch(0.28 0.09 40 / 0.32);
  --mat-cast:      oklch(0.32 0.03 300 / 0.22);
  --mat-glow:      oklch(0.80 0.14 52 / 0.50);
  --tex-plaster:   url('assets/textures/plaster.webp');
  --tex-clay:      url('assets/textures/clay.webp');
  --tex-linen:     url('assets/textures/linen.webp');
  /* fire ember palette */
  --ember-core: oklch(0.86 0.20 56);
  --ember-mid:  oklch(0.74 0.19 42);
  --ember-cool: oklch(0.58 0.16 33);
  --ember-rim:  oklch(0.70 0.175 44 / 0.55);
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --card-bg: var(--surface);
  --light-x: 30%; --light-y: 6%;
}
[data-theme="boy"] {
  --page: oklch(0.940 0.058 175); --page-glow: oklch(0.88 0.095 185 / .65);
  --bg:          oklch(0.950 0.066 172); --surface: oklch(0.968 0.050 172);
  --ink: oklch(0.30 0.035 195); --soft: oklch(0.45 0.032 192); --muted: oklch(0.59 0.028 188);
  --hair:        oklch(0.88 0.034 178);
  --accent: oklch(0.52 0.085 185); --accent-ink: oklch(0.42 0.08 187);
  --accent-soft: oklch(0.85 0.070 180); --accent-tint: oklch(0.922 0.044 178);
  --on-accent: oklch(0.985 0.01 175);
  --good: oklch(0.60 0.095 150); --good-deep: oklch(0.46 0.08 150); --good-halo: oklch(0.87 0.055 148);
  --good-tint: oklch(0.91 0.048 148 / .5); --ring-track: oklch(0.89 0.018 178);
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
}

:is([data-theme="girl"], [data-theme="boy"]):not([data-mode="dark"]) {
  --card-bg: color-mix(in oklch, var(--surface) 80%, transparent);
}

:is([data-theme="girl"], [data-theme="boy"]):not([data-mode="dark"]) :is(.card, .info-card) {
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  background-image:
    radial-gradient(ellipse at 12% 8%, var(--mat-highlight), transparent 52%);
  background-size: 100% 100%;
  background-blend-mode: normal;
}

/* category tones */
.sleep,.tone-sleep { --tc: var(--good-deep); --tcb: var(--good-tint); }
.awake,.tone-awake { --tc: oklch(0.52 0.14 50); --tcb: oklch(0.93 0.09 58); }
.feed,.tone-feed { --tc: var(--accent-ink); --tcb: var(--accent-soft); }
.diaper,.tone-diaper { --tc: oklch(0.55 0.08 70); --tcb: oklch(0.93 0.05 78); }
.med,.tone-med { --tc: oklch(0.5 0.09 35); --tcb: oklch(0.92 0.045 40); }
.note,.tone-note { --tc: var(--muted); --tcb: var(--hair); }
.play,.tone-play { --tc: oklch(0.50 0.09 280); --tcb: oklch(0.90 0.04 285); }
.bath,.tone-bath { --tc: oklch(0.48 0.085 220); --tcb: oklch(0.88 0.04 215); }

/* ---- phone shell ---- */
.phone {
  --pad: 22px; width: 100%; max-width: 432px; height: 100%; flex: 1; min-height: 0;
  background-color: var(--page);
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 5%, var(--mat-highlight), transparent 65%),
    linear-gradient(180deg, oklch(0.87 0.085 52 / 0.55), oklch(0.80 0.115 42 / 0.6)),
    var(--tex-linen);
  background-size: 100% 100%, 100% 100%, 150px 150px;
  background-blend-mode: normal, color, soft-light;
  display: flex; flex-direction: column; overflow: hidden;
  transition: background-color .4s ease; position: relative;
}
@media (min-width: 520px) { .phone { max-width: 560px; } }

/* ---- fire custom properties — animated at :root, inherited by all elements ---- */
@property --fire-a { syntax: '<number>'; inherits: true; initial-value: 0.06; }
@property --fire-b { syntax: '<number>'; inherits: true; initial-value: 0.04; }
@property --fire-c { syntax: '<number>'; inherits: true; initial-value: 0.08; }

/* ---- hearth fire — three coprime periods, ~140s true repeat ---- */
@keyframes fire-a {
  0%   { --fire-a: 0.06; } 11%  { --fire-a: 0.13; } 23%  { --fire-a: 0.05; }
  34%  { --fire-a: 0.11; } 48%  { --fire-a: 0.15; } 61%  { --fire-a: 0.07; }
  64%  { --fire-a: 0.07; } 67%  { --fire-a: 0.19; } 71%  { --fire-a: 0.09; }
  72%  { --fire-a: 0.12; } 84%  { --fire-a: 0.04; } 93%  { --fire-a: 0.10; }
  100% { --fire-a: 0.06; }
}
@keyframes fire-b {
  0%   { --fire-b: 0.04; } 28%  { --fire-b: 0.10; } 51%  { --fire-b: 0.03; }
  74%  { --fire-b: 0.09; } 100% { --fire-b: 0.04; }
}
@keyframes fire-c {
  0%   { --fire-c: 0.08; } 30%  { --fire-c: 0.14; } 60%  { --fire-c: 0.07; }
  80%  { --fire-c: 0.12; } 100% { --fire-c: 0.08; }
}
@property --glare { syntax: '<number>'; inherits: false; initial-value: 0.5; }
body {
  animation:
    fire-a 5.3s ease-in-out infinite,
    fire-b 3.1s ease-in-out infinite,
    fire-c 8.7s ease-in-out infinite;
}
/* dark mode: double intensities — fire dominates in near-dark room */
@keyframes fire-a-dark {
  0%   { --fire-a: 0.12; } 11%  { --fire-a: 0.26; } 23%  { --fire-a: 0.10; }
  34%  { --fire-a: 0.22; } 48%  { --fire-a: 0.30; } 61%  { --fire-a: 0.14; }
  64%  { --fire-a: 0.14; } 67%  { --fire-a: 0.38; } 71%  { --fire-a: 0.18; }
  72%  { --fire-a: 0.24; } 84%  { --fire-a: 0.08; } 93%  { --fire-a: 0.20; }
  100% { --fire-a: 0.12; }
}
@keyframes fire-b-dark {
  0%   { --fire-b: 0.08; } 28%  { --fire-b: 0.20; } 51%  { --fire-b: 0.06; }
  74%  { --fire-b: 0.18; } 100% { --fire-b: 0.08; }
}
@keyframes fire-c-dark {
  0%   { --fire-c: 0.16; } 30%  { --fire-c: 0.28; } 60%  { --fire-c: 0.14; }
  80%  { --fire-c: 0.24; } 100% { --fire-c: 0.16; }
}

/* ---- phone shell fire glow ---- */
.phone::before, .phone::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  mix-blend-mode: overlay;
}
.phone::before {
  background: radial-gradient(ellipse 72% 68% at 14% 100%, oklch(0.72 0.20 40), transparent 68%);
  opacity: var(--fire-a);
}
.phone::after {
  background: radial-gradient(ellipse 48% 42% at 28% 96%, oklch(0.82 0.22 54), transparent 62%);
  opacity: var(--fire-b);
}
[data-mode="dark"] .phone::before {
  mix-blend-mode: screen; /* additive in dark — fire glows ADD light instead of overlay-darkening */
  background: radial-gradient(ellipse 78% 72% at 12% 104%, oklch(0.65 0.24 38), transparent 65%);
  opacity: var(--fire-a);
}
[data-mode="dark"] .phone::after {
  background:
    radial-gradient(ellipse 52% 46% at 24% 100%, oklch(0.75 0.26 50), transparent 58%),
    radial-gradient(ellipse at 50% -10%, transparent 40%, oklch(0.10 0.01 50 / 0.6));
  opacity: var(--fire-b);
}
@media (prefers-reduced-motion: reduce) {
  :root { --fire-a: 0.09; --fire-b: 0.06; --fire-c: 0.10; }
  body, [data-mode="dark"] { animation: none !important; }
  .tok, .card, .info-card, .tabbar { animation: none; }
  .seg-thumb { transition: transform 0.12s ease, width 0.12s ease; }
}

.screen { flex: 1; display: flex; flex-direction: column; gap: 15px; padding: 18px var(--pad) 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }

.tabbar {
  flex: 0 0 auto; display: flex; justify-content: space-around; align-items: center;
  padding: 6px 0 8px;
  background-color: var(--surface);
  background-image:
    linear-gradient(180deg, oklch(0.97 0.01 80 / 0.4) 0%, transparent 15%),
    var(--tex-plaster);
  background-size: 100% 100%, 80px 80px;
  background-blend-mode: normal, soft-light;
  border-top: none;
  box-shadow:
    0 -10px 24px oklch(0.55 0.18 44 / calc(var(--fire-a) + var(--fire-c))),
    0 -1px 0 oklch(0.70 0.16 46 / 0.35);
  animation-name: fire-a, fire-b, fire-c;
  animation-duration: 5.3s, 3.1s, 8.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s, 0s, 0s;
}
@media (display-mode: standalone) { .tabbar { padding-bottom: max(8px, env(safe-area-inset-bottom)); } }
.tab { all: unset; cursor: pointer; font-size: 23px; color: var(--muted); padding: 6px 18px; border-radius: 14px; transition: color .15s; }
.tab.on { color: var(--accent); }

/* ---- header ---- */
.hd { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 4px; }
.greet { font-size: 13px; color: var(--muted); font-weight: 600; }
.baby {
  font-family: "Playfair Display", serif; font-size: 28px; font-weight: 700;
  margin: 1px 0 0; line-height: 1.05; letter-spacing: -.015em;
  text-shadow:
    0 1.5px 0 oklch(0.80 0.04 65 / 0.4),
    0 -1px 0 oklch(0.97 0.01 80 / 0.28);
}
.age { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  background-image:
    radial-gradient(circle at 30% 20%, oklch(0.97 0.01 80 / 0.5) 0%, transparent 45%),
    radial-gradient(circle at 35% 30%, var(--accent-soft), var(--accent));
  color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 20px; font-weight: 700;
  background-size: cover; background-position: center;
  box-shadow:
    0 2px 0 oklch(0.97 0.01 80 / 0.4) inset,
    0 4px 14px var(--mat-cast),
    inset 0 1px 0 oklch(1 0 0 / calc(0.25 + var(--fire-a, 0.08) * 1.4));
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar.lg { width: 84px; height: 84px; font-size: 32px; }
.avatar-btn { all: unset; cursor: pointer; flex: 0 0 auto; }
.avatar-btn:active .avatar { transform: scale(.92); transition: transform 0.06s; }
.photo-view { display: flex; justify-content: center; padding: 4px 0 8px; }
.photo-view img { width: 220px; height: 220px; border-radius: 28px; object-fit: cover; }
.photo-view .avatar.lg { width: 220px; height: 220px; font-size: 64px; border-radius: 28px; }

.card {
  background-color: var(--card-bg);
  background-image:
    radial-gradient(ellipse at 12% 8%, var(--mat-highlight), transparent 52%),
    var(--tex-clay);
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: normal, soft-light;
  border-radius: 26px;
  border: 1px solid oklch(0.82 0.038 54 / 0.55);
  box-shadow:
    0 1px 0 oklch(0.97 0.01 80 / 0.65) inset,
    0 -1px 0 var(--mat-shadow) inset,
    0 1px 0 oklch(0.30 0.06 44 / 0.4),
    6px 14px 28px var(--mat-cast);
  animation-name: fire-a, fire-b, fire-c;
  animation-duration: 5.3s, 3.1s, 8.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -0.28s, -0.28s, -0.28s;
}

/* ---- hero ---- */
.hero { padding: 22px; }
.card.hero {
  background-image:
    radial-gradient(ellipse 60% 40% at var(--light-x) var(--light-y),
      oklch(0.99 0.01 70 / calc(0.12 + var(--fire-c, 0.10) * 1.2)) 0%, transparent 60%),
    radial-gradient(ellipse at 12% 8%, var(--mat-highlight), transparent 52%),
    var(--tex-clay);
  background-size: 100% 100%, 100% 100%, 180px 180px;
  background-blend-mode: normal, normal, soft-light;
}
.state { display: flex; align-items: center; gap: 9px; }
.livedot {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.94 0.14 78), oklch(0.68 0.17 45));
  box-shadow:
    0 0 5px 1px oklch(0.80 0.14 62 / 0.65),
    0 0 10px 3px oklch(0.65 0.12 50 / 0.35);
  animation: ember-glow 2.8s ease-in-out infinite;
}
.livedot.sleeping {
  background: radial-gradient(circle at 35% 30%, oklch(0.82 0.07 280), oklch(0.56 0.10 292));
  box-shadow:
    0 0 5px 1px oklch(0.70 0.08 285 / 0.55),
    0 0 10px 3px oklch(0.52 0.09 290 / 0.30);
  animation: ember-glow-cool 2.8s ease-in-out infinite;
}
@keyframes ember-glow {
  0%, 100% {
    box-shadow: 0 0 5px 1px oklch(0.80 0.14 62 / 0.65), 0 0 10px 3px oklch(0.65 0.12 50 / 0.35);
  }
  50% {
    box-shadow: 0 0 7px 2px oklch(0.85 0.16 65 / 0.80), 0 0 14px 5px oklch(0.68 0.13 52 / 0.45);
  }
}
@keyframes ember-glow-cool {
  0%, 100% {
    box-shadow: 0 0 5px 1px oklch(0.70 0.08 285 / 0.55), 0 0 10px 3px oklch(0.52 0.09 290 / 0.30);
  }
  50% {
    box-shadow: 0 0 7px 2px oklch(0.75 0.09 285 / 0.65), 0 0 14px 5px oklch(0.56 0.10 290 / 0.40);
  }
}
/* ---- pull-to-refresh ---- */
.ptr-wrap { position: absolute; top: 0; left: 0; right: 0; height: 92px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; transform: translateY(-100%); will-change: transform; }
.ptr-spinner { font-size: 24px; color: var(--muted); opacity: 0; }
.ptr-releasing .ptr-spinner { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease-out; }
.ptr-spinning .ptr-spinner { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr-spinning .ptr-spinner { animation: ptr-pulse 1.2s ease-in-out infinite; }
}
@keyframes ptr-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.state-lbl { font-size: 12px; color: var(--soft); font-weight: 700; }
.timer {
  font-family: "Playfair Display", serif; font-size: 50px; font-weight: 700;
  line-height: 1; margin: 13px 0 6px; letter-spacing: -.02em;
  text-shadow:
    0 2px 0 oklch(0.78 0.04 65 / 0.5),
    0 -1px 0 oklch(0.97 0.01 80 / 0.35);
}
.timer .u { font-size: 25px; color: var(--muted); font-weight: 600; }
.hero-sub { font-size: 13px; color: var(--soft); font-weight: 600; }

/* ---- info cards ---- */
.info-stack { display: flex; flex-direction: column; gap: 10px; }
.info-card {
  background-color: var(--card-bg);
  background-image:
    radial-gradient(ellipse at 8% 12%, var(--mat-highlight), transparent 48%),
    var(--tex-clay);
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: normal, soft-light;
  border-radius: 20px; padding: 13px 15px; display: flex; align-items: center; gap: 13px;
  border: 1px solid oklch(0.82 0.038 54 / 0.50);
  box-shadow:
    0 1px 0 oklch(0.96 0.025 68 / 0.60) inset,
    0 -1px 0 var(--mat-shadow) inset,
    0 6px 20px var(--mat-cast),
    0 1px 4px var(--mat-cast);
  cursor: pointer; transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.info-card:active { background: var(--accent-tint); transform: scale(0.97); transition: transform 0.06s; }
.info-card.due { box-shadow: 0 0 0 1.5px var(--accent-soft), 0 6px 18px oklch(0.6 0.05 20 / .06); }
.ic-ring {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  color: var(--tc);
  background-color: var(--tcb);
  background-image: linear-gradient(155deg, oklch(0.97 0.01 80 / 0.35) 0%, transparent 40%);
  box-shadow:
    0 1px 0 oklch(0.97 0.01 80 / 0.4) inset,
    0 2px 6px var(--mat-cast);
}
.ic-txt { flex: 1; min-width: 0; }
.ic-lbl { font-size: 10px; color: var(--muted); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ic-lbl2 { font-size: 11px; color: var(--soft); font-weight: 600; margin-top: 1px; }
.ic-val { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin-top: 2px; }
.ic-rel { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 4px; }
.ic-edit { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 16px; flex: 0 0 auto; }
.ic-edit:active { background: var(--hair); }
.ic-edit.drag { cursor: grab; touch-action: none; }
.info-card.dragging { opacity: .6; cursor: grabbing; }
.info-stack[data-card-edit] { touch-action: none; }
.info-stack[data-card-edit] .info-card { cursor: default; }
.info-stack[data-card-edit] .info-card:active { background: var(--surface); transform: none; transition: none; }

.add-card { all: unset; cursor: pointer; width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent-tint); border: 1px dashed var(--accent-soft); padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.add-card:active { background: var(--accent-soft); }
.add-card .icon { width: 16px; height: 16px; }

/* ---- quick actions ---- */
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.act { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tok {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;
  color: var(--tc, var(--accent-ink));
  background-color: var(--tcb, var(--accent-soft));
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 8%, oklch(0.99 0.012 70 / calc(0.30 + var(--fire-a, 0.08) * 1.8)) 0%, transparent 42%),
    radial-gradient(circle at 32% 118%, var(--ember-core) 0%, transparent 50%),
    var(--tex-clay);
  background-size: 100% 100%, 100% 100%, 128px 128px;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 1.5px 0 oklch(0.98 0.01 75 / 0.50) inset,
    0 -3px 4px -2px oklch(0.30 0.06 44 / 0.35) inset,
    0 2px calc(5px + var(--fire-a) * 4px) -1px var(--ember-rim),
    3px 5px 8px var(--mat-cast);
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .2s, color .2s, box-shadow .1s;
  animation-name: fire-a, fire-b, fire-c;
  animation-duration: 5.3s, 3.1s, 8.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -0.15s, -0.15s, -0.15s;
}
.act:active .tok {
  background-image:
    linear-gradient(155deg, transparent 0%, oklch(0.25 0.04 45 / 0.12) 100%),
    var(--tex-clay);
  background-size: 100% 100%, 128px 128px;
  background-blend-mode: normal, soft-light;
  box-shadow:
    0 2px 8px var(--mat-shadow) inset,
    0 1px 0 oklch(0.97 0.01 80 / 0.15) inset;
  transform: scale(0.91) translateY(2px);
  transition: transform 0.06s, box-shadow 0.06s;
}
.act.primary .tok { background-color: var(--tc, var(--accent)); color: var(--on-accent); }
.act-lbl { font-size: 10px; color: var(--soft); font-weight: 700; }

/* ---- today / log ---- */
.today-block { display: flex; flex-direction: column; }
.today-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.today-hd h2 { font-family: var(--font-sans); font-size: 12px; font-weight: 700; margin: 0; letter-spacing: .07em; text-transform: uppercase; }
.today-hd a { font-size: 12px; color: var(--accent-ink); font-weight: 800; cursor: pointer; }
.cards-hd { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.cards-hd a { font-size: 12px; color: var(--accent-ink); font-weight: 800; cursor: pointer; }
.today-add { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 80%, white 20%) 0%, var(--accent) 100%); color: var(--on-accent); flex: 0 0 auto; box-shadow: 0 2px 5px oklch(0 0 0 / .15), inset 0 1px 0 oklch(1 0 0 / .28), inset 0 1px 0 oklch(1 0 0 / calc(0.25 + var(--fire-a, 0.08) * 1.4)); }
.today-add:active { transform: scale(.92); box-shadow: 0 1px 2px oklch(0 0 0 / .1), inset 0 2px 3px oklch(0 0 0 / .14); }
.log { overflow: hidden; }
.row { display: flex; align-items: center; gap: 13px; padding: 12px 16px; cursor: pointer; transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.row + .row { border-top: 1px solid var(--hair); }
.row:active { background: var(--accent-tint); transform: scale(0.98); transition: transform 0.06s; }
.row-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--tcb); color: var(--tc); flex: 0 0 auto; }
.row-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.what { font-size: 13px; font-weight: 700; }
.when { font-size: 11px; color: var(--muted); font-weight: 600; }
.meta { margin-left: auto; font-size: 12px; color: var(--soft); font-weight: 800; }
.empty-log { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.row-edit { cursor: default; }
.row-act { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.row-act.edit { margin-left: auto; color: var(--accent-ink); background: var(--accent-tint); }
.row-act.del { margin-left: 6px; color: oklch(0.6 0.12 25); background: oklch(0.95 0.03 25); }
.row-awake { cursor: default; }
.row-awake:active { background: transparent; transform: none; }
.row-awake .what { color: var(--muted); font-size: 12px; font-weight: 600; }
.row-awake .meta { color: var(--muted); font-weight: 600; }

/* ---- page headers ---- */
.page-hd { padding-top: 6px; }
.page-title { font-family: var(--font-sans); font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.page-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* ---- dark mode ---- */
[data-mode="dark"][data-theme="girl"] {
  --page: oklch(0.15 0.082 44); --page-glow: oklch(0.32 0.115 46 / .60);
  --bg:   oklch(0.198 0.072 45); --surface: oklch(0.244 0.062 47);
  --ink: oklch(0.93 0.016 65); --soft: oklch(0.78 0.02 58); --muted: oklch(0.62 0.022 56);
  --hair: oklch(0.34 0.018 55);
  --accent: oklch(0.70 0.115 50); --accent-ink: oklch(0.78 0.10 52);
  --accent-soft: oklch(0.40 0.07 48); --accent-tint: oklch(0.30 0.04 52);
  --on-accent: oklch(0.20 0.02 50);
  --good: oklch(0.70 0.10 145); --good-deep: oklch(0.58 0.09 145); --good-halo: oklch(0.42 0.07 143);
  --good-tint: oklch(0.36 0.05 143 / .5); --ring-track: oklch(0.34 0.018 55); --ring-awake: oklch(0.65 0.14 50);
}
[data-mode="dark"][data-theme="boy"] {
  --page: oklch(0.165 0.060 195); --page-glow: oklch(0.30 0.100 188 / .60);
  --bg: oklch(0.21 0.054 192); --surface: oklch(0.255 0.050 192);
  --ink: oklch(0.93 0.014 188); --soft: oklch(0.78 0.018 186); --muted: oklch(0.62 0.02 184);
  --hair: oklch(0.33 0.016 190);
  --accent: oklch(0.72 0.09 188); --accent-ink: oklch(0.80 0.08 188);
  --accent-soft: oklch(0.40 0.06 186); --accent-tint: oklch(0.29 0.035 188);
  --on-accent: oklch(0.19 0.02 190);
  --good: oklch(0.70 0.095 150); --good-deep: oklch(0.58 0.085 150); --good-halo: oklch(0.42 0.06 148);
  --good-tint: oklch(0.36 0.05 148 / .5); --ring-track: oklch(0.33 0.016 190); --ring-awake: oklch(0.65 0.14 50);
}

/* ---- dayjob theme ---- */
/* 'dayjob' without a gender suffix is a legacy alias → girl palette */
:is([data-theme="dayjob"], [data-theme="dayjob-girl"]) {
  --page: oklch(0.940 0.042 85); --page-glow: oklch(0.88 0.072 85 / .60);
  --bg: oklch(0.926 0.042 85); --surface: oklch(0.970 0.028 85);
  --ink: oklch(0.22 0.015 70); --soft: oklch(0.38 0.02 70); --muted: oklch(0.52 0.03 70);
  --hair: oklch(0.87 0.03 80);
  --accent: oklch(0.50 0.13 18); --accent-ink: oklch(0.34 0.11 18);
  --accent-soft: oklch(0.82 0.07 20); --accent-tint: oklch(0.90 0.045 22);
  --on-accent: oklch(0.985 0.012 85);
  --good: oklch(0.52 0.08 135); --good-deep: oklch(0.42 0.075 135); --good-halo: oklch(0.87 0.06 135);
  --good-tint: oklch(0.92 0.04 135 / .5); --ring-track: oklch(0.89 0.022 80);
  --font-sans: "Archivo", system-ui, sans-serif;
}
[data-theme="dayjob-boy"] {
  --page: oklch(0.940 0.042 85); --page-glow: oklch(0.88 0.072 85 / .60);
  --bg: oklch(0.926 0.042 85); --surface: oklch(0.970 0.028 85);
  --ink: oklch(0.22 0.015 70); --soft: oklch(0.38 0.02 70); --muted: oklch(0.52 0.03 70);
  --hair: oklch(0.87 0.03 80);
  --accent: oklch(0.42 0.09 220); --accent-ink: oklch(0.30 0.08 222);
  --accent-soft: oklch(0.80 0.05 218); --accent-tint: oklch(0.90 0.03 220);
  --on-accent: oklch(0.985 0.008 220);
  --good: oklch(0.52 0.08 135); --good-deep: oklch(0.42 0.075 135); --good-halo: oklch(0.87 0.06 135);
  --good-tint: oklch(0.92 0.04 135 / .5); --ring-track: oklch(0.89 0.022 80);
  --font-sans: "Archivo", system-ui, sans-serif;
}
:is([data-mode="dark"][data-theme="dayjob"], [data-mode="dark"][data-theme="dayjob-girl"]) {
  --page: oklch(0.18 0.034 70); --page-glow: oklch(0.28 0.068 70 / .52);
  --bg: oklch(0.16 0.034 70); --surface: oklch(0.22 0.034 70);
  --ink: oklch(0.93 0.025 85); --soft: oklch(0.6 0.02 70); --muted: oklch(0.48 0.03 70);
  --hair: oklch(0.25 0.02 80);
  --accent: oklch(0.65 0.13 18); --accent-ink: oklch(0.88 0.06 20);
  --accent-soft: oklch(0.36 0.08 18); --accent-tint: oklch(0.24 0.05 18);
  --on-accent: oklch(0.18 0.02 70);
  --good: oklch(0.56 0.08 135); --good-deep: oklch(0.46 0.07 135); --good-halo: oklch(0.38 0.06 135);
  --good-tint: oklch(0.22 0.04 135 / .5); --ring-track: oklch(0.32 0.015 80); --ring-awake: oklch(0.65 0.14 50);
}
[data-mode="dark"][data-theme="dayjob-boy"] {
  --page: oklch(0.18 0.034 70); --page-glow: oklch(0.28 0.068 70 / .52);
  --bg: oklch(0.16 0.034 70); --surface: oklch(0.22 0.034 70);
  --ink: oklch(0.93 0.025 85); --soft: oklch(0.6 0.02 70); --muted: oklch(0.48 0.03 70);
  --hair: oklch(0.25 0.02 80);
  --accent: oklch(0.62 0.10 220); --accent-ink: oklch(0.82 0.07 220);
  --accent-soft: oklch(0.34 0.07 218); --accent-tint: oklch(0.24 0.05 220);
  --on-accent: oklch(0.18 0.015 220);
  --good: oklch(0.56 0.08 135); --good-deep: oklch(0.46 0.07 135); --good-halo: oklch(0.38 0.06 135);
  --good-tint: oklch(0.22 0.04 135 / .5); --ring-track: oklch(0.32 0.015 80); --ring-awake: oklch(0.65 0.14 50);
}
[data-mode="dark"] {
  --bg: oklch(0.190 0.068 47); --surface: oklch(0.240 0.060 47);
  --ink: oklch(0.93 0.016 65); --soft: oklch(0.78 0.02 58); --muted: oklch(0.62 0.022 56);
  --hair: oklch(0.32 0.022 50);
  /* night hearth — walnut dark, firelight from below */
  --mat-highlight: oklch(0.62 0.22 42 / 0.38);
  --mat-shadow:    oklch(0.06 0.02 38 / 0.70);
  --mat-cast:      oklch(0.14 0.05 42 / 0.60);
  --mat-glow:      oklch(0.55 0.20 44 / 0.35);
  /* dark ember — fire is dominant light source */
  --ember-core: oklch(0.88 0.22 56);
  --ember-rim:  oklch(0.82 0.22 50 / 0.65);
  animation:
    fire-a-dark 5.3s ease-in-out infinite,
    fire-b-dark 3.1s ease-in-out infinite,
    fire-c-dark 8.7s ease-in-out infinite;
}
body[data-mode="dark"] {
  background: linear-gradient(
    0deg,
    oklch(0.26 0.05 46) 0%,
    oklch(0.17 0.018 55) 55%,
    oklch(0.13 0.012 50) 100%
  );
}
[data-mode="dark"] .play,   [data-mode="dark"] .tone-play   { --tc: oklch(0.72 0.09 280); --tcb: oklch(0.30 0.05 285); }
[data-mode="dark"] .bath,   [data-mode="dark"] .tone-bath   { --tc: oklch(0.70 0.085 220); --tcb: oklch(0.28 0.05 215); }
[data-mode="dark"] .sleep,  [data-mode="dark"] .tone-sleep  { --tc: oklch(0.80 0.12 145); --tcb: oklch(0.22 0.06 143); }
[data-mode="dark"] .feed,   [data-mode="dark"] .tone-feed   { --tc: oklch(0.82 0.10 52);  --tcb: oklch(0.24 0.06 48);  }
[data-mode="dark"] .diaper, [data-mode="dark"] .tone-diaper { --tc: oklch(0.80 0.12 70);  --tcb: oklch(0.22 0.06 68);  }
[data-mode="dark"] .med,    [data-mode="dark"] .tone-med    { --tc: oklch(0.78 0.12 35);  --tcb: oklch(0.22 0.06 33);  }
[data-mode="dark"] .note,   [data-mode="dark"] .tone-note   { --tc: oklch(0.75 0.02 55);  --tcb: oklch(0.24 0.02 52);  }
[data-mode="dark"] .awake,  [data-mode="dark"] .tone-awake  { --tc: oklch(0.80 0.13 52);  --tcb: oklch(0.24 0.09 50);  }
[data-mode="dark"] .card {
  background-image:
    radial-gradient(ellipse at 15% 92%, oklch(0.55 0.20 42 / 0.28), transparent 60%),
    var(--tex-clay);
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: normal, multiply;
  box-shadow:
    0 -2px 0 oklch(0.62 0.18 48 / 0.30) inset,
    0 1px 0 oklch(0.05 0.02 38 / 0.5) inset,
    0 8px 32px oklch(0 0 0 / 0.55);
}
[data-mode="dark"] .info-card {
  background-image:
    radial-gradient(ellipse at 12% 90%, oklch(0.52 0.18 42 / 0.22), transparent 55%),
    var(--tex-clay);
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: normal, multiply;
  box-shadow:
    0 -2px 0 oklch(0.58 0.16 46 / 0.25) inset,
    0 1px 0 oklch(0.05 0.02 38 / 0.45) inset,
    0 6px 22px oklch(0 0 0 / 0.50);
}
[data-mode="dark"] .tok {
  animation-name: fire-a-dark, fire-b-dark, fire-c-dark;
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 8%, oklch(0.97 0.012 70 / calc(0.10 + var(--fire-a) * 1.0)) 0%, transparent 42%),
    radial-gradient(circle at 32% 118%, var(--ember-core) 0%, transparent 50%),
    var(--tex-clay);
  background-size: 100% 100%, 100% 100%, 128px 128px;
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    0 -2px 0 oklch(0.62 0.18 48 / calc(0.18 + var(--fire-a) * 0.9)) inset,
    0 1px 0 oklch(0.04 0.02 38 / 0.50) inset,
    0 2px calc(4px + var(--fire-a) * 4px) -1px var(--ember-rim),
    2px 4px 10px oklch(0 0 0 / 0.50);
}
[data-mode="dark"] .phone {
  background-color: var(--page); /* override glassmorphism transparent so blend has a dark base */
  box-shadow: 0 0 0 1px oklch(0.28 0.03 44);
  background-image:
    radial-gradient(ellipse 90% 55% at 12% 108%, oklch(0.65 0.26 40 / calc(0.10 + var(--fire-a) * 1.4)), transparent 65%),
    radial-gradient(ellipse 55% 38% at 30% 106%, oklch(0.75 0.22 52 / calc(0.05 + var(--fire-b) * 0.9)), transparent 55%),
    var(--tex-plaster);
  background-size: 100% 100%, 100% 100%, 80px 80px;
  background-blend-mode: screen, screen, soft-light;
}
[data-mode="dark"] input, [data-mode="dark"] select, [data-mode="dark"] textarea { background: oklch(0.15 0.012 52); border-color: var(--hair); color: var(--ink); }
[data-mode="dark"] .scrim { background: oklch(0 0 0 / 0); }
[data-mode="dark"] .scrim.show { background: oklch(0 0 0 / .65); }
[data-mode="dark"] .sheet {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 100%, oklch(0.52 0.18 42 / 0.20), transparent 55%),
    var(--tex-linen);
  background-size: 100% 100%, 260px 260px;
  background-blend-mode: normal, multiply;
}
[data-mode="dark"] .toast { background: oklch(0.88 0.01 70); color: oklch(0.2 0.014 50); }
[data-mode="dark"] .tabbar {
  background-color: var(--surface);
  background-image:
    linear-gradient(180deg, oklch(0.55 0.18 44 / 0.18) 0%, transparent 25%),
    var(--tex-plaster);
  background-size: 100% 100%, 80px 80px;
  background-blend-mode: normal, multiply;
  box-shadow:
    0 -6px 28px oklch(0 0 0 / 0.55),
    0 -1px 0 oklch(0.58 0.20 46 / 0.28);
}
[data-mode="dark"] .theme-opt { box-shadow: 0 2px 6px oklch(0 0 0 / .2), 0 1px 2px oklch(0 0 0 / .15), inset 0 1px 0 oklch(1 0 0 / .12), inset 0 0 10px oklch(1 0 0 / .04); }

/* dayjob category tone overrides */
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .diaper,
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .tone-diaper { --tc: oklch(0.55 0.09 70); --tcb: oklch(0.92 0.05 75); }
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .med,
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .tone-med { --tc: oklch(0.48 0.09 35); --tcb: oklch(0.91 0.04 40); }

/* dayjob type */
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .baby { font-size: 32px; letter-spacing: -0.03em; }
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .timer { font-size: 56px; letter-spacing: -0.03em; }
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .timer .u { font-size: 28px; }
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .sec-label { letter-spacing: 0.12em; }
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .page-sub { letter-spacing: 0.04em; font-weight: 800; text-transform: uppercase; }

/* dayjob card geometry — more angular than OG pastel themes */
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .card { border-radius: 18px; }
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) .info-card { border-radius: 12px; }

/* dayjob material overrides — neutral silver highlight, no warm amber cast */
:is([data-theme="dayjob"], [data-theme="dayjob-girl"], [data-theme="dayjob-boy"]) {
  --mat-highlight: oklch(0.96 0.008 220 / 0.32);
  --mat-shadow:    oklch(0.22 0.008 220 / 0.14);
  --mat-cast:      oklch(0.26 0.008 220 / 0.10);
  --mat-glow:      oklch(0.88 0.010 220 / 0.28);
}

/* ---- trends ---- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 14px 16px; }
.stat-k { font-size: 11px; color: var(--muted); font-weight: 700; }
.stat-v { font-family: var(--font-sans); font-size: 24px; font-weight: 700; margin-top: 3px; }
.chart-card { padding: 16px 16px 12px; }
.chart-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.chart-hd h2 { font-family: var(--font-sans); font-size: 12px; font-weight: 700; margin: 0; letter-spacing: .07em; text-transform: uppercase; }
.chart-note { font-size: 11px; color: var(--muted); font-weight: 600; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bar-val { font-size: 10px; color: var(--muted); font-weight: 700; }
.bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.bar { width: 100%; border-radius: 7px 7px 4px 4px; background: var(--tcb); min-height: 4px; transition: height .4s; transform-origin: bottom; }
.bar-col.today .bar { background: var(--tc); }
.bar-lbl { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; }

/* ---- sleep ---- */
.ring-card { padding: 22px 22px 16px; display: flex; flex-direction: column; align-items: center; }
.ringwrap { position: relative; width: 230px; height: 230px; }
.ringwrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-lbl { font-size: 11px; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ring-big { font-family: var(--font-sans); font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.ring-big .u { font-size: 19px; color: var(--muted); }
.night-strip { margin-top: 8px; font-size: 12px; color: var(--good-deep); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sched-card { padding: 16px; }
.sched-item { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
.sched-item + .sched-item { border-top: 1px solid var(--hair); }
.sched-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: 0 0 auto; }
.sched-item.past { opacity: .45; }
.sched-item.past .sched-dot { background: var(--muted); }
.sched-win { font-family: var(--font-sans); font-weight: 700; font-size: 15px; }
.sched-tag { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 700; }

/* ---- profile ---- */
.sec-label { font-size: 11px; color: var(--muted); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 6px 4px -6px; }
.prof-baby { padding: 18px; display: flex; gap: 16px; align-items: center; }
.prof-photo { all: unset; cursor: pointer; position: relative; flex: 0 0 auto; }
.photo-edit { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 13px; border: 2px solid var(--surface); }
.prof-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.row-card { padding: 4px 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 14px; font-weight: 600; }
.set-row + .set-row { border-top: 1px solid var(--hair); }
.quiet { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.quiet input { width: 92px; }
.switch {
  all: unset; cursor: pointer; width: 46px; height: 28px; border-radius: 999px;
  background-color: var(--hair);
  background-image: linear-gradient(180deg, oklch(0.78 0.03 65 / 0.8), transparent);
  box-shadow: 0 1px 5px var(--mat-shadow) inset;
  position: relative; transition: background-color .2s; flex: 0 0 auto;
}
.switch.on {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, oklch(from var(--accent) calc(l + 0.08) c h / 0.8) 0%, transparent 100%);
  box-shadow: 0 1px 0 oklch(0.97 0.01 80 / 0.25) inset;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background-image: linear-gradient(180deg, oklch(0.99 0.005 80), oklch(0.93 0.015 75));
  transition: left .2s;
  box-shadow:
    0 2px 5px oklch(0.30 0.04 50 / 0.30),
    0 1px 0 oklch(0.97 0.01 80 / 0.8) inset;
}
.switch.on .knob { left: 21px; }
.cg-row { display: flex; align-items: center; gap: 9px; padding: 11px 0; }
.cg-row + .cg-row, .cg-row + .add-row { border-top: 1px solid var(--hair); }
.cg-row > i { color: var(--muted); font-size: 22px; }
.cg-name { flex: 1; }
.cg-role { width: 120px; }
.cg-display { display: flex; flex-direction: column; gap: 1px; }
.invite-link { background: var(--surface); border-radius: 14px; padding: 13px; font-size: 13px; font-weight: 600; color: var(--soft); word-break: break-all; }
.add-row { all: unset; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 13px 0; color: var(--accent-ink); font-weight: 700; font-size: 13px; width: 100%; }
.btn-ghost { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 16px; color: var(--soft); font-weight: 700; font-size: 14px; }
.btn-ghost.danger { color: oklch(0.55 0.13 25); background: oklch(0.95 0.03 25); margin-top: 6px; }
.foot-note { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0 8px; }
.notif-row { align-items: flex-start; padding: 13px 0; }
.notif-txt { display: flex; flex-direction: column; gap: 2px; }
.notif-txt b { font-size: 14px; font-weight: 700; }
.notif-txt .fld-l { margin: 0; font-size: 11px; }
.btn-sm { all: unset; cursor: pointer; background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 80%, white 20%) 0%, var(--accent) 100%); color: var(--on-accent); padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; flex: 0 0 auto; box-shadow: 0 2px 5px oklch(0 0 0 / .15), 0 1px 2px oklch(0 0 0 / .1), inset 0 1px 0 oklch(1 0 0 / .28), inset 0 -1px 0 oklch(0 0 0 / .1); }

/* growth */
.growth-stats { grid-template-columns: repeat(2, 1fr); }
.growth-svg { width: 100%; height: auto; aspect-ratio: 320 / 150; overflow: visible; display: block; }
.growth-svg .growth-x { font-size: 11px; font-family: var(--font-sans); font-weight: 700; fill: var(--muted); }
.growth-svg circle { transform-box: fill-box; transform-origin: center; }
.delta { font-size: 11px; font-weight: 800; margin-top: 2px; display: block; }
.delta.up { color: var(--good-deep); }
.delta.down { color: oklch(0.6 0.12 25); }

/* ---- inputs / forms ---- */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-l { font-size: 12px; color: var(--soft); font-weight: 700; }
.fld .opt { color: var(--muted); font-weight: 600; }
input, select, textarea {
  box-sizing: border-box;
  border: 1px solid oklch(0.80 0.03 65 / 0.6);
  border-top-color: oklch(0.68 0.04 58 / 0.5);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, oklch(0.50 0.04 55 / 0.08) 0%, transparent 25%);
  border-radius: 13px; padding: 11px 13px; font-size: 14px; font-weight: 600; color: var(--ink); outline: none;
  box-shadow:
    0 2px 8px var(--mat-shadow) inset,
    0 1px 0 oklch(0.97 0.01 80 / 0.5);
  transition: border-color .15s; width: 100%; min-width: 0; max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  border-top-color: oklch(from var(--accent) calc(l - 0.08) c h);
}
input[type="time"], input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 44px; }
input[type="number"] { max-width: 140px; text-align: center; }
.stepper { display: flex; align-items: center; }
.stepper-val { flex: 1; text-align: center; border-top: 1.5px solid var(--hair); border-bottom: 1.5px solid var(--hair); padding: 11px 13px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; outline: none; min-width: 0; background: var(--bg); box-sizing: border-box; }
.stepper-val:focus-visible { border-color: var(--accent); }
.stepper-btn { all: unset; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, color-mix(in oklch, var(--accent-tint) 60%, white 40%) 0%, var(--accent-tint) 100%); color: var(--accent-ink); font-size: 18px; font-weight: 700; flex-shrink: 0; }
.stepper-btn:first-of-type { border-radius: 13px 0 0 13px; border: 1.5px solid var(--hair); border-right: 0; box-shadow: inset 0 1px 0 oklch(1 0 0 / .6); }
.stepper-btn:last-of-type { border-radius: 0 13px 13px 0; border: 1.5px solid var(--hair); border-left: 0; box-shadow: inset 0 1px 0 oklch(1 0 0 / .6); }
.stepper-btn.pressing { background: var(--accent-tint); box-shadow: inset 0 2px 4px oklch(0 0 0 / .1); }
textarea { resize: none; }
input.shake { animation: shake .4s; border-color: oklch(0.6 0.15 25); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.segctl {
  position: relative;
  overflow: hidden;
  display: flex; gap: 0; border-radius: 13px; padding: 4px;
  background: color-mix(in oklch, var(--accent-tint) 72%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 3px var(--mat-shadow) inset, 0 -1px 0 var(--mat-highlight) inset;
  touch-action: none;
}
.segctl.sm { display: inline-flex; }
.seg-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  border-radius: 10px;
  pointer-events: none;
  background-color: var(--surface);
  background-image:
    linear-gradient(100deg,
      transparent calc(var(--glare, 0.5) * 100% - 26%),
      oklch(1 0 0 / 0.28) calc(var(--glare, 0.5) * 100%),
      transparent calc(var(--glare, 0.5) * 100% + 26%));
  box-shadow:
    0 1px 0 oklch(0.99 0.01 75 / 0.7) inset,
    0 2px 6px var(--mat-cast);
  transition:
    transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
    width 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
    --glare 0.42s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.seg-opt {
  all: unset; cursor: pointer; flex: 1; text-align: center; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--soft);
  position: relative; z-index: 1; white-space: nowrap;
  transition: color .15s, opacity .15s;
}
.segctl.sm .seg-opt { padding: 7px 14px; flex: 0 0 auto; }
.seg-opt.on { color: var(--accent-ink); }
[data-mode="dark"] .segctl {
  background: oklch(0.26 0.022 48 / 0.58);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.50) inset, 0 -1px 0 oklch(0.60 0.18 46 / 0.18) inset;
}
[data-mode="dark"] .seg-thumb {
  background-color: oklch(0.30 0.030 48);
  box-shadow:
    0 1px 0 oklch(0.62 0.18 48 / 0.22) inset,
    0 2px 8px oklch(0 0 0 / 0.55);
}
[data-mode="dark"] .seg-opt.on { color: var(--accent); }

/* ---- sheet ---- */
.scrim { position: absolute; inset: 0; background: oklch(0.3 0.03 25 / 0); display: flex; align-items: flex-end; justify-content: center; z-index: 60; pointer-events: none; transition: background .18s; }
.scrim.show { background: oklch(0.3 0.03 25 / .42); pointer-events: auto; }
.sheet {
  width: 100%; max-width: 432px;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 25% 0%, var(--mat-highlight), transparent 50%),
    var(--tex-linen);
  background-size: 100% 100%, 260px 260px;
  background-blend-mode: normal, soft-light;
  border-radius: 28px 28px 0 0; padding: 8px 22px calc(26px + env(safe-area-inset-bottom)); transform: translateY(102%); transition: transform .22s cubic-bezier(.2,.8,.2,1); max-height: 88%; overflow-y: auto; touch-action: pan-y;
}
.sheet.sheet-opening { transition: transform .32s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
@media (min-width: 520px) { .scrim { align-items: center; } .sheet { border-radius: 28px; transform: translateY(20px); opacity: 0; transition: transform .3s, opacity .3s; } .scrim.show .sheet { opacity: 1; } }
.scrim.show .sheet { transform: translateY(0); }
.sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--hair); margin: 4px auto 10px; cursor: grab; touch-action: none; }
.sheet-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; touch-action: none; }
.sheet-hd h3 { font-family: var(--font-sans); font-size: 19px; font-weight: 700; margin: 0; }
.sheet-hd .x { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--hair); display: flex; align-items: center; justify-content: center; color: var(--soft); }
.sheet-body { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.sheet-form .sheet-body { gap: 13px; }
.btn-primary {
  all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  background-color: var(--accent);
  background-image: linear-gradient(155deg,
    oklch(from var(--accent) calc(l + 0.12) c h) 0%,
    var(--accent) 50%,
    oklch(from var(--accent) calc(l - 0.08) c h) 100%
  );
  color: var(--on-accent); font-weight: 800; font-size: 15px; padding: 15px; border-radius: 16px; margin-top: 4px;
  box-shadow:
    0 2px 0 oklch(0.97 0.01 80 / 0.22) inset,
    0 -1px 0 oklch(0.20 0.04 45 / 0.25) inset,
    0 6px 18px var(--mat-cast);
  text-shadow: 0 1px 0 oklch(0.25 0.04 45 / 0.18);
  transition: transform .1s, box-shadow .1s;
}
.btn-primary:active {
  box-shadow:
    0 2px 6px oklch(0.25 0.04 45 / 0.22) inset,
    0 1px 0 oklch(0.97 0.01 80 / 0.12) inset;
  transform: translateY(1px) scale(0.99);
}
.btn-primary.danger-btn { background: oklch(0.58 0.16 25); }
.empty-note { font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.5; margin: 0; }

.chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chooser-item {
  all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border-radius: 18px;
  background-color: var(--surface);
  background-image:
    radial-gradient(ellipse at 20% 10%, var(--mat-highlight), transparent 50%),
    var(--tex-linen);
  background-size: 100% 100%, 260px 260px;
  background-blend-mode: normal, soft-light;
  font-size: 12px; font-weight: 700; color: var(--soft);
  box-shadow:
    0 1px 0 oklch(0.97 0.01 80 / 0.6) inset,
    0 4px 12px var(--mat-cast);
}
.chooser-ic {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  color: var(--tc);
  background-color: var(--tcb);
  background-image: linear-gradient(155deg, oklch(0.97 0.01 80 / 0.3) 0%, transparent 40%);
  box-shadow: 0 1px 0 oklch(0.97 0.01 80 / 0.35) inset, 0 2px 6px var(--mat-cast);
}

/* med edit */
.med-list { display: flex; flex-direction: column; gap: 12px; }
.med-edit { display: flex; flex-direction: column; gap: 7px; padding: 12px; background: var(--surface); border-radius: 16px; }
.med-sub { display: flex; align-items: center; gap: 6px; }
.med-dose { width: 64px; flex: 0 0 auto; } .med-unit { width: 60px; flex: 0 0 auto; } .med-eh { width: 56px; flex: 0 0 auto; text-align: center; }
.med-every { font-size: 12px; color: var(--muted); font-weight: 700; }
.med-del { all: unset; cursor: pointer; margin-left: auto; color: oklch(0.6 0.12 25); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.cg-confirm { color: var(--good-deep); }

/* entry view */
.entry-view { display: flex; align-items: center; gap: 13px; }
.entry-view .ic-ring { width: 48px; height: 48px; font-size: 22px; }
.entry-title { font-family: var(--font-sans); font-size: 18px; font-weight: 700; }
.entry-sub { font-size: 13px; color: var(--muted); font-weight: 600; }
.entry-note { background: var(--surface); border-radius: 14px; padding: 13px; font-size: 14px; font-weight: 600; color: var(--soft); }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%); background: var(--ink); color: var(--bg); font-weight: 700; font-size: 13px; padding: 12px 18px; border-radius: 999px; display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 30px oklch(0 0 0 / .28); z-index: 80; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast button { all: unset; cursor: pointer; background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 80%, white 20%) 0%, var(--accent) 100%); color: var(--on-accent); padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 4px oklch(0 0 0 / .15), inset 0 1px 0 oklch(1 0 0 / .25); }

/* ---- onboarding ---- */
.onboard { display: flex; flex-direction: column; gap: 16px; padding: 8px var(--pad) calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; min-height: 0; flex: 1; }
.onb-top { text-align: center; padding: 20px 0 4px; }
.onb-logo { display: block; margin: 0 auto 18px; height: 48px; width: auto; }
.onb-sub { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 auto; max-width: 280px; line-height: 1.5; }
.onb-card { background: var(--surface); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 24px oklch(0.6 0.05 20 / .07); }
.onb-photo { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: center; }
.onb-photo .avatar { background: var(--accent-tint); color: var(--accent-ink); font-size: 26px; }
.onb-photo-l { font-size: 12px; color: var(--accent-ink); font-weight: 700; }
.theme-set { display: flex; flex-direction: column; gap: 12px; padding: 13px 0; font-size: 14px; font-weight: 600; }
.theme-section { display: flex; flex-direction: column; gap: 6px; }
.theme-section-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soft); }
.theme-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.theme-opt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--hair); font-weight: 700; font-size: 14px; color: oklch(0.18 0.02 50); background: var(--surface); box-shadow: 0 2px 6px oklch(0 0 0 / .07), 0 1px 2px oklch(0 0 0 / .05), inset 0 1px 0 oklch(1 0 0 / .75); transition: box-shadow .1s; }
.theme-opt.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); box-shadow: 0 1px 2px oklch(0 0 0 / .05), inset 0 2px 4px oklch(0 0 0 / .08), inset 0 1px 0 color-mix(in oklch, var(--accent) 30%, white 70%); }
.theme-swatch { width: 22px; height: 22px; border-radius: 50%; }
.theme-swatch.girl { background: oklch(0.42 0.07 125); }
.theme-swatch.boy { background: oklch(0.45 0.06 175); }
.theme-swatch.dayjob-girl { background: oklch(0.50 0.13 18); }
.theme-swatch.dayjob-boy  { background: oklch(0.42 0.09 220); }
.onb-go { margin: 0; }
.onb-foot { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---------- spinner overlay ---------- */
.spinner-overlay { position: fixed; inset: 0; z-index: 10000; background: oklch(0 0 0 / .35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; }
.spinner-overlay.show { opacity: 1; }
.spinner-popup { background: var(--surface); border-radius: 28px; width: min(280px, 80vw); box-shadow: 0 20px 50px oklch(0 0 0 / .25); overflow: hidden; }
.spinner-window { position: relative; height: 260px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.spinner-window:active { cursor: grabbing; }
/* top/bottom gradient fades mimic the iOS drum-picker lens */
.spinner-window::before, .spinner-window::after { content: ''; position: absolute; left: 0; right: 0; height: 36%; z-index: 2; pointer-events: none; }
.spinner-window::before { top: 0; background: linear-gradient(to bottom, var(--surface) 10%, transparent); }
.spinner-window::after  { bottom: 0; background: linear-gradient(to top,   var(--surface) 10%, transparent); }
.spinner-highlight { position: absolute; top: 50%; left: 12px; right: 12px; height: 44px; transform: translateY(-50%); background: var(--accent-tint); border-radius: 13px; pointer-events: none; z-index: 1; }
.spinner-items { position: absolute; inset: 0; z-index: 1; }
/* items are absolutely stacked at the centre; JS sets translateY + scaleY per-item */
.spinner-item { position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--ink); transform-origin: center center; }
.spinner-item.on { font-size: 26px; font-weight: 800; }
.spinner-type { display: flex; align-items: center; gap: 6px; }
.spinner-type input { width: 80px; text-align: center; border: 1.5px solid var(--accent); background: var(--surface); border-radius: 10px; padding: 5px 8px; font-size: 20px; font-weight: 800; color: var(--ink); outline: none; }
.spinner-check { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 80%, white 20%) 0%, var(--accent) 100%); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 5px oklch(0 0 0 / .15), inset 0 1px 0 oklch(1 0 0 / .25); }

/* ---- sleep hero card ---- */
/* Cue 3 — sweetspot label */
.sh-sweet-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 14px; color: var(--muted); transition: color 0.6s; }
[data-sweet="entering"] .sh-sweet-lbl { color: oklch(0.52 0.13 280); }
[data-sweet="now"] .sh-sweet-lbl { color: oklch(0.46 0.16 280); }
[data-sweet="passing"] .sh-sweet-lbl { color: oklch(0.52 0.11 280); }
/* Ember Bed — the rail IS the fire: coals ignite left→right across the awake window */
.sh-rail-wrap { margin-top: 8px; }
.sh-bed {
  display: flex; gap: 3px; padding: 5px 6px; border-radius: 9px;
  background: linear-gradient(180deg, oklch(0.30 0.03 40 / 0.20), oklch(0.18 0.02 35 / 0.30));
  box-shadow: inset 0 2px 6px oklch(0.20 0.04 35 / 0.45), inset 0 -1px 0 oklch(0.95 0.02 70 / 0.20), 0 1px 0 oklch(0.97 0.01 80 / 0.30);
}
.coal {
  flex: 1; height: 16px; border-radius: 4px;
  background: linear-gradient(180deg, oklch(0.42 0.03 45), oklch(0.30 0.025 40));
  box-shadow: inset 0 1px 0 oklch(0.60 0.04 55 / 0.30), inset 0 -1px 1px oklch(0.18 0.02 35 / 0.50);
  transition: background 0.7s ease, box-shadow 0.7s ease, transform 0.4s ease;
}
/* dark mode cold-coal base — placed before the state rules so lit/caught/toohot
   (equal specificity) still win their colors in dark mode via source order */
[data-mode="dark"] .coal {
  background: linear-gradient(180deg, oklch(0.30 0.025 40), oklch(0.20 0.02 35));
  box-shadow: inset 0 1px 0 oklch(0.48 0.04 55 / 0.25), inset 0 -1px 1px oklch(0.10 0.01 30 / 0.60);
}
/* lit ember — warm, glowing, breathing with the fire vars */
.coal.lit {
  background: linear-gradient(180deg, var(--ember-mid), var(--ember-cool));
  box-shadow:
    inset 0 1px 0 oklch(0.92 0.10 70 / 0.45),
    inset 0 -1px 2px oklch(0.40 0.14 35 / 0.55),
    0 0 calc(3px + var(--fire-b, 0.06) * 18px) oklch(0.66 0.18 44 / calc(0.30 + var(--fire-b, 0.06) * 1.6));
}
/* leading coal — hottest, most active flicker */
.coal.front {
  background: linear-gradient(180deg, oklch(0.92 0.16 66), var(--ember-mid));
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 75 / 0.60),
    inset 0 -1px 2px oklch(0.45 0.16 38 / 0.55),
    0 0 calc(5px + var(--fire-a, 0.06) * 30px) oklch(0.78 0.20 50 / calc(0.45 + var(--fire-a, 0.06) * 2.2));
}
/* sweetspot coal waiting to catch — dim gold rim, the target */
.coal.ready {
  background: linear-gradient(180deg, oklch(0.50 0.06 85), oklch(0.38 0.05 80));
  box-shadow:
    inset 0 0 0 1px oklch(0.82 0.12 88 / 0.50),
    inset 0 1px 0 oklch(0.88 0.10 90 / 0.30);
}
/* sweetspot coal that has caught — full gold bloom, lifts slightly */
.coal.caught {
  background: linear-gradient(180deg, oklch(0.90 0.16 92), oklch(0.78 0.15 85));
  box-shadow:
    inset 0 1px 0 oklch(0.97 0.10 95 / 0.65),
    inset 0 -1px 2px oklch(0.55 0.14 80 / 0.45),
    0 0 calc(5px + var(--fire-b, 0.06) * 26px) oklch(0.85 0.16 90 / calc(0.45 + var(--fire-b, 0.06) * 2.0));
  transform: translateY(-1px);
}
/* overtired overshoot — too-hot orange-red, hardest flicker */
.coal.toohot {
  background: linear-gradient(180deg, oklch(0.66 0.25 30), oklch(0.52 0.22 28));
  box-shadow:
    inset 0 1px 0 oklch(0.80 0.18 40 / 0.50),
    inset 0 -1px 2px oklch(0.40 0.20 25 / 0.60),
    0 0 calc(5px + var(--fire-a, 0.06) * 34px) oklch(0.62 0.26 28 / calc(0.50 + var(--fire-a, 0.06) * 2.6));
}
/* banked overnight embers — asleep view, low and slow */
.sh-bed.banked .coal.banked {
  background: linear-gradient(180deg, oklch(0.46 0.10 40), oklch(0.34 0.08 35));
  box-shadow:
    inset 0 1px 0 oklch(0.62 0.10 55 / 0.30),
    inset 0 -1px 2px oklch(0.24 0.06 30 / 0.55),
    0 0 calc(2px + var(--fire-c, 0.10) * 10px) oklch(0.52 0.14 38 / calc(0.20 + var(--fire-c, 0.10) * 1.0));
}
/* dark mode: deeper trough — lit/caught/toohot embers brighten via --ember-* tokens */
[data-mode="dark"] .sh-bed {
  background: linear-gradient(180deg, oklch(0.16 0.02 35 / 0.55), oklch(0.10 0.015 30 / 0.65));
  box-shadow: inset 0 2px 6px oklch(0.06 0.01 30 / 0.70), inset 0 -1px 0 oklch(0.70 0.06 60 / 0.12);
}
.sh-rail-cap { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--muted); font-weight: 600; }
/* Past-window "nap overdue" flag next to timer */
.overtired-flag { font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: oklch(0.55 0.18 25); background: oklch(0.96 0.06 25 / 0.30); border: 1px solid oklch(0.70 0.14 25 / 0.35); border-radius: 8px; padding: 3px 8px; vertical-align: middle; margin-left: 10px; }
[data-mode="dark"] .overtired-flag { color: oklch(0.82 0.14 25); background: oklch(0.38 0.10 25 / 0.30); border-color: oklch(0.60 0.12 25 / 0.40); }
/* Hero card pulses red border when overtired */
.card.hero[data-overtired] { animation: overtired-pulse 3s ease-in-out infinite; }
@keyframes overtired-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.65 0.18 25 / 0); }
  50% { box-shadow: 0 0 0 2px oklch(0.65 0.18 25 / 0.45), 0 4px 20px oklch(0.60 0.15 25 / 0.18); }
}
@media (prefers-reduced-motion: reduce) { .card.hero[data-overtired] { animation: none; } }
/* Cue 2 — hero card border + glow blooms during sweetspot */
.card.hero[data-sweet="entering"] { box-shadow: 0 0 0 1px oklch(0.68 0.10 280 / 0.38), 0 6px 28px oklch(0.62 0.10 280 / 0.16); }
.card.hero[data-sweet="now"] { box-shadow: 0 0 0 1.5px oklch(0.64 0.14 280 / 0.68), 0 6px 36px oklch(0.58 0.14 280 / 0.28); }
.card.hero[data-sweet="passing"] { box-shadow: 0 0 0 1px oklch(0.68 0.10 280 / 0.28), 0 6px 22px oklch(0.62 0.10 280 / 0.12); }
/* ---- hero card — moon glow ---- */
.card.hero { position: relative; }
.card.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 60% at 92% 20%, oklch(0.90 0.07 292 / 0.38), transparent 62%),
    radial-gradient(ellipse 30% 75% at 99% 65%, oklch(0.76 0.10 270 / 0.20), transparent 66%);
  mix-blend-mode: soft-light;
  opacity: 0.6; transition: opacity 1s ease;
}
/* real crescent moon, top-right, sitting in the glow */
.card.hero .hero-moon {
  position: absolute; top: 15px; right: 17px;
  width: 30px; height: 30px; z-index: 1;
  color: oklch(0.85 0.11 90);
  opacity: 0.95; pointer-events: none;
  filter: drop-shadow(0 1px 1px oklch(0.55 0.09 60 / 0.25)) drop-shadow(0 0 10px oklch(0.9 0.1 92 / 0.45));
}
[data-mode="dark"] .card.hero .hero-moon {
  color: oklch(0.93 0.08 95);
  filter: drop-shadow(0 0 14px oklch(0.9 0.12 90 / 0.8));
}
[data-mode="dark"] .card.hero::before { mix-blend-mode: screen; opacity: 0.78; }
[data-sweet="entering"] .card.hero::before,
.card.hero[data-sweet="entering"]::before { opacity: 0.78; }
.card.hero[data-sweet="now"]::before { opacity: 1; }
.card.hero[data-sweet="passing"]::before { opacity: 0.85; }
[data-mode="dark"] .card.hero[data-sweet="now"]::before { opacity: 1; }
.card.hero > * { position: relative; z-index: 1; }
.card.hero::before { z-index: 0; }

/* ---- glassmorphism ---- */
@supports (backdrop-filter: blur(1px)) {
  .phone { background-color: transparent; }
  .card { background: oklch(0.98 0.012 70 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .info-card { background: oklch(0.98 0.012 70 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .sheet { background: oklch(0.98 0.012 70 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  [data-mode="dark"] .card,
  [data-mode="dark"] .info-card,
  [data-mode="dark"] .sheet {
    background: oklch(0.22 0.018 50 / 0.62);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
  }
  /* hero card: restore warm fire gradients over glass base */
  .card.hero {
    background-color: oklch(0.95 0.022 66 / 0.74);
    background-image:
      radial-gradient(ellipse 60% 40% at var(--light-x, 72%) var(--light-y, 50%),
        oklch(0.99 0.01 70 / calc(0.14 + var(--fire-c, 0.10) * 1.2)) 0%, transparent 60%),
      radial-gradient(ellipse at 12% 8%, var(--mat-highlight), transparent 52%),
      var(--tex-clay);
    background-size: 100% 100%, 100% 100%, 180px 180px;
    background-blend-mode: screen, soft-light, normal;
    backdrop-filter: blur(18px) saturate(1.30);
    -webkit-backdrop-filter: blur(18px) saturate(1.30);
  }
  [data-mode="dark"] .card.hero {
    background-color: oklch(0.20 0.030 48 / 0.68);
    background-image:
      radial-gradient(ellipse 80% 55% at var(--light-x, 20%) var(--light-y, 110%),
        oklch(0.65 0.26 40 / calc(0.12 + var(--fire-a, 0.06) * 1.4)), transparent 65%),
      radial-gradient(ellipse at 12% 90%, oklch(0.52 0.18 42 / 0.24), transparent 55%),
      var(--tex-clay);
    background-size: 100% 100%, 100% 100%, 180px 180px;
    background-blend-mode: screen, normal, multiply;
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
  }
  /* dayjob dark: lighter, cooler glass — no warm amber cast */
  :is([data-mode="dark"][data-theme="dayjob"], [data-mode="dark"][data-theme="dayjob-girl"], [data-mode="dark"][data-theme="dayjob-boy"]) .card,
  :is([data-mode="dark"][data-theme="dayjob"], [data-mode="dark"][data-theme="dayjob-girl"], [data-mode="dark"][data-theme="dayjob-boy"]) .info-card,
  :is([data-mode="dark"][data-theme="dayjob"], [data-mode="dark"][data-theme="dayjob-girl"], [data-mode="dark"][data-theme="dayjob-boy"]) .sheet {
    background: oklch(0.32 0.012 80 / 0.70);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
  }

/* ---- timeline ---- */
.tl-hd { display: flex; align-items: center; gap: 10px; }
.tl-back { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hair); color: var(--soft); }
.tl-chipbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.tl-chip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--soft); background: color-mix(in oklch, var(--accent-tint) 60%, transparent); }
.tl-chip .icon { width: 15px; height: 15px; }
.tl-chip.on { color: var(--accent-ink); background: var(--surface); box-shadow: 0 1px 3px var(--mat-cast); }
.tl-day { margin-bottom: 18px; }
.tl-day-hd { font-family: var(--font-sans); font-size: 14px; font-weight: 800; color: var(--soft); margin: 6px 2px 8px; }
.tl-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; cursor: pointer; }
.tl-empty { color: var(--soft); text-align: center; padding: 48px 16px; }
}

/* ---- account / sign-in ---- */
.signin-pills { display: flex; flex-direction: column; gap: 10px; }
.signin-pill { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 3px var(--mat-cast); }
.signin-pill .icon { width: 18px; height: 18px; }
.onb-or { text-align: center; color: var(--soft); font-size: 13px; margin: 14px 0 10px; }
.account-row { display: flex; align-items: center; justify-content: space-between; }
.conflict-fam { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: color-mix(in oklch, var(--accent-tint) 50%, transparent); }

/* --- Sleep model chips & tips --- */
.tip-card {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tip-hd {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.tip-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.tip-dismiss {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink-2);
}

.bedtime-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--card-bg);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0 0 0.75rem;
}

.sweet-clock {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-2);
  margin-top: 0.2rem;
}

.nap-context {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-3);
  margin-top: 0.1rem;
}

.regression-banner {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 3px solid var(--accent);
}
.regression-banner p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.reg-hd { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }