/*
 * Iron & Tonic marketing site — design-system components
 * Depends on tokens.css being loaded first.
 *
 * Components (15):
 *   Wordmark · ModeSwitch · Button · Chip · Overline · StatTile ·
 *   SegmentedControl · Divider · StatusBar · BottomNav · ListRow ·
 *   CalorieRing · MacroBar · WeekBars · MuscleBar
 *
 * Naming convention:
 *   Block  .ds-<component>
 *   Element .ds-<component>__<part>
 *   Modifier .ds-<component>--<variant>
 *
 * Design-system invariants enforced here:
 *   • Cards border-defined, NEVER elevated — no box-shadow on card elements.
 *   • No blur, glass or gradient fills (--gradient-coach not used here).
 *   • Buttons, chips and pills: border-radius var(--radius-pill) (999px).
 *   • All interactive elements: min-height var(--hit-target-min) (44px).
 *   • Every colour/space/radius from tokens.css — no hardcoded hex values.
 */

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 1 · Wordmark                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern (inline):
 *   <div class="ds-wordmark">Iron<span class="ds-wordmark__amp"> & </span>Tonic</div>
 *
 * HTML pattern (stacked):
 *   <div class="ds-wordmark ds-wordmark--stacked">
 *     <div>Iron</div>
 *     <div><span class="ds-wordmark__amp">&</span> Tonic</div>
 *   </div>
 *
 * Size: set --ds-wordmark-size inline (e.g. style="--ds-wordmark-size:54px")
 * White wordmark with bright ampersand: add ds-wordmark--on-dark
 */

.ds-wordmark {
  --ds-wordmark-size: 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--ds-wordmark-size);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  /* Always single-line by DS construction; prevent wrapping in constrained layouts */
  white-space: nowrap;
}

.ds-wordmark--on-dark {
  color: var(--text-on-dark);
}

.ds-wordmark--on-dark .ds-wordmark__amp {
  color: var(--accent-bright);
}

.ds-wordmark__amp {
  color: var(--accent);
}

