/* Bezirkskarte (js/district-picker.js) — Tour-Zuschnitt nach Dichte, Konzept docs/superpowers/specs/2026-10-24-grossstaedte-konzept.md.
   „Tinte & Elfenbein“ mit EINER Ausnahme (DESIGN.md §2, Entscheid 25.10.2026): die Bezirke sind farblich klar gegeneinander abgegrenzt.
   Die fünf Töne gibt es nur hier, nie Signalgrün (eigene Position), nie Stubbs-Orange, nie Pausen-Karamell; dazu stehen Nummer und Name
   auf jeder Fläche, damit die Karte auch ohne Farbsehen funktioniert. Gate: tests/design-system.test.js („Bezirksfarben nur auf der Bezirkskarte“). */
.dp {
  --district-1: #2f6db5;   /* Blau */
  --district-2: #b8336a;   /* Himbeere */
  --district-3: #1f7a8c;   /* Petrol */
  --district-4: #6b4fb3;   /* Violett */
  --district-5: #5b6770;   /* Schiefer */
  position: fixed; inset: 0; z-index: 9440; display: flex; flex-direction: column;
  background: var(--ivory); color: var(--ink); font-family: var(--font-sans);
}
html.dp-open { overflow: hidden; }

/* Karte oben (Handy) bzw. links (Desktop); das Quellen-„i“ steht unten rechts im sichtbaren Kartenbereich */
.dp__mapwrap { position: relative; flex: 1 1 auto; min-height: 42vh; }
/* z-index 0: eigene Stapelebene unter Kopfzeile und Stubbs. maplibre-gl.css (lädt später) setzt .maplibregl-map auf position: relative —
   mit der zweiten Klasse bleibt die Karte absolut (sonst 0 px hoch) */
.dp__map, .dp__map.maplibregl-map { position: absolute; inset: 0; z-index: 0; background: var(--ivory-2); }

