/* ── THEME v3 ────────────────────────────────────────────────────────────────
   Brand alignment pass. The token NAMES are deliberately unchanged - --navy has
   39 call sites, --muted 38, --line 28 - so retuning values here re-themes the
   whole app without touching a single component rule. Renaming them would mean
   editing 200+ selectors in a live app riders depend on, for no visual gain.

   Palette is now the Restronomy brand used by the customer app and the icons:
   deep green as the primary, amber as the single accent. The old set had drifted
   - --navy held a green, --coral and --gold came from an earlier identity - so
   the app read as three half-themes at once.

   Kept: --coral as the DESTRUCTIVE colour (cancel, reject). It is only 9 call
   sites and they are all "this ends something", so it keeps that job with a
   less orange, more serious red.                                             */
:root {
  color-scheme: light;
  --ink: #0B1A14;          /* near-black with a green cast, not blue */
  --muted: #6B7D75;
  --line: #E4ECE8;
  --page: #F4F7F5;
  --surface: #ffffff;
  --navy: #0A2B20;         /* PRIMARY. Brand deep green - app bar, headings */
  --navy-soft: #DDEBE4;
  --coral: #C0392B;        /* destructive only */
  --coral-dark: #96271B;
  --gold: #FFA724;         /* the single accent */
  --green: #13996B;        /* positive / live / success */
  --green-soft: #E8F5EF;
  --red: #C0392B;
  --amber-soft: #FFF4DE;

  /* Shadows were blue-tinted and very heavy (55px blur) which muddied every
     card edge. Tighter, green-tinted, layered. */
  --shadow: 0 1px 2px rgba(6,16,12,.05), 0 14px 32px -12px rgba(6,16,12,.22);
  --shadow-soft: 0 1px 2px rgba(6,16,12,.04), 0 8px 20px -10px rgba(6,16,12,.16);

  /* New tokens. Additive only - nothing existing reads these yet, so they
     cannot regress anything. */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 100px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(192, 57, 43, 0.10), transparent 60%),
    radial-gradient(900px 700px at 112% 12%, rgba(18, 48, 74, 0.10), transparent 55%),
    var(--page);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---------- Dark mode: variable overrides only, everything else inherits ---------- */

body.dark-mode {
  color-scheme: dark;
  --ink: #e8edf4;
  --muted: #9aa7b8;
  --line: #2a3648;
  --page: #0f1620;
  --surface: #17222f;
  --navy: #0d2b1f;
  --navy-soft: #1b3a2c;
  --green-soft: #123527;
  --amber-soft: #3a2c0d;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.4);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #1c2836;
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .secondary-action,
body.dark-mode .quick-help button,
body.dark-mode .quick-reply-grid button,
body.dark-mode .pilot-console button,
body.dark-mode .ghost-action {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

body.dark-mode .toggle-button.is-online {
  background: #2a3648;
  color: var(--ink);
}

body.dark-mode .payout-row,
body.dark-mode .referral-row,
body.dark-mode .rating-row,
body.dark-mode .cancel-box {
  background: #101a26;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  min-height: 72px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #c4cedb;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18, 48, 74, 0.15);
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.16s ease, border-color 0.16s ease, opacity 0.15s ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button:focus-visible {
  outline: 3px solid rgba(18, 48, 74, 0.35);
  outline-offset: 2px;
}

button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.is-hidden {
  display: none !important;
}

/* ---------- Desktop / laptop brand header (hidden on the mobile app view) ---------- */

.site-header {
  position: fixed;
  top: 22px;
  left: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  box-shadow: var(--shadow-soft);
}

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font-size: 14px;
  color: var(--navy);
}

.brand-copy em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.workspace {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(280px, 360px);
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 96px 32px 32px;
}

/* ---------- Sign-in overlay: fixed, but always scrollable so every field is reachable ---------- */

.auth-shell {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(32px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
  background: rgba(238, 243, 246, 0.94);
  backdrop-filter: blur(8px);
}

.auth-shell.is-hidden {
  display: none;
}

.auth-card {
  width: min(100%, 440px);
  height: fit-content;
  margin: auto;
  display: grid;
  gap: 16px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.auth-card .eyebrow {
  color: var(--coral-dark);
}

.auth-card h1 {
  margin: 0;
  color: var(--navy);
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: 0;
}

.auth-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 8px;
  background: var(--page);
}

.auth-tab {
  min-height: 38px;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  font-size: 13px;
}

.auth-tab:hover {
  color: var(--navy);
}

.auth-tab.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(18, 48, 74, 0.15);
}

/* Secondary text button inside an auth form: "Forgot password?", "Back to
   sign in". Deliberately quiet so it never competes with .primary-action. */
.link-action {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
  min-height: 32px;
}

.link-action:hover {
  color: var(--navy);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form.is-hidden {
  display: none;
}

.auth-message {
  min-height: 22px;
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.auth-message.is-error {
  color: var(--red);
}

.phone-shell {
  position: relative;
  width: min(100%, 410px);
  height: min(860px, calc(100vh - 64px));
  min-height: 640px;
  overflow: hidden;
  border: 10px solid #101722;
  border-radius: 28px;
  background: #f8fafc;
  box-shadow: var(--shadow);
}

.app-header {
  position: relative;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 12px;
  background: var(--navy);
  color: #fff;
}

.app-header h1,
.pilot-console h2,
.order-head h2,
.active-trip h2,
.safety-panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.app-header h1 {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.2;
}

.app-header h1.is-label-md {
  font-size: 14px;
}

.app-header h1.is-label-lg {
  font-size: 11.5px;
  letter-spacing: 0.01em;
}

.location-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 210px;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.location-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--gold);
}

.location-meta.is-live::before {
  background: #48d597;
  box-shadow: 0 0 0 4px rgba(72, 213, 151, 0.18);
}

.location-meta.is-warning::before {
  background: var(--gold);
}

.eyebrow,
.muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.eyebrow {
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

#partnerNameLabel {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted {
  color: var(--muted);
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}

.status-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-width: 140px;
}

.settings-gear {
  width: 26px;
  height: 26px;
  min-height: 26px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.settings-gear:hover {
  background: rgba(255, 255, 255, 0.28);
}

.network-pill,
.sync-pill,
.partner-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.partner-pill {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
}

.account-panel {
  margin: 4px 0 14px;
}

.logout-action {
  width: 100%;
  min-height: 44px;
  font-weight: 800;
}

.network-pill.is-offline {
  background: #ffd8d3;
  color: #842316;
}

.sync-pill.has-queue {
  background: var(--amber-soft);
  color: #765100;
}

.screen {
  display: none;
  height: calc(100% - 166px);
  overflow-y: auto;
  padding: 16px 16px 92px;
}

.screen.is-active {
  display: block;
}

.availability-panel,
.active-trip,
.earnings-hero,
.safety-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.availability-panel strong {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  line-height: 1.1;
}

.toggle-button {
  min-width: 132px;
  padding: 0 16px;
  background: var(--green);
  color: #fff;
}

.toggle-button:hover:not(:disabled) {
  background: #0e6a4d;
}

.toggle-button.is-online {
  background: #cfd8e3;
  color: var(--ink);
}

.toggle-button.is-online:hover:not(:disabled) {
  background: #c1cbd9;
}

.stats-grid,
.order-metrics,
.performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stats-grid article,
.order-metrics article,
.performance-grid article {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.stats-grid span,
.order-metrics span,
.performance-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.stats-grid strong,
.order-metrics strong,
.performance-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.05;
}

.performance-grid {
  margin-bottom: 14px;
}

.milestone-card {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.milestone-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}

.milestone-track {
  height: 8px;
  border-radius: 999px;
  background: var(--page);
  overflow: hidden;
}

.milestone-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width 0.4s ease;
}

.alert-strip {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  background: var(--amber-soft);
  font-size: 13px;
}

.alert-strip.is-ok {
  border-left-color: var(--green);
  background: var(--green-soft);
}

.map-area {
  position: relative;
  height: 250px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf3f6;
}

#liveMap {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #edf3f6;
}

