:root {
  color-scheme: light;
  --shell-surface: #f4f7fb;
  --surface: #ffffff;
  --surface-border: rgba(15, 23, 42, 0.05);
  --text: #0f172a;
  --muted: #475569;
  --accent: #3156d3;
  --accent-contrast: #f8faff;
}

/* =============================================================
   RIDYNC DESIGN SYSTEM v0.4 — Tokens (parallel zu bestehenden Styles)
   ============================================================= */
:root {
  /* Farben */
  --c-text:         #1a1613;
  --c-text-muted:   #55504a;
  --c-text-dim:     #8b857e;
  --c-bg:           #f8f6f1;
  --c-bg-elev:      #ffffff;
  --c-rule:         #e6e1d7;
  --c-rule-strong:  #c9c2b4;
  --c-accent:       #1e3a8a;
  --c-accent-soft:  #e6ebf5;
  --c-danger:       #8b1a1a;
  --c-danger-soft:  #f5e6e6;
  --c-success:      #0f5132;
  --c-success-soft: #e6f0ea;

  /* Schriften */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Spacing (4px-Basis) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Layout */
  --max-content: 720px;
}

/* =============================================================
   APP HEADER
   ============================================================= */
.app-header {
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-bg);
  position: sticky;
  top: 0;
  z-index: 3000;
  isolation: isolate;
}

.app-header-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 12px var(--sp-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.app-header .brand {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--c-text);
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  min-height: 0;
  width: auto;
  font-weight: normal;
  border-radius: 0;
}

.brand .brand-logo {
  display: block;
  height: 24px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
}

.nav-link {
  position: relative;
  padding: 4px 0;
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 500;
  background: transparent;
  border: none;
  min-height: 0;
  width: auto;
  border-radius: 0;
  cursor: pointer;
  transition: color 120ms ease;
}

.nav-link:hover { color: var(--c-text); background: transparent; }

.nav-link[aria-current="page"] { color: var(--c-text); }

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 2px;
  background: var(--c-text);
}

/* =============================================================
   USER MENU
   ============================================================= */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: none;
  min-height: 0;
  width: auto;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 500;
}

.user-menu-toggle:hover { color: var(--c-text); background: transparent; }

.user-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  flex-shrink: 0;
}

.user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-muted);
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-caret {
  font-size: 10px;
  color: var(--c-text-dim);
}

.user-menu .account-menu {
  top: calc(100% + 8px);
  right: 0;
}

.user-menu .secondary-button.account-menu-button {
  width: 100%;
  min-height: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(71, 85, 105, 0.88);
}

.user-menu .secondary-button.account-menu-button:hover {
  background: rgba(15, 23, 42, 0.04);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--c-bg);
  color: var(--text);
}

.shell {
  min-height: 100vh;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 0 16px 20px;
  overflow-x: hidden;
}

.card {
  width: min(100%, 440px);
  margin-top: 20px;
  padding: 28px 24px;
  overflow-x: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 24px;
  background: var(--shell-surface);
}

.auth-screen {
  max-width: 480px;
  padding-top: var(--sp-6);
}

.auth-tagline {
  font-size: 20px;
  font-weight: 500;
  color: var(--c-text);
  margin: var(--sp-4) 0 var(--sp-3);
  line-height: 1.3;
}

.auth-description {
  font-size: 15px;
  color: var(--c-text-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.auth-test-login {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border: 2px dashed #d97706;
  border-radius: 8px;
  background: #fffbeb;
}

.auth-test-login-banner {
  margin: 0 0 var(--sp-3);
  font-size: 14px;
  color: #92400e;
  line-height: 1.5;
}

.auth-test-login-banner strong {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #d97706;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-test-login-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.auth-test-login-buttons button {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 10px 14px;
  border: 1px solid #d97706;
  border-radius: 6px;
  background: #fff;
  color: #92400e;
  font-weight: 600;
  cursor: pointer;
}

.auth-test-login-buttons button:hover {
  background: #fef3c7;
}

.auth-test-login-buttons button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* =============================================================
   T146 — Public landing page (pre-login). Built entirely from the
   v0.4 design tokens so it reads as Ridync, not a separate site.
   Mobile-first; one wider breakpoint for the hero on desktop.
   ============================================================= */
.landing {
  padding-bottom: var(--sp-6);
}

.landing-hero {
  padding: var(--sp-3) 0 var(--sp-5);
  border-bottom: 1px solid var(--c-rule);
}

.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-3);
}

.landing-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
}

.landing-hero-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
}

/* The existing #auth-section lives inside the hero as the primary CTA.
   Neutralise its standalone max-width / top padding in this context. */
.auth-screen.landing-cta {
  max-width: none;
  padding-top: 0;
}

/* Landing: Google-Login als kompakter Header-CTA oben rechts. #auth-section
   behält alle IDs (setAuthState ist positionsunabhängig) — hier nur Position
   und Größe im Header. flex-wrap am Header verhindert H-Overflow auf Mobile. */
.app-header .landing-header-auth {
  margin-left: auto;
  max-width: none;
  padding-top: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
}

.app-header .landing-header-auth .form-status:empty {
  display: none;
}

.app-header .landing-header-auth #auth-status-message {
  margin: 0;
  font-size: 12px;
  text-align: right;
  max-width: 280px;
}

.landing-cta-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-muted);
  margin: var(--sp-3) 0 0;
  max-width: 42ch;
}

/* Atmosphärisches Hero-Motiv: Motorrad-Linienillustration als dezente Grafik
   unter Titel/Lead/CTA. Liegt im Fluss und ist breitenbegrenzt, damit sie
   nicht dominiert → kein Overlap, kein H-Overflow, CTA bleibt darüber sichtbar. */
.landing-hero-figure {
  margin: var(--sp-4) 0 0;
  display: flex;
  justify-content: center;
}

.landing-hero-illustration {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* Prozessgrafik im Abschnitt „So funktioniert Ridync": zentriert, breiten-
   begrenzt, damit sie die darunterliegenden Schritt-Karten nicht dominiert.
   width:100% + height:auto → skaliert sauber, kein horizontales Overflow. */
.landing-process-figure {
  margin: var(--sp-1) 0;
  display: flex;
  justify-content: center;
}

/* Grafik nutzt die volle Content-Breite. Sie trägt viel transparenten Rand
   oben/unten; object-fit: cover in einer flachen Box beschneidet diesen
   Leerraum (Grafik selbst unverändert), damit sie breit und flach sitzt. */
.landing-process-image {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 128 / 40;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.landing-section {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-rule);
}

.landing-section:last-of-type {
  border-bottom: none;
}

.landing-section--accent {
  background: var(--c-accent-soft);
  border-radius: 8px;
  padding: var(--sp-5);
  border-bottom: none;
  margin: var(--sp-5) 0;
}

.landing-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}

.landing-section-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-3);
}

.landing-section p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-3);
}

.landing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.landing-list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.landing-list li::before {
  content: "»";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: 600;
}

.landing-list strong {
  color: var(--c-text);
  font-weight: 600;
}

.landing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  counter-reset: landing-step;
}

/* Schlanke Vierer-Struktur statt großer Karten: greift die vier Punkte der
   Grafik als kompakte Label-+-Zeile auf, ohne Karten-Chrome. */
.landing-step {
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.landing-step-phase {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

.landing-step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
}

.landing-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.landing-step em {
  font-style: normal;
  font-weight: 500;
  color: var(--c-text);
}

.landing-note {
  font-size: 14px;
  color: var(--c-text);
  margin: var(--sp-4) 0 0;
  font-weight: 500;
}

.landing-nowrap {
  white-space: nowrap;
}

.landing-faq {
  display: grid;
  gap: var(--sp-2);
}

.landing-faq-item,
.landing-footer-item {
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-bg-elev);
}

.landing-faq-item > summary,
.landing-footer-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
}

.landing-faq-item > summary::-webkit-details-marker,
.landing-footer-item > summary::-webkit-details-marker {
  display: none;
}

.landing-faq-item > summary::after {
  content: "+";
  float: right;
  color: var(--c-text-dim);
  font-weight: 400;
}

.landing-faq-item[open] > summary::after {
  content: "–";
}

.landing-faq-item > p,
.landing-footer-item > p {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.landing-faq-item > summary:focus-visible,
.landing-footer-item > summary:focus-visible {
  outline: 3px solid var(--c-accent-soft);
  outline-offset: 2px;
  border-radius: 8px;
}

.landing-final-cta {
  text-align: center;
  padding: var(--sp-6) 0;
}

.landing-final-cta-text {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
}

.landing-final-cta-button {
  font-size: 15px;
  padding: 12px 24px;
}

.landing-footer {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--sp-4);
  margin-top: var(--sp-5);
}

.landing-footer-legal {
  display: flex;
  gap: var(--sp-4);
}

.landing-footer-link {
  font-size: 13px;
  color: var(--c-text-muted);
  text-decoration: none;
}

.landing-footer-link:hover {
  color: var(--c-text);
  text-decoration: underline;
}

.landing-footer-brand {
  margin: 0;
  line-height: 0;
}

.landing-footer-brand__logo {
  display: block;
  height: 22px;
  width: auto;
}

@media (min-width: 640px) {
  /* Hero als Einheit: Text links, Illustration rechts vertikal zentriert
     daneben (spannt alle Textzeilen), statt lose darunter. Kompaktes
     Top-Spacing, keine großen Weißflächen mehr. */
  .landing-hero {
    padding-top: var(--sp-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    column-gap: var(--sp-6);
    align-items: center;
  }

  .landing-eyebrow { grid-column: 1; grid-row: 1; }
  .landing-hero-title {
    grid-column: 1;
    grid-row: 2;
    font-size: 44px;
  }
  .landing-hero-lead {
    grid-column: 1;
    grid-row: 3;
    font-size: 18px;
    margin-bottom: 0;
  }

  .landing-hero-figure {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
    align-self: center;
    justify-content: center;
  }

  .landing-hero-illustration {
    max-width: 100%;
  }

  .landing-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }
}

.brand {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 1px;
  border: 0;
  background: transparent;
  text-align: left;
  line-height: 0;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.brand:hover {
  background: rgba(15, 23, 42, 0.035);
}

.brand:active {
  background: rgba(15, 23, 42, 0.08);
  transform: translateY(1px);
}

.brand:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.2);
  outline-offset: 3px;
  border-radius: 14px;
}

.page-context {
  display: grid;
  gap: 0;
  margin-top: 6px;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.05;
}

.page-context h1 {
  margin: 8px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  font-size: clamp(1.08rem, 3.9vw, 1.24rem);
  font-weight: 560;
  line-height: 1.16;
  color: rgba(15, 23, 42, 0.86);
}

.page-context-lifecycle-panel {
  display: grid;
  gap: 0;
  margin-top: 2px;
  padding: 0;
}

h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
}

.copy {
  margin: 0 0 24px;
  line-height: 1.6;
  color: var(--muted);
}

.copy-compact {
  margin-bottom: 16px;
}

.status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.status-compact {
  padding: 12px 0;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
}

.account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  display: grid;
  min-width: 132px;
  padding: 6px 0;
  border: 1px solid var(--c-rule-strong);
  border-radius: 8px;
  background: var(--c-bg-elev);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.account-row button,
.entry-panel-header button {
  width: auto;
}

.entry-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.entry-ride-list-header {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.entry-ride-list-header[data-mode="overview"] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.entry-primary-action {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding-top: 2px;
}

.entry-primary-action[data-mode="overview"] {
  justify-self: end;
  padding-top: 0;
}

.entry-primary-action[data-mode="overview"] .entry-actions {
  width: auto;
}

.entry-primary-action[data-mode="empty"] {
  /* WC-POLISH-05 (2026-05-21): in empty mode the page-header section
     reads as one continuous centered empty-state card together with
     `.ride-list-empty` below — message + button share one axis. */
  width: 100%;
  gap: 12px;
  padding: 18px 0 10px;
  justify-items: center;
}

.entry-primary-action[data-mode="empty"] .entry-actions {
  width: 100%;
}

.entry-empty-state-message {
  margin: 0 auto;
  max-width: 22rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

.entry-primary-action .copy {
  margin-bottom: 0;
}

.entry-primary-action #entry-create-ride-button {
  width: auto;
  /* WC-POLISH-05: in non-empty modes the default justify-self stays
     `start` (set inline below for the overview variant). Empty mode
     overrides this to `stretch` further down so the button takes the
     full card width on the centered axis. */
  justify-self: start;
  padding: 11px 15px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.entry-primary-action[data-mode="overview"] #entry-create-ride-button {
  padding: 8px 12px;
  border-color: rgba(49, 86, 211, 0.18);
  background: rgba(49, 86, 211, 0.08);
  color: var(--accent);
  font-size: 0.88rem;
}

.entry-primary-action[data-mode="empty"] #entry-create-ride-button {
  width: 100%;
  justify-self: stretch;
}

.entry-primary-action #entry-create-ride-button:hover {
  background: #2948b4;
  border-color: #2948b4;
}

.entry-primary-action[data-mode="overview"] #entry-create-ride-button:hover {
  background: rgba(49, 86, 211, 0.14);
  border-color: rgba(49, 86, 211, 0.24);
  color: var(--accent);
}

.create-ride-deadline-group {
  display: grid;
  gap: 8px;
  margin-top: -2px;
}

.entry-primary-action #entry-create-ride-button:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.18);
  outline-offset: 3px;
}

/* WC-POLISH-11 (2026-05-21): the rules above target `.entry-primary-action`
   (class selector), but the rendered DOM uses
   `<div id="entry-primary-action-section">` (ID selector). Class never
   matches → all of the rules above are dead, including the WC-POLISH-05
   empty-state centring. Fix here is minimal and targeted to the actual
   element: bring the page-header empty-state onto the same centred axis
   as the lower `.ride-list-empty` card. We do NOT touch the legacy
   class-based rules (those stay dead but harmless) — this round only
   adds the matching ID-scoped selectors. */
#entry-primary-action-section[data-mode="empty"] {
  /* WC-POLISH-17 (2026-05-21): the parent `.logbook-frame-head` is a
     flex row, so without an explicit width the section sits at its
     intrinsic content width and `text-align: center` on the child
     paragraph centres the text relative to that small width — visually
     still flush-left in the card. `width: 100%` makes the section span
     the flex track so the centred message lines up under the lower
     `.ride-list-empty` card. This was the real WC-POLISH-11 bug. */
  display: grid;
  width: 100%;
  gap: 12px;
  padding: 18px 0 10px;
  justify-items: center;
}
#entry-primary-action-section[data-mode="empty"] #entry-empty-state-message {
  margin: 0 auto;
  max-width: 22rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
#entry-primary-action-section[data-mode="empty"] #entry-create-ride-button {
  width: 100%;
  justify-self: stretch;
}

#ride-list-status {
  min-height: 0;
  margin: 0;
}

#ride-list-status:empty {
  display: none;
}

.ride-list-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0;
  align-content: start;
  justify-items: stretch;
}

.ride-list-empty {
  margin: 0;
}

.secondary-button.ride-list-segment-button {
  width: auto;
  padding: 7px 0 7px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
}

.secondary-button.ride-list-segment-button:not([data-active="true"]):hover {
  color: var(--text);
  background: transparent;
}

.secondary-button.ride-list-segment-button[data-active="true"] {
  border-bottom-color: var(--accent);
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

.secondary-button.ride-list-segment-button[data-active="true"]:disabled {
  cursor: default;
  opacity: 1;
}

.secondary-button.ride-list-segment-button:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 2px;
}

.ride-form {
  display: grid;
  gap: 16px;
  padding-top: 24px;
}

.ride-form-soft {
  gap: 18px;
  padding-top: 10px;
}

#ride-form.ride-form-soft {
  gap: 14px;
}

.ride-form-compact {
  padding-top: 8px;
}

.field {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--muted);
}

.field-hint {
  font-size: 0.85rem;
}

.field-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.create-ride-range-group,
.create-ride-target-group {
  gap: 12px;
}

.create-ride-target-group {
  gap: 10px;
}

.create-ride-range-label {
  display: inline-block;
  margin-bottom: 2px;
}

.schedule-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(110px, 0.9fr);
  gap: 10px;
  min-width: 0;
}

.schedule-input-field {
  display: grid;
  gap: 0;
  min-width: 0;
}

.schedule-input-control {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: var(--c-bg-elev);
  color: var(--text);
  font: inherit;
  line-height: 1.25;
}

.schedule-input-control-time {
  font-variant-numeric: tabular-nums;
}

.schedule-input-control:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 2px;
}

/* Placeholder typography across form inputs — keep it quiet. The example
 * text should read as a hint, not as content competing with the section
 * heading or filled value. */
.schedule-input-control::placeholder {
  color: var(--c-text-dim, #94a3b8);
  font-size: 13px;
  font-weight: 400;
  opacity: 1;
}

.schedule-input-field[data-invalid="true"] .schedule-input-control {
  border-color: rgba(185, 28, 28, 0.42);
  background: rgba(254, 242, 242, 0.92);
}

.schedule-input-field[data-same-day="true"] .schedule-input-control-date {
  background: rgba(250, 250, 249, 0.92);
  color: #57534e;
}

#ride-form .field input {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.96);
}

.create-ride-target-action-row {
  justify-content: flex-start;
}

.create-ride-target-action-row .inline-field-action {
  width: auto;
}

.create-ride-deadline-group .field-action-row {
  align-items: baseline;
}

.create-ride-deadline-group .create-ride-range-label {
  color: #64748b;
}

.create-ride-deadline-group .inline-field-action {
  width: auto;
  margin-left: auto;
  color: #64748b;
  font-size: 0.82rem;
}

.schedule-chip-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(110px, 0.9fr);
  gap: 10px;
  min-width: 0;
}

.schedule-chip {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  text-align: left;
}

.schedule-chip:hover {
  border-color: rgba(49, 86, 211, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(242, 246, 255, 0.95));
}

.schedule-chip:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 3px;
}

.schedule-chip[data-invalid="true"] {
  border-color: rgba(185, 28, 28, 0.22);
}

.schedule-chip[data-same-day="true"] {
  background: linear-gradient(180deg, rgba(250, 250, 249, 0.96), rgba(245, 245, 244, 0.9));
  color: #57534e;
}

.schedule-chip-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #64748b;
}

.schedule-chip-value {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--text);
}

.schedule-chip-time .schedule-chip-value {
  font-variant-numeric: tabular-nums;
}

.schedule-chip-control {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.schedule-chip-control-date {
  width: 100%;
  height: 100%;
}

.schedule-chip-control-time {
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.schedule-chip-control:focus-visible {
  outline: none;
}

.field-output {
  padding: 11px 13px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.35;
}

.field input,
.field select,
.field textarea,
button {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.field input,
.field select,
.field textarea {
  padding: 11px 13px;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.95rem;
  line-height: 1.35;
}

.field span,
.field legend {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
}

.field-primary input,
.field-primary textarea {
  min-height: 48px;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

.field-secondary {
  opacity: 0.9;
}

.field-secondary span {
  color: var(--muted);
}

.field-secondary textarea {
  min-height: 84px;
}

.star-rating-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.star-rating-field legend {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* WC-POLISH-15/18 (2026-05-21): token-aligned hero→form transition.
   The inter-section gap is set via the compound-selector rule further
   down (single-class `.creator-follow-up-form` was being overridden by
   the base `.ride-detail-card-sections` 14 px rule later in the file —
   that's why Round-3's gap edit never took effect). */
.creator-follow-up-form {
  padding-top: var(--sp-3);
}

.creator-follow-up-field-header {
  align-items: baseline;
  gap: 12px;
}

/* Sign-off cleanup: .creator-follow-up-route-mode-group entfernt (Tab-Shell weg). */

.creator-follow-up-field textarea {
  min-height: 88px;
}

.creator-follow-up-rating-row-primary {
  padding-bottom: 2px;
}

.creator-follow-up-subsection-heading {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.creator-follow-up-star-rating {
  justify-self: start;
  flex-wrap: nowrap;
  gap: 4px;
}

.creator-follow-up-star-rating label {
  min-width: 2rem;
  padding: 9px 10px;
  border-radius: 999px;
  font-size: 1rem;
}

.creator-follow-up-form #creator-follow-up-submit-button {
  margin-top: 4px;
}

/* Creator-Follow-up: UI-Stabilization-Pass.
   Eine klare Section-Trennung (über .ride-detail-inline-section
   border-top), kein doppelter Divider, Sterne linksbündig,
   Action-Bar konsistent zum form-actions-Pattern. */
.creator-follow-up-form .section,
.participant-rating-form .section {
  /* Step 10Q: extend the WC reset to the participant form so its
     sections share the same compact vertical rhythm. */
  margin-top: 0;
}
/* Step 10R: Gesamtbewertung-Sterne der Participant-Form richten sich
   jetzt linksbündig unter dem Section-Heading aus — analog zur
   Creator-Form. Das .ride-detail-inline-section-Grid (Step 10Q) sortiert
   die Sterne sonst auf die Wert-Achse rechts neben "erforderlich". */
.participant-rating-form .ride-detail-inline-section .star-rating {
  justify-self: start;
}
/* Section-Header dichter am Inhalt — Spacing nochmals halbiert. */
.creator-follow-up-form .section-header,
.participant-rating-form .section-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2px;
}
/* Form-Elemente innerhalb der Sections direkt am Header.
   WC-POLISH-26 (2026-05-21): `.tab-shell` added to the list — the
   Gefahrene Route section wraps its tabs in `.tab-shell`, not bare
   `.tab-group`, so the previous rule never applied and the base
   `.tab-shell { margin: 12px 0 16px }` left a 12 px gap between the
   section title and the tab strip. The canonical workspace rhythm is
   2 px below the section title; pinning `.tab-shell` here brings the
   route section into line with Titel / Beschreibung. */
.creator-follow-up-form .section > .form-field,
.creator-follow-up-form .section > .chip-toggle-group,
.creator-follow-up-form .section > .tab-group,
.creator-follow-up-form .section > .tab-shell,
.creator-follow-up-form .section > .form-field + .form-field,
.creator-follow-up-form .section > .chip-toggle-group + .form-hint,
.creator-follow-up-form .section > .tab-group + .form-hint,
.creator-follow-up-form .section > .form-hint + .form-field {
  margin-top: 2px;
}
/* WC-POLISH-26 (2026-05-21): `.tab-shell` margin-bottom is wasted as
   the last child of a creator-follow-up section — the parent grid
   gap (`var(--sp-3)`) already separates this section from the next.
   Margins in a grid container do NOT collapse with grid gap, so the
   base 16 px stacked on top of the 12 px gap, producing 28 px between
   the route section content and the Bewertung section header. Zero
   it out so only the canonical grid gap applies. */
.creator-follow-up-form .section > .tab-shell:last-child {
  margin-bottom: 0;
}
/* T159: `:not(.leaflet-marker-icon)` is load-bearing, not cosmetic. This rule
   clamps in-form section elements that carry an inline `margin-top` to 2px. The
   `[style*="margin-top"]` attribute match also catches Leaflet's marker icons —
   their root carries inline `margin-top: -34px; margin-left: -14px` as the icon
   ANCHOR mechanism (anchor = −margin). Overriding margin-top to 2px shoved the
   highlight-capture pin ~36px below the route (vertical only; margin-left was
   untouched, so the offset read as "correct on vertical roads, beside on
   horizontal"). Excluding the marker lets Leaflet's inline anchor win again. */
.creator-follow-up-form .section [style*="margin-top"]:not(.leaflet-marker-icon) {
  margin-top: 2px !important;
}
/* WC-POLISH-25 (2026-05-21): Round-4 intended to reset every in-form
   `.ride-detail-inline-section` padding-top to 0 so the parent grid
   `gap: var(--sp-3)` (WC-POLISH-18 compound rule) is the single source
   of inter-section spacing. The reset at `.creator-follow-up-form
   .ride-detail-inline-section { padding-top: 0 }` was masked by this
   higher-specificity selector still applying `var(--sp-2)`. Every form
   section carries both `.section` and `.ride-detail-inline-section`,
   so this compound rule wins (0,3,0 vs 0,2,0). Setting it to 0 here
   matches Round 4's stated intent and removes the redundant 8 px ×
   4 sections of internal padding (~32 px) without touching the form
   grid gap or the Bewertung transition. */
.creator-follow-up-form .section.ride-detail-inline-section {
  padding-top: 0;
}
/* Step 10Q: extend the WC-POLISH-25 padding reset to the participant
   form so the first section starts flush with the state-zone divider,
   matching the creator's vertical rhythm. Kept as a sibling rule (not
   merged via comma) so the existing WC-POLISH-25 selector regex stays
   intact. */
.participant-rating-form .section.ride-detail-inline-section {
  padding-top: 0;
}

/* === Shared rating-component layout (Creator + Participant editable).
   :not(.star-rating-readonly) schützt Tour-Detail-Aggregate und
   Mine-View, die identische Klassen, aber readonly-Rendering haben. */
.creator-follow-up-form .star-rating:not(.star-rating-readonly),
.participant-rating-form:not(.tour-detail-rating-readonly) .star-rating:not(.star-rating-readonly) {
  justify-content: flex-start;
  margin-left: 0;
  margin-top: var(--sp-1);
  gap: 4px;
  align-items: center;
}
.creator-follow-up-form .sub-rating,
.participant-rating-form:not(.tour-detail-rating-readonly) .sub-rating {
  /* WC-POLISH-22 (2026-05-21): margin-bottom: var(--sp-1) → 0. The
     parent `.creator-follow-up-form.ride-detail-card-sections` grid
     already gaps sections via var(--sp-3); the sub-rating only needs
     its internal 2 px label-to-stars gap, not an additional 4 px below.
     The Bewertung block ends with the last sub-rating; the next section
     gap takes over from there. */
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  gap: 2px;
}
.creator-follow-up-form .sub-rating > .form-field-label,
.participant-rating-form:not(.tour-detail-rating-readonly) .sub-rating > .form-field-label {
  margin-bottom: 2px;
}
.creator-follow-up-form .star-rating:not(.star-rating-readonly) label,
.participant-rating-form:not(.tour-detail-rating-readonly) .star-rating:not(.star-rating-readonly) label {
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
/* Primary Gesamt-Reihe minimal größer für klare Hierarchie.
   :not(.star-rating-readonly) am Primary-Selektor angeglichen, damit
   die Spezifität (0,3,1) der Broad-Sub-Regel nicht gewinnt. */
.creator-follow-up-form .creator-follow-up-star-rating-primary:not(.star-rating-readonly) label,
.participant-rating-form:not(.tour-detail-rating-readonly) .participant-rating-primary:not(.star-rating-readonly) label {
  min-width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
}
/* Justify-self only used in creator (form is grid). */
.creator-follow-up-form .sub-rating .star-rating,
.creator-follow-up-form .creator-follow-up-star-rating {
  justify-self: start;
}

/* "Optionale Details"-Label — shared mit Participant-Form, ersetzt
   den alten .optional-divider. Gleiche zarte Caps-Optik in beiden. */
.creator-follow-up-form .rating-optional-label,
.participant-rating-form .rating-optional-label {
  /* WC-POLISH-22 (2026-05-21): top + bottom margin reduced from
     var(--sp-2)/var(--sp-1) to var(--sp-1)/0 so the "Optionale Details"
     caps label sits closer to the primary rating above and to the first
     sub-rating below.
     WC-POLISH-23 (2026-05-21): typography aligned with the canonical
     small-cap helper-label family (10.5 px / 0.08em / no opacity) used
     by `.party-label` + `.stable-wann-label`. Caps still reads as a
     sub-section break thanks to the uppercase + letter-spacing. */
  margin: var(--sp-1) 0 0;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Action-Bar formularnah: kein Card-Look, nur eine Hairline.
   Buttons als horizontale Reihe (Cancel links, Primary rechts) auf
   voller Breite, Hinweistext darunter linksbündig.
   Wichtig: !important auf den Layout-kritischen Properties, damit
   die Reihe robust gegen evtl. hereinkommende globale .form-actions-
   Regeln ist (defensive Maßnahme nach Production-Smoke-Befund). */
/* Step 6 (State-Card Consolidation): die ruhige Inline-State-Zone.
   Bewusst KEINE Card-Optik (kein Hintergrund, kein Schatten, kein Rahmen),
   nur eine Typografie-Hierarchie. Statuszeile = kleines Eyebrow, Kontextzeile
   = Body-Text, Summary = kompakte dl. Eine Trennlinie unter der Zone, um sie
   visuell vom darauffolgenden Form/Action-Bar abzusetzen. */
.post-ride-state {
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--c-rule);
}
.post-ride-state-status {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.post-ride-state-context {
  margin: var(--sp-1) 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text);
}
/* Nachrangiger Verwaltungsbereich der Nachbereitung: Mitgefahren und
   Treffpunkt gehören fachlich zusammen, bleiben aber ruhiger als Erinnerung,
   Bewertung und Entdecken-Auftritt. */
.post-ride-context-strip {
  margin: var(--sp-2) 0 0;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--post-ride-surface-border, var(--c-rule));
  border-radius: var(--post-ride-surface-radius, 16px);
  background: var(--post-ride-surface-bg, var(--c-bg));
  box-shadow: var(--post-ride-surface-shadow, 0 8px 22px rgba(26, 22, 19, 0.04));
}
.post-ride-context-title {
  margin: 0 0 8px;
  color: var(--c-text-muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}
.post-ride-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}
.post-ride-context-row {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(230, 225, 215, 0.86);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.34);
}
.post-ride-context-row dt {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: 600;
}
.post-ride-context-row dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--c-text);
}
/* Long external route URLs (Discover "Link" context row) must wrap inside the
   cell rather than overflow it. */
.post-ride-context-row dd a {
  overflow-wrap: anywhere;
}

.post-ride-route-legacy-hint {
  margin: 4px 0 0;
  color: var(--c-text-muted);
}
.post-ride-route-state-hint {
  margin: 2px 0 var(--sp-2);
  max-width: 48rem;
}
#post-ride-route-gpx-file-status[data-carry-over="true"] {
  color: var(--c-text);
}

/* Mitgefahren bleibt editierbar, ist aber Teil des nachrangigen
   Organisatorisches-Blocks und nutzt daher dieselbe ruhige Label-Grammatik
   wie Treffpunkt. */
.post-ride-context-row#post-ride-context-participants-row {
  display: grid;
}
#post-ride-context-participants-row dt {
  display: block;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
#post-ride-context-participants-row dd {
  display: block;
  margin: 0;
}

/* Step 10P/10Q: participant readonly context mirror. The host uses
   `display: contents` (when visible) so its inner readonly sections
   become direct grid children of the participant form, matching the
   creator's vertical rhythm exactly. The native [hidden] behavior is
   preserved via `:not([hidden])`. */
.participant-context-summary:not([hidden]) {
  display: contents;
}
/* Step-Parity (10S): the readonly value renders inside the same
   `.form-field` wrapper the creator uses — no separate readonly
   grammar. Typography matches the creator's `.form-input` text
   (14px / 1.5 / ink). */
.form-readonly-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
  white-space: pre-wrap;
}
.form-readonly-value--title {
  font-size: 16px;
  font-weight: 500;
}
/* Pending hint (e.g. participant waiting for the creator to finalize the
   follow-up): calm + muted so it reads as a status, not a settled value. */
.form-readonly-value--pending {
  color: var(--c-text-muted, #6b7280);
  font-style: italic;
}

/* Step 10D/10S: Mitgefahren-Liste nutzt das kanonische identity-row-
   Pattern (Name + Mail). Der × sitzt direkt neben der Email-Spalte
   und gehört visuell zur Zeile (kein flex:auto-Push ans Zeilenende).
   Bei data-excluded=true dimmt die ganze Zeile und der Name wird
   durchgestrichen. */
.post-ride-participants .party-rows,
.participant-context-summary .party-rows {
  gap: 2px;
}
.post-ride-participant-row {
  align-items: center;
}
.post-ride-participant-row .identity-row-content--creator {
  /* The toggle is appended as a third grid cell (see
     renderPostRideParticipantsRow). Collapse the email column to
     max-content so the × sits immediately next to the email instead
     of being pushed to the row's far edge. */
  grid-template-columns: minmax(120px, max-content) max-content max-content;
  align-items: center;
}
.post-ride-participant-row[data-excluded="true"] {
  opacity: 0.55;
}
.post-ride-participant-row[data-excluded="true"] .identity-row-name {
  text-decoration: line-through;
}
/* Audit-Parity (2026-05-28): the toggle no longer inflates the row.
   Its box is sized to the email text's line-height (1.2em ≈ 13px),
   so a baseline-aligned grid cell can't push the row above the
   identity-row content. The `min-height: 0` + `font-weight: 400`
   overrides defeat the global `button { padding: 14px 16px;
   min-height: 44px; font-weight: 700 }` declaration at styles.css:1786
   that would otherwise force a 44 px-tall button and inflate every
   participant row to 44 px. Hover affordance via background only. */
.post-ride-participant-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: baseline;
}
.post-ride-participant-toggle:hover {
  background: var(--c-rule);
  color: var(--c-text);
}
@media (max-width: 600px) {
  .post-ride-context-row dd {
    margin-bottom: 2px;
  }
}

