.trip-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 8px;width:100%;padding:11px 12px;margin:0 0 7px;text-align:left;color:#e4ece7;background:#151c19;border:1px solid #2c3b33;border-radius:11px;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.trip-card:hover,.trip-card[aria-pressed="true"]{border-color:#73efbd;background:#1b2c24}
.trip-card:focus-visible{outline:2px solid #73efbd;outline-offset:3px}
.trip-card .trip-time{font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap}
.trip-distance{font-size:11px;line-height:1.4;color:#c8e3d2;white-space:nowrap}
.trip-route{grid-column:1;min-width:0;font-size:10px;line-height:1.4;color:#94a59b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip-card[aria-busy="true"]{cursor:progress;opacity:.65}
.trip-note{margin:5px 0;padding:0 3px;font-size:9px;color:#73867a}
.trip-endpoint{display:flex;align-items:center;filter:drop-shadow(0 2px 3px #0004)}
.trip-endpoint svg{display:block;flex:none}

.trip-duration{grid-column:2;font-size:10px;line-height:1.4;text-align:right;color:#94a59b;white-space:nowrap}
.trip-card .trip-time{font-size:10px;letter-spacing:-.2px}
.trip-card[aria-busy="true"]::after{content:"";position:absolute;left:0;bottom:0;width:45%;height:2px;background:#73efbd;animation:trip-loading 1s ease-in-out infinite}
@keyframes trip-loading{from{transform:translateX(-110%)}to{transform:translateX(240%)}}
@media(prefers-reduced-motion:reduce){.trip-card[aria-busy="true"]::after{animation:none;width:100%;opacity:.5}}

.vehicle-trip-detail{bottom:24px;width:310px;padding:19px;max-width:calc(100vw - 470px);max-height:calc(100dvh - 100px);overflow:auto;background:linear-gradient(140deg,#30372e,#171f18);border-radius:18px;color:#dce4d6;box-shadow:0 8px 35px #0003;z-index:12}
.vehicle-trip-detail h2{font-size:16px;margin:8px 0}.vehicle-trip-detail p{font-size:10px;line-height:1.6;margin:6px 0;color:#9ca995}
.vehicle-trip-detail .trip-detail-route{margin:12px 0;padding-left:15px;border-left:1px solid #7b94794d}.vehicle-trip-detail .trip-detail-route p{position:relative;color:#d0dac9;font-size:11px;margin:8px 0;overflow-wrap:anywhere}
.trip-detail-route p::before{content:"";position:absolute;left:-19px;top:6px;width:7px;height:7px;border-radius:50%;background:#91ad83}.trip-detail-route p:last-child::before{background:#ca9486}
#trip-detail-metrics{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;margin:15px 0}#trip-detail-metrics dt{font-size:9px;color:#92a18a;margin-bottom:5px}#trip-detail-metrics dd{font-size:11px;color:#dce4d6;margin:0;line-height:1.5;overflow-wrap:anywhere}
#trip-detail-status:empty{display:none}#trip-detail-source{font-size:9px;color:#809376}
@media(min-width:851px){.sidebar-collapsed .vehicle-trip-detail{left:24px;max-width:calc(100vw - 48px)}}
@media(min-width:601px) and (max-width:850px){.vehicle-trip-detail{left:354px;max-width:calc(100vw - 378px)}.sidebar-collapsed .vehicle-trip-detail{left:24px;max-width:calc(100vw - 48px)}}
@media(max-width:600px){.vehicle-trip-detail,.sidebar-collapsed .vehicle-trip-detail{left:15px;bottom:18px;width:calc(100vw - 85px);max-width:330px;max-height:45dvh;padding:16px}#trip-detail-metrics{gap:11px 10px}}

/* Wide selected-drive details with lightweight native SVG plots. */
.vehicle-trip-detail{width:700px;max-width:calc(100vw - 470px);padding:16px 20px;max-height:calc(100dvh - 90px)}
.vehicle-trip-detail h2{display:inline-block;margin:7px 12px 3px 0;font-size:15px}.vehicle-trip-detail #trip-detail-date{display:inline-block;margin:0}
.vehicle-trip-detail .trip-detail-route{display:flex;gap:28px;margin:9px 0 6px;border-left:0;padding-left:14px}.vehicle-trip-detail .trip-detail-route p{flex:1;min-width:0;margin:0}
.trip-detail-route p::before{left:-13px;top:5px;width:6px;height:6px}
#trip-detail-metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 12px;margin:12px 0}
#trip-detail-metrics dd{font-size:10px}#trip-detail-metrics dt{font-size:9px;margin-bottom:3px}
.trip-curve-row{border-top:1px solid #ffffff10;padding-top:8px;margin-top:8px}.trip-curve-heading{display:flex;justify-content:space-between;align-items:center;color:#b9c8b0;font-size:9px;margin-bottom:3px}.trip-curve-heading strong{font-weight:400}.trip-curve-heading span{display:flex;align-items:center;gap:5px;color:#91a18c}.trip-curve-heading i{display:inline-block;width:13px;height:2px}.speed-key{background:#79b4ed}.power-key{background:#a7cb97;margin-left:10px}.energy-key{background:#d3b77e}
.trip-chart{min-height:94px;touch-action:pan-y}.trip-chart svg{display:block;width:100%;height:auto;overflow:visible;font:9px sans-serif;fill:#83957e}.trip-chart-grid{stroke:#ffffff0c;stroke-width:1}.trip-chart path{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.trip-speed-line{stroke:#79b4ed}.trip-power-line{stroke:#a7cb97;stroke-dasharray:3 2}.trip-energy-line{stroke:#d3b77e}.trip-chart-zero{stroke:#ffffff24;stroke-dasharray:3 3}.trip-chart-cursor{stroke:#cbd8bf88;stroke-dasharray:2 3;pointer-events:none}
.vehicle-trip-detail #trip-chart-readout{font-size:9px;min-height:14px;color:#b2c5a9;margin:4px 0}.vehicle-trip-detail .trip-energy-method{font-size:8px;color:#7e9275;margin:3px 0}.vehicle-trip-detail #trip-chart-status{font-size:10px;color:#b1bf9d}.vehicle-trip-detail #trip-chart-status:empty{display:none}
@media(min-width:601px) and (max-width:1000px){#trip-detail-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.vehicle-trip-detail,.sidebar-collapsed .vehicle-trip-detail{width:calc(100vw - 30px);max-width:none;max-height:60dvh;padding:14px 16px}#trip-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trip-chart{min-height:60px}}

.vehicle-trip-detail>.small-tag{display:block;margin-bottom:3px}

.vehicle-trip-detail #trip-detail-source{display:inline-flex;align-items:center;gap:9px;padding:6px 10px;margin-top:5px;border:1px solid #ffffff16;border-radius:16px;background:#ffffff05;color:#9eaf95;font-size:10px;cursor:pointer}
.vehicle-trip-detail #trip-detail-source:hover{color:#d5e0cc;background:#ffffff0d}#trip-detail-source:focus-visible{outline:2px solid #9cb987;outline-offset:3px}
.vehicle-trip-detail[data-collapsed="true"]{clip-path:inset(calc(100% - var(--trip-chip-height,38px)) calc(100% - var(--trip-chip-width,196px)) 0 0 round 22px);pointer-events:none;overflow:hidden}

.vehicle-trip-detail[data-collapsed="true"] #trip-detail-source{transform:translate(var(--trip-chip-x,-12px),var(--trip-chip-y,11px));pointer-events:auto}


.vehicle-trip-detail .trip-detail-route p{top:-2px}
.vehicle-trip-detail .trip-detail-route p::before{top:7px}

/* Match the avatar sidebar's 460ms reveal without scaling text or rebuilding plots. */
.vehicle-trip-detail{clip-path:inset(0 0 0 0 round 18px);transition:left 460ms cubic-bezier(.22,1,.36,1),bottom 460ms cubic-bezier(.22,1,.36,1),clip-path 460ms cubic-bezier(.22,1,.36,1)}
.vehicle-trip-detail #trip-detail-source{transition:transform 460ms cubic-bezier(.22,1,.36,1),background 180ms,color 180ms}
@media(prefers-reduced-motion:reduce){.vehicle-trip-detail,.vehicle-trip-detail #trip-detail-source{transition:none!important}}

/* A shared anchor keeps the avatar and trip control stationary in both states. */
.sidebar-collapsed .vehicle-trip-detail{transform:translateZ(0);left:110px;bottom:44px;max-width:calc(100vw - 134px);padding-bottom:54px}
.sidebar-collapsed .vehicle-trip-detail #trip-detail-source{position:fixed;left:8px;bottom:5px;margin:0;transform:none}
@media(max-width:850px){.sidebar-collapsed .vehicle-trip-detail{left:102px;bottom:36px;max-width:calc(100vw - 126px)}}
@media(max-width:600px){.sidebar-collapsed .vehicle-trip-detail{left:90px;bottom:29px;width:calc(100vw - 105px);max-width:none;max-height:min(60dvh,calc(100dvh - 61px));padding-bottom:54px}}

.sidebar-collapsed .vehicle-trip-detail{overflow:hidden}
.sidebar-collapsed .trip-detail-body{max-height:calc(100dvh - 170px);overflow:auto}
@media(max-width:600px){.sidebar-collapsed .trip-detail-body{max-height:calc(60dvh - 90px)}}