/* Self-hosted rather than loaded from fonts.googleapis.com: a cross-origin
   font fetch on every full-page navigation (the day/range nav links are
   plain page loads, not htmx) made font-display's swap-vs-fallback decision
   depend on that request's latency each time, causing an intermittent
   couple-pixel reflow. Same-origin means it's cached and ready as
   reliably as style.css itself. Both are variable fonts — one file per
   family covers every weight used below. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("/static/fonts/nunito-sans-latin.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 800;
  font-display: optional;
  src: url("/static/fonts/sora-latin.woff2") format("woff2-variations");
}

:root {
  color-scheme: light dark;
  font-family: var(--font-body);

  /* Reserve the scrollbar's gutter permanently. Without this, filtering the
     timeline to fewer events shortens the page enough to cross the
     needs-a-scrollbar threshold; on platforms with a space-reserving
     (non-overlay) scrollbar, that changes the usable width every time it
     appears or disappears, nudging every full-width element in the sidebar
     (day pills, filter chips, the "Today · X" summary) sideways by the
     scrollbar's width. */
  scrollbar-gutter: stable;

  /* Design tokens — see docs/design-system.md. Palette/type sourced from the
     "Timeline Line" design (Claude Design handoff, 2026-07-21). */
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --color-teal: #5FBCB0;
  --color-blue: #3D7A9C;
  --color-coral: #E2694A;

  --color-bg: #FAF6F1;
  --color-surface: #FFFDFA;
  --color-bg-secondary: #F3EEE5;

  --color-text-primary: #3A332C;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9C9184;
  --color-heading: #2C5C77;

  --color-border: #EDE2D6;

  --color-success: #4E6D3A;
  --color-warning: #F2B950;
  --color-danger: #B5432A;

  --color-event-nappy: #5FBCB0;
  --color-event-feed: #E8A87C;
  --color-event-pump: #D9946A;
  --color-event-bath: #6FAAD1;
  --color-event-observation: #9CAF88;
  --color-event-sleep: #B99BD1;
  --color-event-weight: #8FB8D6;
  --color-event-health: #E2694A;

  /* Sleep Insights chart only — night vs. nap need two distinct tones where
     the rest of the app just uses one --color-event-sleep swatch. */
  --color-sleep-night: #7C5A96;
  --color-sleep-nap: #C9AFDE;
  --color-growth-callout: #5C7F42;

  /* Nappy Insights chart only — wee reuses --color-event-nappy (the app's
     existing nappy color), poo/mixed add the two tones the design calls for
     to tell a stacked bar's segments apart. */
  --color-nappy-poo: #9C7A4E;
  --color-nappy-mixed: #C9A45C;
  --color-nappy-text-wee: #26776E;
  --color-nappy-text-poo: #76552E;
  --color-nappy-text-mixed: #80651F;

  /* Poo-size markers/badges — blowout reuses --color-danger (near-identical
     to the design's own blowout red), large gets its own amber-brown tone. */
  --color-nappy-large: #6E4E20;
  --color-nappy-blowout: var(--color-danger);
  --color-nappy-badge-neutral-bg: #F1EBE1;
  --color-nappy-badge-neutral-fg: #8A8073;
  --color-nappy-badge-large-bg: #F3E6D2;
  --color-nappy-badge-large-fg: #8A6528;
  --color-nappy-badge-blowout-bg: #F8D9CE;
  --color-nappy-badge-blowout-fg: var(--color-danger);

  /* Feed Insights chart only — breast reuses --color-event-feed (the app's
     existing feed color), formula/expressed add the two tones the design
     calls for to tell a stacked bottle bar's segments apart. */
  --color-feed-formula: #D97B4F;
  --color-feed-expressed: #C9A45C;
  --color-feed-text-breast: #A6602F;
  --color-feed-text-formula: #A14E22;
  --color-feed-text-expressed: #80651F;
  --color-feed-hero-caption: #B5652F;
  --color-pump-text: #9A5031;

  /* Soft tints of the event colors above, used for card backgrounds so the
     interface stays calm rather than fully saturated; recomputed against a
     dark base below so the same hues carry through in dark mode. */
  --card-bg-nappy: color-mix(in srgb, var(--color-event-nappy) 20%, var(--color-surface));
  --card-bg-feed: color-mix(in srgb, var(--color-event-feed) 20%, var(--color-surface));
  --card-bg-pump: color-mix(in srgb, var(--color-event-pump) 20%, var(--color-surface));
  --card-bg-bath: color-mix(in srgb, var(--color-event-bath) 20%, var(--color-surface));
  --card-bg-sleep: color-mix(in srgb, var(--color-event-sleep) 20%, var(--color-surface));
  --card-bg-observation: color-mix(in srgb, var(--color-event-observation) 20%, var(--color-surface));
  --card-bg-temperature: color-mix(in srgb, var(--color-event-health) 18%, var(--color-surface));
  --card-bg-growth: color-mix(in srgb, var(--color-event-weight) 20%, var(--color-surface));

  --navbar-bg: rgba(255, 253, 250, 0.82);
  --navbar-border: rgba(58, 51, 38, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1B1712;
    --color-surface: #26211A;
    --color-bg-secondary: color-mix(in srgb, var(--color-teal) 10%, #1B1712);

    --color-text-primary: #F2ECE3;
    --color-text-secondary: #BDB2A2;
    --color-text-muted: #8A8074;
    --color-heading: color-mix(in srgb, var(--color-blue) 75%, white);
    --color-growth-callout: #9CBF82;
    --color-nappy-text-wee: var(--color-event-nappy);
    --color-nappy-text-poo: #C6A474;
    --color-nappy-text-mixed: var(--color-nappy-mixed);
    --color-nappy-large: #C9A45C;
    --color-nappy-badge-neutral-bg: color-mix(in srgb, var(--color-text-muted) 22%, #1B1712);
    --color-nappy-badge-neutral-fg: #C9BEB0;
    --color-nappy-badge-large-bg: color-mix(in srgb, var(--color-nappy-large) 30%, #1B1712);
    --color-nappy-badge-large-fg: #D9B87A;
    --color-nappy-badge-blowout-bg: color-mix(in srgb, var(--color-danger) 30%, #1B1712);
    --color-nappy-badge-blowout-fg: #F2A98F;
    --color-feed-text-breast: var(--color-event-feed);
    --color-feed-text-formula: #E2A579;
    --color-feed-text-expressed: var(--color-feed-expressed);
    --color-feed-hero-caption: var(--color-event-feed);
    --color-pump-text: var(--color-event-pump);

    --color-border: rgba(237, 226, 214, 0.1);

    --card-bg-nappy: color-mix(in srgb, var(--color-event-nappy) 28%, #1B1712);
    --card-bg-feed: color-mix(in srgb, var(--color-event-feed) 28%, #1B1712);
    --card-bg-pump: color-mix(in srgb, var(--color-event-pump) 28%, #1B1712);
    --card-bg-bath: color-mix(in srgb, var(--color-event-bath) 28%, #1B1712);
    --card-bg-sleep: color-mix(in srgb, var(--color-event-sleep) 28%, #1B1712);
    --card-bg-observation: color-mix(in srgb, var(--color-event-observation) 28%, #1B1712);
    --card-bg-temperature: color-mix(in srgb, var(--color-event-health) 30%, #1B1712);
    --card-bg-growth: color-mix(in srgb, var(--color-event-weight) 30%, #1B1712);

    --navbar-bg: rgba(27, 23, 18, 0.82);
    --navbar-border: rgba(237, 226, 214, 0.1);
  }
}

/* The dialog's step switching relies on toggling [hidden] on elements that
   also carry their own `display` (grid/flex) from rules below; without this,
   the more specific author rule would beat the UA's `[hidden] { display:
   none }` and the element would stay visible. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 1rem 1rem 6rem;
  max-width: 480px;
  margin-inline: auto;
  background: var(--color-bg);
  color: var(--color-text-primary);
}

:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Intro (public landing page) — matches the "Yauli Landing" Claude Design
   handoff (2026-07-21). The phone-mockup and growth-chart teaser below are
   fixed illustrative graphics (like an embedded screenshot), not live data,
   so they intentionally use the mockup's literal hex values rather than the
   app's light/dark tokens — the rest of the page (nav, headings, body text)
   still rides the shared tokens and follows the system color scheme. */

.intro-body {
  max-width: none;
  min-height: 100vh;
  padding: 0;
  background: var(--color-bg);
}

.intro-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.intro-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
}

.intro-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.intro-logo {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

.intro-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8125rem;
  letter-spacing: -0.02em;
}

.intro-nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.intro-nav-links {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.intro-nav-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.intro-nav-links a:hover {
  color: var(--color-text-primary);
}

@media (max-width: 700px) {
  .intro-nav-links {
    display: none;
  }
}

.intro-sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.375rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-heading);
  background: var(--color-surface);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.intro-main {
  max-width: none;
}

.intro-hero-section {
  background: var(--color-bg-secondary);
}

.intro-hero {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
  padding: 5rem 1.5rem 6rem;
}

.intro-hero-copy {
  flex: 1 1 420px;
  min-width: min(300px, 100%);
}

.intro-hero-visual {
  flex: 1 1 340px;
  min-width: min(280px, 100%);
  display: flex;
  justify-content: center;
}

.intro-kicker {
  width: fit-content;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--card-bg-nappy);
  color: var(--color-heading);
  font-size: 0.8125rem;
  font-weight: 700;
}

.intro-hero h1 {
  max-width: 480px;
  margin: 0 0 1.5rem;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.intro-copy {
  max-width: 480px;
  margin: 0 0 2.25rem;
  color: var(--color-text-secondary);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.intro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.intro-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-teal) 88%, white), var(--color-teal) 70%);
  color: white;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-teal) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.intro-primary:active {
  background: color-mix(in srgb, var(--color-teal) 82%, black);
}

.intro-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 2px solid var(--color-teal);
}

@keyframes introBounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.intro-secondary-arrow {
  display: inline-block;
  animation: introBounceDown 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .intro-secondary-arrow {
    animation: none;
  }
}

/* Hero phone mockup */

.intro-phone {
  box-sizing: border-box;
  width: min(280px, 100%);
  height: 560px;
  border-radius: 44px;
  background: linear-gradient(160deg, #2E2A26, #221E1A);
  padding: 14px;
  box-shadow: 0 40px 80px rgba(58, 51, 38, 0.22), 0 8px 20px rgba(58, 51, 38, 0.15);
}

.intro-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: #FAF6F1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.intro-phone-header {
  padding: 18px 18px 10px;
  border-bottom: 1px solid #F0E7DA;
  background: #FFFDFA;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #3A332C;
}

.intro-phone-kpis {
  display: flex;
  margin: 14px 18px 8px;
  padding: 14px 12px;
  border-radius: 14px;
  background: #E4EEF6;
}

.intro-phone-kpi {
  flex: 1;
  padding: 0 6px;
  border-left: 1px solid rgba(58, 79, 96, 0.16);
}

.intro-phone-kpi:first-child {
  padding-left: 0;
  border-left: 0;
}

.intro-phone-kpi strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #3A332C;
  line-height: 1;
}

.intro-phone-kpi span {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.intro-phone-kpi-feed span { color: #8F5A2B; }
.intro-phone-kpi-sleep span { color: #6E4E96; }
.intro-phone-kpi-pump span { color: #D6A339; }
.intro-phone-kpi-nappy span { color: #9C7A4E; }

.intro-phone-kpi .intro-phone-kpi-detail {
  display: block;
  margin-top: 4px;
  color: #5C6B7A;
  font-size: 7.5px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

.intro-phone-events {
  flex: 1;
  padding: 6px 18px 16px;
  overflow: hidden;
  text-align: left;
}

.intro-phone-event {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
}

.intro-phone-event-last {
  padding-bottom: 0;
}

.intro-phone-marker-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-phone-marker {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px #FAF6F1;
}

.intro-phone-marker svg {
  width: 16px;
  height: 16px;
}

.intro-phone-marker-feed { background: #DCEAF6; color: #E8A87C; }
.intro-phone-marker-sleep { background: #EDE4F5; color: #B99BD1; }
.intro-phone-marker-nappy { background: #EDE1D1; color: #9C7A4E; }
.intro-phone-marker-growth { background: #E4EFD9; color: #7FA65C; }

.intro-phone-connector {
  width: 2px;
  flex: 1;
  min-height: 18px;
  margin-top: 2px;
  background: var(--color-border);
}

.intro-phone-event-title {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  color: #3A332C;
}

.intro-phone-event-title span {
  font-weight: 600;
  color: #6B7280;
}

.intro-phone-event-time {
  margin: 0;
  font-size: 11.5px;
  color: #5C6B7A;
}

.intro-phone-status-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-danger) 22%, var(--color-surface));
  color: var(--color-danger);
  font-size: 10.5px;
  font-weight: 700;
}

/* Insights detail sections */

.intro-insight-section {
  padding-block: 5.5rem;
}

.intro-insight-section-tint {
  background: var(--color-bg-secondary);
}

.intro-insight-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.intro-insight-intro {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.intro-insight-intro h2 {
  margin: 0 0 0.875rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.intro-insight-intro p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.intro-insight-icon {
  width: 2.375rem;
  height: 2.375rem;
  margin: 0 auto 0.875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-insight-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.intro-insight-icon-sleep { background: var(--card-bg-sleep); color: var(--color-event-sleep); }
.intro-insight-icon-feed { background: var(--card-bg-feed); color: var(--color-event-feed); }
.intro-insight-icon-nappy { background: #EDE1D1; color: #9C7A4E; }
.intro-insight-icon-growth { background: #E4EFD9; color: #7FA65C; }

.intro-insight-card {
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 1.75rem 1.625rem;
  box-shadow: 0 16px 40px rgba(58, 51, 38, 0.08);
}

/* 29 daily columns need to stay proportional rather than triggering the
   30-day chart's fixed-width scroll behavior, since this teaser has no
   scroll affordance to discover it by. .insights-chart-adaptive carries no
   gap of its own (only the 7/30/90-day variants do), so it's set here too. */
.intro-insight-card .insights-bar-col {
  min-width: 3px;
}

.intro-insight-card .insights-chart {
  height: 160px;
  gap: 4px;
}

.intro-insight-card .insights-bar {
  border-radius: 4px 4px 0 0;
}

.intro-insight-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* Coming soon */

.intro-coming-soon {
  padding-block: 5.5rem 6rem;
}

.intro-coming-soon-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 1.5rem;
  text-align: center;
}

.intro-coming-soon-inner h2 {
  margin: 0 0 2.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.intro-coming-soon-card {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  text-align: left;
}

.intro-coming-soon-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.intro-coming-soon-item .intro-feature-icon {
  flex: 0 0 auto;
}

.intro-coming-soon-item h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.intro-coming-soon-item p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.intro-feature-icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-feature-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.intro-feature-icon-blue { background: #DCEAF6; color: var(--color-blue); }
.intro-feature-icon-coral { background: #FBE6DC; color: var(--color-coral); }
.intro-feature-icon-teal { background: var(--card-bg-nappy); color: var(--color-teal); }

.intro-soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-warning) 24%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 55%, var(--color-text-primary));
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* CTA banner + footer */

.intro-cta-banner {
  box-sizing: border-box;
  width: calc(100% - 3rem);
  max-width: 1132px;
  margin: 0 auto 6rem;
  padding: 4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border-radius: 32px;
  background: linear-gradient(160deg, #2E2A26, #221E1A);
  box-shadow: 0 30px 60px rgba(33, 29, 25, 0.25);
}

.intro-cta-banner h2 {
  margin: 0 0 0.75rem;
  color: #FFFDFA;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.intro-cta-banner p {
  margin: 0;
  color: #C9C0B2;
  font-size: 1rem;
  line-height: 1.6;
}

.intro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

.intro-footer-logo {
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  object-fit: contain;
}

.intro-footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
}

.intro-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
}

.intro-copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .intro-hero {
    text-align: center;
  }

  .intro-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .intro-hero h1,
  .intro-copy {
    max-width: 480px;
  }

  .intro-cta-banner {
    justify-content: center;
    text-align: center;
    padding: 3rem 1.75rem;
  }

  .intro-footer {
    justify-content: center;
    text-align: center;
  }
}

/* Navbar */

.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -1rem -1rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--navbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--navbar-border);
}

.navbar-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

/* Sized to match the Claude Design mockup exactly: 40px mark / 20px
   wordmark on mobile, 56px / 28px on the desktop layout below. */
.navbar-logo-image {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  display: block;
}

.navbar-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
}

.navbar-wordmark-yau {
  color: var(--color-blue);
}

.navbar-wordmark-li {
  color: var(--color-coral);
}

/* Hidden below 900px — Insights/Timeline live in the account menu instead
   (see .account-menu-panel), matching the mobile design's single hamburger
   entry point rather than a second, separate nav bar. Lives inside
   .navbar-actions (not directly in .navbar) so it sits right next to the
   avatar, right-aligned as one group, rather than beside the logo. */
.navbar-links {
  display: none;
}

@media (min-width: 900px) {
  .navbar-links {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    margin-right: 0.5rem;
    flex: 0 0 auto;
  }

  .navbar-link {
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
  }

  .navbar-link:hover {
    color: var(--color-heading);
  }
}

.navbar-actions {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

.navbar-actions form {
  margin: 0;
}

.account-menu {
  min-width: 0;
  width: auto;
  position: relative;
}

.account-menu summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu summary:hover {
  background: color-mix(in srgb, var(--color-teal) 16%, var(--color-bg-secondary));
  color: var(--color-heading);
}

.account-menu[open] summary {
  background: color-mix(in srgb, var(--color-teal) 16%, var(--color-bg-secondary));
  color: var(--color-heading);
}

.account-menu summary:active {
  transform: scale(0.97);
}

.account-avatar-initial {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 480px) {
  .navbar {
    gap: 0.5rem;
  }

  .account-menu summary {
    width: 2.2rem;
    height: 2.2rem;
  }

  .account-avatar-initial {
    font-size: 0.85rem;
  }
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 0.2rem;
  /* Wide enough that a typical email address (e.g.
     "andreistefanciprian@gmail.com") fits the identity block's own padding
     on one line instead of wrapping to two. */
  width: min(17.5rem, calc(100vw - 2rem));
  padding: 0.45rem 0;
  border: none;
  border-radius: 0.875rem;
  background: var(--color-surface);
  box-shadow: 0 20px 40px rgba(58, 51, 38, 0.16);
}

.account-menu-identity {
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem 1rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.2rem;
}

.account-menu-label {
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.account-menu-email {
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 750;
}

.account-menu-context {
  margin-top: 0.18rem;
  color: var(--color-heading);
  font-size: 0.82rem;
  font-weight: 700;
}

.account-menu-panel a,
.account-menu-panel button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.35rem;
  border: 0;
  border-radius: 0.4rem;
  padding: 0 1rem;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-panel a:hover,
.account-menu-panel button:hover {
  background: var(--color-bg-secondary);
  color: var(--color-heading);
}

.account-menu-divider {
  height: 1px;
  margin: 0.3rem 0.75rem;
  background: var(--color-border);
}

.navbar-text-button {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-heading);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.navbar-text-button:hover {
  background: var(--color-bg-secondary);
}

.navbar-text-button:active {
  transform: scale(0.96);
}

.page-header {
  margin-bottom: 1rem;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-heading);
}

h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-heading);
}

/* Invite */

.invite-section {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-surface);
}

.invite-section h2 {
  font-size: 1rem;
  margin-bottom: 0.7rem;
}

.invite-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.6rem;
}

.invite-form button[type="submit"] {
  padding: 0.6rem 0.85rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--color-teal);
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.invite-form button[type="submit"]:active {
  background: color-mix(in srgb, var(--color-teal) 82%, black);
}

.invite-message,
.invite-error {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
}

.invite-message {
  color: var(--color-success);
}

.invite-error {
  color: var(--color-danger);
}

@media (max-width: 360px) {
  .invite-form {
    grid-template-columns: 1fr;
  }
}

/* Settings */

.baby-workspace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.baby-workspace-header h1 {
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.2;
}

.baby-header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.settings-link {
  flex: 0 0 auto;
  padding: 0.3rem 0.1rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 400;
  text-decoration: none;
}

.settings-link:hover,
.settings-link:focus-visible {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.timeline-filters {
  margin: 0 0 0.9rem;
}

.timeline-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.65rem;
  border: none;
  padding: 0.2rem 0.1rem;
  background: none;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.timeline-filters-toggle:hover,
.timeline-filters-toggle[aria-expanded="true"] {
  color: var(--color-heading);
}

.timeline-filters-toggle .chevron {
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.timeline-filters-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.timeline-filters-body {
  margin-top: 0.6rem;
}

.range-nav {
  display: flex;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.range-pill {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.range-pill.active {
  background: var(--color-teal);
  color: white;
}

.range-pill:not(.active):hover {
  background: var(--color-bg-secondary);
}

.type-filter {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.type-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.type-filter-chip.active {
  opacity: 1;
}

.type-filter-chip:hover {
  opacity: 0.8;
}

.type-filter-chip.active:hover {
  opacity: 1;
}

.type-filter-chip-all {
  width: auto;
  height: 1.8rem;
  border-radius: 999px;
  padding: 0 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  opacity: 1;
}

.type-filter-chip .event-type-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* The label/swatch below only appear in the desktop sidebar's list-row
   filter treatment; the mobile icon-only circle chips stay unlabeled,
   except the "All" chip, which has always shown its text. */
.filter-section-label,
.type-filter-swatch,
.type-filter-chip-label {
  display: none;
}

.type-filter-chip-all .type-filter-chip-label {
  display: inline;
}

.type-filter-chip[data-filter-type="nappy"] { background: var(--card-bg-nappy); }
.type-filter-chip[data-filter-type="feed"] { background: var(--card-bg-feed); }
.type-filter-chip[data-filter-type="pump"] { background: var(--card-bg-pump); }
.type-filter-chip[data-filter-type="bath"] { background: var(--card-bg-bath); }
.type-filter-chip[data-filter-type="sleep"] { background: var(--card-bg-sleep); }
.type-filter-chip[data-filter-type="observation"] { background: var(--card-bg-observation); }
.type-filter-chip[data-filter-type="temperature"] { background: var(--card-bg-temperature); }
.type-filter-chip[data-filter-type="growth_measurement"] { background: var(--card-bg-growth); }

.type-filter-chip[data-filter-type="nappy"] .event-type-icon { color: var(--color-event-nappy); }
.type-filter-chip[data-filter-type="feed"] .event-type-icon { color: var(--color-event-feed); }
.type-filter-chip[data-filter-type="pump"] .event-type-icon { color: var(--color-event-pump); }
.type-filter-chip[data-filter-type="bath"] .event-type-icon { color: var(--color-event-bath); }
.type-filter-chip[data-filter-type="sleep"] .event-type-icon { color: var(--color-event-sleep); }
.type-filter-chip[data-filter-type="observation"] .event-type-icon { color: var(--color-event-observation); }
.type-filter-chip[data-filter-type="temperature"] .event-type-icon { color: var(--color-event-health); }
.type-filter-chip[data-filter-type="growth_measurement"] .event-type-icon { color: var(--color-event-weight); }

.type-filter-chip-all.active {
  background: var(--color-teal);
  color: white;
}

.settings-section {
  margin-bottom: 1.1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1.125rem;
  background: var(--color-surface);
}

/* Hidden on mobile — a jump-link nav isn't useful on a page you just
   scroll through; the header's own "Back" link (hidden below at desktop)
   covers that case instead. */
.settings-sidebar {
  display: none;
}

.settings-back-link {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.settings-back-link:hover {
  color: var(--color-heading);
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.settings-nav a {
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  color: var(--color-text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.settings-nav a:hover {
  background: var(--color-bg-secondary);
}

.settings-nav a.settings-nav-danger {
  color: var(--color-danger);
}

@media (min-width: 900px) {
  .settings-sidebar {
    display: block;
  }

  .settings-header-back {
    display: none;
  }

  .settings-content {
    max-width: 40rem;
  }
}

.settings-section h2 {
  margin-bottom: 0.75rem;
}

.settings-summary-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.settings-summary-list div {
  display: grid;
  gap: 0.2rem;
}

.settings-summary-list dt {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.settings-summary-list dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.settings-form {
  display: grid;
  gap: 0.75rem;
}

.settings-form button {
  min-height: 2.55rem;
  border: 0;
  border-radius: 0.5rem;
  padding: 0 0.9rem;
  color: white;
  background: var(--color-teal);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.settings-form button:disabled {
  cursor: default;
  opacity: 0.45;
}

.settings-form .danger-button {
  background: var(--color-danger);
}

.danger-section {
  border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border));
}

.settings-message,
.settings-empty {
  margin: 0 0 0.85rem;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
}

.timeline-notice {
  display: grid;
  gap: 0.65rem;
  margin: 0 auto 1rem;
  max-width: 720px;
  padding: 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
}

.timeline-notice p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.timeline-notice a {
  color: var(--color-blue);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.daily-report {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 1.2rem 1.25rem 1.15rem;
  border: 0;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-blue) 14%, var(--color-surface));
  box-shadow: 0 8px 22px rgba(58, 51, 38, 0.06);
}

.daily-report h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 750;
}

.daily-report-metrics {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.daily-report-metric {
  display: grid;
  /* Let each metric's content set its preferred width, while allowing every
     column to grow or shrink with the available screen width. */
  flex: 1 1 auto;
  align-content: start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0 0.5rem;
  border-left: 1px solid color-mix(in srgb, var(--color-blue) 25%, transparent);
}

.daily-report-metric:first-child {
  padding-left: 0;
  border-left: 0;
}

.daily-report-metric:last-child {
  padding-right: 0;
}

.daily-report-metric-count {
  overflow: hidden;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-report-metric-label {
  overflow: hidden;
  color: var(--color-blue);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.daily-report-metric-feed .daily-report-metric-label {
  color: var(--color-event-feed);
}

.daily-report-metric-sleep .daily-report-metric-label {
  color: var(--color-event-sleep);
}

.daily-report-metric-pump .daily-report-metric-label {
  color: var(--color-event-pump);
}

.daily-report-metric-nappy .daily-report-metric-label {
  color: var(--color-event-nappy);
}

.daily-report-metric-detail {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .daily-report {
    padding-inline: 1rem;
  }

  .daily-report-metric {
    padding-inline: 0.25rem;
  }

  .daily-report-metric:first-child {
    padding-left: 0;
  }

  .daily-report-metric:last-child {
    padding-right: 0;
  }

  .daily-report-metric-detail {
    font-size: 0.64rem;
  }
}

.member-list {
  display: grid;
  gap: 0.8rem;
}

.member-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--color-border);
}

.member-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.member-main {
	min-width: 0;
}

.member-details {
	display: grid;
	min-width: 0;
	gap: 0.75rem;
}

.member-danger-action {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.1rem;
}

.member-email {
	margin: 0;
	color: var(--color-text-primary);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
}

.member-meta span,
.member-state {
  width: fit-content;
  margin: 0;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
}

.relationship-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.55rem;
}

.relationship-form button,
.danger-text-button {
  min-height: 2.35rem;
  border-radius: 0.5rem;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.relationship-form button {
  border: 0;
  color: white;
  background: var(--color-teal);
}

.relationship-form button:disabled {
  cursor: default;
  opacity: 0.45;
}

.member-action-form {
  margin: 0;
}

.danger-text-button {
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
  color: var(--color-danger);
  background: var(--color-surface);
}

@media (max-width: 420px) {
	.member-row {
		grid-template-columns: 1fr;
	}

	.member-danger-action {
		justify-content: flex-start;
	}

	.relationship-form {
		grid-template-columns: 1fr;
	}
}

/* Timeline — connecting-line activity feed. Each event is a row: a
   right-aligned time column, an icon-marker + connecting-line column, and a
   content column. Markers keep the existing multi-tone SVG icon partials
   (nappy-icon, feed-icon, etc.) rather than the mockup's single-tone
   placeholder icons, since those partials draw with hardcoded fill/stroke
   colors rather than currentColor and can't be recolored white-on-dot; the
   marker circle is tinted with the event's soft --card-bg-* instead. */

.events-heading {
  margin: 1.25rem 0 0.9rem;
}

.timeline-section {
  background: transparent;
  padding: 0;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.event-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.event-card:active {
  transform: scale(0.995);
}

.event-card-open {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  border-radius: 0.75rem;
}

/* Pseudo-element instead of a background on the row itself, so the hover
   tint can extend past the row's own box without adding padding/margin
   to it — that would break the continuous connector line, which relies
   on adjacent rows having zero gap between them. Pulled up above the
   row's top edge so it reaches a bit over the upper side of the marker
   icon instead of stopping flush at (or below) it.
   z-index:-1 (plus the z-index:0 above, to contain it) keeps it behind
   the row's own content — an absolutely positioned element paints above
   normal in-flow siblings by default, even at z-index:auto. */
.event-card-open::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.4rem;
  right: 0;
  bottom: 0.35rem;
  left: 0;
  border-radius: 0.75rem;
  background: transparent;
  transition: background 0.12s ease;
  pointer-events: none;
}

.event-card-open:hover::before {
  background: var(--color-bg-secondary);
}

.event-card-open:hover .event-marker {
  box-shadow: 0 0 0 4px var(--color-bg-secondary);
}

.event-card-open:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-teal) 45%, transparent);
  outline-offset: 4px;
}

/* A column, not a single line, so a historical day's longer "Jul 16, 11:00
   AM" label stacks the date above the clock instead of overflowing this
   fixed-width column the way a single nowrap line would. */
.event-time {
  display: flex;
  flex: 0 0 3.75rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  padding-top: 0.2rem;
  white-space: nowrap;
}

.event-time-date {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.event-time-clock {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.event-marker-col {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
}

.event-marker {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--color-bg);
}

.event-connector {
  flex: 1 1 auto;
  width: 2px;
  min-height: 0.75rem;
  margin: 0.15rem 0;
  background: var(--color-border);
}

.event-card:last-child .event-connector {
  display: none;
}

.event-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 1.5rem;
}

.event-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.3rem;
  font-weight: 700;
}

.event-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.event-type-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.event-marker .event-type-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.event-kind {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.nappy-detail-icons,
.nappy-option-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  vertical-align: -0.16em;
}

.nappy-detail-icons svg,
.nappy-option-icon svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.event-inline-detail {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.event-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}

.event-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.event-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 22%, var(--color-surface));
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 700;
}

.event-quick-action button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-coral) 32%, var(--color-surface));
  color: color-mix(in srgb, var(--color-coral) 78%, black);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  -webkit-tap-highlight-color: transparent;
}

.event-quick-action button:active {
  background: color-mix(in srgb, var(--color-coral) 44%, var(--color-surface));
  transform: scale(0.98);
}

.event-nappy .event-marker { background: var(--card-bg-nappy); color: var(--color-event-nappy); }
.event-feed .event-marker { background: var(--card-bg-feed); color: var(--color-event-feed); }
.event-pump .event-marker { background: var(--card-bg-pump); color: var(--color-event-pump); }
.event-bath .event-marker { background: var(--card-bg-bath); color: var(--color-event-bath); }
.event-sleep .event-marker { background: var(--card-bg-sleep); color: var(--color-event-sleep); }
.event-observation .event-marker { background: var(--card-bg-observation); color: var(--color-event-observation); }
.event-temperature .event-marker { background: var(--card-bg-temperature); color: var(--color-event-health); }
.event-growth .event-marker { background: var(--card-bg-growth); color: var(--color-event-weight); }

.empty {
  color: var(--color-text-muted);
}

@media (max-width: 420px) {
  .event-time {
    flex-basis: 3.1rem;
  }

  .event-time-clock {
    font-size: 0.72rem;
  }

  .event-time-date {
    font-size: 0.62rem;
  }
}

/* Add Event floating button */

.fab {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-teal) 88%, white), var(--color-teal) 70%);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-teal) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.fab:active {
  background: color-mix(in srgb, var(--color-teal) 82%, black);
}

.fab-plus {
  font-size: 1.3rem;
  line-height: 1;
}

/* Add Event and Edit Event dialogs (same bottom-sheet treatment) */

dialog#add-event-dialog,
dialog#edit-event-dialog {
  position: fixed;
  inset: auto 0 0 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  margin: 0;
  border: none;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0;
  max-height: 85vh;
  /* Mobile Safari's legacy vh is based on the larger layout viewport, so
     the sheet can extend behind the browser chrome even though it is capped
     at 85vh. Use the currently visible viewport where supported. */
  max-height: 85dvh;
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 -8px 30px rgba(58, 51, 38, 0.18);
}

dialog#add-event-dialog::backdrop,
dialog#edit-event-dialog::backdrop {
  background: rgba(58, 51, 38, 0.35);
}

/* Event quick-view — shown on row click, ahead of the full edit form. A
   bottom sheet on mobile like the other dialogs, but a centered modal at
   the desktop breakpoint, matching the mockup's own split (its other
   dialogs stay bottom sheets at every width; only this one is
   width-dependent). */
dialog#event-quickview-dialog {
  position: fixed;
  inset: auto 0 0 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 32.5rem;
  margin: 0;
  border: none;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 -12px 32px rgba(58, 51, 38, 0.16);
}

dialog#event-quickview-dialog::backdrop {
  background: rgba(58, 51, 38, 0.35);
}

@media (min-width: 900px) {
  dialog#event-quickview-dialog {
    inset: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 23.75rem;
    max-height: none;
    border-radius: 1.25rem;
    box-shadow: 0 16px 40px rgba(58, 51, 38, 0.16);
  }
}