/* Step 10A: Post-Ride-Route-Block teilt das `.route-add`-Vokabular mit dem
   Create-Flow. Diese Section überschreibt nichts an der globalen
   `.route-add`-Optik — sie ergänzt nur die ruhige Distanz-Zeile, die im
   Create-Flow nicht existiert. */
.post-ride-route-block #post-ride-route-block {
  margin-top: 4px;
}
.post-ride-route-distance {
  margin-top: var(--sp-3);
}
.post-ride-route-distance .form-input {
  max-width: 12rem;
}

/* Step 7.5: substantive completed-state summary. Vertikal gestapelt — keine
   gequetschte zweispaltige Label/Wert-Tabelle mehr. Visuelle Verwandtschaft
   zum Discover-Tour-Detail (Charakter-Block + readonly Stars) ist gewollt:
   Eyebrow-Kicker, italic Serif-Werte, gleiche Sternchips. */
.post-ride-state-summary {
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.post-ride-state-title {
  margin: 0;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--c-text);
}
.post-ride-state-eyebrow {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted, var(--discover-muted));
  font-weight: 600;
}
.post-ride-state-rating-row {
  display: block;
}
.post-ride-state-stars {
  /* data-size="compact" — gleiche Sternchip-Optik wie Tour-Detail,
     etwas kleiner für die ruhige Inline-Zone. */
  gap: 4px;
}
.star-rating[data-size="compact"] label,
.star-rating-readonly[data-size="compact"] label {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.95rem;
}

/* Post-Ride Character-Block. Visuell mit dem Tour-Detail-Block verwandt
   (Eyebrow + italic Wert in zweispaltigem Grid auf Desktop), bewusst als
   eigene Klasse — keine semantische Vermischung mit dem Discover-Screen. */
.post-ride-character-block {
  margin: 0;
  padding: 0;
}
.post-ride-character-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px 24px;
  grid-template-columns: minmax(0, 1fr);
}
.post-ride-character-block[data-layout="grid"] .post-ride-character-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-ride-character-item {
  display: grid;
  /* 4px (was 1px): the 11px uppercase dimension eyebrow needs clear air
     above the 1.1rem italic serif value so the two read as label→value,
     not a single block. 1px was an outlier against the surface's standard
     meta rhythm; the larger type-size jump here warrants a touch more. */
  gap: 4px;
  min-width: 0;
}
.post-ride-character-dimension {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted, var(--discover-muted));
  font-weight: 600;
}
.post-ride-character-value {
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--c-text);
}

/* Polish-Audit (2026-05-28): Discover CTA belongs to the state-zone as a
   natural outcome of the completed post-ride flow. It is styled as a
   directional text-CTA (arrow + label) rather than a free-floating inline
   text link. The arrow comes from a `::before` so the surrounding text
   line-height controls vertical alignment. No secondary button bar — the
   CTA stays a text-link in spirit, just visually anchored. */
.post-ride-state-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--sp-2);
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-accent, #3156d3);
  text-decoration: none;
}
.post-ride-state-link::before {
  content: "→";
  font-weight: 400;
}
.post-ride-state-link:hover,
.post-ride-state-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: Single-Column Stacking statt 2-Spalten-Grid. */
@media (max-width: 600px) {
  .post-ride-state-title {
    font-size: 1.35rem;
  }
  .post-ride-character-block[data-layout="grid"] .post-ride-character-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 0;
  }
}

/* Post-Ride Action-Bar. `.post-ride-action-bar` is the canonical class shared
   by Creator und Participant; `.creator-follow-up-action-bar` bleibt als Alias
   für bestehende Selektoren erhalten. */
.creator-follow-up-action-bar,
.post-ride-action-bar {
  display: block;
  width: 100%;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) 0 0;
  background: none;
  border: none;
  border-top: 1px solid var(--c-rule);
  border-radius: 0;
}
.creator-follow-up-action-bar .form-actions,
.post-ride-action-bar .form-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: space-between !important;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  gap: var(--sp-2);
}
.creator-follow-up-action-bar .btn-ghost,
.creator-follow-up-action-bar .btn-primary,
.post-ride-action-bar .btn-ghost,
.post-ride-action-bar .btn-primary {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
}
.creator-follow-up-action-bar .action-note,
.post-ride-action-bar .action-note {
  display: block;
  width: 100%;
  margin: var(--sp-2) 0 0;
  font-size: 11px;
  color: var(--c-text-muted);
  text-align: left;
  line-height: 1.4;
}
/* Step-Parity (10S): participant has a single primary CTA, but the
   primary must sit on the same right edge it occupies on the creator
   surface (space-between puts the primary at the right when paired
   with Abbrechen on the left). The container structure, padding, and
   border-top are unchanged. */
.post-ride-action-bar[data-action-role="participant"] .form-actions {
  justify-content: flex-end !important;
}

/* GPX-Datei-Input optisch an Button-Stil annähern: gleiche Höhe,
   gleiche Font-Size, dezenter Rahmen, kein Browser-Default-Look.
   Creator-only — der Picker existiert in dieser Form-Variante. */
#creator_follow_up_gpx_file {
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1;
  padding: 0;
  border: none;
  background: none;
}
#creator_follow_up_gpx_file::file-selector-button {
  height: 36px;
  padding: 0 14px;
  margin-right: var(--sp-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
#creator_follow_up_gpx_file::file-selector-button:hover {
  background: var(--c-bg-elev);
  border-color: var(--c-text-muted);
}

/* Slice 2 (Map-first Reorder): the guidance block was removed; the hero map now
   leads the creator form. The first form section sits flush under the identity
   hero — no divider line, the hero's own bottom margin provides the gap — so the
   map reads as the first dominant element, not as a new card below a rule. */
.creator-follow-up-form .ride-detail-inline-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Top-Bereich: deutlich verdichtet — Hero/Lifecycle/Intro
   rücken zusammen, kein großer Leerraum vor dem Form. */
#post-ride-follow-up-task-screen .post-ride-follow-up-lifecycle {
  margin-bottom: var(--sp-2);
}
#post-ride-follow-up-task-screen .ride-hero {
  padding-bottom: 0;
  margin-bottom: var(--sp-2);
  border-bottom: none;
}
#post-ride-follow-up-task-screen .hero-kicker {
  margin-bottom: var(--sp-1);
}
#post-ride-follow-up-task-screen .hero-date {
  font-size: 28px;
  margin-bottom: var(--sp-1);
}
#post-ride-follow-up-task-screen .hero-time {
  margin-bottom: var(--sp-1);
}
#post-ride-follow-up-task-screen .hero-meta {
  margin-top: var(--sp-2);
}
#creator-follow-up-section .intro-text {
  margin-top: 0;
  margin-bottom: var(--sp-1);
}
#creator-follow-up-section .intro-text + .intro-text {
  margin-bottom: var(--sp-3);
}
/* Form rückt direkt an Intro heran.
   WC-POLISH-22 (2026-05-21): one-step tighter (var(--sp-2) → var(--sp-1))
   so the form sits closer to the post-ride hero/intro. The base form
   rule keeps padding-top: var(--sp-3); this ID-scoped override wins
   only when the form is rendered inside #creator-follow-up-section. */
#creator-follow-up-section .creator-follow-up-form {
  padding-top: var(--sp-1);
}

@media (max-width: 480px) {
  .creator-follow-up-form {
    gap: 12px;
  }

  .creator-follow-up-star-rating label {
    min-width: 1.85rem;
    padding: 9px 8px;
  }
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.star-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.star-rating label {
  width: auto;
  min-width: 2.5rem;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.star-rating input:checked + label {
  border-color: rgba(212, 161, 23, 0.36);
  background: rgba(255, 247, 214, 0.96);
  color: #b7791f;
  box-shadow: 0 10px 24px rgba(212, 161, 23, 0.14);
}

.star-rating label[data-active="true"] {
  border-color: rgba(212, 161, 23, 0.36);
  background: rgba(255, 247, 214, 0.96);
  color: #b7791f;
  box-shadow: 0 10px 24px rgba(212, 161, 23, 0.14);
}

.star-rating label:hover {
  transform: translateY(-1px);
  border-color: rgba(49, 86, 211, 0.18);
  color: #3156d3;
}

.star-rating-readonly {
  pointer-events: none;
}

.star-rating-readonly label,
.star-rating-readonly label:hover {
  cursor: default;
  transform: none;
  pointer-events: none;
  border-color: rgba(15, 23, 42, 0.08);
  color: #cbd5e1;
  /* Force the chip to a real circle: equal width/height with no asymmetric
     padding. Without this the interactive star pill (min-width 2.5rem +
     10/12 px padding) carries through to the readonly view and reads as
     an oval ("eierig") because border-radius: 999px on a non-square box
     produces a stadium shape, not a circle. */
  min-width: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.star-rating-readonly label[data-active="true"] {
  border-color: rgba(212, 161, 23, 0.36);
  background: rgba(255, 247, 214, 0.96);
  color: #b7791f;
  box-shadow: 0 10px 24px rgba(212, 161, 23, 0.14);
}

/* Discover v4 — public rating summary in the "Gefahrene Route" header.
   The header reuses the canonical `.section-header` grammar (same subtle
   hairline + rhythm as the "Zusätzliche Hinweise" header), so the heading sits
   left and a compact star + count summary sits right. This is the ONLY rating
   surface in Discover: public-only, no Alle/Meine tabs, no personal view, no
   per-trait rows. Stars reuse the shared readonly primitive at the compact
   size — the same chips as the Entdecken list card. Personal rating lives in
   the Logbuch.
   `.section-header` already owns the flex/space-between/baseline layout; this
   hook only keeps the rating cluster from shrinking and neutralises the route
   eyebrow's own bottom margin (redundant inside the header row, and it would
   offset baseline alignment). */
.tour-detail-route-card .tour-detail-route-header .section-title {
  margin-bottom: 0;
}

.tour-detail-route-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Author-level rule beats the low-specificity UA `[hidden]` so the summary
   truly collapses when there is no public rating (e.g. curated tours). */
.tour-detail-route-rating[hidden] {
  display: none;
}

/* Shared flat readonly-star variant (`data-appearance="flat"`) — quiet star
   optics for Discover read contexts: the tour-detail route header and the
   Entdecken list card. Flattens the shared readonly chip into small inline
   glyphs — no pill box, no fill, no border, no shadow — with a muted amber for
   rated stars and a faint neutral for the rest. The gold-chip
   `.star-rating-readonly` default stays untouched and remains the optic for
   Logbuch / Nachbereitung. */
.star-rating-readonly[data-appearance="flat"] {
  gap: 2px;
}
.star-rating-readonly[data-appearance="flat"] label,
.star-rating-readonly[data-appearance="flat"] label:hover {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--c-rule-strong, #c9c2b4);
}
.star-rating-readonly[data-appearance="flat"] label[data-active="true"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #b7791f;
}

/* Parenthesised public rating_count only. The word "Bewertungen" is
   intentionally omitted; the Entdecken list card already spells it out. */
.tour-detail-route-rating-count {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

button {
  padding: 14px 16px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.form-status {
  min-height: 1.5rem;
  margin: 16px 0 0;
  color: var(--muted);
}

.form-status[data-state="error"] {
  color: #b91c1c;
}

.form-status[data-state="success"] {
  color: #15803d;
}

/* Pilot Access Request — shown on the landing/sign-in surface only after the
   closed-pilot gate denies a sign-in (toggled by app.js). */
.pilot-access-request {
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
  text-align: left;
}

.pilot-access-request-form {
  display: grid;
  gap: 8px;
}

.pilot-access-request-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.pilot-access-request textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border, #d8d2c4);
  border-radius: 8px;
  resize: vertical;
}

/*
 * Mode-switch tabs (single-active, single-row). Used by the Creator
 * Follow-up "Gefahrene Route" picker. See DESIGN.md "Mode-switch inputs".
 *
 * Real tab pattern: a 1px divider runs the width of the bar; each tab
 * has a 2px transparent bottom border that overlays the divider via
 * `margin-bottom: -1px`. The active tab swaps that border to a solid
 * dark colour so it reads as a single, clean underline aligned with
 * the divider — no floating bar, no pill, no shadow.
 */
/*
 * Tab control — `tab-shell` wraps the strip + the active pane. The
 * shell is a single muted-grey surface; the active tab adopts the
 * surface white and the active pane sits on the same white. Together
 * they read as one connected "selected" surface flowing from tab into
 * content. No borders, no shadows, no pills — the visual cohesion
 * comes from shared background tones only.
 */
.tab-shell {
  margin: 12px 0 16px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.03);
  overflow: hidden;
}
.tab-shell .tab-panes {
  background: #ffffff;
  padding: 14px 14px 16px;
}
.tab-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.tab-group .tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 12px 8px;
  margin: 0 0 -1px;            /* sit on the strip's bottom hairline */
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted, #6b7280);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  transition: color 120ms, background-color 120ms, border-color 120ms;
}
.tab-group .tab:hover {
  color: var(--c-text, #111827);
}
.tab-group .tab:focus-visible {
  outline: 2px solid var(--c-accent, #3156d3);
  outline-offset: -2px;
}
.tab-group .tab[aria-selected="true"],
.tab-group .tab[aria-pressed="true"] {
  color: var(--c-text, #111827);
  font-weight: 600;
  background: #ffffff;
  /* Active tab "opens" into the white pane: its white border-bottom
     erases the strip's hairline at this column, so there is no
     visible line between the active tab and the content below. */
  border-bottom-color: #ffffff;
  box-shadow: none;
}

/*
 * Hero — discover identity. Title is the primary heading; date+time
 * combine into a single secondary line. See DESIGN.md "Ride
 * Information Architecture".
 */
.ride-hero .hero-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--c-text, #111827);
}
.ride-hero .hero-title:empty { display: none; }
.ride-hero .hero-meta-line {
  margin: 4px 0 0;
  color: var(--muted, #6b7280);
  font-size: 0.95rem;
}
.ride-hero .hero-meta-line:empty { display: none; }

/* Lightweight inline disclosure for secondary ride metadata. */
.ride-meta-disclosure {
  margin: 10px 0 0;
  font-size: 0.9rem;
}
.ride-meta-disclosure > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted, #6b7280);
  padding: 4px 0;
  user-select: none;
}
.ride-meta-disclosure > summary::-webkit-details-marker { display: none; }
.ride-meta-disclosure > summary::after {
  content: " ▾";
  font-size: 0.85em;
}
.ride-meta-disclosure[open] > summary::after { content: " ▴"; }
.ride-meta-disclosure > summary:hover { color: var(--c-text, #111827); }
.ride-meta-disclosure .hero-meta { margin-top: 6px; }

/* WC-POLISH-02 (2026-05-21): the `.discover-intro` helper paragraph
   ("Diese Informationen werden im Entdecken-Bereich angezeigt.") was
   implementation-context copy, not user-meaningful framing. Both the
   markup ([index.html] creator-follow-up-section) and this rule were
   retired during the Workspace Consistency Polish Pass. The original
   metadata→content hairline divider it carried is unnecessary — the
   form-section headings already separate hierarchy via typography. */

/*
 * Inside the Creator Follow-up form: drop the generic horizontal
 * `border-top` divider between sections. Hierarchy comes from
 * typography weight + whitespace; the tab control is the only
 * structural divider in the form.
 *
 * WC-POLISH-18 (2026-05-21): the literal `padding-top: 4px` on every
 * in-form section stacked on top of the parent grid `gap`, producing
 * an effective 14 + 4 = 18 px between sections. Padding-top is reset
 * to 0 so the grid `gap` is the only spacing source — cumulative gaps
 * are gone.
 */
.creator-follow-up-form .ride-detail-inline-section {
  border-top: 0;
  padding-top: 0;
}
/* WC-POLISH-18 (2026-05-21): the compound-class rule that overrides the
   base `.ride-detail-card-sections { gap: 14px }` lives further down in
   this file (search for `compound-selector override`) — it has to sit
   AFTER the base rule so that JSDOM-based tests, which sort by source
   order rather than CSS specificity, pick it up. Real browsers respect
   specificity and apply the compound rule regardless of order. */

/* Bewertung starts as the next workflow step. Whitespace + heading hierarchy carry
   the transition; no extra hairline, so Mitgefahren is not trapped between rules. */
.creator-follow-up-form .ride-detail-inline-section[aria-labelledby="creator-follow-up-overall-heading"] {
  margin-top: var(--sp-3);
  padding-top: 0;
  border-top: 0;
}

/* Sub-rating row label inside the Bewertung section. */
.creator-follow-up-form .rating-row-label {
  margin: 0 0 4px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted, #6b7280);
}

/*
 * Star-rating polish for the Creator Follow-up form: large enough to
 * tap comfortably on mobile, light enough to stay restrained. No
 * border / no background — interactivity comes from size + colour.
 */
.creator-follow-up-form .star-rating { gap: 2px; }
.creator-follow-up-form .star-rating label {
  min-width: 48px;
  min-height: 48px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #d1d5db;
  font-size: 1.9rem;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: color 120ms, transform 120ms, background-color 120ms;
}
.creator-follow-up-form .star-rating label:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  transform: none;
  border: 0;
}
.creator-follow-up-form .star-rating label[data-active="true"],
.creator-follow-up-form .star-rating input:checked + label {
  color: #f59e0b;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.creator-follow-up-form .star-rating input:focus-visible + label {
  outline: 2px solid var(--c-accent, #3156d3);
  outline-offset: 2px;
}

/*
 * Desktop / tablet (≥768px): place sub-rating row label inline with
 * its stars — Gesamt / Landschaft / Fahrspaß / Stopps line up. Mobile
 * keeps the stacked layout for touch comfort.
 */
@media (min-width: 768px) {
  /* Audit-Parity (2026-05-28): the participant form joins this inline
     sub-rating layout so its Tourcharakter rhythm matches the creator
     exactly — same first-row top offset, same row height, same label
     alignment. Without this, the participant rendered each trait as a
     stacked label-over-buttons block which sat ~24 px tighter than the
     creator and broke the first-trait-row offset parity. */
  .creator-follow-up-form .sub-rating,
  .participant-rating-form:not(.tour-detail-rating-readonly) .sub-rating {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
    margin-top: 4px;
  }
  .creator-follow-up-form .sub-rating > .form-field-label,
  .creator-follow-up-form .sub-rating > label.form-field-label,
  .participant-rating-form:not(.tour-detail-rating-readonly) .sub-rating > .form-field-label,
  .participant-rating-form:not(.tour-detail-rating-readonly) .sub-rating > label.form-field-label {
    margin: 0;
    align-self: center;
    color: var(--muted, #6b7280);
    font-weight: 500;
  }
  .creator-follow-up-form .rating-row-label {
    display: inline-block;
    margin: 0 16px 0 0;
    min-width: 124px;
    vertical-align: middle;
    font-weight: 500;
  }
  .creator-follow-up-form
    .ride-detail-inline-section[aria-labelledby="creator-follow-up-overall-heading"]
    > .star-rating-field,
  .creator-follow-up-form
    .ride-detail-inline-section[aria-labelledby="creator-follow-up-overall-heading"]
    > .creator-follow-up-star-rating-primary {
    /* Keep Gesamt label + stars on one line on desktop. */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }
}

/*
 * Reference context-list pattern (Ziel / Teilnehmer etc.). See DESIGN.md
 * "Context List Typography".
 */
.context-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0;
}
.context-list dt {
  color: var(--muted, #6b7280);
  font-size: 0.875rem;
  font-weight: 400;
}
.context-list dd {
  margin: 0;
  color: var(--c-text, #111827);
  font-size: 1rem;
  font-weight: 400;
}

.form-field-error {
  display: block;
  margin: 6px 0 0;
  color: #b91c1c;
  font-size: 0.875rem;
  line-height: 1.3;
}

/*
 * Toast positioning rule (see DESIGN.md "UI Core Patterns (V1)"):
 *   - Bottom-anchored on both viewports. Mobile = bottom-center
 *     snackbar; desktop ≥ 768 px = bottom-right corner. Toasts are
 *     reserved for technical/global errors (network / 5xx); success
 *     is confirmed in-place by the success card and never duplicated
 *     by a toast.
 *
 * Visual style: light surface, dark text, subtle left accent. The
 * toast must read as a system message, not as a coloured block
 * overlay.
 */
.toast-container {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  top: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: center;          /* bottom-center on every viewport */
  pointer-events: none;
  z-index: 1000;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .toast-container {
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

.toast {
  pointer-events: auto;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px 10px 16px;
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  font-size: 0.92rem;
  line-height: 1.4;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
  animation: toast-in 180ms ease-out;
  cursor: pointer;
}

.toast[data-variant="success"] {
  border-left-color: #16a34a;
  color: #064e3b;
}

.toast[data-variant="error"] {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #dc2626;
  color: #7f1d1d;
}

.toast[data-variant="confirmation"] {
  border-left-color: #6b7280;
}

.toast[data-variant="cancellation"] {
  border-left-color: #9ca3af;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.text-button {
  width: auto;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.text-button:hover {
  background: transparent;
  color: var(--text);
}

.text-button:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 3px;
}

.inline-field-action {
  justify-self: end;
}

.cancellation-toggle-button {
  justify-self: center;
  margin-top: 0;
  font-size: 0.88rem;
}

.result {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-border);
  word-break: break-word;
}

.divider {
  margin: 24px 0;
  border-top: 1px solid var(--surface-border);
}

.detail {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--surface-border);
  min-width: 0;
}


.ride-detail-success-feedback {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 300;
  padding: 8px 14px;
  border-radius: 8px;
  background: #166534;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ride-detail-success-feedback strong {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* T137: calm inline success hint shown in the OPEN Ride View after a committed
   OPEN edit ("Ausfahrt wurde aktualisiert."). Quiet and low-noise by design —
   an inline confirmation banner, not a dominant toast or warning state. */
.workspace-edit-success {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(22, 101, 52, 0.22);
  border-left: 3px solid #166534;
  background: rgba(22, 101, 52, 0.06);
  color: #166534;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}

.tour-detail-post-save-context {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(22, 101, 52, 0.22);
  border-left: 3px solid #166534;
  border-radius: 8px;
  background: rgba(22, 101, 52, 0.06);
  color: var(--text-primary, #0f172a);
}

.tour-detail-post-save-context-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #166534;
}

.tour-detail-post-save-context-copy {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary, #334155);
}

.tour-detail-post-save-context-action {
  margin-top: 10px;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #166534;
}

.detail-grid {
  display: grid;
  gap: 14px;
}

.compact-grid {
  gap: 12px;
}


.ride-list-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px 15px 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  background: var(--surface);
}

.ride-list-item[data-owner="self"] {
  border-color: rgba(15, 23, 42, 0.16);
  background: linear-gradient(rgba(234, 240, 248, 0.92), rgba(234, 240, 248, 0.92)), var(--surface);
}

.ride-finalization-card {
  align-self: stretch;
  gap: 8px;
}

.ride-creation-confirmation-card {
  justify-items: start;
  gap: 8px;
  padding: 28px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.96)),
    var(--surface);
}

.ride-creation-confirmation-card strong {
  font-size: 1.2rem;
  line-height: 1.25;
}

.ride-finalization-card > h2,
.ride-finalization-card > .action-note,
.ride-finalization-card > .form-status,
.ride-finalization-card > .finalization-inline-cancellation {
  margin-top: 0;
}

.ride-finalization-card > .form-status:empty {
  min-height: 0;
  margin-top: 0;
}

.ride-finalization-card > h2 {
  margin-bottom: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

.ride-list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.ride-list-header-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ride-list-date-time {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ride-list-header-time,
.ride-list-start-time {
  margin: 0;
  min-width: 0;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
}

.ride-list-header-time {
  white-space: normal;
  word-break: break-word;
}

.ride-list-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ride-list-ownership {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
}

.ride-list-ownership[data-owner="self"] {
  font-weight: 600;
  color: var(--text);
}

.ride-list-system-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  margin: 0;
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100%;
  min-width: max-content;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ride-list-system-status[data-live="true"] {
  gap: 5px;
}

.ride-list-system-status[data-live="true"]::before {
  content: "🕒";
  font-size: 0.9em;
  display: inline-block;
  line-height: 1;
  opacity: 0.78;
  transform-origin: center;
  animation: ride-status-clock-pulse 2200ms ease-in-out infinite;
}

@keyframes ride-status-clock-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.ride-list-item strong {
  font-size: 1rem;
}

.ride-list-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ride-list-title,
.ride-list-detail {
  margin: 0;
  min-width: 0;
}

.ride-list-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
}

.ride-list-detail {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.ride-list-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ride-list-participation-status {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.ride-list-participation-status[data-tone="ready"] {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.25;
  color: #64748b;
}

.ride-list-participation-status[data-tone="joined"] {
  color: #166534;
}

.ride-list-participation-status[data-tone="declined"] {
  color: #b91c1c;
}

.ride-list-participation-status[data-tone="open"] {
  color: #475569;
}

.ride-list-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ride-list-open-button {
  width: auto;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 12px;
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 0.81rem;
  font-weight: 500;
  box-shadow: none;
}

.detail-note {
  margin: 0;
}

.task-screen {
  gap: 18px;
  min-width: 0;
  padding: 16px;
  overflow: visible;
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 220px),
    var(--shell-surface);
}

.secondary-button {
  background: var(--surface);
  min-height: 42px;
  padding: 10px 14px;
}

.summary-card,
.meeting-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px 16px 15px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
}

.summary-card {
  background: rgba(255, 255, 255, 0.84);
}

.summary-meta-block {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.detail-status-value {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.summary-date {
  margin: 0;
  min-width: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-time {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.creator-follow-up-helper {
  margin: 0;
  color: var(--text);
}

.creator-follow-up-required-note {
  margin: 0;
  color: var(--muted);
}

.ride-context-feedback-line {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}


.ride-detail-card-body {
  padding-top: 8px;
  padding-bottom: 2px;
  gap: 12px;
}

.ride-detail-card-sections {
  display: grid;
  gap: 14px;
}

/* WC-POLISH-18 (2026-05-21): compound-selector override (`.a.b` — no
   space) for the post-ride form. The form carries both classes, and
   the previous descendant-combinator form `.creator-follow-up-form
   .ride-detail-card-sections` never matched (the form is not a
   descendant of itself). The rule sits AFTER the base
   `.ride-detail-card-sections` so JSDOM-based tests, which sort by
   source order, also pick it up — real browsers respect specificity
   either way (0,0,2,0 vs 0,0,1,0). The token replaces the literal
   22 px → 14 px walk that bridged the previous patches. */
.creator-follow-up-form.ride-detail-card-sections { gap: var(--sp-2); }

.ride-detail-inline-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ride-detail-card-sections > :last-child {
  padding-bottom: 2px;
}

.ride-response-section > .ride-response-title,
#detail-participant-visibility-card > .label {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ride-detail-inline-section .detail-grid {
  margin-top: 2px;
}

/* Route-/Section-Detailrows: wrappende Werte zulassen (Orte, Beschreibungen, Links) */
.ride-detail-inline-section .detail-grid .meta-cell.detail-row-wrap dd {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.ride-detail-inline-section .detail-grid .meta-cell.detail-row-wrap dd a {
  word-break: break-all;
}

.ride-detail-actions {
  display: grid;
  gap: 8px;
}

.ride-detail-open-actions {
  display: grid;
  gap: 10px;
}

.ride-detail-button-group {
  display: grid;
  gap: 6px;
}

#overlap-finalization-entry-card {
  display: grid;
  gap: 6px;
}

.ride-detail-action-helper {
  color: rgba(71, 85, 105, 0.86);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.ride-detail-open-deadline {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

#detail-creator-open-actions-card {
  gap: 12px;
}

#detail-creator-open-finalize-button {
  min-height: 48px;
  padding: 14px 16px;
  font-size: 0.98rem;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(49, 86, 211, 0.14);
}

#detail-creator-open-cancel-button {
  min-height: 40px;
  font-size: 0.9rem;
  font-weight: 600;
}

#detail-creator-open-transfer-button {
  min-height: 0;
  padding-top: 2px;
  font-size: 0.84rem;
  font-weight: 600;
}

#detail-creator-open-finalize-button:disabled {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.45);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.ride-context-detail-list {
  gap: 10px;
}

.personal-context-card {
  gap: 6px;
}

.summary-line,
.meeting-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.summary-card-link {
  width: auto;
  justify-self: start;
  text-decoration: none;
}

.meeting-card {
  background: rgba(255, 255, 255, 0.84);
}


.detail-row {
  display: grid;
  gap: 4px;
}

.detail-row strong {
  line-height: 1.35;
}

.detail-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.participant-visibility-groups {
  display: grid;
  gap: 14px;
}

.participant-visibility-group {
  display: grid;
  gap: 6px;
}

.participant-visibility-group strong {
  line-height: 1.35;
}

.ride-response-groups .label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.participant-name-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
}

.participant-name-list li + li {
  margin-top: 4px;
}

.ride-detail-decision-hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.participation-decision-section {
  display: grid;
  gap: 12px;
}

.participation-decision-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.decision-option {
  min-height: 56px;
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  box-shadow: none;
}

.decision-option[data-selected="true"] {
  border-color: rgba(49, 86, 211, 0.24);
  background: rgba(49, 86, 211, 0.08);
  color: var(--text);
}

.participation-window-action {
  display: grid;
  justify-items: start;
}

.participation-window-toggle {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.94rem;
  font-weight: 600;
}

.participation-window-toggle:hover {
  background: transparent;
  color: var(--text);
}

.participation-window-toggle:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 3px;
}

.participation-window-summary {
  margin-bottom: 2px;
}

.participation-window-fields {
  display: grid;
  gap: 16px;
}

.time-range-fields {
  gap: 16px;
}

.time-range-summary {
  margin: -2px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.create-ride-time-summary {
  margin: -8px 0 0;
  padding-left: 2px;
  font-size: 0.76rem;
  color: #6b7280;
}

.create-ride-form-actions {
  gap: 8px;
}

.create-ride-form-actions .text-button {
  justify-self: center;
  min-height: 36px;
  padding: 4px 0 2px;
}

/* ── Ride Creation v1: entry openers + adapted Wohin / Route / Rückmeldung ── */

.opener-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.opener {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule, rgba(15, 23, 42, 0.08));
  border-radius: 0;
  text-align: left;
  font: inherit;
  color: var(--c-text);
  cursor: pointer;
  width: 100%;
}

.opener:first-of-type {
  border-top: 1px solid var(--rule, rgba(15, 23, 42, 0.08));
}

.opener-text {
  flex: 1;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-text);
}

.opener-text em {
  font-style: italic;
  color: var(--c-muted, #4b5563);
}

.opener-chev {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--c-muted, #6b7280);
}

.wohin-line {
  margin-top: 22px;
}

.wohin-line-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted, #6b7280);
  margin-bottom: 4px;
}

.wohin-line-status {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted, #4b5563);
}

.wohin-line-sep {
  margin: 0 6px;
  color: rgba(15, 23, 42, 0.25);
}

.wohin-helper {
  margin: 5px 0 0;
  font-size: 11px;
  color: rgba(15, 23, 42, 0.45);
  line-height: 1.45;
}

.wohin-switch {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-muted, #6b7280);
}
#create-ziel-idea-block .form-field:has(> .wohin-switch) {
  margin-bottom: var(--sp-4);
}

.wohin-switch-link {
  width: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--c-muted, #4b5563);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.wohin-switch {
  text-align: left;
}

/* Route editor — segmented-control tabs + shared content container.
 *
 * The three modes (GPX / Link / Orte) share an identical outer container:
 *   same min-height, same padding, same border-radius. Only the inner
 *   content swaps. Tabs have equal width and identical height. The result
 *   is no "height jump" when the user switches modes.
 */
.route-add {
  margin-top: var(--sp-2);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.route-add-trigger-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted, #6b7280);
  margin-bottom: 4px;
}

.route-add-optional {
  color: rgba(15, 23, 42, 0.4);
  font-weight: 400;
}

.route-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  background: rgba(15, 23, 42, 0.05);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.route-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 30px;
  padding: 4px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-muted, #4b5563);
  cursor: pointer;
  width: 100%;
  min-width: 0;
  transition: background-color 120ms, color 120ms;
}
.route-option .route-option-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.route-option:hover {
  color: var(--c-text);
}

.route-option-radio {
  display: none;
}

.route-option[aria-checked="true"] {
  background: var(--c-bg-elev, #ffffff);
  color: var(--c-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Shared content container — same min-height + padding across all modes.
 * Sits flush below the tab bar (no margin), shares the same lateral edges
 * and gets a very subtle surface so the active tab visually "opens" into
 * a connected pane (no card-look, no heavy border). */
.route-option-body {
  display: block;
  min-height: 46px;
  padding: var(--sp-2) var(--sp-3);
  margin: 0;
  background: rgba(15, 23, 42, 0.025);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.route-option-body.form-field { margin-bottom: 0; }
.route-option-body[hidden] { display: none; }

/* T152: Verfügbarkeitsfenster opt-in + geplante Tourlänge. Calm, low-noise:
   a single checkbox and (only when active) a two-option length selector that
   reuses the route-option pill vocabulary. No badge, colour, or new date format. */
/* T152 opt-in + Tourlänge as two compact rows that reuse the Wann inline-grid
   (same label column as Start/Ende). `.form-field-inline` sets display:grid, so
   an explicit [hidden] rule is required to keep the JS show/hide working. */
.availability-window-field[hidden],
.availability-window-length[hidden] { display: none; }
/* Opt-in sits in the control column (col 2), aligned under the time inputs —
   never a lone checkbox in the narrow label column. Single line; wraps
   gracefully only on very narrow screens. */
.availability-window-toggle {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: inherit;
  cursor: pointer;
}
.availability-window-toggle > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}
.availability-window-toggle-label { min-width: 0; }
.availability-window-toggle-tail { color: var(--c-text-muted, #6b7280); }
/* Tourlänge row: "LÄNGE" reuses .form-field-label (col 1); pills in col 2. */
.availability-window-length > .form-field-label { align-self: center; }
.availability-window-length-opt {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--c-text-muted, #9b9890);
}
/* Pills use the form's native segmented control, placed in the control column.
   A hidden pill drops out of the auto-flow so 2 or 3 stay evenly divided. */
.availability-window-length > .route-options {
  grid-column: 2;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-radius: 8px;
}

/* Festlegen framing hint — a calm sentence above the Wann inputs that makes
   clear a concrete time is being chosen inside the stated availability. */
.availability-window-finalize-hint {
  margin: 0 0 var(--sp-2);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-muted, #6b7280);
}

/* Detail / Ride Workspace hero: availability framing under the time range. */
.hero-availability-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-muted, #6b7280);
}
.hero-availability-note[hidden] { display: none; }

/* Aktuell quiet cue — reuses the soft-line typography; no badge or colour. */
.ar-availability-cue .ar-soft-text {
  color: var(--c-muted, #6b7280);
}

/* Quieter typography inside the route content area — these are tertiary
 * controls, not section-level actions. */
.route-option-body .secondary-button {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  min-height: 26px;
  border-radius: 6px;
}
.route-option-body .form-hint {
  font-size: 11.5px;
  color: var(--c-text-muted, #6b7280);
  align-self: center;
  line-height: 1.35;
}
.route-option-body .schedule-input-row {
  align-items: center;
  gap: var(--sp-2);
}
/* Link input inside the route pane: keep input height stable but lighten
 * the placeholder and reduce the font weight a notch — it's a tertiary
 * value capture, not a primary form field. */
.route-option-body input[type="url"].schedule-input-control {
  font-size: 13px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
}
.route-option-body input[type="url"].schedule-input-control::placeholder {
  color: var(--c-text-dim, #94a3b8);
  font-size: 12.5px;
}
/* Orte sub-controls already declare their own compact heights — just
 * tighten the wrap inside the surface. */
.route-option-body .orte-list { min-height: 32px; }

.response-deadline-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.deadline-expired {
  margin: 0;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--c-text-muted, #6b7280);
  background: rgba(15, 23, 42, 0.04);
  border-radius: 6px;
  line-height: 1.35;
}

/* Helper above the finalize Rückmeldefrist field — explains why the OPEN
 * deadline is still editable while finalizing. Calm tertiary copy. */
.deadline-hint {
  margin: 0 0 8px;
}

/* Field-level finalize validation cue. Concretization framing ("noch
 * ergänzen"), not a dominant error state: amber, not the harsh
 * .form-field-error red. Sits directly under the section it flags so the
 * disabled CTA is never the only signal of what is missing. */
.rf-field-error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--c-warning-text, #b45309);
}

.deadline-chip {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted, #4b5563);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.deadline-chip[aria-pressed="true"] {
  background: rgba(17, 24, 39, 0.06);
  border-color: var(--c-text, #111827);
  color: var(--c-text, #111827);
}

.deadline-chip-custom {
  border-style: dashed;
  color: var(--c-muted, #6b7280);
}

/* Wann — value-overlay chip (keeps native picker, shows formatted German date) */

.create-chip-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: var(--c-bg-elev, #ffffff);
}

.create-chip-field .create-chip-value {
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--c-text);
  font-weight: 400;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.create-chip-field .schedule-chip-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.create-chip-field:focus-within {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 2px;
}

.create-end-helper {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--c-muted, #6b7280);
  text-align: right;
}

/* Sichtbar für — inline audience block in the create-ride form. T134
 * follow-up: no modal, direct radio + immediately-visible candidate lists
 * with client-side search. Privacy contract enforced by the backend; no
 * distance / radius / eligibility-reason markup lives in this block by
 * design. */

/* Audience block — folgt der normalen `.form-section`-Optik (Trennlinie
   oberhalb, gleiche Abstände, keine eigene Boxoptik).
   Wir verzichten bewusst auf `gap` am Container und steuern die Vertikal-
   rhythmik über das übliche `margin-bottom`-Pattern der form-section, damit
   "Wer → Passende Fahrer" nicht zusätzlich zum Header-Margin aufgepolstert
   wird. */
.audience-inline {
  display: flex;
  flex-direction: column;
}

.audience-inline > .form-section-header {
  /* Standard-Header-Margin bleibt erhalten — Body trägt keinen eigenen
     Top-Gap mehr. */
  margin-bottom: var(--sp-2);
}

/* Status + Aktion liegen Content-breit auf einer Zeile zusammen — die Row
   spannt nicht über die volle Formularbreite, der Link kann nicht in eine
   eigene Zeile rutschen. */
.audience-inline-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--sp-3);
  flex-wrap: nowrap;
  /* Verhindert, dass der Row-Container als Spalten-Flex-Kind über die
     volle Breite gestreckt wird → keine "Verteilung" mehr möglich. */
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}

.audience-inline-summary-title {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text);
  white-space: nowrap;
  flex: 0 0 auto;
}

.audience-inline-summary-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-muted, #6b7280);
}

.audience-inline-disclosure {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  margin-left: 0;
  padding: 0;
  /* Globales `button { min-height: 44px; font-weight: 700; padding: 14px 16px; }`
     überschreiben — die Disclosure ist ein Text-Link, kein Tap-Target. */
  min-height: 0;
  line-height: 1.25;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-accent, #2563eb);
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}

.audience-inline-disclosure:hover {
  text-decoration: underline;
}

.audience-inline-include-relevant {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-text);
  cursor: pointer;
}

.audience-inline-include-relevant > input[type="checkbox"] {
  flex: 0 0 auto;
}

.audience-inline-include-relevant-text {
  min-width: 0;
}

.audience-inline-include-relevant-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-muted, #6b7280);
}

.audience-inline-include-relevant-hint[hidden] {
  display: none;
}

/* Validierungs-Hinweis als kleine sekundäre Inline-Zeile direkt unter der
   Checkbox — KEINE Banner-Box, kein Hintergrund, kein Border. Die linke
   Einrückung kommt zentral über `.audience-inline-body > :not(...)` und
   muss hier nicht zusätzlich gesetzt werden. */
.audience-inline-message {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--c-danger, #b91c1c);
  font-size: 12px;
  line-height: 1.35;
}

.audience-inline-message[hidden] {
  display: none;
}

/* Body fließt ohne eigene Container-Optik direkt unter die Status-Zeile.
   `margin-top: 0` verhindert die alte Subsystem-Lücke; der vertikale
   Rhythmus zwischen Body-Kindern bleibt klein (sp-1) und erst vor der
   Fahrerliste setzt eine etwas größere Trennung.

   `--audience-indent` definiert die gemeinsame Content-Achse aller Body-
   Kinder rechts neben der Include-Checkbox (browser-gerenderte Checkbox-
   Breite ~20 px + Flex-Gap 10 px). Fehlermeldung, Suchfeld, Fahrerliste
   etc. fluchten dadurch mit dem Label-Text "Passende Fahrer einbeziehen". */
.audience-inline-body {
  --audience-indent: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.audience-inline-body > :not(.audience-inline-include-relevant) {
  padding-left: var(--audience-indent);
}

.audience-inline-body > .audience-inline-list {
  margin-top: var(--sp-2);
}

.audience-inline-body[hidden] {
  display: none;
}

.audience-inline-search {
  display: flex;
}

.audience-inline-search input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--rule-strong, rgba(15, 23, 42, 0.14));
  border-radius: 6px;
  background: var(--c-surface, #ffffff);
  color: var(--c-text);
}

.audience-inline-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audience-inline-section-title {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted, #6b7280);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.audience-inline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.audience-inline-empty {
  font-size: 13px;
  color: var(--c-muted, #6b7280);
  margin: 0;
  line-height: 1.45;
  white-space: pre-line;
}

.audience-inline-recommend {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.audience-inline-recommend[hidden] {
  display: none;
}

.audience-inline-recommend-button {
  background: transparent;
  border: 1px solid var(--rule-strong, rgba(15, 23, 42, 0.14));
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
}

.audience-inline-recommend-button:hover {
  background: var(--c-surface, #ffffff);
}

.audience-inline-recommend-feedback {
  font-size: 12px;
  color: var(--c-muted, #6b7280);
}

.audience-inline-recommend-feedback[hidden] {
  display: none;
}

/* Fahrereinträge wirken als Auswahloptionen, nicht als Hauptinhalt:
   kleinere Typo, kompakte Zeilenhöhe, kein Padding. */
.audience-inline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  cursor: pointer;
  min-width: 0;
  line-height: 1.2;
}

.audience-inline-item[hidden] {
  display: none;
}

.audience-inline-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.audience-inline-item-label > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

/* Single-line row: checkbox · name · email (right-aligned, truncated). */
.audience-inline-item-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.audience-inline-item-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.2;
}

.audience-inline-item-email {
  font-size: 11px;
  color: var(--c-muted, #6b7280);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  line-height: 1.2;
}

.audience-inline-item-location {
  font-size: 11px;
  color: var(--c-muted, #6b7280);
  flex: 0 0 auto;
  line-height: 1.2;
}

/* Workspace Identity Row · Aligned Email Column (2026-05-21).
   Two layouts share `.identity-row-content`:
   - `--inline` powers the audience-picker (checkbox + name + right-truncated
     email column). Unchanged from the original picker style.
   - `--creator` powers the read-only workspace participant lists (GNP
     confirmed, organizer response groups). It uses a 2-column CSS grid so
     every row's email starts at the same x — long names cannot shift the
     email column, and long emails wrap naturally without overflow:hidden
     or text-overflow:ellipsis. */
.identity-row-content {
  flex: 1 1 auto;
  min-width: 0;
}
.identity-row-content--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.identity-row-content--creator {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}
.identity-row-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.2;
  min-width: 0;
}
.identity-row-content--inline .identity-row-name {
  flex: 0 0 auto;
  white-space: nowrap;
}
.identity-row-content--creator .identity-row-name {
  white-space: nowrap;
}
.identity-row-email {
  font-size: 11px;
  line-height: 1.2;
  color: var(--c-text-muted);
}
.identity-row-content--inline .identity-row-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.identity-row-content--creator .identity-row-email {
  min-width: 0;
  overflow-wrap: anywhere;
}
.identity-row-location {
  font-size: 11px;
  color: var(--c-text-muted);
  flex: 0 0 auto;
  line-height: 1.2;
}

/* Workspace response-group rows (creator view with email surfaced). When
   `v13RenderParticipantGroups` switches from the comma-joined fallback to
   the structured list, each <li.party-row> hosts an identity-row. No
   bullets, modest gap; matches the v13 workspace's calm density. */
.party-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.party-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* Submit / Cancel — fixture-spec sizing/alignment.
   Doppel-Klassen-Selektor `.form-actions.create-form-actions` schlägt das
   spätere generische `.form-actions { margin-top: var(--sp-6); padding-top:
   var(--sp-5); }` (selbe Single-Class-Spezifität, aber später im File →
   würde sonst gewinnen). Damit folgt der Audience→Action-Bar-Rhythmus dem
   Inter-Section-Rhythmus statt einem eigenen leeren Block. */
.form-actions.create-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-rule, rgba(15, 23, 42, 0.08));
}

.form-actions.create-form-actions .btn-cancel {
  margin-right: auto;
}

.create-submit-button {
  width: auto;
  margin-left: auto;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

/* Orte angeben — structured waypoint pills (compact, ≈30px height) */

.orte-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 30px;
}

.orte-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 4px 0 8px;
  font-size: 12px;
  line-height: 1;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 6px;
  color: var(--c-text);
  white-space: nowrap;
}

.orte-pill .orte-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--c-muted, #6b7280);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.orte-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: var(--c-muted, #4b5563);
  background: transparent;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 6px;
  cursor: pointer;
  width: auto;
}

.orte-add-input {
  flex: 1;
  min-width: 120px;
  width: auto;
  height: 28px;
  padding: 0 8px;
  font-size: 12.5px;
  line-height: 1;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 6px;
  background: #ffffff;
}

.orte-add-input:focus-visible {
  outline: 3px solid rgba(49, 86, 211, 0.14);
  outline-offset: 2px;
}

/* GPX upload control — calm secondary affordance scoped to Ride Creation */

#create-route-gpx-picker {
  margin-top: 4px;
}

#create-route-gpx-picker .schedule-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#create-route-gpx-picker-button.secondary-button {
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted, #4b5563);
  background: transparent;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}

#create-route-gpx-picker-button.secondary-button:hover {
  background: rgba(15, 23, 42, 0.04);
}

#create-route-gpx-picker #create-route-gpx-file-status {
  font-size: 11px;
  color: var(--c-muted, #6b7280);
}

@media (min-width: 700px) {
  .card {
    width: min(100%, 720px);
  }

  .page-header {
    gap: 18px;
    padding: 14px 18px;
  }

  .entry-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .participation-window-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ride-detail-actions {
    justify-items: start;
  }

  .time-range-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.finalization-inline-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.finalization-inline-actions .secondary-button {
  min-height: 40px;
  padding: 9px 12px;
}

.simple-cancellation-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}


.finalization-inline-cancellation > .form-status:empty {
  min-height: 0;
  margin-top: 0;
}

.finalization-inline-cancellation-form {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.finalization-inline-cancellation-form .secondary-button {
  width: auto;
  justify-self: stretch;
}

.cancellation-cancel-button {
  justify-self: center;
}

.cancellation-toggle-button[data-expanded="true"] {
  color: var(--text);
}

.finalization-inline-actions .secondary-button[data-selected="true"] {
  border-color: rgba(49, 86, 211, 0.24);
  background: rgba(49, 86, 211, 0.08);
  color: var(--text);
}

.secondary-button {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
}

/* Workspace Button Family Unification (2026-05-21):
   Legacy (non-V13) cancellation submit migrated off literal hex to the
   canonical workspace danger tokens. Same visual family as the V13
   workspace danger-outline buttons; one source of truth for danger
   colour across the cancellation surface. */
#cancel-submit-button,
#simple-cancel-submit-button {
  border-color: var(--c-danger);
  background: transparent;
  color: var(--c-danger);
}

#cancel-submit-button:hover,
#simple-cancel-submit-button:hover {
  background: var(--c-danger-soft);
}

#simple-cancel-implied-reason {
  margin-bottom: 12px;
}

