/* צ׳וק. Warm clay is the accent on purpose — warm light is the only kind that does
   not flatten melatonin (docs/sleep-research.md §3).

   Two palettes on one token set.
   Dark is for the nursery at 02:00; light is for a pram in daylight, where a dark
   screen at full brightness is barely legible. The system decides unless she picks
   one in Settings. Every colour in the app comes from here — nothing is hardcoded
   in markup, or it would fail to switch.

   Three colours carry meaning and never carry anything else:
     clay      the accent, and "awake"
     sage      quiet wakefulness
     periwinkle  sleep
   They appear as the status, the progress bar, a band in the ribbon and a dot in
   the list, so a colour means one thing on every screen.

   Pastel grounds tempt you into pale greys. --muted and --faint are the darkest
   this palette can hold and still feel soft: --muted carries real content and
   clears WCAG AA, --faint is metadata only and sits one step below it. Every
   colour here was checked against the surface it actually sits on. */

:root {
  color-scheme: light;

  --bg: #FAF6F2;
  --surface: #FFFFFF;
  --surface-2: #F4EEE8;
  --line: #EDE5DD;
  --line-2: #DCD1C6;
  --hairline: #F2EBE4;

  --ink: #2E2A33;
  --ink-2: #5F5866;
  --ink-3: #665F6E;
  --muted: #6A6373;
  --faint: #746D80;

  /* A shade deeper than it looks like it needs to be: the accent also sits as text
     on --amber-soft in the "bedtime is running late" chip, and at #A55E3C that
     pairing came out at 3.96:1. */
  --amber: #9C5433;
  --amber-ink: #FFFFFF;
  --amber-soft: #F8E8DC;
  --indigo: #4E5A9B;
  --indigo-soft: #E4E5F5;
  --violet: #7A55A6;

  --good: #46705C;
  --good-soft: #DEEBE2;
  --warn: #8A5A12;
  --bad: #A4384F;

  --tabbar: #FFFFFF;
  --scrim: #3B2E2A66;
  --leap-bg: #F1EAF6;
  --leap-line: #DDCCEA;
  --err-bg: #FAEBEE;
  --err-line: #EFCBD4;

  /* Ribbon and day-bar bands. Separated by lightness as well as hue, so two
     neighbours never merge into one block. */
  --band-wake: #FBEBDC;
  --band-quiet: #B2D4C0;
  --band-sleep: #9298DC;

  /* Cards are lifted off the ground rather than boxed in. A 1px border round
     every card is what made the app read as a dashboard. */
  --shadow: 0 1px 2px rgba(70, 52, 44, .05), 0 8px 24px rgba(70, 52, 44, .055);
  --shadow-sm: 0 1px 2px rgba(70, 52, 44, .05), 0 3px 10px rgba(70, 52, 44, .045);

  --r: 20px;
  --tap: 46px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #1E1A20;
    --surface: #2A252D;
    --surface-2: #332C36;
    --line: #382F3B;
    --line-2: #493F4D;
    --hairline: #2C2630;

    --ink: #F1EBE9;
    --ink-2: #C0B7C0;
    --ink-3: #B0A7B1;
    --muted: #A69CA8;
    --faint: #9A91A0;

    --amber: #E8A981;
    --amber-ink: #2C1E15;
    --amber-soft: #3D2D26;
    --indigo: #A8B0EC;
    --indigo-soft: #292C46;
    --violet: #C4A3D8;

    --good: #8CC1A4;
    --good-soft: #24352B;
    --warn: #E0A94E;
    --bad: #E8899A;

    --tabbar: #221D25;
    --scrim: #100B12cc;
    --leap-bg: #2A2233;
    --leap-line: #443552;
    --err-bg: #2E1A20;
    --err-line: #4A2733;

    --band-wake: #7B5B46;
    --band-quiet: #2E4C3A;
    --band-sleep: #5559B0;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 3px 10px rgba(0, 0, 0, .24);
  }
}

