/* Weight and balance pages (/wb/<tail>/, website/wb.py): the app's W&B screen on the web. Colours
   are the app's Day palette (ZuluTheme.swift); the chart card is the app's Liquid Glass, floating
   over the sliders on a phone. */
.wb {
  --wb-line: #DCE1EE; --wb-done: #3DDC84; --wb-done-ink: #062A14; --wb-env: 16, 149, 63; --wb-tint: #E3E8FC;
  --wb-glass: rgba(255, 255, 255, 0.72); --wb-radius: 14px;
  background: var(--ground);
}
.wb-top { background: var(--navy); }
/* The calculator is an app: only its controls take a touch or a selection, not its text. Fields stay editable. */
.wb, .wb-top { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.wb input, .wb textarea, .wb select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.wb svg text { pointer-events: none; }
.wb .mono, .wb-ix .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Hero: the cover photo, the tail and its type */
.wb-cover { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 10%, #1D2A5C 0%, var(--navy) 60%); color: #FFF; isolation: isolate; }
.wb-cover-bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(30px) saturate(1.25) brightness(0.5); transform: scale(1.1); opacity: 0; transition: opacity 0.9s ease; }
.wb-cover.has-photo .wb-cover-bg { opacity: 1; }
.wb-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,19,48,0.15), rgba(10,19,48,0.55)); }
.wb-hero-in { max-width: 1280px; margin: 0 auto; padding: 36px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 32px; align-items: center; }
.wb-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: #C9D2FF; margin-bottom: 18px; }
.wb-crumbs a { color: #C9D2FF; text-decoration: none; }
.wb-crumbs a:hover { color: #FFF; text-decoration: underline; }
.wb-crumbs [aria-current] { color: #FFF; }
.wb h1 { margin: 0; line-height: 0.95; }
.wb-reg { display: block; font-size: clamp(48px, 8vw, 88px); font-weight: 800; letter-spacing: -0.02em; }
.wb-h1-rest { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: clamp(18px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: 0.02em; color: var(--wb-done); }
.wb-sub { margin: 14px 0 0; font-size: 17px; font-weight: 600; color: #E6EAFF; }
.wb-stats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wb-stats li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.12); }
.wb-stats span { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #C9D2FF; }
.wb-stats b { font-size: 15px; }
.wb-figure { margin: 0; }
.wb-photo { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.35); color: inherit; text-decoration: none; }
.wb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: wb-in 0.6s ease both; }
.wb-photo-none { font-size: 42px; font-weight: 800; color: rgba(255,255,255,0.14); letter-spacing: 0.04em; }
.wb-figure figcaption { min-height: 18px; margin-top: 8px; font-size: 12px; color: #C9D2FF; text-align: end; }
.wb-figure figcaption a { color: #FFF; }
@keyframes wb-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* Layout: a rail for the plane's functions (weight & balance for now), then the calculator */
.wb-layout { max-width: 1280px; margin: 0 auto; padding: 24px 24px 56px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.wb-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.wb-rail-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; border-radius: var(--wb-radius); background: var(--surface); }
.wb-rail-photo { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 10px; background: var(--navy) center / cover; }
.wb-rail-card b { font-size: 15px; }
.wb-rail-card span:last-child { font-size: 12px; color: var(--label); font-weight: 600; }
.wb-rail ul { list-style: none; margin: 0; padding: 0; }
.wb-rail a, .wb-rail-report { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; text-align: start; }
.wb-rail a[aria-current] { background: var(--wb-tint); color: var(--signal); }
.wb-rail a svg { color: var(--signal); }
.wb-rail-report { color: var(--label); font-size: 14px; }
.wb-rail-report:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 1180px) {
  .wb-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  .wb-rail { position: static; flex-direction: row; align-items: center; overflow-x: auto; scrollbar-width: none; }
  .wb-rail::-webkit-scrollbar { display: none; }
  .wb-rail-card { display: none; }
  .wb-rail ul { display: flex; }
  .wb-rail a, .wb-rail-report { width: auto; white-space: nowrap; padding: 9px 14px; }
  .wb-rail-report { margin-inline-start: auto; }
}

/* Title bar and options */
.wb-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wb-bar-h { margin: 0 auto 0 0; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 22px; text-transform: uppercase; }
.wb-actions { display: flex; gap: 8px; align-items: center; }
.wb-act { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--wb-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.wb-act::-webkit-details-marker { display: none; }
.wb-act:hover { border-color: var(--line-strong); }
.wb-act svg { color: var(--signal); flex: none; }
.wb-act.done { border-color: var(--wb-done); }
.wb-menu { position: relative; }
.wb-menu[open] > .wb-act { background: var(--wb-tint); border-color: var(--signal); }
.wb-menu-panel { position: absolute; z-index: 30; inset-inline-end: 0; top: calc(100% + 8px); width: 300px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 20px 50px rgba(10,19,48,0.2); display: flex; flex-direction: column; gap: 12px; animation: wb-pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: top right; }
@keyframes wb-pop { from { opacity: 0; transform: scale(0.94) translateY(-6px); } }
.wb-seg { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 72px 1fr; align-items: center; }
.wb-seg legend { float: left; font-size: 13px; font-weight: 700; color: var(--label); padding: 0; }
.wb-seg div { display: flex; padding: 3px; border-radius: 10px; background: var(--ground); border: 1px solid var(--wb-line); }
.wb-seg label { flex: 1; }
.wb-seg input, .wb-tog input { position: absolute; opacity: 0; pointer-events: none; }
.wb-seg span { display: block; padding: 6px 4px; border-radius: 7px; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wb-seg input:checked + span { background: var(--surface); color: var(--signal); box-shadow: 0 1px 3px rgba(10,19,48,0.14); }
.wb-seg input:focus-visible + span, .wb-tog input:focus-visible + span::after { outline: 3px solid #8FA3FF; outline-offset: 1px; }
.wb-tog { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; cursor: pointer; }
.wb-tog span { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.wb-tog span::after { content: ""; width: 44px; height: 26px; border-radius: 13px; background: var(--wb-line); box-shadow: inset 0 0 0 2px var(--wb-line); transition: background 0.2s; background-image: radial-gradient(circle at 13px 13px, #FFF 10px, transparent 10.5px); background-repeat: no-repeat; }
.wb-tog input:checked + span::after { background-color: var(--wb-done); box-shadow: inset 0 0 0 2px var(--wb-done); background-position: 18px 0; }
.wb-reset { align-self: flex-start; padding: 8px 0; border: 0; background: none; color: var(--emergency); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

/* Two columns: sliders on the left, the verdict and the chart floating on the right */
.wb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "list float"; gap: 24px; align-items: start; }
.wb-float { grid-area: float; position: sticky; top: 14px; display: flex; flex-direction: column; gap: 10px; }
.wb-list { grid-area: list; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wb-sentinel { height: 1px; margin-top: -1px; }

/* Verdict: green WITHIN LIMITS, red OUT OF LIMITS of the same height, reasons on a tap */
.wb-verdict { border-radius: 12px; background: var(--wb-done); color: var(--wb-done-ink); transition: background-color 0.2s ease, color 0.2s ease; }
.wb-verdict.bad { background: var(--emergency); color: #FFF; }
.wb-v-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 9px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: default; }
.wb-verdict.bad .wb-v-btn { cursor: pointer; }
.wb-v-title { position: relative; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 20px; line-height: 1.1; letter-spacing: 0.01em; }
.wb-chev { position: absolute; inset-inline-start: calc(100% + 8px); top: 50%; margin-top: -7px; transition: transform 0.2s; opacity: 0.85; }
.wb-v-btn[aria-expanded="true"] .wb-chev { transform: rotate(180deg); }
.wb-v-sum { font-size: 12px; font-weight: 600; max-width: 100%; text-wrap: balance; }
.wb-v-sum > .mono, .wb-v-tail { white-space: nowrap; }
.bad .wb-v-tail { display: block; white-space: normal; }
.wb-v-sum .mono { font-size: 11.5px; font-weight: 500; }
.wb-reasons { list-style: none; margin: 0; padding: 0 14px 10px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.wb-reasons[hidden] { display: none; }
.wb-reasons li { display: flex; gap: 8px; }
.wb-reasons li::before { content: "▲"; font-size: 10px; line-height: 18px; }
.wb-reasons li.warn { font-weight: 600; opacity: 0.92; }
.wb-reasons li.warn::before { content: "ⓘ"; font-size: 12px; }
.wb-warns { padding-top: 0; justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .wb-verdict.bad { animation: wb-nudge 0.32s ease; } }
@keyframes wb-nudge { 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }

/* The chart card: Liquid Glass (translucent, blurred, a lit edge) */
.wb-card { padding: 10px; border-radius: 16px; background: var(--wb-glass); -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 10px 34px rgba(10,19,48,0.13), 0 1px 2px rgba(10,19,48,0.08), inset 0 1px 0 rgba(255,255,255,0.9); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .wb-card { background: rgba(255,255,255,0.96); } }
.wb-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0 2px 6px; }
.wb-card-t { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 11px; letter-spacing: 0.08em; color: var(--label); }
.wb-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; font-weight: 600; color: var(--label); }
.wb-lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wb-lg i { display: inline-block; flex: none; }
.wb-sw { width: 12px; height: 9px; border-radius: 2px; border: 1px solid var(--ink); }
.wb-sw-0 { background: rgba(var(--wb-env), 0.26); }
.wb-sw-1, .wb-sw-2 { background: rgba(var(--wb-env), 0.1); border-style: dashed; }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.wb-ring-i { width: 8px; height: 8px; border-radius: 50%; border: 1.6px solid var(--signal); }
.wb-tri { width: 0; height: 0; border-inline: 4.5px solid transparent; border-bottom: 8px solid var(--signal); }
/* The broken limits, on top of the chart, as long as they are broken */
.wb-why { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; color: var(--emergency); font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.wb-why[hidden] { display: none; }
.wb-why li { display: flex; gap: 7px; animation: wb-pop 0.18s ease; }
.wb-why li::before { content: "▲"; font-size: 9px; line-height: 17px; flex: none; }
.wb-chart { position: relative; height: clamp(360px, 54vh, 540px); border-radius: 10px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.wb-chart:active { cursor: grabbing; }
.wb-card.bad .wb-chart { box-shadow: inset 0 0 0 1.5px var(--emergency); }
.wb-svg { display: block; width: 100%; height: 100%; }
.wb-paper { fill: rgba(255,255,255,0.8); }
.wb-grid-minor { stroke: var(--wb-line); stroke-opacity: 0.6; stroke-width: 0.5; fill: none; }
.wb-grid-major { stroke: var(--line-strong); stroke-opacity: 0.75; stroke-width: 0.8; fill: none; }
.wb-border { fill: none; stroke: var(--line-strong); stroke-width: 0.8; }
.wb-env { stroke: var(--ink); stroke-linejoin: round; }
.wb-env-0 { fill: rgba(var(--wb-env), 0.26); stroke-width: 1.3; }
.wb-env-1, .wb-env-2 { fill: rgba(var(--wb-env), 0.1); stroke-width: 0.9; stroke-dasharray: 4 3; }
.wb-lim { stroke: var(--label); stroke-width: 0.8; stroke-dasharray: 3 2; }
.wb-lim-t, .wb-ticks text, .wb-axis { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-muted); }
.wb-axis { font-size: 10.5px; font-weight: 600; }
.wb-load { fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linejoin: round; }
.wb-pt { stroke-width: 1.2; }
.wb-pt-takeoff, .wb-pt-landing { fill: var(--signal); stroke: #FFF; }
.wb-pt-zeroFuel { fill: #FFF; stroke: var(--signal); stroke-width: 1.7; }
.wb-pt-takeoff.bad, .wb-pt-landing.bad { fill: var(--emergency); }
.wb-pt-zeroFuel.bad { stroke: var(--emergency); }
.wb-ring { fill: none; stroke: var(--emergency); stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) { .wb-ring { animation: wb-pulse 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; } }
@keyframes wb-pulse { 0% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.6); } }
.wb-zoom { position: absolute; top: 18px; right: 20px; padding: 4px 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(10,19,48,0.18); color: var(--label); font-size: 11px; font-weight: 700; cursor: pointer; }
.wb-zoom[hidden] { display: none; }
.wb-zoom-tip { font-family: var(--font-body); font-weight: 600; color: var(--ink-muted); letter-spacing: 0; }
.wb-hint { margin: 0; font-size: 12px; color: var(--label); text-align: center; }
.wb-hint .t { display: none; }
@media (hover: none) { .wb-hint .m { display: none; } .wb-hint .t { display: inline; } }

/* Takeoff, landing and zero-fuel tiles */
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.wb-tile { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 2px solid transparent; }
.wb-tile.bad { border-color: var(--emergency); color: var(--emergency); }
.wb-tile-t { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 11px; letter-spacing: 0.06em; color: var(--label); }
.wb-tile.bad .wb-tile-t { color: var(--emergency); }
.wb-tile-m, .wb-tile-a { font-size: 12px; font-weight: 700; color: var(--label); }
.wb-tile-m b { font-size: 22px; color: var(--ink); }
.wb-tile-a b { font-size: 15px; color: var(--ink); }
.wb-tile.bad b { color: var(--emergency); }
.wb-tile-x { font-size: 11.5px; font-weight: 700; }
.wb-tiles-phone { display: none; }

/* Stations */
.wb-sec { border-radius: var(--wb-radius); background: var(--surface); padding: 6px 0 8px; }
.wb-sec + .wb-sec { margin-top: 16px; }
.wb-sec h3, .wb-empty h3, .wb-source h3 { margin: 0; padding: 10px 16px 2px; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 12px; letter-spacing: 0.08em; color: var(--label); }
.wb-row { padding: 10px 16px 12px; }
.wb-row + .wb-row { border-top: 1px solid var(--wb-line); }
.wb-gnote { margin: 0; padding: 8px 16px 6px; border-top: 1px solid var(--wb-line); font-size: 12.5px; font-weight: 700; color: var(--label); }
.wb-gnote .mono { font-weight: 600; }
.wb-gnote.over { color: var(--emergency); }
.wb-gnote.over b { font-weight: 800; }
.wb-row-top { display: flex; align-items: center; gap: 10px; }
.wb-ic { flex: none; color: var(--signal); }
.wb-row-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-row-l label { font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-det { font-size: 11px; color: var(--label); }
.wb-row.over .wb-det { color: var(--emergency); }
.wb-field { display: flex; align-items: center; gap: 6px; flex: none; }
.wb-field input { width: 68px; padding: 6px 8px; border: 0; border-radius: 9px; background: var(--ground); color: var(--ink); font-size: 19px; font-weight: 700; text-align: end; }
.wb-field input:focus { outline: 0; background: var(--wb-tint); box-shadow: 0 0 0 2px var(--signal); }
.wb-row.over .wb-field input { color: var(--emergency); }
.wb-u { min-width: 26px; font-size: 13px; font-weight: 700; color: var(--label); }
.wb-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 6px 0 0; background: transparent; cursor: pointer; touch-action: pan-y; --fill: var(--signal); }
.wb-row.over > .wb-range { --fill: var(--emergency); }
.wb-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--fill) var(--pct), var(--wb-line) var(--pct)); }
.wb-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--fill) var(--pct), var(--wb-line) var(--pct)); }
.wb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #FFF; border: 0; box-shadow: 0 0.5px 4px rgba(0,0,0,0.12), 0 6px 13px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04); transition: transform 0.15s; }
.wb-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #FFF; border: 0; box-shadow: 0 0.5px 4px rgba(0,0,0,0.12), 0 6px 13px rgba(0,0,0,0.12); }
.wb-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.wb-range:focus-visible { outline: 0; }
.wb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #8FA3FF, 0 6px 13px rgba(0,0,0,0.12); }
.wb-landing { margin-top: 8px; padding-top: 6px; }
.wb-landing .wb-ic { color: var(--label); margin-inline: 2px; }
.wb-landing-l { flex: 1; font-size: 13px; font-weight: 700; color: var(--label); }
.wb-landing-v { font-size: 15px; font-weight: 700; }
.wb-range-landing { --fill: var(--label); }

/* Empty mass, data source, report */
.wb-empty, .wb-source { border-radius: var(--wb-radius); background: var(--surface); padding: 4px 16px 14px; }
.wb-empty h3, .wb-source h3 { padding-inline: 0; }
.wb-empty-head { display: flex; align-items: center; justify-content: space-between; }
.wb-link { border: 0; background: none; padding: 8px 0; color: var(--signal); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.wb-empty-fig { display: flex; gap: 16px; align-items: baseline; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--label); }
.wb-empty-fig b { font-size: 22px; color: var(--ink); }
.wb-empty-fig span + span b { font-size: 18px; }
.wb-empty-note { margin: 6px 0 0; font-size: 13px; color: var(--label); }
.wb-own { color: #8A5A00; font-weight: 600; }
.wb-own .wb-link { font-size: 13px; padding: 0; }
.wb-empty form { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.wb-empty form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--label); }
.wb-empty form label span { display: flex; align-items: center; gap: 6px; }
.wb-empty form input { width: 110px; padding: 6px 8px; border: 0; border-radius: 9px; background: var(--ground); font-size: 19px; font-weight: 700; color: var(--ink); }
.wb-empty form input:focus { outline: 0; background: var(--wb-tint); box-shadow: 0 0 0 2px var(--signal); }
.wb-empty form i { font-style: normal; font-size: 13px; }
.wb-empty form p { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--label); }
.wb-source p, .wb-source li { font-size: 13px; color: var(--label); line-height: 1.45; }
.wb-source p { margin: 6px 0 0; }
.wb-source b { color: var(--ink); }
.wb-source ul { margin: 6px 0 0; padding-inline-start: 18px; }
.wb-source .wb-auth { color: var(--ink); font-weight: 700; }
.wb-report { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--wb-tint); }
.wb-report > div { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; }
.wb-report b { font-size: 15px; color: var(--ink); }
.wb-report > div span { font-size: 13px; color: var(--ink-muted); }
.wb-report button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--signal); color: #FFF; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.wb-report button:hover { background: var(--signal-pressed); }

/* The printed load sheet's parts (shown on paper only) */
.wb-print-head, .wb-sheet-wrap { display: none; }
.wb-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.wb-table th, .wb-table td { padding: 1.6mm 2mm; border-bottom: 0.3mm solid #DCE1EE; text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wb-table th[scope="row"], .wb-table thead th:first-child { text-align: start; font-family: var(--font-body); font-weight: 600; }
.wb-table thead th { font-family: var(--font-body); font-size: 8pt; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); border-bottom: 0.4mm solid var(--ink); }
.wb-table tr.sum th, .wb-table tr.sum td { font-weight: 800; border-top: 0.3mm solid var(--ink); }
.wb-table tr.bad th, .wb-table tr.bad td { color: var(--emergency); }

/* App and fleet */
.wb-app-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: var(--navy); color: #FFF; }
.wb-app-cta > div:first-child { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
.wb-app-cta b { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 18px; text-transform: uppercase; }
.wb-app-cta span { color: #C9D2FF; font-size: 14px; }
.wb-app-cta .badges { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-app-cta .badges img { height: 44px; width: auto; display: block; }
.wb-fleet { margin-top: 28px; }
.wb-fleet h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }
.wb-fleet ul, .wb-ix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.wb-fleet a, .wb-ix a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--ink); border: 1px solid transparent; transition: border-color 0.15s, transform 0.15s; }
.wb-fleet a:hover, .wb-ix a:hover { border-color: var(--signal); transform: translateY(-1px); color: var(--ink); }
.wb-fleet b, .wb-ix b { font-size: 17px; }
.wb-fleet span, .wb-ix span { font-size: 13px; font-weight: 600; color: var(--label); }
.wb-ix i { font-style: normal; font-size: 11px; color: var(--signal); margin-top: 4px; }

/* The list of tails */
.wb-ix-head { background: radial-gradient(120% 140% at 85% 10%, #1D2A5C 0%, var(--navy) 60%); color: #FFF; padding: 44px 0 40px; }
.wb-ix-head h1 { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: clamp(30px, 5vw, 52px); text-transform: uppercase; line-height: 1; }
.wb-ix-head p { max-width: 640px; margin: 16px 0 0; font-size: 17px; color: #E6EAFF; line-height: 1.5; }
.wb-ix-body { padding-block: 28px 56px; }
.wb-ix-group h2 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.wb-ix-group + .wb-ix-group { margin-top: 40px; }
.wb-ix-note { margin: -4px 0 14px; font-size: 14px; color: var(--ink-muted); }
.wb-ix-types b { font-size: 16px; }
.wb-ix-count { min-height: 1.4em; margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.wb-ix-count:empty { display: none; }
.wb-flag { display: inline-block; width: 20px; height: 15px; margin-inline-end: 8px; border-radius: 2px; vertical-align: 0; object-fit: cover; font-size: 15px; line-height: 15px; box-shadow: 0 0 0 1px rgba(10,19,48,0.08); }
span.wb-flag { box-shadow: none; }
/* The search on the navy header: the homepage's field, suggestions with a flag or a plane. */
.wb-search { margin-top: 26px; color: var(--ink); }
.wb-search .fs-input { font-size: 19px; }
.wb-search .fs-list li { align-items: center; padding: 10px 22px; gap: 12px; justify-content: flex-start; }
.wb-opt-f { flex: none; width: 22px; display: grid; place-items: center; color: var(--label); }
.wb-opt-f .wb-flag { margin: 0; }
.wb-opt-t { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.wb-opt-s { min-width: 0; font-size: 14px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A type page: the type's name in the title, no photo. */
.wb-reg-type { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); text-transform: uppercase; font-size: clamp(34px, 5.6vw, 64px); line-height: 1; letter-spacing: 0; }
.wb-type .wb-hero-in { grid-template-columns: minmax(0, 1fr); }
.wb-typelink { margin: 10px 0 0; font-size: 14px; color: var(--ink-muted); }
.wb-ix { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wb-ix-body .wb-report { margin-top: 28px; }

/* Tablets and phones: one column; the verdict and the chart float in glass over the sliders */
@media (max-width: 899px) {
  .wb-cols { display: block; }
  .wb-float { position: sticky; top: 0; z-index: 10; margin: 0 -12px; padding: 8px 12px 10px; gap: 8px; }
  .wb-float::before { content: ""; position: absolute; inset: 0 0 auto; height: 52px; background: linear-gradient(var(--ground), rgba(245,247,252,0)); z-index: -1; pointer-events: none; }
  .wb-chart { height: min(340px, max(210px, 36vh)); }
  .wb-tiles-wide, .wb-hint { display: none; }
  .wb-tiles-phone { display: grid; }
  .wb-list { margin-top: 6px; }
  .wb.stuck .wb-v-btn { flex-direction: row; justify-content: center; gap: 10px; padding: 6px 10px; }
  .wb.stuck .wb-v-title { font-size: 15px; }
  .wb.stuck .wb-v-sum { font-size: 11px; }
  .wb.stuck .wb-v-tail { display: none; }
  .wb.stuck .wb-card-head { display: none; }
  /* The slim strip has no room for the chevron (it sat on the figures); the reasons are on the chart. */
  .wb.stuck .wb-chev { display: none; }
  /* Floating over the list, each reason keeps to one line so the chart keeps its height. */
  .wb.stuck .wb-why { font-size: 11.5px; margin-bottom: 6px; }
  .wb.stuck .wb-why li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 760px) {
  .wb-hero-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 24px; }
  .wb-figure { order: -1; }
  .wb-cover.no-photo .wb-figure { display: none; }
  .wb-cover.no-photo .wb-hero-copy { padding-top: 24px; }
  .wb-photo { border-radius: 0; border: 0; box-shadow: none; aspect-ratio: 16 / 9; }
  .wb-figure figcaption { margin: 6px 16px 0; }
  .wb-hero-copy { padding: 16px 16px 0; }
  .wb-crumbs { margin-bottom: 12px; font-size: 12px; }
  .wb-stats { margin-top: 16px; }
  .wb-stats li { padding: 6px 10px; }
  .wb-layout { padding: 12px 12px 40px; }
  .wb-bar-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wb-actions { margin-inline-start: auto; }
  .wb-act span { display: none; }
  .wb-act { padding: 0 11px; }
  .wb-menu-panel { width: min(300px, calc(100vw - 24px)); }
  .wb-rail a, .wb-rail-report { font-size: 14px; padding: 8px 12px; }
  .wb-row { padding-inline: 14px; }
  .wb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wb-tile { padding: 8px 10px; }
  .wb-tile-m b { font-size: 18px; }
  .wb-tile-a b { font-size: 13px; }
  .wb-app-cta { padding: 18px; }
}

/* Paper: a one-page load sheet. The tail and the time, the verdict, the whole envelope with the
   load on it, the three points, every station's figures, the data source and a line to sign. */
@media print {
  @page { size: A4 portrait; margin: 11mm 12mm; }
  body { background: #FFF; }
  .wb { background: #FFF; }
  .wb, .wb * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip, .wb-top, .wb-hero, .wb-rail, .wb-bar, .wb-stations, .wb-tiles-phone, .wb-empty, .wb-report, .wb-app-cta, .wb-fleet, .wb-school, .wb-hint,
  .wb-zoom, .wb-chev, .wb-reasons.wb-warns, footer, .overlay, .wb-sentinel { display: none !important; }
  .wb-layout { display: block; max-width: none; padding: 0; }
  .wb-app { display: flex; flex-direction: column; gap: 3.5mm; }
  .wb-cols { display: contents; }
  .wb-float { order: 1; position: static; display: flex; flex-direction: column; gap: 3mm; margin: 0; padding: 0; }
  .wb-float::before { display: none; }
  .wb-sheet-wrap { order: 2; display: block; }
  .wb-list { order: 3; margin: 0; }
  .wb-print-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 2.5mm; border-bottom: 0.6mm solid var(--ink); }
  .wb-print-head > div { display: flex; flex-direction: column; gap: 1mm; }
  .wb-print-head > div:last-child { text-align: end; }
  .wb-print-head b { font-size: 20pt; }
  .wb-print-head > div:last-child b { font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 11pt; letter-spacing: 0.06em; }
  .wb-print-head span { font-size: 9pt; color: var(--label); }
  .wb-verdict { break-inside: avoid; }
  .wb-v-btn { padding: 2mm; }
  .wb .wb-reasons[hidden] { display: flex; }
  .wb-card { padding: 0; border: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; break-inside: avoid; }
  .wb-card-head { display: flex !important; }
  .wb-chart { height: auto; overflow: visible; border-radius: 0; }
  .wb-card.bad .wb-chart { box-shadow: none; }
  .wb-svg { height: auto; max-height: 80mm; }
  .wb-ring { animation: none; }
  .wb-paper { fill: #FFF; }
  .wb-tiles-wide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm; }
  .wb-tile { border: 0.3mm solid #DCE1EE; padding: 1.8mm 3mm; }
  .wb-tile.bad { border: 0.5mm solid var(--emergency); }
  .wb-tile-m b { font-size: 14pt; }
  .wb-tile-a b { font-size: 11pt; }
  .wb-sign { display: flex; gap: 6mm; margin-top: 10mm; }
  .wb-sign span { flex: 1; padding-top: 1.5mm; border-top: 0.3mm solid var(--ink); font-size: 8pt; color: var(--label); }
  .wb-source { padding: 0; break-inside: avoid; }
  .wb-source .wb-auth { display: none; }
  .wb-source h3 { padding-top: 0; }
  .wb-source p, .wb-source li { font-size: 8pt; margin-top: 1mm; }
  .wb-print-foot { margin: 3mm 0 0; font-size: 7.5pt; color: var(--label); }
  .wb-table th, .wb-table td { padding: 1.1mm 2mm; font-size: 9.5pt; }
  .wb-app { gap: 3mm; }
}
.wb-sign { display: none; }
@media print { .wb-sign { display: flex; } }
.wb-type .wb-rail-photo { display: none; }
.wb-school { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; padding: 22px 24px; border-radius: 16px; background: var(--wb-tint); }
.wb-school > div { flex: 1 1 320px; }
.wb-school h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 900; font-stretch: var(--stretch); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.wb-school p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.wb-school button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--signal); color: #FFF; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.wb-school button:hover { background: var(--signal-pressed); }
@media (max-width: 400px) { .wb-rail-report .wb-long { display: none; } }
#calc:focus, #wb-list:focus { outline: none; }
#calc { scroll-margin-top: 12px; }