body.data-saver #liveMap,
body.data-saver .leaflet-container {
  background:
    linear-gradient(90deg, rgba(18, 48, 74, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 48, 74, 0.08) 1px, transparent 1px),
    #edf3f6;
  background-size: 28px 28px;
}

.leaflet-container {
  font-family: inherit;
  background: #edf3f6;
}

.retro-marker {
  display: grid;
  place-items: center;
}

.retro-marker span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 4px solid #fff;
  box-shadow: 0 5px 12px rgba(23, 33, 51, 0.25);
}

.retro-marker.restaurant span {
  background: var(--coral);
}

.retro-marker.customer span {
  background: var(--navy);
}

.retro-marker.partner span {
  width: 24px;
  height: 24px;
  background: var(--green);
  border-width: 5px;
  box-shadow: 0 0 0 7px rgba(18, 128, 92, 0.2);
}

.zone-zone {
  position: absolute;
  right: 18px;
  top: 20px;
  z-index: 1;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--gold);
  font-size: 12px;
  font-weight: 850;
  pointer-events: none;
}

.route-info-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  pointer-events: none;
}

.active-trip {
  display: grid;
  align-items: stretch;
}

.active-trip h2 {
  font-size: 20px;
}

.active-trip > p:nth-of-type(2) {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.trip-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.emergency-reassign-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  margin: -4px 0 12px;
  padding: 0 14px;
  border: 1px dashed #f3c8c4;
  border-radius: 8px;
  background: #fff5f4;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
}

.emergency-reassign-button:hover:not(:disabled) {
  background: #ffe6e4;
  border-color: var(--red);
}

.emergency-reassign-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 rgba(215, 47, 47, 0.5);
  animation: emergencyDotPulse 1.6s ease-out infinite;
}

@keyframes emergencyDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(215, 47, 47, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(215, 47, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 47, 47, 0); }
}

body.dark-mode .emergency-reassign-button {
  background: #341f1c;
  border-color: #5a2e2a;
}

.quick-replies {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.quick-replies-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-replies-head small {
  font-size: 11px;
  font-weight: 750;
}

.quick-reply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-reply-grid button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--navy);
  font-size: 12px;
}

.quick-reply-grid button:hover {
  background: #f3f6f9;
  border-color: #c4cedb;
}

.ghost-action {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  padding: 0 14px;
  min-height: 40px;
  font-size: 13px;
}

.ghost-action:hover:not(:disabled) {
  background: #f3f6f9;
  border-color: #c4cedb;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(18, 48, 74, 0.12);
}

.ghost-action.is-danger {
  color: var(--red);
  border-color: #f3c8c4;
}

.ghost-action.is-danger:hover:not(:disabled) {
  background: #fff2f1;
}

.cancel-box {
  display: grid;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

.cancel-box-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.emergency-box.cancel-box {
  border-color: #f3c8c4;
  background: #fff8f7;
}

body.dark-mode .emergency-box.cancel-box {
  background: #2a1917;
  border-color: #5a2e2a;
}

.emergency-box-copy {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.otp-box {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  background: var(--amber-soft);
}

.otp-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}

.otp-hint strong {
  font-size: 16px;
  letter-spacing: 0.12em;
}

.proximity-hint {
  margin: -4px 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--amber-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--coral-dark);
}

body.dark-mode .proximity-hint {
  background: #341f1c;
  color: #ffb6a6;
}

.trip-eta {
  margin: -6px 0 10px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
}

body.dark-mode .trip-eta {
  color: var(--ink);
}

.prep-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  background: var(--amber-soft);
}

.prep-countdown p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.prep-countdown strong {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: center;
  color: #765100;
  font-size: 20px;
  font-weight: 900;
}

.contactless-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.contactless-row input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  accent-color: var(--coral);
}

.primary-action,
.secondary-action {
  width: 100%;
  padding: 0 16px;
}

.primary-action {
  background: var(--navy);
  color: #fff;
}

.primary-action:hover:not(:disabled) {
  background: #e5573d;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(192, 57, 43, 0.32);
}

.primary-action:active:not(:disabled) {
  background: var(--coral-dark);
}

.secondary-action {
  background: #e7edf3;
  color: var(--ink);
}

.secondary-action:hover:not(:disabled) {
  background: #dbe3ec;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(18, 48, 74, 0.1);
}

.slide-action {
  --slide-progress: 0%;
  --slide-x: 0px;
  position: relative;
  width: 100%;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid rgba(192, 57, 43, 0.32);
  border-radius: 999px;
  background: #fff2ee;
  color: var(--coral-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(192, 57, 43, 0.12);
  touch-action: none;
  user-select: none;
  transition: box-shadow 0.18s ease;
}

.slide-action:disabled {
  border-color: var(--line);
  background: var(--page);
  color: var(--muted);
  box-shadow: none;
}

.slide-action-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--slide-progress);
  background: linear-gradient(90deg, var(--coral), var(--coral-dark));
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-action-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--coral-dark);
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(23, 33, 51, 0.22), 0 0 0 4px rgba(192, 57, 43, 0.08);
  transform: translateX(var(--slide-x));
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease;
}

.slide-action-label {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 58px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.slide-action.is-dragging .slide-action-fill,
.slide-action.is-dragging .slide-action-knob {
  transition: none;
}

.slide-action.is-dragging .slide-action-knob {
  transform: translateX(var(--slide-x)) scale(1.06);
  box-shadow: 0 10px 22px rgba(23, 33, 51, 0.28), 0 0 0 6px rgba(192, 57, 43, 0.16);
}

.slide-action.is-complete .slide-action-label {
  color: #fff;
}

.slide-action.is-complete .slide-action-knob {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 33, 51, 0.22), 0 0 0 4px rgba(18, 128, 92, 0.14);
}

/* A gentle breathing glow on the knob when idle - invites the tap/drag without being
   distracting once the partner is actually mid-gesture or the action is locked out. */
@keyframes slideKnobPulse {
  0%, 100% {
    box-shadow: 0 8px 18px rgba(23, 33, 51, 0.22), 0 0 0 4px rgba(192, 57, 43, 0.08);
  }
  50% {
    box-shadow: 0 8px 18px rgba(23, 33, 51, 0.22), 0 0 0 9px rgba(192, 57, 43, 0.16);
  }
}

.slide-action:not(:disabled):not(.is-dragging):not(.is-complete) .slide-action-knob {
  animation: slideKnobPulse 2.2s ease-in-out infinite;
}

