/* Palette and contrast values carried over from the mockup, where the whole
   thing was measured: 407 text elements, 0 failing WCAG AA, worst 4.64:1. */
:root {
  --ground:#FCFBF8; --surface:#FEFDFB; --surface-2:#F9F7F3; --surface-3:#F1EDE5;
  --ink:#241F1B; --ink-2:#544B42; --ink-3:#6E655A;
  --line:#E9E3D8; --line-2:#D8CFC0;
  --teal:#17635E; --teal-soft:#EFF5F5;
  --gold:#94670A; --gold-soft:#FBF3E0; --gold-ink:#6A460A;
  --magenta:#6B0964; --magenta-soft:#F6EAF5;
  --peri:#5B5EB5; --peri-soft:#EEEFF6;
  --go:#33682F; --go-soft:#EDF3EC;
  --stop:#A8422A; --stop-soft:#FAEDE9;
  /* --stop is tuned for the plain background. On a tinted card in dark mode it
     lands at 4.18:1, just under AA, so warning text on a tint uses this instead
     rather than shifting --stop everywhere and disturbing surfaces already
     signed off. */
  --stop-on-tint:#A8422A;
  /* Text that sits ON a filled accent button. In dark mode the accents
     invert to light tints, where white text measures 2.95:1 — well under
     AA — so the label goes dark there instead. */
  --on-accent:#FFFFFF;
  --bp-stop:#992D2D; --heart:#B3243B;
  --hab1:#BE6A55; --hab1s:#FDF7F4; --hab2:#D9A62A; --hab2s:#FDFAF0;
  --hab3:#2F6B2A; --hab3s:#F5FAF4; --hab4:#12938A; --hab4s:#F5FAFA;
  --hab5:#6F72CB; --hab5s:#F6F7FC; --hab6:#A82C9C; --hab6s:#FBF4FA;
  --sky-1:#9FCCE6; --sky-2:#F8E6C4; --sun:#F0A62F; --cloud:#FFFFFF; --sky-ink:#1E3A4C;
  --display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#161311; --surface:#1B1714; --surface-2:#241F1B; --surface-3:#312A24;
    --ink:#F6F1EA; --ink-2:#C7BCAF; --ink-3:#A79C8E; --line:#312A24; --line-2:#443B32;
    --teal:#2FA79C; --teal-soft:#1B2A29; --gold:#C79A3A; --gold-soft:#2A2318; --gold-ink:#E8C888;
    --magenta:#C464B8; --magenta-soft:#2A1B29; --peri:#8A8DDA; --peri-soft:#1F1F2E;
    --go:#5E9E56; --go-soft:#1C2419; --stop:#D06B4E; --stop-soft:#2C1E19;
    --stop-on-tint:#E28A6C;
    --on-accent:#141110;
    --bp-stop:#E0655C; --heart:#E86E80;
    --hab1:#CF7E63; --hab1s:#241A16; --hab2:#C79A3A; --hab2s:#221D14;
    --hab3:#4E8C46; --hab3s:#171E15; --hab4:#019589; --hab4s:#162220;
    --hab5:#7378C9; --hab5s:#1A1A26; --hab6:#AF4CA3; --hab6s:#221722;
    --sky-1:#1C2C3C; --sky-2:#2E2519; --sun:#E3AC45; --cloud:#7E8D9C; --sky-ink:#DCE7EF;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--ground); color: var(--ink); font-family: var(--ui);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
h1,h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
button { font-family: var(--ui); cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.screen { max-width: 480px; margin: 0 auto; padding: 10px 16px 84px; }
.stack { display: flex; flex-direction: column; gap: 13px; }

/* ------------------------------------------------------------ tab bar --- */
.pane { display: none; }
.pane.on { display: block; }
.scr-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 10px 2px 0; }
.scr-head h2 { margin: 0; font-size: 24px; }
.scr-head span { font-size: 12px; color: var(--ink-3); }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--ground); border-top: 1px solid var(--line);
  padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); }
