/* Fleet compute. Static, no motion: nothing on this page changes state. */

.fleet {
  max-width: 54rem;
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) var(--s-8);
  min-width: 0;
}

.fleet__header { margin-bottom: var(--s-7); }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}

.fleet h1 {
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 18ch;
  margin-bottom: var(--s-3);
}

.fleet__lead,
.fleet__scope {
  text-wrap: pretty;
  font-size: var(--t-15);
  color: var(--text-2);
  line-height: 1.55;
  max-width: var(--measure);
}

.fleet__scope { margin-top: var(--s-3); font-size: var(--t-13); }

.section__label {
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-2);
}

.fleet-block { margin-bottom: var(--s-8); }

.fleet-block h2 {
  font-size: var(--t-24);
  margin-bottom: var(--s-3);
  max-width: 28ch;
  text-wrap: balance;
}

.fleet-block p {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.6;
  max-width: var(--measure);
}

.fleet-facts {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.fleet-fact { padding: var(--s-5); }

.fleet-fact h3 {
  font-size: var(--t-18);
  margin-bottom: var(--s-2);
}

.fleet-fact p { margin: 0; }

.fleet-fact__cmd {
  margin-top: var(--s-3) !important;
  font-size: var(--t-13);
}

.fleet-fact__cmd a {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fleet-block--closed {
  padding: var(--s-5);
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.fleet-closed {
  margin: var(--s-4) 0 0;
  padding: 0 0 0 var(--s-5);
  display: grid;
  gap: var(--s-3);
}

.fleet-closed li {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.55;
}

@media (min-width: 48rem) {
  .fleet-facts { grid-template-columns: 1fr; }
}

/* Measured scaling: one committed record, four figures, and the label that says what
   they were measured on. The state attribute drives the only visual difference:
   `loading` dims the figures so an un-painted page does not read as a zero. */
.fleet-scaling__lead {
  font-size: var(--t-15);
  color: var(--text-2);
  line-height: 1.55;
  max-width: var(--measure);
  margin-bottom: var(--s-5);
}

.fleet-scaling__figures {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.fleet-scaling__figure {
  padding: var(--s-4) var(--s-5);
  min-width: 0;
}

.fleet-scaling__term {
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s-2);
}

.fleet-scaling__value {
  font-size: var(--t-24);
  line-height: 1.1;
  color: var(--text-1);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fleet-scaling__unit { font-size: var(--t-15); color: var(--text-2); }

.fleet-scaling__spread {
  font-size: var(--t-12);
  color: var(--text-3);
  margin: var(--s-2) 0 0;
  font-variant-numeric: tabular-nums;
}

.fleet-scaling__label {
  margin: var(--s-4) 0 0;
  font-size: var(--t-13);
  color: var(--text-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--info);
}

.fleet-scaling__source {
  margin-top: var(--s-3) !important;
  font-size: var(--t-12);
  color: var(--text-3);
}

.fleet-scaling[data-scaling-state="loading"] .fleet-scaling__value,
.fleet-scaling[data-scaling-state="unread"] .fleet-scaling__value { color: var(--text-3); }

.fleet-scaling[data-scaling-state="unread"] .fleet-scaling__label { border-left-color: var(--warn); }

/* Rent: the price model, its quote and the donor split, all from one record. Same
   three-figure top row as the scaling section, plus two lists whose rows are built
   by fleet-rent.js (the markup holds no numbers). */
.fleet-rent__lead {
  font-size: var(--t-15);
  color: var(--text-2);
  line-height: 1.55;
  max-width: var(--measure);
  margin-bottom: var(--s-5);
}

.fleet-rent__figures {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: var(--s-6);
}

.fleet-rent__figure { padding: var(--s-4) var(--s-5); min-width: 0; }

.fleet-rent__term {
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s-2);
}

.fleet-rent__value {
  font-size: var(--t-24);
  line-height: 1.1;
  color: var(--text-1);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fleet-rent__unit { font-size: var(--t-15); color: var(--text-2); }

.fleet-rent__note {
  font-size: var(--t-12);
  color: var(--text-3);
  margin: var(--s-2) 0 0;
  font-variant-numeric: tabular-nums;
}

.fleet-rent h3 {
  font-size: var(--t-17);
  color: var(--text-1);
  margin: var(--s-6) 0 var(--s-2);
}

.fleet-rent__quote {
  font-size: var(--t-15);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  margin: var(--s-3) 0 var(--s-5);
}

.fleet-rent__donors {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.fleet-rent__donors li {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) repeat(3, minmax(5rem, 1fr));
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-13);
  color: var(--text-2);
}

.fleet-rent__label {
  margin: var(--s-4) 0 0;
  font-size: var(--t-13);
  color: var(--text-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--info);
}

.fleet-rent__source {
  margin-top: var(--s-3) !important;
  font-size: var(--t-12);
  color: var(--text-3);
}

.fleet-rent[data-rent-state="loading"] .fleet-rent__value,
.fleet-rent[data-rent-state="unread"] .fleet-rent__value { color: var(--text-3); }

.fleet-rent[data-rent-state="unread"] .fleet-rent__label,
.fleet-rent[data-rent-state="no_saving"] .fleet-rent__label { border-left-color: var(--warn); }

/* Core-hour rate table (fleet-rates section). Same numeric styling as the rent
 * section: tabular figures, muted secondary text, hairline row separators. The
 * rate column is the decision, so it leads the proportional columns after the
 * fixed-width machine name; the source column takes the remaining width. */
.fleet-rates__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: var(--s-4) 0 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
}

.fleet-rates__table th:first-child { width: 4rem; }
.fleet-rates__table th:nth-child(2) { width: 29%; }
.fleet-rates__table th:nth-child(3) { width: 28%; }

.fleet-rates__table th,
.fleet-rates__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-2);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.fleet-rates__table thead th {
  color: var(--text-3);
  font-size: var(--t-12);
  white-space: nowrap;
}

.fleet-rates__table tbody th {
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

.fleet-rates__table td:nth-child(3) {
  white-space: nowrap;
  color: var(--text-1);
}

.fleet-rates__table td:nth-child(3) .fleet-rates__unit,
.fleet-rates__table td:nth-child(3) .unit { color: var(--text-3); }

.fleet-rates__tariff {
  margin: var(--s-3) 0 0;
  font-size: var(--t-13);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.fleet-rates__label {
  margin: var(--s-4) 0 0;
  font-size: var(--t-13);
  color: var(--text-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--info);
}

.fleet-rates[data-rates-state="unread"] .fleet-rates__label { border-left-color: var(--warn); }

.fleet-rates__source {
  margin-top: var(--s-3) !important;
  font-size: var(--t-12);
  color: var(--text-3);
}

/* Narrow screens: one row per machine, the column headings become row labels.
   The rate cell keeps its value/unit spans, so the number never wraps mid-value. */
@media (max-width: 40rem) {
  .fleet-rates__table,
  .fleet-rates__table tbody { display: block; }
  .fleet-rates__table thead { display: none; }
  .fleet-rates__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--hairline);
  }
  .fleet-rates__table th,
  .fleet-rates__table td { display: block; width: auto; padding: 0; border-bottom: 0; }
  .fleet-rates__table td:nth-child(3) { white-space: normal; }
  .fleet-rates__table [data-rates-field="basis"]::before,
  .fleet-rates__table [data-rates-field="rate"]::before,
  .fleet-rates__table [data-rates-field="source"]::before {
    display: block;
    margin-bottom: var(--s-1);
    color: var(--text-3);
    font-size: var(--t-12);
  }
  .fleet-rates__table [data-rates-field="basis"]::before { content: "Basis"; }
  .fleet-rates__table [data-rates-field="rate"]::before { content: "Rate per core-hour"; }
  .fleet-rates__table [data-rates-field="source"]::before { content: "Source"; }
}

/* Borrowed-run timeline: one row per unit of ONE recorded campaign row. The bar length is
   the unit's own measured seconds, quantised to 5% steps by data-w so the drawn width is
   a static rule rather than an inline style the page's CSP could refuse. WHERE it ran is
   a solid (this machine) or hatched (donor) fill AND a written tag; the verdict and the
   cross-check state are written tags too, so nothing here is carried by colour alone. */
.fleet-timeline__lead {
  font-size: var(--t-15);
  color: var(--text-2);
  line-height: 1.55;
  max-width: var(--measure);
  margin-bottom: var(--s-5);
}

.fleet-timeline__figures {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: var(--s-4);
}

.fleet-timeline__figure { padding: var(--s-4) var(--s-5); min-width: 0; }

.fleet-timeline__term {
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s-2);
}

