/* ============================================================================
   Baby Tracker — shared stylesheet
   ----------------------------------------------------------------------------
   index.html and login.html used to carry two duplicated <style> blocks; all of
   it lives here now (Phase 0 of docs/design/APPLE_REDESIGN_PLAN.md), and every
   color, size, space, radius and shadow goes through a token below.

   The Apple redesign is COMPLETE (phases 0-6, 2026-08-21): tokens, Apple system
   colors, type/spacing/radii, components (segmented tabs, button roles, inset
   fields, grouped tables), dark mode, tokenized charts, focus/motion/a11y.
   The living description of the system: docs/design/UI_Design_Guide.md.

   RULES: never reintroduce a raw hex, a raw font-size or a loose px space into a
   component rule — reach for the token whose *meaning* matches. Colors are
   contrast-audited (74 text-on-surface pairs at WCAG AA, BOTH modes); changing a
   value means re-running that audit. Dark mode is token overrides only.

   Login-page rules are scoped under body.login-page (last section) because that
   page styles bare `.card` / `input` / `button`, which would otherwise collide
   with the app's own components.
   ========================================================================== */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Accent — systemBlue. Fill and text roles carry DIFFERENT values on purpose:
     the blue fill is only ~4.7:1 under white text and ~3.6:1 as text on white,
     so small text uses Apple's accessible blue instead. */
  --accent:              #0071E3;   /* systemBlue, Apple's web shade — clears AA under white text */
  --accent-pressed:      #005BBA;   /* hover/active fill */
  --accent-text:         #0040DD;   /* accessible blue — small text on a light surface */
  --accent-strong:       #003CAB;   /* text on an accent tint */
  --accent-tint:         #E5F0FF;   /* pale systemBlue surface */
  --accent-surface:      #1E6FC4;   /* LARGE filled areas (the last-feed banner).
                                       Deliberately lower chroma than --accent:
                                       systemBlue is 100% saturation, which reads
                                       fine on a button and overwhelming across a
                                       200px block. ~74% instead. */
  --accent-tint-strong:  #CCE1FF;   /* selected row */

  /* Status — same fill/text split as the accent */
  --success:             #1F7A37;   /* systemGreen, darkened — Add button carries white text */
  --success-text:        #1F7A37;   /* ✓ glyphs, stat numeral (same value, different role) */
  --success-pressed:     #17612B;   /* hover fill + "saved" message */
  --danger:              #C9000F;   /* accessible red — every current use is text */
  --danger-strong:       #96000B;   /* text on a red tint */
  --danger-tint:         #FFEBEA;
  --danger-border:       #F09189;   /* alert edge — needs to read against a pale tint */
  --danger-alert-bg:     #FFE4E1;   /* alert surface, a step stronger than --danger-tint */
  --danger-border-soft:  #FFD5D2;   /* lighter red edge — logout button */
  --warning:             #FF9500;   /* systemOrange — warn-list rule */
  --warning-tint:        #FFF6E5;
  --warning-strong:      #7A4300;   /* text on the warning tint */

  /* Diaper stats. These render only as large numerals, and the 💧/💩 glyph plus
     the label carry the meaning — so both are darkened well past systemYellow
     (#FFCC00 is 1.5:1 on white) to stay legible. */
  --pee:                 #9A6800;   /* deep amber */
  --poop:                #7F4A20;   /* systemBrown, darkened */

  /* Badges (role chips, reminder-source pills) */
  --badge-amber-bg:      #FFF3CC;
  --badge-amber-fg:      #7A5500;
  --badge-green-bg:      #DDF5E3;
  --badge-green-fg:      #14682C;
  --badge-teal-bg:       #DBF3F8;
  --badge-teal-fg:       #005E75;

  /* On-accent — drawn on the solid systemBlue banner, not on a light surface */
  --on-accent:           #FFFFFF;
  --on-accent-highlight: #FFD60A;   /* next-feed estimate */
  --on-accent-danger:    #FFD9D6;   /* overdue — red reads as mud on blue, so tint it */
  --on-accent-separator: rgba(255,255,255,.24);

  /* Text hierarchy. Apple's own label ramp is lighter than AA allows at these
     sizes (secondaryLabel is ~3.5:1 on white), so the ramp is compressed: the
     four levels that carry real text all clear 4.5:1, and only the two
     "not recorded" placeholder greys sit below it. */
  --label-primary:       #1C1C1E;
  --label-secondary:     #3A3A3C;
  --label-tertiary:      #5A5A5E;
  --label-quaternary:    #6E6E73;
  --label-faint:         #AEAEB2;   /* blank-day cells, "no" glyph */
  --label-faintest:      #D1D1D6;   /* not-recorded glyph */

  /* Surfaces — Apple's grouped-background system */
  --bg-grouped:          #F2F2F7;   /* page background */
  --bg-card:             #FFFFFF;
  --bg-subtle:           #F9F9FB;
  --bg-hover:            #EFEFF4;
  --bg-hover-strong:     #E5E5EA;
  --bg-field:            #EFEFF4;   /* inset filled inputs. Same value as --bg-hover
                                       today but a separate token on purpose — field
                                       and hover semantics must be able to diverge. */

  /* Segmented control (Phase 3) — recessed track, raised selected segment */
  --seg-track:           #E5E5EA;
  --seg-selected:        #FFFFFF;

  /* Lines */
  --separator:           #D1D1D6;
  --separator-section:   #E5E5EA;
  --separator-soft:      #EFEFF4;
  --separator-row-alt:   #F2F2F7;

  /* Charts. Chart.js sets canvas colors in JS, so app.js reads these back out
     via getComputedStyle — they must stay real CSS custom properties. Series
     colors are graphical objects: WCAG wants 3:1 against the card, not 4.5:1. */
  --chart-grid:          #EFEFF4;
  --chart-tick:          #6E6E73;
  --chart-tooltip-bg:    rgba(28,28,30,.92);
  --chart-tooltip-fg:    #FFFFFF;
  --chart-bar:           rgba(0,113,227,.72);
  --chart-daylabel:      #0040DD;
  --chart-milk:          #0071E3;
  --chart-feeds:         #248A3D;
  --chart-avg:           #B25000;
  --chart-day:           #5856D6;
  --chart-night:         #0071A4;
  --chart-pee:           #9A6800;
  --chart-poop:          #7F4A20;
  --chart-crosshair:     rgba(60,60,67,.36);   /* scrub line (crosshairPlugin) */
  --chart-divider:       rgba(60,60,67,.29);   /* timeline midnight dividers */

  /* Type scale. The system stack renders as SF on Apple devices and falls back
     to Segoe UI / Roboto elsewhere — see the plan's Open Question 3. */
  --text-stat:           28px;   /* stat numerals */
  --text-banner:         24px;   /* banner values */
  --text-title:          20px;   /* page header */
  --text-banner-sm:      19px;   /* the next-feed range — two times in one cell */
  --text-xl:             22px;   /* login heading */
  --text-lg:             18px;
  --text-base:           16px;
  --text-md:             15px;
  --text-body:           14px;
  --text-sm:             13px;
  --text-xs:             12px;
  --text-2xs:            11px;
  --text-3xs:            10px;

  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  --leading-tight:       1;      /* big numerals — no leading */
  --leading-snug:        1.25;
  --leading-normal:      1.45;   /* body copy */
  --leading-relaxed:     1.5;
  --leading-loose:       1.9;   /* wrapped legend lines */

  /* Eyebrow — the uppercase micro-label used for every section title, stat
     label, form label and table header. One place to retune all of them; the
     selector list that consumes these lives under "Eyebrow labels" below. */
  --eyebrow-size:        11px;
  --eyebrow-weight:      600;
  --eyebrow-tracking:    .5px;

  /* Spacing — 8pt rhythm. Use these instead of loose px for padding/gap/margin. */
  --space-0-5:           2px;
  --space-1:             4px;
  --space-1-5:           6px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-7:             28px;

  /* Shape — moderate on purpose. §4 of the plan: ~12px cards, ~9px controls,
     14px max on the banner. Deliberately NOT Apple Health's oversized curve.
     The scheme (Phase 3): 12/14 = surfaces (card/banner/modal) · 9 = rectangular
     controls (buttons, fields, segmented track, nav items) · 7 = elements nested
     INSIDE a 9px control (segments, row-action chips, table row end-caps) ·
     pill = capsule buttons (.today-chart-btn, .ai-quick) · chip/xs = badges, code. */
  --radius-card:         12px;
  --radius-banner:       14px;
  --radius-modal:        14px;
  --radius-control:      9px;
  --radius-sm:           7px;
  --radius-xs:           4px;
  --radius-chip:         8px;
  --radius-pill:         999px;

  /* Depth & focus — flatter than before; the banner's blue glow is now a
     neutral shadow (see .last-feed). */
  --shadow-card:         0 1px 3px rgba(0,0,0,0.06);
  --shadow-seg:          0 1px 2px rgba(0,0,0,.12);   /* selected segment lift */
  --shadow-banner:       0 1px 3px rgba(0,0,0,0.10);
  --shadow-modal:        0 12px 32px rgba(0,0,0,.18);
  --shadow-drawer:       2px 0 12px rgba(0,0,0,.10);
  --shadow-login:        0 4px 20px rgba(0,0,0,0.06);
  --focus-ring:          0 0 0 2px rgba(0,122,255,.28);
  --focus-ring-lg:       0 0 0 3px rgba(0,122,255,.28);
  --scrim:               rgba(0,0,0,.25);
  --scrim-modal:         rgba(0,0,0,.4);
}
/* ============================================================================
   Dark mode (Phase 4). Token overrides ONLY — if a component rule needs
   changing here, the component is under-tokenized; fix it there instead.

   Auto-only by decision (2026-08-20): follows the phone's setting, no in-app
   toggle and no persisted state. Adding a data-theme override later is purely
   additive, so nothing here forecloses it.

   Apple's dark surfaces are used as-is; the label ramp is again compressed for
   AA, and dark UI leans on contrast rather than shadow.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Accent */
    --accent:              #0D6FD6;   /* systemBlue, dark variant, deepened: it is both a
                                         fill under white text (needs 4.5:1) and a large
                                         numeral on the card (needs 3:1) — #0A84FF fails the
                                         first at 3.65:1. This clears both. */
    --accent-pressed:      #409CFF;
    --accent-text:         #6FB6FF;   /* light blue text on a dark surface */
    --accent-strong:       #A6D0FF;   /* text on a dark accent tint */
    --accent-tint:         #12365C;
    --accent-tint-strong:  #1B4E80;
    --accent-surface:      #14538F;   /* the banner — deeper still, same low-chroma rule */

    /* Status */
    --success:             #1F7A37;   /* Add button fill — white label needs 4.5:1 */
    --success-text:        #5BD97C;
    --success-pressed:     #1B6E31;
    --danger:              #FF6B61;
    --danger-strong:       #FF9E96;
    --danger-tint:         #3A1C19;
    --danger-alert-bg:     #4C201C;
    --danger-border:       #8E3B34;
    --danger-border-soft:  #5E2A25;
    --warning:             #FF9F0A;
    --warning-tint:        #3A2810;
    --warning-strong:      #FFC978;

    --pee:                 #E3AE45;
    --poop:                #C98D5F;

    /* Badges */
    --badge-amber-bg:      #3D2F0A;
    --badge-amber-fg:      #FFD666;
    --badge-green-bg:      #0F3A1C;
    --badge-green-fg:      #6FDC8C;
    --badge-teal-bg:       #0B3640;
    --badge-teal-fg:       #6FD4E8;

    /* On-accent */
    --on-accent:           #FFFFFF;
    --on-accent-highlight: #FFD60A;
    --on-accent-danger:    #FFC0BA;
    --on-accent-separator: rgba(255,255,255,.22);

    /* Text — compressed the same way the light ramp is; the four levels that
       carry real text clear 4.5:1 on the card surface. */
    --label-primary:       #F2F2F7;
    --label-secondary:     #D8D8DD;
    --label-tertiary:      #B4B4BA;
    --label-quaternary:    #9A9AA0;
    --label-faint:         #6A6A6E;
    --label-faintest:      #48484A;

    /* Surfaces — Apple's dark grouped-background system */
    --bg-grouped:          #000000;
    --bg-card:             #1C1C1E;   /* elevated, not pure black */
    --bg-subtle:           #2C2C2E;
    --bg-hover:            #2C2C2E;
    --bg-hover-strong:     #3A3A3C;
    --bg-field:            #2C2C2E;

    /* Segmented control */
    --seg-track:           #3A3A3C;
    --seg-selected:        #636366;   /* Apple's dark segmented gray — --label-primary
                                         on it is ~5.3:1, clears AA */

    /* Lines */
    --separator:           #38383A;
    --separator-section:   #2C2C2E;
    --separator-soft:      #2C2C2E;
    --separator-row-alt:   #2C2C2E;

    /* Charts */
    --chart-grid:          #2C2C2E;
    --chart-tick:          #9A9AA0;
    --chart-tooltip-bg:    rgba(240,240,245,.94);
    --chart-tooltip-fg:    #1C1C1E;
    --chart-bar:           rgba(10,132,255,.78);
    --chart-daylabel:      #6FB6FF;
    --chart-milk:          #0A84FF;
    --chart-feeds:         #30D158;
    --chart-avg:           #FF9F0A;
    --chart-day:           #7D7AFF;
    --chart-night:         #40C8E0;
    --chart-pee:           #E3AE45;
    --chart-poop:          #C98D5F;
    --chart-crosshair:     rgba(235,235,245,.32);
    --chart-divider:       rgba(235,235,245,.26);

    /* Depth — dark UI uses contrast, not shadow */
    --shadow-card:         none;
    --shadow-seg:          none;   /* selected segment separates by color, not lift */
    --shadow-banner:       none;
    --shadow-modal:        0 12px 32px rgba(0,0,0,.6);
    --shadow-drawer:       2px 0 12px rgba(0,0,0,.5);
    --shadow-login:        0 4px 20px rgba(0,0,0,.5);
    --focus-ring:          0 0 0 2px rgba(10,132,255,.45);
    --focus-ring-lg:       0 0 0 3px rgba(10,132,255,.45);
    --scrim:               rgba(0,0,0,.5);
    --scrim-modal:         rgba(0,0,0,.6);
  }
}


