/* =========================================================
   FREIGHT OPS DASHBOARD — design system
   Card-based layout on a warm concrete canvas.
   Datawrapper-style charts (thin Y-gridlines, value labels
   inline, no chart chrome inside the SVG).
   ========================================================= */

:root {
  /* surfaces */
  --canvas: #ece8e0;           /* warm concrete */
  --canvas-dot: #d8d3c8;       /* faint dot-grid */
  --paper: #ffffff;
  --ink: #0f1216;
  --ink-soft: #5b6168;
  --ink-faint: #9097a0;
  --rule: #e7e3dc;
  --rule-faint: #f2efe9;

  /* accent system */
  --dark: #0f1216;
  --amber: #f5c542;
  --amber-ink: #171310;
  --bleed: #d0472d;            /* late, cost, loss */
  --bleed-soft: #e89785;
  --earn: #2f8a5c;             /* on-time hit, positive margin */
  --signal: #4a5fd4;            /* secondary trend overlay */

  /* chart palette */
  --chart-fuel: #d0472d;
  --chart-maint: #b45239;
  --chart-det: #e89785;
  --chart-idle: #f0bfa9;
  --chart-net: #0f1216;
  --chart-gross: #0f1216;

  --shadow-card: 0 1px 2px rgba(15, 18, 22, .04),
                 0 6px 20px rgba(15, 18, 22, .045);
  --radius-card: 22px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  background-image: radial-gradient(circle, var(--canvas-dot) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.lg-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 40px 64px;
}

/* back button — identical pattern to studio's other dashboards */
.lg-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  text-decoration: none;
  margin-bottom: 18px;
  transition: background .12s, color .12s, border-color .12s;
}
.lg-back:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.is-embedded .lg-back { display: none; }

/* ============ HEADER (compact) ============ */
.lg-header {
  margin: 4px 0 16px;
}
.lg-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.lg-h1 {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  max-width: 760px;
}

/* ============ TOOLBAR: tabs + filters on one row ============ */
.lg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ============ TABS ============ */
.lg-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--paper);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  gap: 2px;
}
.lg-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.lg-tab:hover:not(.is-active):not(.is-disabled) {
  color: var(--ink);
}
.lg-tab.is-active {
  background: var(--ink);
  color: var(--paper);
}
.lg-tab.is-disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
  position: relative;
}
.lg-tab.is-disabled::after {
  content: 'soon';
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 6px;
  background: var(--rule-faint);
  border-radius: var(--radius-pill);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============ FILTERS ============ */
.lg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

/* Per-tab filter visibility: on-time uses year only; assets uses neither */
body[data-tab="ontime"] .lg-filter[data-filter="booking"] { display: none; }
body[data-tab="assets"] .lg-filters { display: none; }
body[data-tab="assets"] .lg-filter-state { display: none; }
.lg-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lg-filter-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lg-chips {
  display: inline-flex;
  padding: 3px;
  background: var(--paper);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(15, 18, 22, .04);
}
.lg-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lg-chip:hover:not(.is-active) { color: var(--ink); }
.lg-chip.is-active {
  background: var(--ink);
  color: var(--paper);
}
.lg-filter-state {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 16px;
  min-height: 16px;
}

/* ============ GRID ============ */
.lg-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.lg-span-4 { grid-column: span 4; }
.lg-span-5 { grid-column: span 5; }
.lg-span-6 { grid-column: span 6; }
.lg-span-7 { grid-column: span 7; }
.lg-span-8 { grid-column: span 8; }
.lg-span-12 { grid-column: span 12; }

/* ============ CARDS ============ */
.lg-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.lg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.lg-card-kicker {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.lg-card-title {
  margin: 0;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lg-card-sub {
  font-size: 12px;
  color: var(--ink-faint);
}
.lg-card-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.lg-card-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
}
.lg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.lg-legend-dot--ink { background: var(--ink); }
.lg-legend-dot--bleed { background: var(--bleed); }
.lg-legend-dot--faint { background: var(--ink-faint); }

/* ============ MAP (on-time chloropleth + facility bubbles) ============ */
.lg-map-wrap { width: 100%; }
.lg-map { width: 100%; height: auto; display: block; }
.lg-map-state {
  stroke: #fff;
  stroke-width: 0.6;
  transition: fill .15s;
}
.lg-map-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
  pointer-events: none;
}
.lg-map-state:hover { fill-opacity: 0.85; }
.lg-map-bubbles circle { transition: stroke .15s, stroke-width .15s, fill-opacity .15s; }
.lg-map-bubbles circle:hover {
  stroke: var(--ink);
  stroke-width: 2;
}
.lg-map-bubbles circle.is-pinned {
  stroke: var(--ink);
  stroke-width: 2.5;
  fill-opacity: 0.92;
}
.lg-map-tip {
  position: absolute;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink);
  min-width: 180px;
  max-width: 240px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s, transform .12s;
  z-index: 5;
}
.lg-map-tip.is-visible { opacity: 1; transform: translateY(0); }
.lg-map-tip.is-pinned { border-color: var(--ink); }
.lg-map-tip-head {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.lg-map-tip-muted {
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.lg-map-tip-big {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 2px 0 2px;
}
.lg-map-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px solid var(--rule-faint);
  color: var(--ink-soft);
}
.lg-map-tip-row:first-of-type { border-top: 0; padding-top: 6px; }
.lg-map-tip-row strong { color: var(--ink); font-weight: 500; }
.lg-map-labels text {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 500;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3;
  pointer-events: none;
}
.lg-map-legend {
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
}
.lg-map-bubble-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.78;
  border: 1.2px solid #fff;
  box-shadow: 0 0 0 1px var(--rule);
}
.lg-map-bubble-dot--sm { width: 6px; height: 6px; }
.lg-map-bubble-dot--lg { width: 14px; height: 14px; }