.quickview-content {
  padding: 1.5rem 1.375rem 1.75rem;
}

.quickview-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.quickview-marker-wrap .event-marker {
  width: 2rem;
  height: 2rem;
  box-shadow: none;
}

.quickview-marker-wrap .event-type-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.quickview-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.quickview-time {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

.quickview-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.quickview-actions {
  display: flex;
  gap: 0.625rem;
}

.quickview-edit-button,
.quickview-delete-button {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 0.75rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.quickview-edit-button {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.quickview-edit-button:active {
  background: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-bg-secondary));
}

.quickview-delete-button {
  background: color-mix(in srgb, var(--color-danger) 18%, var(--color-surface));
  color: var(--color-danger);
}

.quickview-delete-button:active {
  background: color-mix(in srgb, var(--color-danger) 28%, var(--color-surface));
}

/* Padding lives here, not on the dialog itself, so every pixel a user can
   tap while the sheet is open lands on this element (or its children) —
   only a real backdrop click ever reaches the dialog element's own click
   handler in app.js. */
.dialog-content {
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dialog-header h2 {
  flex: 1;
  font-size: 1.125rem;
  text-align: center;
}

.dialog-error {
  margin: -0.5rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
  font-size: 0.88rem;
}

.back-button,
.icon-button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.icon-button {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  color: var(--color-text-primary);
}

.event-type-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

/* No border, per the mockup — each card reads by its tinted background
   alone, not an outline. */
.type-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0.75rem;
  border: none;
  border-radius: 1rem;
  background: none;
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

.type-choice-icon {
  font-size: 1.75rem;
}

.type-choice-icon.event-type-icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

.type-choice-nappy {
  background: var(--card-bg-nappy);
}

.type-choice-nappy .type-choice-icon {
  color: var(--color-event-nappy);
}

.type-choice-feed {
  background: var(--card-bg-feed);
}

.type-choice-feed .type-choice-icon {
  color: var(--color-event-feed);
}

.type-choice-pump {
  background: var(--card-bg-pump);
}

.type-choice-pump .type-choice-icon {
  color: var(--color-event-pump);
}

.type-choice-bath {
  background: var(--card-bg-bath);
}

.type-choice-bath .type-choice-icon {
  color: var(--color-event-bath);
}

.type-choice-sleep {
  background: var(--card-bg-sleep);
}

.type-choice-sleep .type-choice-icon {
  color: var(--color-event-sleep);
}

.type-choice-observation {
  background: var(--card-bg-observation);
}

.type-choice-observation .type-choice-icon {
  color: var(--color-event-observation);
}

.type-choice-temperature {
  background: var(--card-bg-temperature);
}

.type-choice-temperature .type-choice-icon {
  color: var(--color-event-health);
}

.type-choice-growth {
  background: var(--card-bg-growth);
}

.type-choice-growth .type-choice-icon {
  color: var(--color-event-weight);
}

/* Event forms (one shown at a time inside the dialog) */

.event-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

fieldset legend {
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

fieldset label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}

fieldset:disabled {
  opacity: 0.55;
}

.label-chip-group {
  gap: 0.5rem;
}

.label-chip-group label {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.label-chip-group label:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-teal) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-teal) 12%, var(--color-surface));
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.event-form .field-label {
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
}