/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--bg-grouped); color: var(--label-primary);
       line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }
body:not(.login-page) { font-size: var(--text-body); }

/* ---------- Focus & motion (Phase 6) ----------
   One keyboard focus ring for everything interactive. :focus-visible keeps it
   off mouse clicks; text fields keep their own always-on :focus rules (see the
   Form fields section) because a visible focus state on a field is desirable
   with the mouse too. Clickable table rows get tabIndex=0 from app.js; theirs
   is inset so the card doesn't clip it. */
button:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
tr.data-row:focus-visible { box-shadow: inset var(--focus-ring); outline: none; }

/* Subtle state transitions on interactive elements — background/border/ring
   only, never layout properties. */
button, .tab, .nav-drawer button.nav-item, .ai-quick, input, select {
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, color .15s ease;
}
/* Gentle press feedback, filled primaries only. */
.add-form button.add:active, #ai-submit:active, .admin-form button:active,
.modal button:active, body.login-page button:active { transform: scale(.97); }

/* ---------- Header ---------- */
.page-header { background: var(--bg-card); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--separator); display: flex; align-items: center; gap: var(--space-3); }
.page-header button.menu-btn { border: none; background: none; font-size: var(--text-title); line-height: var(--leading-tight); cursor: pointer; padding: var(--space-1) var(--space-1-5); color: var(--label-secondary); border-radius: var(--radius-sm); }
.page-header button.menu-btn:hover { background: var(--bg-hover); }
.page-header h1 { font-size: var(--text-title); font-weight: var(--weight-bold); color: var(--accent-text); }
.page-header .sub { font-size: var(--text-sm); color: var(--label-tertiary); line-height: var(--leading-snug); }
.page-header .sub .day-num { display: block; font-weight: var(--weight-bold); color: var(--accent-text); }
/* Calendar age beside "Day N" — quieter, so Day N stays the primary read. */
.page-header .sub .day-num .age { font-weight: var(--weight-regular); color: var(--label-tertiary); margin-left: var(--space-1-5); }
.page-header .spacer { flex: 1; }
.page-header .user-chip { font-size: var(--text-sm); color: var(--label-secondary); display: inline-flex; align-items: center; }
.page-header .user-chip .role { display: inline-block; margin-left: var(--space-1-5); font-size: var(--text-3xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .4px; padding: var(--space-0-5) var(--space-1-5); border-radius: var(--radius-chip); background: var(--accent-tint); color: var(--accent-text); }
.page-header .user-chip .role.admin { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.page-header button.logout { background: var(--danger-tint); color: var(--danger); border-radius: var(--radius-control); padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.page-header button.logout:hover { background: var(--danger-border-soft); }
.container { max-width: 860px; margin: 0 auto; padding: var(--space-4); }

/* ---------- Section dividers + labels ---------- */
.section-div { border: none; border-top: 1px solid var(--separator-section); margin: var(--space-5) var(--space-0-5); }

/* Eyebrow labels — every uppercase micro-label in the app shares this one rule,
   so the whole tier retunes from the --eyebrow-* tokens. Section-level headings
   take the .section-title / .card h2 / .nav-title override just below. */
.section-title,
.card h2,
.nav-drawer .nav-title,
.stat .lbl,
.last-feed .lf-title,
.last-feed .lf-item .k,
.add-form label,
.admin-form label,
.health-item .k,
.date-jump,
thead th,
body.login-page label {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
}
/* Section headings are the loudest eyebrow: one step up, bold. */
.section-title,
.card h2,
.nav-drawer .nav-title { font-size: var(--text-xs); font-weight: var(--weight-bold); }
.section-title { color: var(--label-secondary); margin: 0 0 var(--space-2) var(--space-1); }

/* ---------- Button roles (Phase 3) ----------
   Apple's three roles, carried on the EXISTING class names (app.js generates
   .save/.pw/.danger/.edit/.del/.day-step buttons — no markup changes):
   · filled = the one primary action on a surface (accent, or green for Add);
   · tinted = secondary actions, borderless color-on-tint AT REST — destructive
     intent (Delete/Logout) must be readable without hovering;
   · plain  = bare glyph buttons (.menu-btn, .due-close).
   These two rules hold the shared geometry; the component sections below keep
   only their colors and layout quirks. */
.add-form button.add, #ai-submit, .admin-form button, .modal button,
body.login-page button {
  border: none;
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  cursor: pointer;
}
.row-actions button, .admin-table button, .pager button,
.timeline-nav button.day-step, .page-header button.logout,
.today-chart-btn, .ai-quick {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Form fields (Phase 3) ----------
   Apple inset filled fields: --bg-field surface, transparent border (not `none`,
   so the accent focus border causes no layout shift), one shared focus ring.
   Sizing stays with each component; checkboxes stay native. */
.add-form input[type=datetime-local], .add-form input[type=number], #ai-input,
.admin-form input, .admin-form select,
.admin-table select, .admin-table input[type=text], .admin-table input[type=email],
.date-jump input[type=date], body.login-page input {
  background: var(--bg-field);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--label-primary);
  font-family: inherit;
}
.add-form input[type=datetime-local]:focus, .add-form input[type=number]:focus, #ai-input:focus,
.admin-form input:focus, .admin-form select:focus,
.admin-table select:focus, .admin-table input[type=text]:focus, .admin-table input[type=email]:focus,
.date-jump input[type=date]:focus, body.login-page input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ---------- Stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.stat { background: var(--bg-card); border-radius: var(--radius-card); padding: var(--space-3) var(--space-2); text-align: center; box-shadow: var(--shadow-card); }
.stat .val { font-size: var(--text-stat); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.stat .lbl { color: var(--label-tertiary); margin-top: var(--space-1); }
.stat.feeds .val { color: var(--success-text); }
.stat.milk .val  { color: var(--accent); }
.stat.pee .val   { color: var(--pee); }
.stat.poop .val  { color: var(--poop); }

/* ---------- Last feed banner ---------- */
.last-feed { background: var(--accent-surface); color: var(--on-accent); border-radius: var(--radius-banner); padding: var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--shadow-banner); }
.last-feed .lf-title { opacity: .9; margin-bottom: var(--space-3); }
.last-feed .lf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
.last-feed .lf-item { text-align: center; }
.last-feed .lf-item .v { font-size: var(--text-banner); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.last-feed .lf-item .v .unit { font-size: var(--text-sm); font-weight: var(--weight-semibold); opacity: .85; }
.last-feed .lf-item.row3 { padding-top: var(--space-3); border-top: 1px solid var(--on-accent-separator); }
.last-feed .lf-item.next .v { color: var(--on-accent-highlight); }
.last-feed .lf-item .v.due { color: var(--on-accent-danger); }
/* The next-feed estimate is a range ("09:51–10:21"), ~2x the characters of a single
   time — step the size down so it still fits its half-width cell on a phone. */
.last-feed .lf-item .v.range { font-size: var(--text-banner-sm); white-space: nowrap; }
.last-feed .lf-item .k { opacity: .85; margin-top: var(--space-1-5); }

/* ---------- Due-for-a-feed alert ---------- */
.due-alert { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: var(--danger-alert-bg); border: 1px solid var(--danger-border); color: var(--danger-strong); border-radius: var(--radius-card); padding: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-body); font-weight: var(--weight-bold); box-shadow: var(--shadow-card); }
.due-alert .due-close { background: none; border: none; color: var(--danger-strong); font-size: var(--text-base); line-height: var(--leading-tight); cursor: pointer; padding: var(--space-0-5) var(--space-1); opacity: .7; }
.due-alert .due-close:hover { opacity: 1; }

/* ---------- Entry sanity-check modal (warn-before-save; see feedWarnings in app.js) ---------- */
.modal-scrim { display: none; position: fixed; inset: 0; background: var(--scrim-modal); z-index: 40; align-items: center; justify-content: center; padding: var(--space-4); }
.modal-scrim.open { display: flex; }
.modal { background: var(--bg-card); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal); width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; padding: var(--space-5); }
.modal h3 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--danger-strong); margin-bottom: var(--space-1-5); }
.modal .modal-sub { font-size: var(--text-sm); color: var(--label-tertiary); line-height: var(--leading-normal); margin-bottom: var(--space-3); }
.modal .warn-list { list-style: none; margin-bottom: var(--space-4); }
.modal .warn-list li { background: var(--warning-tint); border-left: 3px solid var(--warning); border-radius: 0 var(--radius-control) var(--radius-control) 0; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--warning-strong); line-height: var(--leading-normal); }
.modal .warn-list li .w-title { display: block; font-weight: var(--weight-bold); margin-bottom: var(--space-0-5); }
.modal .modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
/* INTENTIONALLY inverted hierarchy: "Go back & fix" (cancel) is the filled,
   prominent button and "Save anyway" (proceed) the quiet tint — the modal exists
   to make the user re-check the entry, so the safe path gets the visual weight.
   See CLAUDE.md (warn-before-save). Don't "fix" this to match Apple convention. */
