/* =========================================================================
   Strecke — Drückjagd Manager   |   styles
   Mobile-first. A calm forest palette with real depth. Phone + desktop.

   Design system (read me first):
   - COLOUR tokens live in :root. Hues are forest greens; we layer surfaces
     bg < surface < surface-2 < surface-3 to build depth.
   - SPACING uses an 8px-ish scale (--sp-1 … --sp-6) so gaps stay consistent.
   - ELEVATION uses --sh-1/2/3 shadows + a hairline top highlight on cards so
     panels feel raised, not just outlined.
   - MOTION is deliberately FAST (≤220ms): this is a field tool, snappy > showy.
   ========================================================================= */

:root {
  /* ---- surfaces (dark → light = further from / closer to the eye) ---- */
  --bg:        #12160d;   /* app background (deepest)          */
  --bg-2:      #161b0f;   /* background gradient foot          */
  --surface:   #1d2415;   /* cards / panels                    */
  --surface-2: #28311d;   /* raised elements / inputs          */
  --surface-3: #323d25;   /* hover / pressed raised            */
  --line:      #3a4630;   /* borders                           */
  --line-soft: #2c351f;   /* hairline dividers                 */

  /* ---- ink ---- */
  --text:   #edf2e6;      /* main text                         */
  --muted:  #a3b491;      /* secondary text                    */
  --faint:  #9aa888;      /* tertiary / placeholders (AA 5.4:1 on --surface-2) */

  /* ---- brand + semantic ---- */
  --accent:    #83b450;   /* hunting green accent              */
  --accent-l:  #98c862;   /* accent highlight (gradient top)   */
  --accent-d:  #5c8a32;   /* accent shade                      */
  --accent-ink:#11160a;   /* text on an accent fill            */
  --gold:      #dcb863;   /* Wildmarke / highlight             */
  --gold-l:    #ecca78;
  --danger:    #e06a54;   /* unsafe / error / wound            */
  --danger-l:  #ec8470;
  --ok:        #74c578;   /* success / kill / synced           */
  --amber:     #e6b045;   /* warning                           */
  --info:      #6fc0d6;   /* trichinella / syncing             */

  /* ---- stage progression ramp (early warm → late green) ----
     Drives the status / Nachsuche overview bars so left→right reads as clear
     forward progress, in the app's earthy palette (rust/brown → orange → gold →
     olive → green). Tune the whole ramp here; light-mode variants are below. */
  --stage-1:   #d8c49a;   /* earliest / raw — pale warm sand (lightest) */
  --stage-2:   #b1552a;   /* deep terracotta (dark — big step off sand) */
  --stage-3:   #ea9438;   /* bright orange                     */
  --stage-4:   #eccb4d;   /* warm yellow / gold                */
  --stage-5:   #8fbf55;   /* lime / olive green                */
  --stage-6:   #3f9f57;   /* latest / done — forest green (deep) */
  --stage-new: #d64e2b;   /* Nachsuche entry — clear red, needs triage */

  /* ---- spacing scale ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;

  /* ---- radii ---- */
  --r-sm: 9px; --r: 13px; --r-lg: 17px; --r-xl: 22px;

  /* ---- elevation ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 6px 16px rgba(0,0,0,.34);
  --sh-3: 0 16px 38px rgba(0,0,0,.46);
  --glow: 0 4px 16px rgba(108,160,60,.34);
  /* hairline top-light that makes a panel read as raised */
  --edge: inset 0 1px 0 rgba(255,255,255,.045);

  --topbar-h: 58px;
  --nav-h:    66px;   /* the tab bar's own content height */
  /* …and the space it ACTUALLY occupies, home-indicator inset included. Anything
     that sits above the tab bar must use this one, or it hides behind the bar on
     a notched phone while looking correct on a desktop. */
  --nav-total: calc(var(--nav-h) + env(safe-area-inset-bottom));
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* ---- LIGHT THEME (daylight / sun-readable) — overrides the tokens above ---- */
:root[data-theme="light"] {
  --bg: #e9ede1; --bg-2: #dde2d3;
  --surface: #ffffff; --surface-2: #f1f4ec; --surface-3: #e7ecdf;
  --line: #d4dbc8; --line-soft: #e6ebde;
  --text: #1a2315; --muted: #556547; --faint: #626f4b;  /* faint now AA 4.9:1 on light --surface-2 */
  --accent: #3f7a24; --accent-l: #58982f; --accent-d: #2f5e1a; --accent-ink: #ffffff;
  --gold: #876a0f; --gold-l: #a5841c;
  --danger: #b93d27; --danger-l: #d05c46;
  --ok: #2d8c41; --amber: #946809; --info: #24769f;
  /* stage ramp — darker/more-saturated so the swatches read on white cards;
     spaced in lightness + hue (tan → dark terracotta → orange → gold → olive → green) */
  --stage-1: #b3924f; --stage-2: #9c4620; --stage-3: #d67d18; --stage-4: #c2a41c;
  --stage-5: #6d9b2f; --stage-6: #2f8c43; --stage-new: #b23c18;
  --sh-1: 0 1px 2px rgba(20,30,12,.10);
  --sh-2: 0 6px 16px rgba(20,30,12,.12);
  --sh-3: 0 16px 38px rgba(20,30,12,.20);
  --glow: 0 4px 14px rgba(63,122,36,.22);
  --edge: inset 0 1px 0 rgba(255,255,255,.6);
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(120% 80% at 50% -10%, #f4f7ef 0%, rgba(244,247,239,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
:root[data-theme="light"] #topbar { background: rgba(255,255,255,.82); box-shadow: 0 1px 12px rgba(20,30,12,.06); }
:root[data-theme="light"] #bottomnav { background: rgba(255,255,255,.86); box-shadow: 0 -1px 12px rgba(20,30,12,.07); }
:root[data-theme="light"] .list > .list-item:hover,
:root[data-theme="light"] .list-item:hover { background: rgba(20,30,12,.035); }
:root[data-theme="light"] .list > .list-item:active { background: rgba(20,30,12,.06); }
:root[data-theme="light"] .backbtn:hover { background: rgba(63,122,36,.10); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #1b2212 0%, rgba(27,34,18,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;          /* iOS body size */
  line-height: 1.45;
  font-variant-numeric: tabular-nums;   /* aligned figures everywhere */
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(131,180,80,.35); color: #fff; }

/* tidy desktop scrollbars */
@media (min-width: 720px) {
  * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: var(--accent-d); background-clip: content-box; }
}

/* ---------- Top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(31,38,22,.92), rgba(27,33,19,.86));
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 2px 14px rgba(0,0,0,.30);
  z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--accent-l), var(--accent-d));
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: var(--sh-1), var(--edge);
}
.logo svg { width: 20px; height: 20px; color: var(--accent-ink); }
.title-block { min-width: 0; }
.app-title { font-weight: 800; font-size: 17px; line-height: 1.05; letter-spacing: .01em; }
.hunt-name {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: .04em; transition: background .14s, border-color .14s;
}
.lang-toggle:hover { background: var(--surface-3); border-color: var(--accent-d); }
.lang-toggle:active { transform: translateY(1px); }
.lang-toggle.icon-btn { padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.lang-toggle.icon-btn svg { width: 17px; height: 17px; display: block; }
/* THE ACCESS PILL — what kind of access this device has, named, for EVERY role.
   It is the answer to "what am I allowed to do here", which is a question a Jäger
   on a borrowed phone asks far more often than a super admin does. Tapping it
   opens the access menu (switch preview / enter a code / sign out).
   Four looks, so the role reads at a glance without touching it:
     hunter    neutral pill      · nachsuche  amber   · admin  accent green
     super     gold, because it is the one that can change other people's access */
.role-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 12px; font-weight: 700;
  cursor: pointer; letter-spacing: .01em; transition: background .14s, border-color .14s, color .14s;
  max-width: 42vw; white-space: nowrap; overflow: hidden;
}
.role-toggle .role-lbl { overflow: hidden; text-overflow: ellipsis; }
/* An explicit `display` in an author stylesheet BEATS the browser's own
   [hidden] { display: none }, so `btn.hidden = true` did nothing here: the mode
   pill stayed on screen for people who were never allowed to use it. */
.role-toggle[hidden] { display: none !important; }
.role-toggle svg { width: 15px; height: 15px; flex: 0 0 auto; }
.role-toggle:hover { border-color: var(--accent-d); }
.role-toggle:active { transform: translateY(1px); }
/* Shown inside the access sheet as a label, not a control. */
.role-toggle.static { cursor: default; pointer-events: none; }
.role-toggle.admin {
  background: linear-gradient(180deg, var(--accent-l), var(--accent));
  color: var(--accent-ink); border-color: var(--accent-d); box-shadow: var(--sh-1);
}
/* Fixed gold rather than var(--gold): that token flips to a DARK olive in the
   light theme, which would leave dark ink on a dark fill. A light gold with dark
   ink reads in both themes, which is what a role label has to do. */
.role-toggle.super {
  background: linear-gradient(180deg, #ecca78, #dcb863);
  color: #2a2312; border-color: rgba(0,0,0,.24); box-shadow: var(--sh-1);
}
.role-toggle.nachsuche {
  background: rgba(230,176,69,.14); color: var(--amber); border-color: rgba(230,176,69,.4);
}
/* The super admin looking at the hunter view. It must NOT look like a real
   Jäger pill, or they would forget which one they are testing. */
.role-toggle.preview { border-style: dashed; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  letter-spacing: .02em; border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
/* the states you are in all day and never need to read: just the dot */
.badge.badge-quiet { padding: 5px; gap: 0; }
.badge-offline { background: rgba(230,176,69,.12); color: var(--amber); border-color: rgba(230,176,69,.28); }
.badge-online  { background: rgba(116,197,120,.12); color: var(--ok); border-color: rgba(116,197,120,.30); }
.badge-syncing { background: rgba(111,192,214,.12); color: var(--info); border-color: rgba(111,192,214,.30); }
.badge-local   { background: rgba(163,180,145,.10); color: var(--muted); border-color: var(--line); }
.badge-local::before { box-shadow: none; opacity: .8; }
/* `display: inline-flex` above is an explicit display, and an explicit display
   BEATS the [hidden] attribute — the same trap that once left the role pill on
   screen for people who were never allowed to use it. Without this line the
   badge cannot be hidden before its real state is known. */
.badge[hidden] { display: none !important; }

/* ---------- Main view ---------- */
#view {
  padding: 16px 14px;
  padding-top: calc(var(--topbar-h) + 16px);
  padding-bottom: calc(var(--nav-total) + 28px);
  max-width: 720px; margin: 0 auto;   /* tighter, app-like column on wide screens */
}
/* whole-view entrance — re-triggered by the router on every navigation */
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
#view.viewin { animation: viewIn .2s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Bottom nav ---------- */
#bottomnav {
  /* The height must INCLUDE the home-indicator inset, not be eaten by it.
     With `box-sizing: border-box` (set globally), `height: 66px` plus
     `padding-bottom: env(safe-area-inset-bottom)` left the CONTENT box at
     66 − 34 = 32px on a notched iPhone — less than the 51px an icon and its
     label need. The tabs were crushed against the top edge with no room above
     them, which reads exactly as "the bar has been cut off". Invisible on a
     desktop or in a headless capture, because there the inset is 0. */
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-total);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch; justify-content: space-around;
  background: linear-gradient(180deg, rgba(31,38,22,.90), rgba(24,30,17,.96));
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -3px 18px rgba(0,0,0,.34);
  z-index: 50;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600;
  padding-top: 8px; transition: color .15s;
}
.nav-item.active { color: var(--accent); }
.nav-item:active { opacity: .6; }
/* flat iOS-style tabs — every tab the same; the active one just tints accent */
.nav-ico { line-height: 1; display: flex; align-items: center; justify-content: center; position: relative; }
.nav-ico svg { width: 26px; height: 26px; display: block; }
.nav-lbl { font-size: 11px; letter-spacing: .01em; }
/* "N nicht abgesendet" counter — rides the tab that leads to the un-submitted
   entries, so a forgotten Absenden stays visible from every screen. Red on
   purpose: this is the one number that means "an animal is missing from the
   Strecke". `hidden` needs an explicit rule because .nav-badge is a flex box. */
.nav-badge {
  position: absolute; top: -5px; left: 50%; margin-left: 5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0;
  border-radius: 9px; border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.nav-badge[hidden] { display: none; }
:root[data-theme="light"] .nav-badge { border-color: #fff; }
/* On wide screens (tablet/laptop at the Blockhaus) keep the tab bar under the same
   720px content column instead of spreading the tabs across the whole viewport. */
@media (min-width: 760px) {
  #bottomnav {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: 720px;
    border-radius: 16px 16px 0 0;
    border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  }
}

/* iOS-style back chevron at the top of detail screens */
.backbtn {
  display: inline-flex; align-items: center; gap: 1px; margin: -2px 0 8px -7px;
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 16px; font-weight: 600; padding: 4px 7px; border-radius: 9px;
  transition: background .14s, opacity .1s;
}
.backbtn:hover { background: rgba(131,180,80,.10); }
.backbtn:active { opacity: .6; }
.backbtn svg { width: 21px; height: 21px; margin-right: -1px; }

/* ---------- Generic building blocks ---------- */
h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 16px; }
h2 {
  font-size: 12px; margin: 24px 0 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
p  { line-height: 1.5; }
.muted { color: var(--muted); }
.center { text-align: center; }
b, strong { font-weight: 700; }

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin-bottom: 12px;
  box-shadow: var(--sh-1), var(--edge);
}
.card.tap { cursor: pointer; transition: border-color .15s, transform .08s, box-shadow .15s; }
.card.tap:hover { border-color: var(--accent-d); box-shadow: var(--sh-2), var(--edge); }
.card.tap:active { transform: scale(.992); }

.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--accent-l), var(--accent));
  color: var(--accent-ink); border: none; border-radius: var(--r-sm);
  padding: 12px 17px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .12s, transform .06s, box-shadow .12s; line-height: 1.1;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); filter: brightness(.95); box-shadow: var(--sh-1); }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: 100%; }
