:root {
  --pine: #1f3d2b; --pine-deep: #16291d; --pine-soft: #2c5238;
  --clay: #c2622d; --clay-bright: #e07a37;
  --sand: #f3ead8; --cream: #fbf6ec; --ink: #2b2b26; --ink-soft: #5b5a50;
  --panel-w: 360px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Outfit', system-ui, sans-serif; color: var(--ink);
  overflow: hidden;
}

/* Map fills the screen behind the panel. */
#map { position: fixed; inset: 0; z-index: 1; background: #aacbb0; }

/* Map legend (top-right) */
.legend {
  position: fixed; top: 14px; right: 14px; z-index: 1100;
  background: rgba(22,41,29,.92); color: var(--cream); border: 1px solid rgba(243,234,216,.2);
  border-radius: 11px; font-family: 'Outfit', sans-serif; font-size: .8rem; box-shadow: 0 8px 22px rgba(0,0,0,.35);
  max-width: 270px;
}
.legend > summary { cursor: pointer; padding: 9px 13px; font-weight: 600; list-style: none; }
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary::before { content: 'ⓘ '; opacity: .8; }
.legend__body { padding: 4px 13px 12px; display: flex; flex-direction: column; gap: 7px; }
.legend__row { display: flex; align-items: center; gap: 9px; }
.lg-line { width: 26px; height: 0; flex: 0 0 auto; border-top-width: 4px; border-top-style: solid; border-radius: 2px; }
.lg-line--route { border-top-color: var(--clay); }
.lg-line--next { border-top-color: var(--clay); border-top-style: dashed; }
.lg-line--red { border-top-color: #e23b3b; }
.lg-pin { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px rgba(194,98,45,.35); }
.lg-stop { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--clay); color: #fff; font-size: .68rem; font-weight: 700; }
.lg-stop--done { background: #3f7d4f; }
@media (max-width: 640px) { .legend { top: 10px; right: 10px; font-size: .76rem; } }

/* ---- Side panel ---- */
.panel {
  position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; width: var(--panel-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--pine) 0%, var(--pine-deep) 100%);
  color: var(--cream); box-shadow: 6px 0 28px rgba(0,0,0,.28);
}
/* faint topographic texture */
.panel::before {
  content: ""; position: absolute; inset: 0; opacity: .10; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 20% 12%, transparent 0 34px, rgba(243,234,216,.5) 34px 35px);
}
/* faint mountain-range silhouette along the panel base */
.panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0;
  pointer-events: none; opacity: .5;
  background: bottom / cover no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 90' preserveAspectRatio='none'><path d='M0 90 L0 54 L46 22 L78 46 L120 8 L162 50 L210 18 L252 52 L300 26 L336 48 L360 34 L360 90 Z' fill='%2316291d'/><path d='M0 90 L0 66 L60 40 L104 62 L150 34 L200 60 L250 40 L300 60 L360 44 L360 90 Z' fill='%230f1f15'/></svg>");
}
.panel__head, .panel__body, .panel__foot { position: relative; z-index: 1; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid rgba(243,234,216,.14);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__badge {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--clay-bright), var(--clay));
  box-shadow: 0 4px 12px rgba(194,98,45,.45);
}
.brand__badge svg { width: 20px; height: 20px; }
.brand__name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.2rem; }

.ghost {
  background: transparent; border: 1px solid rgba(243,234,216,.25); color: var(--cream);
  padding: 7px 12px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: .85rem;
}
.ghost:hover { background: rgba(243,234,216,.1); }

.panel__body { flex: 1; overflow-y: auto; padding: 18px 16px 24px; }
.section-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; opacity: .8; margin: 4px 4px 12px;
}
.empty { opacity: .7; font-size: .92rem; padding: 6px 4px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; }
.ghost--sm { padding: 5px 10px; font-size: .78rem; }

