/* Shared map look (R3, one map style). The colours every small station map reads, as variables,
   so a light theme would be a swap of this block (decision M-9: the app is dark only today, the
   light set below is prepared and unused). The network and traffic maps keep their own sheets
   (network-map.css, traffic-insights.css) except for the zoom buttons, which every map takes
   from here; the small maps reuse the traffic map's .om-map rules for the canvas, the road
   filter, the basemap buttons, the pin and the tooltip. */
:root {
    --map-canvas-a: #16293e;
    --map-canvas-b: #0c1623;
    --map-outline: rgba(148, 163, 184, 0.45);
    --map-region-fill: #2b3f63;
    --map-control-bg: #142236;
    --map-control-fg: #e2e8f0;
    --map-control-border: #485669;
    --map-control-hover: #243750;
    --map-hint-bg: rgba(15, 23, 42, 0.86);
    --map-hint-fg: #f1f5f9;
}

[data-map-theme="light"] {
    --map-canvas-a: #eef3f9;
    --map-canvas-b: #dfe7f1;
    --map-outline: rgba(71, 85, 105, 0.45);
    --map-region-fill: #c9d6e6;
    --map-control-bg: #ffffff;
    --map-control-fg: #1e293b;
    --map-control-border: #94a3b8;
    --map-control-hover: #e2e8f0;
    --map-hint-bg: rgba(255, 255, 255, 0.92);
    --map-hint-fg: #0f172a;
}

/* .leaflet-container too: leaflet.css arrives later and would paint its #ddd over the canvas */
.ssm-map, .ssm-map.leaflet-container { position: relative; background: radial-gradient(ellipse at 50% 45%, var(--map-canvas-a) 0%, var(--map-canvas-b) 72%); }
.ssm-map .ssm-pin:focus-visible { outline: 3px solid #facc15; outline-offset: 4px; }

/* The zoom buttons of EVERY map (small station maps, network map .nm-map, traffic map .om-map):
   navy, and 44 px on touch below (Mariusz, round 1, D-MAP2). Only the zoom control: the traffic
   map's "Cała Polska" button is a Leaflet bar too and keeps its own look. .leaflet-container in
   the selectors because leaflet.css is appended last and wins any tie. */
.ssm-map.leaflet-container .leaflet-control-zoom.leaflet-bar,
.nm-map.leaflet-container .leaflet-control-zoom.leaflet-bar,
.om-map.leaflet-container .leaflet-control-zoom.leaflet-bar { border: 1px solid var(--map-control-border); box-shadow: none; }
.ssm-map.leaflet-container .leaflet-control-zoom.leaflet-bar a,
.nm-map.leaflet-container .leaflet-control-zoom.leaflet-bar a,
.om-map.leaflet-container .leaflet-control-zoom.leaflet-bar a { background: var(--map-control-bg); color: var(--map-control-fg); border-color: var(--map-control-border); }
.ssm-map.leaflet-container .leaflet-control-zoom.leaflet-bar a:hover,
.nm-map.leaflet-container .leaflet-control-zoom.leaflet-bar a:hover,
.om-map.leaflet-container .leaflet-control-zoom.leaflet-bar a:hover { background: var(--map-control-hover); }

/* Phone: one finger scrolled the page, so say how the map moves. Centred, never in the way of
   a tap (pointer-events none), gone after a moment. */
.ssm-hint {
    position: absolute; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 0 16px;
    background: var(--map-hint-bg); color: var(--map-hint-fg);
    font-size: 0.9rem; font-weight: 500; text-align: center;
    opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.ssm-hint.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ssm-hint { transition: none; } }

/* Touch: Leaflet's 30 px zoom buttons are under every thumb; 44 px on every map. The network and
   traffic maps had this rule in their own sheets, but leaflet.css (.leaflet-touch .leaflet-bar a)
   loads later and beat it, so it never applied there; these selectors are specific enough. */
@media (max-width: 991.98px) {
    .ssm-map.leaflet-container .leaflet-control-zoom,
    .nm-map.leaflet-container .leaflet-control-zoom,
    .om-map.leaflet-container .leaflet-control-zoom { width: 44px; }
    .ssm-map.leaflet-container .leaflet-bar.leaflet-control-zoom a,
    .nm-map.leaflet-container .leaflet-bar.leaflet-control-zoom a,
    .om-map.leaflet-container .leaflet-bar.leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 24px; }
}