/* ==========================================================
   Past Delivery Staff Portal — v3.1 polish layer
   Paste at the END of the existing <style> block.
   No IDs / handlers renamed. Logical properties throughout (RTL-safe).
   ========================================================== */

/* ---------- 0. Token additions (palette unchanged) ---------- */
:root{
  --text-sub:rgba(0,0,0,.62);          /* was .55 — fails AA on --bg */
  --text-mute:rgba(0,0,0,.42);         /* icons / dividers only, never text */
  --surface2:#F8F8F9;
  --ok:#11804A;--ok-bg:#E6F6EE;
  --warn:#8A5A00;--warn-bg:#FFF4D6;
  --bad:#B42323;--bad-bg:#FDECEC;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;
  --r-sm:.75rem;--r-lg:1.5rem;
  --shadow-2:0 6px 20px rgba(17,17,17,.06),0 1px 3px rgba(17,17,17,.04);
  --ease:cubic-bezier(.2,.8,.2,1);
  --tap:44px;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- 1. Global rhythm ---------- */
.page-scroll{padding:var(--s4) var(--s4) calc(6rem + env(safe-area-inset-bottom))}
.page-scroll>*+*{margin-block-start:var(--s5)}           /* one gap between blocks */
.section-title{margin:0 0 var(--s2);padding-inline-start:var(--s4);
  font-size:.75rem;letter-spacing:.06em;color:var(--text-sub)}
.card{border:0;box-shadow:var(--shadow);border-radius:var(--radius)}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:50%}
.tab-bar{gap:var(--s2);padding:var(--s2) var(--s4);overflow-x:auto;scroll-snap-type:x mandatory}
.tab-btn{flex:0 0 auto;min-height:36px;padding:0 var(--s4);border-radius:999px;scroll-snap-align:start}
.nav-item{min-width:64px;min-height:48px;font-size:.6875rem}
.info-label{color:var(--text-sub)}
.info-value{text-align:end;font-variant-numeric:tabular-nums}

/* ---------- 2. Primitives ---------- */
.tile{inline-size:40px;block-size:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.tile svg{inline-size:20px;block-size:20px;stroke-width:1.75}
.tile--orange{background:var(--tile-orange);color:var(--tile-orange-fg)}
.tile--blue{background:var(--tile-blue);color:var(--tile-blue-fg)}
.tile--green{background:var(--tile-green);color:var(--tile-green-fg)}
.tile--purple{background:var(--tile-purple);color:var(--tile-purple-fg)}
.tile--red{background:var(--tile-red);color:var(--tile-red-fg)}
.tile--gray{background:var(--tile-gray);color:var(--tile-gray-fg)}

.group{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.list-row{display:flex;align-items:center;gap:var(--s3);min-block-size:56px;
  padding-block:var(--s2);padding-inline:var(--s4) var(--s3);color:inherit;text-decoration:none;
  background:none;border:0;inline-size:100%;font:inherit;text-align:start;cursor:pointer;position:relative}
.list-row+.list-row::before{content:"";position:absolute;inset-block-start:0;inset-inline:calc(var(--s4) + 40px + var(--s3)) 0;
  border-block-start:1px solid var(--border)}
.list-row__body{flex:1;min-inline-size:0}
.list-row__title{font-weight:600;font-size:.9375rem}
.list-row__sub{font-size:.8125rem;color:var(--text-sub);margin-block-start:2px}
.list-row__end{display:flex;align-items:center;gap:var(--s2);color:var(--text-mute)}
.list-row:active{background:var(--surface2)}
[dir=rtl] .chev{transform:scaleX(-1)}

.stat-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s4)}
.stat-card__label{font-size:.75rem;font-weight:600;color:var(--text-sub)}
.stat-card__value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-block-start:var(--s1)}

.pill{display:inline-flex;align-items:center;gap:.35em;block-size:24px;padding-inline:.6rem;
  border-radius:999px;font-size:.75rem;font-weight:600;background:var(--tile-gray);color:var(--text)}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--warn{background:var(--warn-bg);color:var(--warn)}
