/* ===========================================================================
   Today redesign — scoped token set + components.
   Source: design-refs/today-redesign/HANDOFF.md sections 1 and 2.

   SCOPE: these tokens are deliberately NOT global. They live on .td-scope and
   apply only to the six redesigned screens (Today card, check-in, meal start,
   meal result, activity). The dashboard's existing tokens.css is untouched, so
   nothing outside this pass inherits a single value from here.

   Every value below is transcribed from HANDOFF.md, not chosen.
   =========================================================================== */

/* The .td-scope token set that used to live here now lives in tokens.css, so the
   admin surface can share it without pulling in the component CSS below. Every page
   that loads this file already loads tokens.css first. See the note there. */


.td-scope *, .td-scope *::before, .td-scope *::after { box-sizing: border-box; }
.td-scope [hidden] { display: none !important; }

/* ---------- Type scale (HANDOFF §1) ---------- */

.td-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--td-muted);
}

.td-sheet-title {
  font-family: var(--td-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--td-ink);
  margin: 0;
  /* The meal result sheet titles itself with the detected food, and a real
     photo analysis returns ~450 characters. Unclamped, that wrapped to 738px
     of header, collapsed the scrolling body to 0px and pushed the footer
     below the viewport. The header is chrome (HANDOFF section 2): it stays
     bounded, and the body below it does the scrolling. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.td-hero-num {
  font-family: var(--td-font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--td-accent);
}

.td-hero-unit { font-size: 15px; font-weight: 400; color: var(--td-muted); }
.td-body      { font-size: 15px; font-weight: 400; line-height: 1.4; }
.td-row-title { font-size: 15px; font-weight: 600; }
.td-row-status{ font-size: 13px; font-weight: 400; color: var(--td-muted); }
/* HANDOFF section 1: the value is 600 ink, only the " / target" half is
   400 muted. Targeting any child span made the value muted too, because the
   value needs its own span for the JS id. */
.td-metric-val{ font-size: 15px; font-weight: 600; }
.td-metric-val .td-metric-target { font-weight: 400; color: var(--td-muted); }
.td-metric-lbl{ font-size: 12px; font-weight: 400; color: var(--td-muted); }
.td-question  { font-size: 14px; font-weight: 600; }
.td-subline   { font-size: 14px; font-weight: 400; color: var(--td-muted); }

/* ---------- Card (HANDOFF §2) ---------- */

.td-card {
  background: var(--td-surface);
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-card);
}
.td-card--hero  { padding: 20px; }
.td-card--tight { padding: 16px; }

/* ---------- Progress bar (HANDOFF §2) ---------- */

.td-bar {
  display: flex;
  height: 10px;
  border-radius: var(--td-r-pill);
  background: var(--td-track);
  overflow: hidden;
}
.td-bar__fill   { height: 100%; background: var(--td-accent); }
/* Second segment, meal result only. */
.td-bar__fill--this { background: var(--td-accent-light); }

/* ---------- Primary button (HANDOFF §2) ---------- */

.td-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--td-ink);
  border-radius: var(--td-r-btn);
  background: var(--td-ink);
  color: var(--td-bg);
  font-family: var(--td-font-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.td-btn--today { height: 56px; }   /* Today card */
.td-btn--sheet { height: 54px; }   /* bottom of sheets */
.td-btn--outline {
  background: var(--td-surface);
  border: 1.5px solid var(--td-ink);
  color: var(--td-ink);
}

/* ---------- Status row (HANDOFF §2) ---------- */

.td-rows > .td-statusrow + .td-statusrow { border-top: 1px solid var(--td-divider); }

.td-statusrow {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  border: 0;
  background: none;
  font-family: var(--td-font-ui);
  text-align: left;
  cursor: pointer;
}

.td-statusrow__circle {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--td-circle-empty);
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-statusrow--done .td-statusrow__circle {
  background: var(--td-accent);
  border-color: var(--td-accent);
}
.td-statusrow__circle svg { width: 12px; height: 12px; color: #FFFFFF; display: none; }
.td-statusrow--done .td-statusrow__circle svg { display: block; }

.td-statusrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.td-statusrow__chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--td-chevron); }

