:root { color-scheme: light; --ink:#24304b; --muted:#6b768b; --bg:#f7f8fc; --card:#fff; --line:#e6eaf2; --violet:#5966d8; --violet-dark:#4853ba; --violet-pale:#edeefe; --blue-pale:#e8f1fe; --mint-pale:#e3f5ed; --shadow:0 10px 32px rgba(41,53,97,.045); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); padding-bottom:env(safe-area-inset-bottom); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #8f9cf8; outline-offset:2px; }
.shell { max-width:540px; margin:auto; min-height:100vh; padding:0 18px 40px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:89px; padding-top:env(safe-area-inset-top); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { display:block; flex:0 0 43px; width:43px; height:43px; border-radius:14px; overflow:hidden; } .brand-mark img { display:block; width:100%; height:100%; object-fit:cover; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:19px; letter-spacing:-.4px; line-height:1.3; }
.brand small { font-size:11px; color:var(--muted); line-height:1.5; }
.status-pill { font-size:11px; color:#647187; background:#ecedf3; padding:9px 11px; border-radius:20px; white-space:nowrap; }
.status-pill.cloud { color:#25674d; background:#dff3e8; }
.status-pill.demo { color:#756442; background:#f5eddb; }
.hidden { display:none !important; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:24px; margin-bottom:4px; letter-spacing:-.85px; }
h2 { font-size:17px; margin:0; letter-spacing:-.35px; }
h3 { font-size:16px; margin:0; }
p { line-height:1.45; }
.muted,.small { color:var(--muted); }
.small { font-size:12px; }
.eyebrow { letter-spacing:1.8px; color:var(--violet); font-weight:800; font-size:10px; margin-bottom:5px; }
.welcome-line { display:flex; justify-content:space-between; align-items:center; margin:11px 0 19px; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
.stat { display:flex; flex-direction:column; min-height:155px; border-radius:18px; padding:16px 15px; gap:7px; }
.stat-milk { background:var(--violet-pale); }
.stat-diaper { background:var(--mint-pale); }
.stat-icon { height:23px; font-size:24px; line-height:23px; color:var(--violet); }
.stat-diaper .stat-icon { color:#36836d; }
.stat-caption { font-size:12px; color:#57617f; font-weight:600; }
.stat strong { font-size:28px; line-height:1; letter-spacing:-.9px; font-weight:800; }
.stat-detail { color:#647187; font-size:11px; }
.section-title { margin:22px 0 12px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.panel { background:var(--card); border:1px solid #f0f1f6; border-radius:19px; box-shadow:var(--shadow); padding:17px; margin-bottom:13px; }
.action-panel { padding:18px; }
.action-title { display:flex; align-items:center; gap:11px; }
.action-title p { font-size:12px; color:var(--muted); margin:3px 0 0; }
.round-icon { display:grid; place-items:center; border-radius:13px; height:40px; width:40px; font-size:24px; }
.milk-icon { background:var(--violet-pale); color:var(--violet); }
.diaper-icon { background:var(--mint-pale); color:#38866f; }
.amount-picker { display:flex; align-items:center; justify-content:center; gap:29px; padding:22px 0 18px; }
.round-btn { border-radius:50%; width:45px; height:45px; display:grid; place-items:center; background:#f4f5fa; border:0; font-size:27px; color:#63708a; font-weight:400; }
.round-btn:active { transform:scale(.96); }
.amount-reading { min-width:80px; text-align:center; }
.amount-reading strong { font-size:38px; font-weight:800; display:block; line-height:1.1; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.amount-reading span { font-size:12px; color:var(--muted); }
.segments { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:11px; background:#f2f4fa; gap:3px; margin-bottom:15px; }
.segment { min-height:38px; padding:0 2px; border:0; background:transparent; color:#63708b; border-radius:9px; font-size:12px; font-weight:650; }
.segment.selected { background:white; box-shadow:0 1px 6px #23335519; color:var(--ink); }
.btn { min-height:45px; width:100%; border-radius:11px; border:0; font-size:14px; font-weight:720; padding:12px 15px; }
.btn:disabled { opacity:.6; cursor:wait; }
.btn.primary { background:var(--violet); color:white; }
.btn.primary:active { background:var(--violet-dark); }
.btn.secondary { background:#eeeffa; color:#4958ab; }
.btn.ghost { background:transparent; color:#6c7790; }
.btn.danger-outline { border:1px solid #f3ccd0; background:#fff; color:#b84253; }
.btn.huge { min-height:53px; font-size:15px; }
.diaper-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }
.diaper-button { border:1px solid #e5e8f2; background:#f9fafc; min-height:83px; border-radius:14px; font-size:14px; font-weight:680; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#39445a; }
.diaper-button span { font-size:23px; line-height:1; color:#478fb4; }
.diaper-button:active { border-color:var(--violet); background:#eff1ff; }
.compact { padding:14px 17px; }
.time-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.time-panel strong { font-size:13px; }
.time-panel p { margin:4px 0 0; }
.time-panel #earlier-control { grid-column:1/-1; padding-top:10px; }
.toggle-time { display:flex; align-items:center; gap:7px; font-size:12px; white-space:nowrap; color:#57627b; cursor:pointer; }
.toggle-time input { width:18px; height:18px; accent-color:var(--violet); }
label { font-size:13px; font-weight:650; color:#4c5770; display:block; }
input,textarea,select { width:100%; border:1px solid #dfe4ee; border-radius:11px; background:white; color:var(--ink); padding:13px 12px; min-height:46px; font-size:16px; }
textarea { resize:vertical; }
.form-stack { display:flex; flex-direction:column; gap:10px; margin-top:13px; }
.history-panel { padding:4px 16px; }
.history-row { display:flex; align-items:center; gap:11px; border-bottom:1px solid #f0f2f5; padding:14px 0; }
.history-row:last-child { border-bottom:0; }
.history-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:13px; font-size:18px; background:var(--violet-pale); color:#6772da; }
.history-icon.diaper { background:var(--mint-pale); color:#33866a; }
.history-body { min-width:0; flex:1; }
.history-body strong { font-size:13px; font-weight:720; }
.history-body p { color:var(--muted); font-size:11px; margin:3px 0 0; overflow-wrap:anywhere; }
.history-meta { color:var(--muted); font-size:11px; margin-left:auto; white-space:nowrap; }
.icon-button { border:0; padding:7px 4px 7px 8px; background:transparent; color:#758198; font-size:17px; }
.history-day-label { font-size:10px; font-weight:850; letter-spacing:1px; color:#a0a9b9; padding:14px 0 0; }
.empty { margin:18px 0; text-align:center; font-size:13px; color:#7b879c; }
.chart-panel { padding:18px 15px; }
.week-chart { display:flex; gap:8px; justify-content:space-around; height:132px; align-items:end; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:end; height:100%; gap:5px; }
.bar-track { height:92px; width:100%; max-width:25px; border-radius:6px 6px 3px 3px; background:#f1f2f9; display:flex; align-items:end; overflow:hidden; }
.bar-fill { width:100%; background:#8b93e8; min-height:0; border-radius:5px 5px 0 0; }
.bar-col.today .bar-fill { background:var(--violet); }
.bar-col label { font-size:10px; font-weight:600; color:#7b869b; }
.bar-col span { color:#778299; font-size:9px; font-variant-numeric:tabular-nums; }
.link-btn { background:none; border:0; color:var(--violet); font-size:12px; font-weight:700; padding:6px; }
.sharing-panel { margin-top:23px; }
.sharing-panel summary { font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; list-style:none; }
.sharing-panel summary::-webkit-details-marker { display:none; }
.sharing-content { padding:16px 0 0; }
.sharing-content p { margin:0 0 12px; }
.invite-box { display:flex; align-items:center; gap:6px; margin-bottom:14px; background:#f5f6fb; border-radius:10px; padding:7px; }
.invite-box code { flex:1; font-size:10px; color:#49536c; overflow-wrap:anywhere; }
.small-btn { width:auto; min-height:36px; font-size:12px; flex:none; }
footer { text-align:center; color:#a0a8b7; font-size:10px; margin:25px 0 10px; }
.page-state { padding:40px 3px 20px; }
.page-state h1 { font-size:27px; }
.page-state .panel { margin-top:17px; }
.page-state .panel h2 { font-size:15px; }
.auth-art { background:#e8eafb; width:65px; height:65px; border-radius:21px; color:var(--violet); display:grid; place-items:center; font-size:39px; margin-bottom:18px; }
.page-state p { color:var(--muted); font-size:14px; margin-bottom:22px; }
.spinner { border:3px solid #e4e7fa; border-top-color:var(--violet); width:29px; height:29px; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin {to{transform:rotate(360deg)}}
dialog { border:0; border-radius:20px; width:min(92vw,460px); max-height:85vh; box-shadow:0 22px 80px #1c294655; padding:0; color:var(--ink); }
dialog::backdrop { background:#0c173d82; }
.edit-content { padding:22px; display:flex; flex-direction:column; gap:10px; overflow:auto; }
.dialog-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.close-btn { border:0; color:#79869b; background:#f2f4f8; border-radius:50%; width:33px; height:33px; font-size:24px; line-height:1; }
.toast { position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,20px); width:max-content; max-width:min(90vw,400px); border-radius:14px; background:#24304b; box-shadow:0 6px 22px #131d3555; color:#fff; padding:12px 16px; opacity:0; pointer-events:none; font-size:13px; text-align:center; transition:opacity .2s,transform .2s; z-index:10; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:580px) {.shell {padding-left:30px; padding-right:30px;} .summary-grid {gap:16px;} .panel {padding:20px;}}
@media (max-width:370px) {.shell {padding:0 12px 25px} .stat {padding:13px 11px;} .segment {font-size:11px;} .time-panel {grid-template-columns:1fr;} .toggle-time {justify-content:flex-start;}}

/* v2: nursing and bottle unit controls */
.dual-segments{grid-template-columns:repeat(2,1fr);margin:20px 0 14px}
.dual-segments .segment{min-height:43px;font-size:13px}
.units-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.unit-segments{display:grid;grid-template-columns:repeat(2,1fr);width:122px;margin:0;padding:3px}
.unit-segments .segment{min-height:32px;font-size:13px}
.amount-picker{padding:9px 0 0;gap:15px}
.amount-reading{width:124px;min-width:110px}
.amount-reading input{font-size:32px;text-align:center;font-weight:800;letter-spacing:-.9px;width:100%;padding:6px 2px;min-height:53px;line-height:1.1;border-color:#eff0f6;border-radius:8px;background:#fafbff;font-variant-numeric:tabular-nums}
.amount-reading span{display:block;margin-top:4px}
.unit-equivalent{font-size:12px;text-align:center;color:var(--muted);margin:5px 0 17px}
.nursing-intro{margin:12px 0}
.nursing-clock{font-size:49px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;text-align:center;padding:14px 0 20px}
.nursing-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
.side-button{background:#f7f8fc;border:2px solid #e4e8f2;color:#4d5874;border-radius:15px;min-height:85px;display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column;font-weight:700}
.side-button strong{font-size:19px;font-variant-numeric:tabular-nums}
.side-button.active{background:#eceeff;border-color:#5966d8;color:#4d58ba}
.nursing-timer-actions{display:flex;gap:9px;margin-bottom:11px}
.nursing-timer-actions .btn{width:50%}
.manual-nursing{padding:16px 0 3px;margin-top:12px;border-top:1px solid var(--line)}
.manual-nursing summary{font-size:13px;color:var(--violet);font-weight:700;cursor:pointer}
.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}
.manual-grid label{font-size:12px}
.manual-grid input{margin-top:7px}
.manual-nursing p{margin:9px 0 0}
@media(max-width:370px){.amount-picker{gap:9px}.side-button{min-height:75px}}

/* v3: date review navigation */
.day-navigation{padding:12px 15px;margin-bottom:14px}
.day-navigation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.day-navigation-heading label{font-size:12px}
.day-navigation-controls{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center;margin-top:5px}
.day-navigation-controls input{min-width:0;width:100%;height:47px;min-height:47px;padding:8px 9px;text-align:center;font-size:15px;font-weight:700;border-radius:12px}
.day-arrow{min-height:47px;width:48px;border:1px solid #e5e8f2;border-radius:12px;background:#f4f5fb;color:var(--violet);font-size:28px;line-height:1}
.day-arrow:disabled{opacity:.3;cursor:default}
.day-load-status{font-size:11px;color:var(--muted);min-height:0}
.day-load-status:not(:empty){padding-top:7px}
@media(max-width:370px){.day-navigation-controls{grid-template-columns:41px minmax(0,1fr) 41px;gap:5px}.day-arrow{width:41px}}

/* v4: tabbed logging + expression log */
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.stat{min-height:147px;padding:13px 10px;border-radius:16px;gap:8px;min-width:0}
.stat strong{font-size:clamp(17px,4.8vw,27px);letter-spacing:-.8px;overflow-wrap:anywhere}
.stat-caption{font-size:11px}
.stat-detail{font-size:10px;overflow-wrap:anywhere}
.stat-pump{background:#fff0e7}.stat-pump .stat-icon{color:#bb7153}
.activity-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#e9ecf5;border-radius:14px;padding:4px;gap:4px;margin:5px 0 16px}
.activity-tab{border:0;border-radius:11px;background:transparent;color:#637087;min-height:46px;font-size:13px;font-weight:730}
.activity-tab.selected{background:white;color:var(--violet);box-shadow:0 1px 7px #1e2b5120}
.pump-icon{background:#fff0e7;color:#bb7153}
.pump-unit-heading{margin:19px 0 16px}
.pump-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pump-field{background:#f7f8fc;padding:10px 8px 13px;border-radius:13px;min-width:0}
.pump-field>label{text-align:center;font-size:12px;margin-bottom:8px}
.pump-stepper{display:flex;gap:4px;align-items:center;justify-content:center}
.pump-stepper input{min-height:44px;min-width:0;width:100%;font-size:18px;font-weight:740;text-align:center;padding:7px 2px;border-radius:9px;font-variant-numeric:tabular-nums}
.pump-stepper .round-btn{flex:0 0 34px;width:34px;height:38px;font-size:23px;background:#ebedf6}
.pump-total-line{margin:18px 0 10px;padding:13px 3px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:13px;color:#606b83}
.pump-total-line strong{font-size:23px;color:var(--ink);font-variant-numeric:tabular-nums}
@media(min-width:520px){.summary-grid{gap:12px}.stat{padding:16px;min-height:150px}}
@media(max-width:355px){.stat{padding:11px 7px}.stat strong{font-size:17px}.pump-stepper .round-btn{flex-basis:29px;width:29px}}

.history-icon.pump-history{background:#fff0e7;color:#bb7153}

/* v5: two additional tabs, restored clock and medication bank */
.activity-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.activity-tab{flex:0 0 auto;min-width:95px;padding:0 10px;white-space:nowrap}
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-tummy{background:#e8f1fd}.stat-tummy .stat-icon{color:#5180ba}
.stat-med{background:#f3eaf6}.stat-med .stat-icon{color:#945ca3}
.tummy-icon{background:#e8f1fd;color:#5180ba}
.med-icon{background:#f3eaf6;color:#945ca3}
.tummy-clock{font-size:52px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;margin:19px 0 2px;letter-spacing:-1px}
.timer-status{text-align:center;margin:0 0 16px}
.tummy-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
#tummy-save{margin-bottom:8px}
.med-dose-row{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:8px}
.med-bank-wrap{margin-top:2px;margin-bottom:2px}
.med-bank-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0 12px}
.med-bank{display:flex;flex-wrap:wrap;gap:8px;min-height:32px}
.med-bank .med-name-pill{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--line);border-radius:11px;background:#f7f8fc;overflow:hidden}
.med-name-pill button{border:0;background:none;min-height:38px;color:var(--ink)}
.med-name-pill .med-select{padding:8px 12px;font-size:13px;font-weight:650;overflow-wrap:anywhere;text-align:left}
.med-name-pill .med-remove{min-width:37px;padding:8px 10px;color:#b54f58;font-size:18px;border-left:1px solid var(--line)}
@media(max-width:355px){.activity-tab{min-width:88px}.stat{min-height:134px}}

/* v6: the five overview cards are the category navigation. No separate tab strip. */
.summary-grid[role="tablist"] { gap: 9px; margin-bottom: 19px; }
.summary-grid .stat {
  border: 2px solid transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.summary-grid .stat.selected { border-color: var(--violet); box-shadow: inset 0 0 0 1px rgba(89,102,216,.09); }
.summary-grid .stat.selected:after {
  content: ""; position: absolute; bottom: 0; left: 22%; right: 22%;
  height: 4px; background: var(--violet); border-radius: 5px 5px 0 0;
}
.summary-grid .stat:active { transform: scale(.985); }
.summary-grid .stat:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.summary-grid .stat span, .summary-grid .stat strong { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .summary-grid .stat { transition: none; } }

/* v8: place the interactive seven-day history directly below date selection. */
.day-navigation { margin-bottom: 12px; }
.day-navigation + .section-title { margin-top: 11px; margin-bottom: 9px; }
.day-navigation + .section-title h2 { font-size: 15px; }
.day-navigation + .section-title .muted { font-size: 11px; text-align: right; }
.chart-panel { padding: 13px 12px 11px; margin-bottom: 20px; }
.week-chart { height: 122px; gap: 5px; }
.week-chart .bar-col {
  flex: 1 1 0; min-width: 0; margin: 0; padding: 5px 3px 4px;
  border: 2px solid transparent; background: transparent;
  border-radius: 11px; color: var(--ink); font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
  transition: background .14s ease, border-color .14s ease;
}
.week-chart .bar-col.selected { background: var(--violet-pale); border-color: var(--violet); }
.week-chart .bar-col:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.week-chart .bar-col:active { background: #e7e9fa; }
.week-chart .bar-value { font-size: 10px; line-height: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.week-chart .bar-track { width: min(100%, 27px); height: 77px; flex: 0 0 77px; }
.week-chart .bar-day { font-size: 10px; line-height: 12px; color: #697691; font-weight: 700; }
.week-chart .bar-col.selected .bar-day { color: var(--violet-dark); }
.week-chart .bar-col.today .bar-fill { background: var(--violet); }
.week-chart .bar-col.selected:not(.today) .bar-fill { background: #5966d8; }
@media(max-width: 365px) {
  .chart-panel { padding-left: 8px; padding-right: 8px; }
  .week-chart { gap: 2px; }
  .week-chart .bar-col { padding-left: 1px; padding-right: 1px; }
}
@media(prefers-reduced-motion: reduce){ .week-chart .bar-col{transition:none} }

/* v9: the seven-day chart follows the selected summary card's color family. */
.week-chart { --chart-bar:#8b93e8; --chart-strong:#5966d8; --chart-soft:#edeefe; }
.week-chart[data-category="feeding"] { --chart-bar:#8b93e8; --chart-strong:#5966d8; --chart-soft:#edeefe; }
.week-chart[data-category="diaper"] { --chart-bar:#72baa1; --chart-strong:#36836d; --chart-soft:#e3f5ed; }
.week-chart[data-category="pumping"] { --chart-bar:#d9a083; --chart-strong:#bb7153; --chart-soft:#fff0e7; }
.week-chart[data-category="tummy"] { --chart-bar:#86aedc; --chart-strong:#5180ba; --chart-soft:#e8f1fd; }
.week-chart[data-category="medication"] { --chart-bar:#b68ac3; --chart-strong:#945ca3; --chart-soft:#f3eaf6; }
.week-chart .bar-fill,
.week-chart .bar-col.today .bar-fill,
.week-chart .bar-col.selected:not(.today) .bar-fill { background:var(--chart-bar); }
.week-chart .bar-col.selected:not(.today) .bar-fill,
.week-chart .bar-col.selected.today .bar-fill { background:var(--chart-strong); }
.week-chart .bar-col.selected { background:var(--chart-soft); border-color:var(--chart-strong); }
.week-chart .bar-col.selected .bar-day { color:var(--chart-strong); }
.week-chart .bar-col:focus-visible { outline-color:var(--chart-strong); }
.week-chart .bar-col:active { background:var(--chart-soft); }

.med-bank-help{margin-top:2px}

/* v11: compact rolling seven-day averages, inserted between chart and overview cards. */
.weekly-average-section{
  --average-accent:#5966d8;
  background:#fff;
  border:1px solid #f0f1f6;
  border-radius:17px;
  box-shadow:var(--shadow);
  padding:12px 13px 13px;
  margin:-8px 0 16px;
}
.weekly-average-section[data-category="feeding"]{--average-accent:#5966d8}
.weekly-average-section[data-category="diaper"]{--average-accent:#36836d}
.weekly-average-section[data-category="pumping"]{--average-accent:#bb7153}
.weekly-average-section[data-category="tummy"]{--average-accent:#5180ba}
.weekly-average-header{display:flex;flex-wrap:wrap;gap:3px 10px;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.weekly-average-header h2{font-size:13px;letter-spacing:-.1px;margin:0}
.weekly-average-header span{font-size:10px;color:var(--muted)}
.weekly-average-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.weekly-average-section[data-category="diaper"] .weekly-average-values,
.weekly-average-section[data-category="tummy"] .weekly-average-values{grid-template-columns:repeat(2,minmax(0,1fr))}
.weekly-average-metric{min-width:0;display:flex;flex-direction:column;gap:4px;padding:8px 9px;border:1px solid #eef0f6;border-radius:10px;background:#fafbfe}
.weekly-average-label{font-size:10px;color:#616d81;font-weight:650;line-height:1.25}
.weekly-average-metric strong{color:var(--average-accent);font-size:clamp(14px,3.8vw,18px);font-weight:800;letter-spacing:-.45px;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.weekly-average-unit{color:#828c9d;font-size:10px;line-height:1.1}
@media(max-width:360px){.weekly-average-section{padding:10px 9px}.weekly-average-values{gap:4px}.weekly-average-metric{padding:7px 5px}.weekly-average-header span{font-size:9px}.weekly-average-label{font-size:9px}}

/* v12: family-level child profiles; compact, horizontally scrollable names. */
.child-selector{display:flex;align-items:center;gap:7px;margin:12px 0 9px;min-width:0}
.child-tabs{display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:thin;min-width:0;flex:1;padding:4px 2px;-webkit-overflow-scrolling:touch}
.child-tab,.child-add,.child-manage{border:1px solid #e3e7f1;border-radius:12px;background:#fff;min-height:43px;white-space:nowrap;font-weight:720;color:#66718a;font-size:13px;flex:none;padding:0 13px}
.child-tab.selected{background:#e9ebff;border-color:#5966d8;box-shadow:0 0 0 1px #5966d8 inset;color:#4955bd}
.child-add{color:#5966d8;background:#f1f2ff}
.child-manage{font-size:11px;padding:0 8px;border:0;background:transparent;text-decoration:underline}
.child-selector .child-tab:focus-visible,.child-selector .child-add:focus-visible,.child-selector .child-manage:focus-visible{outline:3px solid #8994ee;outline-offset:2px}
.child-selector+.welcome-line{margin:2px 0 16px}
#child-help{margin:0}
@media(max-width:370px){.child-selector{gap:4px}.child-tab,.child-add{font-size:12px;padding:0 9px;min-height:42px}.child-manage{padding:0 4px}}

.child-profile-list{display:flex;flex-wrap:wrap;gap:6px}
.child-profile-item{display:flex;align-items:center;gap:8px;min-height:38px;border:1px solid #e5e8f2;border-radius:9px;background:#f8f9ff;padding:5px 9px;font-size:12px;color:#59637a}
.child-profile-item span:last-child{color:#5966d8;font-weight:750}

/* v14: centered heading and weekday date picker */
.welcome-line{justify-content:center;text-align:center}
.welcome-line h1{margin:0}
.day-date-picker{position:relative;min-width:0;height:47px;border:1px solid #e5e8f2;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
#view-date-label{display:block;min-width:0;padding:0 3px;text-align:center;font-size:clamp(10px,3.4vw,15px);font-weight:700;white-space:nowrap;color:#25304b}
.day-date-picker #view-date{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.day-date-picker:focus-within{outline:2px solid var(--violet);outline-offset:2px}

/* v15: summary navigation directly beneath the date selector */
.day-navigation + .summary-grid{margin-top:18px;margin-bottom:20px}

/* v16: Add child stays immediately after the final profile. */
.child-selector{display:flex;align-items:center;gap:8px;min-width:0}
.child-tab-group{display:flex;align-items:center;gap:7px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:4px 2px}
.child-tabs{overflow:visible;flex:none;padding:0;min-width:max-content}
.child-add{flex:none}
.child-manage{margin-left:auto;flex:none}
.day-navigation-controls{margin-top:0}
.day-date-picker{height:60px}
.date-label-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;pointer-events:none}
#date-current-label{font-size:11px;font-weight:750;color:#5966d8}
#date-current-label[hidden]{display:none}
#view-date-label{font-size:clamp(10px,3.4vw,15px)}
/* v17: keep child tabs and add-child on one scrolling row, never wrap. */
.child-selector{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}
.child-tab-group{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:7px;flex:1 1 0;min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch}
.child-tabs{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:7px;flex:0 0 auto;width:max-content;min-width:max-content;overflow:visible}
.child-add{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap}
.child-manage{flex:0 0 auto;margin-left:0}
/* Center the Today indicator directly above the date. */
.day-date-picker .date-label-stack{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}
.day-date-picker #date-current-label{display:block;text-align:center;width:100%;font-size:12px;line-height:1.2}
.day-date-picker #date-current-label[hidden]{display:none}

/* v19 combined history and averages */
.weekly-overview{padding:14px 13px 15px;margin:20px 0 16px}
.weekly-overview>.section-title{margin:0 0 12px}
.weekly-overview>.section-title h2{font-size:15px}
.weekly-overview>.section-title .muted{font-size:11px;text-align:right}
.weekly-overview .chart-panel{padding:0;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.weekly-overview .weekly-average-section{padding:14px 0 0;margin:14px 0 0;border:0;border-top:1px solid #e8eaf1;border-radius:0;background:transparent;box-shadow:none}
@media(max-width:360px){.weekly-overview{padding:12px 9px}}

/* v20: daily activity history is collapsed by default for every category. */
.activity-history{margin-top:22px}
.activity-history>.history-summary{margin:0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:46px;user-select:none}
.activity-history>.history-summary::-webkit-details-marker{display:none}
.activity-history>.history-summary h2{margin:0}
.history-toggle-label{display:inline-flex;align-items:center;gap:8px;color:var(--violet,#5966d8);font-weight:650;font-size:13px;white-space:nowrap}
.history-chevron{display:inline-block;font-size:22px;line-height:1;transition:transform .15s}
.activity-history[open] .history-chevron{transform:rotate(180deg)}
.activity-history[open] .history-toggle-text{font-size:0}
.activity-history[open] .history-toggle-text::after{content:"Hide entries";font-size:13px}
.history-content{padding-top:5px}
.history-export{display:flex;justify-content:flex-end;margin-bottom:8px}
.activity-history .history-panel{margin-top:0}

/* v21: white card for collapsed daily history, replacing earlier-event panel. */
.activity-history{margin:20px 0 13px;padding:0 17px;background:#fff;border:1px solid #f0f1f6;border-radius:19px;box-shadow:var(--shadow)}
.activity-history>.history-summary{padding:17px 0;min-height:65px}
.activity-history[open]>.history-summary{border-bottom:1px solid #eef0f4}
.activity-history .history-content{padding-top:13px;padding-bottom:16px}
.activity-history .history-panel{box-shadow:none;border:0;padding:0;background:transparent}
@media(max-width:360px){.activity-history{padding:0 13px}.activity-history>.history-summary h2{font-size:16px}}

/* v22: initially open, independently collapsible activity, history, and seven-day panels. */
.collapsible-section{background:#fff;border:1px solid #f0f1f6;border-radius:19px;box-shadow:var(--shadow);padding:0 16px}
.collapsible-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;cursor:pointer;list-style:none;user-select:none;-webkit-tap-highlight-color:transparent}
.collapsible-heading::-webkit-details-marker{display:none}
.collapsible-heading h2{margin:0;font-size:17px;letter-spacing:-.3px}
.collapsible-hint{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;color:var(--violet);font-weight:650;font-size:13px}
.collapsible-section:not([open]) .section-expanded{display:none}
.collapsible-section[open] .section-collapsed{display:none}
.collapse-chevron{display:inline-block;font-size:22px;line-height:1;transition:transform .16s}
.collapsible-section[open] .collapse-chevron{transform:rotate(180deg)}
.collapsible-section[open]>.collapsible-heading{border-bottom:1px solid #eef0f4}
.collapsible-section>.collapsible-body{padding:14px 0 16px}
.logging-section{margin:20px 0 13px}
.logging-section .action-panel{border:0;box-shadow:none;border-radius:0;padding:0;margin:0;background:transparent}
.weekly-overview.collapsible-section{padding:0 16px;margin:20px 0 16px}
.weekly-overview>.collapsible-body{padding:10px 0 15px}
.weekly-measure-label{text-align:right;font-size:11px;margin-bottom:10px}
.weekly-overview .chart-panel{padding:0;margin:0;background:transparent;border:0;box-shadow:none}
.weekly-overview .weekly-average-section{margin:14px 0 0;padding:14px 0 0;border-top:1px solid #e8eaf1}
@media(max-width:360px){.collapsible-section,.weekly-overview.collapsible-section{padding-left:12px;padding-right:12px}.collapsible-heading h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){.collapse-chevron{transition:none}}

/* v24: collapsible summary module, open by default */
.summary-section { margin:18px 0 16px; }
.summary-section .summary-grid { margin:0; }
.summary-section>.collapsible-body { padding:15px 0 18px; }
.summary-section:not([open]) { margin-bottom:16px; }

/* v25: dedicated direct breastfeeding category */
.stat-nursing{background:#fceafa}
.stat-nursing .stat-icon{color:#a45d9a}
.nursing-icon{background:#fceafa;color:#a45d9a}
.week-chart[data-category="nursing"] { --chart-bar:#d7a0d0; --chart-strong:#a45d9a; --chart-soft:#fceafa; }
.weekly-average-section[data-category="nursing"]{--average-accent:#a45d9a}

/* v28: fit all four rows safely inside compact square summary tiles. */
.summary-section .summary-grid{gap:8px}
.summary-section .stat{
  display:grid;
  grid-template-rows:18px 15px 23px minmax(15px,auto);
  align-content:start;
  align-items:start;
  gap:3px;
  min-height:0;
  min-width:0;
  aspect-ratio:1 / 1;
  padding:7px 7px 6px;
  border-radius:16px;
}
.summary-section .stat-icon{height:18px;line-height:18px;font-size:19px}
.summary-section .stat-caption{
  display:block;
  white-space:nowrap;
  font-size:clamp(8.5px,2.18vw,10.5px);
  letter-spacing:-.22px;
  line-height:15px;
  font-weight:700;
}
.summary-section .stat strong{
  font-size:clamp(16px,4.25vw,23px);
  line-height:23px;
  overflow-wrap:normal;
  white-space:nowrap;
  letter-spacing:-.6px;
}
.summary-section .stat-detail{
  font-size:clamp(8px,2.15vw,10.5px);
  line-height:15px;
  overflow-wrap:normal;
}
.summary-section>.collapsible-body{padding:12px 0 14px}
@media(max-width:360px){
  .summary-section .summary-grid{gap:5px}
  .summary-section .stat{padding:6px 4px 5px;gap:2px;grid-template-rows:17px 15px 22px minmax(15px,auto)}
  .summary-section .stat-icon{font-size:18px;line-height:17px;height:17px}
  .summary-section .stat-caption{font-size:8px;letter-spacing:-.3px}
  .summary-section .stat strong{font-size:clamp(14px,4.4vw,18px);line-height:22px}
  .summary-section .stat-detail{font-size:8px;line-height:15px}
}

/* v29: restore legible captions and details without growing square tiles. */
.summary-section .stat{grid-template-rows:18px 17px 23px minmax(17px,auto);gap:2px;padding:6px 6px 5px}
.summary-section .stat-caption{font-size:clamp(10px,2.8vw,12px);line-height:17px;letter-spacing:-.28px}
.summary-section .stat-detail{font-size:clamp(10px,2.65vw,11.5px);line-height:17px;letter-spacing:-.12px}
@media(max-width:360px){
  .summary-section .stat{grid-template-rows:17px 16px 22px minmax(16px,auto);gap:2px;padding:5px 4px 4px}
  .summary-section .stat-caption{font-size:clamp(9px,2.75vw,10px);line-height:16px;letter-spacing:-.3px}
  .summary-section .stat-detail{font-size:clamp(9px,2.6vw,10px);line-height:16px}
}

/* v31: center the icon, label, value, and detail inside each summary square. */
.summary-section .stat {
  align-content:center;
  justify-items:center;
  text-align:center;
}
.summary-section .stat-icon,
.summary-section .stat-caption,
.summary-section .stat strong,
.summary-section .stat-detail {
  text-align:center;
  justify-self:center;
  max-width:100%;
}

/* v32: keep each activity history icon consistent with its summary tile. */
.history-icon.nursing-history { background:#fceafa; color:#a45d9a; }
.history-icon.bottle-history { background:var(--violet-pale); color:#6772da; }
.history-icon.tummy-history { background:#e8f1fd; color:#5180ba; }
.history-icon.med-history { background:#f3eaf6; color:#945ca3; }

/* v34 optional categories and dashboard chooser */
.summary-header-actions{margin-left:auto;display:flex;align-items:center}
.summary-header-actions .customize-trigger{padding:8px 4px;white-space:nowrap;font-size:12px}
.summary-section .collapsible-heading{gap:7px}
.summary-section .collapsible-heading .collapsible-hint{margin-left:0}
.summary-grid [hidden]{display:none!important}
.dashboard-options{display:grid;gap:3px;margin:12px 0 18px}
.dashboard-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 6px;border-bottom:1px solid #e8eaf2;font-weight:650}
.dashboard-option input{height:21px;width:21px;accent-color:#5966d8;flex-shrink:0}
.dashboard-option small{display:block;font-weight:400;color:#777f97;font-size:11px;margin-top:3px}
.extra-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.extra-two label{display:grid;gap:5px;min-width:0}
.extra-two input{width:100%;min-width:0}
.sleep-timer-display{font-size:38px;text-align:center;font-weight:800;color:#26314c;margin:12px 0}
.stat-weight{background:#e7f1fb;color:#506b8e}.stat-sleep{background:#eee8fc;color:#705aaa}.stat-hygiene{background:#fff2df;color:#a06b35}
.weight-icon,.weight-history{background:#e7f1fb;color:#506b8e}.sleep-icon,.sleep-history{background:#eee8fc;color:#705aaa}.hygiene-icon,.hygiene-history{background:#fff2df;color:#a06b35}
.week-chart[data-category="weight"]{--chart-bar:#95b8dd;--chart-strong:#567fac;--chart-soft:#e7f1fb}
.week-chart[data-category="sleep"]{--chart-bar:#aaa0d5;--chart-strong:#705aaa;--chart-soft:#eee8fc}
.week-chart[data-category="hygiene"]{--chart-bar:#d7ac78;--chart-strong:#a06b35;--chart-soft:#fff2df}
.weekly-average-section[data-category="sleep"]{--average-accent:#705aaa}
.weekly-average-section[data-category="hygiene"]{--average-accent:#a06b35}