/* ==========================================================================
   TrafficInsights ("Ruch i klienci"): card row, detail page, network section,
   origin map. Global because Leaflet renders its own DOM outside Blazor scoping.
   ========================================================================== */

.ti-section { margin-bottom: 1.5rem; }
.ti-section .section-header { flex-wrap: wrap; }
.ti-link { margin-left: auto; color: #60a5fa; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.ti-link:hover { color: #93c5fd; }
.ti-link .oi { font-size: 0.7rem; margin-left: 0.25rem; }

.ti-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.4fr);
    gap: 1rem;
}
/* ONE tile style for the whole traffic feature (review round 2, W5). Every traffic tile is the
   TrafficKpiTile component, whether it sits four across on the network page, in the dashboard
   card row or six across in the station hero, so it is drawn here once: same padding, radius
   (from .glass-card), badge, value and sub line typography, and the same hover lift. Only the
   grid around the tiles changes from place to place. */
.ti-tile {
    display: flex; flex-direction: column; gap: 0.2rem; min-height: 120px; padding: 1rem 1.15rem;
    text-decoration: none; color: inherit; transition: transform 0.2s ease, border-color 0.2s ease;
}
.ti-tile:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.2); color: inherit; }
/* The station hero tiles switch the tab below them; the one whose tab is showing says so. */
.ti-tile.is-active { border-color: rgba(96, 165, 250, 0.55); }
/* two lines reserved: an English label that wraps must not drop its tile's value a line below
   the rest of the row (GUI review B.10) */