.checkbox-row input {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Pairs two fields (e.g. Type + Amount, Duration + Time) on one row; wraps
   to stacked rows on narrow screens rather than forcing an overflow. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.field-row > * {
  flex: 1 1 160px;
  min-width: 160px;
}

.field-row > fieldset {
  flex: 1.3 1 200px;
}

.sleep-time-fields {
  display: grid;
  gap: 0.65rem;
}

/* Date always reads before time, matching how a timestamp is displayed
   everywhere else in the app (the timeline's own event-time-date comes
   before event-time-clock) — every event form should read the same way,
   whether it's a simple point-in-time event (this rule) or a duration event
   with Started/Finished pairs (.sleep-time-pair below, already date-first).
   The markup order is still time-then-date (unchanged, so nothing else that
   depends on it breaks); only the visual order is flipped via `order`, the
   same technique .grouped-edit-time-fields already relied on. */
.event-occurred-at-fields,
.edit-occurred-at-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.8fr);
  gap: 0.5rem;
}

.event-occurred-at-fields .field-label:first-of-type,
.edit-occurred-at-fields .field-label:first-of-type {
  order: 2;
}

.event-occurred-at-fields .field-label:last-of-type,
.edit-occurred-at-fields .field-label:last-of-type {
  order: 1;
}