/* People list */
.people { display: flex; flex-direction: column; gap: 8px; }
.person {
  display: flex; align-items: center; gap: 10px;
  background: rgba(251,246,236,.05); border: 1px solid rgba(243,234,216,.12);
  color: var(--cream); border-radius: 13px; padding: 10px 12px;
  transition: background .15s ease, border-color .15s ease;
  animation: rise .4s ease both;
}
.person:hover { background: rgba(251,246,236,.1); }
.person--active { border-color: var(--accent); background: rgba(251,246,236,.12); }
.person__check { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.person__btn {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left;
  background: none; border: 0; color: inherit; font-family: inherit; cursor: pointer; padding: 0;
}
.person__next { font-size: .8rem; opacity: .9; margin-top: 2px; color: var(--sand); }
.person__dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.person__main { min-width: 0; }
.person__name { font-weight: 600; font-size: 1rem; }
.person__status { font-size: .82rem; opacity: .82; margin-top: 2px; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Add traveler */
.add { margin-top: 18px; border-top: 1px solid rgba(243,234,216,.14); padding-top: 14px; }
.add summary { cursor: pointer; font-weight: 600; padding: 6px 4px; opacity: .9; }
.add__form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.add__form label { font-size: .8rem; opacity: .85; margin-top: 6px; }
.add__form input[type=text], .add__form input:not([type]) , .add__form input#np-name {
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(243,234,216,.22);
  background: rgba(22,41,29,.5); color: var(--cream); font-family: inherit; font-size: .95rem;
}
.add__form input#np-color { width: 52px; height: 34px; padding: 2px; border: none; background: none; }
.checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; opacity: .9; }
.add__form button {
  margin-top: 12px; padding: 11px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(160deg, var(--clay-bright), var(--clay)); color: white;
  font-family: inherit; font-weight: 600;
}
.add__form button:hover { filter: brightness(1.06); }

