/* =====================================================================
   DateTracker — app.css
   Fernbeziehungs-Dashboard Edition
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100dvh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-style: normal;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: var(--weight-semibold); }

p { text-wrap: pretty; }

a { color: var(--color-accent); text-underline-offset: 0.15em; }
a:hover { color: var(--color-accent-press); }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- shared layout ---------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}
.topbar .brand {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar .brand .glyph { color: var(--color-accent); }
.topbar .spacer { flex: 1; }
.topbar .goal-chip {
  font-size: var(--step--1);
  color: var(--color-goal-ink);
  background: oklch(0.96 0.05 85);
  border: 1px solid oklch(0.85 0.08 85);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  max-width: 50vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .topbar .goal-chip {
  background: oklch(0.25 0.05 85);
  border-color: oklch(0.35 0.06 85);
  color: oklch(0.80 0.10 85);
}

/* theme toggle */
.theme-toggle {
  all: unset;
  cursor: pointer;
  font-size: 1.2rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover { background: var(--color-bg-sunk); }
.theme-toggle:focus-visible { box-shadow: var(--focus-ring); }

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
}
.center-wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.footer {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--step--1);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

/* ---- cards & sections ------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
.card > h2, .card > h3 { margin-bottom: var(--space-2); }
.card .hint { color: var(--color-muted); font-size: var(--step--1); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.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;
}

/* ---- forms ------------------------------------------------------------ */
label { display: block; font-weight: var(--weight-medium); font-size: var(--step--1); margin-bottom: var(--space-1); }

.field { position: relative; }

input[type="text"], input[type="search"], input[type="date"], input[type="datetime-local"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input:hover, textarea:hover, select:hover { border-color: var(--color-line-strong); }
input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--color-bg-sunk);
  color: var(--color-muted);
  cursor: not-allowed;
}
textarea { resize: vertical; min-height: 3.2rem; }

.char-count { font-size: var(--step--1); color: var(--color-muted); text-align: right; }

/* ---- buttons (8 states) ----------------------------------------------- */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-ink);
  --btn-bd: var(--color-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: var(--weight-semibold);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--color-bg-sunk); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 1.1em; height: 1.1em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--btn-fg);
  animation: spin 0.7s linear infinite;
}

.btn-primary { --btn-bg: var(--color-accent); --btn-fg: var(--color-on-accent); --btn-bd: var(--color-accent); }
.btn-primary:hover { --btn-bg: var(--color-accent-press); }
.btn-primary[aria-busy="true"]::after { color: var(--color-on-accent); }

.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-soft); }

.btn-danger { color: var(--color-danger); --btn-bd: oklch(0.85 0.08 25); }
.btn-danger:hover { background: oklch(0.96 0.04 25); }
[data-theme="dark"] .btn-danger { --btn-bd: oklch(0.35 0.08 25); }
[data-theme="dark"] .btn-danger:hover { background: oklch(0.25 0.06 25); }

.btn-sm { min-height: 2.25rem; padding: var(--space-1) var(--space-3); font-size: var(--step--1); }
.btn-block { width: 100%; }

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