.event-occurred-at-fields .field-label,
.edit-occurred-at-fields .field-label {
  min-width: 0;
}

.event-occurred-at-fields input,
.edit-occurred-at-fields input,
.sleep-time-pair input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Column proportions and the time/date visual order already come from the
   base .edit-occurred-at-fields rule above — grouped types only need the
   tighter row gap (there's a label row above the pair now) and the
   Started/Finished label spanning both columns. */
.grouped-edit-time-fields {
  gap: 0.25rem 0.5rem;
}

.grouped-edit-time-fields .edit-occurred-at-label {
  grid-column: 1 / -1;
  font-weight: 600;
}

.grouped-edit-time-fields .field-label > span {
  display: none;
}

.sleep-time-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.8fr);
  gap: 0.5rem;
}

.sleep-duration-preview {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Event dialog form fields, sized exactly like the Claude Design mockup
   (14px, 12px/14px padding, 10px radius) — scoped to .event-form rather
   than the shared global input rule below, since Settings/Login already
   match their own, differently-sized mockups and shouldn't drift when this
   one changes. */
.event-form input[type="text"],
.event-form input[type="number"],
.event-form input[type="date"],
.event-form input[type="time"],
.event-form select,
.event-form textarea {
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
}

.event-form .number-slider-input {
  flex-basis: 4rem;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 18%, transparent);
}

