/* ============================================================
   TikFuel Rewards dashboard, /reward/

   Scoping rule for this file, learned the hard way twice on this
   site: the theme styles BARE ELEMENT SELECTORS. main.css sets
   `input[type="email"] { width:100%; border; radius; padding }`
   at specificity 0-1-1, and `a { color: var(--violet) }` at
   0-0-1. A single-class rule here loses to the first of those.

   So every control is written as `.rw .rw-thing` (0-2-0), never
   `.rw-thing` (0-1-0). Do not "simplify" these selectors.
   ============================================================ */

.rw {
  --rw-line:    var(--hairline, #E7D8F2);
  --rw-line-2:  var(--hairline-2, #D8C2E8);
  --rw-surface: var(--surface, #fff);
  --rw-wash:    var(--wash, #F3E7FA);
  --rw-ink:     var(--ink, #1E1233);
  --rw-ink-2:   var(--ink-2, #4C3D66);
  --rw-muted:   var(--muted, #7C6B94);
  --rw-accent:  var(--violet, #9B23D4);
  --rw-grad:    var(--grad, linear-gradient(120deg, #E056FD 0%, #E530B5 100%));
  --rw-green:   var(--green, #0A8A72);
  --rw-amber:   var(--amber, #B0651F);
  --rw-danger:  var(--danger, #C02B3C);
  --rw-r:       var(--r, 16px);
  --rw-r-sm:    var(--r-sm, 10px);

  margin-top: 1.75rem;
}

.rw [hidden] { display: none !important; }

/* ---------------------------------------------------- shared bits */

.rw .rw-card {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--sh-sm, 0 1px 2px #1E123310);
}

.rw .rw-h2 {
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 .9rem;
  color: var(--rw-ink);
}

.rw .rw-note {
  font-size: .92rem;
  color: var(--rw-ink-2);
  margin: .5rem 0 1.1rem;
  line-height: 1.6;
}

.rw .rw-empty {
  font-size: .95rem;
  color: var(--rw-muted);
  background: var(--rw-wash);
  border-radius: var(--rw-r-sm);
  padding: 1.1rem 1.2rem;
  margin: 0;
}

.rw .rw-boot { color: var(--rw-muted); font-size: .95rem; }

.rw .rw-error {
  margin-top: 1rem;
  padding: .85rem 1.05rem;
  border-radius: var(--rw-r-sm);
  background: color-mix(in srgb, var(--rw-danger) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--rw-danger) 28%, #fff);
  color: var(--rw-danger);
  font-size: .93rem;
}

/* Two classes so it beats main.css's bare `a { color }` (0-0-1)
   and does not need !important to be a plain text button. */
.rw .rw-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rw .rw-link:hover { color: var(--magenta, #E530B5); }

/* ---------------------------------------------------- buttons */

.rw .rw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.2;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, filter .16s, border-color .16s, color .16s;
}

.rw .rw-btn-primary {
  background: var(--rw-grad);
  color: #fff;
  box-shadow: var(--sh-glow, 0 18px 46px -14px #9B23D455);
}
.rw .rw-btn-primary:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.08); color: #fff; }

.rw .rw-btn-ghost {
  background: var(--rw-surface);
  color: var(--rw-ink);
  border-color: var(--rw-line-2);
}
.rw .rw-btn-ghost:hover:not(:disabled) { border-color: var(--rw-accent); color: var(--rw-accent); }

.rw .rw-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------------------------------------------- sign-in gate */

/* Left-aligned, not centred. The breadcrumb, eyebrow and H1 above it are all
   flush left in the theme's `.measure` column, and a centred card under them
   leaves the heading orphaned in the top corner with the eye jumping sideways.
   One alignment axis reads as one page. */
.rw .rw-gate-card { max-width: 33rem; width: 100%; }

.rw .rw-gate-title { font-size: 1.35rem; font-weight: 720; margin: 0 0 .5rem; }

.rw .rw-gate-text { color: var(--rw-ink-2); font-size: .97rem; margin: 0 0 1.4rem; }

.rw .rw-gate-foot {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rw-line);
  font-size: .88rem;
  color: var(--rw-muted);
}

.rw .rw-form { display: grid; gap: .55rem; }

.rw .rw-label { font-size: .88rem; font-weight: 620; color: var(--rw-ink-2); }

/* The rule this whole file's scoping convention exists for. main.css
   gives input[type="email"] its own border, radius, padding AND
   width:100% at 0-1-1; .rw .rw-input is 0-2-0 and wins outright. */
.rw .rw-input {
  width: 100%;
  font: inherit;
  color: var(--rw-ink);
  background: var(--rw-surface);
  border: 1.5px solid var(--rw-line-2);
  border-radius: var(--rw-r-sm);
  padding: .78rem .95rem;
  appearance: none;
  box-shadow: none;
}
.rw .rw-input:focus {
  border-color: var(--rw-accent);
  outline: 2px solid color-mix(in srgb, var(--rw-accent) 25%, transparent);
  outline-offset: 1px;
}

.rw .rw-form .rw-btn { margin-top: .35rem; justify-self: start; }

/* Off-screen rather than display:none — a bot reading the DOM sees a
   normal field, and a screen reader is kept out by aria-hidden. */
.rw .rw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rw .rw-gate-note {
  margin: 1rem 0 0;
  padding: .85rem 1.05rem;
  border-radius: var(--rw-r-sm);
  background: color-mix(in srgb, var(--rw-green) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--rw-green) 25%, #fff);
  color: var(--rw-green);
  font-size: .92rem;
}
.rw .rw-gate-note.is-bad {
  background: color-mix(in srgb, var(--rw-danger) 8%, #fff);
  border-color: color-mix(in srgb, var(--rw-danger) 28%, #fff);
  color: var(--rw-danger);
}

/* ---------------------------------------------------- header */

.rw .rw-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.rw .rw-hello { font-size: 1.3rem; font-weight: 720; margin: 0; }

/* ---------------------------------------------------- tier panel

   The tier is the thing this whole programme is organised around, so it
   gets a panel of its own rather than a pill beside the greeting, and it
   is centred: it is the one element on the page with no left-aligned
   sibling to line up with. */

.rw .rw-tierbox {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r);
  padding: clamp(1.5rem, 5vw, 2.4rem) clamp(1.2rem, 4vw, 2rem);
  margin-bottom: 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.rw .rw-tierbox::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--rw-grad);
}

.rw .rw-tierbox-eyebrow {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rw-muted);
}

/* The headline number of the page. Clamped rather than fixed so it stays
   the largest thing on a phone without wrapping "Tier C" onto two lines. */
.rw .rw-tierbox-name {
  margin: .2rem 0 0;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -.02em;
  background: var(--rw-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* A gradient clipped to text has no colour of its own if the clip is not
     honoured, so the fallback is set first and overridden above. */
  -webkit-text-fill-color: transparent;
}

.rw .rw-tierbox-blurb {
  margin: .45rem auto 0;
  max-width: 34rem;
  font-size: 1rem;
  color: var(--rw-ink-2);
}

/* ---- the ladder ---- */

.rw .rw-ladder {
  list-style: none;
  margin: 1.6rem auto 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 30rem;
}

.rw .rw-rung {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.rw .rw-rung:last-child { flex: 0 0 auto; }

.rw .rw-rung-dot {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 750;
  border: 2px solid var(--rw-line-2);
  background: var(--rw-surface);
  color: var(--rw-muted);
}
.rw .rw-rung.is-reached .rw-rung-dot {
  border-color: transparent;
  background: var(--rw-grad);
  color: #fff;
}
.rw .rw-rung.is-current .rw-rung-dot {
  width: 3rem;
  height: 3rem;
  font-size: 1.15rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rw-accent) 16%, transparent);
}

/* The connector is the rung's own flexible remainder, so the line always
   spans exactly the gap and never needs a width guessed in advance. */
.rw .rw-rung-line {
  flex: 1 1 auto;
  height: 2px;
  min-width: .75rem;
  background: var(--rw-line-2);
}
.rw .rw-rung.is-reached .rw-rung-line { background: var(--rw-line-2); }

.rw .rw-rung-name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- next tier ---- */

.rw .rw-next {
  margin: 1.6rem auto 0;
  max-width: 34rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rw-r-sm);
  background: var(--rw-wash);
}

.rw .rw-next-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rw-ink);
}

.rw .rw-next-text {
  margin: .3rem 0 0;
  font-size: .93rem;
  color: var(--rw-ink-2);
  line-height: 1.55;
}

.rw .rw-next-text strong { color: var(--rw-accent); }

/* ---------------------------------------------------- counters */

.rw .rw-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-bottom: 1.6rem;
}

.rw .rw-counter {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r);
  padding: 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
}

/* A hairline of accent along the top edge, so the two tiles read as a
   pair without needing two different background colours. */
.rw .rw-counter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rw-grad);
}
.rw .rw-counter--likes::before { background: linear-gradient(120deg, #7B5CFF 0%, #2FA7C7 100%); }

.rw .rw-counter-n {
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 760;
  line-height: 1.1;
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--rw-ink);
}

.rw .rw-counter-l {
  margin: .2rem 0 0;
  font-size: .86rem;
  color: var(--rw-muted);
}

/* ---------------------------------------------------- tabs */

.rw .rw-tabs {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--rw-line);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.rw .rw-tabs::-webkit-scrollbar { display: none; }

.rw .rw-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 620;
  color: var(--rw-muted);
  padding: .65rem .95rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: -1px;
}
.rw .rw-tab:hover { color: var(--rw-ink); }
.rw .rw-tab.is-on { color: var(--rw-accent); border-bottom-color: var(--rw-accent); }

.rw .rw-dot {
  background: var(--rw-danger);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .3rem;
}

/* ---------------------------------------------------- tasks */

.rw .rw-tasks { display: grid; gap: 1rem; }

.rw .rw-task {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r);
  padding: clamp(1.1rem, 3.5vw, 1.6rem);
}
.rw .rw-task.is-locked { background: var(--paper-2, #FBF7FD); }

.rw .rw-task-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
  flex-wrap: wrap;
}

.rw .rw-task-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .2rem; }

.rw .rw-task-sum { margin: 0; font-size: .88rem; color: var(--rw-muted); }

.rw .rw-reward {
  flex: 0 0 auto;
  background: var(--rw-wash);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--rw-accent);
  white-space: nowrap;
}

.rw .rw-task-body { margin: 1rem 0 0; font-size: .95rem; color: var(--rw-ink-2); }
.rw .rw-task-body p { margin: 0 0 .7rem; }
.rw .rw-task-body p:last-child { margin-bottom: 0; }

/* Where "Start task" sits, and what the .tfp panel replaces it with. The panel
   brings its own card surface and its own max-width from promo.css, so all this
   owes it is breathing room and a centre line. */
.rw .rw-slot {
  margin-top: 1.1rem;
  display: flex;
  justify-content: center;
}

/* promo.css centres .tfp with margin-inline: auto inside a normal block. In a
   flex row that resolves to zero, so the panel would sit hard left. Growing it
   to the flex line instead keeps the same 34rem cap it has everywhere else. */
.rw .rw-slot .tfp { flex: 1 1 auto; max-width: 34rem; }

.rw .rw-meta {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: var(--rw-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
}

.rw .rw-locked {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--rw-r-sm);
  background: color-mix(in srgb, var(--rw-amber) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--rw-amber) 26%, #fff);
  color: var(--rw-amber);
  font-size: .9rem;
}

.rw .rw-said {
  margin: .9rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--rw-r-sm);
  font-size: .9rem;
}
.rw .rw-said-line { margin: 0; }
.rw .rw-said-line + .rw-said-line { margin-top: .4rem; }

.rw .rw-said.is-ok {
  background: color-mix(in srgb, var(--rw-green) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--rw-green) 25%, #fff);
  color: var(--rw-green);
}
.rw .rw-said.is-bad {
  background: color-mix(in srgb, var(--rw-danger) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--rw-danger) 28%, #fff);
  color: var(--rw-danger);
}

/* ---------------------------------------------------- messages */

.rw .rw-msg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.rw .rw-msgs { display: grid; gap: .7rem; }

.rw .rw-msg {
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-left: 3px solid var(--rw-line-2);
  border-radius: var(--rw-r-sm);
  padding: .95rem 1.15rem;
}
.rw .rw-msg.is-unread {
  border-left-color: var(--rw-accent);
  background: color-mix(in srgb, var(--rw-accent) 4%, #fff);
}

.rw .rw-msg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}

.rw .rw-msg-subject { font-weight: 680; font-size: .98rem; margin: 0; }

.rw .rw-msg-when { font-size: .8rem; color: var(--rw-muted); white-space: nowrap; }

/* pre-wrap, so the newlines the message was written with survive
   without the body having to carry markup. */
.rw .rw-msg-body {
  margin: .45rem 0 0;
  font-size: .93rem;
  color: var(--rw-ink-2);
  white-space: pre-wrap;
}

/* ---------------------------------------------------- history */

/* The three outcomes, as a filter. Chips rather than a select because there
   are four of them and the counts are half the information. */
.rw .rw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}

.rw .rw-filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border: 1px solid var(--rw-line);
  border-radius: 999px;
  background: var(--rw-surface);
  color: var(--rw-muted);
  font: inherit;
  font-size: .86rem;
  font-weight: 640;
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}

