/* ============================================================
   restyle.css — last old-look screens moved to the new theme
   (Ren 2026-11-05, canvas "Old screens and legal pages: new look").
   Uses the --ag-* tokens from agreements.css (light + dark).
   1 Become a provider sheet   2 Task details   3 Send offer labels
   4 Settings content sheet (Devices, Help)     5 Empty states
   6 Wallet fallback pop-ups
   ============================================================ */

/* ── shared bottom sheet (phone) / centred card (desktop) ── */
.rx-ov{position:fixed;inset:0;z-index:10020;background:rgba(16,26,20,.48);display:flex;align-items:flex-end;justify-content:center;animation:rxFade .18s ease-out}
.rx-sheet{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ag-card);color:var(--ag-ink);border-radius:28px 28px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box;font-family:Inter,system-ui,sans-serif;display:flex;flex-direction:column;gap:16px;animation:rxUp .24s cubic-bezier(.2,.8,.2,1)}
.rx-grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--ag-line);flex:none}
.rx-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rx-tile{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:none}
.rx-tile svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-x{width:44px;height:44px;border-radius:22px;border:0;background:var(--ag-soft);color:var(--ag-text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.rx-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rx-h{margin:0;font-family:Outfit,Inter,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ag-ink)}
.rx-p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ag-label)}
.rx-steps{display:flex;flex-direction:column;gap:10px}
.rx-step{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px}
.rx-step b{width:36px;height:36px;border-radius:12px;background:var(--ag-card);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.rx-step span{display:flex;flex-direction:column;gap:2px;font-size:15px;font-weight:600;color:var(--ag-ink)}
.rx-step small{font-size:13px;font-weight:400;color:var(--ag-text)}
.rx-g{background:var(--ag-green-bg);color:var(--ag-green-ink)} .rx-b{background:var(--ag-blue-bg);color:var(--ag-blue-ink)} .rx-o{background:var(--ag-orange-bg);color:var(--ag-orange-ink)}
.rx-note{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ag-label)}
.rx-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rx-btns{display:flex;gap:10px}
.rx-btn{flex:1;min-height:52px;border-radius:16px;border:1px solid var(--ag-line);background:var(--ag-card);color:var(--ag-ink);font:600 16px Inter,sans-serif;cursor:pointer;padding:0 16px}
.rx-btn.main{flex:1.5;border-color:transparent;background:var(--ag-green);color:#fff}
body.dark-mode .rx-btn.main{background:#3CC25E;color:#06110A}
.rx-btn:focus-visible,.rx-x:focus-visible{outline:3px solid var(--ag-green);outline-offset:2px}
@keyframes rxUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes rxFade{from{opacity:0}to{opacity:1}}
@media (min-width:901px){.rx-ov{align-items:center}.rx-sheet{border-radius:24px;padding:20px 24px}.rx-grab{display:none}}
@media (prefers-reduced-motion:reduce){.rx-ov,.rx-sheet{animation:none}}

/* ── 2 Task details (#taskDetailOverlay) ── */
#taskDetailOverlay .task-detail-container{background:var(--ag-card)!important;color:var(--ag-ink);border-radius:24px!important;overflow:hidden}
#taskDetailOverlay .td-header{background:var(--ag-card)!important;border-bottom:1px solid var(--ag-line);padding:14px 12px 12px 18px!important;align-items:center}
#taskDetailOverlay .td-brand-name{display:none!important}
#taskDetailOverlay .td-task-id{font-size:12px!important;color:var(--ag-label)!important;letter-spacing:0!important;margin:0!important;font-family:Inter,sans-serif}
#taskDetailOverlay #td-status-badge{font-size:13px!important;font-weight:600!important;padding:6px 12px!important;border-radius:999px!important;background:var(--ag-blue-bg)!important;color:var(--ag-blue-ink)!important}
#taskDetailOverlay .task-detail-close-btn{width:44px;height:44px;border-radius:22px;border:0;background:var(--ag-soft)!important;color:var(--ag-text)!important;font-size:22px}
#taskDetailOverlay .td-body{background:var(--ag-page)}
#taskDetailOverlay .td-left{background:var(--ag-card);border-color:var(--ag-line)!important}
#taskDetailOverlay .td-title{font-family:Outfit,Inter,sans-serif!important;font-size:24px!important;font-weight:800!important;letter-spacing:-.02em;color:var(--ag-ink)!important;line-height:1.15}
#taskDetailOverlay .td-desc-lbl,#taskDetailOverlay .td-ts-label,#taskDetailOverlay .td-field-label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:600!important;color:var(--ag-label)!important}
#taskDetailOverlay .td-desc-text{font-size:15px!important;line-height:1.5;color:var(--ag-text)!important}
#taskDetailOverlay .td-ts-val{font-size:14px!important;color:var(--ag-text)!important;font-weight:500!important}
#taskDetailOverlay .td-right{background:var(--ag-page)}
#taskDetailOverlay .td-grid{background:var(--ag-card);border:1px solid var(--ag-line);border-radius:16px;padding:4px 14px;gap:0!important}
#taskDetailOverlay .td-field{border-color:var(--ag-line)!important;padding:10px 0!important}
#taskDetailOverlay .task-detail-field-value{font-size:15px!important;font-weight:600!important;color:var(--ag-ink)!important}
#taskDetailOverlay .task-detail-field-value.green{color:var(--ag-green-ink)!important}
#taskDetailOverlay .task-detail-field-value.amber{color:var(--ag-orange-ink)!important}
#taskDetailOverlay .task-detail-field-value.blue{color:var(--ag-blue-ink)!important}
#taskDetailOverlay .task-detail-interested-btn{min-height:40px;border-radius:12px;background:var(--ag-green-bg)!important;color:var(--ag-green-ink)!important;border:0!important;padding:0 12px!important}
#taskDetailOverlay .td-footer{background:var(--ag-card);border-color:var(--ag-line)!important;padding:12px 16px!important;gap:10px}
#taskDetailOverlay .td-edit-btn,#taskDetailOverlay .td-cancel-btn{min-height:48px;border-radius:14px!important;font:600 15px Inter,sans-serif!important;padding:0 16px!important;flex:1}
#taskDetailOverlay .td-edit-btn{background:var(--ag-soft)!important;color:var(--ag-ink)!important;border:1px solid var(--ag-line)!important}
#taskDetailOverlay .td-cancel-btn{background:transparent!important;color:var(--ag-pink-ink)!important;border:1px solid var(--ag-pink-bg)!important}
#taskDetailOverlay.rx-viewer .td-footer{display:none!important}
@media (max-width:900px){
  #taskDetailOverlay.show{align-items:flex-end!important;padding:0!important}
  #taskDetailOverlay .task-detail-container{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 40px)!important;border-radius:28px 28px 0 0!important;display:flex;flex-direction:column}
  #taskDetailOverlay .td-body{overflow-y:auto;flex:1}
  #taskDetailOverlay .td-left{border-bottom:1px solid var(--ag-line)!important;border-right:0!important}
  #taskDetailOverlay .td-grid{grid-template-columns:1fr 1fr!important}
}

/* ── 3 Send an offer: sentence-case labels ── */
#applyModalOverlay .apply-field-label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:600!important}

/* ── 4 Settings content sheet (Devices, Help Center, Report a bug) ── */
#settingsContentOverlay.show{align-items:flex-end}
#settingsContentOverlay .modal-container.rx-scm{background:var(--ag-card)!important;color:var(--ag-ink);border-radius:28px 28px 0 0!important;width:100%!important;max-width:560px!important;max-height:calc(100dvh - 40px)!important}
.rx-scm-top{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 20px;border-bottom:1px solid var(--ag-line);flex:none}
.rx-scm-top h2{flex:1;margin:0;font-family:Outfit,Inter,sans-serif;font-size:20px;font-weight:800;color:var(--ag-ink)}
.rx-scm-body{flex:1;overflow-y:auto;padding:16px 20px 24px;font-size:15px;line-height:1.55;color:var(--ag-text)}
.rx-dev{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--ag-green-bg);margin:0 0 14px}
.rx-dev .rx-tile{width:44px;height:44px;border-radius:14px;background:var(--ag-card);color:var(--ag-green-ink)}
.rx-dev .rx-tile svg{width:22px;height:22px}
.rx-dev b{display:block;font-size:15px;color:var(--ag-ink)}
.rx-dev small{display:block;font-size:13px;color:var(--ag-text)}
.rx-dev em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--ag-green-ink);background:var(--ag-card);padding:5px 10px;border-radius:999px;white-space:nowrap}
.rx-scm-body .rx-btn{width:100%;margin-top:6px}
@media (min-width:901px){#settingsContentOverlay.show{align-items:center}#settingsContentOverlay .modal-container.rx-scm{border-radius:24px!important}}

/* ── 5 Empty states (Task Feed, Available tasks, Earnings) ── */
.rx-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px;margin:12px 0;border-radius:20px;background:var(--ag-card);border:1px solid var(--ag-line);font-family:Inter,system-ui,sans-serif}
.rx-empty .rx-tile{width:52px;height:52px;border-radius:16px;background:var(--ag-green-bg);color:var(--ag-green-ink)}
.rx-empty .rx-tile svg{width:26px;height:26px}
.rx-empty b{font-size:17px;font-weight:700;color:var(--ag-ink)}
.rx-empty span{font-size:14px;line-height:1.5;color:var(--ag-label);max-width:300px}
#cancelTaskFromDetailBtn{white-space:nowrap}

