:root {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    sans-serif;
}

/*
  Theme colors follow static/gpxweather.svg: slate cloud/track #2c3e50, sun #f39c12, track accent #c0392b.
  --accent / --accent-2 are the two brand accents; neutrals are derived from the slate base.

  Palette hex/rgba values live ONCE per scheme as --light-* / --dark-* on :root.
  Runtime variables (--bg, --accent, ...) are mapped to one palette by:
    - :root                                  -> light (default, before JS sets data-theme)
    - @media (prefers-color-scheme: dark)    -> dark (system default in dark OS)
    - [data-theme="bright"]                  -> light (explicit)
    - [data-theme="dark"]                    -> dark  (explicit)
  data-theme="system" intentionally has no rule: it inherits the :root + media-query default,
  which guarantees that system == bright in light OS and system == dark in dark OS.
*/

:root {
  --light-bg: #eef1f4;
  --light-surface: #ffffff;
  --light-text: #2c3e50;
  --light-muted: #5d6d7e;
  --light-accent: #2980b9;
  --light-accent-2: #c0392b;
  --light-danger: #c0392b;
  --light-border: rgba(44, 62, 80, 0.14);
  --light-route-line: #c0392b;
  --light-chart-axis-color: #5d6d7e;
  --light-chart-grid-color: rgba(44, 62, 80, 0.12);
  --light-chart-tooltip-bg: rgba(44, 62, 80, 0.92);
  --light-chart-tooltip-title-color: #fdfefe;
  --light-chart-tooltip-body-color: #ecf0f1;
  --light-map-control-bg: rgba(255, 255, 255, 0.92);
  --light-map-control-shadow: 0 1px 4px rgba(44, 62, 80, 0.12);
  --light-map-user-dot: #f39c12;
  --light-wind-arrow-color: #000;
  --light-accent-soft-bg: rgba(243, 156, 18, 0.12);
  --light-accent-soft-border: rgba(243, 156, 18, 0.38);
  --light-accent-glow: rgba(243, 156, 18, 0.88);
  --light-accent-ring: rgba(243, 156, 18, 0.78);

  --dark-bg: #121920;
  --dark-surface: #1c252e;
  --dark-text: #ecf0f1;
  --dark-muted: #95a5a6;
  --dark-accent: #f39c12;
  --dark-accent-2: #c0392b;
  --dark-danger: #ec7063;
  --dark-border: rgba(149, 165, 166, 0.22);
  --dark-route-line: #c0392b;
  --dark-chart-axis-color: #aeb6bf;
  --dark-chart-grid-color: rgba(127, 140, 141, 0.35);
  --dark-chart-tooltip-bg: rgba(33, 47, 61, 0.94);
  --dark-chart-tooltip-title-color: #fdfefe;
  --dark-chart-tooltip-body-color: #d5d8dc;
  --dark-map-control-bg: rgba(28, 37, 46, 0.92);
  --dark-map-control-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  --dark-map-user-dot: #f5b041;
  --dark-wind-arrow-color: #000;
  --dark-accent-soft-bg: rgba(243, 156, 18, 0.16);
  --dark-accent-soft-border: rgba(243, 156, 18, 0.42);
  --dark-accent-glow: rgba(245, 176, 65, 0.92);
  --dark-accent-ring: rgba(245, 176, 65, 0.82);

  color-scheme: light;
  --bg: var(--light-bg);
  --surface: var(--light-surface);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --accent: var(--light-accent);
  --accent-2: var(--light-accent-2);
  --danger: var(--light-danger);
  --border: var(--light-border);
  --route-line: var(--light-route-line);
  --chart-axis-color: var(--light-chart-axis-color);
  --chart-grid-color: var(--light-chart-grid-color);
  --chart-tooltip-bg: var(--light-chart-tooltip-bg);
  --chart-tooltip-title-color: var(--light-chart-tooltip-title-color);
  --chart-tooltip-body-color: var(--light-chart-tooltip-body-color);
  --map-control-bg: var(--light-map-control-bg);
  --map-control-shadow: var(--light-map-control-shadow);
  --map-user-dot: var(--light-map-user-dot);
  --wind-arrow-color: var(--light-wind-arrow-color);
  --accent-soft-bg: var(--light-accent-soft-bg);
  --accent-soft-border: var(--light-accent-soft-border);
  --accent-glow: var(--light-accent-glow);
  --accent-ring: var(--light-accent-ring);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --accent: var(--dark-accent);
    --accent-2: var(--dark-accent-2);
    --danger: var(--dark-danger);
    --border: var(--dark-border);
    --route-line: var(--dark-route-line);
    --chart-axis-color: var(--dark-chart-axis-color);
    --chart-grid-color: var(--dark-chart-grid-color);
    --chart-tooltip-bg: var(--dark-chart-tooltip-bg);
    --chart-tooltip-title-color: var(--dark-chart-tooltip-title-color);
    --chart-tooltip-body-color: var(--dark-chart-tooltip-body-color);
    --map-control-bg: var(--dark-map-control-bg);
    --map-control-shadow: var(--dark-map-control-shadow);
    --map-user-dot: var(--dark-map-user-dot);
    --wind-arrow-color: var(--dark-wind-arrow-color);
    --accent-soft-bg: var(--dark-accent-soft-bg);
    --accent-soft-border: var(--dark-accent-soft-border);
    --accent-glow: var(--dark-accent-glow);
    --accent-ring: var(--dark-accent-ring);
  }
}

