/* Trends view: one page in four chapters. View-specific layout only; every selector
   starts with .trends- so nothing leaks into other pages. Story classes (.story,
   .chapter, .chapter-nav, .lead, .takeaway, .bridge, details.more) come from
   styles.css; colors come from its tokens. */

/* Grid children must be allowed to shrink, or wide SVGs force horizontal scroll. */
.trends-page,
.trends-page .panel,
.trends-chart {
  min-width: 0;
}

.trends-chart {
  width: 100%;
}

.trends-note {
  margin: 0;
}

/* ---------- period summary and tiles (on the black ground) ---------- */

.trends-period {
  gap: 24px;
}

.trends-summary {
  max-width: 40em;
}

.trends-tiles-block {
  display: grid;
  gap: 10px;
}

.trends-compare {
  margin: 0;
}

.trends-tile-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trends-tile-icon,
.trends-seg-icon,
.trends-chapter-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--sw, var(--ink-3));
}

/* ---------- Since you started (range "all") ---------- */

/* Evidence for the lifetime lead: on the black ground, a hairline above and below. */
.trends-lifetime {
  display: grid;
  gap: 14px;
  padding: 18px 0 2px;
  border-top: 1px solid var(--hairline);
  min-width: 0;
}

.trends-lifetime-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
  font-stretch: 105%;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.trends-lifetime-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px 32px;
  align-items: start;
}

.trends-lifetime-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0;
}

.trends-lifetime-fact {
  min-width: 0;
}

.trends-lifetime-fact dt {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
}

.trends-lifetime-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 3px 0 0;
}

.trends-lifetime-num {
  font-size: 28px;
  font-stretch: 85%;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}

.trends-lifetime-date {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.trends-lifetime-sub {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-3);
}

.trends-lifetime-moved {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.trends-lifetime-moved-head {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
}

.trends-lifetime-changes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trends-lifetime-change {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.trends-lifetime-change > p {
  margin: 0;
}

.trends-lifetime-metric {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-2);
}

.trends-lifetime-value {
  font-size: 26px;
  font-stretch: 85%;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.trends-lifetime-delta {
  margin: 0;
  align-items: flex-start;
  line-height: 1.35;
}

.trends-lifetime-delta .icon {
  margin-top: 2px;
  flex-shrink: 0;
}

.trends-lifetime-basis {
  max-width: 62em;
  margin: 0;
}

.trends-lifetime-bridges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}

@media (max-width: 1099.98px) {
  .trends-lifetime-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .trends-lifetime-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 599.98px) {
  .trends-lifetime-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trends-lifetime-changes {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* One row per measure on phones: name and value on the left, the change beside them. */
  .trends-lifetime-change {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 10px 12px;
  }

  .trends-lifetime-metric {
    grid-column: 1 / -1;
  }

  .trends-lifetime-value {
    font-size: 24px;
  }
}

/* ---------- chapters and the sticky switcher ---------- */

.trends-chapters {
  display: flex;
  flex-direction: column;
  gap: 72px;
  min-width: 0;
}

/* The switcher sits closer to the chapter it introduces than chapters sit to each other. */
.trends-nav {
  justify-content: space-between;
  margin-bottom: -40px;
  /* Nearly opaque: vivid bars scrolling underneath must not glow behind the labels. */
  background: color-mix(in oklab, var(--bg) 93%, transparent);
}

.trends-nav .segmented > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.trends-seg-label {
  min-width: 0;
}

/* The range only matters once the page head has scrolled away. */
.trends-nav-range {
  flex-shrink: 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease;
}

.trends-nav.is-stuck .trends-nav-range {
  opacity: 1;
}

.trends-chapter {
  /* Land below the sticky switcher (its own height plus breathing room). */
  scroll-margin-top: calc(var(--safe-top, 0px) + 84px);
}

.trends-chapter .chapter-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trends-chapter .chapter-head .lead {
  max-width: 38em;
  /* The chapter title leads; its headline sits a step below it. */
  font-size: clamp(19px, 0.45vw + 15px, 22px);
  line-height: 1.36;
}

.trends-chapter .bridge {
  margin-top: -10px;
}

/* ---------- panels ---------- */

/* A tall touch-size Table toggle must not push the takeaway away from the title:
   it overhangs the title row (centered on it) instead of setting its height. */
.trends-panel > .panel-head > .panel-actions {
  align-self: center;
  margin-block: -12px;
}

/* The takeaway is the panel's first line: a full row under the title and actions
   (order keeps it after a Table toggle added later; the padding keeps a ~76ch measure). */
.trends-panel > .panel-head > .takeaway {
  order: 1;
  flex: 1 1 100%;
  max-width: none;
  margin-top: -4px;
  padding-right: max(0px, calc(100% - 76ch));
}

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

/* HRV status row: pill and the latest numbers, above the chart. */
.trends-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.trends-legend {
  margin: 0 0 12px;
}

/* Recovery mix: bar, then one row per zone. */
.trends-mix-bar {
  margin: 4px 0 12px;
}

.trends-mix-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trends-mix-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
}

.trends-mix-row:first-child {
  border-top: 0;
}

.trends-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sw, var(--ink-3));
}

