:root {
  color-scheme: light;
  --bg: #eef5f0;
  --bg-glow: #d9efe1;
  --surface: #ffffff;
  --surface-2: #f4f9f5;
  --border: #d8e7dc;
  --text: #11231a;
  --text-2: #4a6355;
  --muted: #7d9486;
  --accent: #1e8f55;
  --accent-strong: #15703f;
  --accent-soft: #dff2e6;
  --on-accent: #ffffff;
  --grid: #e6efe8;
  --target: #4a6355;
  --series-1: #1e8f55;
  --series-2: #3b6fd6;
  --series-3: #c8721f;
  --water: #2b8bb8;
  --sleep: #6a5acd;
  --warn: #b26a00;
  --danger: #c0392b;
  --deficit: #1b8a6b;
  --surplus: #d0542f;
  --radius: 18px;
  --shadow: 0 1px 2px rgb(17 35 26 / 6%), 0 8px 24px rgb(17 35 26 / 6%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1712;
    --bg-glow: #12301f;
    --surface: #13201a;
    --surface-2: #182a21;
    --border: #24392d;
    --text: #e6f2ea;
    --text-2: #a9c2b2;
    --muted: #7a9484;
    --accent: #2fa766;
    --accent-strong: #4cc985;
    --accent-soft: #1b3a29;
    --on-accent: #06140c;
    --grid: #1f3127;
    --target: #a9c2b2;
    --series-1: #2fa766;
    --series-2: #5a83dc;
    --series-3: #c97d39;
    --water: #3d9fcc;
    --sleep: #8677e0;
    --warn: #e0a040;
    --danger: #ef6b5b;
    --deficit: #24a080;
    --surplus: #e6643e;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 500px at 10% -10%, var(--bg-glow), transparent 70%), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}

/* Top bar */
/* One row: brand, topics (taking the free width), period, sync time with the refresh button. */
.top {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand img { width: 28px; height: 28px; }
.brand h1 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; }
/* The sync time shows in a small bubble under the refresh button, only on hover or focus. */
.sync { position: relative; flex: none; }
.sync .status-line {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: max-content; margin: 0; padding: 6px 10px;
  font-size: .75rem; line-height: 1.5; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.sync:hover .status-line, .sync:focus-within .status-line { opacity: 1; }
/* While the refresh button works, a pill to its left names the step, then what came in, then fades. */
.sync .sync-progress {
  position: absolute; top: 50%; right: calc(100% + 8px); z-index: 31;
  padding: 6px 12px; white-space: nowrap; max-width: calc(100vw - 80px); overflow: hidden; text-overflow: ellipsis;
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .2s, transform .2s;
}
.sync .sync-progress.show { opacity: 1; transform: translate(0, -50%); }
.sync:has(.sync-progress.show) .status-line { opacity: 0; }
.sync .sync-progress.ok { color: var(--accent-strong); border-color: var(--accent); }
.sync .sync-progress.warn { color: var(--warn); border-color: var(--warn); }
#refresh { position: relative; }
#refresh.stale::after {
  content: "!"; position: absolute; top: -3px; right: -3px;
  width: 14px; height: 14px; border-radius: 999px; display: grid; place-items: center;
  background: var(--warn); color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
}

.seg {
  flex: none;
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow);
}
.seg button {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 28px;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg .unit-short { display: none; }
.seg .range-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-left: 9px; padding-right: 9px; white-space: nowrap; }
.seg .range-btn svg { width: 16px; height: 16px; flex: none; }
.seg .range-label:empty { display: none; }

/* The custom period's calendar opens under the period buttons, its right edge on theirs. */
.period { position: relative; flex: none; }
.range-picker { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(292px, calc(100vw - 24px)); padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.range-picker[hidden] { display: none; }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .9rem; }
.rp-nav { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.rp-nav:disabled { opacity: .35; cursor: default; }
.rp-wk, .rp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.rp-wk span { font-size: .7rem; font-weight: 700; color: var(--muted); padding: 2px 0; }
.rp-grid button { font: inherit; font-size: .85rem; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.rp-grid button:hover:not(:disabled) { background: var(--surface-2); }
.rp-grid button.in { background: var(--accent-soft); border-radius: 0; }
.rp-grid button.edge { background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: 999px; }
.rp-grid button.today:not(.edge) { font-weight: 800; color: var(--accent-strong); }
.rp-grid button:disabled { color: var(--muted); opacity: .45; cursor: default; }
.rp-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.rp-ok { font: inherit; font-size: .85rem; font-weight: 700; padding: 6px 18px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); cursor: pointer; }

.icon-btn {
  font: inherit;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow);
  text-decoration: none;
}
.icon-btn:hover { color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* The header stays on top while the page scrolls, painted with the page's own fixed background. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: calc(-1 * max(16px, env(safe-area-inset-top))) -16px 0;
  padding: max(16px, env(safe-area-inset-top)) 16px 1px;
  background: radial-gradient(1200px 500px at 10% -10%, var(--bg-glow), transparent 70%), var(--bg);
  background-attachment: fixed;
}

/* Topic menu: one pill per section, the one in view filled; scrolls sideways on a phone. */
html { scroll-behavior: smooth; }
.topics { display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.topics::-webkit-scrollbar { display: none; }
.topics a { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; color: var(--text-2); font-size: .8rem; font-weight: 600; text-decoration: none; }
.topics a:hover { background: var(--surface); border-color: var(--border); }
.topics a:hover { color: var(--text); }
.topics a.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Section titles */
h2.section {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
  margin: 34px 0 12px;
  font-weight: 700;
  scroll-margin-top: calc(var(--masthead-h, 150px) + 6px);
}
.masthead + h2.section { margin-top: 18px; }

/* Card titles and the small gray note beside them, one style everywhere. */
.card-title { margin: 0 0 4px; font-size: 1rem; letter-spacing: -0.01em; }
.card-meta { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-head .card-title { margin: 0; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.kpi .label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); font-size: .9rem; }
.kpi .label .dot { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kpi .label .dot svg { width: 16px; height: 16px; }
.kpi .value { font-size: 1.9rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi .hint { font-size: .82rem; color: var(--text-2); }
.kpi .hint b { color: var(--text); }

.bar { height: 8px; border-radius: 999px; background: var(--grid); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .5s ease; }
/* Each of today's bars in its own subject's color, as in the charts. */
#kpi-water .bar > i { background: var(--water); }
#kpi-protein .bar > i { background: var(--series-1); }
#kpi-fruit .bar > i { background: var(--fruit); }
.bar.over > i { background: var(--warn); }


/* Charts */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Cards side by side share their rows (header, chart, legend, notice), so the plots and legends line up. */
.charts > .card { grid-row: span 4; }
.charts > .chart-card, .charts > .fruit-card { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.chart-card .legend { align-self: start; }
.chart-card .avg .tag { display: block; font-weight: 600; }
.chart-card .avg .tag.deficit { color: var(--deficit); }
.chart-card .avg .tag.surplus { color: var(--surplus); }
.chart-card .avg .proj { display: block; font-size: .75rem; color: var(--text-2); margin-top: 2px; }
.legend i.area { opacity: .35; }
.legend i.area.train { opacity: .7; }
.copy-btn { position: absolute; right: 0; top: -5px; opacity: 0; transition: opacity .15s; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; }
.chart-card:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.done { opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 1; } }
@media print { .copy-btn { display: none; } }
.copy-btn:hover { color: var(--text); border-color: var(--text-2); }
.copy-btn.done { color: var(--accent); border-color: var(--accent); }
.copy-btn svg { width: 15px; height: 15px; }
.chart-card { position: relative; }
.note-editor { position: absolute; z-index: 5; width: min(320px, calc(100% - 16px)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; display: grid; gap: 8px; }
.note-editor label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--text); }
.note-editor textarea { font: inherit; font-weight: 400; font-size: .9rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 64px; }
.note-editor textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.note-editor .actions { display: flex; align-items: center; gap: 8px; }
.note-editor .hint { margin-right: auto; font-size: .75rem; color: var(--muted); }
.note-editor button { font: inherit; font-size: .85rem; font-weight: 600; border-radius: 8px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.note-editor button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.note-editor button:disabled { opacity: .6; cursor: default; }
/* A wide card takes the whole row: the macros, the weight, the workouts list and the exam table. */
.charts > .wide { grid-column: 1 / -1; }
.charts > .card:not(.chart-card) { grid-row: auto; }
/* The body charts' own range, small, at the end of the section title. */
h2.section .body-range { margin-left: 10px; vertical-align: middle; box-shadow: none; padding: 2px; text-transform: none; letter-spacing: 0; }
h2.section .body-range button { font-size: .75rem; min-height: 22px; padding: 2px 9px; }
/* The meal times chart is taller: its right side stacks up to five meals with three lines each. */
[data-chart="mealtimes"] .chart-box { height: 330px; }
.legend i.dot { border-radius: 50%; }
/* Every exam number with how it moved: green the good way, red the other. */
.scan-table { overflow-x: auto; margin-top: 10px; }
.scan-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88rem; }
.scan-table th, .scan-table td { text-align: right; padding: 7px 8px; border-top: 1px solid var(--border); white-space: nowrap; }
.scan-table thead th { border-top: 0; padding-bottom: 10px; padding-left: 16px; vertical-align: bottom; }
/* Column heads: how far back, in the text color, and the date under it in a lighter line. */
.scan-table thead .what { display: block; font-size: .85rem; font-weight: 700; color: var(--text); }
.scan-table thead .when { display: block; margin-top: 2px; font-size: .75rem; font-weight: 500; color: var(--text-2); }
.scan-table th:first-child, .scan-table td:first-child { text-align: left; padding-left: 0; }
.scan-table tbody th { font-weight: 600; color: var(--text-2); }
.scan-table td.now { font-weight: 700; color: var(--text); }
.scan-table td small { color: var(--muted); font-weight: 500; }
.scan-table .good { color: var(--deficit); font-weight: 600; }
.scan-table .bad { color: var(--surplus); font-weight: 600; }
.scan-table .flat, .scan-table .range { color: var(--muted); }
.scan-table td.now.out { color: var(--warn); }
/* The measure names stay in place while the comparisons scroll sideways on a phone. */
.scan-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.scan-key { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }
.scan-key .out { color: var(--warn); font-weight: 600; }
.scan-goal { margin: 10px 0 0; font-size: .85rem; color: var(--text-2); }
.chart-card .avg .tag.good { color: var(--deficit); }
.chart-card .avg .tag.bad { color: var(--surplus); }
.legend i.hollow { background: transparent; border: 2px solid; border-radius: 50%; box-sizing: border-box; }
.chart-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.chart-card h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; }
.chart-card .meta { font-size: .8rem; color: var(--muted); }
.chart-card .avg { text-align: right; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.chart-card .avg b { display: block; font-size: 1.15rem; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.chart-box { position: relative; height: 220px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; padding: 0 36px; font-size: .8rem; color: var(--text-2); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.nap { background: color-mix(in srgb, var(--sleep) 10%, transparent); border: 1.25px dashed var(--sleep); box-sizing: border-box; }
.legend i.line { height: 0; width: 16px; border-top: 2px dashed var(--target); border-radius: 0; }
/* A single-series average: the bars' color pulled toward the text color, as app.js averageColor does. */
.legend i.line.avg { border-top-color: color-mix(in srgb, var(--bar) 55%, var(--text)); }
/* The macros corner: a left-aligned block that grows leftward and never wraps. The rows share one
   grid (subgrid), so the name column is as wide as the longest name and the share, up to 100%, and the
   kcal line up from row to row. */
.chart-card[data-chart="macros"] .avg { display: grid; grid-template-columns: 9px max-content max-content max-content; column-gap: 6px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-card .avg .lead { grid-column: 1 / -1; }
.chart-card .avg .share { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; line-height: 1.5; }
.chart-card .avg .share i { width: 9px; height: 9px; border-radius: 2px; }
.chart-card .avg .share b { display: block; font-size: inherit; color: var(--text); text-align: right; letter-spacing: 0; }
.legend em { font-style: normal; }

/* Rings: goals as Apple-style rings (dashboard/rings.py), the same colors in both themes. The combined
   rings take the colors of the places they hold: Água e treinos the water's, Nutrição the workouts'. */
:root { --ring-water_workouts: var(--ring-water); --ring-nutrition: var(--ring-workouts);
  --ring-water_workouts-text: var(--ring-water-text); --ring-nutrition-text: var(--ring-workouts-text); }
:root { --ring-calories: #fa114f; --ring-sleep: #7d7aff; --ring-water: #00c8f0; --ring-workouts: #8fdc00; --ring-done: #e6e4de; --ring-heart: #e0243a;
  /* Ring names as text: the ring colors darkened enough to read on white (the dark theme uses bright ones). */
  --ring-calories-text: #d10a42; --ring-sleep-text: #5550e0; --ring-water-text: #0784a6; --ring-workouts-text: #4a8500; --fruit: #c2417a;
  /* One color per meal, in the meal times chart. */
  --meal-breakfast: #d99a00; --meal-lunch: #2a78d6; --meal-snack: #1baf7a; --meal-dinner: #eb6834; --meal-late: #6250d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ring-done: #4d5a52; --ring-calories-text: #ff4d7d; --ring-sleep-text: #9a97ff; --ring-water-text: #2fd3f5; --ring-workouts-text: #a3e635; --fruit: #e0679a;
  --meal-breakfast: #e0a82a; --meal-lunch: #3987e5; --meal-snack: #22b884; --meal-dinner: #e2672f; --meal-late: #9085e9; } }
.rings-card { display: grid; gap: 14px; }
.rings-day { display: flex; align-items: center; gap: 22px; }
.rings-big { flex: none; display: grid; justify-items: center; gap: 12px; width: 168px; }
.rings-big svg { display: block; width: 100%; aspect-ratio: 1; }
.ring-cell svg { display: block; width: 100%; height: 100%; }
/* A dot per ring under the big rings: a light gray outline while open, its color once it closes. */
.ring-dots { display: flex; gap: 8px; }
.ring-dots i { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); }
.ring-dots i.on { background: var(--dot); border-color: var(--dot); }
.rings-side { min-width: 0; flex: 1; }
.rings-title { font-weight: 700; margin-bottom: 6px; }
/* Two columns shared by every ring: the name (and ✓) as wide as the longest name, on one line, then the
   note in gray, every note starting at the same edge. Each li lends its cells to the list's grid. */
.rings-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; font-size: .88rem; line-height: 1.35; }
.rings-notes li { display: contents; }
.rings-notes b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; grid-column: 1; }
.rings-notes .ok { font-size: .8rem; }
.rings-notes .note { color: var(--muted); }
.ring-alert { grid-column: 2; display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--danger); font-weight: 600; }
.ring-alert svg { flex: none; width: 15px; height: 15px; }
/* The workouts week: an icon and a block per session for each kind, side by side, wrapping on a phone. */
/* Every row of a ring spans the same width, eight 22px blocks: a row with fewer blocks gets wider ones,
   a row with more gets narrower ones, so all start and end together and show which kind is behind. */
.workout-blocks { --row-width: 197px; display: grid; justify-items: stretch; gap: 5px; min-height: 1.35em; }
.workout-blocks .water-bar { position: relative; flex: 1 1 0; min-width: 0; max-width: var(--row-width); height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.workout-blocks .water-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--block, var(--ring-water)); }
/* Protein: the whole bar in a tint close to the ring's color (it reads as full: the average is above the goal),
   the solid color up to the 7-day average, and
   a thin mark at 100% of the goal that stays inside the bar. */
.workout-blocks .protein-bar { background: color-mix(in srgb, var(--block, var(--ring-nutrition)) 70%, var(--surface)); }
.workout-blocks .protein-bar b { position: absolute; top: 1px; bottom: 1px; width: 1.5px; margin-left: -0.75px; border-radius: 1px; background: var(--surface); opacity: .9; }
.workout-blocks .kind { display: flex; align-items: center; gap: 8px; min-width: 0; }
.workout-blocks svg { flex: none; width: 18px; height: 18px; }
.workout-blocks .blocks { display: flex; gap: 3px; flex: 1 1 0; min-width: 0; max-width: var(--row-width); }
.workout-blocks .blocks i { flex: 1 1 0; min-width: 0; }
.workout-blocks i { width: 22px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.workout-blocks i.on { background: var(--block, var(--ring-workouts)); }
.workout-blocks i.extra { background: var(--block, var(--ring-workouts)); opacity: .55; }
.workout-blocks i.due { background: color-mix(in srgb, var(--danger) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--danger); }
.rings-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.ring-cell { font: inherit; display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; font-size: .75rem; font-weight: 600; }
.ring-cell .ring-wrap { position: relative; display: block; width: min(56px, 100%); aspect-ratio: 1; }
/* A perfect day's heart, at the ring's lower right; the missed rings' dots, under it. */
.ring-cell .seal { position: absolute; right: -12%; bottom: -6%; width: 42%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--ring-heart); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.ring-cell .seal svg { width: 62%; height: 62%; }
.ring-cell .missed { display: flex; justify-content: center; gap: 3px; height: 6px; }
.ring-cell .missed i { width: 6px; height: 6px; border-radius: 50%; }
.ring-cell:hover { background: var(--surface-2); }
.ring-cell[aria-pressed="true"] { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.ring-cell.today { color: var(--text); }
.rings-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.help-btn { font: inherit; width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: middle; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .75rem; font-weight: 700; letter-spacing: 0; cursor: pointer; }
.help-btn:hover { color: var(--accent); border-color: var(--accent); }

.rings-dialog { width: min(560px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.rings-dialog::backdrop { background: rgb(0 0 0 / 45%); }
/* Three stacked parts: the header, the calendar that scrolls, and the day's details fixed under it (beside it on a wide screen: see the media query further down). */
.rings-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
/* The goals history: a layer over the calendar and the day's panel, under the header, full width (the
   open modal dialog is fixed, so it is the layer's containing block). */
.rings-goals { position: absolute; inset: var(--goals-top, 64px) 0 0 0; z-index: 3; overflow-y: auto; overscroll-behavior: contain; padding: 14px 52px 20px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.rings-goals[hidden] { display: none; }
#rings-goals-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; box-shadow: none; }
/* In the day's panel, narrower than the ring card: shorter rows (eight 16px blocks) so they still fit. */
.rings-pick .workout-blocks { --row-width: 149px; }
/* --ring-inset is how far the first ring sits inside its cell (app.js measures it): the dialog's title,
   the legend and each month's title start where the rings start. */
.rings-dialog header { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 12px calc(16px + var(--ring-inset, 0px)); background: var(--surface); border-bottom: 1px solid var(--border); }
/* The legend stays in the sticky header, so it is there at any scroll. */
.rings-legend { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--text-2); }
.rings-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rings-legend i { width: 9px; height: 9px; border-radius: 50%; }
/* The goals history link, under the legend, and its list in the details panel. */
.link-btn { font: inherit; font-size: .8rem; font-weight: 600; padding: 0; border: 0; background: none; color: var(--accent, var(--text)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Each stretch a block of its own; dates, rings and goals share one label column. */
.goal-history { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 18px; font-size: .84rem; line-height: 1.4; }
.goal-history > li { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.goal-history dl { margin: 0; display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 12px; }
.goal-history dt { font-weight: 600; }
.goal-history dt.k { font-weight: 400; color: var(--text-2); }
.goal-history dt.gap { grid-column: 1 / -1; height: 6px; }
.goal-history dd { margin: 0; }
.goal-history dd b { font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-history .tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; color: var(--ring-workouts-text); background: color-mix(in srgb, var(--ring-workouts) 18%, transparent); }
/* Rodízio de Frutas: a row of 7 squares per fruit, one per serving; the fruits at the limit in gray.
   On the chart rows: its header beside the chart's header, the list beside the chart, the last line beside the legend. */
.charts > .card.fruit-card { grid-row: span 4; }
.charts > .fruit-card > header { grid-row: 1; }
.charts > .fruit-card > .fruit-bars { grid-row: 2; align-self: start; }
.charts > .fruit-card > #fruit-more { grid-row: 3; align-self: start; }
.fruit-card header h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.fruit-card header .meta { margin: 2px 0 12px; }
/* One grid for every row, so the squares start at the same place right after the longest name. */
.fruit-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; gap: 8px 14px; font-size: .9rem; }
.fruit-bars li { display: contents; }
.fruit-bars .name { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fruit-bars .icon { width: 1.2em; text-align: center; }
.fruit-bars .icon .dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -1px; }
.fruit-bars .squares { display: grid; grid-template-columns: repeat(7, 14px); gap: 3px; }
.fruit-bars .squares i { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.fruit-bars .squares i.on { background: var(--ring-nutrition); }
.fruit-bars .count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.25; }
@media (max-width: 480px) { .fruit-bars { column-gap: 10px; } .fruit-bars .squares { grid-template-columns: repeat(7, 11px); } }
.fruit-bars li.blocked .name { color: var(--muted); }
.fruit-bars li.blocked .squares i.on { background: color-mix(in srgb, var(--muted) 60%, transparent); }
#fruit-more { margin: 10px 0 0; }
/* The portions pop-up: the fruits grouped by how they are measured, an icon each, bold only in titles. */
.portions-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 0 20px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); }
.portions-dialog::backdrop { background: rgba(0, 0, 0, .4); }
/* The title and the X stay put while the pop-up scrolls: the title is a sticky band across the top, and
   the X sticks above it (its negative bottom margin keeps it from pushing the title down). */
.portions-dialog > h3 { position: sticky; top: 0; z-index: 1; margin: 0 -20px; padding: 18px 56px 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
/* A ? pop-up: black on white, a numbered list per topic, and chips, swatches and tables where a picture says it shorter. */
.help-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; color: var(--text); font-size: .92rem; line-height: 1.5; }
.help-dialog section { margin-top: 20px; }
.help-dialog section + section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.help-dialog h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .95rem; }
.help-dialog h4 .heart { width: 15px; height: 15px; color: var(--ring-heart); }
.help-dialog p { margin: 0 0 8px; }
.help-dialog ol.steps { list-style: none; counter-reset: step; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.help-dialog ol.steps > li { counter-increment: step; position: relative; display: block; padding: 0 0 0 32px; font-size: inherit; }
.help-dialog ol.steps .chips { margin: 4px 0 0; }
.help-dialog ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.help-dialog .sw { flex: none; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.help-dialog h4 .sw { margin-right: 0; }
.help-dialog .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.help-dialog .chips > span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .85rem; font-variant-numeric: tabular-nums; }
.help-dialog .slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin: 0 0 10px; }
.help-dialog .slots > span { padding: 6px 4px; border-radius: 10px; background: var(--surface-2); text-align: center; font-size: .82rem; line-height: 1.3; }
.help-dialog .slots small { display: block; font-variant-numeric: tabular-nums; }
.help-dialog .drinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.help-dialog .drinks > div { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--deficit) 10%, var(--surface)); }
.help-dialog .drinks > .no { background: color-mix(in srgb, var(--surplus) 10%, var(--surface)); }
.help-dialog .em { margin-right: 6px; }
.help-dialog h5 { margin: 0 0 4px; font-size: .85rem; }
.help-dialog .drinks p { margin: 0; }
.portions-dialog > .meta { margin: 12px 0 14px; }
.portions-dialog > .dialog-close { position: sticky; top: 14px; z-index: 2; display: grid; margin: 14px -8px -44px auto; width: 30px; height: 30px; box-shadow: none; }
.portions-dialog:not(.help-dialog) section + section { margin-top: 14px; }
.portions-dialog h4 { margin: 0 0 6px; font-size: .84rem; }
.portions-dialog ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.portions-dialog li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 0; font-size: .9rem; }
.portions-dialog .icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; background: var(--surface-2); }
.portions-dialog .icon i { width: 14px; height: 14px; border-radius: 50%; }
.portions-dialog small { display: block; font-size: .8rem; color: var(--text); }
.rings-dialog h3 { margin: 0; font-size: 1.05rem; }
/* A month is exactly as tall as the calendar and the scroll snaps to it: its title and all its weeks stay in view. */
.rings-months { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; container-type: size; scroll-snap-type: y mandatory; }
.rings-months .month { min-height: 100cqh; padding: 8px 0; scroll-snap-align: start; }
/* The month's title stands apart from the weekday letters, which belong to the grid under them. */
.rings-months h4 { margin: 10px 0 16px; padding-left: var(--ring-inset, 0px); font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; }
.rings-months .wk, .rings-months .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.rings-months .wk { margin-bottom: 2px; }
.rings-months .wk span { font-size: .7rem; font-weight: 700; color: var(--muted); }
.rings-months .ring-cell { padding: 2px 0; gap: 2px; }
.rings-months .ring-cell .day-num { line-height: 15px; }
.rings-months .ring-cell.empty { cursor: default; opacity: .55; }
.rings-months .ring-cell.empty:hover { background: none; }
.rings-pick { flex: none; position: relative; max-height: 35%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 52px 12px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.rings-pick[hidden] { display: none; }
#rings-pick-close { position: absolute; top: 8px; right: 12px; width: 30px; height: 30px; box-shadow: none; }
.rings-pick .rings-notes { font-size: .82rem; }
/* The ring shrinks with the calendar's height: six weeks share what the title, weekday row and gaps leave,
   less each cell's number, gaps and dots. */
.rings-months .ring-cell .ring-wrap { width: max(14px, min(46px, 100%, calc((100cqh - 124px) / 6 - 29px))); }
.rings-months .ring-cell.today .day-num { color: var(--on-accent); background: var(--ring-calories); border-radius: 999px; padding: 0 6px; }
/* On a wide screen the day's details sit beside the calendar, so the month gets the dialog's full height. */
@media (min-width: 760px) {
  .rings-dialog { width: min(880px, calc(100vw - 24px)); }
  .rings-dialog[open] { display: grid; grid-template: "head head" auto "months pick" minmax(0, 1fr) / minmax(0, 1fr) 280px; }
  .rings-dialog header { grid-area: head; }
  /* Title on the left; the legend on the right, just before the X. */
  .rings-legend { flex-basis: auto; margin-left: auto; }
  .rings-dialog #rings-close { order: 9; margin-left: 14px; }
  .rings-months { grid-area: months; }
  .rings-dialog:has(#rings-pick[hidden]) .rings-months { grid-column: 1 / -1; }
  .rings-pick { grid-area: pick; max-height: none; border-top: 0; border-left: 1px solid var(--border); }
}

/* Lists */
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.list li:first-child { border-top: 0; }
.list .time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; font-weight: 600; }
.list .what { min-width: 0; }
.list .what b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .what span { font-size: .8rem; color: var(--muted); }
.list .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.list .amt span { display: block; font-size: .78rem; color: var(--muted); font-weight: 500; }
.empty { color: var(--muted); font-size: .9rem; padding: 8px 0; }
.list li.empty { display: block; border-top: 0; }
.chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); text-transform: capitalize; }