/* ---------- Segmented control (HANDOFF §2) ---------- */

.td-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--td-r-track);
  background: var(--td-track);
}

.td-seg__opt {
  height: 44px;
  border: 0;
  border-radius: var(--td-r-segment);
  background: transparent;
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--td-ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-seg__opt[aria-pressed="true"] {
  background: var(--td-surface);
  box-shadow: 0 1px 2px rgba(26, 26, 24, 0.12);
  font-weight: 600;
}

/* ---------- Chip (HANDOFF §2) ---------- */

.td-chip {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-pill);
  background: var(--td-surface);
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--td-ink);
  cursor: pointer;
}
.td-chip[aria-pressed="true"] {
  border-color: var(--td-accent);
  background: var(--td-accent-tint);
  font-weight: 600;
}
/* Inside the injection panel the tint is already the background. */
.td-panel .td-chip { border-color: var(--td-chip-on-tint); }

/* ---------- Tile (activity, HANDOFF §2) ---------- */

.td-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 84px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-btn);
  background: var(--td-surface);
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--td-ink);
  cursor: pointer;
}
.td-tile svg { width: 22px; height: 22px; }
.td-tile[aria-pressed="true"] {
  border: 2px solid var(--td-accent);
  background: var(--td-accent-tint);
  font-weight: 600;
}

/* ---------- Info panel (HANDOFF §2) ---------- */

.td-panel {
  background: var(--td-accent-tint);
  border-radius: var(--td-r-panel);
  padding: 14px 16px;
  font-size: 14px;
}

/* ---------- Text button / link ---------- */

.td-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--td-accent);
  cursor: pointer;
}

/* ---------- Toast ("Glass added · Undo", "Logged · Undo") ---------- */

.td-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--td-r-btn);
  background: var(--td-ink);
  color: var(--td-bg);
  font-family: var(--td-font-ui);
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(26, 26, 24, 0.18);
}
.td-toast__undo {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-accent-light);
  cursor: pointer;
}

/* ===========================================================================
   Today card layout (HANDOFF §3)
   =========================================================================== */

/* The Today section sits directly on the page background. It carries no
   .card class any more, so nothing inherits that component's shadow, 15px
   radius or bottom margin; these resets only guard against future leakage. */
.td-today-section {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Gap between blocks on Today: 20px (HANDOFF §1). */
.td-today > * + * { margin-top: 20px; }

.td-hero__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.td-hero__bar { margin-top: 14px; }
.td-hero__remaining { margin: 12px 0 0; }

.td-hero__divider {
  height: 1px;
  background: var(--td-divider);
  margin: 16px 0;
  border: 0;
}

.td-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.td-metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Water is the one tappable metric. It still needs the 44px minimum touch
   target, but centring the content inside that height dropped its baseline
   below calories and fiber; align to the top so all three metrics line up. */
.td-metric--tappable {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--td-font-ui);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  justify-content: flex-start;
}

.td-logged-count {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--td-muted);
  /* A button now (it opens today's meals), but it keeps the same box the
     spec's static line had, so the card's vertical rhythm is unchanged. */
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--td-font-ui);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--td-border);
  text-underline-offset: 3px;
}
.td-logged-count:hover:not(:disabled) {
  color: var(--td-accent);
  text-decoration-color: var(--td-accent-light);
}
/* No meals yet: nothing to open, so it reads as the plain line it was. */
.td-logged-count:disabled {
  cursor: default;
  text-decoration: none;
  opacity: 1;
}
/* The count belongs to the button above it, not a new 20px block. */
.td-today > .td-logged-count { margin-top: 10px; }

.td-rows { overflow: hidden; }

