/* Today page — card layout from docs/ui/01-Today.md. */

/* Heute = Cockpit (ADR-0022 §1) — a 2-column grid of tiles that are the navigation. */
.cockpit {
  display: grid;
  gap: var(--gap);
}

.cockpit__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cockpit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
  padding: 14px;
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-ink);
  font: inherit;
  cursor: pointer;
}

/* Hover nur für echte Zeigegeräte (Maus): auf dem Handy bleibt `:hover` sonst nach dem Antippen „kleben"
   → die zuletzt getippte Kachel wirkt beim Zurückkehren auf Home vorselektiert/hervorgehoben (AB#246). */
@media (hover: hover) {
  .tile:hover {
    background: var(--c-bg);
  }
}

.tile:active {
  transform: scale(0.99);
}

.tile__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tile__icon {
  flex: 0 0 auto;
  color: var(--c-accent);
}

.tile__label {
  font-weight: 600;
}

/* Zusatz-Zeile auf einer Kachel (z. B. Kassenstand, AB#240) — BEWUSST wie der Untertext: gleiche Schrift,
   gleiche Größe, nicht fett, keine Farbe (PO 2026-07-07: Kacheln schlicht halten). */
.tile__value {
  font-size: 0.85rem;
  color: var(--c-muted);
}

.tile__summary {
  font-size: 0.85rem;
  color: var(--c-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Tile unread badge sits in the top-right corner (ADR-0022 §1 / #63). */
.tile .nav-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Day picker as an icon (ADR-0022 §3) — tap opens a popover list of all stages. */
.daypick {
  position: relative;
  flex: 0 0 auto;
}

.daypick__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  display: none;
}

.daypick__menu--open {
  display: block;
}

.daypick__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--c-ink);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

.daypick__item:hover {
  background: var(--c-bg);
}

.daypick__item--active {
  background: var(--c-bg);
  font-weight: 600;
}

.daypick__date {
  font-size: 0.78rem;
  color: var(--c-muted);
}

/* Standalone module page head with a trailing day-picker icon (Erinnerungen). */
.module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module__sub {
  margin: -4px 0 0;
  font-size: 0.85rem;
}

/* Sticky top: header + day selector + tab sub-nav (01-Today v0.3). Sticks directly beneath the
   (now sticky) app bar — the notch inset is handled by the app bar, so no extra top padding here. */
.today__top {
  position: sticky;
  top: calc(var(--appbar-h) + env(safe-area-inset-top));
  z-index: 10;
  background: var(--c-bg);
  margin: calc(-1 * var(--gap)) calc(-1 * var(--gap)) 0;
  padding-left: var(--gap);
  padding-right: var(--gap);
  border-bottom: 1px solid var(--c-border);
}

.today__panel {
  padding-top: var(--gap);
}

.today__header {
  margin-bottom: 8px;
}

/* Header text block beside the day-picker icon — shrinks so a long date/title truncates (#163). */
.module__head-text {
  min-width: 0;
}

/* (The old ◀ dropdown ▶ day selector was replaced by the shared dayPickerIcon, #163.) */

/* Card actions + buttons */
.card__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* Add control placed above the list (button-first, see Editing Affordances) */
.card__actions--top {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Read-only value lists use the shared value-row layer now (formField valueRow, #150). */

.btn {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn--small {
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* Icon action buttons (Icon action buttons rule) — icon-only, label on hover (title),
   square ≥44px touch target. */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px;
}

.btn__icon {
  flex: 0 0 auto;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}

.btn--danger {
  color: #b3402f;
  border-color: #e0b4b4;
}

.btn--danger:hover {
  background: #fcf0f0;
}

/* Inline forms */
.form {
  display: grid;
  gap: 10px;
}

.form__row {
  display: grid;
  gap: 4px;
}

.form__label {
  font-size: 0.85rem;
  color: var(--c-muted);
}

.input {
  width: 100%;
  /* Forms fit the viewport (00-SailLog-Design-Language): never let an input's intrinsic
     width (date/time/number spinners) push the form wider than the phone screen. */
  max-width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font: inherit;
  background: var(--c-surface);
  color: var(--c-ink);
}

textarea.input {
  display: block;
  resize: vertical;
  min-height: 64px;
}

/* Documents (ADR-0030 / #160): file picker row + inline preview in the add/edit form. */
.doc-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-preview {
  margin-top: 10px;
}

.doc-preview__img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
}

/* Small thumbnail in the document list (lazy-loaded image documents). */
.listrow-thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  background: var(--c-border);
}

/* Inset the row separator past the thumbnail (matches the avatar inset). */
.listrow:has(.listrow-thumb)::after {
  left: 66px;
}

/* Dokument-Listenkachel ohne Bild (US #280): Art-Icon zentriert; optionaler kleiner „PDF"-Eck-Badge. */
.doc-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--c-muted);
}
.doc-tile__badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 4px;
  background: #b3402f;
  color: #fff;
}

