/* Metre2 Map 2.1 - the "Openspace" look (6 Nov 2026), as Mail 1.2, Calendar 1.1 and BIM Explorer 1.5.
   Light ("blueprint paper") is the default; dark is deep navy blueprint. Inter for the interface and JetBrains Mono
   for numbers, coordinates and the small uppercase labels - both bundled in fonts/ (SIL OFL), so Map loads no web
   fonts. A faint drawing grid sits behind the panels (never over the map). This file is loaded after index.html's
   own stylesheet and re-points its tokens, so every existing panel picks the look up without being rewritten. */
@font-face { font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --bg-primary: #f3f6fb; --bg-secondary: #ffffff; --bg-tertiary: #eaf0fa; --bg-panel: rgba(255,255,255,.94);
  --bg-hover: rgba(29,95,224,.06); --text-primary: #0b1b33; --text-secondary: #42566f; --text-dim: #536684;
  --border: rgba(29,95,224,.13); --border-strong: rgba(29,95,224,.26);
  --success: #0b7a51; --warning: #a14a07; --danger: #c02a26; --accent-ink: #123f9e;
  --ink: #1d5fe0; --ink-2: #3f7cf0; --amber: #e8590c; --amber-ink: #c2410c;
  --grid-major: rgba(29,95,224,.08); --grid-minor: rgba(29,95,224,.04);
  --shadow-lg: 0 28px 70px -24px rgba(20,50,110,.38); --glow: 0 6px 18px -8px rgba(29,95,224,.55);
  --on-accent: #ffffff;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg-primary: #050d18; --bg-secondary: #0b1524; --bg-tertiary: #101d31; --bg-panel: rgba(8,15,27,.94);
  --bg-hover: rgba(90,209,255,.07); --text-primary: #eaf2ff; --text-secondary: #a6b6cc; --text-dim: #8193ad;
  --border: rgba(120,180,255,.12); --border-strong: rgba(120,180,255,.24);
  --success: #4ade80; --warning: #fbbf24; --danger: #ff7b86;
  --ink: #5ad1ff; --ink-2: #8ee0ff; --amber: #ff9a3d; --amber-ink: #ffb36b;
  --grid-major: rgba(90,170,255,.055); --grid-minor: rgba(90,170,255,.03);
  --shadow-lg: 0 30px 80px -24px rgba(0,0,0,.85); --glow: 0 0 22px -6px rgba(90,209,255,.55);
  --on-accent: #04101e; --accent-ink: #8ee0ff;
  --ks-accent: #1d5fe0;
  color-scheme: dark;
}
/* Accents: "Ocean" is the Openspace ink. The others stay for people who picked one; darker in light (white text),
   brighter in dark (dark text), all checked at WCAG AA against their text. */