.modal button.cancel { background: var(--accent); color: var(--on-accent); }
.modal button.cancel:hover { background: var(--accent-pressed); }
.modal button.proceed { background: var(--bg-hover); color: var(--label-secondary); }
.modal button.proceed:hover { background: var(--bg-hover-strong); }

/* ---------- Cards ---------- */
.card { background: var(--bg-card); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-card); }
.card h2 { margin-bottom: var(--space-3); color: var(--label-secondary); }

/* ---------- Add feeding form ---------- */
.add-form { display: grid; grid-template-columns: 1.4fr 1fr auto auto auto; gap: var(--space-2); align-items: end; }
.add-form .field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.add-form label { color: var(--label-tertiary); }
.add-form input[type=datetime-local], .add-form input[type=number] { padding: var(--space-2); font-size: var(--text-body); width: 100%; min-width: 0; max-width: 100%; }
/* iOS ignores width:100% on datetime-local unless min-width:0 + appearance:none — see CLAUDE.md */
.add-form input[type=datetime-local] { -webkit-appearance: none; appearance: none; }
.add-form .check { display: flex; align-items: center; gap: var(--space-1-5); padding-bottom: var(--space-2); font-size: var(--text-sm); color: var(--label-secondary); }
.add-form .check input { width: 17px; height: 17px; }
.add-form button.add { background: var(--success); color: var(--on-accent); white-space: nowrap; }
.add-form button.add:hover { background: var(--success-pressed); }
.form-msg { font-size: var(--text-xs); margin-top: var(--space-2); min-height: 16px; }
.form-msg.ok { color: var(--success-text); }
.form-msg.err { color: var(--danger); }

