/* Palomar Trail Explorer — visitor site. Mobile-first; Calcite supplies the controls. */

/* Sporty theme: stadium navy, royal "kit" blue, volt accent, pitch-green open trails.
   Trip-section colors are CVD-validated (royal, red, teal, gold in that order). */
:root {
    --te-navy: #0a1a3f;          /* header, trailheads */
    --te-brand: var(--te-navy);
    --te-brand-2: #1f4fe0;       /* royal blue: primary actions, links, icons */
    --te-volt: #c8f31d;          /* accent: active states, header stripe */
    --te-red: #e4002b;
    --te-stripe-blue: #0078d4;   /* Microsoft blue, header stripe only */
    --te-stripe-orange: #ff8c00; /* header stripe only (brighter than the heat-warning orange) */
    --te-open: #00a84f;          /* open trails (pitch green) */
    --te-bg: #f2f4f9;
    --te-surface: #ffffff;
    --te-text: #0b1530;
    --te-muted: #5a6480;
    --te-border: #dde2ee;
    --te-closed: #8d949b;
    --te-closed-bg: #eceef2;
    --te-heat: #cc3311;          /* closed for extreme heat (brick red) */
    --te-heat-bg: #fdecea;
    --te-selected: #1f4fe0;
    --te-selected-bg: #e7eeff;
    --te-section-0: #1f4fe0;
    --te-section-1: #e4002b;
    --te-section-2: #0092a3;
    --te-section-3: #b98100;
    --te-radius: 10px;
    --te-shadow: 0 1px 2px rgb(10 26 63 / .08), 0 4px 14px rgb(10 26 63 / .06);
    --te-font: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --te-font-display: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;

    /* Calcite brand color: see body rule below (Calcite sets its tokens on the mode class) */
}

/* Dark theme: data-theme is set before paint from the visitor's preference or the device */
:root[data-theme="dark"] {
    --te-brand-2: #5b8cff;
    --te-open: #2bd47a;
    --te-bg: #07101f;
    --te-surface: #0f1a30;
    --te-text: #eaf0ff;
    --te-muted: #9aa6c3;
    --te-border: #1e2a45;
    --te-closed-bg: #1a2338;
    --te-heat-bg: #3a1410;
    --te-heat: #ff6b4a;
    --te-selected: #5b8cff;
    --te-selected-bg: #13234a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--te-bg);
    color: var(--te-text);
    font-family: var(--te-font);
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3 { line-height: 1.15; margin: 0; font-family: var(--te-font-display); font-weight: 700; letter-spacing: .01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; }
a { color: var(--te-brand-2); }

.te-muted { color: var(--te-muted); font-weight: normal; }
.te-icon { flex: none; vertical-align: middle; }

/* ---------- Header ---------- */

.te-header {
    background: var(--te-brand);
    color: #fff;
    padding-top: env(safe-area-inset-top);
}
.te-header__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: .6rem 16px;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.te-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
    flex: 1;
}
.te-brand span { display: flex; flex-direction: column; min-width: 0; }
.te-brand strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-brand small { font-size: .75rem; opacity: .8; }
.te-back { --calcite-color-text-1: #fff; --calcite-color-text-3: #fff; margin-left: -.5rem; }
#te-units { --calcite-color-foreground-1: #fff; flex: none; }

/* ---------- Banners ---------- */

.te-banners {
    max-width: 960px;
    margin: 0 auto;
    padding: .75rem 16px 0;
    display: grid;
    gap: .5rem;
}
.te-banner-title { display: flex; align-items: center; gap: .35rem; }

/* ---------- Layout ---------- */

.te-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 16px 7rem;
}
.te-footer {
    text-align: center;
    color: var(--te-muted);
    font-size: .8rem;
    padding: 1rem 16px 2rem;
}

.te-intro h1 { margin-bottom: .35rem; }
.te-lede { color: var(--te-muted); margin: 0 0 1rem; }