.pill--bad{background:var(--bad-bg);color:var(--bad)}
.pill--brand{background:var(--brand-light);color:var(--brand)}

.banner{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--radius);
  background:var(--brand-light);color:var(--brand)}
.banner--warn{background:var(--warn-bg);color:var(--warn)}
.banner--solid{background:var(--brand);color:#fff}
.banner__title{font-weight:700;font-size:.9375rem}
.banner__sub{font-size:.8125rem;opacity:.85}

.seg{display:flex;padding:3px;border-radius:999px;background:rgba(0,0,0,.05)}
.seg>button{flex:1;min-block-size:36px;border:0;border-radius:999px;background:none;font:inherit;
  font-size:.8125rem;font-weight:600;color:var(--text-sub);transition:background .2s var(--ease),color .2s}
.seg>button.active,.seg>button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.empty-state{display:grid;justify-items:center;gap:var(--s2);padding:var(--s6) var(--s5);text-align:center}
.empty-state__art{inline-size:64px;block-size:64px;border-radius:20px;display:grid;place-items:center;
  background:var(--brand-light);color:var(--brand);margin-block-end:var(--s2)}
.empty-state__title{font-weight:700;font-size:1rem}
.empty-state__sub{font-size:.875rem;color:var(--text-sub);max-inline-size:28ch}
.empty-state .btn-primary{inline-size:auto;padding-inline:var(--s5);margin-block-start:var(--s2)}

.ring{--p:0;--c:var(--ok);inline-size:48px;block-size:48px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(0,0,0,.07) 0)}
.ring::after{content:attr(data-label);inline-size:38px;block-size:38px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}

.skel{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.09) 50%,rgba(0,0,0,.05) 75%);
  background-size:200% 100%;border-radius:8px;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

.toast{position:fixed;inset-inline:var(--s4);inset-block-end:calc(5.5rem + env(safe-area-inset-bottom));z-index:300;
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  background:#18181B;color:#fff;font-size:.875rem;font-weight:500;box-shadow:var(--shadow-2);
  animation:toastIn .28s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}}

.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;animation:fadeIn .2s both}
.sheet-modal{position:fixed;inset-inline:0;inset-block-end:0;z-index:401;max-block-size:88vh;overflow:auto;
  background:var(--surface);border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  padding:var(--s3) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));animation:sheetUp .32s var(--ease) both}
.sheet-modal::before{content:"";display:block;inline-size:36px;block-size:4px;border-radius:2px;background:rgba(0,0,0,.15);margin:0 auto var(--s4)}
@keyframes sheetUp{from{transform:translateY(100%)}}

/* ---------- 3. Screen patches ---------- */
/* Home — assumed #tab-home */
#tab-home .quick-actions{grid-template-columns:repeat(4,1fr);gap:var(--s2)}
#tab-home .action-card{flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s1);background:none;box-shadow:none;border:0;
  font-size:.75rem;font-weight:600;text-align:center}
#tab-home .action-icon{inline-size:52px;block-size:52px;border-radius:16px}
/* Pay */
.hero-card{background:var(--surface);color:var(--text);box-shadow:var(--shadow-2);border-radius:var(--r-lg);padding:var(--s5)}
.hero-card::before,.hero-card::after{display:none}
.hero-label{color:var(--text-sub);letter-spacing:.04em}
.hero-amount{font-size:clamp(2.5rem,12vw,3.25rem);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.hero-currency{color:var(--text-sub);font-size:1rem;margin-inline-end:var(--s1)}
.hero-stats{border-block-start:1px solid var(--border)}
.hero-stat+.hero-stat{border-inline-start:1px solid var(--border);border-left:0}
.hero-stat-label{color:var(--text-sub)}
.hero-stat-val{color:var(--text);font-variant-numeric:tabular-nums}
.info-row svg{display:none}                                   /* numbers first, not icons */
.info-row{min-block-size:48px;padding-inline:var(--s4)}
.summary-row{margin:0;border-radius:0;border:0;border-block-start:1px solid var(--border);background:var(--surface2);min-block-size:56px}
.sub-tabs{border:0;border-radius:999px;padding:3px}
.sub-tab{border-radius:999px;min-block-size:36px;font-size:.8125rem}
.sub-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- 4. Motion ---------- */
.tab-content.active>*{animation:fadeUp .36s var(--ease) both}
.tab-content.active>*:nth-child(2){animation-delay:.04s}
.tab-content.active>*:nth-child(3){animation-delay:.08s}
.tab-content.active>*:nth-child(n+4){animation-delay:.12s}
.action-card,.list-row,.support-btn,.btn-primary{transition:transform .12s var(--ease),background-color .15s}
.action-card:active,.support-btn:active,.btn-primary:active{transform:scale(.97)}
.nav-item svg{transition:transform .25s var(--ease)}
.nav-item.active svg{transform:translateY(-1px) scale(1.08)}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- 5. Focus ---------- */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:inherit}