/* ---------- AI assistant card ---------- */
.ai-messages { max-height: 300px; overflow-y: auto; margin-bottom: var(--space-2); display: flex; flex-direction: column; }
.ai-msg { padding: var(--space-2) var(--space-3); margin: var(--space-1) 0; border-radius: var(--radius-card); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 90%; white-space: pre-wrap; word-wrap: break-word; }
.ai-user { background: var(--accent-tint); color: var(--accent-strong); align-self: flex-end; border-bottom-right-radius: 3px; }
.ai-assistant { background: var(--bg-subtle); color: var(--label-primary); align-self: flex-start; border: 1px solid var(--separator-soft); border-bottom-left-radius: 3px; }
.ai-msg.pending { opacity: .6; font-style: italic; }
.ai-empty { color: var(--label-quaternary); font-size: var(--text-xs); margin: var(--space-1) var(--space-0-5); }
#ai-quick-btns { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-bottom: var(--space-2); }
.ai-quick { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--label-secondary); }
.ai-quick:hover { background: var(--accent-tint); color: var(--accent-text); }
.ai-form { display: flex; gap: var(--space-1-5); }
#ai-input { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-body); }
#ai-submit { background: var(--accent); color: var(--on-accent); }
#ai-submit:hover { background: var(--accent-pressed); }
#ai-submit:disabled { background: var(--label-quaternary); cursor: default; }
.ai-disclaimer { font-size: var(--text-2xs); color: var(--label-quaternary); margin-top: var(--space-2); }

