/* ============================================================
   Milk & Moon — soft, warm, night-friendly
   ============================================================ */

:root {
  --cream: #fbf4ee;
  --paper: #fffaf6;
  --blush: #f6d6d0;
  --blush-2: #fbe7e2;
  --rose: #d98b8b;
  --rose-deep: #c06f72;
  --left: #d98b8b;      /* rose */
  --right: #9fb393;     /* sage */
  --right-deep: #7f9773;
  --ink: #4a3540;
  --ink-2: #7d6a72;
  --line: #efe2da;
  --shadow: 0 10px 30px -12px rgba(122, 72, 80, .28);
  --shadow-sm: 0 4px 14px -6px rgba(122, 72, 80, .25);
  --radius: 22px;
  --bg: var(--cream);
  --card: var(--paper);
  --danger: #b5545a;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1d1418;
    --paper: #2a1e23;
    --blush: #4a2f36;
    --blush-2: #34242a;
    --rose: #e49a98;
    --rose-deep: #f0aeac;
    --left: #e49a98;
    --right: #a9c09c;
    --right-deep: #bcd2b0;
    --ink: #f6e7e4;
    --ink-2: #bba3a8;
    --line: #3b2a30;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, .5);
    --danger: #ef8d90;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cream: #1d1418;
  --paper: #2a1e23;
  --blush: #4a2f36;
  --blush-2: #34242a;
  --rose: #e49a98;
  --rose-deep: #f0aeac;
  --left: #e49a98;
  --right: #a9c09c;
  --right-deep: #bcd2b0;
  --ink: #f6e7e4;
  --ink-2: #bba3a8;
  --line: #3b2a30;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, .5);
  --danger: #ef8d90;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% -10%, var(--blush-2) 0, transparent 45%),
    radial-gradient(circle at 110% 30%, var(--blush-2) 0, transparent 40%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
  transition: background-color .4s ease, color .4s ease;
}

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; font-size: max(16px, 1rem); color: inherit; } /* <16px makes iOS zoom on focus */

.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.center { text-align: center; }
.hint { color: var(--ink-2); }

