/* Today metrics: vivid glass cards with a compact, readable hierarchy. */
.home-today-card .home-stat {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  background: rgba(20, 30, 36, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.2), 0 18px 34px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.home-today-card .home-stat::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  opacity: .92;
}

.home-today-card .home-stat::after {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  opacity: .58;
}

.home-today-card .home-stat > * { position: relative; z-index: 1; }

.home-today-card .home-stat-calories {
  border-color: rgba(255,79,154,.58);
  background: linear-gradient(145deg, rgba(113,24,70,.72), rgba(37,22,42,.7) 68%, rgba(16,24,30,.66));
}
.home-today-card .home-stat-calories::before {
  background: radial-gradient(circle at 90% 5%, rgba(255,79,154,.38), transparent 48%);
}
.home-today-card .home-stat-calories-burned {
  border-color: rgba(255,166,76,.62);
  background: linear-gradient(145deg, rgba(126,62,25,.76), rgba(58,33,31,.7) 68%, rgba(18,25,31,.68));
}
.home-today-card .home-stat-calories-burned::before {
  background: radial-gradient(circle at 90% 5%, rgba(255,166,76,.4), transparent 48%);
}
.home-today-card .home-stat-water {
  border-color: rgba(69,214,255,.62);
  background: linear-gradient(145deg, rgba(19,102,121,.76), rgba(21,53,72,.7) 68%, rgba(16,27,34,.68));
}
.home-today-card .home-stat-water::before {
  background: radial-gradient(circle at 90% 5%, rgba(69,214,255,.4), transparent 48%);
}
.home-today-card .home-stat-steps {
  border-color: rgba(157,126,255,.64);
  background: linear-gradient(145deg, rgba(74,47,133,.78), rgba(42,34,82,.72) 68%, rgba(17,24,34,.68));
}
.home-today-card .home-stat-steps::before {
  background: radial-gradient(circle at 90% 5%, rgba(157,126,255,.4), transparent 48%);
}
.home-today-card .home-stat-protein {
  border-color: rgba(156,116,255,.58);
  background: linear-gradient(145deg, rgba(67,45,119,.76), rgba(34,29,68,.7) 68%, rgba(17,24,32,.66));
}
.home-today-card .home-stat-protein::before {
  background: radial-gradient(circle at 90% 5%, rgba(174,130,255,.34), transparent 48%);
}

.home-today-card .home-stat:hover,
.home-today-card .home-stat:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 20px 38px rgba(0,0,0,.3);
  filter: saturate(1.08);
  outline: none;
}

.home-today-card .home-stat-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0 0 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px rgba(0,0,0,.16);
}
.home-today-card .home-stat-icon i {
  display: block;
  width: 100%;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}