/* Blurring what scrolls behind the bar keeps text from showing through it
   without making the bar itself opaque enough to feel like a wall. */
@supports (backdrop-filter: blur(12px)) {
  .tabbar { background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: blur(12px); }
}
.tab { flex: 1; background: none; border: none; padding: 7px 2px 6px; border-radius: 11px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .01em; color: var(--ink-3); }
.tab.on { color: var(--teal); background: var(--teal-soft); }
.tab span { display: block; }

/* ------------------------------------------------------- small print --- */
.fine { margin: 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.fine b { color: var(--ink-2); font-weight: 650; }

/* ------------------------------------------------------------- greeting -- */
.greet { padding: 12px 2px 2px; }
.greet h1 { font-size: 24px; margin: 0; line-height: 1.2; }
.greet h1::after { content: "\2726"; color: var(--gold); font-size: 14px; margin-left: 7px; vertical-align: 3px; }
.greet .date { font-size: 12.5px; color: var(--ink-3); display: block; margin-top: 2px; }
.greet .todo { display: flex; gap: 8px; margin-top: 11px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.greet .todo b { color: var(--ink); font-weight: 650; }

/* -------------------------------------------------------------- day bar -- */
.daybar { display: flex; align-items: center; gap: 6px; }
.daybar button { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  width: 38px; height: 38px; border-radius: 11px; font-size: 19px; line-height: 1; flex: none; }
.daybar button:disabled { opacity: .35; }
.dayname { flex: 1; position: relative; text-align: center; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 8px; font-size: 13.5px; font-weight: 650; }
.dayname input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.daybar.past .dayname { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.backfill { font-size: 12px; color: var(--gold-ink); font-weight: 650; }

/* ----------------------------------------------------------------- card -- */
.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; }
.card.tint-points { background: var(--teal-soft); border-color: transparent; }
.card.tint-bp { background: var(--magenta-soft); border-color: transparent; }
.card.tint-gold { background: var(--gold-soft); border-color: transparent; }
.card.tint-blush { background: var(--peri-soft); border-color: transparent; }
/* Today's cards hand-place their own spacing. The later screens have cards with
   many children, so those get an even rhythm instead of a margin on each one. */
#pane-trends .card, #pane-habits .card, #pane-food .card, #pane-crave .card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
#pane-trends input, #pane-habits input, #pane-food input, #pane-crave input {
  font-family: var(--ui); font-size: 16px; padding: 11px 12px; width: 100%; min-width: 0;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); color: var(--ink);
}
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.big { font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.big small { font-size: 15px; font-weight: 450; color: var(--ink-2); margin-left: 6px; }
.sub { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 9px 0 7px; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--teal); }
.bar > i.over { background: var(--stop); }
/* The weekly pool sits under the daily bar and must read as secondary to it —
   thinner, quieter, and in a different colour so the two are never confused. */