.form__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* Search filter (Lupe) — 00-SailLog-Design-Language → Search filter */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  /* Match the card/group radius (was 8px, looked too tight next to grouped cards — PO 2026-07-01). */
  border-radius: var(--radius);
  background: var(--c-surface);
  margin-bottom: var(--gap);
}

.search__icon {
  flex: 0 0 auto;
  color: var(--c-muted);
}

.search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 0;
  font: inherit;
  color: var(--c-ink);
}

.search__input:focus {
  outline: none;
}

/* Shared list-row component (ADR-0024 §4 / #150) — ONE row shape across every module list. Each
   row is wrapped by swipeRow (<li class="swipe">); .listrow is the visible content. */
.listview {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* US #322: Einkauf-Ebene-1-Zeile im Accordion-Kopf-Stil (Balken + Pille + Notiz) in einer settings-card
   gestapelt → Trennlinie zwischen den Zeilen (die .listrow::after-Linie greift hier nicht, da kein .listrow). */
.listview > li:not(:first-child) .shoplistrow {
  border-top: 1px solid var(--c-border);
}

/* US #324: erledigte Einkaufsliste (Listen-Status) — gedimmt, damit sie sich von aktiven abhebt, wenn
   sie über die Pille „Erledigte" eingeblendet ist. */
.shoplistrow--done {
  opacity: 0.55;
}

/* US #323: Kategorie-Icon im Einkauf-Accordion-Kopf als farbiger Kreis-Marker (etwas kompakter als in der Liste). */
.accordion__marker {
  width: 24px;
  height: 24px;
}
/* PO 2026-07-15: Artikel-Zeilen unter dem Kategorie-Kopf eingerückt, damit die Zugehörigkeit zur Gruppe
   sichtbar ist (Zeilen + Trenner rücken mit; links bleibt ein schmaler Streifen der Kartenfläche). */
.shop-cat-body {
  padding-left: 24px;
}

.listrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  /* 16px insets so rows align inside a grouped .settings-card (which has no padding of its own). */
  padding: 10px 16px;
  position: relative;
}

/* Kompakte Wert-Zeile für einfache Stammdaten-Listen (AB#209): Höhe/Padding wie .settings-row (41px)
   statt der 56px-Inhaltszeile — so sitzen die Einträge so eng wie die Wert-Listen im Schaukasten. */
.listrow--compact {
  min-height: 41px;
  padding: 8px 16px;
}

/* iOS inset separator (matches .settings-row, #125): starts at the title (past the icon/avatar),
   runs to the right edge; the last row in a group has none. */
.listrow::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--c-border);
}

.listrow:has(.listrow__icon)::after {
  left: 50px;
}

/* Avatar rows (Crew): inset past the 44px avatar to align with the title. */
.listrow:has(.avatar)::after {
  left: 72px;
}

/* Checkbox rows (Einkauf): inset past the leading checkbox. */
.listrow:has(.checklist__check)::after {
  left: 48px;
}

/* Einkauf: a purchased item strikes through its title. */
.listrow--done .listrow__title {
  text-decoration: line-through;
  color: var(--c-muted);
}

/* Bordkasse: a locked entry (ADR-0018) reads as inactive — content greyed + an amber lock on the
   right. The lock element ships on the row but only shows in the locked state (PO 2026-07-01). */
