:root{
  --ink:#1f2430;--ink-2:#454c5c;--muted:#6b7280;--line:#e5e7ec;--line-2:#d5d9e1;
  --bg:#f4f5f8;--card:#fff;--brand:#ff3f7f;--brand-fill:#d6246a;--brand-ink:#c81e5a;--brand-soft:#fff0f5;
  --ok:#0b7f50;--ok-soft:#e8f7f0;--radius:18px;
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html{scroll-padding:16px 0 calc(100px + env(safe-area-inset-bottom,0px))}
body{margin:0;background:var(--bg);-webkit-tap-highlight-color:transparent}
a{color:var(--brand-ink)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero */
.hero{background:radial-gradient(120% 90% at 100% 0,#3a2140 0,transparent 55%),var(--ink);color:#fff;padding:0 16px 48px}
header{max-width:720px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;padding-top:max(16px,env(safe-area-inset-top))}
.brand{display:flex;line-height:0}.brand img{height:29px;width:auto}
.tag{font-size:12px;font-weight:600;color:#fff;background:#ffffff1f;border:1px solid #ffffff26;border-radius:99px;padding:6px 12px}
.intro{max-width:720px;margin:auto;padding:20px 0 0}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brand)}
h1{font-size:clamp(28px,7.5vw,60px);letter-spacing:-.035em;line-height:1.05;margin:8px 0 8px;font-weight:800}
h1 em{font-style:normal;color:var(--brand)}
.intro p{margin:0;max-width:440px;color:#c9cdd6;font-size:14px;line-height:1.55}

/* Layout */
main{max-width:720px;margin:-32px auto 0;padding:0 16px 24px;position:relative}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:0 1px 2px #1f24300a,0 8px 24px #1f24300d}
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
h2{font-size:18px;margin:0;flex:1;letter-spacing:-.01em}
.badge{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--bg);border-radius:99px;padding:5px 10px;white-space:nowrap}
.badge.done{color:var(--ok);background:var(--ok-soft)}
p{line-height:1.55;color:var(--muted)}
.hint{font-size:13px;margin:10px 0 0}

/* Controls */
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;min-height:48px;border-radius:12px;border:1px solid var(--line-2);padding:10px 16px;background:#fff;font-weight:600;touch-action:manipulation}
button:disabled{cursor:default;opacity:.45}
.primary{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff;font-weight:700}
.primary:not(:disabled):active{background:var(--brand-ink);border-color:var(--brand-ink)}
.primary:disabled{background:var(--brand);border-color:var(--brand)}
.secondary{width:100%;background:var(--bg);border-color:transparent;color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{width:100%;border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;background:#fff;min-height:50px;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--ink);box-shadow:0 0 0 3px #1f243014}
textarea{resize:vertical;margin-bottom:10px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:14px 0 6px}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;font-size:15px;font-weight:600;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:8px;height:8px;margin-left:auto;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
details[open]>summary::after{transform:rotate(-135deg)}
:focus-visible{outline:3px solid #ff3f7f80;outline-offset:2px}

/* Route list */
.route-list{margin-top:10px}
.stops{position:relative}
.stop{position:relative;border:1.5px solid var(--line);border-radius:12px;padding:4px 4px 4px 7px;margin-bottom:6px;background:#fff;transition:border-color .15s,box-shadow .15s}
.stop.is-confirmed{border-color:#cdeadc}
.stop-row{display:flex;align-items:center;gap:8px;min-height:42px}
.marker{display:grid;place-items:center;width:22px;height:22px;min-height:22px;padding:0;border:0;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-size:12px;font-weight:700;flex:none}
.is-confirmed .marker{background:var(--ok);color:#fff}
/* Start point: a red map pin instead of a numbered badge. */
.origin .marker,.origin.is-confirmed .marker{background:transparent}
.start-pin{width:24px;height:24px;filter:drop-shadow(0 1px 1px #1f243033)}
.start-pin path{fill:#ea4335;stroke:#b31412;stroke-width:1}
.start-pin circle{fill:#7a0d0b;stroke:none}
/* Section divider above the first destination of each 9-stop section */
.section-start{margin-top:34px}
.section-start::before{content:attr(data-section-label);position:absolute;left:-1.5px;top:-28px;padding-right:10px;background:var(--card);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);z-index:1;line-height:20px}
.section-start::after{content:"";position:absolute;left:-1.5px;right:-1.5px;top:-18px;height:1px;background:var(--line-2)}
.handle{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;position:relative}
.handle::after{content:"";position:absolute;inset:-7px}
body.is-dragging,body.is-dragging *{cursor:grabbing!important}
/* A confirmed address looks like a field you can tap: it opens edit mode. */
.stop-address{display:block;flex:1;min-width:0;min-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:500;text-align:left;color:var(--ink);padding:9px 7px;border:0;border-radius:10px;background:var(--bg);touch-action:manipulation;cursor:pointer}
.stop-address:not(:disabled):active{background:var(--line)}
.stop-address:disabled{cursor:default;opacity:1}
@media (hover:hover){.stop-address:not(:disabled):hover{background:#eceef2}}
.stop:not(.is-compact) .stop-address,.is-compact .field,.is-compact .status,.is-compact .suggestions{display:none}
.icon{min-height:40px;min-width:40px;padding:0;border:0;background:transparent;color:var(--ink-2);border-radius:10px;font-size:18px;display:grid;place-items:center}
.icon:not(:disabled):active{background:var(--bg)}
/* Desktop-only Edit and Drag buttons (declared after .icon so display:none wins on touch) */
.desk-only{display:none}
.desk-hint{display:none}
@media (hover:hover) and (pointer:fine){.desk-only{display:grid}.desk-only[hidden]{display:none}.touch-only{display:none}.desk-hint{display:inline}}
.grip svg.dots{fill:currentColor;stroke:none}
.stop .grip{min-width:34px;width:34px;flex:none;color:var(--muted)}
/* Touch: a confirmed row shows ⋮⋮ where Remove was; rows still being searched show Remove instead. */
@media not all and (hover:hover) and (pointer:fine){.stop.is-compact .remove-btn{display:none}.stop:not(.is-compact) .grip{display:none}}
.remove-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;background:transparent;position:relative;color:#fff;font-size:20px;font-weight:700;line-height:1;isolation:isolate}
.remove-btn::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#d93a3a;z-index:-1}
.remove-btn:active::before{background:#b72d2d}
/* Start row: location mode shows a button body, manual mode the normal address field */
.origin.mode-location .field,.origin.mode-location .stop-address{display:none}
.origin:not(.mode-location) .locate-body{display:none}
.locate-body{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 8px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);font-size:15px;font-weight:600;text-align:left}
.locate-body span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-confirmed .locate-body{background:var(--ok-soft);color:var(--ok)}
.chip{flex:none;min-height:36px;padding:0 10px;border-radius:99px;font-size:13px;display:inline-flex;align-items:center}
/* Drag */
.drop-slot{position:relative;border:2px dashed var(--line-2);border-radius:12px;background:#f9fafb;margin-bottom:6px}
.lifted{z-index:30;border-color:var(--ink);box-shadow:0 18px 40px #1f243038,0 4px 10px #1f24301f;will-change:transform}
.lifted.settling{box-shadow:0 1px 2px #1f24300a}
.field{position:relative;flex:1;min-width:0}
.field input:not([type=checkbox]):not([type=radio]){padding-right:44px;min-height:44px;padding-top:9px;padding-bottom:9px}
.clear-btn{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-height:40px;min-width:40px;border-radius:9px;color:var(--muted);font-size:22px}
.clear-btn[hidden]{display:none}
.status{font-size:12.5px;color:var(--muted);margin:4px 2px 4px 38px;overflow-wrap:anywhere}
.status:empty{display:none}
.suggestions{display:grid;gap:6px}
.suggestions:not(:empty){margin-top:6px}
.suggestion{display:flex;align-items:center;gap:10px;text-align:left;line-height:1.35;width:100%;font-size:14.5px;font-weight:500;padding:8px 12px;min-height:48px;border-color:var(--line)}
.suggestion svg{color:var(--brand)}
.suggestion:hover,.suggestion:active{background:var(--brand-soft);border-color:#ffc6da}
.attribution{text-align:right;line-height:0;margin-top:2px}
body.is-dragging{user-select:none;-webkit-user-select:none}
.add{width:100%;min-height:44px;border:1.5px dashed var(--line-2);background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:8px}
.add span{font-size:20px;line-height:1}
.import{border-top:1px solid var(--line);margin-top:16px}
.divider{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:18px 0 4px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.file-drop{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;border:1.5px dashed var(--line-2);border-radius:14px;padding:18px 14px;cursor:pointer;font-weight:400}
.file-drop strong{font-size:15px;color:var(--ink)}
.file-drop span{font-size:12.5px;color:var(--muted)}
.file-drop:has(+ input:focus-visible){outline:3px solid #ff3f7f80;outline-offset:2px}
.check{display:flex;align-items:center;gap:10px;font-weight:500;min-height:44px;margin:6px 0}
.check input{width:20px;height:20px;accent-color:var(--brand)}

/* Step 3 */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modes label{margin:0}
.modes input{position:absolute;opacity:0;pointer-events:none}
.modes span{display:flex;align-items:center;gap:6px;justify-content:center;min-height:46px;border:1.5px solid var(--line);border-radius:14px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .15s}
.modes svg{width:20px;height:20px}
.modes input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.modes input:focus-visible+span{outline:3px solid #ff3f7f80;outline-offset:2px}
.routes{display:grid;gap:10px}
.routes:not(:empty){margin-top:16px}
.route-progress{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 10px 10px 14px;border:1.5px solid var(--line);border-radius:14px}
.route-title{flex:1 1 100%;min-width:0;font-size:14.5px;font-weight:700}
.route .route-link{flex:1}
@media (min-width:480px){.route-title{flex-basis:0}.routes.multi .route-link{flex:none}}
.route-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:0 16px;min-height:44px;border-radius:12px;background:var(--brand-fill);color:#fff;font-weight:700;font-size:14.5px}
.routes:not(.multi) .route-link{min-height:44px}
.route .copy{flex:none;border-radius:12px;min-height:44px;padding:0 14px;font-size:13.5px}
.routes.multi .route-link{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.routes.multi .is-next{border-color:#ffc6da;background:var(--brand-soft)}
.routes.multi .is-next .route-link{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff}
.routes.multi .is-opened{border-color:#cdeadc}
.routes.multi .is-opened .route-title{color:var(--ok)}
.routes.multi .is-opened .route-title::after{content:" ✓"}
.route input{flex-basis:100%}

/* Footer, toast, action bar */
footer{max-width:720px;margin:auto;display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:8px 20px calc(110px + var(--safe-b))}
footer a{text-decoration:none;color:var(--ink-2)}
.footer-links{display:flex;gap:16px}
/* Privacy page */
.legal h2{margin:22px 0 6px}.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-2);font-size:15px;line-height:1.6}
.legal ul{padding-left:20px;margin:0}.legal li{margin-bottom:8px}
.legal a{color:var(--brand-ink)}
a.tag{text-decoration:none}
.toast{position:fixed;left:50%;bottom:calc(88px + var(--safe-b));transform:translate(-50%,12px);max-width:min(440px,calc(100% - 32px));width:max-content;margin:0;padding:11px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;line-height:1.4;box-shadow:0 10px 30px #1f243040;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.show:has(button:not([hidden])){pointer-events:auto}
.toast{display:flex;align-items:center;gap:14px}
.toast button{flex:none;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:#ffffff1f;color:#ff8fb3;font-size:14px;font-weight:700}
.action-bar{position:fixed;bottom:0;left:0;right:0;background:#ffffffeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:12px 16px calc(12px + var(--safe-b));z-index:10}
@media (pointer:coarse){body:has(.stop input:focus) .action-bar{transform:translateY(110%)}body:has(.stop input:focus) .toast{bottom:calc(16px + var(--safe-b))}}
.action-bar{transition:transform .2s}
.action-inner{max-width:720px;margin:auto;display:flex;align-items:center;gap:14px}
.action-inner span{flex:1;font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.35}
.action-inner .primary[hidden]{display:none}
.action-inner .primary{flex:none;min-height:52px;padding:0 22px;font-size:16px;border-radius:14px}

@media (min-width:600px){
  .hero{padding-bottom:84px}
  .intro{padding-top:56px}
  h1{margin:12px 0 14px}
  .intro p{font-size:16px}
  main{margin-top:-52px}
  .panel{padding:26px}
  .action-inner .primary{padding:0 32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Make the next import action clear once addresses have been entered. */
#paste.is-ready{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff;font-weight:700;box-shadow:0 3px 10px #d6246a26}
#paste:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:767px){.file-import{display:none}}

.action-bar[hidden]{display:none}

.edit-actions{display:none}
@media(max-width:767px){
 .stop.is-editing{padding:14px 12px;border-color:var(--brand-fill);background:var(--brand-soft)}
 .stop.is-editing .remove-btn,.stop.is-editing .grip{display:none}
 .stop.is-editing .field input{min-height:58px;padding-top:16px;padding-bottom:16px}
 /* Indent lines up with the address (22px number + 8px gap); wraps on very narrow phones. */
 .edit-actions:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px 30px}
 .edit-actions button{flex:0 0 auto;min-height:36px;padding:7px 14px;font-size:13px}
 .edit-actions .danger{margin-left:auto;color:#b42318;background:#fff5f5;border-color:#f3c4c4}
}