/* Ghost Tour Live v2 — DGT Tour Companion
   Palette: night slate / parchment / candlelight gold */
.gtl-app{
  --ink:#0B0D15; --card:#131722; --card2:#0E1119; --line:#252B3C;
  --bone:#EDE7DA; --mist:#98A0B4; --candle:#D9A24B; --candle-dim:#8a6a33;
  --r:16px;
  background:var(--ink); color:var(--bone);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  font-size:16px; line-height:1.55;
  max-width:1200px; margin:0 auto;
  min-height:60vh; position:relative;
  padding-bottom:76px; /* room for tab bar */
  overflow-x:hidden;
}
.gtl-app *{ box-sizing:border-box; max-width:100%; }
.gtl-app h1,.gtl-app h2,.gtl-app h3{ color:var(--bone); }

/* ---------- Top bar ---------- */
.gtl-top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:linear-gradient(180deg, rgba(11,13,21,.97), rgba(11,13,21,.88));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.gtl-kicker{
  display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--candle); font-weight:600;
}
.gtl-tour-name{
  margin:2px 0 0; font-family:Cinzel,Georgia,serif; font-weight:700;
  font-size:clamp(18px, 4.6vw, 26px); line-height:1.15; letter-spacing:.01em;
}
.gtl-guide-slot{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.gtl-guide-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--card2); border:1px solid var(--line); border-radius:999px;
  padding:5px 14px 5px 6px;
}
.gtl-guide-chip img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--candle);
}
.gtl-guide-chip .gtl-gname{ font-size:13px; line-height:1.2; }
.gtl-guide-chip .gtl-gname small{ display:block; color:var(--mist); font-size:11px; }
.gtl-live-dot{
  width:9px; height:9px; border-radius:50%; background:var(--candle);
  box-shadow:0 0 0 0 rgba(217,162,75,.55); flex:0 0 auto;
  animation:gtl-pulse 2.2s ease-out infinite;
}
@keyframes gtl-pulse{
  0%{ box-shadow:0 0 0 0 rgba(217,162,75,.55); }
  70%{ box-shadow:0 0 0 10px rgba(217,162,75,0); }
  100%{ box-shadow:0 0 0 0 rgba(217,162,75,0); }
}
.gtl-offline-chip{
  font-size:12px; color:var(--mist); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; background:var(--card2); white-space:nowrap;
}

