/* DS-08 / DS-09: compact peers with shared label, value and context rows.
 * Reference scale: 16 + 26 + 16 + two 2 gaps + two 8 insets = 78 px.
 * rem units and measured shared rows retain enlarged text. Context is in normal
 * flow, aligned right; it never overlays a reading or adds a private row.
 */
.measurement-grid,
.tiles.measurement-grid {
  display: grid;
  grid-template-columns: repeat(var(--measurement-columns, 2), minmax(0, 1fr));
  gap: .5rem;
  align-items: start;
  min-width: 0;
}
/* A single tile in a grid row spans the full width (e.g. Calories under Yoga's 2-up pair). */
.measurement-grid > .measurement-tile:only-child {
  grid-column: 1 / -1;
}
.measurement-grid > .measurement-tile {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: var(--measurement-label-row, 1rem) var(--measurement-value-row, 1.625rem) var(--measurement-context-row, 1rem);
  gap: .125rem;
  padding: .5rem;
  min-width: 0;
  min-height: 0;
  border-radius: 1rem;
  background: var(--card);
}
.measurement-tile > .measurement-label,
.measurement-tile > .measurement-value,
.measurement-tile > .measurement-context {
  min-width: 0;
  align-self: start;
}
.measurement-tile .measurement-content {
  display: block;
  width: max-content;
  white-space: nowrap;
}
.measurement-tile > .measurement-label {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: .025em;
}
.measurement-tile > .measurement-label > .measurement-content {
  display: flex;
  align-items: center;
  gap: .375rem;
}
.measurement-tile .measurement-label .icon {
  flex: none;
  width: .8125rem;
  height: .8125rem;
}
.measurement-tile .measurement-label .icon.pink { color: #FF5A7A; }
.measurement-tile .measurement-label .icon.warn { color: var(--attention); }
.measurement-tile .measurement-label .icon.glucose { color: #7D73DB; }
.measurement-tile .measurement-label .icon.temperature { color: #FF9500; }
.measurement-tile .measurement-label .icon.efficiency { color: var(--sport-run); }
.measurement-tile .measurement-readings {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.measurement-tile .measurement-reading {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  white-space: nowrap;
  flex: none;
}
.measurement-tile .measurement-number {
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  line-height: 1.625rem;
  font-variant-numeric: tabular-nums;
}
.measurement-tile .measurement-unit {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: var(--weight-regular);
  color: var(--ink-secondary);
}
.measurement-tile .measurement-empty {
  font-size: .9375rem;
  line-height: 1.375rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
}
/* A tile with face dots (face-dots.css) keeps its context line clear of the column, as iOS pads a tile's content 13 pt. */
.measurement-tile:has(.ox-face-dots) > .measurement-context {
  padding-right: 13px;
}
.measurement-tile > .measurement-context {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* A whole group changes layout only after one full-width tile is insufficient.
 * This preserves exact explanatory wording at accessibility text sizes. Numeric
 * value/unit pairs remain atomic, and all peers receive the same measured rows.
 */
.measurement-grid[data-expanded-text] .measurement-content {
  width: auto;
  max-width: 100%;
  white-space: normal;
}
/* A title stays one line (it may shrink) so the values in a row share one baseline.
   A wrapped sentence belongs to the context, not the header (roadmap 8). */
.measurement-grid[data-expanded-text] .measurement-label > .measurement-content {
  white-space: nowrap;
}
.measurement-grid[data-expanded-text] .measurement-readings {
  flex-wrap: wrap;
  row-gap: .125rem;
}

/* Activity page: one grid for the tile section under the title. 3×2 on desktop,
   2×3 when the container is narrow, so values stay on one line at 390. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  align-items: start;
}
.tile-grid > .measurement-tile,
.tile-grid > .card {
  min-width: 0;
}
/* Measurement tiles inside the activity tile grid need the same card box as the
 * sauna/yoga placeholder cards so backgrounds, caption placement and face dots line up. */
.tile-grid > .measurement-tile {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: var(--measurement-label-row, 1rem) var(--measurement-value-row, 1.625rem) var(--measurement-context-row, 1rem);
  gap: .125rem;
  padding: .5rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--card);
}
/* A tile title stays on one line, as on iPhone (lineLimit 1, minimumScaleFactor .75): a long one ("Avg
 * cadence" in a 390 px three-column row) shrinks to fit, never below 75 % (measurement-tiles.js). Lead,
 * 8 Nov 2026, and Roberto's 18 Oct no-wrap rule. The icon stays in its own column. */
.tile-grid .measurement-tile > .measurement-label > .measurement-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .375rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.tile-grid .measurement-tile > .measurement-label .icon {
  margin-top: 0.125rem;
}

/* Cards that sit inside the activity tile grid (sauna TIME/TEMP/HR/thermal, yoga TIME)
 * use the same three-row box as measurement tiles so the grid rows line up. */
.tile-grid > .card {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: var(--measurement-label-row, 1rem) var(--measurement-value-row, 1.625rem) var(--measurement-context-row, 1rem);
  gap: .125rem;
  padding: .5rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--card);
}
.tile-grid > .card > .lbl {
  font-size: .75rem;
  line-height: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: .025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-grid > .card > .big {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.625rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-grid > .card > .big i {
  font-style: normal;
  font-size: .6875rem;
  line-height: 1rem;
  font-weight: var(--weight-regular);
  color: var(--ink-secondary);
}
.tile-grid > .card > .sub {
  display: block;
  text-align: right;
  font-size: .6875rem;
  line-height: 1rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The heat-load caption is a sentence. It wraps in the tile instead of ending on an ellipsis. */
.tile-grid > .card.heat-load {
  grid-template-rows: var(--measurement-label-row, 1rem) var(--measurement-value-row, 1.625rem) auto;
}
.tile-grid > .card.heat-load > .sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Never let a long value overflow its tile and overlap its neighbour.
 * Values stay on one line; if they still don't fit they truncate with ellipsis. */
.tile-grid .measurement-tile {
  overflow: hidden;
}
.tile-grid .measurement-tile .measurement-content {
  max-width: 100%;
}
.tile-grid .measurement-tile .measurement-readings {
  min-width: 0;
}
.tile-grid .measurement-tile .measurement-reading {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-grid .measurement-tile .measurement-number {
  font-size: 1.25rem;
}
.tile-grid .measurement-tile .measurement-unit {
  font-size: .6875rem;
}

.activity-note-row{display:flex;align-items:center;gap:8px;width:100%;padding:0;background:none;text-align:left;color:var(--ink);font-size:var(--font-subheadline)}
.activity-note-row>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-note-row small{color:var(--ink-secondary);font-size:var(--font-caption)}
.activity-note-save{display:block;margin-left:auto;background:none;color:var(--accent);font-weight:var(--weight-semibold)}

/* At narrow viewports the sauna/yoga custom cards need their labels to shrink so
 * "Heat load" and its caption fit, while staying >= 11 px. */
@media (max-width: 430px) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .375rem;
  }
  .tile-grid > .measurement-tile,
  .tile-grid > .card {
    padding: .375rem;
  }
  .tile-grid .measurement-tile .measurement-number {
    font-size: 1.125rem;
  }
  .tile-grid .measurement-tile .measurement-unit {
    font-size: .625rem;
  }
  .tile-grid > .card > .lbl {
    font-size: .6875rem;
    letter-spacing: 0;
  }
  .tile-grid > .card > .big {
    font-size: 1.125rem;
  }
  .tile-grid > .card > .big i {
    font-size: .625rem;
  }
  .tile-grid > .card > .sub {
    font-size: .5625rem;
  }
}