.fleet-timeline__value {
  font-size: var(--t-24);
  line-height: 1.1;
  color: var(--text-1);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fleet-timeline__unit { font-size: var(--t-15); color: var(--text-2); }

.fleet-timeline__note {
  font-size: var(--t-12);
  color: var(--text-3);
  margin: var(--s-2) 0 0;
  font-variant-numeric: tabular-nums;
}

.fleet-timeline__crossnote {
  font-size: var(--t-13);
  color: var(--text-2);
  line-height: 1.55;
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--info);
}

.fleet-timeline__refusal {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.fleet-timeline__refusal-label {
  margin: 0 0 var(--s-2) !important;
  font-size: var(--t-13);
  color: var(--text-1);
}

.fleet-timeline__refused {
  margin: 0;
  padding-left: var(--s-5);
  display: grid;
  gap: var(--s-1);
}

.fleet-timeline__refused li {
  font-size: var(--t-12);
  color: var(--text-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fleet-timeline__agreement {
  margin: 0 0 var(--s-4) !important;
  font-size: var(--t-13);
  color: var(--text-2);
}

.fleet-timeline__key {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-12);
  color: var(--text-2);
}

.fleet-timeline__key li { display: flex; align-items: center; gap: var(--s-2); }

.fleet-timeline__swatch {
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 2px;
  border: 1px solid var(--hairline-strong);
}

.fleet-timeline__swatch--here { background: var(--surface-3); }

.fleet-timeline__swatch--donor {
  border-color: var(--info-line);
  background: repeating-linear-gradient(135deg, var(--info) 0 3px, transparent 3px 6px);
}

.fleet-timeline__swatch--fail {
  background: var(--tint-fail);
  border-color: var(--fail-line);
}

.fleet-timeline__swatch--cross {
  background: transparent;
  border-color: var(--warn-line);
  border-style: dashed;
}

.fleet-timeline__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.fleet-timeline__item { border-bottom: 1px solid var(--hairline); }

.fleet-timeline__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 4.2rem auto auto auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  width: 100%;
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fleet-timeline__row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.fleet-timeline__unit {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-12);
  color: var(--text-1);
}

.fleet-timeline__track {
  display: block;
  height: 0.5rem;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}

.fleet-timeline__bar {
  display: block;
  height: 100%;
  background: var(--surface-3);
}

.fleet-timeline__bar--donor {
  background: repeating-linear-gradient(135deg, var(--info) 0 4px, transparent 4px 8px);
}

.fleet-timeline__row[data-verdict="fail"] .fleet-timeline__bar {
  outline: 2px solid var(--fail);
  outline-offset: -2px;
}

.fleet-timeline__row[data-cross="not_recorded"] .fleet-timeline__bar {
  border-right: 2px dashed var(--warn);
}

.fleet-timeline__secs {
  font-size: var(--t-12);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fleet-timeline__tag {
  display: inline-block;
  padding: 0.1rem var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  font-size: var(--t-11);
  line-height: 1.4;
  color: var(--text-2);
  white-space: nowrap;
}

.fleet-timeline__tag--where { color: var(--text-2); }

.fleet-timeline__row[data-ran-on="donor"] .fleet-timeline__tag--where {
  color: var(--info);
  border-color: var(--info-line);
}

.fleet-timeline__tag--verdict { color: var(--text-2); }

.fleet-timeline__row[data-verdict="pass"] .fleet-timeline__tag--verdict {
  color: var(--pass);
  border-color: var(--pass-line);
}

.fleet-timeline__row[data-verdict="fail"] .fleet-timeline__tag--verdict {
  color: var(--fail);
  border-color: var(--fail-line);
}

.fleet-timeline__tag--cross { color: var(--text-3); }

.fleet-timeline__row[data-cross="not_recorded"] .fleet-timeline__tag--cross {
  color: var(--warn);
  border-color: var(--warn-line);
}

.fleet-timeline__row[data-cross="disagreed"] .fleet-timeline__tag--cross {
  color: var(--fail);
  border-color: var(--fail-line);
}

.fleet-timeline__detail {
  padding: 0 0 var(--s-3);
  max-width: var(--measure);
}

.fleet-timeline__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-2);
  font-size: var(--t-12);
}

