:root {
  --rides-route-dash: 6 6;
  --rides-space: 1rem;
  --rides-gap: 1.5rem;
  --rides-section-gap: 3rem;
  --rides-width: 64rem;
  --rides-dialog-width: 42rem;
  --rides-content-size: 1rem;
  --rides-meta-size: 0.875rem;
  --rides-title-size: clamp(2rem, 5vw, 3.25rem);
  --rides-section-size: 1.5rem;
  --rides-small-title: 1.125rem;
  --rides-control-size: 2.75rem;
  --rides-icon-size: 1.125rem;
  --rides-icon-stroke: 1.75;
  --rides-map-height: 22rem;
  --rides-dialog-height: 90dvh;
  --rides-error: #862d22;
  --rides-backdrop: rgba(31, 42, 31, 0.55);
}
.rides-shell { max-width: var(--rides-width); margin: auto; padding: var(--rides-gap); font-size: var(--rides-content-size); line-height: 1.5; }
.rides-shell h1 { font-size: var(--rides-title-size); margin: var(--rides-space) 0; }
.rides-shell h2, .rides-dialog h2 { font-size: var(--rides-section-size); margin: 0; }
.rides-shell h3, .rides-dialog h3 { font-size: var(--rides-small-title); }
.rides-section-head, .rides-dialog-head, .rides-row-actions { display: flex; align-items: center; gap: var(--rides-space); flex-wrap: wrap; }
.rides-intro { margin-block: var(--rides-section-gap); max-width: var(--rides-dialog-width); }
.rides-eyebrow { color: var(--accent); font-weight: var(--font-weight-semibold); }
.rides-meta, .rides-footer { font-size: var(--rides-meta-size); color: var(--muted); }
.rides-shell section { margin-block: var(--rides-section-gap); }
.rides-section-head, .rides-dialog-head { justify-content: space-between; margin-bottom: var(--rides-space); }
.rides-list { display: grid; gap: var(--rides-space); margin-bottom: var(--rides-space); }
.rides-row { border-block-end: var(--control-border-width) solid var(--line); padding-block: var(--rides-space); }
.rides-row h3, .rides-row p { margin-block: var(--space-sm); }
.rides-visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--rides-space); row-gap: var(--space-sm); }
.rides-visit-heading, .rides-visit-details, .rides-visit-detail, .rides-visit-schedule, .rides-visit-actions { display: flex; align-items: center; }
.rides-visit-heading { gap: var(--space-md); flex-wrap: wrap; }
.rides-visit h3, .rides-visit p { margin: 0; }
.rides-visit-schedule, .rides-visit-details { grid-column: 1 / -1; }
.rides-visit-schedule, .rides-visit-detail { gap: var(--space-sm); }
.rides-visit-details { flex-wrap: wrap; gap: var(--space-sm) var(--rides-gap); }
.rides-visit-status { color: var(--muted); font-size: var(--rides-meta-size); padding-inline: var(--space-sm); background: var(--panel); border-radius: var(--radius-sm); }
.rides-icon { width: var(--rides-icon-size); height: var(--rides-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: var(--rides-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.rides-visit-schedule > svg { color: var(--muted); }
.rides-visit-actions { gap: var(--space-xs); }
.rides-shell .rides-icon-action { width: var(--rides-control-size); min-width: var(--rides-control-size); height: var(--rides-control-size); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted); }
.rides-shell .rides-icon-action:hover, .rides-shell .rides-icon-action:focus-visible { background: var(--panel); color: var(--ink); }
.rides-shell .rides-icon-action::after { top: auto; bottom: calc(100% + var(--space-xs)); right: 0; transform: none; padding: var(--space-sm) var(--space-md); border: var(--control-border-width) solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow); font-size: var(--rides-meta-size); font-weight: var(--font-weight-semibold); transition: none; }
.rides-shell .rides-icon-action:hover::after, .rides-shell .rides-icon-action:focus::after { opacity: 1; transform: none; }
@media (max-width: 42rem) {
  .rides-visit { grid-template-columns: minmax(0, 1fr); }
  .rides-visit-actions { grid-row: 4; justify-self: end; }
}
.rides-welcome { background: var(--panel); border-radius: var(--radius-lg); padding: var(--rides-gap); }
.rides-footer { border-top: var(--control-border-width) solid var(--line); margin-top: var(--rides-section-gap); padding-top: var(--rides-gap); }
.rides-shell button, .rides-dialog button, .rides-shell .link-button { min-height: var(--rides-control-size); }
.rides-dialog { width: min(var(--rides-dialog-width), calc(100% - var(--rides-space) * 2)); max-height: var(--rides-dialog-height); --rides-dialog-padding: var(--rides-gap); padding: var(--rides-dialog-padding); background: var(--paper); color: var(--ink); border: var(--control-border-width) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); font-size: var(--rides-content-size); }
.rides-dialog::backdrop { background: var(--rides-backdrop); }
.rides-dialog form, .rides-shell form, .rides-picker { display: grid; gap: var(--rides-space); }
.rides-dialog label, .rides-shell form label { display: grid; gap: var(--space-xs); }
.rides-dialog input, .rides-dialog select, .rides-dialog textarea, .rides-shell form input, .rides-shell form select { width: 100%; min-height: var(--rides-control-size); font: inherit; border: var(--control-border-width) solid var(--line); border-radius: var(--radius-md); padding: var(--space-md); color: var(--ink); background: var(--panel); }
.rides-dialog .rides-check, .rides-shell .rides-check { display: flex; align-items: center; gap: var(--space-md); min-height: var(--rides-control-size); }
.rides-check input { width: auto !important; min-height: auto !important; accent-color: var(--accent); }
.rides-dialog fieldset, .rides-shell fieldset { min-width: 0; margin: 0; border: var(--control-border-width) solid var(--line); border-radius: var(--radius-md); padding: var(--rides-space); }
.rides-dialog details, .rides-shell details { margin-block: var(--rides-space); }
.rides-dialog summary, .rides-shell summary { cursor: pointer; min-height: var(--rides-control-size); padding-block: var(--space-md); font-weight: var(--font-weight-semibold); }
.rides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rides-space); }
.rides-time-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: var(--rides-space); }
.rides-time-row button { grid-column: 1 / -1; justify-self: start; }
.rides-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--rides-space); }
.rides-picker-results { display: grid; gap: var(--space-sm); }
.rides-picker-results button { text-align: left; }
.rides-picker-selected { color: var(--accent); margin: 0; }
.rides-feedback { background: var(--panel); padding: var(--rides-space); border-inline-start: var(--border-emphasis) solid var(--accent); }
.rides-feedback[data-error="true"], .rides-form-error { color: var(--rides-error); }
.rides-form-error { padding: var(--space-md); border-inline-start: var(--border-emphasis) solid var(--rides-error); }
.rides-map { height: var(--rides-map-height); border-radius: var(--radius-md); }
.rides-messages { display: grid; gap: var(--space-md); max-height: var(--rides-map-height); overflow: auto; }
.rides-message { padding: var(--space-md); background: var(--panel); border-radius: var(--radius-md); overflow-wrap: anywhere; white-space: pre-wrap; }
.rides-message[data-own="true"] { border-inline-start: var(--border-emphasis) solid var(--accent); }
.rides-pilots { max-height: var(--rides-map-height); overflow: auto; }
.rides-shell a:focus-visible, .rides-shell button:focus-visible, .rides-shell input:focus-visible, .rides-shell select:focus-visible, .rides-shell summary:focus-visible, .rides-dialog :focus-visible { outline: var(--border-emphasis) solid var(--accent); outline-offset: var(--space-2xs); }
@media (max-width: 42rem) {
  .rides-shell { padding: var(--rides-space); }
  .rides-grid { grid-template-columns: minmax(0, 1fr); }
  .rides-dialog { --rides-dialog-padding: var(--rides-space); }
  .rides-time-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rides-time-row label:first-child { grid-column: 1 / -1; }
}