.trends-mix-pct {
  font-size: 20px;
  line-height: 1;
  text-align: right;
}

.trends-mix-days {
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
}

/* ---------- responsive ---------- */

@media (max-width: 899.98px) {
  .trends-chapters {
    gap: 56px;
  }

  .trends-nav {
    margin-bottom: -32px;
  }

  .trends-nav-range {
    display: none;
  }

  .trends-mix-row {
    grid-template-columns: 8px minmax(0, 1fr) auto 56px;
    gap: 10px;
  }
}

/* 600-899: tiles three-up would leave a hole in the second row; 3 + 2 fills both. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .trends-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .trends-tiles > .trends-tile {
    grid-column: span 2;
  }

  .trends-tiles > .trends-tile:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Once the page stops growing, the switcher's hairline matches the content edges
   instead of ending short of the window edge. */
@media (min-width: 1600px) {
  .trends-nav {
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (max-width: 599.98px) {
  .trends-period {
    gap: 20px;
  }

  /* Five tiles two-up: recovery leads across the full row, its trend beside the figure. */
  .trends-tiles > .trends-tile-recovery {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: center;
    column-gap: 20px;
  }

  .trends-tile-recovery > :not(.tile-trend) {
    grid-column: 1;
  }

  .trends-tile-recovery > .tile-trend {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
  }

  /* The switcher names the chapter, so the heading is kept for screen readers only. */
  .trends-chapter .chapter-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* One chapter at a time: the switcher acts as tabs. */
  .trends-chapters {
    gap: 24px;
  }

  .trends-nav {
    margin-bottom: 0;
  }

  .trends-nav .segmented > button {
    gap: 6px;
  }

  /* Four chapters on a phone: the labels carry the switcher; icons return on wider phones. */
  .trends-nav .segmented > button {
    padding-inline: 6px;
  }
}

@media (max-width: 459.98px) {
  .trends-nav .trends-seg-icon {
    display: none;
  }
}

/* This view adds no motion of its own beyond the switcher's range fade; chart, pill and
   highlight animations follow prefers-reduced-motion in charts.css and styles.css. */
@media (prefers-reduced-motion: reduce) {
  .trends-nav-range {
    transition: none;
  }
}

/* ---------- day links (round 3: rows and dates open the day sheet) ---------- */

/* Workout rows in the Training chapter open their day; the date is the keyboard target. */
.trends-page .training-row-openable {
  cursor: pointer;
}

@media (hover: hover) {
  .trends-page .training-row-openable:hover > td {
    background: color-mix(in oklab, var(--ink) 4%, transparent);
  }
}

.trends-page .training-day-link {
  font-weight: 400;
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--ink-3) 70%, transparent);
  white-space: nowrap;
}

.trends-page .training-day-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-2);
}

.trends-page .training-day-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A fingertip needs more than a line of text: the hit area grows, the layout does not. */
@media (any-pointer: coarse) {
  .trends-page .training-day-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    left: -6px;
    height: max(44px, calc(100% + 24px));
    transform: translateY(-50%);
  }
}