.cancellation-recommended-hint {
  margin: 4px 0 -4px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .shell {
    justify-items: stretch;
    padding: 4px;
  }

  .card {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    background: transparent;
  }

  .page-header {
    display: flex;
    gap: 5px;
    padding: 6px 7px;
    border-radius: 14px;
  }

  .brand {
    padding: 2px 0;
  }

  .page-context {
    gap: 6px;
    margin-top: 6px;
  }

  .task-screen {
    padding: 0 !important;
    border-radius: 16px;
  }

  .ride-list-item {
    padding: 13px 11px;
  }

  .task-screen {
    gap: 14px;
  }

  .ride-finalization-card {
    gap: 7px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .finalization-inline-actions {
    gap: 7px;
  }

  .ride-finalization-card > h2 {
    font-size: 1.04rem;
  }

  .schedule-chip-row {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 0.82fr);
  }

  .ride-list-status-row {
    flex-wrap: wrap;
  }

  .entry-ride-list-header[data-mode="overview"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-primary-action[data-mode="overview"] {
    width: 100%;
    justify-self: stretch;
  }

  .entry-primary-action[data-mode="overview"] .entry-actions {
    width: 100%;
  }

  .entry-primary-action[data-mode="overview"] #entry-create-ride-button {
    width: 100%;
    justify-self: stretch;
    padding: 11px 15px;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 1rem;
  }

  .entry-primary-action[data-mode="overview"] #entry-create-ride-button:hover {
    background: #2948b4;
    border-color: #2948b4;
    color: var(--accent-contrast);
  }

  #entry-screen {
    gap: 4px;
  }

  #ride-list {
    gap: 8px;
  }

  #ride-list .ride-list-item {
    gap: 7px;
    padding: 10px;
    border-radius: 14px;
  }

  #ride-list .ride-list-header {
    gap: 6px;
  }

  #ride-list .ride-list-header-main {
    gap: 3px;
  }

  #ride-list .ride-list-date-time {
    font-size: 0.94rem;
    line-height: 1.16;
  }

  #ride-list .ride-list-header-time,
  #ride-list .ride-list-start-time {
    font-size: 0.76rem;
  }

  #ride-list .ride-list-system-status {
    padding: 2px 6px;
    font-size: 0.66rem;
  }

  #ride-list .ride-list-meta {
    gap: 2px;
  }

  #ride-list .ride-list-title {
    font-size: 0.9rem;
    line-height: 1.24;
  }

  #ride-list .ride-list-detail {
    font-size: 0.78rem;
  }

  #ride-list .ride-list-status-row {
    gap: 6px;
    padding-top: 6px;
  }

  #ride-list .ride-list-participation-status {
    font-size: 0.84rem;
    line-height: 1.2;
  }

  #ride-list .ride-list-open-button {
    width: auto;
    min-height: 36px;
    padding: 7px 11px;
    font-size: 0.78rem;
  }

  .secondary-button {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
  }

  .field {
    gap: 7px;
    font-size: 0.9rem;
  }

  .field span,
  .field legend {
    font-size: 0.9rem;
  }

  .field input,
  .field select,
  .field textarea,
  .field-output {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.93rem;
  }

  .summary-card,
  .meeting-card {
    padding: 14px 13px 13px;
    border-radius: 15px;
  }

  .ride-detail-card-body {
    gap: 10px;
  }

  .ride-detail-card-sections {
    gap: 12px;
  }

  .ride-detail-inline-section {
    gap: 9px;
    padding-top: 14px;
  }

  .ride-context-feedback-line,
  .ride-list-summary,
  .summary-line,
  .meeting-meta,
  .action-note {
    font-size: 0.9rem;
    line-height: 1.45;
  }
}

/* Mobile (phones up to 480px): keep the WANN Start/Ende date+time rows compact
   and balanced. On iOS the native <input type=date> and <select> controls
   render taller and wider than on desktop, so without this the rows looked
   oversized and imbalanced at typical iPhone widths (375–430px) — a range that
   previously fell between the desktop rules and the ≤360px override. Trim the
   inline label column, tighten the gap, give the date column a touch more
   weight than the time column (DD.MM.YYYY needs more room than HH:MM), and
   slightly reduce the control font/padding while keeping a ≥44px tap target.
   Desktop (>480px) is unaffected. */
@media (max-width: 480px) {
  /* Specificity note: use `.form-field.form-field-inline` (two classes) so this
     wins over the base `.form-field-inline` rule, which is defined LATER in the
     file — an equal-specificity later rule would otherwise override a plain
     `.form-field-inline` here and the label-column trim would silently no-op. */
  .form-field.form-field-inline {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }

  .schedule-input-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 8px;
  }

  /* The real cause of the "oversized / imbalanced" date+time controls on iPhone
     was NOT font/padding — it was the NATIVE iOS rendering of `<input type=date>`
     and `<select>` (`appearance: auto`), which ignores those tweaks and draws an
     oversized native pill/box. Neutralize the native chrome so the controls use
     this consistent, compact box on iOS/Android. Desktop (>480px) keeps native
     rendering. `appearance:none` is harmless on the plain text/url inputs that
     also carry this class. font-size stays ≥16px to avoid iOS focus-zoom. */
  .schedule-input-control {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    min-height: 0;
    padding: 0 12px;
    font-size: 16px;
    line-height: normal;
  }
  .schedule-input-control-date::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
  }
  .schedule-input-control-date::-webkit-calendar-picker-indicator {
    margin-left: auto;
  }
  /* `appearance:none` removes the native dropdown arrow — re-add it for the
     time selects (the only `<select>`s carrying this class). */
  .schedule-input-control-time {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1613' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
  }
}

@media (max-width: 360px) {
  #ride-list .ride-list-status-row {
    align-items: stretch;
  }

  #ride-list .ride-list-open-button {
    width: 100%;
  }

  .schedule-chip-row {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.78fr);
    gap: 8px;
  }

  .schedule-input-row {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.78fr);
    gap: 8px;
  }

  .schedule-chip {
    min-height: 64px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .schedule-chip-value {
    font-size: 0.94rem;
  }
}

@media (max-width: 375px) {
  .ride-list-date-time,
  .summary-date {
    font-size: 0.94rem;
  }

  .ride-list-system-status {
    padding: 2px 7px;
    font-size: 0.68rem;
  }

}

/* ============================================
   PHASE 3 — DETAIL HERO v0.4
   ============================================ */

.content {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  /* Top padding is intentionally smaller than horizontal/bottom: the screen
   * should "begin" right under the app header. Previously sp-5 (24px) created
   * a large empty corridor that no inner-section reduction could undo. */
  padding: var(--sp-2) var(--sp-4) var(--sp-5);
  box-sizing: border-box;
  min-width: 0; /* prevent grid column blowout on narrow viewports */
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}

.breadcrumb a {
  color: var(--c-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--c-text);
}

.breadcrumb .sep {
  color: var(--c-rule-strong);
}

.breadcrumb .current {
  color: var(--c-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

/* Global-Polish (2026-05-28): the breadcrumb/chip row must occupy a
   STABLE vertical height regardless of whether a status chip is
   rendered on the right, AND it must match the workspace shell's
   `.ride-detail-organizer-v13 .ride-header` measurements so that the
   hero/title beneath sits at the SAME Y position across every surface
   (Ausfahrten ride-detail with chip, ride-detail without chip,
   Entdecken tour-detail without chip, post-ride creator pending,
   post-ride completed). The numbers below are calibrated so:
     header.height = 34px  (== chip-box 24px + workspace padding 2+8)
     margin-bottom = 12px  (== var(--sp-3), workspace's margin-bottom)
   With these pinned, hero.top is identical on every header pattern.
   `.page-top > .breadcrumb { margin-bottom: 0 }` zeroes the contributing
   breadcrumb margin so `min-height` is the single source of row height.
   align-items: center keeps content centered — no placeholder, no copy
   change, no header redesign. */
.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  min-width: 0;
  min-height: 34px;
  /* Global-Polish (2026-05-28): mirror the workspace ride-header padding
     so the inner content area starts/ends at the same vertical pixels.
     Without this, the back-link text-center sits 3px below the workspace
     back-link text-center (page-top centered against full 34px row,
     workspace centered against the 24px content area between 2px+8px
     padding). Padding here equalises the inner content rectangle. */
  padding: 2px 0 var(--sp-2);
}

.page-top > .breadcrumb {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 0;
  /* Global-Polish (2026-05-28): the default `.breadcrumb { margin-bottom:
     var(--sp-3) }` pushes the `.page-top` flex container past its
     `min-height: 34px` reservation by 12px when no chip is present.
     Zero it here so `.page-top`'s own min-height is the single source of
     truth for the row's vertical extent. Margin to the next element is
     governed by `.page-top { margin-bottom: var(--sp-3) }`. */
  margin-bottom: 0;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.status-chip .chip-count {
  color: var(--c-text-muted);
  font-weight: 500;
}

/* LEGACY (?v13=0 fallback). Workspace Orientation (2026-05-20) removes
   the lifecycle strip from canonical surfaces; these rules remain only
   to style the two legacy strip instances inside
   #participation-task-screen and the [data-workspace-legacy] block of
   #overlap-finalization-task-screen. Do not introduce new callers. */
.lifecycle-strip {
  list-style: none;
  margin: 0 0 var(--sp-5) 0;
  padding: 0;
  display: flex;
}

.lifecycle-strip .step {
  flex: 1;
  font-size: 11px;
  color: var(--c-text-dim);
  text-align: center;
  padding-bottom: var(--sp-2);
  cursor: default;
}

.lifecycle-strip .step.done {
  color: var(--c-text-muted);
}

.lifecycle-strip .step.current,
.lifecycle-strip .step[aria-current="step"] {
  color: var(--c-text);
  font-weight: 500;
}

.lifecycle-strip .step.current::after,
.lifecycle-strip .step[aria-current="step"]::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--c-accent);
  margin-top: 2px;
}

.ride-hero {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-2);
}

.hero-kicker .kicker-sep {
  color: var(--c-rule-strong);
}

.hero-kicker .relative {
  color: var(--c-accent);
}

.hero-date {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--c-text);
  margin: 0 0 var(--sp-2) 0;
}

.hero-time {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  margin: 0 0 var(--sp-4) 0;
}

.hero-meta {
  margin: var(--sp-4) 0 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
  row-gap: 2px;
}

.meta-cell dt {
  font-size: 11px;
  color: var(--c-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}

.meta-cell dd {
  color: var(--c-text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.meta-cell dd.unresolved {
  color: var(--c-text-muted);
}

/* Canonical workspace hero-meta cells: allow grid items to shrink to
   their 1fr column even when the value is a long unbreakable token,
   and let values wrap instead of being silently truncated. The legacy
   #participation-task-screen is intentionally excluded.
   WC-POLISH-10 (2026-05-21): the V13 workspace shell
   (#ride-workspace-root → `[data-workspace-extras]`) was missing from
   this override list — meta values inside the canonical V13 shell were
   falling through to the base `.meta-cell dd` nowrap/ellipsis rule and
   getting truncated on mobile despite the row being full-width. Adding
   the V13 selectors here gives the shell the same wrap behaviour as
   every other canonical workspace surface. */
#ride-detail .hero-meta > .meta-cell,
#overlap-finalization-task-screen .hero-meta > .meta-cell,
#cancellation-task-screen .hero-meta > .meta-cell,
#confirmation-task-screen .hero-meta > .meta-cell,
#go-no-go-participant-task-screen .hero-meta > .meta-cell,
#post-ride-follow-up-task-screen .hero-meta > .meta-cell,
#ride-workspace-root [data-workspace-extras] > .meta-cell {
  min-width: 0;
}

#ride-detail .hero-meta > .meta-cell dd,
#overlap-finalization-task-screen .hero-meta > .meta-cell dd,
#cancellation-task-screen .hero-meta > .meta-cell dd,
#confirmation-task-screen .hero-meta > .meta-cell dd,
#go-no-go-participant-task-screen .hero-meta > .meta-cell dd,
#post-ride-follow-up-task-screen .hero-meta > .meta-cell dd,
#ride-workspace-root [data-workspace-extras] > .meta-cell dd {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.option-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.context-disclosure {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--surface);
}

.context-disclosure summary {
  cursor: pointer;
  font-weight: 700;
}

.context-disclosure[open] summary {
  margin-bottom: 12px;
}

.label {
  color: var(--muted);
}


/* ============================================
   PHASE 5 — LIST VIEW v0.4
   ============================================ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.page-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--c-text);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--c-text);
  color: var(--c-bg-elev);
  white-space: nowrap;
  transition: background 120ms ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: #000;
}

.tab-nav {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: var(--sp-5);
}

.tab {
  position: relative;
  padding: var(--sp-3) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: color 120ms ease;
  background: none;
  border: none;
  cursor: pointer;
}

.tab:hover {
  color: var(--c-text);
}

.tab[aria-selected="true"] {
  color: var(--c-text);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-text);
}

.group {
  margin-bottom: var(--sp-5);
}

.group:last-child {
  margin-bottom: 0;
}

.group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-rule);
}

.group-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.group-title.self {
  color: var(--c-text);
}

.group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-dim);
}

.ride-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ============================================================
   Aktuell visual shell — fixture-aligned (T121 visual-parity pass)
   --------------------------------------------------------------
   Source of truth: frontend/tests/aktuell-fixture.html (Variant B).
   The previous live UI rebuilt the Aktuell screen using the legacy
   entry-screen chrome (page-title, tab-nav with underline, all-caps
   group eyebrows, opaque phase tokens). The fixture's calm/editorial
   register replaces that chrome here. Row internals are unchanged —
   this pass only touches the chrome around the row.
   ============================================================ */

/* Hide the entry-screen H1 visually but keep it in the a11y tree.
   The fixture uses no separate page title — the brand bar names the
   section and the inline scope-switch identifies what's visible. */
.page-title.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Logbook frame — wraps the Aktuell head bar and the ride list. */
.logbook-frame {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}

.logbook-frame-head {
  display: flex;
  /* Vertically center the secondary nav and the create CTA so the Aktuell
     "Neue Ausfahrt" button never appears to sit on the panel divider.
     `flex-end` was tried briefly to glue the nav underline to the bottom
     edge — but that pushed the underline onto the panel divider and
     dropped the CTA to the same edge. */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* A small but real bottom padding keeps the active nav underline
     visually distinct from the `border-bottom: 1px` of the panel head.
     The underline sits on the link's own bottom edge; this padding is
     the buffer between underline and divider. */
  padding: 8px 16px;
  /* Unified header height across all framed surfaces (Aktuell, Logbuch,
     Entdecken). Only Aktuell carries the inline "Neue Ausfahrt" CTA — a
     button subject to the global `button { min-height: 44px }` — which made
     its head ~15px taller than the tab-only Logbuch/Entdecken heads. Rather
     than shrink the CTA, we reserve the CTA-inclusive height on the shared
     head so every surface reads at the same vertical rank regardless of
     whether a button is present. 61px = 44 (CTA min-height) + 16 (8+8
     padding-block) + 1 (border-bottom); `align-items: center` keeps the
     tab-only heads centred within it, so no dead space appears above/below.
     Desktop-only: on mobile (≤600px) the CTA becomes the FAB and every head
     is tab-only, so no reservation is needed (see the max-width override). */
  min-height: 61px;
  border-bottom: 1px solid var(--c-rule);
  background: rgba(26, 22, 19, 0.015);
}

@media (max-width: 600px) {
  .logbook-frame-head {
    padding: 8px 14px;
    /* No inline CTA on mobile (FAB replaces it), so all heads are tab-only
       and equal already — drop the desktop reservation to avoid empty space. */
    min-height: 0;
  }
}

/* First section head sits flush under the secondary nav, not 11px below
   it — so the year/group header reads as the next line of the same block
   rather than as a standalone headline. */
.ride-list-content #ride-list > section:first-child > .aktuell-section-head {
  padding-top: 6px;
}

/* Inline typographic scope switch (Aktuell · Vergangen). Replaces the
   legacy .tab-nav 2px underline. The active state is a tiny dot prefix;
   inactive labels are muted, no underline, no chrome. */
