/* The progress screens' own styles: ProgressTab's chips and MetricDetail, RecordsCard, the trend
   charts (TrendChart, BarTrendChart) and Today's charts card and insights. */

/* The metric chips: a capsule each, the chosen one aqua; More opens a menu of the rest. */
.chips-wrap { position: relative; margin: 0 calc(-1 * var(--l)); }
.chips { display: flex; gap: var(--s); overflow-x: auto; scrollbar-width: none; padding: 0 var(--l); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 36px; padding: 0 var(--m); border-radius: 999px; font-size: 15px; font-weight: 600;
  background: color-mix(in srgb, var(--reference) 12%, transparent); color: var(--label); white-space: nowrap; }
.chip.selected { background: var(--aqua); color: #fff; }
.chip-menu { position: absolute; right: var(--l); top: 44px; z-index: 25; min-width: 230px; padding: 6px 0; border-radius: 16px;
  /* Nearly opaque: where backdrop blur is missing, the glass let the card's text through. */
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; }
.chip-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--m); padding: 11px var(--l);
  font-size: 17px; text-align: left; }
.chip-menu button + button { border-top: 0.5px solid var(--separator); }
.chip-menu button svg { width: 16px; height: 16px; }

/* MetricDetail's header: eyebrow, the figure, the range, the change, the best. */
.detail-header { display: flex; flex-direction: column; gap: 2px; }
.big-value { font-size: 34px; line-height: 41px; font-variant-numeric: tabular-nums; }
.title2.hero { font-weight: 600; }
.change-line { display: flex; align-items: flex-start; gap: 6px; }
.change-line svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.share-button { display: inline-flex; align-items: center; gap: 6px; color: var(--aqua); align-self: flex-start; min-height: 30px; }
.share-button svg { width: 19px; height: 19px; }
.selected-link:empty { display: none; }
.link-row { display: inline-flex; align-items: center; gap: 6px; color: var(--aqua); min-height: 28px; text-align: left; }
.link-row svg { width: 12px; height: 12px; flex: none; }

/* TrendChart and BarTrendChart. */
.trend-chart { display: flex; flex-direction: column; gap: 6px; }
.trend-chart svg.chart { touch-action: pan-y; outline-offset: 4px; }
.trend-chart .grid { stroke: color-mix(in srgb, var(--aqua) 18%, var(--quaternary)); }
.trend-chart text.caption2 { font-size: 11px; }
.trend-legend { display: flex; gap: var(--m); font-size: 12px; color: var(--secondary); }
.trend-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* RecordsCard: a row each, a hairline under every one, the share button for a fastest run. */
.records { display: flex; flex-direction: column; }
.record { display: flex; align-items: center; gap: var(--m); padding: 10px 0; border-bottom: 0.5px solid var(--separator); }
.record:first-child { padding-top: 0; }
.record-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--m); text-align: left; }
.record .hero.headline { font-size: 17px; flex: none; }
.record-share { color: var(--aqua); flex: none; display: grid; place-items: center; width: 28px; height: 32px; }
.record-share svg { width: 21px; height: 21px; }

/* Today's charts card: the pages side by side, one in view, swiped with a finger. */
.today-charts { overflow: hidden; }
.today-pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 340px;
  overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--l)); }
.today-pager::-webkit-scrollbar { display: none; }
.today-page { flex: 0 0 100%; scroll-snap-align: start; padding: 0 var(--l); display: flex; flex-direction: column; gap: var(--s); min-width: 0; }
.today-page-title { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; }
.page-dots { display: flex; gap: 6px; }
.page-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--tertiary); }
.page-dots span.on { background: var(--aqua); }
.swipe-button { display: inline-flex; align-items: center; gap: 4px; color: var(--aqua); min-height: 28px; }
.swipe-button svg { width: 12px; height: 12px; }

/* TodayInsights. */
.insight { display: flex; flex-direction: column; gap: var(--xs); text-align: left; width: 100%; }
.divider { border-top: 0.5px solid var(--separator); }