/* Training chapter (#trends/training). Shared parts (.chapter, .panel, .tile, .table,
   .legend, .status, .takeaway, details.more, .bridge) come from styles.css; only
   chapter-specific layout lives here, and every selector starts with .training- so
   nothing leaks into other pages. */

.training-chapter,
.training-panel,
.training-pair,
.training-more-grid {
  min-width: 0;
}

/* The takeaway is the panel's first line: a full row under the title and the
   Table toggle, as in the Recovery chapter. */
/* Title and Table toggle share one tight line: centered on each other, the toggle's
   extra height (a 36-44px touch target) kept out of the line box. */
.training-panel > .panel-head {
  align-items: center;
}

.training-panel > .panel-head > .panel-actions {
  margin-block: -8px;
}

.training-takeaway-row {
  flex: 1 1 100%;
  order: 1;
  min-width: 0;
  margin-top: -4px;
}

.training-takeaway-row > .takeaway {
  margin-top: 0;
}

.training-panel .panel-foot > p + p {
  margin-top: 4px;
}

.training-legend {
  margin-bottom: 12px;
}

.training-chart {
  width: 100%;
  min-height: 120px;
}

.training-compare {
  margin: 0;
}

.training-touch-hint {
  margin-top: 6px;
}

/* ---------- Compact stats row: the round 1 tiles as one readout on the ground ---------- */

.training-stats {
  container: training-stats / inline-size;
  display: grid;
  gap: 8px;
  min-width: 0;
  /* Sparkline end dots sit on the page ground here, not on a panel. */
  --chart-surface: var(--bg);
}

.training-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.training-stats-grid > .tile {
  gap: 2px;
  padding: 14px 14px 16px;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.training-stats-grid > .tile:nth-child(2n+1) {
  border-left: 0;
  padding-left: 0;
}

.training-stats-grid > .tile:nth-child(n+3) {
  border-top: 1px solid var(--hairline);
}

.training-stats-grid .tile-value {
  font-size: 28px;
}

.training-stats-grid .tile-unit {
  font-size: 14px;
}

.training-stats-grid .tile-trend {
  margin-top: 6px;
}

.training-stats-grid .tile-hint {
  margin-top: 0;
}

/* Sparklines line up along the bottom of each row: hint (and pill) first, then a
   spacer that grows, then the sparkline. */
.training-stats-grid > .tile > .tile-hint,
.training-stats-grid > .tile > .training-tile-status {
  order: 1;
}

.training-stats-grid > .tile::after {
  content: "";
  order: 2;
  flex: 1 0 6px;
}

.training-stats-grid > .tile > .tile-trend {
  order: 3;
  margin-top: 0;
}

.training-tile-status {
  margin-top: 6px;
}

@container training-stats (min-width: 340px) {
  .training-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .training-stats-grid > .tile:nth-child(n) {
    border-top: 0;
    border-left: 1px solid var(--hairline);
    padding-left: 14px;
  }

  .training-stats-grid > .tile:nth-child(3n+1) {
    border-left: 0;
    padding-left: 0;
  }

  .training-stats-grid > .tile:nth-child(n+4) {
    border-top: 1px solid var(--hairline);
  }
}

@container training-stats (min-width: 340px) and (max-width: 599.98px) {
  .training-stats-grid > .tile {
    padding-right: 10px;
  }

  .training-stats-grid > .tile:nth-child(n) {
    padding-left: 10px;
  }

  .training-stats-grid > .tile:nth-child(3n+1) {
    padding-left: 0;
  }

  .training-stats-grid .tile-value {
    font-size: 24px;
  }

  .training-stats-grid .tile-unit {
    font-size: 13px;
  }
}

@container training-stats (min-width: 800px) {
  .training-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .training-stats-grid > .tile:nth-child(n) {
    border-top: 0;
    border-left: 1px solid var(--hairline);
    padding: 16px 16px 18px;
  }

  .training-stats-grid > .tile:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- Intensity mix ---------- */

.training-mix-bar {
  width: 100%;
  margin-bottom: 16px;
}

.training-zone-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.training-swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sw, var(--ink-3));
}

/* ---------- Tables ---------- */

/* The sports table drops its load column when its panel is narrow (two columns on a
   tablet or the Yoga in portrait), so nothing scrolls out of sight. */
.training-sports-panel {
  container: training-sports / inline-size;
}

@container training-sports (max-width: 459.98px) {
  .training-sports .training-col-opt {
    display: none;
  }

  /* Avg strain becomes the last visible column. */
  .training-sports th:nth-last-child(2),
  .training-sports td:nth-last-child(2) {
    padding-right: 0;
  }
}

.training-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table .training-num {
  text-align: right;
  white-space: nowrap;
}

.training-sport {
  display: block;
  color: var(--ink);
}

.training-inline-date {
  display: none;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-3);
}

.training-col-date {
  white-space: nowrap;
}

.training-col-zones {
  width: 124px;
}

.training-zonebar {
  width: 112px;
  min-width: 56px;
}

.training-workouts tr[hidden] {
  display: none;
}

.training-more {
  margin-top: 12px;
}

/* Under 600px the workouts table keeps sport (with the date beneath it),
   duration, strain and the zone bar; avg HR and load drop out. */
@media (max-width: 599.98px) {
  .training-col-date,
  .training-col-opt {
    display: none;
  }

  .training-inline-date {
    display: block;
  }

  .training-col-zones {
    width: 68px;
  }

  .training-zonebar {
    width: 60px;
  }

  .training-workouts th,
  .training-workouts td,
  .training-sports th,
  .training-sports td,
  .training-zone-table th,
  .training-zone-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .training-workouts th:first-child,
  .training-workouts td:first-child,
  .training-sports th:first-child,
  .training-sports td:first-child,
  .training-zone-table th:first-child,
  .training-zone-table td:first-child {
    padding-left: 0;
  }

  .training-workouts .training-col-sport {
    padding-left: 0;
  }

  .training-sports th:nth-last-child(2),
  .training-sports td:nth-last-child(2) {
    padding-right: 0;
  }

  .training-workouts th:last-child,
  .training-workouts td:last-child,
  .training-sports th:last-child,
  .training-sports td:last-child,
  .training-zone-table th:last-child,
  .training-zone-table td:last-child {
    padding-right: 0;
  }

}

/* Side-by-side panels share rows (head, body, foot), so their charts start at the
   same height even when one takeaway runs a line longer than the other. */
@supports (grid-template-rows: subgrid) {
  .training-pair > .panel {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-content: start;
  }

  /* The head keeps its own height; the row's spare space goes below it. */
  .training-pair > .panel > .panel-head {
    align-self: start;
  }
}