/* Delivery page only (use-cases/delivery/). Shared template styles are in use-case.css. */

/* Drop modes: four buttons switch between four delivery videos (fly in, drop, fly out) rendered by tools/drop-video/. */
.modes{display:flex;flex-wrap:wrap;gap:8px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modes button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--fg2);font:600 14px/1 var(--body);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.modes button:hover{color:var(--fg);border-color:var(--fg2)}
.modes button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mode-text{padding:16px 18px;border-top:1px solid var(--line);display:grid;gap:4px;min-height:84px}
.mode-text b{font:600 18px/1.25 var(--display);letter-spacing:-.015em}
.mode-text span{color:var(--fg2);font-size:16px}
.drop-stage{position:relative;aspect-ratio:1600/604;background:#DCE6E0}
.drop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.drop-video.on{opacity:1}

/* Delivery run, top view (inverse section): blocks and roads, three drop points, home pad */
.run .block{fill:#123A30}
.run .road{stroke:#0B2A22;stroke-width:16;stroke-linecap:round}
.run .plan{fill:none;stroke:var(--inv-fg2);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round;opacity:.55}
.run .trail{fill:none;stroke:var(--inv-accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.run .back{fill:none;stroke:#F2C14E;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.run .stop circle{fill:#0A2620;stroke:var(--inv-accent);stroke-width:2.5;transition:fill .3s}
.run .stop text{fill:var(--inv-accent);font:700 14px/1 var(--mono);transition:fill .3s}
.run .stop.done circle{fill:var(--inv-accent)}
.run .stop.done text{fill:#0A2620}
.run .stop .ring{fill:none;stroke:var(--inv-accent);stroke-width:2;opacity:0}
.run .stop.dropping .ring{opacity:1}
.run .home rect{fill:#0A2620;stroke:#F8FAFC;stroke-width:2}
.run .home text{fill:#F8FAFC;font:700 14px/1 var(--mono)}
.run .legend{font:500 12px/1 var(--mono);fill:var(--inv-fg2)}
.run .craft path{stroke:#D5DEDA}
.run .craft circle{fill:#E9EFED}
.run .craft rect{fill:#F4F8F6}

/* 4G band: remote command list */
.cmd-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--app-line)}
.cmd-row:last-child{border-bottom:0}
.cmd-row b{font-size:14px}
.cmd-row span.d{display:block;font:400 13px/1.4 var(--body);color:var(--app-fg2)}
.early{display:inline-block;font:600 12px/1 var(--body);padding:6px 10px;border-radius:999px;background:var(--soon-bg);color:var(--soon);justify-self:start}
.fine{font-size:14px;color:var(--media-fg2);max-width:46ch}

/* Hero: the top-down city clip is busy, so it gets a heavier scrim than the shared one, darkest behind the headline (bottom-left). */
.hero::after{background:linear-gradient(90deg,rgba(4,20,16,.72) 0%,rgba(4,20,16,.4) 45%,rgba(4,20,16,0) 80%),linear-gradient(180deg,rgba(4,20,16,.6) 0%,rgba(4,20,16,.28) 28%,rgba(4,20,16,.34) 45%,rgba(4,20,16,.9) 100%)}