.dp__top {
  position: absolute; z-index: 500; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.dp__top > * { pointer-events: auto; }
.dp__back, .dp__locate {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--ink); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(27, 28, 26, .06), 0 6px 16px rgba(27, 28, 26, .10);
  font: 600 14px/1 var(--font-sans);
}
.dp__back { width: 44px; flex: none; }
.dp__locate { margin-left: auto; padding: 0 14px 0 12px; flex: none; }
.dp__locate[aria-busy="true"] svg { animation: dpSpin 1s linear infinite; }
.dp__back svg, .dp__locate svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp__pill {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(27, 28, 26, .06), 0 6px 16px rgba(27, 28, 26, .10);
}
.dp__pill b { font: 600 15px/1.1 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp__pill .eyebrow-ink { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Quellen-„i“ (CityModel.creditsControl, Stil .mcred aus kit.css): über dem Rand des Blatts, das auf dem Handy 20 px in die Karte ragt */
.dp__map .maplibregl-ctrl-bottom-right { bottom: 20px; }

/* Stubbs spricht in der Szene, über der Karte (DESIGN.md §8) — oberhalb der Quellenzeile, die beim Laden offen steht
   (20 px Blattrand + 10 px Abstand + 24 px Zeile + 8 px Luft) */
.dp__scene {
  position: absolute; z-index: 500; left: 12px; bottom: 62px; right: 96px;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.dp__scene .stubbs-bubble { font-size: 18px; max-width: 100%; }
.dp__scene { transition: opacity .3s ease, transform .3s ease; }
.dp__scene.is-quiet { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }

.dp__sheet {
  position: relative; display: flex; flex-direction: column; max-height: 58vh; min-height: 0;
  background: var(--paper); border-radius: 28px 28px 0 0; box-shadow: 0 -8px 24px rgba(27, 28, 26, .10);
  margin-top: -20px; z-index: 600;
}
.dp__grip { width: 38px; height: 4px; border-radius: 4px; background: var(--ivory-3); margin: 10px auto 4px; flex: none; }
/* Status und Hinweis behalten ihre Höhe (flex: none) — nur die Liste schrumpft und scrollt */
.dp__status { margin: 4px 20px 0; flex: none; font: 500 13px/1.35 var(--font-sans); color: var(--ink-2); }
.dp__status:empty { margin: 0; }
.dp__note { margin: 6px 20px 0; flex: none; font: 400 13px/1.35 var(--font-sans); color: var(--ink-3); }
.dp__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.dp__foot { padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); border-top: 1px solid var(--hair); flex: none; }
.dp__go { width: 100%; }

/* Bezirks-Karte in der Liste: gewählt = 1,5-px-Tinte-Rand + Häkchen (wie .tile-ink), nie farbig hinterlegt */
.dp-card {
  display: grid; grid-template-columns: 30px 1fr 22px; gap: 12px; align-items: start; width: 100%;
  padding: 12px 12px 12px 10px; border: 0; border-radius: 20px; background: transparent; color: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.dp-card.is-active { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--ivory); }
.dp-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dp-card__no {
  width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font: 700 14px/1 var(--font-sans); margin-top: 1px;
}
.dp-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dp-card__name { font: 600 15.5px/1.25 var(--font-sans); }
.dp-card__rec { font: 600 10.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
/* Bezirk mit der Startadresse aus dem Formular (Konzept 5.2) */
.dp-card__start { font: 600 10.5px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.dp-card__meta { font: 400 13px/1.3 var(--font-sans); color: var(--ink-3); }
.dp-card__tick { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; opacity: 0; color: #fff; background: var(--ink); }
.dp-card__tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dp-card.is-active .dp-card__tick { opacity: 1; }
.dp-card__hls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.dp-hl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-hl__ph {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--ivory-2); color: var(--ink);
}
.dp-hl__ph .si { width: 22px; height: 22px; }
.dp-hl__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dp-hl__name {
  font: 500 12px/1.25 var(--font-sans); color: var(--ink-2); hyphens: auto; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Farben der Bezirke (Ausnahme, siehe oben): Nummern-Chip in Liste und Karte, Fläche und Kante auf der Karte */
.dp-c0 { --dc: var(--district-1); }
.dp-c1 { --dc: var(--district-2); }
.dp-c2 { --dc: var(--district-3); }
.dp-c3 { --dc: var(--district-4); }
.dp-c4 { --dc: var(--district-5); }
.dp-card__no, .dp-label__no { background: var(--dc); }
/* Marker über der Karte: Nummern über den Highlight-Pins, Startpunkt darüber, eigener Standort ganz oben */
.dp-hlpin { z-index: 2; pointer-events: none; }
.dp-label { z-index: 3; cursor: pointer; }
.dp-start { z-index: 4; pointer-events: none; }
.dp-me { z-index: 5; pointer-events: none; }
.dp-label__no {
  width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  color: #fff; font: 700 15px/1 var(--font-sans); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(27, 28, 26, .25); transition: transform .15s ease;
}
.dp-label.is-active .dp-label__no { transform: scale(1.18); box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink), 0 4px 10px rgba(27, 28, 26, .3); }

/* Eigene Position (Signal, DESIGN.md §7) und Startpunkt */
.dp-me span { display: block; width: 22px; height: 22px; border-radius: 999px; background: var(--signal); box-shadow: 0 0 0 4px #fff, 0 3px 10px rgba(27, 28, 26, .3); }
.dp-start span { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(27, 28, 26, .25); }

@keyframes dpSpin { to { transform: rotate(360deg); } }

/* Ohne Karte (kein WebGL, Bibliothek nicht erreichbar): Kopfzeile oben, die Liste füllt den Rest */
.dp.is-nomap .dp__mapwrap { flex: 0 0 auto; min-height: 0; height: calc(env(safe-area-inset-top, 0px) + 68px); }
.dp.is-nomap .dp__map, .dp.is-nomap .dp__scene { display: none; }
.dp.is-nomap .dp__sheet { flex: 1 1 auto; max-height: none; margin-top: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--hair); }

/* Desktop: Karte links, Liste rechts */
@media (min-width: 1024px) {
  .dp { flex-direction: row; }
  .dp__mapwrap { min-height: 0; }
  .dp__sheet { width: 440px; max-height: none; margin-top: 0; border-radius: 0; box-shadow: -1px 0 0 var(--hair); }
  .dp__grip { display: none; }
  .dp__status { margin-top: 18px; }
  .dp__scene { right: 24px; bottom: 46px; }
  .dp__map .maplibregl-ctrl-bottom-right { bottom: 0; }
}
/* niedrige Querformat-Handys: Liste daneben statt darunter */
@media (max-height: 520px) and (orientation: landscape) {
  .dp { flex-direction: row; }
  .dp__mapwrap { min-height: 0; }
  .dp__sheet { width: min(420px, 52vw); max-height: none; margin-top: 0; border-radius: 0; }
  .dp__grip { display: none; }
  .dp__scene { bottom: 46px; }
  .dp__map .maplibregl-ctrl-bottom-right { bottom: 0; }
}
/* kleine Handys: mehr Karte, kleinere Blase und Fotos; ganz schmal „Wo bin ich?“ nur als Symbol (Name bleibt für Screenreader) */
@media (max-height: 700px) and (orientation: portrait) {
  .dp__sheet { max-height: 54vh; }
  .dp-hl__ph { aspect-ratio: 16 / 10; }
  .dp__scene .stubbs-bubble { font-size: 16px; }
}
@media (max-width: 340px) {
  .dp__locate { width: 44px; padding: 0; }
  .dp__locate span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-label__no { transition: none; }
  .dp__scene, .dp__scene.is-quiet { transition: none; }
  .dp__locate[aria-busy="true"] svg { animation: none; }
}