/* ──────────────────────────────────────────────────────────────────
   Babylore — shared stylesheet
   ──────────────────────────────────────────────────────────────────
   Brand-aligned with the iOS app palette in Babylore/Theme.swift.
   Two themes: warm cream/coffee in light, warm charcoal in dark.
   System fonts only — no FOUT, instant first paint.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Light palette — pulled from Theme.swift's light variants */
  --bt-bg:        #F7F2EC;
  --bt-surface:   #FCF8F4;
  --bt-surface-2: #F4EEE7;
  --bt-line:      #E6DCD2;
  --bt-line-2:    #D9CDC1;

  --bt-ink:       #382B24;
  --bt-ink-2:     #665347;
  --bt-ink-3:     #917768;
  --bt-ink-4:     #CCBBAF;

  --bt-primary:   #D1836A;     /* coral/coffee */
  --bt-accent-a:  #DCA08C;     /* peach */
  --bt-accent-b:  #9BB8E9;     /* sky */

  --bt-feed:      #A6DEB8;
  --bt-diap:      #F3E9A5;
  --bt-sleep:     #C4B5EB;

  --bt-card-shadow: rgba(174, 133, 107, 0.08);

  --serif: ui-serif, "Georgia", "Iowan Old Style", "Charter", serif;
  --rounded: -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
             "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bt-bg:        #12100D;
    --bt-surface:   #1D1915;
    --bt-surface-2: #26211C;
    --bt-line:      #393129;
    --bt-line-2:    #463E36;

    --bt-ink:       #F1EAE0;
    --bt-ink-2:     #D0C2B4;
    --bt-ink-3:     #AA9A8A;
    --bt-ink-4:     #6B5C4F;

    --bt-primary:   #E39375;
    --bt-accent-a:  #E3AA94;
    --bt-accent-b:  #8DAEE3;

    --bt-feed:      #79B68E;
    --bt-diap:      #D3C479;
    --bt-sleep:     #A897D6;

    --bt-card-shadow: rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  /* Soft peach glow in the top-right, echoing the app's Today screen. */
  background:
    radial-gradient(1100px 640px at 92% -10%,
      color-mix(in srgb, var(--bt-accent-a) 32%, transparent), transparent 60%),
    var(--bt-bg);
  background-repeat: no-repeat;
  color: var(--bt-ink);
  font-family: var(--rounded);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--bt-primary);
  text-decoration: none;
  transition: opacity 120ms ease;
}

a:hover { opacity: 0.75; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Launch banner ────────────────────────────────────────────────
   Slim coral bar pinned above the site header on every page while
   Babylore is still in pre-launch. Remove (or toggle .is-hidden) on
   the day the App Store goes live — the rest of the layout treats
   it as additive, so dropping the markup is enough.
─────────────────────────────────────────────────────────────────── */
.launch-banner {
  background: linear-gradient(135deg, var(--bt-primary), var(--bt-accent-a));
  color: white;
  text-align: center;
  font-family: var(--rounded);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 10px 20px;
}

.launch-banner a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

.launch-banner a:hover {
  opacity: 0.85;
}

/* ─── Coming-soon pill (homepage hero + CTA) ──────────────────────
   Replaces the App Store badge while the app is in pre-launch. Same
   approximate footprint as the badge so the hero layout doesn't
   reflow when we swap it back on launch day.
─────────────────────────────────────────────────────────────────── */
.coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--bt-ink);
  color: white;
  border-radius: 16px;
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 14px;
  cursor: default;
}

.coming-soon-pill small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ─── Container ─── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Top navigation ─── */
.site-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bt-bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bt-line);
  z-index: 100;
}

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--bt-ink);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--bt-primary), var(--bt-accent-a));
  display: inline-grid;
  place-items: center;
  color: white;
  font-size: 18px;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--bt-ink-2);
  font-size: 14.5px;
  font-weight: 500;
}

.nav-links a:hover { color: var(--bt-ink); opacity: 1; }

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