/* An explicit choice in Settings wins over the system in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1E1A20;
  --surface: #2A252D;
  --surface-2: #332C36;
  --line: #382F3B;
  --line-2: #493F4D;
  --hairline: #2C2630;

  --ink: #F1EBE9;
  --ink-2: #C0B7C0;
  --ink-3: #B0A7B1;
  --muted: #A69CA8;
  --faint: #9A91A0;

  --amber: #E8A981;
  --amber-ink: #2C1E15;
  --amber-soft: #3D2D26;
  --indigo: #A8B0EC;
  --indigo-soft: #292C46;
  --violet: #C4A3D8;

  --good: #8CC1A4;
  --good-soft: #24352B;
  --warn: #E0A94E;
  --bad: #E8899A;

  --tabbar: #221D25;
  --scrim: #100B12cc;
  --leap-bg: #2A2233;
  --leap-line: #443552;
  --err-bg: #2E1A20;
  --err-line: #4A2733;

  --band-wake: #7B5B46;
  --band-quiet: #2E4C3A;
  --band-sleep: #5559B0;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 3px 10px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  overscroll-behavior-y: none;
  /* The scrolling element is .scroll, not the page — otherwise the tab bar
     scrolls away with the content. */
  overflow: hidden;
}

body {
  color: var(--ink);
  /* Rubik: warm, slightly rounded terminals, and a Hebrew cut that reads as
     friendly rather than clinical. Assistant stays as the first fallback. */
  font-family: Rubik, Assistant, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Latin/numeric runs inside RTL prose. Without this, "10:00–10:30" renders reversed. */
.t {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ---------- shell ---------- */

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  flex-shrink: 0;
}
/* The header carries the only clock in the app — the hero used to repeat it two
   rows below, which is also right under the phone's own status bar. */
.head h1 { margin: 0; font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.head .sub { font-size: 15px; color: var(--ink-2); margin-top: 4px; font-weight: 400; }
.head .clock { font-size: 21px; font-weight: 500; color: var(--ink-2); }

/* ---------- bedtime anchor ---------- */
/* Pinned under the header on every screen: the one number that shapes the evening. */

/* A tinted pill rather than a bordered card: it is a fact, not a container. */
.anchor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 16px;
  background: var(--indigo-soft);
  color: var(--indigo);
  flex-shrink: 0;
}
.anchor[hidden] { display: none; }
.anchor svg { flex-shrink: 0; }
.anchor b { font-size: 17px; font-weight: 600; }
.anchor span { font-size: 13.5px; color: var(--muted); margin-inline-start: auto; text-align: end; }
.anchor.tone-plan { background: var(--good-soft); color: var(--good); }
.anchor.tone-early { background: var(--indigo-soft); color: var(--indigo); }
.anchor.tone-late { background: var(--amber-soft); color: var(--amber); }
.anchor.tone-sleep { background: var(--indigo-soft); color: var(--indigo); }

/* One line of arithmetic under the headline, so the plan is never a black box. */
.why {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 8px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--line);
}

/* The budget numbers, demoted from a card of their own. */
.daystats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13.5px;
  color: var(--muted);
  padding: 2px 2px 0;
}
.daystats b { color: var(--ink); font-weight: 700; }
.daystats i { font-style: normal; opacity: .8; }

/* ---------- what if ---------- */

.whatif { display: flex; flex-direction: column; gap: 14px; }
.whatif-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border-inline-start: 3px solid var(--muted);
}
.whatif-main span { font-size: 13.5px; color: var(--muted); }
.whatif-main b { font-size: 30px; font-weight: 700; line-height: 1.1; }
.whatif-main i { font-style: normal; font-size: 14px; color: var(--ink-2); }
.whatif-main.tone-plan { border-inline-start-color: var(--good); }
.whatif-main.tone-early { border-inline-start-color: var(--indigo); }
.whatif-main.tone-late { border-inline-start-color: var(--warn); }

.whatif-rows { display: flex; flex-direction: column; gap: 0; }
.whatif-rows > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-bottom: 1px solid var(--hairline);
}
.whatif-rows > div:last-child { border-bottom: 0; }
.whatif-rows span { font-size: 14.5px; color: var(--ink-2); }
.whatif-rows b { margin-inline-start: auto; font-size: 16px; font-weight: 700; }

/* ---------- segmented control ---------- */

