/* ============================================================================
   device.css — iPhone frame + the app's "Bento" interface, rebuilt in CSS.

   These are not decorative approximations. Every token below is lifted from
   Theme/BentoTheme.swift and BentoPaletteManager.swift (Midnight palette, the
   app default), so a mockup here and a screenshot of the app agree.

   The screen is authored at a fixed 390pt logical width -- the same coordinate
   space the SwiftUI views use -- and scaled as a whole via --s. That means every
   padding and radius below can be the app's literal number.
   ========================================================================== */

.bento {
  /* Midnight palette */
  --ground:  #0E1013;
  --tile:    #171A1F;
  --border:  #23262C;
  --inner:   #1D2127;
  --track:   #2A2F37;

  --text1:   #F2F3F5;
  --text2:   #AEB4BE;
  --text3:   #7C828C;

  /* Semantic: does this fit the macros you have left, or not? */
  --fit:     #5BD273;
  --fit-bg:  rgba(52, 178, 74, .16);
  --over:    #E5484D;
  --over-bg: rgba(229, 72, 77, .16);

  /* Macro identity */
  --cal:     #4CD964;
  --protein: #007AFF;
  --carbs:   #AF52DE;
  --fat:     #FF9500;
  --fiber:   #8B4513;

  /* SF Pro Rounded on Apple platforms -- the face the app actually uses. */
  --round: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- palettes */
/* The app ships six colour schemes (Theme/BentoPaletteManager.swift). Midnight
   is the default and is already set above, so anything that sets no
   data-palette keeps rendering exactly as before -- these are pure additions.

   Only the surface and text tokens move. fit/over and the macro colours are
   palette-independent in the app, and must stay put here too. */

.bento[data-palette="oled"] {
  --ground: #000000; --tile: #0B0B0D; --border: #1C1C21; --inner: #131316;
  --track:  #26262C; --text1: #F5F5F7; --text2: #A8ADB8; --text3: #767C86;
}
.bento[data-palette="slate"] {
  --ground: #0F141B; --tile: #1A212B; --border: #273140; --inner: #202836;
  --track:  #2F3A4B; --text1: #EEF2F7; --text2: #A9B4C4; --text3: #7A8699;
}
.bento[data-palette="forest"] {
  --ground: #0C120E; --tile: #15201A; --border: #22322A; --inner: #1B2A22;
  --track:  #2A3D33; --text1: #EFF5F0; --text2: #A8BCAD; --text3: #748A7B;
}
.bento[data-palette="espresso"] {
  --ground: #120E0B; --tile: #1E1712; --border: #2E241D; --inner: #251C15;
  --track:  #383026; --text1: #F5F0EA; --text2: #BDB0A2; --text3: #8C8072;
}
.bento[data-palette="plum"] {
  --ground: #120D14; --tile: #1D1521; --border: #2E2233; --inner: #251A2A;
  --track:  #372B3E; --text1: #F4EFF6; --text2: #B7ABBE; --text3: #857A8D;
}

/* Switching schemes should feel like the app re-tinting, not like a page reload. */
@media (prefers-reduced-motion: no-preference) {
  .bento[data-palette] .phone-screen,
  .bento[data-palette] .tile,
  .bento[data-palette] .rcard,
  .bento[data-palette] .mealrow,
  .bento[data-palette] .daychip,
  .bento[data-palette] .logbtn,
  .bento[data-palette] .segmented,
  .bento[data-palette] .scell,
  .bento[data-palette] .tabbar {
    transition: background-color .45s ease, border-color .45s ease, color .45s ease;
  }
}

/* ------------------------------------------------------------------ frame */

.phone {
  --s: 1;
  width: calc(410px * var(--s));
  height: calc(864px * var(--s));
  flex: none;
}
.phone-body {
  width: 410px;
  height: 864px;
  transform: scale(var(--s));
  transform-origin: top left;
  background: linear-gradient(160deg, #3a3d42, #1c1e22 40%, #26282d);
  border-radius: 56px;
  padding: 10px;
  box-shadow:
    0 2px 3px rgba(0,0,0,.5) inset,
    0 50px 90px -40px rgba(0,0,0,.55),
    0 20px 40px -30px rgba(0,0,0,.4);
}
.phone-screen {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 47px;
  overflow: hidden;
  background: var(--ground);
  color: var(--text1);
  font-family: var(--round);
  font-size: 15px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;

  /* A column, so `.screen-body { flex: 1 }` can absorb the slack and the tab bar
     can sit on the bottom edge via `margin-top: auto` -- exactly as it does on a
     real device. Pages that stack their chrome straight into the screen (rather
     than into a `.screen` layer) depend on this. */
  display: flex;
  flex-direction: column;
}

/* Dynamic Island */
.island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 124px; height: 36px;
  background: #000;
  border-radius: 999px;
  z-index: 20;
}

/* Status bar. 9:41, as it has been since 2007. */
.statusbar {
  position: relative;
  z-index: 21;
  height: 58px;
  padding: 18px 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--text1);
}
.statusbar .glyphs { display: flex; align-items: center; gap: 5px; }