[data-theme="bright"] {
  color-scheme: light;
  --bg: var(--light-bg);
  --surface: var(--light-surface);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --accent: var(--light-accent);
  --accent-2: var(--light-accent-2);
  --danger: var(--light-danger);
  --border: var(--light-border);
  --route-line: var(--light-route-line);
  --chart-axis-color: var(--light-chart-axis-color);
  --chart-grid-color: var(--light-chart-grid-color);
  --chart-tooltip-bg: var(--light-chart-tooltip-bg);
  --chart-tooltip-title-color: var(--light-chart-tooltip-title-color);
  --chart-tooltip-body-color: var(--light-chart-tooltip-body-color);
  --map-control-bg: var(--light-map-control-bg);
  --map-control-shadow: var(--light-map-control-shadow);
  --map-user-dot: var(--light-map-user-dot);
  --wind-arrow-color: var(--light-wind-arrow-color);
  --accent-soft-bg: var(--light-accent-soft-bg);
  --accent-soft-border: var(--light-accent-soft-border);
  --accent-glow: var(--light-accent-glow);
  --accent-ring: var(--light-accent-ring);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --accent: var(--dark-accent);
  --accent-2: var(--dark-accent-2);
  --danger: var(--dark-danger);
  --border: var(--dark-border);
  --route-line: var(--dark-route-line);
  --chart-axis-color: var(--dark-chart-axis-color);
  --chart-grid-color: var(--dark-chart-grid-color);
  --chart-tooltip-bg: var(--dark-chart-tooltip-bg);
  --chart-tooltip-title-color: var(--dark-chart-tooltip-title-color);
  --chart-tooltip-body-color: var(--dark-chart-tooltip-body-color);
  --map-control-bg: var(--dark-map-control-bg);
  --map-control-shadow: var(--dark-map-control-shadow);
  --map-user-dot: var(--dark-map-user-dot);
  --wind-arrow-color: var(--dark-wind-arrow-color);
  --accent-soft-bg: var(--dark-accent-soft-bg);
  --accent-soft-border: var(--dark-accent-soft-border);
  --accent-glow: var(--dark-accent-glow);
  --accent-ring: var(--dark-accent-ring);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.container {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

.container.narrow {
  max-width: 24rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.bar-right .btn-secondary {
  margin-left: 0;
}

/* Username opens account settings; muted until hover (overrides global `a` accent). */
a.bar-user-link {
  color: var(--muted);
  text-decoration: none;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.bar-user-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--text);
  white-space: nowrap;
}

.brand-logo {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: block;
}

.brand-text {
  line-height: 1;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 2rem;
}

/* Narrow screens: header brand + controls stay on one row; login title still fits the card. */
@media (max-width: 640px) {
  .bar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.5rem;
  }

  .bar .brand {
    font-size: 1.125rem;
    gap: 0.35rem;
  }

  .bar .brand-logo {
    width: 1.75rem;
    height: 1.75rem;
  }

  a.bar-user-link {
    max-width: min(10rem, 28vw);
  }

  .login-brand {
    font-size: 1.5rem;
    gap: 0.5rem;
  }

  .login-brand .brand-logo {
    width: 2rem;
    height: 2rem;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* Full-width shell so WebKit datetime-local and number share one layout box (fixes iOS width mismatch). */
.field-control {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.5rem;
  align-items: center;
}

.field-control > input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.field-control > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* min-width:0 avoids WebKit giving number inputs a wider default min-width than datetime-local on mobile. */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="file"],
select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

/* Match text-field sizing; inner spin buttons no longer steal horizontal space on desktop WebKit. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  cursor: pointer;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
}

button:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  margin-left: auto;
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0 0.25rem;
  margin-left: 0.5rem;
  font-size: 0.85rem;
}

.btn-text.danger {
  color: var(--danger);
}

.error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

.warn {
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.trip-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trip-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.trip-list .meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th,
td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 520px) {
  /* hide mm/h column on narrow screens (trip debug table) */
  th:nth-child(6),
  td:nth-child(6) {
    display: none;
  }
}

/* Native dialog for account / feedback (change password, etc.) */
.feedback-dialog {
  margin: auto;
  padding: 1.25rem;
  max-width: min(92vw, 22rem);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.feedback-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.feedback-dialog__heading {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.feedback-dialog__msg {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.feedback-dialog--success .feedback-dialog__heading {
  color: #4ade80;
}

.feedback-dialog--error .feedback-dialog__heading {
  color: var(--danger);
}

.feedback-dialog .btn-secondary {
  margin-left: 0;
  width: 100%;
}

/* Visually hidden but available to assistive tech (used by the loading overlay label). */
.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;
}

/*
  Global API loading overlay.
  pointer-events:none lets the user keep scrolling long pages while a request is in flight;
  the inner card re-enables pointer events so the spinner can be tested/inspected.
*/
.app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}

.app-loading-overlay[hidden] {
  display: none;
}

.app-loading-card {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.app-loading-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: app-loading-spin 0.85s linear infinite;
}

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

@keyframes app-loading-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-spinner {
    border: none;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--accent);
    animation: app-loading-pulse 1.4s ease-in-out infinite;
  }
}