.te-howto {
    background: var(--te-surface);
    border: 1px solid var(--te-border);
    border-radius: var(--te-radius);
    padding: .6rem 1rem;
    margin-bottom: 1rem;
}
.te-howto summary {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.te-howto ol { margin: .6rem 0 .2rem; padding-left: 1.25rem; }
.te-howto li { margin-bottom: .35rem; }

/* ---------- Map ---------- */

.te-map-card {
    background: var(--te-surface);
    border: 1px solid var(--te-border);
    border-radius: var(--te-radius);
    overflow: hidden;
    box-shadow: var(--te-shadow);
    margin-bottom: 1rem;
}
.te-map { width: 100%; background: #dfe6dc; }

.te-legend {
    list-style: none;
    margin: 0;
    padding: .55rem .9rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-size: .8rem;
    color: var(--te-muted);
    border-top: 1px solid var(--te-border);
}
.te-legend li { display: flex; align-items: center; gap: .35rem; }
.te-swatch { display: inline-block; width: 22px; height: 4px; border-radius: 2px; }
.te-swatch--open { background: var(--te-open); }
.te-swatch--closed { background: repeating-linear-gradient(90deg, var(--te-closed) 0 6px, transparent 6px 9px); }
.te-swatch--parking {
    width: 16px; height: 16px; border-radius: 4px;
    background: var(--te-brand-2); color: #fff; font: 700 11px/16px Arial, sans-serif; text-align: center;
}
.te-swatch--trailhead { width: 10px; height: 10px; border-radius: 50%; background: var(--te-brand); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--te-border); }
.te-heat-icon { color: var(--te-heat); }

/* Map buttons: Calcite actions stacked like the SDK's zoom buttons */
.te-map-tools {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--calcite-color-border-3);
    box-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.te-map-tools[data-position="top-right"] { top: 15px; right: 15px; }
.te-map-tools[data-position="bottom-right"] { bottom: 30px; right: 15px; }
.te-map-tools[hidden] { display: none; }
/* Every map button (ours and the SDK's zoom, navigation, compass, legend) wears the app surface
   and follows the light/dark theme; the SDK's own theme would keep them white */
#te-mapcard .esri-ui,
.te-map-tools {
    --calcite-color-foreground-1: var(--te-surface);
    --calcite-color-foreground-2: color-mix(in srgb, var(--te-text) 8%, var(--te-surface));
    --calcite-color-foreground-3: color-mix(in srgb, var(--te-text) 14%, var(--te-surface));
    --calcite-color-text-1: var(--te-text);
    --calcite-color-text-2: color-mix(in srgb, var(--te-text) 80%, var(--te-surface));
    --calcite-color-text-3: color-mix(in srgb, var(--te-text) 65%, var(--te-surface));
    --calcite-color-border-1: color-mix(in srgb, var(--te-text) 18%, var(--te-surface));
    --calcite-color-border-3: color-mix(in srgb, var(--te-text) 12%, var(--te-surface));
    color: var(--te-text);
}
#te-mapcard .esri-widget,
#te-mapcard .esri-widget--button { background-color: var(--te-surface); color: var(--te-text); }
#te-mapcard .esri-widget--button:hover { background-color: color-mix(in srgb, var(--te-text) 8%, var(--te-surface)); color: var(--te-text); }
.te-map-tools calcite-action { --calcite-action-background-color: var(--te-surface); }
.te-basemap-btn { order: 1; }
.te-dim-btn { order: 2; }

/* ---------- Badges ---------- */

.te-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.te-badge--closed { background: var(--te-closed-bg); color: #4a5157; border: 1px solid var(--te-closed); }
.te-badge--heat { background: var(--te-heat-bg); color: var(--te-heat); border-color: var(--te-heat); }

:root[data-theme="dark"] .te-badge--closed { color: #c9cfd4; }

/* ---------- Trail list ---------- */

.te-trails__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 .6rem;
}
.te-trails__head h2 { margin: 0; }
.te-pick-hint { margin: 0 0 .6rem; color: var(--te-muted); font-size: .9rem; }

.te-trail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--te-surface);
    border: 1px solid var(--te-border);
    border-radius: var(--te-radius);
    overflow: hidden;
}
.te-trail + .te-trail { border-top: 1px solid var(--te-border); }
.te-trail__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    min-height: 56px;
    color: inherit;
    text-decoration: none;
}
.te-trail__link:hover { background: color-mix(in srgb, var(--te-brand-2) 6%, transparent); }
.te-trail__link:focus-visible { outline: 3px solid var(--te-selected); outline-offset: -3px; }
.te-trail__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.te-trail__name { font-weight: 600; }
.te-trail__meta { font-size: .875rem; color: var(--te-muted); }
.te-trail__uses { display: flex; align-items: center; gap: .4rem; flex: none; }
.te-use {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--te-brand-2) 12%, transparent);
    color: var(--te-brand-2);
}
.te-chevron { color: var(--te-muted); }

.te-trail.is-closed .te-trail__name,
.te-trail.is-closed .te-trail__meta { color: var(--te-closed); }
.te-trail.is-closed .te-use { background: var(--te-closed-bg); color: var(--te-closed); }

/* Pick mode */
.te-trail__check { display: none; }
.te-trail__check input { width: 20px; height: 20px; accent-color: var(--te-selected); pointer-events: none; margin: 0; }
.is-picking .te-trail__check { display: inline-flex; }
.is-picking .te-chevron { display: none; }
.te-trail.is-selected .te-trail__link { background: var(--te-selected-bg); }

/* Lives in the panel footer slot (shown only while picking) */
.te-pickbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    padding-bottom: env(safe-area-inset-bottom);
}
.te-pickbar[hidden] { display: none; }
.te-pickbar > div:first-child { display: flex; flex-direction: column; font-size: .9rem; }
.te-pickbar__actions { display: flex; gap: .5rem; }

/* ---------- Trail detail ---------- */

.te-detail__title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .5rem; }
.te-detail.is-closed h1 { color: var(--te-muted); }