/* -------------------------------------------------------------- screen(s) */

.screens { position: relative; flex: 1; height: 100%; }

/* Default (and no-JS) state: the first screen is the visible one. */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .45s ease;
}
.screen:first-of-type { opacity: 1; }
.screens.js .screen { opacity: 0; }
.screens.js .screen.is-active { opacity: 1; }

/* A screen that is not on top must not eat clicks or reach the a11y tree. */
.screens.js .screen:not(.is-active) { visibility: hidden; }

.screen-body {
  flex: 1;
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* ------------------------------------------------------------ screen head */

.shead {
  padding: 4px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.skicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 3px;
}
.stitle {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
}
.snav { display: flex; gap: 8px; }
.snav span {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--tile);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text2);
}

/* ------------------------------------------------------------------- tile */

.tile {
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.thead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}
.thead .trail { color: var(--text2); letter-spacing: .5px; }
.ttitle { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.tcap { font-size: 11px; font-weight: 500; color: var(--text3); }

/* ----------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.badge.fit  { color: var(--fit);  background: var(--fit-bg); }
.badge.over { color: var(--over); background: var(--over-bg); }

/* ----------------------------------------------------------------- donuts */
/* conic-gradient + a radial mask == a stroked ring, no SVG, no JS. */

.donuts { display: flex; justify-content: space-between; }
.gauge { position: relative; width: 52px; height: 52px; }
.gauge .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--track) 0);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
          mask: radial-gradient(circle, transparent 57%, #000 58%);
}
.gauge .val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.gauge-label {
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
}
.gauge-col { display: flex; flex-direction: column; align-items: center; }

/* ------------------------------------------------------------- week chart */

.week { display: flex; justify-content: space-between; align-items: flex-end; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-bar {
  width: 10px;
  height: 44px;
  border-radius: 999px;
  background: var(--track);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.week-bar i {
  display: block;
  width: 100%;
  height: calc(var(--v) * 1%);
  border-radius: 999px;
  background: var(--fit);
}
.week-bar.over i { background: var(--over); }
.week-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text3);
}

/* -------------------------------------------------------------- timeline */

.timeline { position: relative; padding-left: 18px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px; bottom: 26px;
  width: 2px;
  background: var(--track);
  border-radius: 2px;
}
.tl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.tl-row::before {
  content: "";
  position: absolute;
  left: -18px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--track));
}
.tl-meal {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--dot, var(--text3));
  margin-bottom: 2px;
}
.tl-name { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.tl-row.eaten .tl-name {
  color: var(--text3);
  text-decoration: line-through;
}
.tl-macros {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
}
.tl-check {
  margin-left: auto;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--track);
}
/* A row that carries its tick in the markup (so it can be revealed on scroll)
   must not show it until the meal is actually eaten -- otherwise the day looks
   finished before you have scrolled at all. */
.tl-check svg { display: none; }
.tl-row.eaten .tl-check {
  border-color: transparent;
  background: var(--fit);
  color: var(--ground);
  display: grid;
  place-items: center;
}
.tl-row.eaten .tl-check svg { display: block; }

.tl-add {
  margin-top: 4px;
  padding: 10px;
  border: 1px dashed var(--track);
  border-radius: 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text3);
}

/* ------------------------------------------------------------ log actions */

.logrow { display: flex; justify-content: space-between; gap: 6px; }
.logbtn {
  flex: 1;
  background: var(--inner);
  border-radius: 12px;
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text2);
}
.logbtn span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text3);
  text-align: center;
  line-height: 1.1;
}

/* ---------------------------------------------------------------- planner */