/* ---------- Panels ---------- */
.gtl-panels{ padding:14px 14px 0; }
.gtl-panel{ display:none; }
.gtl-panel.is-active{ display:block; animation:gtl-fadein .25s ease both; }
@keyframes gtl-fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* Map */
.gtl-panel-map{ position:relative; }
.gtl-map{
  height:min(62vh, 560px); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--card2);
}
.gtl-map .leaflet-container{ background:#0d0f17; }
.gtl-locate{
  position:absolute; right:12px; bottom:12px; z-index:20;
  background:var(--card); color:var(--bone); border:1px solid var(--line);
  border-radius:999px; padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.gtl-pin{
  width:28px; height:28px; border-radius:50%;
  background:var(--card); border:2px solid var(--mist); color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.gtl-pin.is-visited{ border-color:var(--candle); color:var(--candle); box-shadow:0 0 10px rgba(217,162,75,.5); }
.gtl-pin.is-guide{ border-color:var(--candle); background:var(--candle); color:#1a1408; }

/* ---------- Séance rail (signature) ---------- */
.gtl-rail{ display:flex; align-items:center; gap:0; padding:6px 4px 14px; }
.gtl-rail-seg{ flex:1; height:2px; background:var(--line); position:relative; }
.gtl-rail-seg.is-lit{ background:var(--candle-dim); }
.gtl-rail-dot{
  flex:0 0 auto; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid var(--line);
  transition:border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.gtl-rail-dot.is-lit{ border-color:var(--candle); background:var(--candle); box-shadow:0 0 8px rgba(217,162,75,.7); }
.gtl-rail-dot.is-current{ border-color:var(--candle); animation:gtl-pulse 2.2s ease-out infinite; }
.gtl-rail-label{
  text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); margin:-6px 0 10px;
}
.gtl-rail-label b{ color:var(--candle); font-weight:700; }

/* ---------- Stop deck ---------- */
.gtl-track{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth; gap:12px; padding-bottom:6px;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.gtl-track::-webkit-scrollbar{ display:none; }
.gtl-slide{
  flex:0 0 100%; scroll-snap-align:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; min-width:0;
}
.gtl-stop-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.gtl-stop-no{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--candle);
  font-weight:700; white-space:nowrap;
}
.gtl-stop-title{
  margin:0 0 10px; font-family:Cinzel,Georgia,serif; font-weight:600;
  font-size:clamp(19px, 5vw, 24px); line-height:1.2;
}
.gtl-dist-chip{
  font-size:12px; color:var(--mist); border:1px solid var(--line); border-radius:999px;
  padding:3px 10px; background:var(--card2); white-space:nowrap;
}
.gtl-dist-chip.is-near{ color:var(--candle); border-color:var(--candle-dim); }

.gtl-main-media{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--card2);
  aspect-ratio:4/3;
}
.gtl-main-media img{
  width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
}
.gtl-main-media iframe, .gtl-main-media video{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:#000;
}
.gtl-caption{ margin-top:8px; color:var(--mist); font-size:14px; min-height:1.2em; }

.gtl-thumbs{ display:flex; gap:8px; overflow-x:auto; padding:10px 2px 4px; scrollbar-width:none; }
.gtl-thumbs::-webkit-scrollbar{ display:none; }
.gtl-thumb{
  flex:0 0 auto; width:68px; height:52px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--card2); cursor:pointer; position:relative; padding:0;
}
.gtl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gtl-thumb.is-active{ outline:2px solid var(--candle); outline-offset:-2px; }
.gtl-thumb .gtl-mtag{
  position:absolute; right:4px; bottom:4px; font-size:9px; font-weight:700;
  padding:2px 5px; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; letter-spacing:.06em;
}
.gtl-thumb-audio{
  display:flex; align-items:center; justify-content:center; color:var(--candle); font-size:20px;
}
.gtl-audio-wrap{ margin-top:10px; }
.gtl-audio-wrap audio{ width:100%; }

.gtl-excerpt{ color:var(--bone); font-size:15px; margin:12px 0 0; }

/* actions */
.gtl-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.gtl-btn{
  appearance:none; border:1px solid var(--line); background:var(--card2); color:var(--bone);
  border-radius:12px; padding:11px 14px; font-size:14px; font-weight:600; cursor:pointer;
  flex:1 1 auto; min-height:44px;
}
.gtl-btn:active{ transform:translateY(1px); }
.gtl-btn-gold{ background:var(--candle); border-color:var(--candle); color:#1a1408; }
.gtl-btn-visited{ border-color:var(--candle-dim); color:var(--candle); }
.gtl-btn[disabled]{ opacity:.5; cursor:default; }

/* transcript */
.gtl-tx{ margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--card2); overflow:hidden; }
.gtl-tx > summary{
  list-style:none; cursor:pointer; padding:11px 14px; font-weight:600; font-size:14px;
  color:var(--bone); display:flex; align-items:center; gap:8px;
}
.gtl-tx > summary::-webkit-details-marker{ display:none; }
.gtl-tx > summary:after{ content:'▾'; margin-left:auto; color:var(--mist); transition:transform .15s ease; }
.gtl-tx[open] > summary:after{ transform:rotate(180deg); }
.gtl-tx-body{ padding:0 14px 14px; color:var(--bone); font-size:15px; line-height:1.65; white-space:pre-wrap; }

/* nav under deck */
.gtl-deck-nav{ display:flex; gap:10px; margin-top:12px; }
.gtl-deck-nav .gtl-btn{ flex:1; }

/* finale */
.gtl-finale{ text-align:center; padding:28px 18px; }
.gtl-finale-emblem{ font-size:34px; margin-bottom:10px; }
.gtl-finale h3{
  font-family:Cinzel,Georgia,serif; font-size:clamp(20px,5vw,26px); margin:0 0 8px; color:var(--candle);
}
.gtl-finale p{ color:var(--mist); margin:0 0 18px; }
.gtl-finale .gtl-actions{ flex-direction:column; }
.gtl-finale .gtl-btn{ width:100%; }

/* nearest-stop banner */
.gtl-near-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card2); border:1px solid var(--candle-dim); border-radius:12px;
  padding:10px 14px; margin-bottom:12px; font-size:14px;
}
.gtl-near-banner button{
  background:none; border:none; color:var(--candle); font-weight:700; cursor:pointer; font-size:14px; padding:6px;
}

