/* =============================================================================
 * fuel-calculator.css — the Fuel calculator page (#/fuel, js/fuel-calculator.js)
 * =============================================================================
 * Loaded after styles.css and built from its tokens (paper, white cards, hairline borders, the
 * serif for headings, ink buttons), so the page looks like the rest of the site.
 *
 *   1. Page: body weight, tabs, cards, fields
 *   2. MD-1 & MD: the timeline
 *   3. Match calculator: choices, sweat rate, food tiles, the plan, the summary, meters
 *   4. Recovery and the recovery score
 *   5. Sweat test and urine colour
 *   6. Saved
 *   7. Responsive / RTL / print
 *
 * Status colours are fixed (never themed) and always come with an icon and a word:
 * good (green), warn (amber), bad (red), info (blue). MD-1 and MD use the Periodization page's gold.
 * Phone first: one column. From 1000 px the inputs and the result sit side by side.
 * ========================================================================== */

/* ------------------------------------------------------------------ 1. PAGE */
.fuel {
  --good: #0ca30c; --good-ink: #0b6e0b; --good-soft: #e2f3e2;
  --warn: #fab219; --warn-ink: #8a5a00; --warn-soft: #fdf0d2;
  --bad: #d03b3b;  --bad-ink: #a82a2a;  --bad-soft: #fae1e1;
  --info: #2a78d6; --info-ink: #1d5aa6; --info-soft: #e0ecfa;
  --gold: #f2b705; --gold-soft: #fff4cc; --gold-ink: #6b5000;
  width: min(100%, var(--container)); margin-inline: auto;
  overflow-wrap: break-word;
}
.fuel :where(.fuel-choice-title, .fuel-choice-text, .food-name, .chosen-name, .ko-title, .ko-why, .rec-tile-label, .sum-tip, .fuel-hint, .btn-primary, .btn-ghost) {
  -webkit-hyphens: auto; hyphens: auto;
}
/* Icons fill the box they sit in (the site's .btn-icon keeps its own size) */
.fuel :is(.fuel-tab-icon, .fuel-weight-icon, .fuel-seg-icon, .fuel-pill-icon, .ko-tip-icon, .ko-key-icon, .ko-target-icon,
  .ko-kickoff-icon, .fuel-choice-icon, .food-icon, .sum-icon, .saved-kind, .saved-empty-icon) svg { width: 100%; height: 100%; }
.fuel :is(.stepper-btn, .food-del, .saved-del) > span:first-child { display: grid; width: 100%; height: 100%; }
.fuel :is(.stepper-btn, .food-del, .saved-del) svg { width: 100%; height: 100%; }

/* Body weight + tabs */
.fuel-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s5);
  margin-bottom: var(--s5); scroll-margin-top: 5.5rem;
}
.fuel-tabs {
  display: flex; gap: 3px; flex: 0 1 auto; padding: 4px; background: var(--mist); border-radius: 16px;
}
.fuel-tab {
  flex: 1 1 auto; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-width: 0; min-height: 48px; padding: .4rem 1rem;
  font: 500 .9375rem/1.2 var(--font-body); color: var(--grey-700); text-align: center; cursor: pointer;
  background: transparent; border: 0; border-radius: 12px; transition: background-color .15s, color .15s, box-shadow .15s;
}
.fuel-tab:hover { color: var(--ink); }
.fuel-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; background: var(--white); box-shadow: 0 1px 3px rgb(20 20 19 / .14); }
.fuel-tab-icon { flex-shrink: 0; display: grid; width: 1.15rem; height: 1.15rem; }
.fuel-tab-label { min-width: 0; }