.btn.secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  box-shadow: var(--sh-1), var(--edge);
}
.btn.secondary:hover { background: var(--surface-3); border-color: var(--accent-d); filter: none; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-d); box-shadow: none; }
.btn.ghost:hover { background: rgba(131,180,80,.10); filter: none; }
.btn.danger { background: linear-gradient(180deg, var(--danger-l), var(--danger)); color: #2a0f0a; }
.btn.gold   { background: linear-gradient(180deg, var(--gold-l), var(--gold)); color: #2a2208; }
.btn.lg { padding: 16px 22px; font-size: 16px; border-radius: var(--r); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }

/* ---------- form fields ---------- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
input, select, textarea {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; font-size: 16px;
  font-family: inherit; transition: border-color .14s, box-shadow .14s, background .14s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(131,180,80,.20);
  background: var(--surface-3);
}
/* A refused code, said where the person is looking. The old toast lived at the
   bottom of the screen for 2.3s while the field sat 344px above it. */
input.bad, input.bad:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(214, 58, 58, .18);
}
.field-err {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 8px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--danger);
}
.field-err::before { content: "✕"; font-weight: 800; line-height: 1.25; }
.field-err[hidden] { display: none; }

select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3b491' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text);
}
.chip.gold { background: rgba(220,184,99,.14); color: var(--gold); border-color: rgba(220,184,99,.36); }
.chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Komplett" cue — a freshly-complete animal on the Strecke */
.done-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(116,197,120,.16); color: var(--ok); border: 1px solid rgba(116,197,120,.42);
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .01em;
}
.done-badge svg { flex: 0 0 auto; }

