:root{
  --paper:#eef0e6; --surface:#f8f9f2; --surface-2:#ffffff;
  --ink:#1c2420; --ink-soft:#5c665f; --ink-faint:#8a938c;
  --line:rgba(28,36,32,.14); --line-strong:rgba(28,36,32,.28);
  --pine:#2f4a3e; --pine-deep:#1f332a; --pine-tint:rgba(47,74,62,.12);
  --brass:#b8813a; --brass-tint:rgba(184,129,58,.14);
  --slate:#3d5a73; --brick:#a4503a; --plum:#6b5b8a; --teal:#3f7d78;
  --shadow: 0 1px 2px rgba(20,28,24,.06), 0 8px 24px -12px rgba(20,28,24,.22);
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141c18; --surface:#1a221d; --surface-2:#202a24;
    --ink:#edf0e8; --ink-soft:#a9b3ac; --ink-faint:#748078;
    --line:rgba(237,240,232,.14); --line-strong:rgba(237,240,232,.26);
    --pine:#86b79c; --pine-deep:#a9d3b9; --pine-tint:rgba(134,183,156,.16);
    --brass:#d9a961; --brass-tint:rgba(217,169,97,.16);
    --slate:#8fb3d1; --brick:#dd9174; --plum:#b6a3db; --teal:#7fc4bc;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141c18; --surface:#1a221d; --surface-2:#202a24;
  --ink:#edf0e8; --ink-soft:#a9b3ac; --ink-faint:#748078;
  --line:rgba(237,240,232,.14); --line-strong:rgba(237,240,232,.26);
  --pine:#86b79c; --pine-deep:#a9d3b9; --pine-tint:rgba(134,183,156,.16);
  --brass:#d9a961; --brass-tint:rgba(217,169,97,.16);
  --slate:#8fb3d1; --brick:#dd9174; --plum:#b6a3db; --teal:#7fc4bc;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Work Sans',system-ui,sans-serif; }
h1,h2,h3,.display{ font-family:'Fraunces',Georgia,serif; text-wrap:balance; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }
button{ font-family:inherit; }
input,textarea,select{ font-family:inherit; font-size:15px; }
::selection{ background:var(--brass-tint); }

.app{ max-width:1180px; margin:0 auto; padding:14px 18px calc(28px + env(safe-area-inset-bottom,0px)); }

/* auth */
.auth-screen{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px 18px; }
.auth-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); }
.auth-tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; }
.auth-tab{ flex:1; border:none; background:transparent; color:var(--ink-soft); font-weight:600; font-size:13.5px; padding:8px; border-radius:8px; cursor:pointer; }
.auth-tab[aria-pressed="true"]{ background:var(--pine); color:var(--surface); }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-error{ font-size:12.5px; color:var(--brick); background:color-mix(in srgb, var(--brick) 12%, transparent); border-radius:8px; padding:8px 10px; }
.user-chip{ display:flex; align-items:center; gap:8px; }

/* header */
.topbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:6px 16px; }
.brand{ display:flex; align-items:baseline; gap:8px; margin-right:auto; }
.brand .mark{ font-family:'Fraunces',serif; font-weight:700; font-size:22px; letter-spacing:-.01em; }
.brand .tag{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.09em; }
.trip-picker{ display:flex; align-items:center; gap:6px; }
select#tripSelect{
  appearance:none; background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink);
  border-radius:10px; padding:9px 30px 9px 12px; font-weight:600; font-size:14px; max-width:44vw;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size:5px 5px; background-repeat:no-repeat;
}
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-soft); cursor:pointer; flex:none; }
.icon-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }
.btn{ display:inline-flex; align-items:center; gap:7px; border-radius:10px; border:1px solid transparent; padding:9px 15px;
  font-weight:600; font-size:14px; cursor:pointer; }
.btn-primary{ background:var(--pine); color:var(--surface); }
.btn-primary:hover{ background:var(--pine-deep); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink-faint); }
.btn-danger{ background:transparent; border-color:var(--line-strong); color:var(--brick); }

.banner{ font-size:12.5px; color:var(--ink-soft); background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:10px; padding:8px 12px; margin-bottom:14px; }