/* ===========================================================================
   Content column width.

   The dashboard column is capped at 640px of content and centred from 640px
   up; below that it stays full width with the 20px side padding from
   HANDOFF section 1. The page background still spans the full viewport
   because .main-content-v2 keeps its own background and only its inner
   column is constrained.
   =========================================================================== */

.main-content-v2 { padding-left: 20px; padding-right: 20px; }

@media (min-width: 640px) {
  .main-content-v2 > .header,
  .main-content-v2 > .install-banner {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* ===========================================================================
   Sheet (HANDOFF section 2)

   Under 640px: bottom sheet, full width, 20px top corners, content scrolls,
   primary button pinned to the bottom.
   640px and up: centred dialog, 420px wide, same content.
   Escape closes; focus moves in on open and back to the trigger on close.
   =========================================================================== */

.td-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(26, 26, 24, 0.38);
}

.td-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  /* dvh excludes the mobile browser chrome that vh counts as visible, which
     on a phone otherwise hides the pinned footer behind the URL bar. */
  max-height: 92dvh;
  background: var(--td-bg);
  border-radius: 20px 20px 0 0;
  padding: 28px 20px;
  gap: 22px;
}

.td-sheet:focus { outline: none; }

.td-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.td-sheet__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--td-muted);
  cursor: pointer;
}

/* HANDOFF section 2: content scrolls, primary button pinned to the bottom.
   Head and foot are fixed-size chrome; only the body between them scrolls.
   Without the explicit basis on the head, a tall title grew the header until
   there was nothing left for the body and the foot fell off the screen. */
.td-sheet__head { flex: 0 0 auto; }
.td-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.td-sheet__foot { flex: 0 0 auto; }

.td-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-ink);
}

.td-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-btn);
  background: var(--td-surface);
  font-family: var(--td-font-ui);
  font-size: 16px;
  color: var(--td-ink);
}
.td-input:focus { outline: none; border-color: var(--td-accent); }

.td-input-row { display: flex; align-items: center; gap: 10px; }
.td-input-suffix { font-size: 15px; color: var(--td-muted); }

@media (min-width: 640px) {
  .td-sheet-overlay { align-items: center; }
  .td-sheet {
    width: 420px;
    border-radius: 20px;
    max-height: 86vh;
  }
}

/* ===========================================================================
   Log a meal — start (HANDOFF section 5) and result (section 6)
   =========================================================================== */

/* --- Start screen --- */

.td-camera-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 150px;
  border: 0;
  border-radius: 18px;
  background: var(--td-ink);
  color: var(--td-bg);
  font-family: var(--td-font-ui);
  cursor: pointer;
}
.td-camera-tile__icon { width: 34px; height: 34px; }
.td-camera-tile__title { font-size: 17px; font-weight: 600; }
.td-camera-tile__sub { font-size: 13px; color: var(--td-on-ink-muted); }

.td-source-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.td-source-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-btn);
  background: var(--td-surface);
  font-family: var(--td-font-ui);
  font-size: 14px;
  color: var(--td-ink);
  cursor: pointer;
}
.td-source-btn svg { width: 18px; height: 18px; }

.td-again-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.td-again-row + .td-again-row { border-top: 1px solid var(--td-divider); }
.td-again-row__text { flex: 1 1 auto; min-width: 0; }
.td-again-row__name { display: block; font-size: 15px; font-weight: 600; }
.td-again-row__sub  { display: block; margin-top: 3px; font-size: 13px; color: var(--td-muted); }

.td-again-row__log {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-pill);
  background: var(--td-bg);
  font-family: var(--td-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--td-ink);
  cursor: pointer;
}
.td-again-row__log:hover { border-color: var(--td-accent); color: var(--td-accent); }

/* --- Today's meals list (entry point into the meal detail modal) --- */

.td-meal-list { overflow: hidden; }