.weekstrip { display: flex; justify-content: space-between; gap: 5px; }
.daychip {
  flex: 1;
  border-radius: 12px;
  background: var(--tile);
  border: 1px solid var(--border);
  padding: 8px 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.daychip .d {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text3);
}
.daychip .n { font-size: 15px; font-weight: 800; }
.daychip .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text3);
}
.daychip.on {
  background: var(--protein);
  border-color: var(--protein);
}
.daychip.on .d, .daychip.on .n { color: #fff; }
.daychip.on .dot { background: rgba(255,255,255,.7); }
.daychip .dot.hide { visibility: hidden; }

/* Layered bars: track = target, translucent = planned, solid = eaten. */
.plbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.plbar-key {
  width: 34px;
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
}
.plbar {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.plbar .planned,
.plbar .eaten {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--c);
}
.plbar .planned { width: calc(var(--planned) * 1%); opacity: .35; }
.plbar .eaten   { width: calc(var(--eaten) * 1%); }
.plbar-val {
  width: 62px;
  flex: none;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}

.mealsec { margin-top: 2px; }
.mealsec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 2px 6px;
}
.mealrow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 6px;
}
.mealrow .nm { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.mealrow .cal { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text3); }
.mealrow .tick {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--track);
}
.mealrow.eaten .nm { color: var(--text3); text-decoration: line-through; }
.mealrow.eaten .tick {
  border-color: transparent;
  background: var(--fit);
  color: var(--ground);
  display: grid;
  place-items: center;
}
.mealrow.empty {
  border-style: dashed;
  border-color: var(--track);
  background: transparent;
  color: var(--text3);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- recipes */

.segmented {
  display: flex;
  gap: 4px;
  background: var(--inner);
  border-radius: 12px;
  padding: 4px;
}
.segmented div {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text3);
}
.segmented div.on { background: var(--tile); color: var(--text1); }

.chips { display: flex; align-items: center; gap: 6px; }
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
}
.chip.on {
  background: var(--fit-bg);
  border-color: transparent;
  color: var(--fit);
}
.chips .left {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}

.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcard {
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
}
.rcard .photo {
  height: 88px;
  border-radius: 12px;
  background: var(--inner);
  display: grid;
  place-items: center;
  color: var(--track);
  margin-bottom: 9px;
}
.rcard .nm {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.15;
  min-height: 2.3em;
}
.rcard .macros {
  margin: 5px 0 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
}
.rcard .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rcard .log {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  background: var(--inner);
  border-radius: 999px;
  padding: 4px 12px;
}

/* --------------------------------------------------------------- tab bar */

.tabbar {
  margin-top: auto;
  height: 78px;
  padding: 10px 12px 0;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--border);
  background: var(--ground);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text3);
  font-size: 10px;
  font-weight: 600;
}
.tab.on { color: var(--protein); }

.homebar {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 140px; height: 5px;
  border-radius: 999px;
  background: var(--text2);
  opacity: .5;
}

/* ---------------------------------------------------------------- widget */

.widget {
  width: min(330px, 100%);
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  font-family: var(--round);
  color: var(--text1);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.6);
}
.widget .whead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.widget .wtitle { font-size: 15px; font-weight: 800; }
.widget .wcal { font-size: 11px; font-weight: 600; color: var(--text3); }
.wrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.wrow .wtick {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--track);
}
.wrow.eaten .wtick {
  border-color: transparent;
  background: var(--fit);
  color: var(--tile);
  display: grid;
  place-items: center;
}
.wrow .wnm { display: block; font-size: 13px; font-weight: 700; }
.wrow.eaten .wnm { color: var(--text3); text-decoration: line-through; }
.wrow .wmeal {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 1px;
}
.wrow .wc { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text3); }

.wbars {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.wbar { flex: 1; }
.wbar .track {
  height: 5px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.wbar .track i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  border-radius: 999px;
  background: var(--c);
}
.wbar .k {
  margin-top: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
}

/* ==========================================================================
   The seven macro display styles (MacroDisplayStyle, MacroDisplayView.swift).

   The app renders the Macros tile in whichever of these you pick in Settings.
   Every size below is the app's literal number. Arcs are SVG rather than
   conic-gradient because SwiftUI uses lineCap: .round -- a conic gradient can
   only produce butt caps -- and because stroke-dasharray is animatable, which
   is what lets the hero scrub the numbers.

   All arcs use pathLength="1", so --p is a plain 0..1 fraction and no
   circumference arithmetic is needed anywhere.
   ========================================================================== */

.arc { transform: rotate(-90deg); transform-origin: 50% 50%; }
.arc .track-ring { fill: none; stroke: var(--track); }
.arc .fill-ring {
  fill: none;
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: var(--p) 1;
}
/* Straight arc (the semicircular gauge) -- not rotated. */
.arc-flat .track-ring { fill: none; stroke: var(--track); }
.arc-flat .fill-ring {
  fill: none;
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: var(--p) 1;
}

@media (prefers-reduced-motion: no-preference) {
  .fill-ring { transition: stroke-dasharray .35s ease-out; }
}

/* Only one style is mounted at a time.
   The layout each style needs is declared HERE, gated on .on -- never as a bare
   `.ms-* { display: flex }`, which would be a same-specificity rule later in the
   file and would quietly beat `.mstyle { display: none }`, leaving those styles
   permanently visible underneath the selected one. */
.mstyle { display: none; }
.mstyle.on { display: block; }
.mstyle.on.ms-bars,
.mstyle.on.ms-rings,
.mstyle.on.ms-gauge { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  .mstyle.on { animation: mfade .35s ease both; }
  @keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
}

/* ---------------------------------------------------- 0 · Donuts (default) */

.donut-row { display: flex; gap: 8px; }
.dcol { flex: 1; display: flex; flex-direction: column; align-items: center; }
.dwrap { position: relative; width: 52px; height: 52px; }
.dwrap svg { display: block; width: 52px; height: 52px; }
.dval {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 10.92px;
  font-weight: 800;
  color: var(--text1);
}
.dlabel {
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text3);
}

