/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#faf6f0; --bg-alt:#f2ebe1;
  --surface:#ffffff; --surface-2:#f6f0e7;
  --text:#221e1a; --text-2:#5d5348; --text-3:#8d8175;
  --line:#e4dacc; --line-2:#d3c5b2;
  --accent:#b0472b; --accent-soft:#f6e5de; --accent-line:#e2b8a8;
  --gold:#95681a; --gold-soft:#f7eeda;
  --green:#3f6b45; --green-soft:#e4efe3;
  --warn:#8a5a12; --warn-soft:#fbeed7;
  --shadow:0 1px 2px rgba(60,40,20,.06), 0 6px 20px rgba(60,40,20,.07);
  --shadow-lg:0 2px 6px rgba(60,40,20,.10), 0 18px 48px rgba(60,40,20,.16);
  --r:14px; --r-sm:9px;
  --nav-h:calc(56px + env(safe-area-inset-bottom,0px));
  --map-flavor:light;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15110e; --bg-alt:#1b1613;
    --surface:#1f1a16; --surface-2:#272019;
    --text:#f0e8de; --text-2:#b6a898; --text-3:#8b7f72;
    --line:#332a22; --line-2:#443830;
    --accent:#e08159; --accent-soft:#33211a; --accent-line:#5c3a2b;
    --gold:#d6a24a; --gold-soft:#2e2415;
    --green:#8ab88f; --green-soft:#1e2a1f;
    --warn:#d9a34e; --warn-soft:#2d2314;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.55);
    --map-flavor:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overscroll-behavior-y:none}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--accent)}

/* ---------------------------------------------------------------- shell */
#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.screens{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:none;padding-bottom:24px}
.screen.on{display:block}
.screen.nopad{padding-bottom:0;overflow:hidden}

/* ---------------------------------------------------------------- header */
.hdr{
  padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 14px;
  border-bottom:1px solid var(--line);background:var(--bg-alt);
}
.hdr h1{margin:0;font:600 22px/1.2 var(--serif);letter-spacing:-.01em}
.hdr p{margin:5px 0 0;color:var(--text-2);font-size:13.5px}
.hdr .meta{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  padding:4px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);
}
.pill.ok{background:var(--green-soft);color:var(--green);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pill.gold{background:var(--gold-soft);color:var(--gold);border-color:transparent}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------------------------------------------------------------- nav */
nav{
  height:var(--nav-h);flex:none;display:flex;
  border-top:1px solid var(--line);background:var(--bg-alt);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
nav button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--text-3);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  padding-top:2px;
}
nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav button.on{color:var(--accent)}

/* ---------------------------------------------------------------- sections */
.sec{padding:20px 20px 4px}
.sec h2{
  margin:0 0 12px;font:600 12px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);
}

/* ---------------------------------------------------------------- timeline */
.tl{padding:6px 20px 20px;position:relative}
.tl:before{content:"";position:absolute;left:57px;top:14px;bottom:26px;width:1.5px;background:var(--line)}
.tlrow{display:flex;gap:14px;padding:7px 0;position:relative}
.tlrow .t{width:44px;flex:none;text-align:right;font:600 12.5px/1.5 var(--sans);color:var(--text-3);padding-top:11px;font-variant-numeric:tabular-nums}
.tlrow .node{
  position:relative;z-index:1;width:12px;flex:none;display:flex;justify-content:center;padding-top:16px;
}
.tlrow .node i{
  width:11px;height:11px;border-radius:50%;background:var(--bg-alt);
  border:2px solid var(--line-2);display:block;
}
.tlrow.stop .node i{background:var(--accent);border-color:var(--accent)}
.tlrow .card{
  flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--shadow);text-align:left;width:100%;
}
.tlrow.drive .card{background:transparent;border-style:dashed;box-shadow:none}
.tlrow .card b{display:block;font:600 15.5px/1.3 var(--sans);letter-spacing:-.005em}
.tlrow .card span{display:block;margin-top:4px;color:var(--text-2);font-size:13px;line-height:1.45}
.tlrow.stop .card{position:relative;padding-right:32px}
.tlrow.stop .card:after{
  content:"";position:absolute;right:13px;top:50%;margin-top:-4px;
  width:7px;height:7px;border-right:1.8px solid var(--text-3);border-top:1.8px solid var(--text-3);
  transform:rotate(45deg);
}

/* ---------------------------------------------------------------- list */
.list{padding:4px 20px 20px;display:flex;flex-direction:column;gap:11px}
.item{
  display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--shadow);
}
.item .ico{
  width:38px;height:38px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  background:var(--surface-2);
}
.item.k-site .ico{background:var(--accent-soft)}
.item.k-food .ico{background:var(--gold-soft)}
.item.k-shop .ico{background:var(--green-soft)}
.item .txt{flex:1;min-width:0}
.item .txt b{display:block;font:600 16px/1.25 var(--sans);letter-spacing:-.01em}
.item .txt em{display:block;font-style:normal;color:var(--text-3);font-size:12.5px;margin-top:2px}
.item .txt span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.45;margin-top:7px}
.item .txt .tags{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}

