/* ═══════════════════════════════════════════════════════════
   Hawkeye PWA — Mobile Styles
   Extends foundation.css (loaded before this file)
   Farbpalette: --cyan #FF9100 (Nottingham-Orange) · --magenta #E91E8C · --navy #0d1117
════════════════════════════════════════════════════════════ */

/* ── PWA-spezifische Tokens (ergänzt foundation.css) ── */
:root {
  /* Überschreibt --bg für bessere Outdoor-Lesbarkeit */
  --bg:          #f3f5f7;

  /* Semantische Text-Farben (kein globales Token) */
  --color-text-primary:   #1a2230;
  --color-text-secondary: var(--label);
  --color-danger:         #e53935;
  --surface:              var(--surface-card);
  --text:                 #1a2230;

  /* PWA-Layout-Vars (kein Pendant in hawkeye-tokens.css) */
  --bnav-h:      60px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ── Dark Mode Tokens (hawkeye-tokens.css ist in der App nicht geladen) ── */
  --dm-bg:          #0d1117;
  --dm-surface:     #141b27;
  --dm-surface-2:   #1e2a3e;
  --dm-border:      rgba(255,255,255,.08);
  --dm-border-cell: rgba(255,255,255,.14);
  --dm-text:        #ffffff;
  --dm-text-2:      rgba(255,255,255,.60);
  --dm-text-3:      rgba(255,255,255,.36);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior: none;
  /* Verhindert horizontales Scrollen auf Dokument-Ebene (iOS WKWebView) */
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--color-text-primary);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; color: inherit; }
input  { font-family: inherit; }

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
#app {
  display: flex;
  flex-direction: column;
  /* WICHTIG: nicht 100dvh!
     `dvh` rechnet sich nach einer SW-controllerchange-getriebenen
     `location.replace`-Navigation (siehe settings.js btn-apply-update
     mit `?_swu=…`-Cache-Buster) in Chrome auf einen zu großen Wert ein
     — auf Pixel/Android konkret +56 px, als bliebe Platz für eine
     Bottom-System-Bar reserviert. Der Container ragt dann unter den
     sichtbaren Viewport, sein letztes Flex-Kind (die Bottom-Nav) sitzt
     ausserhalb des sichtbaren Bereichs. Der `dvh`-Wert korrigiert sich
     erst nach einer erzwungenen Window-Insets-Neuberechnung (Tab-
     Wechsel im DevTools-Dock, neues System-Modal, Fenster-Resize um
     deutlich >1 px). `100%` resolved deterministisch gegen
     `html { height: 100% }` (Z. 31) — gleicher Effekt, kein Recalc-Bug. */
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  /* Side safe-areas (notch/curved-edge); top/bottom handled per-component
     so the dark app-bar can extend behind the translucent status bar. */
  padding-left:  var(--safe-left);
  padding-right: var(--safe-right);
}

/* Paint the body the same dark colour as the app-bar so that the area
   under the (translucent) Android/iOS status bar stays dark instead of
   showing the page background. The actual app content is constrained
   by #app's max-width and lives inside .screen which restores --bg. */
body {
  background: var(--navy);
}

#screen {
  flex: 1;
  min-height: 0; /* prevent flex item from growing beyond allocated height */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

/* ── Screen base ── */
.screen {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ══════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════ */
.bottom-nav {
  /* VISIBILITY-STRATEGIE:
     Default ist `display: none` — Nav ist initial unsichtbar. Sichtbar
     erst durch zusätzliche Klasse `.is-visible`, die JS togglet
     (siehe router.js → _updateNav). Wir nutzen bewusst NICHT das
     [hidden]-Attribut: dessen UA-Default-Regel `[hidden]{display:none}`
     hat dieselbe Specificity (0,1,0) wie `.bottom-nav{display:flex}`,
     und Author-CSS schlägt UA-Stylesheet bei gleicher Specificity →
     das [hidden]-Attribut wurde stillschweigend ignoriert. Klassen-
     Pattern hat klare Specificity (0,2,0 für .is-visible) und gewinnt
     deterministisch. */
  display: none;
  flex-shrink: 0;
  align-items: center;
  height: calc(var(--bnav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.06);
  /* Über sheet-backdrop (z-index: 40), damit die Nav auch während
     des First-Run-Archer-Sheets erreichbar bleibt. */
  position: relative;
  z-index: 60;
}
.bottom-nav.is-visible {
  display: flex;
}

.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s;
}

.bnav-item i { font-size: 22px; line-height: 1; }
.bnav-item.active { color: var(--cyan); }
.bnav-item:active { opacity: .7; }

/* ══════════════════════════════════════════
   APP BAR
══════════════════════════════════════════ */
.app-bar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Reserve space for the Android/iOS status bar so its translucent
     overlay sits on top of our dark bar — the bar's intrinsic height
     stays unchanged, only the top padding grows by --safe-top. */
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  padding-right: 12px;
  padding-left: 16px;
  gap: 8px;
}

.app-bar--dark {
  background: var(--navy);
  color: #fff;
}

.app-bar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.app-bar__icon { font-size: 20px; color: var(--cyan); }
.app-bar__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.app-bar__back, .app-bar__action {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 20px;
  border-radius: 8px;
  transition: background .15s;
}
.app-bar__back:active, .app-bar__action:active {
  background: rgba(255,255,255,.1);
}

/* ══════════════════════════════════════════
   HOME SCREEN
══════════════════════════════════════════ */
.screen--home { background: var(--bg); }

.home-modes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 0;
}

.mode-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  border-radius: 14px;
  border: none;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-align: left;
  transition: transform .12s, box-shadow .12s;
}

.mode-card:active { transform: scale(.98); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.mode-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.mode-card--normal .mode-card__icon  { background: rgba(255,145,0,.12); color: var(--primary); }
.mode-card--explore .mode-card__icon  { background: rgba(255,145,0,.12); color: var(--primary); }
.mode-card--parcours .mode-card__icon { background: rgba(255,145,0,.12); color: var(--primary); }

.mode-card__text { flex: 1; }
.mode-card__text h2 { font-size: 17px; font-weight: 700; color: var(--color-text-primary); }
.mode-card__text p  { font-size: 12px; color: var(--label); margin-top: 3px; line-height: 1.4; }
.mode-card__arrow   { font-size: 18px; color: var(--label); }

/* Recent sessions */
.home-recent { padding: 20px 16px 0; }
.recent-list { margin-top: 8px; }

.recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.recent-item:last-child { border-bottom: none; }
.recent-item__name { font-size: 14px; font-weight: 600; }
.recent-item__meta { font-size: 11px; color: var(--label); display: block; margin-top: 1px; }
.recent-item__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.recent-item__score { font-size: 20px; font-weight: 900; color: var(--cyan); }
.recent-item__caret { font-size: 16px; color: var(--label); opacity: 0.5; }

/* Tappable variant */
.recent-item--tappable {
  cursor: pointer;
  border-radius: 8px;
  margin: 0 -8px;
  padding: 12px 8px;
  transition: background .12s;
}
.recent-item--tappable:last-child { border-bottom: none; }
.recent-item--tappable:active,
.recent-item--tappable:focus-visible {
  background: rgba(0,0,0,.05);
  outline: none;
}

/* ══════════════════════════════════════════
   AVATARS
══════════════════════════════════════════ */
.avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #888;
  width: 52px;
  height: 52px;
}
.avatar--sm  { width: 36px; height: 36px; }
.avatar--md  { width: 52px; height: 52px; }
.avatar--lg  { width: 72px; height: 72px; }
.avatar--add { background: var(--border) !important; }

.avatar__initials {
  font-size: .38em;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  pointer-events: none;
  font-size: 16px;
}
.avatar--sm .avatar__initials  { font-size: 12px; }
.avatar--lg .avatar__initials  { font-size: 22px; }

/* ══════════════════════════════════════════
   ARCHERS SCREEN
══════════════════════════════════════════ */
.archers-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.archer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.archer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 8px 4px;
  border-radius: 10px;
  transition: background .15s;
}
.archer-card:active { background: rgba(0,0,0,.05); }
.archer-card__name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-primary);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-archer-row {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* ══════════════════════════════════════════
   BUTTONS & CHIPS
══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 20px;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  transition: opacity .12s, transform .1s;
  white-space: nowrap;
}
.btn:active   { opacity: .8; transform: scale(.98); }
.btn:disabled { opacity: .38; pointer-events: none; }

.btn--primary { background: var(--cyan); color: #fff; }
.btn--outline { background: transparent; border: 1.5px solid var(--border); color: var(--color-text-primary); }
.btn--ghost   { background: transparent; border: none; color: var(--color-text-secondary); }
/* btn--danger-ghost: nur für Dark-Mode-App-Bar-Kontext (Icon-only, dunkler BG) */
.btn--danger-ghost { background: transparent; border: none; color: #dc2626; }
.btn--full    { width: 100%; }
.btn--lg      { height: 52px; font-size: 16px; border-radius: 14px; }
.btn--sm      { height: 32px; font-size: 12px; padding: 0 12px; border-radius: 8px; }

.link-btn {
  background: none;
  border: none;
  color: var(--cyan);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--color-text-secondary);
  transition: all .12s;
  white-space: nowrap;
}
.chip--active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ══════════════════════════════════════════
   SESSION SETUP SCREEN
══════════════════════════════════════════ */
.screen--setup { background: var(--bg); }

/* Body is no longer a single scrollable area.
   Each section scrolls independently so all three
   headings are always on screen at the same time. */
.setup-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Generic section wrapper */
.setup-section {
  flex-shrink: 0;
  padding: 0 var(--sp-lg);
}
.setup-section:first-child { padding-top: var(--sp-lg); }
/* --sp-2xl (24px) = Design System major-section rhythm */
.setup-section + .setup-section { margin-top: var(--sp-2xl); }

/* Independently scrollable list inside a section.
   Hawkeye 4px scrollbar acts as the scroll indicator:
   the thumb only appears when content actually overflows. */
.setup-section__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--sp-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.setup-section__list::-webkit-scrollbar         { width: var(--scrollbar-w); }
.setup-section__list::-webkit-scrollbar-track   { background: transparent; }
.setup-section__list::-webkit-scrollbar-thumb   {
  background: var(--scrollbar-thumb);
  border-radius: 2px;
}
.setup-section__list::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Parcours — show exactly ~3 chips (each chip ≈ 60px, gap 8px) */
.setup-section--parcours .setup-section__list { max-height: 196px; }

/* Regelwerk — show ~2 chip rows before scrolling */
.setup-section--ruleset .setup-section__list { max-height: 88px; }

/* Archers — takes all remaining vertical space */
.setup-section--archers {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  padding-bottom: 8px;
}

.setup-footer {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Parcours chips */
.parcours-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* margin-top moved to .setup-section__list */
}
.parcours-chip {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--white);
  text-align: left;
  transition: all .12s;
}
.parcours-chip--active {
  border-color: var(--cyan);
  background: rgba(255,145,0,.06);
}
.parcours-chip__name { font-size: 14px; font-weight: 700; }
.parcours-chip__meta { font-size: 11px; color: var(--label); margin-top: 2px; }

