/* v2-changes.css - the Change Requests page. Loaded after v2-closed.css.

   The page reuses v2's cards, tiles and loitable. These rules only lay it out
   and set what those shared classes do not: type and spacing come from tokens. */

.crpage { display: flex; flex-direction: column; gap: var(--space-lg); }
.crpage .card + .card { margin-top: 0; }
.crpage .pagehead { margin-bottom: 0; }
/* The shell keeps a head line to one line so the deals grid never moves. This
   page has no grid, and its pilot caveat must never be clipped at 375. */
.crpage .pagehead p { white-space: normal; }
.crpage .loitable thead th { white-space: normal; vertical-align: bottom; }
.crpage .loitable th, .crpage .loitable td { padding-inline: var(--space-sm); }
/* One tbody per deal, so a deal and its opened requests stripe as one unit. */
.crtable tbody tr:nth-child(even) { background: none; }
.crtable tbody:nth-of-type(even) { background: var(--v2-zebra); }
.crcol-toggle { width: 1%; }
.crtoggle { color: var(--color-accent-ink); }
.crtoggle.is-open svg { transform: rotate(90deg); }
.crdetail > td { padding-block: var(--space-sm) var(--space-md); }
/* An opened request stays inside the visible box: pinned to its left edge and
   no wider than it, however far the table scrolls sideways. */
.crscroll { container-type: inline-size; }
.crreqs { position: sticky; left: var(--space-lg); max-width: calc(100cqi - 3 * var(--space-lg)); }
.crreqs, .crchanges, .crlist { margin: 0; padding-left: var(--space-lg); }
.crreqs { display: flex; flex-direction: column; gap: var(--space-md); }
.crreq > * + * { margin-top: var(--space-xs); }
.crreq__head, .crreq__asked { margin: 0; font-size: var(--text-caption); color: var(--color-text); }
.crchanges, .crlist {
  font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text);
}
.crchange__field { font-weight: 600; }
/* The computed headline lines sit above the caveat and read as findings. */
.crpage .pagehead .crfact {
  color: var(--color-text-strong); font-weight: 600; font-size: var(--text-body);
}
.crpage .crtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
/* The luck tile is a caveat, not the finding, so its figure is the small metric. */
.crpage .crtile .crtile__val { font-size: var(--text-metric-sm); }
.crtile__note {
  margin-top: var(--space-xs); font-size: var(--text-caption); color: var(--color-text-muted);
}
@media (max-width: 1280px) {
  .crpage .crtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .crpage .crtiles { grid-template-columns: minmax(0, 1fr); } }
.crtile__pairs {
  margin: var(--space-xs) 0 0; display: flex; flex-direction: column; gap: var(--space-xs);
}
.crtile__pairs > div { display: flex; justify-content: space-between; align-items: baseline; }
.crtile__pairs dt { font-size: var(--text-caption); color: var(--color-text-muted); }
.crtile__pairs dd {
  margin: 0; font-size: var(--text-metric-sm); font-weight: 700; color: var(--color-text-strong);
}

/* The computed sentence over the speed table, and the "no change" cell. */
.crlede {
  margin: 0; font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text-strong);
}
.crmuted { color: var(--color-text-muted); }