.section-scope {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  /* Container font-size seeds the secondary-nav base. Stays below the
     primary nav (13px on .nav-link) so the hierarchy reads:
       Ebene 1 (Ausfahrten/Entdecken) > Ebene 2 (Aktuell/Logbuch).  */
  font-size: 12.5px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Secondary navigation language — same active-state grammar as the primary
   `.nav-link` (color shift + absolute underline), but one visual rank
   smaller so it reads as a sub-band of the page header:
     - smaller font-size (12.5px) than .nav-link (13px)
     - lighter font-weight (450) than .nav-link (500)
     - underline directly under the text (bottom: 0, height: 1px) instead
       of the primary nav's full 2px line 13px below
   Tight padding (2px 0) pulls the underline almost flush to the descender. */
.section-scope-link {
  position: relative;
  background: transparent;
  border: 0;
  /* Neutralise the global `button { min-height: 44px }` — exactly as the
     primary `.nav-link` does. Without this the button is stretched to 44px,
     the baseline-aligned label pins to the top of that box, and the
     bottom-anchored `::after` underline floats ~18px below the text. That
     stretch (not the neighbouring "Neue Ausfahrt" button) was the real
     cause of the Ausfahrten underline sitting far from its label, and the
     reason a surface-specific mobile override was needed to compensate. */
  min-height: 0;
  /* Extra bottom padding opens a deliberate gap between the label and the
     active `::after` line so it reads as a standalone navigation indicator
     (like `.nav-link` and the legacy `.tab`), not a flush text-underline.
     The line is anchored a few px above this padded edge (see ::after), so
     it floats below the descender while still sitting INSIDE the link box —
     the remaining bottom-padding + the header's 8px padding-bottom keep it
     clear of the panel divider. Because `min-height: 0` keeps the link
     text-height at every width, this single value is viewport-stable. */
  padding: 4px 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--c-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 120ms ease;
  /* Never wrap a single tab label across two lines (e.g. Entdecken's
     "Nicht gefahren"). All secondary-nav labels are short — if a label
     is so long it doesn't fit on one line, the right answer is a shorter
     label, not a wrapped tab. */
  white-space: nowrap;
}

.section-scope-link:hover { color: var(--c-text); }

/* When a button carries both `.tab` (legacy) and `.section-scope-link`
   (new), the new register wins: same compact padding, same secondary-nav
   size/weight. The legacy `.tab[aria-selected=true]::after` underline rule
   is overridden below so both selectors share the same active indicator. */
.tab.section-scope-link {
  padding: 4px 0 10px;
  font-size: 12.5px;
  font-weight: 450;
}

.section-scope-link[aria-pressed="true"],
.tab.section-scope-link[aria-selected="true"] {
  color: var(--c-text);
}

/* Active indicator. `position: absolute` keeps width identical between
   active and inactive (no horizontal layout shift). The line is a 2px bar
   — same weight as the primary `.nav-link` and the legacy `.tab` indicator,
   so the secondary nav speaks the app's tab language rather than reading as
   a thin text-underline. `bottom: 2px` parks it just above the link's padded
   edge; combined with the link's 10px bottom-padding that places the bar
   ~6px below the descender (a clear but subordinate gap — smaller than the
   primary nav's 13px so the hierarchy still reads). The 2px-remaining padding
   plus the header's 8px padding-bottom keep it off the panel divider. */
.section-scope-link[aria-pressed="true"]::after,
.tab.section-scope-link[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background: var(--c-text);
}

/* Calm primary CTA inside the frame head — replaces the legacy
   .btn-primary (heavier dashboard button) for this surface only. */
.ctx-action.primary {
  background: var(--c-text);
  color: var(--c-bg-elev);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease;
}

.ctx-action.primary:hover { background: #000; }

/* Section heads inside the Aktuell layout. Sentence-case subhead with a
   plain numeric count — no all-caps eyebrow, no mono "Einladungen". */
.group-aktuell { margin-bottom: 0; }

.group-aktuell .group-header.aktuell-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px 8px;
  margin: 0;
  background: rgba(26, 22, 19, 0.015);
  border-top: 1px solid var(--c-rule);
  border-bottom: 0;
}

.group-aktuell:first-of-type .group-header.aktuell-section-head { border-top: 0; }

.group-aktuell .group-title.aktuell-section-title {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text-muted);
  margin: 0;
}

.group-aktuell .group-count.aktuell-section-count {
  font-family: -apple-system, "Inter", system-ui, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--c-text-dim);
  font-feature-settings: "tnum";
}

@media (max-width: 600px) {
  .group-aktuell .group-header.aktuell-section-head { padding: 10px 14px 7px; }
}

/* Section variants exist as hooks for structure/tests but carry no
 * visible color blocks — the divider (`border-top`) above the header
 * and the calm section typography do the separation work, matching
 * Ridync's editorial aesthetic. Icons were removed. */

/* ============================================================
   Aktuell row — Variant B (T121)
   Flat row layout: lightweight date kicker, full-width title,
   coordination summary line(s), four-dot lifecycle indicator
   pinned top-right, quiet next-step token pinned bottom-right.
   No card chrome, no per-row CTA button, no warning chrome.
   The row itself is the click target.
   ============================================================ */
.ride-list.aktuell-list {
  gap: 0;
  /* Inside the logbook-frame the section-heads carry the top-rules
     between groups; the list itself no longer needs outer borders. */
  border-top: 0;
  border-bottom: 0;
}

.aktuell-row {
  position: relative;
  display: block;
  padding: 12px 18px;
  border-top: 1px solid var(--c-rule);
  cursor: pointer;
  transition: background-color 100ms ease;
}

/* Cards that render the bottom-right CTA need a dedicated vertical
   band underneath the title/metadata flow so the absolute task slot
   never sits next to the title horizontally. Without this, a 1-line
   title with no metadata could collide with the task slot — which
   forced the title's right reserve to over-claim space.
   Cards without a task keep the original compact height. */
.aktuell-row[data-has-task="true"] {
  padding-bottom: 28px;
}

.aktuell-row:first-of-type { border-top: 0; }

.aktuell-row:hover { background: rgba(26, 22, 19, 0.025); }

.aktuell-row:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  background: rgba(26, 22, 19, 0.025);
}

/* T140 Activity Liveness Marker — a small, calm, contentless dot in the row's
   top-left gutter that means only "this ride received new activity since you
   last looked". It sits in the left padding gutter (left:6px + 6px wide) and is
   lifted into the top-left CORNER, clear above the date kicker's glyphs, so it
   reads as a row-level "new" marker rather than a bullet on the date line. It
   never collides with the date/title text, the title's right-side phase
   reserve, or the absolute task slot. Neutral accent tone, never a warning
   colour; no animation. Removed on the next render once the ride is seen. */
.ar-activity-dot {
  position: absolute;
  /* Row padding-top is 12px; the date glyphs start ~14px down. top:6px puts
     the 6px dot fully above them (bottom edge ≈12px) so it sits in the corner,
     not on the date baseline — yet stays clearly inside the row, below the
     divider. */
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  pointer-events: none;
}

@media (max-width: 600px) {
  /* Row top padding grows to 14px on mobile — nudge the dot down 2px so it
     keeps the same optical clearance above the date glyphs as on desktop. */
  .ar-activity-dot {
    top: 8px;
  }
}

.aktuell-main {
  min-width: 0;
}

.ar-date {
  margin: 0;
  padding-right: 52px;
  font-size: 12px;
  /* Weight 500 instead of the default 400 pulls the date kicker one
     notch closer to the title in visual hierarchy without making it
     bold or larger. Colour stays muted so the title (full colour)
     still wins, just by a smaller margin. */
  font-weight: 500;
  color: var(--c-text-muted);
  line-height: 1.35;
  font-feature-settings: "tnum";
}

.ar-title {
  margin: 2px 0 0;
  /* 15px (down from 16px) — slightly less H1-like. Weight 500 stays
     unchanged. The title still leads the hierarchy (size + full
     colour); the dial-down narrows the gap to the date kicker. */
  font-weight: 500;
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.35;
}

/* Two-line clamp: long titles never push the row taller or shove the
 * CTA / phase-token zone around. The right-side reserve keeps the
 * text away from the absolutely-positioned dots + phase-token. The
 * full title stays in the title="" tooltip. */
.ar-title.ar-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  /* Title reserves only the phase indicator zone (88px + 18px row
     padding ≈ 106px). The CTA in `.ar-right-bottom` sits in its own
     vertical band below the title — see `[data-has-task="true"]
     padding-bottom: 28px` above — so it no longer needs to claim
     horizontal space here.
     Metadata lines below the title keep the wider reserve (144px)
     because they stack into the task slot's vertical zone. */
  padding-right: 108px;
}

.ar-title-anchor {
  white-space: nowrap;
}

.ar-tag-open {
  /* Calm muted token, never warning. Fixture uses
     `rgba(15,23,42,0.05)`; the warm-palette equivalent is
     `rgba(26,22,19,0.05)`. The previous lavender `--c-accent-soft`
     pulled the eye toward the tag like a brand chip. */
  display: inline-block;
  /* +5px Luft (8 → 13) zwischen Titel und Tag — Tag bleibt visuell an
     der Titelzeile verankert, hat aber genug Abstand, dass das Titel-
     wort nicht mehr in den Tag „hineinläuft". */
  margin-left: 13px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--c-text-muted);
  background: rgba(26, 22, 19, 0.05);
  border-radius: 999px;
  padding: 1px 8px;
  position: relative;
  top: -1px;
  white-space: nowrap;
  vertical-align: baseline;
}

.ar-coordination,
.ar-soft-line {
  margin: 2px 0 0;
  padding-right: 144px;
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* Active task — short, dateless state label that lives inside the
   bottom-right `.ar-task-slot`. Visually distinct from the muted
   left-column metadata: slightly larger, weight 500, right-aligned.
   No chrome, no button — the row itself remains the click target. */
.ar-user-task {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.35;
  text-align: right;
}

/* (.ar-passive-label was a right-column class for "Teilnahme bestätigt".
   The label is now rendered as a left-side .ar-soft-line with the ✓ icon
   — same chrome as "Rückmeldung gegeben" — so the dedicated class is no
   longer needed.) */

.ar-soft-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ar-clock {
  flex: 0 0 auto;
  color: var(--c-text-muted);
  position: relative;
  top: -0.5px;
}

.ar-check {
  flex: 0 0 auto;
  color: var(--c-text-muted);
  position: relative;
  top: -0.5px;
}

.aktuell-row[data-waiting="true"] .ar-title {
  font-weight: 600;
}

.ar-right-top {
  position: absolute;
  /* Lifted 5px (14 → 9) so the status cluster (dots + label) sits flush
     with the date kicker's optical line on the left, instead of reading
     as „abgesunken" below it. Dot-/Label-Innenabstände unverändert. */
  top: 9px;
  right: 18px;
  display: inline-flex;
  align-items: center;
}

.ar-right-bottom {
  position: absolute;
  bottom: 9px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}

/* Phase indicator — dots + phase label as ONE status widget, not two
   separate chips. Fixed width so the cluster's right edge sits at the
   same x-coordinate on every card (`.ar-right-top { right: 18px }` is
   already absolute-anchored — the fixed indicator width then keeps the
   widget's internal layout identical across phases).
   Children align to the right edge of the box: the dot cluster's right
   edge and the label's right edge both meet the indicator's right
   edge, so the widget hugs the side instead of floating in the centre.
   The dot cluster stays internally stable across phases because it is
   always exactly 3 dots wide; the label sits below it, sized to its
   own text content, flush right. */
.ar-phase-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  /* Fixed width — sized to the longest German label ("Abgeschlossen"
     at 0.72rem ≈ 75px) with a small breathing-room buffer so the dots
     remain positionally stable across all three phases. */
  width: 88px;
}

/* Phase-name styling INSIDE the indicator — strip the chip/button
   chrome (background, border, padding) so the label reads as part of
   the status widget rather than a button. Display stays inline-block
   (inherited from the global .ar-phase-name rule below) so the label
   sizes to its own text content; align-items: flex-end on the parent
   then pushes it flush to the right edge.
   Note: the standalone `.ar-phase-name` rule further down keeps the
   chip look for Logbook cards, which render the phase token as a
   status chip outside this indicator. */
.ar-phase-indicator .ar-phase-name {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  /* No width / text-align overrides here — letting the element size
     to its content + the parent flush it right is what produces the
     right-edge alignment described above. */
}

/* Active-task slot — bottom-right counterpart to the phase indicator.
   Only exists when the card has an OPEN / attention-requiring task;
   holds a single .ar-user-task with a short, dateless state label
   ("Bestätigung offen", "Antwort offen", "Entscheidung nötig", …).
   Passive "erledigt" markers ("Teilnahme bestätigt") live in the
   left soft-line metadata, never here. Deadline detail also belongs
   on the left as a soft horizon line — never in this slot. */
.ar-task-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 124px;
  text-align: right;
}

.ar-phase-name {
  /* Status hint, not a button. Near-transparent dark wash + hairline
     border so the token reads as a calm corner mark. Matches fixture
     `rgba(15,23,42, …)` tonality, mapped to the project's warm palette
     via `rgba(26,22,19, …)`. The previous opaque `--c-bg` filled the
     token with the same warm cream as the device surround, which
     made it read as a CTA button. */
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--c-text-muted);
  background: rgba(26, 22, 19, 0.035);
  border: 1px solid rgba(26, 22, 19, 0.10);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0;
  line-height: 1.45;
}

.ar-phase-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ar-phase-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(26, 22, 19, 0.10);
}

.ar-phase-dot[data-state="past"] { background: rgba(26, 22, 19, 0.30); }

.ar-phase-dot[data-state="current"] {
  background: rgba(26, 22, 19, 0.65);
  width: 7px;
  height: 7px;
  margin: 0 1px;
}

@media (max-width: 600px) {
  .aktuell-row {
    padding: 14px 14px 18px;
  }
  .aktuell-row[data-has-task="true"] {
    /* Mirror the desktop bump (~16px above the base padding-bottom)
       so the task slot has a dedicated vertical band on mobile too. */
    padding-bottom: 32px;
  }
  .ar-title {
    margin-bottom: 4px;
  }
  .ar-title.ar-title-clamp {
    padding-right: 104px;
  }
  .ar-coordination,
  .ar-soft-line {
    padding-right: 140px;
  }
  .ar-task-slot {
    max-width: 120px;
  }
  .ar-right-top {
    right: 14px;
    /* Mirror desktop lift (15 → 10) — gleicher Mikro-Versatz nach oben. */
    top: 10px;
  }
  .ar-right-bottom {
    right: 14px;
    bottom: 14px;
  }
  .ar-date {
    padding-right: 50px;
  }
}

.ride-card {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.ride-card:hover {
  border-color: var(--c-rule-strong);
  background: var(--c-bg);
  box-shadow: none;
}

.ride-card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.ride-card-kicker {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.ride-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ride-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-text);
  min-width: 0;
  flex: 1;
}

.ride-card-title .date {
  flex-shrink: 0;
}

.ride-card-title .dot {
  color: var(--c-rule-strong);
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-style: normal;
}

.ride-card-title .destination {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-right: 3px;
}

.ride-card-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--c-text-muted);
  align-items: center;
  flex-wrap: wrap;
}

.ride-card-meta .sep {
  color: var(--c-rule-strong);
}

.ride-card-meta .weekday {
  font-weight: 500;
  color: var(--c-text);
}

.ride-card-meta .relative {
  color: var(--c-accent);
  font-weight: 500;
}

.ride-card-meta .relative.urgent {
  color: var(--c-danger);
}

.ride-card-meta .time {
  font-family: var(--font-mono);
  color: var(--c-text);
}

.ride-card-meta .open-tag {
  color: var(--c-text-muted);
}

.ride-card-title .destination.open-coordination {
  font-style: normal;
  color: var(--c-text);
}

.ride-card-action-row {
  display: flex;
  justify-content: flex-end;
}

.ride-card-action {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  width: auto;
  min-height: unset;
}

.ride-card-action:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

.ride-card-action.strong {
  color: var(--c-accent);
}

.ride-card-action.strong:hover {
  border-bottom-color: var(--c-accent);
}

.ride-card-action .arrow {
  font-family: var(--font-mono);
  font-size: 11px;
}

.status-chip.neutral {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-text-muted);
}

.status-chip.neutral::before {
  background: var(--c-text-muted);
}

.status-chip.success {
  background: rgba(15, 81, 50, 0.08);
  color: var(--c-success);
}

.status-chip.success::before {
  background: var(--c-success);
}

.status-chip.danger {
  background: rgba(139, 26, 26, 0.08);
  color: var(--c-danger);
}

.status-chip.danger::before {
  background: var(--c-danger);
}

/* Urgent relative time in hero kicker (e.g. "heute" on ride day) */
.hero-kicker .relative.urgent {
  color: var(--c-danger);
}

/* Hero action with no primary button — secondary centered full-width */
.hero-action--centered {
  grid-template-columns: 1fr;
  grid-template-areas: "secondary" "note";
}

.hero-action--centered .action-secondary {
  justify-self: center;
}

/* Hero action with primary button only — no secondary column */
.hero-action--primary-only {
  grid-template-columns: auto;
  grid-template-areas: "button" "note";
}

.hero-action--primary-only .btn-primary {
  justify-self: start;
}

.ride-list-empty {
  max-width: 480px;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.ride-list-empty-title {
  margin: 0;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 600;
}

.ride-list-empty-sub {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 14px;
}

.ride-list-empty-cta {
  margin-top: var(--sp-2);
  padding: 0;
  background: none;
  border: none;
  color: var(--c-accent);
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .page-title { font-size: 28px; }
  .btn-primary { padding: 10px 16px; font-size: 13px; }
  .ride-card-title { font-size: 20px; }
  .ride-card-title .destination { font-size: 13px; }
}

@media (max-width: 380px) {
  .page-title { font-size: 26px; }
  .ride-card-title { font-size: 18px; }
  .ride-card-action { font-size: 13px; }
}

/* ============================================================
   PHASE 6 — CREATOR STATE COMPONENTS
   ============================================================ */

/* Action Block */
.hero-action {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rule);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "button secondary" "note note";
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
  align-items: center;
}
.hero-action .btn-primary { grid-area: button; }
.hero-action--secondary-only {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  grid-template-columns: 1fr;
  grid-template-areas: "secondary" "note";
}
#detail-primary-empty {
  display: grid;
  gap: var(--sp-2);
}
#detail-cancelled-overview-button {
  width: fit-content;
}
.btn-ghost {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  background: transparent;
  transition: border-color 120ms, background 120ms, color 120ms;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: auto;
}
.btn-ghost:hover { background: var(--c-bg-elev); border-color: var(--c-text-muted); }
.btn-ghost.danger {
  color: var(--c-danger);
  border-color: var(--c-danger);
}
.btn-ghost.danger:hover {
  color: var(--c-danger);
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

/* Section body text (e.g. Hinweise vom Organisator) */
.section-text {
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.6;
  margin: 0;
}
.action-secondary {
  grid-area: secondary;
  justify-self: end;
  display: flex;
  gap: var(--sp-2);
  width: fit-content;
}
.confirmation-action-group {
  grid-template-columns: 1fr;
  grid-template-areas: "button" "secondary" "note";
  align-items: stretch;
}
.confirmation-action-group .action-secondary {
  justify-self: stretch;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  width: 100%;
}
.confirmation-action-group .btn-primary,
.confirmation-action-group .btn-ghost {
  justify-content: center;
  width: 100%;
}
.confirmation-withdrawal-reason {
  margin-bottom: 0;
}
.action-note {
  grid-area: note;
  font-size: 13px;
  color: var(--c-text-muted);
}

/* Section Structure */
.section { margin-top: var(--sp-5); }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-rule);
  gap: var(--sp-3);
}
/* WC-FINAL-01 (2026-05-21): explicit `margin: 0` resets the global
   `h2 { margin: 0 0 12px }` default at styles.css:390. Without this,
   every `<h2 class="section-title">` inherited a 12 px margin-bottom
   that stacked between the heading text and the next content element —
   most visibly on the post-ride form where `.creator-follow-up-form
   .section-header { margin-bottom: 2px }` was being silently
   overridden by the h2's own 12 px margin. The sibling
   `.form-section-title` (line below) has carried `margin: 0` since
   day one; this aligns `.section-title` with the same canonical
   no-margin contract — positioning belongs to the wrapper. */
.section-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-text); }
/* WC-POLISH-23 (2026-05-21): `.pc-label` joins the canonical
   section-title typography family — same 15 / 600 / var(--c-text) used
   by `.section-title`, `[data-terminal-headline]`, and the post-ride
   form headings. The previous state-scoped per-`data-ui-state`
   duplicates of these declarations were retired; the heading slot
   still carries `.pc-label` as a structural marker (used by
   `.wer-kommt-mit:has(> .pc-label)` to anchor the divider rule).
   WC-FINAL-02 (2026-05-21): explicit `margin: 0` resets the global
   `h2 { margin: 0 0 12px }` default and the browser-default `<p>`
   margin (the confirmation surface emits `<p class="pc-label">`,
   not `<h2>`). State-scoped rules add positioning margin where
   needed; this canonical declaration carries no positioning of its
   own. */
.pc-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--c-text);
  text-transform: none;
}
.section-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-muted);
}

/* Avatar */
.avatar {
  border-radius: 50%;
  background: var(--c-rule);
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar-sm { width: 26px; height: 26px; font-size: 10px; }

/* Invitee List */
.invitee-list { display: flex; flex-direction: column; }
.invitee {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: 14px;
  align-items: center;
}
.invitee:last-child { border-bottom: none; }
.invitee-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-dim);
}
.invitee-status.confirmed { color: var(--c-success); font-weight: 500; }
.invitee-status.pending { color: var(--c-text-dim); }
.invitee-status.withdrew { color: var(--c-danger); }
.invitee-status.ok { color: var(--c-success); }
.invitee-status.no { color: var(--c-danger); }
.invitee.is-you { font-weight: 500; }
.invitee.is-you .you-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-accent);
  margin-left: 6px;
  font-weight: 500;
}

/* Summary Bar */
.summary-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-success-soft);
  border: 1px solid rgba(15, 81, 50, 0.15);
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-success);
  margin-bottom: var(--sp-4);
}
.summary-bar .icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-success);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Form Fields */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.form-field:last-child { margin-bottom: 0; }
[aria-labelledby="create-section-zeit"] .form-field { margin-bottom: var(--sp-2); }

/* Compact inline label + input row (WANN: Start / Ende inline) */
.form-field-inline {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.form-field-inline:last-child { margin-bottom: 0; }
.form-field-inline > .form-field-label {
  margin: 0;
  align-self: center;
}
.form-field-inline > .schedule-input-row { grid-column: 2; }
.form-field-inline > .duration-hint,
.form-field-inline > .create-end-helper {
  grid-column: 2;
  margin-top: 2px;
}
.final-route-input-group {
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.48);
}
.final-route-input-group .form-field {
  margin-bottom: 0;
}
.form-field-copy {
  display: grid;
  gap: var(--sp-1);
}
.form-field-label {
  font-size: 11px;
  color: var(--c-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-input,
.form-textarea,
.form-select {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  background: var(--c-bg-elev);
  font-family: var(--font-sans);
  color: var(--c-text);
  width: 100%;
  transition: border-color 120ms;
  box-sizing: border-box;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--c-accent);
}
.form-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}
.form-hint { font-size: 12px; color: var(--c-text-dim); }

.duration-hint {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: var(--sp-1);
}
.form-readonly {
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 4px;
  color: var(--c-text);
}

/* Chip Toggle */
.chip-toggle-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-toggle {
  width: auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-bg-elev);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: border-color 120ms, color 120ms, background 120ms;
  cursor: pointer;
}
.chip-toggle:hover { border-color: var(--c-text-muted); color: var(--c-text); }
.chip-toggle[aria-pressed="true"] {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Form Section
 *
 * Divider rule (canonical):
 *   Each section after the first in its parent gets a single top divider
 *   (border-top). The first section in any parent never has one. Headers
 *   never carry a bottom divider. Implemented via the general-sibling
 *   combinator so hidden inputs/divs between sections don't break the rule.
 *   Never doubled, never decorative-empty, never above+below at once.
 */
.form-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.form-section ~ .form-section {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-rule);
}
.form-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--sp-2);
  padding: 0;
  border-bottom: 0;
  gap: var(--sp-3);
  line-height: 1.25;
}
.form-section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--c-text);
}

/* Invitee Info Panel */
.invitee-info {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0, 0, 0, 0.025);
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Form Actions */
.form-actions {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rule);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-3);
}
.btn-cancel {
  width: auto;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 500;
  transition: color 120ms;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-cancel:hover { color: var(--c-text); }

/* Sub-Rating & Optional Divider */
.sub-rating {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.sub-rating:last-child { margin-bottom: 0; }
.sub-rating .form-field-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--c-text);
  font-weight: 500;
}
.optional-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.optional-divider-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.optional-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule);
}

/* 3-Choice Group */
.choice-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.trait-block {
  display: grid;
  gap: var(--sp-3);
}
.trait-block-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}
.trait-block-copy {
  margin: calc(var(--sp-2) * -1) 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.choice-btn {
  width: auto;
  min-height: 44px;
  padding: 10px var(--sp-3);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: border-color 120ms, color 120ms, background 120ms;
  cursor: pointer;
}
.choice-btn:hover { border-color: var(--c-text-muted); color: var(--c-text); }
.choice-btn.selected,
.choice-btn[aria-pressed="true"] {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Step 10B — Tourcharakter polish. The trait-host scope softens the
   default choice-btn into a quieter, typographic pill: hairline border,
   symbol + word, no accent-blue text. Selected = soft cream wash + ink
   color, not a brand-blue badge. Cluster eyebrow groups Qualität and
   Charakter with minimal vertical weight (no card, no divider). */
.ride-detail-organizer-v13 [data-trait-host] .choice-group {
  gap: var(--sp-1);
}
.ride-detail-organizer-v13 [data-trait-host] .choice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  font-weight: 400;
  color: var(--c-text-muted);
}
.ride-detail-organizer-v13 [data-trait-host] .choice-btn:hover {
  border-color: var(--c-rule-strong);
  color: var(--c-text);
  background: transparent;
}
.ride-detail-organizer-v13 [data-trait-host] .choice-btn.selected,
.ride-detail-organizer-v13 [data-trait-host] .choice-btn[aria-pressed="true"] {
  background: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
  color: var(--c-text);
  font-weight: 500;
}
.ride-detail-organizer-v13 [data-trait-host] .choice-symbol {
  font-size: 14px;
  line-height: 1;
  color: var(--c-text-muted);
  font-feature-settings: "tnum";
  display: inline-block;
  min-width: 12px;
  text-align: center;
}
.ride-detail-organizer-v13 [data-trait-host] .choice-btn[aria-pressed="true"] .choice-symbol {
  color: var(--c-text);
}
.ride-detail-organizer-v13 [data-trait-host] .choice-label {
  display: inline-block;
}

.creator-follow-up-star-rating-primary label { font-size: 28px; min-width: 2.4rem; }

.intro-text {
  font-size: 14px;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
  max-width: 560px;
}

/* Task section panels */
.section-panel {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
}

/* Task screen hero additions */
.hero-destination {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: var(--sp-2) 0 0 0;
}
.hero-task-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
  margin: var(--sp-5) 0 var(--sp-1) 0;
}
.breadcrumb a,
.breadcrumb button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-family: inherit;
  width: auto;
  flex-shrink: 0;
  min-height: unset;
  font-weight: inherit;
}
.breadcrumb a:hover,
.breadcrumb button:hover {
  color: var(--c-text);
}
.btn-ghost-sm {
  padding: 4px 10px;
  font-size: 12px;
}
.form-field-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.form-field-action-row .form-field-label {
  margin-bottom: 0;
}
.finalization-inline-cancellation {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
}

/* ─── Response Choice (Participation) ─────────────────────────── */
.response-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.response-btn {
  padding: var(--sp-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule-strong);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  color: var(--c-text);
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.response-btn.selected[data-type="yes"] {
  background: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success);
}
.response-btn.selected[data-type="no"] {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* ─── Toggle Link ──────────────────────────────────────────────── */
.toggle-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--c-text-muted);
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.toggle-link:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-rule-strong);
}
.toggle-link[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* ─── Time Window Picker ───────────────────────────────────────── */
.time-window {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 6px;
}
.time-window-hint {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}
/* Constraint toggles: two pills that reveal the matching picker on demand.
   Toggling never saves — only a concrete change of a revealed picker
   commits, per the respond-flow spec. */
.constraint-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.constraint-toggle {
  /* WC-POLISH-12 (2026-05-21): visual affordance only. The state-machine
     (setRespondConstraintToggle + aria-pressed wiring) is unchanged.
     Pre-polish the border was `var(--c-rule)` (#e6e1d7) on a near-cream
     background — the affordance read as a label, not as a control.
     - Stronger neutral border (`var(--c-rule-strong)`) makes the pill
       perimeter visible without changing semantic colour.
     - `font-weight: 500` distinguishes the label from the surrounding
       `.time-window-hint` and `.constraint-too-narrow` muted text.
     - The leading "+" pseudo (text node injected by CSS, aria-hidden by
       virtue of being a CSS pseudo) signals that pressing the row adds a
       constraint; the pressed state swaps it for "✓" to mirror the
       active-toggle semantic — no DOM, no JS, no state changes. */
  flex: 1 1 auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* Reset Safari/iOS default button form styles to keep the pill clean
     and match the existing Workspace button family rhythm. */
  -webkit-appearance: none;
  appearance: none;
}
.constraint-toggle::before {
  content: "+";
  display: inline-block;
  margin-right: 6px;
  font-weight: 400;
  color: var(--c-text-muted);
}
.constraint-toggle:hover:not([aria-pressed="true"]):not([disabled]):not([aria-disabled="true"]) {
  border-color: var(--c-text-muted);
  background: rgba(15, 23, 42, 0.03);
}
.constraint-toggle[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: rgba(49, 86, 211, 0.08);
  color: var(--c-text);
}
.constraint-toggle[aria-pressed="true"]::before {
  content: "✓";
  color: var(--c-accent);
  font-weight: 600;
}
.constraint-toggle:focus-visible {
  outline: 2px solid rgba(49, 86, 211, 0.5);
  outline-offset: 2px;
}
.constraint-toggle[disabled],
.constraint-toggle[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.constraint-too-narrow {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  color: var(--c-text-muted);
  background: rgba(15, 23, 42, 0.04);
  border-radius: 6px;
}
/* T106b: optional OPEN decline-reason picker. Revealed only while "Nicht
   dabei" is active. Shares the pill language of the constraint toggles but
   without the leading "+"/"✓" affordance — a reason is a single optional pick,
   not an additive constraint. Selecting is never required. */
.decline-reason {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 6px;
}
.decline-reason-hint {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}
.decline-reason-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.decline-reason-chip {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.decline-reason-chip:hover:not([aria-pressed="true"]):not([disabled]) {
  border-color: var(--c-text-muted);
  background: rgba(15, 23, 42, 0.03);
}
.decline-reason-chip[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: rgba(49, 86, 211, 0.08);
  color: var(--c-text);
}
.decline-reason-chip:focus-visible {
  outline: 2px solid rgba(49, 86, 211, 0.5);
  outline-offset: 2px;
}
.time-window-hint .frame-value {
  font-family: var(--font-mono);
  color: var(--c-text);
  font-weight: 500;
}
.time-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.time-pair {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.time-pair-label {
  font-size: 11px;
  color: var(--c-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.time-pair-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.time-pair-inputs .form-select {
  padding: 8px;
  font-family: var(--font-mono);
  text-align: center;
  font-size: 14px;
  width: auto;
  min-width: 0;
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 600px) {
  .hero-action {
    grid-template-columns: 1fr;
    grid-template-areas: "button" "note" "secondary";
  }
  .hero-action .btn-primary { width: 100%; }
  .action-secondary { justify-self: stretch; justify-content: center; }
  .action-note { text-align: center; }
  .trait-block {
    gap: var(--sp-2);
  }
  .trait-block-copy {
    margin-top: -2px;
    font-size: 12px;
    line-height: 1.4;
  }
  .choice-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .choice-btn {
    min-height: 44px;
    padding: 8px 4px;
    font-size: 12px;
    line-height: 1.15;
  }
}

/* ── Map enlarge ─────────────────────────────────────────────────────────── */

.map-enlarge-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
}

.map-enlarge-header {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px;
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
}

.map-enlarge-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  color: inherit;
}

.map-enlarge-map {
  flex: 1;
  min-height: 0;
}

.start-area-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  max-width: 560px;
}

.required-setup-shell {
  max-width: 560px;
  margin: 0 auto;
  padding-top: var(--sp-5);
}

.required-setup-shell .page-title {
  margin-bottom: var(--sp-3);
}

.required-setup-intro {
  max-width: 34rem;
}

.required-setup-form {
  display: grid;
  gap: 18px;
  margin-top: var(--sp-5);
}

.required-setup-field-head {
  display: grid;
  gap: 4px;
  margin-bottom: var(--sp-3);
}

.required-setup-start-area-field .start-area-map-wrap {
  margin-top: 0;
}

.required-setup-actions {
  justify-content: flex-start;
  padding-top: var(--sp-2);
}

.required-setup-actions .primary-button {
  min-width: 172px;
}

.profile-settings-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin-top: 20px;
}

.profile-settings-actions {
  justify-content: flex-start;
}

.profile-settings-list {
  display: grid;
  margin-top: 20px;
  max-width: 560px;
  border-top: 1px solid var(--surface-border);
}

.profile-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--surface-border);
  background: transparent;
  color: var(--c-text, #0f172a);
  font: inherit;
  text-align: left;
}

.profile-settings-row strong,
.profile-settings-row small {
  display: block;
}

.profile-settings-row strong {
  font-size: 0.94rem;
  font-weight: 650;
}

.profile-settings-row small {
  margin-top: 3px;
  color: var(--c-muted, #64748b);
  font-size: 0.84rem;
  line-height: 1.35;
}

.profile-settings-row:not(.is-disabled) {
  cursor: pointer;
}

.profile-settings-row:not(.is-disabled):hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-settings-row.is-disabled {
  color: var(--c-muted, #64748b);
}

/* The notifications row is informational (only its inner button is interactive),
   so it must not borrow the clickable Startpunkt row's pointer/hover affordance. */
.profile-settings-row.profile-settings-row--static {
  cursor: default;
}

.profile-settings-row.profile-settings-row--static:hover strong {
  text-decoration: none;
}

/* The enable/disable control is a compact, right-aligned secondary action — not
   the full-width button used in form action areas. */
.profile-settings-row--static .secondary-button {
  flex: 0 0 auto;
  width: auto;
}

.push-debug-panel {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--surface-border);
  color: var(--c-muted, #64748b);
  font-size: 0.78rem;
  line-height: 1.35;
}

.push-debug-panel dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.push-debug-panel div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
}

.push-debug-panel dt,
.push-debug-panel dd {
  margin: 0;
}

.push-debug-panel dt {
  color: var(--c-muted, #64748b);
  font-weight: 650;
}

.push-debug-panel dd {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--c-text, #0f172a);
}

.start-area-map-helper {
  color: var(--c-muted, #64748b);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.start-area-map-wrap {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.start-area-map {
  min-height: 280px;
}

.start-area-radius-field {
  border: 0;
  margin: 0;
  padding: 0;
}

.start-area-radius-field .field-helper {
  color: var(--c-muted, #64748b);
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0 8px;
}

.start-area-radius-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.start-area-radius-options label {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  padding: 6px 8px;
}

.start-area-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.start-area-remove-button {
  color: var(--c-text-muted, #64748b);
  font-size: 13px;
  min-height: 36px;
  padding: 4px 0;
}

.start-area-remove-button:disabled,
.start-area-remove-button[hidden] {
  display: none;
}

.start-area-marker-icon {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
}

.start-area-marker-dot {
  background: #1d4ed8;
  border: 3px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.28);
  display: block;
  height: 18px;
  width: 18px;
}

@media (max-width: 640px) {
  .start-area-map {
    min-height: 280px;
  }

  .start-area-radius-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Tour Library Clarity ───────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   Discover v3 — journal hierarchy (production baseline).
   The list reads as a notebook of entries. Identity comes from typographic
   rhythm — Serif title, italic byline + dek, body-size character row, small
   uppercase facts, quiet rating. No per-row decoration, no exact dates.
   ────────────────────────────────────────────────────────────────────────── */

/* Discover-scoped journal palette. Inherits the app surfaces but tightens the
   warm ink used for the dek and byline. Scoped to Discover screens so other
   surfaces are not affected. */
#library-screen, #tour-detail-screen {
  --discover-ink: var(--c-text);
  --discover-muted: var(--c-text-muted);
  --discover-muted-strong: #3d342a;
  --discover-rule: rgba(40, 30, 20, 0.10);
  --discover-rule-soft: rgba(40, 30, 20, 0.06);
  --discover-pull-ink: #5a3a14;
  --discover-gold: #a9762a;
  --post-ride-surface-bg: var(--c-bg);
  --post-ride-surface-border: var(--c-rule);
  --post-ride-surface-radius: 16px;
  --post-ride-surface-shadow: 0 8px 22px rgba(26, 22, 19, 0.04);
}

/* v3.8.2: Discover shell width aligned with Ausfahrten.
   The v3.1-era Discover-only desktop content-column widening (~1040 px) was
   retired. That override had a side-effect that the v3.1 commit did not
   record: at desktop widths the inner .logbook-frame (max-width 720 px)
   clamped to its full cap on Discover but only to the parent content-box
   on Ausfahrten (720 px minus the 32 px horizontal padding on .content),
   so the framed cards rendered with different widths and slightly
   different left-edge positions across the two surfaces. Discover now
   inherits the global .content rule (via the --max-content token), so
   both surfaces render the framed list at the same width and horizontal
   position. The Discover-scoped journal palette + typography (above) and
   the rest of the Discover-specific rules remain intact — only the
   outer-container clamp was retired. */

/* v3.4: Discover masthead retired. The global top navigation already names
   the surface; the framed list (.logbook-frame) is now the visual entry
   point. The .discover-masthead-* CSS hooks are gone — if the markup ever
   needs to re-introduce a surface heading, define new rules at that time. */

#tour-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Collapse the live-region status row when empty so it doesn't add a
   ~24px gap above the page title. Mirrors #ride-list-status in Ausfahrten. */
#tour-list-status {
  min-height: 0;
  margin: 0;
}
#tour-list-status:empty {
  display: none;
}

/* Discover v3 tour card.
   Hierarchy (top → bottom):
     1. Byline:    Geteilt von Bob · Frühjahr 2024   (italic muted)
     2. Title:     Spreewald-Runde                   (Discover Serif)
     3. Dek:       "..."                              (italic warm ink, 2-line clamp)
     4. Character: Kurvenreich · Wenig Verkehr · …   (body-size, lead identity)
     5. Facts:     BRANDENBURG · 168 KM · STRECKE    (small-caps, technical)
     6. Rating:    ★★★★☆ 4,3 (12)                   (quiet, last)
   Borderless rows separated by a soft hairline. No per-row ornament. */
#tour-list .tour-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 8px 24px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--discover-rule-soft);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background 120ms ease;
}
#tour-list .tour-card:last-child {
  border-bottom: 0;
}
#tour-list .tour-card:hover {
  background: rgba(40, 30, 20, 0.018);
}
#tour-list .tour-card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}