body.dark-mode .slide-action {
  background: #341f1c;
  border-color: rgba(192, 57, 43, 0.42);
  color: #ffb6a6;
}

body.dark-mode .slide-action:disabled {
  background: #101a26;
  border-color: var(--line);
  color: var(--muted);
}

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--line);
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(12px);
}

body.dark-mode .bottom-nav {
  background: rgba(15, 22, 32, 0.92);
}

.nav-button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 60px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.nav-button:hover {
  background: rgba(18, 48, 74, 0.06);
}

.nav-button.is-active {
  background: var(--navy-soft);
  color: var(--navy);
}

.nav-button.is-active:hover {
  background: var(--navy-soft);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
}

.home-icon::before,
.wallet-icon::before,
.shield-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.home-icon::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 4px;
  top: 0;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.wallet-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: 1px;
  top: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
}

.shield-icon::before {
  border-radius: 8px 8px 10px 10px;
  clip-path: polygon(50% 0, 100% 18%, 88% 76%, 50% 100%, 12% 76%, 0 18%);
}

.order-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 86px;
  z-index: 10;
  display: none;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 45px rgba(18, 48, 74, 0.22);
  max-height: calc(100% - 172px);
  overflow-y: auto;
}

body.dark-mode .order-sheet {
  background: var(--surface);
}

.order-sheet.is-visible {
  display: block;
}

.sheet-handle {
  width: 46px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #cbd5df;
}

.order-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.order-head .eyebrow {
  color: var(--coral-dark);
}

.order-head h2 {
  font-size: 20px;
}

.order-address {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.order-customer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

.order-customer-label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.order-customer-name {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.order-customer .order-address {
  margin-top: 2px;
}

.call-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: none;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* Anchor-specific: .call-chip is shared by a static badge (offer card, non-clickable
   pre-accept) and a real tel: link (trip route, post-accept) - this resets the browser's
   default underlined-blue-link look so the anchor version still reads as a button. */
a.call-chip {
  cursor: pointer;
}

a.call-chip:hover {
  background: var(--navy);
  color: #fff;
}

body.dark-mode .call-chip {
  color: var(--ink);
}

body.dark-mode a.call-chip:hover {
  background: var(--coral);
  color: #fff;
}

.call-chip-icon {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.trip-route {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
}

.route-leg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

.route-leg.is-current {
  border-color: var(--coral);
  background: #fff5f2;
}

body.dark-mode .route-leg.is-current {
  background: #341f1c;
}

.route-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
}

.route-dot.is-pickup {
  background: var(--coral);
}

.route-dot.is-drop {
  background: var(--navy);
}

body.dark-mode .route-dot.is-drop {
  background: var(--ink);
}

.route-leg-body {
  flex: 1 1 auto;
  min-width: 0;
}

.route-leg-label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.route-leg-name {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.route-leg .order-address {
  margin-top: 2px;
}

#countdownValue {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: #765100;
  font-weight: 900;
}

.cash-line {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.eyebrow.is-forwarded {
  color: var(--red);
}

.forwarded-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px dashed #f3c8c4;
  border-radius: 8px;
  background: #fff5f4;
  color: var(--red);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
}

body.dark-mode .forwarded-note {
  background: #2a1917;
  border-color: #5a2e2a;
}

.sheet-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
}

.earnings-hero {
  display: grid;
  justify-content: stretch;
}

.earnings-hero strong {
  display: block;
  font-size: 42px;
  line-height: 1;
}

.earnings-hero span {
  color: var(--muted);
  font-weight: 700;
}

.payout-card,
.referral-card,
.history-card,
.faq-card,
.ratings-card,
.feedback-card {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.payout-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.payout-card-head strong {
  font-size: 24px;
  color: var(--navy);
}

body.dark-mode .payout-card-head strong {
  color: var(--ink);
}

.payout-card-head button {
  flex-shrink: 0;
}

.payout-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.payout-form-row button {
  grid-column: 1 / -1;
}

.hint-text {
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.payout-list,
.referral-list,
.ratings-list,
.faq-results {
  display: grid;
  gap: 8px;
}

.payout-row,
.referral-row,
.rating-row,
.faq-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  font-size: 13px;
}

.faq-row summary {
  cursor: pointer;
  font-weight: 750;
}

.faq-row p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.status-chip {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--navy-soft);
  color: var(--navy);
  white-space: nowrap;
}

.status-chip.is-paid {
  background: var(--green-soft);
  color: var(--green);
}

.status-chip.is-failed {
  background: #ffd8d3;
  color: #842316;
}

.status-chip.is-disputed {
  background: var(--amber-soft);
  color: #765100;
}

.status-chip.is-forwarded {
  background: var(--amber-soft);
  color: #765100;
}

.status-chip.is-returned {
  background: #ffd8d3;
  color: #842316;
}

.referral-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.referral-code-row strong {
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--navy);
}

body.dark-mode .referral-code-row strong {
  color: var(--ink);
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.history-head h2 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.15;
}

body.dark-mode .history-head h2 {
  color: var(--ink);
}

.history-head select {
  width: auto;
  min-width: 130px;
  min-height: 36px;
}

.history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 8px;
  background: var(--page);
}

.history-tab {
  min-height: 38px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.history-tab.is-active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-soft);
}

body.dark-mode .history-tab.is-active {
  color: var(--ink);
}

.order-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.order-summary-grid article {
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

.order-summary-grid article:last-child {
  grid-column: 1 / -1;
}

.order-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.order-summary-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.05;
}

body.dark-mode .order-summary-grid strong {
  color: var(--ink);
}

.ledger-list,
.ticket-feed,
.event-log {
  display: grid;
  gap: 10px;
}

.order-date-heading {
  margin: 4px 0 -2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.order-record,
.empty-order-state {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}

body.dark-mode .order-record,
body.dark-mode .empty-order-state {
  background: var(--surface);
}

.order-record {
  border-left: 4px solid var(--navy-soft);
}

.order-record.is-delivered {
  border-left-color: var(--green);
}

.order-record.is-cancelled,
.order-record.is-rejected {
  border-left-color: var(--red);
}

.order-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.order-record-head strong,
.empty-order-state strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 14px;
}

.order-record-head span:not(.status-chip),
.empty-order-state span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-record-metrics,
.order-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.order-record-metrics span,
.order-breakdown span {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  font-weight: 850;
}

.order-record-metrics b {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.order-breakdown span {
  color: var(--muted);
  font-size: 11px;
}

.order-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--page);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.order-note.is-forwarded-note {
  background: var(--amber-soft);
  color: #765100;
}

.ledger-row,
.ticket-row,
.log-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