.home-stat-calories .home-stat-icon { color: #ff73ad; background: rgba(255,79,154,.24); }
.home-stat-calories-burned .home-stat-icon { color: #ffc27d; background: rgba(255,166,76,.22); }
.home-stat-water .home-stat-icon { color: #8beaff; background: rgba(69,214,255,.22); }
.home-stat-steps .home-stat-icon { color: #c1b0ff; background: rgba(157,126,255,.24); }
.home-stat-protein .home-stat-icon { color: #c8b1ff; background: rgba(156,116,255,.24); }

.home-today-card .home-stat-label {
  display: block;
  margin: 0;
  color: rgba(244,248,249,.78);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .01em;
}
.home-today-card .home-stat-value {
  display: block;
  margin: 5px 0 1px;
  color: #fff;
  font-size: clamp(20px, 4.8vw, 27px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
  white-space: normal;
}
.home-today-card .home-stat-detail {
  display: block;
  min-height: 13px;
  color: rgba(231,239,241,.62);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
}
.home-today-card .home-stat-description {
  display: block;
  min-height: 25px;
  max-width: 26ch;
  margin-top: 5px;
  color: rgba(240,246,247,.7);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
}
.home-today-card .home-stat-progress {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.24);
}
.home-today-card .home-stat-progress i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.home-stat-calories .home-stat-progress { color: #ff4f9a; }
.home-stat-calories-burned .home-stat-progress { color: #ffad52; }
.home-stat-water .home-stat-progress { color: #45d6ff; }
.home-stat-steps .home-stat-progress { color: #9d7eff; }
.home-stat-protein .home-stat-progress { color: #a77aff; }
.home-stat-plus { display: none !important; }

.home-calories-split {
  min-height: 190px;
  text-align: left;
}
.home-calories-split .home-stat-icon { align-self: flex-start; }
.home-calories-split .home-stat-label { margin-top: 0; }
.home-calories-split .home-stat-description {
  max-width: 100%;
  min-height: 25px;
  margin-top: 4px;
}
.home-calorie-columns {
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 8px 0 12px;
  gap: 9px;
}
.home-calorie-metric { min-width: 0; display: block; }
.home-calorie-metric small,
.home-calorie-metric em {
  display: block;
  color: rgba(239,245,247,.7);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}
.home-calorie-metric small { text-transform: uppercase; letter-spacing: .02em; }
.home-calorie-metric strong {
  display: block;
  margin: 3px 0 2px;
  color: #fff;
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.home-calorie-received { text-align: center; }
.home-calorie-burned { text-align: center; }
.home-calorie-received strong { color: #ffd2e5; }
.home-calorie-burned strong { color: #d6ff75; }
.home-calorie-divider { width: 1px; height: 48px; background: rgba(255,255,255,.24); }
.home-calories-split .home-stat-progress { display: block; }
.home-calories-split .home-calorie-burned em { min-height: 13px; }

@media (max-width: 390px) {
  .home-today-card .home-stat { padding: 14px; }
  .home-today-card .home-stat-description { font-size: 9px; }
  .home-calories-split { min-height: 184px; }
  .home-calorie-columns { gap: 6px; }
  .home-calorie-metric strong { font-size: 15px; }
  .home-calorie-metric small,
  .home-calorie-metric em { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-today-card .home-stat { transition: none; }
  .home-today-card .home-stat:hover,
  .home-today-card .home-stat:focus-visible { transform: none; }
}

/* Centered metric composition: the icon leads, while every text line shares
   one visual axis for a calmer, more legible 2x2/stacked layout. */
.home-today-card .home-stat {
  align-items: center;
  padding: 18px 16px 16px;
  text-align: center;
}

.home-today-card .home-stat-icon {
  position: relative;
  width: 56px;
  height: 56px;
  flex-basis: 56px;
  margin-bottom: 12px;
  border-radius: 18px;
  font-size: 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,0,0,.2), 0 0 20px currentColor;
}

.home-today-card .home-stat-icon::after {
  position: absolute;
  inset: -5px;
  content: "";
  border: 1px solid currentColor;
  border-radius: 22px;
  opacity: .24;
  pointer-events: none;
}

.home-today-card .home-stat-icon i {
  font-size: 25px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}

.home-today-card .home-stat-label,
.home-today-card .home-stat-value,
.home-today-card .home-stat-detail,
.home-today-card .home-stat-description {
  width: 100%;
  text-align: center;
}

.home-today-card .home-stat-label { font-size: 13px; }
.home-today-card .home-stat-value { margin-top: 6px; }
.home-today-card .home-stat-description {
  max-width: 30ch;
  margin-top: 6px;
}

.home-today-card .home-stat-calories .home-stat-icon {
  border-color: rgba(255,138,196,.7);
  background: linear-gradient(145deg, rgba(255,105,177,.42), rgba(119,29,86,.35));
}
.home-today-card .home-stat-calories-burned .home-stat-icon {
  border-color: rgba(255,195,126,.78);
  background: linear-gradient(145deg, rgba(255,177,78,.5), rgba(137,57,23,.38));
}
.home-today-card .home-stat-water .home-stat-icon {
  border-color: rgba(139,234,255,.78);
  background: linear-gradient(145deg, rgba(69,214,255,.46), rgba(13,91,122,.36));
}
.home-today-card .home-stat-steps .home-stat-icon {
  border-color: rgba(202,184,255,.78);
  background: linear-gradient(145deg, rgba(157,126,255,.5), rgba(61,38,133,.38));
}

@media (max-width: 390px) {
  .home-today-card .home-stat { padding: 16px 14px 14px; }
  .home-today-card .home-stat-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    margin-bottom: 10px;
    border-radius: 17px;
  }
  .home-today-card .home-stat-icon i { font-size: 23px; }
}

/* Mobile-first 2x2 metrics: compact enough to scan, spacious enough to tap. */
@media (max-width: 600px) {
  .home-screen-mode .home-today-card {
    padding: 16px 14px 18px;
  }

  .home-screen-mode .home-stat-grid {
    align-items: stretch;
    gap: 10px;
  }

  .home-screen-mode .home-today-card .home-stat {
    min-height: 198px;
    align-items: center;
    padding: 14px 11px 12px;
    border-radius: 18px;
  }

  .home-screen-mode .home-today-card .home-stat-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    margin-bottom: 8px;
    border-radius: 15px;
  }

  .home-screen-mode .home-today-card .home-stat-icon::after {
    inset: -4px;
    border-radius: 19px;
  }

  .home-screen-mode .home-today-card .home-stat-icon i {
    font-size: 21px;
  }

  .home-screen-mode .home-today-card .home-stat-label {
    font-size: 12px;
    line-height: 1.2;
  }

  .home-screen-mode .home-today-card .home-stat-value {
    margin-top: 5px;
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .home-screen-mode .home-today-card .home-stat-detail {
    min-height: 24px;
    font-size: 10px;
    line-height: 1.2;
  }

  .home-screen-mode .home-today-card .home-stat-description {
    min-height: 38px;
    margin-top: 5px;
    color: rgba(240,246,247,.78);
    font-size: 10px;
    line-height: 1.25;
  }

  .home-screen-mode .home-today-card .home-stat-progress {
    height: 5px;
    margin-top: 8px;
  }
}

@media (max-width: 360px) {
  .home-screen-mode .home-today-card {
    padding-right: 11px;
    padding-left: 11px;
  }

  .home-screen-mode .home-today-card .home-stat {
    min-height: 190px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .home-screen-mode .home-today-card .home-stat-description {
    font-size: 9px;
  }
}

/* Descriptions live inside button-based stat cards. Explicitly reset the
   browser button whitespace so the water and steps guidance can wrap instead
   of being cut off at the card edge on mobile and hosted previews. */
.home-screen-mode .home-today-card .home-stat-description {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

@media (max-width: 600px) {
  .home-screen-mode .home-today-card .home-stat-description {
    min-height: 2.5em;
    font-size: clamp(9px, 2.7vw, 11px);
    line-height: 1.3;
  }
}