/* ---- segmented control ------------------------------------------------ */
.segmented {
  display: inline-flex;
  background: var(--color-bg-sunk);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  gap: var(--space-1);
}
.segmented button {
  font: inherit;
  font-weight: var(--weight-medium);
  font-size: var(--step--1);
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 2.25rem;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.segmented button:hover { color: var(--color-ink); }
.segmented button[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}
.segmented button[aria-pressed="true"]:hover { color: var(--color-on-accent); }
.segmented button:focus-visible { box-shadow: var(--focus-ring); }

/* ---- mood chips -------------------------------------------------------- */
.moods { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mood {
  font-size: 1.4rem;
  line-height: 1;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-emphasized), background-color var(--dur-fast) var(--ease-standard);
}
.mood:hover { background: var(--color-bg-sunk); }
.mood:active { transform: scale(0.92); }
.mood:focus-visible { box-shadow: var(--focus-ring); }
.mood[aria-pressed="true"] {
  background: var(--color-accent-soft);
}

/* ---- search result lists ---------------------------------------------- */
.result-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.result-list:empty { display: none; }
.result {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.result:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.result:focus-visible { box-shadow: var(--focus-ring); }
.result .title { font-weight: var(--weight-semibold); }
.result .meta { color: var(--color-muted); font-size: var(--step--1); }
.result .grow { flex: 1; min-width: 0; }
.result .title, .result .meta { overflow: hidden; text-overflow: ellipsis; }

/* ---- badges ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--step--1); font-weight: var(--weight-medium);
  padding: 0.1em 0.6em; border-radius: var(--radius-pill);
  background: var(--color-bg-sunk); color: var(--color-ink-soft);
}
.badge.on-time { background: oklch(0.94 0.05 150); color: oklch(0.4 0.12 150); }
.badge.delay { background: oklch(0.95 0.06 50); color: oklch(0.45 0.15 50); }
.badge.prov { text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark"] .badge.on-time { background: oklch(0.25 0.05 150); color: oklch(0.7 0.12 150); }
[data-theme="dark"] .badge.delay { background: oklch(0.25 0.06 50); color: oklch(0.75 0.15 50); }

/* ---- person dots / accents -------------------------------------------- */
.dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; flex: none; }
.dot-a { background: var(--color-a); }
.dot-b { background: var(--color-b); }
.dot-goal { background: var(--color-goal); }

.person-a { --person: var(--color-a); --person-soft: var(--color-a-soft); }
.person-b { --person: var(--color-b); --person-soft: var(--color-b-soft); }

/* ---- person page shell (mobile tab layout) ---------------------------- */
.app {
  min-height: 100dvh;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}

.view { display: none; }

/* the map view fills the whole viewport */
.view-map {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}
.view-map.active { display: block; }
.map {
  height: 100%;
  width: 100%;
  background: var(--color-bg-sunk);
  z-index: 1;
}

/* scrollable content views */
.view-dashboard.active, .view-trip.active, .view-status.active {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* ---- fixed bottom navigation ------------------------------------------ */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: var(--bottomnav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-line);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border: none;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-btn .nav-ico { font-size: 1.3rem; line-height: 1; }
.nav-btn:hover { color: var(--color-ink-soft); }
.nav-btn[aria-selected="true"] { color: var(--color-accent); }
.nav-btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ================================================================
   DASHBOARD STYLES
   ================================================================ */

/* ---- heart counter hero ----------------------------------------------- */
.dash-hero {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.dash-hero .heart-pulse {
  display: inline-block;
  font-size: 2.4rem;
  animation: heartbeat 1.4s ease-in-out infinite;
}
.dash-hero .days-count {
  font-size: var(--step-3);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  margin-top: var(--space-2);
}
.dash-hero .days-label {
  font-size: var(--step--1);
  color: var(--color-muted);
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  56% { transform: scale(1); }
}

/* ---- persons side-by-side --------------------------------------------- */
.dash-persons {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
}
.dash-person-card {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-mid) var(--ease-standard);
}
.dash-person-card:hover {
  box-shadow: var(--shadow-md);
}
.dash-person-card .person-avatar {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto var(--space-2);
  font-size: 1.4rem;
  font-weight: var(--weight-bold);
  color: white;
}
.dash-person-card.person-a .person-avatar { background: var(--color-a); }
.dash-person-card.person-b .person-avatar { background: var(--color-b); }
.dash-person-card .person-name {
  font-weight: var(--weight-semibold);
  font-size: var(--step-0);
}
.dash-person-card .person-home {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin-top: var(--space-1);
}
.dash-person-card .person-weather {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--step-0);
}
.dash-person-card .weather-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.dash-person-card .weather-temp {
  font-weight: var(--weight-semibold);
  font-size: var(--step-1);
}

.dash-distance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--step--1);
}
.dash-distance .dist-line {
  width: 2px;
  height: 2rem;
  background: var(--color-line-strong);
  position: relative;
}
.dash-distance .dist-line::before,
.dash-distance .dist-line::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-line-strong);
  left: -2px;
}
.dash-distance .dist-line::before { top: -3px; }
.dash-distance .dist-line::after { bottom: -3px; }
.dash-distance .dist-km {
  font-weight: var(--weight-semibold);
  color: var(--color-ink-soft);
  font-size: var(--step-0);
}

/* ---- countdown widget ------------------------------------------------- */
.countdown-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.countdown-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-a), var(--color-accent), var(--color-b));
}
.countdown-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.countdown-head .countdown-emoji { font-size: 1.3rem; }
.countdown-head h3 { font-size: var(--step-1); margin: 0; }
.countdown-days {
  font-size: var(--step-3);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}
.countdown-days .unit {
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}
.countdown-date {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin-top: var(--space-1);
}
.countdown-name {
  font-size: var(--step-0);
  color: var(--color-ink-soft);
  margin-top: var(--space-1);
}
.progress-bar {
  margin-top: var(--space-4);
  height: 6px;
  background: var(--color-bg-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-a), var(--color-accent));
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-standard);
}
.progress-label {
  font-size: var(--step--1);
  color: var(--color-muted);
  margin-top: var(--space-1);
  text-align: right;
}

