/* The fleet statistics page (pages/stats), drawn on the article template: it carries .p-article as
   well as .p-stats, which is why rules here reach that template's sections. Everything on it is a
   figure read from the fleet aggregate, so the page's problem is fitting wide tables and a
   thirteen-bin histogram into a reading column, which the two narrow-screen blocks below decide. */

.p-stats__eyebrow {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.p-stats__availability {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.p-stats__status-title {
  color: var(--text-bright);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.p-stats__section-head {
  display: flex;
  align-items: center;
  gap: 1.2ch;
  margin-block-end: var(--space-md);
}

/* A section header takes its air from the section before it, so the first one — which follows the
   page header rather than another section — is left alone. */
.p-article__section + .p-article__section > .p-stats__section-head {
  margin-block-start: var(--space-xl);
}

.p-stats__section-title {
  color: var(--text-bright);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.p-stats__section-rule {
  flex: 1;
  border-top: var(--bw) solid var(--line);
}

.p-stats__section-note {
  color: var(--text-dim);
  font-size: var(--text-xs);
}

/* The corpus figures are a caption to the page header rather than a section of their own, so the
   negative margin pulls them back out of the template's section rhythm and up under it. They are
   drawn with c-figures, the same component the /replays intro reads its totals in. */
[data-stats-section="corpus"] {
  margin-block: calc(var(--space-xs) - var(--space-lg));
}


.p-stats__stat-grid,
.p-stats__hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18ch), 1fr));
  gap: var(--space-md);
}

/* Every measured section from supporting roles down stacks one box per row at this width, so
   their edges line up as one column down the page. The cap comes off below 72rem, where the
   tables inside would be squeezed instead of scrolling in their own frames. */
.p-stats__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* a grid track sizes to its content by default, which
                                              let a wide table widen the track and drag the boxes
                                              beside it past the viewport instead of scrolling in
                                              its own frame */
  gap: var(--space-md);
  max-width: 66%;
}

.p-stats__stack > * { min-width: 0; }

@media (max-width: 72rem) {
  .p-stats__stack { max-width: 100%; }
}

/* A callout here is a one-line figure rather than prose, so it takes the stack's width instead of
   the reading measure the component defaults to and its edges line up with the boxes above it. */
.p-stats__stack > .c-callout {
  max-width: none;
}

.p-stats__hero {
  border: 3px double var(--accent);
  padding: var(--space-lg) var(--gutter-page) var(--space-xl);
  min-width: 0;
}

.p-stats__hero-lead {
  max-width: 64ch;
  color: var(--text-bright);
  font-size: var(--text-xl);
  line-height: 1.35;
}

.p-stats__hero-lead + .p-stats__hero-lead {
  margin-top: var(--space-md);
}

.p-stats__hero-lead b,
.p-stats__accent { color: var(--accent); }

.p-stats__good { color: var(--good); }
.p-stats__muted { color: var(--text-muted); }

.p-stats__hero-sub {
  max-width: 70ch;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-stats__hero-stats { margin-top: var(--space-lg); }

.p-stats__harnesses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.p-stats__panel-caption {
  max-width: 56ch;
  margin-bottom: var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-stats__chart-frame {
  max-width: 100%;
  overflow-x: auto;
}

/* The template gives each bar its height as a percentage and each threshold marker its position as
   a percentage of the bin count, so this element has to be both the fixed height those bars
   resolve against and the box the markers are positioned in. The bins fill its width evenly, which
   is what puts a marker at 6/13 on the boundary between the 125k and 150k bins. */
.p-stats__histogram {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.6ch;
  height: 210px;
  min-width: 28rem;
  padding-top: var(--space-sm);
  border-bottom: var(--bw) solid var(--line);
}

.p-stats__histogram-bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.4ch;
}

/* A bin holding one session out of thousands rounds to under a pixel, so the floor is what keeps a
   populated bin from reading as an empty one. */
.p-stats__histogram-column {
  width: 100%;
  min-height: 2px;
  background: var(--accent);
}

/* The template marks every bin from 200k up, the second threshold the markers name, so the tone
   changes at a boundary a reader can also read off the axis. */
.p-stats__histogram-column.is-over { background: var(--warn); }

.p-stats__histogram-label {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* The marker stops 1.4rem short of the bottom so its line runs the height of the bars and not
   through the row of bin labels under them. */
.p-stats__histogram-marker {
  position: absolute;
  top: 0;
  bottom: 1.4rem;
  border-left: var(--bw) dashed var(--warn);
}

.p-stats__histogram-marker span {
  position: absolute;
  top: -0.1rem;
  left: 0.6ch;
  padding-inline: 0.4ch;
  background: var(--surface-raised);
  color: var(--warn);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
}

.p-stats__histogram-marker--secondary {
  border-left-color: var(--text-muted);
}

.p-stats__histogram-marker--secondary span {
  color: var(--text-muted);
}

/* The 28rem floor is what makes the chart frame scroll on a phone, so it comes off and the bins
   share whatever width there is: the bars are flex:1 and shrink on their own, leaving only the
   gaps and the bin labels to be brought down to something legible at a thirteenth of the
   viewport. The tick labels scale with the viewport down to a floor that still sets "300+" inside
   its own column. */
@media (max-width: 40rem) {
  .p-stats__histogram {
    min-width: 0;
    gap: 0.25ch;
  }

  .p-stats__histogram-label {
    font-size: clamp(0.45rem, 1.9vw, 0.7rem);
  }

  .p-stats__histogram-marker span {
    font-size: 0.6rem;
  }
}

.p-stats__harness-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
  margin-bottom: var(--space-sm);
}

.p-stats__harness-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-bright);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}