.segmented {
  display: flex;
  margin-inline-start: auto;
  background: var(--surface-2);
  border-radius: 12px;
  overflow: hidden;
}
.segmented button {
  min-height: 40px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.segmented button.on { background: var(--amber); color: var(--amber-ink); }

.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tabs {
  display: flex;
  box-shadow: 0 -1px 0 var(--line);
  background: var(--tabbar);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--faint);
  font-size: 12px;
}
.tabs button[aria-selected="true"] { color: var(--amber); font-weight: 600; }

/* ---------- primitives ---------- */

.card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 17px;
  box-shadow: var(--shadow-sm);
}
.sect { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 11px; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }

.btn {
  width: 100%;
  min-height: 62px;
  border-radius: 20px;
  font-size: 19px;
  font-weight: 600;
  color: var(--amber-ink);
  background: var(--amber);
  box-shadow: var(--shadow-sm);
  transition: transform .06s ease;
}
.btn:active { transform: scale(.985); }
.btn.sleep { background: var(--indigo); color: var(--surface); }

/* Filled with a tint rather than outlined — one less line on the screen. */
.ghost {
  flex: 1;
  min-height: 50px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
}
.ghost:active { background: var(--line); }
.ghost[disabled] { opacity: .4; cursor: default; }
.ghost.on { background: var(--amber-soft); color: var(--amber); font-weight: 600; }

/* The what-if. Not a button that asks a question — a row that already answers it,
   with the full breakdown one tap behind. */
.peek {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  min-height: 64px;
  padding: 11px 16px;
  border-radius: 18px;
  background: var(--surface-2);
}
.peek:active { background: var(--line); }
.peek-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.peek-title { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.peek-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.peek-chev { color: var(--muted); flex-shrink: 0; }

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

.hero { padding: 22px; border-radius: 26px; box-shadow: var(--shadow); }
/* The status is the headline: an icon and one word for what she is doing, with
   the numbers underneath. */
.hero .statusrow { display: flex; align-items: center; gap: 13px; }
.hero .statusicon {
  width: 48px; height: 48px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
}
.hero .status { font-size: 27px; font-weight: 600; line-height: 1.1; }
.hero .sub { font-size: 18px; line-height: 1.45; color: var(--ink); margin-top: 15px; }
.herorule { height: 1px; background: var(--line); margin: 18px 0 16px; }

.track { height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 18px; overflow: hidden; }
.track > div { height: 100%; border-radius: 999px; transition: width .4s ease; }
.ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }

/* ---------- the day, as one bar ---------- */
/* Wake, wind-down and sleep end to end, from the morning wake to bedtime. The 2px
   gaps let the card show through, so every boundary stays visible even where two
   bands sit close in tone. */

.ribbonwrap { position: relative; }
.ribbon {
  display: flex;
  gap: 2px;
  height: 44px;
  border-radius: 13px;
  overflow: hidden;
  background: var(--surface);
}
.ribbon > span { display: block; min-width: 3px; }
/* One element carries the whole marker — the line, and its head via ::before.
   Two separately positioned pieces never quite line up. */
.nowmark {
  position: absolute;
  inset-block: -5px;
  width: 2px;
  /* Centre the line on the moment. Without this the marker hangs its full width
     past the end of the ribbon once the day is over. */
  margin-inline-start: -1px;
  z-index: 2;
  background: var(--ink);
  border-radius: 2px;
}
.nowmark::before {
  content: "";
  position: absolute;
  inset-inline-start: -4.5px;
  top: -9px;
  width: 11px; height: 11px;
  border-radius: 999px;
  background: var(--ink);
}
.ribbonends {
  display: flex; justify-content: space-between;
  margin-top: 9px; font-size: 12.5px; color: var(--muted);
}
.ribbonkey {
  display: flex; gap: 15px; justify-content: center;
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
}
.ribbonkey span { display: flex; align-items: center; gap: 6px; }
.ribbonkey i { width: 11px; height: 11px; border-radius: 4px; display: block; }

/* ---------- developmental leap ---------- */
/* Context, not an alert — it explains the days around it and prescribes nothing. */