/* ---------- Chart tabs (Apple segmented control) + canvas shell ----------
   One recessed track, one raised segment. The track never wraps: on a narrow
   phone it scrolls horizontally (hidden scrollbar), like iOS apps with more
   segments than fit. Both #chart-tabs and #admin-tabs share this. */
.tabs { display: flex; flex-wrap: nowrap; gap: var(--space-0-5); margin-bottom: var(--space-3); background: var(--seg-track); border-radius: var(--radius-control); padding: var(--space-0-5); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.trends-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.trends-head h2 { margin-bottom: 0; }
.today-chart-btn { background: var(--accent-tint); color: var(--accent-text); border-radius: var(--radius-pill); padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.today-chart-btn:hover { background: var(--accent-tint-strong); }
/* Segment radius is --radius-sm (7px) inside the 9px track with 2px padding —
   concentric corners, the Apple way. */
.tab { flex: 0 0 auto; white-space: nowrap; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); border: none; font-size: var(--text-xs); cursor: pointer; background: transparent; color: var(--label-secondary); font-family: inherit; }
.tab:hover { color: var(--label-primary); }
.tab.active { background: var(--seg-selected); color: var(--label-primary); font-weight: var(--weight-semibold); box-shadow: var(--shadow-seg); }
.chart-shell { display: flex; width: min(100%, 780px); margin: 0 auto; align-items: stretch; }
.chart-y-axis { position: relative; flex: 0 0 46px; height: 200px; color: var(--label-tertiary); font-size: var(--text-2xs); }
.chart-y-axis::after { content: ''; position: absolute; top: var(--chart-area-top, 0px); bottom: var(--chart-area-bottom, 0px); right: 2px; border-right: 1px solid var(--separator); }
.chart-y-axis.right { flex-basis: 38px; display: none; }
.chart-y-axis.right::after { left: 2px; right: auto; border-right: 0; border-left: 1px solid var(--separator); }
.chart-y-tick { position: absolute; right: 8px; transform: translateY(-50%); white-space: nowrap; }
.chart-y-axis.right .chart-y-tick { left: 8px; right: auto; }
.chart-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.chart-scroll::-webkit-scrollbar { display: none; }
.chart-scroll.dragging { cursor: grabbing; }
.chart-scroll.dragging #mainChart { cursor: grabbing !important; }
.chart-wrap { position: relative; height: 200px; min-width: 100%; }
#mainChart { touch-action: pan-x pan-y; }
.chart-legend { display: flex; justify-content: center; align-items: center; gap: var(--space-4); min-height: 22px; margin-top: var(--space-2); color: var(--label-secondary); font-size: var(--text-xs); }
.chart-legend:empty { display: none; }
.chart-legend-item { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.chart-legend-swatch { width: 18px; height: 0; border-top: 3px solid var(--legend-color); }
.chart-legend-swatch.bar { width: 8px; height: 16px; border: 0; border-left: 3px solid var(--legend-color); background: var(--legend-color); opacity: .55; }
.chart-legend-swatch.dashed { border-top-style: dashed; }

/* ---------- Table (inset grouped list) ----------
   Hairline separators only, no header underline weight, list ends clean at the
   card edge. Row highlight lives on the TDs (backgrounds on a <tr> can't clip to
   a radius) with end-cap rounding on the first/last cell. */
table { width: 100%; border-collapse: collapse; }
thead th { text-align: center; padding: var(--space-2); color: var(--label-quaternary); border-bottom: 1px solid var(--separator-soft); white-space: nowrap; }
tbody td { padding: var(--space-2); border-bottom: 1px solid var(--separator-soft); text-align: center; white-space: nowrap; transition: background .1s; }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { font-weight: var(--weight-semibold); color: var(--accent-text); }
tr.data-row { cursor: pointer; }
tr.data-row:hover td { background: var(--accent-tint); }
tr.data-row.sel td { background: var(--accent-tint-strong); }
tr.data-row:hover td:first-child, tr.data-row.sel td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
tr.data-row:hover td:last-child, tr.data-row.sel td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
tr.blank-row td { color: var(--label-faint); }
tr.blank-row td:first-child { color: var(--label-quaternary); }

/* ---------- Detail panel ---------- */
.detail-panel { display: none; }
.detail-panel.open { display: block; }
.detail-head { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--accent-text); margin-bottom: var(--space-3); }
.detail-panel tbody td { padding: var(--space-2); }
.detail-panel tbody td:first-child { font-weight: var(--weight-medium); color: var(--label-primary); }
.chk-y { color: var(--success-text); font-weight: var(--weight-semibold); }
.chk-n { color: var(--label-faint); }
.chk-blank { color: var(--label-faintest); }
.detail-panel td.logged-by { color: var(--label-quaternary); }
.feed-gap { font-size: var(--text-2xs); color: var(--label-quaternary); font-weight: var(--weight-medium); margin-left: var(--space-1-5); }
/* Tinted at rest — Delete must read as destructive without a hover. */
.row-actions button { background: var(--bg-hover); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); margin-left: var(--space-1); }
.row-actions button.edit { color: var(--accent-text); }
.row-actions button.edit:hover { background: var(--accent-tint); }
.row-actions button.del { background: var(--danger-tint); color: var(--danger); }
.row-actions button.del:hover { background: var(--danger-border-soft); }