.p-stats__harness-count {
  color: var(--text-dim);
  font-size: var(--text-xs);
}

.p-stats__harness-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--bw) solid var(--line);
}

.p-stats__harness-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.p-stats__harness-value {
  color: var(--text-bright);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.p-stats__harness-key {
  color: var(--text-dim);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.p-stats__bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.p-stats__bar-row {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr) 8ch;
  align-items: center;
  gap: 1ch;
}

.p-stats__bar-label {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-stats__bar-track {
  height: 0.7rem;
  min-width: 6rem;
  background: var(--surface-sunken);
  border: var(--bw) solid var(--line);
}

.p-stats__bar-track--stacked {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: auto;
  padding-block: 1px;
}

.p-stats__bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.p-stats__bar-fill--role {
  height: 0.5rem;
}

/* The flat bucket is a different population from the milestone-split ones rather than another bin
   of the same series, so it is toned apart from them. */
.p-stats__bar-fill.is-muted { background: var(--text-muted); }

.p-stats__bar-value {
  color: var(--text-bright);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.p-stats__bar-value small {
  margin-left: 0.5ch;
  color: var(--text-dim);
}

.p-stats__table-frame {
  max-width: 100%;
  overflow-x: auto;
}

.p-stats__data-table {
  min-width: 34rem;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.p-stats__data-table th {
  text-align: right;
}

.p-stats__data-table th:first-child,
.p-stats__data-table td:first-child {
  text-align: left;
}

.p-stats__data-table td {
  text-align: right;
}

.p-stats__data-table td:first-child {
  color: var(--text-muted);
}

.p-stats__data-table .is-median {
  color: var(--text-bright);
  font-weight: var(--fw-bold);
}

.p-stats__data-table .is-highlight {
  color: var(--accent);
}

/* The role bars are cells of the table's last column rather than a chart beside it, so a row's
   numbers and its shape read as one figure. */
.p-stats__chart-column {
  width: 34%;
  padding-left: 2ch;
}

.p-stats__data-table td.p-stats__chart-column {
  text-align: left;
}

.p-stats__data-table .is-good,
.p-stats__harness-value.is-good { color: var(--good); }

.p-stats__data-table .is-warn,
.p-stats__harness-value.is-warn { color: var(--warn); }

@media (max-width: 56rem) {
  .p-stats__section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .p-stats__section-rule { display: none; }
  .p-stats__bar-row { grid-template-columns: 11ch minmax(0, 1fr) 7ch; }

  /* The five per-harness figures keep their one row at every width and only get smaller: wrapped
     to two rows they would read as a grid with an orphan rather than as one line of numbers. */
  .p-stats__harness-value { font-size: var(--text-sm); }
  .p-stats__harness-key { font-size: 0.6rem; letter-spacing: normal; }
}

/* The data tables carry a 34rem floor that makes every frame scroll sideways on a phone. Rather
   than shrink the type until the figures are unreadable, the columns secondary to each table's
   point go: the per-role sample counts and median-peak bars, and the mean and p90 columns of the
   decomposition table, which the template marks for exactly this. What is left fits the viewport,
   so the floor comes off with them and the frames stop scrolling. */
@media (max-width: 40rem) {
  .p-stats__data-table {
    min-width: 0;
    font-size: var(--text-xs);
  }

  .p-stats__count-column,
  .p-stats__chart-column,
  .p-stats__data-table td.p-stats__chart-column { display: none; }

  /* The role name is the widest cell left, so it wraps rather than pushing the table back over
     the width the dropped columns just bought. */
  .p-stats__data-table td:first-child { overflow-wrap: anywhere; }

  /* The bar track's 6rem floor plus both gutters overruns a phone, so the track gives up its
     floor and the gutters tighten to what their text needs. */
  .p-stats__bar-row { grid-template-columns: 8ch minmax(0, 1fr) 5ch; gap: 0.6ch; }
  .p-stats__bar-track { min-width: 0; }
}