/* selectable pill buttons (sex, age, species, station) */
.opt {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px; font-size: 14px; cursor: pointer; font-weight: 600;
  transition: background .13s, border-color .13s, color .13s, transform .06s, box-shadow .13s;
  box-shadow: var(--sh-1);
}
.opt:hover { border-color: var(--accent-d); background: var(--surface-3); }
.opt:active { transform: translateY(1px); }
.opt.sel {
  background: linear-gradient(180deg, var(--accent-l), var(--accent)); color: var(--accent-ink);
  border-color: var(--accent); box-shadow: var(--sh-1), 0 2px 10px rgba(108,160,60,.28);
}
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; }
/* a vertical single-select list (e.g. the Nachsuche-Status selector) */
.opt-col { display: flex; flex-direction: column; gap: 8px; }
.opt-col .opt { width: 100%; text-align: center; }

/* ---------- iOS-style segmented control (Geschlecht, Verbleib) ----------
   Connected segments in a recessed track; the selected one is a raised,
   accent-tinted thumb. Same data-model as the .opt pills, different look. */
.segctl {
  display: flex; gap: 3px; padding: 3px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}
.segctl .seg-opt {
  flex: 1 1 0; min-width: 0; appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  padding: 9px 8px; border-radius: calc(var(--r-sm) - 3px); min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .16s, color .16s, box-shadow .16s;
}
.segctl .seg-opt:hover { color: var(--text); }
.segctl .seg-opt:active { transform: translateY(1px); }
.segctl .seg-opt.sel {
  background: linear-gradient(180deg, var(--accent-l), var(--accent));
  color: var(--accent-ink); box-shadow: var(--sh-1), 0 2px 8px rgba(108,160,60,.28);
}
.segctl .seg-opt .swatch { flex: 0 0 auto; }

/* ---------- iOS-style toggle switch (ja/nein binaries) ---------- */
.switch-row { padding: 4px 0; }
.switch-row .lbl { font-size: 15px; font-weight: 600; color: var(--text); }
.switch {
  position: relative; flex: 0 0 auto; -webkit-appearance: none; appearance: none;
  width: 50px; height: 30px; padding: 0; margin: 0; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line); cursor: pointer;
  transition: background .18s, border-color .18s;
}
.switch .switch-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: #f4f7ef; box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: transform .18s cubic-bezier(.4,.1,.3,1);
}
.switch[aria-checked="true"] {
  background: linear-gradient(180deg, var(--accent-l), var(--accent)); border-color: var(--accent-d);
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(131,180,80,.28); }
@media (prefers-reduced-motion: reduce) { .switch .switch-knob { transition: none; } }

/* dashboard subtitle under the H1 (hunt place + join code) — replaces the
   old standalone date card; the date already lives in the top bar. */
.page-sub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -8px 0 18px; color: var(--muted); font-size: 14px;
}