/* Archer carousel */
.carousel-wrap {
  overflow: hidden;
  margin: 6px -16px 0;
}
.carousel {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 16px 12px;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 8px 6px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
  min-width: 72px;
}
.carousel-item--selected {
  border-color: var(--cyan);
  background: rgba(255,145,0,.06);
}
.carousel-item__name { font-size: 11px; font-weight: 600; }

.carousel-item__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.carousel-item--selected .carousel-item__check { opacity: 1; }

.carousel-item--add .avatar--add {
  color: var(--label);
  font-size: 22px;
  border: 2px dashed var(--border);
}

/* Archer order badges */
.archer-order { margin-top: 10px; }
.order-row    { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.order-badge  {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 12px;
}
.order-badge__num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════
   TARGET SCREEN
══════════════════════════════════════════ */
.screen--target {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.target-header {
  flex-shrink: 0;
  background: var(--navy);
  padding: 10px 12px 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.target-header__progress { flex: 1; }
.target-header__counter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.target-header__bar {
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.target-header__fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 2px;
  transition: width .4s ease;
}

/* Target info */
.target-info {
  flex-shrink: 0;
  padding: 20px 16px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.target-info__animal {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--color-text-primary);
}
.target-info__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg);
  color: var(--label);
}
.info-chip--large  { background: rgba(255,145,0,.1);  color: var(--cyan); }
.info-chip--medium { background: rgba(233,30,140,.08); color: var(--magenta); }
.info-chip--small  { background: rgba(158,158,158,.12); color: #666; }

/* Archer turn */
.archer-turn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.archer-turn__info { flex: 1; }
.archer-turn__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-primary);
}
.archer-turn__arrow {
  font-size: 12px;
  color: var(--label);
  margin-top: 2px;
}
.archer-turn__dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.progress-dot.done   { background: rgba(255,145,0,.4); }
.progress-dot.active { width: 12px; height: 12px; }

/* Hit buttons — full-width, stacked, large tap targets */
.hit-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
}

.hit-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 72px;
  border-radius: 16px;
  border: none;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  transition: transform .1s, box-shadow .1s;
  position: relative;
  overflow: hidden;
}
.hit-btn:active { transform: scale(.97); }

.hit-btn--kill  { background: var(--hit-kill);  box-shadow: 0 4px 16px rgba(255,145,0,.35); }
.hit-btn--wound { background: var(--hit-wound); box-shadow: 0 4px 16px rgba(233,30,140,.3); }
.hit-btn--miss  { background: var(--hit-miss);  box-shadow: 0 4px 8px rgba(0,0,0,.15); }

.hit-btn__icon  { font-size: 24px; line-height: 1; width: 32px; text-align: center; }
.hit-btn__label { flex: 1; }
.hit-btn__score {
  font-size: 13px;
  font-weight: 600;
  opacity: .75;
  letter-spacing: .02em;
}

/* Shot history */
.shot-history {
  padding: 0 16px 16px;
  flex-shrink: 0;
}
.shot-row {
  display: flex;
  gap: 6px;
}
.shot-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.shot-pip--kill  { background: var(--hit-kill); }
.shot-pip--wound { background: var(--hit-wound); }
.shot-pip--miss  { background: var(--hit-miss); }

/* ══════════════════════════════════════════
   SUMMARY SCREEN
══════════════════════════════════════════ */
.screen--summary { background: var(--bg); }
.summary-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Leaderboard (accordion) ── */
.leaderboard {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
}

/* Collapsed row */
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background .12s, box-shadow .12s;
}
.lb-row:focus        { outline: none; }
.lb-row:active       { background: rgba(0,0,0,.03); }
/* Open state: inset left accent — stays inside the card, respects border-radius */
.lb-row--open {
  background: rgba(255,145,0,.05);
  box-shadow: inset 3px 0 0 var(--cyan);
}

/* The detail panel immediately follows its lb-row in the DOM */
.lb-detail:last-child,
.lb-row:last-of-type { border-bottom: none; }
.lb-row--first { background: rgba(255,145,0,.04); }
.lb-row--first.lb-row--open { background: rgba(255,145,0,.07); }

.lb-rank {
  font-size: 14px;
  font-weight: 900;
  color: var(--label);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.lb-row--first .lb-rank { color: var(--cyan); }
.lb-name  { flex: 1; font-size: 14px; font-weight: 600; }
.lb-score {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--cyan);
}
.lb-pills { display: flex; gap: 4px; }
.lb-chevron {
  font-size: 14px;
  color: var(--label);
  flex-shrink: 0;
  transition: transform .2s;
}
.lb-row--open .lb-chevron { transform: rotate(180deg); }

.pill {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.pill--kill  { background: rgba(255,145,0,.15);  color: var(--cyan); }
.pill--wound { background: rgba(233,30,140,.12); color: var(--magenta); }
.pill--miss  { background: rgba(150,150,150,.12); color: #666; }

/* ── Detail panel ── */
.lb-detail {
  padding: 14px 14px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Two-column grid: label | value */
.ld-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 9px;
  column-gap: 16px;
  align-items: baseline;
}
.ld-lbl {
  font-size: 13px;
  color: var(--label);
}
.ld-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: right;
  white-space: nowrap;
}
.ld-mono {
  font-family: var(--font-mono);
}
.ld-phase2 {
  opacity: .4;
  font-style: italic;
}

/* Divider between stat groups */
.ld-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

/* Dot plot */
.ld-dotplot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ld-dotplot__lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 8px;
  display: block;
}
.ld-dotplot__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* no scroll chaining past first/last point */
  scrollbar-width: none;
}
.ld-dotplot__scroll::-webkit-scrollbar { display: none; }
.ld-dotplot svg {
  display: block;
  overflow: visible; /* allow score labels above dots to breathe */
}
/* ── Shot Telemetry (summary screen) ── */
.telem-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.telem-stat {
  flex: 1 1 auto;
  min-width: 72px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.telem-stat__lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--label);
}
.telem-stat__val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-dk);
}
.telem-stat__val--warn { color: #e65100; } /* fast interval warning */

.telem-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
}
.telem-header {
  display: grid;
  grid-template-columns: 72px 64px 1fr;
  gap: 0 8px;
  padding: 6px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--label);
}
.telem-target-lbl {
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan-dk);
  background: rgba(255,145,0,.04);
  border-top: 1px solid var(--border);
}
.telem-target-lbl:first-child { border-top: none; }
.telem-row {
  display: grid;
  grid-template-columns: 72px 64px 1fr;
  gap: 0 8px;
  padding: 6px 12px;
  border-top: 1px solid #f0f2f4;
  font-variant-numeric: tabular-nums;
  align-items: center;
}
.telem-row:nth-child(even) { background: #fafbfc; }
.telem-time  { color: var(--label); }
.telem-intv  { font-weight: 600; color: var(--cyan-dk); }
.telem-gps   { color: #78909c; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ld-nodata {
  font-size: 12px;
  color: var(--label);
  font-style: italic;
  text-align: center;
  padding: 12px 0 4px;
}

/* ══════════════════════════════════════════
   BOTTOM SHEET
   Das Sheet endet OBERHALB der bottom-nav, damit die
   .sheet-actions (Speichern/Löschen) nicht von der
   Nav verdeckt werden. Die Nav (z-index 60) bleibt
   bewusst sichtbar/bedienbar; der Backdrop dimmt nur
   den Screen-Bereich.
══════════════════════════════════════════ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 40;
  animation: fade-in .2s ease;
}

.bottom-sheet {
  position: fixed;
  /* Über der bottom-nav statt dahinter — sonst verdeckt die Nav
     die untere Sheet-Kante (= Speichern-Button) */
  bottom: calc(var(--bnav-h) + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  z-index: 50;
  transition: transform .28s cubic-bezier(.32,1,.23,1);
  /* Sheet darf maximal so hoch werden, dass Nav UND Safe-Area
     unterhalb der Sheet-Kante frei bleiben */
  max-height: calc(90dvh - var(--bnav-h) - var(--safe-bottom));
  overflow-y: auto;
  /* Klare visuelle Trennung zur Nav */
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
}
.bottom-sheet.sheet--open { transform: translateX(-50%) translateY(0); }

.sheet-handle {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 12px auto 0;
}
.sheet-content { padding: 16px 20px 32px; }

.sheet-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 20px;
}

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

/* Avatar picker */
.avatar-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════════ */
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 5px;
  margin-top: 14px;
}
.field-label:first-child { margin-top: 0; }
.required { color: var(--magenta); }