.bar.thin { height: 4px; margin: 6px 0 0; }
.bar.thin > i { background: var(--peri); }
.weekly .rowsplit > .sub:first-child { white-space: nowrap; }
.wk { text-align: right; white-space: nowrap; }
.wk b { color: var(--ink); font-weight: 650; }
.wk.over, .wk.over b { color: var(--stop-on-tint); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Grid items default to min-width:auto, so these cards refused to shrink below
   the natural width of the number inputs inside them and burst out of the
   column. Every flex/grid child that contains an input needs this. */
.row2 > * { min-width: 0; }
.rowsplit { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ------------------------------------------------------------ walk card -- */
.walk { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sky { position: relative; height: 104px; }
.sky svg { display: block; width: 100%; height: 100%; }
.sky .temps { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); text-align: right; color: var(--sky-ink); line-height: 1; }
.sky .temps .now { font-size: 40px; font-weight: 300; letter-spacing: -.03em; display: block; font-variant-numeric: tabular-nums; }
.sky .temps .feels { font-size: 12.5px; font-weight: 600; opacity: .85; display: block; margin-top: 5px; }
.sky .cond { position: absolute; left: 15px; bottom: 11px; color: var(--sky-ink); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .8; }
.walkbody { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 10px; }
.verdict { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.v-go { color: var(--go); } .v-soon { color: var(--gold-ink); } .v-wait { color: var(--stop); }
.window { font-size: 27px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.window b { font-weight: 600; }
.wnote { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; margin: 0; }
.wnote b { color: var(--ink); font-weight: 650; }
.wstats { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
.wstats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wstats span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.wstats b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.wstats i { font-size: 10px; font-style: normal; color: var(--ink-2); white-space: nowrap; }

/* --------------------------------------------------------------- habits -- */
.habits { display: flex; flex-wrap: wrap; gap: 7px; }
.hchip { font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 20px;
         border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
         display: inline-flex; align-items: center; gap: 6px; }
.hchip::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--hc, var(--ink-3)); flex: none; }
.hchip[aria-pressed="true"] { background: var(--hcs); border-color: transparent; color: var(--ink); }

/* ----------------------------------------------------------------- food -- */
.meal { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.meal:last-of-type { border-bottom: none; }
.meal .t { flex: 1; min-width: 0; }
.meal .t b { font-size: 14.5px; font-weight: 600; display: block; }
.meal .t span { font-size: 12px; color: var(--ink-2); }
.pts { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pts small { font-size: 11px; color: var(--ink-2); font-weight: 500; margin-left: 2px; }
.del { background: none; border: none; color: var(--ink-3); font-size: 16px; padding: 2px 4px; line-height: 1; }
.del:hover { color: var(--stop); }
.quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.qchip { font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 20px;
         border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }

/* ---------------------------------------------------------------- forms -- */
.btn { font-size: 14.5px; font-weight: 700; background: var(--teal); color: var(--on-accent);
       border: none; border-radius: 12px; padding: 12px; width: 100%; }
.btn.ghost { background: none; color: var(--teal); border: 1px solid var(--line-2); }
.btn.mag { background: var(--magenta); }
.btn.mini { width: auto; padding: 7px 14px; font-size: 12.5px; border-radius: 9px; }
.inline { display: flex; gap: 8px; align-items: center; min-width: 0; }
.inline input { flex: 1 1 0; min-width: 0; width: 100%; font-family: var(--ui); font-size: 16px; font-weight: 600;
  padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- login -- */
.login { max-width: 380px; margin: 0 auto; padding: 64px 22px; display: flex; flex-direction: column; gap: 14px; }
.login h1 { font-size: 30px; margin: 0 0 4px; }
.login p { margin: 0; color: var(--ink-2); font-size: 15px; }
.login .fields { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.login input { font-family: var(--ui); font-size: 16px; padding: 12px 13px; border: 1px solid var(--line-2);
  border-radius: 11px; background: var(--surface); color: var(--ink); width: 100%; }
.err { font-size: 13.5px; color: var(--stop); margin: 0; }
.muted { font-size: 12.5px; color: var(--ink-2); }

/* Above the sheets (z 60–65): gallery actions toast while a sheet is still
   closing, and a toast behind a dimmed overlay reads as a silent failure. */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: var(--ground); padding: 11px 18px; border-radius: 22px;
  font-size: 13.5px; font-weight: 600; z-index: 80; max-width: 90vw; }

.hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Three labelled fields plus a button is the tightest row in the app; let the
   button drop below them rather than squeeze on a narrow phone. */
#bpForm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.bpfields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
            flex: 1 1 200px; min-width: 0; }
.bpfields label { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); }
.bpfields input { font-family: var(--ui); font-size: 16px; font-weight: 600;
  width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--line-2);
  border-radius: 10px; background: var(--surface); color: var(--ink);
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ food sheet -- */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(36,31,27,.42);
         display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { background: var(--ground); width: 100%; max-width: 480px; max-height: 92vh;
              border-radius: 20px 20px 0 0; display: flex; flex-direction: column; min-width: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
              padding: 15px 16px 10px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 20px; }
.sheet-x { background: none; border: none; font-size: 26px; line-height: 1; color: var(--ink-2); padding: 0 4px; }
.sheet-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.sheet-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
              border-top: 1px solid var(--line); background: var(--surface-2); }

/* This list is by type, so every new input type has to be added by hand. A
   date field left off it rendered as a 13px white box with black text inside a
   dark sheet — the browser default, not the theme. */
.sheet input[type="text"], .sheet input[type="search"], .sheet input[type="number"],
.sheet input[type="date"], .sheet select {
  font-family: var(--ui); font-size: 16px; padding: 11px 12px; width: 100%; min-width: 0;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); color: var(--ink);
}
/* Safari ignores most of the above on a date field until appearance is cleared,
   and `color-scheme` is what makes the native picker itself come up dark rather
   than as a white sheet over a dark app. Scoped to this input so nothing
   already signed off changes. */
.sheet input[type="date"] {
  -webkit-appearance: none; appearance: none; color-scheme: light dark;
  min-height: 43px; line-height: 1.2;
}
/* -------------------------------------------------- describe a meal ------ */
.describe { display: flex; flex-direction: column; gap: 9px; }
.describe.hide { display: none; }
/* The type list above is by input type, so a textarea gets none of it. */
.sheet textarea {
  font-family: var(--ui); font-size: 16px; line-height: 1.45; padding: 11px 12px;
  width: 100%; min-width: 0; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--surface); color: var(--ink); resize: vertical;
}
.sheet textarea::placeholder { color: var(--ink-3); }

/* A labelled rule, so the search box below reads as the other option rather
   than as the next step. */
.orline { display: flex; align-items: center; gap: 10px; color: var(--ink-3);
          font-size: 11.5px; }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.est-top { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; margin-bottom: 4px; }
.est-total { font-size: 32px; font-weight: 300; line-height: 1; letter-spacing: -.02em;
             color: var(--teal); font-variant-numeric: tabular-nums; }
.est-total small { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.est-meal { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: right;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); }
.est-rows { display: flex; flex-direction: column; }
.est-row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
           border-bottom: 1px solid var(--line); min-width: 0; }