/* ---------- cards & buttons ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  padding: 18px;
}

.btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff;
  box-shadow: 0 10px 24px -10px var(--rose-deep);
}
:root[data-theme="dark"] .btn-primary { color: #2a1e23; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #2a1e23; } }
.btn-soft { background: var(--blush-2); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: .88rem; }
.btn-xl { padding: 18px 34px; font-size: 1.15rem; min-width: 240px; }
.btn svg { width: 22px; height: 22px; fill: currentColor; }
.danger { color: var(--danger) !important; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 700; font-size: .85rem; color: var(--ink-2); margin: 0 0 6px 4px; }
.field input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px var(--blush-2); }
.form-error { color: var(--danger); font-weight: 600; font-size: .9rem; min-height: 1.2em; margin: -4px 4px 10px; }

/* ---------- welcome ---------- */
.welcome {
  max-width: 420px; margin: 0 auto;
  /* clear the notch / status bar when installed (viewport-fit=cover) */
  padding: calc(40px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 100dvh; justify-content: center;
}
.welcome-art { width: 170px; height: 170px; animation: float 6s ease-in-out infinite; }
.welcome-art svg { width: 100%; height: 100%; }
.brand { font-size: 2.6rem; margin: 4px 0 24px; }
.brand span { color: var(--rose); font-style: italic; font-weight: 400; }
.welcome-card { width: 100%; text-align: left; }
.welcome-card .hint { margin-bottom: 12px; }
.welcome-card .hint.small { margin: 14px 4px 0; text-align: center; }

@keyframes float { 50% { transform: translateY(-8px) rotate(-2deg); } }

/* ---------- app shell ---------- */
.app {
  max-width: 480px; margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(110px + env(safe-area-inset-bottom));
}
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.greeting { color: var(--ink-2); font-weight: 700; font-size: .9rem; }
.baby-title { font-size: 1.7rem; }

.tab { animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* ---------- last feed ---------- */
.last-card { display: flex; gap: 14px; align-items: center; }
.last-dot {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--blush-2); display: grid; place-items: center;
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; color: #fff;
}
.last-dot.left { background: var(--left); }
.last-dot.right { background: var(--right); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 800; color: var(--ink-2); }
.last-main { font-weight: 800; font-size: 1.1rem; }
.last-sub { color: var(--ink-2); font-size: .9rem; }

/* ---------- sides + timer ---------- */
.sides {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(4px, 2vw, 10px); margin: 28px 0 6px;
}
.side {
  position: relative; justify-self: center;
  width: var(--side-size); height: var(--side-size); border-radius: 50%;
  border: 2px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, background-color .25s, border-color .25s, box-shadow .25s;
}
.side:active { transform: scale(.94); }
.side-letter { font-family: "Fraunces", serif; font-size: clamp(1.4rem, 6.5vw, 1.7rem); font-weight: 600; line-height: 1; }
.side-name { font-size: .72rem; font-weight: 700; color: var(--ink-2); }
.side-tag {
  position: absolute; top: -10px; padding: 2px 8px; border-radius: 99px;
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--ink); color: var(--bg); opacity: 0; transform: translateY(4px);
  transition: opacity .25s, transform .25s;
}
.side.suggested .side-tag { opacity: 1; transform: none; }
.side[data-side="left"][aria-checked="true"] { background: var(--left); border-color: var(--left); color: #fff; box-shadow: 0 10px 24px -10px var(--left); }
.side[data-side="right"][aria-checked="true"] { background: var(--right); border-color: var(--right); color: #fff; box-shadow: 0 10px 24px -10px var(--right-deep); }
.side[aria-checked="true"] .side-name { color: rgba(255,255,255,.9); }
.side.live::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .0;
  animation: ripple 2.2s ease-out infinite;
}
.side[data-side="left"].live::after { color: var(--left); }
.side[data-side="right"].live::after { color: var(--right); }
@keyframes ripple { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }

/* Circles scale with the screen so L + timer + R always fit side by side */
.sides { --side-size: clamp(60px, 20vw, 84px); }
.timer-wrap { position: relative; width: clamp(132px, 44vw, 172px); height: clamp(132px, 44vw, 172px); }
.ring { width: 100%; height: 100%; }   /* the fill path already starts at 12 o'clock */
.ring-track { fill: var(--card); stroke: var(--blush-2); stroke-width: 7; }
.ring-fill {
  fill: none; stroke: var(--rose); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset .9s linear, stroke .3s;
}
.app.feeding-right .ring-fill { stroke: var(--right); }
.timer-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-label { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.timer { font-family: "Fraunces", serif; font-size: clamp(1.9rem, 10vw, 2.6rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.timer-total { font-size: .8rem; color: var(--ink-2); font-weight: 700; min-height: 1.1em; }
.app.feeding .timer-wrap { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.025); } }

.suggest { text-align: center; color: var(--ink-2); font-size: .9rem; margin: 30px 0 14px; min-height: 1.3em; }
.suggest b { color: var(--ink); }

.controls { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#main-btn .i-stop { display: none; }
.app.feeding #main-btn .i-play { display: none; }
.app.feeding #main-btn .i-stop { display: block; }
.app.feeding #main-btn { background: var(--ink); color: var(--bg); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.sub-controls { display: flex; gap: 8px; }

/* ---------- today ---------- */
.today { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; text-align: center; }
.stat-num { font-family: "Fraunces", serif; font-size: 1.45rem; font-weight: 600; }
.stat-label { font-size: .75rem; color: var(--ink-2); font-weight: 700; }
.balance { grid-column: 1 / -1; }
.balance-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--blush-2); }
.balance-bar span { height: 100%; transition: width .5s ease; }
#bal-left { background: var(--left); }
#bal-right { background: var(--right); }
.balance-legend { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-top: 6px; }

/* ---------- history ---------- */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.section-title { margin: 26px 0 12px; font-size: 1.2rem; }
.section-head h3 { font-size: 1.2rem; }

.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 150px; }
.bar-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.bar { width: 100%; max-width: 30px; display: flex; flex-direction: column-reverse; border-radius: 10px; overflow: hidden; background: var(--blush-2); min-height: 4px; }
.bar span { display: block; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.bar .b-left { background: var(--left); }
.bar .b-right { background: var(--right); }
.bar-day { font-size: .72rem; font-weight: 800; color: var(--ink-2); }
.bar-col.today .bar-day { color: var(--ink); }
.bar-val { font-size: .66rem; color: var(--ink-2); font-weight: 700; min-height: 1em; }
.chart-legend { display: flex; gap: 14px; margin-top: 14px; font-size: .8rem; font-weight: 700; flex-wrap: wrap; }
.chart-legend .muted { margin-left: auto; }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lg-left::before { background: var(--left); }
.lg-right::before { background: var(--right); }

.ribbon { display: flex; gap: 6px; flex-wrap: wrap; }
.bead {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: "Fraunces", serif; font-weight: 600; font-size: .95rem;
  animation: pop .35s cubic-bezier(.2,1.4,.4,1) both;
}
.bead.left { background: var(--left); }
.bead.right { background: var(--right); }
.bead.both { font-size: .66rem; }
.bead.both.left { background: linear-gradient(90deg, var(--left) 50%, var(--right) 50%); }
.bead.both.right { background: linear-gradient(90deg, var(--right) 50%, var(--left) 50%); }
.bead:first-child { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.ribbon-card .hint { margin-top: 12px; }

.day-group { margin-bottom: 18px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 8px; }
.day-head h4 { margin: 0; font-family: "Fraunces", serif; font-weight: 600; font-size: 1rem; }
.day-head span { font-size: .8rem; color: var(--ink-2); font-weight: 700; }
.feed-list { padding: 4px 0; overflow: hidden; }
.feed-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: none; border: 0; text-align: left;
  border-bottom: 1px solid var(--line);
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:active { background: var(--blush-2); }
.feed-side {
  flex: none; width: 34px; height: 34px; border-radius: 12px; color: #fff;
  display: grid; place-items: center; font-family: "Fraunces", serif; font-weight: 600;
}
.feed-side.left { background: var(--left); }
.feed-side.right { background: var(--right); }
.feed-body { flex: 1; min-width: 0; }
.feed-time { display: block; font-weight: 800; }
.feed-note { display: block; color: var(--ink-2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-dur { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.feed-row.live .feed-dur { color: var(--rose); }
.session-link { width: 2px; height: 10px; background: var(--line); margin: -6px 0 -6px 32px; }
.empty { text-align: center; padding: 30px 10px; color: var(--ink-2); }
.empty .big { font-size: 2rem; display: block; margin-bottom: 6px; }

/* ---------- profile ---------- */
.profile-card { text-align: center; margin-bottom: 14px; }
.avatar {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--blush), var(--rose));
  color: #fff; display: grid; place-items: center;
  font-family: "Fraunces", serif; font-size: 2rem; font-weight: 600;
}
.profile-user { font-weight: 800; font-size: 1.1rem; }
#profile-form { margin-bottom: 14px; }
.stack { padding: 6px 0; margin-bottom: 18px; }
.row-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; padding: 14px 18px; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.row-btn:last-child { border-bottom: 0; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 28px));
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 26px; padding: 6px;
  box-shadow: var(--shadow); z-index: 10;
}
.tab-btn {
  border: 0; background: none; border-radius: 20px; padding: 8px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .72rem; font-weight: 800; color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.tab-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-btn.active { background: var(--blush-2); color: var(--rose-deep); }
.tab-btn.active svg { fill: color-mix(in srgb, var(--rose) 30%, transparent); }

/* ---------- sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(40, 20, 28, .35); z-index: 20; animation: fade .2s ease; }
.sheet {
  max-height: calc(100dvh - 16px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(480px, 100%); z-index: 21;
  background: var(--card); border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,.3);
  animation: slideUp .3s cubic-bezier(.2,.9,.3,1);
}
.sheet-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { margin-bottom: 14px; }
@keyframes slideUp { from { transform: translate(-50%, 100%); } }
@keyframes fade { from { opacity: 0; } }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; padding: 12px; border-radius: 16px;
  border: 1.5px solid var(--line); font-weight: 800; cursor: pointer; transition: all .2s;
}
.seg label:first-child input:checked + span { background: var(--left); border-color: var(--left); color: #fff; }
.seg label:last-child input:checked + span { background: var(--right); border-color: var(--right); color: #fff; }
.seg input:focus-visible + span { box-shadow: 0 0 0 4px var(--blush-2); }

.stepper { display: flex; gap: 8px; }
.stepper input { flex: 1; min-width: 0; text-align: center; font-weight: 800; }
.stepper button {
  flex: none; width: 52px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--blush-2); font-size: 1.3rem; font-weight: 800;
}
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sheet-actions .danger { margin-right: auto; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top));
  transform: translate(-50%, -150%); z-index: 30;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: .9rem;
  padding: 10px 18px; border-radius: 99px; box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2); max-width: calc(100% - 32px);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- small screens ---------- */
@media (max-width: 370px) {
  .btn-xl { min-width: 0; width: 100%; }
  .app { padding-left: 14px; padding-right: 14px; }
}

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

/* ---------- smart tracking ---------- */
.last-card { cursor: pointer; transition: transform .15s ease; }
.last-card:active { transform: scale(.985); }
.last-card:focus-visible { outline: 3px solid var(--blush); outline-offset: 2px; }

.smart-line { text-align: center; color: var(--ink-2); font-size: .8rem; font-weight: 700; margin: -8px 0 14px; min-height: 1.1em; }
.smart-line:empty { display: none; }

.auto-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--blush-2); border: 1.5px dashed var(--rose);
  border-radius: 18px; padding: 12px 14px; margin: 0 0 16px;
  font-size: .9rem; animation: fadeUp .35s ease both;
}
.auto-banner .auto-icon { font-size: 1.3rem; line-height: 1.2; }
.app.auto-logged .ring-fill { stroke-dasharray: 4 8; stroke-dashoffset: 0 !important; opacity: .7; animation: spin 12s linear infinite; transform-origin: 60px 60px; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px;
  font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px;
  background: var(--blush-2); color: var(--rose-deep); border: 1px dashed var(--rose);
}
.badge.edited { border-style: solid; border-color: var(--line); color: var(--ink-2); }

