/* Fleet case study page. Geist only; Slate palette shared with the prototype. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #0F172A;
  --ink-2: #334155;
  --ink-3: #64748B;
  --ink-soft: #7B8BA1;   /* large text only (title's grey half): 3.5:1 */
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --paper: #FFFFFF;
  --panel: #F1F5F9;

  --font: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 680px; /* ~80 characters at 17px: the upper limit for comfortable reading */
  /* Split view: the panel hugs the phone. The phone's size is set by the viewport height (it fits
     with the 40px top/bottom gaps from js/case-study.js) and never grows past 1:1 (436 × 992 frame),
     so the panel is that width plus room for the shadow. Spare width goes to the outer margins. */
  --phone-w: min(436px, calc((100vh - 80px) * 0.4395));
  --phone-room: 24px; /* the frame shadow reaches ~16px sideways */
  --panel-w: calc(var(--phone-w) + var(--phone-room) * 2);
  --split-gap: clamp(24px, 4vw, 56px);
  --tabbar-h: 60px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' on, 'tnum' on;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Layout -------------------------------------------------------------- */
/* Small-viewport height, so the panel doesn't change width when tablet browser toolbars slide. */
@supports (height: 100svh) {
  :root { --phone-w: min(436px, calc((100svh - 80px) * 0.4395)); }
}
/* Text and phone travel as one centred group: | margin | text | gap | phone | margin |.
   The left margin carries the same --phone-room as the panel's right side, so the visible margins
   (window edge → text, phone → window edge) match. */
.layout {
  display: grid;
  grid-template-columns:
    minmax(max(0px, var(--gutter) - var(--phone-room)), 1fr) var(--phone-room)
    minmax(0, var(--measure)) var(--split-gap) var(--panel-w) minmax(max(0px, var(--gutter) - var(--phone-room)), 1fr);
}
.content { grid-column: 3; min-width: 0; }
.panel { grid-column: 5; }
.content__inner { max-width: var(--measure); margin: 0 auto; padding: 72px 0 120px; }

/* Prototype panel: pinned on the right, phone scaled to fit by the prototype itself. */
.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.panel__frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: transparent; }

/* Mobile/tablet-portrait tab bar (hidden on desktop) */
.tabbar { display: none; }

/* Header ---------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.masthead__name { color: var(--ink); font-weight: 600; }
/* Email / Portfolio / LinkedIn: round icon buttons, grey at rest, ink with a soft fill on hover */
.masthead__links { display: flex; align-items: center; gap: 4px; margin: -8px -8px -8px 0; }
.icon-link {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink-3);
  transition: background-color 160ms, color 160ms;
}
/* Hover only where there's a real hovering pointer (no sticky hover after a tap); taps flash .pressed (js). */
@media (hover: hover) { .icon-link:hover { background: var(--panel); color: var(--ink); } }
.icon-link.pressed { background: var(--line); color: var(--ink); }
.icon-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .icon-link { width: 40px; height: 40px; } } /* bigger tap targets on touch screens */

.hero { padding: 72px 0 56px; }
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 em { display: block; font-style: normal; color: var(--ink-soft); } /* the promise always starts on its own line, so the colour change and the comma line up */
.lede { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 48px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts div { padding: 16px 16px 16px 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 6px 0 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink); }

