/* =========================================================
   Keuli Rando — design system
   "Ardennes outdoors": forêt profonde, terracotta, off-white
   ========================================================= */

:root{
  --forest-900:#152a1c;
  --forest-800:#1f3d2b;
  --forest-700:#2b5138;
  --forest-600:#3a6849;
  --forest-500:#4f8a5b;
  --terracotta-700:#9c4325;
  --terracotta-600:#b5462e;
  --terracotta-500:#c1622d;
  --terracotta-400:#e08a4f;
  --amber-500:#c98a1f;
  --amber-600:#b5791a;

  --color-bg:#faf7f1;
  --color-bg-raised:#ffffff;
  --color-surface:#ffffff;
  --color-surface-2:#f3efe6;
  --color-text:#20271f;
  --color-text-muted:#5c6a5c;
  --color-border:#e3ddcd;
  --color-border-strong:#c9c0aa;
  --color-accent:var(--terracotta-500);
  --color-accent-strong:var(--terracotta-700);
  --color-brand:var(--forest-800);
  --color-brand-strong:var(--forest-900);
  --color-focus:#2f7dd6;
  --color-danger:#a4342a;

  --diff-facile-bg:#e4efe2; --diff-facile-fg:#2c5c34; --diff-facile-bd:#a9cba7;
  --diff-moyenne-bg:#f8ecd3; --diff-moyenne-fg:#8a5e12; --diff-moyenne-bd:#e3c586;
  --diff-difficile-bg:#f5e0da; --diff-difficile-fg:#8a3520; --diff-difficile-bd:#e3b19f;

  --shadow-sm:0 1px 2px rgba(20,30,20,.08);
  --shadow-md:0 4px 16px rgba(20,30,20,.12);
  --shadow-lg:0 12px 32px rgba(20,30,20,.20);
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:18px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h:60px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-bg:#10160f;
    --color-bg-raised:#182018;
    --color-surface:#182018;
    --color-surface-2:#1e2820;
    --color-text:#e8ede4;
    --color-text-muted:#9db3a0;
    --color-border:#2b3a2c;
    --color-border-strong:#3c4f3d;
    --color-accent:var(--terracotta-400);
    --color-accent-strong:#f0a15e;
    --color-brand:#4f8a5b;
    --color-brand-strong:#6ba679;
    --color-focus:#6ab0ff;

    --diff-facile-bg:#1c3222; --diff-facile-fg:#8fd39b; --diff-facile-bd:#2f4f37;
    --diff-moyenne-bg:#332911; --diff-moyenne-fg:#e8c374; --diff-moyenne-bd:#54431c;
    --diff-difficile-bg:#3a201a; --diff-difficile-fg:#f0a08c; --diff-difficile-bd:#5c3327;
  }
}

:root[data-theme="dark"]{
  --color-bg:#10160f;
  --color-bg-raised:#182018;
  --color-surface:#182018;
  --color-surface-2:#1e2820;
  --color-text:#e8ede4;
  --color-text-muted:#9db3a0;
  --color-border:#2b3a2c;
  --color-border-strong:#3c4f3d;
  --color-accent:var(--terracotta-400);
  --color-accent-strong:#f0a15e;
  --color-brand:#4f8a5b;
  --color-brand-strong:#6ba679;
  --color-focus:#6ab0ff;

  --diff-facile-bg:#1c3222; --diff-facile-fg:#8fd39b; --diff-facile-bd:#2f4f37;
  --diff-moyenne-bg:#332911; --diff-moyenne-fg:#e8c374; --diff-moyenne-bd:#54431c;
  --diff-difficile-bg:#3a201a; --diff-difficile-fg:#f0a08c; --diff-difficile-bd:#5c3327;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--color-bg);
  color:var(--color-text);
  min-height:100vh;
  line-height:1.45;
  transition:background-color .2s ease, color .2s ease;
}
h1,h2,h3,h4{ font-weight:700; line-height:1.2; margin:0 0 .5em; color:var(--color-text); }
a{ color:var(--color-accent-strong); }
p{ margin:0 0 .75em; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }

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

:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; border-radius:4px; }