/* ---------- Anschuss radial "Skizze" map ---------- */
.amap-modes { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.amap-svg {
  width: 100%; max-width: 330px; display: block; margin: 0 auto; aspect-ratio: 1;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  touch-action: none;
}
.amap.ro .amap-svg { max-width: 260px; }
.amap-ring    { fill: none; stroke: var(--line); stroke-width: 1; }
.amap-axis    { stroke: var(--line-soft); stroke-width: 1; }
.amap-ringlbl { fill: var(--faint); font-size: 11px; font-family: inherit; }
.amap-blick   { stroke: var(--muted); stroke-width: 2; }
.amap-blicklbl{ fill: var(--muted); font-size: 11px; font-weight: 600; font-family: inherit; }
.amap-stand rect { fill: var(--accent); stroke: none; }
.amap-stand line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.amap-anschuss line { stroke: #f08a24; stroke-width: 3.4; stroke-linecap: round; }
.amap-flucht  { stroke: var(--danger); stroke-width: 2.4; }
.amap-arrow-flucht { fill: var(--danger); }   /* arrowhead matches the Flucht line */
.amap-arrow-blick  { fill: var(--muted); }    /* arrowhead matches the Blickrichtung line */
.amap-landmark-ro { margin-top: 10px; font-size: 14px; color: var(--text); }

/* ---------- Nachsuche priority badges ---------- */
.prio { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.prio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prio-hoch    { background: rgba(224,106,84,.16);  color: var(--danger); }
.prio-mittel  { background: rgba(230,176,69,.16);  color: var(--amber); }
.prio-niedrig { background: var(--surface-2); color: var(--muted); }

/* photo of the Anschuss (orange-tape marker) */
.anschuss-photo { width: 100%; max-width: 340px; border-radius: var(--r); border: 1px solid var(--line); display: block; margin: 4px auto 0; }
.anschuss-photo.thumb { max-width: 120px; }

/* status badges along the chain — ONE calm neutral pill; the stage is shown by
   a small coloured dot, not a different fill each time (keeps the rainbow down) */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, #9aa39a); flex: 0 0 auto; }
.st-neu       { --dot: #9aa39a; }
.st-erlegt    { --dot: var(--amber); }
.st-gewogen   { --dot: #a7d36b; }
.st-trichine  { --dot: var(--info); }
.st-markiert  { --dot: var(--gold); }
.st-strecke   { --dot: var(--ok); }
.st-abgegeben { --dot: #c3aae0; }
/* Not yet sent to the Strecke. Amber and spelled out, because the whole point of
   the Absenden safety nets is that this state can never look like a finished one. */
.st-draft {
  --dot: #e0a83e; color: #b07f1b;
  background: rgba(224, 168, 62, .10); border-color: rgba(224, 168, 62, .40);
}

/* iOS-style grouped inset list: ONE rounded container, rows split by a hairline
   that insets to align under the text (not a stack of separate floating cards) */
.list {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 55%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-1), var(--edge); margin-bottom: 12px;
}

/* list item */
.list-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 9px;
  cursor: pointer; box-shadow: var(--sh-1), var(--edge);
  transition: border-color .14s, transform .07s, box-shadow .14s, background .12s;
}
.list-item:hover { border-color: var(--accent-d); box-shadow: var(--sh-2), var(--edge); }
.list-item:active { transform: scale(.994); }
/* inside a .list, rows go flat — no per-row border/radius/shadow, just a hairline */
.list > .list-item {
  border: none; border-radius: 0; margin: 0; box-shadow: none; background: transparent;
  padding: 10px 14px; transition: background .12s;
}
.list > .list-item:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; right: 0; bottom: 0; height: 1px; background: var(--line-soft);
}
.list > .list-item:hover { border: none; box-shadow: none; background: rgba(255,255,255,.035); }
.list > .list-item:active { transform: none; background: rgba(255,255,255,.06); }
.li-main { min-width: 0; flex: 1; }
.li-title { font-weight: 700; }
.li-sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-chev { color: var(--faint); display: flex; }
.li-chev svg { width: 18px; height: 18px; }

/* ---- management portal (Verwaltung) ------------------------------------
   Hunts, their Jagdleitung and their Jäger. A person is a row with a round
   initials badge, so leadership and hunters read as one list of people rather
   than as rows of settings. */
.list-item.sel { background: rgba(131,180,80,.10); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.avatar.lead { background: rgba(220,184,99,.16); color: var(--gold); border-color: rgba(220,184,99,.36); }
.person-row .li-title .chip { font-size: 10.5px; padding: 2px 7px; margin-left: 4px; vertical-align: 1px; }
/* a section heading with its count on the right */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 0 8px; }
.sec-h h2 { margin: 0; }

/* ---- lock screen (the front door) --------------------------------------
   Shown until a hunt code or the admin code is entered. The nav and the hunt
   name in the topbar are hidden too — before you are in, there is nothing to
   navigate and nothing to name. */
body.locked #bottomnav,
body.locked #huntName,
body.locked #roleToggle,
body.locked #syncBadge { display: none !important; }
body.locked #view { padding-bottom: 32px; }

.lockwrap { max-width: 420px; margin: 0 auto; padding-top: 6vh; }
.lock-logo {
  width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent), var(--accent-d));
  color: var(--accent-ink); box-shadow: var(--sh-1);
}
.lock-title { text-align: center; margin: 0 0 4px; font-size: 30px; letter-spacing: .01em; }
.lock-sub { text-align: center; color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.lockwrap .btn.block { margin-top: 12px; }
.lockwrap details summary { list-style: none; }
.lockwrap details summary::-webkit-details-marker { display: none; }
.lockwrap details summary::after { content: " ›"; color: var(--faint); }
.lockwrap details[open] summary::after { content: " ⌄"; }

/* big scan area — a viewfinder "stage" with an animated scan beam */
.scan-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(130% 120% at 50% 38%, #12180d, #090c06);
  border: 1px solid var(--line); box-shadow: var(--edge), var(--sh-1);
}
/* On a phone the rear camera hands us a PORTRAIT stream (e.g. 720x1280). Shown
   with `object-fit: cover` inside a 4:3 landscape box, most of that frame is
   cropped away top and bottom — so the user sees only a narrow band and has to
   fight to get the tag into it. A SQUARE stage on narrow screens keeps far more
   of the frame visible (and suits a square QR target). v69. */
@media (max-width: 520px) { .scan-stage { aspect-ratio: 1 / 1; } }
/* html5-qrcode writes `position: relative` INLINE onto #reader, which beats a
   stylesheet `position: absolute` — so `inset: 0` stops stretching it and the
   element grows to the video's NATURAL height (e.g. 460px inside a 259px stage).
   `overflow: hidden` then cuts the library's centred reticle in half: that was
   the "scan box cut off" bug, not the qrbox size. Pin the box explicitly so it
   matches the visible stage whichever position mode the library forces. */
#reader { position: absolute; inset: 0; width: 100% !important; height: 100% !important; overflow: hidden; }
#reader video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
/* Belt and braces: the library's own shaded overlay is laid out by geometry we
   don't control, so hide it and draw the viewfinder ourselves (.vf-box below),
   inside our own box, where it can never be clipped. */
#reader #qr-shaded-region, #reader img[alt="Info icon"] { display: none !important; }
.scan-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; color: var(--accent); pointer-events: none;
}
/* While the camera runs, keep OUR viewfinder square on screen but drop the idle
   hint text, so the user still has something to aim with. */
.scan-stage.live .scan-hint { display: none; }
.scan-stage.live .vf { opacity: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.75)); }
.vf-box { position: relative; width: 54%; max-width: 220px; aspect-ratio: 1; }
.vf { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.vf-beam {
  position: absolute; left: 13%; right: 13%; top: 50%; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 9px 1px var(--accent);
  animation: vfscan 2.3s ease-in-out infinite;
}
@keyframes vfscan {
  0%, 100% { transform: translateY(-34px); opacity: .35; }
  50%      { transform: translateY(34px);  opacity: 1; }
}
.scan-hint { color: var(--muted); font-size: 13px; margin: 0; text-align: center; padding: 0 24px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 70%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 12px; text-align: center;
  box-shadow: var(--sh-1), var(--edge);
}
.stat .num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.stat .lbl { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.stat.hero .num { color: var(--accent); }
/* dashboard hero total (replaces the old stat tiles) */
.stat-total { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--accent); }

.empty { text-align: center; color: var(--muted); padding: 44px 18px; }
.empty .big {
  font-size: 32px; color: var(--muted); margin: 0 auto 14px; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--sh-1), var(--edge);
}
.empty .big svg { width: 31px; height: 31px; }
.empty p { margin: 0 0 16px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-total) + 20px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: var(--r); font-weight: 600; z-index: 100;
  box-shadow: var(--sh-3); max-width: 90vw; text-align: center;
  animation: toastIn .26s cubic-bezier(.22,.61,.36,1) both; transition: opacity .2s;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-ico { display: flex; flex: 0 0 auto; }
.toast.ok    { border-color: rgba(116,197,120,.55); }
.toast.ok .toast-ico  { color: var(--ok); }
.toast.err   { border-color: rgba(224,106,84,.6); }
.toast.err .toast-ico { color: var(--danger); }
.toast.with-action { gap: 16px; padding-right: 12px; }
.toast-undo { background: none; border: none; color: var(--accent-l); font-weight: 800; cursor: pointer; font-size: 13px; padding: 4px 6px; letter-spacing: .02em; }
.toast-undo:active { opacity: .6; }

/* THE UNDO WINDOW on a confirmed hunt deletion. A toast is the wrong shape for
   this: a toast leaves, and the whole point here is something that STAYS in the
   way for a minute, across every screen, until it is either taken back or runs
   out. So it sits above the tab bar, full width, and counts down in the open. */
