/* ==========================================================================
   (v208) fuel.css — fiber as a macro + the Day · Week · Month · Q · Year
   macro tracker (renderMacroTracker in app.js). Shared by Today → Fuel
   (#fuelTracker) and Guide → Fuel → Macros (#guideMacroTracker).
   Loaded after today.css. Uses design-system tokens only; does not touch
   the ring / bar internals in today.css or the chart kit internals.
   ========================================================================== */

/* (v208) One macro palette for the whole app — the Fuel budget bars and the
   tracker rows use the same hue per macro, each as a light→deep gradient:
   calories = fuel, protein = mind, carbs = warn, fat = spirit, fiber = good. */
[data-macro="kcal"]    { --hue: var(--fuel, #fe8f5b);   --hue-a: var(--fuel-a, #febb71);   --hue-b: var(--fuel-b, #f86d54); }
[data-macro="protein"] { --hue: var(--mind, #65d0dc);   --hue-a: var(--mind-a, #8bf4e7);   --hue-b: var(--mind-b, #38afcc); }
[data-macro="carbs"]   { --hue: var(--warn, #f2ce59);   --hue-a: var(--warn-a, #fae685);   --hue-b: var(--warn-b, #f8ac3d); }
[data-macro="fat"]     { --hue: var(--spirit, #ee8dbd); --hue-a: var(--spirit-a, #ffbad4); --hue-b: var(--spirit-b, #e4638d); }
[data-macro="fiber"]   { --hue: var(--good, #63d99b);   --hue-a: var(--good-a, #a6f5a8);   --hue-b: var(--good-b, #25c48c); }
/* over a cap: warn → bad, with the ▲ glyph from today.css so it's not color-only */
.t-fb-bar.is-over[data-macro] { --hue: var(--bad, #f3625d); --hue-a: var(--warn, #f2ce59); --hue-b: var(--bad, #f3625d); }

/* ---- tracker shell ---- */
.mt-host:empty { display: none; }
.mt-host { margin: var(--s-4, 16px) 0 var(--s-3, 12px); } /* (v213) sits below meal entry now */
.mt {
  display: grid; gap: var(--s-2, 8px);
  padding: var(--s-3, 12px);
  background: var(--bg-2, #1e1b18);
  border-radius: var(--r-md, 14px);
  min-width: 0;
}
#guideMacroTracker { margin-bottom: var(--s-4, 16px); }
.mt-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2, 8px); }
.mt-title { margin: 0; }

/* segmented control: 5 equal pills, 44px hit area */
.mt-seg { width: 100%; }
.mt-seg > button {
  min-height: 36px; padding: 0 4px;
  font: 600 13px/1 var(--font-ui, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}
.mt-seg > button::after { content: ""; position: absolute; inset: -4px 0; }
.mt-seg > button:focus-visible { outline: 2px solid var(--brand, #f9bc8b); outline-offset: 1px; }

.mt-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-2, 8px);
  font: 500 12px/1.35 var(--font-ui, system-ui, sans-serif); color: var(--ink-2, #c1bdb7);
}
.mt-cov { color: var(--ink-3, #95928b); }
.mt-loading {
  font: 500 12px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ink-3, #95928b);
  padding: 6px 10px; border-radius: var(--r-sm, 10px); background: var(--bg-3, #282521);
}
.mt-loading::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--fuel, #fe8f5b); vertical-align: 1px; animation: mt-pulse 1.1s ease-in-out infinite;
}
@keyframes mt-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mt-loading::before { animation: none; } }

/* ---- rows ---- */
.mt-rows { display: grid; gap: 10px; }
.mt-row { display: grid; gap: 4px; min-width: 0; --mc: var(--fuel, #fe8f5b); }
.mt-row-top { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px; min-width: 0; }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mc); }
.mt-name { font: 600 13px/1.2 var(--font-ui, system-ui, sans-serif); color: var(--ink, #f4f1ec); }
.mt-val {
  justify-self: end; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 13px/1.2 var(--font-ui, system-ui, sans-serif); color: var(--ink, #f4f1ec); font-variant-numeric: tabular-nums;
}
.mt-val small { font-weight: 500; font-size: 11px; color: var(--ink-3, #95928b); }
.mt-pill {
  justify-self: end; white-space: nowrap;
  font: 600 11px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .01em;
  padding: 4px 8px; border-radius: var(--r-pill, 999px);
  color: var(--ink-2, #c1bdb7); background: var(--bg-3, #282521);
}
.mt-pill.is-good  { color: var(--good, #63d99b); background: color-mix(in oklch, var(--good, #63d99b) 16%, transparent); }
.mt-pill.is-warn  { color: var(--warn, #f2ce59); background: color-mix(in oklch, var(--warn, #f2ce59) 16%, transparent); }
.mt-pill.is-muted { color: var(--ink-3, #95928b); background: transparent; box-shadow: inset 0 0 0 1px var(--line, #33302c); }

.mt-bar { position: relative; height: 6px; border-radius: var(--r-pill, 999px); background: var(--bg-3, #282521); overflow: visible; }
.mt-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%;
  border-radius: inherit; background: var(--mc);
  background: linear-gradient(90deg, var(--hue-a, var(--mc)), var(--hue-b, var(--mc))); /* (v208) */
  transition: width var(--dur-3, 320ms) var(--ease-std, ease);
}
.mt-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  border-radius: 1px; background: var(--ink, #f4f1ec); opacity: .85;
}
.mt-empty { font: 400 13px/1.45 var(--font-ui, system-ui, sans-serif); color: var(--ink-2, #c1bdb7); padding: 2px 0; }
.mt-sub { font: 400 11px/1.35 var(--font-ui, system-ui, sans-serif); color: var(--ink-3, #95928b); font-variant-numeric: tabular-nums; }

/* ---- chart + footnote ---- */
.mt-chart-wrap { margin-top: 4px; padding-top: var(--s-2, 8px); border-top: 1px solid var(--line, #33302c); min-width: 0; }
.mt-chart-cap { font: 500 11px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--ink-3, #95928b); margin-bottom: 4px; }
.mt-chart-wrap .hc { max-width: 100%; }
.mt-chart-wrap svg { max-width: 100%; height: auto; }
.mt-foot { margin: 0; font: 400 11px/1.4 var(--font-ui, system-ui, sans-serif); color: var(--ink-3, #95928b); }

/* ---- Guide → Macros: fiber joins the 4-up profile / calculator grids ---- */
.macro-card .macro-stat.is-fiber,
.macro-result .stat.is-fiber { grid-column: 1 / -1; }
.macro-result .stat.is-fiber .l { letter-spacing: .04em; }

/* (v215) Cal range + Macros toggles, under the Fuel budget */
.fuel-habits { display: flex; gap: var(--s-2, 8px); margin: var(--s-3, 12px) 0 var(--s-2, 8px); flex-wrap: wrap; }
.fuel-habit {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill, 999px);
  background: var(--bg-3, #282521); border: 1px solid var(--line, #33302c);
  color: var(--ink-2, #c1bdb7); font: 600 14px/1 var(--font-ui, sans-serif); cursor: pointer;
  transition: background var(--dur-2, 200ms), border-color var(--dur-2, 200ms), transform var(--dur-1, 120ms);
}
.fuel-habit .t-ico { color: var(--fuel, #fe8f5b); }
.fuel-habit[data-habit="macros"] .t-ico { color: var(--mind, #65d0dc); }
.fuel-habit:active { transform: scale(.97); }
.fuel-habit.on { color: var(--ink, #f4f1ec); border-color: transparent;
  background: linear-gradient(135deg, color-mix(in oklch, var(--fuel-a, #febb71) 28%, transparent), color-mix(in oklch, var(--fuel-b, #f86d54) 16%, transparent)), var(--bg-2, #1e1b18); }
.fuel-habit[data-habit="macros"].on {
  background: linear-gradient(135deg, color-mix(in oklch, var(--mind-a, #8bf4e7) 26%, transparent), color-mix(in oklch, var(--mind-b, #38afcc) 16%, transparent)), var(--bg-2, #1e1b18); }
.fuel-habit:focus-visible { outline: 2px solid var(--brand, #f9bc8b); outline-offset: 2px; }
.fuel-habit.is-flash { animation: fh-flash 1.1s var(--ease-out, ease-out) 1; }
@keyframes fh-flash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand, #f9bc8b) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .fuel-habit.is-flash { animation: none; outline: 2px solid var(--brand, #f9bc8b); } }

/* (v215) Big 4 sheet (Swet / Supps) */
.big4-sheet .b4-done {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 48px; margin: 4px 0 var(--s-4, 16px); border-radius: var(--r-md, 14px);
  background: var(--bg-3, #282521); border: 1px dashed var(--line-strong, #4b4743);
  color: var(--ink, #f4f1ec); font: 600 15px/1 var(--font-ui, sans-serif); cursor: pointer;
}
.big4-sheet .b4-done.on { border-style: solid; border-color: transparent; color: var(--bg-0, #0c0a08);
  background: linear-gradient(135deg, var(--good-a, #a6f5a8), var(--good-b, #25c48c)); }
.big4-sheet .supps-section { margin: 0; padding: 0; border: 0; }
.big4-sheet .supps-section[hidden] { display: none; }