select {
  min-height: 2.45rem;
  padding-right: 2rem;
}

/* Chrome/Firefox/Edge on desktop render the dropdown list using each
   option's own background/color; without this they default to plain
   black-on-white regardless of the select's own theming above. Mobile
   Safari/Chrome show a native picker sheet that ignores this either way. */
select option {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-teal);
}

.number-stepper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.number-stepper input[type="number"] {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.number-stepper-button {
  min-width: 3.2rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-heading);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.number-stepper-button:active {
  background: var(--color-bg-secondary);
  transform: scale(0.97);
}

.number-slider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.number-slider-range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--color-teal);
}

.number-slider-input {
  flex: 0 0 5rem;
  min-width: 0;
  text-align: center;
}

.field-disabled {
  opacity: 0.58;
}

textarea {
  resize: vertical;
  min-height: 4rem;
}

.event-form button[type="submit"] {
  position: fixed;
  left: 50%;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 20;
  width: calc(100% - 2.5rem);
  max-width: 430px;
  transform: translateX(-50%);
  padding: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  border: none;
  border-radius: 0.75rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-teal) 88%, white), var(--color-teal) 70%);
  color: white;
  cursor: pointer;
  margin-top: 0.25rem;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-teal) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.event-form button[type="submit"]:active {
  background: color-mix(in srgb, var(--color-teal) 82%, black);
}