.field-input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  padding: 0 14px;
  font-size: 15px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color .15s;
}
.field-input:focus { border-color: var(--cyan); }

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-label:first-child { margin-top: 0; }
.section-label--sm { font-size: 9px; margin: 10px 0 4px; }
.section-label__count { margin-left: auto; font-size: 10px; color: var(--cyan); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--label);
  font-size: 14px;
  text-align: center;
}
.empty-state i { font-size: 48px; }
.empty-state--sm { padding: 24px 16px; }

.empty-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--label);
  font-size: 13px;
}

.spinner {
  width: 24px; height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 24px auto;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ══════════════════════════════════════════
   DESKTOP PREVIEW FRAME
══════════════════════════════════════════ */
@media (min-width: 520px) {
  body { background: #1a1f2e; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
  #app { border-radius: 40px; box-shadow: 0 32px 80px rgba(0,0,0,.6); }
}

/* ══════════════════════════════════════════
   TARGET NAV BAR  (< Tier · 01 · Tier >)
══════════════════════════════════════════ */
.target-nav-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: var(--navy);
  min-height: 64px;
  padding: 0 4px;
}

.tnav-prev, .tnav-next {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  padding: 12px 10px;
  min-width: 72px;
  transition: color .15s;
}
.tnav-prev { justify-content: flex-start; }
.tnav-next { justify-content: flex-end;   }
.tnav-prev:active, .tnav-next:active { color: rgba(255,255,255,.9); }
.tnav-prev--hidden, .tnav-next--hidden { opacity: 0; pointer-events: none; }
.tnav-prev i, .tnav-next i { font-size: 18px; flex-shrink: 0; }
.tnav-side-name {
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 52px;
}

.tnav-center {
  flex: 1;
  text-align: center;
}
.tnav-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--cyan);
  line-height: 1;
}
.tnav-animal {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.01em;
}

/* Meta chips row */
.target-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px 6px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tnav-progress {
  margin-left: auto;
  background: rgba(255,145,0,.1);
  color: var(--cyan);
}

/* ── Archer tabs ── */
.archer-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--white);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.archer-tabs::-webkit-scrollbar { display: none; }

.archer-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 13px;
  font-weight: 600;
  /* inactive = dimmed */
  color: var(--label);
  transition: color .15s;
  position: relative;
}
/* Inactive avatar: greyscale + reduced opacity */
.archer-tab .avatar {
  filter: grayscale(1);
  opacity: .45;
  transition: filter .2s, opacity .2s;
}
/* Active: dark text, full-colour avatar, strong underline */
.archer-tab--active {
  color: var(--color-text-primary);
  font-weight: 700;
  border-bottom-color: var(--cyan);
}
.archer-tab--active .avatar {
  filter: none;
  opacity: 1;
}
/* Check icon — always in DOM (prevents layout shift), hidden via visibility */
.archer-tab__done {
  font-size: 14px;
  color: #22c55e;
  flex-shrink: 0;
}
.archer-tab__done--hidden { visibility: hidden; }

/* Solo (1 archer): same visual as active tab, but no interaction */
.archer-tab--solo {
  cursor: default;
  pointer-events: none;
  flex: 0 0 auto; /* don't stretch to fill — stays compact like a normal tab */
}

/* ══════════════════════════════════════════
   RADIO GRID
══════════════════════════════════════════ */
.radio-grid {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.rg-header {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 8px;
  padding: 0 4px;
}
.rg-col-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
  text-align: center;
}

.rg-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.rg-row-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--label);
  padding-left: 4px;
}

.rg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 12px;
  border: 2px solid #d0d5dc; /* stronger border for outdoor readability */
  background: #fff;
  cursor: pointer;
  transition: all .12s;
  gap: 2px;
}
.rg-cell:active { transform: scale(.96); }
/* disabled = truly empty placeholder cell (invisible) */
.rg-cell[disabled]:not(.rg-cell--selected) { opacity: 0; pointer-events: none; }

.rg-cell__score {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.rg-cell__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}

/* States */
.rg-cell--kill   { color: var(--cyan); }
.rg-cell--wound  { color: var(--magenta); }
.rg-cell--miss   {
  grid-column: 2 / 4; /* spans Kill + Wound columns */
  color: var(--hit-miss);
}
/* Miss cell: hide numeric score, show label centered */
.rg-cell--miss .rg-cell__score { display: none; }
.rg-cell--miss .rg-cell__label {
  font-size: 15px;
  font-weight: 800;
  opacity: 1;
  letter-spacing: .04em;
}

.rg-cell--selected.rg-cell--kill {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,145,0,.4);
}
.rg-cell--selected.rg-cell--wound {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
  box-shadow: 0 4px 12px rgba(233,30,140,.35);
}
.rg-cell--selected.rg-cell--miss {
  background: var(--hit-miss);
  border-color: var(--hit-miss);
  color: #fff;
}

/* ── Confirm footer ── */
.target-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding: 12px 14px calc(12px + var(--safe-bottom));
  background: var(--white);
  border-top: 1px solid var(--border);
}
/* Abort + Confirm nebeneinander */
.target-footer--abort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.target-footer--abort .btn--primary {
  flex: 1;
}

/* ══════════════════════════════════════════
   EXPLORE-START SCREEN  (Ziel 00 / Einschiessplatz)
══════════════════════════════════════════ */
.explore-start-body {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px;
  text-align: center;
}

.explore-start-icon {
  font-size: 56px;
  line-height: 1;
  color: var(--primary);
  opacity: .85;
}

.explore-start-hint {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 320px;
}

/* GPS status chip */
.es-gps-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 220px;
  justify-content: center;
}

.es-gps-icon {
  font-size: 18px;
  color: var(--text-3);
  display: flex;
  align-items: center;
}

.es-gps-icon--ok {
  color: var(--success, #4caf50);
}

.es-gps-label {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.es-gps-acc {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 4px;
}

/* ── Locked grid overlay (previous-target read-only mode) ── */
/* Dim all cells; selected cell stays fully opaque */
.radio-grid--locked .rg-cell {
  opacity: .35;
  pointer-events: none;
}
.radio-grid--locked .rg-cell--selected {
  opacity: 1;
  pointer-events: none; /* still no interaction — unlock via notice */
}

/* Lock notice — tappable, sits in grey area below the grid rows */
.lock-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 8px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1.5px dashed rgba(0,0,0,.15);
  background: rgba(255,255,255,.5);
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lock-notice i {
  font-size: 20px;
  flex-shrink: 0;
}
.lock-notice:active {
  background: #fff;
  border-color: var(--cyan);
  border-style: solid;
  color: var(--cyan);
}

/* ── Running tally strip ── */
.tally-strip {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  /* CSS Grid: each .tally-row uses display:contents so all cells
     land directly in this grid → columns align across rows       */
  display: grid;
  grid-template-columns:
    /* name */  auto
    /* sep  */  1ch
    /* arrow */ auto
    /* sep  */  1ch
    /* zone  */ auto
    /* sep  */  1ch
    /* score */ auto
    /* cum   */ 1fr;
  column-gap: 5px;
  row-gap: 8px;
  align-items: baseline;
  background: var(--white);
  border-top: 1px solid var(--border);
}

/* Rows dissolve into the parent grid */
.tally-row { display: contents; }

.tally-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.tally-sep {
  font-size: 11px;
  color: #ccc;
  text-align: center;
}
.tally-cell {
  font-size: 12px;
  color: var(--label);
  white-space: nowrap;
}
.tally-cell--kill  { color: var(--cyan);     font-weight: 700; }
.tally-cell--wound { color: var(--magenta);      font-weight: 700; }
.tally-cell--miss  { color: var(--hit-miss); font-weight: 700; }
/* Score column: mono font, right-aligned within its cell */
.tally-cell--score {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
/* Cumulative: mono, right-aligned, muted */
.tally-cum {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--label);
  white-space: nowrap;
  text-align: right;
}

/* ══════════════════════════════════════════
   WALKING VIEW
══════════════════════════════════════════ */
.screen--walking { background: var(--bg); }

/* ── Walking header right side (badge + counter) ── */
.walking-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Shot badge — appears in walking header when ≥1 shot detected */
.shot-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 145, 0, 0.18);
  color: var(--cyan);
  border: 1px solid rgba(255, 145, 0, 0.35);
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  line-height: 1;
}
.shot-badge i { font-size: 13px; }

.walking-counter {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  margin-left: auto;
}

.walking-target-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wtc-num {
  font-size: 36px;
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: -.03em;
  line-height: 1;
  flex-shrink: 0;
  min-width: 48px;
}
.wtc-animal {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-primary);
}
.wtc-meta {
  font-size: 13px;
  color: var(--label);
  margin-top: 3px;
}

.walking-map {
  flex: 1;
  min-height: 220px;
  background: #e8eff4;
}
/* Punch markers back to vivid colour inside the desaturated map layer */
.walking-map .leaflet-marker-pane,
.walking-map .leaflet-tooltip-pane {
  filter: saturate(3.4) brightness(0.96) contrast(1.05);
}
.walking-map-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: var(--label);
  font-size: 0.82rem;
}
.walking-map-offline i { font-size: 32px; }

.walking-map-stub {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--label);
  font-size: 14px;
  background: var(--white);
  margin: 12px 14px;
  border-radius: 14px;
  border: 2px dashed var(--border);
  min-height: 160px;
}
.walking-map-stub i    { font-size: 40px; }
.walking-map-stub p    { font-weight: 600; }
.stub-note             { font-size: 11px; opacity: .6; }

/* ══════════════════════════════════════════
   WALKING VIEW — Ziel-Header (kompakt)
══════════════════════════════════════════ */
.wlk-target-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wlk-target-num {
  font-size: 30px;
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: -.02em;
  line-height: 1;
  flex-shrink: 0;
  min-width: 42px;
}
.wlk-target-info { flex: 1; min-width: 0; }
.wlk-target-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlk-target-meta {
  font-size: 12px;
  color: var(--label);
  margin-top: 2px;
}