/* 1. Byline */
#tour-list .tour-card-byline {
  margin: 0;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 15px;
  color: var(--discover-muted);
  line-height: 1.35;
}
#tour-list .tour-card-byline-creator {
  color: var(--discover-muted-strong);
}
/* T91 — historical / imported tour marker on the list card. A small uppercase
   eyebrow (category signal), deliberately NOT a person byline, so a curated
   tour never reads as a shared/ridden Ridync experience. */
#tour-list .tour-card-source-badge {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--discover-muted-strong);
  line-height: 1.4;
}

/* 2. Title row — Serif title; flex row kept for the saved indicator.
   The former GPX badge is retired: post-T169 every Discover tour carries
   reference geometry, so the badge no longer differentiated anything. */
#tour-list .tour-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 2px;
  min-width: 0;
}
#tour-list .tour-card-title {
  margin: 0;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--discover-ink);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Subtle "gemerkt"-Indikator on Discover list cards.
   Not a button, not a CTA. Just a small glyph that signals the tour is in
   the viewer's personal saved set. The save / unsave action lives on the
   Tour-Detail page as a Secondary Action — the card stays a calm reading
   surface. Only rendered when `tour.is_saved === true`. */
#tour-list .tour-card-saved-indicator {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  opacity: 0.55;
  align-self: center;
  letter-spacing: 0;
  cursor: default;
}

/* Tour-Detail "Merken" Secondary Action reuses the canonical .btn-secondary
   from the Tour-Detail action family (same class as the GPX-Download anchor
   on this surface). No bespoke button variant — size, padding, border,
   hover, and focus all come from the shared rule. State signalling stays
   inside the label copy: "Merken" → "✓ Gemerkt" (textual checkmark
   indicates the persisted state without inventing a new visual variant). */

/* 3. Dek — italic pull-quote, two-line clamp. */
#tour-list .tour-card-dek {
  margin: 4px 0 2px;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  color: var(--discover-pull-ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* 4. Facts — small-caps technical footer. */
#tour-list .tour-card-facts {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--discover-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  font-weight: 500;
}
#tour-list .tour-card-facts .tour-fact-sep { color: var(--discover-rule); letter-spacing: 0; }

/* 3b. Moment badges — objective creator-curated point moments. Deliberately
   quiet: no fill colour, no border box, no chip shape. Reuses the muted
   Discover ink and a hairline outline so the badges read as calm typographic
   tags that sit under the facts row without competing with title or rating. */
#tour-list .tour-card-moments {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.5;
}
#tour-list .tour-card-moment {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--discover-muted);
  border: 1px solid var(--discover-rule);
  border-radius: 999px;
  padding: 1px 8px;
}

/* 5. Rating — quiet quality signal, last. */
#tour-list .tour-card-rating {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--discover-muted);
  font-variant-numeric: tabular-nums;
}
/* T165a: the stars reuse the shared readonly star primitive
   (renderReadOnlyStars) with the shared flat variant
   (`data-appearance="flat"`) — the same quiet inline-glyph optic as the
   Discover detail route header. Sizing, colour and gap all come from that
   shared variant; nothing is card-local. */
#tour-list .tour-card-rating-num { color: var(--discover-muted-strong); font-weight: 500; }
#tour-list .tour-card-rating-count { color: var(--discover-muted); }

/* ── Discover detail (v3) ─────────────────────────────────────────────── */

/* Detail hero — byline above title, no decorative mark. */
.tour-detail-hero { padding-bottom: 4px; }
/* T91 — imported tour marker on the detail hero. */
.tour-detail-source-badge {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--discover-muted-strong);
  line-height: 1.4;
}
.tour-detail-byline {
  margin: 0 0 8px;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-style: italic;
  font-size: 16px;
  color: var(--discover-muted);
  line-height: 1.35;
}
.tour-detail-byline-creator { color: var(--discover-muted-strong); }
.tour-detail-title {
  margin: 0;
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--discover-ink);
}

.tour-detail-route-card .section-title {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--discover-muted); font-weight: 600;
  margin: 0 0 12px;
}
/* Route card — quieter heading, absorbs Region/Ziel/Stil rows. */
.tour-detail-route-card .section-title { margin-bottom: 12px; }

@media (max-width: 600px) {
  /* v3.1: tighter vertical rhythm on mobile.
     Card gap reduced from 6 → 3 px; the dek's top margin reduced so the
     title → description gap drops ~35-40 %. */
  /* Tighten only the VERTICAL rhythm on mobile (26→20 top, 24→18 bottom).
     The horizontal inset stays 8px — matching the desktop card — so the
     card content ("Geteilt von …", title, dek) keeps a constant left start
     across breakpoints instead of sliding 4px toward the card edge on
     narrow widths. (Ausfahrten's .ride-card keeps a constant token inset
     for the same reason.) The toolbar row keeps its own 16px padding. */
  #tour-list .tour-card { padding: 20px 8px 18px; gap: 3px; }
  #tour-list .tour-card-title { font-size: 21px; margin-top: 0; }
  #tour-list .tour-card-dek { font-size: 15px; margin: 3px 0 0; }
  #tour-list .tour-card-facts { font-size: 10px; letter-spacing: 0.1em; margin-top: 4px; }
  #tour-list .tour-card-rating { margin-top: 6px; }
  .tour-detail-title { font-size: 1.7rem; }
  .tour-detail-byline { font-size: 14px; }
}

/* Hide tab container when empty — tabs reuse .tab-nav styling otherwise */
.tour-participation-tabs:empty {
  display: none;
}

/* Discover v3.8 toolbar — flat flex chain of four direct controls (Dauer,
   Nur GPX, Ort, Sortierung). The v3.4-era split into .tour-filter-bar /
   .tour-sort-bar wrappers caused the sort to wrap onto its own band on
   mobile widths. Flattening lets individual controls wrap fluidly without
   creating a visually-isolated sort row. The sort dropdown is pushed to
   the trailing edge via `margin-left: auto` so the desktop one-row layout
   still reads as "filters left, sort right" without a wrapper element.
   Same horizontal padding as .logbook-frame-head so the toolbar reads as
   a continuation of the framed structure. */
.tour-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* v3.13: nowrap at ALL widths. The previous flex-wrap:wrap let Sortierung
     drop onto its own row at intermediate widths (~600–760px, where the 720px
     card is too narrow to seat all four controls on one line). That wrapped
     row was the root cause of the awkward empty band above the first tour card
     and the large toolbar-height jumps while resizing. With nowrap the row
     height is constant across widths; a tight viewport shrinks the selects
     (see below) instead of wrapping. */
  flex-wrap: nowrap;
  padding: 10px 16px;
}
/* v3.13: toolbar controls size to their CONTENT and may shrink, but never grow
   — so the row stays compact and proportional to its content instead of
   stretching the selects to fill the width (the old `flex: 1 1 0` made Nähe and
   Dauer each eat half the row). `min-width: 0` on each select makes it the
   shrink target on a narrow phone (nowrap-safety), while the nowrap label keeps
   its width. The Filter trigger never shrinks. */
.tour-toolbar > .tour-filter-field {
  flex: 0 1 auto;
  min-width: 0;
}
.tour-toolbar > .tour-filter-field > .tour-filter-select {
  min-width: 0;
}
.tour-toolbar > .tour-more-filters {
  flex: 0 0 auto;
}
/* Sortierung is pushed to the trailing edge on desktop/tablet; Nähe, Dauer and
   the Filter trigger group at the leading edge. Filter stays in the leading
   group at every width — it never moves across the 600px boundary — so resizing
   only shows/hides Sortierung at the trailing edge, with no horizontal jump and
   a constant toolbar height. */
.tour-toolbar > .tour-sort-field {
  margin-left: auto;
}
@media (max-width: 600px) {
  /* v3.13: mobile keeps the same one-row, content-sized model as desktop. Only
     two things change: Sortierung is hidden (desktop-only ordering control) and
     the gap/padding tighten slightly. Because the controls are content-sized
     (not stretched), [Nähe] [Dauer] [Filter] stay compact and only shrink if a
     very narrow phone genuinely needs it. */
  .tour-toolbar {
    gap: 10px;
    padding: 8px 14px;
  }
  .tour-toolbar > .tour-sort-field { display: none; }

  /* v3.3: the Discover-specific +24px bottom cushion was retired — the
     global `.shell` already reserves 16px above the bnav, which is the
     "~16-24px max" gap the v3.3 spec asks for. Stacking another 24px on
     top produced a visible empty void before the bottom navigation. */
}
.tour-filter-field {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text-muted);
}
.tour-filter-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Keep "📍 Nähe" / "Dauer" on one line. On mobile the field shrinks (the
     select absorbs it via min-width:0); without this the label itself would
     wrap (icon over text) when space gets tight. */
  white-space: nowrap;
}
.tour-filter-select {
  font-family: inherit;
  font-size: 12px;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  padding: 4px 26px 4px 8px;
  /* Shared toolbar-control register height. A native <select> renders ~1.5px
     taller than a text <input>/<button> at identical padding (its 16px
     intrinsic content line box vs ~14.5px for a 12px text run), so padding
     parity alone does NOT yield equal heights. Pinning all three register
     members — select, .tour-filter-input, .tour-more-filters-summary — to the
     same 26px (the select's natural height: 16 + 8 padding + 2 border) makes
     the Filter trigger the same height as its neighbours in BOTH the Entdecken
     (selects) and Logbuch (search field) toolbars. No-op for the select
     itself; lifts the shorter text controls onto the common baseline. */
  min-height: 26px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.tour-filter-select:hover { border-color: var(--c-rule-strong); }
.tour-filter-select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.tour-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text-muted);
  cursor: pointer;
  user-select: none;
}
.tour-filter-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--c-text);
  cursor: pointer;
}
.tour-filter-checkbox:hover { color: var(--c-text); }

/* Ort combobox (Discover v3.x — searchable Ort filter). Replaces the v3.8
   native <select>. The shell is positioned so the suggestion popover can
   anchor to it; the input adopts the same calm typographic register as the
   sibling .tour-filter-select. */
.tour-ort-combobox {
  align-items: center;
}
.tour-ort-combobox-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Suppress the WebKit/Blink built-in search-field decorations so the custom
   `#tour-ort-clear` button is the only ✕ in the combobox. Without this rule
   the native search-cancel button overlapped our own affordance, producing
   two stacked icons. `appearance: textfield` strips the native field chrome
   on Safari/Chromium; the four pseudo-element resets target the cancel /
   results buttons that survive `appearance: textfield` on older WebKit. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"] {
  appearance: textfield;
}

.tour-filter-input {
  font-family: inherit;
  font-size: 12px;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  padding: 4px 26px 4px 8px;
  /* Shared toolbar-control register height — see .tour-filter-select. Lifts the
     search field from its ~24.5px text-natural height onto the common 26px so
     the Logbuch [Suchfeld] [Filter] pair reads as equally tall. */
  min-height: 26px;
  width: 220px;
  max-width: 60vw;
  transition: border-color 120ms ease, color 120ms ease;
}
.tour-filter-input::placeholder {
  color: var(--c-text-muted);
}
.tour-filter-input:hover { border-color: var(--c-rule-strong); }
.tour-filter-input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.tour-ort-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--c-text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.tour-ort-clear:hover {
  color: var(--c-text);
  background: rgba(0, 0, 0, 0.05);
}

/* Logbuch toolbar — reuses the Discover `.tour-toolbar` register + the shared
   Filter <dialog>. The search field keeps its NATURAL width (not full-width):
   `.tour-ort-combobox-shell` is already inline-flex; here it just becomes a
   content-sized, shrink-capable toolbar item so a narrow phone can compress it
   (nowrap-safety), exactly like the Discover `.tour-filter-field` controls. */
.logbook-toolbar > .logbook-search-shell {
  flex: 0 1 auto;
  min-width: 0;
}
.logbook-toolbar > .logbook-more-filters {
  flex: 0 0 auto;
}
.tour-ort-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 100%;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 50;
}
.tour-ort-suggestion {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
}
.tour-ort-suggestion:hover,
.tour-ort-suggestion.is-active {
  background: rgba(0, 0, 0, 0.04);
}
.tour-ort-suggestion-empty {
  color: var(--c-text-muted);
  cursor: default;
  font-style: italic;
}
.tour-ort-suggestion-empty:hover { background: transparent; }

/* v3.11: the Sortierung control moved into the filter dialog and now renders
   as a normal labelled `.tour-filter-select` row (see `.tour-more-filters-field`
   above). The retired toolbar trailing control's rules (`.tour-sort`,
   `.tour-sort-trigger`, `.tour-sort-select`, `.tour-sort-label`) were removed
   because nothing in the production DOM matches them anymore. */

/* Discover v3.8.5: "Weitere Filter" disclosure. Lightweight <details>-based
   popover anchored to the right edge of the toolbar (left on mobile). Hosts
   the secondary controls (Nur GPX, Ort, Sortierung) so the primary surface
   shows only Nähe + Dauer + the disclosure trigger. No JS — relies on
   native <details> open/close. */
.tour-more-filters {
  position: relative;
  font-size: 12px;
}
/* v3.12: compact funnel + "Filter" trigger. Shares the EXACT box metrics of the
   sibling `.tour-filter-select` / `.tour-filter-input` register: same font-size
   (12px), same vertical padding (4px), same 1px rule and 6px radius; the icon is
   sized at 13px so it stays within the text line box and never makes the button
   taller than those controls. Result: [Nähe] [Dauer] [Filter] (Entdecken) and
   [Suchfeld] [Filter] (Logbuch) read as equally-weighted, equally-tall
   lightweight controls — no heavy CTA button. */
.tour-more-filters-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  /* Match the sibling .tour-filter-select / .tour-filter-input box: same 4px
     vertical padding, 1px border and 6px radius, and the SAME 26px shared
     register height (see .tour-filter-select) — this both overrides the global
     button min-height (44px touch target) and lifts the trigger's shorter text
     line box onto the common baseline, so it is exactly as tall as the
     neighbouring selects (Entdecken) and search field (Logbuch). `line-height:
     normal` keeps the text line box identical to the sibling controls. */
  min-height: 26px;
  line-height: normal;
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  padding: 4px 10px;
  list-style: none;
  user-select: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.tour-more-filters-icon {
  flex: none;
  display: block;
}
.tour-more-filters-summary::-webkit-details-marker { display: none; }
.tour-more-filters-summary::marker { content: ""; }
.tour-more-filters-summary:hover {
  color: var(--c-text);
  border-color: var(--c-rule-strong);
}
.tour-more-filters-summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.tour-more-filters-summary[aria-expanded="true"] {
  color: var(--c-text);
  border-color: var(--c-rule-strong);
}
/* v3.8.7: disclosure body is a vertical stack of two rows (Nur GPX, Ort).
   Both rows share a consistent left edge so the visual register reads as
   "one column of controls" — the Ort label sits above its input on a
   separate line so the input can use the full body width without the
   inline-label squeezing it. */
/* The body is a native <dialog>. Reset the UA dialog box (centered, margin
   auto, default border) and present it as the desktop anchored popover. A
   closed <dialog> is `display: none` via the UA sheet; we only switch it to
   flex when [open], so it never shows in normal flow. */
.tour-more-filters-body {
  /* Desktop anchored popover. `position: fixed` (not absolute) anchors it to
     the viewport so the rounded `.logbook-frame` ancestor's `overflow: hidden`
     can't clip it — fixed resolves against the viewport, and no ancestor sets a
     containing block (no transform/filter/contain). The exact top/right under
     the "Filter" trigger is set in JS (initTourMoreFilters →
     positionDesktopPopover) and kept in sync on scroll/resize; the mobile
     @media [open] rule below re-docks it as a bottom sheet. */
  position: fixed;
  /* Reset the UA <dialog> default `inset-inline: 0` (left:0; right:0). Without
     this the UA `left: 0` wins in LTR and the popover pins to the viewport's
     left edge — JS only sets `top`/`right`, so `left`/`bottom` must stay auto
     for the right-aligned anchor under the "Filter" trigger to take effect. */
  inset: auto;
  margin: 0;
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--c-bg-elev);
  color: var(--c-text);
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.tour-more-filters-body[open] {
  display: flex;
}
/* v3.12: the dialog is now a stack of labelled groups (Region, Weitere Filter)
   rather than a flat list. Each group is its own column with its own internal
   gap; consecutive groups are separated by a hairline divider with top padding.
   The dialog's own `gap` (12px desktop / 16px mobile) provides the base spacing
   above the divider, so we add only `padding-top` + `border-top` here — no
   extra margin, to avoid double-counting the spacing. */
.tour-filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tour-filter-group + .tour-filter-group {
  padding-top: 14px;
  border-top: 1px solid var(--c-rule);
}
.tour-filter-group-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.tour-filter-group > .tour-filter-checkbox {
  align-self: flex-start;
}
.tour-more-filters-body .tour-ort-combobox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.tour-more-filters-body .tour-ort-combobox-shell {
  width: 100%;
}
.tour-more-filters-body .tour-filter-input {
  width: 100%;
  max-width: none;
}

@media (max-width: 600px) {
  /* v3.10: on mobile the dialog is opened with showModal() → it lives in the
     browser TOP LAYER, so `position: fixed` is anchored to the viewport by the
     browser itself, regardless of ancestor transform/overflow/stacking. This
     replaces the v3.9 CSS bottom-sheet, which was correct in Chromium but
     mis-positioned on iOS WebKit (fixed elements in a scrolled standalone PWA)
     and so looked like a stuck legacy panel. `::backdrop` is the native dim —
     no `::before` hack. Desktop (>600px) opens it non-modal (anchored popover).
     The `[open]` here is the dialog's own attribute (set by showModal). */
  .tour-more-filters-body[open] {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 80vh;
    overflow-y: auto;
    margin: 0;
    gap: 16px;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--c-rule);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.18);
    -webkit-overflow-scrolling: touch;
  }
  .tour-more-filters-body::backdrop {
    background: rgba(15, 23, 42, 0.32);
  }
}

/* v3.8.6: disabled-state styling for the Nähe field when no Startbereich
   is set. The select itself already gets the browser default disabled
   appearance; we reduce opacity on the wrapping field and flip the cursor
   so the inert state is visually consistent across the label, the icon,
   and the select. The explanatory copy lives on the `title` attribute
   (set by `renderTourProximityControls`) and surfaces as a native hover
   tooltip. */
.tour-filter-field.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tour-filter-field.is-disabled > .tour-filter-select {
  cursor: not-allowed;
  pointer-events: none;
}

/* Detail: reduce hero breathing room */
#tour-detail-screen .ride-hero {
  padding-bottom: var(--sp-3);
  margin-bottom: 0;
}

/* Detail: tighter section stack */
#tour-detail-screen .ride-detail-card-sections {
  gap: 8px;
}
#tour-detail-screen .ride-detail-inline-section {
  padding-top: 10px;
  gap: 6px;
}

/* Route block: read-only hero plus compact route context and GPX action. */
#tour-detail-screen .tour-detail-route-card,
#tour-detail-screen .tour-detail-description-card {
  margin-top: 6px;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--post-ride-surface-border, var(--c-rule));
  border-radius: var(--post-ride-surface-radius, 16px);
  background: var(--post-ride-surface-bg, var(--c-bg));
  box-shadow: var(--post-ride-surface-shadow, 0 8px 22px rgba(26, 22, 19, 0.04));
  gap: 12px;
}

#tour-detail-screen .tour-detail-description-card {
  display: grid;
}

#tour-detail-screen .tour-detail-route-facts {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
}

/* GPX download action: the "GPX herunterladen" anchor carries `.btn-secondary`
   and now renders through that canonical grammar unchanged — the same look as
   "Merken" in the action row. The former `#tour-detail-route-download` override
   (6px pill, --surface-border, 6px radius) was a historical divergence that
   silently overrode its own declared class and is removed. */

/* Tour-Detail: action button row + non-GPX hint. The separator uses the
   canonical warm `--c-rule` token (as the Post-Ride action bar and every other
   rule on this surface do), not the undefined `--border`. */
.tour-detail-actions {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  justify-content: flex-start;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 4px;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 120ms ease, color 120ms ease;
}

.btn-secondary:hover {
  background: rgba(26, 22, 19, 0.06);
}

.btn-primary {
  box-sizing: border-box;
  line-height: 1.2;
}

.tour-detail-no-route-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--c-text-dim);
  line-height: 1.3;
}

/* Tour-Detail: map loading spinner */
.tour-detail-map {
  position: relative;
}

/* Discover route hero = the SAME structure as the Creator-Nachbereitung hero
   (#post-ride-hero-map), read-only: map, elevation profile and marker-driven
   readonly moment detail. Discover-only facts and fullscreen CTAs stay outside
   the hero; capture/edit/delete chrome is not mounted here. */
.tour-detail-route-hero {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.tour-detail-route-hero .tour-detail-route-map-wrapper,
.discover-overview-card .discover-overview-map-wrapper {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(26, 22, 19, 0.055);
  overflow: hidden;
  background: var(--c-bg);
}
.tour-detail-route-hero .tour-detail-route-map-wrapper::after,
.discover-overview-card .discover-overview-map-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(248, 246, 241, 0.64),
    inset 0 -18px 30px rgba(26, 22, 19, 0.035);
  pointer-events: none;
}

/* Discover overview map (multi-route): same frame language as the detail map
   above, deliberately more compact — an orientation layer above the list, not
   a hero. */
.discover-overview-card {
  margin: 0 0 16px;
}
/* Logbook overview map (personal knowledge map): SAME shared frame classes as
   the Discover Übersichtskarte — only the outer spacing is logbook-specific
   (the card sits inside the logbook frame, whose rows carry their own
   horizontal padding). Visual language stays single-sourced. */
.logbook-overview-card {
  margin: 14px 16px 4px;
}
.logbook-overview-card .post-ride-highlight-detail {
  margin-top: 10px;
}
.discover-overview-map {
  position: relative;
  z-index: 0;
  height: 36vh;
  min-height: 220px;
  max-height: 380px;
}

/* Discover overview hover label: the tour title only, calm register, follows
   the cursor (sticky tooltip on the hit line). Arrow suppressed — quieter. */
.discover-overview-tooltip {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: 0 4px 12px rgba(26, 22, 19, 0.12);
}
.discover-overview-tooltip::before {
  display: none;
}

/* Shared fullscreen toggle on interactive route maps. addMapFullscreenControl
   inserts it as the first button INSIDE Leaflet's zoom .leaflet-bar, so the
   three controls form one continuous vertical toolbar — Vollbild → Zoom+ →
   Zoom−. Size, radius, shadow/border and the 1px dividers all come from
   Leaflet's own control CSS (touch and non-touch alike). Only the glyphs need
   help. */

/* All three toolbar glyphs are inline SVGs now (fullscreen + zoom in/out — the
   +/− are installed as the Leaflet zoom-control default in app.js). Flex-centre
   the block SVGs on both axes: text-align can't centre a block child, and a
   text glyph only ever centres its line-box, not its ink, which is exactly why
   the +/− read low before. The 3-class compound is deliberate — it must
   out-specify BOTH `.leaflet-bar a` (0,1,1) and the touch variant
   `.leaflet-touch .leaflet-bar a` (0,2,1), and leaflet.css loads after this
   file; the zoom bar always carries all three classes. */
.leaflet-control-zoom.leaflet-bar.leaflet-control a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.map-fullscreen-button {
  cursor: pointer;
}
/* One size for all three SVGs (fullscreen + zoom in/out) so they carry the same
   optical weight — a touch larger than a text glyph would be. */
.leaflet-control-zoom a svg,
.map-fullscreen-button svg {
  width: 20px;
  height: 20px;
  display: block;
}
.leaflet-touch .leaflet-control-zoom a svg,
.leaflet-touch .map-fullscreen-button svg {
  width: 24px;
  height: 24px;
}
/* Fullscreen state lives on the Leaflet container itself: position:fixed
   escapes every wrapper (incl. the overflow:hidden card frames) without
   touching the surrounding layout. The !important overrides beat the
   per-surface height clamps (36vh / 56vh etc.); z-index sits above the app
   header (3000) and the enlarge overlay (1000). */
.leaflet-container.map-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 4000;
}
.tour-detail-route-hero .tour-detail-map {
  position: relative;
  z-index: 0;
  height: 56vh;
  min-height: 320px;
  max-height: 600px;
}

#tour-detail-highlight-detail {
  margin-top: 12px;
}

/* Discover: a local photo introduction to a tour. The route-ordered thumbnail
   row only changes the inline photo and never the marker selection. */