.notice { margin-top: 10px; font-size: .85rem; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 12px; padding: 10px 12px; }

.err { color: var(--danger); }

details.table { margin-top: 8px; font-size: .8rem; color: var(--text-2); }
details.table summary { cursor: pointer; color: var(--muted); }
details.table table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
details.table th, details.table td { text-align: right; padding: 3px 4px; border-top: 1px solid var(--border); }
details.table th:first-child, details.table td:first-child { text-align: left; }

footer.foot { margin-top: 28px; text-align: center; font-size: .78rem; color: var(--muted); }
footer.foot a { color: var(--muted); }

/* Login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(100%, 22rem); display: grid; gap: .9rem; padding: 1.8rem 1.6rem; }
.login .brand { justify-content: center; margin: 0 0 .4rem; }
.login input {
  font: inherit;
  font-size: 1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
}
.login input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login button {
  font: inherit;
  font-weight: 650;
  padding: .7rem .9rem;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.login button:disabled { opacity: .6; cursor: default; }
.login .error { margin: 0; color: var(--danger); text-align: center; font-size: .9rem; }
.login .error:empty { display: none; }

/* Responsive */
@media (max-width: 900px) {
  /* The topics drop to a second row of their own and scroll sideways. */
  .top { flex-wrap: wrap; }
  .brand { margin-right: auto; }
  .topics { order: 9; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
  /* A phone keeps brand, period and refresh on one row: the sync time gives way. */
  .seg .unit { display: none; }
  .seg .unit-short { display: inline; }
  .top { gap: 8px 10px; }
  /* With a custom range, the period buttons take a row of their own under brand and refresh, wide
     enough for the dates. */
  .top.has-range .period { order: 8; flex-basis: 100%; }
  .top.has-range .seg { display: flex; justify-content: space-between; }
  /* The rings' history fills the whole screen, nothing of the page behind it; the X closes it. */
  .rings-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .rings-dialog header { padding-top: max(12px, env(safe-area-inset-top)); }
  .rings-pick { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts, .lists { grid-template-columns: minmax(0, 1fr); }
  /* A phone stacks the big rings over the day and its notes, which get the full width. */
  .rings-day { flex-direction: column; align-items: stretch; gap: 12px; }
  .rings-big { align-self: center; width: 150px; }
  .rings-notes { column-gap: 10px; }
  /* A chart's title and note take the full width; its highlighted number follows on one line. */
  .chart-card header { flex-direction: column; gap: 6px; }
  .chart-card[data-chart="macros"] header { gap: 12px; }
  .chart-card .avg { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .chart-card .avg b, .chart-card .avg .tag, .chart-card .avg .proj { display: inline; margin: 0; }
  .chart-card .avg b { font-size: 1.05rem; }
  .legend { gap: 4px 12px; font-size: .75rem; }
  .macro .row { flex-wrap: wrap; }
  .macro .row .num { margin-left: auto; }
  .scan-table table { font-size: .8rem; }
  .scan-table th, .scan-table td { padding: 6px 5px; }
  h2.section { margin: 28px 0 10px; }
}
@media (max-width: 420px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .masthead { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .kpis { gap: 10px; }
  .card { padding: 14px; }
  .kpi .value { font-size: 1.55rem; }
  .chart-box { height: 200px; }
  .seg button { padding: 6px 11px; }
}
/* Under the calories outlook chart: the red line when a coming day would open the ring, else a gray one. */
/* The calories Ring forecast: its main number (the deficit a day that keeps every coming day closed),
   two smaller ones beside it, the chart, a centered legend and the alert block. */
.chart-card .forecast-header { display: block; }
.forecast-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin: 12px 0 4px; }
.forecast-head .k { display: block; font-size: .8rem; color: var(--muted); }
.forecast-head .v { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.forecast-head .v small { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.forecast-main .v { font-size: 2.3rem; letter-spacing: -0.03em; line-height: 1.1; }
.forecast-main .v.short { color: var(--danger); }
.forecast-side { display: flex; gap: 20px; }
.forecast-side .v { font-size: 1rem; margin-top: 2px; }
.chart-card .forecast-legend { align-self: stretch; }
.outlook-note { margin-top: 10px; font-size: .85rem; color: var(--text-2); }
.outlook-note .alert-block { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.outlook-note .alert-block svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.outlook-note .alert-block b { display: block; font-size: .95rem; line-height: 20px; }
.outlook-note .alert-block p { margin: 2px 0 0; font-weight: 500; line-height: 1.45; }
.kpi .hint .ring-alert { margin-top: 4px; }
/* A legend item that hides and shows its series: a pointer, and faded with its name struck while off. */
.legend [data-series] { cursor: pointer; user-select: none; border-radius: 6px; transition: opacity .15s; }
.legend [data-series]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend [data-series].off { opacity: .4; text-decoration: line-through; }
/* A Ring's line alert under its bars (protein): small, light and right under the bar it is about,
   starting where the bars start (icon 18px + gap 8px). */
.ring-alert.soft { margin-top: -3px; padding-left: 26px; font-size: .78rem; font-weight: 500; gap: 4px; }
.ring-alert.soft svg { width: 12px; height: 12px; }