.driver-map {
  --map-ink: #183052;
  --map-muted: #4c627f;
  --map-line: #dce6f2;
  --map-blue: #2056a4;
  display: grid;
  gap: 16px;
  min-width: 0;
  color: var(--map-ink);
}

.driver-map [hidden] { display: none; }
.driver-map p { margin: 0; }
.driver-map h1 { font-size: clamp(1.75rem, 4vw, 2.55rem); line-height: 1.08; letter-spacing: -.045em; }
.driver-map h2 { font-size: 1.02rem; line-height: 1.25; }
.driver-map h1, .driver-map h2 { margin: 0; }
.driver-map :focus-visible { outline: 2px solid var(--map-blue); outline-offset: 2px; }

.driver-map-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 20px 26px;
  padding: clamp(16px, 2.8vw, 26px);
  border: 1px solid var(--map-line);
  border-radius: 14px;
  background: linear-gradient(115deg, #f0f6ff, #fff 72%);
}

.driver-map-intro p, .driver-map-heading p { margin-top: 6px; color: var(--map-muted); }
.driver-map-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.driver-map-totals > div { display: grid; gap: 3px; border-left: 1px solid var(--map-line); padding-left: 14px; }
.driver-map-totals dt { font-size: .78rem; line-height: 1.3; font-weight: 660; color: var(--map-muted); }
.driver-map-totals dd { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.8rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 750; font-variant-numeric: tabular-nums; }

.driver-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 26%);
  align-items: start;
  gap: 16px;
}

.driver-map-card { min-width: 0; padding: 16px; border: 1px solid var(--map-line); border-radius: 12px; background: #fff; }
.driver-map-stage { background: #f9fbff; }
.driver-map-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; }
.driver-map-heading p, .driver-map-status, .driver-map-note { font-size: .88rem; }
.driver-map-legend { display: flex; align-items: center; gap: 6px; color: var(--map-muted); font-size: .75rem; font-weight: 650; }
.driver-map-legend span { width: 62px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e5effe, #285dae); }
.driver-map .driver-map-status { margin-block: 14px; color: var(--map-muted); }
.driver-map-status:not([hidden]) + svg { display: none; }

.driver-map-stage svg { display: block; width: 100%; height: auto; margin-block: 8px; }
.driver-map-stage [data-map-state] { cursor: pointer; }
.driver-map-stage [data-map-state] path { stroke: #fff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.driver-map-stage [data-map-state]:hover path,
.driver-map-stage [data-map-state]:focus-visible path { stroke: #142c52; stroke-width: 2; }
.driver-map-stage [data-map-state][aria-pressed=true] path { fill: #183d78; stroke: #0f2a52; stroke-width: 2; }

.driver-map-selection { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 9px 14px; padding: 10px 12px; border: 1px solid #c5dafa; border-radius: 9px; background: #eaf3ff; }
.driver-map-selection p { font-size: .92rem; font-weight: 750; }
.driver-map-search-action { padding: 8px 11px; border: 1px solid var(--map-blue); border-radius: 7px; background: var(--map-blue); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.driver-map-search-action:hover { background: #164382; }

.driver-map-states { display: grid; gap: 12px; }
.driver-map-field { display: grid; gap: 5px; color: var(--map-muted); font-size: .81rem; font-weight: 670; }
.driver-map-field input { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #bacbe0; border-radius: 8px; background: #fff; color: var(--map-ink); font: inherit; }
.driver-map-field input:disabled { background: #f5f8fc; }
.driver-map-state-list { display: grid; gap: 3px; max-height: min(48vh, 430px); min-height: 0; margin: 0; padding: 3px 5px 3px 3px; overflow: auto; list-style: none; }
.driver-map-state-list button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--map-ink); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.driver-map-state-list button:hover, .driver-map-state-list button[aria-pressed=true] { border-color: #ccdef5; background: #edf5ff; }
.driver-map-state-list strong { color: var(--map-blue); font-variant-numeric: tabular-nums; }
.driver-map-empty, .driver-map-note { color: var(--map-muted); }
.driver-map-empty { padding: 7px 5px; font-size: .86rem; }

@media (max-width: 950px) {
  .driver-map-intro { grid-template-columns: 1fr; }
  .driver-map-totals > div:first-child { padding-left: 0; border-left: 0; }
}

@media (max-width: 680px) {
  .driver-map-layout { grid-template-columns: 1fr; }
  .driver-map-card { padding: 12px; }
  .driver-map-totals { gap: 8px; }
  .driver-map-totals > div { padding-left: 8px; }
  .driver-map-state-list { max-height: 270px; }
}