.ti-label { font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-weight: 500; min-height: 2.2em; }
.ti-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.ti-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); line-height: 1.35; }
.ti-warn { color: #fde68a; }
.ti-map { min-height: 120px; }
.ti-map .om-card { height: 100%; }

/* Station traffic hero (review round 1, W3): six tiles, one per question, no map thumbnail.
   Six across on a wide desktop, three across (so two even rows) on a normal one, then two,
   then stacked. A tile that owns a tab is a button, so strip the browser's button look and
   let .glass-card and .ti-tile do the drawing. */
.ti-hero-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ti-tile-btn { appearance: none; -webkit-appearance: none; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.ti-tile-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* Chart series palette. One blue, one amber, one near-white neutral: three steps of lightness
   as well as three hues, which is what keeps them apart for a colour-blind reader and in print.
   The DxChart series read these same values as constants in StationTrafficView.razor; kept here
   so any HTML legend swatch for the same charts can use the palette without re-inventing it. */
:root {
    --ti-series-1: #3b82f6;
    --ti-series-2: #f59e0b;
    --ti-series-3: #e2e8f0;
}
.ti-legend i.ti-s1 { background: var(--ti-series-1); }
.ti-legend i.ti-s2 { background: var(--ti-series-2); }
.ti-legend i.ti-s3 { background: var(--ti-series-3); }

/* detail page */
/* Stack according to the content width, including space taken by the app sidebar.
   Allow 30rem per card with wrapping headings; half the grid width caps the layout at two columns. */
.ti-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(30rem, calc(50% - .75rem))), 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.ti-detail-grid > * { min-width: 0; }
.ti-detail-grid .full { grid-column: 1 / -1; }
.ti-table th { white-space: nowrap; }
.ti-detail-grid .ti-table th { white-space: normal; }
.ti-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ti-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ti-table th { text-align: left; color: rgba(255, 255, 255, 0.6); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.3px; text-transform: uppercase; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ti-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }
.ti-table td.n, .ti-table th.n { text-align: right; }
.ti-table tr.ti-clickable { cursor: pointer; }
.ti-table tr.ti-clickable:hover td { color: #fff; background: rgba(255, 255, 255, 0.04); }
.ti-muted { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }
/* The top places table beside the station origin map (StationTrafficView). A long place such as
   "Ożarów Mazowiecki (pow.)" was cut mid word with no ellipsis; it now ends in an ellipsis on one
   line and the cell's title carries the full name for hover. Min-width 0 does nothing for a cell of
   an auto table, so the cell uses the table form of the same idea: max-width 0 takes the name out
   of the column minimums, so the column can shrink below the name instead of pushing the table
   wider, and width 100% hands the name every pixel the figures do not need. The price is that the
   figure headers drop to their narrowest, one word per line. On a card wide enough to hold them on
   one line (the Polish ones take about 345 px, so 38rem leaves the name over 250 px) the container
   query puts them back on one line, as they were before. */
.ti-table td.ti-place-cell { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The one multi word figure header keeps room for two lines ("Wizyt na / pojazd", "Visits per /
   vehicle"), as before the ellipsis change; without a floor the greedy name column squeezed it to one
   word per line. Measured need at 11.52 px: 56.6 px PL and 59 px EN of text plus 16 px padding, so 78 px.
   Only this column gets the floor, so the place names keep the rest of the card. */
.ti-places-card .ti-table th.ti-th-two-line { min-width: 78px; }
.ti-places-card { container: ti-places / inline-size; }
@container ti-places (min-width: 38rem) {
    .ti-places-card .ti-table th.n { white-space: nowrap; }
}
.ti-note { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; margin-top: 0.75rem; line-height: 1.4; }
.ti-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.5rem; }
.ti-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.ti-donut-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ti-tabs-body { padding-top: 1rem; }
.ti-placeholder { padding: 2rem 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); }
.ti-kv { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; font-size: 0.85rem; }
.ti-kv .k { color: rgba(255, 255, 255, 0.6); }
.ti-kv .v { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }

/* origin map */
.om-card { padding: 0; overflow: hidden; }
.om-card-thumb { cursor: pointer; }
.om-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.om-spacer { flex: 1; }
.om-crumbs { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; flex-wrap: wrap; }
.om-crumbs button { background: transparent; color: #60a5fa; border: 0; padding: 0.1rem 0.25rem; cursor: pointer; font: inherit; }
.om-crumbs button:disabled { color: #fff; cursor: default; font-weight: 600; }
.om-sep { color: rgba(255, 255, 255, 0.4); }
.om-toggle { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; margin: 0; }
.om-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.om-surface { min-width: 0; }
.om-map { background: radial-gradient(ellipse at 50% 45%, #16293e 0%, #0c1623 72%); min-height: 120px; }
/* Quiet terrain colours only; traffic overlays, pins and controls retain their contrast. */
.om-map .om-road-tiles { filter: saturate(.25) contrast(.95) brightness(var(--om-road-brightness, .8)); }
.om-fallback { padding: 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.om-thumb .leaflet-control-container { display: none; }
.om-map .om-basemaps { background: rgba(15,23,42,.94); color: #e2e8f0; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 6px 10px; font: 12px/1.5 sans-serif; }
.om-basemaps label { display: block; margin: 0; cursor: pointer; }
.om-basemaps input { accent-color: #60a5fa; }
.om-map .om-reset { border: 0; box-shadow: none; }
.om-reset button, .om-map-controls button { display: block; border: 1px solid #3a4d65; border-radius: 7px; background: #111f31ed; color: #dce9f7; padding: 6px 10px; min-height: 34px; font: 500 12px/1.4 system-ui; cursor: pointer; }
.om-reset button:hover, .om-map-controls button:hover { background: #263e59; }
.om-map-controls { display: grid; justify-items: end; gap: 6px; }
.om-map-controls button[aria-pressed="true"] { border-color: #60a5fa; background: #284a70; color: #fff; }
.om-map-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.om-reset button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.om-side { border-left: 1px solid rgba(255, 255, 255, 0.1); padding: 0.85rem 1rem; font-size: 0.85rem; overflow: auto; max-height: 520px; }
.om-side h5 { margin: 0 0 0.35rem; font-size: 0.95rem; color: #fff; }
.om-hint { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; }
.om-note { color: #fde68a; margin-top: 0.4rem; }
.om-list { margin-top: 0.6rem; }
.om-row { display: flex; justify-content: space-between; padding: 0.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; color: rgba(255, 255, 255, 0.8); }
.om-row:hover { color: #fff; }
.om-kv { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.9rem; font-size: 0.85rem; margin: 0.4rem 0; }
.om-kv .k { color: rgba(255, 255, 255, 0.6); }
.om-kv .v { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.om-chip { display: inline-block; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.72rem; background: rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 0.05rem 0.35rem; margin: 0.15rem 0.2rem 0.15rem 0; }
.om-station-pin svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.om-station-cluster { display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: #0a2f6b; color: #fff; box-shadow: 0 0 0 5px rgba(96,165,250,.35), 0 2px 5px rgba(0,0,0,.4); box-sizing: border-box; font: 700 14px/1 sans-serif; }
.om-station-pin:focus-visible, .om-station-cluster:focus-visible { outline: 3px solid #facc15; outline-offset: 4px; }
.om-thumb .om-station-cluster { pointer-events: none; }
.om-metric-marker { background: none; border: 0; text-align: center; }
.om-metric-ring { width: 100%; height: 100%; padding: 3px; border-radius: 50%; box-shadow: 0 3px 12px #0009; }
.om-metric-ring > span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: #152438; color: #fff; border-radius: 50%; font: 600 13px/1.1 system-ui; }
.om-metric-ring b { font-weight: 600; }
.om-metric-ring b.om-long-value { font-size: 11px; }
.om-metric-ring em { font: normal 8px/1.3 system-ui; color: #c6d7e9; }
.om-metric-ring svg { width: 19px; height: 27px; display: block; }
.om-metric-marker small { position: absolute; top: 45px; left: 50%; transform: translateX(-50%); color: #f0f6ff; background: #142339f2; border: 1px solid #3a4d65; padding: 1px 5px; border-radius: 4px; font: 600 10px/1.5 system-ui; white-space: nowrap; }
.om-metric-marker small span { font-weight: 400; color: #b9cde1; }
.om-metric-marker:focus-visible { outline: 3px solid white; outline-offset: 4px; border-radius: 50%; }
.om-metric-marker:hover .om-metric-ring { box-shadow: 0 0 0 2px #fff, 0 3px 12px #0009; }
.om-thumb .om-metric-ring em { display: none; }
.om-thumb .om-metric-ring b { font-size: 10px; }
.om-thumb .om-metric-ring svg { width: 13px; height: 19px; }
.om-map .leaflet-control-attribution { background: #142236d9; color: #b9cadc; font-size: 9px; }
.om-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; background: #111d2c; color: #c5d6e8; border-top: 1px solid #29384c; padding: 0.5rem 0.65rem; font-size: 0.72rem; line-height: 1.5; }
.om-cluster-hint { color: #b9cde1; flex-basis: 100%; }
.om-legend i { display: inline-block; width: 22px; height: 10px; margin-right: 0.35rem; vertical-align: -1px; }
.om-legend .om-ramp { display: flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0 0.35rem; }
.om-legend .om-ramp i { width: 16px; margin: 0; }
.om-row-head { color: rgba(255, 255, 255, 0.5); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px; cursor: default; border-bottom: 0; }
.om-legend i.om-dot { width: 10px; border-radius: 50%; }
.om-legend i.om-legend-pin { display: inline-block; width: 12px; height: 16px; margin-right: 4px; vertical-align: middle; }
.om-legend-pin svg { width: 100%; height: 100%; }
.om-legend i.om-legend-cluster { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 4px; border: 1px solid #fff; border-radius: 50%; background: #0a2f6b; color: #fff; font: 700 10px/1 sans-serif; }
.leaflet-container { font: inherit; }
.leaflet-tooltip.om-tip { background: #0f172a; color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); font-size: 0.78rem; }
.leaflet-tooltip.om-tip::before { display: none; }

@media (max-width: 1499.98px) {
    .ti-hero-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
    .ti-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ti-map { grid-column: 1 / -1; min-height: 200px; }
    .ti-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
    .ti-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .om-wrap { grid-template-columns: 1fr; }
    .om-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); max-height: 260px; }
}
@media (max-width: 575.98px) {
    .om-surface .om-map { height: 420px !important; }
    .ti-row { grid-template-columns: 1fr; }
    .ti-stat-row { grid-template-columns: 1fr; }
    .ti-hero-row { grid-template-columns: 1fr; }
    .ti-value { font-size: 1.35rem; }
    /* the donut row is a flex row whose long label column used to push the value column out of
       the card, so the distance card showed three labels and no numbers (GUI review B.11) */
    .ti-donut-row { flex-direction: column; align-items: stretch; }
    .ti-donut-row .ti-kv { width: 100%; }
    .ti-kv { min-width: 0; }
    /* and the second half of the same defect: a wide table stretched its card past the viewport,
       taking the values with it. Each table scrolls inside itself instead. */
    .ti-table { display: block; overflow-x: auto; width: 100%; }
    /* Inside a table that scrolls, width 100% on the top places name would give it only what the
       figures leave of the phone's width, about 100 px on a 375 px phone. A fixed cap keeps a
       readable name with its ellipsis, and the figures scroll into view beside it as before. */
    .ti-table td.ti-place-cell { width: auto; max-width: 11rem; }
}

/* ---- Station page shell: "Bezpieczeństwo" and "Ruch i klienci" ---- */
/* Two tabs must wrap, never push the page sideways at 375 px. */
.station-view-tabs { margin-bottom: 0.75rem; }
.station-view-tabs .dxbl-tabs-tablist ul,
.station-view-tabs dxbl-tab-list ul { flex-wrap: wrap !important; }

@media (max-width: 575.98px) {
    .station-view-tabs .dxbl-tabs-item,
    .station-view-tabs dxbl-tab-item { padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; }
}

/* ---- Tile icon badges ---- */
/* One tile style across the site: the traffic tiles carry the same coloured icon badge as
   the security KPI tiles on the client dashboard (44 px square, 10 px radius, tinted
   background with a matching icon), in the blue and teal family traffic already uses. */
.ti-tile-head { display: flex; align-items: center; gap: 12px; }
.ti-tile-head .ti-label { min-height: 0; }
.ti-badge {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; font-size: 1.2rem; flex-shrink: 0;
    background: rgba(59, 130, 246, 0.15); color: #60a5fa;
}
.ti-badge-visits { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.ti-badge-vehicles { background: rgba(34, 211, 238, 0.15); color: #22d3ee; }
.ti-badge-returning { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.ti-badge-foreign { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.ti-badge-origin { background: rgba(14, 165, 233, 0.15); color: #38bdf8; }
.ti-badge-day { background: rgba(129, 140, 248, 0.15); color: #a5b4fc; }

/* ---- Map level switch ---- */
/* Was a breadcrumb path and did not read as clickable (review round 1). Same visual
   language as the period preset buttons on the dashboard period bar. */
.om-switch { display: inline-flex; background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 3px; gap: 2px; }
.om-crumbs .om-switch-btn {
    padding: 0.35rem 0.85rem; background: transparent; border: none; border-radius: 8px;
    color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s ease; min-width: 44px; white-space: nowrap;
}
.om-crumbs .om-switch-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.om-crumbs .om-switch-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(99, 102, 241, 0.5));
    color: #fff; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.om-crumbs .om-switch-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

@media (max-width: 767.98px) {
    /* 44 px touch targets, as on the period bar */
    .om-crumbs .om-switch-btn { min-height: 44px; }
    .ti-badge { width: 38px; height: 38px; font-size: 1.05rem; }
}
@media (max-width: 575.98px) {
    .ti-badge { width: 34px; height: 34px; border-radius: 8px; font-size: 0.95rem; }
    .ti-tile-head { gap: 10px; }
    /* the head must wrap rather than push the tile, and with it the page, sideways */
    .om-crumbs { min-width: 0; }
    .om-switch { flex-wrap: wrap; }
}

/* ==========================================================================
   "Ruch i klienci" network page, option C of the 16.09 front end review
   ========================================================================== */
/* The page said its own name twice above the fold: once in the app header, once again as a
   heading over the tiles. The heading is gone from the page, the period and the station count
   it carried ride in the period row, and the map moved above the tiles. */

/* Caption on the left, the presets, the month pickers and the refresh on the right. The
   selector keeps its natural width, because its own controls already wrap when they have to,
   so it is the caption that gives way first. */
.ti-period-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
.ti-period-caption { min-width: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.ti-period-row > .period-selector { flex: 0 0 auto; margin-left: auto; }

/* Phone: caption above the controls, so a narrow screen loses nothing and gains nothing. */
@media (max-width: 639.98px) {
    .ti-period-row { flex-direction: column; align-items: stretch; }
    .ti-period-row > .period-selector { margin-left: 0; }
}

/* TrafficNetworkTiles is shared with the client dashboard, where its heading is the only thing
   naming the block, so the heading cannot simply come out of the component. On this page the app
   header says it already, so the page hides it here. A ShowHeader parameter on the component
   would be the cleaner fix. */
.ti-tiles-headless > .ti-section > .section-header { display: none; }

/* The page's section gap under the map card: the tiles below it start with their heading hidden,
   so nothing else separated the two and they touched (P48, 25.09). 1.5rem is the gap every other
   section on this page keeps (the period row, .ti-section, the blocks of the details below). */
.ti-network-map-card { margin-bottom: 1.5rem; }

/* The map canvas follows the window on a desktop instead of standing at a fixed 480 px, the way
   the map on /client/network-map does. The chrome above and below the canvas, measured on the new
   order at 1366x768: 19 above the app header + 63 header + 89 period row + 24 of margin under it
   + 58 card head + 64 legend + 24 of air under the card + 2 of card border = 343, taken as 344.
   At 768 high that asks for 424 and the 480 floor wins, and 480 still fits, because moving the
   card above the tiles lifted it 227 px, from y424 to y197. At 1080 high it is 736. The 760
   ceiling stops a very tall window from turning the whole page into one map.
   Scoped to the wrapper the network page puts around its own interactive map, so neither the
   dashboard thumbnail (Interactive="false", .om-card-thumb, TrafficInsightsCardRow.razor) nor the
   station traffic map is touched. Below 1024 px nothing changes: the phone keeps the 480 px it was
   measured at, and its 420 px under 576 px, because there the height was never the complaint. */
@media (min-width: 1024px) {
    .ti-network-map-card { --ti-map-h: clamp(480px, calc(100vh - 344px), 760px); }
    /* the height arrives as a style attribute on the element, so this has to say important */
    .ti-network-map-card .om-map { height: var(--ti-map-h) !important; }
    /* and the panel beside the map ends where the legend under the map ends: it carries a 520 px
       cap of its own, which a taller map would leave as a strip of empty panel. The ranked list
       inside it runs to that edge (OriginMap.razor.css and TrafficMapPanel.razor.css). */
    .ti-network-map-card .om-side { max-height: calc(var(--ti-map-h) + 64px); }
}

/* "Grupuj" is a lone toggle: unlike the "Stonowana | Drogowa" pair it has no off sibling to be
   read against, so it has to say on by itself. It says it in the same language the network map's
   own group chip uses (network-map.css .nm-chip.on), laid over the control's own opaque ground so
   the map cannot show through it, and it stands as tall as the two basemap buttons above it. */
.om-map-controls .om-group-button { min-height: 34px; }
.om-map-controls .om-group-button[aria-pressed="true"] {
    background: linear-gradient(rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0.16)), #111f31ed;
    border-color: rgba(96, 165, 250, 0.55);
    color: #fff;
}

/* Leaflet draws its own zoom buttons at 30px square, which is well under the 44px touch target
   the rest of this page keeps on a phone, and they sit right where a thumb lands on the map.
   Only below 992px, where the pointer is a finger, and only inside .om-map, the container of the
   traffic map, so no other map control on the site is resized. The glyph grows with the button,
   otherwise a 44px square would read as a smaller plus sign than the 30px one it replaces. */
@media (max-width: 991.98px) {
    .om-map .leaflet-control-zoom a {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 22px;
    }
}