.tour-detail-moment-photo-intro {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tour-detail-moment-photo-intro__title {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.tour-detail-moment-photo-main {
  display: grid;
  position: relative;
  height: clamp(220px, 56vw, 440px);
  width: 100%;
  padding: 0;
  min-width: 0;
  place-items: center;
  border: 1px solid var(--post-ride-surface-border, var(--c-rule));
  border-radius: 8px;
  background: var(--c-bg-elev);
  cursor: zoom-in;
}

.tour-detail-moment-photo-main[hidden] {
  display: none;
}

.tour-detail-moment-photo-main img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: inherit;
}

.tour-detail-moment-photo-main:disabled {
  cursor: default;
}

.tour-detail-moment-photo-main:focus-visible {
  outline: 2px solid var(--c-accent, #1e3a8a);
  outline-offset: 2px;
}

.tour-detail-moment-photo-strip {
  display: flex;
  gap: 8px;
  max-width: 100%;
  margin-top: 12px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 1px 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.tour-detail-moment-photo-intro .tour-detail-moment-photo-strip {
  margin-top: 0;
}

.tour-detail-moment-photo-strip[hidden] {
  display: none;
}

.tour-detail-moment-photo-strip__item {
  flex: 0 0 112px;
  width: 112px;
  height: 84px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface-muted, #f6f6f4);
  cursor: pointer;
  scroll-snap-align: start;
}

.tour-detail-moment-photo-strip__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-detail-moment-photo-strip__item.is-active {
  border-color: var(--c-accent, #1e3a8a);
  box-shadow: inset 0 0 0 1px var(--c-accent, #1e3a8a);
}

.tour-detail-moment-photo-strip__item:focus-visible {
  outline: 2px solid var(--c-accent, #1e3a8a);
  outline-offset: 2px;
}

@media (min-width: 601px) {
  .tour-detail-moment-photo-strip__item {
    flex-basis: 144px;
    width: 144px;
    height: 108px;
  }
}

.map-spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 246, 241, 0.6);
  z-index: 1000;
  pointer-events: none;
}

.map-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(26, 22, 19, 0.18);
  border-top-color: var(--c-text);
  border-radius: 50%;
  animation: tour-detail-map-spin 720ms linear infinite;
}

@keyframes tour-detail-map-spin {
  to { transform: rotate(360deg); }
}

.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;
}

/* =============================================================
   v1.3 Single Ride View — Organizer Detail
   Scoped under .ride-detail-organizer-v13. Renders four lifecycle
   states from the same DOM: voting · ready_to_finalize · finalizing
   · finalized. State controlled via data-ui-state on the container,
   slot visibility via data-slot.
   Design source: frontend/tests/coordination-organizer-fixture.html (v1.3)
   ============================================================= */

/* --- Container + slot visibility --------------------------- */
.ride-detail-organizer-v13 { display: block; }
.ride-detail-organizer-v13 [data-slot="finalization-form"] { display: none; }
.ride-detail-organizer-v13[data-ui-state="finalizing"] [data-slot="finalization-form"],
.ride-detail-organizer-v13[data-ui-state="respond"] [data-slot="finalization-form"],
.ride-detail-organizer-v13[data-ui-state="cancelling"] [data-slot="finalization-form"],
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] [data-slot="finalization-form"] { display: block; }
.ride-detail-organizer-v13[data-ui-state="finalizing"] [data-slot="hero"] { display: none; }
.ride-detail-organizer-v13[data-ui-state="finalizing"] [data-slot="participants"] { display: none; }

/* --- Button reset (production has a global `button { width: 100% }`
   rule that breaks v1.3 inline buttons inside flex rows). Reset all
   v1.3 buttons to auto width; re-assert full width only where needed. */
.ride-detail-organizer-v13 button {
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.ride-detail-organizer-v13 .cta-button,
.ride-detail-organizer-v13 .strecke-option-trigger {
  width: 100%;
}
.ride-detail-organizer-v13 .hero-disclosure-edit {
  border: 1px solid var(--c-rule-strong);
  border-radius: 6px;
}
/* Shared form buttons mounted via renderRideForm({mode:"respond"}) live
   inside the v1.3 root and would otherwise be flattened by the broad
   button reset above. Re-assert the canonical .btn-primary / .response-btn
   / .toggle-link styling so the respond form looks identical to the legacy
   participation screen. Only borders/backgrounds/font are re-set — width
   is left at "auto" from the reset, which is what these buttons want. */
.ride-detail-organizer-v13 [data-rf-mode="respond"] .btn-primary {
  width: 100%;
  background: var(--c-text);
  color: var(--c-bg);
  border: 1px solid var(--c-text);
  border-radius: 6px;
  padding: var(--sp-4);
  font-weight: 600;
  cursor: pointer;
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .response-btn {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-rule-strong);
  border-radius: 6px;
  color: var(--c-text);
  /* WC-POLISH-21 (2026-05-21): padding stepped from var(--sp-4) to
     var(--sp-3) — one token tighter. Buttons stay tall enough to read
     as primary affordances; the row no longer dominates the surface. */
  padding: var(--sp-3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .response-btn.selected[data-type="yes"] {
  background: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success);
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .response-btn.selected[data-type="no"] {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .response-btn.selected[data-type="maybe"] {
  background: var(--c-bg);
  border-color: var(--c-text-muted);
  color: var(--c-text-muted);
}
/* Three-column variant for the respond-mode buttons (declined · constrained
 * · joined). The base .response-choice grid is 1fr 1fr — extend it cleanly
 * without redefining the base rule. */
.ride-detail-organizer-v13 [data-rf-mode="respond"] .response-choice.response-choice-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* WC-POLISH-21 (2026-05-21): tighten the V13 respond surface vertically
   without touching the state machine. Every reduction is one token step
   on the canonical scale and scoped under `[data-rf-mode="respond"]` so
   legacy (non-V13) surfaces that still use the base `.response-choice`
   / `.time-window` / `.constraint-toggle` rules keep their dimensions.
   The respond-mode renderer (setRespondConstraintToggle,
   setRespondWindowVisible) is unchanged — purely visual.
   The `.response-btn` padding lives on the existing V13 rule above so
   the geometry stays consolidated in one place. */
.ride-detail-organizer-v13 [data-rf-mode="respond"] .response-choice {
  margin-top: var(--sp-2);
}
/* WC-POLISH-24 (2026-05-21): drop the nested-card chrome on the
   Zeitfenster slot. The base `.time-window` paints a white card
   (background: var(--c-bg-elev), border, border-radius) on the cream
   workspace surface, reading as a second card layer. In the V13 respond
   surface we want the Zeitfenster to visually belong to the parent
   workspace surface — same background, no perimeter, no rounded corner.
   A single top hairline keeps the affordance grouped without nesting.
   State machine / setRespondWindowVisible unchanged. */
.ride-detail-organizer-v13 [data-rf-mode="respond"] .time-window {
  margin-top: var(--sp-3);
  padding: var(--sp-3) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-rule);
  border-radius: 0;
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .constraint-too-narrow {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .time-window-hint {
  margin-bottom: var(--sp-2);
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .constraint-toggles {
  margin-bottom: var(--sp-2);
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .constraint-toggle {
  min-height: 30px;
  padding: 4px 12px;
}
.ride-detail-organizer-v13 [data-rf-mode="respond"] .toggle-link {
  margin-top: var(--sp-2);
}

/* --- Ride header (back · 4-dot lifecycle · status token) -- */
.ride-detail-organizer-v13 .ride-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 2px 0 var(--sp-2);
  border-bottom: 1px solid var(--c-rule);
  margin-bottom: var(--sp-2);
}
.ride-detail-organizer-v13 .ride-header .back {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-text-muted);
  cursor: pointer;
  line-height: 1.4;
}
.ride-detail-organizer-v13 .rh-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  padding-top: 1px;
}
/* Workspace Orientation (2026-05-20): V13 3-dot lifecycle indicator
   removed. The former .rh-phase-dots / .rh-phase-dot rules have been
   deleted along with the [data-workspace-dots] markup. The canonical
   `.ride-detail-organizer-v13 .rh-phase-name` rule lives further down
   in this file (Workspace-Orientation Header Audit block, 2026-05-20)
   — a stale duplicate of that rule was removed during the Workspace
   Final Freeze (WC-FREEZE-02, 2026-05-21) so the Mini-Spec B pill
   family has a single canonical CSS source. */

/* --- Hero (scoped overrides for v1.3 sizes) ---------------- */
.ride-detail-organizer-v13 .ride-hero {
  margin: var(--sp-2) 0 var(--sp-3);
  padding-bottom: 0;
  border-bottom: 0;
}
/* Hero-Unification (2026-05-21): the V13 default hero typography now
   matches the former Datum-Hero scoped styles — uppercase 11px kicker,
   36px serif date, mono 15px time. The per-data-ui-state overrides
   (`*[-terminal] / go-no-go-participant / confirming / cancelling`) for
   these three properties were the second visual hero family. With the
   defaults promoted, the scoped overrides become no-ops and were
   removed from the M1 block further down in this file. */
.ride-detail-organizer-v13 .hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
}
.ride-detail-organizer-v13 .hero-kicker .kicker-sep {
  color: var(--c-rule-strong);
}
.ride-detail-organizer-v13 .hero-kicker .relative {
  color: var(--c-accent);
}
.ride-detail-organizer-v13 .hero-date {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.ride-detail-organizer-v13 .hero-time {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  margin: 2px 0 0;
}
.ride-detail-organizer-v13 .hero-idea {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--c-text-muted);
  line-height: 1.35;
}

/* --- Hero summary (always visible read-only rows) --------- */
.ride-detail-organizer-v13 .hero-disclosure { margin-top: var(--sp-3); }
/* Hero-Unification (2026-05-21): the workspace hero-meta uses the
   canonical 2-col `.meta-cell` grid that the Datum-Hero renderers
   already shared (Mini-Spec A). The earlier `.he-row` flex layout was
   the second hero-meta family — its rule was removed. */
.ride-detail-organizer-v13 .hero-extras,
.ride-detail-organizer-v13 [data-workspace-extras] {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
  row-gap: 2px;
}
.ride-detail-organizer-v13 [data-workspace-extras] > .meta-cell {
  min-width: 0;
}
/* WC-POLISH-08 (2026-05-21): on narrow viewports the two-column grid
   compresses Ziel + Treffpunkt next to each other; long values either
   wrap awkwardly or eat the avatar/status gutter. Collapse to a single
   column on mobile so each meta cell reads as `LABEL` on top of `value`
   with full row width. Pure CSS — no new markup, no renderer change. */
@media (max-width: 600px) {
  .ride-detail-organizer-v13 .hero-extras,
  .ride-detail-organizer-v13 [data-workspace-extras] {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
}
.ride-detail-organizer-v13 .hero-disclosure-edit {
  display: block;
  margin-top: var(--sp-2);
  margin-left: auto;
  padding: 0;
  width: fit-content;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-muted);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- Wer kommt mit (3 vertical groups, unified typography) - */
.ride-detail-organizer-v13 .wer-kommt-mit {
  margin-top: var(--sp-5);
  margin-bottom: 4px;
}
/* OPEN voting / ready_to_finalize: when renderWorkspaceOrganizerDetail
 * prepends a `<h2 class="pc-label">Rückmeldungen</h2>` heading inside
 * the participants slot, lift the slot into the same section-rhythm
 * as the finalizing-state response-context block: top divider, sp-3
 * before, sp-3 inside. Without a heading present (zero-response slot,
 * finalized/expired/finalizing states) the original margin-top:sp-5
 * rule applies and no stray divider is drawn. */
/* WC-POLISH-13 (2026-05-21): `finalized` joins the section-divider
   selector list so Tiles 02 / 11 read with the same "Rückmeldungen"
   header + hairline divider as voting / ready_to_finalize. */
/* WC-POLISH-28 (2026-05-21): Rückmeldungen dominance reduction. The
   heading + hairline anchor the section, but the canonical workspace
   rhythm is var(--sp-2) breathing space, not var(--sp-3). Stepping
   both margin-top and padding-top down by one token saves ~8 px above
   the heading; the hairline divider stays as the section break, the
   canonical section-title typography (15 / 600 / var(--c-text)) stays.
   WC-FINAL-02 (2026-05-21): margin-top stepped one more notch to
   var(--sp-1) — the previous section's last child (CTA / Bearbeiten)
   already trails some bottom whitespace, so 4 px is enough breathing
   space above the hairline. Padding-top stays at var(--sp-2) so the
   hairline keeps interior breathing room and the section still reads
   as a section. */
.ride-detail-organizer-v13[data-ui-state="voting"] .wer-kommt-mit:has(> .pc-label),
.ride-detail-organizer-v13[data-ui-state="ready_to_finalize"] .wer-kommt-mit:has(> .pc-label),
.ride-detail-organizer-v13[data-ui-state="finalized"] .wer-kommt-mit:has(> .pc-label) {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-rule);
}
/* WC-POLISH-23 (2026-05-21): typography moved to the single canonical
   `.pc-label` rule further down. This block now carries only the
   `margin-bottom` that anchors the heading inside the `.wer-kommt-mit`
   slot for these three states (visual rhythm, not typography).
   WC-POLISH-28 (2026-05-21): heading→content gap stepped from
   var(--sp-2) → var(--sp-1) so the Rückmeldungen section reads as a
   tighter group, in line with the reduced surrounding chrome. */
.ride-detail-organizer-v13[data-ui-state="voting"] .wer-kommt-mit > .pc-label,
.ride-detail-organizer-v13[data-ui-state="ready_to_finalize"] .wer-kommt-mit > .pc-label,
.ride-detail-organizer-v13[data-ui-state="finalized"] .wer-kommt-mit > .pc-label {
  margin: 0 0 var(--sp-1);
}
.ride-detail-organizer-v13 .party-group { margin-bottom: var(--sp-3); }
.ride-detail-organizer-v13 .party-group:last-child { margin-bottom: 0; }
.ride-detail-organizer-v13 .party-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}
.ride-detail-organizer-v13 .dabei-names {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text);
}
.ride-detail-organizer-v13 .dabei-names .you { font-weight: 600; }
.ride-detail-organizer-v13 .constrained-names {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.ride-detail-organizer-v13 .constrained-names .constraint {
  color: var(--c-text-dim);
  font-size: 13px;
}
.ride-detail-organizer-v13 .declined-names {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-dim);
}
/* T106b: compact OPEN decline-reason label next to a declined name, in both
   the muted names line and the manager identity-row layout. Mirrors the
   `.constraint` label treatment — quiet coordination context, not emphasis. */
.ride-detail-organizer-v13 .decline-reason-label {
  color: var(--c-text-dim);
  font-size: 13px;
}
.ride-detail-organizer-v13 .leitung-names {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-text);
}

/* --- Finalisierung A · Wann (stable row) ------------------- */
.ride-detail-organizer-v13 .stable-wann {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 4px;
}
.ride-detail-organizer-v13 .stable-wann-label {
  flex: 0 0 64px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ride-detail-organizer-v13 .stable-wann-value {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--c-text);
  line-height: 1.45;
}
.ride-detail-organizer-v13 .row-edit {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- Treffpunkt map point (optional disclosure in the Treffpunkt section).
   Toggle/remove are quiet text actions in the .row-edit voice; both rules are
   scoped under .ride-detail-organizer-v13 so they win over the broad
   `.ride-detail-organizer-v13 button` reset (0-1-1 vs 0-2-0). */
.ride-detail-organizer-v13 .meeting-map-toggle,
.ride-detail-organizer-v13 .meeting-map-remove {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.meeting-map-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meeting-map-disclosure {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.meeting-map-wrap {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.meeting-map {
  min-height: 260px;
}

/* "In Karten öffnen" — external maps handoff next to a displayed Treffpunkt.
   Rendered only when the ride carries a map point. */
.meeting-maps-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted, var(--muted, #64748b));
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* --- Finalisierung B · Rückmeldungen ----------------------
 *
 * The response-context behaves like the first .form-section: top divider
 * (never doubled), `.pc-label` carries identical typography to
 * `.form-section-title`, identical margin-bottom. This is what makes
 * Rückmeldungen / Wann / Wohin / Treffpunkt / Rückmeldung bis look like
 * one consistent section family in finalize/amend mode.
 */
/* WC-POLISH-28 (2026-05-21): mirror the wer-kommt-mit dominance reduction
   for the finalizing-context surface — same heading family, same chrome,
   so they must tighten together. var(--sp-3) → var(--sp-2) on both
   margin-top and padding-top; hairline divider stays as the section
   break.
   WC-FINAL-02 (2026-05-21): margin-top stepped one more notch to
   var(--sp-1) to mirror the wer-kommt-mit treatment; padding-top stays
   at var(--sp-2). */
.ride-detail-organizer-v13 .participation-context {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-rule);
}
/* If the response-context is the first visible block (i.e. hero is hidden
 * in finalizing state), skip the top divider so the section sequence starts
 * cleanly without a stray line. Also pull the heading up against the
 * header bar so the screen "starts" sooner. */
.ride-detail-organizer-v13[data-ui-state="finalizing"] .participation-context {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* Empty-state copy — keep it secondary, not a competing piece of content.
   WC-POLISH-23 (2026-05-21): typography aligned with the canonical
   helper/caption family — same 13 px / 400 / var(--c-text-muted) /
   line-height 1.4 used by terminal-note / terminal-reason on the
   workspace surface. The previous 12.5 px outlier was retired.
   WC-POLISH-27 (2026-05-21): selector broadened from
   `.participation-context .pc-empty` to any `.pc-empty` inside the
   V13 workspace. The voting + confirmation surfaces render
   `<p class="pc-empty">Noch keine Rückmeldungen</p>` into the
   `[data-workspace-participants]` slot (which is `.wer-kommt-mit`,
   NOT `.participation-context`), so the previous narrower selector
   missed two of the three render sites and they fell back to default
   browser <p> styling. */
.ride-detail-organizer-v13 .pc-empty {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-muted);
}
/* WC-POLISH-23 (2026-05-21): typography moved to the canonical
   `.pc-label` rule further down. This block now only positions the
   heading inside the participation-context surface (margin-bottom).
   WC-POLISH-28 (2026-05-21): heading→content gap tightened to
   var(--sp-1) to match the wer-kommt-mit treatment. */
.ride-detail-organizer-v13 .participation-context .pc-label {
  margin: 0 0 var(--sp-1);
}
.ride-detail-organizer-v13 .participation-context .party-group { margin-bottom: var(--sp-2); }
.ride-detail-organizer-v13 .participation-context .party-group:last-child { margin-bottom: 0; }
.ride-detail-organizer-v13 .participation-context .party-label { margin-bottom: 2px; }
/* The form host that follows the response-context carries the next divider —
 * no nesting trick required, since `[data-workspace-ride-form-host]` itself is the
 * separator: a top divider on the host marks the boundary into the form.
 *
 * Finalizing keeps the wider sp-2 / sp-2 rhythm because the form below the
 * divider is tall and dominates the page. Respond mode follows the dense
 * disclosure-row rhythm above it (7px) so the line doesn't read as a
 * structural break when the section below is just three buttons + a one-line
 * confirmation. Same 1px / c-rule token in both states. */
.ride-detail-organizer-v13[data-ui-state="finalizing"] [data-workspace-ride-form-host] {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-rule);
}
.ride-detail-organizer-v13[data-ui-state="respond"] [data-workspace-ride-form-host] {
  margin-top: 0;
  padding-top: 7px;
  border-top: 1px solid var(--c-rule);
}
/* M5 — cancellation surface uses the same form host for the moved
   #simple-cancellation-section. Mirror the finalizing-state spacing. */
.ride-detail-organizer-v13[data-ui-state="cancelling"] [data-workspace-ride-form-host] {
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
}

/* --- Finalisierung C · WOHIN block ------------------------- */
.ride-detail-organizer-v13 .wohin-block {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
}
.ride-detail-organizer-v13 .wohin-block-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--sp-3);
}
.ride-detail-organizer-v13 .wohin-row { margin-top: var(--sp-4); }
.ride-detail-organizer-v13 .wohin-row:first-of-type { margin-top: 0; }
.ride-detail-organizer-v13 .wohin-row-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.ride-detail-organizer-v13 .wohin-row-resolved {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ride-detail-organizer-v13 .wohin-row-resolved .value {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.4;
}
.ride-detail-organizer-v13 .wohin-row-resolved .value em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-text-muted);
  font-size: 14.5px;
}
.ride-detail-organizer-v13 .wohin-row .input {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  border: 1px solid var(--c-rule-strong);
  border-radius: 8px;
  background: var(--c-bg-elev);
  color: var(--c-text);
  width: 100%;
}
.ride-detail-organizer-v13 .wohin-row .input::placeholder { color: var(--c-text-dim); }
.ride-detail-organizer-v13 .wohin-row-helper {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-text-muted);
  margin: 6px 0 0;
  line-height: 1.45;
}

/* --- Strecke & GPX: grouped subblock ----------------------- */
.ride-detail-organizer-v13 .strecke-subblock {
  background: var(--c-bg-subtle, #f7f7f6);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  margin-top: 2px;
}
.ride-detail-organizer-v13 .strecke-gpx-status {
  display: inline-block;
  margin-left: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--c-text-dim);
}
.ride-detail-organizer-v13 .strecke-option-gpx-button {
  background: transparent;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  padding: 3px 10px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-text-muted);
  cursor: pointer;
}

/* --- WANN: date text + time select ------------------------- */
.ride-detail-organizer-v13 .wann-date-text {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--c-text);
}
.ride-detail-organizer-v13 .wann-time-select {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-rule-strong);
  padding: 1px 2px;
  cursor: pointer;
  margin-left: var(--sp-2);
}

/* --- Strecke & GPX option list ----------------------------- */
.ride-detail-organizer-v13 .strecke-options { margin-top: 0; }
.ride-detail-organizer-v13 .strecke-option {
  display: block;
  padding: 7px 0;
}
.ride-detail-organizer-v13 .strecke-option-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.ride-detail-organizer-v13 .strecke-option[aria-checked="true"] .strecke-option-trigger {
  color: var(--c-text);
  font-weight: 500;
}
.ride-detail-organizer-v13 .strecke-option .radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--c-rule-strong);
  flex: 0 0 auto;
  position: relative;
}
.ride-detail-organizer-v13 .strecke-option[aria-checked="true"] .radio { border-color: var(--c-accent); }
.ride-detail-organizer-v13 .strecke-option[aria-checked="true"] .radio::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  background: var(--c-accent);
}
.ride-detail-organizer-v13 .strecke-option-detail { display: none; }
.ride-detail-organizer-v13 .strecke-option[aria-checked="true"] .strecke-option-detail {
  display: block;
  margin: 4px 0 4px 24px;
}
.ride-detail-organizer-v13 .strecke-option-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--c-text-muted);
  line-height: 1.4;
}
.ride-detail-organizer-v13 .strecke-option-change {
  margin: 4px 0 0;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  display: inline-block;
}

/* --- CTA (primary action + status line) -------------------- */
.ride-detail-organizer-v13 .cta {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-rule);
}
.ride-detail-organizer-v13 .cta-button {
  /* Workspace Button Family Unification (2026-05-21):
     One canonical primary geometry across `data-workspace-cta` —
     `border-radius: 4px` and `font-weight: 500` matching every other
     workspace button (confirming/cancelling/etc.). Semantic color
     remains state-driven: the default rule keeps the accent fill
     (voting / ready_to_finalize → "Ausfahrt festlegen"); the
     confirming override below repaints the same button shape with the
     intentional black fill for "Teilnahme bestätigen". */
  width: 100%;
  padding: 12px var(--sp-4);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--c-accent);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.ride-detail-organizer-v13 .cta-button[disabled] {
  background: var(--c-rule-strong);
  color: var(--c-text-muted);
  cursor: not-allowed;
}
.ride-detail-organizer-v13 .cta-status {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--c-text-dim);
  line-height: 1.5;
  text-align: center;
}
.ride-detail-organizer-v13 .cta-secondary-action {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: 8px var(--sp-4);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.ride-detail-organizer-v13 .cta-secondary-action:hover {
  color: var(--c-text);
}

/* T134: ICS calendar export — a calm, additive secondary action. Bordered
   ghost so it reads as optional and never competes with the primary CTA fill
   or the borderless "Ausfahrt absagen" text action. Its own slot sits below
   the action area and stays visible in the participant read-only view (where
   the .cta section is hidden). Unscoped on purpose: the same slot is reused by
   the workspace shell and the confirmation / go-no-go-participant surfaces. */
.cta-calendar {
  margin-top: var(--sp-2);
}
.cta-calendar-action {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px var(--sp-4);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.cta-calendar-action:hover {
  background: var(--c-bg-elev);
  border-color: var(--c-text-muted);
}

/* ── LOGBUCH (Vergangen) ────────────────────────────────────────────────────
   The logbook reuses the Aktuell row chrome 1-to-1 (.aktuell-row,
   .aktuell-main, .ar-date, .ar-title, .ar-coordination, .ar-right-top,
   .status-chip, .group-aktuell, .aktuell-section-head, .aktuell-section-title,
   .aktuell-section-count). The modifiers below only:
     1) remove the row-as-click affordance (no cursor:pointer, no hover wash),
     2) reserve right-side space for the status chip,
     3) add the compact action footer (CTA + overflow ⋯) at the row's bottom,
     4) tune the month-section divider so years remain the dominant break.
   No new card family, no new section family — just leaner row chrome. */
.aktuell-row--logbook {
  /* The whole card is the action trigger (role=button), so it is clickable
     and shows the same calm hover/focus affordance as Aktuell rows (inherited
     from .aktuell-row:hover / :focus-visible). The previous `cursor: default`
     + transparent hover/focus suppression dated from when the only control was
     a separate overflow button; with the card itself actionable they are gone. */
  display: block;
  /* Harmonized with Aktuell: same 12px/18px frame so Logbuch and Aktuell
     share the vertical rhythm. The previous compact 10px/2px frame made
     the card read as gedrungen and broke the parity with Aktuell rows. */
  padding: 12px 18px;
}

/* Aktuell's title-clamp is calibrated for the phase-token + dots zone on
   the right. The logbook's right zone is a single status chip, so a
   tighter right reserve is enough to keep titles from colliding. */
.aktuell-row--logbook .ar-date,
.aktuell-row--logbook .ar-title,
.aktuell-row--logbook .ar-coordination {
  padding-right: 132px;
}

/* Logbuch and Aktuell share the same content-line stack — the previous
   density override (margin-top: 1px) widened the visual gap between the
   two surfaces. Removed so both lists speak the same vertical rhythm. */

.ar-coordination--participants,
.ar-coordination--rating {
  /* Inherits Aktuell's 12px muted meta look; no font overrides. The
     dedicated modifiers only carry semantic meaning for tests + future
     fine-tuning, not new typography. */
}

/* Compact star group for the user's own rating inside a logbook card.
   Reuses formatStarRating()'s "★★★★☆" string — same character set used by
   the existing rating summaries elsewhere (see app.js:4914). The token
   stays inside the .ar-coordination meta line so it sits one typographic
   level below the title, never competes with it. Glyph colour is muted
   text — no bright yellow accent, consistent with Ridync's editorial calm. */
.ar-rating-stars {
  display: inline-block;
  margin-left: 1px;
  color: var(--c-text);
  letter-spacing: 0.5px;
  font-feature-settings: "tnum";
}

.ride-card-participants-more {
  background: none;
  border: 1px dashed transparent;
  padding: 0 2px;
  margin-left: 2px;
  font: inherit;
  font-size: inherit;
  font-weight: 500;
  color: var(--c-accent);
  cursor: pointer;
  border-radius: 4px;
}
.ride-card-participants-more:hover,
.ride-card-participants-more:focus-visible {
  border-color: var(--c-accent);
  outline: none;
}

/* Generic overflow / popover surface — extracted from .account-menu so
   that any row-level menu can reuse the same visual vocabulary without
   needing a globally-fixed top-right anchor. Reads as a context menu, not
   as a dialog: small typography, compact line-height, light padding. */
.overflow-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  display: grid;
  /* Enough width to hold "Aus Logbuch ausblenden" (the longest item) on a
     single line at 12.5px text without ever wrapping. */
  min-width: 176px;
  padding: 3px 0;
  border: 1px solid var(--c-rule-strong);
  border-radius: 6px;
  background: var(--c-bg-elev);
  box-shadow: 0 4px 12px rgba(26, 22, 19, 0.08);
}
.overflow-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  /* Same secondary-nav text register (12.5px) so the menu speaks the same
     small-typo language as the surrounding section-scope tokens. */
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--c-text);
  /* Context-menu items must never wrap — "Aus Logbuch ausblenden" was
     breaking into two lines on narrow viewports, which made the menu
     read like a paragraph instead of a list of actions. */
  white-space: nowrap;
}
.overflow-menu-item:hover,
.overflow-menu-item:focus-visible {
  background: rgba(26, 22, 19, 0.04);
  outline: none;
}

.ride-card-participants-popup {
  left: auto;
  right: 0;
  min-width: 220px;
  max-width: 320px;
  padding: 10px 14px;
}
.ride-card-participants-popup-heading {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}
.ride-card-participants-popup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86rem;
  color: var(--c-text);
}

/* Year/Month section hierarchy.
   - The year section reuses .group-aktuell + .aktuell-section-head 1:1.
   - The month section nests inside the year. We tone its divider down
     (no top border-rule, smaller padding) so the year reads as the
     primary break and the month as a sub-eyebrow. Typography stays at
     Aktuell's tokens — no oversized headlines. */
.group-aktuell--logbook-month > .aktuell-section-head--month {
  border-top: 0;
  padding: 6px 18px 4px;
  background: transparent;
}
.group-aktuell--logbook-month > .aktuell-section-head--month .aktuell-section-title {
  font-size: 0.78rem;
  color: var(--c-text-dim);
}
.group-aktuell--logbook-month > .aktuell-section-head--month .aktuell-section-count {
  font-size: 0.74rem;
  color: var(--c-text-dim);
}

@media (max-width: 600px) {
  .aktuell-row--logbook .ar-date,
  .aktuell-row--logbook .ar-title,
  .aktuell-row--logbook .ar-coordination {
    padding-right: 110px;
  }
  .group-aktuell--logbook-month > .aktuell-section-head--month {
    padding: 6px 14px 4px;
  }
  .ride-card-participants-popup {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 12px;
    max-height: 60vh;
    overflow: auto;
  }
}

/* ============================================================================
   W1-γ — Workspace end-state body separation (2026-05-20)
   ----------------------------------------------------------------------------
   Three small fixes for surfaces classified C/B in the W1 hero audit. No new
   pattern, no markup change, no token change — just visible Hero→Body
   separation on screens where the body element didn't inherit the
   .ride-detail-inline-section border-top rule.
   ============================================================================ */

/* (1) #ride-detail EXPIRED — the empty-body section ("Ausfahrtsvorschlag
   nicht festgelegt") sits directly under the hero metadata without any
   visible divider. Mirror the divider used by .ride-detail-inline-section
   so Hero → Body has the same break as on CANCELLED. */
#detail-primary-empty:not([hidden]) {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
}

/* (2) #cancellation-task-screen — the headline "Ausfahrt absagen?" sits
   tight against the hero metadata. Give the cancellation body section the
   same subtle divider so the Hero clearly closes before the form starts. */
#cancellation-task-screen #simple-cancellation-section:not([hidden]),
#cancellation-task-screen #cancellation-section:not([hidden]),
#cancellation-task-screen #go-no-go-section:not([hidden]) {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
}

/* (3) #ride-detail CANCELLED — visually group the cancelled-card content
   (caption "Absage", strong "Ausfahrt abgesagt", note, button) as one
   reading block instead of four loose grid items. Subtle surface +
   inner padding turns the section-rule into a container hint without
   introducing a new card token. */
#detail-cancelled-card.ride-detail-inline-section:not([hidden]) {
  padding: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  background: var(--c-bg-elev);
  border-radius: 8px;
  gap: 6px;
}

/* ─── Header-Chrome Harmonisierung (Header Audit 2026-05-20) ─────────
   SCOPE: back-affordance markup and the status pill style. The
   lifecycle strip and the V13 3-dot indicator are not handled here:
   the Workspace Orientation decision (2026-05-20) removed them
   structurally from canonical surfaces (see DESIGN.md / PRODUCT.md /
   ARCHITECTURE.md "Workspace Orientation"). No renderer, lifecycle
   state, CTA, hero, or data model is touched in this block.
   ─────────────────────────────────────────────────────────────────── */

/* Breadcrumb → single canonical back-link "← Parent".
   Hides the separator and current-page label so legacy
   `<a>Ausfahrten</a> / <span>Label</span>` collapses to `← Ausfahrten`.
   Renderer still writes the current-label textContent — JS-readable
   for tests and a11y, just not rendered. */
.breadcrumb .sep,
.breadcrumb .current {
  display: none !important;
}
.breadcrumb {
  margin-bottom: var(--sp-3);
}
.breadcrumb a,
.breadcrumb button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--c-text-muted);
}
.breadcrumb a::before,
.breadcrumb button::before {
  content: "←";
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

/* V13 organizer header → header-only alignment with canonical pattern.
   - Add the canonical chevron prefix to the back button
   - Match status pill visually to .status-chip (single status style)
   - Drop the divider rule below the header
   - Reflow rh-right inline so chip sits next to back-link
   The 3-dot phase indicator is gone (Workspace Orientation 2026-05-20);
   the .rh-phase-name pill is the single status element in this header. */
/* Polish-Audit (2026-05-28): the breadcrumb + chip row must share a
   single Y baseline across every post-ride state. The global
   `button { min-height: 44px; padding: 14px 16px; font-weight: 700 }`
   declaration at styles.css:1786 was inflating the `.back` button to
   44 px-tall, so the back-link text and the 24 px chip were merely
   centered against each other in a 54 px row — close but not pixel-
   aligned (half-pixel baseline drift). Reset min-height/padding/
   font-weight on `.back` and pin `.rh-right { padding-top: 0 }` so the
   row is naturally as tall as the chip (24 px) and both text baselines
   match exactly. */
.ride-detail-organizer-v13 .ride-header {
  border-bottom: 0;
  align-items: center;
  margin-bottom: var(--sp-3);
  /* Global-Polish (2026-05-28): the workspace header reserves the same
     34px row height as `.page-top` so hero.top matches across every
     surface. With box-sizing: border-box (global) min-height includes
     the 2px+8px padding declared on `.ride-header` (line 7499), so
     34px corresponds to the chip-box (24px) + that padding. */
  min-height: 34px;
}
.ride-detail-organizer-v13 .rh-right {
  flex-direction: row;
  align-items: center;
  padding-top: 0;
}
.ride-detail-organizer-v13 .ride-header .back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.ride-detail-organizer-v13 .ride-header .back::before {
  content: "←";
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}
/* Restyle V13 phase-name pill to exactly match .status-chip — single
   canonical status style across the app. */
.ride-detail-organizer-v13 .rh-phase-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.45;
}
.ride-detail-organizer-v13 .rh-phase-name::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}
.ride-detail-organizer-v13 .rh-phase-name:empty { display: none; }

/* WC-07 (Workspace Consistency Pass · Phase 1 · 2026-05-21):
   Status-Pill-Modifier nach Mini-Spec B. Mirrors `.status-chip.success/
   .danger/.neutral` so that the Workspace pill communicates terminal
   tonality (CANCELLED → danger, COMPLETED/RATED → success, EXPIRED/
   FINALIZED/CONFIRMED → neutral). OPEN/voting keeps the default
   accent variant (no modifier). */
.ride-detail-organizer-v13 .rh-phase-name.success {
  background: rgba(15, 81, 50, 0.08);
  color: var(--c-success);
}
.ride-detail-organizer-v13 .rh-phase-name.success::before {
  background: var(--c-success);
}
.ride-detail-organizer-v13 .rh-phase-name.danger {
  background: rgba(139, 26, 26, 0.08);
  color: var(--c-danger);
}
.ride-detail-organizer-v13 .rh-phase-name.danger::before {
  background: var(--c-danger);
}
.ride-detail-organizer-v13 .rh-phase-name.neutral {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-text-muted);
}
.ride-detail-organizer-v13 .rh-phase-name.neutral::before {
  background: var(--c-text-muted);
}

/* Step 10O: 'pending' = ein offener Folge-Task (Nachbereitung offen /
   Bewertung offen). Optisch ruhiger Sand-Ton — kein Success-Grün, kein
   Warn-Rot. Signalisiert "noch nicht erledigt", ohne zu alarmieren. */
