/* The reports stylesheet: what tab_trends draws for Me › Lab and for
 * Progress's alert, weekly and health rows since round 12 (no Trends tab).
 *
 * Every class is prefixed trends-. No new hues: the tokens from the base sheet only,
 * red reserved for the current phase, over-budget days and open predictions.
 * Nothing here may exceed 390px of width — the heatmaps scroll inside their own
 * box (the base sheet owns that rule), never the page.
 */

.trends-loading { padding: 6px 0; }

/* ------------------------------------------- screens, not scrolls (BS10) -- */

/* The tab's face is one small card — the window switch and this week's four
 * numbers — and then the rows, one per report, on the black ground. Every
 * report is a screen a row opens; the cards themselves are unchanged and the
 * base sheet strips their box when they are pushed. */
.trends-summary { display: grid; gap: 10px; }
.trends-summary .trends-range { margin-bottom: 0; }

/* The two figures that have a target are rings; the two that do not are plain
 * stats under them. Two columns rather than four: a 64px ring plus its label
 * cannot share a 320px row four ways without the labels breaking up. */
.trends-summary-rings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

/* The ring tile's own box is dropped here: the summary card is already the
 * box, and Build Spec 10 rule 5 is that there are no cards inside cards. */
.trends-summary-ring {
  background: none;
  padding: 0;
}

.trends-summary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.trends-rows { margin-top: 2px; }

/* An alert at level red is "act on this", and says so in ink: a count of
 * alerts is not a value past a limit, so it is never red (§4.1). The row's
 * value is the span before the chevron, reached by position because this
 * sheet may only name its own prefix. */
.trends-row-alert > span:nth-last-child(2) { color: var(--ink); }

/* ----------------------------------------------------------------- window */

.trends-range { margin-bottom: 10px; }
.trends-range-note { text-align: center; }

/* ----------------------------------------------------------------- alerts */

.trends-alerts { display: grid; gap: 10px; }

.trends-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.trends-alert-text { font: 400 var(--fs-4)/1.45 var(--font); color: var(--ink-2); }
.trends-alert[data-alert="red"] .trends-alert-text { color: var(--ink); }

/* ------------------------------------------------------------ report card */

.trends-report-rows { display: grid; gap: 14px; margin: 12px 0 6px; }

.trends-week {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.trends-week[data-current="true"] {
  box-shadow: inset 0 0 0 1px var(--line);
}

.trends-week-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.trends-week-name {
  font: 600 var(--fs-4)/1.2 var(--font);
  letter-spacing: -.01em;
}
.trends-week-days {
  margin-left: auto;
  font: 500 var(--fs-2)/1.3 var(--font);
  color: var(--ink-3);
}

.trends-week-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.trends-protein { display: grid; gap: 8px; margin-top: 6px; }

/* --------------------------------------------------------------- streaks */

.trends-streaks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.trends-calendar { display: grid; gap: 16px; }

.trends-heat { display: grid; gap: 8px; }
/* The app's one sub-heading idiom: uppercase, tracked, 600 at --fs-2 in --ink-3 —
 * the same object as the settings group title and the Today date line. */
.trends-heat-title {
  font: 600 var(--fs-2)/1.4 var(--font);
  color: var(--ink-3);
}

/* The base sheet's chart-legend / chart-legend-item / chart-swatch trio, to the
 * declaration — same gaps, same 500 --fs-2 label in --ink-2. The one difference
 * is deliberate: this legend explains the calendar, so its swatch carries the
 * heatmap cell's own 3px corner. Delete this block once the tab module emits
 * the chart-legend classes directly. */
.trends-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 500 var(--fs-2)/1 var(--font);
  color: var(--ink-2);
}
.trends-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.trends-swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  display: block;
}

/* -------------------------------------------------------- energy balance */

.trends-energy { display: grid; gap: 18px; }

.trends-energy-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.trends-energy-intake,
.trends-energy-weight { display: grid; gap: 8px; }

/* same sub-heading idiom as .trends-heat-title */
.trends-chart-title {
  font: 600 var(--fs-2)/1.4 var(--font);
  color: var(--ink-3);
}

/* --------------------------------------------------------------- rings -- */

.trends-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.trends-ring { display: grid; gap: 6px; justify-items: center; }
.trends-ring-note { text-align: center; }
/* The three Adherence rings come from the chart kit, and their empty state — the
   bead a round cap paints on a zero-length arc — is settled in the base
   stylesheet, which is the one allowed to name chart classes. Every class in
   THIS file must carry the trends- prefix, and a test enforces it, so the fix
   could not live here even as an override. */

