/* Léon tracker — the design system lives in this one file.
   Mobile-first, dark-only, iOS-native feel: near-black ground, hairline
   borders, tinted icon squares, bottom sheets, one accent. Tokens up top,
   components below. No framework, no build step. */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #07090e;
  --surface: #11151d;
  --surface-2: #1a1f2b;
  --surface-3: #242b3a;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-2: rgba(255, 255, 255, 0.14);

  /* text */
  --text: #f4f6fa;
  --text-2: #9aa4b8;
  --text-3: #626d83;

  /* color */
  --accent: #6fbbff;
  --accent-ink: #061423;
  --good: #5ee39a;
  --warn: #ff8f8f;
  --sleep-hue: #948af8;

  /* icon-square tints per event family */
  --tint-feed: rgba(111, 187, 255, 0.16);
  --tint-diaper: rgba(255, 190, 92, 0.15);
  --tint-sleep: rgba(148, 138, 248, 0.16);
  --tint-pump: rgba(94, 227, 198, 0.14);
  --tint-photo: rgba(255, 143, 191, 0.15);
  --tint-note: rgba(154, 164, 184, 0.14);
  --tint-health: rgba(255, 143, 143, 0.14);
  --tint-weight: rgba(94, 227, 154, 0.14);
  --tint-bath: rgba(97, 218, 251, 0.14);
  --tint-milestone: rgba(255, 214, 102, 0.15);

  /* shape + rhythm */
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 11px;
  --tap: 64px;
}

/* -------- Base -------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100dvh;
}
button {
  font: inherit; color: inherit;
  background: none; border: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
input, textarea { font-family: inherit; }

.wrap { max-width: 480px; margin: 0 auto; padding: 14px 16px 40px; }

/* -------- Header -------- */
.app-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
.app-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.age-badge {
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--tint-feed);
  padding: 4px 10px; border-radius: 999px;
}
.head-date { margin-left: auto; font-size: 13px; color: var(--text-2); }