/* Device credential result */
.device-result { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.device-result h3 { font-family: 'Fraunces', serif; font-size: 1rem; margin: 6px 0 2px; }
.device-result .warn { color: #ffd9b8; font-size: .82rem; margin: 0 0 6px; }
.device-result .err { color: #ffc1c1; font-size: .85rem; }
.cred { display: flex; align-items: center; gap: 8px; }
.cred__label { font-size: .72rem; opacity: .7; width: 92px; flex: 0 0 auto; }
.cred__val {
  flex: 1; min-width: 0; overflow: auto; white-space: nowrap; font-size: .8rem;
  background: rgba(22,41,29,.55); padding: 6px 8px; border-radius: 7px;
}
.copy {
  background: rgba(243,234,216,.14); border: 0; color: var(--cream); cursor: pointer;
  border-radius: 7px; padding: 6px 9px; font-size: .76rem; font-family: inherit;
}
.copy:hover { background: rgba(243,234,216,.24); }
.instructions {
  white-space: pre-wrap; font-size: .78rem; line-height: 1.45; background: rgba(22,41,29,.55);
  padding: 10px 12px; border-radius: 9px; margin: 4px 0 0;
}

.panel__foot {
  padding: 12px 20px; border-top: 1px solid rgba(243,234,216,.14);
  font-size: .76rem; opacity: .6;
}

/* ---- Map markers ---- */
.tt-pin-wrap { background: none; border: none; }
.tt-pin { position: relative; }
.tt-pin svg { filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.tt-pin__pulse {
  position: absolute; left: 50%; top: 10px; transform: translate(-50%,-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s ease-out infinite; opacity: .6;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Focused detail card ---- */
.detail:empty { display: none; }
.detail__card {
  margin-top: 14px; padding: 12px 14px; border-radius: 13px;
  background: rgba(251,246,236,.06); border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
}
.detail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.detail__name { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 600; }
.detail__updated { font-size: .76rem; opacity: .7; }
.detail__meta { font-size: .8rem; opacity: .78; margin-top: 3px; }
.detail__next { font-size: .9rem; margin-top: 6px; color: var(--sand); font-weight: 500; }
.detail__focus { display: flex; gap: 6px; margin-top: 10px; }
.detail__focus .ghost { flex: 1; }
.detail__trail { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; flex-wrap: wrap; }
.detail__trail input[type=checkbox] { accent-color: var(--accent); }
.detail__date {
  padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(243,234,216,.22);
  background: rgba(22,41,29,.5); color: var(--cream); font-family: inherit; font-size: .8rem;
}

/* ---- Reconcile banner + dialog + origin ---- */
.reconcile-banner {
  display: flex; flex-direction: column; gap: 8px; margin: -2px 0 10px; padding: 10px 12px;
  background: rgba(224,122,55,.16); border: 1px solid var(--clay-bright); border-radius: 11px; font-size: .84rem;
}
.reconcile-banner__act { display: flex; gap: 8px; }
.primary { background: linear-gradient(160deg, var(--clay-bright), var(--clay)); color: #fff; border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; font-family: inherit; font-weight: 600; }
.primary--sm { padding: 6px 12px; font-size: .8rem; }
.modal__card--sm { width: min(94vw, 460px); }
.reconcile { padding: 16px 20px; }
.reconcile__lead { margin: 0 0 12px; opacity: .9; }
.reconcile__ok { opacity: .85; }
.reconcile__row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(243,234,216,.1); cursor: pointer; }
.reconcile__row input { margin-top: 3px; accent-color: #3f7d4f; }
.reconcile__txt { display: flex; flex-direction: column; }
.reconcile__label { font-weight: 600; font-size: .9rem; }
.reconcile__why { font-size: .74rem; opacity: .68; }
.reconcile__foot { padding: 6px 20px 20px; }
.origin { margin: 2px 2px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(251,246,236,.05); border: 1px solid rgba(243,234,216,.12); }
.origin__title { font-size: .78rem; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.origin__cur { font-size: .88rem; margin-top: 5px; }
.origin__cur--ok { color: #aee0b6; }
.origin__cur--warn { color: #ffc98a; }
.origin__hint { font-size: .76rem; opacity: .72; margin-top: 3px; }
.origin__acts, .origin__form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.origin__input { flex: 1; min-width: 140px; padding: 7px 9px; border-radius: 8px; font-size: .82rem; font-family: inherit; border: 1px solid rgba(243,234,216,.22); background: rgba(22,41,29,.5); color: var(--cream); }
.tt-start-wrap { background: none; border: none; }
.tt-start { font-size: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

/* ---- Trip summary ---- */
.tripsum {
  margin: 4px 2px 14px; padding: 11px 12px; border-radius: 12px;
  background: rgba(251,246,236,.06); border: 1px solid rgba(243,234,216,.14);
}
.tripsum__top { display: flex; gap: 8px; margin-bottom: 8px; }
.tripsum__leg, .tripsum__day {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px;
}
.tripsum__leg { background: var(--clay-bright); color: #fff; }
.tripsum__day { background: rgba(243,234,216,.16); color: var(--cream); }
.tripsum__bar { height: 7px; border-radius: 999px; background: rgba(22,41,29,.55); overflow: hidden; }
.tripsum__fill { height: 100%; background: linear-gradient(90deg, var(--clay), var(--clay-bright)); border-radius: 999px; transition: width .4s ease; }
.tripsum__dist { font-size: .82rem; margin-top: 8px; opacity: .92; }
.tripsum__dist b { color: #fff; }
.tripsum__eta { font-size: .8rem; margin-top: 4px; color: var(--sand); }

/* ---- Journey controls in detail card ---- */
.detail__journey { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.detail__pathtoggle { display: flex; align-items: center; gap: 6px; font-size: .82rem; cursor: pointer; }
.detail__pathtoggle input { accent-color: #e23b3b; }

/* ---- Modal (journey report) ---- */
.modal {
  position: fixed; inset: 0; z-index: 3000; background: rgba(10,18,12,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 18px;
}
.modal__card {
  width: min(96vw, 760px); max-height: 90vh; overflow: auto; background: var(--pine-deep);
  color: var(--cream); border: 1px solid rgba(243,234,216,.18); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(243,234,216,.14); }
.modal__head h2 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin: 0; }
.modal__close { background: rgba(243,234,216,.12); border: 0; color: var(--cream); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.modal__empty { padding: 30px 20px; opacity: .8; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 18px 20px; }
.stat { background: rgba(251,246,236,.05); border: 1px solid rgba(243,234,216,.12); border-radius: 11px; padding: 12px; }
.stat__v { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 600; color: #fff; }
.stat__l { font-size: .76rem; opacity: .75; margin-top: 2px; }
.visits { padding: 4px 20px 8px; }
.visits__h { font-family: 'Fraunces', serif; font-size: 1.02rem; margin: 6px 0 8px; }
.visit { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(243,234,216,.1); }
.visit__n { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(120,120,120,.5); color: #fff; font-size: .76rem; font-weight: 700; }
.visit--done .visit__n { background: #3f7d4f; }
.visit__label { font-weight: 600; font-size: .9rem; }
.visit__sub { font-size: .76rem; opacity: .72; margin-top: 1px; }
.report-stop div { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .72rem; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.modal__map { height: 360px; margin: 4px 20px 20px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(243,234,216,.14); }

/* ---- Playback bar ---- */
.playbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2500;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--pine-deep); border: 1px solid rgba(243,234,216,.2); box-shadow: 0 10px 30px rgba(0,0,0,.45);
  width: min(92vw, 560px);
}
.playbar__btn { background: var(--clay); border: 0; color: #fff; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; font-size: 1rem; flex: 0 0 auto; }
.playbar__slider { flex: 1; accent-color: var(--clay-bright); }
.playbar__time { font-size: .76rem; opacity: .85; white-space: nowrap; min-width: 96px; text-align: right; }
.playbar__speed { background: rgba(22,41,29,.6); color: var(--cream); border: 1px solid rgba(243,234,216,.2); border-radius: 8px; padding: 5px 6px; font-family: inherit; }
@media (max-width: 640px) { .playbar { bottom: calc(46vh + 12px); } }

/* ---- Itinerary editor ---- */
.itinerary { margin-top: 18px; }
.itinerary:empty { display: none; }
.itin-title { font-family: 'Fraunces', serif; font-size: 1.05rem; margin: 2px 4px 10px; }
.stops { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.stop {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(251,246,236,.05); border: 1px solid rgba(243,234,216,.12);
  border-radius: 11px; padding: 10px 11px;
}
.stop--next { border-color: var(--clay-bright); background: rgba(224,122,55,.12); }
.stop--reached { opacity: .62; }
.stop--reached .stop__num { background: #3f7d4f; }
.stop--passed { opacity: .78; }
.stop__main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; border-radius: 8px; padding: 2px; }
.stop__main--clickable { cursor: pointer; }
.stop__main--clickable:hover { background: rgba(243,234,216,.1); }
.stop__num {
  width: 24px; height: 24px; margin-top: 1px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--clay); color: #fff; font-size: .8rem; font-weight: 600;
}
.stop--next .stop__num { background: var(--clay-bright); box-shadow: 0 0 0 3px rgba(224,122,55,.3); }
.stop__text { min-width: 0; flex: 1; }
.stop__label { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.stop__addr { font-size: .76rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.stop__warn { font-size: .72rem; color: #ffc98a; }
.chip { display: inline-block; margin-top: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; }
.chip--next { background: var(--clay-bright); color: #fff; }
.chip--passed { background: rgba(243,234,216,.16); color: var(--cream); }
.chip--done { background: #3f7d4f; color: #fff; }
.stop__ctrl { display: flex; gap: 6px; justify-content: flex-end; }
.mini {
  width: 26px; height: 26px; border: 1px solid rgba(243,234,216,.2); background: rgba(243,234,216,.06);
  color: var(--cream); border-radius: 7px; cursor: pointer; font-size: .8rem; line-height: 1;
}
.mini:hover:not(:disabled) { background: rgba(243,234,216,.18); }
.mini:disabled { opacity: .3; cursor: default; }
.mini--on { background: #3f7d4f; border-color: #3f7d4f; color: #fff; }
.mini--on:hover:not(:disabled) { background: #4a8f5b; }
.stop-add input, .bulk__ta {
  padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(243,234,216,.22);
  background: rgba(22,41,29,.5); color: var(--cream); font-family: inherit; font-size: .9rem; width: 100%;
}
.bulk { margin-top: 12px; }
.bulk summary { cursor: pointer; font-weight: 600; opacity: .9; padding: 4px; }
.bulk__ta { margin: 8px 0; resize: vertical; }
.bulk button, .stop-add button {
  margin-top: 8px; padding: 9px 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(160deg, var(--clay-bright), var(--clay)); color: #fff; font-family: inherit; font-weight: 600;
}
.bulk__summary { font-size: .82rem; opacity: .85; margin: 8px 0 6px; }
.review__row { display: flex; flex-direction: column; gap: 4px; padding: 8px 9px; border-radius: 8px; background: rgba(22,41,29,.4); margin-bottom: 5px; }
.review__row--bad { background: rgba(120,55,25,.4); border: 1px solid rgba(224,122,55,.4); }
.review__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.review__label { font-weight: 600; font-size: .85rem; }
.review__status { font-size: .72rem; opacity: .85; white-space: nowrap; }
.review__addr { font-size: .74rem; opacity: .8; }
.review__fix { display: flex; gap: 5px; margin-top: 2px; }
.review__input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px; font-size: .78rem; font-family: inherit;
  border: 1px solid rgba(243,234,216,.22); background: rgba(22,41,29,.55); color: var(--cream);
}
.mini-btn {
  border: 0; border-radius: 7px; padding: 6px 10px; cursor: pointer; font-family: inherit; font-size: .76rem;
  background: rgba(243,234,216,.16); color: var(--cream);
}
.mini-btn:hover { background: rgba(243,234,216,.28); }
.bulk__save { margin-top: 8px; }

/* ---- Itinerary stop markers on the map ---- */
.tt-stop-wrap { background: none; border: none; }
.tt-stop {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .72rem;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.tt-stop--next { animation: pulse 2s ease-out infinite; font-size: .82rem; }
.tt-stop--reached { background: #6b7d6f; }

/* ---- Click-to-place banner ---- */
.pick-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1200;
  background: var(--clay); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .85rem; padding: 9px 16px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.4);
  pointer-events: none; max-width: 90%; text-align: center;
}

/* ---- Map tooltip card ---- */
.leaflet-tooltip.tt-tip {
  background: transparent; border: none; box-shadow: none; padding: 0; white-space: nowrap;
}
.leaflet-tooltip.tt-tip::before { border-top-color: var(--pine-deep); }
.tt-card {
  font-family: 'Outfit', sans-serif; min-width: 184px; border-radius: 11px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,.4); background: var(--pine-deep);
}
.tt-card__head {
  background: var(--accent); color: #fff; font-weight: 600; font-size: .84rem;
  padding: 7px 11px; letter-spacing: .01em;
}
.tt-card__body { padding: 8px 11px; color: var(--cream); }
.tt-sub {
  font-size: .82rem; font-weight: 600; color: #fff; margin-bottom: 7px;
  white-space: normal; max-width: 230px; line-height: 1.3;
}
.tt-divline { height: 1px; background: rgba(243,234,216,.18); margin: 7px 0; }
.tt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 2px 0; }
.tt-row__k { font-size: .74rem; opacity: .68; }
.tt-row__v { font-size: .8rem; font-weight: 500; }
.tt-row__v--strong { color: #fff; font-weight: 700; }
.tt-foot {
  margin-top: 9px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: .8rem; font-weight: 600; color: #fff;
}

/* ---- Mobile: panel becomes a bottom sheet ---- */
@media (max-width: 640px) {
  :root { --panel-w: 100%; }
  .panel {
    top: auto; height: 46vh; border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 28px rgba(0,0,0,.3);
  }
  #map { bottom: 0; }
}