/* -------------------------------------------------------- earned extras -- */

.trends-extras { display: grid; gap: 12px; }
.trends-extras-head { display: grid; gap: 6px; }
.trends-rule { color: var(--ink-3); }

.trends-extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 0;
}
.trends-extra-name { font: 600 var(--fs-4)/1.3 var(--font); }
.trends-extra-meta { font: 400 var(--fs-2)/1.3 var(--font); color: var(--ink-3); }
.trends-extra-earned {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font: 700 var(--fs-5)/1 var(--font);
  color: var(--ink);
}

/* --------------------------------------------------------------- phases -- */

.trends-phases { display: grid; gap: 2px; }

.trends-phase {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.trends-phase::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.trends-phase:first-child::before { top: 18px; }
.trends-phase:last-child::before { bottom: auto; height: 18px; }

.trends-phase-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--ink-3);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--surface);
}
/* §C3: the live phase is an ACCENT, not an alarm. --red keeps its single job. */
.trends-phase[data-current="true"] .trends-phase-dot { background: var(--accent-mark); }

.trends-phase-body { display: grid; gap: 3px; }
.trends-phase-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trends-phase-name {
  font: 600 var(--fs-4)/1.3 var(--font);
  text-transform: capitalize;
}
.trends-phase-meta { font: 400 var(--fs-3)/1.4 var(--font); color: var(--ink-3); }

/* ------------------------- QA 2026-09-01 §2 + §11 · counted twice ---------- */

/* The card that casts doubt on the ones under it, so it reads as a question and
 * not as an error: greyscale, no red. Red on this screen means over budget. */

.trends-integrity-say { margin-bottom: 12px; }
.trends-integrity-law { color: var(--ink-3); margin-top: 12px; }

.trends-dupes { display: grid; gap: 12px; }

