:root{
  --bg:#fffaf2;
  --card:#ffffff;
  --ink:#241a16;
  --muted:#786c65;
  --accent:#a33a1f;
  --accent2:#e8a24a;
  --line:#eadfd5;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(255,250,242,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.1rem}.subbrand{font-size:.78rem;color:var(--muted)}
main{max-width:760px;margin:auto;padding:18px}
.hero{padding:28px 20px;border-radius:24px;background:linear-gradient(135deg,#fff3dd,#fde6dc);border:1px solid var(--line)}
.eyebrow{font-size:.75rem;letter-spacing:.12em;font-weight:800;color:var(--accent)}
h1{font-size:2rem;line-height:1.08;margin:.5rem 0}.tagline{font-size:1.08rem;color:var(--muted)}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.meta span{background:#fff8;padding:8px 10px;border-radius:999px;font-size:.88rem}
button,.ghost-link{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;text-decoration:none}
.primary{background:var(--accent);color:#fff}.secondary{background:#f2e9e3;color:var(--ink)}.ghost{background:transparent;border:1px solid var(--line)}.ghost-link{border:1px solid var(--line);color:var(--ink)}
.progress-wrap{margin:24px 0}.progress-label{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:8px}.progress{height:10px;background:#eee3da;border-radius:20px;overflow:hidden}.progress>div{height:100%;width:0;background:var(--accent2);transition:.2s}
h2{margin-top:28px}
.map-placeholder{padding:18px;border-radius:18px;background:#efe5d7;border:1px dashed #b79f8f}.map-title{font-weight:700;margin-bottom:12px}.map-route{display:flex;gap:8px;flex-wrap:wrap}.map-chip{background:#fff;padding:8px 10px;border-radius:999px;font-size:.82rem}
.stop-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin:14px 0;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.stop-head{display:flex;gap:12px;align-items:flex-start}.number{min-width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800}
.name{margin:0;font-size:1.12rem}.subtitle{margin:.25rem 0;color:var(--muted)}
.story-block{margin:16px 0;padding:14px;background:#fff7ed;border-radius:14px}.lio{font-size:.72rem;font-weight:900;letter-spacing:.12em;color:var(--accent)}.story-title{margin:.45rem 0}.story{color:#514740;line-height:1.55}.audio-btn{opacity:.65}
details{border-top:1px solid var(--line);padding:11px 0}summary{font-weight:700;cursor:pointer}details p{color:var(--muted);line-height:1.5}
.actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.completed{opacity:.68}.completed .number{background:#567b55}.completed .complete{background:#dcebd9}
@media (max-width:520px){h1{font-size:1.65rem}.actions{flex-direction:column}.actions>*{text-align:center}}

.map-live{height:390px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#eee}
.map-tools{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.map-note{font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:8px}
.lt-marker{background:var(--accent);color:#fff;border:3px solid #fff;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-weight:900;box-shadow:0 2px 8px #0004}
.leaflet-popup-content-wrapper{border-radius:14px}
.popup-title{font-weight:800;margin-bottom:3px}.popup-sub{font-size:.82rem;color:#6d625c}
.user-dot{width:18px;height:18px;background:#2463eb;border:3px solid white;border-radius:50%;box-shadow:0 0 0 5px #2463eb33}
@media (max-width:520px){.map-live{height:340px}.map-tools button{flex:1}}

.section-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.route-status{font-size:.75rem;padding:6px 9px;border-radius:999px;background:#efe6dc;color:var(--muted);white-space:nowrap}
.route-status.live{background:#dfeedd;color:#315f31}
.route-status.fallback{background:#fff1d6;color:#805d19}
.route-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.route-summary>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.route-summary strong{display:block;font-size:1.15rem}.route-summary span{font-size:.72rem;color:var(--muted)}
.legs-heading{font-size:1rem;margin:18px 0 8px}
.legs{display:grid;gap:8px}
.leg{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:14px}
.leg-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff2df}
.leg-name{font-weight:750;font-size:.86rem}.leg-story{font-size:.75rem;color:var(--muted);margin-top:2px}
.leg-stats{text-align:right;font-size:.78rem;color:var(--muted);white-space:nowrap}
.start-marker{width:34px;height:34px;background:#315f31;border:3px solid white;border-radius:50%;display:grid;place-items:center;color:white;font-weight:900;box-shadow:0 2px 8px #0004}
.snack-marker{width:34px;height:34px;background:#8a5c2f;border:3px solid white;border-radius:50%;display:grid;place-items:center;color:white;box-shadow:0 2px 8px #0004}
@media(max-width:520px){.route-summary{grid-template-columns:1fr 1fr 1fr}.route-summary strong{font-size:1rem}.route-summary span{font-size:.66rem}.leg{grid-template-columns:32px 1fr}.leg-stats{grid-column:2;text-align:left}}

.mode-tabs{display:flex;gap:6px;margin:10px 0 12px}.mode{padding:7px 10px;border-radius:999px;background:#f1e6da;color:var(--ink);font-size:.75rem}.mode.active{background:var(--accent);color:white}.story{white-space:pre-line}

/* ==================================================
   LT EXPLORE — CONTINUOUS JOURNEY TIMELINE
   Connect walking legs and destination stops visually
   ================================================== */

.journey-stop-slot{
  position:relative;
  margin:0 0 14px 0;
  padding-left:18px;
  border-left:3px solid #eadfd5;
}

.journey-stop-slot .stop-card{
  margin:0;
}

.leg{
  position:relative;
  border-left:4px solid var(--accent2);
}

.leg::after{
  content:"";
  position:absolute;
  left:15px;
  bottom:-9px;
  width:3px;
  height:9px;
  background:var(--line);
}

.journey-active{
  border-color:var(--accent);
  box-shadow:0 8px 26px rgba(163,58,31,.14);
}

.journey-active .number{
  box-shadow:0 0 0 5px rgba(163,58,31,.10);
}

@media(max-width:520px){
  .journey-stop-slot{
    padding-left:10px;
  }
}

/* ==================================================
   LIO STORY MODE + LIVE NARRATION
   ================================================== */

.mode-tabs{
  display:flex;
  gap:8px;
  margin:10px 0 12px;
}

.mode{
  padding:8px 14px;
  border-radius:999px;
  background:#f1e6da;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  border:1px solid #eadfd5;
  transition:.18s ease;
}

.mode.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  font-weight:800;
  box-shadow:0 3px 10px rgba(163,58,31,.18);
}

.story-block > .audio-btn{
  display:block;
  width:100%;
  margin:4px 0 12px;
  opacity:1;
  background:var(--accent);
  color:#fff;
}

.story-block > .audio-btn:disabled{
  opacity:.55;
}

.lio-speaking{
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  min-height:76px;
}

.lio-speaking-label{
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.1em;
  color:var(--accent);
  margin-bottom:6px;
}

.lio-transcript{
  margin:0;
  line-height:1.55;
  font-size:.96rem;
  color:var(--ink);
}
/* Active journey position */
.leg.journey-active .eyebrow{
  color:#315f31;
}

/* GPS confirmed arrival */
.journey-arrived{
  border-color:#2f7d32;
  box-shadow:0 8px 26px rgba(47,125,50,.16);
}

.journey-arrived .arrival-label{
  color:#2f7d32;
  font-weight:800;
  margin-bottom:8px;
}