/* Prism: the Earn hub on top of the plugin's own styles. The hero is a
   white card with a soft wash of the accent and the refraction drawing at
   its corner; the counts sit in pale wells, cards are white and the
   active tab is filled with the accent. */
@import url("../../../../components/earn/_chrome.css");

/* The hero's markup letters itself in var(--paper) and a faint light ink
   for a dark band: on white both become the page's ink. */
.earn-hero, html.dark .earn-hero {
  --paper: var(--ink);
  position: relative; overflow: hidden;
  background: radial-gradient(700px 420px at 85% -40px, var(--psm-accent-soft), transparent 70%), var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3rem;
  color: var(--ink);
}
.earn-hero [style*="rgba(244,239,226"] { color: var(--ink-soft) !important; }
.earn-hero .earn-hero-accent { display: none; }
.earn-hero::before {
  content: ''; position: absolute; bottom: 24px; right: 40px; left: auto; top: auto; width: 170px; height: 120px; pointer-events: none; opacity: 1;
  transform: none;
  background: var(--art-refraction) center bottom / contain no-repeat;
}
[dir="rtl"] .earn-hero::before { right: auto; left: 40px; transform: scaleX(-1); }
@media (max-width: 639px) { .earn-hero::before { display: none; } }
.earn-hero::after { display: none; }
.earn-hero > .relative { z-index: 1; }
.earn-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em !important; }
.earn-hero h1 .display-italic { display: inline-block; width: .34em; height: .3em; margin-inline-start: .1em; background: var(--psm-accent); -webkit-mask: var(--psm-prism-solid) center bottom / contain no-repeat; mask: var(--psm-prism-solid) center bottom / contain no-repeat; color: transparent !important; overflow: hidden; line-height: 0; }
/* The counts in pale wells */
.earn-hero-stat, html.dark .earn-hero-stat {
  position: relative;
  border-radius: var(--radius-md); border: 0 !important;
  background: var(--paper-3);
  box-shadow: none;
  --paper: var(--ink);
  color: var(--ink);
}
.earn-hero-stat [style*="rgba(244,239,226"], .earn-hero-stat .ed-eyebrow { color: var(--ink-soft) !important; }
.earn-hero .ed-btn-secondary[style*="color:var(--paper)"] { color: var(--ink) !important; border-color: var(--rule) !important; }
/* A balance like 999,572 stays inside its card on a phone */
.earn-hero-stat .tabular-nums { font-family: var(--font-num) !important; font-weight: 600 !important; color: var(--ink) !important; font-size: clamp(1rem, 4.8vw, 1.6rem) !important; overflow-wrap: normal; white-space: nowrap; }
.earn-card { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.earn-card::before { display: none; }
.pill-btn.pill-active {
  background: var(--psm-accent) !important;
  color: var(--psm-on-accent) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -8px var(--psm-accent-glow);
}

/* The pill bar under the hero: the plugin paints it near-black after dark
   with an ID rule; here it is the page's own ink. */
html.dark #pillNavBar { background: color-mix(in srgb, var(--paper) 94%, transparent) !important; border-bottom-color: var(--rule) !important; }

/* Three counts across a phone leave ~80px each: a six-figure balance
   (999,472) scales down instead of running past its label. */
@media (max-width: 639px) {
  html body .earn-hero-stat { min-width: 0; }
  html body .earn-hero-stat > p.tabular-nums { font-size: clamp(.9rem, 4vw, 1.6rem) !important; overflow-wrap: normal; }
  html body .earn-hero-stat > .ed-eyebrow { letter-spacing: .02em !important; }
}