.dmp-trail-widget { display: flex; flex-direction: column; gap: 16px; width: 100%; --tline: #e5e9ec; --tink: #0A2540; --tmuted: #6b7785; font-family: Inter, sans-serif; color: var(--tink); }
.dmp-trail-head { display: flex; flex-direction: column; gap: 6px; }
.dmp-trail-eyebrow { margin: 0; font-family: var(--font-heading, Syncopate), sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent, #00ddc7); }
.dmp-trail-heading { margin: 0; font-family: var(--font-heading, Syncopate), sans-serif; font-weight: 700; font-size: 26px; line-height: 1.15; text-transform: uppercase; color: var(--tink); }
.dmp-trail-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dmp-trail-chip, .dmp-trail-btn { display: inline-flex; align-items: center; font-family: var(--font-heading, Syncopate), sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; padding: 8px 14px; border-radius: 30px; border: 2px solid var(--tink); background: #fff; color: var(--tink); cursor: pointer; text-decoration: none; line-height: 1.2; }
.dmp-trail-chip i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; flex: none; }
.dmp-trail-chip.is-active, .dmp-trail-chip:hover, .dmp-trail-btn.is-solid, .dmp-trail-btn:hover { background: var(--tink); color: #fff; }
.dmp-trail-btn.is-solid:hover { opacity: .85; }

/* Map box — fullscreen targets only this element */
.dmp-trail-mapbox { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--tline); }
.dmp-trail-mapbox.is-fullscreen { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; border-radius: 0 !important; border: none !important; }
.dmp-trail-mapbox.is-fullscreen .dmp-trail-canvas { height: 100vh !important; }

.dmp-trail-canvas { width: 100%; height: var(--dmp-trail-height, 520px); min-height: 300px; }
.dmp-trail-note { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 10px; background: #fff; border: 1px solid var(--tline); border-radius: 12px; font-size: 12px; color: var(--tmuted); }
.dmp-trail-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent, #00ddc7); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--tink); }
.dmp-trail-dot.is-hover { background: var(--tink); }
.dmp-trail-tip .maplibregl-popup-content { padding: 6px 10px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; color: var(--tink, #0A2540); border-radius: 8px; }

/* Fullscreen button */
.dmp-trail-fs-btn { position: absolute; bottom: 48px; right: 10px; z-index: 4; width: 30px; height: 30px; padding: 5px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: 4px; cursor: pointer; color: var(--tink); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.dmp-trail-fs-btn:hover { background: #f4f4f4; }
.dmp-trail-fs-btn svg { width: 16px; height: 16px; display: block; }

/* Side panel */
.dmp-trail-info { position: absolute; z-index: 3; top: 16px; left: 16px; width: 360px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box; display: none; flex-direction: column; gap: 12px; padding: 24px 22px 22px; background: #fff; border-radius: 18px; box-shadow: 0 12px 32px rgba(10, 37, 64, .18); }
.dmp-trail-info.is-open { display: flex; animation: dmpTrailPanelIn .25s ease-out; }
@keyframes dmpTrailPanelIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.dmp-trail-info h3 { margin: 0; padding-right: 40px; font-family: var(--font-heading, Syncopate), sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; text-transform: uppercase; color: var(--tink); }
.dmp-trail-info p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--tmuted); }
.dmp-trail-desc { white-space: pre-line; }
.dmp-trail-info .dmp-trail-start { font-size: 12px; color: var(--tink); font-style: italic; }
.dmp-trail-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--tline); background: #fff; color: var(--tink); font-size: 20px; line-height: 1; cursor: pointer; }
.dmp-trail-close:hover { background: var(--tink); color: #fff; border-color: var(--tink); }
.dmp-trail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dmp-trail-tag { font-size: 12px; padding: 4px 10px; border-radius: 30px; background: #f1f4f6; color: var(--tink); }
.dmp-trail-tag.is-type { color: #fff; font-weight: 600; }
.dmp-trail-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.dmp-trail-widget.is-narrow .dmp-trail-info { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; max-height: 65%; padding: 20px 18px 18px; }
.dmp-trail-widget.is-narrow .dmp-trail-info.is-open { animation-name: dmpTrailSheetIn; }
@keyframes dmpTrailSheetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Mini elevation profile in side panel */
.dmp-mini-profile { border-top: 1px solid var(--tline); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.dmp-mini-profile-svg { width: 100%; height: auto; display: block; border-radius: 6px; overflow: hidden; touch-action: none; cursor: crosshair; }
.dmp-mini-profile-svg .area { opacity: .18; }
.dmp-mini-profile-svg .ln { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dmp-mini-profile-svg .cur { stroke: #0A2540; stroke-width: 1; }
.dmp-mini-readout { font-size: 11px; color: var(--tmuted); font-variant-numeric: tabular-nums; min-height: 16px; }

/* Stats and main profile */
.dmp-trail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 16px; padding: 14px 20px; border: 1px solid var(--tline); border-radius: 16px; background: #fff; }
.dmp-trail-stats:empty { display: none; }
.dmp-trail-stat { min-width: 0; }
.dmp-trail-stat b { display: block; font-family: var(--font-heading, Syncopate), sans-serif; font-size: 22px; line-height: 1.2; color: var(--tink); font-variant-numeric: tabular-nums; }
.dmp-trail-stat span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tmuted); }
.dmp-trail-profile { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; border: 1px solid var(--tline); border-radius: 16px; background: #fff; }
.dmp-trail-profile[hidden] { display: none !important; }
.dmp-trail-profile-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--tmuted); font-variant-numeric: tabular-nums; }
.dmp-trail-profile-top h3 { margin: 0; font-family: var(--font-heading, Syncopate), sans-serif; font-size: 14px; text-transform: uppercase; color: var(--tink); }
.dmp-trail-profile svg { width: 100%; height: auto; display: block; touch-action: none; }
.dmp-trail-profile svg text { fill: #6b7785; font-size: 11px; font-family: Inter, sans-serif; }
.dmp-trail-profile svg .ax { stroke: #e5e9ec; stroke-width: 1; }
.dmp-trail-profile svg .area { opacity: .14; }
.dmp-trail-profile svg .ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dmp-trail-profile svg .cur { stroke: #0A2540; stroke-width: 1; }
.dmp-trail-credit { margin: 0; font-size: 12px; color: var(--tmuted); }
.dmp-trail-empty { padding: 24px; border: 1px dashed #c9d1d8; border-radius: 16px; background: #fafbfc; font-family: Inter, sans-serif; font-size: 14px; color: #6b7785; }

/* Legend */
.dmp-trail-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; background: #fff; border: 1px solid var(--tline); border-radius: 12px; }
.dmp-legend-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tmuted); }
.dmp-legend-swatch { display: inline-block; width: 28px; height: 4px; border-radius: 2px; flex: none; }
.dmp-legend-swatch.is-dashed { height: 0; border-radius: 0; }

/* Connector popup */
.dmp-conn-popup .maplibregl-popup-content { padding: 12px 14px; border-radius: 10px; font-family: Inter, sans-serif; min-width: 160px; max-width: 240px; }
.dmp-conn-popup-inner strong { display: block; font-size: 13px; font-weight: 700; color: var(--tink, #0A2540); margin-bottom: 4px; }
.dmp-conn-popup-inner p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tmuted, #6b7785); }

@media (max-width: 600px) {
  .dmp-trail-heading { font-size: 20px; }
  .dmp-trail-stat b { font-size: 18px; }
  .dmp-trail-mapbox { border-radius: 16px; }
}