/* Interactive demo. Dark chrome and layout follow the real app; the map stays light (spec choice 9). */
.demo { overflow: hidden; border: 1px solid var(--dash-line); border-radius: 12px; background: var(--dash-bg); color: var(--dash-text); box-shadow: var(--shadow-demo); }
.demo button { font: inherit; }
.demo button:focus-visible { outline: 2px solid var(--app-gold); outline-offset: 2px; }
.demo-noscript { padding: 24px; font-size: 14px; }

/* Tabs and clock */
.demo-tabs { display: flex; padding: 10px; border-bottom: 1px solid var(--dash-line); }
.demo-tablist { display: flex; gap: 4px; }
.demo-tabs [role=tab] { padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--dash-muted); font-size: 13px; font-weight: 700; }
.demo-tabs [role=tab][aria-selected=true] { border-color: var(--app-gold); background: var(--app-gold-tint); color: var(--dash-text); }
.demo-reset { margin-left: auto; padding: 8px 10px; border: 0; background: transparent; color: var(--dash-muted); font-size: 12px; }
.demo-clock { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--dash-line); }
.demo-play { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--app-gold); color: var(--app-gold-ink); font-size: 12px; }
.demo-slider { flex: 1; display: block; }
.demo-slider input { width: 100%; min-height: 0; padding: 0; border: 0; accent-color: var(--app-gold); }
.demo-time { min-width: 48px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.demo-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--app-danger); background: var(--app-danger-bg); font-size: 13px; line-height: 1.5; }
.demo-confirm[hidden] { display: none; }
/* Slides in when it appears; closing stays instant. */
.demo-confirm { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .demo-confirm { opacity: 0; transform: translateY(6px); } }
.demo-tabs [role=tab], .demo-reset, .demo-play { transition: transform 160ms var(--ease-out); }
.demo-tabs [role=tab]:active, .demo-reset:active, .demo-play:active { transform: scale(.97); }
.demo-confirm p { flex: 1 1 260px; }
.demo-confirm div { display: flex; gap: 8px; }
.demo-confirm button { padding: 7px 11px; border: 1px solid var(--dash-line-strong); border-radius: 6px; background: transparent; color: var(--dash-text); font-size: 12px; font-weight: 700; }
.demo-confirm [data-confirm=yes] { border-color: var(--app-danger); background: var(--app-danger); color: var(--app-danger-ink); }

/* Planner: light map and the dark route panel */
.planner { display: grid; grid-template-columns: 1fr 1.05fr; height: 560px; }
.planner[hidden], .demo-screen[hidden] { display: none; }
.planner-map { position: relative; min-width: 0; overflow: hidden; background: var(--map-ground); }
.planner-map .maplibregl-canvas:focus-visible { outline: 2px solid var(--app-gold); outline-offset: -2px; }
.planner-map .maplibregl-ctrl-attrib { font-size: 10px; }
.map-unavailable { position: absolute; inset: auto 12px 12px; padding: 10px 12px; border-radius: 6px; background: var(--map-note-bg); color: var(--phone-ink); font-size: 13px; }
.map-stop { display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid var(--marker-light); border-radius: 50%; background: var(--route); color: var(--marker-light); font: 700 12px/1 Arial, Helvetica, sans-serif; box-shadow: var(--shadow-marker); }
.map-stop.is-done { background: var(--marker-light); border-color: var(--route); color: var(--phone-ink); }
.map-stop.is-late { border-color: var(--app-danger); }
.map-stop.is-dimmed, .map-vehicle.is-dimmed { opacity: .2; }
.map-hq { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--marker-light); border-radius: 50%; background: var(--app-gold); color: var(--app-gold-ink); font: 800 11px/1 Arial, Helvetica, sans-serif; box-shadow: var(--shadow-marker); }
/* Top-down car icon, rotated to the driving direction. */
.map-vehicle { width: 40px; height: 40px; pointer-events: none; }
.map-vehicle[hidden] { display: none; }
.map-vehicle-image { display: block; width: 40px; height: 40px; filter: drop-shadow(var(--shadow-vehicle)); }
.map-vehicle-label { position: absolute; top: calc(100% - 2px); left: 50%; padding: 2px 7px; transform: translateX(-50%); border-left: 3px solid var(--route); border-radius: 4px; background: var(--map-label-bg); color: var(--marker-light); font: 700 10px/1.4 Arial, Helvetica, sans-serif; white-space: nowrap; }
.planner-panel { min-width: 0; overflow-y: auto; padding: 16px 14px; border-left: 1px solid var(--dash-line); background: var(--dash-bg); }
.panel-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--dash-muted); }
.panel-kicker { font-weight: 700; letter-spacing: .12em; color: var(--app-gold); }
.panel-title { margin: 6px 0 2px; font-size: 20px; letter-spacing: -.3px; }
.panel-meta { font-size: 12px; color: var(--dash-muted); }