/* ─── Hero ─── */
.hero {
  padding: 80px 0 60px;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--bt-ink);
  letter-spacing: -0.02em;
}

.hero h1 .accent {
  color: var(--bt-primary);
  font-style: italic;
}

.hero p.lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--bt-ink-2);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.5;
}

.hero-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--rounded);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.btn:hover { opacity: 1; transform: translateY(-1px); }

.btn-primary {
  background: var(--bt-primary);
  color: white;
}

.btn-primary:hover { color: white; }

.btn-ghost {
  background: var(--bt-surface);
  color: var(--bt-ink);
  border-color: var(--bt-line);
}

.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bt-ink);
  color: var(--bt-surface);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  font-family: var(--rounded);
}

.app-store-badge:hover { color: var(--bt-surface); opacity: 1; transform: translateY(-1px); }

.app-store-badge small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1;
  margin-bottom: 2px;
}

/* ─── Hero phone mockup ─── */
/* The PNG is rendered raw — no chrome — because the in-app dark theme
   already feels like a "device" against the light page. A subtle drop
   shadow plus rounded corners is enough to float it. */
.hero-phone {
  margin: 60px auto 0;
  max-width: 320px;
}

.hero-phone-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 36px;
  box-shadow: 0 24px 60px var(--bt-card-shadow);
  /* Crisp on retina; let the browser scale a 2x source down. */
  image-rendering: -webkit-optimize-contrast;
}

/* ─── Screenshot row ─── */
/* Horizontal scroll on narrow viewports, 4-up on wide. The figures keep
   their own captions so the row stays scannable without alt-text hover. */
.section-tight { padding-top: 32px; padding-bottom: 32px; }

.screenshot-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .screenshot-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 540px) {
  .screenshot-row {
    /* On phones, side-scroll instead of stacking — feels app-store-y and
       keeps each shot at a readable size. */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 12px -20px 0;
    padding: 0 20px 8px;
    gap: 14px;
  }
  .screenshot { flex: 0 0 70%; scroll-snap-align: start; }
}

.screenshot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.screenshot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 26px;
  box-shadow: 0 16px 40px var(--bt-card-shadow);
  background: var(--bt-surface);
}

.screenshot figcaption {
  font-family: var(--rounded);
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-ink-2);
  letter-spacing: 0.01em;
}

/* ─── Section header ─── */
.section {
  padding: 72px 0;
}

.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bt-ink-3);
  margin: 0 0 10px;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--bt-ink);
  letter-spacing: -0.01em;
}

.section-lede {
  color: var(--bt-ink-2);
  font-size: 17px;
  max-width: 620px;
  margin: 0 0 40px;
}

/* ─── Feature grid ─── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--bt-card-shadow);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.feature-icon.feed  { background: var(--bt-feed); }
.feature-icon.diap  { background: var(--bt-diap); }
.feature-icon.sleep { background: var(--bt-sleep); }
.feature-icon.world { background: var(--bt-accent-b); }
.feature-icon.coral { background: var(--bt-accent-a); }
.feature-icon.cream { background: var(--bt-surface-2); }

.feature-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--bt-ink);
}

.feature-card p {
  margin: 0;
  color: var(--bt-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* ─── Culture callout ─── */
.culture-band {
  background: var(--bt-surface-2);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
}

.culture-flags {
  font-size: 36px;
  letter-spacing: 6px;
  margin: 0 0 18px;
  user-select: none;
}

@media (max-width: 640px) {
  .culture-band { padding: 40px 24px; }
  .culture-flags { font-size: 26px; letter-spacing: 4px; }
}

/* ─── CTA band ─── */
.cta-band {
  background: var(--bt-ink);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  color: var(--bt-surface);
}

.cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 12px;
  color: var(--bt-surface);
}

.cta-band p {
  color: var(--bt-ink-4);
  max-width: 520px;
  margin: 0 auto 24px;
  font-size: 16px;
}