/* ── 6 Wallet fallback pop-ups (only if the new wallet sheet fails) ── */
#walletTxDetailOverlay > div > div:first-child,#walletTopUpOverlay > div > div:first-child,#walletWithdrawOverlay > div > div:first-child{background:var(--ag-card)!important;color:var(--ag-ink)!important;border-bottom:1px solid var(--ag-line)}
#walletTxDetailOverlay > div > div:first-child *,#walletTopUpOverlay > div > div:first-child *,#walletWithdrawOverlay > div > div:first-child *{color:var(--ag-ink)!important}
#walletTxDetailOverlay > div > div:first-child button,#walletTopUpOverlay > div > div:first-child button,#walletWithdrawOverlay > div > div:first-child button{background:var(--ag-soft)!important;width:40px!important;height:40px!important}
#walletTxDetailOverlay > div,#walletTopUpOverlay > div,#walletWithdrawOverlay > div{border-radius:24px!important;background:var(--ag-card)!important;color:var(--ag-ink)!important}

/* ── Documents & ID: readable status badges ── */
#profileView .doc-badge{font-size:12px!important;font-weight:600!important;padding:4px 10px!important;border-radius:999px!important;letter-spacing:0!important;text-transform:none!important}
#profileView .doc-not-uploaded{background:var(--ag-soft)!important;color:var(--ag-label)!important}

/* Gallery B10 (2026-11-09): avatar initials always in capitals ("M", not
   "m"). Usernames are lowercase, so the first letter came out small on
   some avatars and big on others. These boxes only hold initials. */
#profileAvatar, #chatAvatar, #pv-avatar, .chat-contact-av, .prof-card-avatar, .dash-avatar { text-transform: uppercase; }