/* -------- Status hero: one card, hairline-divided cells -------- */
.status {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.status .cell { background: var(--surface); padding: 13px 15px; min-height: 76px; }
.status .label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.status .value { font-size: 18px; font-weight: 650; margin-top: 5px; letter-spacing: -0.01em; }
.status .sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.status.sleeping .cell.sleep {
  background: linear-gradient(140deg, #191d31, #262052);
}
.status.sleeping .cell.sleep .value { color: #cac4ff; }

/* -------- Action grid -------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid button {
  min-height: 96px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 14px;
  text-align: left;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  transition: transform 0.06s ease, background 0.15s ease;
}
.grid button:active { transform: scale(0.97); background: var(--surface-2); }
.tile-ico {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 5px;
}
.tile-title { font-size: 16px; font-weight: 650; }
.grid button .desc { font-size: 12px; color: var(--text-2); font-weight: 450; }
.grid button.wide {
  grid-column: 1 / -1;
  min-height: 60px;
  flex-direction: row; align-items: center; gap: 12px;
}
.grid button.wide .tile-ico { margin-bottom: 0; }

/* icon-square tints */
.t-feed { background: var(--tint-feed); }
.t-diaper { background: var(--tint-diaper); }
.t-sleep { background: var(--tint-sleep); }
.t-pump { background: var(--tint-pump); }
.t-photo { background: var(--tint-photo); }
.t-note { background: var(--tint-note); }
.t-health { background: var(--tint-health); }
.t-weight { background: var(--tint-weight); }
.t-bath { background: var(--tint-bath); }
.t-milestone { background: var(--tint-milestone); }

/* -------- Section titles -------- */
h2 {
  font-size: 12px; font-weight: 650; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: 24px 2px 10px;
}

/* -------- Timeline: grouped list -------- */
.day-head { margin: 20px 2px 8px; }
.timeline {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.load-more {
  width: 100%; min-height: 48px; margin-top: 12px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text-2); font-size: 14px; font-weight: 600;
}
.load-more:active { background: var(--surface-2); }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px 11px 14px;
  min-height: 62px;
}
.item + .item { border-top: 1px solid var(--hairline); }
.item .ico {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex: none;
}
.item .body { flex: 1; min-width: 0; }
.item .t1 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.item .t2 { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.item .when { text-align: right; flex: none; }
.item .when-d { font-size: 11px; color: var(--text-3); }
.item .when-t { font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 1px; }
.item .del {
  width: 40px; height: 40px; flex: none;
  color: var(--text-3); font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.item .del:active { background: var(--surface-2); color: var(--warn); }

/* -------- Wet-diaper nudge -------- */
.nudge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 190, 92, 0.1);
  border: 1px solid rgba(255, 190, 92, 0.3);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px; font-weight: 550;
  color: #ffd9a0;
}
.nudge-ico { font-size: 18px; }
.nudge-sleep {
  background: rgba(148, 138, 248, 0.12);
  border-color: rgba(148, 138, 248, 0.32);
  color: #cac4ff;
  cursor: pointer;
}
.nudge-sleep:active { background: rgba(148, 138, 248, 0.2); }

/* -------- Photo gallery -------- */
.gallery-month {
  font-size: 12px; font-weight: 650; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 16px 2px 8px;
}
.gallery-month:first-child { margin-top: 4px; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.gallery-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface-2);
  cursor: pointer;
}

/* -------- Breathing dots -------- */
.br-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: baseline;
}
.br-normal { background: var(--good); }
.br-grunting { background: #ffd166; }
.br-retractions { background: #ff9f5e; }
.br-labored { background: var(--warn); }

/* -------- Doctor summary -------- */
.summary {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px;
  margin: 12px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.55;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  -webkit-user-select: text; user-select: text;
}

/* -------- Weight curve -------- */
.curve { margin-top: 10px; }
.curve svg { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md); }

/* -------- Bottom sheets -------- */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100;
  animation: fade-in 0.18s ease-out;
}
.modal {
  background: var(--surface);
  border-top-left-radius: 28px; border-top-right-radius: 28px;
  border-top: 1px solid var(--hairline-2);
  width: 100%; max-width: 480px;
  padding: 8px 20px calc(18px + env(safe-area-inset-bottom));
  max-height: 90dvh; overflow-y: auto;
  /* keep the sheet's own overscroll from fighting the swipe-to-dismiss drag */
  overscroll-behavior: contain;
  animation: sheet-in 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.grabber {
  width: 36px; height: 5px; border-radius: 999px;
  background: var(--hairline-2);
  cursor: grab;
  margin: 4px auto 10px;
}
.modal h2 {
  margin: 6px 0 4px; color: var(--text);
  font-size: 20px; font-weight: 700;
  text-transform: none; letter-spacing: -0.01em;
}
.modal .grid { margin-top: 12px; }
.modal .grid button { min-height: 84px; }
.modal label {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: 16px 0 8px;
}
.modal .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.modal .row.stretch .chip { flex: 1; min-height: 54px; }

/* -------- Inputs -------- */
.modal input[type=number], .modal input[type=text], .modal textarea,
.login input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 15px 14px;
  font-size: 17px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal input:focus, .modal textarea:focus, .login input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111, 187, 255, 0.18);
}
.modal textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-3); }

.toast { display: flex; align-items: center; }
.toast .toast-act {
  margin-left: 12px;
  color: var(--accent);
  font-weight: 700; font-size: 14.5px;
  min-height: 32px; padding: 0 4px;
}

.field { position: relative; }
.field input { padding-right: 54px; }
.field .reveal {
  position: absolute; top: 0; right: 0;
  width: 52px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
}
.field .reveal:active { color: var(--accent); }

/* -------- Segmented control (exclusive choices) -------- */
.seg {
  display: flex; gap: 3px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 3px;
}
.seg-btn {
  flex: 1; min-height: 46px;
  border-radius: 11px;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.seg-btn.on {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* -------- Chips (toggles + small pickers) -------- */
.chip {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text-2);
  padding: 11px 16px;
  border-radius: 999px;
  min-height: 46px;
  font-size: 15px; font-weight: 600;
}
.chip.on {
  background: rgba(111, 187, 255, 0.16);
  border-color: rgba(111, 187, 255, 0.4);
  color: var(--accent);
}
.time-adjust { display: flex; gap: 6px; flex-wrap: wrap; }
.time-adjust .chip { padding: 9px 13px; min-height: 40px; font-size: 13.5px; }
.when-input {
  width: 100%; margin-top: 8px;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  border-radius: var(--r-md); padding: 13px 14px;
  font-size: 16px; /* >=16px so iOS doesn't zoom on focus */
  outline: none;
}
.when-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111, 187, 255, 0.18); }