.te-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .6rem;
    margin: 1rem 0;
}
.te-stats > div {
    background: var(--te-surface);
    border: 1px solid var(--te-border);
    border-radius: var(--te-radius);
    padding: .7rem .9rem;
}
.te-stats dt { font-size: .78rem; color: var(--te-muted); text-transform: uppercase; letter-spacing: .04em; }
.te-stats dd { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.te-activities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
}
.te-activities li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .6rem;
    align-items: center;
    padding: .6rem .8rem;
    border-radius: var(--te-radius);
    border: 1px solid var(--te-border);
    background: var(--te-surface);
}
.te-activities li .te-icon { grid-row: span 2; }
.te-activities li span { font-weight: 600; }
.te-activities li small { color: var(--te-muted); font-size: .78rem; }
.te-activities .is-allowed .te-icon { color: var(--te-brand-2); }
.te-activities .is-not-allowed { opacity: .55; }
.te-activities .is-not-allowed span { text-decoration: line-through; }

.te-trailhead {
    background: var(--te-surface);
    border: 1px solid var(--te-border);
    border-radius: var(--te-radius);
    padding: 1rem;
    margin-bottom: .75rem;
}
.te-trailhead header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.te-trailhead.is-closed h3 { color: var(--te-muted); }
.te-lot { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; flex-wrap: wrap; }
.te-lot .te-icon { color: var(--te-brand-2); }
.te-lot.is-closed { color: var(--te-closed); }
.te-lot.is-closed .te-icon { color: var(--te-closed); }

.te-amenities {
    list-style: none;
    padding: 0;
    margin: 0 0 .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.te-amenities li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--te-brand-2) 10%, transparent);
}
.te-directions { display: flex; flex-wrap: wrap; gap: .5rem; }
.te-coords { font-size: .8rem; margin: .4rem 0 0; font-variant-numeric: tabular-nums; user-select: all; }

.te-connects { padding-left: 1.1rem; margin: 0 0 .8rem; }
.te-connects li { margin-bottom: .3rem; }
.te-connects .te-badge { margin-left: .4rem; }

/* ---------- Route ---------- */