/* ---------- Pagination ---------- */
.log-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.log-head h2 { margin-bottom: 0; }
/* the "(click a row for detail)" hint inside the h2 — undo the eyebrow weight */
.log-head .muted { font-size: var(--text-2xs); font-weight: var(--weight-regular); }
.date-jump { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--label-quaternary); }
.date-jump input[type=date] { -webkit-appearance: none; appearance: none; padding: var(--space-1-5) var(--space-2); font-size: var(--text-sm); color: var(--label-secondary); cursor: pointer; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--label-tertiary); }
.pager button { background: var(--bg-hover); color: var(--label-secondary); border-radius: var(--radius-control); padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); }
.pager button:hover:not(:disabled) { background: var(--bg-hover-strong); }
.pager button:disabled { opacity: .45; cursor: default; }

/* ---------- Timeline tab nav ---------- */
.timeline-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--label-secondary); }
.timeline-nav button.day-step { background: var(--bg-hover); color: var(--label-secondary); border-radius: var(--radius-control); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.timeline-nav button.day-step:hover:not(:disabled) { background: var(--bg-hover-strong); }
.timeline-nav button.day-step:disabled { opacity: .45; cursor: default; }

/* ---------- Nav drawer ---------- */
.nav-scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 20; }
.nav-scrim.open { display: block; }
.nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; background: var(--bg-card); box-shadow: var(--shadow-drawer); z-index: 21; transform: translateX(-100%); transition: transform .2s ease; padding: var(--space-4) 0; }
.nav-drawer.open { transform: translateX(0); }
.nav-drawer .nav-title { color: var(--label-quaternary); padding: 0 var(--space-5) var(--space-3); }
/* Inset items, iOS-sidebar style — rounded rows floating inside the drawer. */
.nav-drawer button.nav-item { display: block; width: calc(100% - 2 * var(--space-2)); margin: 0 var(--space-2) var(--space-0-5); text-align: left; border: none; background: none; border-radius: var(--radius-control); padding: var(--space-3) var(--space-3); font-size: var(--text-md); font-family: inherit; color: var(--label-primary); cursor: pointer; }
.nav-drawer button.nav-item:hover { background: var(--bg-subtle); }
.nav-drawer button.nav-item.active { color: var(--accent-text); font-weight: var(--weight-bold); background: var(--accent-tint); }