/* -------- Buttons -------- */
.big-confirm {
  width: 100%; min-height: 56px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 16px;
  font-size: 17px; font-weight: 700;
  margin-top: 20px;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.big-confirm:active { transform: scale(0.98); filter: brightness(0.9); }
.big-confirm:disabled { opacity: 0.45; }
.secondary {
  width: 100%; min-height: 48px;
  color: var(--text-2);
  font-size: 15px; font-weight: 600;
  margin-top: 6px;
  border-radius: var(--r-md);
}
.secondary:active { background: var(--surface-2); }

/* -------- Photos -------- */
.photo-thumb {
  max-width: 100%; max-height: 150px;
  border-radius: var(--r-sm);
  display: block; margin-bottom: 7px;
}
.photo-thumb.attached { max-height: 110px; margin: 7px 0 2px; }

/* Photo attach control inside a capture sheet */
.attach-preview { position: relative; margin-top: 10px; }
.attach-preview:empty { display: none; }
.attach-thumb {
  max-width: 100%; max-height: 34vh;
  border-radius: var(--r-md); display: block;
}
.attach-remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.photo-preview {
  max-width: 100%; max-height: 40vh;
  border-radius: var(--r-md);
  display: block; margin: 10px auto 0;
}
.photo-full {
  max-width: 100%; max-height: 70vh;
  border-radius: var(--r-md);
  display: block; margin: 8px auto 0;
}
.photo-cap { margin-top: 10px; font-size: 15px; }

/* -------- Toast -------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--surface-3);
  border: 1px solid var(--hairline-2);
  color: var(--good);
  padding: 12px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 650;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 200;
  animation: pop 0.18s ease-out;
}

/* -------- Login -------- */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 92dvh; padding: 24px;
}
.login { width: 100%; max-width: 340px; }
.login-logo {
  width: 76px; height: 76px; border-radius: 24px;
  background: var(--tint-feed);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  margin: 0 auto 14px;
}
.login h1 {
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  text-align: center; margin: 0;
}
.login-sub {
  text-align: center; color: var(--text-2); font-size: 13.5px;
  margin: 6px 0 26px;
}
.login label {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: 16px 0 8px;
}
.login-foot {
  text-align: center; color: var(--text-3); font-size: 12px;
  margin-top: 22px; line-height: 1.5;
}
.err { color: var(--warn); font-size: 14px; margin-top: 12px; }

/* -------- Footer -------- */
.footer { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 30px; }
.footer button { color: var(--text-3); text-decoration: underline; min-height: 44px; padding: 0 12px; }

/* -------- Pull-to-refresh --------
   The whole page slides down under a reveal pane that lives just above
   the viewport, so the gesture reads like the native iOS behavior. */
.ptr-pane {
  position: fixed; left: 0; right: 0;
  top: calc(-1 * (72px + env(safe-area-inset-top)));
  height: calc(72px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 13px; letter-spacing: 0.02em;
  background: linear-gradient(to bottom, var(--surface-2), transparent);
  pointer-events: none;
  z-index: 150;
  will-change: transform;
}
.ptr-pane .ptr-icon {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  transition: transform 0.18s ease, color 0.12s ease, border-color 0.12s ease;
}
.ptr-pane.ready .ptr-icon {
  transform: rotate(180deg);
  color: var(--accent);
  border-color: rgba(111, 187, 255, 0.5);
}
.ptr-pane.spinning .ptr-icon {
  animation: ptr-spin 0.8s linear infinite;
  color: var(--accent);
  border-color: rgba(111, 187, 255, 0.5);
}
#app.ptr-drag, .ptr-pane.ptr-drag { transition: none; }
#app.ptr-snap, .ptr-pane.ptr-snap { transition: transform 0.22s ease; }
/* only hint the compositor during a gesture; settle() removes these classes */
#app.ptr-drag, #app.ptr-snap { will-change: transform; }

@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -------- Motion -------- */
@keyframes pop {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in {
  from { transform: translateY(28px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-back, .toast { animation: none; }
  .ptr-pane .ptr-icon { animation: none; transition: none; }
  #app.ptr-snap, .ptr-pane.ptr-snap { transition: none; }
}