.ds-wordmark--stacked {
  line-height: .92;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 2 · ModeSwitch                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-mode-switch" data-mode="iron">
 *     <div class="ds-mode-switch__knob" aria-hidden="true"></div>
 *     <button class="ds-mode-switch__seg" data-key="iron">
 *       <span class="mi" aria-hidden="true">fitness_center</span>
 *       <span>Iron</span>
 *     </button>
 *     <button class="ds-mode-switch__seg" data-key="tonic">
 *       <span class="mi" aria-hidden="true">local_dining</span>
 *       <span>Tonic</span>
 *     </button>
 *   </div>
 *
 * Compact variant: add ds-mode-switch--compact
 * Active mode driven by site.js: sets data-mode="iron|tonic" on the switch element.
 * The knob slides via transform; labels cross-fade.
 */

.ds-mode-switch {
  --ds-ms-pad: 4px;
  display: inline-flex;
  position: relative;
  background: var(--accent-subtle);
  border-radius: var(--radius-pill);
  padding: var(--ds-ms-pad);
}

.ds-mode-switch--compact {
  --ds-ms-pad: 3px;
}

/* Sliding ink knob — sits behind the label text */
.ds-mode-switch__knob {
  position: absolute;
  top: var(--ds-ms-pad);
  bottom: var(--ds-ms-pad);
  left: var(--ds-ms-pad);
  /* width = half of container minus padding; keep in sync with 2-segment layout */
  width: calc(50% - var(--ds-ms-pad));
  border-radius: var(--radius-pill);
  background: var(--ink);
  transition: var(--transition-mode-knob);
  transform: translateX(0);       /* iron (default) */
  pointer-events: none;
}

/* When tonic is active, knob slides right */
.ds-mode-switch[data-mode="tonic"] .ds-mode-switch__knob {
  transform: translateX(100%);
}

/* Segment buttons — sit above the knob via stacking context */
.ds-mode-switch__seg {
  position: relative;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font: var(--fw-bold) 14px var(--font-body);
  color: var(--fg-subtle);
  transition: var(--transition-color);
  min-height: var(--hit-target-min);
  box-sizing: border-box;
}

.ds-mode-switch__seg .mi,
.ds-mode-switch__seg .mio {
  font-size: 18px;
}

/* Active segment text colour driven by data-mode on parent */
.ds-mode-switch[data-mode="iron"]  .ds-mode-switch__seg[data-key="iron"],
.ds-mode-switch[data-mode="tonic"] .ds-mode-switch__seg[data-key="tonic"] {
  color: var(--text-on-dark);
}

/* ── Compact variant ── */
.ds-mode-switch--compact .ds-mode-switch__seg {
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  font-size: var(--text-11);
  letter-spacing: var(--overline-tracking-tight);
  text-transform: uppercase;
  min-height: var(--hit-target-min);
}

.ds-mode-switch--compact .ds-mode-switch__seg .mi,
.ds-mode-switch--compact .ds-mode-switch__seg .mio {
  font-size: 13px;
}

/* Disable knob slide and label cross-fade for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ds-mode-switch {
    --transition-mode-knob: none;
    --transition-color: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 3 · Button                                                                */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <button class="ds-button ds-button--primary ds-button--lg">
 *     <span class="mio ds-button__icon" aria-hidden="true">ios_share</span>
 *     Get the app
 *   </button>
 *
 * Variants: --primary  --outline  --accent-outline  --on-dark  --ghost
 *           --destructive  --dark
 * Sizes:    --sm  --md  --lg
 * Full-width: add --full
 * Disabled:  [disabled] attribute
 */

.ds-button {
  /* Structural defaults */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  min-height: var(--hit-target-min);
  transition: background var(--duration-fast) var(--ease-standard),
              color      var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.ds-button--full {
  display: flex;
  width: 100%;
}

.ds-button[disabled],
.ds-button--disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* Icon inside button */
.ds-button__icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Sizes ── */
.ds-button--sm {
  padding: var(--space-8) var(--space-14);
  font: var(--fw-bold) var(--text-12) var(--font-body);
}

.ds-button--md {
  padding: 11px 18px;
  font: var(--fw-semibold) var(--text-13) var(--font-body);
}

.ds-button--lg {
  padding: 13px var(--space-20);
  font: var(--fw-bold) var(--text-15) var(--font-body);
}

/* ── Variants ── */
.ds-button--primary {
  background: var(--accent);
  color: var(--action-primary-text);
  border-color: transparent;
}

.ds-button--primary:hover {
  background: var(--accent-hover);
  color: var(--action-primary-text);  /* prevent a:hover (0,1,1) from overriding when used as <a> */
}

.ds-button--dark {
  background: var(--ink);
  color: var(--text-on-dark);
  border-color: transparent;
}

.ds-button--dark:hover {
  background: var(--bg-contrast);
}

.ds-button--outline {
  background: var(--bg-0);
  color: var(--ink);
  border-color: var(--border);
}

.ds-button--outline:hover {
  border-color: var(--border-strong);
}

.ds-button--accent-outline {
  background: var(--bg-0);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.ds-button--accent-outline:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.ds-button--on-dark {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--border-on-dark-soft);
}

.ds-button--on-dark:hover {
  background: var(--overlay-on-dark);
}

.ds-button--ghost {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
}

.ds-button--ghost:hover {
  color: var(--accent-hover);
}

.ds-button--destructive {
  background: transparent;
  color: var(--negative);
  border-color: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 4 · Chip                                                                  */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <span class="ds-chip ds-chip--default">
 *     <span class="mio ds-chip__icon" aria-hidden="true">watch</span>
 *     Garmin sync
 *   </span>
 *
 * Variants: --default  --muted  --tint  --selected-ink  --selected-tint
 *           --positive  --record  --dashed
 * Clickable chips: add role="button" tabindex="0"
 */

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: var(--fw-semibold) var(--text-12) var(--font-body);
  white-space: nowrap;
  box-sizing: border-box;
  cursor: default;
}

.ds-chip[role="button"],
.ds-chip--clickable {
  cursor: pointer;
}

.ds-chip__icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Variants ── */
.ds-chip--default {
  background: var(--bg-200);
  color: var(--ink);
}

.ds-chip--muted {
  background: var(--bg-200);
  color: var(--fg-subtle);
}

.ds-chip--tint {
  background: var(--accent-subtle);
  color: var(--accent);
}

.ds-chip--selected-ink {
  background: var(--ink);
  color: var(--text-on-dark);
}

.ds-chip--selected-tint {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}

.ds-chip--positive {
  background: var(--positive-bg);
  color: var(--positive);
  border-color: var(--positive-border);
}

.ds-chip--record {
  background: var(--record-bg);
  color: var(--record);
  border-color: var(--record-border);
}

.ds-chip--dashed {
  border-style: dashed;
  border-color: var(--border-strong);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 5 · Overline                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-overline ds-overline--accent">Training + nutrition</div>
 *
 * Tones: --default  --dark  --accent  --bright  --ink
 * Dark-background tracking: add ds-overline--eyebrow
 */

.ds-overline {
  font: var(--fw-bold) var(--overline-size) var(--font-body);
  letter-spacing: var(--overline-tracking);
  text-transform: uppercase;
  color: var(--fg-subtle);      /* default tone */
}

.ds-overline--default { color: var(--fg-subtle); }
.ds-overline--dark    { color: var(--text-overline-dark); }
.ds-overline--accent  { color: var(--accent); }
.ds-overline--bright  { color: var(--accent-bright); }
.ds-overline--ink     { color: var(--ink); }

/* Wider eyebrow tracking (.16em) used on dark sections */
.ds-overline--eyebrow {
  letter-spacing: var(--eyebrow-tracking);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 6 · StatTile                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-stat-tile">
 *     <div class="ds-stat-tile__label">Session</div>
 *     <div class="ds-stat-tile__value">52 min</div>
 *     <div class="ds-stat-tile__status">Push day A</div>
 *   </div>
 *
 * Tones:       --dark
 * Status tones: ds-stat-tile__status--positive  --attention  --dark
 * Align:        --center
 */

.ds-stat-tile {
  flex: 1;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-14);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  box-sizing: border-box;
  /* Cards are border-defined, never elevated */
}

.ds-stat-tile--center {
  align-items: center;
}

/* Dark surface variant — used inside the phone mock's dark cards */
.ds-stat-tile--dark {
  background: var(--overlay-on-dark);
  border-color: transparent;
}

.ds-stat-tile__label {
  font: var(--fw-regular) var(--text-12) var(--font-body);
  color: var(--fg-subtle);
}

.ds-stat-tile--dark .ds-stat-tile__label {
  color: var(--fg-disabled);
}

.ds-stat-tile__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--display-stat-lg);   /* 30px */
  line-height: 1;
  color: var(--ink);
}

.ds-stat-tile--dark .ds-stat-tile__value {
  color: var(--text-on-dark);
}

.ds-stat-tile__status {
  font: var(--fw-semibold) var(--text-11) var(--font-body);
  color: var(--fg-subtle);
}

.ds-stat-tile--dark .ds-stat-tile__status {
  color: var(--text-overline-dark);
}

/* Status tone modifiers */
.ds-stat-tile__status--positive  { color: var(--positive); }
.ds-stat-tile__status--attention { color: var(--attention); }
.ds-stat-tile__status--dark      { color: var(--fg-disabled); }

/* Override for dark tile: inner status-positive still green */
.ds-stat-tile--dark .ds-stat-tile__status--positive {
  color: var(--positive);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 7 · SegmentedControl                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-segmented-control" role="group" aria-label="Audience">
 *     <button class="ds-segmented-control__opt ds-segmented-control__opt--active"
 *             aria-pressed="true">On your own</button>
 *     <button class="ds-segmented-control__opt"
 *             aria-pressed="false">With a trainer</button>
 *   </div>
 *
 * Size: --sm (smaller padding/text)
 * Active state: site.js toggles ds-segmented-control__opt--active
 */

.ds-segmented-control {
  display: inline-flex;
  background: var(--accent-subtle);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 0;
}

.ds-segmented-control__opt {
  padding: 7px var(--space-14);
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  font: var(--fw-bold) var(--text-12) var(--font-body);
  cursor: pointer;
  min-height: var(--hit-target-min);
  box-sizing: border-box;
  transition: var(--transition-color);
}

.ds-segmented-control--sm .ds-segmented-control__opt {
  padding: var(--space-6) var(--space-12);
  font-size: var(--text-11);
}

.ds-segmented-control__opt--active,
.ds-segmented-control__opt[aria-pressed="true"] {
  background: var(--ink);
  color: var(--text-on-dark);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 8 · Divider                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <hr class="ds-divider">
 *   <hr class="ds-divider ds-divider--header">
 *
 * Or as a div (inside non-list contexts):
 *   <div class="ds-divider" role="separator"></div>
 *
 * Tones: default (--divider colour), --header (--border-header colour)
 * Inset: use margin-inline to indent
 */

.ds-divider {
  display: block;
  height: 1px;
  border: none;
  margin: 0;
  background: var(--divider);
}

.ds-divider--header {
  background: var(--border-header);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 9 · StatusBar                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-status-bar">
 *     <span class="ds-status-bar__time">9:41</span>
 *     <span class="ds-status-bar__icons" aria-hidden="true">
 *       <span class="mi">signal_cellular_alt</span>
 *       <span class="mi">wifi</span>
 *       <span class="mi">battery_full</span>
 *     </span>
 *   </div>
 *
 * Tone: --dark (white text, for the phone mock on a dark shell)
 */

.ds-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-14) var(--space-26) var(--space-4);
  font: var(--fw-semibold) var(--text-14)/1 var(--font-body);
  color: var(--ink);
  box-sizing: border-box;
}

.ds-status-bar--dark {
  color: var(--text-on-dark);
}

.ds-status-bar__icons {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.ds-status-bar__icons .mi,
.ds-status-bar__icons .mio {
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 10 · BottomNav                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern (4-tab):
 *   <nav class="ds-bottom-nav" aria-label="Main navigation">
 *     <a class="ds-bottom-nav__item ds-bottom-nav__item--active" href="#" aria-current="page">
 *       <div class="ds-bottom-nav__pill">
 *         <span class="mi" aria-hidden="true">today</span>
 *       </div>
 *       <span class="ds-bottom-nav__label">Today</span>
 *     </a>
 *     ...
 *   </nav>
 *
 * 5-tab variant: add ds-bottom-nav--5 to nav (tighter pill padding, 10.5px label)
 * Active: add ds-bottom-nav__item--active; icon uses .mi (filled), others .mio
 * Active/inactive panel switching: toggled by site.js
 */

.ds-bottom-nav {
  display: flex;
  padding: var(--space-10) var(--space-8) var(--space-26);
  background: var(--bg-0);
  border-top: 1px solid var(--border-header);
  box-sizing: border-box;
}

.ds-bottom-nav--5 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.ds-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  text-decoration: none;
  color: var(--fg-subtle);
}

.ds-bottom-nav__pill {
  padding: var(--space-4) 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;       /* visual height only; item has 44px via content */
}

.ds-bottom-nav--5 .ds-bottom-nav__pill {
  padding: var(--space-4) var(--space-14);
}

.ds-bottom-nav__item--active .ds-bottom-nav__pill {
  background: var(--surface-nav-active);
}

.ds-bottom-nav__pill .mi,
.ds-bottom-nav__pill .mio {
  font-size: 22px;
  color: var(--fg-subtle);
}

.ds-bottom-nav__item--active .ds-bottom-nav__pill .mi,
.ds-bottom-nav__item--active .ds-bottom-nav__pill .mio {
  color: var(--ink);
}

.ds-bottom-nav__label {
  font: var(--fw-regular) var(--text-11) var(--font-body);
  color: var(--fg-subtle);
}

.ds-bottom-nav--5 .ds-bottom-nav__label {
  font-size: 10.5px;
}

.ds-bottom-nav__item--active .ds-bottom-nav__label {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 11 · ListRow                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-list-row">
 *     <div class="ds-list-row__tile" aria-hidden="true">
 *       <span class="mio">event_note</span>
 *     </div>
 *     <div class="ds-list-row__body">
 *       <div class="ds-list-row__title">Your routines</div>
 *       <div class="ds-list-row__subtitle">Built once, reused every push day</div>
 *     </div>
 *     <!-- optional right slot -->
 *   </div>
 *
 * Tile tone modifiers on .ds-list-row__tile: --neutral  --ink  (default = tint)
 * Row tone: ds-list-row--destructive
 * Tile size: default 44px; override with --ds-lr-tile-size inline
 * Clickable: add ds-list-row--clickable (cursor pointer)
 */

.ds-list-row {
  --ds-lr-tile-size: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-10) var(--space-12);
  min-height: var(--hit-target-min);
  box-sizing: border-box;
}

.ds-list-row--clickable {
  cursor: pointer;
}

.ds-list-row--disabled {
  opacity: .4;
  pointer-events: none;
}

/* Icon tile */
.ds-list-row__tile {
  width: var(--ds-lr-tile-size);
  height: var(--ds-lr-tile-size);
  border-radius: var(--radius-10);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default tint tone */
  background: var(--accent-subtle);
  color: var(--accent);
}

.ds-list-row__tile .mio,
.ds-list-row__tile .mi {
  font-size: calc(var(--ds-lr-tile-size) * .5);
}

/* Tile tone modifiers */
.ds-list-row__tile--neutral {
  background: var(--bg-200);
  color: var(--fg-subtle);
}

.ds-list-row__tile--ink {
  background: var(--ink);
  color: var(--text-on-dark);
}

/* Destructive row overrides icon tile */
.ds-list-row--destructive .ds-list-row__tile {
  background: transparent;
  color: var(--negative);
}

/* Body */
.ds-list-row__body {
  flex: 1;
  min-width: 0;
}

.ds-list-row__title {
  font: var(--fw-semibold) var(--text-14) var(--font-body);
  color: var(--ink);
}

.ds-list-row--destructive .ds-list-row__title {
  color: var(--negative);
}

.ds-list-row__subtitle {
  font: var(--fw-regular) var(--text-12) var(--font-body);
  color: var(--fg-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 12 · CalorieRing                                                          */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * Prefer inline SVG for the ring itself; the CSS defines the wrapper layout.
 *
 * HTML pattern:
 *   <div class="ds-calorie-ring" aria-label="1580 of 2200 kcal"
 *        style="--ds-cr-size:104px; --ds-cr-stroke:12">
 *     <!-- SVG with actual circumference / dashoffset values in markup -->
 *     <svg class="ds-calorie-ring__svg" aria-hidden="true"
 *          width="104" height="104" viewBox="0 0 104 104">
 *       <circle class="ds-calorie-ring__track" cx="52" cy="52" r="45"/>
 *       <circle class="ds-calorie-ring__fill"  cx="52" cy="52" r="45"
 *               stroke-dasharray="282.74"
 *               stroke-dashoffset="79.57"
 *               transform="rotate(-90 52 52)"/>
 *     </svg>
 *     <div class="ds-calorie-ring__center" aria-hidden="true">
 *       <span class="ds-calorie-ring__value">1580</span>
 *       <span class="ds-calorie-ring__meta">of 2200 kcal</span>
 *     </div>
 *   </div>
 *
 * Circumference for default (size=104, stroke=12, r=45): 2π×45 ≈ 282.74
 * Dashoffset = circumference × (1 - pct); e.g. 1580/2200 ≈ 0.718 → 79.57
 *
 * Decorative in marketing context — numbers available via role="img" + aria-label on the wrapper.
 */

.ds-calorie-ring {
  --ds-cr-size: 104px;
  position: relative;
  width: var(--ds-cr-size);
  height: var(--ds-cr-size);
  flex-shrink: 0;
  display: inline-block;
}

.ds-calorie-ring__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Track ring */
.ds-calorie-ring__track {
  fill: none;
  stroke: var(--accent-subtle);
  stroke-width: 12;
}

/* Filled arc */
.ds-calorie-ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
}

/* Centered text overlay */
.ds-calorie-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ds-calorie-ring__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  /* ~25% of container size; 26px for default 104px ring */
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}

.ds-calorie-ring__meta {
  font: var(--fw-regular) var(--text-10) var(--font-body);
  color: var(--fg-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 13 · MacroBar                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-macro-bar ds-macro-bar--protein">
 *     <div class="ds-macro-bar__row">
 *       <span class="ds-macro-bar__label">Protein</span>
 *       <span class="ds-macro-bar__qty">98 / 165 g</span>
 *     </div>
 *     <div class="ds-macro-bar__track" aria-hidden="true">
 *       <div class="ds-macro-bar__fill" style="width:59%"></div>
 *     </div>
 *   </div>
 *
 * Tones: --protein  --carbs  --fat  (fat uses same fill as protein — see source)
 * Over state: add --over to the block element
 *
 * Source note: fat tone maps to --macro-protein (same as protein), not a bug —
 * fat gets a distinct colour only when over=true (--attention).
 */

.ds-macro-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-macro-bar__row {
  display: flex;
  justify-content: space-between;
  font: var(--fw-regular) var(--text-12) var(--font-body);
  color: var(--ink);
}

.ds-macro-bar__qty {
  color: var(--fg-subtle);
}

/* Over: value text turns attention */
.ds-macro-bar--over .ds-macro-bar__qty {
  color: var(--attention);
}

.ds-macro-bar__track {
  height: 5px;
  background: var(--accent-subtle);
  border-radius: 3px;
  overflow: hidden;
}

.ds-macro-bar__fill {
  height: 5px;
  border-radius: 3px;
}

/* Tone colours on the fill bar */
.ds-macro-bar--protein .ds-macro-bar__fill { background: var(--macro-protein); }
.ds-macro-bar--carbs   .ds-macro-bar__fill { background: var(--macro-carbs); }
/* Fat uses macro-protein colour until over */
.ds-macro-bar--fat     .ds-macro-bar__fill { background: var(--macro-protein); }

/* Over state: fill becomes attention colour regardless of tone */
.ds-macro-bar--over .ds-macro-bar__fill { background: var(--attention); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 14 · WeekBars                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-week-bars" style="--ds-wb-h:64px" aria-hidden="true">
 *     <div class="ds-week-bars__col">
 *       <div class="ds-week-bars__bar ds-week-bars__bar--filled"
 *            style="height:48px"></div>
 *       <span class="ds-week-bars__label">Mo</span>
 *     </div>
 *     <div class="ds-week-bars__col">
 *       <div class="ds-week-bars__bar ds-week-bars__bar--empty"
 *            style="height:12px"></div>
 *       <span class="ds-week-bars__label">Tu</span>
 *     </div>
 *     <div class="ds-week-bars__col">
 *       <div class="ds-week-bars__bar ds-week-bars__bar--today"
 *            style="height:12px"></div>
 *       <span class="ds-week-bars__label ds-week-bars__label--today">We</span>
 *     </div>
 *     ...
 *   </div>
 *
 * Bar modifiers: --filled (has data) · --empty (no data) · --today (dashed outline)
 * Heights are set inline; --today minimum height 12px.
 * The component is aria-hidden; underlying data should appear as real text
 * elsewhere on the page or in an aria-label on the parent card.
 */

.ds-week-bars {
  --ds-wb-h: 64px;
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  height: var(--ds-wb-h);
}

.ds-week-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.ds-week-bars__bar {
  width: 100%;
  border-radius: 5px;
}

.ds-week-bars__bar--filled {
  background: var(--accent);
}

.ds-week-bars__bar--empty {
  background: var(--accent-track);
}

.ds-week-bars__bar--today {
  background: transparent;
  border: 1px dashed var(--fg-disabled);
  box-sizing: border-box;
}

.ds-week-bars__label {
  font: var(--fw-regular) var(--text-10) var(--font-body);
  color: var(--fg-subtle);
}

.ds-week-bars__label--today {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* § 15 · MuscleBar                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */
/*
 * HTML pattern:
 *   <div class="ds-muscle-bar ds-muscle-bar--in">
 *     <div class="ds-muscle-bar__header">
 *       <span class="ds-muscle-bar__name">Chest</span>
 *       <span class="ds-muscle-bar__detail">7.0 sets · 2,640 kg</span>
 *     </div>
 *     <div class="ds-muscle-bar__track" aria-hidden="true">
 *       <div class="ds-muscle-bar__fill" style="width:72%"></div>
 *     </div>
 *   </div>
 *
 * State modifiers: --under (fg-disabled) · --in (accent) · --above (attention) · --ramp (accent-pale)
 * Width of fill is set inline as a percentage.
 * aria-hidden on track; underlying numbers in the header text are readable.
 */

.ds-muscle-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ds-muscle-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ds-muscle-bar__name {
  font: var(--fw-semibold) var(--text-13) var(--font-body);
  color: var(--ink);
}

.ds-muscle-bar__detail {
  font: var(--fw-regular) var(--text-12) var(--font-body);
  color: var(--fg-subtle);
}

.ds-muscle-bar__track {
  height: 8px;
  background: var(--bg-200);
  border-radius: 4px;
  overflow: hidden;
}

.ds-muscle-bar__fill {
  height: 8px;
  border-radius: 4px;
  background: var(--fg-disabled); /* default / under */
}

/* State modifiers */
.ds-muscle-bar--under .ds-muscle-bar__fill { background: var(--fg-disabled); }
.ds-muscle-bar--in    .ds-muscle-bar__fill { background: var(--accent); }
.ds-muscle-bar--above .ds-muscle-bar__fill { background: var(--attention); }
.ds-muscle-bar--ramp  .ds-muscle-bar__fill { background: var(--accent-pale); }