/* Plus Jakarta Sans (SIL Open Font License, vendor/plus-jakarta-sans/OFL.txt), served from
   this site's own static files, not from Google (Today Page SRS default T3). */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("vendor/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("vendor/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The Today page's look (Today Page SRS 4) as tokens; dark under theme.js's data-bs-theme. */
:root {
  --tblr-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --hd-ground: #f4f6f3;
  --hd-card: #ffffff;
  --hd-card-border: transparent;
  --hd-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --hd-text: #15201c;
  --hd-muted: #4f5f58;
  --hd-rule: #eef1ef;
  --hd-input-border: #d5ddd8;
  --hd-input-bg: #f8faf8;
  --hd-calories: #e8702a;
  --hd-on-calories: #15201c;
  --hd-protein: #1f6fd1;
  --hd-protein-text: #174f96;
  --hd-fibre: #0f8a5f;
  --hd-weight: #0f8a5f;
  --hd-sodium: #6b5bd1;
  --hd-warn: #c0392b;
  --hd-ok: #0b6b5c;
  --hd-badge-fg: #0b5a4d;
  --hd-badge-bg: #dff3ec;
  --hd-next-bg: #15201c;
  --hd-next-fg: #ffffff;
  --hd-next-accent: #9fe3c9;
  --hd-next-muted: #c3d0ca;
  --hd-next-on-accent: #15201c;
  --hd-next-border: #4a5a53;
  --hd-strong-bg: #15201c;
  --hd-strong-fg: #ffffff;
  --hd-target-line: #15201c;
}
[data-bs-theme="dark"] {
  --hd-ground: #0e1116;
  --hd-card: #171b22;
  --hd-card-border: #262c36;
  --hd-shadow: none;
  --hd-text: #f2f4f7;
  --hd-muted: #9aa4b2;
  --hd-rule: #262c36;
  --hd-input-border: #3a4250;
  --hd-input-bg: #11151b;
  --hd-calories: #c6f36b;
  --hd-on-calories: #0e1116;
  --hd-protein: #7cc4ff;
  --hd-protein-text: #7cc4ff;
  --hd-fibre: #ffb86b;
  --hd-weight: #ffb86b;
  --hd-sodium: #b4a7ff;
  --hd-warn: #ff7a6b;
  --hd-ok: #7ee2b8;
  --hd-badge-fg: #9fe3c9;
  --hd-badge-bg: #1f3a33;
  --hd-next-bg: #c6f36b;
  --hd-next-fg: #0e1116;
  --hd-next-accent: #2c3a10;
  --hd-next-muted: #2f3b1a;
  --hd-next-on-accent: #f2f4f7;
  --hd-next-border: #2c3a10;
  --hd-strong-bg: #f2f4f7;
  --hd-strong-fg: #0e1116;
  --hd-target-line: #f2f4f7;
}

/* Additions to Tabler: chart colours as tokens (charts.js reads them) and the uPlot legend. */
:root {
  --hd-series: var(--tblr-primary);
  --hd-average: var(--tblr-secondary);
  --hd-goal: var(--tblr-green);
  --hd-axis: var(--tblr-secondary);
  --hd-grid: var(--tblr-border-color);
  --hd-surface: var(--tblr-bg-surface);
  /* Glucose contexts (D2); the fasting band is drawn translucent by charts.js. */
  --hd-fasting: var(--tblr-primary);
  --hd-before-meal: var(--tblr-purple);
  --hd-after-meal: var(--tblr-orange);
  --hd-unknown: var(--tblr-secondary);
  --hd-band: var(--tblr-green);
  /* Sleep stages (D4), stacked bars; heart rate min–max band drawn translucent. */
  --hd-deep: var(--tblr-indigo);
  --hd-light: var(--tblr-azure);
  --hd-rem: var(--tblr-purple);
  --hd-awake: var(--tblr-yellow);
  --hd-stage-unknown: var(--tblr-secondary);
  --hd-hr-band: var(--tblr-primary);
}

.plot { width: 100%; min-height: 120px; }

.u-legend { color: var(--tblr-body-color); font-size: 0.8125rem; }
.u-legend th { font-weight: 500; }
.u-legend .u-marker { border-radius: 50%; }

.tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile-value small { font-size: 0.875rem; font-weight: 400; color: var(--tblr-secondary); }
.tabular { font-variant-numeric: tabular-nums; }

.legend-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.35rem; }
.dot-fasting { background: var(--hd-fasting); }
.dot-before_meal { background: var(--hd-before-meal); }
.dot-after_meal { background: var(--hd-after-meal); }
.dot-unknown { background: var(--hd-unknown); }