/* Day timeline */
.tl { position: relative; margin: 14px 0; padding: 12px; border-radius: 8px; background: var(--dash-panel); font-size: 11px; }
.tl-head { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--dash-muted); }
.tl-head span:first-child { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dash-text); }
.tl-hours { position: relative; height: 14px; margin-left: 52px; color: var(--dash-muted); }
.tl-hours span { position: absolute; transform: translateX(-50%); }
.tl-row { display: flex; align-items: center; gap: 8px; height: 24px; }
.tl-driver { width: 44px; flex: none; }
.tl-track { position: relative; flex: 1; height: 14px; border-radius: 3px; background: var(--dash-track); }
.tl-band { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--dash-band-edge); background: var(--dash-hover); }
.tl-trip { position: absolute; top: 2px; bottom: 2px; overflow: hidden; border-radius: 3px; background: var(--route); color: var(--route-ink); font-size: 10px; font-weight: 700; line-height: 10px; padding-left: 4px; white-space: nowrap; }
.tl-now { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--app-gold); }

/* Route cards and stop ladder */
.route-cards { display: grid; gap: 10px; }
.route-card { border: 1px solid var(--dash-line); border-left: 3px solid var(--route); border-radius: 8px; background: var(--dash-panel); transition: border-color .15s, box-shadow .15s; }
.route-card.is-focused { border-color: var(--route); }
.route-card.is-drop-target { border-color: var(--app-gold); box-shadow: 0 0 0 2px var(--app-gold-ring); }
.route-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px 4px; border: 0; background: transparent; color: inherit; text-align: left; }
.route-driver { font-size: 15px; font-weight: 700; }
.route-trip { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--dash-muted); }
.route-state { margin-left: auto; padding: 2px 7px; border-radius: 10px; background: var(--dash-chip); color: var(--dash-muted); font-size: 11px; }
.route-state.state-driving, .route-state.state-returning { background: var(--app-success-tint); color: var(--app-success-text); }
.route-times { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 12px 8px; font-size: 12px; color: var(--dash-muted); }
.route-times strong { font-size: 15px; color: var(--dash-text); font-variant-numeric: tabular-nums; }
.route-late { padding: 2px 7px; border: 1px solid var(--app-danger); border-radius: 10px; color: var(--app-danger-text); font-size: 11px; font-weight: 700; }
.stop-ladder { margin: 0; padding: 0 6px 8px; list-style: none; }
.stop { display: grid; grid-template-columns: 16px 42px 20px 1fr auto; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 5px; font-size: 12px; cursor: grab; user-select: none; }
.stop:hover { background: var(--dash-hover); }
.stop.is-dragging { opacity: .35; }
.stop.is-done { color: var(--dash-muted); }
.stop.is-next .stop-name { font-weight: 700; }
.stop-grip { color: var(--dash-muted); touch-action: none; font-size: 14px; line-height: 1; }
.stop-eta { font-variant-numeric: tabular-nums; }
.stop-eta.is-late, .stop-window.is-late { color: var(--app-danger); }
.stop-seq { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--route, var(--route-fallback)); color: var(--route-ink); font-size: 10px; font-weight: 800; }
.is-done .stop-seq { background: transparent; box-shadow: inset 0 0 0 1.5px var(--route); color: var(--dash-muted); }
.stop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop-window { padding: 1px 5px; border: 1px solid var(--dash-line); border-radius: 4px; color: var(--dash-muted); font-size: 10px; }
.stop-window.is-late { border-color: var(--app-danger); }
.stop-empty { padding: 10px; border: 1px dashed var(--dash-line); border-radius: 6px; color: var(--dash-muted); font-size: 12px; text-align: center; }
.stop-ghost { position: fixed; top: 0; left: 0; z-index: 50; border: 1px solid var(--app-gold); background: var(--dash-panel); color: var(--dash-text); box-shadow: var(--shadow-ghost); pointer-events: none; }