.ride-detail-organizer-v13 .rh-phase-name.pending {
  background: var(--c-rule);
  color: var(--c-text);
}
.ride-detail-organizer-v13 .rh-phase-name.pending::before {
  background: var(--c-rule-strong);
}

/* ============================================================================
   V13 Workspace Migration · M1 (2026-05-20) + WC-POLISH-03 (2026-05-21)
   ----------------------------------------------------------------------------
   Terminal-card slot inside #ride-workspace-root.

   WC-POLISH-03 (2026-05-21) brings terminal cards into the same content
   hierarchy as every other workspace body section (`section.cta`,
   `.wer-kommt-mit:has(.pc-label)`). The earlier filled-card wrapper
   (`background: var(--c-bg-elev); border-radius; padding: var(--sp-4);
   border-top: 0`) made cancelled / completed-readonly / expired feel
   like foreign objects sitting on top of the workspace; the divider
   pattern below makes them read as one calm continuation of the hero.

   Pattern parity:
     margin-top: var(--sp-3);
     padding-top: var(--sp-3);
     border-top: 1px solid var(--c-rule);
     display: grid;
     gap: 6px;
   ============================================================================ */
.ride-detail-organizer-v13 [data-slot="terminal-card"]:not([hidden]) {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-rule);
  display: grid;
  gap: 6px;
}
.ride-detail-organizer-v13 [data-slot="terminal-card"] [data-terminal-action]:not([hidden]) {
  justify-self: start;
  margin-top: var(--sp-1);
}
/* WC-POLISH-19 (2026-05-21): the terminal headline carries the
   section-title role (single heading per terminal block). Geometry
   matches the canonical workspace `.section-title` (15px / 600 /
   `var(--c-text)`) so terminal headings read as one family with
   "Teilnehmer", "Rückmeldungen", "Beschreibung" et al. The grey
   `[data-terminal-caption]` line is retired by the renderer (left in
   the DOM as an empty + hidden slot for backwards compatibility). */
.ride-detail-organizer-v13 [data-slot="terminal-card"] [data-terminal-headline] {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}
/* WC-POLISH-23 (2026-05-21): pin the terminal helper texts to the
   canonical helper/caption family (13 px / 400 / var(--c-text-muted)
   / line-height 1.4) so "Teilnehmer wurden benachrichtigt." and the
   cancellation reason read as one family with `.pc-empty` and other
   workspace secondary copy. The base `.summary-line` uses rem-scale
   typography and var(--muted); the V13-scoped rule below pins the
   px-scale values without touching legacy callers. */
.ride-detail-organizer-v13 [data-slot="terminal-card"] [data-terminal-note],
.ride-detail-organizer-v13 [data-slot="terminal-card"] [data-terminal-reason] {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-muted);
}

/* Hero-Unification (2026-05-21): the per-data-ui-state Datum-Hero
   typography (uppercase 11px kicker, 36px date, mono 15px time) and the
   per-data-ui-state hero-extras 2-col grid have been promoted to the
   default V13 hero CSS block earlier in this file. The scoped overrides
   that used to live here are removed; the workspace now has a single
   hero typography family across all data-ui-state values. */

/* M3 — GNP visuals in V13 shell.
   - cta-secondary-action (V13 default text-link style) is overridden to
     keep the legacy `btn-ghost danger` outline-button look that the
     legacy `#gnp-withdraw-button` carries.
   - cta-status doubles as the action-note text below the withdraw button
     and is centered & muted to mirror the legacy `<p class="action-note">`.
   Scoped to the GNP state so V13 Organizer/Participant defaults stay
   untouched. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .cta {
  text-align: center;
}
/* WC-POLISH-14 (2026-05-21): GNP's participants list (Tile 05) now
   carries the same hero→body divider rhythm as the voting / finalized
   "Rückmeldungen" section (`.wer-kommt-mit:has(> .pc-label)`). The
   participants slot uses its own `<header class="section-header">`
   markup with `<h2 data-gnp-title>Teilnehmer</h2>`, so we apply the
   margin-top + padding-top + border-top triple directly to the slot
   container. No new components — same divider tokens. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] [data-workspace-participants] {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-rule);
}
/* WC-FINAL-LAST (2026-05-21): scope-down the base `.section-header`
   chrome inside the GNP participants slot so Teilnehmer (Tile 05) and
   Rückmeldungen (Tiles 01 / 02 / 09 / 10 / 11) belong to the same
   chrome family — top hairline only, no second hairline under the
   heading. The base rule (styles.css line 5095) paints `border-bottom +
   padding-bottom: var(--sp-2) + margin-bottom: var(--sp-3)` which gave
   Teilnehmer a heavier double-hairline treatment than Rückmeldungen.
   The wrapper above carries the top divider; the heading typography +
   `<span class="section-meta">N bestätigt</span>` count + the
   margin-bottom breathing space to the list are preserved. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] [data-workspace-participants] .section-header {
  border-bottom: none;
  padding-bottom: 0;
}
/* Workspace Button Family Unification (2026-05-21):
   Canonical danger-outline workspace secondary-action — one source of
   truth for every state (`go-no-go-participant`, `confirming`,
   `finalized`, `expired`). Geometry is identical; only the slot layout
   (`width: auto` for centered GNP vs full-width elsewhere) and the
   top-margin (separation from the primary above it) differ per state
   and stay in thin scoped overrides further down. The earlier scoped
   duplicates that each repeated the full geometry are retired. */
.ride-detail-organizer-v13 .cta-secondary-action.btn-ghost.danger {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--c-danger);
  border-radius: 4px;
  background: transparent;
  color: var(--c-danger);
}
.ride-detail-organizer-v13 .cta-secondary-action.btn-ghost.danger:hover {
  background: var(--c-danger-soft);
}
/* GNP keeps its non-danger neutral-outline geometry for any future
   non-destructive ghost (defensive — current renderers always pass
   `.danger`). Layout is identical to the danger rule above except for
   the centered intrinsic width and the neutral outline tokens. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .cta-secondary-action.btn-ghost {
  display: inline-flex;
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--c-text);
  margin-top: 0;
}
/* Per-state layout override (intentional difference): GNP withdraw is
   centered at intrinsic width, every other state stretches full-width. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .cta-secondary-action.btn-ghost.danger {
  width: auto;
  margin-top: 0;
}
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .cta-status.gnp-note {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: center;
}

/* Action zone (Action-Hierarchy · confirmed-participation surface).
   After confirmation the Go-No-Go surface offers two *equal-rank* secondary
   actions: "Zum Kalender hinzufügen" and "Teilnahme zurückziehen". They share
   one calm action row — calendar first, withdraw second — both content-sized
   outline buttons (never full-width, never a primary look). The wrapper is a
   transparent block in every other state, so the primary-CTA states are
   untouched. Mirrors the post-ride action-bar row tokens (gap, 13px buttons). */
.workspace-action-zone {
  display: block;
}
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-rule);
}
/* Order: calendar first, withdraw second (DOM order is the reverse). */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-calendar {
  order: 0;
}
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta {
  order: 1;
}
/* The two sections collapse to content-sized flex items; their own dividers,
   margins and centering are dropped so the row owns the spacing. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta,
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-calendar {
  flex: 0 1 auto;
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: initial;
}
/* Equal outline buttons, content-sized. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-calendar-action,
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--c-text);
}
/* Withdraw stays neutral at rest (equal rank), surfaces its destructive intent
   only on hover/focus — so it never out-weighs the calendar action. */
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-secondary-action.btn-ghost.danger {
  border-color: var(--c-rule-strong);
  color: var(--c-text);
}
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-secondary-action.btn-ghost.danger:hover,
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-secondary-action.btn-ghost.danger:focus-visible {
  border-color: var(--c-danger);
  color: var(--c-danger);
  background: var(--c-danger-soft);
}
.ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-calendar-action:hover {
  background: var(--c-bg-elev);
  border-color: var(--c-text-muted);
}
/* Narrow mobile: stack the two actions full-width so they share ONE layout
   type — identical width, equal rank, no full-width/content-sized mix.
   The sections stretch to full width; both buttons go width:100%.
   Specificity note: the withdraw selector must carry `.btn-ghost.danger`
   (0-6-0) to out-specify the content-sized GNP default
   `…[data-ui-state="go-no-go-participant"] .cta-secondary-action.btn-ghost.danger
   { width: auto }` (0-5-0) — otherwise the withdraw stayed content-sized while
   the calendar went full-width (the reported mobile mismatch). */
@media (max-width: 480px) {
  .ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone {
    flex-direction: column;
    align-items: stretch;
  }
  .ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta,
  .ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-calendar {
    flex: 0 1 auto;
    width: 100%;
  }
  .ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-calendar-action,
  .ride-detail-organizer-v13[data-ui-state="go-no-go-participant"] .workspace-action-zone .cta-secondary-action.btn-ghost.danger {
    width: 100%;
  }
}

/* M4 — Confirmation CTA styles in V13 shell.
   Match the legacy `#confirmation-task-screen` action group:
   - Primary `Teilnahme bestätigen` is the prominent black button.
   - Secondary `Teilnahme zurückziehen` is the red-outline ghost.
   - Status text below acts as the `action-note` (muted, left-aligned
     to match the legacy paragraph).
   Scoped to the confirming state. */
.ride-detail-organizer-v13[data-ui-state="confirming"] .cta-button.confirming-confirm {
  /* Workspace Button Family Unification (2026-05-21):
     Geometry (radius, weight, padding, width, font-size) is now
     inherited from the canonical `.cta-button` rule above. The only
     intentional difference for "Teilnahme bestätigen" is the
     semantic color — black fill instead of the accent blue. */
  background: var(--c-text);
  color: var(--c-bg-elev);
}
/* Workspace Button Family Unification (2026-05-21):
   Confirming surface keeps only the intentional `margin-top: var(--sp-2)`
   that lifts the secondary off the status note above it. Geometry +
   colors come from the canonical danger-outline rule. */
.ride-detail-organizer-v13[data-ui-state="confirming"] .cta-secondary-action.btn-ghost.danger {
  margin-top: var(--sp-2);
}
.ride-detail-organizer-v13[data-ui-state="confirming"] .cta-status.confirming-note {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: left;
}

/* M5 — Cancellation form inside V13 shell.
   The V13-shell defaults reset `button` to no border / no background.
   The legacy `#simple-cancel-submit-button` carried its red-outline
   look via `.secondary-button` + scoped border-color rules; inside the
   V13 shell that look must be re-applied explicitly. The text-button
   "Zurück zur Ausfahrt" stays as a centered text link. */
.ride-detail-organizer-v13[data-ui-state="cancelling"] #simple-cancel-form {
  display: grid;
  gap: 12px;
}
.ride-detail-organizer-v13[data-ui-state="cancelling"] #simple-cancel-submit-button {
  /* Workspace Button Family Unification (2026-05-21):
     Cancellation submit migrated from literal-hex danger colours to the
     canonical workspace danger tokens (`var(--c-danger)` and
     `var(--c-danger-soft)`). Geometry already matched the family
     (radius 4px, font-size 14px, font-weight 500). */
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--c-danger);
  background: transparent;
  color: var(--c-danger);
  border-radius: 4px;
  cursor: pointer;
}
.ride-detail-organizer-v13[data-ui-state="cancelling"] #simple-cancel-submit-button:hover {
  background: var(--c-danger-soft);
}
.ride-detail-organizer-v13[data-ui-state="cancelling"] #simple-cancel-cancel-button {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--c-text);
  text-align: center;
  padding: 8px 0;
  font-size: 13px;
  cursor: pointer;
}
.ride-detail-organizer-v13[data-ui-state="cancelling"] #simple-cancel-cancel-button:hover {
  color: var(--c-text-muted);
}
.ride-detail-organizer-v13[data-ui-state="cancelling"] #simple-cancellation-title {
  margin: 0 0 var(--sp-3);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
}

/* =============================================================
   WC-04 (Workspace Consistency Pass · Phase 1 · 2026-05-21)
   Destruktive Aktion „Ausfahrt absagen" für Organizer FINALIZED
   und EXPIRED bekommt dieselbe Danger-Outline-Behandlung wie die
   M3/M4 Withdraw-Buttons. Der Primary-Slot bleibt für diese States
   per JS hidden, sodass die destruktive Aktion nicht mehr als
   blauer/schwarzer Primary erscheint.
   ============================================================= */
/* Workspace Button Family Unification (2026-05-21):
   Finalized/Expired keep only the layout difference (`margin-top: 0`
   sits the danger button tight under the status note). Geometry +
   colors come from the canonical danger-outline rule above. */
.ride-detail-organizer-v13[data-ui-state="finalized"] .cta-secondary-action.btn-ghost.danger,
.ride-detail-organizer-v13[data-ui-state="expired"] .cta-secondary-action.btn-ghost.danger {
  margin-top: 0;
}
/* Status-Note above the danger button is muted, left-aligned, same
   spacing as M4 confirming-note for a consistent action rhythm. */
.ride-detail-organizer-v13[data-ui-state="finalized"] .cta-status:not([hidden]),
.ride-detail-organizer-v13[data-ui-state="expired"] .cta-status:not([hidden]) {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
  color: var(--c-text-muted);
  text-align: left;
}

/* =============================================================
   T157 WP1c — Post-Ride Hero: Identität zuerst, Datum leiser.
   The hero leads with the tour identity (idea slot) instead of the date.
   Slot semantics are unchanged (identity → [data-workspace-idea], date →
   [data-workspace-date]); only the visual weight and order are swapped for
   this surface: the idea line becomes the dominant title and is lifted
   above the date via flex order; the date drops to a quiet metadata line.
   ============================================================= */
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .ride-hero {
  display: flex;
  flex-direction: column;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .hero-idea {
  order: -1;
  margin: 0;
  font-style: normal;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .hero-date {
  order: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-muted);
  margin: 6px 0 0;
}

/* =============================================================
   M7a — Post-Ride Follow-Up scoped overrides
   Six legacy sections are DOM-moved into [data-slot="finalization-form"]
   while [data-ui-state="post-ride-follow-up"] is set. The V13 button
   reset (`.ride-detail-organizer-v13 button { border:0; background:
   transparent; ... }`) would otherwise flatten the legacy chip toggles,
   choice buttons, primary/ghost action buttons, and the file picker.
   Re-assert the canonical legacy styles inside this scope only —
   no visual redesign.
   ============================================================= */
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .chip-toggle {
  width: auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-rule-strong);
  background: var(--c-bg-elev);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  cursor: pointer;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .chip-toggle:hover {
  border-color: var(--c-text-muted);
  color: var(--c-text);
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .chip-toggle[aria-pressed="true"] {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent);
}
/* Step 10N: the legacy `[data-ui-state="post-ride-follow-up"] .choice-btn`
   block reintroduced hard segmented-control optics on top of the
   Step 10B soft-pill style — and only on the creator surface (because
   data-ui-state is only set during the creator path), creating a
   creator/participant parity break. The styling is now owned in one
   place: `.ride-detail-organizer-v13 [data-trait-host] .choice-btn`. */
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--c-text);
  color: var(--c-bg-elev);
  border: none;
  cursor: pointer;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .btn-primary:hover {
  background: #000;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-rule-strong);
  cursor: pointer;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .btn-ghost:hover {
  background: var(--c-bg-elev);
  border-color: var(--c-text-muted);
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .creator-follow-up-action-bar .btn-ghost,
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .creator-follow-up-action-bar .btn-primary {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  line-height: 1;
}
/* File picker button is a ::file-selector-button pseudo, but the host
   <input type="file"> reset its border via the button rule? No — the
   pseudo isn't covered by the broad button reset; the host input is
   typed=file. Re-assert legacy host styling for safety inside scope. */
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] #creator_follow_up_gpx_file {
  font-family: inherit;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1;
  padding: 0;
  border: none;
  background: none;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] #creator_follow_up_gpx_file::file-selector-button {
  height: 36px;
  padding: 0 14px;
  margin-right: var(--sp-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-rule-strong);
  border-radius: 4px;
  cursor: pointer;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] #creator_follow_up_gpx_file::file-selector-button:hover {
  background: var(--c-bg-elev);
  border-color: var(--c-text-muted);
}
/* Star-rating labels (inputs are visually hidden, labels are the stars).
   These are <label> not <button>, but inside the V13 scope no rule sets
   their typography — re-assert the canonical legacy star sizing so the
   moved DOM keeps the same look. */
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .star-rating:not(.star-rating-readonly) {
  display: inline-flex;
  gap: 2px;
}
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .creator-follow-up-star-rating-primary label,
.ride-detail-organizer-v13[data-ui-state="post-ride-follow-up"] .participant-rating-primary label {
  font-size: 28px;
  min-width: 2.4rem;
}

/* =============================================================
   MOBILE SHELL — Hybrid Navigation (Bottom-Nav + FAB)
   Active only on mobile viewports. Desktop unchanged.
   ============================================================= */

.mobile-bnav,
.mobile-fab {
  display: none;
}

@media (max-width: 600px) {
  /* Hide desktop top-nav on mobile (Hybrid spec: Header = Brand + Avatar) */
  .app-header .main-nav {
    display: none;
  }
  /* Without .main-nav (flex:1), the user-menu would collapse next to the brand.
     Push it to the right edge — desktop layout is unaffected. */
  .app-header .user-menu {
    margin-left: auto;
  }

  /* Hide the existing "+ Neue Ausfahrt" entry-screen pill on mobile —
     the FAB replaces it. Desktop keeps it. */
  #entry-create-ride-button {
    display: none;
  }

  /* Bottom navigation bar (Layer-1 global nav).
     Chrome calibration (v3.8): the bnav uses the elevated surface token
     (`--c-bg-elev`) — the same fill as `.logbook-frame` and `.card`. Prior
     to v3.8 the bnav matched the *page* background, which left a visible
     gap of plain bg between the bottom of the elevated card and the bnav
     itself; the only structural cue was the hairline rule on the top edge,
     so the bnav read as "something floating after the page ended" rather
     than as the natural floor of the app shell. Matching the elevated
     surface anchors the bnav to the card chrome above it; the softened
     top rule (`--c-rule` instead of `--c-rule-strong`) reads as a calm
     section boundary, not a hard chrome line. */
  .mobile-bnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--c-bg-elev);
    border-top: 1px solid var(--c-rule);
    z-index: 150;
  }
  .mobile-bnav:not([hidden]) {
    display: flex;
    align-items: stretch;
  }

  .mobile-bnav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    min-height: 44px;
    color: var(--c-text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    padding: 6px;
    transition: color 120ms ease;
  }
  .mobile-bnav-tab .mobile-bnav-ico {
    font-size: 20px;
    line-height: 1;
    color: var(--c-text-muted);
    transition: color 120ms ease;
  }
  .mobile-bnav-tab[aria-current="page"] {
    color: var(--c-text);
    font-weight: 600;
  }
  .mobile-bnav-tab[aria-current="page"] .mobile-bnav-ico {
    color: var(--c-accent);
  }

  /* Reserve content room above bottom-nav when visible */
  body.mobile-bnav-visible .shell {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* When the FAB is visible (Aktuell only), add extra room so the FAB
     never overlaps the last card. FAB height 56 + 16px breathing.
     Stacks additively with .mobile-bnav-visible (always co-present). */
  body.mobile-fab-visible .shell {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px + 72px);
  }

  /* Floating Create button — only on Aktuell surface */
  .mobile-fab {
    position: fixed;
    right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-bg-elev);
    border: none;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.28);
    cursor: pointer;
    z-index: 160;
    padding: 0;
  }
  .mobile-fab:not([hidden]) {
    display: flex;
  }
  .mobile-fab:active {
    transform: scale(0.96);
  }
  /* The plus is now a geometric SVG centered within its own viewBox, so the
     button's flex centering places it exactly at the circle's center — no
     per-glyph nudge needed. `display: block` drops the inline-SVG baseline gap. */
  .mobile-fab-icon {
    display: block;
  }

  /* Toast positioning — mobile only. Transient status messages must clear
     the bottom-nav interaction zone, and additionally the FAB zone when the
     FAB is visible (Aktuell only). Workspace and Create surfaces carry
     neither chrome → fall back to the default toast bottom offset. */
  body.mobile-bnav-visible .toast-container {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
  }
  body.mobile-fab-visible .toast-container {
    /* FAB top edge is at (64 + safe-area + 16 + 56) above the screen bottom;
       add 16 px breathing so the toast clears the FAB visually. */
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px + 56px + 16px);
  }

  /* Sub-Nav (Aktuell / Logbuch) — no mobile-specific override needed.
     The former block here trimmed `.logbook-frame-head` padding to 2px and
     inflated the tab links to 12px padding with a `bottom: 10px` underline,
     purely to compensate for the global `button { min-height: 44px }` stretch
     on the secondary-nav tabs. Now that `.section-scope-link` sets
     `min-height: 0` (see its base rule, mirroring `.nav-link`), the tab links
     are text-height at every width, the underline hugs the label, and the
     Ausfahrten head shares the exact same rules as the Entdecken head — so the
     active underline is identically positioned across all viewports. */
}

/* =============================================================
   INSTALL HINT (T136j) — calm, dismissible iOS Home-Screen guidance.
   Visibility is gated entirely in app.js (iOS + non-standalone +
   not-dismissed); this is presentation only. Non-modal, non-blocking,
   scrolls with content, never alarmist (no danger palette).
   ============================================================= */
.install-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  /* .shell is a justify-items:center grid; fill the track (like .content) so
     the hint stretches to the content width instead of shrinking to its text. */
  width: 100%;
  max-width: var(--max-content);
  margin: var(--sp-4) auto 0;
  padding: var(--sp-3) var(--sp-4);
  box-sizing: border-box;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  color: var(--c-text-muted);
}
/* The class sets display:flex, so the hidden attribute needs an explicit
   override to keep the default-hidden / dismissed states collapsed. */
.install-hint[hidden] {
  display: none;
}
.install-hint-text {
  /* zero basis so flex-grow fills the row regardless of the text's
     (large) max-content width; min-width:0 lets the text wrap inside. */
  flex: 1 1 0%;
  min-width: 0;
}
.install-hint-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--c-text);
}
.install-hint-help {
  margin: var(--sp-1) 0 0;
  font-size: 0.82rem;
  color: var(--c-text-muted);
}
.install-hint-dismiss {
  flex: 0 0 auto;
  /* override the global `button { width: 100% }` so the × stays compact and the
     text keeps the rest of the row. */
  width: auto;
  margin: -2px -6px 0 0;
  padding: 2px 8px;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-dim);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.install-hint-dismiss:hover {
  color: var(--c-text);
}

/* =============================================================
   T147 — Pilot Feedback dialog. Accessible from the account menu
   anywhere in the app. Works on desktop, mobile, and PWA.
   ============================================================= */
.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
  overscroll-behavior: contain;
}

.feedback-overlay[hidden] {
  display: none;
}

.feedback-dialog {
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  animation: feedback-dialog-in 160ms ease-out;
}

@keyframes feedback-dialog-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feedback-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 4px 20px;
}

.feedback-dialog-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.feedback-close {
  border: 0;
  background: transparent;
  color: var(--muted, #475569);
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 8px;
}

.feedback-close:hover {
  color: var(--text, #0f172a);
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 20px 20px 20px;
  overflow-y: auto;
}

.feedback-intro {
  margin: 0;
  color: var(--muted, #475569);
  font-size: 0.92rem;
  line-height: 1.45;
}

.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feedback-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.feedback-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem; /* >=16px keeps iOS Safari from zooming on focus */
  color: var(--text, #0f172a);
  background: #fff;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent, #3156d3);
  box-shadow: 0 0 0 3px rgba(49, 86, 211, 0.16);
}

.feedback-status {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: var(--muted, #475569);
}

.feedback-status[data-state="error"] {
  color: #b91c1c;
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.feedback-submit-button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 520px) {
  .feedback-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .feedback-dialog {
    max-width: none;
    max-height: 100dvh;
    border-radius: 0;
    /* Respect PWA / notch safe areas in full-screen standalone mode. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Read-only route annotation markers (T154 display) ───────────────────────
   Simple per-type pin presentation over the existing route map. No final icon
   design (V1); the glyph + per-type class are a lightweight differentiator.

   T157 polish: the teardrop + glyph rotations MUST live on the inner `__pin`
   wrapper, NOT on the Leaflet-positioned root. Leaflet sets its own
   `transform: translate(...)` inline on the marker root to place it, which
   silently overrides any stylesheet `transform` there — so a `rotate(-45deg)`
   on `.route-annotation-marker` never took effect: the teardrop pointed
   bottom-left (≈14px left of the route point) and the glyph's counter-rotation
   left the star tilted 45°. Rotating the child instead is untouched by Leaflet,
   so the pin points straight down and the star sits upright. */
.route-annotation-marker {
  /* Plain positioning box owned by Leaflet (it inline-styles width/height from
     iconSize and the placement transform). All visuals live on __pin. */
  background: none;
  border: none;
}

/* Unified Highlight-Marker: eine ruhige, weiße Teardrop-Kachel mit dem geteilten
   monochromen Kategorie-Icon in Akzent — dieselbe Bildsprache wie der Capture-Dialog.
   Deutlich größer als früher (mobiltauglich), weicher, mehrlagiger Schatten. */
.route-annotation-marker__pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--surface, #fff);
  border: 1.5px solid rgba(20, 16, 12, 0.1);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 12px -3px rgba(20, 16, 12, 0.3), 0 1px 3px rgba(20, 16, 12, 0.16);
}

.route-annotation-marker__glyph {
  transform: rotate(45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--c-accent, #1e3a8a);
}

.route-annotation-marker__glyph svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Read-only Highlight-Marker (Tour-Detail/Discover/Logbuch) und Creator-
   Nachbereitung teilen jetzt EINE Marker-Sprache: weiße Kachel, Akzent-Icon.
   Keine divergierenden Akzent-Füllungen / dunklen Rahmen mehr. */

.route-annotation-marker__glyph--default {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text-muted, #55504a);
}

/* Foto-Marker: das Foto ist das Gesicht — deutlich größer, mit ruhigem weißem Ring
   und weichem Schatten. Der Rahmen ist nur ein schmaler Ring um das große Foto. */
/* Der weiße Ring kommt aus der Hintergrundfläche (Foto 46px in 56px-Kachel → 5px
   ringsum), NICHT aus einer Border: eine Border auf der gedrehten 3-Ecken-Teardrop
   rendert subpixel-ungleichmäßig (Ring links/rechts optisch unterschiedlich dick,
   wirkt „verschoben"). Ohne Border ist der Ring geometrisch exakt gleichmäßig. */
.route-annotation-marker__pin--photo {
  width: 56px;
  height: 56px;
  background: var(--surface, #fff);
  border: 0;
  box-shadow: 0 4px 14px -3px rgba(20, 16, 12, 0.34), 0 1px 3px rgba(20, 16, 12, 0.2);
}

/* Foto exakt zentriert — unabhängig von Flex/Border/Subpixel: absolute Positionierung
   im (position:relative) __pin via inset:0 + margin:auto bei fester Größe zentriert
   geometrisch perfekt in beiden Achsen; die 45°-Drehung dreht um genau diese Mitte. */
.route-annotation-marker__photo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 1px rgba(20, 16, 12, 0.08);
}

.route-annotation-marker__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.route-annotation-marker.is-active .route-annotation-marker__pin {
  border-color: var(--c-accent, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.28), 0 4px 12px -3px rgba(20, 16, 12, 0.3);
  z-index: 1000;
}

/* Saved SECTION marker: a route plaque, visually distinct from a place's
   teardrop pin and centred on the span. It can show a photo, a category icon,
   or a neutral fallback. */
.route-annotation-marker__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 38px;
  padding: 0 12px;
  background: var(--surface, #fff);
  color: var(--c-accent, #1e3a8a);
  border: 1.5px solid rgba(20, 16, 12, 0.1);
  border-radius: 999px;
  box-shadow: 0 4px 12px -3px rgba(20, 16, 12, 0.3), 0 1px 3px rgba(20, 16, 12, 0.16);
  line-height: 1;
  white-space: nowrap;
}

.route-annotation-marker__badge-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--c-accent, #1e3a8a);
}

.route-annotation-marker__badge-main svg {
  display: block;
  width: 23px;
  height: 23px;
}

.route-annotation-marker__badge-main--neutral {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text-muted, #55504a);
}

.route-annotation-marker__badge-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(20, 16, 12, 0.08);
}

.route-annotation-marker--section.route-annotation-marker--photo .route-annotation-marker__badge {
  min-width: 52px;
  height: 46px;
  padding: 0 8px;
}

.route-annotation-marker--section.route-annotation-marker--photo .route-annotation-marker__badge-photo {
  width: 38px;
  height: 38px;
}

.route-annotation-marker__badge-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.route-annotation-marker--section.is-active .route-annotation-marker__badge {
  border-color: var(--c-accent, #1e3a8a);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.28), 0 4px 12px -3px rgba(20, 16, 12, 0.3);
  z-index: 1000;
}

/* The moment currently being authored. While the sheet is open this pin must be
   unmistakably the active object — clearly stronger than any saved marker — so it
   carries a wide, gently pulsing accent halo. Geometry is unchanged (same anchor
   as the saved highlight pin); only the halo grows. Removed on save/cancel, so
   the emphasis disappears once authoring ends. */
.route-annotation-marker--capture {
  z-index: 1100 !important;
}

.route-annotation-marker--capture .route-annotation-marker__pin {
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35);
  animation: post-ride-capture-pulse 1.6s ease-in-out infinite;
}

@keyframes post-ride-capture-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 0 9px rgba(59, 130, 246, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .route-annotation-marker--capture .route-annotation-marker__pin {
    animation: none;
  }
}

.route-annotation-popup__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.route-annotation-popup__type-icon {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent, #1e3a8a);
}

.route-annotation-popup__type-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.route-annotation-popup__label {
  margin-top: 2px;
}

.route-annotation-popup__note {
  margin-top: 4px;
  white-space: pre-wrap;
}

.route-annotation-popup__image {
  display: block;
  width: 100%;
  max-width: 220px;
  margin-top: 8px;
  border-radius: 10px;
  object-fit: cover;
}

.route-system-marker {
  background: transparent;
  border: 0;
}

.route-system-marker__layout {
  position: relative;
  display: block;
  width: 104px;
  height: 28px;
}

.route-system-marker__layout--left {
  --route-system-marker-chip-x: calc(-100% + 46px);
}

.route-system-marker__layout--right {
  --route-system-marker-chip-x: 58px;
}

.route-system-marker__chip {
  position: absolute;
  left: 0;
  top: 3px;
  transform: translateX(var(--route-system-marker-chip-x, 58px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(248, 246, 241, 0.96);
  border: 1px solid rgba(26, 22, 19, 0.16);
  color: rgba(26, 22, 19, 0.82);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(26, 22, 19, 0.12);
  white-space: nowrap;
}

.route-system-marker__dot {
  position: absolute;
  left: 48px;
  top: 10px;
  box-sizing: border-box;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 22, 19, 0.58);
  border: 2px solid rgba(248, 246, 241, 0.95);
  box-shadow: 0 1px 3px rgba(26, 22, 19, 0.16);
}

/* T157 polish ("Karte = Erinnerung") + Slice 2 (Map-first): GPX present → the
   route section reads as a route-check, not a route-entry mask. Toggled by JS via
   `post-ride-route-block--gpx` (only when hasGpxAsset). Hide-only:
     • the route-source toggle (.route-options) is hidden — with a GPX the source
       is settled, so the GPX-vs-Orte radio pair is noise.
     • the Orte fallback is already hidden in gpx mode (textField.hidden).
     • #post-ride-route-block then shows only the GPX field ("GPX ersetzen").
   Slice 2 reversed the source order to map → facts → highlights → route-check,
   so the route-check now FOLLOWS the dominant 56vh map instead of preceding it.
   Still hide-only — no reorder via flex/order, no DOM move, no removed elements;
   the no-GPX flow is unchanged. */
.post-ride-route-block--gpx .route-options {
  display: none;
}

/* T154 V1 Highlight capture (creator follow-up). Calm, understated — reuses the
   route-map idiom; the list stays quiet (no badges, no counts). */
.post-ride-highlights {
  margin-top: 18px;
}

.post-ride-highlights__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.post-ride-highlights__hint {
  color: var(--muted, #666);
  font-size: 0.85rem;
  margin: 0;
}

/* T157 WP5: the hero map wrapper holds either the Leaflet map card OR the calm
   labeled placeholder (renderPostRideHeroMap chooses the tier). It is always
   present so the map-first hero survives a ride without route geometry. */
.post-ride-hero-map {
  margin-top: 18px;
}

.post-ride-highlight-map-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--c-rule);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(26, 22, 19, 0.055);
  overflow: hidden;
  background: var(--c-bg);
}

.post-ride-highlight-map-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(248, 246, 241, 0.64),
    inset 0 -18px 30px rgba(26, 22, 19, 0.035);
  pointer-events: none;
}

.post-ride-highlight-map {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 56vh;
  min-height: 320px;
  max-height: 600px;
}

.post-ride-map-brand {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 470;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(230, 225, 215, 0.82);
  border-radius: 999px;
  background: rgba(248, 246, 241, 0.76);
  box-shadow: 0 3px 10px rgba(26, 22, 19, 0.065);
  line-height: 0;
  pointer-events: none;
  user-select: none;
}

.post-ride-map-brand__logo {
  display: block;
  height: 16px;
  width: auto;
}

/* Crosshair only when the map is a live capture surface (route tier, creator) —
   the Startbereich point map (no capture) must not imply tap-to-place. */
.post-ride-highlight-map--capture {
  cursor: crosshair;
}

/* T157 WP5 Tier 3: no geometry and no Startbereich → a calm, lighter placeholder
   carrying the Ziel/Region label. Honest about the absent map without reading as
   broken or empty. */
.post-ride-hero-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 200px;
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.post-ride-hero-map-fallback__label {
  margin: 0;
  color: var(--muted, #666);
  font-size: 1rem;
}

/* Route-First-Gate „Route klären" (step 1). Calm entry: a clear context label +
   a short why-line + the step title, then route actions weighted primary →
   secondary → optional. No card frame, in keeping with the flat follow-up surface. */
.post-ride-route-gate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 24px);
}

/* "Route klären" is the first WORK SECTION inside the Nachbereitung workspace
   (the page title is the workspace itself, in the hero). The section header is
   set apart from the hero by a quiet top divider so it reads as a section, not a
   second page title. */
.post-ride-route-gate__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  padding-top: var(--sp-3, 16px);
  border-top: 1px solid var(--border, #e5e5e5);
}

.post-ride-route-gate__title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 600;
}

/* The two "set the ridden route" actions (upload GPX / use planned route) belong
   together — group them tightly so they read as one choice, set apart from the
   no-recording escape below the divider. */
.post-ride-route-gate__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.post-ride-route-gate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 16px);
}

