/* Sleep chapter (#trends/sleep): chapter-specific layout only. Every selector starts
   with .sleep- so nothing leaks into other pages. Colors come from the tokens in
   styles.css; shared parts (.chapter, .panel, .tile, .legend, .takeaway, details.more,
   .bridge, .num, .fine) are styled there. */

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

.sleep-chart {
  width: 100%;
}

.sleep-note,
.sleep-compare,
.sleep-empty {
  margin: 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. */
.sleep-panel > .panel-head {
  align-items: center;
}

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

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

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

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

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

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

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

.sleep-stats {
  container: sleep-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);
}

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

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

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

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

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

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

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

.sleep-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. */
.sleep-stats-grid > .tile > .tile-hint,
.sleep-stats-grid > .tile > .sleep-tile-status {
  order: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- Stage averages: one bar for a whole night, then a row per stage ---------- */

.sleep-stage-bar {
  margin: 4px 0 12px;
}

.sleep-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.sleep-stage-row:first-child {
  border-top: 0;
}

.sleep-stage-extra {
  margin: 12px 0 0;
}

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

.sleep-stage-value {
  font-size: 20px;
  line-height: 1;
  text-align: right;
}

.sleep-stage-share,
.sleep-stage-delta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
  text-align: right;
}

/* ---------- Naps: a compact row of figures ---------- */

.sleep-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
}

.sleep-stat {
  display: grid;
  gap: 2px;
  margin: 0;
}

.sleep-stat-label {
  font-size: 13px;
  color: var(--ink-2);
}

.sleep-stat-value {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
}

/* A panel with only its takeaway (no naps) needs no empty body gap. */
.sleep-naps > .panel-head:last-child,
.sleep-naps > .panel-head:has(+ .panel-body:empty) {
  margin-bottom: 0;
}

@media (max-width: 899.98px) {
  .sleep-stage-row {
    grid-template-columns: 8px minmax(0, 1fr) auto 40px 56px;
    gap: 10px;
  }

  .sleep-stat-list {
    gap: 12px 28px;
  }

  .sleep-stat-value {
    font-size: 24px;
  }
}

/* This chapter adds no motion of its own; chart animations and .highlight-once follow
   prefers-reduced-motion in charts.css and styles.css. */

/* 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) {
  .sleep-more-grid > .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. */
  .sleep-more-grid > .panel > .panel-head {
    align-self: start;
  }
}