/* ---- photo gallery ---------------------------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-2);
}
.photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--color-line);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.photo-thumb:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-thumb .photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.6));
  color: white;
  font-size: 0.7rem;
}

.photo-upload-btn {
  aspect-ratio: 1;
  border: 2px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1.8rem;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.photo-upload-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* photo lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgb(0 0 0 / 0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-standard);
}
.lightbox.show { opacity: 1; }
.lightbox img {
  max-width: 92vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lightbox .lb-caption {
  position: absolute;
  bottom: var(--space-6);
  left: 50%; transform: translateX(-50%);
  color: white;
  font-size: var(--step-0);
  text-align: center;
  max-width: 80vw;
}
.lightbox .lb-close {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  background: none; border: none;
  line-height: 1;
}

/* ---- milestones list -------------------------------------------------- */
.milestones-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.milestone-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-sunk);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.milestone-item .ms-icon { font-size: 1.3rem; flex: none; }
.milestone-item .ms-info { flex: 1; min-width: 0; }
.milestone-item .ms-title { font-weight: var(--weight-medium); }
.milestone-item .ms-date { font-size: var(--step--1); color: var(--color-muted); }
.milestone-item.ms-past { opacity: 0.6; }
.milestone-item.ms-today {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* ---- live: both persons side by side ---------------------------------- */
.live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.live-person {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-sunk);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--person, var(--color-line-strong));
  border-radius: var(--radius-md);
  min-width: 0;
}
.live-person .live-name {
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.live-person .live-route {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}
.live-person .live-status {
  font-size: var(--step--1);
  color: var(--color-muted);
}
.live-person .live-eta {
  margin-top: var(--space-1);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
}
.live-person .live-eta.late { color: var(--color-warn); }
.live-person .live-eta.ok { color: var(--color-ok); }

.eta-compare {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-soft);
  color: var(--color-accent-press);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  text-align: center;
}

#notify-btn { margin-top: var(--space-3); }

/* ---- trip status header ----------------------------------------------- */
.trip-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.trip-head .who { font-weight: var(--weight-bold); display: inline-flex; align-items: center; gap: var(--space-2); }
.trip-head .status { color: var(--color-ink-soft); font-size: var(--step--1); }
.trip-head .grow { flex: 1; }

/* ---- timeline --------------------------------------------------------- */
.timeline { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.timeline li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: start;
}
.timeline .rail { display: flex; flex-direction: column; align-items: center; padding-top: 0.35rem; }
.timeline .rail .dot { width: 0.85rem; height: 0.85rem; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-line-strong); }
.timeline .bubble {
  background: var(--color-bg-sunk);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.timeline .bubble .head { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.timeline .bubble .name { font-weight: var(--weight-semibold); }
.timeline .bubble .mood { all: unset; font-size: 1.1rem; }
.timeline .bubble time { color: var(--color-muted); font-size: var(--step--1); }
.timeline .bubble .msg { margin-top: var(--space-1); }

/* timeline with photo */
.timeline .bubble .timeline-photo {
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  max-width: 100%;
  max-height: 12rem;
  object-fit: cover;
  cursor: pointer;
}

.empty { color: var(--color-muted); font-style: normal; text-align: center; padding: var(--space-5); }

/* ---- toast ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%) translateY(1rem);
  background: var(--color-ink); color: var(--color-bg);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); z-index: 2000;
  opacity: 0; pointer-events: none; max-width: 90vw;
  transition: opacity var(--dur-mid) var(--ease-standard), transform var(--dur-mid) var(--ease-emphasized);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--color-danger); color: white; }

/* ---- admin data list (setup) ------------------------------------------ */
.admin-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.admin-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-sunk);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.admin-row .admin-mood { font-size: 1.2rem; line-height: 1; flex: none; }
.admin-row .grow { flex: 1; min-width: 0; }
.admin-row .meta { color: var(--color-muted); font-size: var(--step--1); }
.admin-row .admin-msg { overflow-wrap: anywhere; }
.admin-row .btn { flex: none; }

/* ---- landing / invalid ------------------------------------------------ */
.hero { text-align: left; }
.hero h1 { margin-bottom: var(--space-3); }
.hero .lead { font-size: var(--step-1); color: var(--color-ink-soft); max-width: var(--measure); }
.linklist { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.linklist code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--color-bg-sunk); padding: 0.1em 0.4em; border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* ---- map marker labels (Leaflet divIcon) ------------------------------ */
.pin {
  width: 1.5rem; height: 1.5rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
}
.pin span { transform: rotate(45deg); font-size: 0.8rem; line-height: 1; }
.pin-a { background: var(--color-a); }
.pin-b { background: var(--color-b); }
.pin-goal { background: var(--color-goal); }
.pin-home {
  background: var(--color-surface);
  border-color: var(--color-accent);
}
.stop-dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-ink-soft);
}
.stop-dot.next { background: var(--color-accent); border-color: var(--color-accent); width: 0.85rem; height: 0.85rem; box-shadow: 0 0 0 4px var(--color-accent-soft); }

/* home marker on map */
.home-marker {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  font-size: 1rem;
  line-height: 1;
}
.home-marker-a { background: var(--color-a); }
.home-marker-b { background: var(--color-b); }

/* ---- "no data" placeholder dashboard --------------------------------- */
.dash-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-muted);
}
.dash-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 480px) {
  .dash-persons {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .dash-distance {
    flex-direction: row;
    gap: var(--space-3);
  }
  .dash-distance .dist-line {
    width: 3rem; height: 2px;
  }
  .dash-distance .dist-line::before {
    top: -2px; left: -3px;
  }
  .dash-distance .dist-line::after {
    bottom: -2px; left: auto; right: -3px; top: -2px;
  }
  .live-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .view-dashboard, .view-trip, .view-status {
    max-width: 40rem;
    margin-inline: auto;
    width: 100%;
  }
  .bottom-nav .nav-btn { flex: 0 1 10rem; }
  .bottom-nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}