.row-hint { color: var(--ink-2); font-size: .84rem; line-height: 1.5; padding: 0 18px 14px; margin: 0; border-bottom: 1px solid var(--line); }
/* the hint belongs to the row above it: no divider between them */
.row-btn:has(+ .row-hint:not(:empty)) { border-bottom: 0; padding-bottom: 6px; }
.row-hint:empty { display: none; }

.field-hint { display: block; color: var(--ink-2); font-weight: 700; font-size: .8rem; margin: 6px 4px 0; }
.sheet-info { background: var(--blush-2); border-radius: 14px; padding: 10px 12px; font-size: .85rem; margin: -2px 0 14px; }

.choice { z-index: 22; }
.choice-body { color: var(--ink-2); margin: -4px 0 18px; }
.choice-body b { color: var(--ink); }
.choice-actions { display: flex; flex-direction: column; gap: 8px; }
.choice-actions .btn { width: 100%; }

.toast { display: flex; align-items: center; gap: 12px; }
#toast-action {
  border: 0; background: var(--rose); color: #fff; font-weight: 800; font-size: .82rem;
  padding: 5px 12px; border-radius: 99px; flex: none;
}

/* ---------- iOS form fixes ---------- */
/* iOS gives date pickers a fixed intrinsic width that ignores width:100%;
   these rules keep them inside their card. */