/* Kitchen screen */
.kitchen { height: 560px; overflow-y: auto; padding: 18px; }
.kitchen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kitchen-head h3 { font-size: 22px; }
.kitchen-head span { font-size: 12px; color: var(--dash-muted); }
.kitchen-fresh { padding: 4px 8px; border-radius: 10px; background: var(--app-success-tint); color: var(--app-success-text) !important; }
.kitchen-start { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0; padding: 14px; border-radius: 8px; background: var(--dash-panel); }
.kitchen-start span { font-size: 12px; color: var(--dash-muted); }
.kitchen-start strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.kitchen-count { margin-left: auto; font-size: 14px !important; color: var(--dash-text) !important; }
.kitchen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.kitchen-route { border-top: 3px solid var(--route); border-radius: 8px; background: var(--dash-panel); }
.kitchen-route header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 10px 12px 6px; font-size: 12px; color: var(--dash-muted); }
.kitchen-route header strong { font-size: 15px; color: var(--dash-text); }
.kitchen-progress { margin-left: auto; font-weight: 700; color: var(--dash-text); }
.kitchen-route ol { margin: 0; padding: 0 6px 8px; list-style: none; }
.kitchen-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--dash-text); font-size: 14px; text-align: left; }
.kitchen-row:hover { background: var(--dash-hover); }
.kitchen-seq { width: 18px; flex: none; color: var(--dash-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.kitchen-name { flex: 1; min-width: 0; }
.kitchen-box { width: 20px; height: 20px; flex: none; border: 2px solid var(--dash-muted); border-radius: 5px; }
.kitchen-row.is-checked .kitchen-name { color: var(--dash-muted); text-decoration: line-through; }
.kitchen-row.is-checked .kitchen-box { border-color: var(--app-success); background: var(--app-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23062b1c' stroke-width='2.4'/%3E%3C/svg%3E") center / 14px no-repeat; }
.kitchen-hint { margin-top: 14px; font-size: 12px; color: var(--dash-muted); }

/* Driver app (light by default, like the real PWA) */
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 560px; overflow-y: auto; padding: 18px; background: linear-gradient(var(--dash-bg), var(--dash-panel)); }
.phone { width: 100%; max-width: 330px; overflow: hidden; border: 8px solid var(--phone-bezel); border-radius: 30px; background: var(--phone-bg); color: var(--phone-ink); }
.phone-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--phone-line); background: var(--phone-card); }
.phone-brand { font-size: 15px; font-weight: 800; letter-spacing: .1em; }
.phone-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--phone-muted); }
.phone-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--phone-muted); }
.phone-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--phone-line); }
.phone-bar i { display: block; height: 100%; background: var(--app-gold); }
.phone-status { padding: 12px 16px 0; font-size: 12px; color: var(--phone-muted); }
.phone-card { display: grid; gap: 6px; margin: 10px 12px; padding: 14px; border: 1px solid var(--phone-line); border-radius: 14px; background: var(--phone-card); }
.phone-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--phone-muted); }
.phone-chip { padding: 3px 8px; border: 1px solid var(--phone-chip-line); border-radius: 6px; background: var(--phone-chip-bg); color: var(--phone-chip-ink); font-weight: 700; }
.phone-name { margin-top: 4px; font-size: 22px; letter-spacing: -.4px; }
.phone-address { font-size: 14px; }
.phone-window { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--phone-line); border-bottom: 1px solid var(--phone-line); }
.phone-window small { font-size: 11px; color: var(--phone-muted); }
.phone-window strong { font-size: 16px; }
.phone-note { padding: 8px 10px; border-left: 3px solid var(--phone-chip-ink); border-radius: 6px; background: var(--phone-note-bg); color: var(--phone-note-ink); font-size: 13px; }
.phone-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.phone-actions span { display: grid; place-items: center; min-height: 46px; padding: 6px; border: 1px solid var(--phone-line); border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; }
.phone-nav { border-color: var(--app-gold) !important; background: var(--app-gold); color: var(--app-gold-ink); }
.phone-nav small { display: block; font-size: 10px; font-weight: 400; }
.phone-done { margin: 10px 12px; padding: 18px; border-radius: 14px; background: var(--phone-card); font-size: 14px; text-align: center; }
.phone-tabs { display: flex; justify-content: space-around; margin-top: 14px; padding: 10px 0 12px; border-top: 1px solid var(--phone-line); background: var(--phone-card); font-size: 12px; color: var(--phone-muted); }
.phone-tabs .is-active { color: var(--phone-chip-ink); font-weight: 700; }
.phone-pick { display: flex; gap: 6px; }
.phone-pick button { padding: 6px 12px; border: 1px solid var(--dash-line); border-radius: 14px; background: transparent; color: var(--dash-muted); font-size: 12px; font-weight: 700; }
.phone-pick button[aria-pressed=true] { border-color: var(--route); color: var(--dash-text); box-shadow: inset 0 -2px 0 var(--route); }

/* Touch screens get full-size targets; the grip is the only drag handle on touch. */
@media (hover: hover) {
  .demo-tabs [role=tab]:hover, .demo-reset:hover { color: var(--dash-text); }
}

@media (pointer: coarse) {
  .demo-tabs [role=tab], .demo-reset, .route-head, .kitchen-row, .phone-pick button { min-height: var(--touch-target); }
  .demo-play { width: var(--touch-target); height: var(--touch-target); }
  .demo-slider input { height: var(--touch-target); }
  .stop { grid-template-columns: var(--touch-target) 42px 20px 1fr auto; padding: 0 6px 0 0; }
  .stop-grip { display: grid; place-items: center; height: var(--touch-target); }
  .planner-map .maplibregl-ctrl-group button { width: var(--touch-target); height: var(--touch-target); }
}

@media (prefers-reduced-motion: reduce) {
  .route-card { transition: none; }
  .demo-tabs [role=tab]:active, .demo-reset:active, .demo-play:active { transform: none; }
  @starting-style { .demo-confirm { transform: none; } }
}

@media (max-width: 560px) {
  .planner { grid-template-columns: 1fr; height: auto; }
  .planner-map { height: 240px; }
  /* No inner scroll areas on phones: a swipe over the demo should scroll the page. */
  .planner-panel { border-left: 0; border-top: 1px solid var(--dash-line); }
  .kitchen, .phone-wrap { height: auto; }
  .demo-tabs [role=tab] { padding: 8px 10px; }
  .preview-kicker span:last-child { display: none; }
}