/* ══════════════════════════════════════════
   WALKING VIEW — Tierbild + Statistik (2-spaltig)
══════════════════════════════════════════ */
.wlk-stats-section {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wlk-animal-img {
  /* Breite ~38% → macht den Bereich annähernd quadratisch
     bei der typischen Sektionshöhe (7 Balken ≈ 130–150 px) */
  width: 38%;
  flex-shrink: 0;
  align-self: stretch;        /* füllt die volle Höhe der Sektion */
  object-fit: contain;
  object-position: center center;
  padding: 6px 4px 4px 10px; /* nur minimaler Innenabstand */
}
.wlk-stats-bars {
  flex: 1;
  min-width: 0;
  padding: 10px 14px 10px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

/* Balkendiagramm */
.stats-bar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.stats-bar-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-primary);
  min-width: 34px;
  flex-shrink: 0;
  line-height: 1;
  white-space: nowrap;
}
.stats-bar-track {
  flex: 1;
  height: 6px;
  background: #eaecef;
  border-radius: 3px;
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 0;
  transition: width .35s ease;
}
.stats-bar-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--label);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.stats-bar-total {
  font-size: 10px;
  color: var(--label);
  text-align: right;
  margin-top: 4px;
}
.stats-bar-total--empty { opacity: .55; }

/* ══════════════════════════════════════════
   WALKING VIEW — Kompass-Kreis (Normal-Modus)
══════════════════════════════════════════ */
.walking-nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* horizontales Padding = 24 px = Rand des Kompass-Kreises */
  padding: 14px 24px;
}
.walking-compass-wrap {
  position: relative;
  /* 24 px Rand links + rechts → Durchmesser = Container − 48 px, max 300 px */
  width: min(calc(100% - 48px), 300px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
/* Karte sitzt innerhalb des Ring-Rahmens (12.5 % = 30/240 des Wrappers) */
.walking-compass-map {
  position: absolute;
  inset: 12.5%;
  border-radius: 50%;
  overflow: hidden;
  background: #e8eff4;
}
/* Vivid markers auch im Circle-Map */
.walking-compass-map .leaflet-marker-pane,
.walking-compass-map .leaflet-tooltip-pane {
  filter: saturate(3.4) brightness(0.96) contrast(1.05);
}
/* Karte offline / kein GPS */
.walking-compass-map .walking-map-offline {
  height: 100%;
  border-radius: 50%;
  font-size: 0.75rem;
}
/*
  SVG-Ring: liegt AUSSERHALB der Karte (Ring + Pfeil nur in der
  Rahmenzone r 90–120). Kein Pixel überlapp mit Leaflet-Layern →
  kein z-index-Konflikt erforderlich.
*/
.compass-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.walking-nav-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--label);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Spinner für GPS-Wartezeit */
@keyframes wlk-spin { to { transform: rotate(360deg); } }
.wlk-spin { display: inline-block; animation: wlk-spin 1.1s linear infinite; }

/* ══════════════════════════════════════════
   EXPLORE MODE — info chip variant
══════════════════════════════════════════ */
.info-chip--explore {
  background: rgba(255,145,0,.10);
  color: var(--cyan-dk);
  font-weight: 600;
}

/* ══════════════════════════════════════════
   SESSION-SETUP — Erkunden name form
══════════════════════════════════════════ */
.explore-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.explore-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-primary);
  transition: border-color .15s;
}
.explore-input:focus {
  outline: none;
  border-color: var(--cyan);
}
.explore-input::placeholder { color: var(--label); }

/* ══════════════════════════════════════════
   EXPLORE META — metadata form screen
══════════════════════════════════════════ */
.screen--explore-meta {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.emeta-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
}

/* Sensor row */
.emeta-sensor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.emeta-sensor-cell {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.emeta-sensor-cell i    { font-size: 18px; color: var(--label); }
.emeta-sensor-lbl       { font-size: 11px; font-weight: 700; text-transform: uppercase;
                          letter-spacing: .06em; color: var(--label); }
.emeta-sensor-val       { font-size: 13px; font-weight: 600; }
.phase2-stub            { color: var(--label); font-style: italic; font-weight: 400; }

/* Text input */
.emeta-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  transition: border-color .15s;
}
.emeta-input:focus   { outline: none; border-color: var(--cyan); }
.emeta-input::placeholder { color: var(--label); }
/* Wenn emeta-input in animal-combo sitzt, margin auf den Wrapper */
.emeta-animal-combo { margin-bottom: 4px; }
.emeta-animal-combo .emeta-input { margin-bottom: 0; }

/* Distance stepper — neumorphic */
.emeta-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow:
    inset 3px 3px 7px rgba(163,177,198,.40),
    inset -3px -3px 7px rgba(255,255,255,.85);
}
.stepper-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow:
    4px 4px 9px rgba(163,177,198,.55),
    -4px -4px 9px rgba(255,255,255,.90);
  transition: box-shadow .1s;
}
.stepper-btn:active {
  box-shadow:
    inset 3px 3px 7px rgba(163,177,198,.50),
    inset -3px -3px 7px rgba(255,255,255,.80);
}
.stepper-btn--plus { color: var(--cyan); }
.stepper-val {
  flex: 1;
  text-align: center;
  font-size: 26px;
  font-family: var(--font-mono);
  font-weight: 900;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Required mark */
.required-mark { color: var(--magenta); font-weight: 700; margin-left: 2px; }
.section-label__opt { font-weight: 400; font-size: 10px; color: var(--label); margin-left: 4px; }

/* Camera */
.emeta-camera-wrap { display: flex; flex-direction: column; gap: 10px; }
.emeta-camera-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 10px;
  border: 2px dashed var(--cyan);
  background: rgba(255,145,0,.05);
  color: var(--cyan-dk);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}
.emeta-camera-btn:active { background: rgba(255,145,0,.12); }
.emeta-camera-btn i { font-size: 20px; }
.emeta-camera-hint {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--label);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.emeta-camera-hint i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.emeta-thumb-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.emeta-thumb {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.emeta-thumb-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
}

/* ══════════════════════════════════════════
   EXPLORE WALK — find next target screen
══════════════════════════════════════════ */
.screen--explore-walk {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.explore-walk-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
  overflow-y: auto;
}
.explore-walk-card {
  background: var(--white);
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ewc-num {
  font-size: 36px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
  flex-shrink: 0;
}
.ewc-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ewc-hint {
  font-size: 13px;
  color: var(--label);
  line-height: 1.5;
}
.explore-walk-map {
  flex: 1;
  min-height: 200px;
  background: #e8eff4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--label);
  font-size: 14px;
  background: var(--white);
  border-radius: 0;
  min-height: 200px;
}
.explore-walk-map .leaflet-marker-pane,
.explore-walk-map .leaflet-tooltip-pane {
  filter: saturate(3.4) brightness(0.96) contrast(1.05);
}
.explore-walk-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px calc(12px + var(--safe-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--border);
}
/* Mit Abort-Button: alle 3 Buttons untereinander, volle Breite */
.explore-walk-footer--with-abort {
  grid-template-columns: 1fr;
}
.explore-walk-footer--with-abort > .btn {
  width: 100%;
}

/* ══════════════════════════════════════════
   PARCOURS SCREEN — List
══════════════════════════════════════════ */
.screen--parcours { background: var(--bg); }

.parcours-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
  overflow-y: auto;
}

.parcours-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.parcours-card:active {
  transform: scale(.98);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.parcours-card__main {
  flex: 1;
  min-width: 0;
}
.parcours-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parcours-card__loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--label);
  margin-top: 3px;
}
.parcours-card__stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.parcours-card__chevron {
  font-size: 18px;
  color: var(--label);
  flex-shrink: 0;
}

.pstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.pstat__val {
  font-size: 18px;
  font-weight: 800;
  color: var(--cyan-dk);
  line-height: 1;
}
.pstat__lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--label);
}

/* ══════════════════════════════════════════
   PARCOURS DETAIL
══════════════════════════════════════════ */
.screen--parcours-detail { background: var(--bg); }

.pd-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 0;
  overflow-y: auto;
}

.pd-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--label);
  padding: 8px 4px 12px;
}

.pd-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.pd-stat {
  background: var(--white);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  /* Flex-Column-Layout, damit alle Labels auf der gemeinsamen
     unteren Baseline sitzen — egal ob die Werte groß (20px) oder
     klein (12px für „Letzte Runde"-Datum) sind. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.pd-stat__val {
  font-size: 20px;
  font-weight: 800;
  color: var(--cyan-dk);
  line-height: 1;
  display: flex;
  align-items: center;
  min-height: 20px;  /* erzwingt einheitliche Höhe für Val-Zeile */
}
.pd-stat__val--sm { font-size: 12px; }
.pd-stat__lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--label);
  margin-top: auto;  /* schiebt das Label nach unten → gemeinsame Baseline */
  padding-top: 4px;
}

.pd-target-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.pd-target-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 10px;
  padding: 10px 12px;
}
.pd-target-num {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: var(--cyan-dk);
  flex-shrink: 0;
  min-width: 28px;
}
.pd-target-info { flex: 1; min-width: 0; }
.pd-target-animal {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.pd-target-meta {
  font-size: 11px;
  color: var(--label);
  margin-top: 2px;
}
.pd-target-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.pd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.pd-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  padding: 12px 8px;
}
.pd-delete-btn {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ══════════════════════════════════════════
   PARCOURS EDIT
══════════════════════════════════════════ */
.screen--parcours-edit { background: var(--bg); }

.pe-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  overflow-y: auto;
  padding-bottom: 100px; /* room for sticky footer */
}

.pe-targets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
}