/* Sections -------------------------------------------------------------- */
.section { padding: 64px 0 0; scroll-margin-top: 24px; }
.section h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.section h3 { margin: 32px 0 8px; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.section p { margin: 0 0 16px; text-wrap: pretty; }
.section strong { color: var(--ink); font-weight: 600; }

.section .pull { /* .section scope so it also beats the default paragraph margins */
  margin: 36px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--ink);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pull cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.section h2 + .pull { margin-top: 24px; } /* problem statement right under its heading */

/* Turning point inside a section (e.g. broad role → this case study's focus): a slightly stronger
   divider (Slate 300) over ordinary body text, so the problem statement below stays the stronger moment. */
.section .pivot { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.hero__note { margin: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }

/* Callouts: findings, principles, rules. A quiet card: light tint, hairline border, and a sentence-case
   label in medium ink. The label names the callout, so no icon or colour code is needed. */
.section .note {
  margin: 28px 0;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #F8FAFC; /* Slate 50 */
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.note b { display: block; margin-bottom: 5px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }

/* Data tables. Wide tables scroll sideways; on phones they stack (see the 599px query + JS labels). */
.table { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.table thead th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: bottom;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.table td, .table tbody th {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.table tbody th { font-weight: 500; color: var(--ink); }
.table th:last-child, .table td:last-child { padding-right: 0; }
/* Fixed column widths: one set per table shape, so tables of the same shape line up and columns
   don't shift while the window resizes. Text wraps inside the columns; it never scales. */
.table table { table-layout: fixed; }
.table--cols3 thead th:nth-child(1) { width: 40%; }
.table--cols3 thead th:nth-child(n + 2) { width: 30%; }
.table--cols4 thead th:nth-child(1) { width: 22%; }
.table--cols4 thead th:nth-child(n + 2) { width: 26%; }
.table--cols5 thead th { width: 20%; }

/* Annotated alert card (anatomy diagram) ----------------------------------
   The panel holds only the card and numbered markers joined to each field by a dotted leader; the
   numbered legend sits below the panel. The diagram has a fixed design size and scales to fit:
   down on narrow screens (like an anatomy image would), up to 1.3× on wide ones; the legend stays at reading size. js/case-study.js
   places the markers and sets the scale. */
.annot { margin: 28px 0 24px; }
.annot__stage { padding: 32px 16px; border: 1px solid var(--line); border-radius: 12px; background: #F8FAFC; overflow: hidden; }
.annot__fit { position: relative; }
.annot__canvas { position: relative; width: max-content; margin: 0 auto; padding: 44px 0; transform-origin: top left; } /* room above and below for markers */
.annot__fit.is-scaled .annot__canvas { position: absolute; top: 0; left: 0; }
.annot__mark {
  position: absolute; z-index: 2;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  background: #F8FAFC; color: var(--ink);
  font-size: 12px; line-height: 22px; font-weight: 500; text-align: center;
}
.annot__lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.annot__lines line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; }
.annot__bracket { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; stroke-linejoin: round; } /* dotted, like the leaders */
/* Legend: each item a plain number, a semibold label, and its text underneath. */
.annot__notes { list-style: none; counter-reset: note; margin: 20px 0 0; padding: 0; }
.annot__notes li {
  counter-increment: note;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; row-gap: 2px;
  font-size: inherit; line-height: 1.5; /* body size: 17px, 16px on phones */
}
.annot__notes li + li { margin-top: 20px; } /* spacing, not dividers, like the page's other grouped lists */
.annot__notes li::before { content: counter(note); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.annot__notes b { font-weight: 600; color: var(--ink); }
.annot__notes span { grid-column: 2; color: var(--ink-2); }
/* Unnumbered rows (e.g. the alert-detail needs): the legend's look without numbers. */
.rows { list-style: none; margin: 20px 0 24px; padding: 0; }
.rows li { font-size: inherit; line-height: 1.5; } /* body size: 17px, 16px on phones */
.rows li + li { margin-top: 20px; }
.rows b { display: block; font-weight: 600; color: var(--ink); }
.rows span { display: block; margin-top: 2px; color: var(--ink-2); }
.annot figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* A plain card figure (no markers): just the panel and the fit-to-width scaling. */
.annot--plain .annot__canvas { padding: 0; }
/* Lifecycle: the same alert card in each state, stacked, with a hairline between them. */
.life { list-style: none; margin: 0; padding: 0; }
.life li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } /* slight divider between states */

/* The prototype's alert card, copied 1:1 (prototype/css/components.css → .card, .badge, .meta). */
.fx-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  width: var(--fx-w, 372px); padding: 12px; /* the card's real width in the app (412px screen − 2 × 20px gutter); narrower on phones, set by js */
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E2E8F0;
  font-feature-settings: normal;
}
.fx-card__head { display: flex; flex-direction: column; gap: 2px; }
.fx-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.fx-card__title { font-size: 14px; line-height: 18px; font-weight: 600; color: #1E293B; }
.fx-card__sub { align-self: flex-start; font-size: 14px; line-height: 18px; font-weight: 500; color: #64748B; }
.fx-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  color: #C2410C; background: #FFF7ED; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #C2410C 35%, transparent);
}
.fx-badge--critical { color: #B91C1C; background: #FEF2F2; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #B91C1C 35%, transparent); }
.fx-badge--neutral { color: #475569; background: #F8FAFC; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #475569 35%, transparent); } /* resolved: label kept, colour dropped */
.fx-dashed { height: 1px; background-image: linear-gradient(to right, #CBD5E1 7px, transparent 7px); background-size: 12px 1px; background-position: -0.5px 0; }
.fx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: #64748B; }
.fx-meta__item { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.fx-meta__item--success { color: #15803D; }
.fx-meta__sep { width: 1px; height: 12px; margin: 0 1px; border-radius: 10px; background: #64748B; }
.fx-i { display: block; flex: none; width: 16px; height: 16px; }

/* Definition rows: term on the left, answer on the right */


.ticks { list-style: none; margin: 20px 0; padding: 0; }
.ticks li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* Grouped lists: a short heading over each list (priority hypothesis, evaluation groups) */
.groups { margin: 16px 0 24px; }
.groups > div + div { margin-top: 20px; }
.section h4 { margin: 0 0 8px; font-size: inherit; /* same size as the list items (17px, 16px on phones) */ line-height: 1.4; font-weight: 600; color: var(--ink); }
.groups .ticks { margin: 0; }
.ticks strong, .pivot strong { font-weight: 500; } /* emphasis inside running text: medium + ink (bold is reserved for labels) */

.section > .goto { margin-top: 4px; }

/* Buttons that drive the prototype */
.goto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--panel);
  transition: background-color 160ms;
}
.goto::after { content: '→'; transition: transform 160ms var(--ease); }
@media (hover: hover) {
  .goto:hover { background: var(--line); }
  .goto:hover::after { transform: translateX(2px); }
}
.goto.pressed { background: var(--line-strong); }
.tabbar__tab.pressed:not([aria-selected="true"]) { background: var(--line); }
@media (hover: none) { .pressed { transition: none !important; } } /* on touch the press snaps on, it doesn't fade */
a.goto { text-decoration: none; }
/* Closing links: same pills, without the arrow */
.links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.goto--plain::after { content: none; }

.colophon {
  margin-top: 96px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-3);
}
.colophon a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* Tables stack into one block per row (each cell labelled with its column; labels set by JS) whenever the
   text column is too narrow for a comfortable table — phones, but also the split view beside the
   prototype on tablets and small laptops. Decided by the table's own width, not the screen's. */
.table { container-type: inline-size; }
@container (max-width: 559px) {
  .table[data-stacked] table { border-top: 1px solid var(--line-strong); }
  .table[data-stacked] thead { display: none; }
  .table[data-stacked] table, .table[data-stacked] tbody, .table[data-stacked] tr { display: block; }
  .table[data-stacked] tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table[data-stacked] td, .table[data-stacked] tbody th {
    display: grid;
    grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
    gap: 12px;
    padding: 3px 0;
    border: 0;
    width: auto;
  }
  .table[data-stacked] td::before { content: attr(data-label); font-size: 13px; line-height: 1.6; color: var(--ink-3); }
  /* The first cell names the row */
  .table[data-stacked] tr > :first-child { display: block; padding-bottom: 6px; font-weight: 600; color: var(--ink); }
  .table[data-stacked] tr > :first-child::before { content: none; }
}

/* Load-in ----------------------------------------------------------------- */
.reveal { animation: rise 700ms var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
}

/* Tablet landscape ---------------------------------------------------- */
@media (max-width: 1199px) {
  :root { --gutter: 40px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Below 1024px: tighter spacing, whichever layout is used */
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  .content__inner { padding-top: 40px; }
  .hero { padding-top: 48px; }
}

/* Tabs switch between the case study and the prototype: phones (any orientation), portrait tablets,
   and landscape screens too short for a split. Keep in sync with TABBED in js/case-study.js. */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 799px), (max-width: 1023px) and (max-height: 419px) {
  .layout { display: block; }
  .content { padding: 0 var(--gutter); }
  .section { scroll-margin-top: calc(var(--tabbar-h) + 24px); } /* in-page links land below the pinned tab bar */

  .tabbar {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--tabbar-h);
    padding: 10px var(--gutter);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .tabbar__track {
    display: flex;
    width: 100%;
    max-width: 360px;
    padding: 3px;
    border-radius: 999px;
    background: var(--panel);
  }
  .tabbar__tab {
    flex: 1;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
  }
  /* Raised white tab (OS-style segmented control), deliberately unlike the app's dark-filled toggle so
     the site's control never reads as part of the prototype. */
  .tabbar__tab[aria-selected="true"] {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.06), 0 0 0 0.5px rgba(15, 23, 42, 0.06);
  }

  /* The prototype sits over the page below the tab bar; the page keeps its scroll position. */
  .panel {
    position: fixed;
    top: var(--tabbar-h);
    left: 0;
    right: 0;
    bottom: 0; /* the white panel always covers the page, even when browser toolbars hide */
    height: auto;
    z-index: 10;
  }
  /* The frame fills the panel, so the phone grows when the browser toolbars hide. The prototype's
     bottom gap includes the device's safe area, which keeps it clear of the gesture bar. */
  /* Hidden but still laid out, so the prototype keeps its size and is ready the moment it's shown. */
  .panel.is-hidden { visibility: hidden; pointer-events: none; }
  html.is-proto { overflow: hidden; }
}

@media (max-width: 599px) {
  body { font-size: 16px; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .annot__stage { padding: 20px 8px; } /* more width for the diagram, so it scales down less */
}

/* Very small phones (e.g. 320px): keep "Fleet operations," on one line */
@media (max-width: 359px) {
  .hero h1 { font-size: 34px; }
}