.leap {
  background: var(--leap-bg);
  border-radius: 14px;
  padding: 13px 15px;
}
.leap b { font-size: 14.5px; color: var(--violet); }
.leap span { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-top: 6px; }

/* ---------- correcting an earlier day ---------- */

.pastbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--line);
}
.pastbar b { font-size: 16px; margin-inline-start: auto; }

.notice.assumed { border-inline-start-color: var(--indigo); }
.notice.assumed b { color: var(--indigo); }

.daycard, .daystub {
  display: block;
  width: 100%;
  text-align: start;
  cursor: pointer;
}
.daycard:active, .daystub:active { background: var(--surface-2); }
.daystub { border-style: dashed; }
.stubhint { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.pill.muted { color: var(--muted); }

.leapnote {
  font-size: 13.5px;
  color: var(--violet);
  line-height: 1.55;
  margin-top: 8px;
  padding-inline-start: 11px;
  border-inline-start: 2px solid var(--leap-line);
}

.chip {
  font-size: 12px;
  color: var(--violet);
  border: 1px solid var(--leap-line);
  background: var(--leap-bg);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.field .static.unset { color: var(--faint); font-weight: 400; }
.sheet-field input[type="date"] {
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  color: var(--amber);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 150px;
  text-align: end;
}
.sheet-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(35%) saturate(700%) hue-rotate(340deg);
  cursor: pointer;
}

/* ---------- notices ---------- */

.notice {
  background: var(--surface);
  border-inline-start: 3px solid var(--warn);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
}
.notice b { display: block; font-size: 14.5px; font-weight: 700; color: var(--warn); }
.notice span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-top: 4px; }

/* ---------- stats ---------- */

.stats .lbl { font-size: 13px; color: var(--muted); }
.stats .val { font-size: 17px; font-weight: 700; margin-top: 3px; }

/* ---------- timeline ---------- */

/* A spine, not a table. The ruled rows were the other half of what made this read
   as a spreadsheet; a thread with dots on it reads as a day. */
.spine { position: relative; display: flex; flex-direction: column; }
.spine::before {
  content: "";
  position: absolute;
  inset-block: 22px;
  inset-inline-start: 12px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}

.tl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* These rows are the edit affordance, so they have to clear the 44px tap
     minimum — at the old padding they came out 38–39px. */
  /* Two lines of numbers now, so the row is taller than the 46px tap floor. */
  min-height: 54px;
  padding: 4px 0;
  text-align: start;
  border-radius: 10px;
}
/* Each step wears its own mark — the same four the status card uses, plus a
   sunrise for the morning wake — on a disc of the page colour that masks the
   thread behind it. */
.tl i {
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
  background: var(--bg); z-index: 1;
  display: grid; place-items: center;
}
/* A dashed ring means the app filled this in, not her. */
.tl i.auto { border: 1.5px dashed currentColor; }
.tl .time { font-size: 15.5px; font-weight: 600; min-width: 48px; }
.tl .lab { font-size: 15.5px; color: var(--ink-2); }
/* The two numbers stop competing: how long it runs reads first, in ink; the
   stretch it covers sits under it, small and quiet. */