.td-meal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  font-family: var(--td-font-ui);
  color: var(--td-ink);
  text-align: left;
  cursor: pointer;
}
.td-meal-row + .td-meal-row { border-top: 1px solid var(--td-divider); }
.td-meal-row:hover { background: var(--td-accent-tint); }
.td-meal-row__text { flex: 1 1 auto; min-width: 0; }
.td-meal-row__name { display: block; font-size: 15px; font-weight: 600; }
.td-meal-row__sub  { display: block; margin-top: 3px; font-size: 13px; color: var(--td-muted); }
.td-meal-row__chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--td-chevron); }

/* The analysis paragraph, which used to be the sheet title. */
.td-meal-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-muted);
}

/* --- Result screen --- */

.td-impact__line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.td-impact__brings { margin: 12px 0 0; }
.td-impact__bar { margin-top: 14px; }

.td-legend { display: flex; gap: 16px; margin-top: 10px; }
.td-legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--td-muted); }
.td-legend__sw { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.td-legend__sw--before { background: var(--td-accent); }
.td-legend__sw--this   { background: var(--td-accent-light); }

.td-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.td-macro { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-macro__val { font-size: 16px; font-weight: 600; }
.td-macro__lbl { font-size: 12px; color: var(--td-muted); }

.td-confidence { margin: 0; font-size: 13px; color: var(--td-muted); }

.td-result-actions { display: flex; justify-content: center; gap: 28px; margin-top: 14px; }

/* Manual-entry fallback when analysis fails. */
.td-manual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-manual label { display: block; font-size: 12px; color: var(--td-muted); margin-bottom: 4px; }

/* ===========================================================================
   Daily check-in sheet (HANDOFF section 4)
   =========================================================================== */

.td-ck-field + .td-ck-field { margin-top: 22px; }

.td-ck-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-ink);
}
.td-ck-label span { font-weight: 400; color: var(--td-muted); }

.td-injection { margin-top: 22px; }

.td-injection__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--td-accent);
  margin-bottom: 6px;
}

.td-injection__q {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-ink);
}

.td-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.td-nottoday { margin-top: 12px; display: block; }

.td-note {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  min-height: 88px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-btn);
  background: var(--td-surface);
  font-family: var(--td-font-ui);
  font-size: 15px;
  color: var(--td-ink);
  resize: vertical;
}
.td-note:focus { outline: none; border-color: var(--td-accent); }

/* ===========================================================================
   Log activity sheet (HANDOFF section 7)
   =========================================================================== */

.td-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.td-seg-caption { margin: 6px 0 0; font-size: 12px; color: var(--td-muted); }

.td-strength {
  margin-top: 22px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-r-card);
  background: var(--td-surface);
  padding: 16px;
}

.td-strength__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.td-strength__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--td-accent);
}

.td-strength__optional { font-size: 12px; color: var(--td-muted); }

.td-strength__q {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--td-ink);
}
.td-strength__group + .td-strength__group { margin-top: 16px; }

.td-weekly {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.td-weekly__count {
  flex: 0 0 auto;
  font-family: var(--td-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--td-accent);
}
.td-weekly__text { font-size: 14px; color: var(--td-ink); }

/* The doing-line on the next-meal card. Same role as on the Week plan: what
   the meal is made of and what you do to it, under the name and above the
   figures. */
.td-nextmeal__doing{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--td-muted)}

/* One meal, opened: the line again, the figures, then the steps. */
.td-meal-doing--sheet{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--td-ink)}
.td-meal-figs{margin:0 0 14px;font-size:13px;color:var(--td-muted)}
.td-meal-steps{margin:0;padding-left:20px}
.td-meal-steps li{font-size:15px;line-height:1.6;color:var(--td-ink);margin-bottom:10px}
.td-meal-steps li:last-child{margin-bottom:0}

/* ===========================================================================
   Add to home screen: the instructions sheet.

   Here rather than in tabs.css because both surfaces that open this sheet --
   the tab banner and the profile row -- load this file, and the tabs stylesheet
   is not on the profile page. The banner's own styles stay with the tabs.
   =========================================================================== */

.td-install-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--td-ink);
}

.td-install-share {
  vertical-align: -4px;
  margin: 0 2px;
}