:root {
  --green-900:#14301d;
  --green-700:#1e4d2b;
  --green-600:#276339;
  --blaze:#f5f2ea;
  --paper:#f7f4ec;
  --card:#ffffff;
  --ink:#26221c;
  --ink-soft:#6b6255;
  --line:#e3dccb;
  --amber:#e09f3e;
  --amber-deep:#c77f1f;
  --clay:#c96f4a;
  --shadow:0 6px 24px rgba(38,34,28,.12);
  --radius:14px;
  --topbar-h:64px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  font:14px/1.55 'Expletus Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
a { color:var(--green-700); }
h1,h2,h3 { line-height:1.18; margin:0; font-family:'Expletus Sans','Segoe UI',Arial,sans-serif; }
em, i, .state-hist, .empty, .sec-empty-note, .checkin-list:empty::before {
  font-family:'Viga','Expletus Sans',Arial,sans-serif; font-style:italic;
}
button { font:inherit; cursor:pointer; }
input,select,textarea { font:inherit; color:inherit; }

.ph-dot { width:12px; height:12px; background:#2e86ab; border:2px solid #fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.mi-label {
  font:600 9.5px/1.2 ui-monospace,Consolas,monospace; color:#3a332a; white-space:nowrap;
  background:rgba(255,255,255,.82); border:1px solid rgba(138,77,29,.35); border-radius:7px; padding:1px 5px;
  transform:translate(10px,-14px); box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.cc-badge { width:30px; height:30px; background:var(--green-700); border:2px solid #fff; color:#fff; border-radius:16px; display:flex; align-items:center; justify-content:center; font:700 12px Arial; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.ghost-inline { border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 9px; font-size:12px; cursor:pointer; }
.ghost-inline:hover { background:#f2f0e6; }
body.rail-hidden #view-map.active { grid-template-columns:1fr; }
body.rail-hidden #rail { display:none; }
body:not(.rail-hidden) .leaflet-control-attribution { z-index:0; }
@media (max-width:900px) { body.rail-hidden #view-map.active { grid-template-columns:1fr; } }

/* ---------- top bar ---------- */
#topbar {
  height:var(--topbar-h); flex:0 0 auto; display:flex; align-items:center; gap:18px;
  padding:0 18px; background:linear-gradient(90deg,var(--green-900),var(--green-700) 60%,var(--green-600));
  color:var(--blaze); box-shadow:0 2px 10px rgba(0,0,0,.25); z-index:1100; position:relative;
}
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.blaze {
  width:26px; height:26px; border-radius:8px 2px 8px 2px; background:var(--blaze);
  box-shadow:inset 0 0 0 2px rgba(20,48,29,.35);
  position:relative; transform:rotate(-8deg); flex:0 0 auto;
}
.blaze::after { content:""; position:absolute; left:50%; top:6px; bottom:6px; width:4px; margin-left:-2px; background:var(--green-700); border-radius:2px; }
.brand-text h1 { font:700 21px/1.05 'Expletus Sans','Segoe UI',Arial,sans-serif; letter-spacing:.2px; }
.brand-text h1 em { font-style:italic; color:#ffe9c2; }
.brand-text p { margin:2px 0 0; font-size:11.5px; opacity:.85; }
.tabs { display:flex; gap:4px; margin-left:auto; background:rgba(255,255,255,.08); padding:4px; border-radius:12px; }
.tab {
  border:0; background:transparent; color:var(--blaze); padding:7px 14px; border-radius:9px;
  font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; transition:background .15s;
}
.tab:hover { background:rgba(255,255,255,.12); }
.tab.active { background:var(--blaze); color:var(--green-900); }
.badge { background:var(--amber); color:#241a08; font:700 10.5px/1.4 Arial; border-radius:9px; padding:0 6px; }
.top-actions { display:flex; align-items:center; gap:6px; margin-left:6px; }
.ghost {
  background:transparent; border:1px solid rgba(245,242,234,.45); color:var(--blaze);
  padding:6px 10px; border-radius:9px; font-size:12.5px; transition:background .15s; white-space:nowrap;
}
.ghost:hover { background:rgba(255,255,255,.14); }
.ghost.file { display:inline-block; }

/* ---------- views ---------- */
main { flex:1 1 auto; min-height:0; }
.view { display:none; height:100%; }
.view.active { display:block; }
#view-map { position:relative; }

/* map layout */
#view-map { display:none; }
#view-map.active { display:grid; grid-template-columns:348px minmax(0,1fr); }
#map { position:relative; height:100%; background:#dfe7d8; z-index:1; }
#rail {
  background:var(--blaze); border-right:1px solid var(--line); overflow:hidden; display:flex;
  flex-direction:column; min-height:0; z-index:2;
}
.rail-head { display:flex; align-items:center; gap:10px; padding:14px 14px 8px; }
.rail-head h2 { font:700 16px/1.2 'Expletus Sans','Segoe UI',Arial,sans-serif; color:var(--green-900); flex:1; }
.rail-hint { margin:0; padding:0 14px 10px; font-size:12px; color:var(--ink-soft); }
.checkin-list { flex:1; overflow-y:auto; margin:0; padding:0 10px 10px; list-style:none; }
.checkin-list:empty::before { content:"Tap the trail line to add a check-in."; display:block; padding:16px 8px; color:var(--ink-soft); font-style:italic; font-size:12.5px; }
.ci-item {
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px;
  cursor:pointer; transition:box-shadow .15s, transform .15s; box-shadow:0 1px 3px rgba(38,34,28,.06);
}
.ci-item:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.ci-item.active { border-color:var(--amber-deep); box-shadow:0 0 0 2px rgba(224,159,62,.35); }
.ci-top { display:flex; align-items:baseline; gap:8px; }
.ci-mile { font:700 12px ui-monospace,Consolas,monospace; color:var(--amber-deep); white-space:nowrap; }
.ci-name { font-family:'Expletus Sans','Segoe UI',Arial,sans-serif; font-weight:700; font-size:14px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-date { font-size:11.5px; color:var(--ink-soft); }
.ci-note { font-size:12px; color:var(--ink-soft); margin:5px 0 0; white-space:pre-line; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ci-meta { display:flex; gap:6px; margin-top:7px; align-items:center; flex-wrap:wrap; }
.ci-thumbs { display:flex; gap:2px; overflow:hidden; }
.ci-thumbs img { width:34px; height:34px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.ci-thumb-more { font-size:10.5px; color:var(--ink-soft); background:var(--paper); border-radius:6px; padding:8px 6px; }
.chip { font-size:10.5px; background:#eef0e6; color:var(--green-900); border-radius:8px; padding:2px 7px; font-weight:600; }
.chip.anchor { background:#fdeeda; color:#8a5a12; }

/* buttons */
.primary {
  background:var(--green-700); color:#fff; border:0; border-radius:10px; padding:8px 14px; font-weight:650;
  box-shadow:0 2px 6px rgba(20,48,29,.25); transition:background .15s;
}
.primary:hover { background:var(--green-600); }
.primary.small { padding:6px 10px; font-size:12.5px; border-radius:8px; }
.danger { background:#fff; color:#a33420; border:1px solid #e7b8aa; border-radius:10px; padding:8px 14px; font-weight:600; }
.danger:hover { background:#fbeee9; }
.link { background:none; border:0; color:var(--green-700); text-decoration:underline; padding:0; }

/* legend / map chrome (collapsible — the arrow closes the panel) */
.legend {
  position:absolute; left:12px; bottom:34px; z-index:800; background:rgba(255,255,255,.95);
  border-radius:12px; box-shadow:var(--shadow); font-size:12px; pointer-events:none;
  max-width:216px; overflow:hidden;
}
.legend-head {
  display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent;
  padding:8px 11px; cursor:pointer; pointer-events:auto;
  font:600 10.5px 'Expletus Sans',Arial,sans-serif; text-transform:uppercase; letter-spacing:1px; color:var(--green-900);
}
.legend-head:hover { background:rgba(224,159,62,.16); }
.legend-head .caret { margin-left:auto; font-size:12px; line-height:1; transition:transform .18s ease; }
.legend.collapsed .legend-head .caret { transform:rotate(-90deg); }
.legend-body { display:flex; flex-direction:column; gap:5px; padding:2px 12px 10px; }
.legend.collapsed .legend-body { display:none; }
.legend-body > div { display:flex; align-items:center; gap:8px; }
.legend-body button, .legend .map-btn { pointer-events:auto; }
.dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
.checkin-dot { background:var(--green-700); border:2px solid var(--blaze); box-shadow:0 0 0 1px var(--green-700); }
.photo-dot { background:#2e86ab; border:1px solid #fff; }
.line { height:0; border-top:3px solid; flex:0 0 22px; border-radius:2px; }
.legend-line { border-color:#8a4d1d; }
.legend-blaze { border-color:#b9b29c; border-top-style:dashed; }
.map-btn {
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:4px 8px;
  font-size:12px; margin-top:2px; text-align:left;
}
.map-btn:hover { background:#f2f0e6; }
.toast {
  position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:2000;
  background:var(--green-900); color:#fff; padding:9px 16px; border-radius:10px; font-size:13px;
  box-shadow:var(--shadow); pointer-events:none; opacity:.97; max-width:80vw; text-align:center;
}
/* leaflet tweaks */
.leaflet-container { font-family:inherit; }
.ci-flag {
  width:26px; height:26px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg);
  background:var(--green-700); border:2px solid #fff; color:#fff; display:flex; align-items:center; justify-content:center;
  font:700 11px Arial; box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.ci-flag > span { transform:rotate(45deg); }
.ci-flag.anchor-flag { background:var(--amber-deep); }
.leaflet-popup-content { margin:10px 12px; }
.leaflet-popup-content p { margin:4px 0; }
.lp-thumb { display:block; width:210px; height:140px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.lp-name { font-family:'Expletus Sans','Segoe UI',Arial,sans-serif; font-weight:700; font-size:14px; }
.lp-mile { font:700 12px ui-monospace,monospace; color:var(--amber-deep); }
.lp-date { font-size:11.5px; color:var(--ink-soft); }
.lp-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }

/* gallery */
#view-gallery, #view-screens { overflow-y:auto; display:none; }
#view-gallery.active, #view-screens.active { display:block; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.tool-group { display:flex; gap:8px; flex-wrap:wrap; }
.tool-group input[type=search] { width:240px; }
input[type=search],select,input[type=date],input[type=number],input[type=text],textarea {
  border:1px solid var(--line); border-radius:9px; padding:7px 10px; background:#fff;
}
textarea { width:100%; resize:vertical; }
.check { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:14px; padding:18px; }
.grid.small { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:transform .15s, box-shadow .15s; box-shadow:0 1px 4px rgba(38,34,28,.06); display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card figure { margin:0; aspect-ratio:4/3; background:#e9e6dc; overflow:hidden; }
.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.card:hover img { transform:scale(1.04); }
.card .cap { padding:9px 11px 11px; flex:1; }
.card .cap .d { font-size:11.5px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:6px; }
.card .cap .t { font-size:12px; color:var(--ink); margin-top:2px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.milechip { background:#fdeeda; color:#8a5a12; font:700 10.5px ui-monospace,monospace; border-radius:8px; padding:1px 7px; white-space:nowrap; }
.empty { text-align:center; color:var(--ink-soft); padding:40px 0; font-style:italic; }
.hint-inline { font-size:12.5px; color:var(--ink-soft); max-width:560px; }

/* drawer */
.drawer { position:fixed; inset:0; z-index:1500; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(20,30,17,.45); backdrop-filter:blur(1.5px); }
.drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:min(1060px,96vw); background:var(--paper);
  box-shadow:-8px 0 30px rgba(0,0,0,.25); overflow-y:auto; animation:slideIn .22s ease;
}
@keyframes slideIn { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
.drawer-close {
  position:absolute; top:12px; right:12px; z-index:5; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.92); font-size:20px; line-height:1;
}
.drawer-close:hover { background:#fff; }
#drawerBody { padding:26px 28px 40px; }

.detail { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:26px; }
.detail .photo-side { min-width:0; }
.detail .photo-side .ph { width:100%; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); background:#000; }
.detail .open-orig { display:inline-block; margin-top:10px; font-size:12.5px; }
.detail h2 { font:700 22px 'Expletus Sans','Segoe UI',Arial,sans-serif; color:var(--green-900); margin:0 34px 2px 0; }
.detail .sub { color:var(--ink-soft); font-size:12.5px; margin-bottom:14px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:14px; }
.panel h3 { font:700 12px/1.2 'Expletus Sans',Arial,sans-serif; color:var(--green-900); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:8px; }
.panel dl { display:grid; grid-template-columns:auto 1fr; gap:3px 16px; margin:0; font-size:12.5px; }
.panel dt { color:var(--ink-soft); }
.panel dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.placement { display:flex; flex-direction:column; gap:10px; }
.placement .mile-big { font:700 26px ui-monospace,Consolas,monospace; color:var(--amber-deep); }
.placement .mile-est { font-size:12px; color:var(--ink-soft); }
.slider-row { display:flex; align-items:center; gap:10px; }
.slider-row input[type=range] { flex:1; }
.trail-note { font-size:12px; color:var(--ink-soft); background:#f0ecdE; border-radius:8px; padding:6px 9px; }
.caption-box { width:100%; margin-top:6px; }

/* modal */
.modal { position:fixed; inset:0; z-index:1600; }
.modal-backdrop { position:absolute; inset:0; background:rgba(20,30,17,.55); }
.modal-card {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px,94vw); max-height:92vh; overflow-y:auto; background:var(--paper);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); padding:22px 24px;
}
.modal-card h2 { font:700 20px 'Expletus Sans','Segoe UI',Arial,sans-serif; color:var(--green-900); }
.muted { color:var(--ink-soft); }
.small { font-size:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:14px 0; }
.form-grid label, label.block { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.block { margin:10px 0; }
.pick-actions { display:flex; gap:8px; margin:4px 0 8px; }
.ghost.small { font-size:11.5px; padding:4px 9px; }
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin:6px 0 4px; max-height:300px; overflow-y:auto; }
.pick {
  position:relative; border:2px solid var(--line); border-radius:10px; overflow:hidden; aspect-ratio:1/1; cursor:pointer; background:#e9e6dc;
}
.pick img { width:100%; height:100%; object-fit:cover; display:block; }
.pick .pd { position:absolute; left:0; right:0; bottom:0; background:rgba(20,30,17,.62); color:#fff; font-size:9.5px; padding:1px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick .tk { position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.92); display:none; align-items:center; justify-content:center; font:800 12px; color:var(--green-700); }
.pick.sel { border-color:var(--green-700); }
.pick.sel .tk { display:flex; }
.pick .mile { position:absolute; top:5px; left:5px; background:rgba(255,255,255,.9); color:#8a5a12; font:700 9px ui-monospace,monospace; border-radius:6px; padding:0 5px; }
.actions { display:flex; align-items:center; gap:10px; margin-top:16px; }
.spacer { flex:1; }
#foot { flex:0 0 auto; display:flex; justify-content:space-between; gap:14px; padding:7px 18px; font-size:11px; color:var(--ink-soft); background:#ece6d8; border-top:1px solid var(--line); flex-wrap:wrap; }
#foot a { color:inherit; }

.settings-panel { max-width:760px; margin:30px auto; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 28px; }
.settings-note { color:var(--ink-soft); font-size:13px; }
.about { margin-top:18px; border-top:1px dashed var(--line); padding-top:12px; }
.about summary { cursor:pointer; font-weight:650; }
.about p { font-size:12.5px; color:var(--ink-soft); }

.spinner-wrap { display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column; gap:12px; color:var(--ink-soft); }

@media (max-width:900px) {
  #view-map.active { grid-template-columns:1fr; }
  #rail { position:absolute; inset:0 auto 0 0; width:min(340px,86vw); z-index:900; transform:translateX(-105%); transition:transform .2s; box-shadow:var(--shadow); }
  #rail.open { transform:none; }
  .detail { grid-template-columns:1fr; }
  #foot { justify-content:center; text-align:center; }
  .top-actions .ghost { padding:6px 8px; }
}

/* ---------- layout: views that host the bottom time-slider ---------- */
#view-map.active { grid-template-columns:348px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
#view-map #rail { grid-row:1 / -1; }
#view-map #map { grid-row:1; grid-column:2; }
#tsMap { grid-row:2; grid-column:2; }
body.rail-hidden #view-map.active { grid-template-columns:1fr; }
body.rail-hidden #tsMap { grid-column:1; }

#view-gallery.active, #view-screens.active { display:flex; flex-direction:column; overflow:hidden; }
#view-screens.active { display:block; overflow-y:auto; }
#galScroll { flex:1 1 auto; min-height:0; overflow-y:auto; }
#tsGal { flex:0 0 auto; }
body.rail-hidden #view-map #rail { display:none; }

/* ---------- time-slide bar ---------- */
.tsbar {
  background:linear-gradient(180deg,#fff,#f4efe2);
  border-top:1px solid var(--line);
  padding:8px 16px 7px; display:flex; flex-direction:column; gap:4px;
  font-size:11.5px; color:var(--ink-soft);
  box-shadow:0 -2px 10px rgba(38,34,28,.07);
}
.tsbar .ts-top { display:flex; align-items:center; gap:12px; }
.tsbar .ts-top .ts-date { font-weight:700; color:var(--green-900); font-size:12px; white-space:nowrap; min-width:150px; font-variant-numeric:tabular-nums; }
.tsbar .ts-top .ts-mile { margin-left:auto; font:700 11px ui-monospace,Consolas,monospace; color:var(--amber-deep); white-space:nowrap; }
.tsbar input[type=range] { flex:1; accent-color:var(--green-700); cursor:pointer; }
.tsbar .ts-ends { display:flex; justify-content:space-between; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); }
.tsbar .ts-hint { font-size:10.5px; text-align:center; color:var(--ink-soft); margin-top:1px; }

/* scrub preview (enlarged photo above the bar) */
.ts-preview {
  position:fixed; left:50%; transform:translateX(-50%); bottom:118px; z-index:1250;
  width:min(560px,60vw); background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35); overflow:hidden; cursor:pointer;
  animation:pop .16s ease;
}
@keyframes pop { from { transform:translateX(-50%) scale(.96); opacity:.6; } to { transform:translateX(-50%) scale(1); opacity:1; } }
.ts-preview img { width:100%; height:min(320px,38vh); object-fit:cover; display:block; }
.ts-preview .tp-meta {
  display:flex; align-items:baseline; gap:14px; padding:9px 14px 10px; font-size:12px;
}
.ts-preview .tp-date { font-weight:800; color:var(--green-900); }
.ts-preview .tp-sub { color:var(--ink-soft); }
.ts-preview .tp-mile { margin-left:auto; font:700 12px ui-monospace,Consolas,monospace; color:var(--amber-deep); }

/* hover-enlarge lens */
.hover-zoom {
  position:fixed; right:18px; bottom:120px; z-index:1260; width:min(430px,38vw);
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35); animation:popIn .16s ease;
}
@keyframes popIn { from { transform:translateY(8px) scale(.97); opacity:.4; } to { transform:none; opacity:1; } }
.hover-zoom img { width:100%; height:min(300px,36vh); object-fit:cover; display:block; }
.hover-zoom .hz-meta { padding:9px 13px 10px; font-size:12px; display:flex; flex-direction:column; gap:2px; }
.hover-zoom .hz-date { font-weight:800; color:var(--green-900); }
.hover-zoom .hz-sub { color:var(--ink-soft); font-size:11.5px; }
.hover-zoom .hz-mile { color:var(--amber-deep); font:700 11px ui-monospace,Consolas,monospace; }

/* gallery card hover grows a little */
.grid .card { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.grid .card:hover { transform:scale(1.045); z-index:4; border-color:var(--amber); box-shadow:0 14px 34px rgba(38,34,28,.22); }
.card.flash { outline:3px solid var(--amber-deep); outline-offset:-2px; }

/* scrub dot on the map */
.scrub-dot {
  width:18px; height:18px; border-radius:50%; background:var(--amber);
  border:3px solid #fff; box-shadow:0 0 0 3px rgba(224,159,62,.55), 0 2px 8px rgba(0,0,0,.45);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.35); } }

/* ---------- state history sections in the check-in rail ---------- */
.state-sec { margin:2px 0 10px; }
.state-head {
  display:flex; align-items:baseline; gap:8px; cursor:pointer; padding:7px 8px 3px;
  border-radius:10px 10px 0 0; user-select:none;
}
.state-head:hover { background:rgba(224,159,62,.1); }
.state-head .st-name { font-family:'Expletus Sans','Segoe UI',Arial,sans-serif; font-weight:700; font-size:14.5px; color:var(--green-900); }
.state-head .st-badge { margin-left:auto; font:600 10px 'Expletus Sans',Arial,sans-serif; color:var(--ink-soft); background:#eef0e6; border-radius:8px; padding:1px 7px; }
.state-head .st-mile { font:700 10px ui-monospace,Consolas,monospace; color:var(--amber-deep); white-space:nowrap; }
.state-hist {
  font-family:'Viga','Expletus Sans',Arial,sans-serif; font-style:italic; font-size:12.5px; line-height:1.5;
  color:#5d5342; background:rgba(255,255,255,.55); border-left:3px solid #d8cdb4;
  margin:0 4px 4px 8px; padding:4px 10px; border-radius:0 8px 8px 0;
}
.state-hist b { font-style:normal; font-weight:700; }
.ci-list { list-style:none; margin:0 0 2px 6px; padding:0; }
.checkin-list .ci-item { margin-bottom:7px; }
.state-sec.empty .state-head { opacity:.72; }
.state-sec.empty .state-head:hover { opacity:1; }

/* mobile tweaks for the new chrome */
@media (max-width:900px) {
  .hover-zoom { display:none !important; } /* no hover on touch devices */
  .tsbar .ts-ends span:last-child { display:none; }
  .state-hist { font-size:12px; }
  #view-map.active { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  #view-map #map { grid-column:1; grid-row:1; }
  #view-map #tsMap { grid-column:1; grid-row:2; }
  #view-map #rail { grid-column:1; }
}
body.rail-hidden #view-map.active .leaflet-control-attribution { display:none; }

/* ---------- campfire nights (from EXTRA INFO/caitlog.txt) ---------- */
.campfire {
  display:inline-flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); line-height:1;
}
.legend-fire { font-size:13px; }
.cf-badge {
  display:flex; align-items:center; gap:3px; padding:2px 7px 2px 4px;
  background:linear-gradient(180deg,#f0a53a,#d9781c); color:#fff; border:2px solid #fff; border-radius:14px;
  font:700 11px 'Expletus Sans',Arial,sans-serif; box-shadow:0 2px 7px rgba(0,0,0,.4); white-space:nowrap;
}
.cf-head { display:flex; align-items:center; gap:6px; font:700 12px 'Expletus Sans',Arial,sans-serif; color:var(--amber-deep); margin:0 0 2px; }
.cf-src { font-size:10.5px; color:var(--ink-soft); margin:5px 0 0; }
.leaflet-popup-content .chip { background:#eef0e6; }

/* ---------- comments (replacing the old single caption) ---------- */
.drawer-random { display:flex; justify-content:center; margin:0 0 16px; }
.cmt-list { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; }
.cmt { background:#faf7ef; border:1px solid var(--line); border-radius:10px; padding:8px 11px; }
.cmt-text { margin:0; font-family:'Viga','Expletus Sans',Arial,sans-serif; font-style:italic; font-size:13px; line-height:1.5; color:var(--ink); white-space:pre-line; }
.cmt-meta { display:flex; align-items:center; gap:10px; margin-top:4px; font-size:10.5px; color:var(--ink-soft); }
.cmt-del { margin-left:auto; background:none; border:0; padding:0; color:#a33420; font-size:10.5px; text-decoration:underline; cursor:pointer; }
.cmt-empty { font-family:'Viga','Expletus Sans',Arial,sans-serif; font-style:italic; font-size:12.5px; color:var(--ink-soft); }
.cmt-add { display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.cmt-add textarea { width:100%; }

/* ================= MOBILE (phones / small tablets) ================= */
.mobile-only { display:none; }
button, .tab, .ghost, .map-btn, .legend-head, a { touch-action:manipulation; }

@media (max-width:900px) {
  .mobile-only { display:inline-flex; }

  /* --- header: compact and never wider than the screen --- */
  :root { --topbar-h:54px; }
  #topbar { height:54px; gap:8px; padding:0 10px; padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  #topbar > * { min-width:0; }
  .brand { gap:7px; min-width:0; flex:0 1 auto; }
  .blaze { width:21px; height:21px; }
  .brand-text { min-width:0; overflow:hidden; }
  .brand-text h1 { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-text p { display:none; }
  .tabs { margin-left:auto; padding:3px; gap:3px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:0 1 auto; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { padding:8px 10px; font-size:12px; white-space:nowrap; min-height:40px; flex:0 0 auto; }
  .badge { font-size:10px; padding:0 5px; }
  .top-actions { margin-left:0; gap:4px; flex:0 0 auto; }
  .top-actions .ghost { padding:8px 10px; min-height:40px; font-size:12px; }

  /* --- thumb-sized controls, and 16px inputs so iOS doesn't zoom on focus --- */
  input[type=search], input[type=text], input[type=number], input[type=date], select, textarea { font-size:16px; min-height:42px; }
  .map-btn { padding:9px 12px; min-height:40px; }
  .legend-head { padding:12px; min-height:46px; }
  .drawer-close { width:44px; height:44px; font-size:24px; }

  /* --- the rail becomes a slide-in sheet with a scrim --- */
  #rail { width:min(360px,90vw); z-index:950; box-shadow:10px 0 30px rgba(0,0,0,.35); padding-bottom:env(safe-area-inset-bottom); }
  .rail-head { align-items:center; }
  .rail-close { width:40px; height:40px; font-size:22px; line-height:1; border:1px solid var(--line); background:#fff; border-radius:10px; color:var(--ink); }
  body.rail-open #map::after { content:""; position:absolute; inset:0; background:rgba(20,30,17,.35); z-index:900; pointer-events:none; }

  /* --- floating "States" button so the rail is reachable with the legend collapsed --- */
  .rail-fab {
    position:absolute; left:10px; top:96px; z-index:880;
    background:var(--green-700); color:#fff; border:0; border-radius:999px; padding:11px 15px;
    font:600 13px 'Expletus Sans',Arial,sans-serif; box-shadow:0 4px 14px rgba(0,0,0,.35);
  }
  .rail-fab:active { background:var(--green-600); }

  /* --- legend stays out of the way --- */
  .legend { left:10px; bottom:10px; max-width:min(232px,62vw); }
  .legend-body { max-height:34vh; overflow:auto; }

  /* --- timeline: fatter slider, safe-area aware --- */
  .tsbar { padding:7px 12px calc(7px + env(safe-area-inset-bottom)); gap:2px; }
  .tsbar .ts-top { gap:8px; min-width:0; }
  .tsbar input[type=range] { height:34px; min-width:0; }
  .tsbar input[type=range]::-webkit-slider-thumb { width:26px; height:26px; }
  .tsbar .ts-date { min-width:0; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tsbar .ts-mile { font-size:10.5px; }
  .tsbar .ts-ends { font-size:10px; }

  /* --- scrubbing shows the preview on phones too (compact card) --- */
  .ts-preview { display:block; width:92vw; left:50%; bottom:104px; transform:translateX(-50%); }
  .ts-preview img { height:30vh; }
  .ts-preview .tp-meta { padding:7px 11px 8px; gap:8px; font-size:11.5px; }

  /* --- gallery: two-up grid, full-width controls --- */
  .toolbar { padding:10px 12px; gap:8px; }
  .tool-group { width:100%; gap:8px; }
  .tool-group input[type=search] { width:100%; flex:1 1 100%; }
  .tool-group select { flex:1 1 44%; min-width:0; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; padding:12px; }
  .grid.small { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
  .card .cap { padding:8px 9px 9px; }
  .card .cap .t { font-size:11.5px; }

  /* --- photo drawer: full-width, readable, photo capped --- */
  .drawer-panel { width:100vw; }
  #drawerBody { padding:14px 13px 32px; }
  .detail { grid-template-columns:1fr; gap:14px; }
  .detail .photo-side .ph { max-height:46vh; object-fit:contain; background:#101010; }
  .detail h2 { font-size:19px; margin-right:52px; }
  .panel { padding:12px 13px; }
  .panel dl { gap:4px 10px; font-size:12px; }
  .drawer-random { position:sticky; top:0; z-index:4; padding:8px 0 10px; margin:0 0 6px; background:linear-gradient(180deg,var(--paper) 72%,rgba(247,244,236,0)); }

  /* --- check-in / edit modal --- */
  .modal-card { width:96vw; max-height:94vh; padding:16px 14px; }
  .form-grid { grid-template-columns:1fr; gap:8px; }
  .pick-grid { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); max-height:38vh; gap:6px; }
  .actions { flex-wrap:wrap; gap:8px; }

  /* --- footer --- */
  #foot { font-size:10px; padding:6px 12px calc(6px + env(safe-area-inset-bottom)); gap:6px; }
  #foot span:last-child { display:none; }
  .state-hist { font-size:12px; }
}

@media (max-width:400px) {
  .brand-text h1 { font-size:15px; }
  .tab { padding:8px; font-size:11.5px; }
  .badge { display:none; }
  .tsbar .ts-mile { display:none; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
  .legend { max-width:min(210px,66vw); }
}