.event-form button[type="submit"]:disabled {
  cursor: default;
  opacity: 0.45;
}

.edit-event-actions {
  position: fixed;
  left: 50%;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  gap: 0.75rem;
  width: calc(100% - 2.5rem);
  max-width: 430px;
  transform: translateX(-50%);
}

.event-form .edit-event-actions button[type="submit"] {
  position: static;
  width: 100%;
  max-width: none;
  transform: none;
  margin: 0;
}

.event-form .edit-delete-button {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  border-radius: 0.75rem;
  background: var(--color-surface);
  color: var(--color-danger);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.event-form .edit-delete-button:active {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

#edit-event-form {
  padding-bottom: calc(8.5rem + env(safe-area-inset-bottom));
}

/* Keep form actions in the content flow on small viewports so they cannot
   cover time and date fields when the bottom sheet scrolls. The height
   condition covers phones used in landscape. */
@media (max-width: 720px), (max-height: 720px) {
  .event-form > button[type="submit"],
  .edit-event-actions {
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
  }

  .event-form,
  #edit-event-form {
    padding-bottom: 0;
  }
}

/* Auth (login / verify) */

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 7rem);
  padding: 2rem 1.5rem;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 26.25rem;
  margin: 0 auto 1.25rem;
}

.auth-brand-mark {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
}

.auth-brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.auth-card {
  width: 100%;
  max-width: 26.25rem;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: 1.75rem;
  box-shadow: 0 30px 70px rgba(58, 51, 38, 0.14), 0 4px 14px rgba(58, 51, 38, 0.06);
  padding: 2rem 2rem 2.25rem;
  text-align: center;
}

.auth-logo {
  height: 2.5rem;
  width: auto;
  margin-bottom: 0.75rem;
}

.login-logo {
  height: 110px;
  margin-bottom: 0.5rem;
}

.login-tagline {
  margin: 0 0 0.625rem;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth-subtitle {
  color: var(--color-text-secondary);
  margin: 0.35rem 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.auth-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.auth-trust-dot {
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background: var(--color-border);
}

.auth-error {
  color: var(--color-danger);
  margin: 0 0 1rem;
}

.auth-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-teal);
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.auth-form input[type="email"] {
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid var(--color-border);
  font-size: 0.9375rem;
}

.auth-form button[type="submit"] {
  padding: 0.9375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  border: none;
  border-radius: 0.75rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-teal) 88%, white), var(--color-teal) 70%);
  color: white;
  cursor: pointer;
  margin-top: 0.25rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-teal) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.auth-form button[type="submit"]:active {
  background: color-mix(in srgb, var(--color-teal) 82%, black);
}

/* Responsive desktop layout — the timeline app (day nav + type filter +
   daily report + event feed) becomes a sidebar-and-content layout on wide
   viewports instead of the single centered mobile column; everything below
   480px keeps today's stacked single-column behavior unchanged. */

.app-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  body:has(.app-layout) {
    max-width: 1180px;
    padding-inline: 2.5rem;
  }

  /* Full-bleed to the actual viewport edge, not just to the edge of the
     1180px-capped body — margin-inline: -2.5rem only cancelled the body's
     own padding, leaving the bar capped at 1180px like the content below
     it, when the mockup's navbar spans the whole screen at any width with
     only the content column constrained. calc(50% - 50vw) is the standard
     full-bleed-from-a-centered-container technique: it accounts for
     whatever margin centered the (already max-width-capped) body, rather
     than assuming a fixed offset. */
  .navbar {
    margin-inline: calc(50% - 50vw);
    padding-inline: 2.5rem;
    padding-block: 1.25rem;
  }

  .navbar-logo-image {
    width: 3.5rem;
    height: 3.5rem;
  }

  .navbar-wordmark {
    font-size: 1.75rem;
  }

  .app-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.25rem;
  }

  .app-sidebar {
    position: sticky;
    top: 5.5rem;
    flex: 0 0 15rem;
  }

  .app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .timeline-filters-toggle {
    display: none;
  }

  .timeline-filters-body[hidden] {
    display: block !important;
  }

  .timeline-filters-body {
    margin-top: 0;
  }

  .filter-section-label {
    display: block;
    margin: 0 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .filter-group + .filter-group {
    margin-top: 1.75rem;
  }

  .range-nav {
    flex-direction: column;
    gap: 0.25rem;
    overflow-x: visible;
  }

  .range-pill {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    border-radius: 0.6rem;
    padding: 0.6rem 0.85rem;
  }

  .type-filter {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.1rem;
    overflow-x: visible;
  }

  .type-filter-chip,
  .type-filter-chip-all {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 0.65rem;
    border-radius: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: transparent;
  }

  .type-filter-chip.active,
  .type-filter-chip-all.active {
    background: color-mix(in srgb, var(--color-teal) 16%, transparent);
    color: var(--color-heading);
  }

  .type-filter-chip[data-filter-type] {
    background: transparent;
  }

  .type-filter-chip .event-type-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
  }

  .type-filter-chip[data-filter-type="nappy"] .event-type-icon { background: var(--card-bg-nappy); }
  .type-filter-chip[data-filter-type="feed"] .event-type-icon { background: var(--card-bg-feed); }
  .type-filter-chip[data-filter-type="pump"] .event-type-icon { background: var(--card-bg-pump); }
  .type-filter-chip[data-filter-type="bath"] .event-type-icon { background: var(--card-bg-bath); }
  .type-filter-chip[data-filter-type="sleep"] .event-type-icon { background: var(--card-bg-sleep); }
  .type-filter-chip[data-filter-type="observation"] .event-type-icon { background: var(--card-bg-observation); }
  .type-filter-chip[data-filter-type="temperature"] .event-type-icon { background: var(--card-bg-temperature); }
  .type-filter-chip[data-filter-type="growth_measurement"] .event-type-icon { background: var(--card-bg-growth); }

  .type-filter-swatch {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--color-text-muted);
  }

  .type-filter-chip-label {
    display: inline;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .type-filter-chip-all.active .type-filter-chip-label {
    color: var(--color-heading);
  }

  .fab {
    order: -1;
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    align-self: flex-end;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--color-teal) 32%, transparent);
  }
}

/* Sleep Insights — one responsive layout for both breakpoints (Claude
   Design's "desktop"/"mobile" mockups differ only in type scale, card
   padding, and the selected-day metrics grid column count). */

@media (min-width: 900px) {
  body:has(.insights-page) {
    max-width: 1040px;
    padding-inline: 2.5rem;
  }
}

/* Mobile: heading on its own line, range control full-width below it (each
   pill sharing the row equally). Desktop: both share one row, pills sized
   to their own content on the right — matching the two Claude Design
   mockups exactly rather than trying to flex-wrap one shared layout. */
