#pilot-ride-area { display: grid; gap: .65rem; margin: .7rem 0 1rem; }
#pilot-ride-area h3, #pilot-ride-area p { margin: 0; }
#pilot-ride-area svg {
  display: block; width: 100%; height: auto; overflow: hidden; border-radius: .95rem;
  border: 1px solid #dfcdc9; background: #fcf4ea;
}
.ride-map-background { fill: #e7ece0; }
.ride-map-layer-hidden { display: none; }
.ride-map-roads-minor, .ride-map-roads-major { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ride-map-roads-minor { stroke: #d9cfc6; stroke-width: 1.45; }
.ride-map-roads-major { stroke: #b9aba0; stroke-width: 3.4; }
.ride-map-background .ride-map-grid { fill: none; stroke: #fff; stroke-width: 8; }
.ride-map-marker { cursor: pointer; outline: none; }
.ride-map-marker circle { fill: #fff9f3; stroke: #84334e; stroke-width: 3; }
.ride-map-marker .ride-map-dot { fill: #84334e; stroke: none; }
.ride-map-marker.in-area circle, .ride-map-marker[aria-pressed="true"] circle { fill: #84334e; }
.ride-map-marker.in-area .ride-map-dot, .ride-map-marker[aria-pressed="true"] .ride-map-dot { fill: #fff; }
.ride-map-marker:focus-visible circle:first-child { stroke: #25252d; stroke-width: 5; }
.ride-map-marker text { fill: #3d2b35; font: 700 19px system-ui, sans-serif; pointer-events: none; }
.ride-map-route {
  fill: none; stroke: #84334e; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 9 7; pointer-events: none;
}
.ride-map-route-note { color: #552037; font-weight: 650; overflow-wrap: anywhere; }
.ride-map-route-real { stroke-dasharray: none; stroke-width: 6; }
#pilot-ride-area > svg[hidden] { display: none; }
.ride-geo-map img { display: block; width: 100%; height: auto; border-radius: .95rem; }
.ride-google-view:not([hidden]) { display: grid; gap: .65rem; }
.ride-google-frame:not([hidden]) { display: block; width: 100%; min-width: 200px; height: clamp(320px, 58vw, 500px); border: 1px solid #dfcdc9; border-radius: .95rem; }
.ride-offer-locations:not([hidden]), .ride-offer-location { display: grid; gap: .75rem; min-width: 0; }
.ride-offer-location { padding: .85rem; border: 1px solid #dfcdc9; border-radius: .8rem; }
.ride-offer-location h4, .ride-offer-location p { margin: 0; overflow-wrap: anywhere; }
.ride-offer-location .ride-offer-preview:not([hidden]) { min-width: 0; height: 300px; }
.ride-offer-existing > summary:not([hidden]) { cursor: pointer; color: #552037; font-weight: 700; }
.ride-offer-existing[open] > label { display: grid; gap: .25rem; margin-block: .5rem; }
.ride-google-results:not([hidden]) { flex: 0 0 100%; background: #fff; border: 1px solid #dfcdc9; border-radius: .7rem; padding: .55rem; }
.ride-google-results ul { display: grid; gap: .35rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.ride-google-results .button { width: 100%; text-align: start; }
.ride-google-attribution { font: 400 .875rem Roboto, sans-serif; color: #5e5e5e; white-space: nowrap; }
.ride-place-form[hidden] { display: none; }
.ride-area-search:not([hidden]) { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; }
.ride-area-search label { display: grid; flex: 1 1 12rem; gap: .25rem; min-width: 0; }
.ride-area-search input { width: 100%; min-width: 0; }
.ride-area-search .button { margin: 0; }
.ride-area-search > p, .ride-area-search .ride-place-results { flex: 0 0 100%; }
.ride-map-fields { display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr) minmax(6.75rem, auto); }
.ride-map-fields label { display: grid; align-content: start; gap: .25rem; }
.ride-map-fields select, .ride-map-fields input, .ride-place-form input, .ride-place-form select { width: 100%; min-width: 0; }
.ride-place-editor { border: 1px solid #dfcdc9; border-radius: .8rem; padding: .65rem; }
.ride-place-editor summary { cursor: pointer; color: #552037; font-weight: 700; }
.ride-place-editor > p, .ride-place-editor > a { display: block; margin: .55rem 0; }
.ride-place-form { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ride-place-form label { display: grid; align-content: start; gap: .2rem; }
.ride-place-form .ride-place-consent { display: flex; align-items: start; grid-column: 1 / -1; }
.ride-place-form .ride-place-consent input { flex: none; width: auto; margin-top: .3rem; }
.ride-place-form p { grid-column: 1 / -1; }
.ride-place-results { display: flex; flex-wrap: wrap; gap: .35rem; grid-column: 1 / -1; }
.ride-place-results:empty { display: none; }

@media (max-width: 520px) {
  .ride-map-fields, .ride-place-form { grid-template-columns: minmax(0, 1fr); }
}