/* Nutrition page: meals and workouts expand with <details>; suggestions keep their lines. */
details > summary { cursor: pointer; padding: 0.35rem 0; }
details.meal + details.meal { border-top: 1px solid var(--tblr-border-color); }
.suggestion-text { white-space: pre-line; overflow-wrap: anywhere; }
/* Overview: the latest suggestion, cut to about 12 lines (the card links to the full text). */
.suggestion-preview { display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
.plan-list dt, .plan-list dd { margin-bottom: 0.35rem; }
/* "What each food gave": one column per nutrient. Numbers never wrap; the food column
   stays in view while the nutrients scroll sideways; the sort column is tinted. */
.breakdown-table thead th, .breakdown-table td.text-end { white-space: nowrap; }
.breakdown-table thead th a { color: inherit; text-decoration: none; }
.breakdown-table tbody th, .breakdown-table tfoot th { min-width: 9rem; max-width: 14rem; white-space: normal; }
.breakdown-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--tblr-bg-surface); }
.breakdown-table .sorted { background: var(--tblr-primary-lt); }
.breakdown-table thead .sorted { color: var(--tblr-primary); }
.breakdown-table td .hd-progress { min-width: 3.5rem; }
/* By meal time: the row opens its foods below it, indented and on a tinted background. */
.breakdown-table tr[data-meal-time] { cursor: pointer; }
.meal-toggle { border: 0; padding: 0; background: none; color: inherit; font: inherit; }
.meal-toggle::before { content: "▸"; display: inline-block; width: 1rem; color: var(--tblr-secondary); transition: transform 0.15s; }
.meal-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.breakdown-table .meal-items th, .breakdown-table .meal-items td { background: var(--tblr-bg-surface-secondary); font-size: 0.8125rem; }
.breakdown-table .meal-items th { padding-left: 2.5rem; }
.breakdown-table .meal-items .sorted { background: var(--tblr-primary-lt); }
/* "Fill protein gap" (Food Check SRS 7.2): two number fields beside the button. */
.gap-field { display: flex; flex-direction: column; width: 9.5rem; margin: 0; }
/* "Can I eat…?" card (Food Check SRS 6) */
.check-option { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: 0.75rem; overflow-wrap: anywhere; }
.check-option .badge { font-size: 0.8125rem; }
.check-table th, .check-table td { white-space: nowrap; }
@media (max-width: 575.98px) { .check-option { padding: 0.5rem; } .check-table th, .check-table td { padding-left: 0.25rem; padding-right: 0.25rem; } }
.check-quantity { width: 5.5rem; flex: 0 0 auto; }

/* Top bar (Today Page SRS 2.10): brand, the sections as pills with the current one filled,
   Log out; below 768 px brand and Log out share the first line and the pills wrap under it. */
.site-header { background: var(--hd-card); border-bottom: 1px solid var(--hd-rule); padding: 0.5rem 0; }
.navbar > .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; max-width: 1200px; }
.site-nav .navbar-brand { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--hd-text); }
.navbar-expand .sections-nav { flex-wrap: wrap; gap: 0.25rem; margin-right: auto; }
.sections-nav .nav-link {
  white-space: nowrap; padding: 0.5rem 0.875rem !important; min-height: 2.5rem; border-radius: 999px;
  color: var(--hd-muted); font-weight: 600;
}
.sections-nav .nav-link:hover { color: var(--hd-text); background: var(--hd-rule); }
.navbar .sections-nav .nav-item.active .nav-link { background: var(--hd-badge-bg); color: var(--hd-badge-fg); font-weight: 700; }
.sections-nav .nav-item.active::after, .sections-nav .nav-item.active .nav-link::after { display: none; }
.site-logout .btn {
  min-height: 2.5rem; border-radius: 12px; border: 1px solid var(--hd-input-border);
  background: var(--hd-card); color: var(--hd-text);
}
@media (max-width: 767.98px) {
  .site-nav .navbar-brand { order: 1; margin-right: auto; }
  .site-logout { order: 2; }
  .navbar-expand .sections-nav { order: 3; width: 100%; margin: 0; }
  .sections-nav .nav-link { padding: 0.5rem 0.75rem !important; }
}