.post-ride-route-gate__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1, 4px);
}

/* All three route choices share the same width + alignment so the stack reads as
   one decision. The two upper options differ only by priority (primary upload vs.
   secondary planned route); the no-recording escape keeps the same full width but
   stays a quiet ghost button, set apart below the divider. */
.post-ride-route-gate__group .btn-primary,
.post-ride-route-gate__group .btn-secondary,
.post-ride-route-gate__action--optional > .btn-ghost {
  width: 100%;
}

/* Optional path stays a full button but is clearly subordinate: set apart from
   the with-route group by a quiet divider + extra top spacing. */
.post-ride-route-gate__action--optional {
  margin-top: var(--sp-2, 8px);
  padding-top: var(--sp-3, 16px);
  border-top: 1px solid var(--border, #e5e5e5);
}

.post-ride-route-gate__hint {
  margin: 0;
}

.post-ride-route-gate__status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #666);
}

.post-ride-route-gate__error {
  margin: 0;
  color: var(--danger, #b00020);
}

/* Route Trim as a click MODE of the moment map — a small radio group in the map
   header chooses whether a click captures a Moment or sets the Start/Ende point.
   No separate section, no second map. */
.post-ride-capture-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}

.post-ride-capture-mode__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--c-text, #1a1613);
}

.post-ride-capture-mode__option input {
  cursor: pointer;
}

/* Form-Auswahl (Strecke | Punkt) als ruhiges Segmented Control im Erfassungskopf,
   sofort sichtbar bevor getippt wird. Die Option-Buttons sind doppelt gescopt
   (0-2-0 / 0-3-0), damit der v13-Button-Reset (.ride-detail-organizer-v13 button,
   0-1-1) sie nicht auf losen Text zurücksetzt. */
.post-ride-highlight-shape {
  display: inline-flex;
  margin-top: 10px;
  padding: 3px;
  gap: 2px;
  background: var(--c-bg, #f8f6f1);
  border-radius: 12px;
}

.post-ride-highlight-shape .post-ride-highlight-shape__option {
  min-width: 92px;
  padding: 7px 16px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text-muted, #55504a);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.post-ride-highlight-shape .post-ride-highlight-shape__option.is-active {
  background: var(--c-bg-elev, #fff);
  color: var(--c-text, #1a1613);
  box-shadow: 0 1px 3px rgba(20, 16, 12, 0.12);
}

/* Inline confirm shown after a Start/Ende point is placed on the map. */
.post-ride-trim-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-bg);
}

.post-ride-trim-pending__readout {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.post-ride-trim-pending__removed {
  margin: 0;
  color: var(--c-text-muted, #55504a);
}

.post-ride-trim-pending__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.post-ride-trim-pending__error {
  margin: 0;
  color: var(--danger, #b00020);
}

/* Slice 4 — Schritt 2B: textual route record (Orte + distance) for the
   "ohne GPX fortfahren" path. */
.post-ride-route-record {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.post-ride-route-record__honest {
  margin: 0;
}

/* Kein uniformes Raster mehr: gap:0, die Gruppierung entsteht über gezielte
   margin-top je Block (eng innerhalb einer Gruppe, mittel zwischen Gruppen, groß
   vor dem Footer) — so wirkt der Dialog rhythmisch statt formularartig. */
.post-ride-highlight-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Klassische Abschlusszeile unten: „Speichern" als flächige Primäraktion, darunter
   „Abbrechen" als ruhige Ghost-Aktion — gestapelt, klar, erwartbar. Großer Abstand
   nach oben trennt sie vom Inhalt. */
.post-ride-highlight-form__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 30px;
}

/* Footer-Aktionen im v13-Scope: `.btn-primary`/`.btn-ghost` werden dort dunkel/grau
   re-styled (0-3-0) und hier per ID (1-1-0) übersteuert. „Speichern" = flächige
   Akzent-Primäraktion, voll breit; „Abbrechen" = ruhige, voll breite Ghost-Aktion
   darunter. Gated (keine Kategorie): weiche Akzentfläche statt schwerem Grau. */
.post-ride-highlight-sheet #post-ride-highlight-save {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 14px;
  background: var(--c-accent, #1e3a8a);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease;
}

.post-ride-highlight-sheet #post-ride-highlight-save:hover {
  background: #16306e;
}

.post-ride-highlight-sheet #post-ride-highlight-save:disabled {
  background: var(--c-accent-soft, #e6ebf5);
  color: var(--c-accent, #1e3a8a);
  box-shadow: none;
  cursor: not-allowed;
}

.post-ride-highlight-sheet #post-ride-highlight-cancel {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--c-text-muted, #55504a);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.post-ride-highlight-sheet #post-ride-highlight-cancel:hover {
  color: var(--c-text, #1a1613);
  background: var(--c-bg, #f8f6f1);
}

/* Kern-Gruppe: der Name folgt der Kategorie mit mittlerem Abstand und ist bewusst
   leichter als die Kategorie (die primäre Entscheidung). */
/* Sekundär-Zone: der Name ist eine ruhige native Zelle, kein beschriftetes Feld. */
.post-ride-highlight-field {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
}

/* Kein sichtbares Feld-Label (weniger Formular-Charakter) — der Platzhalter trägt
   den Hinweis; das Label bleibt für Screenreader erhalten. */
.post-ride-highlight-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Namensfeld als ruhige, gefüllte Zelle in derselben Gruppen-Sprache wie die
   Kategorieliste — kein loses Systemfeld. */
.post-ride-highlight-sheet .form-input {
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  background: var(--c-bg, #f8f6f1);
  color: var(--c-text, #1a1613);
  font-size: 1.02rem;
  box-shadow: none;
}

.post-ride-highlight-sheet .form-input::placeholder {
  color: var(--c-text-dim, #8b857e);
}

.post-ride-highlight-sheet .form-input:focus,
.post-ride-highlight-sheet .form-input:focus-visible {
  outline: none;
  background: var(--surface, #fff);
  box-shadow: inset 0 0 0 1.5px var(--c-accent, #1e3a8a);
}

.post-ride-highlight-category {
  display: flex;
  flex-direction: column;
}

/* Kategorie als native iOS-Gruppenliste (Einstellungen/Karten-Sprache): EIN ruhiger
   Inset-Block, Zeilen durch feine Haarlinien getrennt — kein Pill-/Kachel-/Füllungs-
   Rauschen. Führendes monochromes Symbol, Auswahl per Häkchen. */
.post-ride-highlight-category__chips {
  display: flex;
  flex-direction: column;
  background: var(--c-bg, #f8f6f1);
  border-radius: 14px;
  overflow: hidden;
}

.post-ride-highlight-sheet .post-ride-highlight-category__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 54px;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--c-text, #1a1613);
  padding: 12px 16px;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

/* Haarlinie zwischen den Zeilen (nicht über/unter dem Block) — inset box-shadow
   gewinnt den v13-Button-Reset. */
.post-ride-highlight-sheet .post-ride-highlight-category__chip + .post-ride-highlight-category__chip {
  box-shadow: inset 0 1px 0 var(--c-rule, #e6e1d7);
}

.post-ride-highlight-sheet .post-ride-highlight-category__chip:active {
  background: rgba(20, 16, 12, 0.035);
}

/* Führendes Symbol: monochrome Linie, keine Kachel, ruhig gedämpft. */
.post-ride-highlight-sheet .post-ride-highlight-category__chip-glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--c-text-muted, #55504a);
}

.post-ride-highlight-sheet .post-ride-highlight-category__chip-glyph svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Auswahl = Akzent-Label + führendes Symbol in Akzent + Häkchen (native Settings-
   Selektion). Keine schwere Fläche, ein Signal. */
.post-ride-highlight-sheet .post-ride-highlight-category__chip.is-active {
  color: var(--c-accent, #1e3a8a);
  font-weight: 500;
}

.post-ride-highlight-sheet .post-ride-highlight-category__chip.is-active .post-ride-highlight-category__chip-glyph {
  color: var(--c-accent, #1e3a8a);
}

.post-ride-highlight-sheet .post-ride-highlight-category__chip.is-active::after {
  content: "✓";
  margin-left: auto;
  padding-left: 10px;
  color: var(--c-accent, #1e3a8a);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.post-ride-highlight-photo__action {
  min-height: auto;
}

/* Foto = leise, freiwillige Sekundäraktion — KEINE gestrichelte Upload-Card und
   keine Icon-Kachel mehr. Ein ruhiger, inline gesetzter Textknopf (Emoji + Wort),
   der nie wichtiger wirkt als Kategorie oder Name. Gescopt, damit der v13-
   Button-Reset ihn nicht auf losen Text zurücksetzt. Workflow unverändert. */
.post-ride-highlight-sheet .post-ride-highlight-photo__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: auto;
  text-align: left;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--c-text-muted, #55504a);
  cursor: pointer;
  transition: color 0.14s ease;
}

.post-ride-highlight-sheet .post-ride-highlight-photo__trigger:hover,
.post-ride-highlight-sheet .post-ride-highlight-photo__trigger:focus-visible {
  color: var(--c-text, #1a1613);
}

.post-ride-highlight-photo__trigger-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--c-text-muted, #55504a);
}

.post-ride-highlight-photo__trigger-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.post-ride-highlight-photo__trigger-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.post-ride-highlight-photo__trigger-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-text-muted, #55504a);
}

.post-ride-highlight-photo__trigger-hint {
  font-size: 0.78rem;
  color: var(--c-text-dim, #8b857e);
}

.post-ride-highlight-photo {
  margin-top: 14px;
}

.post-ride-highlight-photo__preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-ride-highlight-photo__image {
  display: block;
  width: 100%;
  max-width: 180px;
  max-height: 140px;
  border-radius: 10px;
  object-fit: cover;
}

.post-ride-highlight-photo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* (Der frühere Footer-Media-Query entfällt — die Aktionen liegen jetzt in der
   Kopf-Aktionsleiste, die auf allen Breiten gleich sitzt.) */

.post-ride-marker-tooltip {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  color: #111827;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}

.post-ride-marker-tooltip__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-ride-marker-tooltip__category {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--muted, #666);
  white-space: nowrap;
}

.post-ride-marker-tooltip__category-icon {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent, #1e3a8a);
}

.post-ride-marker-tooltip__category-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

.post-ride-marker-tooltip__label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Bottom Sheet für die Moment-Bearbeitung. Natives <dialog> + showModal()
   (Top Layer + ::backdrop, AGENTS.md) → viewport-verankert und immun gegen den
   iOS-Standalone-PWA position:fixed-Bug. Geschlossen ist es per UA-Stylesheet
   display:none; geöffnet liegt es als ruhiges Sheet am unteren Rand, sodass die
   Karte darüber sichtbar bleibt. Auf Desktop horizontal zentriert + begrenzt. */
.post-ride-highlight-sheet {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* Am unteren Rand verankert (kein loses Pop-up): `inset: auto 0 0` setzt top
   explizit auf auto und überschreibt damit das UA-`inset: 0` modaler <dialog>e,
   das das Sheet sonst oben festklebt. So liegt es als Drawer unten an der Karte —
   weiterhin Top-Layer (showModal), keine fixed-PWA-Sonderlösung. */
.post-ride-highlight-sheet[open] {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: var(--surface, #fff);
  box-shadow: 0 -0.5px 0 rgba(20, 16, 12, 0.06), 0 -16px 44px -14px rgba(20, 16, 12, 0.22);
}

/* Desktop: schmaler, am unteren Rand verankert — kein voll-breiter Balken,
   aber auch nicht oben am Viewport. */
@media (min-width: 601px) {
  .post-ride-highlight-sheet[open] {
    max-width: 420px;
  }
}

/* Leichter Backdrop: die Karte bleibt klar sichtbar, das Sheet wirkt als Teil
   der Kartenerfassung, nicht als modaler Popup-Vorhang. */
.post-ride-highlight-sheet::backdrop {
  background: rgba(0, 0, 0, 0.12);
}

/* Header row: type heading on the left, a clear close (X) on the right. */
/* Kopfzeile: fixer Titel links, X rechts. Ruhig ausbalanciert. */
.post-ride-highlight-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
}

/* Der Titel ist die wichtigste Zeile des Dialogs: die editoriale Serif-Stimme
   (wie sonst bei Ridync-Überschriften) und deutlich mehr Größe geben ihm Präsenz
   und Wärme — er liest als ruhige, menschliche Frage, nicht als Feldkopf. */
/* Native, funktionale Sheet-Überschrift (SF-Pro-/iOS-Sprache) statt editorialer
   Serif — ruhig, selbstverständlich, kein Journal-Ton. */
.post-ride-highlight-sheet__title {
  margin: 0;
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-text, #222);
}

.post-ride-highlight-sheet__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-dim, #8b857e);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

/* Dezent und konsistent mit den übrigen Sheets: KEINE dauerhafte Fläche. Eine
   ruhige Füllung erscheint nur bei echtem Hover/Press. Tastatur-Fokus zeigt einen
   Ring statt einer Füllung — wichtig, weil showModal() den X (erstes fokussierbares
   Element) beim Öffnen automatisch fokussiert; ein Füll-Fokus sähe sonst wie ein
   dauerhaft aktiver Zustand aus. */
.post-ride-highlight-sheet__close:hover {
  background: var(--c-bg, #f8f6f1);
  color: var(--c-text, #1a1613);
}

.post-ride-highlight-sheet__close:active {
  background: var(--c-rule, #e6e1d7);
  color: var(--c-text, #1a1613);
}

.post-ride-highlight-sheet__close:focus-visible {
  outline: 2px solid var(--c-accent, #1e3a8a);
  outline-offset: 2px;
}

/* Im Sheet liefert das Padding den Abstand; die Inhaltsblöcke brauchen keinen
   eigenen oberen Außenabstand mehr. */
.post-ride-highlight-sheet .post-ride-highlight-form {
  margin-top: 0;
}

/* Abschnittserfassung: der Endpunkt-Hinweis ist ein ruhiges Overlay DIREKT auf
   der Karte (oben zentriert), nicht mehr eine Zeile unterhalb der Karte — die
   Interaktion bleibt vollständig auf der Karte. pointer-events: none, damit der
   Hinweis den zweiten Tap nie abfängt; z-index über den Leaflet-Panes/Controls. */
.post-ride-highlight-endpoint-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--c-text, #222);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  animation: post-ride-endpoint-hint-in 0.18s ease-out;
}

/* Ruhig eingeblendet statt hart eingeblitzt — wirkt als Teil des Kartenmodus. */
@keyframes post-ride-endpoint-hint-in {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .post-ride-highlight-endpoint-hint { animation: none; }
}

/* Slice 5 — kompakte Legende statt langer Formularliste: umbrechende Chips
   direkt unter der Karte; bei vielen Momenten begrenzt die Höhe + interner
   Scroll das Element, statt die Seite nach unten zu drücken. */
.post-ride-highlight-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 132px;
  overflow-y: auto;
}

.post-ride-highlight-list__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 8px 5px 6px;
  border: 1px solid var(--border, #e2e2e2);
  border-radius: 999px;
  background: var(--surface, #fff);
  cursor: pointer;
}

.post-ride-highlight-list__category {
  flex: 0 0 auto;
  font-size: 0.92rem;
  line-height: 1;
}

.post-ride-highlight-list__title {
  font-size: 0.85rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-ride-highlight-list__delete {
  background: none;
  border: none;
  color: var(--muted, #888);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 4px 6px;
}

.post-ride-highlight-list__delete:hover {
  color: var(--danger, #c0392b);
}

/* Slice 5 — Karte + Momente als EINE Komponente. Der Wrapper gruppiert Hero-
   Karte und Momentliste; er trägt selbst keine Rahmen/Hintergründe, damit er im
   2B-Pfad (Karte + Momente versteckt) unsichtbar bleibt. Die Liste rückt als
   Kartenlegende direkt unter die Karte (kein Sektions-Abstand mehr). */
.post-ride-moments {
  margin-top: 6px;
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--post-ride-surface-border, var(--c-rule));
  border-radius: var(--post-ride-surface-radius, 16px);
  background: var(--post-ride-surface-bg, var(--c-bg));
  box-shadow: var(--post-ride-surface-shadow, 0 8px 22px rgba(26, 22, 19, 0.04));
}

/* Überschrift + kurze Einleitung führen die Komponente an (über der Karte). */
.post-ride-moments-head {
  margin: 0 0 12px;
}

.post-ride-moments-head .post-ride-highlights__title {
  font-size: clamp(1.08rem, 2.2vw, 1.22rem);
  line-height: 1.2;
}

.post-ride-moments-head .post-ride-highlights__hint {
  max-width: 34rem;
}

.post-ride-moments .post-ride-hero-map {
  margin-top: 0;
}

.post-ride-moments .post-ride-highlights {
  margin-top: 8px;
}

/* Moment Card — nur bei ausgewähltem Marker sichtbar. Sie bleibt der Karte
   untergeordnet, liest aber als Erinnerungsobjekt statt als Formularfläche. */
.post-ride-highlight-detail {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--surface, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  color: var(--c-text, #222);
}

.post-ride-highlight-detail__close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: rgba(15, 23, 42, 0.54);
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.post-ride-highlight-detail__close:hover,
.post-ride-highlight-detail__close:focus-visible {
  color: rgba(15, 23, 42, 0.9);
  background: rgba(255, 255, 255, 0.96);
}

.post-ride-highlight-detail__media {
  overflow: hidden;
  margin: -2px -2px 0;
  border-radius: 12px;
  background: var(--surface-muted, #f6f6f4);
}

.post-ride-highlight-detail__photo-trigger {
  display: block;
  width: calc(100% + 4px);
  min-height: 0;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  text-align: left;
}

.post-ride-highlight-detail__photo-trigger:focus-visible {
  outline: 2px solid var(--c-accent, #1e3a8a);
  outline-offset: 2px;
}

.post-ride-highlight-detail__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 2px;
}

.post-ride-highlight-detail__title,
.post-ride-highlight-detail__meta {
  margin: 0;
  line-height: 1.35;
}

.post-ride-highlight-detail__title {
  max-width: min(100%, 44rem);
  font-size: 1rem;
  line-height: 1.28;
  font-weight: 600;
}

.post-ride-highlight-detail__meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
}

.post-ride-highlight-detail__meta-icon {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent, #1e3a8a);
}

.post-ride-highlight-detail__meta-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}

.post-ride-highlight-detail__image {
  display: block;
  width: 100%;
  height: clamp(170px, 32vw, 280px);
  object-fit: cover;
}

/* Shared single-image viewer: native dialog top layer, one original image,
   no gallery/navigation chrome. */
.moment-photo-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.98);
  color: #fff;
}

.moment-photo-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.moment-photo-viewer::backdrop {
  background: rgba(15, 23, 42, 0.56);
}

.moment-photo-viewer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 12px;
}

.moment-photo-viewer__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
}

.moment-photo-viewer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.moment-photo-viewer__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.moment-photo-viewer__body {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0 16px max(16px, env(safe-area-inset-bottom, 0px));
  place-items: center;
}

.moment-photo-viewer__status {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.moment-photo-viewer__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.post-ride-highlight-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 0;
}

.post-ride-highlight-detail__action {
  min-height: auto;
  padding: 6px 10px;
  border-color: transparent;
  background: transparent;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.82rem;
}

.post-ride-highlight-detail__action:hover,
.post-ride-highlight-detail__action:focus-visible {
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.86);
}

.btn-ghost.danger.post-ride-highlight-detail__action--remove {
  border-color: transparent;
  background: transparent;
  color: rgba(185, 28, 28, 0.7);
}

.btn-ghost.danger.post-ride-highlight-detail__action--remove:hover,
.btn-ghost.danger.post-ride-highlight-detail__action--remove:focus-visible {
  border-color: transparent;
  background: rgba(185, 28, 28, 0.06);
  color: var(--danger, #b91c1c);
}

@media (max-width: 520px) {
  .post-ride-highlight-detail {
    border-radius: 12px;
    box-shadow: 0 9px 22px rgba(15, 23, 42, 0.08);
  }

  .post-ride-highlight-detail__image {
    height: clamp(160px, 48vw, 220px);
  }
}

/* Slice 5 — der aktive Chip (Klick auf Marker ODER Chip) wird hervorgehoben.
   Die optionale Notiz lebt im title-Tooltip des Chips (kein eigenes DOM mehr). */
.post-ride-highlight-list__item.is-active {
  border-color: var(--accent, #3b82f6);
  box-shadow: inset 0 0 0 1px var(--accent, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}

/* Statisches Höhenprofil: eine ruhige gefüllte Silhouette direkt unter der
   Karte, die sich optisch an die GPX-Route anlehnt (gedämpftes Routen-Blau).
   Kein Analysewerkzeug — keine Achsen, kein Gitter, keine Y-Skala, keine
   Legende, keine Tooltips. Nur eine kleine Überschrift, ein dezenter Gipfel-
   punkt mit Höhenwert und Start/Mitte/Ende-Distanz. Nur sichtbar, wenn echte
   Höhenwerte vorliegen (renderPostRideElevationProfile toggelt [hidden]). */
.post-ride-elevation {
  margin-top: 12px;
  margin-bottom: 2px;
}

.post-ride-elevation[hidden] {
  display: none;
}

/* Der Platz ist reserviert, sobald ein Profil vorliegt (onGeometryReady rendert
   sofort). Während der GPX-Intro bleibt es im `is-pending`-Zustand unsichtbar,
   ohne zu kollabieren; onMapReady entfernt die Klasse → ruhiges Einblenden per
   Transition. Kein Höhenwechsel, also kein Layout-Shift. */
.post-ride-elevation {
  transition: opacity 320ms ease, transform 320ms ease;
}

.post-ride-elevation.is-pending {
  opacity: 0;
  transform: translateY(4px);
}

/* Kopfzeile: links „Höhenprofil · <Hm>", rechts „<Fahrzeit> Fahrzeit". Gleiche
   ruhige Typografie, baseline-ausgerichtet, einzeilig solange Platz da ist; bei
   sehr schmalen Viewports darf die rechte Seite sauber (rechtsbündig) umbrechen. */
.post-ride-elevation__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0 0 6px;
}

.post-ride-elevation__title,
.post-ride-elevation__duration {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--c-text-muted);
}

.post-ride-elevation__duration {
  margin-left: auto;
  text-align: right;
}

/* Der Gipfel-Punkt wird als HTML-Element positioniert (nicht im SVG), damit er
   trotz preserveAspectRatio="none" ein runder Punkt bleibt. Das Plot hält die
   %-Referenz; die Chart-Box lässt oben Platz für das ruhige Höhen-Label. */
.post-ride-elevation__chart {
  position: relative;
  padding-top: 18px;
}

.post-ride-elevation__plot {
  position: relative;
  height: 72px;
}

.post-ride-elevation__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.post-ride-elevation__area {
  fill: url(#post-ride-elevation-fill);
}

.post-ride-elevation__line {
  fill: none;
  stroke: rgba(59, 130, 246, 0.55);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Tempolinie: eine ruhige, dem Höhenprofil untergeordnete zweite Linie. Kein
   Flächenverlauf, keine Marker, gedämpftes Bronze, damit sie neben dem Blau des
   Höhenprofils nicht konkurriert — sie zeigt den Charakter, nicht Messwerte. */
.post-ride-elevation__speed {
  fill: none;
  stroke: rgba(180, 83, 10, 0.42);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Ruhige weiße Blase mit dezentem Schatten, folgt dem Mauszeiger leicht (die
   left-Transition glättet die Bewegung). Zwei Zeilen zum selben Profilpunkt wie
   der Karten-Cursor: „Höhe: 475 m" (blaue Kurve, deshalb oben) und
   „Tempo: 56 km/h". Nur während Hover sichtbar (Desktop).
   width: max-content hält die Box immer auf ihrer intrinsischen Breite — ohne
   das wird ein absolut positioniertes Element nahe der rechten Plot-Kante auf
   die Restbreite gequetscht und bricht mitten in den Werten um. Zeilen brechen
   ausschließlich am \n (pre-line); der Anker wird zusätzlich im Hover-Code so
   geclampt, dass die volle Box im Plot bleibt. */
.post-ride-elevation__speed-tip {
  position: absolute;
  top: 0;
  transform: translate(-50%, calc(-100% - 4px));
  width: max-content;
  max-width: none;
  padding: 3px 7px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 30, 48, 0.18), 0 4px 12px -6px rgba(20, 30, 48, 0.3);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text, #1f2937);
  white-space: pre-line;
  text-align: left;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease, left 0.08s linear;
}

.post-ride-elevation__speed-tip.is-visible {
  opacity: 1;
}

.post-ride-elevation__peak-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Das Höhen-Label sitzt dicht über dem Gipfelpunkt (an dessen %-Position
   verankert), damit Wert und Linie zusammengehören — keine Tooltip-Blase. */
.post-ride-elevation__peak-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 5px));
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: rgba(37, 99, 235, 0.9);
  white-space: nowrap;
  pointer-events: none;
}

.post-ride-elevation__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--c-text-muted);
}

/* Passiver Positionspunkt auf der Karte beim Hover über das Höhenprofil
   (Desktop-only, Richtung Profil → Karte). Rein visuell: fängt keine Klicks ab
   (pointer-events:none), kein Popup/Tooltip, keine Momentmarker-Form. */
.route-cursor-marker {
  pointer-events: none;
}

.route-cursor-marker__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}

/* Placement-Echo (Richtung Karte → Profil): eine ruhige senkrechte Haarlinie im
   Profil, die zeigt, an welcher Streckenposition der gerade auf der Karte gesetzte
   Moment liegt. Rein dekorativ (pointer-events:none, aria-hidden), nur während des
   aktiven Placement-Kontexts sichtbar. Nutzt dieselbe %-Referenz wie der Gipfel-
   Punkt; unabhängig vom Profil→Karte-Hover. */
.post-ride-elevation__position-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(59, 130, 246, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease, left 0.08s linear;
}

.post-ride-elevation__position-cursor.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .post-ride-elevation {
    transition: none;
  }
  /* Kein „mitlaufender" Tooltip bei reduzierter Bewegung — nur ruhiges Ein-/Ausblenden. */
  .post-ride-elevation__speed-tip {
    transition: opacity 0.14s ease;
  }
}

.creator-follow-up-form .post-ride-rating-section {
  margin-top: var(--sp-2);
  padding: clamp(10px, 2.2vw, 16px) clamp(14px, 3vw, 22px) !important;
  border: 1px solid var(--post-ride-surface-border, var(--c-rule)) !important;
  border-radius: var(--post-ride-surface-radius, 16px);
  background: var(--post-ride-surface-bg, var(--c-bg));
  box-shadow: var(--post-ride-surface-shadow, 0 8px 22px rgba(26, 22, 19, 0.04));
}

.post-ride-rating-section .section-header {
  margin-bottom: 6px;
}

.post-ride-rating-section .section-title {
  color: var(--c-text-muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}

.post-ride-rating-section .creator-follow-up-star-rating-primary {
  gap: 2px;
}

.post-ride-rating-section .creator-follow-up-star-rating-primary:not(.star-rating-readonly) label {
  min-width: 52px;
  min-height: 52px;
  font-size: 2.05rem;
}

.creator-follow-up-form .post-ride-discover-section {
  gap: 0;
  margin-top: var(--sp-2);
  padding: clamp(14px, 3vw, 22px) !important;
  border: 1px solid var(--post-ride-surface-border, var(--c-rule)) !important;
  border-radius: var(--post-ride-surface-radius, 16px);
  background: var(--post-ride-surface-bg, var(--c-bg));
  box-shadow: var(--post-ride-surface-shadow, 0 8px 22px rgba(26, 22, 19, 0.04));
}

.creator-follow-up-form {
  --post-ride-surface-bg: var(--c-bg);
  --post-ride-surface-border: var(--c-rule);
  --post-ride-surface-radius: 16px;
  --post-ride-surface-shadow: 0 8px 22px rgba(26, 22, 19, 0.04);
}

.post-ride-discover-section .section-title {
  color: var(--c-text-muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}

.post-ride-discover-section .section-header {
  margin-bottom: 12px;
}

.post-ride-discover-section .form-field {
  display: grid;
  gap: 6px;
}

.post-ride-title-field {
  margin-bottom: 6px;
}

.post-ride-title-field > .form-field-label {
  color: var(--c-text);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.post-ride-title-field .form-input {
  min-height: 46px;
  font-size: 1rem;
  font-weight: 600;
}

.post-ride-description-field {
  margin-top: 2px;
}

.post-ride-description-field > .form-field-label {
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.post-ride-title-suggestions-title {
  padding: 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.post-ride-description-field .form-textarea {
  min-height: 72px;
}

@media (max-width: 520px) {
  #tour-detail-screen {
    --post-ride-surface-radius: 14px;
  }

  .creator-follow-up-form {
    --post-ride-surface-radius: 14px;
  }

  .post-ride-moments {
    margin-left: calc(var(--sp-1) * -1);
    margin-right: calc(var(--sp-1) * -1);
    padding: 12px;
    border-radius: var(--post-ride-surface-radius, 14px);
  }

  .creator-follow-up-form .post-ride-rating-section,
  .creator-follow-up-form .post-ride-discover-section,
  .post-ride-context-strip {
    border-radius: var(--post-ride-surface-radius, 14px);
  }

  .post-ride-rating-section .creator-follow-up-star-rating-primary:not(.star-rating-readonly) label {
    min-width: 46px;
    min-height: 48px;
    font-size: 1.9rem;
  }
}

/* Zusätzliche Hinweise — sichtbarer, benannter Teil des ruhigen Entdecken-Blocks
   (kein <details> mehr, keine zusätzliche Hilfetext-Ebene). */
.post-ride-notes-hint {
  margin: 0 0 8px;
}

.post-ride-notes-hint--no-route {
  margin-top: -2px;
}

.post-ride-title-current-hint {
  margin: 6px 0 0;
}

.post-ride-title-suggestions {
  margin: 0 0 14px 0;
  padding: 2px 0 0 12px;
  border: 0;
  border-left: 2px solid rgba(15, 23, 42, 0.08);
}

.post-ride-title-suggestions-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.post-ride-title-suggestion-option {
  align-items: flex-start;
  display: grid;
  gap: 7px;
  grid-template-columns: auto 1fr;
  padding: 2px 0;
}

.post-ride-title-suggestion-option input {
  margin-top: 2px;
}

.post-ride-title-suggestion-label {
  color: var(--c-text);
  font-size: 0.88rem;
  line-height: 1.35;
}

/* WP4a — Carry-over GPX in der Nachbereitung: der Status führt (breite Spalte),
   "GPX ersetzen" ist eine leise sekundäre Text-Aktion (.text-button, per JS
   getoggelt). Spezifisch für den Post-Ride-Bereich; der Create-Flow behält das
   generische schedule-input-row-Grid. */
#post-ride-route-gpx-field .schedule-input-row {
  grid-template-columns: 1fr auto;
}
#post-ride-route-gpx-file-status[data-carry-over="true"] {
  color: var(--c-text);
  font-weight: 500;
}