.cta-band .app-store-badge {
  background: var(--bt-surface);
  color: var(--bt-ink);
}

@media (max-width: 640px) {
  .cta-band { padding: 40px 24px; }
}

/* ─── Footer ─── */
.site-footer {
  border-top: 1px solid var(--bt-line);
  padding: 40px 0 64px;
  margin-top: 80px;
  color: var(--bt-ink-3);
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.footer-col h4 {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bt-ink-3);
  margin: 0 0 12px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  color: var(--bt-ink-2);
  font-weight: 500;
}

.footer-col a:hover { color: var(--bt-ink); }

.footer-brand p {
  margin: 12px 0 0;
  color: var(--bt-ink-3);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 280px;
}

.footer-meta {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bt-line);
  font-size: 13px;
  color: var(--bt-ink-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── Legal & long-form pages ─── */
.page-header {
  padding: 72px 0 24px;
}

.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 12px;
  color: var(--bt-ink);
  letter-spacing: -0.01em;
}

.page-header .updated {
  color: var(--bt-ink-3);
  font-size: 14px;
}

.prose {
  padding: 24px 0 60px;
  color: var(--bt-ink-2);
  line-height: 1.65;
  font-size: 16px;
}

.prose h2 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--bt-ink);
  margin: 40px 0 12px;
  letter-spacing: -0.005em;
}

.prose h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--bt-ink);
  margin: 28px 0 8px;
}

.prose p { margin: 0 0 14px; }

.prose ul, .prose ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.prose li { margin-bottom: 6px; }

.prose code {
  background: var(--bt-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-family: ui-monospace, Menlo, monospace;
}

.prose strong { color: var(--bt-ink); }

/* ─── Cards on Support page ─── */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.support-card {
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: var(--radius-md);
  padding: 24px;
}

.support-card h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--bt-ink);
  margin: 0 0 8px;
}

.support-card p {
  color: var(--bt-ink-2);
  font-size: 15px;
  margin: 0 0 12px;
}

.support-card a {
  font-weight: 600;
  font-size: 15px;
}

/* ─── App-style showcase ───────────────────────────────────────────
   Live HTML recreations of the iOS app's signature surfaces, so the
   marketing page mirrors the current app look without depending on
   exported screenshots. Every colour comes from the shared tokens
   above, so these adapt to dark mode along with the rest of the site.
─────────────────────────────────────────────────────────────────── */

/* Shared inline icons */
.ic    { width: 24px; height: 24px; display: block; }
.ic-sm { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; }

/* ── Phone mockup (hero) ── */
.hero-device { margin: 56px auto 0; max-width: 358px; }

.device {
  border-radius: 46px;
  padding: 13px;
  background: linear-gradient(160deg, #2a2320, #15110e);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06) inset,
    0 34px 70px rgba(56, 43, 36, 0.28),
    0 10px 24px rgba(56, 43, 36, 0.16);
}

.device-screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  padding: 15px 15px 84px;
  min-height: 600px;
  background:
    radial-gradient(125% 78% at 100% 0%,
      color-mix(in srgb, var(--bt-accent-a) 52%, transparent), transparent 56%),
    var(--bt-bg);
}

.island {
  width: 92px;
  height: 26px;
  background: #0b0a08;
  border-radius: 999px;
  margin: 2px auto 16px;
}

.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-hello { font-size: 15px; font-weight: 600; color: var(--bt-ink-3); }

.app-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bt-surface);
  color: var(--bt-ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--bt-card-shadow);
}

.app-greeting {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bt-ink);
  margin: 16px 0 8px;
}

.app-greeting em {
  display: block;
  font-style: italic;
  font-size: 30px;
  color: var(--bt-primary);
}

.app-age { margin: 0 0 24px; font-size: 15px; font-weight: 600; color: var(--bt-ink-3); }

.app-eyebrow {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--bt-ink-3);
}

.app-eyebrow .from { color: var(--bt-primary); }

