/* ============================================================================
 * fleet.css — fleet.html only.
 * ==========================================================================*/

.fleet__notice {
  max-width: 880px;
  margin-inline: auto;
  margin-block-end: var(--gap-lg);
}

.fleet__grid { align-items: stretch; }

/* ------------------------------------------------------------- fleet card */
.fleetcard { height: 100%; }

.fleet__media { position: relative; }

/* Unit number, so a dispatcher and a client can refer to the same truck. */
.fleetcard__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(11, 18, 25, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.fleetcard__type {
  color: var(--brand);
  font-weight: 700;
  font-size: .92rem;
  margin-block-end: 18px;
}

/* ------------------------------------------------------------------- specs */
.spec {
  margin: 0;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border);
  display: grid;
  gap: 10px;
}
.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.spec__key {
  font-size: .85rem;
  color: var(--text-faint);
  font-weight: 600;
  flex: none;
}
.spec__value {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  text-align: end;
}
/* Capacity and year are placeholders, so the pending marker sits on them; the
   dashed rule needs a little room under a right-aligned value. */
.spec__value.is-pending { text-underline-offset: 3px; }

/* ------------------------------------------------- expansion / sixth tile
 * Occupies the empty sixth cell of the 3-column grid rather than leaving a
 * hole, and doubles as the "we can add capacity" pitch.
 * ------------------------------------------------------------------------ */
.fleetcard--soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: var(--gap-md);
  border-radius: var(--r-lg);
  border: 2px dashed var(--border-strong);
  background: var(--surface-2);
}
.fleetcard--soon h3 { margin-block-end: 4px; font-size: 1.1rem; }
.fleetcard--soon p {
  color: var(--text-muted);
  font-size: .93rem;
  margin-block-end: 16px;
}
.fleetcard--soon .tile { margin-block-end: 12px; }