/* ---------- Report view ---------- */
#report-view .report-generated { font-size: var(--text-xs); color: var(--label-quaternary); margin-bottom: var(--space-3); }
#report-view table th, #report-view table td { text-align: center; }
.report-notes { list-style: none; }
.report-notes li { background: var(--accent-tint); border-left: 3px solid var(--accent); padding: var(--space-2) var(--space-3); border-radius: 0 var(--radius-control) var(--radius-control) 0; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--accent-strong); line-height: var(--leading-relaxed); }
.report-empty { color: var(--label-tertiary); font-size: var(--text-sm); padding: var(--space-2) 0; }

/* ---------- Admin view ---------- */
.page-header .user-chip .role.viewer { background: var(--badge-teal-bg); color: var(--badge-teal-fg); }
#admin-view .admin-sub { display: none; }
#admin-view .admin-sub.active { display: block; }
.admin-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-3); }
.admin-form .field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.admin-form label { color: var(--label-tertiary); }
.admin-form input, .admin-form select { padding: var(--space-2); font-size: var(--text-body); min-width: 0; }
.admin-form button { background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.admin-form button:hover { background: var(--accent-pressed); }
.admin-table td { text-align: left; }
.admin-table th.center, .admin-table td.center { text-align: center; }
.admin-table td:first-child { color: var(--label-primary); }
.admin-table select, .admin-table input[type=text], .admin-table input[type=email] { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
/* Same tinted-at-rest roles as the detail panel's row actions. */
.admin-table button { background: var(--bg-hover); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); margin-left: var(--space-1); }
.admin-table button.save { color: var(--accent-text); }
.admin-table button.save:hover { background: var(--accent-tint); }
.admin-table button.danger { background: var(--danger-tint); color: var(--danger); }
.admin-table button.danger:hover { background: var(--danger-border-soft); }
.health-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.health-item { background: var(--bg-subtle); border-radius: var(--radius-control); padding: var(--space-3); }
.health-item .k { color: var(--label-tertiary); }
.health-item .v { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--label-primary); margin-top: var(--space-1); word-break: break-word; }
.health-item .v.ok { color: var(--success-text); }
.health-item .v.bad { color: var(--danger); }
.admin-hint { color: var(--label-quaternary); font-size: var(--text-xs); margin-bottom: var(--space-3); }
.muted { color: var(--label-quaternary); font-size: var(--text-xs); }
.recip-list { list-style: none; margin: var(--space-1) 0 var(--space-2); }
.recip-list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-0-5); border-bottom: 1px solid var(--separator-row-alt); font-size: var(--text-body); }
.recip-list li .em { font-weight: var(--weight-semibold); color: var(--label-primary); }
.src-badge { display: inline-block; font-size: var(--text-3xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .4px; padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-chip); }
.src-badge.default { background: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.src-badge.user { background: var(--accent-tint); color: var(--accent-text); }
.src-badge.list { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.src-legend { color: var(--label-quaternary); font-size: var(--text-2xs); line-height: var(--leading-loose); margin-top: var(--space-1); }
.src-legend code { background: var(--bg-hover); padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-xs); font-size: var(--text-2xs); }

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat .val { font-size: var(--text-banner); }
  .last-feed .lf-item .v { font-size: var(--text-title); }
  .last-feed .lf-item .v.range { font-size: var(--text-base); }
  .add-form { grid-template-columns: 1fr 1fr; }
  .add-form .field { grid-column: 1 / -1; }   /* date/time and milk each get their own row */
  .add-form button.add { grid-column: 1 / -1; }
  .modal .modal-actions button { flex: 1 1 100%; }
  .container { padding: var(--space-3); }
  .card { padding: var(--space-3); }
  thead th, tbody td { padding: var(--space-1-5) var(--space-1); font-size: var(--text-2xs); letter-spacing: 0; }
  thead th { white-space: normal; }   /* let 'Avg Interval' wrap instead of forcing a wide column */
  /* shrink Milk ml (col 4) and Avg Interval (col 5) so 💩 stays inside the table */
  thead th:nth-child(4), tbody td:nth-child(4),
  thead th:nth-child(5), tbody td:nth-child(5) { font-size: var(--text-3xs); }
}