/* ---------- Embed cards (Listen / Photos) ---------- */
.gtl-embed-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px;
}
.gtl-embed-title{ font-family:Cinzel,Georgia,serif; margin:0 0 4px; font-size:20px; }
.gtl-embed-sub{ color:var(--mist); margin:0 0 14px; font-size:14px; }

/* ---------- Tab bar ---------- */
.gtl-tabs{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:max(10px, env(safe-area-inset-bottom)); z-index:40;
  display:flex; gap:4px;
  background:rgba(14,17,25,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px; padding:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  width:max-content; max-width:calc(100% - 20px);
}
.gtl-tab{
  appearance:none; border:none; background:none; color:var(--mist);
  border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:7px; white-space:nowrap; min-height:42px;
}
.gtl-tab-ic{ font-size:15px; line-height:1; }
.gtl-tab.is-active{ background:var(--candle); color:#1a1408; }

/* ---------- Skeleton ---------- */
.gtl-deck-skeleton{ padding:4px 0; }
.gtl-sk-rail,.gtl-sk-img,.gtl-sk-line{
  background:linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size:200% 100%; animation:gtl-shimmer 1.4s infinite; border-radius:10px;
}
.gtl-sk-rail{ height:12px; margin-bottom:16px; }
.gtl-sk-img{ aspect-ratio:4/3; margin-bottom:12px; border-radius:14px; }
.gtl-sk-line{ height:14px; margin-bottom:8px; }
.gtl-sk-line.short{ width:55%; }
@keyframes gtl-shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }
.gtl-empty{ padding:32px; text-align:center; color:var(--mist); }

/* ---------- Lightbox ---------- */
.gtl-lightbox{
  position:fixed; inset:0; background:rgba(5,6,10,.93); z-index:99999;
  display:none; align-items:center; justify-content:center; padding:16px; flex-direction:column; gap:10px;
}
.gtl-lightbox.is-open{ display:flex; }
.gtl-lightbox img{
  max-width:100%; max-height:84vh; border-radius:12px; transform-origin:center; cursor:zoom-in;
}
.gtl-lightbox-cap{ color:var(--bone); font-size:14px; text-align:center; }
.gtl-lightbox-x{
  position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* ---------- Guide console ---------- */
.gtl-console-app{ padding:18px; border-radius:var(--r); }
.gtl-console{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; max-width:480px; margin:0 auto;
}
.gtl-console h2{ font-family:Cinzel,Georgia,serif; margin:0 0 14px; }
.gtl-console label{ display:block; font-size:13px; color:var(--mist); margin:12px 0 4px; }
.gtl-console input, .gtl-console select{
  width:100%; background:var(--card2); color:var(--bone); border:1px solid var(--line);
  border-radius:10px; padding:12px; font-size:16px;
}
.gtl-console .gtl-actions{ margin-top:18px; }
.gtl-status-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; color:var(--mist);
}
.gtl-status-chip.is-live{ color:var(--candle); border-color:var(--candle-dim); }

/* ---------- Desktop ---------- */
@media (min-width:1024px){
  .gtl-app{ padding-bottom:24px; }
  .gtl-panels{
    display:grid; grid-template-columns:minmax(340px, 1fr) minmax(480px, 1.3fr); gap:16px; align-items:start;
  }
  .gtl-panel-map{ display:block !important; position:sticky; top:84px; }
  .gtl-panel{ grid-column:2; }
  .gtl-panel-map{ grid-column:1; grid-row:1 / span 6; }
  .gtl-tabs{ position:sticky; bottom:auto; top:auto; transform:none; left:auto; margin:0 14px 14px; }
  .gtl-tab-map{ display:none; }
  .gtl-map{ height:calc(100vh - 130px); max-height:760px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gtl-app *, .gtl-app *::before, .gtl-app *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
  .gtl-track{ scroll-behavior:auto; }
}

/* focus visibility */
.gtl-app button:focus-visible, .gtl-app summary:focus-visible, .gtl-app a:focus-visible{
  outline:2px solid var(--candle); outline-offset:2px;
}