/* Rebuilt map legend: gradient scale + bubble size hint. */
.lg-map-legend {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-soft);
}
.lg-map-legend-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lg-map-legend-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lg-map-legend-scale {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lg-map-legend-tick {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.lg-map-legend-gradient {
  display: inline-block;
  width: 120px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--bleed), #efede8, var(--earn));
}
.lg-map-legend-bubbles {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lg-map-legend-hint {
  margin-left: 4px;
  font-size: 11px;
  color: var(--ink-soft);
}

/* ============ RANKED CORRIDORS (replaces O×D heatmap) ============ */
.lg-corridor-list {
  display: grid;
  row-gap: 6px;
}
.lg-corridor-group-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 6px 0 2px;
}
.lg-corridor-group-title--best { margin-top: 14px; }

.lg-corridor {
  display: grid;
  grid-template-columns: 74px 1fr 54px 68px 80px;
  align-items: center;
  column-gap: 12px;
  font-size: 13px;
  padding: 3px 0;
}
.lg-corridor-pair {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lg-corridor-track {
  position: relative;
  height: 10px;
  background: var(--rule-faint);
  border-radius: 999px;
}
.lg-corridor-bench {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 1px;
  background: var(--ink-faint);
  transform: translateX(-0.5px);
}
.lg-corridor-dot {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--rule);
}
.lg-corridor-dot--bleed { background: var(--bleed); }
.lg-corridor-dot--earn  { background: var(--earn); }
.lg-corridor-rate {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.lg-corridor-delta {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lg-corridor-delta.is-bleed { color: var(--bleed); }
.lg-corridor-delta.is-earn  { color: var(--earn); }
.lg-corridor-loads {
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lg-corridor-scale {
  display: grid;
  grid-template-columns: 74px 1fr 54px 68px 80px;
  column-gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--ink-faint);
}
.lg-corridor-scale-track {
  grid-column: 2 / 3;
  position: relative;
  height: 14px;
}
.lg-corridor-scale-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.lg-corridor-scale-bench {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--ink-soft);
  font-weight: 500;
}

/* Standalone legend row (when it doesn't fit in the card head). */
.lg-card-legend--row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: var(--ink-soft);
  margin: -4px 0 4px;
}

/* segmented control inside a card */
.lg-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--rule-faint);
  border-radius: var(--radius-pill);
}
.lg-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.lg-seg-btn.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* ===== DARK HERO CARD ===== */
.lg-card--dark {
  background: var(--dark);
  color: #e9e7e3;
}
.lg-card--dark .lg-card-kicker { color: #8a8e95; }
.lg-card--dark .lg-card-sub { color: #8a8e95; }

/* header stacks vertically in the dark card so the kicker + context
   don't compete for horizontal space and jump between 1 and 2 lines */
.lg-card--dark .lg-card-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.lg-card--dark .lg-card-kicker,
.lg-card--dark .lg-card-sub {
  white-space: nowrap;
  margin-bottom: 0;
}

.lg-hero-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #fff;
  padding: 4px 0 4px;
  line-height: 1;
}
.lg-hero-currency {
  font-size: 28px;
  font-weight: 500;
  color: #8a8e95;
}
.lg-hero-value {
  font-size: 76px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.lg-hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #22262b;
}
.lg-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.lg-hero-label { color: #8a8e95; }
.lg-hero-val {
  color: #e9e7e3;
  font-weight: 500;
}
.lg-hero-note {
  margin: 2px 0 0;
  font-size: 11px;
  color: #8a8e95;
  line-height: 1.5;
}

/* ===== AMBER CALLOUT ===== */
.lg-card--amber {
  background: var(--amber);
  color: var(--amber-ink);
}
.lg-card--amber .lg-card-kicker {
  color: rgba(23, 19, 16, .55);
}
.lg-amber-headline {
  margin: 0;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.lg-amber-num {
  font-weight: 600;
  background: var(--amber-ink);
  color: var(--amber);
  padding: 0 8px;
  border-radius: 6px;
}
.lg-amber-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(23, 19, 16, .78);
  line-height: 1.55;
}
.lg-amber-sub span {
  font-weight: 500;
  color: var(--amber-ink);
}

/* mini bleed-bar stack inside amber card — inline-label style */
.lg-amber-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.lg-amber-bar {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 14px;
  align-items: center;
  font-size: 12px;
}
.lg-amber-bar-label {
  color: var(--amber-ink);
  font-weight: 500;
  font-size: 13px;
}
.lg-amber-bar-track {
  position: relative;
  height: 22px;
  /* no background — labels read directly on the amber card */
}
.lg-amber-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background-color: var(--amber-ink);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(245, 197, 66, .28) 3px 6px
  );
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  box-sizing: border-box;
}
.lg-amber-bar-val {
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
/* value inside the hatched fill — bright amber text on dark */
.lg-amber-bar-val.is-inside {
  color: var(--amber);
}
/* fallback for bars too narrow to contain the value — dark text on amber body, just past the fill edge */
.lg-amber-bar-val.is-outside {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--amber-ink);
  padding-left: 8px;
  /* left set inline */
}