/* Section row in the app (App Shell SRS 5.2): one line of links that scrolls sideways on
   its own, so the page itself never does. */
.section-row {
  position: relative; display: flex; gap: 0.375rem; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.125rem;
}
.section-row::-webkit-scrollbar { display: none; }
.section-row-link {
  flex: 0 0 auto; white-space: nowrap; padding: 0.375rem 0.5rem; min-height: 2.25rem;
  display: inline-flex; align-items: center;
  border: 1px solid var(--tblr-border-color); border-radius: 2rem; color: inherit;
}
.section-row-link:hover { text-decoration: none; background: var(--tblr-bg-surface-secondary); }
.section-row-link[aria-current="page"] {
  background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff;
}
.page-header .col-12:has(> .section-row) { min-width: 0; }

/* Tile bars: eaten as a % of the target (<progress>, so no inline width). */
.hd-progress {
  flex: 1 1 auto; width: 100%; height: 0.5rem; border: 0; border-radius: 1rem;
  background: var(--tblr-border-color); overflow: hidden; appearance: none; -webkit-appearance: none;
  color: var(--hd-bar);
}
.hd-progress::-webkit-progress-bar { background: var(--tblr-border-color); border-radius: 1rem; }
.hd-progress::-webkit-progress-value { background: var(--hd-bar); border-radius: 1rem; }
.hd-progress::-moz-progress-bar { background: var(--hd-bar); border-radius: 1rem; }
.hd-part { --hd-bar: var(--tblr-primary); }
.hd-done { --hd-bar: var(--tblr-green); }
.hd-over { --hd-bar: var(--tblr-orange); }
.hd-share { min-width: 3rem; text-align: right; }

/* Where the calories came from: protein / carbs / fat as one stacked bar. */
.macro-bar { display: block; width: 100%; height: 0.875rem; border-radius: 1rem; overflow: hidden; }
.macro-protein { fill: var(--tblr-green); }
.macro-carbs { fill: var(--tblr-azure); }
.macro-fat { fill: var(--tblr-yellow); }
.dot-protein { background: var(--tblr-green); }
.dot-carbs { background: var(--tblr-azure); }
.dot-fat { background: var(--tblr-yellow); }

/* Settings (Multi-user SRS 5): long tokens and URLs wrap instead of widening the phone page. */
.settings code { word-break: break-all; }
.settings-pre { white-space: pre-wrap; word-break: break-all; }
.get-started li.done > a { color: var(--tblr-secondary); }

/* The goal card's "Add weight" opens its form under the button (Multi-user SRS 10.2). */
#goal-add-weight > summary { list-style: none; display: inline-block; }
#goal-add-weight > summary::-webkit-details-marker { display: none; }

