:root {
  --navy: #102a43;
  --navy-2: #243b53;
  --blue: #1769aa;
  --blue-dark: #0f548e;
  --blue-soft: #e9f4ff;
  --teal: #1f8a70;
  --teal-soft: #e8f7f3;
  --amber: #b66a00;
  --amber-soft: #fff5df;
  --red: #b42318;
  --red-soft: #fff0ee;
  --ink: #172b3a;
  --muted: #627586;
  --line: #dbe4ea;
  --surface: #ffffff;
  --background: #f4f7f9;
  --shadow: 0 16px 40px rgba(16, 42, 67, .07);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--background); }
body { margin: 0; color: var(--ink); background: var(--background); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: var(--blue); }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.site-header { height: 68px; display: flex; align-items: center; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: -.4px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: linear-gradient(145deg, var(--blue), var(--teal)); border-radius: 9px; font-size: 12px; font-weight: 900; letter-spacing: -.4px; }
.brand-byline { align-self: center; margin-left: -4px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 24px; }
nav a, .link-btn { color: var(--muted); background: none; border: 0; font: inherit; font-size: 14px; font-weight: 650; text-decoration: none; cursor: pointer; padding: 8px 0; }
nav a:hover, .link-btn:hover { color: var(--blue); }
.nav-cta { color: #fff !important; background: var(--blue); border-radius: 8px; padding: 9px 14px !important; }
.inline { display: inline; margin: 0; }
.org-bar { background: var(--navy); color: #fff; }
.org-bar .wrap { min-height: 38px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.org-bar span { color: #cbd9e5; text-transform: capitalize; }
.org-bar span::before { content: "•"; margin-right: 10px; }
main { min-height: calc(100vh - 180px); padding-block: 38px 64px; }
footer { padding-block: 20px 34px; color: var(--muted); font-size: 12px; text-align: center; }
footer a { color: var(--navy); font-weight: 700; }
.legal-page { max-width: 840px; margin: 18px auto 50px; }
.legal-page h1 { margin-bottom: 4px; }
.legal-page h2 { margin-top: 30px; font-size: 20px; }
.legal-page p, .legal-page li { line-height: 1.7; }
.legal-page li + li { margin-top: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { color: var(--navy); font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 10px; }
h2 { color: var(--navy); font-size: 19px; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 10px; }
h3 { color: var(--navy); margin-bottom: 5px; }
.eyebrow { display: block; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.muted, .page-head p, .section-head p { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; margin-bottom: 22px; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 26px; }
.page-head p { margin: 0; }
.back-link { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.back-link:hover { color: var(--blue); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--navy); font: inherit; font-size: 14px; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(16, 42, 67, .12); }
.btn.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.btn.primary:hover { background: var(--blue-dark); }
.btn.success { color: #fff; background: var(--teal); border-color: var(--teal); }
.btn.danger { color: var(--red); border-color: #efb8b3; background: var(--red-soft); }
.btn.full { width: 100%; }
.btn.compact { min-height: 34px; width: auto; padding: 7px 11px; font-size: 12px; white-space: nowrap; }
.alert { max-width: 760px; margin: 0 auto 20px; padding: 13px 16px; border: 1px solid; border-radius: 10px; font-size: 14px; font-weight: 650; }
.success-alert { color: #12624f; background: var(--teal-soft); border-color: #a9dece; }
.error-alert { color: var(--red); background: var(--red-soft); border-color: #efb8b3; }
.trip-form-alert { max-width: none; margin: 0 0 22px; }
.trip-date-invalid { border-color: var(--red) !important; background: var(--red-soft); box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
.has-date-error { color: var(--red); }

label { display: block; color: var(--navy-2); font-size: 13px; font-weight: 700; margin: 0 0 17px; }
label small { display: block; margin-top: 5px; color: var(--muted); font-weight: 500; }
input, select, textarea { display: block; width: 100%; margin-top: 7px; border: 1px solid #cbd7df; border-radius: 8px; background: #fff; color: var(--ink); padding: 11px 12px; font: inherit; font-size: 15px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(23, 105, 170, .14); border-color: var(--blue); }
.address-autocomplete { position: relative; }
.address-suggestions { position: absolute; z-index: 30; top: calc(100% - 10px); right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: 5px; background: #fff; border: 1px solid #b9cbd8; border-radius: 9px; box-shadow: 0 14px 30px rgba(16, 42, 67, .18); }
.address-suggestion { display: block; width: 100%; padding: 10px 11px; color: var(--navy-2); background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; }
.address-suggestion:hover, .address-suggestion.active, .address-suggestion[aria-selected="true"] { color: var(--blue-dark); background: var(--blue-soft); }
fieldset { margin: 0 0 22px; padding: 0; border: 0; }
legend { color: var(--navy-2); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.choice { display: flex; align-items: start; gap: 10px; min-height: 76px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(23, 105, 170, .1); }
.choice input { width: auto; margin: 3px 0 0; }
.choice span { display: grid; gap: 3px; }
.choice small { color: var(--muted); font-weight: 500; }
.wheelchair-type-options { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.wheelchair-type-options .choice { align-items: center; min-height: 62px; }
.fare-estimate { margin-top: 8px; padding: 16px; border: 1px solid #b9d8ca; border-radius: 10px; background: #f4fbf8; }
.fare-estimate-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--navy-2); font-size: 13px; font-weight: 750; }
.fare-estimate-heading strong { color: var(--teal); font-size: 22px; }
.fare-progress { height: 7px; margin: 11px 0 8px; overflow: hidden; background: #dce8e3; border-radius: 999px; }
.fare-progress span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--teal), #51b99e); border-radius: inherit; animation: fare-loading 1.1s ease-in-out infinite; }
.fare-estimate.ready .fare-progress span { width: 100%; animation: none; }
.fare-estimate.error { border-color: #efb8b3; background: var(--red-soft); }
.fare-estimate.error .fare-estimate-heading strong { color: var(--red); font-size: 14px; }
.fare-estimate.error .fare-progress span { background: var(--red); animation: none; }
.fare-estimate.error > small { color: #9f2f2a; font-weight: 650; }
.fare-estimate > small { display: block; color: var(--muted); }
@keyframes fare-loading { from { transform: translateX(-105%); } to { transform: translateX(270%); } }
.form-card { width: min(680px, 100%); margin-inline: auto; padding: clamp(24px, 5vw, 42px); }
.wide-form { width: 100%; }
.form-section { display: grid; grid-template-columns: 220px 1fr; gap: 34px; padding: 28px 0; border-top: 1px solid var(--line); }
.form-section > div:first-child p { color: var(--muted); font-size: 13px; }
.leg-kicker { display: inline-flex; margin-bottom: 7px; padding: 4px 8px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.add-leg-btn { margin-top: 18px; margin-bottom: 4px; border-color: #a8c7df; color: var(--blue); background: var(--blue-soft); }
.extra-legs-list { display: grid; gap: 14px; margin-bottom: 14px; }
.extra-leg { margin-top: 18px; padding: 20px; border: 1px dashed #a8c7df; border-radius: 11px; background: #fbfdff; }
.leg-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.leg-heading .leg-kicker { margin: 0; }
.leg-heading .remove-extra-leg { margin-left: auto; }
.leg-purpose { margin-bottom: 18px; }
.leg-purpose-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.leg-purpose-options label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.leg-purpose-options label:has(input:checked) { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.leg-purpose-options input { width: auto; margin: 0; }
.submit-row { display: flex; justify-content: flex-end; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }

.auth-shell { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(40px, 8vw, 110px); min-height: 600px; }
.auth-copy h1 { max-width: 600px; font-size: clamp(42px, 6vw, 68px); }
.auth-copy > p { max-width: 570px; color: var(--muted); font-size: 18px; }
.feature-list { display: grid; gap: 9px; list-style: none; padding: 0; color: var(--navy-2); font-weight: 650; }
.feature-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; color: #fff; background: var(--teal); border-radius: 50%; font-size: 12px; }
.auth-card { margin: 0; padding: 34px; }
.demo-box { display: grid; gap: 4px; margin-top: 22px; padding: 14px; color: var(--muted); background: var(--background); border-radius: 9px; font-size: 12px; }
.demo-box strong { color: var(--navy); margin-bottom: 3px; }
.demo-box code { color: var(--blue); }
.auth-foot { margin: 20px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.facility-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { display: flex; justify-content: space-between; align-items: center; min-height: 88px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 650; }
.stat strong { color: var(--navy); font-size: 30px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-head h2, .section-head p { margin-bottom: 0; }
.section-head > span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; font-size: 13px; font-weight: 800; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 14px; }
th { padding: 11px 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
td { padding: 15px 12px; border-bottom: 1px solid #edf2f5; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafb; }
td small { display: block; color: var(--muted); margin-top: 2px; }
.trip-link { color: var(--navy); font-weight: 800; text-decoration: none; }
.passenger-cell strong, .schedule-cell strong { display: block; color: var(--navy-2); font-size: 13px; }
.route-cell { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 9px; min-width: 300px; }
.route-cell span { min-width: 0; }
.route-cell small { margin: 0 0 2px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.route-cell strong { display: block; overflow: hidden; color: var(--navy-2); font-size: 12px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.route-cell b { color: var(--blue); }
.mobility-pill { display: inline-flex; padding: 5px 8px; color: var(--navy-2); background: var(--background); border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.trip-link:hover { color: var(--blue); }
.table-actions { display: flex; align-items: center; gap: 6px; }
.table-actions form { margin: 0; }
.price-heading, .price-cell { text-align: center; }
.price-cell, .joined-action-cell { background: #fbfdfc; vertical-align: middle; }
.price-value { color: #16835f; font-size: 16px; white-space: nowrap; }
.price-unavailable { color: var(--muted); }
.joined-action-cell .btn { white-space: nowrap; }
.type-pill, .role-pill { display: inline-flex; padding: 4px 9px; color: var(--navy-2); background: #edf2f5; border-radius: 999px; font-size: 11px; font-weight: 750; text-transform: capitalize; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge-requested { color: var(--amber); background: var(--amber-soft); }
.badge-accepted, .badge-driver_en_route, .badge-driver_arrived, .badge-passenger_onboard { color: #0d624f; background: var(--teal-soft); }
.badge-declined, .badge-cancelled { color: var(--red); background: var(--red-soft); }
.badge-completed { color: var(--blue-dark); background: var(--blue-soft); }
.badge-scheduled { color: var(--blue-dark); background: var(--blue-soft); }
.badge-en_route_to_pickup, .badge-picked_up { color: #0d624f; background: var(--teal-soft); }
.badge-dropped_off { color: var(--blue-dark); background: var(--blue-soft); }
.empty { padding: 35px 20px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px; color: var(--blue); background: var(--blue-soft); border-radius: 50%; }
.empty p { color: var(--muted); margin-bottom: 0; }

.ride-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 22px; align-items: start; }
.ride-title { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 22px; }
.ride-title-status { display: grid; justify-items: end; gap: 7px; }
.ride-code { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 24px; }
.summary-grid div { display: grid; gap: 3px; min-height: 82px; padding: 16px; border-bottom: 1px solid var(--line); }
.summary-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.summary-grid div:nth-last-child(-n + 2) { border-bottom: 0; }
.summary-grid span, .details dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.summary-grid strong { color: var(--navy); }
.summary-grid .summary-wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; border-top: 1px solid var(--line); }
.details { display: grid; grid-template-columns: 140px 1fr; gap: 14px 18px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.details dd { margin: 0; }
.passenger-details { margin-bottom: 24px; }
.itinerary { margin-top: 22px; }
.itinerary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.itinerary-head h2 { margin: 0; }
.itinerary-head > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.leg-card { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfe; margin-bottom: 12px; }
.live-tracking { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
.live-tracking-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.live-tracking-head h2 { margin: 3px 0 0; }
.live-tracking-badge { align-items: center; background: #e7f7ef; border-radius: 999px; color: #087a4b; display: inline-flex; font-size: 12px; font-weight: 800; gap: 7px; padding: 7px 11px; }
.live-tracking-badge i { animation: tracking-pulse 1.6s infinite; background: #18a86b; border-radius: 50%; height: 8px; width: 8px; }
.live-tracking-map { background: #eef3f7; border: 1px solid var(--line); border-radius: 13px; height: 340px; overflow: hidden; }
.live-tracking-details { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 13px; }
.live-tracking-details div { background: #f6f8fa; border-radius: 10px; min-width: 0; padding: 11px; }
.live-tracking-details small, .live-tracking-details strong { display: block; }
.live-tracking-details small { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.live-tracking-details strong { font-size: 13px; overflow-wrap: anywhere; }
.live-tracking-stale { background: #fff4db; border-radius: 9px; color: #8a5a00; font-size: 13px; margin: 10px 0 0; padding: 10px; }
@keyframes tracking-pulse { 50% { opacity: .35; transform: scale(.75); } }
.leg-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.leg-progress { display: inline-flex; margin-left: auto; padding: 4px 9px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 999px; font-size: 10px; font-weight: 800; }
.leg-progress-dropped_off { color: #0d624f; background: var(--teal-soft); }
.leg-number { color: var(--navy); font-size: 13px; font-weight: 800; }
.leg-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.leg-route > div { display: grid; gap: 3px; }
.leg-route > div:last-child { text-align: right; }
.leg-route b { color: var(--blue); }
.leg-route small, .leg-times small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.leg-route strong, .leg-times strong { color: var(--navy-2); font-size: 13px; }
.leg-times { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.leg-times span { display: grid; gap: 2px; }
.leg-driver-indicator { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 11px 13px; color: var(--muted); background: var(--background); border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }
.leg-driver-indicator strong { color: var(--navy); font-size: 12px; }
.leg-driver-indicator.assigned { color: #0d624f; background: var(--teal-soft); border-color: #bce2d8; }
.itinerary-assignment-form { margin: 0; }
.leg-driver-select { margin-top: 10px; }
.leg-driver-select label, .leg-driver-select select { margin: 0; }
.leg-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.privacy-note { margin: 20px 0; padding: 18px; color: var(--navy); background: var(--blue-soft); border-radius: 10px; }
.privacy-note p { color: var(--muted); margin: 5px 0 0; font-size: 13px; }
.ride-actions { margin-top: 20px; }
.ride-actions > a + form { margin-top: 10px; }
.actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.actions form { margin: 0; }
.decline-row { display: flex; align-items: end; gap: 8px; flex: 1; }
.decline-row input { min-width: 210px; margin: 0; }
.status-actions form { display: flex; gap: 10px; align-items: end; }
.status-actions select { margin: 0; }
.manage-drivers-link { color: var(--blue); font-size: 13px; font-weight: 800; text-decoration: none; }
.compact-empty { padding: 16px; text-align: left; }
.timeline { list-style: none; padding: 4px 0 0; margin: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 11px; padding-bottom: 22px; }
.timeline li::after { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li > span { z-index: 1; width: 11px; height: 11px; margin-top: 5px; background: var(--blue); border: 3px solid var(--blue-soft); border-radius: 50%; box-sizing: content-box; }
.timeline strong { color: var(--navy); font-size: 13px; }
.timeline p, .timeline time { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 0; }

.split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: start; }
.member-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.member-list > div:last-child { border-bottom: 0; }
.member-list span:nth-child(2) { display: grid; }
.member-list small { color: var(--muted); }
.driver-list { display: grid; }
.driver-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.driver-row:last-child { border-bottom: 0; }
.driver-row form { margin: 0; }
.driver-identity { display: grid; min-width: 0; }
.driver-identity small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.driver-inactive { opacity: .62; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; color: var(--blue); background: var(--blue-soft); border-radius: 50%; font-weight: 800; }
.document-company { margin-bottom: 22px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.document-slot { display: grid; align-content: start; gap: 16px; padding: 20px; background: #fbfdff; border: 1px solid var(--line); border-radius: 12px; }
.document-slot-head h3 { margin: 2px 0 5px; }
.document-slot-head p { margin: 0; color: var(--muted); font-size: 13px; }
.document-current { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.document-current > span:nth-child(2) { display: grid; min-width: 0; }
.document-current strong { overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.document-current small { color: var(--muted); font-size: 11px; }
.document-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--blue); background: var(--blue-soft); border-radius: 8px; font-size: 10px; font-weight: 900; }
.document-empty { display: grid; gap: 3px; padding: 15px; color: var(--muted); background: var(--background); border-radius: 10px; font-size: 12px; }
.document-empty strong { color: var(--navy-2); font-size: 13px; }
.document-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 0; padding-top: 15px; border-top: 1px solid var(--line); }
.document-upload label, .document-upload input { margin: 0; }
.document-upload input { padding: 8px; font-size: 12px; }
.document-upload > small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.messages-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.7fr); min-height: 680px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.message-sidebar, .message-thread { padding: 0; overflow: hidden; }
.message-sidebar { margin: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.message-sidebar-head { padding: 26px 24px 18px; }
.message-sidebar-head .eyebrow { margin-bottom: 4px; }
.message-sidebar-head h1 { margin: 0; font-size: 30px; }
.message-sidebar-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.message-filters { display: flex; gap: 10px; padding: 0 20px 18px; border-bottom: 1px solid var(--line); }
.message-filters a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; color: var(--navy-2); border-radius: 999px; font-size: 13px; font-weight: 750; text-decoration: none; }
.message-filters a:hover, .message-filters a.active { color: var(--blue); background: var(--blue-soft); }
.message-filters span { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; color: #fff; background: var(--blue); border-radius: 999px; font-size: 10px; }
.message-contacts { display: grid; }
.message-contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 74px; padding: 17px 20px; color: var(--navy); border-bottom: 1px solid var(--line); text-decoration: none; }
.message-contact:last-child { border-bottom: 0; }
.message-contact:hover, .message-contact.active { background: var(--blue-soft); }
.message-contact span:last-child { display: grid; min-width: 0; }
.message-contact strong { overflow: hidden; font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.message-contact small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.message-contact i { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; }
.message-empty-contact { padding: 24px 20px; }
.message-empty-contact p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.message-thread { display: grid; grid-template-rows: auto minmax(330px, 1fr) auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.message-thread-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 94px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.message-thread-head .eyebrow { margin-bottom: 3px; font-size: 9px; }
.message-thread-head h2 { margin: 0; line-height: 1.35; }
.message-live-indicator { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: #0d624f; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.message-live-indicator i { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 3px var(--teal-soft); }
.trip-context-form { margin-left: auto; }
.trip-context-form label { min-width: 270px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; text-transform: uppercase; }
.trip-context-form select { margin-top: 5px; padding: 9px 36px 9px 12px; color: var(--navy); font-size: 13px; font-weight: 700; }
.message-history { display: flex; flex-direction: column; gap: 18px; min-height: 420px; overflow-y: auto; padding: 30px 28px; background: #f8fafb; }
.message-bubble { width: min(76%, 570px); padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px 13px 13px 3px; background: #fff; box-shadow: 0 5px 16px rgba(16, 42, 67, .05); }
.message-bubble.mine { align-self: flex-end; color: #fff; border-color: var(--blue); border-radius: 13px 13px 3px 13px; background: var(--blue); }
.message-bubble > div { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; }
.message-bubble time, .message-bubble > small { color: var(--muted); font-size: 10px; }
.message-bubble.mine time, .message-bubble.mine > small { color: #d9ecfb; }
.message-bubble p { margin: 8px 0 6px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-composer { padding: 22px 26px 24px; border-top: 1px solid var(--line); }
.message-composer label { margin-bottom: 14px; }
.message-composer textarea { min-height: 64px; border-radius: 20px; background: var(--background); }
.message-composer > div { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.message-composer > div small { color: var(--muted); line-height: 1.45; }
.message-empty { margin: auto; }
.message-empty p { max-width: 560px; margin-inline: auto; line-height: 1.6; }
.message-no-thread { min-height: 300px; display: grid; place-content: center; }
.notification-list { padding: 0; overflow: hidden; }
.notification-list > a { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 18px 22px; color: var(--navy); border-bottom: 1px solid var(--line); text-decoration: none; }
.notification-list > a:last-child { border-bottom: 0; }
.notification-list > a:hover { background: #f8fafb; }
.notification-list a span:nth-child(2) { display: grid; }
.notification-list small { color: var(--muted); margin-top: 4px; }
.notification-dot { width: 9px; height: 9px; margin-top: 6px; background: var(--blue); border-radius: 50%; }
.error-page { max-width: 540px; margin: 50px auto; text-align: center; }
.error-page > strong { display: block; color: var(--blue); font-size: 52px; }
.error-page p { color: var(--muted); }

@media (max-width: 860px) {
  .auth-shell, .ride-layout, .split, .messages-layout, .document-grid { grid-template-columns: 1fr; }
  .messages-layout { min-height: 0; }
  .message-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-shell { min-height: 0; }
  .auth-copy { display: none; }
  .auth-card { width: min(500px, 100%); margin-inline: auto; }
  .form-section { grid-template-columns: 1fr; gap: 8px; }
  .ride-layout aside { order: 2; }
}

@media (max-width: 650px) {
  .live-tracking-map { height: 280px; }
  .live-tracking-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrap { width: min(100% - 24px, 1160px); }
  .site-header { height: auto; min-height: 64px; }
  .header-inner { align-items: flex-start; padding-block: 14px; }
  nav { justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
  nav a { font-size: 12px; }
  .brand-name, .brand-byline { display: none; }
  main { padding-top: 25px; }
  .page-head { align-items: stretch; flex-direction: column; }
  .page-head .btn { align-self: flex-start; }
  .stats { grid-template-columns: 1fr; gap: 9px; }
  .stat { min-height: 68px; }
  .field-grid, .choice-grid, .summary-grid { grid-template-columns: 1fr; }
  .leg-purpose-options { grid-template-columns: 1fr; }
  .summary-grid div, .summary-grid div:nth-child(odd), .summary-grid div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-grid div:last-child { border-bottom: 0; }
  .details { grid-template-columns: 1fr; gap: 4px; }
  .details dd { margin-bottom: 12px; }
  .leg-route { grid-template-columns: 1fr; }
  .leg-route > div:last-child { text-align: left; }
  .leg-route b { transform: rotate(90deg); width: fit-content; }
  .actions, .decline-row, .status-actions form { align-items: stretch; flex-direction: column; }
  .driver-row { grid-template-columns: auto minmax(0, 1fr); }
  .driver-row .role-pill, .driver-row form { grid-column: 2; justify-self: start; }
  .document-upload { grid-template-columns: 1fr; }
  .document-upload > small { grid-column: 1; }
  .decline-row input { min-width: 0; }
  .btn { width: 100%; }
  .table-actions .btn { width: auto; }
  .submit-row .btn { width: auto; }
  .message-bubble { width: 90%; }
  .message-thread-head { align-items: stretch; flex-direction: column; gap: 16px; padding: 20px; }
  .trip-context-form, .trip-context-form label { width: 100%; min-width: 0; }
  .message-history { padding: 24px 18px; }
  .message-composer { padding: 20px; }
  .message-composer > div { align-items: stretch; flex-direction: column; gap: 12px; }
  .card { padding: 18px; border-radius: 12px; }
  .message-sidebar, .message-thread { padding: 0; }
  .form-card { padding: 22px 18px; }
}

.state-picker-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.state-picker-field legend { font-weight: 600; margin-bottom: 7px; }
.state-picker-field small { display: block; margin-top: 7px; color: var(--muted); }
.state-picker { border: 1px solid #cbd7df; border-radius: 8px; background: #fff; }
.state-picker summary { padding: 11px 12px; cursor: pointer; font-size: 15px; }
.state-picker summary:focus-visible { outline: 3px solid rgba(23, 105, 170, .14); border-radius: 8px; }
.state-picker-options { max-height: 260px; overflow-y: auto; border-top: 1px solid #cbd7df; padding: 8px; }
.state-picker-options label { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.state-picker-options label:hover { background: var(--blue-soft); }
.state-picker-options input { width: 18px; height: 18px; margin: 0; padding: 0; flex-shrink: 0; }