.rides-dialog .leaflet-control-zoom a { width: var(--rides-control-size); height: var(--rides-control-size); line-height: var(--rides-control-size); }

:root { --rides-estimate-weight: 1.25rem; }
#ride-wizard [data-step] { display: grid; gap: var(--rides-space); }
#ride-wizard [data-step][hidden] { display: none; }
#ride-wizard [data-step] p { margin: 0; }
#ride-wizard h3 { font-size: var(--rides-section-size); margin: 0; }
#ride-wizard input[type="range"] { padding: 0; accent-color: var(--accent); border: 0; }
#ride-wizard output { color: var(--accent); font-weight: var(--font-weight-semibold); }
.rides-range-caption, .rides-origin-summary { display: flex; justify-content: space-between; gap: var(--rides-space); flex-wrap: wrap; }
.rides-range-caption { font-size: var(--rides-meta-size); color: var(--muted); }
.rides-wizard-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rides-space); margin-block: var(--rides-space); }
.rides-wizard-time label:last-of-type { grid-column: 1 / -1; }
.rides-wizard-time button { grid-column: 1 / -1; justify-self: start; }
.rides-estimate { padding: var(--rides-space); background: var(--panel); border-radius: var(--radius-md); }
.rides-cost-total { font-size: var(--rides-estimate-weight); font-weight: var(--font-weight-semibold); }
#ride-view-choice { display: inline-flex; gap: 0; padding: var(--space-2xs); border: var(--control-border-width) solid var(--line); border-radius: var(--rides-pill-radius); background: var(--panel); }
#ride-view-choice button { border: 0; border-radius: var(--rides-pill-radius); padding-inline: var(--space-md); }
#ride-view-choice [aria-pressed="true"] { background: var(--accent); color: var(--paper); font-weight: var(--font-weight-semibold); }
.rides-match-table-wrap { overflow-x: auto; }
.rides-match-table { width: 100%; border-collapse: collapse; }
.rides-match-table caption { text-align: left; font-weight: var(--font-weight-semibold); padding-block: var(--rides-space); }
.rides-match-table th, .rides-match-table td { padding: var(--space-md); text-align: left; vertical-align: top; border-bottom: var(--control-border-width) solid var(--line); }
.rides-match-comment { white-space: pre-wrap; overflow-wrap: anywhere; }
.rides-cards-label { display: none; }
@media (max-width: 42rem) {
  .rides-table-label { display: none; }
  .rides-cards-label { display: inline; }
  .rides-match-table-wrap { overflow: visible; }
  .rides-match-table, .rides-match-table tbody { display: grid; gap: var(--rides-space); }
  .rides-match-table thead, .rides-match-table caption { display: none; }
  .rides-match-table tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); padding: var(--rides-space); background: var(--panel); border: var(--control-border-width) solid var(--line); border-radius: var(--radius-lg); }
  .rides-match-table td { min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .rides-match-table td:first-child, .rides-match-table td:nth-child(2), .rides-match-table td:last-child { grid-column: 1 / -1; }
  .rides-match-table td p { margin-block: var(--space-sm); }
}
@media (max-width: 42rem) { .rides-wizard-time { grid-template-columns: minmax(0, 1fr); } }
.rides-match-table-wrap:focus-visible { outline: var(--border-emphasis) solid var(--accent); outline-offset: var(--space-2xs); }
:root { --rides-pill-radius: 999px; }
.rides-shell .link-button { padding: var(--space-md) var(--rides-space); border: var(--control-border-width) solid var(--line); border-radius: var(--rides-pill-radius); }
.rides-shell .rides-contact-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); text-align: center; white-space: nowrap; }
#ride-wizard .rides-form-actions { position: sticky; bottom: calc(-1 * var(--rides-dialog-padding)); margin-inline: calc(-1 * var(--rides-dialog-padding)); background: var(--paper); padding: var(--rides-space) var(--rides-dialog-padding) var(--rides-dialog-padding); border-top: var(--control-border-width) solid var(--line); }
#ride-wizard-next { flex: 1; }
.rides-wizard-close { min-width: var(--rides-control-size); padding-inline: var(--space-md); font-size: var(--rides-section-size); }

