/* babydash — "Moonlight Almanac"
 *
 * The page keeps the time of day. Surfaces, ink and chrome drift from night
 * through dawn, morning, midday, golden hour and evening, following the real
 * local clock, so glancing at it at 3am feels different from glancing at it
 * over breakfast.
 *
 * What does NOT drift is the data. Series colours are fixed per light/dark
 * mode — colour follows the entity, never the hour — or the charts would
 * repaint themselves every few hours and stop being readable. The validated
 * trio (indigo / amber / sage) passes CVD and contrast on both the warm cream
 * and deep indigo surfaces; light-mode sage sits at 2.72:1, which the direct
 * labels and the day-by-day table cover.
 */

/* ------------------------------------------------------------- phase ink */

:root {
  color-scheme: light;

  /* Defaults are midday; every phase below overrides the surfaces and ink. */
  --page: #fbf5e9;
  --surface-1: #fffdf7;
  --surface-2: #f6eedd;
  --text-primary: #2b2417;
  --text-secondary: #6b5e49;
  --text-muted: #9c8f78;
  --grid: #e8dcc4;
  --axis: #d3c4a6;
  --border: rgba(43, 36, 23, 0.10);
  --glow: transparent;

  /* Fixed data colours — light mode. */
  --sleep-night: #2a78d6;
  --sleep-nap: #86b6ef;
  --feed: #eb6834;
  --diaper: #1baf7a;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --success-text: #006300;

  /* The sky strip behind the day timeline. */
  --sky-night: #1b1a33;
  --sky-dawn: #d98a6a;
  --sky-day: #cfe4f5;
  --sky-dusk: #b46b8a;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(70, 55, 25, 0.05), 0 10px 30px rgba(70, 55, 25, 0.06);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 05:00–07:30 — first light, rose over cold ground */
:root[data-phase="dawn"] {
  --page: #f6e6e2;
  --surface-1: #fffaf6;
  --surface-2: #f7ded6;
  --text-primary: #362432;
  --text-secondary: #6f5462;
  --text-muted: #a08795;
  --grid: #eed6cd;
  --axis: #dcbcb0;
  --border: rgba(54, 36, 50, 0.10);
}

/* 07:30–11:30 — pale gold */
:root[data-phase="morning"] {
  --page: #fbf1dd;
  --surface-1: #fffdf8;
  --surface-2: #f6ead1;
  --text-primary: #2e2718;
  --text-secondary: #6d6047;
  --text-muted: #9d9075;
  --grid: #ead9ba;
  --axis: #d6c19b;
}

/* 16:30–19:30 — golden hour */
:root[data-phase="goldenhour"] {
  --page: #f9e8d2;
  --surface-1: #fffaf0;
  --surface-2: #f5e0c4;
  --text-primary: #372613;
  --text-secondary: #78593a;
  --text-muted: #a98d6c;
  --grid: #ecd6b4;
  --axis: #d9bd92;
  --border: rgba(55, 38, 19, 0.11);
}

/* 19:30–23:00 — evening indigo. Dark mode begins. */
:root[data-phase="evening"] {
  color-scheme: dark;
  --page: #14132a;
  --surface-1: #1e1d38;
  --surface-2: #262546;
  --text-primary: #ece7f7;
  --text-secondary: #b3adc9;
  --text-muted: #837d9c;
  --grid: #2c2b4d;
  --axis: #3b3a63;
  --border: rgba(236, 231, 247, 0.10);
  --glow: rgba(120, 130, 220, 0.07);
  --shadow: none;
  --sleep-night: #3987e5;
  --sleep-nap: #9ec5f4;
  --feed: #d95926;
  --diaper: #199e70;
  --success-text: #0ca30c;
}

/* 23:00–05:00 — the 3am phase. Deepest surfaces and warm, low-blue ink, so
   checking "when did he last eat" doesn't wreck your night vision or light up
   the room. Data colours still hold their hues. */
:root[data-phase="night"] {
  color-scheme: dark;
  --page: #08070f;
  --surface-1: #100f1c;
  --surface-2: #171628;
  --text-primary: #f0dcb8;
  --text-secondary: #b9a37e;
  --text-muted: #7d6d54;
  --grid: #1e1c30;
  --axis: #2a2740;
  --border: rgba(240, 220, 184, 0.10);
  --glow: rgba(240, 200, 130, 0.05);
  --shadow: none;
  --sleep-night: #3987e5;
  --sleep-nap: #9ec5f4;
  --feed: #d95926;
  --diaper: #199e70;
  --success-text: #0ca30c;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* A soft glow from "above", like a nightlight in the corner of the room. */
  background-image: radial-gradient(120% 70% at 50% -10%, var(--glow), transparent 70%);
  background-attachment: fixed;
  transition: background-color 1.2s ease, color 1.2s ease;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 26px 18px 72px; }

/* ---------------------------------------------------------------- header */

header.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}

.subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }

.head-right { display: flex; align-items: center; gap: 10px; }

button.ghost {
  font: inherit;
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
button.ghost:hover { color: var(--text-primary); border-color: var(--axis); }

/* The phase dial: shows where we are in the day, click to pin light/dark. */
#phase-dial {
  font-size: 17px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  cursor: pointer;
}

.sources { display: flex; gap: 7px; align-items: center; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px var(--surface-1), 0 0 10px currentColor;
  color: var(--good);
}
.dot.bad { background: var(--critical); color: var(--critical); }

/* ------------------------------------------------------------------ tabs */

.tabs {
  display: flex;
  gap: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
  width: fit-content;
}
.tab {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 7px 22px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.tab[aria-selected="true"] {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow);
}

.panel[hidden] { display: none; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  transition: background-color 1.2s ease;
}

/* Headings are sentence-case serif, not shouty tracked-out labels. */
.card h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.card h2 + .card-note { margin-top: 0; }

.card-note {
  margin: 2px 0 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 62ch;
}

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* ------------------------------------------------------------------ hero */

.hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* The celestial glyph: moon while he sleeps, sun while he's up, sized to be
   the first thing you see from across a dim room. */
.hero-glyph {
  font-size: 54px;
  line-height: 1;
  filter: drop-shadow(0 0 18px var(--glow));
}

.hero-status {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--text-secondary);
}
.hero-status.crying { color: var(--critical); font-style: normal; }

.hero-figure {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 2px;
}
.hero-label { color: var(--text-muted); font-size: 13.5px; }

.ww { flex: 1; min-width: 210px; }
.ww-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.ww-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sleep-nap), var(--sleep-night));
  transition: width .6s ease;
}
.ww-fill.over { background: linear-gradient(90deg, var(--warning), var(--feed)); }
.ww-legend {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--text-muted); margin-top: 7px;
}

/* ------------------------------------------------------------ stat tiles */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

.tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  box-shadow: var(--shadow);
}
.tile-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
}
.tile-value {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 5px;
}
.tile-detail { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.swatch { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex: none; }
.swatch.sleep { background: var(--sleep-night); }
.swatch.feed { background: var(--feed); }
.swatch.diaper { background: var(--diaper); }

/* -------------------------------------------------------------- insights */

.insight {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--grid);
}
.insight:first-of-type { border-top: 0; padding-top: 2px; }
.insight-icon { font-size: 16px; line-height: 1.3; flex: none; width: 20px; text-align: center; }
.insight-title { font-family: var(--serif); font-weight: 600; font-size: 15.5px; }
.insight-detail { color: var(--text-secondary); font-size: 13.5px; }

/* ---------------------------------------------------- timeline & charts */

.timeline-wrap, .chart-wrap { overflow-x: auto; }
.timeline { width: 100%; min-width: 580px; display: block; }
.chart { width: 100%; min-width: 520px; display: block; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }

.tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--axis);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  z-index: 40;
  opacity: 0;
  transition: opacity .12s;
  max-width: 260px;
}
.tooltip.on { opacity: 1; }
.tooltip .tt-title { font-family: var(--serif); font-weight: 600; margin-bottom: 5px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 16px; color: var(--text-secondary); }
.tooltip .tt-row b { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------- trends */

.trend-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.trend-delta { font-size: 13px; font-weight: 600; margin-top: 3px; }
.trend-delta.up { color: var(--success-text); }
.trend-delta.down { color: var(--warning); }
.trend-delta.flat { color: var(--text-muted); }

/* ---------------------------------------------------------------- table */

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 9px 11px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
}
tr.partial td { color: var(--text-muted); font-style: italic; }

/* --------------------------------------------------------------- recent */

.recent-item {
  display: flex; align-items: baseline; gap: 13px;
  padding: 10px 0; border-top: 1px solid var(--grid);
  font-size: 14px;
}
.recent-item:first-of-type { border-top: 0; }
.recent-time { color: var(--text-muted); font-size: 12.5px; width: 78px; flex: none; font-variant-numeric: tabular-nums; }
.recent-label { font-weight: 550; }
.recent-detail { color: var(--text-secondary); }
.recent-src { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }

/* --------------------------------------------------------------- banner */

.banner {
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.banner.warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); }
.banner.err { background: color-mix(in srgb, var(--critical) 13%, var(--surface-1)); }

.empty { color: var(--text-muted); font-size: 13.5px; font-style: italic; }

.seg { display: flex; gap: 3px; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.seg button {
  font: inherit; font-size: 13.5px; border: 0; background: none; color: var(--text-secondary);
  padding: 5px 15px; border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--surface-1); color: var(--text-primary); font-weight: 600;
}

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, body, .card { transition: none !important; }
}


/* ----------------------------------------------------------------- sync */

.sync-list { margin-top: 16px; }
.sync-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--grid);
  font-size: 13.5px;
}
.sync-row:first-child { border-top: 0; }

/* Rows are labels, so the whole line is a hit target — one-handed at 3am. */
.sync-row.pick { cursor: pointer; border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.sync-row.pick:hover { background: var(--surface-2); }
.sync-row input[type="checkbox"] {
  width: 17px; height: 17px; flex: none; margin: 0;
  accent-color: var(--sleep-night); cursor: pointer;
}
.sync-row.pick:has(input:not(:checked)) { opacity: .45; }
.sync-when { font-variant-numeric: tabular-nums; min-width: 168px; flex: none; }
.sync-dur { color: var(--text-secondary); }
.sync-why { margin-left: auto; color: var(--text-muted); font-size: 12.5px; font-style: italic; }
.sync-row.held { color: var(--text-muted); }

.sync-confirm {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--grid);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sync-confirm .empty { flex: 1 1 220px; }
button.commit {
  font: inherit; font-size: 14px; font-weight: 600;
  color: #fffdf7; background: var(--sleep-night);
  border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer;
}
button.commit:disabled { opacity: .5; cursor: default; }
button.commit:hover:not(:disabled) { filter: brightness(1.08); }

/* ------------------------------------------------------------- next up */

/* The two predictions are the headline: what the page is for. */
.hero { align-items: stretch; }
.hero-now { min-width: 190px; }

.next-up {
  display: flex; gap: 12px; flex-wrap: wrap;
  flex: 1 1 340px; align-items: stretch;
}

.next-card {
  flex: 1 1 180px;
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
/* Overdue is the state worth catching from across the room. */
.next-card.over {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, var(--surface-2));
}

.next-icon { font-size: 21px; line-height: 1.1; flex: none; }
.next-label { font-size: 12.5px; color: var(--text-muted); }
.next-time {
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.15; margin-top: 1px;
}
.next-note { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

.next-track {
  height: 5px; border-radius: 999px; background: var(--grid);
  overflow: hidden; margin-top: 8px;
}
.next-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sleep-nap), var(--sleep-night));
  transition: width .6s ease;
}
.next-card.over .next-fill { background: var(--warning); }