/* ---------- topographic motif ---------- */
.app-header{
  background-image:
    linear-gradient(180deg, rgba(21,42,28,.94), rgba(21,42,28,.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140' viewBox='0 0 220 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5'%3E%3Cpath d='M-10 100 Q 40 60 90 95 T 230 80'/%3E%3Cpath d='M-10 120 Q 40 85 90 115 T 230 105'/%3E%3Cpath d='M-10 30 Q 60 -5 120 25 T 230 15'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 320px 200px;
  background-repeat:no-repeat, repeat-x;
  background-position:top, bottom left;
}

/* ---------- header & nav ---------- */
.app-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  min-height:var(--header-h);
  padding:calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px));
  color:#f4f1e8;
  box-shadow:var(--shadow-md);
}
.app-header__brand{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.app-header__logo{ color:var(--terracotta-400); display:inline-flex; }
.app-header__title{ font-weight:800; font-size:1.05rem; letter-spacing:.2px; white-space:nowrap; }

.app-tabs{ display:flex; gap:4px; flex:1 1 auto; overflow-x:auto; }
.app-tabs__btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid transparent; color:#dfe6da;
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:.9rem;
  white-space:nowrap; transition:background-color .15s ease, color .15s ease;
}
.app-tabs__btn:hover{ background:rgba(255,255,255,.08); }
.app-tabs__btn.is-active{ background:var(--terracotta-500); color:#fff; font-weight:600; }

.app-header__actions{ display:flex; gap:4px; flex:0 0 auto; }

@media (max-width:520px){
  :root{ --header-h:96px; }
  .app-header{ flex-wrap:wrap; }
  .app-tabs{ order:3; flex:1 1 100%; }
}
.icon-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#f4f1e8;
  border-radius:999px; cursor:pointer; font-size:1.05rem; transition:background-color .15s ease, transform .1s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,.18); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn.is-active{ background:var(--terracotta-500); border-color:var(--terracotta-500); }

/* ---------- offline / preview banners ---------- */
.offline-banner{
  background:var(--amber-600); color:#fff; text-align:center;
  padding:6px 10px; font-size:.85rem; font-weight:600;
}
.preview-banner{
  background:var(--forest-600); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:8px 14px; font-size:.88rem;
}
.preview-banner[hidden]{ display:none; }

/* ---------- footer ---------- */
.app-footer{
  text-align:center; padding:14px 14px 22px; color:var(--color-text-muted); font-size:.78rem;
}