body.dark-mode .ledger-row,
body.dark-mode .ticket-row,
body.dark-mode .log-row {
  background: var(--surface);
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ledger-row strong,
.ticket-row strong,
.log-row strong {
  display: block;
  margin-bottom: 4px;
}

.ledger-row .breakdown {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.safety-panel {
  display: grid;
  align-items: center;
  justify-content: stretch;
  text-align: center;
  gap: 8px;
}

.sos-button {
  width: 92px;
  min-height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(215, 47, 47, 0.28);
}

.sos-button:hover:not(:disabled) {
  background: #c22929;
}

.document-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.document-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.document-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.document-card strong {
  font-size: 14px;
}

.document-card.is-warning {
  border-color: var(--gold);
  background: var(--amber-soft);
}

.document-card.is-expired {
  border-color: #f3c8c4;
  background: #fff2f1;
}

.faq-card input[type="search"] {
  margin-bottom: 10px;
}

.ratings-head {
  margin-bottom: 10px;
}

.rating-row .row-head {
  margin-bottom: 6px;
}

.rating-row .rating-breakdown {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--muted);
}

.rating-row .dispute-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.quick-help {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.quick-help button,
.pilot-console button {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}

.quick-help button:hover,
.pilot-console button:hover:not(:disabled) {
  background: #f3f6f9;
  border-color: #c4cedb;
}

.pilot-console {
  width: min(100%, 360px);
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
  box-shadow: var(--shadow-soft);
}

.console-badge {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.console-copy {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.pilot-console button:first-of-type {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.pilot-console button:first-of-type:hover:not(:disabled) {
  background: #0d2739;
}

.pilot-console button {
  width: 100%;
}

.event-log {
  max-height: 310px;
  overflow-y: auto;
}

.log-row {
  font-size: 13px;
}

.log-row span {
  color: var(--muted);
}

/* ---------- Settings overlay: same scroll-safe centering pattern as the auth shell ---------- */

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(32px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
  background: rgba(15, 22, 32, 0.55);
  backdrop-filter: blur(6px);
}

.settings-card {
  width: min(100%, 440px);
  height: fit-content;
  margin: auto;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
}

body.dark-mode .settings-head h2 {
  color: var(--ink);
}

.settings-group {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.settings-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.settings-group h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.switch-row input {
  width: 42px;
  min-height: 24px;
  height: 24px;
  accent-color: var(--coral);
}

@media (max-width: 820px) {
  .site-header {
    display: none;
  }

  .workspace {
    display: block;
    padding: 0;
    background: #101722;
  }

  .phone-shell {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .app-header {
    padding-top: max(18px, env(safe-area-inset-top));
    height: auto;
    min-height: 92px;
  }

  .bottom-nav {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .pilot-console {
    display: none;
  }
}

@media (max-width: 380px) {
  .stats-grid,
  .order-metrics,
  .performance-grid {
    gap: 8px;
  }

  .stats-grid article,
  .order-metrics article,
  .performance-grid article {
    padding: 10px 8px;
  }

  .stats-grid strong,
  .order-metrics strong,
  .performance-grid strong {
    font-size: 19px;
  }

  .availability-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .toggle-button {
  width: 100%;
  }

  .auth-card {
    padding: 22px 18px;
  }

  .auth-card h1 {
    font-size: 22px;
  }

  .payout-form-row {
    grid-template-columns: 1fr;
  }

  .payout-form-row button {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
  }
}

/* Trip mode: while a delivery is live the dashboard is noise. Hide availability,
   stats, milestone and reminders so the screen shows only the job in hand. */
.trip-mode .availability-panel,
.trip-mode .stats-grid,
.trip-mode .milestone-card,
.trip-mode .alert-strip { display: none; }

/* The kitchen's own clock - we own the kitchen, so this is fact, not an estimate. */
.kitchen-clock { text-align: center; padding: 14px 12px 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.kitchen-clock-value { display: block; font-size: 34px; line-height: 1; font-weight: 600; color: #185FA5; }
.kitchen-clock-value.is-ready { color: #0F6E56; }
.kitchen-clock-label { display: block; font-size: 12px; color: #6b7280; margin-top: 4px; }
.kitchen-clock-track { height: 5px; border-radius: 999px; background: #B5D4F4; margin-top: 10px; overflow: hidden; }
.kitchen-clock-track > div { height: 100%; background: #185FA5; border-radius: 999px; width: 0; transition: width .5s linear; }
.kitchen-clock-track.is-ready > div { width: 100%; background: #0F6E56; }

/* ---- One button language -------------------------------------------------
   Blue moves the trip forward, green confirms a handover, outline is a tool,
   red ends or disrupts a trip. A rider glancing at the screen with a helmet on
   should be able to tell those apart without reading. */

#stageActionButton,
.toggle-button {
  background: #185FA5;
  color: #fff;
  border: none;
  font-weight: 600;
}
.toggle-button.is-online { background: #0F6E56; color: #fff; }

/* The main action is a slide control whose meaning changes by stage. Green once
   the rider is at a handover point, blue while he is still moving. */
.slide-action { background: #185FA5; color: #fff; border: none; }
.slide-action.is-handover { background: #0F6E56; }

.ghost-action {
  background: #fff;
  color: #185FA5;
  border: 1px solid rgba(24, 95, 165, .35);
  font-weight: 600;
}

/* Trip-ending actions keep red. This is a safety signal, not decoration. */
.ghost-action.is-danger,
#returnButton,
#confirmReturnButton,
#submitReturnOtpButton,
#emergencyReassignButton,
#cancelTripButton {
  background: #fff;
  color: #A32D2D;
  border: 1px solid rgba(163, 45, 45, .45);
}
#confirmReturnButton,
#submitReturnOtpButton { background: #A32D2D; color: #fff; border: none; }

/* === trip cards: blue/green theme === */
.active-trip {
  padding: 14px;
  border: 1px solid var(--navy-soft);
  border-left: 4px solid var(--navy);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
body.dark-mode .active-trip {
  border-color: rgba(219,232,242,0.18);
  border-left-color: var(--navy-soft);
  background: rgba(255,255,255,0.04);
}
.route-leg {
  border-color: var(--navy-soft);
  background: var(--surface);
}
body.dark-mode .route-leg {
  border-color: rgba(219,232,242,0.16);
  background: rgba(255,255,255,0.03);
}
.route-leg.is-current {
  border-color: var(--navy);
  background: var(--navy-soft);
  box-shadow: inset 3px 0 0 var(--navy);
}
body.dark-mode .route-leg.is-current {
  border-color: var(--navy-soft);
  background: rgba(18,48,74,0.55);
}
.route-dot.is-pickup { background: var(--gold); }
.route-dot.is-drop { background: var(--navy); }
body.dark-mode .route-dot.is-drop { background: var(--navy-soft); }

/* Offer countdown as a depleting bar, and the acceptance rate the rider
   is judged on - both shown before he decides, as the reference apps do. */
.offer-timer { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 2px 0 10px; }
.offer-timer-fill { display: block; height: 100%; width: 100%; background: var(--green); transition: width 1s linear; }
.offer-timer-fill.is-urgent { background: var(--coral); }
.offer-accept-rate { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--page); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }

/* How long he will wait at the restaurant - the one thing the big platforms
   cannot tell a rider, because they do not own the kitchen. */
.offer-prep-line { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 12.5px; font-weight: 800; text-align: center; }
.offer-prep-line.is-now { background: var(--amber-soft); color: var(--gold); }

/* Delivery complete - the rider gets the same moment of closure the customer
   does, with what he earned, before he goes back to looking for work. */
.trip-done { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 43, 32,0.55); }
.trip-done.is-hidden { display: none; }
.trip-done-card { width: 100%; max-width: 340px; background: var(--surface); border-radius: 18px; padding: 22px 20px 18px; text-align: center; box-shadow: var(--shadow); }
.trip-done-art { width: 100%; max-width: 240px; margin: 0 auto 6px; display: block; }
.trip-done-title { margin: 6px 0 2px; font-size: 20px; font-weight: 800; color: var(--ink); }
.trip-done-sub { margin: 0; font-size: 12.5px; color: var(--muted); }
.trip-done-amount { margin: 14px 0 0; font-size: 34px; font-weight: 800; color: var(--green); }
.trip-done-note { margin: 2px 0 16px; font-size: 12px; color: var(--muted); }
.trip-done-actions { display: grid; gap: 8px; }

/* Trips tab. Same construction as the other nav icons - a bordered square,
   with two rules inside so it reads as a list. */
.list-icon::before { content: ""; position: absolute; inset: 2px; border: 2px solid currentColor; border-radius: 5px; }
.list-icon::after { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor; }

/* Launch splash. Driven by CSS so a startup JS error can never strand the
   rider on a green screen with no way past it. */
/* ── OPENING SEQUENCE ────────────────────────────────────────────────────────
   4 seconds, once per session. Deliberately not the 11s customer film: a rider
   opens this app dozens of times a shift, and a long animation between them and
   their next delivery is a tax, not a brand moment. Session-gated in
   index.html, so returning from the map or reloading goes straight to work.

   Pure CSS keyframes rather than a JS timeline - no scheduling to get wrong,
   and it cannot leave the app hidden if a script throws. app.js also removes it
   at 4600ms as a second belt.                                                */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 12%, #10402F 0%, #0A2B20 46%, #061912 100%);
  animation: splashOut 520ms var(--ease) 3480ms forwards;
  overflow: hidden;
}
.splash.is-hidden { display: none; }
/* Already played this session - never rendered, so there is no flash. */
html.rst-seen .splash { display: none; }

.sp-stage {
  text-align: center; width: 100%;
  padding: env(safe-area-inset-top, 0px) 28px env(safe-area-inset-bottom, 0px);
}

.sp-mark { display: flex; align-items: center; justify-content: center; gap: .4em; }
.sp-word {
  font-size: clamp(27px, 8.5vw, 40px); font-weight: 800; letter-spacing: -.035em;
  color: #fff; line-height: 1;
  clip-path: inset(0 0 100% 0);
  animation: spWord 780ms var(--ease) 140ms forwards;
}
.sp-dot {
  width: .2em; height: .2em; border-radius: 50%; background: var(--gold);
  transform: scale(0); box-shadow: 0 0 26px rgba(255,167,36,.85);
  animation: spDot 560ms var(--ease) 620ms forwards;
}
.sp-sub {
  margin-top: 11px; font-size: 10.5px; font-weight: 600; letter-spacing: .34em;
  text-indent: .34em; text-transform: uppercase; color: rgba(255,255,255,.52);
  opacity: 0; animation: spRise 620ms var(--ease) 780ms forwards;
}

/* The road and the rider. The scooter travels the full width, so the sequence
   reads as "going somewhere" rather than a logo sitting still. */

.sp-ready {
  margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--gold); opacity: 0;
  animation: spRise 560ms var(--ease) 2500ms forwards;
}

@keyframes spWord { to { clip-path: inset(-30% -30% -30% -30%); } }
@keyframes spDot  { to { transform: scale(1); } }
@keyframes spRise { from { opacity: 0; transform: translateY(7px); }
                    to   { opacity: 1; transform: none; } }
@keyframes spLine { to { transform: scaleX(1); } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Reduced motion: hold the lockup briefly, move nothing. */
@media (prefers-reduced-motion: reduce) {
  .splash { animation-delay: 700ms; animation-duration: 200ms; }
  .sp-word { clip-path: none; animation: none; }
  .sp-dot  { transform: scale(1); animation: none; }
  .sp-sub, .sp-ready { opacity: 1; animation: none; }
  .sp-line { transform: scaleX(1); animation: none; }
}

/* slide-action theme v2 - the component was still on coral, and the disabled
   "Waiting" state used the pale page grey, which reads as blue. Waiting now
   matches the amber used by the queued pill: same meaning, same colour. */
.slide-action {
  display: flex; align-items: center; justify-content: center;
  border-color: rgba(10, 43, 32, 0.28);
  background: var(--green-soft);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 6px 16px rgba(10, 43, 32,0.12);
}
.slide-action-fill { background: linear-gradient(90deg, var(--green), var(--navy)); }
.slide-action-knob { color: var(--navy); box-shadow: 0 8px 18px rgba(23,33,51,0.22), 0 0 0 4px rgba(10, 43, 32,0.10); }
.slide-action-label { width: 100%; text-align: center; }
.slide-action:disabled {
  border-color: rgba(243, 179, 49, 0.42);
  background: var(--amber-soft);
  color: #8a6a12;
  box-shadow: none;
}
.slide-action:disabled .slide-action-knob {
  color: #8a6a12;
  box-shadow: 0 4px 10px rgba(23,33,51,0.12), 0 0 0 4px rgba(243,179,49,0.16);
}

/* splash light v2 - white ground, green artwork. */
/* REMOVED (theme v3): these overrode the opening sequence's own background and
   colours from further down the cascade, which painted the new dark-green
   sequence white and left the wordmark white-on-white. .splash-art/-word/-sub
   no longer exist in the markup either - they belonged to the old static SVG
   splash that the 4s sequence replaced. */

/* Header as a floating capsule: it used to run edge to edge and sit flush
   against the browser chrome, which read as part of the phone frame. */
.app-header {
  margin: 12px 12px 6px;
  padding: 14px 16px;
  height: auto;
  min-height: 82px;
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(10, 43, 32, 0.24);
}
/* Pills side by side and smaller - three stacked pills plus a duplicate
   brand label was the bulk of the clutter. */
.header-actions { gap: 10px; align-items: center; }
.status-stack { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.partner-pill { display: none; }
.network-pill, .sync-pill { font-size: 9.5px; padding: 3px 9px; letter-spacing: 0.02em; }

/* Brand mark replaces the gear. Same id, so it still opens Settings. */
.brand-mark-btn {
  width: 42px; height: 42px; padding: 0; border: none; border-radius: 999px;
  background: #fff; overflow: hidden; font-size: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.brand-mark-btn svg { display: block; width: 100%; height: 100%; }
.brand-mark-btn:hover { box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28); }
.brand-mark-btn:active { transform: scale(0.94); }
/* Brand mark: rounded square, matching the admin sidebar tile, not a circle. */
.brand-mark-btn { border-radius: 13px; }

/* Toast: replaces alert() for things the rider should know but must not be
   blocked by. alert() halts the app until dismissed - wrong for a courier
   holding a phone at a doorstep. */
.app-toast {
  position: fixed; left: 50%; bottom: 92px; z-index: 300;
  transform: translateX(-50%) translateY(12px);
  max-width: min(88vw, 420px); padding: 11px 16px; border-radius: 12px;
  background: #10281f; color: #fff; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.app-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast.is-error { background: #7f1d1d; }

/* Brand mark sits ON the header, not on a white chip: transparent ground,
   white artwork only. */
.brand-mark-btn { background: transparent; box-shadow: none; border-radius: 12px; }
.brand-mark-btn:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }

/* The blue/green split is meaningful for TRIP STAGE actions (#stageActionButton):
   blue while moving, green at a handover point. The availability toggle was
   swept into that rule by accident - it is not a stage action, so it goes back
   to brand green. */
.toggle-button { background: var(--navy); }
.toggle-button:hover:not(:disabled) { background: #0b4a32; }

/* Online state is the inverse of the offline one: white ground, green text,
   so the two availability states are unmistakable at a glance. */
.toggle-button.is-online,
.toggle-button.is-online:hover:not(:disabled) {
  background: #ffffff;
  color: var(--navy);
  border: 1px solid rgba(10, 43, 32, 0.28);
}

/* Header layout C: identity on top, one capsule strip carrying all system
   status underneath. Status is secondary information - it should not compete
   with the location a rider is trying to read at a doorstep. */
.app-header { flex-direction: column; align-items: stretch; gap: 9px; }
.header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.header-identity { min-width: 0; }
.header-identity h1 { max-width: none; font-size: 19px; line-height: 1.25; }
.header-identity .eyebrow { margin: 3px 0 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a7cbb9; }
.status-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 7px 13px; border-radius: 999px; background: rgba(0, 0, 0, 0.20);
}
.status-strip .location-meta,
.status-strip .partner-pill,
.status-strip .network-pill,
.status-strip .sync-pill {
  background: none; border: none; padding: 0; margin: 0;
  max-width: none; font-size: 11.5px; font-weight: 600; color: #cfe6da;
}
.status-strip .partner-pill { display: none; }
.status-strip .network-pill::before,
.status-strip .sync-pill::before { content: "·"; margin-right: 10px; color: #7fa893; }

/* Mobile: the strip wrapped to a second line and doubled the header height.
   One line, no wrapping, tighter everything. */
.app-header { margin: 8px 10px 4px; padding: 12px 14px; min-height: 0; gap: 8px; border-radius: 20px; }
.header-identity h1 { font-size: 17px; }
.header-identity .eyebrow { font-size: 10px; letter-spacing: 0.12em; }
.brand-mark-btn { width: 38px; height: 38px; }
.status-strip {
  flex-wrap: nowrap; overflow: hidden; gap: 8px; padding: 6px 12px;
}
.status-strip .location-meta,
.status-strip .network-pill,
.status-strip .sync-pill { font-size: 11px; white-space: nowrap; }
.status-strip .network-pill::before,
.status-strip .sync-pill::before { margin-right: 8px; }
@media (max-width: 380px) {
  .header-identity h1 { font-size: 16px; }
  .status-strip .location-meta,
  .status-strip .network-pill,
  .status-strip .sync-pill { font-size: 10.5px; }
}

/* Full meta restored (Live + time), so the strip has to carry ~48 characters.
   nowrap keeps the header height fixed; the sizes below make it fit a 390px
   phone without clipping. */
.status-strip { gap: 7px; padding: 6px 11px; }
.status-strip .location-meta,
.status-strip .network-pill,
.status-strip .sync-pill { font-size: 10.5px; letter-spacing: -0.1px; }
.status-strip .network-pill::before,
.status-strip .sync-pill::before { margin-right: 7px; }
@media (max-width: 380px) {
  .status-strip .location-meta,
  .status-strip .network-pill,
  .status-strip .sync-pill { font-size: 9.8px; }
  .status-strip { gap: 6px; padding: 6px 10px; }
}

/* Status strip inverted: white capsule, dark green text — mirrors the
   online-availability button, so the whole app uses one inversion pattern. */
.status-strip { background: #ffffff; }
.status-strip .location-meta,
.status-strip .network-pill,
.status-strip .sync-pill { color: var(--navy); font-weight: 700; }
.status-strip .network-pill::before,
.status-strip .sync-pill::before { color: #9ab5a8; }

/* Even rhythm inside the strip. The space before each separator came from the
   flex gap and the space after from a margin, so they never matched. Gap is
   now zero and every separator owns identical space on both sides. */
.status-strip {
  gap: 0;
  padding: 7px 14px;
  align-items: center;
  line-height: 1;
}
.status-strip .location-meta { gap: 6px; flex: 0 1 auto; min-width: 0; }
.status-strip .location-meta,
.status-strip .network-pill,
.status-strip .sync-pill {
  line-height: 1;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
}
.status-strip .network-pill::before,
.status-strip .sync-pill::before {
  content: "·";
  margin: 0 9px;
  color: #b3c9bf;
  font-weight: 400;
}

/* Match the admin splash sizing so both apps open identically. */
/* REMOVED (theme v3): .splash-art belonged to the old static splash. */

/* ═══════════════════════════════════════════════════════════════════════════
   THEME v3 - COMPONENTS
   ───────────────────────────────────────────────────────────────────────────
   Appended at the END on purpose. A stale .splash override further up this file
   silently painted the new opening white, because it came later in the cascade.
   Rather than hunt and edit rules whose full effects are hard to see in a 2600
   line sheet, the redesign lands last and wins cleanly. Nothing is deleted, so
   removing this block returns the app exactly to where it was.

   No class names, no markup and no JS hooks are changed - every selector below
   targets structure that already exists.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rhythm ──────────────────────────────────────────────────────────────── */
.screen { padding-bottom: 96px; }
.availability-panel,
.stats-grid,
.milestone-card,
.alert-strip { margin: 10px 12px; }

/* ── Availability: the one hero element ──────────────────────────────────────
   This is the only control that decides whether a rider earns today, so it gets
   the strongest card on the screen and a live status dot rather than plain text. */
.availability-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px 16px 18px;
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.availability-panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--green);
}
.availability-panel > div { flex: 1; min-width: 0; }
.availability-panel p.muted {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.availability-panel strong {
  display: flex; align-items: center; gap: 9px;
  margin-top: 5px; font-size: 26px; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); line-height: 1.05;
}
.availability-panel strong::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--green); box-shadow: 0 0 0 4px rgba(19,153,107,.16);
  animation: liveDot 2s var(--ease) infinite;
}
@keyframes liveDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(19,153,107,.16); }
  50%     { box-shadow: 0 0 0 7px rgba(19,153,107,.06); }
}
/* Offline: the accent goes grey and the dot stops, so the state is legible at a
   glance rather than by reading the word. */
.availability-panel:has(.toggle-button:not(.is-online))::before { background: #C3CDC8; }
.availability-panel:has(.toggle-button:not(.is-online)) strong::before {
  background: #C3CDC8; box-shadow: 0 0 0 4px rgba(6,16,12,.06); animation: none;
}

.toggle-button {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 140ms var(--ease), box-shadow 200ms var(--ease);
}
.toggle-button:active { transform: scale(.97); }
.toggle-button.is-online { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── Stats: one card, not three floating boxes ───────────────────────────────
   Three separate bordered boxes read as three unrelated things. One surface with
   hairline dividers reads as a single summary, which is what it is. */
.stats-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 0; overflow: hidden;
}
.stats-grid article {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 15px 10px 16px; text-align: center;
  border-left: 1px solid var(--line);
}
.stats-grid article:first-child { border-left: none; }
.stats-grid article span {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.stats-grid article strong {
  display: block; margin-top: 7px;
  font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: tabular-nums;   /* numbers stop jittering as they update */
}

/* ── Milestone: an achievement, so it reads positive ─────────────────────────
   The fill was an orange-to-red gradient, which is the visual language of a
   warning. A bonus the rider has just earned should not look like an alarm. */
.milestone-card {
  background: var(--green-soft);
  border: 1px solid rgba(19,153,107,.18);
  border-radius: var(--radius);
  box-shadow: none; padding: 13px 14px 14px;
}
.milestone-head {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; font-weight: 600; color: #14543D; line-height: 1.45;
}
.milestone-head span:last-child {
  margin-left: auto; flex: 0 0 auto; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--green);
}
.milestone-track {
  margin-top: 11px; height: 6px; border-radius: 6px;
  background: rgba(19,153,107,.16); overflow: hidden;
}
.milestone-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--green), #2FBF87);
  transition: width 600ms var(--ease);
}

/* ── Alert strip ─────────────────────────────────────────────────────────── */
.alert-strip {
  border-radius: var(--radius);
  border: 1px solid rgba(255,167,36,.32);
  border-left: 4px solid var(--gold);
  background: var(--amber-soft);
  box-shadow: none; padding: 13px 15px;
}

/* ── Bottom navigation ───────────────────────────────────────────────────────
   Floats above the page on a blurred surface so content scrolls under it, and
   the active tab is a filled pill rather than a pale rectangle. */
.bottom-nav {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px -12px rgba(6,16,12,.24);
}
.nav-button {
  border-radius: 13px; padding: 8px 4px 7px; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: none; border: none;
  transition: color 180ms var(--ease), background 220ms var(--ease);
}
.nav-button.is-active { color: var(--navy); font-weight: 800; background: var(--navy-soft); }

/* ── Buttons, globally ───────────────────────────────────────────────────── */
.primary-action, .pill-button, .ghost-button {
  border-radius: var(--radius-pill);
  letter-spacing: -.01em;
  transition: transform 140ms var(--ease), box-shadow 200ms var(--ease),
              background 200ms var(--ease);
}
.primary-action:active, .pill-button:active { transform: scale(.98); }

/* ── Cards, generally ────────────────────────────────────────────────────── */
.map-area, .active-trip, .account-panel, .settings-card,
.referral-card, .ratings-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   Going offline is the single most consequential control in the app, so on a
   phone it gets a full-width thumb target rather than a small pill on the right.
   The original sheet did this, but only below 380px - so most modern handsets
   (390-430px) fell into the desktop row layout and got the small target. This
   extends the intent to every phone width instead of narrowing it.

   align-items:stretch matters: the base rule above sets center, which in a
   COLUMN flex centres every child and left-aligns nothing. */
@media (max-width: 560px) {
  .availability-panel { flex-direction: column; align-items: stretch; gap: 13px; }
  .availability-panel strong { font-size: 24px; }
  .toggle-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .availability-panel strong::before { animation: none; }
}

/* ── THEME v3b - logistics-app patterns ──────────────────────────────────────
   Generic mobile-logistics conventions applied in the Restronomy palette:
   a floating pill navigation bar, and a connected pickup -> drop timeline.
   These are standard patterns (Uber, Swiggy, Zomato, Porter all use some form),
   rebuilt here from scratch in brand colours - nothing is lifted from any
   particular product's design.
   ------------------------------------------------------------------------- */

/* Floating navigation. Sits over the content rather than walling it off, which
   buys back vertical space on a small screen and reads as a modern app bar.
   The icons are drawn with currentColor, so they follow the button colour onto
   a dark ground without needing to be redrawn - checked before going dark,
   because an icon set with baked-in colours would simply have vanished. */
.screen { padding-bottom: 118px; }
.bottom-nav {
  /* ABSOLUTE, not fixed. The parent .phone-shell is position:relative and
     width:min(100%,410px) - a fixed nav escapes that frame and anchors to the
     viewport, so on a desktop it spilled straight out of the phone. */
  position: absolute; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--navy); border: none; border-radius: 22px; padding: 7px;
  box-shadow: 0 14px 34px -10px rgba(6,16,12,.55),
              inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav-button {
  color: rgba(255,255,255,.60); border-radius: 16px;
  padding: 9px 4px 8px; font-weight: 600;
}
.nav-button.is-active { background: var(--gold); color: var(--navy); font-weight: 800; }
/* The wallet "coin" had a hardcoded white fill, which only worked on a light
   bar. currentColor makes it follow the button in both states. */
.wallet-icon::after { background: currentColor; }

/* Pickup -> drop as a connected timeline rather than two loose rows. The two
   dots already existed; this joins them, so the trip reads as one journey with
   a direction instead of a list of addresses. */
.trip-route { position: relative; }
.route-leg { position: relative; padding-left: 6px; }
.route-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  border: 3px solid var(--green); box-shadow: 0 0 0 3px rgba(19,153,107,.14);
  z-index: 2;
}
.route-dot.is-pickup {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10,43,32,.12);
}
.route-leg:first-child::after {
  content: ''; position: absolute; left: 11px; top: 22px; bottom: -14px; width: 2px;
  background: linear-gradient(180deg, var(--navy), var(--green));
  border-radius: 2px; z-index: 1;
}
.route-leg-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.route-leg-name {
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin-top: 2px;
}
.call-chip { border-radius: var(--radius-pill); font-weight: 700; }

/* ── Transparent header ──────────────────────────────────────────────────────
   The header was a solid dark-green capsule, which walled the top of the app
   off from the content. Dropping the ground lets the page start at the top and
   makes the screen feel taller - the same move the reference shot uses.

   THE TRAP, and why this is more than one line: everything in this header was
   white because it sat on dark green. Going transparent on a light page would
   have made the title, the rider name and the gear icon invisible - the exact
   failure the opening sequence already hit once today. So the text flips to ink
   and the icon is recoloured here.

   The gear SVG carries hardcoded fill="#ffffff" / stroke="#ffffff" in the
   markup. CSS wins over SVG presentation attributes, so it is recoloured from
   the stylesheet rather than editing 13 attributes in index.html - which keeps
   the markup untouched, as asked.                                            */
.app-header {
  background: transparent; color: var(--ink); box-shadow: none;
  margin: 6px 12px 2px; min-height: 0; border-radius: 0;
  /* iOS SAFE AREA. index.html sets viewport-fit=cover, so the page extends
     under the Dynamic Island / notch by design and every top edge must add the
     inset back. An earlier version of this rule used a flat padding shorthand,
     which silently overrode the existing max(18px, env(safe-area-inset-top))
     further up this sheet - that is what put the header under the camera on
     iPhone. Longhand here so it cannot happen again. */
  padding-left: 4px; padding-right: 4px; padding-bottom: 6px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.app-header .header-identity h1 {
  color: var(--ink); font-weight: 800; letter-spacing: -.02em;
}
.app-header .header-identity .eyebrow { color: var(--muted); }

.app-header .settings-gear { color: var(--navy); }
.app-header .settings-gear svg [stroke] { stroke: currentColor; }
.app-header .settings-gear svg [fill]:not([fill="none"]) { fill: currentColor; }

/* The GPS pill used to read against dark green. On the page it needs its own
   edge, or it dissolves into the background. */
.app-header .status-strip {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(6,16,12,.05), 0 8px 18px -12px rgba(6,16,12,.18);
}

/* ── Rider profile photo ─────────────────────────────────────────────────── */
.header-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--navy) center/cover no-repeat;
  color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(6,16,12,.22);
}
.header-avatar.has-photo { color: transparent; }
.app-header .header-main { display: flex; align-items: center; gap: 12px; }

.photo-row { display: flex; align-items: center; gap: 14px; }
.photo-preview {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--navy) center/cover no-repeat;
  color: #fff; font-size: 20px; font-weight: 800;
  box-shadow: 0 0 0 3px #fff, 0 3px 12px rgba(6,16,12,.24);
}
.photo-preview.has-photo { color: transparent; }
.photo-copy { min-width: 0; flex: 1; }
.photo-hint { margin: 0 0 9px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Tablet and desktop ──────────────────────────────────────────────────────
   Nothing to do here. .phone-shell is already width:min(100%,410px) and
   centred, so the app frames itself on any screen. An earlier version of this
   block capped .workspace and gave the nav an explicit desktop width - both
   were solving a problem the shell had already solved, and the nav widths
   (536px, 596px) were wider than the 410px shell, which is what pushed the bar
   out through the side of the phone. Removed rather than patched.           */


/* ── Opening sequence v2: restrained ─────────────────────────────────────────
   A character sliding across the screen reads as a mascot, not as a product.
   This is the treatment serious apps use: a mark that draws itself, a wordmark
   that settles into its tracking, one accent, and out. Every movement is small
   and precisely timed - the polish is in the easing, not in the distance
   anything travels.

   Still pure CSS keyframes on a fixed timeline: no JS, so nothing can throw and
   strand a rider on a green screen.                                          */
.sp-mono { position: relative; width: 88px; height: 88px; margin: 0 auto 26px; }
.sp-mono svg { width: 88px; height: 88px; display: block; transform: rotate(-90deg); }
.sp-ring {
  fill: none; stroke: rgba(255,255,255,.34); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 270; stroke-dashoffset: 270;
  animation: spRing 1150ms cubic-bezier(.65,0,.35,1) 120ms forwards;
}
@keyframes spRing { to { stroke-dashoffset: 0; } }
.sp-mono-letter {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: #fff;
  opacity: 0; transform: scale(.82);
  animation: spMono 720ms var(--ease) 560ms forwards;
}
@keyframes spMono { to { opacity: 1; transform: scale(1); } }

/* The tracking settle. Letters start wide and draw together into the wordmark -
   the one move that reads as considered typography rather than an effect. */
.sp-word {
  font-size: clamp(25px, 7.6vw, 36px); font-weight: 800; color: #fff; line-height: 1;
  letter-spacing: .26em; opacity: 0; clip-path: none;
  animation: spTrack 1000ms var(--ease) 900ms forwards;
}
@keyframes spTrack {
  0%   { opacity: 0; letter-spacing: .26em; }
  35%  { opacity: 1; }
  100% { opacity: 1; letter-spacing: -.035em; }
}
.sp-dot { animation-delay: 1700ms; }

/* Hairline rule, drawn outward from the centre. */
.sp-rule {
  display: block; width: 44px; height: 1px; margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: scaleX(0); animation: spRule 760ms var(--ease) 1780ms forwards;
}
@keyframes spRule { to { transform: scaleX(1); } }
.sp-sub { animation-delay: 1980ms; }

/* The whole lockup lifts a fraction as it leaves, so the handover to the app
   feels like a camera pull rather than a hard cut. */
.sp-stage { animation: spExit 620ms var(--ease) 2900ms forwards; }
@keyframes spExit { to { transform: scale(1.04); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sp-ring { stroke-dashoffset: 0; animation: none; }
  .sp-mono-letter { opacity: 1; transform: none; animation: none; }
  .sp-word { opacity: 1; letter-spacing: -.035em; animation: none; }
  .sp-rule { transform: scaleX(1); animation: none; }
  .sp-stage { animation: none; }
}

/* ── Rider rating ────────────────────────────────────────────────────────── */
.score-row { display: flex; align-items: center; gap: 18px; }
.score-big { text-align: center; flex: 0 0 auto; min-width: 78px; }
.score-big strong {
  display: block; font-size: 34px; font-weight: 800; letter-spacing: -.04em;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.score-big span {
  display: block; margin-top: 5px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.score-big span.is-excellent       { color: var(--green); }
.score-big span.is-good            { color: var(--green); }
.score-big span.is-fair            { color: #B36F00; }
.score-big span.is-needs_attention { color: var(--coral); }

.score-bars { flex: 1; min-width: 0; display: grid; gap: 7px; }
.score-bar { display: flex; align-items: center; gap: 9px; }
.score-bar-label {
  flex: 0 0 74px; font-size: 10.5px; font-weight: 600; color: var(--muted);
}
.score-bar-track {
  flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden;
}
.score-bar-track i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--green), #2FBF87);
  transition: width 600ms var(--ease);
}
.score-bar-val {
  flex: 0 0 26px; text-align: right; font-size: 11px; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.score-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* ── KITCHEN QR SHEET ──────────────────────────────────────────────────────
   Appended as a final block on purpose, same as the theme v3 rules above:
   anything inserted earlier can be beaten on cascade order by a rule further
   down, which is exactly how the splash once rendered white on white and how
   rate.html's logo got reset by a `.head span`. Last block wins, visibly.

   Scoped under .qr-sheet so nothing here can reach the rest of the app. */
.qr-sheet{
  position:absolute; inset:0; z-index:40;
  display:grid; place-items:center;
  background:rgba(6,16,12,.62);
  padding:18px;
}
.qr-sheet.is-hidden{display:none}
.qr-sheet-card{
  width:min(100%,330px); background:#fff; border-radius:20px;
  padding:20px 18px 18px; text-align:center;
  box-shadow:0 22px 48px -18px rgba(6,16,12,.5);
}
.qr-sheet-card h3{margin:0 0 4px; font-size:17px; font-weight:800; color:var(--ink)}
.qr-sheet-sub{margin:0 0 14px; font-size:12.5px; color:var(--muted); line-height:1.45}
/* White plate behind the code: a QR on a tinted background loses contrast and
   the quiet zone stops doing its job. */
.qr-sheet-canvas-wrap{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:10px; display:grid; place-items:center; min-height:120px;
}
.qr-sheet-canvas-wrap canvas{display:block; width:100%; height:auto; max-width:252px;
  image-rendering:pixelated}
.qr-sheet-fallback{
  margin:0; font-size:11px; line-height:1.5; color:var(--ink);
  word-break:break-all; text-align:left;
}
.qr-sheet-code{
  margin:10px 0 14px; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--muted);
}

/* Phone-claim sheet inputs. Reuses .qr-sheet from the block above; only the
   form controls are new. Appended as a final block for the same cascade
   reason documented there. */
.sheet-input{
  width:100%; margin-bottom:10px; padding:13px 14px;
  border:1px solid var(--line); border-radius:12px;
  font:inherit; font-size:15px; background:var(--page); color:var(--ink);
  text-align:center; letter-spacing:.06em;
}
.sheet-input:focus{outline:2px solid rgba(19,153,107,.35); outline-offset:1px}
.sheet-msg{margin:10px 0 0; font-size:12.5px; font-weight:600; line-height:1.45}
.sheet-msg.is-err{color:var(--coral)}
.sheet-msg.is-ok{color:var(--green)}
#phoneClaimStrip .ghost-action{margin-left:auto; flex:0 0 auto}