.undobar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-total) + 14px);
  display: flex; align-items: center; gap: 13px; z-index: 150;
  background: var(--surface-3); color: var(--text);
  border: 1px solid rgba(224,106,84,.55); border-left: 3px solid var(--danger);
  border-radius: var(--r); padding: 11px 12px 11px 14px; box-shadow: var(--sh-3);
  animation: toastIn .26s cubic-bezier(.22,.61,.36,1) both;
}
.undobar-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; }
.undobar-txt b { font-weight: 700; }
.undobar-ring { position: relative; flex: 0 0 auto; width: 34px; height: 34px; }
.undobar-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.undobar-ring circle { fill: none; stroke: var(--line); stroke-width: 3; }
.undobar-ring .undobar-run { stroke: var(--danger); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.undobar-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--danger-l);
}
.undobar-btn {
  flex: 0 0 auto; background: var(--danger); color: #fff; border: none; border-radius: 9px;
  font-weight: 800; font-size: 13.5px; padding: 9px 14px; cursor: pointer; letter-spacing: .02em;
}
.undobar-btn:active { opacity: .75; }
@media (max-width: 380px) { .undobar-txt { font-size: 13px; } .undobar { gap: 10px; } }

/* the row of a hunt that is counting down — dimmed, so the list agrees with the bar */
.list-item.going { opacity: .55; }
.chip.danger { background: rgba(224,106,84,.15); color: var(--danger-l); border-color: rgba(224,106,84,.45); }

/* success flash — the "it worked" moment after submitting an animal */
.success-ov {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(8,12,6,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: ovIn .14s ease both;
}
.success-ov.out { animation: ovOut .2s ease both; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovOut { to { opacity: 0; } }
.success-card { display: flex; flex-direction: column; align-items: center; gap: 13px; color: #f0f4ea; font-weight: 700; font-size: 16px; }
.success-check {
  width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent-l), var(--accent-d)); color: #fff;
  box-shadow: var(--glow), 0 8px 24px rgba(0,0,0,.45);
  animation: checkPop .42s cubic-bezier(.2,.8,.3,1.4) both;
}
@keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .success-check { animation: none; } }

.divider { height: 1px; background: var(--line-soft); margin: 16px 0; border: none; }