.rw .rw-filter:hover { color: var(--rw-ink); border-color: var(--rw-line-2, var(--rw-line)); }

.rw .rw-filter.is-on {
  color: var(--rw-ink);
  border-color: currentColor;
  background: var(--rw-surface);
}

.rw .rw-filter-n {
  font-size: .78rem;
  font-weight: 700;
  padding: .05rem .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, #fff);
}

.rw .rw-history { display: grid; gap: .55rem; }

/* A row still waiting is the one somebody opened this tab to find, so it is
   the one row that is allowed to stand out from the list. */
.rw .rw-hist.is-pending { border-color: color-mix(in srgb, var(--rw-amber) 45%, var(--rw-line)); }

.rw .rw-hist {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r-sm);
  padding: .8rem 1rem;
  font-size: .92rem;
}

.rw .rw-hist-task { font-weight: 640; flex: 1 1 10rem; }

.rw .rw-hist-when { color: var(--rw-muted); font-size: .84rem; }

.rw .rw-pill {
  font-size: .78rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.rw .rw-pill.is-pending  { background: color-mix(in srgb, var(--rw-amber) 12%, #fff); color: var(--rw-amber); }
.rw .rw-pill.is-approved { background: color-mix(in srgb, var(--rw-green) 12%, #fff); color: var(--rw-green); }
.rw .rw-pill.is-rejected { background: color-mix(in srgb, var(--rw-danger) 10%, #fff); color: var(--rw-danger); }

.rw .rw-hist-note {
  flex: 1 0 100%;
  font-size: .86rem;
  color: var(--rw-muted);
  margin: .2rem 0 0;
}

/* ---------------------------------------------------- profile */

.rw .rw-profile {
  margin: 0;
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r);
  overflow: hidden;
}

.rw .rw-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--rw-line);
}
.rw .rw-row:last-child { border-bottom: 0; }

.rw .rw-row dt { color: var(--rw-muted); font-size: .88rem; margin: 0; }
.rw .rw-row dd { margin: 0; font-size: .95rem; color: var(--rw-ink); word-break: break-word; }

/* ---------------------------------------------------- narrow */

@media (max-width: 640px) {
  .rw .rw-counters { grid-template-columns: 1fr; }
  .rw .rw-row { grid-template-columns: 1fr; gap: .15rem; }
  /* A capsule button that has to wrap looks broken; full width is also
     the better tap target. Same call as the giveaway forms. */
  .rw .rw-form .rw-btn { width: 100%; justify-self: stretch; }
  /* The panel's own dashed pill stacks itself below 560px in promo.css. */
  .rw .rw-slot .rw-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rw .rw-btn { transition: none; }
  .rw .rw-btn:hover { transform: none; }
}

/* ---------------------------------------------------- tutorial

   Sits above the task list for the tiers that are shown it. Same card
   surface as everything else on this page so it reads as part of the
   dashboard, not as an advert dropped on top of it. */

.rw .rw-tutorial {
  margin: 0 0 1.25rem;
  background: var(--rw-surface);
  border: 1px solid var(--rw-line);
  border-radius: var(--rw-r);
  padding: 1.1rem 1.1rem 1.2rem;
}

.rw .rw-tutorial-head { margin-bottom: .85rem; }

.rw .rw-tutorial-lede {
  margin: .3rem 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--rw-muted);
}

/* 16:9 without the padding-top trick, and capped so the player does not
   dominate a wide screen. */
.rw .rw-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 44rem;
  margin-inline: auto;
  border-radius: var(--rw-r-sm);
  overflow: hidden;
  background: #0d0b14;
}

.rw .rw-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}