/* DELYV Rewards: streak, hours reclaimed, quests, levels and referrals. */
.rw-page, .rw-strip { --rw-flame: #e8590c; --rw-flame-soft: #fff0e6; }
.rw-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 16px; margin-bottom: 18px; border: 1px solid #d9d5ff; background: linear-gradient(135deg, var(--purple-soft), #f7f5ff); }
.rw-banner strong { display: block; font-size: 15px; }
.rw-banner p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.rw-banner .rw-banner-copy { flex: 1 1 260px; }
.rw-banner.rw-success { border-color: #bfe9d8; background: linear-gradient(135deg, var(--green-soft), #f4fcf8); }
.rw-banner.rw-urgent { border-color: #f5d6a4; background: linear-gradient(135deg, var(--amber-soft), #fffaf0); }
.rw-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 11px; background: var(--purple); color: #fff; font-weight: 700; text-decoration: none; font-size: 13px; border: 0; }
.rw-cta:hover { background: var(--purple-deep); }
.rw-cta.rw-ghost { background: #fff; color: var(--purple-deep); border: 1px solid #d9d5ff; }
.rw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.rw-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.rw-card h2 { margin: 0 0 4px; font-size: 15px; }
.rw-card .rw-sub { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.rw-big { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.rw-big strong { font-family: Manrope, "DM Sans", sans-serif; font-size: 38px; line-height: 1; letter-spacing: -.03em; }
.rw-big span { color: var(--muted); font-size: 13px; }
.rw-flame { color: var(--rw-flame); }
.rw-bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.rw-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8b7fff, var(--purple)); transition: width .5s ease; }
.rw-bar.rw-flame-bar > i { background: linear-gradient(90deg, #ffa94d, var(--rw-flame)); }
.rw-foot { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.rw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rw-chip { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.rw-chip.rw-on { background: var(--purple-soft); color: var(--purple-deep); border-color: #d9d5ff; }
.rw-chip.rw-flame-on { background: var(--rw-flame-soft); color: var(--rw-flame); border-color: #ffd8bf; }
.rw-pill-warn { display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); font-size: 11.5px; font-weight: 700; }
.rw-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rw-quest { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.rw-quest.rw-done { background: var(--green-soft); border-color: #bfe9d8; }
.rw-check { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfcfe0; display: grid; place-items: center; font-size: 13px; color: #fff; }
.rw-done .rw-check { background: var(--green); border-color: var(--green); }
.rw-quest strong { display: block; font-size: 13.5px; }
.rw-quest span.rw-desc { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.rw-quest .rw-reward { margin-left: auto; flex: 0 0 auto; font-weight: 700; font-size: 12.5px; color: var(--purple-deep); white-space: nowrap; }
.rw-done .rw-reward { color: var(--green); }
.rw-section { margin-bottom: 18px; }
.rw-link-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.rw-link-row input { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); color: var(--ink); font-size: 13px; }
.rw-friends { display: grid; gap: 6px; margin-top: 12px; }
.rw-friend { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; background: var(--soft); font-size: 13px; }
.rw-ledger { display: grid; gap: 6px; }
.rw-ledger-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 11px; background: var(--soft); font-size: 13px; }
.rw-ledger-row em { font-style: normal; color: var(--muted); font-size: 11.5px; display: block; }
.rw-tokens { font-weight: 700; white-space: nowrap; color: var(--purple-deep); }
.rw-tokens.rw-expired { color: #a0a0b0; text-decoration: line-through; }
.rw-strip { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 16px; border: 1px solid #e3e0ff; border-radius: 15px; background: linear-gradient(135deg, #f7f5ff, #fff); }
.rw-strip .rw-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.rw-strip .rw-next { flex: 1 1 200px; color: var(--muted); font-size: 12.5px; min-width: 0; }
.rw-strip .rw-next b { color: var(--ink); }
.rw-strip .rw-cta { padding: 8px 13px; }
.rw-loading { color: var(--muted); padding: 30px 0; }
@media (max-width: 640px) { .rw-big strong { font-size: 32px; } .rw-quest { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .rw-bar > i { transition: none; } }

/* Otto, the DELYV mascot */
.rw-otto { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.rw-otto-art { flex: 0 0 auto; }
.rw-otto-art svg { width: 96px; height: 96px; display: block; }
.rw-otto-bubble { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; max-width: 460px; box-shadow: var(--shadow); }
.rw-otto-bubble::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.rw-otto-bubble b { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-deep); margin-bottom: 2px; }
.rw-otto-bubble p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.rw-strip-otto { flex: 0 0 auto; display: block; width: 44px; height: 44px; margin: -6px 2px -6px -4px; }
.rw-strip-otto svg { width: 44px; height: 44px; display: block; }
@media (max-width: 520px) { .rw-otto-art svg { width: 76px; height: 76px; } }

/* Daily check-in */
.rw-checkin .rw-h3 { margin: 16px 0 6px; font-size: 13px; }
.rw-chip-btn { cursor: pointer; text-align: left; }
.rw-chip-btn:hover { background: var(--purple-soft); color: var(--purple-deep); border-color: #d9d5ff; }
.rw-prompts { margin: 4px 0 10px; }
.rw-idea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; font: inherit; resize: vertical; background: #fff; color: var(--ink); }
.rw-checkin-done { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--green-soft); border: 1px solid #bfe9d8; }
.rw-checkin-done svg { width: 64px; height: 64px; flex: 0 0 64px; }
.rw-checkin-done strong { display: block; }
.rw-checkin-done p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.rw-drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rw-drafts li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.rw-drafts li > span:first-child { flex: 1 1 220px; overflow-wrap: anywhere; }
.rw-draft-actions { display: inline-flex; gap: 6px; }
.rw-draft-actions .rw-cta { padding: 6px 11px; }

/* Quiet mode */
.rw-quiet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 16px; border: 1px dashed var(--line); border-radius: 14px; font-size: 13px; color: var(--muted); }
.rw-quiet b { color: var(--ink); }
.rw-checkmark { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; }

/* Time reclaimed + lifetime cards, celebrations */
.rw-level-line { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.rw-level-badge { padding: 4px 12px; border-radius: 99px; background: var(--purple); color: #fff; font-weight: 800; font-size: 13px; }
.rw-worth { margin: -2px 0 10px; font-size: 13px; color: var(--green); font-weight: 700; }
.rw-more { margin-top: 8px; font-size: 12.5px; }
.rw-more summary { cursor: pointer; color: var(--purple-deep); font-weight: 600; }
.rw-card .rw-h3 { margin: 14px 0 2px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rw-celebrate { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(11, 19, 36, .62); overflow: hidden; }
.rw-celebrate-card { position: relative; z-index: 1; width: min(420px, 100%); text-align: center; padding: 22px 22px 20px; border-radius: 26px; background: #fff; box-shadow: 0 30px 80px rgba(11, 19, 36, .35); animation: rw-pop .35s ease-out; }
.rw-celebrate-art svg { width: 150px; height: 150px; display: block; margin: -6px auto 0; }
.rw-celebrate-kicker { margin: 4px 0 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--purple-deep); }
.rw-celebrate h2 { margin: 0 0 6px; font-family: Manrope, "DM Sans", sans-serif; font-size: 28px; letter-spacing: -.02em; }
.rw-celebrate p { margin: 0 0 8px; color: var(--muted); }
.rw-celebrate .rw-celebrate-tokens { color: var(--green); font-weight: 800; font-size: 16px; }
.rw-confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: .9; animation: rw-fall 2.6s ease-in var(--d) both; }
@keyframes rw-fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes rw-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rw-confetti i, .rw-celebrate-card { animation: none; } .rw-confetti { display: none; } }

/* Otto on the home screen */
.otto-hero { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto 4px; text-align: left; transition: opacity .26s ease, transform .26s ease; }
.otto-hero.otto-swap { opacity: 0; transform: translateY(4px); }
.otto-hero-art { flex: 0 0 auto; width: 112px; height: 112px; }
.otto-hero-art svg { width: 100%; height: 100%; display: block; }
.otto-hero-bubble { position: relative; flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; box-shadow: var(--shadow); }
.otto-hero-bubble::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.otto-hero-bubble b { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-deep); margin-bottom: 2px; }
/* The line is reserved at its longest wrapped height so rotating quips never move the request field. */
.otto-hero-bubble p { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 500; min-height: 2.8em; display: flex; align-items: center; }
.otto-alive svg { animation: otto-bob 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
.otto-alive .otto-eyes { animation: otto-blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes otto-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes otto-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@media (max-width: 520px) { .otto-hero-art { width: 64px; height: 64px; } .otto-hero-bubble { padding: 10px 14px; } .otto-hero-bubble p { font-size: 14px; min-height: 4.2em; } }
@media (prefers-reduced-motion: reduce) { .otto-alive svg, .otto-alive .otto-eyes, .otto-hero { animation: none; transition: none; } }
/* Popup check-in */
.rw-popup-card { width: min(460px, 100%); }
.rw-popup-card .rw-idea { text-align: left; margin-top: 6px; }
.rw-linkish { border: 0; background: transparent; color: var(--muted); text-decoration: underline; font-size: 12.5px; cursor: pointer; }

/* Daily share */
.rw-share-buttons { gap: 8px; margin-top: 12px; }
.rw-share-buttons.hidden { display: none; }
.rw-share-buttons .rw-cta { padding: 9px 14px; }
.rw-share-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 6px; font-size: 13px; color: var(--muted); }
.rw-share-stats b { color: var(--ink); font-size: 16px; }

/* Current-tier line: replaces an always-visible checkpoint ladder with just where you stand right now */
.rw-tier-current { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.rw-tier-current b { color: var(--ink); }

.rw-quiet-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Work Pass wallet + weekly activity progress (2026-09-22 redesign) */
.rw-workpass { border-color: #d9d5ff; background: linear-gradient(135deg, var(--purple-soft), #fff); }
.rw-pass-dots { display: flex; gap: 8px; margin: 2px 0 12px; }
.rw-pass-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); }
.rw-pass-dot.rw-pass-dot-on { background: var(--purple); border-color: var(--purple-deep); }
.rw-workpass-state { margin-top: 12px; }
.rw-workpass-state strong { display: block; font-size: 14px; }
.rw-workpass-state p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.rw-progress-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rw-progress-row:last-of-type { border-bottom: 0; }
.rw-progress-row-val { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Compact referral card, visually separate from the Work Pass wallet */
.rw-referral-details { margin-top: 12px; }
.rw-referral-details.hidden { display: none; }

/* ---- Client-experience pass: Progress leads with the wallet hero; everything else is a disclosure ---- */
.rw-page { display: flex; flex-direction: column; gap: 16px; }
.rw-page .rw-section { margin-bottom: 0; }
.rw-eyebrow { margin: 0 0 2px; color: var(--purple-deep); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rw-hero { border-color: #d9d5ff; background: linear-gradient(135deg, #f7f5ff, #fff 60%); }
.rw-hero .rw-big strong { font-size: 44px; }
.rw-progress-line { margin: 4px 0 8px; font-size: 14px; }
.rw-callout { margin: 8px 0 4px; padding: 12px 14px; border: 1px solid #f3d9a4; border-radius: 12px; background: #fff8ec; }
.rw-callout strong { display: block; font-size: 14px; }
.rw-callout p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.rw-week-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: end; margin-top: 14px; }
.rw-week-row .rw-bar { grid-column: 1 / -1; }
.rw-week-label span { font-weight: 700; }
.rw-week-label small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.rw-week-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.rw-bar.rw-bar-thin { height: 6px; }
.rw-wallet { list-style: none; margin: 6px 0 0; padding: 0; }
.rw-wallet li { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rw-wallet li:last-child { border-bottom: 0; }
.rw-wallet strong { display: block; font-size: 14px; }
.rw-wallet span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.rw-wallet b { flex: 0 0 auto; font-size: 13.5px; white-space: nowrap; }
.rw-disclosures { display: flex; flex-direction: column; gap: 10px; }
.rw-disclosures .rw-more { margin-top: 0; }
.rw-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 14px; }
.rw-more > summary .quiet-count { font-weight: 500; color: var(--muted); font-size: 12.5px; text-align: right; }
.rw-more[open] > summary { margin-bottom: 10px; }
.rw-inline { margin-top: 12px; }
.rw-inline > summary { cursor: pointer; color: var(--purple-deep); font-weight: 700; font-size: 13px; }
.rw-inline[open] > summary { margin-bottom: 10px; }
.rw-outcome .rw-big strong { font-size: 32px; }
@media (max-width: 640px) {
  .rw-wallet li { flex-direction: column; gap: 4px; }
  .rw-more > summary { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rw-more > summary .quiet-count { text-align: left; }
}

/* A calm acknowledgement after a delivery: no confetti, no pop-up. */
.rw-note { margin: 10px 0 0; color: var(--ink); font-size: 14px; font-weight: 600; }