/* ─────────────────────────────────────────────────────────────────────────────
   Uyali design refresh — after Cytens's reference set (calm "after" screens):
   one hero per screen, grouped lists in soft cards, sentence case, light
   summaries instead of black "credit card" heroes, and a clear "where am I"
   indicator. Loaded after polish.css; existing tokens only.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Errand progress: "Step 3 of 5" with a slim bar (task-app reference) ── */
.uyali-step-meter { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.uyali-step-meter-label { flex: none; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.uyali-step-meter-track { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.uyali-step-meter-track > span { display: block; height: 100%; border-radius: inherit; background: var(--uyali-brand); transition: width .3s ease; }

/* ── Profile (profile reference): identity row, quick tiles, grouped list ── */
.profile-page-title { letter-spacing: -.4px; }
.profile-identity-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "avatar name" "avatar handle" "badges badges" "stats stats";
  column-gap: 16px;
  align-items: center;
  text-align: start;
  padding: 20px;
  border-radius: 20px;
  box-shadow: none;
  border: 1px solid var(--border-subtle);
}
.profile-avatar-wrap { grid-area: avatar; width: 64px; height: 64px; margin: 0; }
.profile-avatar { width: 64px; height: 64px; }
.profile-camera-overlay { width: 24px; height: 24px; right: -2px; bottom: -2px; }
.profile-camera-overlay svg { width: 12px; height: 12px; }
.profile-name { grid-area: name; align-self: end; margin: 0; font-size: 20px; letter-spacing: -.3px; }
.profile-handle { grid-area: handle; align-self: start; margin: 2px 0 0; }
.profile-badges { grid-area: badges; justify-content: flex-start; margin: 14px 0 0; }
.profile-stats-row {
  grid-area: stats; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 16px; padding: 0; border: 0; background: none;
}
.profile-stat-divider { display: none; }
.profile-stat { align-items: flex-start; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg-input); }
.profile-stat-val { font-size: 18px; }
.profile-stat-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

/* Payment summary: light card with one honest action (no "Add funds"/"Withdraw"
   in a cash-first app). */
.profile-wallet-card {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: none; padding: 20px;
}
.profile-wallet-glow { display: none; }
.profile-wallet-label { color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.profile-wallet-amount { color: var(--text-primary); font-size: 28px; letter-spacing: -.5px; }
.profile-wallet-actions { display: flex; margin-top: 14px; }
.profile-wallet-btn {
  flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--border-primary);
  background: var(--bg-card); color: var(--text-primary); font-weight: 600;
}
.profile-wallet-btn:hover { background: var(--bg-input); }
/* An older phone dark rule styled this for the former black card (text-on-elevated). */
:root[data-theme="dark"] .profile-wallet-btn { color: var(--text-primary); background: var(--bg-card); border-color: var(--border-primary); }
:root[data-theme="dark"] .profile-wallet-btn:hover { background: var(--bg-input); }

.profile-menu-card { border-radius: 20px; border: 1px solid var(--border-subtle); box-shadow: none; overflow: hidden; }
.profile-menu-item, .profile-setting-row { min-height: 56px; }
.profile-menu-item + .profile-menu-item { border-top: 1px solid var(--border-subtle); }
.profile-setting-row {
  display: flex; align-items: center; gap: 14px; padding: 0 16px; cursor: pointer; color: var(--text-primary);
}
.profile-setting-row .profile-menu-text { flex: 1; font-weight: 600; }
.profile-language-select {
  appearance: none; border: 0; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 15px; text-align: end; padding: 8px 4px; cursor: pointer; min-height: 44px;
}
.profile-language-select:focus-visible { outline: 2px solid var(--uyali-focus); border-radius: 8px; }
.profile-logout-btn {
  display: block; width: 100%; min-height: 48px; margin-top: 4px; border: 0; background: none;
  color: var(--rose-600, #e11d48); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 12px;
}
.profile-logout-btn:hover { background: var(--bg-input); }
.profile-logout-btn:focus-visible { outline: 2px solid var(--uyali-focus); }

/* ── Runner home (banking "credit card ad" reference): light summary card ── */
.wallet-card {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: none; padding: 20px;
}
.wallet-glow { display: none; }
.wallet-avatar-wrap { background: var(--bg-input); color: var(--text-secondary); }
.wallet-payout-label { color: var(--text-secondary); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.wallet-balance { color: var(--text-primary); font-size: 30px; letter-spacing: -.6px; }
.cashout-btn {
  background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-primary);
  min-height: 44px; border-radius: 12px; font-weight: 600; box-shadow: none;
}
.cashout-btn:hover { background: var(--bg-input); }
/* Segmented control instead of two heavy tabs. */
.runner-tab-bar { background: var(--bg-input); border: 0; border-radius: 12px; padding: 4px; gap: 4px; }
.runner-tab { min-height: 40px; border-radius: 9px; font-weight: 600; color: var(--text-secondary); box-shadow: none; }
.runner-tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ── Chat (chat reference): pill composer with a brand send button ── */
.chat-input { border-radius: 999px; border: 1px solid var(--border-subtle); font-weight: 500; padding: 0 18px; }
.chat-input:focus { border-color: var(--uyali-brand); outline: none; }
.chat-attach-btn { border-radius: 999px; background: var(--uyali-brand); color: var(--uyali-on-brand, #fff); }
.chat-attach-btn:hover { background: var(--uyali-brand); color: var(--uyali-on-brand, #fff); filter: brightness(.94); }
.chat-attach-btn:disabled { background: var(--bg-input); color: var(--text-muted); filter: none; }

/* ── Cards everywhere: one radius, hairline borders, no heavy shadows ── */
.uyali-order-progress, .uyali-summary-card, .mission-card, .mission-list-card, .upload-card, .radar-card { border-radius: 20px; }
.mission-card, .mission-list-card, .radar-card { box-shadow: none; border: 1px solid var(--border-subtle); }

/* ── Home sheet (ride-app "Where to?" reference) ──────────────────────────
   Search pill, then one grouped card of places (GPS + saved addresses),
   the main action, and two quiet shortcut tiles. */
.home-destination-button { border-radius: 999px; min-height: 58px; padding: 10px 18px; border-color: transparent; }
.home-destination-button:hover { border-color: var(--border-primary); }
.home-places { display: grid; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-card); overflow: hidden; }
.home-saved-places { display: contents; }
.home-place {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: start; cursor: pointer;
}
.home-place + .home-place, .home-places > .home-place + .home-saved-places > .home-place:first-child { border-top: 1px solid var(--border-subtle); }
.home-place:hover { background: var(--bg-input); }
.home-place:focus-visible { outline: 3px solid var(--uyali-focus); outline-offset: -3px; }
.home-place[aria-busy="true"] { opacity: .6; }
.home-place-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--bg-input); color: var(--text-secondary); }
.home-place-icon svg { width: 18px; height: 18px; }
.home-location-button .home-place-icon { background: var(--uyali-brand-soft, var(--bg-input)); color: var(--uyali-brand-text); }
.home-place-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.home-place-title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.home-place-sub { font-size: 13px; line-height: 1.35; color: var(--text-secondary); overflow-wrap: anywhere; }
.home-place-chevron, .home-place-chevron svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
[dir="rtl"] .home-place-chevron svg, [dir="rtl"] .home-place > svg.home-place-chevron { transform: scaleX(-1); }
/* The old GPS link styling no longer applies to the row. */
.home-location-button.home-place { color: var(--text-primary); min-height: 60px; padding: 10px 14px; border-radius: 0; font-weight: inherit; }
.home-request-button { border-radius: 16px; min-height: 58px; background: var(--uyali-brand); color: var(--uyali-on-brand, #fff); }
.home-tiles > button { flex-direction: column; gap: 6px; min-height: 76px; border-radius: 16px; font-weight: 600; font-size: 14px; }
.home-tiles svg { width: 20px; height: 20px; color: var(--uyali-brand-text); }

/* ── Your errands (task-app "Today" reference) ─────────────────────────────
   Summary line, Active / Completed pills, one grouped card of rows with a
   status dot, shop, "N items · status" and date; the open errand highlighted. */
.uyali-orders { display: grid; gap: 12px; margin: 0 0 16px; order: -1; } /* navigation first on the Orders screen */
.uyali-orders.hidden { display: none; }
.uyali-orders-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.uyali-orders-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.uyali-orders-summary { margin: 0; font-size: 13px; color: var(--text-secondary); }
.uyali-orders-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.uyali-orders-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uyali-orders-pill span { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 500; }
.uyali-orders-pill[aria-pressed="true"] { background: var(--uyali-brand); border-color: var(--uyali-brand); color: var(--uyali-on-brand, #fff); }
.uyali-orders-pill[aria-pressed="true"] span { color: inherit; opacity: .85; }
.uyali-orders-pill:focus-visible, .uyali-orders-row:focus-visible { outline: 3px solid var(--uyali-focus); outline-offset: 2px; }
.uyali-orders-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-card); overflow: hidden; }
.uyali-orders-list li + li { border-top: 1px solid var(--border-subtle); }
.uyali-orders-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px;
  border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: start; cursor: pointer;
}
.uyali-orders-row:hover { background: var(--bg-input); }
.uyali-orders-row[aria-current="true"] { background: var(--uyali-brand-soft, var(--bg-input)); box-shadow: inset 3px 0 0 var(--uyali-brand); }
[dir="rtl"] .uyali-orders-row[aria-current="true"] { box-shadow: inset -3px 0 0 var(--uyali-brand); }
.uyali-orders-status { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--uyali-brand); }
.uyali-orders-status[data-tone="done"] { background: var(--emerald-500); }
.uyali-orders-status[data-tone="attention"] { background: var(--amber-500); }
.uyali-orders-status[data-tone="muted"] { background: var(--border-primary); }
.uyali-orders-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.uyali-orders-name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.uyali-orders-meta { font-size: 13px; color: var(--text-secondary); }
.uyali-orders-date { flex: none; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .uyali-orders-row[aria-current="true"] { background: rgba(52, 211, 153, .10); }

/* Runner errand tiles: calmer cards with the brand accent for the open one. */
.uyali-order-tile { border-radius: 16px; border-color: var(--border-subtle); padding: 14px 16px; gap: 4px; box-shadow: none; }
.uyali-order-tile[aria-current="true"] { border-color: var(--uyali-brand); box-shadow: inset 3px 0 0 var(--uyali-brand); }
.uyali-order-tile:focus-visible { outline-color: var(--uyali-focus); }
.uyali-order-status { justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
@media (min-width: 769px) {
  /* Long rows are hard to scan on wide screens; keep the list a readable width. */
  #uyali-order-selector.uyali-orders { max-width: 720px; } /* release-ui.css sets max-width:none on the id */
  .uyali-summary-card { margin-inline: 24px; }
}
/* Arabic glyphs (shop names, addresses, the Arabic UI) use the bundled Noto Sans
   Arabic instead of whatever each phone happens to have. */
body, button, input, select, textarea { font-family: Geist, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Role switcher: animate colours only. "transition: all" also animated the
   inherited visibility, so the options could not take keyboard focus as the
   list opened. */
.role-option { transition-property: background-color, border-color, color, box-shadow; }
/* ── Completed errand: receipt in the status card, no live map ── */
.uyali-receipt { display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border-subtle); }
.uyali-receipt-line { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.uyali-receipt-line dt { color: var(--text-secondary); }
.uyali-receipt-line dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.uyali-receipt-total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border-subtle); font-size: 16px; }
.uyali-receipt-total dt { color: var(--text-primary); font-weight: 600; }
.uyali-receipt-total dd { font-weight: 800; }
.uyali-receipt-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.uyali-order-progress-secondary {
  display: block; width: 100%; min-height: 48px; margin-top: 10px; border: 1px solid var(--border-primary); border-radius: 12px;
  background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.uyali-order-progress-secondary:hover { background: var(--bg-input); }
.uyali-order-progress-secondary:focus-visible { outline: 3px solid var(--uyali-focus); outline-offset: 2px; }
#screen-chat[data-uyali-done] .chat-map-card { display: none; }

/* Purchase record card: calm header in both themes (it was a black strip in
   light mode and a white strip in dark mode), hairline border, no heavy shadow. */
.receipt-card { border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: none; }
.receipt-header { background: var(--bg-card); color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); padding: 14px 20px; }
.receipt-scan-icon { color: var(--uyali-brand-text); }
.receipt-body { background: var(--bg-card); padding: 20px; }

/* ── Runner active errand: one primary action, compact budget panel ──
   The status card above already carries the next step as the brand button,
   so the panel's matching button is secondary. On desktop the panel sizes
   to its content instead of filling the column around a small card. */
.role-switcher-label { text-transform: none; letter-spacing: 0; }
#runner-upload .upload-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-primary); box-shadow: none; height: 48px; border-radius: 12px; font-weight: 600;
}
#runner-upload .upload-btn:hover { background: var(--bg-input); filter: none; }
#runner-upload .upload-btn svg { width: 18px; height: 18px; }
#runner-upload .upload-desc { margin: 14px 0 12px; text-align: start; }
@media (min-width: 769px) {
  #runner-active .runner-right-centered {
    flex: 1; align-self: flex-start; justify-content: flex-start; align-items: stretch;
    padding: 24px; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: none;
  }
  #runner-active .upload-card { max-width: none; text-align: start; }
  #runner-active .virtual-card { max-width: none; margin: 0; }
  /* The list card fits its items (and still scrolls when the list is long). */
  #runner-active .mission-list-card { flex: 0 1 auto; }
}
/* ── Runner browse: the status card carries "Make an offer" ──
   The list button becomes secondary, and the drag-only "slide to offer"
   control over the map is removed (it repeated the same action and could
   not be used with a keyboard or screen reader). The map card stays as a
   summary of the reward, shop and items. */
#gig-accept-btn {
  height: 48px; border: 1px solid var(--border-primary); border-radius: 12px;
  background: var(--bg-card); color: var(--text-primary); font-weight: 600; box-shadow: none;
}
#gig-accept-btn:hover:not(:disabled) { background: var(--bg-input); transform: none; }
#gig-accept-btn:disabled { color: var(--text-muted); cursor: default; }
.map-gig-overlay .overlay-right { display: none; }
.overlay-payout-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.map-gig-overlay { border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: var(--shadow-medium); }
.gig-title { overflow-wrap: anywhere; }

/* ── Browsing on/off: a plain switch in the errands box header ── */
#radar-card .radar-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#radar-card .radar-title { flex: 1; min-width: 0; margin: 0; }
#radar-card .online-toggle {
  position: relative; flex: none; width: 52px; height: 44px; min-width: 52px; padding: 0; margin: 0;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none; cursor: pointer;
}
/* Keep the compact track while providing a 44px-high touch target. */
#radar-card .online-toggle::before { content: ''; position: absolute; inset: 6px 0; border-radius: inherit; background: var(--border-primary); transition: background-color .2s ease; }
#radar-card .online-toggle.online::before { background: var(--uyali-brand); }
#radar-card .online-toggle .toggle-handle {
  position: absolute; top: 9px; inset-inline-start: 3px; width: 26px; height: 26px; margin: 0; padding: 0;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transform: none;
  transition: inset-inline-start .2s ease;
}
#radar-card .online-toggle.online .toggle-handle { inset-inline-start: 23px; }
#radar-card .online-toggle .toggle-label { display: none; }
#radar-card .online-toggle:focus-visible { outline: 3px solid var(--uyali-focus); outline-offset: 2px; }
/* Live status only while browsing is on. */
#radar-card:has(.online-toggle.offline) .radar-scanning-badge { display: none; }
@media (prefers-reduced-motion: reduce) { #radar-card .online-toggle::before, #radar-card .online-toggle .toggle-handle { transition: none; } }
#radar-card .online-toggle { min-height: 44px; max-width: none; display: block; gap: 0; }
#radar-card > .radar-header { padding: 20px 24px 0; margin-bottom: 0; }
#radar-card .radar-online { padding-top: 16px; }
/* Status as a dot: green live, amber paused, pulsing while updating. */
#radar-card .radar-scanning-badge { padding: 0; background: none; width: 24px; height: 24px; justify-content: center; }
#radar-card .radar-scanning-badge > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#radar-card .radar-scanning-badge .radar-scanning-dot { width: 10px; height: 10px; }
#radar-card .radar-scanning-badge[data-state="paused"] .radar-scanning-dot { background: var(--amber-500, #f59e0b); animation: none; }
/* Paused: the power icon and a short title say it; no explanation paragraph. */
#radar-card .radar-offline-desc { display: none; }
/* ── Concise copy: the icon already says it ── */
.home-location-button .home-place-sub { display: none; }   /* GPS icon + "Use my location" */
#radar-card .radar-empty-desc { display: none; }           /* map icon + "Looking for errands nearby" */

/* ── Handover progress as status chips (who · delivery · payment) ── */
#uyali-confirmation-summary { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-card); }
.uyali-confirm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uyali-confirm-who { min-width: 72px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.uyali-confirm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--bg-input); color: var(--text-secondary); }
.uyali-confirm-chip svg { width: 14px; height: 14px; }
.uyali-confirm-chip[data-done="true"] { background: var(--uyali-brand-soft, var(--bg-input)); color: var(--uyali-brand-text); }

