:root {
  color-scheme: light;
  --paper: #ffffff;
  --brut-ink: #111111;
  --clr-accent: #fde84a;
  --danger: #e62200;
  --ink: var(--brut-ink);
  --acid: var(--clr-accent);
  --orange: var(--clr-accent);
  --blue: var(--clr-accent);
  --green: var(--brut-ink);
  --line: 2px solid var(--brut-ink);
  --panel-width: 360px;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body, .app-shell, #map { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); color: var(--ink); }
button, select { font: inherit; color: inherit; }
button { text-transform: uppercase; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { position: relative; }
#map { z-index: 0; background: #d7d3ca; }
.leaflet-container { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; font-family: Arial, Helvetica, sans-serif; }
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-image-layer, .leaflet-layer { position: absolute; left: 0; top: 0; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-tile-pane { z-index: 200; filter: grayscale(1) contrast(1.08); }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-tile { visibility: hidden; user-select: none; -webkit-user-drag: none; }
.leaflet-tile-loaded { visibility: inherit; }
.leaflet-zoom-animated { transform-origin: 0 0; }
.leaflet-top, .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.leaflet-top { top: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-left { left: 0; }
.leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
.leaflet-control-zoom { border: var(--line) !important; border-radius: 0 !important; box-shadow: 5px 5px 0 var(--ink) !important; }
.leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 35px !important; border: 0 !important; border-bottom: var(--line) !important; border-radius: 0 !important; color: var(--ink) !important; background: var(--acid) !important; font-weight: 900; }
.leaflet-control-zoom a:last-child { border-bottom: 0 !important; }
.leaflet-control-attribution { border: 1px solid var(--ink) !important; border-radius: 0 !important; color: var(--ink) !important; background: var(--paper) !important; }
.leaflet-control-attribution a { color: var(--blue) !important; font-weight: 700; }

.control-panel {
  position: absolute;
  z-index: 500;
  inset: 14px auto 14px 14px;
  width: min(var(--panel-width), calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s steps(2, end), opacity .12s linear;
}
.control-panel.is-hidden { transform: translateX(calc(-100% - 36px)); opacity: 0; pointer-events: none; }

.panel-header { display: flex; justify-content: space-between; gap: 12px; padding: 15px 14px 14px; border-bottom: var(--line); background: var(--paper); }
h1 { display: inline-block; margin: 0; max-width: 250px; padding: 2px 6px 3px; color: var(--ink); background: var(--clr-accent); font-size: clamp(26px, 3vw, 35px); line-height: .92; letter-spacing: -.045em; }
.subtitle { margin: 9px 0 0; max-width: 270px; font: 700 10px/1.35 "Courier New", monospace; text-transform: uppercase; }

.icon-button { display: grid; width: 40px; min-width: 40px; height: 40px; place-items: center; border: var(--line); border-radius: 0; background: var(--paper); font: 900 12px/1 Arial, sans-serif; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .1s linear, box-shadow .1s linear; }
.icon-button:hover { background: var(--orange); }
.icon-button:active { transform: translate(2px, 2px); box-shadow: none; }
.close-button { font-size: 18px; }
.panel-toggle { position: absolute; z-index: 499; top: 14px; left: 14px; width: 66px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }

.section { padding: 13px 14px; border-bottom: var(--line); }
.route-section { min-height: 130px; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
h2 { margin: 0; font: 900 13px/1 Arial, sans-serif; letter-spacing: .04em; }
.count-badge, .status-badge { min-width: 28px; padding: 5px 7px; border: 1px solid var(--ink); border-radius: 0; font: 700 10px/1 "Courier New", monospace; text-align: center; }
.count-badge { background: var(--clr-accent); color: var(--ink); }
.status-badge { background: var(--brut-ink); color: white; }
.status-badge.loading { color: var(--ink); background: var(--clr-accent); }
.status-badge.error { color: var(--ink); background: var(--clr-accent); }
.route-list { overflow-y: auto; padding: 2px 5px 2px 0; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.empty-state { min-height: 88px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed var(--ink); text-align: center; font: 12px/1.25 "Courier New", monospace; }
.empty-state strong { font: 900 14px/1 Arial, sans-serif; }
.empty-icon { display: grid; width: 30px; height: 30px; place-items: center; border: var(--line); background: var(--clr-accent); font-size: 22px; font-weight: 900; }

.point-row { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; }
.point-label { display: grid; width: 30px; height: 30px; place-items: center; border: var(--line); border-radius: 0; color: var(--ink); background: var(--clr-accent); font: 900 13px/1 Arial, sans-serif; box-shadow: 2px 2px 0 var(--ink); }
.point-copy { min-width: 0; }
.point-copy strong { display: block; font: 900 13px/1.2 Arial, sans-serif; text-transform: uppercase; }
.point-copy span { display: block; overflow: hidden; margin-top: 3px; font: 11px/1.2 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.segment-control { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; min-height: 50px; }
.segment-line { position: relative; justify-self: center; width: 2px; background: var(--ink); }
.segment-line::after { content: "+"; position: absolute; top: 50%; left: 50%; display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid var(--ink); background: var(--paper); font: 900 12px/1 Arial, sans-serif; transform: translate(-50%,-50%); }
.mode-select { align-self: center; width: 100%; min-height: 36px; padding: 0 34px 0 10px; border: var(--line); border-radius: 0; color: var(--ink); background: var(--paper); font: 700 11px/1 "Courier New", monospace; text-transform: uppercase; cursor: pointer; outline: none; }
.mode-select:focus { background: #fff3ef; box-shadow: 3px 3px 0 var(--ink); }
.segment-meta { display: block; margin-top: 4px; font: 10px/1.2 "Courier New", monospace; text-transform: uppercase; }
.segment-meta.error { color: #b51f00; }
.route-prompt { margin: 10px 0 0 42px; padding: 10px; border: 1px dashed var(--ink); background: var(--clr-accent); font: 700 11px/1.35 "Courier New", monospace; text-transform: uppercase; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.stat-card { min-height: 58px; padding: 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.stat-primary { color: var(--ink); background: var(--clr-accent); }
.stat-card span { display: block; margin-bottom: 7px; font: 700 9px/1 "Courier New", monospace; }
.stat-card strong { font-size: 17px; line-height: 1; letter-spacing: -.04em; }
.stat-card small { font: 700 10px/1 "Courier New", monospace; }
.stats-note { margin: 10px 0 0; font: 700 9px/1.35 "Courier New", monospace; }
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px 14px 14px; }
.action-button { min-height: 40px; padding: 8px; border: var(--line); border-radius: 0; background: var(--paper); font: 900 11px/1 Arial, sans-serif; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.action-button:hover:not(:disabled) { color: var(--ink); background: var(--clr-accent); }
.action-button.danger { color: white; background: var(--danger); }
.action-button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.action-button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }

.map-hint { position: absolute; z-index: 400; left: calc(var(--panel-width) + 34px); bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: var(--line); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); font: 900 11px/1 Arial, sans-serif; }
.pulse-dot { width: 9px; height: 9px; border: 2px solid var(--ink); background: var(--clr-accent); }
.toast { position: absolute; z-index: 700; top: 24px; left: 50%; max-width: min(440px, calc(100vw - 32px)); padding: 12px 14px; border: var(--line); background: var(--clr-accent); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); opacity: 0; pointer-events: none; transform: translate(-50%, -14px); transition: opacity .12s linear, transform .12s linear; font: 700 12px/1.35 "Courier New", monospace; text-transform: uppercase; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.route-marker { background: transparent; border: 0; }
.route-marker span { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--ink); border-radius: 0; color: var(--ink); background: var(--clr-accent); box-shadow: 4px 4px 0 var(--ink); font: 900 13px/1 Arial, sans-serif; transform: rotate(45deg); }
.route-marker b { transform: rotate(-45deg); }
button:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 720px) {
  :root { --panel-width: 100%; }
  .control-panel { inset: auto 10px 10px; width: calc(100vw - 20px); max-height: min(82vh, 700px); box-shadow: 6px 6px 0 var(--ink); }
  .control-panel.is-hidden { transform: translateY(calc(100% + 24px)); }
  .panel-toggle { top: 12px; left: 12px; }
  .panel-header { padding: 16px; }
  h1 { font-size: 31px; }
  .section { padding: 14px 16px; }
  .route-section { min-height: 138px; }
  .panel-actions { padding: 12px 16px 16px; }
  .map-hint { left: 12px; right: 12px; bottom: 18px; justify-content: center; text-align: center; }
  .control-panel:not(.is-hidden) ~ .map-hint { display: none; }
  .leaflet-control-zoom { margin-top: 72px !important; }
}

@media (max-height: 700px) and (min-width: 721px) {
  .control-panel { inset-block: 10px; }
  .panel-header { padding-block: 14px; }
  .section { padding-block: 11px; }
  .stats-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}