/* ============ CHARTS (datawrapper-style) ============ */
.lg-chart,
.lg-amber-diesel-chart {
  width: 100%;
  display: block;
  overflow: visible;
  font-family: "Geist", system-ui, sans-serif;
}
.lg-chart text,
.lg-amber-diesel-chart text {
  font-family: "Geist", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* axes / ticks */
.lg-chart .axis-label {
  font-size: 11px;
  fill: var(--ink-faint);
}
.lg-chart .axis-line {
  stroke: var(--ink);
  stroke-width: 1;
}
.lg-chart .gridline {
  stroke: var(--rule);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.lg-chart .gridline--zero {
  stroke: var(--ink);
  stroke-width: 1;
}
.lg-chart .value-label {
  font-size: 12px;
  font-weight: 500;
  fill: var(--ink);
}
.lg-chart .value-label--inverse { fill: #fff; }
.lg-chart .cat-label {
  font-size: 12px;
  fill: var(--ink);
}
.lg-chart .cat-sub {
  font-size: 11px;
  fill: var(--ink-faint);
}
.lg-chart .bar-gross,
.lg-chart .bar-net { fill: var(--ink); }
.lg-chart .bar-bleed { fill: var(--bleed); }
.lg-chart .bar-bleed--hatch {
  fill: url(#bleed-hatch);
}
.lg-chart .bar-connector {
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* stacked area (trend) */
.lg-chart .area-fuel { fill: var(--chart-fuel); opacity: 0.92; }
.lg-chart .area-maint { fill: var(--chart-maint); opacity: 0.92; }
.lg-chart .area-det { fill: var(--chart-det); opacity: 0.92; }
.lg-chart .area-idle { fill: var(--chart-idle); opacity: 0.92; }
.lg-chart .area-net { fill: var(--ink); opacity: 0.92; }
.lg-chart .stacked-label {
  font-size: 11px;
  font-weight: 500;
  fill: #fff;
}
.lg-chart .stacked-label--dark { fill: var(--ink); }

/* ===== Load-profitability distribution ===== */
.lg-dist-legend {
  display: inline-flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
}
.lg-dist-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg-dist-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.lg-dist-swatch--loss { background: var(--bleed); }
.lg-dist-swatch--earn { background: var(--ink); }

.lg-dist-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
.lg-dist-stat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 4px;
}
.lg-dist-stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.25;
  min-height: 2.4em;       /* reserve 2 lines so numbers stay aligned */
  display: flex;
  align-items: flex-start;
}
.lg-dist-stat-value {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  align-self: center;
}
.lg-dist-stat-value--bleed { color: var(--bleed); }
.lg-dist-stat-sub {
  font-size: 11px;
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* ============ HORIZONTAL BAR LIST (datawrapper inline-label style) ============
   Used in the facility leaderboard, customer scheduling table, etc.
   Label on the left, bar fills left→right, value label INSIDE the fill
   when wide, otherwise just past the fill edge.
   =========================================================================== */
.lg-hbars {
  display: grid;
  row-gap: 8px;
}
.lg-hbar {
  display: grid;
  grid-template-columns: 180px 1fr 72px;
  column-gap: 16px;
  align-items: center;
  font-size: 13px;
}
.lg-hbar-label {
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-hbar-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 11px;
  margin-left: 6px;
}
.lg-hbar-track {
  position: relative;
  height: 22px;
  /* no background — bars read on the card itself */
}
.lg-hbar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  background: var(--bleed);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  box-sizing: border-box;
}
.lg-hbar-fill--hatch {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(255, 255, 255, .28) 3px 6px
  );
}
.lg-hbar-fill--earn { background: var(--earn); }

/* Why-late: 100% stacked bar, one row per year. Colour by controllability —
   client (negotiate) = bleed, fleet (coach) = ink, external (accept) = faint. */
#why-late-bars {
  display: grid;
  row-gap: 10px;
}
.lg-stack-row {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  column-gap: 14px;
  font-size: 13px;
}
.lg-stack-label {
  color: var(--ink);
  font-weight: 500;
}
.lg-stack-track {
  display: flex;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
}
.lg-stack-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: #fff;
}
.lg-stack-seg + .lg-stack-seg { border-left: 1px solid var(--paper); }
.lg-stack-seg--client   { background: var(--bleed); }
.lg-stack-seg--fleet    { background: var(--ink); }
.lg-stack-seg--external { background: var(--ink-faint); }
.lg-stack-val {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.lg-stack-meta {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lg-hbar-val {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
.lg-hbar-val.is-inside { color: #fff; }
.lg-hbar-val.is-outside {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink);
  padding-left: 8px;
  /* left set inline */
}

.lg-hbar-meta {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===== Fuel surcharge pass-through (amber card, tab 1) ===== */
.lg-passthrough {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 19, 16, .14);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg-passthrough-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.lg-passthrough-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(23, 19, 16, .55);
}
.lg-passthrough-total {
  font-size: 12px;
  color: rgba(23, 19, 16, .72);
}
.lg-passthrough-total strong {
  font-weight: 500;
  color: var(--amber-ink);
}

.lg-passthrough-bar {
  display: flex;
  width: 100%;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
}
.lg-passthrough-absorbed,
.lg-passthrough-covered {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-width: 0;
  overflow: hidden;
}
.lg-passthrough-absorbed {
  background-color: var(--amber-ink);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(245, 197, 66, .28) 3px 6px
  );
}
.lg-passthrough-covered {
  background: rgba(23, 19, 16, .16);
  justify-content: flex-end;
}

.lg-passthrough-val {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 11px;
  color: var(--amber);
  white-space: nowrap;
}
.lg-passthrough-val strong {
  font-size: 16px;
  font-weight: 500;
  color: var(--amber);
}
.lg-passthrough-val--covered {
  color: var(--amber-ink);
  text-align: right;
}
.lg-passthrough-val--covered strong {
  color: var(--amber-ink);
}

.lg-passthrough-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: rgba(23, 19, 16, .72);
}
.lg-legend-dot--absorbed {
  background-color: var(--amber-ink);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(245, 197, 66, .28) 3px 6px
  );
}
.lg-legend-dot--covered {
  background: rgba(23, 19, 16, .16);
}

