/* ==========================================================================
   Station network map ("Mapa stacji"): the whole network of one client, the
   ranking beside it and the station card.

   Global, not scoped, for the same reason traffic-insights.css is: Leaflet
   draws its tooltips and panes outside the Blazor component, so scoped rules
   never reach them.
   ========================================================================== */

.nm { display: flex; flex-direction: column; gap: 0.85rem; }

/* ── the four figures above the map ─────────────────────────────────────── */
.nm-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.nm-kpi {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    min-width: 0;
}
.nm-k {
    font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6); font-weight: 500;
    /* two lines reserved: a wrapping English label must not push its value below the row */
    min-height: 2.2em;
}
.nm-v { font-size: 1.45rem; font-weight: 700; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.nm-n { font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); line-height: 1.35; }
.nm-loss { color: #f87171; }
.nm-rec { color: #34d399; }

/* ── filters ────────────────────────────────────────────────────────────── */
.nm-controls { display: flex; flex-direction: column; gap: 0.5rem; }
.nm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nm-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.nm-chip:hover { border-color: rgba(96, 165, 250, 0.6); color: #fff; }
.nm-chip.on { background: rgba(96, 165, 250, 0.16); border-color: rgba(96, 165, 250, 0.55); color: #fff; }
.nm-cnt { font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }
.nm-chip.on .nm-cnt { color: rgba(255, 255, 255, 0.75); }

.nm-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nm-lbl {
    font-size: 0.7rem; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.nm-filters select, .nm-search {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff; border-radius: 7px; padding: 0.3rem 0.5rem; font-size: 0.8rem;
}
.nm-filters select option { background: #14202e; color: #fff; }
.nm-search { min-width: 180px; }
.nm-filters select:focus-visible, .nm-search:focus-visible, .nm-chip:focus-visible,
.nm-row:focus-visible, .nm-crumb:focus-visible, .nm-base-button:focus-visible,
.nm-open:focus-visible {
    outline: 2px solid #60a5fa; outline-offset: 2px;
}

/* ── the state dots, one vocabulary for map, chips, legend and list ─────── */
.nm-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid transparent; flex: none;
}
.nm-protected { background: #2fbf87; border-color: #2fbf87; }
.nm-known { background: transparent; border-color: #f0a533; }
.nm-unknown { background: transparent; border-color: #7b8ca5; }

/* ── map and panel ──────────────────────────────────────────────────────── */
/* The workspace row. Its height is set once, further down, from the space actually left under
   the controls; putting a second height here is what let a stale constant survive. */
.nm-panes {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.75rem;
}
.nm-mapwrap {
    position: relative; min-height: 0; min-width: 0;
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px; overflow: hidden;
}
.nm-map { flex: 1 1 0; min-height: 0; width: 100%; background: #0d1520; }
/* The crumbs are only the shell now: the "whole country" control carries its own solid
   background, and a second panel behind it just muddied the one chip on the map. */
.nm-crumbs {
    position: absolute; top: 0.55rem; left: 0.6rem; z-index: 500;
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem;
}
/* The same chip the traffic map puts over its own canvas for "Cała Polska"
   (traffic-insights.css .om-reset button, measured 83x34): here it was plain blue text and read
   as a caption, not as a way back. The values are copied, not imported: the two stylesheets ship
   to different pages and neither may start depending on the other. */
.nm-crumb {
    display: inline-flex; align-items: center; min-height: 34px;
    padding: 6px 10px; border: 1px solid #3a4d65; border-radius: 7px;
    background: #111f31ed; color: #dce9f7; font: 500 12px/1.4 system-ui; cursor: pointer;
}
.nm-crumb:hover { background: #263e59; color: #fff; }
/* Nothing dark stands behind the trail any more, so it carries its own shadow over road tiles. */
.nm-sep { color: rgba(255, 255, 255, 0.55); text-shadow: 0 2px 8px #071019; }
.nm-here { color: #fff; text-shadow: 0 2px 8px #071019; }
/* Two named basemaps where one unlabelled toggle used to be, the control the traffic map already
   shows over its canvas (traffic-insights.css .om-map-controls button): the pressed one is the
   one you are on, so the quiet basemap finally has a name. */
.nm-basemaps { position: absolute; top: 0.55rem; right: 0.6rem; z-index: 500; display: inline-flex; gap: 6px; }
.nm-base-button {
    min-height: 34px; padding: 6px 10px; cursor: pointer;
    border: 1px solid #3a4d65; border-radius: 7px;
    background: #111f31ed; color: #dce9f7; font: 500 12px/1.4 system-ui;
}
.nm-base-button:hover { background: #263e59; color: #fff; }
.nm-base-button[aria-pressed="true"] { border-color: #60a5fa; background: #284a70; color: #fff; }
.nm-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding: 0.45rem 0.7rem; font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nm-leg { display: inline-flex; align-items: center; gap: 0.35rem; }
.nm-leg-sp { flex: 1; }
.nm-leg-warn { color: #fde68a; }
/* The sentence naming the markers is not here: a full-width line of its own under the canvas took
   42 px off the map on a 768 px screen, so it reads on the .nm-foot line under the workspace. */

.nm-panel {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px; overflow: hidden;
}
.nm-scope { padding: 0.75rem 0.85rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nm-scope-name { font-size: 1.05rem; font-weight: 600; color: #fff; }
.nm-scope-meta { font-size: 0.76rem; color: rgba(255, 255, 255, 0.55); }
.nm-rank {
    padding: 0.4rem 0.85rem; font-size: 0.7rem; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nm-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.nm-empty { padding: 1.2rem 0.85rem; color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; }

.nm-row {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 52px;
    gap: 0.5rem; align-items: center; width: 100%; text-align: left;
    padding: 0.4rem 0.85rem; background: none; border: 0; cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nm-row:hover { background: rgba(255, 255, 255, 0.05); }
.nm-rk { font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); text-align: right; }
.nm-nm { min-width: 0; }
.nm-nm b {
    display: block; font-size: 0.82rem; font-weight: 500; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-nm i {
    display: flex; align-items: center; gap: 0.3rem;
    font-style: normal; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5);
}
.nm-vv { font-size: 0.82rem; font-weight: 600; color: #fff; white-space: nowrap; }
.nm-spark { display: block; }
.nm-bar { fill: #f87171; opacity: 0.85; }
.nm-gap { fill: rgba(255, 255, 255, 0.12); }

.nm-foot {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.45);
}
.nm-foot-note { color: rgba(255, 255, 255, 0.4); }
/* The marker legend is the long one of the three sentences here, and with all three in one flow
   the footer ran to three rows at 1366 px: measured 491 + 647 + 446 px of text against 1010 px of
   line. It gets a line of its own under the other two instead. `order` puts it last whatever the
   markup order is, and the full basis keeps the timeline legend and the rejected note together on
   the first row, which is where they already were. */
.nm-foot-marker { order: 1; flex-basis: 100%; }

/* ── station card ───────────────────────────────────────────────────────── */
.nm-card { padding: 0.8rem 0.85rem; overflow-y: auto; min-height: 0; }
/* "Wróć do rankingu" is the shared PanelBackButton (Components/Shared/PanelBackButton.razor.css). */
.nm-card-name { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; }
.nm-card-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }
.nm-pill {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
    padding: 0.14rem 0.55rem; border-radius: 999px; font-size: 0.7rem;
    letter-spacing: 0.4px; text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.75);
}
.nm-pill-protected { border-color: rgba(47, 191, 135, 0.6); color: #6ee7b7; }
.nm-pill-known { border-color: rgba(240, 165, 51, 0.6); color: #fbbf24; }

.nm-note {
    margin: 0.6rem 0 0; padding-left: 0.55rem; font-size: 0.74rem; line-height: 1.4;
    color: rgba(255, 255, 255, 0.55); border-left: 2px solid rgba(255, 255, 255, 0.14);
}
.nm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.8rem; }
.nm-stat {
    padding: 0.5rem 0.6rem; border-radius: 8px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
}
.nm-stat span {
    display: block; font-size: 0.68rem; letter-spacing: 0.4px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.nm-stat b { font-size: 1rem; font-weight: 600; color: #fff; }
.nm-sec { margin-top: 1rem; }
.nm-sec h3 {
    margin: 0 0 0.35rem; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45); font-weight: 600;
}
/* Monthly loss: bar height is the money, and nothing else rides on the bar. Every rule here is
   scoped under .nm-bars because .nm-bar is also an SVG rect in the ranking sparkline, where a
   CSS width would override the drawn geometry. */
.nm-bars { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.nm-bars .nm-cell {
    position: relative; flex: 1; min-width: 2px; height: 100%;
    display: flex; align-items: flex-end;
}
.nm-bars .nm-bar, .nm-bars .nm-bar-gap { width: 100%; border-radius: 1px 1px 0 0; }
.nm-bars .nm-bar { background: #f87171; opacity: 0.8; }
.nm-bars .nm-bar-gap {
    height: 100%;
    background: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14) 2px,
        transparent 2px, transparent 4px);
}

/* The second variable, in a mark of its own and in a colour that is not money: which months the
   cameras recorded traffic. It shares the bars' cell width, so the strip reads month for month
   against the chart above it. */
.nm-chart-lead {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0.2rem 0 0.4rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.6);
}
.nm-lane-lead { margin-top: 0.8rem; }
.nm-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.nm-key-camera { background: #60a5fa; }
.nm-lane { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.nm-lane-cell {
    position: relative; flex: 1; min-width: 2px; height: 3px;
    border-radius: 1px; background: rgba(255, 255, 255, 0.12);
}
.nm-lane-cell.on { height: 10px; background: #60a5fa; }
/* First month with observed traffic: the same anchor the before and after section uses. */
.nm-monthly .nm-first::before {
    content: ""; position: absolute; left: -2px; top: 0; bottom: 0;
    border-left: 1px dashed rgba(159, 197, 255, 0.85);
}
.nm-bars .nm-cell.nm-first::before { bottom: -3px; }
.nm-lane-cell.nm-first::before { top: -5px; }
.nm-axis {
    display: flex; justify-content: space-between; margin-top: 0.2rem;
    font-size: 0.66rem; color: rgba(255, 255, 255, 0.4);
}
.nm-know { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; }
.nm-know li { position: relative; padding: 0.16rem 0 0.16rem 1.15rem; color: rgba(255, 255, 255, 0.7); }
.nm-know li::before { position: absolute; left: 0; top: 0.16rem; }
.nm-know li.y::before { content: "+"; color: #34d399; font-weight: 700; }
.nm-know li.n::before { content: "-"; color: rgba(255, 255, 255, 0.35); font-weight: 700; }
.nm-open {
    margin-top: 0.9rem; padding: 0.45rem 0.85rem; border-radius: 7px; border: 0; cursor: pointer;
    background: #2563eb; color: #fff; font-size: 0.82rem; font-weight: 500;
}
.nm-open:hover { background: #1d4ed8; }

/* ── Leaflet's own DOM ──────────────────────────────────────────────────── */
.nm-tooltip.leaflet-tooltip {
    background: rgba(13, 21, 32, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px; color: #fff; padding: 0.4rem 0.55rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.nm-tooltip.leaflet-tooltip::before { border-top-color: rgba(255, 255, 255, 0.16); }
.nm-tip { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.76rem; }
.nm-tip b { font-size: 0.82rem; }
.nm-tip-city { color: rgba(255, 255, 255, 0.6); }
.nm-tip-state { color: rgba(255, 255, 255, 0.5); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; }
.nm-tip-value { font-weight: 600; margin-top: 0.15rem; }

/* ── narrower screens: the panel goes under the map, never beside it ────── */
@media (max-width: 1200px) {
    .nm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .nm-panes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
    .nm-mapwrap { height: 52dvh; min-height: 320px; }
    .nm-panel { max-height: 60dvh; }
    .nm-search { min-width: 140px; flex: 1; }
}
@media (max-width: 575px) {
    .nm-kpis { grid-template-columns: minmax(0, 1fr); }
    .nm-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .nm-row .nm-spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nm-chip, .nm-row { transition: none; }
}
/* Discovery workspace: map dominates, the inspector follows the selection. */
.nm { gap: .65rem; }
.nm-discovery-tabs { max-width: 620px; }
.nm-discovery-tabs .dxbl-tabs-content { display: none; }
.nm-controls { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.nm-focus, .nm-presets, .nm-period-range { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
/* Clear is one of the focus chips: same shape as its neighbours, and orange while a filter is active, like the plate workbench. */
.nm-focus .nm-chip, .nm-focus .nm-filter-reset { border-radius: 7px; padding: .45rem .7rem; min-height: 34px; }
.nm-filter-reset {
    display: inline-flex; align-items: center; gap: .4rem; margin-left: .35rem;
    background: transparent; border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .65); font-size: .8rem; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nm-filter-reset .nm-clear-mark { font-size: 1.05rem; line-height: 1; }
.nm-filter-reset.on {
    border-color: #fbbf24; background: #9a4e0d; color: #fff7ed;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}
.nm-filter-reset.on:hover { border-color: #fcd34d; background: #7c3f0c; color: #fff; }
.nm-filter-reset:disabled {
    cursor: default; opacity: .45; box-shadow: none; background: transparent;
    border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .5);
}
.nm-filter-reset:focus-visible { outline: 2px solid #66bfff; outline-offset: 2px; }
/* Touch: the same control has to be hittable with a thumb, and both classes are named so the phone rule for .nm-chip below cannot undercut it. */
@media (max-width: 991px) { .nm-focus .nm-chip, .nm-focus .nm-filter-reset { min-height: 44px; } }
@media (max-width: 575px) { .nm-focus .nm-chip, .nm-focus .nm-filter-reset { padding: .35rem .5rem; font-size: .74rem; } }
.nm-period { padding: .65rem .85rem; background: #111d2c; border: 1px solid #263448; border-radius: 10px; }
.nm-period .nm-chip { border-radius: 6px; min-height: 34px; }
.nm-period .nm-chip:disabled { opacity: .4; cursor: default; }
.nm-period-range { margin-left: auto; }
.nm-window { color: #e4ecf7; font-size: .82rem; min-width: 145px; text-align: center; }
.nm-end-combo { width: 150px; }
.nm-period-note, .nm-timeline-foot, .nm-data-note { color: #b3c2d5; font-size: .73rem; }
.nm-data-note { margin: 0; max-width: 650px; }
.nm-timeline { width: 100%; min-width: 0; }
/* Under the range selector, never over its month labels: the caption used to be pulled up by a
   negative margin and landed on the axis. Scope, legend and affordance sit apart by kind. */
.nm-timeline-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem 1rem;
    margin-top: .25rem; font-size: .7rem;
}
.nm-timeline-legend { display: inline-flex; align-items: center; gap: .3rem; }
.nm-timeline-legend .nm-key { margin-left: .55rem; }
.nm-timeline-legend .nm-key:first-child { margin-left: 0; }
.nm-key-loss { background: #f87171; }
.nm-key-rec { background: #34d399; }
.nm-timeline-hint { margin-left: auto; color: #9db0c7; }
/* Poland is close to square, so a map card near 1.85:1 spends its extra width on empty sea while
   the ranking beside it runs out of rows. The inspector grows with the screen instead. */
.nm-panes { grid-template-columns: minmax(0, 1fr) clamp(380px, 28%, 500px); }
.nm-mapwrap { background: #0c1623; border-color: #2b3c52; }
.nm-map { background: radial-gradient(ellipse at 50% 45%, #16293e 0%, #0c1623 72%); }
.nm-panel { background: #111d2c; border-color: #29384c; }
.nm-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; padding: .35rem; flex-shrink: 0; border-bottom: 1px solid #2a384b; }
.nm-kpi { border: 0; background: transparent; border-radius: 0; padding: .6rem; }
.nm-k { color: #b7c6d8; font-size: .67rem; min-height: 0; }
.nm-v { font-size: 1.35rem; }
.nm-kpi .nm-loss { color: #ff9a98; }
.nm-kpi .nm-rec { color: #63ddbd; }
.nm-n { color: #aebed2; font-size: .7rem; }
.nm-filters { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .4rem .55rem; padding: .65rem .8rem; border-bottom: 1px solid #263448; flex-shrink: 0; }
.nm-search { grid-column: 1/-1; width: 100%; min-width: 0; min-height: 36px; }
.nm-filters select { width: 100%; min-width: 0; }
.nm-lbl { color: #b1bfd2; }
.nm-search::placeholder { color: #aab9cc; }
.nm-search-wrap { grid-column: 1/-1; position: relative; min-width: 0; }
.nm-search-wrap .nm-search { padding-right: 2.5rem; }
.nm-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.nm-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #40536a; border-radius: 7px; background: #172536; color: #dce7f4; font-size: 1.4rem; line-height: 1; }
.nm-icon-button:hover:not(:disabled) { background: #29405b; color: #fff; }
.nm-icon-button:focus-visible { outline: 2px solid #66bfff; outline-offset: 2px; }
.nm-icon-button:disabled { opacity: .35; }
.nm-search-clear { position: absolute; right: 2px; top: 2px; width: 32px; height: 32px; border: 0; background: transparent; }
.nm-list-switch { display: flex; gap: .4rem; padding: .55rem .8rem; }
.nm-list-switch .nm-chip { flex: 1; justify-content: center; border-radius: 7px; }
.nm-rank { color: #b3c3d7; font-size: .65rem; text-transform: none; letter-spacing: 0; }
.nm-list { scrollbar-width: thin; scrollbar-color: #43556d transparent; }
.nm-row { min-height: 58px; padding: .6rem .8rem; grid-template-columns: 20px minmax(0,1fr) auto; }
.nm-row .nm-spark { display: none; }
.nm-region-row { min-height: 62px; }
.nm-nm b { font-size: .83rem; }
.nm-nm i, .nm-rk { color: #a7b9ce; }
.nm-vv { text-align: right; font-variant-numeric: tabular-nums; }
.nm-vv small { display: block; font-size: .65rem; font-weight: 400; color: #aabdd3; white-space: normal; max-width: 140px; }
/* 34 px, the height of the basemap buttons above it and of every control on the traffic map.
   The blue on-tint stays with .nm-chip.on, which outranks this rule. */
.nm-group { position: absolute; top: 3rem; right: .6rem; z-index: 500; background: #111f31; border-radius: 7px; min-height: 34px; padding: .3rem .8rem; }
.nm-map-surface { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; }
.nm-map-surface .nm-map { position: absolute; inset: 0; }
.nm-map-caption { position: absolute; left: 1rem; bottom: 1rem; z-index: 450; display: flex; flex-direction: column; pointer-events: none; text-shadow: 0 2px 8px #071019; }
.nm-map-caption b { color: #dce9f7; font-size: clamp(.95rem, 1.4vw, 1.65rem); font-weight: 500; }
.nm-map-caption span { color: #a8bfd8; font-size: .7rem; }
.nm-legend { background: #111d2c; color: #bdcadd; gap: .5rem .8rem; }
.nm-map-error { position: absolute; inset: 40% 15% auto; z-index: 550; padding: 1rem; border-radius: 8px; background: #253348; color: #fff; }
.nm-cluster { background: none; border: 0; text-align: center; }
.nm-cluster-ring { width: 46px; height: 46px; padding: 4px; border-radius: 50%; box-shadow: 0 3px 12px #0009; }
.nm-cluster-ring span { display: grid; place-items: center; width: 100%; height: 100%; background: #152438; color: #fff; border-radius: 50%; font: 600 14px/1 system-ui; }
.nm-cluster small { position: absolute; top: 45px; left: 50%; transform: translateX(-50%); color: #f0f6ff; background: #142339e8; border: 1px solid #3a4d65; padding: 1px 5px; border-radius: 4px; font: 600 10px/1.5 system-ui; white-space: nowrap; }
.nm-cluster:focus-visible, .nm-station-marker:focus-visible { outline: 3px solid white; outline-offset: 4px; border-radius: 50%; }
.nm-station-marker { background: transparent; border: 0; }
.nm-station-marker span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--nm-marker-color); box-shadow: 0 2px 7px #0008; }
.nm-station-marker.selected span { outline: 3px solid #fff; outline-offset: 3px; }
.nm-station-marker:hover span { outline: 2px solid #fff; outline-offset: 2px; }
/* No arrival animation on a playback frame. Every marker is rebuilt on every tick, so the
   0.45 s scale and fade restarted on all 350 of them at once and each frame opened as a near
   blank map: measured opacity floor 0.25, worst dropped frame 229 ms. Without it the floor is
   0.74 and the worst frame 117 ms. */
.nm-card { flex: 1; padding: 1rem; }
.nm-card-name { font-size: 1.3rem; }
.nm-card-sub, .nm-note, .nm-stat span, .nm-sec h3, .nm-axis { color: #b6c5d8; }
.nm-stats { gap: .5rem; }
.nm-stat small { display: block; color: #afc0d5; font-size: .65rem; margin-top: .3rem; }
.nm-stat .nm-loss { color: #ff9a98; }
.nm-stat .nm-rec { color: #63ddbd; }
.nm-traffic-summary { display: flex; justify-content: space-between; gap: .6rem; padding: .7rem; background: #1b3044; border-radius: 8px; margin-top: .75rem; color: #c3dcf4; font-size: .82rem; }
.nm-destinations { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.nm-destinations .dxbl-btn { flex-grow: 1; min-height: 36px; }
.nm-transition { border-top: 1px solid #344359; padding-top: .85rem; }
.nm-transition > strong { display: block; margin-top: .55rem; font-size: 1.25rem; }
.nm button:focus-visible { outline: 2px solid #95c5ff; outline-offset: 3px; }
.nm-foot, .nm-foot-note { color: #a8b7cb; }
@media (max-width: 991px) {
    .nm-panes { grid-template-columns: minmax(0,1fr); height: auto; }
    .nm-mapwrap { height: min(72dvh, 650px); min-height: 390px; }
    .nm-panel { height: 700px; max-height: none; }
    .nm-period-range { margin-left: 0; }
}
@media (max-width: 575px) {
    .nm-period { padding: .5rem; }
    .nm-period-range { width: 100%; }
    .nm-period-range .nm-lbl { display: none; }
    .nm-end-combo { width: 135px; }
    .nm-window { min-width: 120px; font-size: .72rem; }
    .nm-timeline { display: none; }
    .nm-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .nm-chip { padding: .35rem .5rem; font-size: .74rem; min-height: 34px; }
    .nm-crumbs { max-width: 55%; flex-wrap: wrap; }
    /* Both ends of the map top row on one narrow line; the 34 px touch height stays. */
    .nm-basemaps { gap: 4px; }
    .nm-base-button { padding: 4px 7px; font-size: 11px; }
}
/* Keep the time controls with the map rather than above the workspace. */
.nm-mapwrap .nm-period { flex-shrink: 0; margin: 0; border-radius: 0; border: 0; border-top: 1px solid #304156; padding: .5rem .65rem; gap: .4rem; }
.nm-mapwrap .nm-period-range { margin-left: 0; }
.nm-mapwrap .nm-period .nm-lbl { display: none; }
.nm-mapwrap .nm-period-note { margin-left: auto; }
/* The one height rule for the workspace.

   --nm-panes-avail is measured by network-map.js: the space between the top of this row and the
   bottom of the viewport, minus the footer under it. A constant subtraction cannot survive a
   change to the page header, and the last one did not. The clamp is the fallback before the map
   script runs, and the guard rails afterwards: a floor so a short laptop does not collapse the
   ranking, a ceiling so a very tall screen does not stretch the map for its own sake. */
.nm-panes { height: clamp(600px, var(--nm-panes-avail, calc(100dvh - 300px)), 1150px); }
.nm-discovery-tabs .dxbl-tabs-content-panel, .nm-discovery-tabs .dxbl-tabs-tabpanel { display: none; }
.nm-discovery-tabs .dxbl-tabs { border: 0; background: transparent; }
.nm-cluster-ring { width: 42px; height: 42px; padding: 3px; }
.nm-cluster small { top: 41px; }
/* Stacked: the map takes a share of the screen rather than a fixed slab, so the ranking and the
   station card under it stay reachable without a long scroll. */
@media (max-width:991px) { .nm-panes { height:auto; } .nm-mapwrap { height:clamp(420px, 62dvh, 720px); } }
@media (max-width:575px) { .nm-mapwrap { height:clamp(320px, 52dvh, 560px); } }
@media (min-width:1200px) {
    .nm-mapwrap .nm-period { display: grid; grid-template-columns: auto 1fr auto; }
    .nm-mapwrap .nm-period .nm-chip { padding: .25rem .4rem; font-size: .72rem; }
    .nm-mapwrap .nm-period .nm-window, .nm-mapwrap .nm-period-note { display: none; }
    .nm-mapwrap .nm-period-range { justify-content: center; }
    .nm-mapwrap .nm-end-combo { width: 115px; }
    .nm-timeline { grid-column: 1/-1; }
}
.nm-destinations { margin: .85rem 0; }
.nm-destinations .dxbl-btn { color: #f2f6fc; }
.nm-period > .dxbl-btn { color: #e5effc; }
@media (min-width:1200px) { .nm-mapwrap .nm-end-combo { width:145px; } }
.nm-map-caption { background:rgba(12,24,39,.88); padding:.3rem .5rem; border-radius:6px; max-width:calc(100% - 80px); }
.nm-operations { padding: .85rem; background: #142b3c; border: 1px solid #31566c; border-radius: 9px; }
.nm-operations h3, .nm-section-label { font-size: .82rem; font-weight: 600; color: #d3e5f5; margin: .4rem 0; }
.nm-operations .nm-stat { background: #122234; min-width: 0; }
.nm-operations .nm-stat b { font-size: 1.15rem; }
.nm-operation-period { margin: .65rem 0 .4rem; font-size: .67rem; color: #9dc5df; }
.nm-outcome-bar { display: flex; height: 5px; margin: .6rem 0; border-radius: 3px; background: #ed8586; overflow: hidden; }
.nm-outcome-bar span { background: #49cbaa; height: 100%; }
.nm-operations .nm-note { font-size: .68rem; margin-bottom: .25rem; }
.nm-row .nm-nm i { white-space: normal; line-height: 1.4; }
.nm-card-tabs { margin: .85rem 0; }
.nm-card-tabs .dxbl-tabs-content-panel, .nm-card-tabs .dxbl-tabs-tabpanel { display: none; }
.nm-card-tabs .dxbl-tabs { background: transparent; border: 0; }
.nm-card-tabs .dxbl-tabs-tablist { display: block; height: auto; min-height: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
.nm-card-tabs .dxbl-tabs-tablist ul { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 0 !important; margin: 0 !important; }
.nm-card-tabs .dxbl-tabs-tablist li { flex: 1; min-width: 0; padding: 0 !important; margin: 0 !important; }
.nm-card-tabs .dxbl-tabs-item { display: flex !important; justify-content: center; width: 100%; min-height: 38px; padding: 6px 8px !important; font-size: .74rem !important; }
.nm-card-tabs .dxbl-tabs-text-container, .nm-card-tabs .dxbl-text { min-width: 0; }
.nm-card-tabs .dxbl-tabs-text-overflow { white-space: normal; text-align: center; }
.nm-unidentified { border-left: 3px solid #eab45d; background: #382e1f80; padding: .65rem .8rem; border-radius: 6px; margin: .8rem 0; }
.nm-unidentified > b { display: block; margin: .35rem 0; color: #f2cb8f; font-size: 1.05rem; }
.nm-unidentified > b span { font-weight: 400; font-size: .75rem; }
.nm-unidentified p { font-size: .7rem; color: #d8c8ad; margin: .3rem 0; }
.nm-unidentified-scope { flex-shrink: 0; padding: .45rem .85rem; color: #e9c488; background: #30291e70; font-size: .65rem; }
.nm-map .nm-road-tiles { filter: saturate(.25) contrast(.95) brightness(var(--nm-road-brightness, .8)); }
.nm-map .leaflet-control-attribution { background: #142236d9; color: #b9cadc; font-size: 9px; }
.nm-map .leaflet-control-attribution a { color: #c3d9ef; }
/* Touch: Leaflet's own zoom buttons are 30 px square, under every thumb target on the page around
   them. Scoped to this map's container, so the traffic map keeps the size it was measured at. */
@media (max-width: 991.98px) {
    .nm-map .leaflet-control-zoom { width: 44px; }
    .nm-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 24px; }
}
/* Phone: the map card was a fixed slab and the canvas was whatever the period control and the
   legend strip left over, which measured 152 px at 390x844 with the clusters overlapping Poland.
   The card grows to its content here instead (the panes are already height:auto below 991 px, so
   the clamp is out of the way and the panel stays stacked under the map), and the canvas carries
   the minimum: 340 px, or 60vh on a screen too short to give it. */
@media (max-width: 575.98px) {
    .nm-mapwrap { height: auto; }
    .nm-map-surface { min-height: min(60vh, 340px); }
}