/* ---- The Today page (Today Page SRS 2, 4) ---- */
body.today-page { background: var(--hd-ground); color: var(--hd-text); }
.today-page .page-body { margin-top: 1rem; }
.today-page .page-body > .container-xl { max-width: 1200px; }
.today { display: flex; flex-direction: column; gap: 1rem; font-variant-numeric: tabular-nums; }
.today h2 { margin: 0; color: inherit; }
.today p { margin: 0; }
.hd-card {
  background: var(--hd-card); border: 1px solid var(--hd-card-border); border-radius: 24px;
  box-shadow: var(--hd-shadow); padding: 1.125rem; display: flex; flex-direction: column; gap: 0.75rem;
  min-width: 0;
}
.hd-label { font-size: 0.8125rem; font-weight: 600; color: var(--hd-muted); }
.hd-muted { color: var(--hd-muted); font-size: 0.8125rem; }
.hd-warn { color: var(--hd-warn); }
.hd-ok { color: var(--hd-ok); }
.hd-notice { font-size: 0.8125rem; padding: 0.5rem 0.75rem; border-radius: 12px; background: var(--hd-badge-bg); color: var(--hd-badge-fg); }
.hd-badge {
  align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: var(--hd-badge-fg);
  background: var(--hd-badge-bg); padding: 0.25rem 0.625rem; border-radius: 999px;
}
.hd-btn {
  min-height: 44px; padding: 0 1rem; border-radius: 14px; border: 0; font: inherit; font-size: 0.875rem;
  font-weight: 700; background: var(--hd-calories); color: var(--hd-on-calories); cursor: pointer;
}
.hd-btn:disabled { opacity: 0.55; cursor: default; }
.hd-input, .hd-select {
  min-height: 44px; border-radius: 14px; border: 1px solid var(--hd-input-border); background: var(--hd-input-bg);
  color: var(--hd-text); padding: 0 0.875rem; font: inherit; font-size: 0.875rem; min-width: 0;
}
.link-button { border: 0; background: none; padding: 0.25rem; font: inherit; font-size: 0.8125rem; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* Heading and week strip (2.2): arrows above the seven days on a phone, 44 px targets. */
.today-head { display: flex; flex-direction: column; gap: 0.75rem; }
.today-title { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--hd-text); }
.week-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev . next" "days days days"; gap: 0.25rem; min-width: 0; }
.strip-arrow {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.5rem; border-radius: 12px; color: var(--hd-muted); font-weight: 600; font-size: 0.875rem;
}
.strip-arrow[rel="prev"] { grid-area: prev; }
.strip-arrow[rel="next"] { grid-area: next; }
.strip-arrow:hover { background: var(--hd-card); text-decoration: none; color: var(--hd-text); }
/* The days stay at least 44 px wide; on a very narrow phone the strip scrolls in itself. */
.strip-days {
  grid-area: days; display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 0.25rem;
  margin: 0; padding: 0; list-style: none; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.strip-day {
  height: 56px; border-radius: 14px; background: var(--hd-card); border: 1px solid var(--hd-card-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--hd-muted); text-decoration: none;
}
.strip-day:hover { text-decoration: none; color: var(--hd-text); }
.strip-letter { font-size: 0.6875rem; }
.strip-number { font-size: 0.9375rem; font-weight: 700; }
.strip-day[aria-current="date"] { background: var(--hd-strong-bg); border-color: var(--hd-strong-bg); color: var(--hd-strong-fg); }
.strip-day[aria-current="date"] .strip-number { font-weight: 800; }

/* One column on a phone in the order of 2.1; the two column wrappers do not box anything. */
.today-grid { display: flex; flex-direction: column; gap: 1rem; }
.today-col { display: contents; }

/* Left today (2.3) */
.left-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.left-main { display: flex; flex-direction: column; gap: 2px; }
.left-big { font-size: 2.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.left-unit { font-size: 0.875rem; font-weight: 600; color: var(--hd-muted); }
.left-protein { font-size: 0.875rem; font-weight: 700; color: var(--hd-protein-text); }
.left-goal a { font-weight: 700; }
.left-bars { display: flex; flex-direction: column; gap: 0.625rem; }
.left-bar { display: flex; flex-direction: column; gap: 0.25rem; }
.left-bar-text { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--hd-muted); }
.left-sodium {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.75rem;
  border-top: 1px solid var(--hd-rule); font-size: 0.8125rem; color: var(--hd-muted);
}
.left-warnings { margin: 0; padding-left: 1.125rem; font-size: 0.8125rem; color: var(--hd-muted); }
.today .hd-progress { height: 8px; background: var(--hd-rule); }
.today .hd-progress::-webkit-progress-bar { background: var(--hd-rule); }
.bar-calories { --hd-bar: var(--hd-calories); }
.bar-protein { --hd-bar: var(--hd-protein); }
.bar-fibre { --hd-bar: var(--hd-fibre); }
.bar-weight { --hd-bar: var(--hd-weight); }
.bar-over { --hd-bar: var(--hd-warn); }

/* What to eat next (2.4): the dark card (the calorie accent in dark mode). */
.next-card { background: var(--hd-next-bg); color: var(--hd-next-fg); border-color: var(--hd-next-bg); }
.next-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.next-label { font-size: 0.8125rem; font-weight: 700; color: var(--hd-next-accent); }
.next-clear { display: flex; gap: 0.25rem; }
.next-text { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.next-empty { font-weight: 600; }
/* Owner, 2026-10-30: a short summary, then one row per option with its kcal and protein set apart. */
.next-summary { font-size: 0.875rem; line-height: 1.5; color: var(--hd-next-muted); margin: 0; }
.next-options { list-style: none; padding: 0; margin: 0; }
.next-options li { padding: 0.625rem 0; border-top: 1px solid var(--hd-next-border); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.next-options li:last-child { padding-bottom: 0; }
.next-numbers { font-weight: 700; color: var(--hd-next-accent); }
.next-footer { margin: 0; }
.next-meta, .next-message { font-size: 0.8125rem; color: var(--hd-next-muted); }
.next-error { font-size: 0.8125rem; font-weight: 700; }
.next-stale { font-weight: 700; color: var(--hd-next-fg); }
.next-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-items: start; }
.next-actions .hd-btn { width: 100%; }
.next-primary { background: var(--hd-next-accent); color: var(--hd-next-on-accent); }
[data-bs-theme="dark"] .next-primary { color: var(--hd-next-on-accent); }
.next-secondary { background: transparent; color: var(--hd-next-fg); border: 1px solid var(--hd-next-border); }
[data-bs-theme="dark"] .next-secondary { color: var(--hd-next-fg); }
.gap-amounts { margin-top: 0.375rem; font-size: 0.75rem; color: var(--hd-next-muted); }
.gap-amounts > summary { padding: 0.25rem 0; min-height: 0; }
.gap-fields { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.375rem; }
.gap-field { display: flex; flex-direction: column; gap: 0.125rem; width: auto; }
.gap-field input { min-height: 44px; border-radius: 12px; border: 1px solid var(--hd-next-border); background: transparent; color: inherit; padding: 0 0.625rem; font: inherit; }

/* Can I eat…? (2.5) */
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.check-title { font-size: 0.9375rem; font-weight: 700; }
.check-row { display: flex; gap: 0.5rem; }
.check-row .hd-input { flex: 1; }
/* Buttons, fields and openers in the cards at least 44 px high (SRS 4.1). */
.check-card .btn, .weight-card .form-control, .today .check-option details > summary { min-height: 44px; }
.check-card .btn { display: inline-flex; align-items: center; }
.today .check-option details > summary { display: list-item; padding: 0.625rem 0; }
.check-when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--hd-muted); }