/* ===== $1-of-revenue split bar (legacy, still referenced by CSS) ===== */
.lg-amber-split {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 19, 16, .14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-amber-split-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.lg-amber-split-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(23, 19, 16, .55);
}
.lg-amber-split-legend {
  display: inline-flex;
  gap: 12px;
  font-size: 11px;
  color: rgba(23, 19, 16, .70);
}
.lg-amber-split-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg-amber-split-sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.lg-amber-split-sw--bleed {
  background: var(--amber-ink);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(245, 197, 66, .28) 3px 6px
  );
}
.lg-amber-split-sw--net { background: var(--amber-ink); }

.lg-amber-split-bar {
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(23, 19, 16, .10);
  font-size: 11px;
  font-weight: 500;
  color: var(--amber);
}
.lg-amber-split-seg {
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background-color: var(--amber-ink);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(245, 197, 66, .28) 3px 6px
  );
  border-right: 1px solid rgba(245, 197, 66, .35);
}
.lg-amber-split-seg:last-child { border-right: 0; }

.lg-amber-split-seg-text {
  display: block;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* the "net / what's left" seg is solid ink, no hatch */
.lg-amber-split-seg--net {
  background-image: none;
  background-color: var(--amber-ink);
}

/* ============ DIVERGING HIT/MISS BAR (amber card, tab 2) ============ */
.lg-diverge {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-diverge-bar {
  display: flex;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(23, 19, 16, .10);
}
.lg-diverge-hit {
  background: var(--earn);
  height: 100%;
}
.lg-diverge-miss {
  background: var(--bleed);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(255, 255, 255, .22) 3px 6px
  );
  height: 100%;
}
.lg-diverge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--amber-ink);
}
.lg-diverge-hit-lbl span,
.lg-diverge-miss-lbl span { font-weight: 500; }