.tl .tag {
  margin-inline-start: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  line-height: 1.3; white-space: nowrap; padding-inline-start: 8px;
}
.tl .tag b { font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tl .tag i { font-style: normal; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
/* Done, planned and now are told apart by the COLOUR of the text — never by fading
   the row. Fading took the icons down with it, and since most of a day is either
   past or still ahead, the whole list came out washed out. Each of the three
   clears AA on its own. */
.tl.past .time, .tl.past .lab, .tl.past .tag b { color: var(--muted); }
.tl.editable { cursor: pointer; }
.tl.editable:active { background: var(--surface-2); }
.tl .pencil { display: flex; color: var(--faint); margin-inline-start: 8px; flex-shrink: 0; }

.autolegend {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  padding: 10px 0 0;
}
/* Not logged yet — a projection you can tap to fill in. Quieter than a past step,
   because a plan is less certain than a record. */
.tl.ghosted .time, .tl.ghosted .lab, .tl.ghosted .tag b { color: var(--faint); }
/* Last, so the step we are actually in wins over past and plan alike.
   The row is tinted from its start edge in proportion to how far through it we
   are — it becomes its own progress bar — and a dot rides the thread at the exact
   minute, the same marker the day ribbon uses at the top of the screen. */
.tl.now { border-radius: 12px; }
.tl.now .time { color: var(--amber); }
.tl.now .lab { color: var(--ink); font-weight: 500; }
.tl.now .tag b { color: var(--ink-2); }
.tl.now .tag i { color: var(--amber); font-weight: 500; }
.tl.now > i.mark, .tl.now > i:not(.nowdot) { background: var(--amber-soft); }

.tl .thread {
  position: absolute;
  inset-inline-start: 12px;
  top: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--amber);
  z-index: 0;
}
/* The note is indented away from the thread, so its own segment reaches back to
   the line and bridges the note's margins as well as its box. */
.rownote .thread {
  position: absolute;
  inset-inline-start: -27px;
  top: -2px;
  bottom: -8px;
  width: 2px;
  border-radius: 2px;
  background: var(--amber);
}

/* A note about one step, sitting under that step. Indented to the time column so
   it reads as belonging to the row above, with room left to say something. */
.rownote {
  position: relative;
  margin: -2px 0 8px;
  padding: 9px 13px;
  margin-inline-start: 36px;
  border-radius: 12px;
  background: var(--surface);
  border-inline-start: 3px solid var(--warn);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.rownote.bad { border-inline-start-color: var(--bad); }
.rownote b { display: block; font-size: 13.5px; font-weight: 600; color: var(--warn); }
.rownote.bad b { color: var(--bad); }
.rownote span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }

/* ---------- day bar ---------- */

.daybar {
  display: flex;
  gap: 2px;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
  background: var(--surface);
}
.daybar span { display: block; min-width: 2px; }
.barends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- history ---------- */

.pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill.good { color: var(--good); }
.pill.warn { color: var(--warn); }
.pill.bad { color: var(--bad); }

.metrics {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  justify-content: center;
}
.metric[data-trend]:active { background: var(--surface-2); }
.metrics .lbl { font-size: 12px; color: var(--muted); }
.metrics .val { font-size: 16.5px; font-weight: 700; }

.vsavg {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--line);
}

/* The card carries its verdict, not just a pill in the corner. */
.card.score-good { border-inline-start: 3px solid var(--good); }
.card.score-warn { border-inline-start: 3px solid var(--warn); }
.card.score-bad  { border-inline-start: 3px solid var(--bad); }

/* ---------- trend chart ---------- */

.trend { display: flex; flex-direction: column; gap: 14px; }

/* Fixed height whether it holds a chart or the "not enough data yet" message —
   otherwise switching measures resizes the sheet under your thumb. */
.chart { display: flex; gap: 10px; align-items: stretch; height: 130px; }
.chart svg { flex: 1; min-width: 0; height: 130px; overflow: visible; }
.chart-empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  padding: 0 20px;
}
.chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  padding: 8px 0;
}