.rides-estimate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rides-space); }
.rides-estimate-note { grid-column: 1 / -1; }
@media (max-width: 42rem) { .rides-estimate-grid { grid-template-columns: minmax(0, 1fr); } }


:root {
  --rides-match-map-height: 30rem;
  --rides-marker-outline: 3px;
  --rides-endpoint-height: 3.5rem;
  --rides-map-panel-width: 18rem;
  --rides-marker-count-size: 1.5rem;
  --rides-own-route-color: #1d4ed8;
  --rides-alt-route-color: #b45309;
  --rides-person-color: #7e22ce;
  --rides-alt-route-dash: 8 6;
}
.rides-map-explorer { display: grid; grid-template-columns: minmax(0, 1fr) var(--rides-map-panel-width); gap: var(--rides-space); align-items: start; }
.rides-match-map { height: var(--rides-match-map-height); width: 100%; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.rides-map-panel { min-width: 0; padding: var(--rides-space); background: var(--paper); border: var(--control-border-width) solid var(--line); border-radius: var(--radius-md); }
.rides-person-marker { width: var(--rides-control-size); height: var(--rides-control-size); display: grid; place-items: center; margin-left: calc(var(--rides-control-size) / -2); margin-top: calc(var(--rides-control-size) / -2); background: var(--rides-person-color); color: var(--paper); border: var(--rides-marker-outline) solid var(--paper); border-radius: var(--rides-pill-radius); font-size: var(--rides-content-size); font-weight: var(--font-weight-semibold); }
.rides-person-marker.is-selected::before { content: "✓"; }
.rides-marker-count { position: absolute; top: calc(var(--space-xs) * -1); right: calc(var(--space-xs) * -1); display: grid; place-items: center; width: var(--rides-marker-count-size); height: var(--rides-marker-count-size); background: var(--paper); color: var(--rides-person-color); border: var(--control-border-width) solid var(--rides-person-color); border-radius: var(--rides-pill-radius); font-size: var(--rides-meta-size); }
.rides-person-marker:focus-visible { outline: var(--border-emphasis) solid var(--ink); outline-offset: var(--space-2xs); }
.rides-map-info { min-width: 0; overflow-wrap: anywhere; white-space: normal; color: var(--ink); font-family: inherit; font-size: var(--rides-meta-size); }
.rides-map-info p { margin-block: var(--space-sm); }
.rides-map-panel article + article { margin-top: var(--rides-space); border-top: var(--control-border-width) solid var(--line); padding-top: var(--rides-space); }
.rides-map-view .leaflet-control-zoom a { width: var(--rides-control-size); height: var(--rides-control-size); line-height: var(--rides-control-size); }
.rides-map-view .rides-map-info .accent-button { color: var(--paper); }
.rides-map-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--rides-space); align-items: center; padding: var(--space-sm) var(--space-md); border-top: var(--control-border-width) solid var(--line); font-size: var(--rides-meta-size); }
.rides-map-legend > span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.rides-map-key { display: inline-block; width: var(--rides-marker-count-size); border-top: var(--rides-marker-outline) solid var(--rides-own-route-color); }
.rides-map-key-alternative { border-color: var(--rides-alt-route-color); border-top-style: dashed; }
.rides-map-key-person { width: var(--space-md); height: var(--space-md); border: 0; border-radius: var(--rides-pill-radius); background: var(--rides-person-color); }
@media (max-width: 54rem) { .rides-map-explorer { grid-template-columns: minmax(0, 1fr); } }