/* ---------- 6. Dark mode ---------- */
[data-theme=dark]{
  --bg:#141417;--surface:#1F1F24;--surface2:#27272D;
  --text:#F4F4F5;--text-sub:rgba(255,255,255,.7);--text-mute:rgba(255,255,255,.45);
  --border:rgba(255,255,255,.09);
  --brand:#E57C9A;--brand2:#EE95AD;--brand-light:rgba(229,124,154,.16);
  --ok:#4ADE80;--ok-bg:rgba(74,222,128,.14);--warn:#FBBF24;--warn-bg:rgba(251,191,36,.14);--bad:#F87171;--bad-bg:rgba(248,113,113,.14);
  --tile-orange:rgba(251,146,60,.16);--tile-orange-fg:#FDBA74;
  --tile-blue:rgba(96,165,250,.16);--tile-blue-fg:#93C5FD;
  --tile-green:rgba(74,222,128,.14);--tile-green-fg:#86EFAC;
  --tile-purple:rgba(167,139,250,.16);--tile-purple-fg:#C4B5FD;
  --tile-pink:rgba(244,114,182,.16);--tile-pink-fg:#F9A8D4;
  --tile-yellow:rgba(250,204,21,.14);--tile-yellow-fg:#FDE047;
  --tile-cyan:rgba(34,211,238,.14);--tile-cyan-fg:#67E8F9;
  --tile-gray:rgba(255,255,255,.08);--tile-gray-fg:#D4D4D8;
  --tile-red:rgba(248,113,113,.16);--tile-red-fg:#FCA5A5;
  --shadow:0 0 0 1px rgba(255,255,255,.05);--shadow-2:0 0 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.4);
  color-scheme:dark;
}
[data-theme=dark] body{background:var(--bg)}
[data-theme=dark] .banner--solid{background:#5E1730}
[data-theme=dark] .btn-primary{background:#9C2F52;color:#fff}
[data-theme=dark] .toast{background:#F4F4F5;color:#141417}

/* ---------- 7. Screen rebuilds (v3.1 markup) ---------- */

/* Home — payout hero */
.payout-hero{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-2)}
.payout-hero__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-block-end:var(--s3)}
.payout-hero__label{font-size:.8125rem;font-weight:600;color:var(--text-sub);text-transform:none}
.payout-hero__amount{display:flex;align-items:baseline;gap:var(--s2);font-variant-numeric:tabular-nums}
.payout-hero__currency{font-size:.9375rem;font-weight:600;color:var(--text-sub)}
.payout-hero__amount>span:last-child{font-size:2.25rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.payout-hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-block-start:var(--s4);padding-block-start:var(--s4);border-block-start:1px solid var(--border)}
.payout-hero__stat{padding-inline:var(--s3);text-align:center}
.payout-hero__stat+.payout-hero__stat{border-inline-start:1px solid var(--border)}
.payout-hero__stat-label{font-size:.7rem;font-weight:600;color:var(--text-sub);text-transform:uppercase;letter-spacing:.04em;margin-block-end:var(--s1)}
.payout-hero__stat-val{font-size:1.0625rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

/* Home — 4-up quick actions */
.quick4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.quick4>button{background:none;border:0;padding:var(--s2) 0;display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-family:inherit;font-size:.75rem;font-weight:600;color:var(--text);cursor:pointer;text-align:center}
.quick4 .tile{inline-size:52px;block-size:52px;border-radius:16px}
.quick4 .tile svg{inline-size:24px;block-size:24px}

/* Home — document status expander */
.doc-details{border-radius:var(--radius);overflow:hidden}
.doc-details>summary{list-style:none;cursor:pointer;user-select:none}
.doc-details>summary::-webkit-details-marker{display:none}
.doc-details .banner{border-radius:var(--radius)}
.doc-details[open] .banner{border-end-start-radius:0;border-end-end-radius:0}
.doc-details__body{background:var(--surface);border-end-start-radius:var(--radius);border-end-end-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s3) var(--s4);margin-block-start:-1px}
.banner__body{flex:1;min-inline-size:0;display:flex;flex-direction:column}

/* Support — 2-col talk cards */
.talk{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.talk__card{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:inherit;cursor:pointer;border:0;font:inherit;text-align:start;background:var(--surface)}
.talk__card--solid{background:var(--brand);color:#fff}
.talk__card--solid .talk__title{color:#fff}
.talk__card--solid .talk__sub{color:rgba(255,255,255,.85)}
.talk__icon{inline-size:36px;block-size:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.talk__card:not(.talk__card--solid) .talk__icon{background:var(--tile-purple);color:var(--tile-purple-fg)}
.talk__title{font-size:1rem;font-weight:700;margin-block-start:var(--s1)}
.talk__sub{font-size:.75rem;color:var(--text-sub)}
.talk__badge{display:inline-block;font-size:.6875rem;font-weight:700;background:rgba(255,255,255,.22);color:#fff;padding:.1rem .45rem;border-radius:999px;align-self:flex-start;margin-block-start:var(--s1)}

/* Support — sign out / danger row */
.btn-text--danger{background:none;border:0;color:var(--bad);font:inherit;font-weight:700;font-size:.875rem;min-block-size:var(--tap);inline-size:100%;padding-block:var(--s3);cursor:pointer;text-align:center}
.list-row--danger .list-row__title{color:var(--bad)}
.list-row--danger .tile{background:var(--bad-bg);color:var(--bad)}

/* Paysheet — earned/deducted ratio bar */
.pay-ratio{display:flex;block-size:10px;border-radius:999px;overflow:hidden;margin-block-start:var(--s3)}
.pay-ratio>i{background:var(--ok);display:block}
.pay-ratio>i+i{background:var(--bad)}
.pay-ratio-legend{display:flex;justify-content:space-between;font-size:.75rem;font-weight:600;color:var(--text-sub);margin-block-start:var(--s2);font-variant-numeric:tabular-nums}
.pay-ratio-legend .earned{color:var(--ok)}
.pay-ratio-legend .deducted{color:var(--bad)}

/* Profile — identity header */
.identity{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s5) var(--s4) var(--s4);text-align:center}
.identity__avatar{inline-size:76px;block-size:76px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:1.75rem;font-weight:800;overflow:hidden}
.identity__avatar img{inline-size:100%;block-size:100%;object-fit:cover}
.identity__name{font-size:1.375rem;font-weight:800;letter-spacing:-.02em}
.identity__pills{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.identity__pills .pill{cursor:pointer}

/* Profile — doc cards with rings */
.doc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.doc-card{background:var(--surface);border-radius:var(--radius);padding:var(--s3);display:grid;place-items:center;gap:var(--s2);box-shadow:var(--shadow);text-align:center}
.doc-card__label{font-size:.75rem;font-weight:700;color:var(--text)}
.doc-card__date{font-size:.6875rem;color:var(--text-sub)}
.doc-card__cta{font-size:.6875rem;font-weight:700;color:var(--bad)}
.doc-card--warn .ring{--c:var(--warn)}
.doc-card--bad .ring{--c:var(--bad)}
.doc-card--ok .ring::after{content:"✓";font-size:1rem}

/* Profile — grouped info section with Edit header */
.section-head{display:flex;align-items:center;justify-content:space-between;padding-inline:var(--s4);padding-block-end:var(--s2)}
.section-head>span:first-child{font-size:.75rem;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:.06em}
.section-head .pill--brand{min-block-size:32px;padding-inline:var(--s3)}

/* Bank wizard */
.wiz-progress{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding-inline:var(--s4)}
.wiz-progress>i{block-size:4px;border-radius:2px;background:var(--border);transition:background .3s var(--ease)}
.wiz-progress>i.done{background:var(--brand)}
.wiz-step{font-size:.8125rem;font-weight:600;color:var(--text-sub);padding-inline:var(--s4);margin-block-start:var(--s3)}
.wiz-title{font-size:1.625rem;font-weight:800;letter-spacing:-.02em;padding-inline:var(--s4);margin-block:var(--s2) var(--s4);line-height:1.15}
.capture{position:relative;aspect-ratio:1.586;border-radius:1.25rem;display:grid;place-items:center;border:2px dashed color-mix(in srgb,var(--brand) 35%,transparent);background-color:color-mix(in srgb,var(--brand) 4%,transparent);color:var(--brand);text-align:center;margin-inline:var(--s4)}
.capture input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.capture__label{font-size:.9375rem;font-weight:600;margin-block-start:var(--s2)}
.capture__thumb{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:1.25rem}
.wiz-bar{position:sticky;inset-block-end:0;display:flex;gap:var(--s3);padding:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));background:var(--bg);z-index:5}
.wiz-bar .btn-ghost{flex:0 0 auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;min-block-size:52px;padding-inline:var(--s5);font-weight:700;cursor:pointer}
.wiz-bar .btn-primary{flex:1;border-radius:14px;min-block-size:52px}

/* Bottom nav — 3 items now (Home/Support/Settings) */
.bottom-nav.nav-3{justify-content:space-around}
.bottom-nav.nav-3 .nav-item{flex:1;max-inline-size:130px}

/* Greeting refresh */
.home-greeting-hi{font-size:.8125rem;color:var(--text-sub);font-weight:500}
.home-greeting-name{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;margin-block-start:var(--s1)}

/* ---------- Digital ID Wallet ---------- */
.wallet-sheet{max-inline-size:430px;margin-inline:auto}
.wallet-tabs{display:flex;gap:.35rem;padding:3px;background:rgba(0,0,0,.05);border-radius:999px;margin-block-end:var(--s4)}
.wallet-tabs button{flex:1;min-block-size:36px;border:0;border-radius:999px;background:none;font:inherit;font-size:.8125rem;font-weight:700;color:var(--text-sub);cursor:pointer}
.wallet-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wallet-card{background:linear-gradient(135deg,var(--brand) 0%,var(--brand2) 100%);color:#fff;border-radius:1.25rem;padding:var(--s4);box-shadow:var(--shadow-2);position:relative;overflow:hidden}
.wallet-card::after{content:"";position:absolute;inset-block-end:-40px;inset-inline-end:-40px;inline-size:120px;block-size:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.wallet-card__label{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.wallet-card__num{font-size:1.35rem;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-block-start:var(--s1)}
.wallet-card__meta{display:flex;justify-content:space-between;margin-block-start:var(--s4);font-size:.7rem;color:rgba(255,255,255,.85)}
.wallet-qr-wrap{background:#fff;border-radius:1rem;padding:var(--s4);display:grid;place-items:center;margin-block:var(--s4);position:relative;z-index:1}
.wallet-qr-wrap canvas,.wallet-qr-wrap svg{inline-size:200px;block-size:200px;display:block}
.wallet-qr-hint{font-size:.7rem;color:var(--text-sub);text-align:center;margin-block-start:var(--s2)}
.wallet-actions{display:flex;gap:var(--s2);margin-block-start:var(--s3)}
.wallet-actions button{flex:1;background:var(--surface2);color:var(--text);border:0;border-radius:.7rem;padding:.7rem;font:inherit;font-weight:600;font-size:.8125rem;cursor:pointer}