.te-route-summary h1 { margin-bottom: .75rem; }
.te-route-summary calcite-notice { margin-bottom: .5rem; }
.te-section {
    background: var(--te-surface);
    border: 1px solid var(--te-border);
    border-left: 5px solid var(--section-color);
    border-radius: var(--te-radius);
    padding: 1rem;
    margin-bottom: .75rem;
}
.te-section > header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.te-section > header h2 { margin: 0; display: flex; align-items: center; gap: .45rem; }
.te-section > header > span { font-weight: 700; font-variant-numeric: tabular-nums; }
.te-section__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--section-color); }
.te-section h3 { margin: .9rem 0 .4rem; font-size: .85rem; color: var(--te-muted); text-transform: uppercase; letter-spacing: .04em; }
.te-trail-list--compact .te-trail__link { min-height: 48px; padding: .55rem .8rem; }
.te-route-th { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .3rem 0; }
.te-drive-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: .25rem 0 1rem;
    padding: .5rem;
    font-weight: 600;
    color: #7a5600;
    border: 2px dashed #e0b84a;
    border-radius: var(--te-radius);
    background: #fff8ec;
}
:root[data-theme="dark"] .te-drive-divider { background: #2d2212; color: #f2c27b; }

/* ---------- Larger screens ---------- */



/* Calcite brand → royal blue. The calcite-mode-* class is on <html>, so override on body. */
body {
    --calcite-color-brand: #1f4fe0;
    --calcite-color-brand-hover: #1a43bf;
    --calcite-color-brand-press: #1538a0;
    --calcite-font-family: var(--te-font);
}
:root[data-theme="dark"] body {
    --calcite-color-brand: #5b8cff;
    --calcite-color-brand-hover: #7aa2ff;
    --calcite-color-brand-press: #4a78e6;
}

/* Drive divider with an optional "hike there instead" suggestion */
.te-drive-divider { flex-direction: column; text-align: center; }
.te-drive-divider > span { display: inline-flex; align-items: center; gap: .5rem; }
.te-drive-divider small { font-weight: normal; color: var(--te-text); }

.te-map-hint {
    margin: 0;
    padding: .45rem .9rem;
    font-size: .78rem;
    color: var(--te-muted);
    border-top: 1px solid var(--te-border);
}


/* ---------- Elevation profile dialog ---------- */
#te-profile { --calcite-dialog-max-size-y: 70vh; }
.te-pf-status { margin: .5rem 0; color: var(--te-muted); }
.te-pf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: .4rem;
    margin: 0 0 .75rem;
}
.te-pf-stats > div {
    border: 1px solid var(--te-border);
    border-radius: 8px;
    padding: .4rem .6rem;
}
.te-pf-stats dt { font-size: .7rem; color: var(--te-muted); text-transform: uppercase; letter-spacing: .04em; }
.te-pf-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.te-pf-chart { position: relative; width: 100%; touch-action: pan-y; }
.te-pf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.te-pf-grid { stroke: var(--te-border); stroke-width: 1; }
.te-pf-tick { fill: var(--te-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.te-pf-area { fill: color-mix(in srgb, var(--te-brand-2) 16%, transparent); }
.te-pf-line { fill: none; stroke: var(--te-brand-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.te-pf-crossline { stroke: var(--te-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.te-pf-dot { fill: #d9480f; stroke: var(--te-surface); stroke-width: 2; }
.te-pf-hit { fill: transparent; cursor: crosshair; outline: none; }
.te-pf-hit:focus-visible { stroke: var(--te-selected); stroke-width: 2; }
.te-pf-tip {
    position: absolute;
    pointer-events: none;
    background: var(--te-surface);
    color: var(--te-text);
    border: 1px solid var(--te-border);
    border-radius: 6px;
    padding: .25rem .5rem;
    font-size: .8rem;
    box-shadow: var(--te-shadow);
    display: grid;
    white-space: nowrap;
}
.te-pf-tip span { color: var(--te-muted); font-size: .75rem; }
.te-pf-note { font-size: .78rem; margin: .5rem 0; }
.te-pf-table table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.te-pf-table th, .te-pf-table td { text-align: left; padding: .25rem .4rem; border-bottom: 1px solid var(--te-border); }
/* Elevation sheet: docked in the bottom third of the map card; the map above shrinks to fit */
.te-map-card { --te-sheet-h: 0px; }
.te-map-card.has-sheet { --te-sheet-h: 33.333%; }
.te-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--te-sheet-h);
    z-index: 6;
    border-top: 1px solid var(--te-border);
    box-shadow: 0 -2px 8px rgb(0 0 0 / .08);
    --calcite-panel-background-color: var(--te-surface);
}
.te-sheet[hidden] { display: none; }
.te-sheet__tabs { height: 100%; }
.te-sheet calcite-tab { height: 100%; overflow: auto; padding: .6rem 1rem .75rem; box-sizing: border-box; }
.te-sheet .te-pf-body:not([hidden]) {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 1rem;
    height: 100%;
    min-height: 0;
}
.te-sheet .te-pf-stats { display: flex; flex-direction: column; gap: .3rem; margin: 0; overflow: auto; }
.te-sheet .te-pf-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: 0; border: 0; background: none; }
.te-sheet .te-pf-stats dd { font-size: 1rem; }
.te-sheet .te-pf-chart { height: 100%; min-height: 0; }
.te-sheet .te-pf-table table { max-width: 520px; }
.te-sheet .te-pf-note { margin: .5rem 0 0; }
.te-pf-tip[hidden] { display: none; }


/* =====================================================================
   App shell (calcite-shell). Desktop ≥ 900px: side panel + full-size map.
   Mobile: full-width panel; the map card sits at the top of the panel body.
   ===================================================================== */

html:has(body.te-app), body.te-app { height: 100%; margin: 0; overflow: hidden; }

.te-shell {
    --calcite-shell-panel-width: 440px;
    --calcite-shell-panel-min-width: 440px;
    --calcite-shell-panel-max-width: 440px;
}
.te-shell .te-header__inner { max-width: none; padding-inline: 16px; }

/* Panel content */
.te-panel-top:empty { display: none; }
.te-panel-top .te-banners { max-width: none; padding: .75rem .75rem 0; }
.te-panel-top .te-banners:last-child { padding-bottom: .75rem; }
.te-panel-body { padding: .75rem 16px 1rem; }
.te-panel-body > calcite-block { margin: 0 -16px; }
.te-panel-body > calcite-block + calcite-block,
.te-panel-body > section + calcite-block { border-top: 1px solid var(--te-border); }
.te-panel-footer { width: 100%; }
.te-panel-footer[hidden] { display: none; }
.te-howto-list { margin: 0; padding-left: 1.25rem; font-size: .92rem; }
.te-howto-list li { margin-bottom: .35rem; }
#te-howto { margin-bottom: .75rem; }
.te-detail__status { margin-bottom: .5rem; }
.te-panel-body .te-stats { margin-top: 0; }
.te-panel-body .te-trailhead { box-shadow: none; }
.te-panel-body .te-footer { padding: 1.5rem 0 .5rem; }
.te-section__len { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; padding-inline: .75rem; font-variant-numeric: tabular-nums; }
.te-section.te-section { border: 0; border-left: 5px solid var(--section-color); border-radius: 0; padding: 0; margin: 0 -16px; background: transparent; }

/* Map card */
.te-map-slot { position: relative; width: 100%; height: 100%; }
.te-map-card { position: relative; }

/* Livewire root inside the shell panel: one calcite-panel fills it */
.te-panels { display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; }
.te-panels > calcite-panel { flex: 1 1 auto; min-height: 0; }

/* Mobile: the shell panel docks at the bottom (site.js layout()), map above it */
@media (max-width: 899.98px) {
    .te-shell {
        --calcite-shell-panel-height: 54vh;
        --calcite-shell-panel-min-height: 30vh;
        --calcite-shell-panel-max-height: 54vh;
    }
    #te-map-slot-desktop { position: relative; flex: 1 1 auto; align-self: stretch; height: auto; min-height: 0; }
    .te-map-card { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
    .te-map { position: absolute; inset: 0; height: 100%; }
    .te-map-hint { display: none; }
}

/* Desktop: map fills the shell, overlays float on it */
body.is-desktop .te-map-card {
    position: absolute;
    inset: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
body.is-desktop .te-map { position: absolute; inset: 0; height: 100%; }
body.is-desktop .te-map-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 5;
    border: 1px solid var(--te-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--te-surface) 92%, transparent);
    white-space: nowrap;
}
/* The shell's content area doesn't pass a height to slotted children: pin the map slot to it */
body.is-desktop #te-map-slot-desktop { position: relative; flex: 1 1 auto; align-self: stretch; height: auto; min-width: 0; }

/* Snapshot of the previous view shown during a 2D/3D switch */
.te-map-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - var(--te-sheet-h, 0px));
    object-fit: cover;
    z-index: 3;
    pointer-events: none;
    transition: opacity .35s ease;
}
body:not(.is-desktop) .te-map-cover { height: auto; }
.te-map-cover.is-fading { opacity: 0; }


/* ---------- Explorer panels ---------- */
.te-empty-state { text-align: center; padding: 2rem 1rem; display: grid; justify-items: center; gap: .6rem; }
.te-empty-state h3 { margin: 0; }
.te-empty-state p { margin: 0 0 .5rem; max-width: 32ch; }
.te-empty-state calcite-icon { color: var(--te-brand-2); }
.te-plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.te-plainlist li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.te-banners--flat { padding: 0; display: grid; gap: .5rem; }
.te-legend.te-legend--panel {
    position: static; flex-direction: column; align-items: flex-start; gap: .5rem;
    border: 0; padding: 0; box-shadow: none; background: none; font-size: .9rem; color: var(--te-text);
}
.te-swatch--trip { background: repeating-linear-gradient(90deg, var(--te-selected) 0 7px, transparent 7px 11px); height: 4px; }
.te-detail > calcite-button { margin-top: .25rem; }
.te-trail-list:not(.is-picking) .te-trail__check { display: none; }
.te-trail-list.is-picking .te-trail__check { display: inline-flex; }
.te-trail-list.is-picking .te-chevron { display: none; }


/* ---------- Sporty touches ---------- */
/* Header: navy with a diagonal volt / royal / red stripe */
.te-header {
    position: relative;
    background:
        linear-gradient(115deg, transparent 0 62%, rgb(255 255 255 / .05) 62% 70%, transparent 70%),
        var(--te-navy);
}
.te-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(105deg, var(--te-stripe-orange) 0 34%, var(--te-stripe-blue) 34% 67%, var(--te-volt) 67%);
}
.te-brand strong { font-family: var(--te-font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-style: italic; }
.te-brand small { font-family: var(--te-font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--te-volt); opacity: 1; font-weight: 600; }
.te-brand .te-icon { color: var(--te-volt); }

/* Badges: squarer, bolder */
.te-badge { border-radius: 4px; font-family: var(--te-font-display); font-size: .78rem; letter-spacing: .06em; }
.te-use { border-radius: 8px; transform: skewX(-8deg); }
.te-use .te-icon { transform: skewX(8deg); }

/* Stat tiles: scoreboard feel */
.te-stats > div { border-left: 4px solid var(--te-brand-2); border-radius: 6px; }
.te-stats dt { font-family: var(--te-font-display); font-weight: 600; letter-spacing: .08em; }
.te-stats dd { font-family: var(--te-font-display); font-size: 1.7rem; font-weight: 800; font-style: italic; }
.te-pf-stats dd { font-family: var(--te-font-display); font-size: 1.15rem; font-weight: 800; }

/* Trail list rows */
.te-trail__name { font-family: var(--te-font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: .01em; }
.te-trail__link:hover { background: color-mix(in srgb, var(--te-brand-2) 7%, transparent); }
.te-trail.is-selected .te-trail__link { box-shadow: inset 4px 0 0 var(--te-brand-2); }


/* Activity cards */
.te-activities .is-allowed { border-left: 4px solid var(--te-open); }
.te-activities .is-allowed .te-icon { color: var(--te-open); }

/* Calcite surfaces follow the navy palette in dark mode (and the cool gray page in light) */
body { --calcite-color-background: var(--te-bg); }
:root[data-theme="dark"] body {
    --calcite-color-background: #07101f;
    --calcite-color-foreground-1: #0f1a30;
    --calcite-color-foreground-2: #13213d;
    --calcite-color-foreground-3: #1a2a4a;
    --calcite-color-border-1: #2a3a5e;
    --calcite-color-border-2: #22314f;
    --calcite-color-border-3: #1e2a45;
    --calcite-color-text-1: #eaf0ff;
    --calcite-color-text-2: #c3cde6;
    --calcite-color-text-3: #9aa6c3;
}

/* Divider above the bottom group (Help, Preferences) in the action bar */
#te-actions .te-actions-divider {
    border-top: 1px solid var(--calcite-color-border-2);
    margin-top: 4px;
    padding-top: 4px;
}
/* Horizontal bar on mobile: the divider becomes a vertical rule */
body:not(.is-desktop) #te-actions .te-actions-divider {
    border-top: 0;
    border-left: 1px solid var(--calcite-color-border-2);
    margin: 0 0 0 4px;
    padding: 0 0 0 4px;
}

/* ---------- Drill-in: trail details push in from the right, Back pushes them out ---------- */
.te-panel-slot { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.te-panel-layer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.te-panel-layer[hidden] { display: none; }
.te-panel-layer > calcite-panel { flex: 1 1 auto; min-height: 0; }

/* While sliding, both layers are stacked and moved with transform only (GPU-composited) */
.te-panel-slot.is-sliding { position: relative; overflow: hidden; }
.te-panel-slot.is-sliding > .te-panel-layer { position: absolute; inset: 0; will-change: transform; }


/* ---------- Slim, themed scrollbars ----------
   scrollbar-width / scrollbar-color are inherited, so they also reach the scroll areas
   inside Calcite's shadow DOM (panels, blocks), which ::-webkit-scrollbar cannot. */
:root {
    --te-scroll-thumb: color-mix(in srgb, var(--te-navy) 30%, transparent);
    scrollbar-width: thin;
    scrollbar-color: var(--te-scroll-thumb) transparent;
}
:root[data-theme="dark"] { --te-scroll-thumb: color-mix(in srgb, #9aa6c3 40%, transparent); }
calcite-panel, calcite-block, calcite-shell-panel, .te-sheet__scroll, .te-log {
    scrollbar-width: thin;
    scrollbar-color: var(--te-scroll-thumb) transparent;
}

/* Trail list runs edge to edge in the panel: no margin, no rounded corners */
.te-panel-body > .te-trail-list {
    margin: 0 -16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}
.te-panel-body > .te-trail-list:first-child { margin-top: -.75rem; border-top: 0; }



/* ArcGIS legend (in arcgis-expand): compact and scrollable so it never runs off the map */
#te-map arcgis-legend {
    display: block;
    width: 200px;
    max-height: min(44vh, 340px);
    font-size: .85rem;
    overflow-y: auto;
    scrollbar-width: thin;
    font-family: var(--te-font);
}
/* Phones: arcgis-expand opens as a drawer; let the legend use its full width */
body:not(.is-desktop) #te-map arcgis-legend { width: auto; max-height: 50vh; }

.te-swatch--heat { background: repeating-linear-gradient(90deg, var(--te-heat) 0 6px, transparent 6px 9px); }

/* ---------- Header: app name + bigger logo (left), active park + switcher (right) ---------- */
.te-header__inner { gap: 1rem; padding-block: .55rem; }
.te-logo {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(140deg, #1f4fe0, var(--te-navy) 75%);
    box-shadow: inset 0 0 0 2px var(--te-volt), 0 4px 12px rgb(0 0 0 / .25);
    color: var(--te-volt);
    transform: skewX(-6deg);
}
.te-logo .te-icon { transform: skewX(6deg); }
.te-brand strong { font-size: 1.45rem; line-height: 1.05; }
/* Active park: one pill control (label · name · action), like an extended FAB */
.te-park {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    margin-left: auto;
    height: 44px;
    padding: 0 6px 0 16px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .28);
    background: rgb(255 255 255 / .07);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.te-park:hover { background: rgb(255 255 255 / .13); border-color: var(--te-volt); }
.te-park:focus-visible { outline: 2px solid var(--te-volt); outline-offset: 2px; }
.te-park__label {
    flex: none;
    font-family: var(--te-font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--te-volt);
}
.te-park__name {
    min-width: 0;
    font-family: var(--te-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.te-park__action {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--te-volt);
    color: var(--te-navy);
}
.te-brand { flex: 0 1 auto; }

/* Phones: keep both sides readable */
@media (max-width: 599.98px) {
    .te-logo { width: 38px; height: 38px; border-radius: 10px; }
    .te-brand strong { font-size: 1.15rem; }
    .te-brand small { display: none; }
    .te-park { height: 40px; padding-left: 12px; gap: .45rem; }
    .te-park__label { display: none; }
    .te-park__name { font-size: .95rem; max-width: 52vw; }
    .te-park__action { width: 28px; height: 28px; }
}
/* Mobile layout: logo only, the park name gets the room */
@media (max-width: 899.98px) {
    .te-brand > span:not(.te-logo) { display: none; }
}
@media (max-width: 419.98px) {
    .te-park__name { max-width: 62vw; }
}

/* ---------- Loader scrim: the hiker silhouette walking in place ---------- */
.te-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--te-navy) 78%, transparent);
    backdrop-filter: blur(3px);
    transition: opacity .35s ease, visibility 0s linear 0s;
}
.te-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s; }
.te-loader__card { display: grid; justify-items: center; gap: .9rem; }
.te-loader__msg {
    margin: 0;
    color: #fff;
    font-family: var(--te-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Hiker silhouette (logo + loader) ---------- */
.te-hiker { display: block; overflow: visible; color: var(--te-volt); }
.te-hiker__head, .te-hiker__pack { fill: currentColor; }
.te-hiker__torso, .te-hiker__limb { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.te-hiker__torso { stroke-width: 11; }
.te-hiker__leg { stroke-width: 8; }
.te-hiker__arm .te-hiker__limb, path.te-hiker__arm { stroke-width: 6; }
.te-hiker__pole { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.te-hiker__leg--back, .te-hiker__arm--back { opacity: .55; }

/* Walking: limbs rotate around the hip (30,54) and shoulder (34,27) in SVG units */
.te-hiker--walking { width: 72px; height: 112px; }
.te-hiker--walking .te-hiker__leg, .te-hiker--walking .te-hiker__arm { transform-box: view-box; }
.te-hiker--walking .te-hiker__leg { transform-origin: 30px 54px; }
.te-hiker--walking .te-hiker__arm { transform-origin: 34px 27px; }
.te-hiker--walking .te-hiker__leg--front,
.te-hiker--walking .te-hiker__arm--back { animation: te-swing .9s ease-in-out infinite alternate; }
.te-hiker--walking .te-hiker__leg--back,
.te-hiker--walking .te-hiker__arm--front { animation: te-swing .9s ease-in-out infinite alternate-reverse; }
.te-hiker--walking .te-hiker__body { animation: te-step .45s ease-in-out infinite alternate; }
@keyframes te-swing { from { rotate: -24deg; } to { rotate: 24deg; } }
@keyframes te-step { from { translate: 0 0; } to { translate: 0 -2.5px; } }
@media (prefers-reduced-motion: reduce) {
    .te-hiker--walking .te-hiker__leg, .te-hiker--walking .te-hiker__arm, .te-hiker--walking .te-hiker__body { animation: none; }
}

/* Logo: same silhouette, centred in the badge */
.te-hiker--logo { width: 60%; height: 80%; }
.te-logo { padding: 0; }
.te-logo .te-hiker { transform: skewX(6deg); }

/* Loader: short trail line under the walking hiker (no caption) */
.te-loader__card { gap: 0; }
.te-loader__trail { display: block; width: 120px; height: 6px; margin-top: -6px; overflow: visible; }
.te-loader__trail path {
    fill: none;
    stroke: var(--te-volt);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 8;
    opacity: .85;
    animation: te-trail-scroll .9s linear infinite;
}
@keyframes te-trail-scroll { to { stroke-dashoffset: 18; } }
@media (prefers-reduced-motion: reduce) { .te-loader__trail path { animation: none; } }
.te-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Logo: plain volt-green badge, navy hiker */
.te-logo {
    background: var(--te-volt);
    box-shadow: none;
}
.te-logo .te-hiker { color: var(--te-navy); }
.te-logo .te-hiker__leg--back, .te-logo .te-hiker__arm--back { opacity: .6; }

/* Park pill: slanted volt marker instead of the "Active" label; name centred vertically */
.te-park__marker {
    flex: none;
    width: 14px;
    height: 10px;
    background: var(--te-volt);
    transform: skewX(-20deg);
    border-radius: 1px;
}
/* Optical centring: Barlow Condensed reserves descender space, so lift the (mostly capital) text */
.te-park__name { display: block; line-height: 1; position: relative; top: -1px; }

/* Logo hiker: bolder strokes for the small size. The square viewBox (-19.5 -1.25 104 104)
   is centred on the figure's stroked bounds (x 15-50, y 2-99.5), so it is centred in the badge
   by construction; the svg fills the badge minus padding. */
.te-logo { padding: 3px; }
.te-hiker--logo { width: 100%; height: 100%; }
.te-hiker--logo .te-hiker__torso { stroke-width: 14; }
.te-hiker--logo .te-hiker__leg { stroke-width: 11; }
.te-hiker--logo .te-hiker__arm .te-hiker__limb, .te-hiker--logo path.te-hiker__arm { stroke-width: 8.5; }
.te-hiker--logo .te-hiker__pole { stroke-width: 4; }
.te-hiker--logo .te-hiker__head { r: 9; }
.te-logo .te-hiker__leg--back, .te-logo .te-hiker__arm--back { opacity: .7; }

/* ---------- Welcome splash ---------- */
/* While the splash is open its own walking hiker stands in for the loader */
.te-splash-open .te-loader { opacity: 0; visibility: hidden; }
#te-splash { --calcite-dialog-content-space: 0; }
.te-splash__hero {
    display: grid;
    justify-items: center;
    padding: 1.75rem 1rem 1.5rem;
    background:
        linear-gradient(90deg, #ff8c00 0 33.3%, #0078d4 0 66.6%, var(--te-volt) 0) bottom / 100% 4px no-repeat,
        var(--te-navy);
}
.te-splash__hero .te-loader__trail { margin-top: -6px; }
.te-splash__body { padding: 1.25rem 1.5rem 1.5rem; color: var(--te-text); }
.te-splash__title {
    margin: 0;
    font-family: var(--te-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.te-splash__title { text-align: center; }
.te-splash__tagline {
    margin: .15rem 0 1rem;
    text-align: center;
    color: var(--te-brand-2);
    font-family: var(--te-font-display);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.te-splash__lead { margin: 0 0 1rem; line-height: 1.5; }
.te-splash__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.te-splash__list li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; line-height: 1.45; font-size: .92rem; }
.te-splash__list calcite-icon { margin-top: .15rem; color: var(--te-brand-2); }
.te-splash__optout { --calcite-label-margin-bottom: 0; }
.te-help-splash { margin: .75rem 0; }

/* GEOinovo demonstration credit (splash + Help) */
.te-demo-credit { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .75rem 0; font-size: .8rem; color: var(--te-muted); }
.te-demo-credit a { color: var(--te-brand-2); font-weight: 700; text-decoration: none; }
.te-demo-credit a:hover { text-decoration: underline; }
.te-demo-credit a { display: inline-flex; }
.te-demo-credit__logo { display: block; height: 26px; width: auto; }
.te-demo-credit--splash .te-demo-credit__logo { height: 32px; }
/* Light logo (dark lettering) on light surfaces, light-lettered logo in dark mode */
.te-demo-credit__logo--dark, :root[data-theme="dark"] .te-demo-credit__logo--light { display: none; }
:root[data-theme="dark"] .te-demo-credit__logo--dark { display: block; }
.te-demo-credit--splash { flex-direction: column; justify-content: center; gap: .45rem; margin: 1.25rem 0 0; padding-top: .9rem; border-top: 1px solid var(--te-border); text-align: center; }

/* Map and its overlays sit above the elevation sheet when it is open */
#te-mapcard .te-map { bottom: var(--te-sheet-h); height: auto; transition: bottom .2s ease; }
.te-map-tools[data-position="bottom-right"] { bottom: calc(var(--te-sheet-h) + 30px); }
body.is-desktop .te-map-hint { bottom: calc(var(--te-sheet-h) + 28px); }
/* Phones: docked in the bottom pane in place of the panel content (site.js moves it there);
   stats sit above the chart */
.te-sheet.is-pane { position: static; height: 100%; min-height: 0; border-top: 0; box-shadow: none; }
.te-profile-in-pane #te-panels { display: none; }
@media (max-width: 899.98px) {
    .te-sheet .te-pf-body:not([hidden]) { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .4rem; }
    .te-sheet .te-pf-stats { flex-direction: row; flex-wrap: wrap; gap: .2rem .9rem; }
    .te-sheet .te-pf-stats > div { justify-content: flex-start; }
    .te-sheet .te-pf-stats dt { font-size: .62rem; }
    .te-sheet .te-pf-stats dd { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { #te-mapcard .te-map { transition: none; } }

/* SDK map buttons (zoom, compass, navigation toggle) are calcite-buttons with their own
   colours inside; give them the app surface too so they follow the theme */
#te-mapcard .esri-ui calcite-button {
    --calcite-button-background-color: var(--te-surface);
    --calcite-button-text-color: var(--te-text);
    --calcite-button-icon-color: var(--te-text);
    --calcite-button-border-color: transparent;
}
#te-mapcard .esri-ui calcite-button:hover {
    --calcite-button-background-color: color-mix(in srgb, var(--te-text) 8%, var(--te-surface));
}

/* Length tiles (one way / out & back): flat, edge to edge, outlined only */
.te-panel-body .te-stats { gap: 0; margin: -.75rem -16px 0; border-bottom: 1px solid var(--te-border); }
.te-panel-body .te-stats > div {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: .7rem 16px;
}
.te-panel-body .te-stats > div + div { border-left: 1px solid var(--te-border); }

/* Back: a flat, full-height button at the start of the panel header */
calcite-panel > calcite-action[data-action="back"] {
    align-self: stretch;
    height: 100%;
    border-right: 1px solid var(--te-border);
    --calcite-action-corner-radius: 0;
}
calcite-panel > calcite-action[data-action="back"] { --calcite-action-background-color-hover: color-mix(in srgb, var(--te-text) 6%, transparent); }

/* Header right side: park switcher (+ sign-out in the admin) */
.te-header__end { display: flex; align-items: center; gap: .5rem; margin-left: auto; min-width: 0; }
.te-header__end .te-park { margin-left: 0; }

/* Admin: + (new park) to the left of the park pill, same look as the pill */
.te-park-add {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / .28);
    background: rgb(255 255 255 / .07);
    color: var(--te-volt);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.te-park-add:hover { background: rgb(255 255 255 / .13); border-color: var(--te-volt); }
.te-park-add:focus-visible { outline: 2px solid var(--te-volt); outline-offset: 2px; }
@media (max-width: 599.98px) { .te-park-add { width: 40px; height: 40px; } }

/* Map popups for amenities, parking and trailheads */
.te-map-popup p { margin: 0 0 .35rem; }
.te-map-popup span { color: var(--te-muted); }
.te-map-popup__open { color: var(--te-open); }
.te-map-popup__closed { color: var(--te-closed); }
.te-map-popup__heat { color: var(--te-heat); }
.te-map-popup a { color: var(--te-brand-2); font-weight: 600; }

/* ArcGIS popups (visitor + admin maps) in the app style */
.esri-popup { --calcite-color-foreground-1: var(--te-surface); --calcite-color-text-1: var(--te-text); --calcite-color-text-2: var(--te-muted); }
.esri-popup .esri-features__heading, .esri-popup .esri-popup__header-title, .esri-popup calcite-panel::part(heading) { font-family: var(--te-font-display); font-weight: 700; letter-spacing: .01em; }
.esri-popup .esri-feature-content, .esri-popup .esri-feature__content-element { padding: 0; border: 0; background: transparent; }
.te-popup-table, .te-map-popup { margin: 0; }
.te-popup-table tr:first-child th, .te-popup-table tr:first-child td { padding-top: 0; }
.te-confirm__message { margin: 0; line-height: 1.5; }