/* ============================================================================
   Login page — scoped under body.login-page.
   These style bare .card / label / input / button, which would collide with the
   app's components if left unscoped. Keep the scope when editing.
   ========================================================================== */
body.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
body.login-page .card { margin-bottom: 0; background: var(--bg-card); border-radius: var(--radius-modal); padding: var(--space-7) var(--space-6); width: 100%; max-width: 340px; box-shadow: var(--shadow-login); }
body.login-page h1 { font-size: var(--text-xl); color: var(--accent-text); margin-bottom: var(--space-1); }
body.login-page .sub { font-size: var(--text-sm); color: var(--label-tertiary); margin-bottom: var(--space-5); }
body.login-page label { display: block; color: var(--label-secondary); margin: var(--space-3) 0 var(--space-1-5); }
body.login-page input { width: 100%; padding: var(--space-3); font-size: var(--text-md); }
body.login-page input:focus { box-shadow: var(--focus-ring-lg); }
body.login-page button { width: 100%; margin-top: var(--space-5); padding: var(--space-3); background: var(--accent); color: var(--on-accent); font-size: var(--text-md); }
body.login-page button:hover { background: var(--accent-pressed); }
body.login-page button:disabled { opacity: .6; cursor: default; }
body.login-page .error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-3); min-height: 18px; }

/* ============================================================================
   Reduced motion (Phase 6) — collapse every transition/animation, including
   the nav drawer slide and the button press scale. Chart.js animation is
   already off (animation: false in app.js).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}