/* Meals (2.6): a time tile tinted by meal type; a row opens to its items. */
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0.25rem 0.25rem 0.5rem; }
.section-head h2 { font-size: 1.125rem; font-weight: 800; }
.meals-card { padding: 0; gap: 0; }
.meals-card details.meal + details.meal { border-top: 1px solid var(--hd-rule); }
.meal-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; list-style: none; cursor: pointer; }
.meal-row::-webkit-details-marker { display: none; }
.meal-time {
  flex: 0 0 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; background: var(--hd-meal-bg); color: var(--hd-meal-fg);
}
.meal-breakfast { --hd-meal-bg: #fff4ec; --hd-meal-fg: #8a4310; }
.meal-lunch { --hd-meal-bg: #eef6ff; --hd-meal-fg: #174f96; }
.meal-snack { --hd-meal-bg: #eef8f2; --hd-meal-fg: #0b6b4a; }
.meal-dinner { --hd-meal-bg: #f3f0ff; --hd-meal-fg: #4b3a9e; }
[data-bs-theme="dark"] .meal-breakfast { --hd-meal-bg: #3a2a1c; --hd-meal-fg: #ffc58f; }
[data-bs-theme="dark"] .meal-lunch { --hd-meal-bg: #1b2b40; --hd-meal-fg: #9dd2ff; }
[data-bs-theme="dark"] .meal-snack { --hd-meal-bg: #183326; --hd-meal-fg: #8fe0b5; }
[data-bs-theme="dark"] .meal-dinner { --hd-meal-bg: #2a2342; --hd-meal-fg: #c7bbff; }
.meal-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meal-name { font-size: 0.9375rem; font-weight: 700; }
.meal-items { font-size: 0.8125rem; color: var(--hd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.meal-kcal { font-size: 0.9375rem; font-weight: 700; }
.meal-body { padding: 0 1rem 0.875rem; }
.meal-description { font-size: 0.8125rem; color: var(--hd-muted); margin-bottom: 0.5rem !important; }
.meals-empty { padding: 1rem; color: var(--hd-muted); }

/* Goal weight and Workout (2.7), side by side. */
.pair { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0.75rem; }
.small-card { gap: 0.375rem; padding: 1rem; }
.small-value { font-size: 1.5rem; font-weight: 800; }
.small-unit { font-size: 0.8125rem; font-weight: 600; color: var(--hd-muted); }
.small-none { font-weight: 700; }
.small-card .hd-ok { font-size: 0.8125rem; font-weight: 700; }

/* Target vs achieved (3) */
.chart-card h2 { font-size: 0.9375rem; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  min-height: 44px; padding: 0 0.875rem; border-radius: 999px; border: 1px solid var(--hd-input-border);
  background: var(--hd-card); color: var(--hd-text); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--hd-strong-bg); border-color: var(--hd-strong-bg); color: var(--hd-strong-fg); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--hd-rule); }
.seg {
  min-height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--hd-text); font: inherit;
  font-size: 0.8125rem; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.seg:hover { text-decoration: none; color: var(--hd-text); }
.seg[aria-current="true"] { background: var(--hd-card); font-weight: 800; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.custom-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-items: end; }
.custom-range[hidden] { display: none; }
.custom-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--hd-muted); min-width: 0; }
.custom-field input {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--hd-input-border); background: var(--hd-input-bg);
  color: var(--hd-text); padding: 0 0.625rem; font: inherit; font-size: 0.875rem; min-width: 0; width: 100%;
}
.custom-show { grid-column: 1 / -1; }
.target-plot { min-height: 200px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; font-size: 0.75rem; color: var(--hd-muted); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--hd-hit); }
.swatch-miss { background: var(--hd-miss); }
.swatch-line { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--hd-target-line); background: none; }
.swatch-today { background: none; border: 2px dashed var(--hd-hit); }
.chart-card[data-metric="protein"] { --hd-hit: var(--hd-protein); --hd-miss: color-mix(in srgb, var(--hd-protein) 40%, var(--hd-card)); }
.chart-card[data-metric="fibre"] { --hd-hit: var(--hd-fibre); --hd-miss: color-mix(in srgb, var(--hd-fibre) 40%, var(--hd-card)); }
.chart-card[data-metric="calories"] { --hd-hit: var(--hd-calories); --hd-miss: var(--hd-warn); }
.chart-card[data-metric="sodium"] { --hd-hit: var(--hd-sodium); --hd-miss: var(--hd-warn); }
.chart-card .u-legend { display: none; }

/* Weight (2.8) */
.weight-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.weight-head h2 { font-size: 0.9375rem; font-weight: 800; }
.weight-head strong { font-size: 0.75rem; }
.weight-big { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; }
.weight-foot { display: flex; justify-content: space-between; font-size: 0.75rem; }
.weight-plot { min-height: 150px; }
.weight-plot .u-legend { display: none; }
.weight-add > summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--hd-ok); }
.weight-add > summary::-webkit-details-marker { display: none; }

/* Details (2.9): the page's other sections, closed by default, both columns wide. */
.today-details > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.25rem; }
.today-details > summary::-webkit-details-marker { display: none; }
.today-details > summary h2 { font-size: 1.125rem; font-weight: 800; }
.today-details > summary::after { content: "▸"; color: var(--hd-muted); }
.today-details[open] > summary::after { content: "▾"; }
.details-body { margin-top: 0.75rem; }
.today-page .card { border-radius: 24px; }

/* Desktop (2.11): two columns from 992 px; the chart heads the right column. */
@media (min-width: 992px) {
  .today-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .today-title { font-size: 2rem; }
  .week-strip { width: min(100%, 560px); grid-template-columns: auto 1fr auto; grid-template-areas: "prev days next"; align-items: center; }
  .today-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .today-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
  .today-side #trend { order: -1; }
  .hd-card { padding: 1.375rem; }
  .left-big { font-size: 2.5rem; }
}