.pe-target-card {
  background: var(--white);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.pe-target-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pe-target-card__num {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan-dk);
}
.pe-target-card__del {
  background: none;
  border: none;
  color: var(--color-danger, #e53935);
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.pe-target-card__del:active { background: rgba(229,57,53,.1); }

.emeta-stepper--sm { gap: 12px; }
.emeta-stepper--sm .stepper-btn {
  width: 34px;
  height: 34px;
  font-size: 20px;
}
.emeta-stepper--sm .stepper-val { font-size: 15px; }

/* ── Distance control (replaces old stepper) ─────────────────────────── */
.dist-control {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  margin-bottom: 4px;
}
.dist-btn {
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 10px;
  transition: background .1s, opacity .1s;
  touch-action: none; /* needed for pointerdown on mobile */
  user-select: none;
}
.dist-btn--fine   { min-width: 38px; }
.dist-btn--coarse {
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}
.dist-btn:active         { background: var(--border); }
.dist-btn--coarse:active { opacity: .65; }
.dist-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 22px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
.dist-input:focus { outline: none; color: var(--cyan); }
.dist-input::-webkit-outer-spin-button,
.dist-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dist-unit {
  font-size: 14px;
  font-family: var(--font-mono, monospace);
  color: var(--label, #94a3b8);
  font-weight: 600;
  margin-right: 2px;
}

.field-input--sm { padding: 8px 12px; font-size: 14px; }

/* ══════════════════════════════════════════
   ANIMAL COMBOBOX
   Custom-Dropdown für Tierauswahl:
   volles Dropdown + Freitext-Eingabe kombiniert
══════════════════════════════════════════ */
.animal-combo { position: relative; }

.animal-combo__input {
  /* Platz für den Caret-Button rechts */
  padding-right: 36px !important;
}

.animal-combo__caret {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px;
  color: var(--label);
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
  transition: color .15s, transform .15s;
}
.animal-combo__caret:hover { color: var(--cyan); }
.animal-combo--open .animal-combo__caret { transform: translateY(-50%) rotate(180deg); }

.animal-combo__list {
  position: absolute; z-index: 200;
  left: 0; right: 0; top: calc(100% + 3px);
  background: var(--surface);
  border: 1.5px solid var(--cyan);
  border-radius: 10px;
  list-style: none; padding: 4px 0; margin: 0;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  -webkit-overflow-scrolling: touch;
}

.animal-combo__item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: 6px;
  margin: 0 4px;
  transition: background .1s;
}
.animal-combo__item:hover,
.animal-combo__item--hl { background: rgba(255,145,0,.14); }
.animal-combo__item[hidden] { display: none; }
.animal-combo__empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--label);
  font-style: italic;
}

/* ══════════════════════════════════════════
   PARCOURS IMPORT
══════════════════════════════════════════ */
.screen--parcours-import { background: var(--bg); }

.pi-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  overflow-y: auto;
  padding-bottom: 100px;
}

.pi-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--white);
  border: 2px dashed var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan-dk);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pi-file-label:active {
  background: rgba(255,145,0,.06);
  border-color: var(--cyan);
}
.pi-file-label i { font-size: 22px; }

.pi-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-primary);
  resize: vertical;
  margin-bottom: 12px;
}
.pi-textarea:focus {
  outline: none;
  border-color: var(--cyan);
}

.pi-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(229,57,53,.08);
  border: 1px solid rgba(229,57,53,.25);
  border-radius: 10px;
  color: #c62828;
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
}

.pi-preview-card {
  background: var(--white);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-top: 14px;
}
.pi-preview-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.pi-preview-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--label);
  margin-bottom: 8px;
}
.pi-preview-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-dk);
  margin-bottom: 12px;
}
.pi-preview-targets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pi-preview-target {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-primary);
}
.pi-preview-more {
  font-size: 12px;
  color: var(--label);
  padding-top: 4px;
}

/* ══════════════════════════════════════════
   SHARED: empty-state sm variant
══════════════════════════════════════════ */
.empty-state--sm {
  padding: 24px 16px;
  font-size: 13px;
}

/* ══════════════════════════════════════════
   PARCOURS DETAIL — Save button (primary pill)
══════════════════════════════════════════ */
.pd-save-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--cyan);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  flex-shrink: 0;
}
.pd-save-btn i { font-size: 15px; }
.pd-save-btn:active { opacity: .8; transform: scale(.96); }
/* Idle state: no unsaved changes — visually muted, non-interactive */
.pd-save-btn--idle,
.pd-save-btn:disabled {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.35);
  cursor: default;
  pointer-events: none;
}

/* ── Editable meta (name / location) at top of detail ── */
.pd-meta-edit {
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.pd-meta-name {
  width: 100%;
  background: none;
  border: none;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s;
}
.pd-meta-name:focus {
  outline: none;
  border-bottom-color: var(--cyan);
}
.pd-meta-loc-row {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--label);
  font-size: 13px;
  margin-top: 4px;
}
.pd-meta-loc {
  flex: 1;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--label);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.pd-meta-loc:focus {
  outline: none;
  border-bottom-color: var(--label);
}

/* ── Targets accordion header row ── */
.pd-targets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 16px;
  margin-bottom: 8px;
}

/* ── Accordion item ── */
.pd-accordion {
  background: var(--white);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.pd-accordion__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.pd-accordion__header:active { background: rgba(0,0,0,.03); }

.pd-accordion__chevron {
  font-size: 16px;
  color: var(--label);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .2s;
}
.pd-accordion__chevron--open { transform: rotate(180deg); }

/* ── Accordion edit body ── */
.pd-accordion__body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════
   ALSO: fix import icon in list header
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   ACCORDION — equal-width chip grids
   Targets [data-angle-group] and [data-size-group]
   inside the parcours accordion body.
   grid-auto-flow: column ensures each chip
   gets 1fr regardless of count (3 standard
   + optional sensor reading = still equal).
══════════════════════════════════════════ */
[data-angle-group],
[data-size-group] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
[data-angle-group] .chip,
[data-size-group] .chip {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   DRAG-TO-REORDER
══════════════════════════════════════════ */

/* Wrapper that holds handle + toggle side by side */
.pd-accordion__header-wrap {
  display: flex;
  align-items: center;
}

/* Drag handle — touch-action:none is the key:
   prevents browser scroll on the handle element
   while leaving the rest of the list scrollable */
.pd-drag-handle {
  flex-shrink: 0;
  width: 44px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #c5cdd5;
  font-size: 22px;
  touch-action: none;
  cursor: grab;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.pd-drag-handle:active { cursor: grabbing; color: var(--label); }

/* Accordion header now takes remaining width */
.pd-accordion__header {
  flex: 1;
  min-width: 0;
  padding-left: 0; /* handle provides the left space */
}

/* Dragging state: elevated shadow, slight opacity */
.pd-accordion--dragging {
  position: relative;
  z-index: 20;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  opacity: .97;
  border-radius: 12px;
  transition: none; /* disable transitions while dragging */
}

/* Smooth neighbour shift animation */
.pd-accordion {
  transition: transform .18s ease;
}
.pd-accordion--dragging {
  transition: none;
}

/* ══════════════════════════════════════════
   HOME — GREETING
══════════════════════════════════════════ */
.home-greeting {
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-greeting__main {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.home-greeting__sub {
  font-size: 12px;
  color: var(--label);
  line-height: 1.4;
}

/* ══════════════════════════════════════════
   HOME — WEATHER STRIP
══════════════════════════════════════════ */
.home-weather {
  padding: 10px 16px 0;
}
.wx-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--color-text-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow: hidden;
}
.wx-emoji   { font-size: 17px; line-height: 1; flex-shrink: 0; }
.wx-temp    { font-weight: 700; flex-shrink: 0; }
.wx-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}
.wx-strip i { font-size: 13px; color: var(--label); flex-shrink: 0; }
.wx-wind  { color: var(--label); flex-shrink: 0; }
.wx-desc  { color: var(--label); }
.wx-tip   {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--magenta);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   HOME — NEARBY PARCOURS CHIP
══════════════════════════════════════════ */
.home-nearby {
  padding: 8px 16px 0;
}
.nearby-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,145,0,.07);
  border: 1px solid rgba(255,145,0,.22);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-dk);
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.nearby-chip:active { background: rgba(255,145,0,.16); }
.nearby-chip__pin   { font-size: 16px; flex-shrink: 0; }
.nearby-chip__arrow { margin-left: auto; font-size: 16px; flex-shrink: 0; opacity: .6; }

/* Reduce top gap of mode cards when widgets are present */
.home-modes { padding-top: 12px; }

/* ══════════════════════════════════════════
   RESUME FAB — floating session restore
══════════════════════════════════════════ */
.resume-fab {
  position: fixed;
  /* sits just above bottom-nav (--bnav-h) + safe-area */
  bottom: calc(var(--bnav-h) + var(--safe-bottom) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;

  /* Orange — distinct from primary cyan, signals "active / alert" */
  background: #FF6F00;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;

  box-shadow:
    0 4px 12px rgba(255,111,0,.45),
    0 1px 3px  rgba(0,0,0,.18);

  /* Slide up from below on show */
  animation: fab-appear .22s cubic-bezier(.34,1.56,.64,1) both;
}
.resume-fab i { font-size: 20px; }
.resume-fab:active { transform: translateX(-50%) scale(.96); }
.resume-fab[hidden] { display: none !important; }

@keyframes fab-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* ══════════════════════════════════════════
   EASTER EGG — BULLSEYE
══════════════════════════════════════════ */
.bullseye-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 15, 25, .82);
  z-index: 9999;
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
}
.bullseye-overlay--out { opacity: 0; }

.bullseye-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bullseye-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  animation: ring-burst .9s cubic-bezier(.2,.6,.4,1) forwards;
}
.bullseye-ring--1 { animation-delay: 0s;   opacity: .9; }
.bullseye-ring--2 { animation-delay: .18s; opacity: .55; }
.bullseye-ring--3 { animation-delay: .36s; opacity: .25; }