/* ---------------------------------------------------------------- map */
.mapwrap{position:absolute;inset:0}
.mapwrap .map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-ctrl-bottom-right{margin-bottom:2px}

.mapctl{
  position:absolute;right:12px;bottom:calc(16px + 34px);z-index:5;
  display:flex;flex-direction:column;gap:8px;
}
.mapctl button{
  width:44px;height:44px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;color:var(--text);
}
.mapctl button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mapctl button.live{color:var(--accent)}
.mapctl button.live svg{fill:var(--accent-soft)}

/* map markers */
.mk{
  display:flex;align-items:center;justify-content:center;
  font:700 12px/1 var(--sans);color:#fff;cursor:pointer;
  width:27px;height:27px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,.34);
}
.mk span{transform:rotate(45deg)}
.mk.site{background:#b0472b}
.mk.food{background:#95681a}
.mk.shop{background:#3f6b45}
.mk.skip{background:#8d8175}
.mk.sel{width:34px;height:34px;font-size:14px;z-index:3;box-shadow:0 3px 12px rgba(0,0,0,.42)}
.mk.pt{border-radius:50%;width:26px;height:26px;transform:none;background:#b0472b}
.mk.pt span{transform:none}
.mk.pt.sel{width:34px;height:34px;background:#8a3320}
.mk.pt.approx{background:#8d8175}

.gps{width:18px;height:18px;border-radius:50%;background:#1d7fe0;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.35)}
.gps.stale{background:#8d8175}

/* map bottom card */
.mapcard{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:6;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:14px 15px;
  transform:translateY(calc(100% + 20px));transition:transform .24s cubic-bezier(.32,.72,0,1);
  text-align:left;
}
.mapcard.on{transform:none}
.mapcard b{display:block;font:600 16.5px/1.25 var(--sans);padding-right:30px;letter-spacing:-.01em}
.mapcard em{font-style:normal;color:var(--text-3);font-size:12.5px}
.mapcard p{margin:8px 0 0;color:var(--text-2);font-size:13.5px;line-height:1.5}
.mapcard .row{margin-top:12px;display:flex;gap:8px}
.mapcard .row button{
  flex:1;padding:9px;border-radius:10px;font-size:13.5px;font-weight:600;
  background:var(--accent);color:#fff;
}
.mapcard .row button.sub{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.mapcard .x{position:absolute;right:8px;top:8px;width:30px;height:30px;font-size:19px;color:var(--text-3);line-height:1}

/* ---------------------------------------------------------------- detail */
.detail{position:absolute;inset:0;z-index:20;background:var(--bg);display:none;flex-direction:column}
.detail.on{display:flex}
.dhdr{
  flex:none;display:flex;align-items:center;gap:6px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;
  background:var(--bg-alt);border-bottom:1px solid var(--line);
}
.dhdr .back{display:flex;align-items:center;gap:3px;padding:7px 9px 7px 4px;font-size:15px;font-weight:600;color:var(--accent)}
.dhdr .back svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dhdr .ttl{flex:1;min-width:0;font:600 15px/1.2 var(--sans);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:58px}
.dbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:30px}

.dmap{position:relative;height:44vh;min-height:260px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dmap .map{position:absolute;inset:0}
.dmap .mapctl{bottom:12px}

.dintro{padding:20px 20px 0}
.dintro h2{margin:0;font:600 26px/1.15 var(--serif);letter-spacing:-.015em}
.dintro .tr{margin:4px 0 0;color:var(--text-3);font-size:13.5px;font-style:italic}
.dintro .blurb{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--text-2)}
.dintro .tags{margin-top:13px;display:flex;gap:6px;flex-wrap:wrap}

.facts{margin:18px 20px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.facts div{display:flex;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}
.facts div:first-child{border-top:0}
.facts div b{flex:none;width:74px;color:var(--text-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.facts div span{flex:1;color:var(--text)}

.prose{padding:0 20px}
.prose p{margin:14px 0 0;font-size:15.5px;line-height:1.62;color:var(--text)}
.prose p:first-child{margin-top:16px}

.tipbox{margin:20px 20px 0;background:var(--gold-soft);border-radius:var(--r);padding:14px 16px}
.tipbox h3{margin:0 0 9px;font:600 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.tipbox ul{margin:0;padding:0;list-style:none}
.tipbox li{position:relative;padding-left:16px;margin-top:8px;font-size:14px;line-height:1.5;color:var(--text)}
.tipbox li:first-child{margin-top:0}
.tipbox li:before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6}

/* numbered points */
.pts{padding:24px 20px 0;display:flex;flex-direction:column;gap:11px}
.pt{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);scroll-margin-top:12px;
}
.pt.sel{border-color:var(--accent-line);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}
.pt>.top{display:flex;gap:12px;align-items:flex-start;padding:14px;width:100%;text-align:left}
.pt .num{
  width:27px;height:27px;flex:none;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--sans);margin-top:1px;
}
.pt.approxpt .num{background:var(--text-3)}
.pt .hd{flex:1;min-width:0}
.pt .hd b{display:block;font:600 16px/1.25 var(--sans);letter-spacing:-.01em}
.pt .hd em{display:block;font-style:italic;color:var(--text-3);font-size:12.5px;margin-top:2px}
.pt .hd .tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.pt .chev{width:9px;height:9px;flex:none;margin-top:10px;border-right:1.8px solid var(--text-3);border-bottom:1.8px solid var(--text-3);transform:rotate(45deg);transition:transform .18s}
.pt.open .chev{transform:rotate(-135deg);margin-top:13px}
.pt .body{display:none;padding:0 14px 15px 53px}
.pt.open .body{display:block}
.pt .body p{margin:0 0 11px;font-size:14.5px;line-height:1.6;color:var(--text)}
.pt .body p:last-child{margin-bottom:0}
.pt .look{margin-top:13px;background:var(--surface-2);border-radius:var(--r-sm);padding:11px 13px}
.pt .look h4{margin:0 0 7px;font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.pt .look li{list-style:none;position:relative;padding-left:17px;margin-top:6px;font-size:13.5px;line-height:1.45}
.pt .look li:first-child{margin-top:0}
.pt .look li:before{
  content:"";position:absolute;left:0;top:5px;width:9px;height:9px;
  border:1.6px solid var(--accent);border-radius:50%;opacity:.75;
}
.pt .look ul{margin:0;padding:0}
.pt .go{
  display:block;width:calc(100% - 53px - 14px);margin:13px 0 0 0;padding:9px;
  border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--text-2);text-align:center;
}

/* picks (food / shops) */
.picks{padding:22px 20px 0;display:flex;flex-direction:column;gap:11px}
.pick{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--shadow);text-align:left;width:100%;
}
.pick.warn{background:var(--surface-2);border-style:dashed;box-shadow:none}
.pick .r1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pick b{font:600 16px/1.25 var(--sans);letter-spacing:-.01em}
.pick p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--text-2)}
.pick .r2{margin-top:11px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pick .r2 a,.pick .r2 button{
  padding:7px 12px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;display:inline-block;
}

/* reference */
.ref{padding:4px 20px 0}
.ref .blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.ref .blk h3{margin:0 0 11px;font:600 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.ref .blk p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--text)}
.ref .blk p:last-child{margin-bottom:0}
.ref .blk li{list-style:none;position:relative;padding-left:15px;margin-bottom:8px;font-size:14px;line-height:1.5}
.ref .blk li:last-child{margin-bottom:0}
.ref .blk li:before{content:"";position:absolute;left:1px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--text-3);opacity:.5}
.ref .blk ul{margin:0;padding:0}
.leg{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;align-items:baseline}
.leg:first-of-type{border-top:0;padding-top:0}
.leg b{flex:none;width:118px;font-weight:600}
.leg i{flex:none;width:86px;font-style:normal;color:var(--accent);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.leg span{flex:1;color:var(--text-2);font-size:13px}
.phr{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.phr:first-of-type{border-top:0;padding-top:0}
.phr b{flex:none;width:46%;font-weight:600}
.phr span{flex:1;color:var(--text-2)}

/* ---------------------------------------------------------------- misc */
.boot{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:36px;text-align:center;
}
.boot.done{display:none}
.boot h1{margin:0;font:600 21px/1.25 var(--serif)}
.boot p{margin:0;color:var(--text-2);font-size:14px;max-width:300px;line-height:1.5}
.bar{width:190px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:8%;background:var(--accent);border-radius:3px;transition:width .3s}

.foot{padding:26px 20px 10px;color:var(--text-3);font-size:11.5px;line-height:1.55;text-align:center}
.foot a{color:var(--text-3)}

/* ---------------------------------------------------------------- install */
.install{
  margin:16px 20px 0;background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r);padding:15px 16px;
}
.install h3{margin:0 0 10px;font:600 11.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.install ol{margin:0;padding-left:19px}
.install li{margin-bottom:7px;font-size:14px;line-height:1.5;color:var(--text)}
.install li:last-child{margin-bottom:0}
.install b{font-weight:600}
.install .done{
  margin-top:13px;width:100%;padding:9px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:600;
}