/* Hike Log — parchment, forest and rust. Maps and trail signs, not dashboards. */

:root {
  --paper: #f3ede0;
  --paper-2: #e9e1cf;
  --card: #fbf8f1;
  --ink: #29291f;
  --ink-2: #5d594a;
  --ink-3: #8a846f;
  --line: #ddd3bf;
  --line-2: #c9bda4;
  --forest: #2f4a3a;
  --forest-2: #3c5f4a;
  --moss: #6f8048;
  --ochre: #d4973a;
  --rust: #b0501f;
  --danger: #a3392a;
  --on-dark: #f5efe2;

  /* The route line sits on a light topo map in both themes, so it never flips. */
  --route: #d0501a;
  --route-strong: #9a3210;
  --route-casing: #fffaf0;

  --shadow: 0 1px 2px rgb(60 45 20 / 0.07), 0 8px 24px rgb(60 45 20 / 0.09);
  --radius: 14px;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='240' viewBox='0 0 520 240' fill='none' stroke='%232f4a3a' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M318 118c0-30 40-52 86-48s74 30 70 58-44 46-88 42-68-22-68-52z'/%3E%3Cpath d='M300 120c-2-42 50-72 108-66s94 40 88 78-58 64-112 58-82-30-84-70z'/%3E%3Cpath d='M280 124c-4-56 60-94 132-86s116 52 106 100-74 84-140 76-94-38-98-90z'/%3E%3Cpath d='M258 128c-6-70 72-118 156-108s138 64 124 124-90 104-168 94-108-48-112-110z'/%3E%3Cpath d='M-20 196c60-20 110-60 170-50s90 50 150 60 130-20 220 0'/%3E%3Cpath d='M-20 218c60-18 120-50 176-42s96 44 156 52 124-14 210 4'/%3E%3Cpath d='M-20 34c50 10 90 40 150 30s80-40 150-44'/%3E%3Cpath d='M-20 14c50 8 96 30 150 22s84-34 150-38'/%3E%3Cpath d='M70 98c0-18 22-30 46-28s38 16 36 32-22 26-46 24-36-12-36-28z'/%3E%3Cpath d='M54 100c-2-28 32-46 64-42s56 26 52 50-34 40-68 36-46-20-48-44z'/%3E%3Cpath d='M36 104c-4-38 40-62 84-56s76 36 70 68-48 54-92 48-60-28-62-60z'/%3E%3C/svg%3E");
  --contours-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='240' viewBox='0 0 520 240' fill='none' stroke='%23f5efe2' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M318 118c0-30 40-52 86-48s74 30 70 58-44 46-88 42-68-22-68-52z'/%3E%3Cpath d='M300 120c-2-42 50-72 108-66s94 40 88 78-58 64-112 58-82-30-84-70z'/%3E%3Cpath d='M280 124c-4-56 60-94 132-86s116 52 106 100-74 84-140 76-94-38-98-90z'/%3E%3Cpath d='M258 128c-6-70 72-118 156-108s138 64 124 124-90 104-168 94-108-48-112-110z'/%3E%3Cpath d='M-20 196c60-20 110-60 170-50s90 50 150 60 130-20 220 0'/%3E%3Cpath d='M-20 218c60-18 120-50 176-42s96 44 156 52 124-14 210 4'/%3E%3Cpath d='M-20 34c50 10 90 40 150 30s80-40 150-44'/%3E%3Cpath d='M-20 14c50 8 96 30 150 22s84-34 150-38'/%3E%3Cpath d='M70 98c0-18 22-30 46-28s38 16 36 32-22 26-46 24-36-12-36-28z'/%3E%3Cpath d='M54 100c-2-28 32-46 64-42s56 26 52 50-34 40-68 36-46-20-48-44z'/%3E%3Cpath d='M36 104c-4-38 40-62 84-56s76 36 70 68-48 54-92 48-60-28-62-60z'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161914;
    --paper-2: #20241d;
    --card: #1d221a;
    --ink: #ebe4d2;
    --ink-2: #b4ad98;
    --ink-3: #857f6b;
    --line: #2f3529;
    --line-2: #434a3b;
    --forest: #355a44;
    --forest-2: #416c52;
    --moss: #9bad72;
    --ochre: #e0aa52;
    --rust: #e3804f;
    --danger: #d2644f;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.35);
    --contours: var(--contours-light);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161914;
  --paper-2: #20241d;
  --card: #1d221a;
  --ink: #ebe4d2;
  --ink-2: #b4ad98;
  --ink-3: #857f6b;
  --line: #2f3529;
  --line-2: #434a3b;
  --forest: #355a44;
  --forest-2: #416c52;
  --moss: #9bad72;
  --ochre: #e0aa52;
  --rust: #e3804f;
  --danger: #d2644f;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.35);
  --contours: var(--contours-light);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; }