/* ============ HEATMAP (O × D) ============ */
.lg-heatmap-wrap { overflow-x: auto; }
.lg-heatmap {
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lg-heatmap th,
.lg-heatmap td {
  padding: 0;
  border: 1px solid var(--paper);
}
.lg-heatmap th {
  font-weight: 500;
  color: var(--ink-soft);
  padding: 4px 6px;
  background: var(--paper);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.lg-heatmap th.lg-heat-row-head {
  text-align: right;
  padding-right: 10px;
}
.lg-heatmap td.lg-heat-cell {
  width: 28px;
  height: 28px;
  text-align: center;
  color: var(--ink);
  font-weight: 500;
}
.lg-heatmap td.lg-heat-cell.is-dark { color: #fff; }
.lg-heatmap td.lg-heat-empty {
  background: var(--rule-faint);
}
.lg-heat-scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.lg-heat-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ============ BOOKING-TYPE COMPARISON TABLE (row 3) ============ */
.lg-booking-delta {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.lg-booking-delta--up { background: rgba(47, 138, 92, .12); color: var(--earn); }
.lg-booking-delta--down { background: rgba(208, 71, 45, .12); color: var(--bleed); }
.lg-booking-delta--flat { background: var(--rule-faint); color: var(--ink-soft); }

.lg-btype-table {
  display: grid;
  grid-template-columns:
    minmax(220px, 2.4fr)  /* type + description */
    minmax(72px, 0.9fr)   /* loads */
    minmax(84px, 0.9fr)   /* revenue */
    minmax(84px, 0.9fr)   /* net $/mi */
    minmax(76px, 0.8fr)   /* median */
    minmax(80px, 0.8fr)   /* loss % */
    minmax(120px, 1.2fr)  /* P10-P90 */
    minmax(96px, 1fr);    /* delta */
  gap: 0;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.lg-btype-head {
  display: contents;
}
.lg-btype-head > span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--rule);
}
.lg-btype-head > span.num { text-align: right; }
.lg-btype-head > span:first-child { padding-left: 0; }
.lg-btype-head > span:last-child { padding-right: 0; }

.lg-btype-row {
  display: contents;
  cursor: pointer;
}
.lg-btype-cell {
  padding: 14px 10px;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.lg-btype-cell.num {
  justify-content: flex-end;
  text-align: right;
}
.lg-btype-cell--strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lg-btype-row > .lg-btype-cell:first-child { padding-left: 0; }
.lg-btype-row > .lg-btype-cell:last-child { padding-right: 0; }
.lg-btype-row:last-child .lg-btype-cell { border-bottom: 0; }

.lg-btype-cell--type {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.35;
}
.lg-btype-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.lg-btype-cell--type em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.lg-btype-row:hover .lg-btype-cell {
  background: var(--rule-faint);
}
.lg-btype-row:hover .lg-btype-name {
  color: var(--ink);
}

/* ============ WHO EARNS (tab 3) ============ */
.lg-truck-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.lg-truck-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lg-truck-kpi-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
  min-height: 26px;   /* reserve space for 2 lines so values align across columns */
  display: block;
}
.lg-truck-kpi-value {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 2px;
}
.lg-truck-kpi-sub {
  font-size: 11px;
  color: var(--ink-faint);
}
.lg-truck-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lg-truck-list-head {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lg-truck-list {
  display: flex;
  flex-direction: column;
}
.lg-truck-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 13px;
}
.lg-truck-row:last-child { border-bottom: 0; }
.lg-truck-row-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lg-truck-unit {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lg-truck-sub {
  font-size: 11px;
  color: var(--ink-faint);
}
.lg-truck-row-stat {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  justify-content: flex-end;
}
.lg-truck-stat-val {
  font-weight: 500;
  color: var(--ink);
}
.lg-truck-stat-lbl {
  font-size: 11px;
  color: var(--ink-faint);
}

/* Drivers ranked table */
.lg-driver-table {
  display: grid;
  grid-template-columns:
    minmax(200px, 2fr)   /* driver */
    minmax(70px, 0.8fr)  /* tenure */
    minmax(80px, 0.9fr)  /* miles */
    minmax(60px, 0.7fr)  /* mpg */
    minmax(80px, 0.9fr)  /* net */
    minmax(96px, 1fr)    /* delta */
    minmax(96px, 1fr);   /* preventable */
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  max-height: 440px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 14px;
}
.lg-driver-table::-webkit-scrollbar { width: 10px; }
.lg-driver-table::-webkit-scrollbar-track { background: transparent; }
.lg-driver-table::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 8px;
  border: 2px solid var(--paper);
}
.lg-driver-table::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
.lg-dt-head {
  display: contents;
}
.lg-dt-head > span {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  user-select: none;
}
.lg-dt-head > span.num { text-align: right; }
.lg-dt-head > span:hover { color: var(--ink); }
.lg-dt-head > span.is-active { color: var(--ink); }

.lg-dt-row {
  display: contents;
}
.lg-dt-row > span {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink);
  display: flex;
  align-items: center;
}
.lg-dt-row > span.num { justify-content: flex-end; }
.lg-dt-row > span em {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 11px;
  margin-left: 2px;
}
.lg-dt-strong {
  font-weight: 500;
}
.lg-dt-dim {
  color: var(--ink-soft);
}
.lg-dt-prev-pill {
  display: inline-block;
  background: rgba(208, 71, 45, .12);
  color: var(--bleed);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}
.lg-dt-row:hover > span {
  background: var(--rule-faint);
}

/* retire-zone label inside trucks scatter */
.lg-scatter .zone-label {
  fill: var(--bleed);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* scatter charts */
.lg-scatter {
  display: block;
  width: 100%;
}
.lg-scatter .quadrant-line {
  stroke: var(--ink-faint);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}
.lg-scatter .quadrant-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}
.lg-scatter .median-line {
  stroke: var(--bleed);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}
.lg-scatter .median-label {
  font-size: 11px;
  fill: var(--bleed);
  font-weight: 500;
}
.lg-scatter .scatter-dot {
  fill: var(--ink);
  opacity: 0.7;
}
.lg-scatter .scatter-dot--bleed { fill: var(--bleed); }
.lg-scatter .scatter-dot--earn  { fill: var(--earn); }
.lg-scatter .scatter-dot--outline {
  fill: none;
  stroke: var(--bleed);
  stroke-width: 1.5;
}

/* ============ DRILL-DOWN MODAL ============ */
.lg-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lg-modal[hidden] { display: none !important; }
.lg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 22, .32);
  backdrop-filter: blur(2px);
}
.lg-modal-panel {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 64px rgba(15, 18, 22, .22);
  width: min(100%, 940px);
  max-height: min(85vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lg-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 24px 12px;
  gap: 16px;
  border-bottom: 1px solid var(--rule-faint);
}
.lg-modal-head h2 { margin: 0; }
.lg-modal-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  transition: background .12s, color .12s;
}
.lg-modal-close:hover { background: var(--rule-faint); color: var(--ink); }
.lg-modal-note {
  margin: 4px 24px 0;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.lg-modal-head-table {
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
}
.lg-modal-body {
  flex: 1;
  overflow: auto;
  padding: 0 24px 4px;
}
.lg-modal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.lg-modal-table td,
.lg-modal-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-modal-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 12px 12px 10px 0;
  background: var(--paper);
}
.lg-modal-table thead th.num { text-align: right; }
.lg-modal-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink);
  vertical-align: top;
}
.lg-modal-table td.num { text-align: right; font-weight: 500; }
.lg-modal-table td .lg-route-arr {
  color: var(--ink-faint);
  margin: 0 4px;
}
.lg-modal-table tr.is-loss td { color: var(--bleed); }
.lg-modal-table tr.is-loss td.num { color: var(--bleed); font-weight: 500; }

.lg-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--rule-faint);
  gap: 14px;
}
.lg-modal-count { font-size: 12px; color: var(--ink-faint); }
.lg-modal-more {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.lg-modal-more:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lg-modal-more:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* hover state for clickable histogram bars */
#chart-dist .hbar { cursor: pointer; transition: opacity .12s; }
#chart-dist .hbar:hover { opacity: 0.75; }

/* ============ FOOTER ============ */
.lg-colophon {
  grid-column: span 12;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  color: var(--ink-faint);
  flex-wrap: wrap;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .lg-main { padding: 24px 24px 64px; }
  .lg-h1 { font-size: 34px; }
  .lg-span-4, .lg-span-5, .lg-span-6, .lg-span-7, .lg-span-8 {
    grid-column: span 12;
  }
  .lg-hero-value { font-size: 56px; }
  .lg-amber-headline { font-size: 22px; }
}

@media (max-width: 640px) {
  .lg-main { padding: 20px 16px 48px; }
  .lg-h1 { font-size: 28px; }
  .lg-card { padding: 20px; }
  .lg-filters { gap: 14px; }
}