/* layout */
.layout{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px){ .layout{ grid-template-columns:360px 1fr; align-items:start; } }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }

/* map */
.map-panel{ padding:14px; }
.map-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.map-head h2{ font-size:18px; font-weight:600; margin:0; }
.map-hint{ font-size:11.5px; color:var(--ink-faint); }
.map-frame{ position:relative; width:100%; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
#mapContainer{ width:100%; height:100%; background:var(--surface-2); }

/* Leaflet theming: the map controls/tooltips are plain DOM in our own page,
   so they take the app's tokens instead of Leaflet's default white boxes. */
.map-pin{ cursor:pointer; }
.map-pin svg{ transition:transform .12s ease, filter .12s ease; display:block; }
.map-pin.selected svg{ filter:drop-shadow(0 1px 5px rgba(10,14,12,.45)); }
.leaflet-tooltip{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); font-family:'Work Sans',sans-serif; font-size:12px; padding:3px 8px; }
.leaflet-tooltip-top::before{ border-top-color:var(--surface-2); }
.leaflet-tooltip-bottom::before{ border-bottom-color:var(--surface-2); }
.leaflet-tooltip-left::before{ border-left-color:var(--surface-2); }
.leaflet-tooltip-right::before{ border-right-color:var(--surface-2); }
.leaflet-tooltip.track-dist-tooltip{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:6px; }
.tdt-cyan{ color:#06b6d4; }
.tdt-magenta{ color:#c026d3; }
.tdt-red{ color:#dc2626; }
.tdt-blue{ color:#2563eb; }
.tdt-green{ color:#16a34a; }
.tdt-black{ color:#111827; }

.legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; font-size:11.5px; color:var(--ink-soft); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend svg{ width:12px; height:12px; overflow:visible; }

.stats-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.stat{ flex:1 1 90px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.stat b{ display:block; font-size:16px; font-family:'Fraunces',serif; }
.stat span{ font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }

/* list */
.list-panel{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.list-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.list-head h2{ font-size:18px; font-weight:600; margin:0; }
.filters{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-soft); border-radius:999px;
  padding:5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.chip[aria-pressed="true"]{ background:var(--pine); border-color:var(--pine); color:var(--surface); }
.chip svg{ width:9px; height:9px; overflow:visible; }

/* On mobile the list and map are stacked in one column (see .layout below),
   so the list has no need for its own scroll box — nested scrollers are
   exactly what makes touch-scrolling flaky when the drag starts on a card
   button. Only give it a capped, independently-scrolling box once the map
   sits beside it (desktop), where that keeps the map in view. */
.entries{ display:flex; flex-direction:column; gap:8px; }
@media (min-width:900px){
  .entries{ max-height:520px; overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }
}
.entry-card{ display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); cursor:pointer; text-align:left; width:100%;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.entry-card:hover, .entry-card.selected{ border-color:var(--ink-faint); }
.entry-card.selected{ background:var(--pine-tint); }
.entry-glyph{ flex:none; width:30px; height:30px; overflow:visible; margin-top:2px; }
.entry-body{ min-width:0; flex:1; }
.entry-title{ font-weight:600; font-size:14px; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-meta{ font-size:11.5px; color:var(--ink-faint); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.entry-notes{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.stars{ display:inline-flex; gap:1px; }
.stars svg{ width:10px; height:10px; }
.empty-note{ text-align:center; color:var(--ink-faint); font-size:13px; padding:22px 10px; }

.fab{ position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:1500;
  display:flex; align-items:center; gap:8px; padding:13px 18px; border-radius:999px; background:var(--pine); color:var(--surface);
  border:none; box-shadow:var(--shadow); font-weight:700; font-size:14px; cursor:pointer; }
.fab:hover{ background:var(--pine-deep); }

/* overlay/modals */
.overlay{ position:fixed; inset:0; background:rgba(15,20,17,.5); display:flex; align-items:flex-end; justify-content:center; z-index:2000; padding:0; }
@media (min-width:640px){ .overlay{ align-items:center; padding:20px; } }
.sheet{ background:var(--surface); width:100%; max-width:540px; max-height:92vh; overflow-y:auto; overscroll-behavior:contain; border-radius:18px 18px 0 0; box-shadow:var(--shadow); }
@media (min-width:640px){ .sheet{ border-radius:18px; max-height:86vh; } }
@media (min-width:760px){ .sheet.sheet-wide{ max-width:700px; } }
.auth-link{ background:none; border:none; color:var(--pine); font-size:12.5px; font-weight:600; cursor:pointer; padding:0; text-align:left; }
.auth-link:hover{ text-decoration:underline; }
.sheet-head{ position:sticky; top:0; background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; border-bottom:1px solid var(--line); }
.sheet-head h3{ margin:0; font-size:19px; }
.sheet-body{ padding:16px 18px 22px; display:flex; flex-direction:column; gap:14px; }
.close-x{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:20px; line-height:1; padding:4px; }

.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-size:11.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.field input, .field textarea, .field select{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px; color:var(--ink); width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--pine); outline-offset:1px; }
.field textarea{ min-height:78px; resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hint{ font-size:11px; color:var(--ink-faint); }

.type-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.type-pill{ flex:1 1 auto; border:1px solid var(--line-strong); background:var(--surface-2); border-radius:10px; padding:8px 6px;
  font-size:11.5px; font-weight:600; text-align:center; cursor:pointer; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:4px; }
.type-pill svg{ width:14px; height:14px; overflow:visible; }
.type-pill[aria-pressed="true"]{ border-color:var(--pine); color:var(--pine); background:var(--pine-tint); }

.star-input{ display:flex; gap:4px; }
.star-input button{ background:none; border:none; cursor:pointer; padding:2px; }
.star-input svg{ width:20px; height:20px; }
.price-input{ display:flex; gap:4px; }
.price-dot{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--brass); cursor:pointer; background:transparent; }
.price-dot[aria-pressed="true"]{ background:var(--brass); }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; }
.photo-thumb{ position:relative; aspect-ratio:1; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; }
.photo-thumb img, .photo-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb .rm{ position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(20,28,24,.65); color:#fff; border:none; font-size:12px; cursor:pointer; line-height:1; z-index:2; }
.photo-thumb .cap-badge{ position:absolute; left:0; right:0; bottom:0; padding:3px 6px; font-size:9.5px; line-height:1.25; color:#fff; background:linear-gradient(transparent, rgba(10,14,12,.75)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lightbox-caption{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px)); text-align:center; color:#fff; font-size:13.5px; background:linear-gradient(transparent, rgba(0,0,0,.6)); }
.detail-photo{ display:flex; flex-direction:column; gap:3px; }
.detail-photo .caption-text{ font-size:10.5px; color:var(--ink-soft); line-height:1.3; }
.photo-add{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:9px; border:1.5px dashed var(--line-strong); color:var(--ink-faint); cursor:pointer; font-size:22px; background:transparent; }

.sheet-foot{ display:flex; gap:10px; justify-content:flex-end; padding-top:4px; }

/* detail view */
.detail-type{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:999px; }
.detail-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; font-size:13px; color:var(--ink-soft); }
.detail-notes{ font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.detail-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; }

.lightbox{ position:fixed; inset:0; background:rgba(10,14,12,.92); z-index:2100; display:flex; align-items:center; justify-content:center; padding:24px; }
.lightbox img, .lightbox video{ max-width:100%; max-height:100%; border-radius:8px; }
.lightbox-map{ width:min(90vw,900px); height:min(75vh,700px); border-radius:8px; overflow:hidden; }
.lightbox .close-x{ position:absolute; top:18px; right:18px; z-index:1200; color:#fff; font-size:26px; background:rgba(10,14,12,.6); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.lightbox .nav{ position:absolute; top:50%; z-index:1200; transform:translateY(-50%); background:rgba(10,14,12,.6); border:none; color:#fff; width:40px; height:40px; border-radius:50%; font-size:20px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.lightbox .prev{ left:18px; } .lightbox .next{ right:18px; }

[hidden]{ display:none!important; }