/* ------------------------------------------------------- flagged figures */

/* The same amber the overdue card uses, generalised: any figure an insight is
   about gets outlined, so the observation and the number live in one place
   instead of the number sitting neutral above a list that explains it.
   Deliberately a border and a wash rather than a colour change on the digits —
   the figure has to stay as legible as the ones beside it. */
.flag,
.flag-alert {
  border-radius: var(--radius-sm);
  transition: border-color .3s ease, background-color .3s ease;
}
.flag {
  border: 1px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 11%, var(--surface-1));
}
.flag-alert {
  border: 1px solid var(--critical);
  background: color-mix(in srgb, var(--critical) 11%, var(--surface-1));
}
.next-card.flag { background: color-mix(in srgb, var(--warning) 13%, var(--surface-2)); }
.next-card.flag-alert { background: color-mix(in srgb, var(--critical) 13%, var(--surface-2)); }
.next-card.flag .next-fill { background: var(--warning); }
.next-card.flag-alert .next-fill { background: var(--critical); }

/* Rows inside the fold are separated by hairlines rather than boxed, so an
   outline needs its own padding or it crops the text it's meant to draw
   attention to. The border is restated here because `.recent-item:first-of-type`
   zeroes border-top at a specificity `.flag` alone can't reach — without this
   the top row of a list gets a three-sided outline. */
.recent-item.flag,
.recent-item.flag-alert { padding: 5px 9px; margin: 0 -9px; }
.recent-item.flag { border: 1px solid var(--warning); }
.recent-item.flag-alert { border: 1px solid var(--critical); }

/* A flagged figure is worth a glance, not an emergency — one slow pulse when
   it appears, then it settles into a static outline. */
@media (prefers-reduced-motion: no-preference) {
  .flag, .flag-alert { animation: flag-in .9s ease-out 1; }
}
@keyframes flag-in {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* ---------------------------------------------------------------- folds */

/* Reference material, one click away rather than occupying the fold line. */
details.fold summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--text-secondary);
  list-style: none;
  display: flex; align-items: center; gap: 9px;
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::before {
  content: "›";
  font-size: 19px; line-height: 1;
  color: var(--text-muted);
  transition: transform .2s;
}
details.fold[open] summary::before { transform: rotate(90deg); }
details.fold summary:hover { color: var(--text-primary); }
details.fold h2 { margin-bottom: 8px; }

/* ---------------------------------------------------------------- login */

.login-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login {
  width: 100%; max-width: 380px;
  text-align: center;
  margin-bottom: 0;
}
.login-glyph { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 18px var(--glow)); }
.login h1 { font-size: 27px; margin: 10px 0 2px; }
.login .card-note { margin: 0 auto 22px; }

.login-label {
  display: block; text-align: left;
  font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px;
}
.login-input {
  width: 100%;
  font: inherit;
  /* 16px minimum, or iOS zooms the whole page on focus. */
  font-size: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--axis);
  background: var(--surface-2);
  color: var(--text-primary);
}
.login-input:focus {
  outline: none;
  border-color: var(--sleep-night);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sleep-night) 22%, transparent);
}
.login-remember {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-secondary);
  margin: 14px 0 18px; text-align: left;
}
.login-remember input { width: 17px; height: 17px; accent-color: var(--sleep-night); }
.login-submit { width: 100%; padding: 13px; font-size: 15px; }
.login-error {
  margin: 14px 0 0; font-size: 13px;
  color: var(--critical);
}

.signout {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12.5px;
  color: var(--text-muted); cursor: pointer; text-decoration: underline;
}
.signout:hover { color: var(--text-primary); }