/* One calm visual system across every journal view. Keep motion decorative and brief. */
:root {
  --paper: #f3f6fc;
  --white: #ffffff;
  --ink: #263550;
  --muted: #61718a;
  --green: #426db1;
  --green2: #e9f0fb;
  --mint: #d8e4f5;
  --coral: #8879a8;
  --coral-pale: #eeeaf5;
  --line: #dbe3f0;
  --cyan: #35a8b8;
  --cyan-wash: #e3f5f7;
  --slate-cyan: #276f80;
  --shadow: 0 16px 42px rgba(41, 60, 94, .085);
  --surface-glass: rgba(255,255,255,.86);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #111827;
  --white: #1c2638;
  --ink: #eff4ff;
  --muted: #b0bdd2;
  --green: #98b9ed;
  --green2: #273752;
  --mint: #334662;
  --coral: #c4b3dd;
  --coral-pale: #403950;
  --line: #39475e;
  --cyan: #67cfda;
  --cyan-wash: #203a48;
  --slate-cyan: #8bd8e1;
  --shadow: 0 18px 48px rgba(0,0,0,.26);
  --surface-glass: rgba(28,38,56,.92);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper: #f3f6fc; --white: #fff; --ink: #263550; --muted: #61718a;
  --green: #426db1; --green2: #e9f0fb; --mint: #d8e4f5; --coral: #8879a8;
  --coral-pale: #eeeaf5; --line: #dbe3f0; --cyan: #35a8b8; --cyan-wash: #e3f5f7;
  --slate-cyan: #276f80; --shadow: 0 16px 42px rgba(41,60,94,.085);
  --surface-glass: rgba(255,255,255,.86); color-scheme: light;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper: #111827; --white: #1c2638; --ink: #eff4ff; --muted: #b0bdd2;
    --green: #98b9ed; --green2: #273752; --mint: #334662; --coral: #c4b3dd;
    --coral-pale: #403950; --line: #39475e; --cyan: #67cfda; --cyan-wash: #203a48;
    --slate-cyan: #8bd8e1; --shadow: 0 18px 48px rgba(0,0,0,.26);
    --surface-glass: rgba(28,38,56,.92); color-scheme: dark;
  }
}
html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--green2) 74%, transparent), transparent 36rem),
    radial-gradient(ellipse at 100% 20%, color-mix(in srgb, var(--coral-pale) 55%, transparent), transparent 34rem),
    var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.app-shell { min-height: 100svh; }