/* ══════════════════════════════════════════
   SETTINGS — Sensor-Dashboard
══════════════════════════════════════════ */
.screen--settings { background: var(--bg); }

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(var(--bnav-h) + var(--safe-bottom) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sensor Card */
.sensor-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 16px;
  transition: border-color .2s;
}

.sensor-card--active {
  border-color: var(--cyan);
}

.sensor-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sensor-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--label);
  flex-shrink: 0;
}

.sensor-card--active .sensor-card__icon {
  background: rgba(255, 145, 0, .12);
  color: var(--cyan-dk);
}

.sensor-card__info {
  flex: 1;
  min-width: 0;
}

.sensor-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.sensor-card__sub {
  font-size: 0.78rem;
  color: var(--label);
  margin-top: 2px;
}

.sensor-card--active .sensor-card__sub {
  color: var(--cyan-dk);
}

.sensor-card__badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--label);
  background: var(--bg);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sensor-card--active .sensor-card__badge {
  background: rgba(255, 145, 0, .12);
  color: var(--cyan-dk);
}

/* Live readings table */
.sensor-reading {
  margin-top: 12px;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sensor-reading__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sensor-reading__lbl {
  font-size: 0.75rem;
  color: var(--label);
}

.sensor-reading__val {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Action buttons row */
.sensor-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Danger variant */
.sensor-card--danger {
  border-color: rgba(239, 68, 68, .25);
}
.sensor-card__icon--danger {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}
/* btn--danger: Styleguide-Definition — helles Rosa, roter Text, subtiler Rahmen */
.btn--danger {
  background: rgba(220, 38, 38, .10);
  color: #dc2626;
  border: 1.5px solid rgba(220, 38, 38, .25);
}
.btn--danger:active {
  background: rgba(220, 38, 38, .18);
  opacity: 1;
}
.btn--danger:active { opacity: .85; }

/* PWA-Install-Kachel: Hilfe-Panel */
.install-help {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.install-help .install-steps {
  margin: 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.install-help .install-steps li i { vertical-align: -2px; }
.install-help .install-hint {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--label);
}

/* Version footer */
.settings-version {
  text-align: center;
  font-size: 0.72rem;
  color: var(--label);
  padding: 16px 0 8px;
  opacity: .7;
}

@keyframes ring-burst {
  from { width:  0px; height:  0px; }
  to   { width: 340px; height: 340px; opacity: 0; }
}

.bullseye-cross {
  font-size: 64px;
  color: var(--cyan);
  position: relative;
  animation: cross-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cross-pop {
  from { transform: scale(.2) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1)  rotate(0deg);   opacity: 1; }
}

.bullseye-label {
  position: relative;
  margin-top: 18px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--cyan);
  animation: label-rise .4s ease .25s both;
}
@keyframes label-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   HOME — NEARBY MINI-MAP CARD
══════════════════════════════════════════ */
.nearby-card {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.nearby-map {
  height: 160px;
  width: 100%;
  background: #e8eff4;
  /* Tone down the map to match the app's muted palette */
  filter: saturate(0.3) brightness(1.04) contrast(0.95);
}
/* Punch markers back to full vivid colour — they sit in a
   separate Leaflet pane so the inverse filter restores them */
.nearby-map .leaflet-marker-pane,
.nearby-map .leaflet-tooltip-pane {
  filter: saturate(3.4) brightness(0.96) contrast(1.05);
}
.nearby-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.nearby-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-dk);
  min-width: 0;
  flex: 1;
}
.nearby-info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Leaflet custom markers */
.map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.map-pin--parcours {
  width: 36px;
  height: 36px;
  background: var(--cyan);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(255,145,0,.45);
  border: 2px solid #fff;
}
.map-pin--user {
  width: 14px;
  height: 14px;
  background: #1976d2;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  position: relative;
}
.map-pin__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(25,118,210,.25);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.map-pin--target {
  width: 28px;
  height: 28px;
  background: var(--magenta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(233,30,140,.4);
  border: 2px solid #fff;
}

/* Leaflet tooltip override */
.map-tooltip {
  background: var(--navy) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}
.map-tooltip::before { border-top-color: var(--navy) !important; }

/* ── Nearby map — tap-to-navigate overlay ── */
.nearby-map {
  display: block;      /* <a> needs block to fill space */
  position: relative;
  text-decoration: none;
}
.nearby-map__nav-hint {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(5,15,25,.62);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 500;
}
.nearby-map__nav-hint i { font-size: 13px; }

/* ── Navigation icon button in footer ── */
.nearby-nav-btn {
  flex-shrink: 0;
  padding: 0 10px;
  color: var(--cyan-dk);
  border-color: var(--cyan-dk);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nearby-nav-btn i { font-size: 16px; }

/* ══════════════════════════════════════════
   SENSOR INTEGRATION — Walking pitch card
   & Explore-meta sensor badge / chip state
══════════════════════════════════════════ */

/* Walking view: live pitch display */
.walking-pitch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--white);
  border-radius: 16px;
  padding: 20px 16px 16px;
  margin: 0 16px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border: 1.5px solid var(--border);
}
.walking-pitch-card__icon {
  font-size: 28px;
  color: var(--cyan);
  opacity: .7;
}
.walking-pitch-card__val {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cyan-dk);
  line-height: 1;
}
.walking-pitch-card__lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--label);
}
/* Color shifts by direction */
.walking-pitch-card[data-dir="up"]   .walking-pitch-card__val { color: #00897B; }
.walking-pitch-card[data-dir="down"] .walking-pitch-card__val { color: #E53935; }
.walking-pitch-card[data-dir="flat"] .walking-pitch-card__val { color: var(--cyan-dk); }

/* ── Angle live-card ── */
.angle-live-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 4px;
}
.angle-live-card__val {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cyan-dk);
  letter-spacing: -.01em;
}
.angle-live-card__src {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--label);
  white-space: nowrap;
}
.angle-live-card__edit {
  background: none;
  border: none;
  color: var(--label);
  font-size: 18px;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
}
.angle-live-card__edit:hover { color: var(--cyan-dk); }

/* Explore-meta: sensor-filled chip variant */
.chip--sensor {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Explore-meta: inline live pitch badge */
.sensor-live-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 8px;
  background: rgba(255,145,0,.12);
  color: var(--cyan-dk);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* ══════════════════════════════════════════
   IN-APP KAMERA — explore-meta
══════════════════════════════════════════ */

/* Container — padding-bottom trick for reliable 4:3 on all mobile browsers */
.emeta-cam-live {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  width: 100%;
  padding-bottom: 75%; /* 4:3 ratio */
  height: 0;
}
/* Video fills container via absolute positioning */
#cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pitch HUD — top left overlay */
.cam-pitch-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  transform: translateZ(0); /* force own compositor layer above video */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 8px 14px 10px;
  color: #fff;
  pointer-events: none;
}
.cam-pitch-hud__icon {
  font-size: 14px;
  opacity: .7;
  margin-bottom: 2px;
}
.cam-pitch-hud__val {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.cam-pitch-hud__lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .75;
  margin-top: 2px;
}
.cam-pitch-hud[data-dir="up"]   .cam-pitch-hud__val { color: #4ade80; }
.cam-pitch-hud[data-dir="down"] .cam-pitch-hud__val { color: #f87171; }
.cam-pitch-hud[data-dir="flat"] .cam-pitch-hud__val { color: #fff; }

/* Fadenkreuz */
.cam-crosshair {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  transform: translateZ(0);
}
.cam-crosshair__h,
.cam-crosshair__v {
  position: absolute;
  background: rgba(255,255,255,.45);
}
.cam-crosshair__h {
  top: 50%; left: 15%; right: 15%;
  height: 1px;
  transform: translateY(-50%);
}
.cam-crosshair__v {
  left: 50%; top: 15%; bottom: 15%;
  width: 1px;
  transform: translateX(-50%);
}
/* Small centre dot */
.cam-crosshair::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  transform: translate(-50%,-50%);
}

/* Bottom action bar */
.cam-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  transform: translateZ(0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.cam-spacer { width: 40px; }

/* Cancel button */
.cam-btn-cancel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
.cam-btn-cancel:active { background: rgba(255,255,255,.15); }

/* Shutter button */
.cam-shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease;
}
.cam-shutter:active { transform: scale(.92); }
.cam-shutter__ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  transition: background .1s ease;
}
.cam-shutter:active .cam-shutter__ring {
  background: var(--cyan);
}

/* Thumbnail with angle badge */
.emeta-thumb-wrap {
  position: relative;
  margin-top: 0;
}
.emeta-thumb-angle {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
}

/* ══════════════════════════════════════════
   GPS SNAP CARD — explore-meta stake position
══════════════════════════════════════════ */
.gps-snap-card {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 4px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gps-snap-card.gps-snap--good   { border-color: #22c55e; background: rgba(34,197,94,.07); }
.gps-snap-card.gps-snap--ok     { border-color: var(--cyan); background: rgba(255,145,0,.07); }
.gps-snap-card.gps-snap--warn   { border-color: #f59e0b; background: rgba(245,158,11,.07); }
.gps-snap-card.gps-snap--offline{ border-color: var(--border); background: var(--surface); }

.gps-snap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.gps-snap-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--label);
  flex-shrink: 0;
}
.gps-snap-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gps-snap-refresh {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.gps-snap-offline-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--label);
  padding: 2px 0;
}
.gps-snap-offline-msg i { font-size: 16px; color: #f59e0b; }

/* ── Galerie import button ───────────────── */
.cam-prompt-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.emeta-gallery-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,145,0,.06);
  border: 1.5px dashed rgba(255,145,0,.4);
  border-radius: 12px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.emeta-gallery-btn:active { background: rgba(255,145,0,.12); border-color: var(--cyan); }
.emeta-gallery-btn i { font-size: 20px; }

/* ── Heading HUD (camera overlay, top-right) */
.cam-heading-hud {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 6px 10px;
  color: #fff;
  pointer-events: none;
}
.cam-heading-hud__icon { font-size: 16px; color: var(--cyan); }
.cam-heading-hud__val  { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Heading badge on thumbnail ─────────── */
.emeta-thumb-heading {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
}
.emeta-thumb-heading i { font-size: 14px; color: var(--cyan); }

/* ══════════════════════════════════════════
   STATION TABS — explore mode tab switcher
   (Wertung ↔ Metadaten)
══════════════════════════════════════════ */
.station-tabs {
  display: flex;
  background: #0d1117;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.station-tab {
  flex: 1;
  padding: 9px 8px 7px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #546e7a;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .15s;
  font-family: inherit;
}
.station-tab--active {
  color: #FF9100;
  border-bottom-color: #FF9100;
}
.station-tab--locked {
  opacity: 0.38;
  pointer-events: none;
}
.station-tab__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a4a5a;
  display: inline-block;
  flex-shrink: 0;
  transition: background .2s;
}
.station-tab__dot--done {
  background: #FF9100;
}

/* ══════════════════════════════════════════
   SUMMARY ACTIONS  (Share + Export row)
══════════════════════════════════════════ */
.summary-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.summary-action-btn {
  flex: 1;
}

/* ── EXIF GPS badge on thumbnail ────────── */
.emeta-thumb-exif {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  max-width: 160px;
}
.emeta-thumb-exif i { font-size: 12px; color: #4ade80; flex-shrink: 0; }

/* ── Quick-save button in app-bar ────────── */
.app-bar__action {
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: 20px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
  margin-left: auto;
}
.app-bar__action:active { color: #fff; background: rgba(255,255,255,.1); }

/* ── Draft status row in settings ────────── */
.draft-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--label);
  margin-top: 10px;
  padding: 7px 10px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.draft-status-row i { font-size: 14px; flex-shrink: 0; }
.draft-status-row--active { color: var(--cyan); border-color: rgba(255,145,0,.3); background: rgba(255,145,0,.05); }
.draft-status-row--active i { color: var(--cyan); }

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

/* ══════════════════════════════════════════
   EXPLORE-SUCCESS BANNER (Summary nach Erkunden)
   Erscheint einmalig oben auf der Summary, wenn die gerade beendete
   Session aus dem Erkunden-Modus kommt. Zeigt: „Parcours angelegt"
   und einen Sprung zum Parcours-Detail.
══════════════════════════════════════════ */
.explore-success-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(255,145,0,.08);
  border: 1px solid rgba(255,145,0,.25);
  border-radius: 10px;
  color: var(--label);
}
.explore-success-banner > i {
  font-size: 28px;
  color: var(--cyan);
  flex-shrink: 0;
}
.explore-success-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.explore-success-banner__text strong {
  color: var(--cyan-dk);
  font-size: 13px;
  font-weight: 700;
}
.explore-success-banner__text span {
  font-size: 12px;
  line-height: 1.35;
}
.explore-success-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--cyan-dk);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.explore-success-banner__btn:active { color: var(--cyan); }