.rides-endpoint-marker { width: var(--rides-control-size); height: var(--rides-endpoint-height); margin-left: calc(var(--rides-control-size) / -2); margin-top: calc(var(--rides-endpoint-height) * -1); pointer-events: none; }
.rides-endpoint-marker svg { width: 100%; height: 100%; overflow: visible; }
.rides-endpoint-marker path { fill: var(--rides-own-route-color); stroke: var(--paper); stroke-width: var(--rides-marker-outline); }
.rides-endpoint-marker circle { fill: var(--paper); }

.rides-day-filter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); min-width: 0; }
.rides-day-filter select { width: auto; min-width: 0; max-width: 100%; min-height: var(--rides-control-size); padding: var(--space-xs) var(--space-md); border-color: var(--line); background: var(--paper); }

.rides-match-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--rides-space); margin-block: var(--rides-space); }
.rides-map-frame { min-width: 0; background: var(--paper); border: var(--control-border-width) solid var(--line); border-radius: var(--radius-md); }
.rides-map-legend .rides-map-privacy-note { margin-left: auto; color: var(--muted); }

.rides-access-shell { max-width: var(--rides-dialog-width); padding: var(--rides-gap); }
.rides-access-shell h1 { font-size: var(--rides-title-size); }
.rides-access-shell form { margin-block: var(--rides-gap); }
.rides-shell textarea { width: 100%; font: inherit; border: var(--control-border-width) solid var(--line); border-radius: var(--radius-md); padding: var(--space-md); color: var(--ink); background: var(--panel); resize: vertical; }
.rides-invitation-emails { max-height: var(--rides-map-height); overflow-y: auto; overflow-wrap: anywhere; }
.rides-invitation-row { display: flex; align-items: center; justify-content: space-between; gap: var(--rides-space); flex-wrap: wrap; }
.rides-invitation-row strong { overflow-wrap: anywhere; }
#ride-invite-preview { margin-block: var(--rides-gap); }