/* ── Recipe card ── */
.rcard {
  background: var(--bt-surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 26px var(--bt-card-shadow);
}

.rcard-img { aspect-ratio: 16 / 10; }

.rcard-img--pudding {
  background: radial-gradient(58% 54% at 42% 42%, #fffdfa, #efe7db 70%, #e5dbce);
}

.rcard-img--congee {
  background: radial-gradient(58% 52% at 46% 44%, #fffefb, #ece5da 68%, #e1d9cc);
}

.rcard-body { padding: 14px 16px 16px; }
.rcard-eyebrow { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--bt-ink-3); }
.rcard-title { margin: 0 0 5px; font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--bt-ink); }
.rcard-desc { margin: 0 0 14px; font-size: 14.5px; color: var(--bt-ink-2); }
.rcard-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-ink-3);
}

/* ── Floating tab bar ── */
.tabbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bt-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 22px var(--bt-card-shadow);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--bt-ink-3);
}

.tab.is-active { color: var(--bt-primary); }
.tab .ic { width: 21px; height: 21px; }

/* ── Showcase panels (Compare / Recipes / Tracker) ── */
.showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.showcase .panel-wide { grid-column: 1 / -1; }

@media (max-width: 820px) { .showcase { grid-template-columns: 1fr; } }

.panel {
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.panel-eyebrow {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--bt-ink-3);
}

.panel-title { margin: 0 0 18px; font-family: var(--serif); font-size: 22px; color: var(--bt-ink); }

/* Filter chips */
.chip-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--bt-surface);
  border: 1px solid var(--bt-line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bt-ink-2);
  white-space: nowrap;
}

.chip.is-active { background: var(--bt-primary); border-color: transparent; color: #fff; }
.chip .heart { color: var(--bt-primary); }

/* Compare cards */
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .compare-pair { grid-template-columns: 1fr; } }

.ccard { border-radius: 20px; padding: 18px; }
.ccard.jp { background: color-mix(in srgb, var(--bt-accent-a) 26%, var(--bt-surface)); }
.ccard.fr { background: color-mix(in srgb, var(--bt-accent-b) 26%, var(--bt-surface)); }

.ccard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--bt-ink);
}

.ccard-head svg { color: var(--bt-ink-3); }
.ccard-title { margin: 0 0 8px; font-family: var(--serif); font-size: 21px; line-height: 1.1; color: var(--bt-ink); }
.ccard-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bt-ink-2); }

/* By the numbers */
.bars { margin-top: 18px; }
.bar-row { padding: 12px 0; border-top: 1px solid var(--bt-line); }
.bar-row:first-child { border-top: none; }

.bar-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bt-ink);
}

.bar-head .unit { font-size: 12px; font-weight: 600; color: var(--bt-ink-3); }
.bar-line { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.bar-val { width: 30px; font-size: 13px; font-weight: 800; }
.bar-val.coral { color: var(--bt-primary); }
.bar-val.sky { color: var(--bt-accent-b); }

.bar-track {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: var(--bt-surface-2);
  overflow: hidden;
}

.bar-fill { height: 100%; border-radius: 999px; }
.bar-fill.coral { background: var(--bt-primary); }
.bar-fill.sky { background: var(--bt-accent-b); }

/* Tracker tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { border-radius: 18px; padding: 15px 16px; }
.tile.feed  { background: color-mix(in srgb, var(--bt-feed)  34%, var(--bt-surface)); }
.tile.diap  { background: color-mix(in srgb, var(--bt-diap)  40%, var(--bt-surface)); }
.tile.sleep { background: color-mix(in srgb, var(--bt-sleep) 34%, var(--bt-surface)); }
.tile.next  { background: var(--bt-surface-2); }
.tile-label { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--bt-ink-2); }
.tile-value { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1; color: var(--bt-ink); }
.tile-sub { margin: 5px 0 0; font-size: 11.5px; color: var(--bt-ink-3); }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--bt-ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 999px; }