/* ══════════════════════════════════════════
   FIRST-RUN WELCOME (Schützen-Screen)
   Wird gezeigt, solange noch kein Schütze angelegt ist.
   Erklärt, dass der erste Eintrag der Hauptnutzer („Du") ist.
══════════════════════════════════════════ */
.welcome-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 16px 16px;
  max-width: 360px;
  margin: 0 auto;
}
.welcome-block__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,145,0,.12);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 14px;
}
.welcome-block__headline {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--cyan-dk);
}
.welcome-block__lead {
  font-size: 14px;
  line-height: 1.5;
  color: var(--label);
  margin: 0 0 10px;
}
.welcome-block__lead strong { color: var(--cyan-dk); font-weight: 700; }
.welcome-block__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--label);
  margin: 0 0 24px;
  opacity: .85;
}
.add-archer-row--stacked {
  flex-direction: column;
  width: 100%;
  gap: 8px;
  margin-top: 0;
}

/* ══════════════════════════════════════════
   OWNER-BADGE („Du") auf Archer-Avatar
══════════════════════════════════════════ */
.archer-card { position: relative; }
.archer-card__owner {
  position: absolute;
  top: -2px;
  right: 50%;
  transform: translateX(calc(28px + 2px));  /* Avatar-Radius + Abstand */
  background: var(--cyan);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: 8px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   SHEET-HINT — Info-Zeile im Edit-Sheet
══════════════════════════════════════════ */
.sheet-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255,145,0,.08);
  border: 1px solid rgba(255,145,0,.22);
  color: var(--label);
  font-size: 12px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 8px;
  margin: -4px 0 14px;
}
.sheet-hint i { color: var(--cyan); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.sheet-hint strong { color: var(--cyan-dk); font-weight: 700; }

/* ══════════════════════════════════════════
   PARCOURS-DETAIL · KARTE
══════════════════════════════════════════ */
.pd-map-card {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin-bottom: 20px;
}
.pd-map {
  height: 200px;
  width: 100%;
  background: #e8eff4;
  /* Dezenter, damit Marker hervortreten — gleicher Look wie home.js */
  filter: saturate(0.3) brightness(1.04) contrast(0.95);
}
.pd-map .leaflet-marker-pane,
.pd-map .leaflet-tooltip-pane {
  filter: saturate(3.4) brightness(0.96) contrast(1.05);
}

/* Overlays auf der Karte: Detail-Toggle oben rechts, Route-Button unten rechts */
.pd-map-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(5,15,25,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  z-index: 10;
  transition: background .15s;
}
.pd-map-btn:active { background: rgba(5,15,25,.78); }
.pd-map-btn i { font-size: 13px; }

.pd-map-btn--detail { top: 10px; right: 10px; }
.pd-map-btn--route  { bottom: 10px; right: 10px; }

/* Active state für Detail-Toggle (Cyan-Outline, damit man sieht
   dass der Detail-Modus an ist) */
.pd-map-btn--detail.pd-map-btn--active {
  background: var(--cyan);
  color: #fff;
}

/* ══════════════════════════════════════════
   PARCOURS-DETAIL · ACTION-STACK
   Teilen + Parcours löschen zentriert untereinander
   (nicht volle Breite, nicht nebeneinander)
══════════════════════════════════════════ */
.pd-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  margin-bottom: 16px;
}
.pd-actions-stack .pd-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ══════════════════════════════════════════
   iOS-STYLE TOGGLE  (.hw-toggle)
   Verwendung: <label class="hw-toggle">
                 <input type="checkbox">
                 <span class="hw-toggle__track"></span>
               </label>
══════════════════════════════════════════ */
.hw-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* visually hide the real checkbox */
.hw-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* pill track */
.hw-toggle__track {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: rgba(120,130,145,.28);
  position: relative;
  transition: background .2s ease;
  flex-shrink: 0;
}

/* thumb knob */
.hw-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  transition: transform .2s ease;
}

/* checked state — knob slides right, track turns cyan */
.hw-toggle input:checked + .hw-toggle__track {
  background: var(--cyan);
}
.hw-toggle input:checked + .hw-toggle__track::after {
  transform: translateX(20px);
}

/* focus ring (keyboard / switch access) */
.hw-toggle input:focus-visible + .hw-toggle__track {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════
   DARK MODE  (html.dark)
   Aktiviert via class="dark" auf <html>
   Gesteuert durch js/theme.js + Settings-Toggle
══════════════════════════════════════════ */

/* 1 ── Token-Overrides: semantische Aliases ummappen */
html.dark {
  --bg:                   var(--dm-bg);
  --white:                var(--dm-surface);
  --border:               var(--dm-border);
  --label:                var(--dm-text-2);
  --color-text-primary:   var(--dm-text);
  --color-text-secondary: var(--dm-text-2);
  --text:                 var(--dm-text);
  --surface:              var(--dm-surface);
  --surface-card:         var(--dm-surface);
  --surface-page:         var(--dm-bg);
  --shadow-card:          0 2px 8px rgba(0,0,0,.40);
  --shadow-panel:         0 4px 16px rgba(0,0,0,.55);
  --shadow-popup:         0 4px 16px rgba(0,0,0,.65);
}

/* 2 ── Body / Screen base */
html.dark body   { background: var(--dm-bg); }
html.dark .screen { background: var(--dm-bg); }

/* Scrollbar dark-mode override (per styleguide) */
html.dark { --scrollbar-thumb: rgba(255,255,255,.12); }
html.dark .screen--settings { background: var(--dm-bg); }

/* 3 ── Score-Eingabe: Zell-Rahmen + Hintergrund
   KEIN color-Override — .rg-cell--kill/wound setzen cyan/magenta */
html.dark .rg-cell {
  background:   var(--dm-surface);
  border-color: var(--dm-border-cell);
}
/* Unselected: schwache Signalfarbe auch am Rahmen */
html.dark .rg-cell--kill  { border-color: rgba(255,145,0,.30); }
html.dark .rg-cell--wound { border-color: rgba(233,30,140,.30); }
/* Miss-Zelle: grau, keine Signalfarbe */
html.dark .rg-cell--miss  { color: var(--dm-text-2); }
/* Label-Zeile unter der Zahl: etwas zurücknehmen */
html.dark .rg-cell__label { opacity: .6; }

/* Selected states — höhere Spezifizität (0,3,1) schlägt html.dark .rg-cell (0,2,1) */
html.dark .rg-cell--selected.rg-cell--kill {
  background:   var(--cyan);
  border-color: var(--cyan);
  color:        #fff;
}
html.dark .rg-cell--selected.rg-cell--wound {
  background:   var(--magenta);
  border-color: var(--magenta);
  color:        #fff;
}
html.dark .rg-cell--selected.rg-cell--miss {
  background:   var(--hit-miss);
  border-color: var(--hit-miss);
  color:        #fff;
}
html.dark .rg-cell--selected .rg-cell__label { opacity: .85; }

/* 4 ── Tally-Strip: Trenner */
html.dark .tally-sep { color: var(--dm-text-3); }

/* 5 ── Stats-Bar-Track */
html.dark .stats-bar-track { background: var(--dm-border-cell); }

/* 6 ── Telemetrie-Header (session summary) */
html.dark .telem-header {
  background:   var(--dm-surface-2);
  border-color: var(--dm-border);
}

/* 7 ── Karten-Platzhalter (Ladescreen-Hintergrund) */
html.dark .walking-map,
html.dark .walking-compass-map,
html.dark .explore-walk-map,
html.dark .nearby-map,
html.dark .pd-map {
  background: var(--dm-surface);
}

/* 8 ── Karten-Filter: Entsättigungsfilter im Dark Mode entfernen
         (CartoDB Dark Matter ist bereits dunkler Stil — kein Desaturate nötig) */
html.dark .nearby-map,
html.dark .pd-map {
  filter: none;
}
html.dark .nearby-map .leaflet-marker-pane,
html.dark .nearby-map .leaflet-tooltip-pane,
html.dark .pd-map .leaflet-marker-pane,
html.dark .pd-map .leaflet-tooltip-pane,
html.dark .walking-map .leaflet-marker-pane,
html.dark .walking-map .leaflet-tooltip-pane,
html.dark .explore-walk-map .leaflet-marker-pane,
html.dark .explore-walk-map .leaflet-tooltip-pane {
  filter: none;
}

/* 9 ── Buttons: outline-Variante braucht hellere Rahmenlinie */
html.dark .btn--outline {
  border-color: var(--dm-border-cell);
  color:        var(--dm-text);
}
html.dark .btn--ghost {
  color: var(--dm-text-2);
}

/* 9b ── app-bar--dark: Buttons im dunklen Header müssen immer weiß sein,
         auch im hellen App-Modus (navy-Hintergrund ≠ light bg) */
.app-bar--dark .btn--outline {
  color:        rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.30);
}
.app-bar--dark .btn--outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.50);
}