.listrow--locked .listrow__title,
.listrow--locked .listrow__sub,
.listrow--locked .listrow__value {
  color: var(--c-muted);
}
.listrow--locked .listrow__icon {
  opacity: 0.5;
}
.listrow__lock {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  color: #8a6d3b;
}
.listrow--locked .listrow__lock {
  display: inline-flex;
}

.swipe:last-child .listrow::after {
  display: none;
}

.listrow__icon {
  flex: 0 0 auto;
  color: var(--c-muted);
}

.listrow__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.listrow__title {
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listrow__sub {
  font-size: 0.82rem;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listrow__value {
  /* The value (amount, distance, status) is shown in FULL on the right; the title/sub (line 1/2)
     truncate instead, since they wrap in the flexible body (#188). A generous max-width + ellipsis
     is only a last-resort cap for a pathologically long value, so it can never swallow the title
     entirely (#167). */
  flex: 0 0 auto;
  min-width: 0;
  max-width: 60%;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listrow__chevron {
  flex: 0 0 auto;
  color: var(--c-muted);
}

/* Favorite star (#170) — sits before the value/chevron. */
.listrow__fav {
  flex: 0 0 auto;
  color: var(--c-accent, #e0a106);
}

/* Reminder clock (#172) — sits before the star/value/chevron. */
.listrow__reminder {
  flex: 0 0 auto;
  color: var(--c-muted);
}

.mem-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  cursor: pointer;
  background: var(--surface-2, #e9edf1);
}

.mem-thumb--preview {
  width: 64px;
  height: 64px;
  cursor: default;
}

.mem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mem-tag {
  font-size: 0.75rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2, #e9edf1);
  color: var(--text-muted, #5b6470);
}

.mem-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.mem-add__row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mem-add__row .input {
  flex: 1;
}

.mem-add__preview {
  display: flex;
}

/* Folder-icon file picker (#84) — icon button + chosen-filename text (replaces native file input) */
.filepick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.filepick__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Per-device photo transfer control (#58) */
.mem-transfer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  font-size: 0.85rem;
}

.mem-transfer__mode {
  width: auto;
  flex: 0 0 auto;
}

.mem-transfer__status {
  flex: 1;
}

/* Generic module pages (Shopping, Board Cash) */
.module {
  display: grid;
  /* Pin the single column to the container width — a default `auto` track grows to max-content, so
     a wide row (e.g. a settings value like the Törn period) pushed the cards past the right edge and
     cut the value off (IMG_1840). minmax(0,1fr) caps it; children shrink + ellipsize. This is the
     non-detail twin of the .detail__body fix (#156). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  max-width: 640px;
}

.module > * {
  min-width: 0;
}

.module__title {
  margin: 0;
  font-size: 1.5rem;
}

.add-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

/* Shopping checklist */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.checklist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--c-border);
}

.checklist__row:last-child {
  border-bottom: none;
}

.checklist__check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.checklist__name {
  flex: 1;
  min-width: 0;
}

/* Compact inline assignee dropdown per shopping item (07-Shopping v0.4) */
.checklist__assignee {
  flex: 0 0 auto;
  width: auto;
  max-width: 40vw;
  padding: 4px 6px;
  font-size: 0.82rem;
}

.checklist__name--done {
  text-decoration: line-through;
  color: var(--c-muted);
}

.checklist__actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.checklist__row--editing {
  display: block;
}

/* (Group headings use the single .settings-group__title class now — #180.) */

.badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge--home {
  background: #eef4f8;
  color: var(--c-primary, #14618a);
}

.badge--local {
  background: #fdf0e6;
  color: #a4571a;
}

.badge--assignee {
  background: #eef0f4;
  color: #4a5568;
  text-transform: none;
  letter-spacing: 0;
}

.cat-field {
  display: grid;
  gap: 6px;
}

.cat-field__row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cat-field__row .input {
  flex: 1;
}

.cat-inline {
  display: flex;
  gap: 6px;
}

.share-select {
  width: auto;
  min-width: 80px;
}

/* Settings form (trip settings card) */
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.check-row input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.pressure-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Grid/flex children must be allowed to shrink, else wide inputs overflow the row
   (Forms fit the viewport — fixes Logbuch/Törn horizontal scroll). */
.pressure-row > *,
.form__row > * {
  min-width: 0;
}

/* The whole module never scrolls sideways on a phone. NOTE: `overflow-x: hidden` forces `overflow-y`
   to compute to `auto`, turning .module into a scroll container. That traps `position: sticky`
   descendants — so the detail page (.module.detail) overrides this back to `overflow: visible` (see
   base.css) to let its sticky chrome bar pin to the viewport under the app bar. */
.module {
  overflow-x: hidden;
}

.func-list {
  display: grid;
  gap: 6px;
}

.pressure-field {
  display: grid;
  gap: 4px;
}

/* Route map + timeline */
.module--wide {
  max-width: 900px;
}

.route-map {
  position: relative;
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  z-index: 0;
}

/* Full-screen, edge-to-edge map (ADR-0024 §7 / #116) — fills below the app bar to the screen edge;
   the bottom-nav overlays the lower edge (iOS-Maps style). No stage list. */
/* Slim back-bar above the full-screen map (#183) — fixed under the app bar; the map starts below it
   so the Leaflet zoom +/− controls (top-left of the map) are never covered by the back button. */
.map-topbar {
  position: fixed;
  /* UNTER dem global angehefteten Meldungsbalken einrasten (PO 2026-07-12): dessen Höhe kommt aus
     --notice-h (0, wenn kein Balken) — sonst verdeckt die fixe Karten-Leiste (z 500) die noticeBar. */
  top: calc(var(--appbar-h) + env(safe-area-inset-top) + var(--notice-h, 0px));
  left: 0;
  right: 0;
  z-index: 500;
  /* Höhe EXAKT wie das detailPage-Chrome (PO 2026-07-12): der Zurück-Button (font-size 1.25rem,
     line-height 1.45) + je 8px vertikal ergeben ~56px — vorher fix 44px, dadurch sichtbar niedriger als
     der Kopf der übrigen Seiten. --gap horizontal, kein Trennstrich. */
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 var(--gap);
  background: var(--c-bg);
}
/* Die ‹/✕-Zeile füllt die Leiste (‹ links, ✕ rechts) — wie .detail__header > .detail__toprow. */
.map-topbar .detail__toprow {
  flex: 1 1 auto;
  min-width: 0;
}

.route-map--full {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--appbar-h) + env(safe-area-inset-top) + var(--notice-h, 0px) + 56px);
  bottom: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  z-index: 0;
}

.route-map__note--overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 64px;
  z-index: 500;
  margin: 0;
  padding: 6px 10px;
  background: var(--c-surface);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* On desktop the map (and its back-bar) start right of the static sidebar. */
@media (min-width: 900px) {
  .route-map--full,
  .map-topbar {
    left: var(--sidebar-w);
  }
}

/* Fullscreen toggle button over the map (02-Route v0.4) */
.map-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  background: var(--c-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* US #308: „Route einpassen" (scan-search) links neben dem Vollbild-Knopf. */
.map-fit-btn {
  position: absolute;
  top: 10px;
  right: 54px;
  z-index: 500;
  background: var(--c-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Floating ‹ back over the full-screen map (ADR-0027). */
.map-back {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.route-map--fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  z-index: 2000;
}

/* Reservation marker pin (no sequence number) */
.route-pin--res .route-pin__body {
  border-style: dashed;
}

.route-map__note {
  margin-bottom: var(--gap);
}

.stage-row {
  border-bottom: 1px dotted var(--c-border);
  border-radius: 8px;
}

.stage-row:last-child {
  border-bottom: none;
}

.stage-row__head {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  cursor: pointer;
}

.stage-row--active {
  background: #eaf2f8;
}

/* Selected from a map marker click (two-way selection). */
.stage-row--selected {
  background: #fdf0e6;
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.stage-row__title {
  font-weight: 600;
}

.stage-row__meta {
  font-size: 0.82rem;
  color: var(--c-muted);
}

/* Per-location details (notes + POIs) — revealed when the row is marker-selected. */
.stage-row__details {
  display: none;
  padding: 4px 10px 12px;
}

.stage-row--selected .stage-row__details {
  display: block;
}

.poi-note {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--c-ink);
}

.poi-empty {
  font-size: 0.85rem;
}

.poi-group {
  margin-top: 8px;
}

.poi-group__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.poi-group__icon {
  flex: 0 0 auto;
}

.poi-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 4px;
}

.poi-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.9rem;
}

.poi-item__name {
  font-weight: 600;
}

.poi-item__notes {
  font-size: 0.82rem;
  color: var(--c-muted);
}

.poi-item__link {
  color: var(--c-accent);
  line-height: 0;
}

/* Map pins (Leaflet divIcon): type icon coloured by location type + sequence badge.
   Do NOT set `position` on .route-pin — that element is Leaflet's .leaflet-marker-icon,
   which must stay position:absolute or the marker drifts on zoom. The badge anchors to
   the body instead. */
.route-pin__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.route-pin__icon {
  display: block;
}


.route-pin__num {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Marker popup (Leaflet) */
.route-popup {
  display: grid;
  gap: 2px;
  min-width: 140px;
}

.route-popup__name {
  font-size: 0.98rem;
}

.route-popup__date {
  font-size: 0.82rem;
  color: var(--c-accent);
  font-weight: 600;
}

.route-popup__type {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-muted);
}

.route-popup__notes {
  font-size: 0.85rem;
  color: var(--c-ink);
  margin-top: 2px;
}

/* Reservations card (WI #31) — list rows use the shared listRow layer now (#150). The add/edit
   form keeps its own .res-form below. */
.res-form {
  margin-top: 6px;
}

/* Reservierungen Typ-Filter: einzelne Pillen (chip/chipBar → .chips) unter der Gruppenüberschrift,
   Muster wie die Crew-Liste im Showcase (PO 2026-07-05). Kein eigenes CSS nötig (nutzt .chips). */

/* Today Überblick glance (WI #37) */
.glance {
  display: grid;
  gap: 2px;
}

.glance__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px dotted var(--c-border);
  cursor: pointer;
  border-radius: 8px;
}

.glance__row:last-child {
  border-bottom: none;
}

.glance__row:hover {
  background: var(--c-bg);
}

.glance__label {
  color: var(--c-muted);
  flex: 0 0 auto;
}

.glance__value {
  text-align: right;
  font-weight: 600;
}

/* Today route mini-map + personal board-cash line (WI #34) */
.mini-map {
  height: 180px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin-top: 12px;
  z-index: 0;
}

.today__personal {
  margin: 6px 0 0;
  font-weight: 600;
}

/* Logbook — Today compact card (WI #32) */
.logbook-card__distance {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--c-accent);
}

.logbook-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.logbook-card__item {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
}

.logbook-card__time {
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  flex: 0 0 auto;
}

.logbook-card__text {
  flex: 1;
}

/* Logbook page — entry list uses the shared listRow layer now (#150). The entry form keeps its own
   .coord-* / .log-form classes below. */
.coord-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.coord-row .input {
  width: auto;
  flex: 1;
  min-width: 0;
}

.coord-unit {
  color: var(--c-muted);
}

.coord-hemi {
  flex: 0 0 auto;
  width: auto;
}

.log-form {
  margin-top: 8px;
}

/* Kitty / Bordkasse (WI #33) */
.kitty__balance {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f7a3d;
}

.kitty__balance--low {
  color: #b3402f;
}

.kitty__sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

.kitty__warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #fcf0f0;
  color: #b3402f;
  border-radius: 8px;
  font-size: 0.88rem;
}

/* Bordkasse "Kasse" group — the balance shown as a prominent first row in the card (#155). */
.kitty-balance-row {
  min-height: 60px;
}

/* Logbuch „Tagesstrecke" bar (#181) — day distance vs. the trip's longest day. */
.logdist {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logdist__track {
  flex: 1 1 auto;
  height: 14px;
  border-radius: 7px;
  background: var(--c-bg);
  overflow: hidden;
}

.logdist__fill {
  display: block;
  height: 100%;
  border-radius: 7px;
  background: var(--c-accent);
}

.logdist__val {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Auswertung charts (ADR-0026 §5 / #146) — inline SVG donut + diverging bars. Donut on top, legend
   full-width below so the amounts are never cut off on the right (#177). */
.chart-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.chart-donut-ring {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
}

.chart-donut {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-legend {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.chart-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-legend__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.chart-legend__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-legend__val {
  flex: 0 0 auto;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.chart-bars {
  display: grid;
  gap: 10px;
}

.chart-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-bar__label {
  flex: 0 0 30%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-bar__track {
  position: relative;
  flex: 1 1 auto;
  height: 14px;
  border-radius: 7px;
  background: var(--c-bg);
}

.chart-bar__track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-border);
}

.chart-bar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
}

.chart-bar__fill--pos {
  left: 50%;
  background: #1f7a3d;
}

.chart-bar__fill--neg {
  right: 50%;
  background: #b3402f;
}

.chart-bar__val {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Board cash balance */
.balance {
  display: grid;
  gap: 8px;
}

.balance__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name amt" "sub amt";
  column-gap: 12px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--c-border);
}

.balance__name {
  grid-area: name;
  font-weight: 600;
}

.balance__sub {
  grid-area: sub;
  font-size: 0.82rem;
  color: var(--c-muted);
}

.balance__amt {
  grid-area: amt;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.balance__amt--pos {
  color: #1f7a3d;
}

.balance__amt--neg {
  color: #b3402f;
}

.balance__row {
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.balance__row--active {
  background: #eaf2f8;
}

.filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--c-muted);
}

/* Expense + Crew lists use the shared listRow layer now (#150). */

.avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The app-bar avatar carries a sync-status dot at its corner — it must not be clipped by the
   circular avatar (#97). Anchor the dot to the avatar (position) and let it overflow; the image is
   rounded on its own so its corners stay clean. */
.avatar--dotted {
  position: relative;
  overflow: visible;
}

.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar__initials {
  font-weight: 700;
  font-size: 0.95rem;
}

.avatar__icon {
  width: 60%;
  height: 60%;
}

.avatar--lg {
  width: 72px;
  height: 72px;
}

/* Profile read/edit page — large avatar (ADR-0024 §9 / #118). Defined here (today.css loads after
   base.css) so it wins over the base `.avatar` size that would otherwise override it. */
.avatar--xl {
  width: 166px;
  height: 166px;
}

/* Erinnerungen photo-first gallery (ADR-0025 §1 / #130) — grid grouped by day + full-screen viewer. */
.gallery-day {
  position: sticky;
  top: var(--appbar-h);
  z-index: 1;
  margin: 16px 0 8px;
  padding: 4px 0;
  background: var(--c-bg);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-day__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* In-row hierarchical badges (#141) sit before the chevron — keep their natural pill size. */
.settings-row .nav-badge,
.listrow .nav-badge,
.gallery-day .nav-badge {
  flex: 0 0 auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px;
}

.gallery-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-surface);
  cursor: pointer;
}

.gallery-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-tile .nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

.viewer__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  touch-action: pan-y;
}

.viewer__img {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
}

.viewer__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Derived trip timeline (ADR-0025 §3 / #132) — source chips + projected photo/payment rows. */
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.chip--on {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

.chip__icon {
  flex: 0 0 auto;
}

/* Icon-only Chip (US #322 Sortier-Pille): kompaktes, quadratisches Padding ohne Text. */
.chip--icon {
  padding: 5px 8px;
}

/* US #310 — geteilte Zeit-Filter-Pille „Alle | <Bereich> | ▾" (PO-Skizze 2026-07-14): sehr ruhig, Segmente
   im chip-Stil, Chevron öffnet ein Dropdown (daypick-Stil) mit allen weiteren Bereichen. */
.time-pille {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.time-pille__seg {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.time-pille__seg--on {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.time-pille__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
}
.time-pille__menu {
  /* Als FIXES Popover an document.body gehängt (nicht in die Pille) → über der Vollbildkarten-Kopfleiste
     (z-index 500) und allen Ebenen unterhalb der Sheets. Position setzt JS aus dem Chevron-Rechteck. */
  position: fixed;
  z-index: 1300;
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  display: none;
}
.time-pille__menu--open {
  display: block;
}
.time-pille__item {
  display: flex;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--c-ink);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.time-pille__item:hover {
  background: var(--c-bg);
}
.time-pille__item--active {
  background: var(--c-bg);
  font-weight: 600;
}

/* US #315 Ebene 3 — Aktionsleiste „n ausgewählt" über der Verwalten-Liste. */
.manage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.manage-bar__count {
  flex: 1 1 auto;
  font-weight: 600;
}

/* (Logbuch timeline photo/payment rows now use the shared listRow layer #150 — .tl-* removed.) */

/* Bordkasse member detail (ADR-0026 §3 / #134) — avatar header + per-section ＋ head. */
.member-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 16px;
}

.member-head .avatar--sm {
  width: 56px;
  height: 56px;
}

.member-head__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-head__name {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Profile-photo picker (Crew → Pflegen) */
.photo-field {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.photo-field__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Locked-entry badge (board cash) */
.lock-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--c-muted);
}

.today__trip {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-muted);
}

.today__stage-title {
  margin: 2px 0 4px;
  font-size: 1.6rem;
}

.today__date {
  margin: 0;
  color: var(--c-ink);
}

.today__status {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--c-muted);
}

/* Mobile: single column in priority order. */
.today__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
}

.card--empty {
  opacity: 0.75;
}

.card__title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.card__body {
  font-size: 0.95rem;
}

.fields {
  display: grid;
  gap: 6px;
}

.field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dotted var(--c-border);
  padding-bottom: 5px;
}

.field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.field__label {
  color: var(--c-muted);
  flex: 0 0 auto;
}

.field__value {
  text-align: right;
}

/* Desktop: two-column layout (planning left, log/expenses/etc. right). */
@media (min-width: 900px) {
  .today__cards {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* GPX layer switch + imported-tracks list (#64) */
.layer-switch {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}

.layer-switch__btn--active {
  background: var(--c-primary, #14618a);
  color: #fff;
  border-color: var(--c-primary, #14618a);
}

.gpx-imports {
  margin-top: 14px;
}

/* Weather panel (#59) */
.weather__place {
  margin: 0 0 8px;
}

.weather__section {
  margin: 14px 0 6px;
  font-size: 0.95rem;
  color: var(--c-accent);
}

.weather__warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.weather__warn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fbe9e7;
  color: #b3402f;
}

.weather__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.weather__cell {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dotted var(--c-border);
  padding-bottom: 4px;
}

.weather__label {
  color: var(--c-muted);
}

.weather__value {
  font-weight: 600;
}

.weather__days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.weather__day {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--c-border);
}

.weather__dayname {
  font-weight: 600;
}

.weather__daymeta {
  color: var(--c-muted);
  text-align: right;
}

.weather__stand {
  margin: 10px 0 2px;
  font-size: 0.8rem;
}

.weather__stale {
  color: #b3402f;
}

.weather__attribution {
  font-size: 0.72rem;
  margin: 2px 0 0;
}

/* Wind overlay control + time slider (#60) */
.wind-control {
  margin: 8px 0 4px;
}

.wind-control__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wind-attr {
  font-size: 0.72rem;
}

.wind-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.wind-slider {
  flex: 1;
  min-width: 0;
}

.wind-time {
  flex: 0 0 auto;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Windy-style wind timeline, fixed along the bottom of the screen (#72). Kept out of the Leaflet
   container so it cannot disturb the map; shown only while the wind layer is active. */
.wind-tl {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(15, 20, 28, 0.92);
  color: #fff;
}

.wind-tl__play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}

.wind-tl__track {
  position: relative;
  flex: 1;
  min-width: 0;
}

.wind-tl__range {
  width: 100%;
  margin: 0;
  accent-color: #ffffff;
}

.wind-tl__bubble {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  background: var(--c-accent, #14618a);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

.wind-tl__day {
  flex: 0 0 auto;
  font-size: 0.8rem;
  opacity: 0.92;
  white-space: nowrap;
}

/* Map Layers control (#81) — one icon → a panel of layer toggles */
.map-layers-btn {
  position: absolute;
  top: 10px;
  right: 54px;
  z-index: 500;
  background: var(--c-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.layers-panel {
  position: absolute;
  top: 54px;
  right: 10px;
  z-index: 600;
  min-width: 168px;
  padding: 6px;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.layers-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.layers-panel__row:hover {
  background: var(--c-bg);
}

.layers-panel__row--off {
  opacity: 0.5;
  cursor: default;
}

/* Track-Name im Ebenen-Panel (AB#234): füllt die Zeile, lange Namen werden gekürzt statt umzubrechen. */
.layers-panel__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wind-tl__attr {
  flex: 0 0 auto;
  font-size: 0.62rem;
  opacity: 0.72;
  white-space: nowrap;
}

/* Wind-strength colour field (#73) — translucent canvas overlay, smoothed by the browser. */
.wind-field {
  image-rendering: auto;
  mix-blend-mode: normal;
}

/* Wind-strength legend on the timeline (#73): gradient bar (matches the field ramp) + kn ticks. */
.wind-tl__legend {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
}

.wind-tl__legend-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #3b7dd8, #36c98e, #9bd538, #f4d03f, #f39c12, #e74c3c);
}

.wind-tl__legend-ticks {
  font-size: 0.6rem;
  opacity: 0.8;
  white-space: nowrap;
  text-align: center;
}

/* On narrow phones the legend yields first to keep the slider usable. */
@media (max-width: 520px) {
  .wind-tl__legend {
    display: none;
  }
}

/* --- ETA (AB#226): kompakte Zeile auf Home + Overlay-Band auf der Karte ---------------------------- */
.eta {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.eta--compact {
  margin: 0 4px 12px; /* über den Cockpit-Kacheln */
}
.eta__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.eta__row--hint {
  color: var(--c-muted);
  font-size: 0.85rem;
}
.eta__main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.eta__icon {
  color: var(--c-accent);
  flex: 0 0 auto;
}
.eta__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.eta__title {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eta__sub {
  font-size: 0.8rem;
  color: var(--c-muted);
}
.eta__hint {
  min-width: 0;
}
.eta__share {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--c-accent);
  border-radius: 8px;
  cursor: pointer;
}
.eta__share:active {
  background: var(--c-bg);
}

/* --- Reservierung: wischbare Feldzeilen + bestehender Anhang (AB#225 §3–6) ------------------------- */
/* Eine wischbare Formularzeile fügt sich nahtlos in die Gruppen-Karte ein: die innere .ffield behält
   Trennlinie/Padding; die letzte Zeile der Karte ohne Trennlinie. */
.swipe--field {
  display: block; /* das <li> als normaler Block in der Karte (kein Listen-Marker/‑Einzug) */
}
/* Trennstrich wiederherstellen: die .ffield im Swipe-Container ist das letzte Kind, sonst greift die
   globale Regel `.ffield:last-child{border:none}` und die Trennlinie zur nächsten Zeile fehlt (AB#225). */
.swipe--field .ffield {
  border-bottom: 1px solid var(--c-border);
}
.ffield-group > .swipe--field:last-child .ffield {
  border-bottom: none;
}
.res-attach__existing:not(:empty) {
  margin: 8px 4px 0;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden; /* Wisch-Enthüllung an den runden Ecken beschneiden */
}
.res-attach__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--c-surface);
}
.res-attach__preview {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.res-attach__preview .filefield__img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}
.res-attach__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.res-attach__remove {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--c-muted);
  font: inherit;
  cursor: pointer;
}

/* Karten-Band: schwebt als Overlay unter der fixen Kopfleiste über der Vollbildkarte. */
.eta-overlay {
  position: fixed;
  top: calc(var(--appbar-h) + env(safe-area-inset-top) + 44px + 8px);
  left: 0;
  right: 0;
  z-index: 500;
  padding: 0 var(--gap);
  display: flex;
  justify-content: center;
  pointer-events: none; /* Karte darunter bleibt bedienbar; nur das Band selbst fängt Taps */
}
.eta--band {
  pointer-events: auto;
  width: 100%;
  max-width: 520px;
}
@media (min-width: 900px) {
  .eta-overlay {
    left: var(--sidebar-w);
  }
}