/* Fleet case study (work-fleet.html).

   Fleet was a React app with its own stylesheet, made to look like the site
   by fleet-system.css/js and always drifting from it. On 2026-10-30 it was
   rebuilt as a plain page on Clario's classes (body.asset-clearance-case
   .clario-case-v2), so the bars, top, section heads, cards and bottom line
   are the same rules on both pages. This file holds only Fleet's red and
   the three blocks Clario doesn't have: the listing comparison, the "Try it"
   journeys with the live phone, and the four-across rows. */

/* Fleet's red, in the same slots Clario fills with its blue
   (site-system.css for the bar and accent, styles.css for <main>). */
.fleet-case { --case-accent: #e23744; --case-accent-readable: #b51d2c; --case-bar-colour: #b51f30; --cl-blue: #e23744; }
:root.theme-dark .fleet-case { --case-accent-readable: #e23744; }  /* the quote bar's red, 4.5:1 on night (2026-11-10) */
.fleet-case main { --accent: #b51f30; --accent-soft: #fbe3e5; --accent-text: #b51d2c; }
:root.theme-dark .fleet-case main { --accent: #e23744; --accent-soft: #22161a; --accent-text: #e23744; }

/* Four-across rows: the four changes and the four pilot checks. */
.fleet-case .fl-four { margin-top: var(--space-4); }
@media (min-width: 901px) {
  .fleet-case .clario-catch-list.fl-four,
  .fleet-case .clario-verdicts.fl-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fleet-case .fl-four > li { grid-column: span 1; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .fleet-case .clario-catch-list.fl-four,
  .fleet-case .clario-verdicts.fl-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fleet-case .fl-num { font: 400 var(--type-label)/1.6 var(--font-mono); letter-spacing: .08em; color: var(--accent-text); }

/* The listing today against a Fleet stop: two verdict-style cards. */
.fleet-case .fl-compare { margin-top: var(--space-7); }
.fl-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.fl-card strong { font: 600 var(--type-card-title)/1.15 var(--font-display); letter-spacing: -.01em; }
.fl-flag { margin-top: var(--space-2); font: 400 var(--type-label)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.fl-flag--warn { color: var(--stop); }
.fl-flag--ok { color: var(--ok); }

/* Try it: the journey on the left, the prototype or storyboard on the right. */
.fl-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.fl-journey { display: flex; flex-direction: column; gap: var(--space-5); }
.fl-tabs, .fl-states { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fl-tabs button, .fl-states button {
  height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; box-shadow: inset 0 0 0 1px var(--rule);
  font: 500 13px/1 var(--font-sans); color: var(--ink-70); cursor: pointer;
  transition: background-color var(--dur-fast, 180ms) var(--ease, ease-out), color var(--dur-fast, 180ms) var(--ease, ease-out);
}
.fl-tabs button:hover, .fl-states button:hover { color: var(--ink); }
.fl-tabs button[aria-selected="true"], .fl-states button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.fl-journey-copy .label { margin: 0 0 var(--space-3); }
.fl-journey-copy .h2 { margin: 0 0 var(--space-5); font-size: var(--type-section-title); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.fl-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.fl-steps li { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--rule); color: var(--ink-70); }
.fl-steps li::before { counter-increment: step; content: "0" counter(step); font: 400 var(--type-label)/1.6 var(--font-mono); letter-spacing: .08em; color: var(--accent-text); }
.fl-status {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5); border: 1px solid var(--rule); border-left: 2px solid var(--ok); border-radius: var(--radius-sm);
}
.fl-status[data-state="delay"] { border-left-color: var(--accent); }
.fl-status[data-state="soldout"] { border-left-color: var(--stop); }
.fl-status .label { margin-top: var(--space-2); color: var(--accent-text); }

/* The live prototype, cropped to its phone by fleet-case.js. The frame keeps
   the app's light scheme: a frame whose colour scheme differs from the page
   gets an opaque white backdrop at night. */
.fl-phone { justify-self: center; width: min(470px, 100%); margin: 0; }
.fl-phone-device { position: relative; overflow: hidden; width: 100%; aspect-ratio: 520 / 1000; margin-inline: auto; }
.fl-phone-device iframe {
  position: absolute; top: 0; left: 0; display: block; width: 520px; height: 1000px;
  border: 0; background: transparent; color-scheme: normal; transform-origin: top left;
}
.fl-phone figcaption { margin-top: var(--space-3); text-align: center; }
.fl-phone figcaption a { border-bottom: 1px solid currentColor; }

/* The recommendation that closes the business section. */
.fl-call {
  max-width: 60ch; margin: var(--space-7) 0 0; padding-left: var(--space-5);
  border-left: 2px solid var(--accent); font: 400 var(--type-lead)/1.5 var(--font-sans); color: var(--ink);
}

@media (max-width: 900px) {
  .fl-try { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .fl-phone { width: min(360px, 100%); }
}
@media (max-width: 640px) {
  .fleet-case .clario-catch-list.fl-four,
  .fleet-case .clario-verdicts.fl-four { grid-template-columns: minmax(0, 1fr); }
}