/* 9c ── Stepper-Buttons: neumorphic Schatten nur im Hellmodus sinnvoll */
html.dark .stepper-btn {
  box-shadow:
    2px 2px 6px rgba(0,0,0,.45),
    -1px -1px 4px rgba(255,255,255,.06);
  background: var(--dm-surface-2);
}
html.dark .stepper-btn:active {
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.50),
    inset -1px -1px 3px rgba(255,255,255,.05);
}

/* 10 ── Sensor-Card: Icon-Hintergrund */
html.dark .sensor-card__icon {
  background: var(--dm-surface-2);
  color:      var(--dm-text-2);
}
html.dark .sensor-card__badge {
  background: var(--dm-surface-2);
  color:      var(--dm-text-2);
}
html.dark .sensor-reading {
  background: var(--dm-surface-2);
}

/* 11 ── Danger card (Daten zurücksetzen) — Border bleibt rot, Hintergrund dunkel */
html.dark .sensor-card--danger {
  border-color: rgba(239,68,68,.35);
}

/* 12 ── hw-toggle thumb bleibt weiss, Track im Dark Mode etwas heller off-state */
html.dark .hw-toggle__track {
  background: rgba(255,255,255,.18);
}
html.dark .hw-toggle input:checked + .hw-toggle__track {
  background: var(--cyan);
}

/* ═══════════════════════════════════════════════════════════════
   LittleJohn — Pflock-Tabelle (explore-meta)
═══════════════════════════════════════════════════════════════ */
.flock-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
}
.flock-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.12);
}
.flock-dot--red   { background: #e53935; }
.flock-dot--blue  { background: #2196f3; }
.flock-dot--white { background: #f5f5f5; border-color: #bdbdbd; }
.flock-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 34px;
}
.flock-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.flock-dist-val {
  min-width: 48px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   LittleJohn — Summary Screen
═══════════════════════════════════════════════════════════════ */
.screen--summary-lj {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.screen--summary-lj .app-bar__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Karte */
.lj-summary-map {
  height: 220px;
  min-height: 160px;
  flex-shrink: 0;
  background: #e8eaed;
  position: relative;
}
.lj-map-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--label);
  font-size: 13px;
  gap: 6px;
}
.lj-map-offline i { font-size: 28px; }

/* Body */
.lj-summary-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Akkordeon */
.lj-accordion {
  background: var(--surface-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  /* overflow: hidden intentionally removed — clips <details> content in Safari/Chrome */
}
.lj-accordion__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--color-text-primary);
}
.lj-accordion__hd::-webkit-details-marker { display: none; }
.lj-accordion__chevron { margin-left: auto; transition: transform .2s; }
.lj-accordion[open] .lj-accordion__chevron { transform: rotate(180deg); }
.lj-accordion__bd {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}
.lj-accordion__bd--targets {
  padding: 0;
}

/* Stat-Grid */
.lj-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.lj-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lj-stat__val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.lj-stat__lbl {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lj-stats-subtitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
  margin: 12px 0 8px;
}
.lj-nodata {
  color: var(--color-text-secondary);
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
}

/* Größen-Balken */
.lj-size-bar {
  display: flex;
  height: 28px;
  border-radius: var(--r-md);
  overflow: hidden;
  gap: 2px;
}
.lj-size-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  min-width: 24px;
}
.lj-size-seg--small  { background: #81c784; }
.lj-size-seg--medium { background: #4caf50; }
.lj-size-seg--large  { background: #388e3c; }
.lj-size-seg--xl     { background: #1b5e20; }
.lj-size-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.lj-size-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.lj-size-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.lj-size-dot--small  { background: #81c784; }
.lj-size-dot--medium { background: #4caf50; }
.lj-size-dot--large  { background: #388e3c; }
.lj-size-dot--xl     { background: #1b5e20; }

/* Neigungen */
.lj-angle-row {
  display: flex;
  gap: 10px;
}
.lj-angle-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  background: var(--surface-page);
  padding: 8px 10px;
  border-radius: var(--r-md);
}
.lj-angle-item strong { margin-left: auto; font-family: var(--font-mono); }

/* Zielliste */
.lj-tgt-accordion {
  border-bottom: 1px solid var(--border);
}
.lj-tgt-accordion:last-child { border-bottom: none; }
.lj-tgt-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lj-tgt-hd::-webkit-details-marker { display: none; }
.lj-tgt-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  min-width: 24px;
}
.lj-tgt-animal {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lj-tgt-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.lj-gps-ok   { color: var(--color-success); font-size: 14px; }
.lj-gps-miss { color: var(--miss); font-size: 14px; }

/* Ziel-Detail */
.lj-tgt-bd {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-page);
}
.lj-tgt-flocks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lj-flock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 2px solid;
  font-size: 13px;
  background: var(--surface-card);
}
.lj-flock-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.lj-tgt-gps, .lj-tgt-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}
.lj-gps-acc {
  font-size: 11px;
  opacity: .7;
  margin-left: 4px;
}

/* ── Section label group separator ──────────────────────────────── */
.section-label--group {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── Szene (multiple animals per station) ───────────────────────── */
.lj-scene-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.lj-scene-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
}
.lj-scene-chip i { color: var(--label); font-size: 15px; }
.lj-scene-chip__cat {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--label);
  background: var(--surface-page);
  padding: 2px 7px;
  border-radius: var(--r-full);
}
.lj-scene-chip__remove {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--label);
  font-size: 14px;
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.lj-scene-chip__remove:hover { background: var(--danger-bg); color: var(--danger); }

.lj-scene-add-form {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lj-scene-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.lj-scene-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.lj-scene-add-btn:hover { background: var(--primary-bg); border-color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   Summary — Parcours-Name + Status-Badge im App-Bar
═══════════════════════════════════════════════════════════════ */
.app-bar__multi-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.lj-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,145,0,.18);
  color: var(--primary);
  border: 1px solid rgba(255,145,0,.35);
  border-radius: 100px;
  padding: 2px 8px;
  align-self: flex-start;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   Parcours-Detail — Meta-Zeile mit Name/Ort + Action-Buttons
═══════════════════════════════════════════════════════════════ */
.pd-meta-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.pd-meta-actions-row .pd-meta-edit {
  flex: 1;
  border-bottom: none;
  min-width: 0;
}
.pd-meta-action-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 14px 0;
  flex-shrink: 0;
}
.pd-meta-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--r-md);
}

/* Sherwood-Verbindungs-Indikator neben den Action-Buttons */
.pd-sherwood-chip {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: 16px;
  border: 1px solid var(--border);
}
.pd-sherwood-chip--ok {
  color: var(--orange);
  border-color: rgba(255, 109, 0, .25);
  background: rgba(255, 109, 0, .07);
}
.pd-sherwood-chip--none {
  color: var(--text-muted);
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   Parcours-Detail — Kursmetadaten (wie Summary-Stat-Grid)
═══════════════════════════════════════════════════════════════ */
.pd-course-meta {
  margin: 0 16px 4px;
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   Betreiber-Profil (Operator Screen)
═══════════════════════════════════════════════════════════════ */
.screen--operator { display: flex; flex-direction: column; min-height: 100%; }
.operator-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(var(--bnav-h) + 24px);
}

/* Logo-Picker */
.op-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.op-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.op-logo .avatar__initials {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* Author-Hinweis */
.op-author-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 20px 0 4px;
  font-size: 0.78rem;
  color: var(--label);
  line-height: 1.4;
}
.op-author-hint .ph-light { flex-shrink: 0; margin-top: 1px; }

/* Save-Zeile */
.op-save-row { margin-top: 20px; }

/* Feedback-Banner */
.op-feedback {
  margin-top: 12px;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-weight: 500;
}