/* Riot Syndicate map UI · 2026-09-05
 * Standalone presentation layer. Map sources, attribution and application logic remain untouched.
 * Tokens match the current riotsyndicate.com resources/css/app.css.
 */
:root {
  --rs-font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --rs-bg: #f4f6f9; --rs-surface: #fff; --rs-deep: #eceff4;
  --rs-text: #1f232a; --rs-muted: #606772; --rs-border: #d6dbe3;
  --rs-accent: #e5322d; --rs-accent-text: #ca2723;
  --rs-card: linear-gradient(145deg,#fff,#f7f8fa);
  --rs-shadow: 0 12px 32px -16px #0005;
  --joy-fontFamily-body: var(--rs-font) !important;
  --joy-fontFamily-display: var(--rs-font) !important;
  --joy-palette-primary-500: #e5322d !important;
  --joy-palette-primary-600: #c82320 !important;
  --joy-palette-primary-solidBg: #e5322d !important;
  --joy-palette-primary-solidHoverBg: #c82320 !important;
  --joy-palette-primary-solidColor: #fff !important;
  --joy-palette-focusVisible: #ff645e !important;
}
html[data-joy-color-scheme="dark"] {
  color-scheme: dark;
  --rs-bg: #0e0f12; --rs-surface: #17191d; --rs-deep: #121418;
  --rs-text: #eceef2; --rs-muted: #a9afb9; --rs-border: #343840;
  --rs-accent-text: #ff645e;
  --rs-card: linear-gradient(145deg,#1c1e23 0%,#16181d 72%,#301618 140%);
  --rs-shadow: 0 16px 38px -20px #000c;
  --joy-palette-background-body: #0e0f12 !important;
  --joy-palette-background-surface: #17191d !important;
  --joy-palette-background-popup: #1c1e23 !important;
  --joy-palette-background-level1: #1e2126 !important;
  --joy-palette-background-level2: #292c33 !important;
  --joy-palette-text-primary: #eceef2 !important;
  --joy-palette-text-secondary: #a9afb9 !important;
  --joy-palette-text-tertiary: #a9afb9 !important;
  --joy-palette-divider: #343840 !important;
  --joy-palette-neutral-outlinedBorder: #343840 !important;
  --joy-palette-primary-plainColor: #ff645e !important;
  --joy-palette-primary-softColor: #ffaaa6 !important;
  --joy-palette-primary-softBg: #3b2023 !important;
  --joy-palette-primary-softHoverBg: #502629 !important;
}
body { background:var(--rs-bg); font-family:var(--rs-font); color:var(--rs-text); }
button,input,select,.maplibregl-map { font-family:var(--rs-font); }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--rs-accent-text) !important; outline-offset:3px;
}
.rs-map-header {
  height:64px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:0 24px; position:relative; z-index:5;
  border-bottom:1px solid #ffffff16; background:linear-gradient(110deg,#0b0d0f,#141619); color:#eceef2;
}
.rs-map-brand { display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; }
.rs-map-brand > span:first-child { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,#ef4540,#b91f1b); box-shadow:0 5px 16px #e5322d24; }
.rs-map-brand img { width:24px; height:24px; object-fit:contain; }
.rs-map-brand em { color:#ff645e; font-style:normal; }
.rs-map-header nav { display:flex; align-items:center; gap:4px; border:1px solid #ffffff10; border-radius:14px; padding:4px; background:#ffffff03; }
.rs-map-header nav a { padding:8px 14px; text-decoration:none; color:#a9afb9; font-size:12px; font-weight:600; border-radius:9px; }
.rs-map-header nav a[aria-current] { color:#ff8c87; background:#e5322d18; }
.rs-map-header nav a:hover { color:#fff; background:#ffffff0d; }
.rs-map-context { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#a9afb9; }
.rs-map-context::before { content:''; width:22px; height:1px; background:#e5322d; }
html.rs-map-standalone #root { position:relative; height:calc(100svh - 64px); }
html.rs-map-standalone #root > .maplibregl-map { height:calc(100svh - 64px) !important; width:100% !important; }
.maplibregl-ctrl-top-left > .maplibregl-ctrl { margin:16px 0 0 16px; }
.maplibregl-ctrl-top-right > .maplibregl-ctrl { margin:12px 12px 0 0; }
.MuiAutocomplete-root,.MuiInput-root { background:var(--rs-card) !important; color:var(--rs-text) !important; border:1px solid var(--rs-border) !important; border-radius:12px !important; box-shadow:var(--rs-shadow) !important; min-height:44px !important; }
.MuiAutocomplete-input,.MuiInput-input { font-family:var(--rs-font) !important; font-size:13px !important; background:transparent !important; color:var(--rs-text) !important; }
.MuiAutocomplete-input::placeholder,.MuiInput-input::placeholder { color:var(--rs-muted) !important; opacity:1 !important; }
.MuiSelect-root { border-radius:8px !important; }
.MuiSelect-button { min-height:34px; }
.MuiAutocomplete-root:focus-within,.MuiInput-root:focus-within { border-color:var(--rs-accent-text) !important; }
.MuiAutocomplete-listbox,.MuiSelect-listbox,.MuiMenu-root,.MuiSheet-root,.MuiModalDialog-root { font-family:var(--rs-font) !important; color:var(--rs-text) !important; background:var(--rs-card) !important; border:1px solid var(--rs-border) !important; border-radius:16px !important; box-shadow:var(--rs-shadow) !important; }
.MuiSheet-root { max-width:calc(100vw - 32px); max-height:calc(100svh - 32px); overflow:auto; }
.MuiDialogTitle-root { font-size:19px !important; letter-spacing:-.025em; }
.MuiTab-root { border-radius:8px !important; min-height:40px; }
.MuiTab-root.Mui-selected { color:var(--rs-accent-text) !important; background:#e5322d14 !important; }
.MuiCheckbox-checkbox.Mui-checked { background:var(--rs-accent) !important; border-color:var(--rs-accent) !important; color:#fff !important; }
.MuiIconButton-root,.MuiModalClose-root { border-radius:10px !important; color:var(--rs-text) !important; min-width:40px !important; min-height:40px !important; }
.MuiIconButton-root:hover,.MuiModalClose-root:hover { background:var(--rs-deep) !important; }
.maplibregl-ctrl-group { background:var(--rs-surface); border:1px solid var(--rs-border); border-radius:12px; box-shadow:var(--rs-shadow) !important; overflow:hidden; }
.maplibregl-ctrl-group button { width:40px; height:40px; }
.maplibregl-ctrl-group button+button { border-color:var(--rs-border); }
.maplibregl-ctrl-group button:hover { background-color:var(--rs-deep); }
html[data-joy-color-scheme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter:none; }
.maplibregl-ctrl-attrib { background:var(--rs-surface) !important; color:var(--rs-muted); border:1px solid var(--rs-border); border-radius:8px !important; margin:0 10px 8px 0 !important; font:10px/20px var(--rs-font); }
.maplibregl-ctrl-attrib a { color:var(--rs-muted); }
html[data-joy-color-scheme="dark"] .maplibregl-ctrl-attrib-button { filter:none; }
.maplibregl-popup-content { background:var(--rs-card); color:var(--rs-text); border:1px solid var(--rs-border); border-radius:12px; box-shadow:var(--rs-shadow); }
.route-planner-launch { top:16px; right:72px; min-height:44px; padding:10px 18px; border:1px solid #ff726b55 !important; border-radius:12px; background:linear-gradient(135deg,#e5322d,#c82320) !important; color:#fff !important; box-shadow:0 8px 24px -10px #e5322d90; font:600 13px/1.2 var(--rs-font); }
.route-planner-launch:hover { filter:brightness(1.1); }
.route-waypoint-panel { box-sizing:border-box; top:16px; right:72px; width:320px; max-height:calc(100svh - 116px); padding:18px; background:var(--rs-card) !important; color:var(--rs-text) !important; border:1px solid var(--rs-border) !important; border-top-color:#e5322d80 !important; border-radius:18px; box-shadow:var(--rs-shadow); font-family:var(--rs-font); }
.route-waypoint-header { margin-bottom:18px; }
.route-waypoint-header strong { font-size:22px; letter-spacing:-.04em; }
.route-waypoint-header small,.route-waypoint-name small,.route-segment-list { color:var(--rs-muted); line-height:1.5; }
.route-waypoint-header small { margin-top:5px; }
.route-waypoint-close { width:40px; height:40px; border-radius:10px; background:var(--rs-deep); }
.route-endpoint-row { grid-template-columns:1fr 40px; }
.route-endpoint-row button,.route-waypoint-actions button,.route-waypoint-row button { min-height:42px; border-radius:10px; border-color:var(--rs-border) !important; background:var(--rs-deep) !important; color:var(--rs-text) !important; font-family:var(--rs-font); }
.route-endpoint-row button.start { border-left-color:#20c997 !important; }
.route-endpoint-row button.end { border-left-color:#ff645e !important; }
.route-endpoint-row button.active,.route-waypoint-actions button.active { border-color:var(--rs-accent-text) !important; background:#e5322d1a !important; color:var(--rs-accent-text) !important; }
.route-waypoint-actions { margin-top:14px; }
.route-waypoint-share,.route-waypoint-reset { min-height:42px; border-radius:10px; font-family:var(--rs-font); }
.route-waypoint-share { color:var(--rs-text); border-color:var(--rs-border); background:var(--rs-deep); }
.route-waypoint-reset { color:var(--rs-accent-text); border-color:#e5322d50; }
.route-waypoint-loading { color:var(--rs-accent-text); }
.route-waypoint-row { grid-template-columns:26px 1fr 28px 28px 28px; }
.route-waypoint-error { background:#e5322d1c; color:var(--rs-accent-text); line-height:1.5; }
@media (max-width:700px) {
  .rs-map-header { height:58px; padding:0 14px; gap:8px; }
  .rs-map-brand { font-size:12px; gap:8px; }
  .rs-map-brand > span:first-child { width:32px; height:32px; border-radius:10px; }
  .rs-map-context { display:none; }
  .rs-map-header nav { border:0; background:none; }
  .rs-map-header nav a { padding:7px 10px; font-size:11px; }
  .rs-map-header nav a:not([aria-current]) { display:none; }
  html.rs-map-standalone #root,html.rs-map-standalone #root > .maplibregl-map { height:calc(100svh - 58px) !important; }
  .maplibregl-ctrl-top-left > .maplibregl-ctrl { margin:12px 0 0 12px; max-width:calc(100vw - 76px); }
  .maplibregl-ctrl-top-left .MuiAutocomplete-root { max-width:calc(100vw - 76px); box-sizing:border-box; }
  .maplibregl-ctrl-top-right > .maplibregl-ctrl { margin-right:10px; }
  .route-planner-launch { top:126px; left:12px; right:auto; min-height:42px; padding:10px 14px; }
  .route-waypoint-panel { top:auto; right:auto; left:12px; bottom:40px; width:calc(100vw - 76px); max-height:calc(100svh - 278px); padding:14px; border-radius:16px; }
  .route-waypoint-header { margin-bottom:12px; }
  .route-waypoint-header strong { font-size:20px; }
  .route-waypoint-actions { gap:6px; }
  .MuiSheet-root { max-width:calc(100vw - 24px); }
}
@media (prefers-reduced-motion:reduce) { .rs-map-header *, .route-planner-launch { transition:none !important; } }

/* MapLibre uses currentColor masks (not raster icons). */
.maplibregl-ctrl-group button { color:var(--rs-text) !important; }
.MuiAutocomplete-input { border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.route-planner-launch { display:flex; align-items:center; gap:8px; }
.route-planner-launch::before { content:""; width:17px; height:17px; background:currentColor; mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m16 8-2.5 5.5L8 16l2.5-5.5Z'/%3E%3C/svg%3E"); }

/* Keep the full tool rail reachable on short landscape screens. */
@media (max-height:450px) and (min-width:701px) {
  .maplibregl-ctrl-top-right > .maplibregl-ctrl { margin-top:6px; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button { width:32px; height:32px; }
  .maplibregl-ctrl-top-right .MuiIconButton-root { min-width:32px !important; min-height:32px !important; }
}
@media (max-width:360px) { .route-waypoint-panel { bottom:60px; } }

/* Live driver producer (dce/fce): override the actual inner Joy sx card and SVG,
 * not only MapLibre's transparent outer wrapper. Keep the green connection dot.
 */
.maplibregl-popup.telemetry-popup { max-width:min(288px,calc(100vw - 40px)) !important; }
.maplibregl-popup.telemetry-popup .maplibregl-popup-content {
  border:0 !important; border-radius:16px !important;
  box-shadow:0 12px 30px -12px #000b !important;
  font-family:var(--rs-font);
}
.telemetry-popup .maplibregl-popup-content > div > .MuiBox-root {
  box-sizing:border-box; min-width:240px !important; max-width:100%; padding:16px !important;
  background:linear-gradient(145deg,#1c1e23,#16181d) !important;
  border:1px solid #42454d !important; border-top-color:#e5322d80 !important;
  border-radius:16px !important; color:#eceef2 !important;
}
.telemetry-popup .maplibregl-popup-content > div > .MuiBox-root > .MuiBox-root:first-child {
  gap:8px !important; margin-bottom:10px !important; padding-right:34px;
}
.telemetry-popup .MuiTypography-root { font-family:var(--rs-font) !important; }
.telemetry-popup .MuiTypography-title-sm { color:#eceef2 !important; font-size:14px !important; font-weight:600 !important; overflow-wrap:anywhere; }
.telemetry-popup .MuiTypography-body-xs { color:#b2b8c2 !important; font-size:12px !important; line-height:1.5; overflow-wrap:anywhere; }
.telemetry-popup .MuiTypography-body-sm { color:#ff645e !important; font-size:22px !important; font-weight:600 !important; letter-spacing:-.025em; line-height:1.35; margin:6px 0 0 !important; }
.telemetry-popup .MuiChip-root { background:#e5322d20 !important; color:#ff8c87 !important; border:1px solid #e5322d45 !important; border-radius:6px !important; font-size:9px !important; letter-spacing:.07em; padding:1px 5px; min-height:19px; }
.maplibregl-popup.telemetry-popup .maplibregl-popup-close-button {
  display:grid; place-items:center; width:32px; height:32px; right:8px !important; top:8px !important;
  padding:0; border:0; border-radius:10px; background:#ffffff06; color:#c8cdd5 !important;
  font:400 22px/1 var(--rs-font) !important; cursor:pointer;
}
.maplibregl-popup.telemetry-popup .maplibregl-popup-close-button:hover { background:#e5322d20; color:#ff8c87 !important; }
.maplibregl-popup.telemetry-popup .maplibregl-popup-close-button:focus:not(:focus-visible) { outline:none; box-shadow:none; }
.maplibregl-popup.telemetry-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color:#17191e !important; }
.maplibregl-popup.telemetry-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color:#1c1e23 !important; }
.maplibregl-popup.telemetry-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color:#17191e !important; }
.maplibregl-popup.telemetry-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:#17191e !important; }
/* The specific 36px titled SVG with r16/r12/r6 circles is the live-driver marker.
 * Presentation selectors leave position/heading transforms and click handlers intact.
 */
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"]:has(> circle[r="16"]) { filter:drop-shadow(0 2px 3px #0009) !important; }
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"] > circle[r="16"] { stroke:#ff645e !important; opacity:0; }
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"] > circle[r="16"][stroke="#00ffff"] { opacity:.65; }
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"] > circle[r="12"] { fill:#e5322d !important; stroke:#17191d !important; stroke-width:2px; }
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"] > circle[r="6"] { fill:#fff !important; r:4px; }
.maplibregl-marker > div[title] > svg[viewBox="0 0 36 36"] > path { fill:#ff8c87 !important; }
.MuiAutocomplete-root { --Input-focusedHighlight:var(--rs-accent-text) !important; }
.MuiAutocomplete-listbox .MuiAutocomplete-option:hover,
.MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected="true"] { background:#e5322d18 !important; }