input[type="datetime-local"], input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: 52px; text-align: left; box-sizing: border-box;
}
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field { min-width: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- compact layout ----------
   Slightly "zoomed out" so the whole Feed screen (including the
   while-feeding controls) fits on a phone without scrolling. */
.app { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(101px + env(safe-area-inset-bottom)); }
.card { padding: 14px 16px; border-radius: 20px; }
.topbar { margin-bottom: 10px; }
.greeting { font-size: .82rem; }
.baby-title { font-size: 1.45rem; }

.last-card { gap: 12px; }
.last-dot { width: 40px; height: 40px; font-size: 1.05rem; }
.last-main { font-size: 1rem; }
.last-sub { font-size: .85rem; }

.sides { margin: 18px 0 4px; --side-size: clamp(58px, 18vw, 74px); }
.side-letter { font-size: clamp(1.3rem, 6vw, 1.5rem); }
.timer-wrap { width: clamp(124px, 38vw, 150px); height: clamp(124px, 38vw, 150px); }
.timer { font-size: clamp(1.8rem, 9vw, 2.25rem); }
.timer-label { font-size: .7rem; }

.suggest { margin: 24px 0 8px; font-size: .86rem; }
.smart-line { margin: -4px 0 10px; font-size: .76rem; }
.auto-banner { padding: 9px 12px; margin-bottom: 10px; font-size: .85rem; }
.controls { gap: 8px; }
.btn-xl { padding: 14px 30px; font-size: 1.05rem; }
.sub-controls .btn { padding: 9px 16px; font-size: .9rem; }

.today { margin-top: 14px; gap: 8px 6px; }
.stat-num { font-size: 1.25rem; }
.stat-label { font-size: .7rem; }

.tab-btn { padding: 6px 0 4px; }
.tab-btn svg { width: 22px; height: 22px; }

/* History / Profile: same tightening for headings and lists */
.section-title { margin: 20px 0 10px; font-size: 1.1rem; }
.section-head h3 { font-size: 1.1rem; }
.chart { height: 220px; }  /* History scrolls, so the weekly chart gets room to read */
.feed-row { padding: 10px 14px; }
.row-btn { padding: 12px 16px; }
.row-hint { padding: 0 16px 12px; }
.avatar { width: 64px; height: 64px; font-size: 1.7rem; }

/* Feed screen fills the phone: the today card sits just above the tab bar,
   and any spare height is shared above the timer and above the card. */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.app > main { flex: 1; display: flex; flex-direction: column; }
#tab-feed:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
#tab-feed .sides, #tab-feed .today { margin-top: auto; }
#tab-feed .last-card { margin-bottom: 18px; }
#tab-feed .controls { margin-bottom: 14px; }

/* ---------- Feed screen grows into tall phones ----------
   --g is the screen height beyond 770px (0 on shorter phones, max 160px).
   Uses svh (the height with Safari's toolbar showing) so sizes don't twitch
   while the toolbar slides in and out during scrolling.
   Every size below is "compact size + a share of --g", so short phones keep
   the compact layout (idle, feeding and auto-logged all fit) and taller
   phones like the iPhone 16 (852px) fill the extra height. Width caps keep
   L + timer + R side by side. */
#tab-feed {
  --g: clamp(0px, calc(100svh - 770px), 160px);
  --timer: min(46vw, calc(150px + var(--g) * .42));
  --side-size: min(20vw, calc(72px + var(--g) * .14));
}
#tab-feed .sides { --side-size: inherit; gap: clamp(4px, 2vw, 12px); }
#tab-feed .timer-wrap { width: var(--timer); height: var(--timer); }
#tab-feed .timer { font-size: calc(var(--timer) * .25); }
#tab-feed .timer-label { font-size: calc(.7rem + var(--g) * .0015); }
#tab-feed .timer-total { font-size: calc(.78rem + var(--g) * .0015); }
#tab-feed .side-letter { font-size: calc(var(--side-size) * .34); }
#tab-feed .side-name { font-size: calc(.72rem + var(--g) * .001); }