.fuel-weight { display: grid; grid-template-columns: auto auto; align-items: center; gap: .25rem .75rem; }
.fuel-weight-label { display: flex; align-items: center; gap: .45rem; font-size: .9375rem; font-weight: 600; }
.fuel-weight-icon { display: grid; width: 1.25rem; height: 1.25rem; color: var(--grey-700); }
.fuel-weight-box { position: relative; display: flex; align-items: center; }
.fuel .fuel-weight-input { width: 7.5rem; padding-inline-end: 2.6rem; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fuel-weight-unit { position: absolute; inset-inline-end: .85rem; font-size: .9375rem; color: var(--grey-700); pointer-events: none; }
.fuel-weight-hint { grid-column: 1 / -1; margin: 0; font-size: .8125rem; color: var(--grey-500); text-align: end; }
.fuel-weight-hint.is-error { color: #b00020; font-weight: 600; }

.fuel-panel:focus { outline: none; }

/* Cards, headings, fields */
.fuel-card {
  min-width: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.fuel-card + .fuel-card { margin-top: var(--s4); }
.fuel-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.fuel-card-head .fuel-h2 { margin: 0; }
.fuel-h2 { margin-bottom: var(--s2); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight: 500; letter-spacing: -.015em; }
.fuel-h2.is-large { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 400; letter-spacing: -.025em; }
.fuel-h3 { margin-bottom: .25rem; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); font-weight: 500; }
.fuel-hint { max-width: 60ch; margin: 0 0 var(--s4); font-size: .9375rem; line-height: 1.5; color: var(--grey-700); }
.fuel-sub-title { margin: var(--s5) 0 var(--s2); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-700); }
.fuel-section-head { max-width: 62rem; margin-bottom: var(--s4); }
.fuel-section-head .fuel-hint { margin-bottom: var(--s3); }

.fuel-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s3); }
.fuel-fields.is-four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.fuel-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fuel-field.is-wide { grid-column: 1 / -1; }
.fuel-label { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fuel-field-hint { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--grey-500); }

.fuel .fuel-input {
  width: 100%; min-width: 0; min-height: 46px; padding: .55rem .8rem;
  font: inherit; font-size: .9375rem; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius-ctl); transition: border-color .15s, box-shadow .15s;
}
.fuel .fuel-input:hover { border-color: var(--grey-300); }
.fuel .fuel-input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(29 29 29 / .08); }
.fuel .fuel-input[aria-invalid="true"] { border-color: #b00020; }
.fuel .fuel-input::placeholder { color: var(--grey-500); }
.fuel-select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235c5a53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px 8px; background-position: right .9rem center;
}
[dir="rtl"] .fuel-select { background-position: left .9rem center; }

.btn-ghost.is-small, .btn-primary.is-small { min-height: 40px; padding: .35rem .9rem; font-size: .875rem; }
.btn-text.is-small { min-height: 36px; font-size: .875rem; }
.fuel-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
.fuel-actions.is-results { justify-content: flex-start; }
.fuel-actions:empty { display: none; }

.fuel-empty { display: flex; align-items: center; gap: .6rem; margin: 0; padding: var(--s3) 0; font-size: .9375rem; color: var(--grey-500); }
.fuel-empty .btn-icon svg { width: 1.3rem; height: 1.3rem; }
.fuel-note {
  display: flex; align-items: flex-start; gap: .6rem; max-width: 62rem; margin: 0 0 var(--s3); padding: .7rem 1rem;
  font-size: .9375rem; line-height: 1.45; background: var(--mist); border-radius: var(--radius-ctl);
}
.fuel-note .btn-icon { padding-top: .15rem; }
.fuel-note.is-info { background: var(--info-soft); }
.fuel-note.is-info .btn-icon { color: var(--info-ink); }
.fuel-note.is-warn { background: var(--warn-soft); }
.fuel-note.is-warn .btn-icon { color: var(--warn-ink); }

