/* ============================================================================
   Fairly - driver app
   ----------------------------------------------------------------------------
   Loads on top of /shared/fairly-ui.css.

   Design intent: this is used one-handed, outdoors, often in a parked car with
   the engine running. So - one primary action per screen at 56px tall, pay and
   addresses set large enough to read at arm's length, delivery instructions
   never more than zero taps away, and no decorative element competing with the
   single thing the driver has to do next.
   ========================================================================= */

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-16);
}
.view[hidden] { display: none; }

/* ============================================================================
   Topbar
   ========================================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--chrome);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 560px;
  margin: 0 auto;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand-mark { border-radius: 6px; display: block; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }
.text-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-2);
  min-height: 40px;
}
.text-btn:hover { color: var(--text-primary); }
.link-btn { background: none; border: none; color: var(--purple); font-weight: 600; cursor: pointer; padding: 0; font-size: inherit; }

.online-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--success-tint);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--success);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
}
.online-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

/* ============================================================================
   Login / apply
   ========================================================================= */

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  margin-top: var(--sp-6);
}
.login-card h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-6); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--purple);
  margin-bottom: var(--sp-2);
}
.photo-preview { max-width: 100%; max-height: 160px; border-radius: var(--r-md); margin-top: var(--sp-2); }

/* ============================================================================
   Online toggle - the master switch, so it gets real weight
   ========================================================================= */

.online-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}
.online-toggle-row.is-online {
  background: var(--success-tint);
  border-color: rgba(74, 222, 128, 0.3);
}
#online-status-label { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); letter-spacing: -0.02em; }
.online-toggle-row.is-online #online-status-label { color: var(--success); }

/* Active delivery: this decision is already made and rarely needs revisiting
   mid-job, so it steps back to a slim strip instead of a full card - the map
   and the next action below it reach the top of the screen with far less
   scrolling. The toggle button itself stays reachable, just smaller. */
body.has-active-delivery .online-toggle-row {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  gap: var(--sp-3);
}
body.has-active-delivery #online-status-label { font-size: var(--fs-sm); font-weight: 700; }
body.has-active-delivery #online-status-sub { display: none; }
body.has-active-delivery .toggle-btn { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }

.toggle-btn {
  background: var(--purple);
  border: none;
  color: var(--text-on-accent);
  border-radius: var(--r-md);
  padding: 0 var(--sp-5);
  min-height: 48px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.toggle-btn:hover { background: var(--purple-hover); color: var(--text-on-accent-hover); }
.toggle-btn.is-online {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.toggle-btn.is-online:hover { background: var(--surface-2); }

/* ============================================================================
   Tabs
   ========================================================================= */

.segmented {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
}
.segmented-option {
  position: relative;
  flex: 1;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-3);
  min-height: 48px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.segmented-option.is-active { color: var(--text-primary); }
.segmented-option.is-active::after {
  content: '';
  position: absolute;
  left: 20%; right: 20%;
  bottom: -1px;
  height: 2px;
  background: var(--purple);
  border-radius: 2px 2px 0 0;
}

/* ============================================================================
   Offer card
   ----------------------------------------------------------------------------
   Everything the driver needs to decide, visible without scrolling or tapping
   through: what it pays, where it starts, where it ends, how far, how much
   food. Pay is the largest thing on the card because it is the first question.
   ========================================================================= */

.offer-card {
  background: var(--surface);
  border: 1px solid rgba(139, 110, 245, 0.4);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.offer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--purple-tint);
  border-bottom: 1px solid var(--border);
}
.offer-pay {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  color: var(--purple);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.offer-pay-label { font-size: var(--fs-2xs); color: var(--text-secondary); margin-top: var(--sp-1); }
.offer-trip { text-align: right; }
.offer-trip-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.offer-trip-label { font-size: var(--fs-2xs); color: var(--text-secondary); }

.offer-stack-badge {
  display: block;
  padding: 6px var(--sp-5);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.offer-stack-badge.is-close { color: var(--success); background: rgba(52, 199, 89, 0.12); }

.route-stop-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.route-stop { display: flex; align-items: flex-start; gap: var(--sp-3); }
.route-stop-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: var(--fs-2xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-stop-body { display: flex; flex-direction: column; }
.route-stop-type { font-size: var(--fs-2xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.route-stop-label { font-size: var(--fs-sm); font-weight: 600; }

.offer-body { padding: var(--sp-4) var(--sp-5); }

/* Pickup -> drop-off shown as a connected route, not two unrelated lines, so
   the shape of the trip is legible at a glance. */
.offer-leg { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; }
.offer-leg-rail { display: flex; flex-direction: column; align-items: center; padding-top: 5px; }
.offer-leg-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--purple);
  flex-shrink: 0;
}
.offer-leg-dot.is-end { background: var(--purple); }
.offer-leg-line { width: 2px; flex: 1; background: var(--border-strong); margin: 2px 0; min-height: 16px; }
.offer-leg-body { flex: 1; min-width: 0; }
.offer-leg-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted-strong);
  margin-bottom: 2px;
}
.offer-leg-name { font-size: var(--fs-sm); font-weight: 700; }
.offer-leg-where { font-size: var(--fs-xs); color: var(--text-secondary); }

.offer-meta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.offer-meta strong { color: var(--text-primary); font-weight: 600; }

/* Accept is wide and heavy; decline is quiet and narrower, so a hurried thumb
   lands on the safe/likely action rather than dismissing a paying job. */
.offer-actions { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.offer-actions .btn-decline {
  flex: 0 0 auto;
  min-width: 104px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  min-height: 56px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.offer-actions .btn-decline:hover { border-color: var(--danger); color: var(--danger); }
.offer-actions .btn-accept {
  flex: 1;
  background: var(--purple);
  border: none;
  color: var(--text-on-accent);
  border-radius: var(--r-md);
  min-height: 56px;
  font-size: var(--fs-body);
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--t-fast) var(--ease);
}
.offer-actions .btn-accept:hover { background: var(--purple-hover); color: var(--text-on-accent-hover); }
.offer-actions .btn-accept:active { transform: translateY(1px); }

.pay-pill {
  display: inline-flex;
  align-items: center;
  background: var(--success-tint);
  color: var(--success);
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Active delivery
   ----------------------------------------------------------------------------
   One job on screen, one obvious next step. The stage strip answers "where am
   I in this delivery"; the action bar answers "what do I press now".
   ========================================================================= */

.delivery-stage {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.stage-pip {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
.stage-pip.is-done { background: var(--purple); }
.stage-pip.is-current { background: var(--purple); box-shadow: 0 0 0 3px var(--purple-tint); }

.delivery-now {
  background: var(--purple-tint);
  border: 1px solid rgba(139, 110, 245, 0.35);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
}
.delivery-now-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--purple);
  margin-bottom: var(--sp-2);
}
.delivery-now-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-1);
}
.delivery-now-sub { font-size: var(--fs-sm); color: var(--text-secondary); }
.delivery-now-eta {
  display: inline-flex;
  margin-top: var(--sp-3);
  padding: 6px var(--sp-3);
  background: var(--purple);
  color: var(--text-on-accent);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.foreground-tracking-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--warn-tint);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.foreground-tracking-notice [data-icon-done] { color: var(--warn); flex-shrink: 0; }

.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}
.order-card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.01em; }
.order-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.orders-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--purple-tint);
  color: var(--purple);
  white-space: nowrap;
}
.order-status-badge::before { content: '\25CF'; font-size: 9px; }

.delivery-section { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.delivery-section:first-of-type { border-top: none; }
.delivery-section-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted-strong);
  margin-bottom: var(--sp-2);
}
/* Addresses are set at body size, not caption size - they get read at a
   glance from the driver's seat. */
.delivery-address { font-size: var(--fs-body); line-height: 1.55; font-weight: 500; }
.delivery-items { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; }

/* Drop-off instructions are the thing drivers most often complain is buried.
   Tinted, iconed, full width, never behind a tap. */
.delivery-instructions {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--warn-tint);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-primary);
}
.delivery-instructions::before { content: '\26A0'; color: var(--warn); font-weight: 800; flex-shrink: 0; }