/* ---------- data panel (import/export dropdown) ---------- */
.data-panel{
  position:fixed; top:calc(var(--header-h) + 10px); right:12px; z-index:30;
  width:min(360px, calc(100vw - 24px));
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:16px;
}
.data-panel__title{ font-size:1rem; margin-bottom:10px; }
.data-panel__group{ margin-bottom:14px; }
.data-panel__group:last-child{ margin-bottom:0; }
.data-panel__group h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); margin-bottom:4px; }
.data-panel__hint{ font-size:.82rem; color:var(--color-text-muted); margin-bottom:8px; }
.data-panel__row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  border-radius:999px; border:1px solid transparent; padding:9px 16px;
  font-size:.88rem; font-weight:600; cursor:pointer; transition:filter .15s ease, transform .1s ease;
  background:var(--color-surface-2); color:var(--color-text);
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:scale(.98); }
.btn--accent{ background:var(--color-accent); color:#fff; }
.btn--accent:hover{ filter:brightness(1.08); }
.btn--secondary{ background:var(--color-surface-2); border-color:var(--color-border); color:var(--color-text); }
.btn--ghost{ background:transparent; border-color:var(--color-border-strong); color:var(--color-text); }
.btn--tiny{ padding:6px 12px; font-size:.8rem; }
.btn--file{ position:relative; overflow:hidden; }

/* ---------- toolbar & filters ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px;
  padding:14px 14px 6px;
  max-width:1200px; margin:0 auto;
}
.toolbar__search{ flex:1 1 220px; min-width:180px; }
#search-input{
  width:100%; padding:10px 14px; border-radius:999px; border:1px solid var(--color-border);
  background:var(--color-surface); color:var(--color-text); font-size:.95rem;
}
.toolbar__filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; flex:1 1 100%; }

.field{ display:flex; flex-direction:column; gap:3px; font-size:.78rem; color:var(--color-text-muted); }
.field > span, .field legend{ font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; padding:0; }
.field select, .field input[type="number"], .field input[type="text"]{
  padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
  background:var(--color-surface); color:var(--color-text); font-size:.88rem; min-width:0;
}
.field--range{ border:0; margin:0; padding:0; flex-direction:row; align-items:center; gap:6px; flex-wrap:wrap; }
.field--range legend{ width:100%; }
.field--range input{ width:72px; }
.field--toggle{ flex-direction:row; align-items:center; gap:6px; font-size:.85rem; color:var(--color-text); }
.field--toggle input{ width:16px; height:16px; accent-color:var(--color-accent); }
.field--full{ flex:1 1 100%; }

.result-count{ max-width:1200px; margin:0 auto; padding:0 14px; color:var(--color-text-muted); font-size:.85rem; }

/* ---------- table (desktop) ---------- */
main{ padding-bottom:60px; }
.table-wrap{ max-width:1200px; margin:10px auto 0; padding:0 14px; overflow-x:auto; display:none; }
.hikes-table{ width:100%; border-collapse:collapse; background:var(--color-surface); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.hikes-table th{ text-align:left; background:var(--color-surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-muted); border-bottom:1px solid var(--color-border); }
.hikes-table th button{
  background:none; border:0; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit;
  padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:4px; width:100%;
}
.hikes-table th[aria-sort="ascending"] button::after{ content:"▲"; font-size:.6rem; }
.hikes-table th[aria-sort="descending"] button::after{ content:"▼"; font-size:.6rem; }
.hikes-table td{ padding:10px 12px; border-bottom:1px solid var(--color-border); font-size:.88rem; vertical-align:middle; }
.hikes-table tbody tr{ cursor:pointer; transition:background-color .12s ease; }
.hikes-table tbody tr:hover{ background:var(--color-surface-2); }
.hikes-table tbody tr:last-child td{ border-bottom:0; }
.hikes-table td:first-child{ font-weight:600; }
.hikes-table tbody tr:hover td:first-child{ color:var(--color-accent-strong); }
.col-fav{ width:44px; }
.col-gpx, .col-source{ width:40px; text-align:center; }

.gpx-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:.75rem; font-weight:700;
  line-height:1;
}
.gpx-icon--yes{ background:var(--diff-facile-bg); color:var(--diff-facile-fg); border:1px solid var(--diff-facile-bd); }
.gpx-icon--no{ background:transparent; color:var(--color-text-muted); border:1px solid var(--color-border-strong); }
.gpx-icon--checking{ background:var(--color-surface-2); color:var(--color-text-muted); border:1px solid var(--color-border); }

.gpx-badge{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; border:1px solid;
}
.gpx-badge--yes{ background:var(--diff-facile-bg); color:var(--diff-facile-fg); border-color:var(--diff-facile-bd); }
.gpx-badge--no{ background:transparent; color:var(--color-text-muted); border-color:var(--color-border-strong); }
.gpx-badge--checking{ background:var(--color-surface-2); color:var(--color-text-muted); border-color:var(--color-border); }

.source-link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; text-decoration:none;
  color:var(--color-text-muted); font-size:.95rem; transition:background-color .12s ease, color .12s ease;
}
.source-link-btn:hover{ background:var(--color-surface-2); color:var(--color-accent-strong); }
.source-link-btn--empty{ opacity:.35; cursor:default; }
.source-link-btn--labeled{
  width:auto; height:auto; gap:5px; padding:3px 10px; border-radius:999px;
  border:1px solid var(--color-border-strong); font-size:.78rem; font-weight:600;
}
.source-link-btn--labeled:hover{ border-color:var(--color-accent-strong); }

/* ---------- badges ---------- */
.difficulty-badge{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; border:1px solid; white-space:nowrap;
}
.difficulty-badge[data-difficulty="Facile"]{ background:var(--diff-facile-bg); color:var(--diff-facile-fg); border-color:var(--diff-facile-bd); }
.difficulty-badge[data-difficulty="Moyenne"]{ background:var(--diff-moyenne-bg); color:var(--diff-moyenne-fg); border-color:var(--diff-moyenne-bd); }
.difficulty-badge[data-difficulty="Difficile"]{ background:var(--diff-difficile-bg); color:var(--diff-difficile-fg); border-color:var(--diff-difficile-bd); }