.sidebar {
  position: sticky; top: 0; height: 100svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 14px max(18px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--white) 92%, var(--green2));
  border-right-color: var(--line);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--muted) 35%,transparent) transparent;
}
.brand { padding-bottom: 22px; color: var(--ink); }
.brand-mark {
  background: linear-gradient(145deg, #4c7fc6, #8375a5 76%, #54b8c3);
  box-shadow: 0 5px 14px rgba(67,108,174,.22);
}
.baby-switcher {
  min-height: 66px; height: auto; border-color: var(--line); border-radius: 16px;
  background: var(--surface-glass); box-shadow: 0 5px 17px rgba(44,64,99,.045);
}
.avatar, .top-avatar { background: linear-gradient(145deg,#e4f3f8,#eeeaf6); color: #345d8a; }
.nav-label { color: var(--muted); }
.nav-item {
  min-height: 43px; height: auto; color: var(--muted); border-radius: 12px;
  font-size: 12px; transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.nav-item span { color: color-mix(in srgb,var(--green) 74%,var(--coral)); }
.nav-item.active {
  color: var(--ink); background: linear-gradient(100deg,var(--green2),color-mix(in srgb,var(--cyan-wash) 58%,var(--white)));
  box-shadow: inset 3px 0 0 var(--cyan);
}
.nav-item:hover { color: var(--ink); background: color-mix(in srgb,var(--green2) 78%,var(--white)); transform: translateX(2px); }
.side-tip { background: linear-gradient(135deg,var(--cyan-wash),var(--coral-pale)); border: 1px solid color-mix(in srgb,var(--cyan) 18%,var(--line)); }
.side-tip p { color: var(--muted); }
.secure-dot { background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb,var(--cyan) 17%,transparent); }
.main-area { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 8; height: 66px; padding-inline: clamp(16px,3vw,42px);
  background: color-mix(in srgb,var(--white) 84%,transparent); backdrop-filter: blur(16px);
  border-bottom-color: color-mix(in srgb,var(--line) 76%,transparent);
}
.crumb, .crumb b { color: var(--muted); }
.crumb b { color: var(--ink); }
.content { width: min(100%, 1460px); padding: clamp(20px,3vw,38px) clamp(16px,3vw,42px) 28px; }
.welcome-row { margin-bottom: 22px; }
.welcome-row h1, .page-title h1 { color: var(--ink); letter-spacing: -.045em; }
.welcome-row h1 { font-size: clamp(24px,3vw,34px); }
.welcome-row p, .page-title p { color: var(--muted); line-height: 1.6; }
.eyebrow { color: var(--slate-cyan); letter-spacing: .13em; }
.panel, .stat-card, .quick-card, .milestone-card, .memory-panel {
  color: var(--ink); background: var(--surface-glass); border-color: var(--line);
  border-radius: 18px; box-shadow: 0 8px 25px rgba(43,61,94,.045);
}
.stat-card {
  min-height: 118px; padding: 17px 18px;
  background: linear-gradient(150deg,var(--surface-glass),color-mix(in srgb,var(--green2) 28%,var(--white)));
}
.stat-card:nth-child(2) { background: linear-gradient(150deg,var(--surface-glass),color-mix(in srgb,var(--cyan-wash) 56%,var(--white))); }
.stat-card:nth-child(3) { background: linear-gradient(150deg,var(--surface-glass),color-mix(in srgb,var(--coral-pale) 48%,var(--white))); }
.stat-card:nth-child(4) { background: linear-gradient(150deg,var(--surface-glass),color-mix(in srgb,var(--green2) 43%,var(--white))); }
.stat-top, .stat-foot, .panel-head p, .quick-card small { color: var(--muted); }
.stat-icon, .quick-icon { color: var(--green); background: color-mix(in srgb,var(--green2) 80%,var(--white)); border-radius: 10px; }
.stat-value { color: var(--ink); font-size: clamp(19px,2vw,24px); }
.panel { padding: clamp(15px,2vw,22px); }
.panel-head h2 { color: var(--ink); font-size: 15px; }
.btn {
  min-height: 40px; border-radius: 11px; font-size: 12px; padding: 10px 15px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn.primary { background: linear-gradient(120deg,#4779bd,#726fa6 78%,#4daab8); box-shadow: 0 6px 16px rgba(67,104,167,.22); }
.btn.primary:hover { box-shadow: 0 9px 21px rgba(67,104,167,.29); }
.btn.secondary { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn.soft { background: var(--green2); color: var(--ink); }
.btn.quiet { color: var(--green); }
.icon-btn { color: var(--muted); }
.icon-btn:hover { color: var(--green); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--cyan) 58%,transparent); outline-offset: 2px;
}
.field label, .field-label { color: var(--ink); font-size: 11px; }
.field input, .field select, .field textarea, .auth-card input, .tiny-select,
.who-chart-controls select, .compare-control select {
  min-height: 42px; color: var(--ink); background: var(--white); border-color: var(--line); border-radius: 11px; font-size: 12px;
}
.field textarea { min-height: 86px; }
.field input:focus, .field select:focus, .field textarea:focus, .auth-card input:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb,var(--cyan) 17%,transparent);
}
.table th { color: var(--muted); }
.table td { color: var(--ink); border-bottom-color: var(--line); }
.table th { border-bottom-color: var(--line); }
.segmented { background: color-mix(in srgb,var(--green2) 80%,var(--white)); }
.segmented button { color: var(--muted); }
.segmented button.selected { background: var(--white); color: var(--ink); }
.metric-tab.selected { background: var(--green2); color: var(--ink); border-color: var(--green2); }
.chart-grid { stroke: color-mix(in srgb,var(--line) 78%,transparent); }
.chart-label { fill: var(--muted); }
.chart-line { stroke: var(--green); }
.chart-point { stroke: var(--green); }
.chart-legend { color: var(--muted); }
.quick-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.quick-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--cyan) 40%,var(--line)); box-shadow: var(--shadow); }
.milestone-card.done { background: color-mix(in srgb,var(--green2) 70%,var(--white)); }
.check { accent-color: var(--green); }
.check:checked { background: var(--green); border-color: var(--green); }
.memory-hero { background: linear-gradient(115deg,var(--green2),var(--cyan-wash) 55%,var(--coral-pale)); border: 1px solid var(--line); border-radius: 20px; }
.media-tile { border-color: var(--line); }
.modal-backdrop { background: rgba(21,31,49,.58); backdrop-filter: blur(5px); }
.modal { background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 80px rgba(12,24,42,.3); }
.toast { background: #243653; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; }
.app-footer { color: var(--muted); }
.app-footer small { color: var(--muted); }
.startup-screen { background: radial-gradient(ellipse at 50% 35%,var(--white),var(--green2) 58%,var(--coral-pale)); color: var(--ink); }
.auth-gate { background: transparent; }
.auth-card { background: var(--surface-glass); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.notice { color: var(--ink); background: color-mix(in srgb,var(--cyan-wash) 60%,var(--white)); border-color: color-mix(in srgb,var(--cyan) 22%,var(--line)); }
.tag { background: var(--green2); color: var(--ink); }
.tag.coral { background: var(--coral-pale); color: var(--ink); }
.tag.gray { background: color-mix(in srgb,var(--line) 55%,var(--white)); color: var(--muted); }
.expected-gain-card { background: linear-gradient(120deg,var(--white),var(--cyan-wash),var(--coral-pale)); }
.memory-tools { border-color: color-mix(in srgb,var(--cyan) 24%,var(--line)); background: linear-gradient(110deg,var(--white),var(--cyan-wash),var(--coral-pale)); }
.sidebar-close { color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
:root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .auth-gate,:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .stat-card,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .baby-switcher,:root[data-theme="dark"] .quick-card {
  background-color: var(--white);
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .sidebar,:root:not([data-theme="light"]) .topbar,:root:not([data-theme="light"]) .auth-gate,:root:not([data-theme="light"]) .modal,
  :root:not([data-theme="light"]) .stat-card,:root:not([data-theme="light"]) .panel,:root:not([data-theme="light"]) .baby-switcher,:root:not([data-theme="light"]) .quick-card {
    background-color: var(--white);
  }
}

@media(max-width: 900px) {
  .sidebar { z-index: 30; }
  .topbar { z-index: 12; }
  .content { padding-inline: clamp(14px,3vw,24px); }
  .stats-grid { gap: 10px; }
  .dashboard-grid, .growth-layout, .feeding-grid { gap: 12px; }
}
@media(max-width: 760px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; max-height: 100dvh;
    width: min(310px,88vw); overflow-y: auto; overscroll-behavior: contain;
    padding: max(16px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));
  }
  .sidebar-spacer { flex: 0 0 10px; min-height: 10px; }
  .side-tip { margin-block: 10px; }
  .topbar { height: 58px; padding-inline: 12px; }
  .top-actions { gap: 9px; }
  .top-actions .ask-ai-top { min-height: 36px; padding: 7px 10px; }
  .logout-button span { display: none; }
  .content { padding: 17px 13px 23px; }
  .welcome-row { flex-wrap: wrap; padding: 8px 4px; }
  .welcome-actions { width: 100%; }
  .welcome-actions .btn { flex: 1; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid, .growth-layout, .feeding-grid { grid-template-columns: minmax(0,1fr); }
  .panel { border-radius: 16px; padding: 15px; }
  .page-title { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .page-title h1 { font-size: 23px; }
  .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .milestone-list { grid-template-columns: minmax(0,1fr); }
  .vax-row { grid-template-columns: 64px minmax(0,1fr); }
  .vax-row>.btn { grid-column: 2; justify-self: start; }
  .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 17px; }
}
@media(max-width: 390px) {
  .crumb { max-width: 38vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .top-actions { gap: 7px; }
  .top-actions .ask-ai-top { font-size: 11px; }
  .stat-card { min-height: 104px; padding: 12px; }
  .stat-value { font-size: 17px; }
  .media-grid { gap: 7px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Reliable mobile drawer layer; closing is also supported by outside click and Escape. */
.sidebar-scrim{display:none;border:0;padding:0}
@media(max-width:760px){
  .sidebar{left:0!important;z-index:1101!important;transform:translateX(-105%);transition:transform .2s ease!important;width:min(310px,88vw)!important;max-height:100dvh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .sidebar.open{left:0!important;transform:translateX(0)}
  .sidebar.collapsed{left:0!important;transform:translateX(-105%);width:min(310px,88vw)!important}
  .sidebar-scrim.visible{display:block;position:fixed;inset:0;z-index:1100;background:rgba(20,31,48,.48);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  body.sidebar-open{overflow:hidden;touch-action:none}
  .sidebar .sidebar-close{position:sticky;top:calc(env(safe-area-inset-top) + 5px);z-index:5}
}