.topbar .baby-title { font-size: calc(1.45rem + var(--g) * .005); }
.topbar { --g: clamp(0px, calc(100svh - 770px), 160px); }
/* Greeting, name and age on the left; the last / next chips keep their size on
   the right. A long name steps down a size and wraps onto a second line (then
   trims) rather than pushing the chips off screen. */
.topbar { gap: 12px; }
.topbar-text { flex: 1; min-width: 0; }
.topbar .baby-title {
  line-height: 1.15; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  padding-bottom: .15em; margin-bottom: -.15em;   /* room for g/y tails inside the clip, layout unchanged */
}
@media (max-width: 400px) { .topbar .baby-title { font-size: calc(1.3rem + var(--g) * .004); } }
.topbar .baby-title[data-len="l"] { font-size: calc(1.25rem + var(--g) * .004); }
.topbar .baby-title[data-len="xl"] { font-size: calc(1.1rem + var(--g) * .003); }

#tab-feed .last-card { padding: calc(14px + var(--g) * .05) 16px; gap: calc(12px + var(--g) * .04); }
#tab-feed .last-dot { width: calc(40px + var(--g) * .12); height: calc(40px + var(--g) * .12); font-size: calc(1.05rem + var(--g) * .003); }
#tab-feed .last-main { font-size: calc(1rem + var(--g) * .0025); }
#tab-feed .last-sub { font-size: calc(.85rem + var(--g) * .0012); }