.status-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:600; border:1px solid var(--color-border-strong); color:var(--color-text-muted); }
.status-badge[data-status="envie"]{ color:var(--forest-700); border-color:var(--diff-facile-bd); background:var(--diff-facile-bg); }
.status-badge[data-status="a_faire"]{ color:var(--amber-600); border-color:var(--diff-moyenne-bd); background:var(--diff-moyenne-bg); }
.status-badge[data-status="fait"]{ color:#fff; background:var(--forest-600); border-color:var(--forest-600); }

.perso-badge{
  display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  background:var(--terracotta-500); color:#fff;
}

/* Repère pour une rando détectée auto par le scan de /GPX/ (voir gpxImportFlagHtml
   dans app.js) : icône au plus près du nom + liseré sur la ligne/carte, pour la
   repérer d'un coup d'oeil dans une longue liste sans avoir à lire les badges. */
.gpx-import-flag{ display:inline-block; font-size:.85em; cursor:help; }
#hikes-table-body tr[data-gpx-import="true"] td:first-child{ box-shadow:inset 3px 0 0 var(--terracotta-500); }
.hike-card[data-gpx-import="true"]{ border-left:3px solid var(--terracotta-500); }

.country-flag{ font-size:.95em; }
.terrain-flag{ display:inline-block; font-size:.85em; cursor:help; }

.fav-btn{
  background:none; border:0; cursor:pointer; font-size:1.15rem; line-height:1; color:var(--color-border-strong);
  min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:4px; border-radius:6px; transition:transform .12s ease, color .12s ease;
}
.fav-btn:hover{ transform:scale(1.15); }
.fav-btn[aria-pressed="true"]{ color:var(--terracotta-500); }

/* ---------- cards (mobile) ---------- */
.hikes-cards{ list-style:none; margin:10px 0 0; padding:0 14px; max-width:1200px; margin-inline:auto; display:grid; gap:10px; }
.hike-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.hike-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.hike-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.hike-card__name{ font-weight:700; font-size:1rem; margin:0 0 2px; }
.hike-card__region{ color:var(--color-text-muted); font-size:.82rem; margin:0 0 8px; }
.hike-card__badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.hike-card__stats{ display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--color-text); }
.hike-card__stat b{ color:var(--color-text-muted); font-weight:600; margin-right:3px; }

.empty-state{ text-align:center; color:var(--color-text-muted); padding:40px 20px; max-width:1200px; margin:0 auto; }

@media (min-width:760px){
  .table-wrap{ display:block; }
  .hikes-cards{ display:none; }
}

/* ---------- map view ---------- */
#view-map{ padding:10px 14px 0; max-width:1400px; margin:0 auto; }
.map{ height:calc(100vh - var(--header-h) - 90px); min-height:360px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--color-border); }
.leaflet-popup-content{ font-family:var(--font-ui); }
.popup-title{ font-weight:700; margin-bottom:4px; }
.popup-stats{ font-size:.82rem; color:#444; margin-bottom:6px; }
.popup-link{ font-size:.82rem; font-weight:600; }
.hike-marker-icon span{ display:block; width:100%; height:100%; border-radius:50%; background:var(--mk-color); border:2.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.45); }
.you-are-here-icon{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.you-are-here-icon span{ display:block; width:100%; height:100%; border-radius:50%; background:var(--color-focus); border:3px solid #fff; box-shadow:0 0 0 5px rgba(47,125,214,.30); }
.leaflet-control-locate{ background:#fff; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }
.leaflet-control-fullscreen{ background:#fff; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }
.fav-btn--lg{ font-size:1.35rem; }

/* map covering the viewport, toggled by FullscreenControl (app.js) */
.map.map--fullscreen, .detail-map.map--fullscreen, .add-map.map--fullscreen{
  position:fixed; inset:0; z-index:60;
  width:100vw; height:100vh; height:100dvh; min-height:0;
  border-radius:0; border:none; box-shadow:none;
}

/* ---------- overlays / modals ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; background:rgba(15,20,14,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.overlay[hidden]{ display:none; }
.overlay__panel{
  background:var(--color-bg); width:100%; max-width:900px; max-height:94vh;
  overflow-y:auto; border-radius:18px 18px 0 0; position:relative; box-shadow:var(--shadow-lg);
  padding:22px 18px calc(40px + env(safe-area-inset-bottom, 0px)); animation:slide-up .22s ease;
}
@keyframes slide-up{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@media (min-width:760px){
  .overlay{ align-items:center; }
  .overlay__panel{ border-radius:18px; max-height:90vh; padding:28px; }
}
.overlay__close{
  position:sticky; top:0; float:right; margin:-4px -4px 0 8px; width:36px; height:36px;
  border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface);
  cursor:pointer; font-size:1rem; color:var(--color-text); z-index:2;
}

/* ---------- detail view ---------- */
.detail-content{ clear:both; }
.detail-title{ font-size:1.35rem; margin-bottom:4px; padding-right:40px; }
.detail-region{ color:var(--color-text-muted); margin-bottom:10px; }
.detail-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }

.detail-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(90px,1fr)); gap:10px; margin-bottom:18px; }
.detail-stat{ background:var(--color-surface-2); border-radius:var(--radius-sm); padding:10px; text-align:center; }
.detail-stat__value{ font-size:1.1rem; font-weight:700; color:var(--color-brand-strong); }
.detail-stat__label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-muted); }