[data-accent="blue"]{--accent:var(--ink);--accent-dim:rgba(29,95,224,.11);--accent-glow:rgba(29,95,224,.3)}
[data-theme="dark"][data-accent="blue"]{--accent:#5ad1ff;--accent-dim:rgba(90,209,255,.13);--accent-glow:rgba(90,209,255,.35)}
[data-theme="light"][data-accent="green"]{--accent:#0f7a4f}
[data-theme="light"][data-accent="purple"]{--accent:#6d28d9}
[data-theme="light"][data-accent="orange"]{--accent:#c2410c}
[data-theme="light"][data-accent="pink"]{--accent:#be185d}
[data-theme="light"][data-accent="teal"]{--accent:#0e7490}
[data-theme="dark"]:not([data-accent="blue"]){--on-accent:#04101e}

html, body { font-family: var(--ui); font-size: 13px; letter-spacing: -.003em; }
input, select, textarea, .ss, .notes-area { font-family: var(--ui) !important; }
.leaflet-container { font-family: var(--ui) !important; }
.dd-key, .si-mono, .cdi, .coord-display, .sv, .wn-ver, .wn-release-date, kbd, .route-num, .m2-mono { font-family: var(--mono) !important; }

/* Drawing grid behind the chrome (body background shows through the panels' gaps and the sidebar) */
body { background-color: var(--bg-primary);
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px),
                    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px; }
.sidebar { background: color-mix(in srgb, var(--bg-secondary) 88%, transparent); backdrop-filter: blur(14px); }

/* Top bar: one calm line */
.topbar { height: 48px; background: var(--bg-panel); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; }
.topbar-logo { font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.topbar-logo svg { color: var(--accent); }
.topbar-title { color: var(--text-secondary); font-weight: 450; }
.topbar-menu button { font-weight: 500; color: var(--text-secondary); border-radius: 8px; }
.topbar-menu button:hover, .tb:hover { color: var(--text-primary); background: var(--bg-hover); }
.dropdown, .cx, .col-picker, .lf-flyout { border-radius: 12px; border-color: var(--border-strong); box-shadow: var(--shadow-lg); background: var(--bg-secondary); }
.dropdown button, .cx button { border-radius: 8px; color: var(--text-secondary); }
.dd-sep, .cxs { background: var(--border); }
.dd-head { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); padding: 8px 10px 4px; }

/* Small uppercase labels in mono, as Mail and BIM Explorer */
.sidebar-header h2, .lib-group-title, .sg-title, .fi label, .lf-flyout-title, .guide-section-title, .cx-status-label, .import-step-title, table.dg th, .sfbar-label, .m2-label {
  font-family: var(--mono) !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10px !important; color: var(--text-dim); }
.guide-section-title { color: var(--accent); }
table.dg th { background: var(--bg-tertiary); color: var(--text-secondary); }
table.dg td { border-bottom-color: var(--border); }
table.dg tr.sel { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.stab { border-radius: 8px; }
.stab.active, .lib-tab.active { color: var(--accent); }

/* Buttons */
.btn { border-radius: 9px; font-weight: 550; }
.btn-p { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.btn-g { border: 1px solid var(--border-strong); color: var(--text-secondary); background: var(--bg-secondary); }
.btn-g:hover { color: var(--text-primary); border-color: var(--accent); }
input, select, textarea { border-radius: 9px; border-color: var(--border-strong); background: var(--bg-secondary); }

/* Panels and dialogs: white glass with hairline edges, a little more radius */
.md, .guide-box, .wn-box, .mp-box, .fr-box, .stats-box, .matrix-box, .import-box, .sample-box, .confirm-box, .cmd-palette, .geocode-prog-box, .route-panel, .sp {
  border-radius: 16px; border: 1px solid var(--border-strong); background: var(--bg-secondary); box-shadow: var(--shadow-lg); }
.sp { border-radius: 16px 0 0 16px; }
.mo, .guide-overlay, .wn-overlay, .mp-overlay, .fr-overlay, .stats-overlay, .matrix-overlay, .import-overlay, .sample-overlay, .confirm-overlay, .sov, .cmd-palette-overlay, .geocode-prog-overlay {
  background: rgba(8,20,40,.38) !important; }
[data-theme="dark"] .mo, [data-theme="dark"] .guide-overlay, [data-theme="dark"] .wn-overlay, [data-theme="dark"] .stats-overlay, [data-theme="dark"] .matrix-overlay, [data-theme="dark"] .import-overlay, [data-theme="dark"] .sov { background: rgba(0,0,0,.55) !important; }
.md-h h3, .guide-head h3, .wn-header h3, .stats-head h3, .matrix-head h3, .import-head h3, .sp-head h3, .mp-head h3, .sample-head h3 { font-weight: 650; letter-spacing: -.015em; font-size: 15px; }
.stat-card { border-radius: 12px; background: var(--bg-tertiary); }

/* Map chrome */
.map-tb button, .label-field-sel { border-radius: 10px; background: var(--bg-panel); border-color: var(--border-strong); box-shadow: 0 6px 16px -10px rgba(20,50,110,.45); }
.map-tb button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.map-tb .m2-sep { height: 1px; background: var(--border-strong); margin: 2px 4px; }
.leaflet-control-zoom { border-radius: 10px !important; box-shadow: 0 6px 16px -10px rgba(20,50,110,.45); }
.leaflet-control-zoom a { background: var(--bg-panel) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; }
.leaflet-popup-content { font-family: var(--ui); }
.m2m { background: var(--bg-secondary) !important; border-color: var(--accent) !important; }
.m2m.home { background: var(--amber) !important; border-color: #fff !important; }
.m2ml { font-family: var(--ui) !important; font-weight: 550; color: var(--text-primary) !important;
  text-shadow: 0 0 3px var(--bg-secondary), 0 0 3px var(--bg-secondary), 0 0 6px var(--bg-secondary) !important; }
.coord-display { border-radius: 8px; border: 1px solid var(--border); }
.statusbar { background: var(--bg-panel); font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; }
.statusbar .si-l { text-transform: uppercase; letter-spacing: .08em; }
.toast { border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; }
.status-badge { border-radius: 999px !important; font-weight: 600 !important; }

/* PRO marks (keystone-pro.js sets html[data-ks-pro="1"] when Pro is on) */
.m2-pro { display: inline-flex; align-items: center; margin-left: auto; padding: 1px 6px; border-radius: 999px; font: 700 9px/1.5 var(--mono); letter-spacing: .08em;
  color: #7a4a00; background: linear-gradient(135deg, #ffe08a, #ffbf3c); }
[data-theme="dark"] .m2-pro { color: #2a1800; }
html[data-ks-pro="1"] .m2-pro { display: none; }
#m2ProPill { margin-right: 6px; }
@media (max-width: 900px) { .topbar-menu button { padding: 5px 8px; } #m2ProPill .ks-pro-label { display: none; } }

/* ===================================================================== 2.1 panels, legend, dialogs, poster */
.m21-legend { background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px 10px 6px; min-width: 170px; max-width: 260px; max-height: 46vh; overflow: auto;
  box-shadow: 0 10px 24px -14px rgba(20,50,110,.5); color: var(--text-primary); font-size: 12px; margin-left: 12px !important; margin-bottom: 40px !important; }
.m21-legend-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.m21-legend-head .m2-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m21-legend-head button { font-size: 11px; color: var(--text-secondary); padding: 1px 5px; border-radius: 6px; }
.m21-legend-head button:hover { background: var(--bg-hover); color: var(--text-primary); }
.m21-legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.m21-legend-row i { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.08); }
.m21-legend-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m21-legend-row b { font: 500 11px var(--mono); color: var(--text-dim); }

.m21-dialog .md { width: 520px; }
.m21-dialog .md.m21-wide { width: 640px; }
.m21-x { width: 28px; height: 28px; border-radius: 8px; color: var(--text-secondary); font-size: 14px; }
.m21-x:hover { background: var(--bg-hover); color: var(--text-primary); }
.m21-p { color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
.m21-dim { color: var(--text-dim); font-size: 11.5px; }
.m21-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin: 4px 14px 4px 0; cursor: pointer; }
.m21-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.m21-paste { width: 100%; min-height: 190px; font: 12px/1.5 var(--mono) !important; white-space: pre; resize: vertical; }
.m21-cb-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.m21-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--bg-tertiary); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-secondary); }
.m21-chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.m21-chip b { font: 500 11px var(--mono); color: var(--text-primary); }
.md-b .fr { display: flex; gap: 10px; } .md-b .fr > .fi { flex: 1; min-width: 0; }
.md-b input, .md-b select { width: 100%; }
.md-b input[type=checkbox] { width: auto; }

/* The Pro side panel, over the right of the map */
.m21-panel { position: absolute; top: 12px; right: 56px; bottom: 12px; width: 360px; max-width: calc(100% - 80px); z-index: 1001; display: none; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.m21-panel.open { display: flex; }
.m21-ph { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.m21-ph h4 { flex: 1; font-size: 14.5px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.m21-pro-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #ffd36b, #ff9f1c); box-shadow: 0 0 0 3px rgba(255,180,40,.2); }
.m21-pb { flex: 1; overflow: auto; padding: 14px 16px; }
.m21-pb .fi { margin-bottom: 12px; }
.m21-pb .fr { display: flex; gap: 10px; } .m21-pb .fr > .fi { flex: 1; min-width: 0; }
.m21-pb input, .m21-pb select { width: 100%; height: 32px; }
.m21-pb input[type=checkbox] { width: auto; height: auto; }
.m21-pf { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.m21-pf .btn { padding: 8px 18px; }
.m21-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.m21-chipbtn { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-strong); font: 500 11.5px var(--mono); color: var(--text-secondary); background: var(--bg-secondary); }
.m21-chipbtn:hover { border-color: var(--accent); color: var(--text-primary); }
.m21-chipbtn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.m21-msg { font-size: 12px; min-height: 0; margin: 2px 0 8px; color: var(--text-secondary); }
.m21-msg:empty { display: none; }
.m21-msg.ok { color: var(--success); } .m21-msg.err { color: var(--danger); } .m21-msg.warn { color: var(--warning); }
.m21-msg.err, .m21-msg.warn { background: var(--bg-tertiary); border-radius: 9px; padding: 8px 10px; }
.m21-sub { margin: 14px 0 6px; }
.m21-item { border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; margin-bottom: 8px; background: var(--bg-secondary); }
.m21-item-h { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.m21-bands { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 4px; }
.m21-item-a { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.m21-item-a button { font-size: 11.5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text-secondary); background: var(--bg-secondary); }
.m21-item-a button:hover { color: var(--text-primary); border-color: var(--accent); }
.m21-danger { color: var(--danger) !important; }
.m21-ter { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.m21-ter .m2-mono { font-size: 11.5px; color: var(--text-secondary); min-width: 28px; text-align: right; }
.m21-ter .m21-tot { min-width: 44px; color: var(--text-primary); }
.m21-ter button { width: 24px; height: 24px; border-radius: 7px; color: var(--text-secondary); }
.m21-ter button:hover { background: var(--bg-hover); }
.m21-tername { flex: 1; min-width: 0; height: 28px !important; border-color: transparent !important; background: transparent !important; font-weight: 550; padding: 0 6px !important; }
.m21-tername:hover, .m21-tername:focus { border-color: var(--border-strong) !important; background: var(--bg-secondary) !important; }
.m21-sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; vertical-align: -1px; margin-right: 6px; }
.m21-ter .m21-sw { margin-right: 0; }
.m21-runsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.m21-runsum > div { background: var(--bg-tertiary); border-radius: 10px; padding: 8px 10px; }
.m21-runsum b { display: block; font: 600 14px/1.2 var(--mono); color: var(--text-primary); letter-spacing: -.01em; }
.m21-runsum span { font-size: 11px; color: var(--text-dim); }
.m21-run { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.m21-run li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--border); }
.m21-run li:last-child { border-bottom: 0; }
.m21-run b { font-weight: 600; font-size: 12.5px; display: block; }
.m21-run small { display: block; color: var(--text-dim); font-size: 11px; }
.m21-runno { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 10.5px var(--mono); }
.m21-runt { text-align: right; font: 600 12.5px var(--mono); }
.m21-runt small { font-weight: 400; font-family: var(--ui); }
.m21-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
.m21-table th { text-align: left; font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); padding: 6px 4px; border-bottom: 1px solid var(--border-strong); }
.m21-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.m21-bar { display: grid; grid-template-columns: 96px 1fr 40px; gap: 8px; align-items: center; font-size: 12px; margin: 5px 0; }
.m21-bar > div { height: 8px; border-radius: 99px; background: var(--bg-tertiary); overflow: hidden; }
.m21-bar i { display: block; height: 100%; border-radius: 99px; }
.m21-bar b { font: 600 11.5px var(--mono); text-align: right; }
.m21-ins-name { font-weight: 650; margin: 4px 0 6px; }
.m21-src { margin-top: 12px; line-height: 1.5; }
.m21-stopno { width: 22px !important; height: 22px !important; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 10.5px/22px var(--mono); text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.3); }
.m21-site span { display: block; width: 18px; height: 18px; margin: 2px; border-radius: 5px; transform: rotate(45deg); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.35); }
.leaflet-container.m21-picking { cursor: crosshair !important; }
.leaflet-container.m21-picking .leaflet-interactive { cursor: crosshair !important; }

/* Poster mode: the map on its own, at the paper's shape, with a title block */
body.m21-poster .topbar, body.m21-poster .statusbar, body.m21-poster .sidebar, body.m21-poster .resize-handle, body.m21-poster .map-tb, body.m21-poster .coord-display,
body.m21-poster .m21-panel, body.m21-poster .route-panel, body.m21-poster .sidebar-expand-tab, body.m21-poster .leaflet-control-zoom, body.m21-poster .print-header, body.m21-poster .dist-slider, body.m21-poster .toast { display: none !important; }
body.m21-poster .main { height: 100vh !important; display: flex; align-items: center; justify-content: center; }
.m21-poster-frame { display: flex; flex-direction: column; background: #fff; color: #0b1b33; box-shadow: var(--shadow-lg); padding: 14px 16px 10px; }
.m21-poster-frame .map-panel { flex: 1; min-height: 0; border: 1px solid rgba(29,95,224,.3); }
.m21-ps-head { display: flex; justify-content: space-between; gap: 16px; padding: 0 2px 10px; }
.m21-ps-head h1 { font: 700 22px/1.15 var(--ui); letter-spacing: -.02em; margin: 0; color: #0b1b33; }
.m21-ps-head p { margin: 3px 0 0; color: #42566f; font-size: 12.5px; }
.m21-ps-meta { text-align: right; font: 500 10.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #5f7290; }
body.m21-nolabels .m2ml { display: none !important; }
body.m21-nolegend .m21-legend { display: none !important; }
body.m21-poster .m21-legend-head button { display: none; }
.m21-north { background: rgba(255,255,255,.92); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.m21-north svg { width: 18px; height: 24px; } .m21-north path { fill: #0b1b33; } .m21-north text { font: 700 8px var(--ui); fill: #0b1b33; }
body.m21-poster .leaflet-control-scale-line { border-color: #0b1b33; color: #0b1b33; background: rgba(255,255,255,.9); font: 500 10px var(--mono); }
@media print {
  body.m21-poster { background: #fff !important; }
  body.m21-poster .main { height: auto !important; display: block !important; }
  body.m21-poster .m21-poster-frame { box-shadow: none; padding: 0; width: 100% !important; height: calc(100vh - 2mm) !important; }
  body.m21-poster .map-panel { height: auto !important; }
}

/* 2.1 UI test fixes: AA contrast on tinted active tabs and status badges, narrow windows */
.stab.active, .lib-tab.active, .sf-btn.active { color: var(--accent-ink) !important; }
[data-theme="light"] .status-badge[style*="#3b9eff"] { color: #1d4ed8 !important; }
[data-theme="light"] .status-badge[style*="#fbbf24"] { color: #8a4b00 !important; }
[data-theme="light"] .status-badge[style*="#34d399"] { color: #046c4e !important; }
[data-theme="light"] .status-badge[style*="#8494a7"] { color: #3f4f63 !important; }
[data-theme="light"] .status-badge[style*="#f87171"] { color: #b42323 !important; }
@media (max-width: 760px) {
  .topbar-menu .dropdown { position: fixed; left: 8px !important; right: 8px; top: 48px; min-width: 0; }
  .m21-legend { max-width: calc(100vw - 40px); }
  .m21-panel { right: 8px; left: 8px; width: auto; max-width: none; top: 8px; bottom: 8px; }
  .topbar-logo .topbar-title { display: none; }
}
[data-theme="dark"] .ks-kicker { color: #8ee0ff !important; }
@media (max-width: 560px) {
  .topbar { padding: 0 8px; gap: 2px; }
  .topbar-logo { font-size: 0; margin-right: 2px; } .topbar-logo svg { width: 20px; height: 20px; }
  .topbar-sep, .topbar-actions .tb[title^="Command"], .topbar-actions .tb[title^="Toggle"] { display: none; }
  .topbar-menu button { padding: 5px 6px; font-size: 11.5px; }
  #m2ProPill { padding: 0 8px; font-size: 11px; }
}
/* Dark map tiles in the navy of the dark blueprint, not the orange an inverted OpenStreetMap gives */
#map.m2-dark-tiles .leaflet-tile-pane { filter: invert(1) hue-rotate(190deg) saturate(.38) brightness(.82) contrast(1.05) !important; }

.m2m.m21-col { border: 0 !important; background: none !important; box-shadow: none !important; }
/* keystone-pro.js's panel and cards sit above the map's own controls (Leaflet uses z-index 1000) */
.ks-pro-overlay { z-index: 12000 !important; }
.ks-news { z-index: 11000 !important; }

/* 2.1 fix (6 Nov, Rob): the old straight-line route panel was positioned against the page, so its header and close
   button sat under the top bar and the panel covered the sidebar. Keep it in the map area, beside the right toolbar. */
.route-panel { position: fixed; top: 60px; left: auto; right: 64px; z-index: 1050; width: 300px; max-height: calc(100vh - 120px); }
@media (max-width: 560px) { .route-panel { right: 8px; left: 8px; width: auto; top: 100px; } }