:root{font-family:var(--text);color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}header,footer{background:var(--dark);color:var(--on-dark);padding:16px clamp(18px,5vw,75px);display:flex;justify-content:space-between;align-items:center;gap:15px}header a,footer a{color:inherit;text-decoration:none}.brand{display:flex;gap:12px;align-items:center;font-size:20px}.brand em{color:var(--on-dark-accent);font-style:normal}.logo{border:1px solid var(--accent);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font:700 21px var(--display);color:var(--on-dark-accent)}main{max-width:1180px;margin:auto;padding:24px clamp(16px,3vw,38px) 48px;min-height:78vh}footer{flex-wrap:wrap;font-size:14px}h1,h2,h3,p{margin:0 0 12px}h1,h2{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.025em}h1{font-size:clamp(32px,6vw,54px)}h2{font-size:clamp(24px,3.4vw,34px);font-weight:600}h3{font-size:18px}.intro{max-width:700px;padding:22px 0}.intro p,.muted,small{color:var(--muted)}nav,.row,.chips,.actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}nav{justify-content:space-between;margin-bottom:12px}.navlinks{display:flex;gap:7px;flex-wrap:wrap}.badge{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:7px 11px;font-size:13px}.layout{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start}.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(16px,3vw,28px)}.card{margin-top:12px}.map{height:390px;border-radius:22px;position:relative;overflow:hidden;background:var(--surface-2);isolation:isolate;touch-action:pan-y}.map img{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}.map-label{position:absolute;bottom:0;right:0;background:var(--surface);padding:4px 8px;font-size:11px}.map-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:repeating-linear-gradient(36deg,var(--surface-2) 0 24px,var(--surface-2) 25px 27px);color:var(--ink)}.pin{position:absolute;border:2px solid var(--line);background:var(--dark);color:var(--on-dark);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px;transform:translate(-50%,-50%);pointer-events:none}.pin.destination{background:var(--accent)}button,.button{font:inherit;font-weight:700;cursor:pointer;min-height:44px;padding:10px 15px;border:1px solid transparent;border-radius:12px;background:var(--fill);color:var(--on-fill);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:disabled{opacity:.55;cursor:wait}button.outline,.button.outline{background:transparent;border-color:var(--line);color:inherit}.chips button{font-size:13px;background:var(--surface-2);color:var(--ink);padding:8px 11px}.chips button[aria-pressed=true]{background:var(--fill);color:var(--on-fill)}.primary{width:100%;margin-top:12px;min-height:52px}.fields{display:grid;gap:13px;margin:14px 0}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:grid;gap:5px;font-size:14px;font-weight:700}input,select,textarea{width:100%;font:inherit;padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);min-height:46px}textarea{resize:vertical}input[type=checkbox]{width:19px;min-height:19px;margin:0}.check{display:flex;gap:9px;align-items:center;min-height:39px}fieldset{border:1px solid var(--line);border-radius:14px;padding:12px;margin:0;min-width:0}legend{font-weight:700}.notice{margin:12px 0;padding:12px;background:var(--surface-2);border-radius:10px}.error{background:var(--danger-bg);color:var(--danger)}.price{font-size:26px;font-weight:700}.timeline{padding-left:20px}.timeline li{padding:4px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.stats span{background:var(--surface-2);border-radius:12px;padding:12px}.stats b{display:block;font-size:23px}details{margin:10px 0}summary{cursor:pointer;padding:7px 0;font-weight:700}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}@media(max-width:720px){.layout{grid-template-columns:1fr;gap:13px}.map{height:225px}.intro{padding:12px 0}.intro p{margin:0}.two{gap:8px}header{padding:12px 16px}.panel,.card{border-radius:16px}footer{padding:16px}.navlinks button{padding:7px 10px;font-size:13px}}
.demo-map-label{background:transparent;align-items:end}.demo-map{position:absolute;inset:0;background:radial-gradient(ellipse at 53% 45%,var(--accent-soft) 0 13%,transparent 14%),repeating-linear-gradient(35deg,transparent 0 27px,var(--surface-2) 29px 32px,transparent 34px 62px),repeating-linear-gradient(127deg,var(--surface-2) 0 39px,var(--surface-2) 40px 43px,var(--surface-2) 45px 75px)}.demo-map:before{content:'';position:absolute;left:-8%;right:-8%;top:45%;height:25%;border:solid #8cb9bc;border-width:0 0 12px;border-radius:35% 24% 44% 32%;transform:rotate(-12deg)}.demo-map:after{content:'PARIS';position:absolute;left:50%;top:42%;transform:translateX(-50%);font:700 15px 'DM Sans',sans-serif;letter-spacing:.3em;color:var(--ink)}.demo-map-label{font-size:13px;font-weight:700}

.driver-shell {
  max-width: 50rem;
  margin-inline: auto;
}
.driver-shell h1 {
  font: 700 clamp(1.8rem, 6vw, 2.35rem)/1.12 var(--text);
  letter-spacing: -.03em;
  margin-bottom: 1rem;
}
.driver-alert-note {
  margin: .85rem 0 1rem;
  font-size: .9rem;
}
.ride-utility, .ride-more {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: .25rem 0;
}
.ride-utility summary, .ride-more summary {
  padding: .6rem 0;
}
.ride-section {
  margin-top: 1.5rem;
}
.ride-card {
  margin: .65rem 0;
  padding: clamp(.85rem, 3vw, 1.2rem);
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--surface);
  scroll-margin-block: 1.5rem;
  overflow-wrap: anywhere;
}
.ride-card-top, .ride-offer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.ride-card-top {
  font-size: .875rem;
}
.ride-state {
  font-weight: 700;
  color: var(--ink);
}
.ride-route {
  font-size: 1.125rem;
  line-height: 1.4;
}
.ride-destination {
  display: block;
}
.ride-destination::before {
  content: "→ ";
  color: var(--muted);
}
.ride-actions, .ride-more .actions {
  margin: .85rem 0;
}
.ride-primary {
  min-height: 3rem;
}
.ride-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .875rem;
}
.ride-timeline li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
}
.ride-timeline time, .ride-clock {
  font-variant-numeric: tabular-nums;
}
.ride-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: .6rem 0;
  color: var(--muted);
  font-size: .875rem;
}
.ride-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .65rem;
  margin: .45rem 0 .8rem;
}
.ride-inline label {
  flex: 1 1 10rem;
  min-width: 0;
}
.ride-note {
  color: var(--accent-text);
  font-size: .875rem;
}
#ride-offer {
  width: min(calc(100% - 1.5rem), 29rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.2rem;
  color: var(--ink);
  background: var(--surface);
  overflow-wrap: anywhere;
}
#ride-offer::backdrop {
  background: var(--backdrop);
}
.ride-offer-head h3 { margin: 0; }
.ride-clock {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: .5rem;
  min-width: 3.5rem;
  text-align: center;
  font-weight: 700;
  padding: .4rem .45rem;
  white-space: nowrap;
}
.ride-offer-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-top: 1rem;
}
#offer-feedback {
  color: var(--danger);
  margin: .5rem 0;
}
@media(max-width: 520px) {
  .driver-shell .two { grid-template-columns: 1fr; }
  .ride-actions .ride-primary { width: 100%; }
  .driver-shell input { font-size: 16px; }
}