/* Fleet design demo page. Site tokens only; figure colours are scoped to .fd. */
h1.fd-title {
  margin: 0 0 var(--space-xl);
  font-size: var(--step-6);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
  color: var(--ink);
  text-wrap: balance;
}
p.fd-lede { margin: 0 0 var(--space-md); font-size: var(--step-2); line-height: var(--line-normal); color: var(--muted); }
p.fd-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0 0 var(--space-xl); font-size: var(--step--1); color: var(--body-muted); }
p.fd-meta sup { margin-right: 0.25em; font-size: inherit; vertical-align: baseline; }
.fd-links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--fc-l); }

.fd-figure { margin: var(--fc-m) 0; }
.fd-figure img { display: block; width: 100%; height: auto; }
.fd-video { max-width: 75%; }
.fd-video video { display: block; width: 100%; height: auto; background: var(--ink); }
.fd-figure figcaption, .fd-caption { margin-top: var(--space-sm); font-size: var(--step--1); color: var(--muted); }
.fd-findings ul { margin: 0 0 var(--fc-m); padding: var(--space-xl); background: var(--surface); list-style: none; }
.fd-findings li + li { margin-top: var(--space-md); }

.fd {
  /* One palette for grid, map and charts: Imperial Blue mixed over paper, dark to light */
  --b1: #00005C; --b2: #0000CD; --b3: #6262E3; --b4: #A5A5EF; --b5: #DCDCFA;
  --road: #E4E6EA;
  margin-top: var(--fc-m);
}
.fd h3 { margin: 0 0 var(--space-md); }
.fd [data-out="comparison"] { margin-top: var(--space-lg); max-width: 72ch; }
.fd-block { margin-top: var(--fc-l); padding-top: var(--space-lg); border-top: 1px solid var(--hairline); }

.fd-control { display: grid; grid-template-columns: 14em 1fr; align-items: baseline; gap: 0 var(--space-xl); border-bottom: 1px solid var(--hairline-2); }
.fd-label { font-size: var(--step--1); font-weight: var(--weight-semibold); color: var(--ink); }
.fd-choices { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); }
.fd-choice {
  appearance: none; margin: 0; padding: var(--space-sm) 0; border: 0; background: none; cursor: pointer;
  font-size: var(--step-0); font-weight: var(--weight-medium); line-height: var(--line-normal); color: var(--imperial);
  text-decoration: underline transparent; text-decoration-thickness: 3px; text-underline-offset: 6px;
  transition: text-decoration-color var(--transition), color var(--transition);
}
.fd-choice:hover { text-decoration-color: var(--imperial); }
.fd-choice[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--imperial); }
.fd-hint { margin: var(--space-md) 0 0; font-size: var(--step--1); color: var(--muted); }
.fd-status { color: var(--muted); }

.fd-grid-wrap { overflow-x: auto; margin-top: var(--space-md); }
.fd-grid { border-collapse: separate; border-spacing: 6px; font-variant-numeric: tabular-nums; }
.fd-grid th { padding: var(--space-xs) var(--space-sm); font-size: var(--step--1); font-weight: var(--weight-medium); color: var(--muted); text-align: center; }
.fd-grid th[scope="row"] { text-align: right; white-space: nowrap; }
.fd-grid td { padding: 0; }
.fd-cell {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; min-width: 7.5em; min-height: 3.2em; padding: var(--space-sm);
  border: 0; outline-offset: 1px; cursor: pointer;
  font-size: var(--step--1); line-height: var(--line-snug); color: var(--ink);
}
.fd-cell.fd-dark { color: var(--paper); }
.fd-cell.fd-lowest { font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.fd-cell.fd-infeasible { background: var(--surface); color: var(--muted); }
.fd-cell:hover { outline: 2px solid var(--ink); }
.fd-cell[aria-pressed="true"] { outline: 3px solid var(--ink); }
.fd-cell-class { font-weight: var(--weight-semibold); }
.fd-narrow { display: none; }
.fd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.fd-summary { width: 100%; max-width: 820px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fd-summary th, .fd-summary td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--hairline-2); text-align: left; vertical-align: top; }
.fd-summary thead th { font-weight: var(--weight-semibold); border-bottom: 2px solid var(--ink); }
.fd-summary tbody th { font-weight: var(--weight-regular); color: var(--body-muted); }