.detail-section{ margin-bottom:22px; }
.detail-section h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-muted); margin-bottom:8px; }

.detail-terrain{ background:var(--diff-moyenne-bg); border:1px solid var(--diff-moyenne-bd); border-radius:var(--radius-md); padding:14px; }
.detail-terrain h3{ color:var(--diff-moyenne-fg); margin-bottom:6px; }
.detail-terrain__text{ font-size:.92rem; color:var(--diff-moyenne-fg); margin:0; }

.detail-map{ height:240px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); }

.gpx-status{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); font-size:.88rem; }
.gpx-status--loading{ background:var(--color-surface-2); color:var(--color-text-muted); }
.gpx-status--ok{ background:var(--diff-facile-bg); color:var(--diff-facile-fg); }
.gpx-status--missing{ background:var(--diff-moyenne-bg); color:var(--diff-moyenne-fg); }
.gpx-status--error{ background:var(--diff-difficile-bg); color:var(--diff-difficile-fg); }
.gpx-status code{ background:rgba(0,0,0,.08); padding:1px 5px; border-radius:4px; }
.copy-filename-btn{
  display:inline-flex; align-items:center; gap:4px; margin-left:4px;
  padding:2px 10px; border-radius:999px; border:1px solid currentColor;
  background:transparent; color:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer; vertical-align:middle; white-space:nowrap;
}
.copy-filename-btn:hover{ background:rgba(0,0,0,.08); }
.copy-filename-btn:disabled{ opacity:.75; cursor:default; }

.gpx-import-fallback{ margin-top:10px; font-size:.85rem; }
.gpx-import-fallback label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--color-accent-strong); font-weight:600; }

.elevation-chart{ width:100%; height:auto; display:block; }
.elevation-summary{ display:flex; gap:16px; font-size:.82rem; color:var(--color-text-muted); margin-top:6px; flex-wrap:wrap; }

.detail-description{ font-size:.95rem; }
.detail-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip{ background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:999px; padding:3px 10px; font-size:.78rem; color:var(--color-text-muted); }

.detail-personal{ background:var(--color-surface-2); border-radius:var(--radius-md); padding:14px; }
.detail-personal__row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.detail-personal__row:last-child{ margin-bottom:0; }
.status-select{ padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:.85rem; }
.notes-field{ width:100%; min-height:90px; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-family:inherit; font-size:.9rem; resize:vertical; }
.notes-saved-hint{ font-size:.75rem; color:var(--color-text-muted); }

.detail-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* ---------- add-custom form ---------- */
.add-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.add-map{ height:220px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); cursor:crosshair; }
.field > span.add-coords{ text-transform:none; font-weight:400; letter-spacing:normal; font-size:.8rem; color:var(--color-text-muted); }
.add-form__actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
@media (max-width:560px){ .add-form{ grid-template-columns:1fr; } }

/* ---------- toasts ---------- */
.toast-container{ position:fixed; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; width:min(420px, calc(100vw - 24px)); }
.toast{
  background:var(--forest-900); color:#fff; padding:11px 16px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); font-size:.85rem; animation:toast-in .18s ease;
}
.toast--error{ background:var(--color-danger); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- misc ---------- */
::selection{ background:var(--terracotta-400); color:#20271f; }

/* ---------- print ---------- */
@media print{
  body *{ visibility:hidden; }
  #detail-overlay, #detail-overlay *{ visibility:visible; }
  #detail-overlay{ position:static; background:#fff; display:block; }
  .overlay__panel{ box-shadow:none; max-height:none; max-width:none; padding:0; animation:none; }
  .overlay__close, .detail-map, .detail-actions, .gpx-import-fallback{ display:none !important; }
  .detail-personal select, .detail-personal .fav-btn{ display:none; }
  .notes-field{ border:0; padding:0; }
}