.cars-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.car-feed{position:relative;aspect-ratio:4/3;background:#151d20;display:grid;place-items:center;color:#d0d9ce}.car-feed img,.car-feed video{width:100%;height:100%;object-fit:contain;transform:scaleX(-1) rotate(180deg)}.car-feed p{padding:24px;text-align:center}.panel{margin:24px 0}.panel label{display:block;margin:20px 0 8px}.panel pre{overflow:auto}textarea{width:100%;min-height:80px}@media(max-width:700px){.cars-grid{grid-template-columns:1fr}}[hidden]{display:none!important}
/* Mirror both feeds horizontally, retaining each camera's existing upright orientation. */
#A-image,#B-image,.car-feed video[aria-label="A live camera"],.car-feed video[aria-label="B live camera"]{transform:scaleX(-1)}

.car-options{display:flex;gap:28px;flex-wrap:wrap}.car-options label{display:flex;gap:10px;align-items:center}.car-options span{font-size:.85em;color:#737e70}#drive-pad{margin-top:20px;padding:20px;border:1px solid #d9ddd1;border-radius:10px}#drive-pad:focus{outline:3px solid #658456}.direction-pad{text-align:center}.direction-pad button{min-width:72px;margin:4px;touch-action:none;user-select:none}.cars-grid.single{grid-template-columns:minmax(0,900px);justify-content:center}

#manual .panel-body{padding:18px 24px}#manual h2{margin:0 0 12px}#manual label{display:inline-block;margin:0 8px 0 0}#drive-pad{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:12px;margin-top:12px}#drive-pad .direction-pad{grid-column:2;grid-row:1/3}#drive-pad p{margin:6px 0}#manual{position:static;background:#fffef9;box-shadow:0 3px 14px #0001}@media(max-width:700px){#drive-pad{display:block}}

/* Keep the active rental's camera(s) and manual controls in one viewing area. */
main:has(#manual:not([hidden])) .car-feed{height:clamp(160px,40dvh,420px);aspect-ratio:auto}
main:has(#manual:not([hidden])) .car-feed img,
main:has(#manual:not([hidden])) .car-feed video{position:absolute;inset:0;object-fit:contain}
main:has(#manual:not([hidden])) #manual{margin:0}
main:has(#manual:not([hidden])) #manual .panel-body{padding:16px}
main:has(#manual:not([hidden])) #drive-pad{display:block}
main:has(#manual:not([hidden])) #drive-car{margin-bottom:8px}
main:has(#manual:not([hidden])) #manual-toggle{margin-bottom:8px}
#drive-car:focus-visible{outline:3px solid #829b50;outline-offset:4px}
@media(min-width:1000px){
  main:has(#manual:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:20px;align-content:start;align-items:start;grid-template-areas:"guide guide" "notice notice" "heading heading" "signup signup" "cameras manual" "help help" "connection connection"}
  main:has(#manual:not([hidden]))>.agent-guide{grid-area:guide}
  main:has(#manual:not([hidden]))>#notice{grid-area:notice}
  main:has(#manual:not([hidden]))>.page-heading{grid-area:heading}
  main:has(#manual:not([hidden]))>#signup{grid-area:signup}
  main:has(#manual:not([hidden]))>.cars-grid{grid-area:cameras;min-width:0}
  main:has(#manual:not([hidden]))>#manual{grid-area:manual;min-width:0}
  main:has(#manual:not([hidden]))>.cars-grid+.help{grid-area:help;margin-top:8px}
  main:has(#manual:not([hidden]))>#connection{grid-area:connection;min-width:0}
}
@media(max-width:999px){
  main:has(#manual:not([hidden])) .cars-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  main:has(#manual:not([hidden])) .cars-grid.single{grid-template-columns:minmax(0,1fr)}
  main:has(#manual:not([hidden])) .car-feed{height:clamp(110px,20dvh,200px)}
  main:has(#manual:not([hidden]))>.cars-grid+.help{margin:8px 0}
}