/* ------------------------------------------------------- BentoBar (shared) */

.bbar { display: flex; align-items: center; gap: 8px; }
.bbar .k {
  width: 52px; flex: none;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--text3);
}
.bbar .t {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.bbar .t i {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  min-width: 6px;
  border-radius: 999px;
  background: var(--c);
}
.bbar .v {
  width: 72px; flex: none;
  text-align: right;
  font-size: 11px; font-weight: 600;
  color: var(--text2);
}
.fiber-bar { margin-top: 11px; }

/* ------------------------------------------------------------- 1 · Bars */

.ms-bars { flex-direction: column; gap: 9px; padding: 2px 0; }

/* --------------------------------------------------- 2 · Calories Focus */

.cf-top { display: flex; align-items: baseline; gap: 6px; }
.cf-num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text1);
}
.cf-num.over { color: var(--over); }
.cf-cap { font-size: 11px; font-weight: 500; color: var(--text3); }

/* MacroChipRow */
.mchips { display: flex; gap: 5px; margin-top: 8px; }
.mchip {
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 6px;
  border-radius: 999px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}

/* ------------------------------------------------------- 3 · Stacked Bar */

.ms-stack { padding: 2px 0; }
.sbar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  background: var(--track);
  overflow: hidden;
}
.sbar i { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--c); }
.slegend { display: flex; gap: 12px; margin-top: 8px; }
.sleg { display: flex; align-items: center; gap: 5px; }
.sleg .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.sleg .lb {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--text3);
}
.sleg .vl { font-size: 10px; font-weight: 600; color: var(--text2); }
.scap { margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--text3); }

/* ------------------------------------------------------------- 4 · Rings */

.ms-rings { gap: 16px; align-items: center; padding: 2px 0; }
.rings { width: 104px; height: 104px; flex: none; }
.rleg { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rleg-top { display: flex; align-items: baseline; gap: 4px; }
.rleg-top b { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--text1); }
.rleg-top span { font-size: 11px; font-weight: 500; color: var(--text3); }
.rleg-row { display: flex; align-items: center; gap: 5px; }
.rleg-row .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); }
.rleg-row .lb {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--text3);
}
.rleg-row .vl { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--text2); }

/* --------------------------------------------------------- 5 · Stat Grid */

.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scell {
  background: var(--inner);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scell-head { display: flex; align-items: center; gap: 5px; }
.scell-head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.scell-head .lb {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--text3);
}
.scell .vl { font-size: 12.5px; font-weight: 600; color: var(--text1); }
.scell .mini { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.scell .mini i {
  display: block; height: 100%;
  width: calc(var(--p) * 100%);
  min-width: 4px;
  border-radius: 999px;
  background: var(--c);
}

/* ----------------------------------------------------- 6 · Calorie Gauge */

.ms-gauge { flex-direction: column; gap: 10px; }
.gauge-wrap {
  position: relative;
  width: 128px;
  height: 74px;
  margin: 0 auto;
}
.gauge-wrap svg { display: block; width: 128px; height: 74px; }
.gauge-cap {
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gauge-cap b { font-size: 30.72px; font-weight: 800; letter-spacing: -1px; color: var(--text1); }
.gauge-cap span { font-size: 11px; font-weight: 500; color: var(--text3); }

/* ------------------------------------------------------------ responsive */
/* One knob. The whole device rescales; nothing inside it reflows. */

@media (max-width: 1100px) { .phone { --s: .86; } }
@media (max-width: 900px)  { .phone { --s: .78; } }
@media (max-width: 560px)  { .phone { --s: .70; } }
@media (max-width: 420px)  { .phone { --s: .60; } }

@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
}