.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.trips-main { max-width: 1080px; }
.trips-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.trip-count { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; padding: 14px 18px; border-radius: 18px; background: var(--forest); color: white; }
.trip-count strong { color: var(--lime); font-size: 2.2rem; line-height: 1; }
.trip-count span { color: rgba(255,255,255,.55); font-size: .68rem; font-weight: 750; line-height: 1.15; text-transform: uppercase; }
.trips-empty { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 45px 24px; border: 1px dashed rgba(15,119,108,.35); border-radius: 28px; background: var(--white); text-align: center; }
.trips-empty > span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #edf8d7; color: var(--teal); font-size: 1.8rem; }
.trips-empty h2 { margin: 8px 0 0; font-size: 1.8rem; letter-spacing: -.04em; }
.trips-empty p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.55; }
.trips-empty a { margin-top: 10px; padding: 12px 17px; border-radius: 999px; background: var(--forest); color: var(--lime); font-size: .8rem; font-weight: 850; }
.trips-grid { display: grid; gap: 12px; }
.saved-trip { min-height: 150px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); }
.trip-number { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--forest); color: var(--lime); font-size: .72rem; font-weight: 900; }
.trip-date { margin: 0 0 6px; color: var(--teal); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.saved-trip h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.045em; }
.trip-stats { display: flex; gap: 24px; }
.trip-stats span { display: grid; gap: 4px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.trip-stats strong { color: var(--ink); font-size: .9rem; text-transform: none; }
.flyover-launch { grid-column: 2 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--forest); color: var(--lime); font-size: .76rem; font-weight: 850; cursor: pointer; }
.flyover-launch span { font-size: .68rem; }
.flyover-unavailable { grid-column: 2 / -1; justify-self: end; margin: 0; color: var(--muted); font-size: .7rem; }

.flyover-dialog { width: min(1180px, calc(100% - 24px)); max-width: none; height: min(900px, calc(100dvh - 24px)); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 30px; background: var(--paper); color: var(--ink); box-shadow: 0 35px 120px rgba(7,27,25,.42); }
.flyover-dialog::backdrop { background: rgba(7,27,25,.72); backdrop-filter: blur(9px); }
.flyover-shell { height: 100%; display: grid; grid-template-rows: auto minmax(310px, 1fr) auto; }
.flyover-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; background: var(--forest); color: white; }
.flyover-header .eyebrow { margin-bottom: 4px; color: var(--lime); }
.flyover-header h2 { margin: 0; font: 700 clamp(1.45rem, 3vw, 2.2rem)/1 Georgia, serif; letter-spacing: -.035em; }
.flyover-header-actions { display: flex; align-items: center; gap: 8px; }
.flyover-header-actions button { min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); font-size: .72rem; font-weight: 780; cursor: pointer; }
.flyover-header-actions .flyover-close { width: 40px; padding: 0; font-size: 1.45rem; }
.flyover-stage { --flyover-tilt: 38deg; --flyover-bearing: 0deg; --flyover-scale: 1.17; position: relative; min-height: 0; overflow: hidden; background: #cbdad6; perspective: 1200px; }
#flyover-map { position: absolute; inset: -13%; width: 126%; height: 126%; transform: rotateX(var(--flyover-tilt)) rotateZ(var(--flyover-bearing)) scale(var(--flyover-scale)); transform-origin: 50% 50%; transition: transform .32s ease; background: #ccdad7; }
.wander-reduce-motion #flyover-map { transition: none; }
.flyover-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(7,27,25,.23); }
.flyover-hud { position: absolute; z-index: 500; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 7px; pointer-events: none; }
.flyover-hud span { display: grid; gap: 2px; min-width: 92px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(7,27,25,.82); color: rgba(255,255,255,.55); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(9px); }
.flyover-hud strong { color: var(--lime); font-size: .88rem; letter-spacing: 0; }
.flyover-loading { position: absolute; z-index: 600; inset: 0; display: grid; place-items: center; background: rgba(7,27,25,.78); color: var(--lime); font-size: .8rem; font-weight: 850; letter-spacing: .06em; }
.flyover-loading[hidden] { display: none; }
.flyover-credit { position: absolute; z-index: 500; right: 8px; bottom: 7px; padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.76); color: #34423e; font-size: .56rem; }
.flyover-craft { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid white; border-radius: 50%; background: var(--forest); color: var(--lime); box-shadow: 0 5px 16px rgba(7,27,25,.35); }
.flyover-craft span { display: block; transform-origin: center; font-size: 1rem; line-height: 1; }
.flyover-start-marker, .flyover-end-marker { display: grid; place-items: center; width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; background: var(--teal); box-shadow: 0 3px 10px rgba(7,27,25,.25); }
.flyover-end-marker { background: var(--orange); }

.flyover-controls { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: var(--white); }
.camera-panel, .playback-panel { min-width: 0; padding: 18px 20px; }
.camera-panel { border-right: 1px solid var(--line); }
.control-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.control-heading .eyebrow { margin-bottom: 2px; }
.control-heading h3 { margin: 0; font-size: .92rem; }
.follow-heading, .speed-control { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .68rem; font-weight: 760; }
.follow-heading input { accent-color: var(--teal); }
.speed-control select { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 800; }
.angle-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.angle-presets button { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--muted); font-size: .68rem; font-weight: 780; cursor: pointer; }
.angle-presets button small { color: inherit; opacity: .7; }
.angle-presets button.active { border-color: var(--forest); background: var(--forest); color: var(--lime); }
.range-control { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 9px; margin-top: 11px; color: var(--muted); font-size: .68rem; font-weight: 780; }
.range-control input, .progress-control input { width: 100%; accent-color: var(--teal); }
.range-control output { color: var(--ink); text-align: right; }
.progress-control { display: block; margin: 7px 0 13px; }
.playback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.playback-actions button { min-height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--muted); font-size: .68rem; font-weight: 780; cursor: pointer; }
.playback-actions .flyover-play { min-width: 135px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--forest); background: var(--forest); color: var(--lime); }
.flyover-status { min-height: 1em; margin: 10px 0 0; color: var(--muted); font-size: .66rem; }

@media (max-width: 600px) {
    .trips-heading { display: block; }
    .trip-count { width: max-content; margin: -18px 0 28px; }
    .saved-trip { grid-template-columns: auto 1fr; gap: 16px; }
    .trip-stats { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
    .flyover-launch, .flyover-unavailable { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
    .flyover-dialog { width: 100%; height: 100dvh; border-radius: 0; }
    .flyover-shell { grid-template-rows: auto minmax(290px, 44dvh) minmax(0, 1fr); }
    .flyover-header { padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
    .flyover-header-actions > button:first-child { display: none; }
    .flyover-controls { grid-template-columns: 1fr; overflow-y: auto; }
    .camera-panel { border-right: 0; border-bottom: 1px solid var(--line); }
    .camera-panel, .playback-panel { padding: 15px 14px; }
    .flyover-hud span { min-width: 76px; padding: 7px 8px; }
    .flyover-hud { right: 10px; left: 10px; }
    .angle-presets button { flex-direction: column; justify-content: center; padding: 5px; }
    .playback-actions { display: grid; grid-template-columns: repeat(4, 1fr); }
    .playback-actions .flyover-play { grid-column: 1 / -1; width: 100%; }
    .playback-actions button { padding: 0 7px; }
}