.est-row:last-child { border-bottom: none; }
.est-body { flex: 1 1 auto; min-width: 0; }
.est-body b { display: block; font-size: 14.5px; font-weight: 600; }
.est-body span { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.est-body .est-note { color: var(--ink-3); font-style: italic; }
.est-p { flex: none; font-size: 17px; font-weight: 700; white-space: nowrap;
         font-variant-numeric: tabular-nums; }
.est-p small { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.est-x { flex: none; background: none; border: none; font-size: 20px; line-height: 1;
         color: var(--ink-3); padding: 4px 2px; }
.est-warn { margin: 2px 0 4px; color: var(--stop); }
#mealResult { display: flex; flex-direction: column; gap: 9px;
  border-top: 1px solid var(--line); padding-top: 11px; }
#mealResult.hide { display: none; }

.hits { display: flex; flex-direction: column; gap: 0; }
.hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
       background: none; border: none; border-bottom: 1px solid var(--line); padding: 10px 2px;
       text-align: left; color: var(--ink); }
.hit:last-child { border-bottom: none; }
.hit b { font-size: 14.5px; font-weight: 600; }
.hit span { font-size: 12px; color: var(--ink-2); display: block; }
.hit .p { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* #newFood is one child of the flex sheet body, so its own rows get no gap
   from the parent and the inputs stack flush against each other. */
#newFood { display: flex; flex-direction: column; gap: 10px; }
#newFood.hide { display: none; }

.nutgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.nutgrid > * { min-width: 0; }
.nutgrid label, .field-row label { display: flex; flex-direction: column; gap: 4px; min-width: 0;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-row > * { min-width: 0; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.check input { margin-top: 3px; accent-color: var(--teal); flex: none; }
.check b { color: var(--ink); }
.manual { display: flex; flex-direction: column; gap: 8px; }

.livecalc { background: var(--teal-soft); border-radius: 12px; padding: 12px 14px;
            display: flex; align-items: center; gap: 14px; min-width: 0; }
.livecalc .n { font-size: 32px; font-weight: 300; line-height: 1; letter-spacing: -.02em;
               color: var(--teal); font-variant-numeric: tabular-nums; flex: none; }
.livecalc .n small { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.livecalc .why { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; min-width: 0; }
.livecalc .why b { color: var(--ink); font-weight: 650; }

.moods .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: 10.5px; }
.moodrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 5px; }
.moodrow em { font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
              color: var(--ink-2); font-weight: 700; width: 58px; flex: none; padding-right: 6px; }
.mchips { display: flex; flex-wrap: wrap; gap: 5px; }
.mchip { font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 20px;
         border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.mchip[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); color: var(--on-accent); }
.mchip.solo { border-style: dashed; }
.mchip.unsure[aria-pressed="true"], .mchip.skip[aria-pressed="true"] { background: var(--ink-3); border-color: var(--ink-3); color: var(--on-accent); }
.moodpick { font-size: 10.5px; color: var(--ink-2); font-style: italic; }

/* ------------------------------------------------------------- trends --- */
.chart-empty { margin: 6px 0; font-size: 13px; color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; color: var(--ink-2);
  padding-top: 2px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend b { color: var(--ink); font-weight: 700; }
.legend i { flex: none; }
.legend .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.legend .ln { width: 13px; height: 2.4px; border-radius: 2px; background: var(--teal); }
.legend .ln.dash { height: 0; border-top: 1px dashed var(--line-2); border-radius: 0; background: none; }
.legend .sw { width: 9px; height: 9px; border-radius: 2px; }
.legend .sw.gold { background: var(--gold); }
.legend .sw.grey { background: var(--surface-3); }
.legend .sw.sys { background: var(--bp-stop); }
.legend .sw.dia { background: var(--magenta); }

.projline { margin: 0; font-size: 15px; line-height: 1.35; }
.projline b { font-size: 19px; font-weight: 650; letter-spacing: -.01em; display: block; }
.projline span { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.45; margin-top: 5px; }

.ms-wrap { border-top: 1px solid var(--line); padding-top: 9px; }
.ms-wrap summary { font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ms-wrap summary span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ms-wrap summary::-webkit-details-marker { display: none; }
.ms { display: flex; align-items: center; gap: 11px; padding: 7px 0;
  border-bottom: 1px solid var(--line); }
.ms:last-child { border-bottom: none; }
.ms-w { font-size: 19px; font-weight: 400; font-variant-numeric: tabular-nums; min-width: 58px;
  letter-spacing: -.01em; }
.ms-w small { font-size: 10px; color: var(--ink-2); margin-left: 2px; font-weight: 600; }
.ms-t b { font-size: 13.5px; font-weight: 650; display: block; }
.ms-t > span { font-size: 11px; color: var(--ink-2); }

.insight { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; }
.insight p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.insight p b { color: var(--ink); font-weight: 650; }
.insight .tick { flex: none; width: 11px; height: 11px; border-radius: 3px; margin-top: 3px; }
.insight .tick.teal { background: var(--teal); }
.insight .tick.gold { background: var(--gold); }
.insight .tick.magenta { background: var(--magenta); }

.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.photos > * { min-width: 0; }
.photo-slot { aspect-ratio: 3 / 4; border-radius: 9px; border: 1px dashed var(--line-2);
  background: var(--surface); display: flex; align-items: flex-end; padding: 5px;
  background-size: cover; background-position: center; }
.photo-slot.has { border-style: solid; border-color: transparent; }
.photo-slot span { font-size: 9px; color: var(--ink-3); font-weight: 650; }
.photo-slot.has span { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

.bpref { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); }
.bpref b { color: var(--ink); font-weight: 650; }
.bpref i { font-style: normal; font-weight: 700; }
.cat-normal { color: var(--go); }
.cat-elevated { color: var(--gold-ink); }
.cat-stage1 { color: var(--stop-on-tint); }
.cat-stage2, .cat-crisis { color: var(--bp-stop); }
.cat-elev { color: var(--gold-ink); }
.cat-s1 { color: var(--stop-on-tint); }
.cat-s2, .cat-crisis { color: var(--bp-stop); }

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bplog { border-collapse: collapse; width: 100%; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.bplog th { text-align: left; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: 0 9px 5px 0; white-space: nowrap; }
.bplog td { padding: 6px 9px 6px 0; border-top: 1px solid var(--line); white-space: nowrap;
  color: var(--ink-2); }
.bplog td b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------- habits --- */
.card.hab { background: var(--hcs); border-color: transparent; }
.hab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hab-head b { font-size: 15px; font-weight: 650; display: block; }
.hab-head span { font-size: 11.5px; color: var(--ink-2); display: block; line-height: 1.4; margin-top: 2px; }
.sqrow { display: flex; gap: 3px; }
.sqrow .sq { flex: 1; height: 22px; border-radius: 4px; background: var(--surface-3); min-width: 0; }
.sqrow .sq.on { background: var(--hc); }
.sqrow .sq.part { background: var(--hc); opacity: .42; }
/* Not scheduled. Hollow, so it reads as "no square here" rather than a pale
   miss — the whole point of a schedule is that these days don't count.
   The dash is --ink-3 held back to about half strength: at --line-2 it sat at
   1.55:1 in dark mode, near enough to a miss square (1.2:1) that the two
   became one shape, which is exactly the confusion this is meant to prevent. */
.sqrow .sq.off { background: transparent; box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--ink-3) 55%, transparent); }

.daycap { display: flex; gap: 3px; margin-top: 4px; }
.daycap span { flex: 1; min-width: 0; text-align: center; font-size: 9px;
  font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }

/* The schedule reads as part of the sentence under the name, and opens the day
   picker when tapped. Dotted underline so it looks changeable without becoming
   a button sitting on every card. */
.hab-head .sched { font: inherit; color: var(--ink-2); background: none; border: 0;
  padding: 0; cursor: pointer; border-bottom: 1px dotted var(--ink-3); }
.hab-head .sched[aria-expanded="true"] { color: var(--ink); border-bottom-style: solid; }

/* Seven day toggles. Selected uses the soft tint with ink text (15:1 on every
   habit colour); a solid fill fails AA on four of the six, so the colour lives
   in the border instead. */
.dayrow { display: flex; gap: 5px; margin-top: 10px; }
.dayrow button { flex: 1; min-width: 0; font-family: var(--ui); font-size: 12.5px;
  font-weight: 700; padding: 9px 0; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); }
.dayrow button[aria-pressed="true"] { background: var(--hcs); border: 2px solid var(--hc);
  color: var(--ink); }

/* --------------------------------------------------------------- food --- */
.fl { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.fl:last-child { border-bottom: none; }
.fl-t { min-width: 0; }
.fl-t b { font-size: 14.5px; font-weight: 600; display: block; }
.fl-t > span { font-size: 11.5px; color: var(--ink-2); display: block; }
.fl-a { display: flex; align-items: center; gap: 7px; flex: none; }
.fl-p { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-p small { font-size: 9.5px; font-weight: 600; color: var(--ink-2); margin-left: 1px; }
.chol { font-size: 10.5px; font-weight: 650; }
.chol.good { color: var(--heart); }
.chol.bad { color: var(--stop); }
.mini-btn { font-size: 11.5px; font-weight: 650; padding: 5px 10px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--teal); }
.mini-btn.on { background: var(--teal); border-color: var(--teal); color: var(--on-accent); }
.mini-btn:disabled { opacity: .55; }

.dday { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dday:last-child { border-bottom: none; }
.dday .sub b { color: var(--ink); font-weight: 650; }
.dent { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  color: var(--ink-2); padding: 2px 0; }
.dent i { font-style: normal; color: var(--ink-3); font-size: 11.5px; }

/* ----------------------------------------------------------- cravings --- */
.crave { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  margin-bottom: 9px; overflow: hidden; }
.crave summary { display: flex; align-items: center; gap: 12px; padding: 10px 13px 10px 10px;
  cursor: pointer; list-style: none; }
.crave summary::-webkit-details-marker { display: none; }
.crave .art { flex: none; width: 52px; height: 57px; border-radius: 10px; overflow: hidden;
  display: block; }
.crave .art svg { width: 100%; height: 100%; display: block; }
.crave .art.blank { background: var(--surface-3); }
.crave-t { flex: 1; min-width: 0; }
.crave-t b { font-size: 16px; font-weight: 650; display: block; }
.crave-t > span { font-size: 11.5px; color: var(--ink-3); }
.crave .chev { color: var(--ink-3); font-size: 19px; transition: transform .15s; flex: none; }
.crave[open] .chev { transform: rotate(90deg); }
.crave-body { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 9px; }
.crave-note { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  border-left: 2px solid var(--line-2); padding-left: 10px; }
.swap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.swap.worked { border-color: var(--go); }
.swap.nope { opacity: .6; }
.swap-h { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.swap-h b { font-size: 14px; font-weight: 650; line-height: 1.3; }
.swap-p { font-size: 12px; font-weight: 700; color: var(--teal); white-space: nowrap; flex: none; }
.swap p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.swap-n { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px !important;
  color: var(--ink-3) !important; }
.swap-n .hrt { color: var(--heart); font-style: normal; flex: none; }
.swap-a { display: flex; gap: 6px; margin-top: 8px; }

/* --------------------------------------------------------- snap label --- */
.addrow { display: flex; gap: 8px; }
.addrow > .btn { min-width: 0; }
#snapLabel { flex: none; width: auto; padding-left: 14px; padding-right: 14px; white-space: nowrap; }
#newFoodToggle { flex: 1; }

/* ------------------------------------------------------------ ask card --- */
/* The mockup's design, made multi-turn: questions in teal, answers in ink,
   the input bar living inside the card. */
.askcard { background: var(--teal-soft); border: 1px solid transparent; border-radius: 16px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
#askThread { display: flex; flex-direction: column; gap: 9px; max-height: 46vh; overflow-y: auto; }
.ask-q { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 650;
  color: var(--teal); line-height: 1.35; }
.ask-q svg { flex: none; margin-top: 2px; }
.ask-a { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ask-a b { color: var(--ink); font-weight: 650; }
.ask-a.thinking { color: var(--ink-3); font-style: italic; }
.ask-a.ask-err { color: var(--stop-on-tint); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--teal);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px;
  padding: 7px 12px; text-align: left; }
.ask-bar { display: flex; gap: 6px; background: var(--surface); border-radius: 11px;
  padding: 4px 4px 4px 12px; align-items: center; }
.ask-bar input { flex: 1; min-width: 0; border: none; background: none; font-family: var(--ui);
  font-size: 14px; color: var(--ink); padding: 8px 0; outline: none; }
.ask-bar input::placeholder { color: var(--ink-3); }
#askGo { flex: none; width: 34px; height: 34px; border-radius: 9px; border: none;
  background: var(--teal); color: var(--on-accent); font-size: 20px; line-height: 1; }
.mini-btn.edit { color: var(--ink-2); padding: 5px 9px; }

/* ------------------------------------------------------- meal gallery --- */
/* Library | Gallery, one tap apart. */
.seg { display: flex; gap: 4px; background: var(--surface-3); border-radius: 12px; padding: 3px; }
.seg button { flex: 1; border: none; background: none; color: var(--ink-2); font-size: 13px;
  font-weight: 650; padding: 8px 6px; border-radius: 9px; }
.seg button.on { background: var(--surface); color: var(--teal); box-shadow: 0 1px 2px rgba(36,31,27,.09); }
.vstack { display: flex; flex-direction: column; gap: 13px; min-width: 0; }

.chiprow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin: 0 -2px; }
.chiprow::-webkit-scrollbar { height: 0; }
.chip { flex: none; font-size: 12px; font-weight: 650; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }
.chip.on { background: var(--teal); border-color: var(--teal); color: var(--on-accent); }
.chip.pts { border-style: dashed; }
.chip.pts.on { border-style: solid; }

/* Two across, deliberately: her own lesson from the craving tiles is that
   detail needs size, and the whole point here is that the food looks good. */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gtile { display: flex; flex-direction: column; gap: 5px; background: none; border: none;
  padding: 0; text-align: left; min-width: 0; }
.gtile .shot { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line); display: block; }
.gtile .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Points ride in a solid pill, never as bare text on the photo — the photo is
   an unknown background and text over it can land anywhere on the contrast
   scale. The pill brings its own. */
.pill { position: absolute; right: 7px; bottom: 7px; background: var(--surface);
  border: 1px solid var(--line); color: var(--teal); font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pill.fav { left: 7px; right: auto; top: 7px; bottom: auto; color: var(--gold-ink); padding: 3px 7px; }
/* Name and date live BELOW the image, never over it. */
.gmeta { display: flex; flex-direction: column; padding: 0 2px; min-width: 0; }
.gmeta b { font-size: 12.5px; font-weight: 650; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmeta span { font-size: 11px; color: var(--ink-3); }
.empty { grid-column: 1 / -1; padding: 26px 10px; text-align: center; font-size: 13px;
  color: var(--ink-3); margin: 0; }

/* Detail sheet. */
.hero { border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface-3); min-height: 60px; }
.hero img { width: 100%; display: block; }
.dtitle { margin: 0; font-size: 21px; }
.dsub { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; }
.gnote { margin: 0; font-size: 13px; color: var(--ink-2); font-style: italic;
  border-left: 2px solid var(--line-2); padding-left: 10px; }
.tagwrap { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11.5px; font-weight: 650; color: var(--teal); background: var(--teal-soft);
  border: 1px solid transparent; border-radius: 999px; padding: 5px 10px; font-family: var(--ui); }
.tag.add { color: var(--ink-2); background: none; border: 1px dashed var(--line-2); }
.frow { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px;
  padding: 7px 0; border-bottom: 1px solid var(--line); }
.frow:last-child { border-bottom: none; }
.frow span { color: var(--ink-2); min-width: 0; }
.frow b { color: var(--ink); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acts { display: flex; flex-direction: column; gap: 8px; }
.linklike { background: none; border: none; color: var(--ink-3); font-size: 12px;
  font-weight: 600; text-decoration: underline; padding: 2px 0; align-self: flex-start; }

/* Capture sheet. */
.reading { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-2);
  border-top-color: var(--teal); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
#csFoot { display: flex; flex-direction: column; gap: 8px; }

/* Craving-swap picker. */
.pickgroup { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.pickrow { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px;
  padding: 10px 12px; width: 100%; }
.pickrow.on { border-color: var(--teal); color: var(--teal); }
.pickrow.unpin { color: var(--ink-2); border-style: dashed; margin-bottom: 8px; }

/* The plate card on Today, and the plate inside a craving swap. */
.encour { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; }
.encour .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-bottom: 1px solid var(--line); }
.encour .body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 9px; }
.encour p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.encour p b { color: var(--ink); font-weight: 650; }
.encour .btn.mini { align-self: flex-start; }

.swap.hasshot { padding: 0; overflow: hidden; }
.swap.hasshot .inner { padding: 10px 12px; }
.swapshot { display: block; }
.swapshot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-bottom: 1px solid var(--line); }
.yours { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--go); background: var(--go-soft);
  border-radius: 999px; padding: 4px 9px; margin-bottom: 7px; }
.swap-date { font-size: 11.5px !important; color: var(--ink-3) !important; }