.trend-stats { display: flex; gap: 10px; }
.trend-stats > div {
  flex: 1;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trend-stats span { font-size: 11.5px; color: var(--muted); }
.trend-stats b { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.trend-sub { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: -6px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* Constant weight: if the selected chip got bolder it would widen, reflowing the
   whole row and changing the sheet's height as you tap between measures. */
.chips .chip {
  cursor: pointer;
  min-height: 36px;
  padding: 6px 11px;
  font-weight: 500;
  color: var(--ink-2);
  border-color: transparent;
  background: var(--surface-2);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chips .chip.on { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); }

.find { display: flex; gap: 9px; margin-top: 12px; }
.find i { width: 8px; height: 8px; border-radius: 999px; margin-top: 7px; flex-shrink: 0; }
.find b { font-size: 14.5px; font-weight: 600; line-height: 1.4; display: block; }
.find span { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; display: block; margin-top: 3px; }

.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bars .rail { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bars .rail > span { display: block; height: 100%; border-radius: 999px; }

/* ---------- settings ---------- */

.mini { display: flex; gap: 3px; height: 16px; margin-top: 12px; }
.mini span { display: block; border-radius: 2px; min-width: 2px; }

/* Every term is labelled: a clock time and a duration are both "11:30" here, so
   the label is what tells them apart. */
.eq {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 8px; margin-top: 14px;
}
.eq .term { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eq .term b { font-size: 17.5px; font-weight: 700; }
.eq .term i {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap;
}
.eq .op { color: var(--muted); font-size: 16px; padding-top: 3px; }
.eq .out b { color: var(--amber); }
.eq .out i { color: var(--amber); opacity: .85; }

.fields { background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.field { padding: 6px 15px 0; border-bottom: 1px solid var(--hairline); }
.field:last-child { border-bottom: 0; }
.field .line { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.field .flabel { font-size: 16px; font-weight: 600; }
.field .help { font-size: 13.5px; color: var(--muted); line-height: 1.55; padding-bottom: 13px; }

.stepper { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.stepper button {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 19px; line-height: 1; display: grid; place-items: center;
}
.stepper button:active { background: var(--line); }
.stepper .v { min-width: 68px; text-align: center; font-size: 16.5px; font-weight: 700; color: var(--amber); }
.field .static { margin-inline-start: auto; font-size: 16.5px; font-weight: 700; color: var(--amber); }

.sw {
  width: 46px; height: 27px; border-radius: 999px;
  display: flex; align-items: center; padding: 3px; flex-shrink: 0;
  margin-inline-start: auto; background: var(--line); justify-content: flex-start;
  transition: background .15s ease;
}
.sw[aria-checked="true"] { background: var(--amber); justify-content: flex-end; }
.sw i { width: 21px; height: 21px; border-radius: 999px; background: var(--faint); display: block; }
.sw[aria-checked="true"] i { background: var(--amber-ink); }

.foot { font-size: 12px; color: var(--faint); line-height: 1.6; text-align: center; padding-top: 4px; }
/* Visible build number, so it is obvious which version is actually on the phone. */
.ver {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  background: var(--surface-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}
.empty { font-size: 15px; color: var(--muted); line-height: 1.6; text-align: center; padding: 32px 12px; }

/* The empty-state example: clearly not her real data. */
.card.sample { border-style: dashed; border-color: var(--line-2); background: transparent; }

.preview-list { margin: 13px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 9px; }
.preview-list li { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.preview-list li::marker { color: var(--amber); }

/* A quieter tier than .ghost, for actions that are not part of the daily rhythm. */
.linkbtn {
  align-self: center;
  font-size: 14px;
  color: var(--ink-2);
  padding: 10px 4px;
  min-height: var(--tap);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
}
.linkbtn:active { color: var(--amber); }
.linkbtn.quiet { font-size: 13px; color: var(--faint); }

.rare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
  padding-top: 4px;
  border-top: 1px solid var(--hairline);
}

/* ---------- edit sheet ---------- */

.sheet-host[hidden] { display: none; }
.sheet-host { position: fixed; inset: 0; z-index: 30; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 480px;
  background: var(--surface);
  border-radius: 26px 26px 0 0;
  padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet.fresh { animation: sheet-in .18s ease-out; }
@keyframes sheet-in {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sheet-grip {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--line); margin: 4px auto 6px;
}
.sheet-title { font-size: 19px; font-weight: 700; }
.sheet-hint { font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: -6px; }

.sheet-field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 56px;
}
.sheet-field span { font-size: 16px; color: var(--ink-2); }
.sheet-field input[type="time"] {
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  color: var(--amber);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 108px;
  text-align: end;
}
/* Chrome hides its own indicator awkwardly in RTL; keep it visible and tappable. */
.sheet-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(35%) saturate(700%) hue-rotate(340deg);
  cursor: pointer;
}

.sheet-inline {
  align-self: flex-start;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: -6px;
}
.sheet-err {
  font-size: 13px;
  color: var(--bad);
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.45;
}
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.ghost.danger { color: var(--bad); border-color: var(--err-line); }

/* ---------- toast ---------- */

#toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(76px + env(safe-area-inset-bottom));
  margin: 0 auto;
  width: max-content;
  max-width: 88%;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 20;
}
#toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}