/* Status pill: icon + word, tinted */
.fuel-pill {
  display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; padding: .2rem .65rem .2rem .45rem;
  font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; border-radius: 999px;
}
.fuel-pill-icon { display: grid; width: 1rem; height: 1rem; }
.fuel-pill.tone-good { background: var(--good-soft); } .fuel-pill.tone-good .fuel-pill-icon { color: var(--good-ink); }
.fuel-pill.tone-warn { background: var(--warn-soft); } .fuel-pill.tone-warn .fuel-pill-icon { color: var(--warn-ink); }
.fuel-pill.tone-bad  { background: var(--bad-soft); }  .fuel-pill.tone-bad .fuel-pill-icon { color: var(--bad-ink); }
.fuel-pill.tone-info { background: var(--info-soft); } .fuel-pill.tone-info .fuel-pill-icon { color: var(--info-ink); }

/* Two columns: inputs + side (stacked on phones) */
.fuel-split { display: grid; gap: var(--s4); align-items: start; }
.fuel-side, .fuel-main { min-width: 0; }

/* Segmented buttons (food groups, sweat test options) */
.fuel-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.fuel-seg-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .35rem .9rem;
  font: 500 .9375rem/1.2 var(--font-body); color: var(--ink); cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; transition: background-color .15s, border-color .15s, color .15s;
}
.fuel-seg-btn:hover { border-color: var(--grey-300); }
.fuel-seg-btn[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.fuel-seg-icon { display: grid; width: 1.1rem; height: 1.1rem; }
.fuel-seg.is-groups { margin-bottom: var(--s3); }
.fuel-seg-rows { display: grid; gap: var(--s4); margin: var(--s5) 0; }
.fuel-seg-rows .fuel-label { margin-bottom: .45rem; }

/* ------------------------------------------------------------ 2. MD-1 & MD */
.fuel-ko-pm { display: flex; align-items: center; gap: .5rem; margin: var(--s4) 0 0; padding: .6rem .85rem; font-size: .9375rem; font-weight: 600; color: var(--gold-ink); background: var(--gold-soft); border-radius: var(--radius-ctl); }
.fuel-ko-pm .btn-icon svg { width: 1.1rem; height: 1.1rem; }

.ko-tip-list { display: grid; gap: var(--s4); }
.ko-tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; }
.ko-tip-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: .55rem; color: var(--ink); background: var(--mist); border-radius: 12px; }
.ko-tip-title { margin: 0 0 .15rem; font-weight: 600; }
.ko-tip-text { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--grey-700); }

.ko-timeline { position: relative; display: grid; gap: var(--s3); }
.ko-timeline::before {                                   /* the line through the times */
  content: ""; position: absolute; inset-block: 1rem; inset-inline-start: 2.25rem; width: 2px; background: var(--line);
}
.ko-day { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0 var(--s1); }
.ko-day:not(:first-child) { margin-top: var(--s4); }
.ko-day-code {
  flex-shrink: 0; display: grid; place-items: center; min-width: 4.5rem; min-height: 2.5rem; padding: .25rem .6rem;
  font-weight: 700; letter-spacing: .02em; color: var(--ink); background: var(--gold); border-radius: 999px;
}
.ko-day-text { min-width: 0; }
.ko-day-date { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.15; }
.ko-day-date::first-letter { text-transform: uppercase; }
.ko-day-label { margin: .15rem 0 0; font-size: .875rem; color: var(--grey-700); }