.fleet-timeline__fact-term { color: var(--text-3); }

.fleet-timeline__fact-value {
  margin: 0;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fleet-timeline__detail-copy {
  margin: 0 !important;
  font-size: var(--t-12);
  color: var(--text-2);
  line-height: 1.55;
}

.fleet-timeline__label {
  margin: var(--s-4) 0 0;
  font-size: var(--t-13);
  color: var(--text-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--info);
}

.fleet-timeline__source {
  margin-top: var(--s-3) !important;
  font-size: var(--t-12);
  color: var(--text-3);
}

.fleet-timeline__source a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }

.fleet-timeline[data-timeline-state="loading"] .fleet-timeline__value,
.fleet-timeline[data-timeline-state="unread"] .fleet-timeline__value { color: var(--text-3); }

.fleet-timeline[data-timeline-state="unread"] .fleet-timeline__label { border-left-color: var(--warn); }

/* Bar length: twenty static 5% steps. A static rule, not an inline style, so the page's
   CSP cannot refuse it and a browser with scripting blocked shows an empty chart rather
   than a misleading full one. */
.fleet-timeline__bar[data-w="0"] { width: 0; }
.fleet-timeline__bar[data-w="1"] { width: 5%; }
.fleet-timeline__bar[data-w="2"] { width: 10%; }
.fleet-timeline__bar[data-w="3"] { width: 15%; }
.fleet-timeline__bar[data-w="4"] { width: 20%; }
.fleet-timeline__bar[data-w="5"] { width: 25%; }
.fleet-timeline__bar[data-w="6"] { width: 30%; }
.fleet-timeline__bar[data-w="7"] { width: 35%; }
.fleet-timeline__bar[data-w="8"] { width: 40%; }
.fleet-timeline__bar[data-w="9"] { width: 45%; }
.fleet-timeline__bar[data-w="10"] { width: 50%; }
.fleet-timeline__bar[data-w="11"] { width: 55%; }
.fleet-timeline__bar[data-w="12"] { width: 60%; }
.fleet-timeline__bar[data-w="13"] { width: 65%; }
.fleet-timeline__bar[data-w="14"] { width: 70%; }
.fleet-timeline__bar[data-w="15"] { width: 75%; }
.fleet-timeline__bar[data-w="16"] { width: 80%; }
.fleet-timeline__bar[data-w="17"] { width: 85%; }
.fleet-timeline__bar[data-w="18"] { width: 90%; }
.fleet-timeline__bar[data-w="19"] { width: 95%; }
.fleet-timeline__bar[data-w="20"] { width: 100%; }

@media (max-width: 46rem) {
  .fleet-timeline__row { display: flex; flex-wrap: wrap; align-items: center; }
  .fleet-timeline__unit { flex: 1 1 100%; }
  .fleet-timeline__track { flex: 1 1 55%; }
  .fleet-timeline__secs { flex: 0 0 auto; text-align: left; }
  .fleet-timeline__tag { flex: 0 0 auto; }
}