.fd-map svg, .fd-bars { display: block; width: 100%; height: auto; }
.fd-map svg { max-width: 880px; background: var(--paper); }
.fd-flow-toggle { margin-bottom: var(--space-sm); }
.fd-key { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); margin-top: var(--space-md); font-size: var(--step--1); }
.fd-k-title { font-weight: var(--weight-semibold); color: var(--ink); }
.fd-k-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); color: var(--muted); }
.fd-k-item { display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; }
.fd-k-item svg { flex: none; width: 18px; height: 18px; }
.fd-k-item svg.fd-k-lane { width: 26px; height: 14px; }
.fd-sw { display: inline-block; width: 14px; height: 14px; flex: none; }
.fd-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-sm) 0 var(--space-md); font-size: var(--step--1); color: var(--muted); }
.fd-legend span { display: inline-flex; align-items: center; gap: var(--space-sm); }
.fd-bars { max-width: 880px; }

.fd-tip {
  position: fixed; z-index: 20; max-width: 300px; padding: var(--space-sm) var(--space-md);
  background: var(--paper); border: 2px solid var(--imperial);
  font-size: var(--step--1); line-height: var(--line-snug); color: var(--ink); pointer-events: none;
}

.fd-disclosure { margin: var(--fc-m) 0; }
.fd-disclosure > summary {
  width: fit-content; cursor: pointer; font-weight: var(--weight-medium); color: var(--imperial);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition);
}
.fd-disclosure > summary:hover { text-decoration-thickness: 3px; }
.fd-disclosure-body { margin-top: var(--space-lg); }
.fd-nomenclature { width: 100%; max-width: 820px; margin-top: var(--fc-m); border-collapse: collapse; }
.fd-nomenclature caption { text-align: left; font-weight: var(--weight-semibold); padding-bottom: var(--space-sm); }
.fd-nomenclature th, .fd-nomenclature td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--hairline-2); text-align: left; vertical-align: top; }
.fd-nomenclature thead th { font-weight: var(--weight-semibold); border-bottom: 2px solid var(--ink); }
.fd-nomenclature th[scope="colgroup"] { padding-top: var(--space-lg); font-weight: var(--weight-semibold); color: var(--body-muted); }
.fd-nomenclature td:first-child { white-space: nowrap; }
/* Formulation: maths is set in STIX Two Math (approved exception to the one-typeface rule).
   A locally installed copy is used first; otherwise the full font loads from jsDelivr. */
@font-face {
  font-family: "STIX Two Math";
  font-display: swap;
  src: local("STIX Two Math"), local("STIXTwoMath-Regular"),
       url("https://cdn.jsdelivr.net/npm/@fontsource/stix-two-math@5.3.0/files/stix-two-math-latin-400-normal.woff2") format("woff2");
}
math { font-family: "STIX Two Math", "Cambria Math", math; }
math[display="block"] { display: block; margin: var(--fc-m) 0; padding-left: var(--space-xl); overflow-x: auto; overflow-y: hidden; font-size: 1.15em; }
math[display="block"] + math[display="block"] { margin-top: var(--fc-l); }

.fd-bibtex { position: relative; }
.fd-bibtex pre { margin: 0; padding: var(--space-xl); overflow-x: auto; background: var(--surface); font-family: var(--mono); font-size: var(--step--1); }
.fd-copy { position: absolute; top: var(--space-sm); right: var(--space-sm); }

@media (max-width: 767px) {
  math[display="block"] { padding-left: 0; font-size: 1em; }
  .fd-video { max-width: none; }
  .fd-control { grid-template-columns: 1fr; padding-top: var(--space-sm); }
  .fd-grid { width: 100%; border-spacing: 3px; }
  .fd-grid th { padding: var(--space-xs) 2px; }
  .fd-cell { min-width: 0; padding: var(--space-xs) 2px; }
  .fd-cell .fd-wide { display: none; }
  .fd-cell .fd-narrow { display: inline; }
}