#tab-feed .suggest { font-size: calc(.86rem + var(--g) * .0016); margin-top: calc(24px + var(--g) * .08); }
#tab-feed .smart-line { font-size: calc(.76rem + var(--g) * .0012); }
#tab-feed .btn-xl { padding: calc(14px + var(--g) * .06) 34px; font-size: calc(1.05rem + var(--g) * .0018); min-width: min(calc(240px + var(--g) * .3), 100%); }
#tab-feed .sub-controls .btn { padding: calc(9px + var(--g) * .03) 18px; font-size: calc(.9rem + var(--g) * .0012); }

#tab-feed .today { padding: calc(14px + var(--g) * .06) 16px; gap: calc(8px + var(--g) * .04) 6px; }
#tab-feed .stat-num { font-size: calc(1.25rem + var(--g) * .0045); }
#tab-feed .stat-label { font-size: calc(.7rem + var(--g) * .0012); }
#tab-feed .balance-bar { height: calc(10px + var(--g) * .025); }
#tab-feed .balance-legend { font-size: calc(.78rem + var(--g) * .0012); }

/* ---------- nothing shows through the tab bar ----------
   The bar is solid, and a strip of page background sits behind and just
   above it (with a short fade), so scrolled content disappears before
   reaching the bar instead of sliding visibly underneath it. */
.tabbar { background: var(--card); }
.app::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; pointer-events: none;
  height: calc(64px + 14px + 18px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 18px);
}

/* ⓘ button next to the smart-tracking summary */
.info-btn {
  display: inline-grid; place-items: center; vertical-align: 1px;
  width: 20px; height: 20px; margin-left: 8px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--ink-2); background: none;
  color: var(--ink-2); font: italic 700 .72rem/1 Georgia, serif;
}
.info-btn:active { background: var(--blush-2); }
.choice-body p { margin: 0 0 10px; }
.choice-body p:last-child { margin-bottom: 0; }

/* side-history beads only pop in on the first paint after page load */
.ribbon.settled .bead { animation: none; }

/* ---------- baby age, next feed, overnight, weekly trend ---------- */
.baby-age { margin: 3px 0 0; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.last-text { flex: 1; min-width: 0; }
.last-next { flex: none; text-align: right; padding-left: 10px; border-left: 1px solid var(--line); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.last-next-time { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.last-next.late .last-next-time, .last-next.late .eyebrow { color: var(--rose-deep); }
.overnight {
  grid-column: 1 / -1; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .8rem; font-weight: 700; color: var(--ink-2); text-align: left;
}
.week-trend { margin: 8px 0 0; font-size: .82rem; font-weight: 700; color: var(--ink-2); }

/* ---------- toasts: clear of the Dynamic Island / notch, room for text ---------- */
.toast {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  width: max-content; max-width: min(440px, calc(100% - 28px));
  padding: 12px 14px 12px 18px; border-radius: 18px;
  line-height: 1.35; text-align: left; align-items: center; gap: 12px;
  /* fully off-screen and invisible when hidden, whatever its height */
  transform: translate(-50%, calc(-100% - 24px - env(safe-area-inset-top, 0px)));
  opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease, visibility 0s linear .35s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease; }
#toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#toast-action { align-self: center; }

/* ---------- History: Daily / Weekly / Monthly ---------- */
.view-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--blush-2); border-radius: 14px; padding: 4px; margin: -2px 0 14px;
}
.view-tabs button {
  border: 0; background: none; border-radius: 10px; padding: 8px 0;
  font-weight: 800; font-size: .86rem; color: var(--ink-2); transition: background-color .2s, color .2s;
}
.view-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.period-stats { padding: 10px 14px; margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.sum-date {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--blush-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.sum-date b { font-family: "Fraunces", serif; font-size: 1rem; }
.sum-date small { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: var(--ink-2); letter-spacing: .04em; }
.sum-row .feed-dur { color: var(--ink); }

/* Soft crossfade when the theme flips at sunset / sunrise (see applyTheme) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 2.2s; animation-timing-function: ease-in-out; }

/* ---------- installed app: clear of the status-bar frost ----------
   iOS 27 frosts a band just below the status bar in home-screen apps (pages
   can't turn it off). The Feed header is nudged down out of it (transform, so
   nothing below moves); History and Profile, which have no header, start lower. */
@media (display-mode: standalone) {
  .topbar { transform: translateY(20px); }
  #tab-history, #tab-profile { padding-top: 20px; }
}