.insights-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.insights-header h1 {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.insights-category-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.insights-category-pill {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.insights-category-pill:hover {
  color: var(--color-heading);
}

.insights-category-pill.active {
  background: color-mix(in srgb, var(--color-teal) 20%, var(--color-surface));
  color: var(--color-heading);
}

/* Override the sidebar-oriented .range-nav/.range-pill rules (vertical list
   at desktop widths) with a horizontal segmented control at every width. */
.insights-range-nav {
  width: 100%;
  background: var(--color-bg-secondary);
  border-radius: 999px;
  padding: 0.25rem;
  margin: 0;
  overflow-x: visible;
}

.insights-range-nav .range-pill {
  flex: 1;
  width: auto;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-align: center;
}

.insights-range-nav .range-pill.active {
  background: var(--color-blue);
  color: #fffdfa;
}

@media (min-width: 900px) {
  .insights-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .insights-range-nav {
    width: auto;
    flex-direction: row;
  }

  .insights-range-nav .range-pill {
    flex: none;
    width: auto;
    padding: 0.5rem 1rem;
    border-radius: 999px;
  }
}

.insights-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 1.25rem 1.1rem;
}

.insights-card.htmx-request {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

@media (min-width: 900px) {
  .insights-card {
    border-radius: 20px;
    padding: 1.75rem 1.875rem;
  }
}

.insights-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.insights-hero-value {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.insights-hero-caption {
  margin-top: 0.5rem;
  color: var(--color-sleep-night);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.insights-hero-basis {
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.insights-range-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.insights-range-context {
  text-align: right;
}

.insights-records-begin {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

@media (min-width: 900px) {
  .insights-hero-value {
    font-size: 2.125rem;
  }
}

.insights-chart-frame {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.4rem;
}

.insights-chart-axis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 150px;
  /* Matches .insights-chart's own padding-top: a selected bar reaching the
     ceiling needs room above it for its outline to render without being
     clipped, and this keeps the axis's 0%-mark reference lined up with the
     bars' baseline once that headroom shifts the bar area down. */
  padding-top: 8px;
}

@media (min-width: 900px) {
  .insights-chart-axis {
    height: 190px;
  }
}

.insights-chart-axis-ticks {
  position: relative;
  flex: 1;
  width: 100%;
}

.insights-chart-axis-label {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(50%);
}

.insights-chart-axis-spacer {
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 9.5px;
}

@media (min-width: 900px) {
  .insights-chart-axis-label {
    font-size: 10px;
  }

  .insights-chart-axis-spacer {
    font-size: 10.5px;
  }
}

.insights-chart {
  display: flex;
  align-items: flex-end;
  height: 150px;
  margin-bottom: 0.5rem;
  /* Top: headroom so a selected bar at 100% height doesn't clip its own
     outline against the container edge. Sides: same, for the first/last
     bar's outline against the scroll container's edge. */
  padding: 8px 6px 2px;
  overflow-x: auto;
}

@media (min-width: 900px) {
  .insights-chart {
    height: 190px;
  }
}

.insights-chart-7 {
  gap: 0.375rem;
}

.insights-chart-30 {
  gap: 0.1875rem;
}

.insights-chart-90 {
  gap: 0.125rem;
}

@media (min-width: 900px) {
  .insights-chart-7 {
    gap: 0.625rem;
  }

  .insights-chart-30 {
    gap: 0.25rem;
  }
}

.insights-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 24px;
  flex: 1 1 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.insights-chart-30 .insights-bar-col,
.insights-chart-90 .insights-bar-col {
  flex: none;
}

.insights-chart-30 .insights-bar-col {
  width: 16px;
  min-width: 16px;
}

.insights-chart-90 .insights-bar-col {
  width: 7px;
  min-width: 7px;
}

@media (max-width: 899px) {
  .insights-chart-30 {
    gap: 0.125rem;
    overflow-x: hidden;
  }

  .insights-chart-30 .insights-bar-col {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 900px) {
  .insights-chart-7 .insights-bar-col {
    min-width: 32px;
  }

  .insights-chart-30 .insights-bar-col {
    width: 20px;
    min-width: 20px;
  }

  .insights-chart-90 .insights-bar-col {
    width: 8px;
    min-width: 8px;
  }
}

.insights-chart-adaptive .insights-bar-col {
  flex: 1 0 0;
  width: auto;
  max-width: 32px;
}

.insights-chart-scroll-hint {
  grid-column: 2;
  justify-self: start;
  margin-top: -0.45rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .insights-chart-adaptive .insights-bar-col {
    max-width: 40px;
  }
}

.insights-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.insights-bar {
  position: relative;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  outline: none;
  outline-offset: 2px;
}

.insights-bar-data {
  display: flex;
  flex-direction: column-reverse;
  min-height: 3px;
}

.insights-bar-data.selected {
  outline: 2px solid var(--color-blue);
}

.insights-bar-night {
  display: block;
  background: var(--color-sleep-night);
}

.insights-bar-nap {
  display: block;
  background: var(--color-sleep-nap);
}

.insights-bar-empty {
  height: 10%;
  min-height: 3px;
  border: 1px dashed var(--color-border);
  background: repeating-linear-gradient(45deg, var(--color-border), var(--color-border) 4px, var(--color-bg-secondary) 4px, var(--color-bg-secondary) 8px);
}

.insights-bar-empty.selected {
  outline: 2px solid var(--color-blue);
}

.insights-bar-label {
  min-height: 1.2em;
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 9.5px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .insights-bar-label {
    font-size: 10.5px;
  }
}

.insights-empty {
  padding: 2rem 0.5rem;
  text-align: center;
}

.insights-empty-title {
  margin-bottom: 0.4rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.insights-empty-detail {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.insights-selected-day {
  margin-top: 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.insights-selected-day-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.insights-selected-day-title {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.insights-selected-day-close {
  flex-shrink: 0;
  padding: 0.25rem 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.insights-selected-day-close:hover {
  color: var(--color-heading);
}

.insights-selected-day-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 0.65rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 900px) {
  .insights-selected-day-metrics {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
  }
}

.insights-metric-value {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

@media (min-width: 900px) {
  .insights-metric-value {
    font-size: 1.375rem;
  }
}

.insights-metric-label {
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.insights-periods-heading {
  margin-bottom: 0.5rem;
  color: var(--color-heading);
  font-size: 0.8rem;
  font-weight: 700;
}

.insights-periods {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.insights-period-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid var(--color-bg-secondary);
}

.insights-period-tag {
  flex-shrink: 0;
  width: 3.6rem;
  color: var(--color-sleep-night);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insights-period-tag-nap {
  color: #8b6b2f;
}

.insights-period-time {
  flex: 1 1 auto;
  min-width: 8rem;
  color: var(--color-text-primary);
  font-size: 0.85rem;
}

.insights-period-duration {
  color: var(--color-text-primary);
  font-size: 0.8rem;
}

.insights-period-duration.ongoing {
  color: var(--color-heading);
  font-weight: 800;
}

.insights-periods-footnote {
  margin: 0.65rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.insights-periods-empty {
  padding: 0.5rem 0;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

@media (min-width: 900px) {
  .insights-period-row {
    flex-wrap: nowrap;
    gap: 0.875rem;
    padding: 0.625rem 0.25rem;
  }

  .insights-period-time {
    font-size: 0.875rem;
  }
}

.insights-supporting-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.insights-average-note {
  margin: 0.75rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.insights-supporting-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

@media (min-width: 900px) {
  .insights-supporting-row {
    flex-direction: row;
    gap: 0;
  }

  .insights-supporting-stat {
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 1.25rem;
  }

  .insights-supporting-stat:first-child {
    padding-left: 0;
  }

  .insights-supporting-stat:last-child {
    padding-right: 0;
  }

  .insights-supporting-stat + .insights-supporting-stat::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--color-border);
  }
}

.insights-supporting-value {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.insights-supporting-label {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
}

@media (min-width: 900px) {
  .insights-supporting-value {
    font-size: 1.25rem;
  }

  .insights-supporting-label {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
  }
}

.insights-napnight {
  margin-top: 1.1rem;
}

.insights-napnight-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}

.insights-swatch {
  display: inline-flex;
  width: 7px;
  height: 7px;
  margin: 0 0.35rem;
  border-radius: 2px;
}

.insights-swatch-night {
  background: var(--color-sleep-night);
}

.insights-swatch-nap {
  background: var(--color-sleep-nap);
}

.insights-napnight-bar {
  display: flex;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.insights-napnight-bar-night {
  background: var(--color-sleep-night);
}

.insights-napnight-bar-nap {
  background: var(--color-sleep-nap);
}

.insights-napnight-fallback {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* Nappy Insights — same card shell as Sleep (.insights-card, .insights-hero,
   .insights-chart, .insights-bar-*, .insights-empty, .insights-selected-day,
   .insights-periods*, .insights-supporting-row, .insights-napnight* are all
   shared), plus its own three-color wee/poo/mixed swatches in place of
   Sleep's two-tone night/nap. */

.insights-hero-caption-nappy {
  color: var(--color-nappy-text-poo);
}

.insights-bar-wee {
  display: block;
  background: var(--color-event-nappy);
}

.insights-bar-poo {
  display: block;
  background: var(--color-nappy-poo);
}

.insights-bar-mixed {
  display: block;
  background: var(--color-nappy-mixed);
}

.insights-period-tag-wee {
  color: var(--color-nappy-text-wee);
}

.insights-period-tag-poo {
  color: var(--color-nappy-text-poo);
}

.insights-period-tag-mixed {
  color: var(--color-nappy-text-mixed);
}

.insights-swatch-wee {
  background: var(--color-event-nappy);
}

.insights-swatch-poo {
  background: var(--color-nappy-poo);
}

.insights-swatch-mixed {
  background: var(--color-nappy-mixed);
}

.insights-napnight-bar-wee {
  background: var(--color-event-nappy);
}

.insights-napnight-bar-poo {
  background: var(--color-nappy-poo);
}

.insights-napnight-bar-mixed {
  background: var(--color-nappy-mixed);
}

/* Poo-size markers — a thin line overlaid on a day's stacked bar for each
   large or blowout event, clipped by .insights-bar's own overflow:hidden.
   Smear/small/medium poos draw nothing on the chart; they only get a size
   badge in the selected-day list below. */

.insights-bar-marker {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.insights-bar-marker-large {
  height: 1.5px;
  background: var(--color-nappy-large);
}

.insights-bar-marker-blowout {
  height: 2.5px;
  background: var(--color-nappy-blowout);
}

.insights-size-badge {
  flex-shrink: 0;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insights-size-badge-neutral {
  background: var(--color-nappy-badge-neutral-bg);
  color: var(--color-nappy-badge-neutral-fg);
}

.insights-size-badge-large {
  background: var(--color-nappy-badge-large-bg);
  color: var(--color-nappy-badge-large-fg);
}

.insights-size-badge-blowout {
  background: var(--color-nappy-badge-blowout-bg);
  color: var(--color-nappy-badge-blowout-fg);
}

.insights-nappy-marker-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}

.insights-nappy-marker-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.insights-legend-swatch {
  display: inline-block;
  width: 14px;
  border-radius: 1px;
}

.insights-legend-swatch-large {
  height: 1.5px;
  background: var(--color-nappy-large);
}

.insights-legend-swatch-blowout {
  height: 2.5px;
  background: var(--color-nappy-blowout);
}

.insights-nappy-marker-legend-hint {
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

/* Feed Insights — same card shell as Sleep/Nappies (.insights-card,
   .insights-hero, .insights-chart, .insights-bar-*, .insights-empty,
   .insights-selected-day, .insights-periods*, .insights-supporting-row,
   .insights-napnight* are all shared), plus its own metric sub-tabs (same
   treatment as Growth's) switching between a solid breast-time bar and a
   two-color formula/expressed volume bar. */

.insights-hero-caption-feed {
  color: var(--color-feed-hero-caption);
}

.insights-bar-breast {
  background: var(--color-event-feed);
}

.insights-bar-formula {
  display: block;
  background: var(--color-feed-formula);
}

.insights-bar-expressed {
  display: block;
  background: var(--color-feed-expressed);
}

.insights-period-tag-breast {
  color: var(--color-feed-text-breast);
}

.insights-period-tag-formula {
  color: var(--color-feed-text-formula);
}

.insights-period-tag-expressed {
  color: var(--color-feed-text-expressed);
}

.insights-swatch-breast {
  background: var(--color-event-feed);
}

.insights-swatch-formula {
  background: var(--color-feed-formula);
}

.insights-swatch-expressed {
  background: var(--color-feed-expressed);
}

.insights-napnight-bar-breast {
  background: var(--color-event-feed);
}

.insights-napnight-bar-formula {
  background: var(--color-feed-formula);
}

.insights-napnight-bar-expressed {
  background: var(--color-feed-expressed);
}

/* Pump Insights — same card shell as Sleep/Feeds (.insights-card,
   .insights-hero, .insights-chart, .insights-bar-*, .insights-empty,
   .insights-selected-day, .insights-periods*, .insights-supporting-row are
   all shared), plus its own metric sub-tabs (same treatment as Feeds')
   switching between a volume bar and a duration bar — both solid, since Pump
   has no sub-types to break down. Chart fills use --color-event-pump, the
   app's existing Pump event-marker color, rather than the yellow shown in the
   Claude Design reference; small text uses the contrast-safe
   --color-pump-text counterpart. */

.insights-hero-caption-pump {
  color: var(--color-pump-text);
}

.insights-bar-pump {
  background: var(--color-event-pump);
}

.insights-period-tag-pump {
  color: var(--color-pump-text);
}

/* Growth Insights — same card shell as Sleep (.insights-card, .insights-hero,
   .insights-empty, .insights-selected-day, .insights-supporting-row are all
   shared), plus its own metric sub-tabs and line chart. Uses
   --color-event-weight, the app's existing Growth event-marker color, rather
   than the green shown in the Claude Design reference, so this area stays in
   sync with the rest of the product's category color coding as intended. */

.insights-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.insights-metric-pill {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.insights-metric-pill:hover {
  color: var(--color-text-primary);
}

.insights-metric-pill.active {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

@media (min-width: 900px) {
  .insights-metric-pill {
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
  }
}

.insights-hero-caption-growth {
  color: var(--color-event-weight);
}

.insights-growth-chart-wrap {
  margin-bottom: 0.5rem;
}

.insights-growth-chart-frame {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.45rem;
}

.insights-growth-axis {
  position: relative;
  height: 150px;
}

.insights-growth-axis-label {
  position: absolute;
  right: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  transform: translateY(-50%);
}

.insights-growth-chart-column {
  min-width: 0;
}

.insights-growth-chart-stage {
  position: relative;
}

.insights-growth-chart {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
}

@media (min-width: 900px) {
  .insights-growth-axis {
    height: 180px;
  }

  .insights-growth-chart {
    height: 180px;
  }
}

.insights-growth-axis-line {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}

.insights-growth-line {
  fill: none;
  stroke: var(--color-event-weight);
  stroke-width: 2;
}

.insights-growth-point {
  fill: var(--color-event-weight);
  stroke: var(--color-surface);
  stroke-width: 2;
  cursor: pointer;
}

.insights-growth-point.selected {
  fill: var(--color-growth-callout);
}

.insights-growth-point-callout {
  position: absolute;
  z-index: 1;
  color: var(--color-event-weight);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.insights-growth-point-callout-first {
  text-align: left;
  transform: translate(8px, calc(-100% - 7px));
}

.insights-growth-point-callout-last {
  text-align: right;
  transform: translate(calc(-100% - 8px), calc(-100% - 7px));
}

.insights-growth-point-hit {
  display: block;
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.insights-growth-point-hit:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
}

.insights-growth-labels {
  position: relative;
  height: 2.4em;
  margin-top: 6px;
}

.insights-growth-labels span {
  position: absolute;
  transform: translateX(-50%);
  color: var(--color-text-muted);
  font-size: 9.5px;
  white-space: nowrap;
}

.insights-growth-labels span:nth-child(even) {
  transform: translate(-50%, 1.15em);
}

@media (min-width: 900px) {
  .insights-growth-labels span {
    font-size: 10.5px;
  }
}

.insights-selected-day-metrics-2col {
  grid-template-columns: repeat(2, 1fr);
}

.insights-selected-day-metrics-3col {
  grid-template-columns: repeat(3, 1fr);
}