/* Tap-to-call / tap-to-navigate: real links, sized for a thumb. */
.contact-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.contact-btn {
  flex: 1;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  min-height: 48px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.contact-btn:hover { border-color: var(--border-strong); background: var(--surface-3); }

.proof-photo-preview {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  margin-bottom: var(--sp-3);
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin: 10px 0;
}
.chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.chat-bubble.is-mine {
  align-self: flex-end;
  background: var(--purple);
  color: #fff;
}
.chat-bubble.is-theirs {
  align-self: flex-start;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.chat-input-row {
  display: flex;
  gap: 8px;
}
.chat-input-row input {
  flex: 1;
}

/* The single next action, pinned so it is always thumb-reachable. */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: var(--sp-4) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--chrome);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.primary-btn {
  background: var(--purple);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--r-md);
  padding: 0 var(--sp-5);
  min-height: 56px;
  font-size: var(--fs-body);
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.primary-btn:hover:not(:disabled) { background: var(--purple-hover); color: var(--text-on-accent-hover); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
.primary-btn:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }

.secondary-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  min-height: 48px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.secondary-btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3); }
.secondary-btn:disabled { color: var(--text-muted); cursor: not-allowed; }

/* Problem reporting is always one tap from the active job - drivers should
   never have to leave the delivery to find help. */
.report-problem-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--r-md);
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--sp-3);
}
.report-problem-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ============================================================================
   Turn-by-turn
   ========================================================================= */

.map-box { height: 200px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.leaflet-container { background: var(--surface-2); }

.directions-next {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3);
}
.directions-next-distance {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  color: var(--purple);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.directions-next-text { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.directions-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.directions-list li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.directions-list li:last-child { border-bottom: none; }
.directions-list .dist { color: var(--text-muted-strong); white-space: nowrap; min-width: 56px; font-variant-numeric: tabular-nums; }

/* ============================================================================
   Earnings
   ========================================================================= */

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-tile-label { font-size: var(--fs-2xs); color: var(--text-muted-strong); margin-top: var(--sp-1); }

.earnings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.earnings-grid .stat-tile { padding: var(--sp-4); }
.earnings-grid .stat-tile-value { font-size: 22px; }

/* Per-delivery pay is broken into base + tip, because "where did this number
   come from" is the single most common driver pay complaint. */
.earning-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.earning-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.earning-total { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.earning-split {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}
.earning-split strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.earning-split .is-tip strong { color: var(--success); }

.payout-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.payout-status.is-ready { color: var(--success); }
.payout-status.is-ready::before { content: '\2713'; font-weight: 800; }
.payout-status.is-pending { color: var(--warn); }
.payout-status.is-pending::before { content: '\25B2'; font-size: 9px; }

/* ============================================================================
   Forms & states
   ========================================================================= */

.field-group { margin-bottom: var(--sp-4); }
.field-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }

input[type="email"], input[type="tel"], input[type="text"], input[type="password"],
input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  min-height: 48px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  font-family: inherit;
  transition: border-color var(--t-fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-tint);
}
textarea { resize: vertical; line-height: 1.5; }

.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}
.password-toggle-btn:hover { color: var(--text-primary); }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--danger);
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  line-height: 1.45;
}
.field-error::before {
  content: '!';
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--text-on-status);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state { color: var(--text-secondary); padding: var(--sp-10) var(--sp-4); text-align: center; font-size: var(--fs-sm); }

/* Waiting-for-offers state: a live pulse makes it obvious the app is actually
   listening rather than stalled. */
.waiting-pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--purple);
  margin: 0 auto var(--sp-4);
  animation: ff-pulse 1.8s ease-out infinite;
}
@keyframes ff-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 110, 245, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(139, 110, 245, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 110, 245, 0); }
}
@media (prefers-reduced-motion: reduce) { .waiting-pulse { animation: none; } }

.support-thread { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; }
.support-message { border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); max-width: 85%; font-size: var(--fs-sm); line-height: 1.55; }
.support-message.from-requester { background: var(--surface-2); align-self: flex-start; }
.support-message.from-admin { background: var(--purple-tint); align-self: flex-end; }
.support-message-meta { font-size: var(--fs-micro); color: var(--text-muted-strong); margin-bottom: var(--sp-1); text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Comfortable-tap floor and accent contrast, measured on the built page.
   Drivers use this one-handed, outdoors, often in motion, so the floor here
   is the one that matters most in the product. --- */
.password-toggle-btn { width: 44px; height: 44px; }
.link-btn { color: var(--purple-ink); min-height: 44px; display: inline-flex; align-items: center; }

/* How long an offer is still yours. Dispatch takes an unanswered offer back
   and passes it to the next driver; before this, that just looked like the
   app losing it. Turns red at ten seconds - the point where it is worth
   deciding now rather than reading the card again. */
.offer-countdown {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted-strong);
}
.offer-countdown.is-urgent { color: var(--red); }
.offer-card { position: relative; }