a { color: var(--rust); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.icon { width: 18px; height: 18px; flex: none; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.pad { padding: 32px 16px; }

/* ---------- Layout ---------- */

.app {
  display: grid;
  grid-template-columns: minmax(360px, 430px) 1fr;
  height: 100dvh;
}
.panel {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  background: var(--paper);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.map-wrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; }

@media (max-width: 860px) {
  .app { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .map-wrap {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 3;
    height: 44vh;
    height: 44svh;
    box-shadow: 0 6px 16px rgb(30 25 15 / 0.18);
  }
  .panel { overflow: visible; border-right: 0; }
}

/* ---------- Header ---------- */

.brand {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 18px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 860px) { .brand { position: static; } }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 36px; height: 36px; flex: none; }
.logo-text { font: 650 23px/1 var(--font-display); letter-spacing: -0.015em; }
.brand-actions { display: flex; align-items: center; gap: 4px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 1.1em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 14px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--forest); color: var(--on-dark); }
.btn-primary:hover:not(:disabled) { background: var(--forest-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-text { color: var(--danger); }
.btn-small { padding: 0.5em 0.85em; font-size: 13px; }
.btn-small .icon { width: 16px; height: 16px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.link-btn {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rust);
  font: inherit;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ---------- Totals ---------- */

.totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin: 2px 16px 0;
  padding: 18px 20px 16px;
  border-radius: var(--radius);
  background: var(--forest) var(--contours-light) right -60px top -30px / 520px no-repeat;
  color: var(--on-dark);
  box-shadow: var(--shadow);
}
.total { display: flex; flex-direction: column; min-width: 0; }
.total-num { font: 600 30px/1.05 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.total-num small { margin-left: 3px; font: 600 13px var(--font-body); opacity: 0.75; }
.total-label {
  margin-top: 4px;
  font: 700 10.5px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e9c283;
}
.total-note { font-size: 12px; font-style: italic; opacity: 0.72; min-height: 1em; }

/* ---------- Filters ---------- */

.filters { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 2px; }
.filter-row { display: flex; align-items: center; gap: 10px; }
.filter-row .chips { flex: 1; }
.chips {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 2px 16px;
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.filter-row .chips { margin-right: 0; padding-right: 8px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  font: 600 13px/1.1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--ink-3); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sort {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font: 700 10.5px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sort select {
  appearance: none;
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a846f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 9px center / 13px no-repeat;
  color: var(--ink);
  font: 600 13px var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* ---------- Hike list ---------- */

.hike-list { padding: 0 16px 40px; }
.year-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--line-2); /* a footpath, as the OS draws them */
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.year-head small { font: 600 12.5px var(--font-body); color: var(--ink-3); letter-spacing: 0; }

.hike-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 14px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s;
}
.hike-card:hover, .hike-card.is-hot { border-color: var(--route); box-shadow: var(--shadow); transform: translateY(-1px); }
.hike-card-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.hike-card h3 { margin: 0; font-size: 17.5px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.hike-meta { margin: 2px 0 7px; overflow: hidden; color: var(--ink-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.hike-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hike-stats .with-icon { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.hike-stats .icon { width: 15px; height: 15px; }
.hike-cover { position: relative; z-index: 1; flex: none; width: 60px; height: 60px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.spark { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 30px; pointer-events: none; }
.spark-area { fill: var(--moss); opacity: 0.16; transition: fill 0.2s; }
.spark-line { fill: none; stroke: var(--moss); stroke-width: 1.4; opacity: 0.6; vector-effect: non-scaling-stroke; transition: stroke 0.2s; }
.hike-card:hover .spark-area, .hike-card.is-hot .spark-area { fill: var(--route); }
.hike-card:hover .spark-line, .hike-card.is-hot .spark-line { stroke: var(--route); }

/* ---------- Detail ---------- */

.detail { padding: 0 20px 36px; }
.detail-nav { margin-left: -8px; }
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.back:hover { background: var(--paper-2); color: var(--ink); }
.eyebrow { margin: 12px 0 4px; color: var(--rust); font: 700 11.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.detail-title { margin: 0; font-size: 34px; font-weight: 650; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.detail-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--ink-2); }
.detail-place .icon { width: 16px; height: 16px; color: var(--rust); }

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 4px; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 11px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.stat-label { color: var(--ink-3); font: 700 10px var(--font-body); letter-spacing: 0.11em; text-transform: uppercase; }
.stat-value { font: 600 22px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-value small { margin-left: 2px; color: var(--ink-2); font: 700 12px var(--font-body); }
.stat-note { overflow: hidden; color: var(--ink-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 380px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.block { margin-top: 28px; }
.block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--ink-2);
  font: 700 11.5px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* A painted trail blaze: white-red-white, as on Alpine and Balkan paths. */
.block-title::before {
  content: "";
  flex: none;
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(#f7f2e6 0 33%, var(--route) 33% 67%, #f7f2e6 67%);
  box-shadow: 0 0 0 1px var(--line-2);
}
.block-title .btn, .block-title .link-btn { margin-left: auto; letter-spacing: 0; text-transform: none; }
.block-title .btn { font-size: 13px; }

.chart-card { padding: 12px 12px 4px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.chart { position: relative; }
.profile-svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.profile-svg .grid { stroke: var(--line); stroke-dasharray: 2 3; }
.profile-svg .axis { fill: var(--ink-3); font: 600 10.5px var(--font-body); font-variant-numeric: tabular-nums; }
.elev-line { fill: none; stroke: var(--route); stroke-width: 2; stroke-linejoin: round; }
.cursor-line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.cursor-dot { fill: var(--route-strong); stroke: var(--card); stroke-width: 2.5; }
.chart-tip {
  position: absolute;
  top: -8px;
  transform: translateY(-100%);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 700 12.5px var(--font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.chart-tip span { margin-left: 8px; font-weight: 500; opacity: 0.75; }

.notes {
  padding: 12px 16px;
  border-left: 3px solid var(--ochre);
  border-radius: 0 10px 10px 0;
  background: var(--card);
  font-size: 15.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.photo-grid > p { grid-column: 1 / -1; margin: 0; }
.photo { aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: var(--paper-2); cursor: zoom-in; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.photo:hover img { transform: scale(1.05); }

.detail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 32px;
  padding-top: 14px;
  border-top: 2px dashed var(--line);
}
.detail-foot p { margin: 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.detail.is-loading .loading-line { margin: 40px 0; }

/* ---------- Empty & loading ---------- */

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 28px; text-align: center; }
.empty h2 { margin: 6px 0 0; font-size: 24px; font-weight: 600; }
.empty p { max-width: 30ch; margin: 0 0 8px; color: var(--ink-2); }
.empty-art {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--paper-2) var(--contours) center / 260px;
  color: var(--forest);
}
.empty-art .icon { width: 38px; height: 38px; }
/* A footpath marching along while we wait. */
.loading-line {
  width: 128px;
  height: 4px;
  margin: 20px auto;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--route) 0 10px, transparent 10px 18px) 0 0 / 36px 4px;
  animation: march 0.9s linear infinite;
}
@keyframes march { to { background-position: 36px 0; } }

/* ---------- Dialogs ---------- */

dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: transparent; color: var(--ink); }
dialog::backdrop { background: rgb(22 20 14 / 0.55); backdrop-filter: blur(3px); }
.sheet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(580px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  padding: 20px;
  overflow: auto;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.3);
}
.sheet-small { width: min(420px, calc(100vw - 24px)); }
.sheet h2 { margin: 0; font-size: 23px; font-weight: 600; }
.sheet p { margin: 0; color: var(--ink-2); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-right: -8px; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 600px) {
  dialog:not(#lightbox) { width: 100vw; max-width: 100vw; margin: auto 0 0; }
  .sheet, .sheet-small { width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--ink-2); font: 700 11px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.field input, .field textarea, .date-input {
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus { border-color: var(--ochre); outline: 2px solid color-mix(in srgb, var(--ochre) 35%, transparent); outline-offset: 0; }

/* Upload */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 30px 20px 26px;
  border: 2px dashed var(--line-2);
  border-radius: 16px;
  background: var(--card) var(--contours) center / 520px;
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--route); background-color: color-mix(in srgb, var(--route) 7%, var(--card)); }
.dropzone strong { color: var(--ink); font: 600 18px var(--font-display); }
.dropzone-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--forest); color: var(--on-dark); }
.dropzone-icon .icon { width: 26px; height: 26px; }
.dropzone.is-compact { flex-direction: row; gap: 10px; padding: 12px 16px; text-align: left; }
.dropzone.is-compact .dropzone-icon { width: 36px; height: 36px; margin: 0; }
.dropzone.is-compact .dropzone-icon .icon { width: 20px; height: 20px; }
.dropzone.is-compact strong { font-size: 15px; }
.dropzone.is-compact span:last-child { display: none; }

.upload-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.upload-list:empty { display: none; }
.upload-item { display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.upload-main { flex: 1; min-width: 0; }
.upload-file { display: block; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.name-input { width: 100%; padding: 2px 0; border: 0; border-bottom: 1px dashed var(--line-2); background: transparent; color: var(--ink); font: 600 17px var(--font-display); }
.name-input:focus { outline: 0; border-bottom: 1px solid var(--ochre); }
.name-input:disabled { border-bottom-color: transparent; opacity: 1; }
.upload-meta { margin: 4px 0 0 !important; font-size: 13px; }
.upload-status { margin: 4px 0 0 !important; font-size: 12.5px; font-weight: 700; }
.upload-status:empty { display: none; }
.upload-main label.small { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-2); }
.date-input { padding: 5px 8px; font-size: 13px; }
.is-reading .upload-status, .is-naming .upload-status, .is-saving .upload-status { color: var(--ink-3); }
.is-reading .upload-status::before, .is-naming .upload-status::before, .is-saving .upload-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--route);
  vertical-align: 1px;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.is-duplicate { opacity: 0.8; }
.is-duplicate .upload-status { color: var(--ochre); }
.is-error .upload-status { color: var(--danger); }
.is-saved .upload-status { color: var(--moss); }
.is-saved { border-color: color-mix(in srgb, var(--moss) 45%, var(--line)); }

/* Lightbox */
#lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; }
#lightbox::backdrop { background: rgb(14 13 10 / 0.93); }
.lightbox { position: fixed; inset: 0; display: grid; place-items: center; }
.lightbox img {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 120px);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
}
.lb-btn:hover { background: rgb(255 255 255 / 0.24); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { top: calc(50% - 23px); left: 16px; }
.lb-next { top: calc(50% - 23px); right: 16px; }
.lb-bar { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; display: flex; align-items: center; gap: 16px; transform: translateX(-50%); color: #ddd; font-size: 14px; font-weight: 600; }
.lb-bar .btn-ghost { border-color: rgb(255 255 255 / 0.3); color: #eee; }
.lb-bar .btn-ghost:hover { background: rgb(255 255 255 / 0.1); }

/* Toasts & drop overlay */
.toasts { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.toast {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: toast-in 0.25s ease-out;
  transition: opacity 0.4s, transform 0.4s;
}
.toast-error { background: var(--danger); color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  place-items: center;
  background: rgb(38 60 47 / 0.84);
  color: var(--on-dark);
  pointer-events: none;
}
body.is-dragging .drop-overlay { display: grid; }
.drop-overlay > div { padding: 48px 64px; border: 3px dashed rgb(245 239 226 / 0.65); border-radius: 26px; text-align: center; }
.drop-overlay strong { display: block; font: 600 30px var(--font-display); }

/* ---------- Leaflet, dressed for the trail ---------- */

.leaflet-container { background: #e7e1cf; font-family: var(--font-body); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(0.86) saturate(0.9); }
  :root:not([data-theme="light"]) .leaflet-container { background: #2a2d25; }
}
.leaflet-bar { overflow: hidden; border: 1px solid var(--line-2) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.leaflet-bar a, .leaflet-bar a:hover { width: 36px !important; height: 36px !important; background: var(--card); color: var(--ink); border-bottom-color: var(--line) !important; line-height: 36px !important; }
.leaflet-bar a:hover { background: var(--paper-2); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--card) 85%, transparent) !important; color: var(--ink-2); font-size: 10.5px; }
@media (max-width: 600px) { .leaflet-control-attribution { font-size: 9px; } }
.leaflet-control-attribution a { color: var(--forest); }
.leaflet-control-scale-line { border-color: var(--ink-2); background: color-mix(in srgb, var(--card) 80%, transparent); color: var(--ink); font-weight: 600; }

.leaflet-tooltip.route-tip {
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font: 700 13px/1.3 var(--font-body);
  box-shadow: var(--shadow);
}
.leaflet-tooltip.route-tip span { display: block; font-weight: 500; opacity: 0.75; font-size: 12px; }
.leaflet-tooltip-top.route-tip::before { border-top-color: var(--ink); }

.hike-pin span {
  display: block;
  width: 16px;
  height: 16px;
  border: 3px solid var(--route-casing);
  border-radius: 50%;
  background: var(--route);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
  transition: transform 0.15s;
}
.hike-pin:hover span, .hike-pin.is-hot span { transform: scale(1.4); }
.cluster-pin span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--route-casing);
  border-radius: 50%;
  background: #2f4a3a;
  color: #f5efe2;
  font: 700 15px var(--font-display);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3), 0 0 0 5px rgb(47 74 58 / 0.25);
}
.trail-end span {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--route-casing);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.45);
}
.trail-end.start span { background: #3d8a50; }
.trail-end.finish span { background: repeating-conic-gradient(#222 0 25%, #fafafa 0 50%) 0 0 / 8px 8px; }
.trail-end.loop span { background: linear-gradient(90deg, #3d8a50 50%, #222 50%); }
.km-marker span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--route-strong);
  border-radius: 50%;
  background: var(--route-casing);
  color: var(--route-strong);
  font: 800 10px var(--font-body);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}

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