.ko-item { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; }
.ko-time { display: flex; justify-content: center; padding-top: 1rem; }
.ko-clock {
  position: relative; z-index: 1; padding: .2rem .5rem; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
}
.ko-card { min-width: 0; padding: var(--s4) var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.ko-item.is-key .ko-card { border: 2px solid var(--gold); box-shadow: 0 16px 36px -26px rgb(107 80 0 / .55); }
.ko-item.is-key .ko-clock { background: var(--gold); border-color: var(--gold); }
.ko-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem var(--s3); }
.ko-title { margin: 0; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); font-weight: 500; }
.ko-key { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem .2rem .45rem; font-size: .8125rem; font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; }
.ko-key-icon { display: grid; width: 1rem; height: 1rem; }
.ko-why { margin: .35rem 0 var(--s3); color: var(--grey-700); }
.ko-targets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--s3); }
.ko-target {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .5rem;
  font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--gold-soft); border-radius: 999px;
}
.ko-target-icon { display: grid; width: 1.05rem; height: 1.05rem; color: var(--gold-ink); }
.ko-foods { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s4); }
.ko-foods li { padding: .35rem .75rem; font-size: .875rem; line-height: 1.35; background: var(--mist); border-radius: 10px; }
.ko-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s3) var(--s5); }
.ko-rules-title { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ko-rules-title.is-do { color: var(--good-ink); }
.ko-rules-title.is-avoid { color: var(--bad-ink); }
.ko-list { display: grid; gap: .3rem; font-size: .9375rem; line-height: 1.45; }
.ko-list li { position: relative; padding-inline-start: 1.5rem; }
.ko-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .2rem; width: 1rem; height: 1rem;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.ko-list.is-do li::before {
  background: var(--good-ink);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ko-list.is-avoid li::before {
  background: var(--bad-ink);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ko-item.is-kickoff .ko-clock { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ko-kickoff {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5);
  color: var(--paper); background: var(--ink); border-radius: var(--radius-card);
}
.ko-kickoff-icon { display: grid; width: 2.25rem; height: 2.25rem; }
.ko-kickoff-title { flex: 1; margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.ko-kickoff .btn-primary { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.ko-kickoff .btn-primary:hover { background: var(--white); }

/* ------------------------------------------------- 3. MATCH CALCULATOR */
.fuel-match-top { display: grid; gap: var(--s4); align-items: start; }
.fuel-match-inputs, .fuel-summary { min-width: 0; }

.fuel-choices { display: grid; gap: var(--s2); }
.fuel-choices.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fuel-choices.is-four .fuel-choice { grid-template-columns: minmax(0, 1fr); }   /* icon above the text */
.fuel-choices.is-meals { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.fuel-choice {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem;
  width: 100%; min-width: 0; padding: .85rem; font: inherit; color: var(--ink); text-align: start; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 16px;
  transition: border-color .15s, box-shadow .2s var(--ease), background-color .15s, opacity .2s;
}
.fuel-choice:hover { border-color: var(--grey-300); }
.fuel-choice[aria-pressed="true"] { background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.fuel-choice-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: .55rem; color: var(--ink); background: var(--mist); border-radius: 12px; transition: background-color .15s, color .15s; }
.fuel-choice[aria-pressed="true"] .fuel-choice-icon { color: var(--paper); background: var(--ink); }
.fuel-choice-body { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; }
.fuel-choice-title { max-width: 100%; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.fuel-choice-text { max-width: 100%; font-size: .875rem; line-height: 1.35; color: var(--grey-700); }
.fuel-choice-meta {
  max-width: 100%; margin-top: .4rem; padding: .1rem .55rem; font-size: .8125rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums;
  background: var(--mist); border-radius: 8px;
}
.fuel-choices.is-muted .fuel-choice { opacity: .55; }
.fuel-choices.is-muted .fuel-choice[aria-pressed="true"] { box-shadow: none; border-color: var(--grey-300); background: var(--white); }
.fuel-choices.is-muted .fuel-choice[aria-pressed="true"] .fuel-choice-icon { color: var(--ink); background: var(--mist); }

/* Sweat rate slider */
.fuel-rate { margin-top: var(--s5); }
.fuel-rate-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem var(--s3); margin-bottom: .35rem; }
.fuel-rate-value { margin: 0; font-size: .9375rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.fuel-rate-value strong { color: var(--ink); }
.fuel-own-tag { padding: .1rem .5rem; font-size: .8125rem; font-weight: 600; color: var(--paper); background: var(--ink); border-radius: 999px; }
.fuel-range { display: block; width: 100%; height: 32px; margin: 0; accent-color: var(--grey-500); cursor: pointer; }
.fuel-range.is-own, .fuel-rate .fuel-range#fuel-s-min { accent-color: var(--ink); }
.fuel-range-ends { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.fuel-rate .fuel-hint { margin: var(--s2) 0 0; font-size: .875rem; }
.fuel-rate-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.fuel-rate-actions:empty { display: none; }

/* Food and drink tiles */
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--s2); }
.food-grid.is-recovery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.food {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem;
  width: 100%; min-width: 0; min-height: 64px; padding: .7rem; font: inherit; color: var(--ink); text-align: start; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .15s, background-color .15s, transform .12s;
}
.food:hover { border-color: var(--grey-300); }
.food:active { transform: scale(.97); }
.food.is-picked { background: var(--paper); border-color: var(--ink); }
.food-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: .45rem; color: var(--ink); background: var(--mist); border-radius: 10px; }
.food-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding-inline-end: 1.4rem; }
.food-name { font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.food-meta { display: flex; flex-wrap: wrap; gap: 0 .6rem; font-size: .8125rem; line-height: 1.35; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.food-count {
  position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; padding: .05rem .45rem;
  font-size: .75rem; font-weight: 700; color: var(--paper); background: var(--ink); border-radius: 999px;
}
.food-count:empty { display: none; }
.food-new { border-style: dashed; color: var(--grey-700); }
.food-new .food-name { font-weight: 600; }
.food-own { position: relative; min-width: 0; }
.food-own .food { padding-inline-end: 2.6rem; }
.food-own .food-count { inset-inline-end: 2.6rem; }
.food-del {
  position: absolute; inset-block-start: .4rem; inset-inline-end: .4rem; display: grid; place-items: center;
  width: 36px; height: 36px; padding: .5rem; color: var(--grey-700); cursor: pointer; background: transparent; border: 0; border-radius: 50%;
}
.food-del:hover { color: #b00020; background: var(--mist); }

.fuel-own-form { margin-top: var(--s3); padding: var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.fuel-own-title { margin: 0 0 var(--s3); font-weight: 600; }
.fuel-own-form .field-error { margin-bottom: 0; }
.fuel-own-form .fuel-actions { margin-top: var(--s2); }

/* The chosen items */
.fuel-chosen { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.fuel-chosen-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.fuel-chosen-title { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-700); }
.chosen-list { display: grid; margin-top: .25rem; }
.chosen { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name step" "meta step"; align-items: center; gap: 0 var(--s3); padding: .55rem 0; }
.chosen + .chosen { border-top: 1px solid var(--line); }
.chosen-name { grid-area: name; font-weight: 600; line-height: 1.3; }
.chosen-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0 .6rem; font-size: .8125rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.stepper { grid-area: step; display: inline-flex; align-items: center; gap: .15rem; padding: 3px; background: var(--mist); border-radius: 999px; }
.stepper-btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: .55rem; color: var(--ink); cursor: pointer;
  background: var(--white); border: 0; border-radius: 50%; box-shadow: 0 1px 2px rgb(20 20 19 / .12);
}
.stepper-btn:hover { background: var(--paper); }
.stepper-n { min-width: 2.2rem; font-size: .875rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* The summary: carbohydrate and fluid during the match */
.fuel-card.is-summary { border-color: var(--grey-300); box-shadow: 0 18px 40px -30px rgb(20 20 19 / .45); }
.sum-block + .sum-block { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sum-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem var(--s3); }
.sum-label { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .875rem; font-weight: 600; color: var(--grey-700); }
.sum-icon { display: grid; width: 1.15rem; height: 1.15rem; color: var(--ink); }
.sum-big { margin: .3rem 0 0; font-family: var(--font-display); font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sum-big-sub { margin-inline-start: .15rem; font-family: var(--font-body); font-size: .9375rem; letter-spacing: 0; color: var(--grey-700); }
.sum-sub { margin: .2rem 0 0; font-size: .875rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.sum-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0 0; }
.sum-facts dt { font-size: .8125rem; color: var(--grey-700); }
.sum-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-facts-sub { font-weight: 400; color: var(--grey-700); }
.sum-tip { margin: var(--s3) 0 0; font-size: .9375rem; line-height: 1.45; }
.sum-when { display: flex; align-items: flex-start; gap: .5rem; margin: var(--s4) 0 0; padding-top: var(--s3); font-size: .875rem; color: var(--grey-700); border-top: 1px solid var(--line); }
.sum-when .btn-icon { padding-top: .1rem; }
.fuel-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.fuel-save { flex: 1 1 auto; }
.fuel-save-msg { flex: 1 1 100%; min-height: 1.4em; margin: 0; font-size: .875rem; color: var(--good-ink); font-weight: 600; }
.fuel-save-msg:empty { min-height: 0; }

/* Meters: a 10 px track, labels under it */
.fuel-meter { margin-top: var(--s3); }
.fuel-meter-track { position: relative; height: 10px; background: var(--mist); border-radius: 999px; }
.fuel-meter-band {
  position: absolute; inset-block: -3px; inset-inline-start: var(--lo); width: calc(var(--hi) - var(--lo));
  background: var(--good-soft); border: 1.5px solid var(--good); border-radius: 6px;
}
.fuel-meter-fill {
  position: absolute; inset-block: 2px; inset-inline-start: 0; width: var(--at); min-width: 0;
  background: var(--ink); border-radius: 999px; transition: width .35s var(--ease);
}
.fuel-meter.is-zones .fuel-meter-track {
  background: linear-gradient(to right, var(--good-soft) 0 var(--risk), var(--warn-soft) var(--risk) var(--high), var(--bad-soft) var(--high) 100%);
  box-shadow: inset 0 0 0 1px rgb(20 20 19 / .06);
}
[dir="rtl"] .fuel-meter.is-zones .fuel-meter-track {
  background: linear-gradient(to left, var(--good-soft) 0 var(--risk), var(--warn-soft) var(--risk) var(--high), var(--bad-soft) var(--high) 100%);
}
.fuel-meter-marker {
  position: absolute; top: 50%; inset-inline-start: var(--at); width: 18px; height: 18px; margin-inline-start: -9px; margin-top: -9px;
  background: var(--ink); border: 3px solid var(--white); border-radius: 50%; box-shadow: 0 1px 3px rgb(20 20 19 / .35);
  transition: inset-inline-start .35s var(--ease);
}
.fuel-meter-scale { position: relative; height: 1.3rem; margin-top: .35rem; font-size: .75rem; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.fuel-meter-scale > span { position: absolute; top: 0; inset-inline-start: 0; white-space: nowrap; }
.fuel-meter-scale .is-risk { inset-inline-start: var(--risk); transform: translateX(-50%); }
.fuel-meter-scale .is-high { inset-inline-start: var(--high); transform: translateX(-50%); }
.fuel-meter-scale .is-lo { inset-inline-start: var(--lo); transform: translateX(-50%); }
.fuel-meter-scale .is-hi { inset-inline-start: var(--hi); transform: translateX(-50%); }
[dir="rtl"] .fuel-meter-scale :is(.is-risk, .is-high, .is-lo, .is-hi) { transform: translateX(50%); }
.fuel-meter-scale.is-range .is-lo:first-child { inset-inline-start: max(var(--lo), .6rem); }

/* --------------------------------------------------------- 4. RECOVERY */
.fuel-recovery { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.rec-grid { display: grid; gap: var(--s4); align-items: start; }
.rec-grid .fuel-card + .fuel-card { margin-top: 0; }
.rec-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.rec-tile { min-width: 0; padding: .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.rec-tile-label { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); }
.rec-tile-need { margin: .2rem 0 .5rem; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rec-tile-have { margin: .4rem 0 0; font-size: .8125rem; color: var(--grey-700); font-variant-numeric: tabular-nums; }
.fuel-progress { position: relative; display: block; height: 6px; overflow: hidden; background: var(--line); border-radius: 999px; }
.fuel-progress::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--at);
  background: var(--ink); border-radius: inherit; transition: width .35s var(--ease);
}
.fuel-progress.is-done::after { background: var(--good); }

.rec-score { margin-top: var(--s4); }
.rec-score-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.rec-score-n { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rec-score-bar { position: relative; height: 10px; margin: var(--s3) 0 var(--s4); background: var(--mist); border-radius: 999px; }
.rec-score-bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--at); background: var(--ink); border-radius: inherit; transition: width .35s var(--ease); }
.rec-score-bar::before, .rec-score-bar::after {      /* where "decent" and "optimal" start */
  content: ""; position: absolute; z-index: 1; inset-block: -3px; width: 2px; background: var(--white); box-shadow: 0 0 0 1px var(--grey-300);
}
.rec-score-bar::before { inset-inline-start: var(--decent); }
.rec-score-bar::after { inset-inline-start: var(--optimal); }
.rec-score-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s3) var(--s5); margin-bottom: var(--s3); }
.rec-score-when { margin: 0 0 .25rem; font-weight: 600; }
.rec-score-parts li { display: flex; justify-content: space-between; gap: var(--s3); padding: .3rem 0; font-size: .9375rem; border-bottom: 1px solid var(--line); }
.rec-score-part { font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-score .fuel-hint:last-child { margin: 0; font-size: .8125rem; }

/* ----------------------------------------------- 5. SWEAT TEST + URINE */
.sweat-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.sweat-stat { min-width: 0; padding: .75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.sweat-stat-label { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); }
.sweat-stat-n { margin: .2rem 0 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sweat-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--s3); margin-top: var(--s4); }
.sweat-status-text { flex: 1 1 14rem; margin: 0; font-size: .9375rem; line-height: 1.45; }
.sweat-tips { display: grid; gap: var(--s2); margin-top: var(--s4); }
.sweat-tips li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9375rem; line-height: 1.45; }
.sweat-tips .btn-icon { padding-top: .1rem; color: var(--grey-700); }
.sweat-results .fuel-note { margin-bottom: var(--s3); }

.urine-scale { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.urine-swatch {
  position: relative; display: grid; place-items: end center; min-width: 0; height: 56px; padding: 0 0 .3rem; cursor: pointer;
  font: 600 .75rem var(--font-body); color: rgb(20 20 19 / .6);
  background: var(--swatch); border: 1.5px solid rgb(20 20 19 / .1); border-radius: 10px; transition: transform .15s, box-shadow .15s;
}
.urine-swatch:nth-child(n + 6) { color: rgb(255 255 255 / .85); }
.urine-swatch:hover { transform: translateY(-2px); }
.urine-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
.urine-legend { display: flex; justify-content: space-between; gap: var(--s3); margin-top: .4rem; font-size: .75rem; color: var(--grey-500); }
.urine-result { margin-top: var(--s4); }
.urine-result .fuel-hint { margin: 0; }
.urine-tip { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.45; }

/* ------------------------------------------------------------- 6. SAVED */
.saved-empty { display: flex; align-items: center; gap: var(--s4); color: var(--grey-700); }
.saved-empty p { margin: 0; }
.saved-empty-icon { flex-shrink: 0; display: grid; width: 2.6rem; height: 2.6rem; padding: .6rem; background: var(--mist); border-radius: 12px; }
.saved-avg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s3); }
.saved-list .fuel-card + .fuel-card { margin-top: 0; }
.saved-item { display: flex; flex-direction: column; gap: var(--s3); }
.saved-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; }
.saved-kind { display: grid; width: 2.4rem; height: 2.4rem; padding: .55rem; background: var(--mist); border-radius: 12px; }
.saved-title { margin: 0; font-weight: 600; line-height: 1.3; }
.saved-meta { margin: .1rem 0 0; font-size: .8125rem; color: var(--grey-700); }
.saved-when { margin: .1rem 0 0; font-size: .8125rem; color: var(--grey-500); }
.saved-del { display: grid; width: 40px; height: 40px; padding: .6rem; color: var(--grey-700); cursor: pointer; background: transparent; border: 0; border-radius: 50%; }
.saved-del:hover { color: #b00020; background: var(--mist); }
.saved-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.saved-facts.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saved-facts div { min-width: 0; padding: .55rem .7rem; background: var(--paper); border-radius: 12px; }
.saved-facts dt { font-size: .75rem; color: var(--grey-700); }
.saved-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.saved-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: auto; }
.saved-foot .btn-ghost { margin-inline-start: auto; }

/* ---------------------------------------------- 7. RESPONSIVE / RTL / PRINT */
@media (min-width: 560px) {
  .fuel-choices.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuel-choices.is-three .fuel-choice { grid-template-columns: minmax(0, 1fr); }
  .fuel-seg-rows { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

@media (min-width: 1000px) {
  .fuel-split.is-kickoff { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s6); }
  .fuel-split.is-kickoff .fuel-side { position: sticky; top: 5.5rem; }
  .fuel-split.is-sweat { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--s5); }
  .fuel-match-top { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--s5); }
  .fuel-summary { position: sticky; top: 5.5rem; }
  .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The sweat test result sits in the narrow side column: one row per number */
  .fuel-side .sweat-stats { grid-template-columns: minmax(0, 1fr); }
  .fuel-side .sweat-stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
  .fuel-side .sweat-stat-n { margin: 0; text-align: end; }
  .fuel-choices.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A window too short for the whole side column or summary: it scrolls with the page instead of sticking,
   so its bottom (the tips, "Save plan") is never out of reach */
@media (min-width: 1000px) and (max-height: 1080px) {      /* the MD-1 & MD side is about 950 px tall */
  .fuel-split.is-kickoff .fuel-side { position: static; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .fuel-summary { position: static; }
}

@media (max-width: 640px) {
  .fuel-top { flex-direction: column-reverse; align-items: stretch; margin-bottom: var(--s4); }
  .fuel-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuel-tab { white-space: normal; padding-inline: .6rem; }
  .fuel-weight { grid-template-columns: minmax(0, 1fr) auto; }
  .fuel-weight-hint { text-align: start; }
  .fuel-card { padding: var(--s4); }
  .ko-timeline::before { inset-inline-start: 1.85rem; }
  .ko-item { grid-template-columns: 3.7rem minmax(0, 1fr); gap: var(--s2); }
  .ko-clock { padding-inline: .35rem; font-size: .8125rem; }
  .ko-card { padding: var(--s4); }
  .ko-kickoff { padding: var(--s4); }
  .ko-kickoff .btn-primary { flex: 1 1 100%; }
  .ko-day-code { min-width: 3.7rem; }
  .rec-targets, .sweat-stats { gap: 6px; }
  .rec-tile, .sweat-stat { padding: .6rem; }
  .urine-swatch { height: 48px; }
  .saved-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .rec-targets, .sweat-stats { grid-template-columns: minmax(0, 1fr); }
  .rec-tile, .sweat-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .1rem var(--s3); }
  .rec-tile .fuel-progress, .rec-tile-have { grid-column: 1 / -1; }
  .rec-tile-need, .sweat-stat-n { margin: 0; text-align: end; }
  .fuel-tab { flex-direction: column; gap: .2rem; font-size: .875rem; }
}

@media (pointer: coarse) {
  .fuel-seg-btn, .fuel-tab { min-height: 44px; }
  .stepper-btn { width: 40px; height: 40px; }
  .food:active { transform: none; }
}

[lang="ar"] :is(.fuel-sub-title, .fuel-chosen-title, .ko-rules-title, .rec-tile-label, .sweat-stat-label) { letter-spacing: 0; text-transform: none; }

@media print {
  .fuel-tabs, .fuel-weight-hint, .fuel-actions, .fuel-save-row, .fuel-rate-actions, .food-del, .stepper-btn, .ko-kickoff .btn-primary, .fuel-own-form { display: none !important; }
  .fuel-summary, .fuel-split.is-kickoff .fuel-side { position: static; }
  .ko-card, .fuel-card { break-inside: avoid; }
}