/* A compact driving console: white brand dock, search lane, and section controls. */
.cockpit { background: #081b38; color: #e8f0ff; border-bottom: 0; padding: 14px 0 0; position: relative; z-index: 2; }
.cockpit-frame { display: grid; grid-template-columns: 192px minmax(0,1fr); grid-template-rows: 64px auto; gap: 0 28px; }
.cockpit-brand { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; color: var(--color-primary); border-radius: 14px 14px 0 0; padding: 9px 14px 17px; position: relative; }
.cockpit-brand::after { content: ''; position: absolute; bottom: 0; right: 18%; left: 18%; height: 4px; background: var(--color-accent); border-radius: 4px 4px 0 0; }
.cockpit-brand img { width: 162px; height: auto; }
.cockpit-brand > span { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-top: 4px; color: #586981; }
.cockpit-brand i { width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; }
.cockpit-controls { display: flex; gap: 16px; align-items: center; min-width: 0; padding-bottom: 10px; }
.cockpit-search { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0 10px 0 7px; background: #152d4e; border: 1px solid #365170; border-radius: 9px; transition: border-color .2s, background .2s; }
.cockpit-search:focus-within { background: #1b385f; border-color: #ff9c47; }
.cockpit-search > .icon { width: 19px; color: #a8bddb; }
.cockpit-search input { border: 0; background: transparent; color: white; font-size: 14px; padding: 10px 0; outline: none; }
.cockpit-search input::placeholder { color: #c3d0e4; }
.cockpit-search button { display: grid; place-items: center; min-width: 36px; min-height: 36px; background: #ff9438; color: #081b38; border: 0; border-radius: 6px; }
.cockpit-search button .icon { width: 19px; }
.cockpit-garage { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: #fff; font-size: 13px; }
.cockpit-garage > .icon { width: 29px; height: 29px; color: #ffad62; }
.cockpit-garage small { display: block; font-size: 10px; color: #b1c3de; }
.cockpit-account, .cockpit-toggle { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; background: #152d4e; border: 1px solid #365170; border-radius: 9px; color: #e8f0ff; }
.cockpit-toggle { display: none; }
.cockpit a:hover { color: #ffad62; }
.cockpit :focus-visible { outline-color: #ffad62; }
.cockpit-navigation { position: relative; display: flex; align-items: stretch; gap: 3px; padding: 8px 0; border-top: 1px solid #2b4260; min-width: 0; }
.cockpit-navigation a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 11px; border-radius: 6px; color: #c5d2e7; white-space: nowrap; font-size: 12px; min-height: 44px; }
.cockpit-navigation .icon { width: 17px; height: 17px; color: #8eabcd; }
.cockpit-navigation a[aria-current] { color: #fff; background: #213e64; }
.cockpit-navigation a[aria-current]::after { content: ''; position: absolute; bottom: 0; right: 30%; left: 30%; height: 3px; background: #ff9438; border-radius: 3px; }
.cockpit-navigation a[aria-current] .icon { color: #ffad62; }
.cockpit-navigation .cockpit-assistant { margin-inline-start: auto; color: #ffbd83; }
.cockpit-navigation .cockpit-assistant .icon { color: #ffad62; }
.cockpit-indicator { display: none; position: absolute; top: 8px; bottom: 8px; left: 0; background: #213e64; border: 1px solid #49617f; border-radius: 7px; pointer-events: none; transition: transform .25s ease, width .25s ease, opacity .15s; opacity: 0; }
.cockpit.is-enhanced .cockpit-indicator { display: block; }
.cockpit.is-enhanced .cockpit-navigation a[aria-current] { background: transparent; }
@media(max-width:1180px) and (min-width:761px) {
    .cockpit-frame { grid-template-columns: 156px minmax(0,1fr); gap: 0 18px; }
    .cockpit-brand img { width: 138px; }
    .cockpit-navigation a { padding-inline: 7px; font-size: 11px; gap: 5px; }
    .cockpit-garage small { display: none; }
}
@media(max-width:940px) and (min-width:761px) {
    .cockpit-navigation a { flex-direction: column; gap: 3px; flex: 1; padding: 5px 3px; font-size: 10px; }
}
@media(max-width:760px) {
    .cockpit { padding: 0; }
    .cockpit-frame { width: 100%; grid-template-columns: 124px minmax(0,1fr); grid-template-rows: auto auto; gap: 0 12px; padding: 12px 16px 0; }
    .cockpit-brand { grid-row: 1; padding: 4px 8px; border-radius: 9px; align-self: start; }
    .cockpit-brand img { width: 108px; }
    .cockpit-brand > span, .cockpit-brand::after { display: none; }
    .cockpit-controls { display: contents; }
    .cockpit-garage { grid-column: 2; grid-row: 1; align-self: center; justify-self: start; padding-inline-start: 6px; }
    .cockpit-garage > .icon { width: 23px; height: 23px; }
    .cockpit-garage small, .cockpit-account { display: none; }
    .cockpit.is-enhanced .cockpit-toggle { display: grid; grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
    .cockpit-search { grid-column: 1 / -1; margin: 12px 0; }
    .cockpit-search input { font-size: 16px; padding-block: 8px; }
    .cockpit-navigation { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 12px 0; }
    .cockpit.is-enhanced .cockpit-navigation { display: none; }
    .cockpit.is-enhanced .cockpit-navigation.is-open { display: grid; }
    .cockpit-navigation a { justify-content: flex-start; background: #152d4e; padding: 12px; }
    .cockpit-navigation .cockpit-assistant { margin: 0; }
    .cockpit.is-enhanced .cockpit-navigation a[aria-current] { background: #213e64; }
    .cockpit.is-enhanced .cockpit-indicator { display: none; }
}
@media(max-width:360px) {
    .cockpit-frame { grid-template-columns: 105px minmax(0,1fr); gap: 0 8px; }
    .cockpit-brand img { width: 90px; }
    .cockpit-garage { gap: 5px; padding: 0; font-size: 12px; }
    .cockpit-garage > .icon { width: 20px; }
    .cockpit-toggle { width: 38px; height: 38px; }
}
@media(prefers-reduced-motion:reduce) { .cockpit-indicator, .cockpit-search { transition: none; } }

/* Two aerodynamic ribbons form the lower edge; the entrance settles after one pass. */
.cockpit-waves { position: absolute; inset: auto 0 -34px; height: 36px; overflow: hidden; pointer-events: none; }
.cockpit-waves svg { display: block; width: 112%; max-width: none; height: 100%; margin-left: -6%; direction: ltr; }
.cockpit-wave-back, .cockpit-wave-glint { animation: cockpit-swell-back 3.8s ease-in-out both; transform-origin: center top; }
.cockpit-wave-front { animation: cockpit-swell-front 3.8s ease-in-out both; transform-origin: center top; }
@keyframes cockpit-swell-back {
    0% { transform: translateX(-25px) scaleY(.55); }
    40% { transform: translateX(22px) scaleY(1.12); }
    75% { transform: translateX(-10px) scaleY(.9); }
    100% { transform: translateX(0) scaleY(1); }
}
@keyframes cockpit-swell-front {
    0% { transform: translateX(24px) scaleY(1.3); }
    45% { transform: translateX(-18px) scaleY(.75); }
    75% { transform: translateX(8px) scaleY(1.08); }
    100% { transform: translateX(0) scaleY(1); }
}
@media(max-width:760px) {
    .cockpit-waves { height: 24px; bottom: -22px; }
}
@media(prefers-reduced-motion:reduce) {
    .cockpit-wave-back, .cockpit-wave-glint, .cockpit-wave-front { animation: none; }
}