.trends-dupe {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.trends-dupe-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.trends-dupe-date { font: 600 var(--fs-4)/1.3 var(--font); color: var(--ink); }
.trends-dupe-gap,
.trends-dupe-delta { font: 400 var(--fs-2)/1.3 var(--font); color: var(--ink-3); }

/* The pair is the argument: two columns, side by side, so the eye compares
 * them rather than reading a sentence about them. They stack under 430px. */
.trends-dupe-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.trends-dupe-side {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 10px;
  background: var(--surface);
}
.trends-dupe-when { font-size: var(--fs-2); color: var(--ink-3); }
.trends-dupe-what { font: 500 var(--fs-4)/1.35 var(--font); color: var(--ink); }
.trends-dupe-num { font: 600 var(--fs-4)/1.3 var(--font); color: var(--ink); }
.trends-dupe-who { font: 400 var(--fs-3)/1.35 var(--font); color: var(--ink-2); }
.trends-dupe-venue { font: 400 var(--fs-2)/1.35 var(--font); color: var(--ink-3); }
.trends-dupe-slot { justify-self: start; }
.trends-dupe-rule { color: var(--ink-3); }

.trends-odds { display: grid; gap: 8px; margin-top: 16px; }

.trends-odd {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.trends-odd-when { grid-row: span 2; font-size: var(--fs-2); color: var(--ink-3); }
.trends-odd-what { font: 500 var(--fs-4)/1.35 var(--font); color: var(--ink); }
.trends-odd-why { font: 400 var(--fs-3)/1.35 var(--font); color: var(--ink-2); }

/* ------------------------------------------------ B6 · the deficit ledger -- */

.trends-deficit-stats,
.trends-estimator-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.trends-deficit-model { color: var(--ink-3); margin-bottom: 14px; }
.trends-deficit-chart { display: grid; gap: 8px; margin-bottom: 16px; }

/* QA 2026-09-01 §5 · which TDEE priced the row. Greyscale: a reference figure
 * is not an error, it is a stand-in, and it has to be readable as one. */
.trends-tdee {
  display: grid;
  gap: 6px;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.trends-tdee-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.trends-tdee-head .trends-chart-title { margin: 0; }
.trends-tdee-mix { font: 600 var(--fs-4)/1.3 var(--font); color: var(--ink); }
.trends-tdee-say,
.trends-tdee-reference,
.trends-tdee-tef { color: var(--ink-3); }
.trends-tdee-days { margin-top: 10px; }

.trends-ceiling { display: grid; gap: 8px; margin-bottom: 12px; }

/* The ceiling is the point of the card, so it gets a column of its own that
 * runs down the card: eight weeks, each with the depot that priced it. The eye
 * should be able to read the fall without doing arithmetic. */
.trends-ceiling-strip {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.trends-ceiling-week {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.trends-ceiling-week[data-over="true"] { background: var(--red-dim); }

.trends-ceiling-name { font-size: var(--fs-2); color: var(--ink-3); }
.trends-ceiling-fat { font: 400 var(--fs-2)/1.3 var(--font); color: var(--ink-3); }
.trends-ceiling-value { font: 600 var(--fs-4)/1.3 var(--font); color: var(--ink); }
.trends-ceiling-note { color: var(--ink-3); }

/* ---------------------------------------------- B6 · protein floor + events */

.trends-floor-head,
.trends-events-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.trends-events-head { grid-template-columns: minmax(0, 1fr) auto; }

.trends-floor-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.trends-floor-day {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 8px 2px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px transparent;
}
.trends-floor-day[data-met="true"] {
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}

.trends-floor-weekday { font-size: var(--fs-1); color: var(--ink-3); }
/* On the wash (a met day) text is ink or ink-2 only (the base sheet): ink-3 falls
 * under 4.5:1 there for sand, teal, steel and moss in dark. */
.trends-floor-day[data-met="true"] .trends-floor-weekday { color: var(--ink-2); }
.trends-floor-protein { font: 600 var(--fs-2)/1.2 var(--font); }
.trends-floor-rule, .trends-events-note { color: var(--ink-3); }

/* A week over its allowance is stated, never scolded: the strip marks it with a
 * taller bar and the word "over", and the note beside it is the law's own calm
 * sentence. No red, because nothing here went wrong. */
.trends-event-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  margin: 12px 0;
}

.trends-event-week {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: end;
}

.trends-event-bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 3px;
  background: var(--surface-2);
}
.trends-event-week[data-used="1"] .trends-event-bar { background: var(--ink-3); }
.trends-event-week[data-over="true"] .trends-event-bar {
  height: 16px;
  background: var(--accent-mark);
}

.trends-event-count { font: 600 var(--fs-2)/1 var(--font); color: var(--ink-2); }
.trends-event-week[data-over="true"] .trends-event-count { color: var(--ink); }
.trends-event-label { font-size: var(--fs-1); color: var(--ink-3); }

.trends-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 10px 0;
}
.trends-event-name { font: 600 var(--fs-4)/1.3 var(--font); }
.trends-event-meta { font: 400 var(--fs-2)/1.35 var(--font); color: var(--ink-3); }

/* --------------------------------------------------------- B6 · autonomic -- */

.trends-autonomic-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.trends-autonomic-metric { display: grid; gap: 8px; align-content: start; }

/* fb_04e9465b — the wrist-temperature card: two figures, the alert pill. */
.trends-wrist-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
}
.trends-autonomic-window { color: var(--ink-3); }

.trends-ash {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.trends-ash-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trends-ash-name { font: 600 var(--fs-4)/1.3 var(--font); }
.trends-ash-window { font-size: var(--fs-2); color: var(--ink-2); }
.trends-ash-note { color: var(--ink-3); }

/* ------------------------------------------- E7 · the estimator report card */

/* The target is printed on the instrument, the way a calibration sticker is —
 * in words, with the sentence it was FILED as quoted underneath it. The quote
 * keeps the mono face because it is a record being cited, not prose. */
.trends-estimator-target {
  font-size: var(--fs-2);
  color: var(--ink-2);
  padding: 8px 10px;
  margin-bottom: 6px;
  border-left: 2px solid var(--accent-mark);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.trends-estimator-filed {
  margin: 0 0 12px 12px;
  font-size: var(--fs-1);
  color: var(--ink-3);
}

.trends-paths { display: grid; gap: 1px; background: var(--line);
                border-radius: var(--radius-sm); overflow: hidden; }

.trends-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px;
  background: var(--surface-2);
}
.trends-path-name { font: 600 var(--fs-4)/1.3 var(--font); }
.trends-path-n { font: 400 var(--fs-2)/1.3 var(--font); color: var(--ink-3); }
.trends-path-mae { font: 700 var(--fs-5)/1.2 var(--font); }
.trends-path[data-meets="false"] .trends-path-mae { color: var(--red); }
.trends-path[data-meets="true"] .trends-path-mae { color: var(--ink); }
.trends-path[data-meets="unknown"] .trends-path-mae { color: var(--ink-3); }
.trends-path-bias {
  grid-column: 2 / 4;
  justify-self: end;
  font: 400 var(--fs-2)/1.3 var(--font);
  color: var(--ink-3);
}

.trends-estimator-verdict { margin-top: 10px; color: var(--ink-2); }
.trends-estimator-chart { display: grid; gap: 8px; margin-top: 14px; }

/* ---------------------------------------------------------- predictions -- */

/* The shrine. Nothing is ever deleted from it, so nothing here renders a
 * control that could look like a way to. */
.trends-shrine-note { color: var(--ink-3); margin-bottom: 12px; }

.trends-pred-group { margin-bottom: 18px; }
.trends-pred-group:last-of-type { margin-bottom: 0; }

/* the app's one sub-heading idiom, as in .trends-heat-title */
.trends-group-title {
  font: 600 var(--fs-2)/1.4 var(--font);
  color: var(--ink-3);
}
.trends-group-note { color: var(--ink-3); margin-bottom: 4px; }

/* The heading now says the prediction's SUBJECT rather than its slug, so it
 * reads as a title: the ink comes forward and the mono face goes (the id it was
 * built from is still on `data-prediction` and on the element's title). */
.trends-pred-id {
  font: 600 var(--fs-3)/1.3 var(--font);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.trends-pred-window {
  font-size: var(--fs-2);
  color: var(--ink-2);
}

/* The countdown is the one number on the row that changes by itself, so it is
 * the one that gets the accent. */
.trends-countdown {
  font: 600 var(--fs-3)/1.3 var(--font);
  color: var(--accent-ink);
}

.trends-pred-claim-key { color: var(--ink-3); }
.trends-pred-claim-value { color: var(--ink); }

/* Claimed against measured, in one eye movement — this is what makes a graded
 * miss useful rather than merely archived. */
.trends-exhibit {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.trends-exhibit-head,
.trends-exhibit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.trends-exhibit-head { background: var(--surface); }

.trends-exhibit-label {
  font: 600 var(--fs-1)/1.3 var(--font);
  color: var(--ink-3);
  text-align: right;
}
.trends-exhibit-field {
  font: 400 var(--fs-3)/1.35 var(--font);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.trends-exhibit-claimed,
.trends-exhibit-actual {
  font: 500 var(--fs-3)/1.35 var(--font);
  text-align: right;
  overflow-wrap: anywhere;
}
.trends-exhibit-claimed { color: var(--ink-3); }
.trends-exhibit-actual { color: var(--ink); }

.trends-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.trends-pred { display: grid; gap: 8px; padding: 12px 0; }
.trends-pred-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
}
/* A prediction claim is ledger text the app did not write. It can be one long
 * unbreakable token, so it breaks anywhere rather than pushing the card out of
 * the screen. */
.trends-pred-claim {
  font: 500 var(--fs-4)/1.45 var(--font);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.trends-pred-meta { font: 400 var(--fs-2)/1.4 var(--font); color: var(--ink-3); }
.trends-pred-grade {
  font: 400 var(--fs-3)/1.45 var(--font);
  color: var(--ink-2);
  padding: 8px 10px;
  border-left: 2px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.trends-grade { width: auto; justify-self: start; padding: 10px 18px; }

.trends-form { display: grid; gap: 12px; }
.trends-form-claim {
  font: 500 var(--fs-5)/1.45 var(--font);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.trends-grade-verdict, .trends-file-claim { min-height: 88px; resize: vertical; }

/* --------------------------------------------------------------- export -- */

.trends-exports {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.trends-download { display: none; }

/* ----------------------------------------------------------- responsive -- */

@container (max-width: 398px) {
  .trends-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-week-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-streaks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-energy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-rings .trends-ring:last-child { grid-column: 1 / -1; }
  .trends-deficit-stats,
  .trends-estimator-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-deficit-stats .trends-stat:last-child,
  .trends-estimator-stats .trends-stat:last-child { grid-column: 1 / -1; }
  /* Seven day chips at 390px are 46px wide, which is under the tap floor for a
   * chip carrying two lines — so they wrap to four and three instead. */
  .trends-floor-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trends-ceiling-week { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  /* Two halves of a duplicate at 390px are 170px wide, which turns a meal name
   * into three lines; the pair reads better stacked, one above the other. */
  .trends-dupe-pair { grid-template-columns: minmax(0, 1fr); }
  .trends-odd { grid-template-columns: minmax(0, 1fr); }
  .trends-odd-when { grid-row: auto; }
  .trends-exhibit-head,
  .trends-exhibit-row { gap: 6px; padding: 8px; }
}