/* ── Handover code: grouped digits, a visual countdown, one action ── */
.uyali-handover-code { display: flex; justify-content: center; gap: .6em; letter-spacing: .12em; }
.uyali-code-timer { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.uyali-code-timer-track { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.uyali-code-timer-track > span { display: block; height: 100%; border-radius: inherit; background: var(--uyali-brand); transition: width 1s linear; }
.uyali-code-timer-text { flex: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.uyali-code-note { margin: 0; font-size: 13px; color: var(--text-secondary); }
.uyali-code-modal .modal-cancel-btn { display: none; }
.uyali-code-modal .modal-submit-btn { flex: 1; }
.uyali-code-expired .uyali-handover-code { opacity: .35; text-decoration: line-through; }
.uyali-code-expired .uyali-code-timer-track { display: none; }
.uyali-code-expired .uyali-code-timer-text { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; color: var(--rose-600, #e11d48); }
/* Entering the other person's code: large, centred, spaced digits. */
#uyali-action-modal .modal-body input#uy-code.form-input { font: 700 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .4em; text-align: center; padding-inline-start: .4em; }
@media (prefers-reduced-motion: reduce) { .uyali-code-timer-track > span { transition: none; } }
.uyali-code-expired .uyali-code-note { display: none; }

/* ── Purchase review: photo tiles, goods meter ── */
.uyali-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.uyali-photo-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.uyali-photo-tile { position: relative; display: block; padding: 0; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--bg-input); cursor: zoom-in; aspect-ratio: 4 / 3; }
.uyali-photo-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.uyali-photo-tile.is-zoomed { grid-column: 1 / -1; aspect-ratio: auto; cursor: zoom-out; }
.uyali-photo-tile.is-zoomed img { height: auto; max-height: 70vh; object-fit: contain; }
.uyali-photo-tile:focus-visible { outline: 3px solid var(--uyali-focus); outline-offset: 2px; }
.uyali-goods-meter { display: grid; gap: 6px; margin-bottom: 12px; }
.uyali-goods-meter-label { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.uyali-goods-meter-label span:last-child { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.uyali-goods-meter-track { display: block; height: 8px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.uyali-goods-meter-track > span { display: block; height: 100%; border-radius: inherit; background: var(--uyali-brand); }

/* Announce expiry once without speaking every countdown tick. */
.uyali-code-expiry-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Shop link and shop photo in the order form; shop card on the errand ── */
.uyali-link-row { display: flex; gap: 8px; align-items: stretch; }
.uyali-link-row .form-input { flex: 1 1 auto; min-width: 0; }
.uyali-link-row .uyali-secondary-button { flex: none; width: auto; padding-inline: 14px; }
.uyali-shop-photo { display: flex; align-items: center; gap: 12px; margin-top: 12px; cursor: pointer; }
.uyali-shop-photo-add { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px dashed var(--border-subtle); border-radius: 14px; color: var(--text-secondary); font-weight: 600; font-size: 14px; }
.uyali-shop-photo-add svg { width: 18px; height: 18px; }
.uyali-shop-photo:focus-within .uyali-shop-photo-add { outline: 2px solid var(--uyali-brand-text, currentColor); outline-offset: 2px; }
.uyali-shop-photo-preview img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.uyali-shop-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-card); }
.uyali-shop-card img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 12px; background: var(--bg-input); }
.uyali-shop-card > div { display: grid; gap: 4px; min-width: 0; }
.uyali-shop-card strong { font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; }
.uyali-shop-card a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13.5px; font-weight: 600; color: var(--uyali-brand-text, var(--text-primary)); text-decoration: none; }
.uyali-shop-card a svg { width: 15px; height: 15px; }
#uyali-shop-card { margin: 12px 12px 0; width: auto; }
@media (min-width: 769px) { #uyali-shop-card { margin: 16px 16px 0; max-width: 560px; } }

/* ── After an errand: one-tap "Was the shop at this pin?" for the runner ── */
.uyali-place-question { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-card); }
.uyali-place-question > svg { width: 20px; height: 20px; flex: none; color: var(--uyali-brand-text, var(--text-primary)); }
.uyali-place-question p { flex: 1 1 calc(100% - 40px); margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.uyali-place-answer { min-height: 40px; min-width: 64px; padding: 0 16px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; }
.uyali-place-answer[data-place-answer="here"] { background: var(--uyali-brand-soft, var(--bg-input)); color: var(--uyali-brand-text, var(--text-primary)); }
.uyali-place-answer[data-place-answer="here"] { margin-inline-start: auto; }
.uyali-place-answer:focus-visible { outline: 2px solid var(--uyali-brand-text, currentColor); outline-offset: 2px; }

/* ── Earnings: three even stat cards that fit any phone, sentence-case labels ── */
.analytics-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.analytics-stat { min-width: 0; padding: 14px 12px; border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: none; text-align: start; align-items: flex-start; }
.analytics-stat-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.3; }
.analytics-stat-val { font-size: clamp(16px, 4.6vw, 22px); letter-spacing: -.2px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#uyali-live-ledger .login-legal { text-align: start; }

/* ── Errand chat (chat reference): own messages on the end in the brand colour,
   the other person's on the start in grey, a time under each, system notes centred. ── */
#uyali-order-messages { display: flex; flex-direction: column; gap: 6px; }
.uyali-msg { display: flex; flex-direction: column; max-width: min(78%, 520px); }
.uyali-msg-own { align-self: flex-end; align-items: flex-end; }
.uyali-msg-other { align-self: flex-start; align-items: flex-start; }
.uyali-msg-bubble { margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.uyali-msg-own .uyali-msg-bubble { background: var(--uyali-brand); color: var(--uyali-on-brand, #fff); border-end-end-radius: 6px; }
.uyali-msg-other .uyali-msg-bubble { background: var(--bg-input); color: var(--text-primary); border-end-start-radius: 6px; }
.uyali-msg-time { margin: 2px 6px 4px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chat-bubble-row.uyali-chat-system { justify-content: center; }
.chat-bubble-row.uyali-chat-system .chat-bubble-avatar { display: none; }
.chat-bubble-row.uyali-chat-system .chat-bubble { max-width: 420px; padding: 0 12px; border: 0; background: none; text-align: center; font-size: 13px; font-weight: 500; color: var(--text-secondary); }

/* ── Pin status: a tick and the place name instead of coordinates ── */
.uyali-pin-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1.3; }
.uyali-pin-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.uyali-pin-chip svg { width: 16px; height: 16px; flex: none; }
.uyali-pin-chip[data-done="true"] { background: var(--uyali-brand-soft, var(--bg-input)); color: var(--uyali-brand-text, var(--text-primary)); }
[data-pickup-summary], [data-delivery-summary], [data-pickup-pin-status] { margin: 8px 0 0; padding: 0; border: 0; background: none; }
.uyali-link-row .uyali-secondary-button { align-self: stretch; margin: 0; min-height: 0; height: auto; }
#uy-pickup-link::placeholder { direction: ltr; }
.uyali-link-row > .form-input, .uyali-link-row > .uyali-secondary-button { height: 48px; min-height: 48px; box-sizing: border-box; }
/* ── Accept a runner: a compact card instead of a sentence ── */
.uyali-accept-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--bg-card); }
.uyali-accept-runner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uyali-accept-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--uyali-brand-soft, var(--bg-input)); color: var(--uyali-brand-text, var(--text-primary)); font-size: 20px; font-weight: 700; }
.uyali-accept-runner > div { display: grid; gap: 2px; min-width: 0; }
.uyali-accept-runner strong { font-size: 16px; color: var(--text-primary); overflow-wrap: anywhere; }
.uyali-accept-runner span { font-size: 13px; color: var(--text-secondary); }
.uyali-accept-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.uyali-accept-stats > div { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg-input); }
.uyali-accept-stats dt { font-size: 12.5px; color: var(--text-secondary); }
.uyali-accept-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.uyali-accept-message { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font-size: 14px; }

/* ── Handover card: the main action gets the full width; "Report a problem" sits below as a quiet link ── */
.receipt-actions { flex-wrap: wrap; }
.receipt-actions .receipt-approve-btn { flex: 1 1 100%; order: 1; }
.receipt-actions .receipt-dispute-btn { flex: 1 1 100%; order: 2; min-height: 44px; background: none; border: 0; color: var(--text-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.uyali-accept-card + .login-legal { margin-top: 10px; }

/* ── Errand screens: one status, one action, one spacing rhythm ──
   12px between cards, 12px side margins on phones, 16px inside cards. */
.chat-header .escrow-badge,                       /* goods limit: already in the errand summary and receipt */
.mission-status-badge,                            /* status: already in the progress card */
#runner-upload .upload-btn, #runner-upload .upload-desc { display: none !important; } /* duplicate of the progress card's action */
.uyali-step-meter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the bar says it; screen readers keep the words */
.uyali-step-meter { margin-top: 12px; }
@media (max-width: 768px) {
  #chat-active .chat-left, #runner-active .runner-left { gap: 12px; }
  #chat-active .chat-left > * + *, #runner-active .runner-left > * + * { margin-top: 0; }
  #runner-active .runner-right { padding: 0; border: 0; background: none; box-shadow: none; justify-content: flex-start; min-height: 0; gap: 12px; }
  #runner-upload { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  #runner-upload .virtual-card { margin: 0; }
  .chat-header { padding: 14px 16px 10px; border-bottom: 0; }
  .chat-header-title { font-size: 15px; }
  .mission-card, .mission-list-card, #runner-status-card { padding: 16px; }
  .mission-top { margin-bottom: 4px; }
}
/* The runner's "waiting for review" and "enter the code" cards restate the progress card above them. */
#runner-verifying, #runner-pin-entry { display: none !important; }
@media (max-width: 768px) {
  #runner-upload .virtual-card { padding: 16px; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--bg-card); box-shadow: none; }
  #runner-upload .virtual-card::before, #runner-upload .virtual-card::after { display: none; }
}

/* ── Runner errand list: one card per errand ── */
#map-gig-overlay { display: none !important; }   /* repeated the errand row's reward and shop over the map */
#runner-default .runner-left { display: flex; flex-direction: column; }
#runner-default .runner-tab-bar { order: -1; }    /* the tabs stay put; the balance appears below them on Earnings */
#screen-runner[data-runner-view="analytics"] #runner-default .runner-right { display: none; } /* no map on Earnings */
@media (max-width: 768px) { #runner-default .runner-left { gap: 12px; } #runner-default .runner-left > * { margin-top: 0; margin-bottom: 0; } }
/* The errand row's button is now the runner's main action. */
#radar-gig .gig-accept-btn:not(:disabled) { background: var(--uyali-brand); border-color: transparent; color: var(--uyali-on-brand); font-weight: 700; }
#radar-gig .gig-accept-btn:disabled { opacity: .6; }
/* ── Order form: a dropdown sits as far from the next label as any other field ── */
#uyali-action-modal [data-checkout-step] > select.form-input { margin-bottom: 16px; }
/* ── Home and shopping list: show what is needed now ── */
#price-breakdown { display: none; }               /* empty until checkout, where the real totals appear */
#chat-empty { display: none !important; }         /* the progress card already offers "Create an errand" */
.uyali-item-more { margin: 0 0 8px; }
.uyali-item-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.uyali-item-more > summary::-webkit-details-marker { display: none; }
.uyali-item-more > summary::before { content: "+"; font-size: 15px; line-height: 1; }
.uyali-item-more[open] > summary::before { content: "−"; }
.uyali-item-more-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 4px 2px 4px; }
.uyali-item-more-body label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; color: var(--text-secondary); }
.uyali-item-more-body .form-input, .uyali-item-more-body select { width: 100%; min-width: 0; min-height: 44px; font-size: 14px; border-radius: 10px; }
/* Quantity and unit share one row now that the limit moved into "Limit and substitutes". */
.uyali-item-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; padding-block-end: 4px; }
.uyali-item-details > label:last-child, .uyali-item-details > label:nth-child(3) { grid-column: auto !important; }
.item-row .uyali-local-reference { margin-top: 0; padding-top: 0; }
.item-row .uyali-item-more + .uyali-local-reference { margin-top: -4px; }
.uyali-item-more > summary, .item-row .uyali-local-reference > summary { min-height: 40px; padding: 0 2px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.item-row .uyali-local-reference { padding: 0; margin: 0; }
.uyali-item-more { margin: 0; }
/* ── Information sheets: sized to their text, one button ── */
@media (max-width: 768px) {
  #uyali-action-modal:has(.uyali-info-dialog) { align-items: flex-end; }
  #uyali-action-modal .uyali-info-dialog { height: auto !important; min-height: 0 !important; max-height: 80dvh; margin-top: auto; border-radius: 22px 22px 0 0 !important; }
  #uyali-action-modal .uyali-info-dialog .modal-body { flex: 0 1 auto; }
}
.uyali-info-dialog .form-error:empty { display: none !important; }
@media (max-width: 768px) {
  #uyali-action-modal:has(.uyali-info-dialog) { background: rgb(0 0 0 / .42) !important; backdrop-filter: none; }
}