/* tag print sheet — small QR codes, many per page */
.tag-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
.tag-cell { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 8px; text-align: center; background: #fff; color: #111; }
.tag-cell img { display: block; width: 100%; max-width: 100px; height: auto; margin: 0 auto; image-rendering: pixelated; }
.tag-cell .code { font-family: ui-monospace, monospace; font-size: 11px; margin-top: 5px; font-weight: 700; }

/* Hunt-invite sheet (#/invite) — pinned up at the Blockhaus, so it is drawn on
   WHITE with black text at all times (like .tag-cell), never in the dark theme:
   what you see on screen is exactly what comes out of the printer. */
.invite-sheet {
  background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 20px 20px; text-align: center; box-shadow: var(--sh-1);
}
.inv-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #667; }
.inv-name { font-size: 27px; font-weight: 800; line-height: 1.15; margin: 8px 0 4px; }
.inv-meta { font-size: 14px; color: #556; }
.inv-qr { margin: 20px auto 14px; width: 216px; max-width: 74%; }
.inv-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.inv-how { font-size: 14px; font-weight: 600; max-width: 30ch; margin: 0 auto; }
.inv-code-lbl { font-size: 12px; color: #667; margin-top: 16px; }
.inv-code {
  font-family: ui-monospace, monospace; font-size: 26px; font-weight: 700; letter-spacing: .12em;
  margin-top: 3px; word-break: break-all;
}
.inv-foot { font-size: 11px; color: #889; margin-top: 18px; }

@media print {
  #topbar, #bottomnav, .no-print { display: none !important; }
  /* the invite is the whole page when printed: no border, centred, colours kept */
  .invite-sheet {
    border: 0; box-shadow: none; break-inside: avoid; padding-top: 8vh;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .inv-qr { width: 260px; max-width: 60%; }
  body { background: #fff; }
  #view { padding: 0; max-width: none; }
  /* make sure the black QR + dashed cut-lines actually print */
  .tag-sheet, .tag-cell, .tag-cell img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tag-sheet { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
  .tag-cell { border: 1px solid #999; break-inside: avoid; }
  .tag-cell img { max-width: 92px; }
  /* Anschussprotokoll: show the print header, keep colours, avoid ugly breaks */
  .print-only { display: block !important; }
  h2 { break-after: avoid; }
  .entry-head, .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .anschuss-photo, .amap-svg, #as_roShot svg, .status, .prio, .chip {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .anschuss-photo { max-width: 320px; }
}

/* ---------- "New version available" bar ---------- */
/* Sits under the topbar, NOT at the bottom: the bottom is where the Absenden bar
   and the tab bar live, and nothing may come between a hunter's thumb and those. */
.updatebar {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 12px; font-size: 14px; font-weight: 600;
  background: var(--surface-3); color: var(--text);
  border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
  animation: ubIn .26s cubic-bezier(.22,.61,.36,1) both;
}
/* its own keyframe: toastIn carries a translateX(-50%) for a centred pill, which
   would throw a full-width bar half off the screen */
@keyframes ubIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.updatebar .ub-go {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px;
  padding: 6px 14px; font-weight: 800; font-size: 13px; cursor: pointer;
}
.updatebar .ub-x {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  display: flex; padding: 4px; line-height: 0;
}
/* keep the bar from covering the top of the page it is announcing */
body.has-update #view { padding-top: calc(var(--topbar-h) + 60px); }
@media print { .updatebar { display: none !important; } }

/* The super admin's "you are looking at the Jäger app" bar. Amber rather than
   neutral, because unlike the update bar it reports a mode you are CURRENTLY in
   and want to leave — and it carries the way out, which is the whole point:
   the Jäger app has no Mehr tab, so without this there is no route back. */
.previewbar {
  background: linear-gradient(180deg, rgba(230,176,69,.20), rgba(230,176,69,.13));
  border-bottom-color: rgba(230,176,69,.42); color: var(--amber);
}
.previewbar span { display: inline-flex; align-items: center; gap: 7px; }
.previewbar .ub-go { background: var(--amber); color: #2a2312; }
body.has-preview #view { padding-top: calc(var(--topbar-h) + 60px); }
/* both bars at once: stack them rather than overlap */
body.has-update .previewbar { top: calc(var(--topbar-h) + 46px); }
body.has-update.has-preview #view { padding-top: calc(var(--topbar-h) + 106px); }

/* ---------- Printable Nachsuche list (#/anschussliste) ---------- */
/* A table, not cards: this sheet is read across a bonnet in the dark by someone
   comparing stands, so the columns have to line up. It scrolls sideways on a
   phone rather than squeezing the text to nothing. */
.print-sheet { overflow-x: auto; }
.as-list { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 18px; }
.as-list th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--line);
}
.as-list td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.as-list tr:last-child td { border-bottom: 0; }
.as-list .muted { font-size: 11.5px; }

@media print {
  .as-list { font-size: 10.5pt; }
  .as-list tr { break-inside: avoid; }
  .as-list th { border-bottom: 1px solid #666; color: #000; }
  .as-list td { border-bottom: 1px solid #ddd; }
  .as-list .muted { color: #444; }
  .print-sheet { overflow: visible; }
  /* repeat the header on every page — a second page of unlabelled columns is
     useless to whoever is holding it */
  .as-list thead { display: table-header-group; }
}

/* desktop niceties */
@media (min-width: 720px) {
  .nav-lbl { font-size: 12px; }
  #view { padding-left: 24px; padding-right: 24px; }
}

/* ---------- group-colour swatches + colour pills ---------- */
.swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.30); vertical-align: middle;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}
.opt.color { display: inline-flex; align-items: center; gap: 7px; }
.opt.color.sel .swatch { border-color: rgba(0,0,0,.35); }

/* ---------- entry detail: identity header ---------- */
.entry-head { padding: 15px 16px; }
.eh-top { display: flex; align-items: center; gap: 13px; }
.eh-emoji {
  font-size: 29px; width: 52px; height: 52px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px;
}
.eh-emoji svg { width: 24px; height: 24px; color: var(--muted); }
.eh-id { flex: 1; min-width: 0; }
.eh-title { font-size: 18px; font-weight: 800; line-height: 1.15; }
.eh-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.eh-status { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.eh-tag {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
}
.eh-tag .mono { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .03em; color: var(--text); }

/* edit-form: grouped inset sections + a submit that sticks above the tab bar */
.form-sec { padding: 14px 16px; }
.form-sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
/* The Absenden bar STICKS in the thumb zone just above the tab bar for as long as
   the form is scrolled, then settles into its natural place at the end of the
   form. Absenden is load-bearing (only a submitted animal reaches the Strecke),
   so it must never be scrolled out of reach — and it is the only primary-styled
   action on the form. Sticky, not fixed: it stays in the document flow, so the
   Verlauf timeline below it is still reachable. */
.submit-bar {
  position: sticky; bottom: calc(var(--nav-total) + 10px); z-index: 35;
  margin: 16px -4px 0; padding: 10px 12px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.submit-bar .btn { margin: 0; }

/* ---------- read-only field rows (View detail) ---------- */
.ro-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.ro-row:last-of-type { border-bottom: none; }
.ro-k { color: var(--muted); font-size: 14px; }
.ro-v { font-weight: 700; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* ---------- icon helpers (search field, More menu tiles) ---------- */
.search-wrap { position: relative; }
.search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search-wrap input { padding-left: 40px; }
.menu-card { padding: 14px 16px; }
.menu-ico {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--accent);
}
.menu-ico svg { width: 22px; height: 22px; }

/* ---------- Trefferlage: shot-placement map ---------- */
.shotmap {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.03), rgba(255,255,255,0) 60%),
    var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px; overflow: hidden; box-shadow: var(--edge);
}
.shotmap svg {
  width: 100%; height: auto; display: block; touch-action: none; /* let us drag without scrolling */
}
.shotmap .sil path { transition: none; }
.shotmap .dots circle {
  fill: var(--danger); stroke: #fff; stroke-width: 2; cursor: grab;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.shotmap .dots .dot:active circle { cursor: grabbing; }
.shotmap.ro .dots circle { cursor: default; }
.shotmap .dots text {
  fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none;
  font-family: system-ui, sans-serif;
}
/* uploaded-image variant: a light panel (so a white-background drawing looks
   clean) with the picture and the dot overlay stacked exactly on top */
.shotmap.has-img {
  position: relative; aspect-ratio: 440 / 300; padding: 0;
  background: #fff;   /* light panel so black-on-transparent silhouettes show */
  border: 1px solid var(--line);   /* separates the white panel from white cards in light mode */
}
.shotmap.has-img .sil-img,
.shotmap.has-img .dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scale(.8); transform-origin: 50% 50%;  /* 20% smaller; image + dots scale together so dots stay aligned */
}
.shotmap.has-img .sil-img { object-fit: contain; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Anschuss pose-sheet: a 2x3 grid per species (top half = boar, bottom half = deer
   via object-position). ~3:2 box keeps the shot dot round (was a 6:1 row → oval). */
.shotmap.has-img.wide-sil { aspect-ratio: 1086 / 724; }
.shotmap.has-img.wide-sil .sil-img, .shotmap.has-img.wide-sil .dots { transform: none; }

/* Settings → Trefferlage-Bilder: per-species image picker */
.sil-thumb {
  width: 58px; height: 40px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.sil-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sil-thumb .muted { font-size: 10px; }

/* ---------- admin Strecke: inline edit + delete + confirm ---------- */
.btn.sm { padding: 9px 11px; font-size: 14px; line-height: 1; border-radius: var(--r-sm); }
/* Comfortable ~40px hit area for the small icon actions (edit/delete on list rows) —
   easier to hit with cold or gloved hands in the field, without bloating the visuals. */
.btn.icon { padding: 9px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.btn.icon svg { width: 17px; height: 17px; }
.opt.sm { padding: 8px 10px; font-size: 13px; }
.pill-row.sm { gap: 6px; }
/* the reset button uses the [hidden] attribute to toggle; .btn's display:flex
   would otherwise override the UA [hidden]{display:none}, so force it here */
.strk-reset[hidden] { display: none; }
.strk-row { padding: 12px 13px; }
/* complete + on the Strecke: an obvious green left bar + tint */
.strk-row.complete {
  border-color: rgba(116,197,120,.40);
  box-shadow: inset 4px 0 0 0 var(--ok), var(--sh-1), var(--edge);
  background:
    linear-gradient(180deg, rgba(116,197,120,.055), rgba(116,197,120,0) 42%),
    var(--surface);
}
.strk-row.complete .li-sub { color: var(--muted); }
.strk-row.staged-del { opacity: .55; border-color: var(--danger); }
.strk-row.staged-del .li-title { text-decoration: line-through; }
.strk-editor { margin-top: 4px; }

/* ---- swipe-to-reveal row actions ----
   The head and the action tray sit side by side in a flex slider that is clipped
   by .strk-swipe, so the tray is genuinely off-frame until you drag — no opaque
   overlay is needed and the row's own .complete tint / left bar (painted on
   .strk-row, outside the clip) stay visible throughout.
   `touch-action: pan-y` hands VERTICAL scrolling back to the browser, so dragging
   down the list can never be swallowed by a row (see wireSwipeRow in app.js). */
.strk-swipe { overflow: hidden; touch-action: pan-y; margin: -2px 0; padding: 2px 0; }
.strk-slider {
  display: flex; align-items: stretch;
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.strk-slider > .strk-head { flex: 0 0 100%; }
/* Compact icon-over-label columns, so the tray takes under half the row and the
   drag needed to open it stays short. */
.strk-actions { flex: 0 0 auto; display: flex; align-items: stretch; gap: 6px; padding-left: 10px; }
.sw-act {
  flex-direction: column; gap: 4px; width: 74px; padding: 8px 4px;
  font-size: 11px; font-weight: 700; line-height: 1.1; white-space: nowrap; box-shadow: var(--sh-1);
}
.sw-act svg { width: 18px; height: 18px; }
.sw-del { background: linear-gradient(180deg, var(--danger-l), var(--danger)); color: #2a0f0a; }
/* Dim the row text once the tray is out, so the half-scrolled-off title reads as
   "this row is parked open", not as broken layout. */
.strk-openrow { transition: opacity .18s; }
.strk-row.sw-open .strk-openrow { opacity: .38; }
/* The inline pencil/trash stay VISIBLE on touch too (user's call): a button you can
   see beats a gesture you have to know about, especially for anyone handed the app
   on hunt day. The swipe tray is then a shortcut on top, not the only way in. */
/* With a mouse the tray is redundant, so don't let a stray drag reveal it. */
@media (hover: hover) and (pointer: fine) {
  .strk-actions { display: none; }
}
.strk-row .btn.sm.sel { background: linear-gradient(180deg, var(--accent-l), var(--accent)); color: var(--accent-ink); border-color: var(--accent); }
/* grouped inset: flatten the rows inside the .list container, hairline between */
.strk-list > .strk-row {
  border: none; border-radius: 0; margin: 0; box-shadow: none; background: transparent; padding: 11px 13px;
}
.strk-list > .strk-row:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
.strk-list > .strk-row.complete {
  box-shadow: inset 3px 0 0 0 var(--ok);
  background: linear-gradient(90deg, rgba(116,197,120,.06), rgba(116,197,120,0) 28%);
}
.strk-list > .strk-row.staged-del { opacity: .55; background: transparent; }
/* a closed (erledigt) Nachsuche case reads calmer than the open ones */
.strk-list > .strk-row.as-done { opacity: .72; }
.strk-row.as-done .li-title { color: var(--muted); }
/* Nachsuche assignment / sign-off chips on the admin list rows */
.as-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--line); }
.as-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.as-chip.as-assigned  { color: var(--accent); border-color: var(--accent-d); background: rgba(131,180,80,.12); }
.as-chip.as-unassigned{ color: var(--amber);  border-color: rgba(230,176,69,.42); background: rgba(230,176,69,.12); }
.as-chip.as-signoff   { color: var(--muted);  background: var(--surface-2); }
/* Assigned to the person holding the phone. The chip says "Du" and is filled
   rather than outlined, so scanning a long list for your own searches is a
   colour match instead of reading a name on every row. */
.as-chip.as-mine-chip {
  color: var(--bg); border-color: var(--accent);
  background: var(--accent); font-weight: 700;
}
/* an urgent (high-priority) open search gets a red accent bar so it stands out */
.strk-list > .strk-row.as-hoch {
  box-shadow: inset 3px 0 0 0 var(--danger);
  background: linear-gradient(90deg, rgba(214,58,58,.07), rgba(214,58,58,0) 30%);
}
/* YOURS: the same accent-bar language as the urgent rows, in the accent colour.
   An urgent row that is also yours keeps the red bar — "this one is on fire"
   outranks "this one is mine" — and the filled chip still marks it as yours. */
.strk-list > .strk-row.as-mine {
  box-shadow: inset 3px 0 0 0 var(--accent);
  background: linear-gradient(90deg, rgba(131,180,80,.10), rgba(131,180,80,0) 30%);
}
.strk-list > .strk-row.as-mine.as-hoch {
  box-shadow: inset 3px 0 0 0 var(--danger);
  background: linear-gradient(90deg, rgba(214,58,58,.07), rgba(214,58,58,0) 30%);
}
.as-minenote { display: flex; align-items: center; gap: 6px; }
.as-minenote svg { color: var(--accent); flex: 0 0 auto; }
/* The live actions sit directly under the report header, so the first of them
   must not carry the usual big top margin an <h2> gets after a heading block. */
#asQuick > .quick-h:first-child { margin-top: 10px; }
/* print-only blocks (e.g. the Anschussprotokoll header) — hidden on screen */
.print-only { display: none; }
.print-head { margin-bottom: 12px; }
.print-title { font-size: 22px; font-weight: 800; }

/* central-log search / filter / sort controls */
.strk-controls { padding: 13px 13px; position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 30; }
.strk-controls select { flex: 1 1 130px; width: auto; min-width: 116px; padding: 10px 30px 10px 11px; font-size: 14px; }
.strk-controls input[type=search] { width: 100%; }

.update-bar {
  position: fixed; left: 0; right: 0; bottom: var(--nav-total);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-top: 1px solid var(--line);
  z-index: 40; box-shadow: 0 -6px 20px rgba(0,0,0,.4);
  animation: barIn .22s ease both;
}
@keyframes barIn { from { transform: translateY(100%); } to { transform: none; } }
/* the `hidden` attribute alone can't hide a flex element — make it explicit */
.update-bar[hidden] { display: none; }

.modal-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200;
  animation: ovIn .16s ease both;
}
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; max-width: 400px; width: 100%; box-shadow: var(--sh-3);
  animation: modalIn .22s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 18px; margin: 0 0 8px; }
/* A modal that is a menu rather than a question: a little roomier, and its rows
   are list-items, so the access sheet looks like the rest of the app. */
.modal.sheet { padding: 18px 16px 16px; }
.modal.sheet .list { margin: 0; }
/* A destructive choice sitting in a list of ordinary ones. Coloured, not
   hidden — it belongs with the others, but must never be the one you tap by
   accident while reading the two above it. */
.list > .list-item.danger-row .li-title { color: var(--danger); }
.list > .list-item.danger-row .li-ico { color: var(--danger); border-color: rgba(214,90,74,.34); }

/* "Nachsuche zuweisen" — a tappable row that shows who has it, inside a card.
   Dashed while unassigned, because an open search with no dog team on it is a
   gap the Jagdleitung has to see, not a neutral empty field. */
.assign-box {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 11px 12px; border-radius: var(--r-sm);
  border: 1px dashed var(--line); background: var(--surface-2);
  transition: border-color .14s, background .14s;
}
.assign-box:hover { border-color: var(--accent-d); }
.assign-box:active { transform: scale(.995); }
.assign-box.set { border-style: solid; border-color: rgba(131,180,80,.34); background: rgba(131,180,80,.08); }
.assign-box.set .li-ico { color: var(--accent); border-color: rgba(131,180,80,.34); }

/* ---------- Hilfe / FAQ (#/hilfe) ---------- */
/* Native <details>, so it works with no JS and the browser handles the state.
   One open at a time is NOT enforced: on a hunt day you may well want two
   answers side by side. */
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 14px 15px;
  font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg); transition: transform .18s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--accent); }
.faq-item p {
  margin: 0; padding: 0 15px 14px; color: var(--muted);
  font-size: 14px; line-height: 1.5;
}

/* The hunt's join code, big enough to read aloud across a Blockhaus. */
.joincode {
  font-family: ui-monospace, monospace; font-size: 26px; font-weight: 800;
  letter-spacing: .14em; text-align: center; color: var(--gold);
  background: rgba(220,184,99,.10); border: 1px dashed rgba(220,184,99,.42);
  border-radius: var(--r-sm); padding: 14px 10px; word-break: break-all;
}

/* Leading icon slot on a list row (the access menu, the lock screen's
   "continue as" list). Sized to sit level with the title, not the whole row. */
.li-ico {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.li-ico svg { width: 17px; height: 17px; }

/* Lock screen: the hunts already on this device, offered back after a sign-out.
   Without it, signing out reads like it might have thrown the day away. */
.lock-back { width: 100%; max-width: 380px; margin: 18px auto 0; }
.lock-or {
  text-align: center; font-size: 12px; color: var(--faint); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- provenance timeline (animal detail) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: flex; gap: 13px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.tl-dot {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--surface-2); border: 1px solid var(--line); line-height: 1;
  box-shadow: var(--sh-1), var(--edge);
}
.tl-line { flex: 1; width: 2px; background: var(--line); margin: 3px 0; min-height: 10px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { flex: 1; min-width: 0; padding: 6px 0 20px; }
.tl-item:last-child .tl-body { padding-bottom: 2px; }
.tl-title { font-weight: 700; font-size: 14px; }
.tl-time { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tl-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tl-chips .chip { font-size: 11px; padding: 3px 9px; }
.tl-item.now .tl-dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(131,180,80,.22), var(--sh-1); }
.tl-item.now .tl-title { color: var(--accent); }

/* dashboard chain-of-custody status bar (segmented) + legend */
.statusbar { display: flex; gap: 2px; height: 14px; }
.statusbar .seg { min-width: 5px; border-radius: 3px; transition: flex .3s ease; }
.status-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.lg-item { display: inline-flex; align-items: center; gap: 7px; }
.lg-item b { color: var(--text); font-weight: 700; }
.lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
/* Stage colours = the early→late ramp (see the --stage-* tokens), so the overview
   bars show clear forward progress in the brand palette. Animal chain uses the 6
   below (neu→…→strecke); the Nachsuche bar uses the dedicated .seg-as* ramp. */
.seg-neu       { background: var(--stage-1); }
.seg-erlegt    { background: var(--stage-2); }
.seg-gewogen   { background: var(--stage-3); }
.seg-trichine  { background: var(--stage-4); }
.seg-markiert  { background: var(--stage-5); }
.seg-strecke   { background: var(--stage-6); }
/* Nachsuche stages: eingereicht → freigegeben → in_arbeit → erledigt, an even
   red → orange → gold → green ramp (early = urgent, right = done). */
.seg-as1 { background: var(--stage-new); }
.seg-as2 { background: var(--stage-3); }
.seg-as3 { background: var(--stage-4); }
.seg-as4 { background: var(--stage-6); }

/* dashboard "by species" rows are tappable -> open the filtered central log */
.species-row { padding: 12px 4px; cursor: pointer; border-bottom: 1px solid var(--line-soft); transition: padding-left .14s; }
.species-row:last-child { border-bottom: none; }
.species-row:hover { padding-left: 8px; }
.species-row:hover b { color: var(--accent); }
.species-row:active { opacity: .65; }
/* skeleton shimmer for loading states */
.skel {
  position: relative; overflow: hidden; border-radius: var(--r-sm);
  background: var(--surface-2); color: transparent;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

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

/* ---- drafts (not-yet-submitted entries) --------------------------------- */
/* Amber = "attention, not done". Warm literals so it reads the same in both themes. */
.draft-banner {
  border: 1px solid rgba(224, 168, 62, .40);
  border-left: 4px solid #e0a83e;
  background: rgba(224, 168, 62, .08);
}
.draft-banner .draft-chip {
  background: #e0a83e; color: #2a1e05; font-weight: 700;
}
/* The Strecke list's "Nicht abgesendet" toggle — the Entwürfe tab, folded in. */
.draft-filter { display: inline-flex; align-items: center; gap: 8px; }
.draft-filter:not(.sel) { border-color: rgba(224, 168, 62, .45); }
.draft-filter .draft-chip { background: #e0a83e; color: #2a1e05; font-weight: 700; }
.draft-filter.sel .draft-chip { background: rgba(0, 0, 0, .22); color: inherit; }
/* The "must hit Absenden" note under the entry form. */
.draft-note {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(224, 168, 62, .40);
  border-left: 4px solid #e0a83e;
  background: rgba(224, 168, 62, .10);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}
.draft-note b { color: #e0a83e; }
/* "Entwurf wiederhergestellt" — calmer than the amber banner: this is good news
   (your work survived), not a warning. */
.draft-restored {
  border-left: 4px solid var(--accent);
  background: rgba(131, 180, 80, .08);
  margin-bottom: 14px;
}

/* ---------- v108: staged Anschuss-Skizze + missing-data cues (2026-08-26) ---------- */
/* The Skizze's step line ("Schritt 1 — tippen: ✕ Anschuss") next to Zurücksetzen. */
.amap-step { font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
/* Locked once ✕ and → are down: it is a picture now, touches scroll the page. */
.amap-svg.amap-locked { cursor: default; }

/* Missing-data colour: SIGNAL ORANGE (v109 — the amber was too faint). Same
   bright orange as the status ramp's --stage-3, i.e. already in the look book;
   darkened in the light theme for contrast on white cards (like --amber is). */
:root {
  --miss:        #ea9438;
  --miss-bg:     rgba(234,148,56,.15);
  --miss-border: rgba(234,148,56,.60);
}
:root[data-theme="light"] {
  --miss:        #a8500a;
  --miss-bg:     rgba(214,125,24,.13);
  --miss-border: rgba(179,94,14,.65);
}

/* "Fehlt noch:" chip row in the animal header — the at-a-glance list of what
   still stands between this animal and "Komplett". */
.eh-missing {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.eh-missing .ehm-lbl { font-size: 12.5px; font-weight: 800; color: var(--miss); }
.chip.miss { background: var(--miss-bg); color: var(--miss); border-color: var(--miss-border); font-weight: 700; }

/* The signal-orange box on the exact field/row that is still open. Placed AFTER
   .ro-row:last-of-type so a missing last row keeps its orange underline. */
.ro-row.missing, label.field.missing, .switch-row.missing {
  background: var(--miss-bg);
  border: 1.5px solid var(--miss-border);
  border-radius: 10px;
  padding-left: 10px; padding-right: 10px;
}
.ro-row.missing { border-bottom: 1.5px solid var(--miss-border); margin: 3px 0; }
label.field.missing { padding-top: 8px; padding-bottom: 10px; }
.switch-row.missing { padding-top: 8px; padding-bottom: 8px; margin: 3px 0; }
/* …and the label inside the box goes orange too, so the open item names itself. */
.ro-row.missing .ro-k, label.field.missing > span, .switch-row.missing .lbl {
  color: var(--miss); font-weight: 700;
}

/* ---------- v112: list-level missing hints + pill affordance (2026-08-26) ---------- */
/* WHAT an incomplete animal still needs, right on its Strecke row. */
.strk-miss {
  font-size: 12px; font-weight: 600; color: var(--miss);
  margin-top: 3px;
  /* Wraps rather than nowrap+ellipsis: a long nowrap line stretches the swipe
     slider and pushes the row's inline buttons off screen. */
}
/* The access pill opens a menu — the caret is the affordance that says so. */
.role-toggle .role-caret { font-size: 9px; opacity: .8; margin-left: 1px; line-height: 1; }

/* ---------- v113: the tag code on every Strecke row ---------- */
.strk-code { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--faint); letter-spacing: .03em; }