/* 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); }