/* ==========================================================================
   Earnings home — styles for the "boro-market" landing.
   Scoped under .eh-root. Tappa 2 refactor: le --eh-* diventano alias dei
   token jsm-sito.css così la pagina pesca palette/motion dal nuovo design
   system (bianco puro, accent gender-driven, scala Builder) senza che
   il JS esistente (classi .eh-*) debba cambiare.
   ========================================================================== */

.eh-root {
  /* alias → token jsm. Un solo posto per cambiare, zero duplicati. */
  --eh-accent:              var(--jsm-accent,       #FF69B4);
  --eh-accent-read:         var(--jsm-accent-ink,   #be185d);
  --eh-accent-soft:         var(--jsm-accent-soft,  #fce7f3);
  --eh-accent-glow-1:       var(--jsm-accent-glow,  rgba(255,105,180,0.10));
  --eh-accent-glow-2:       var(--jsm-accent-glow,  rgba(255,105,180,0.25));
  --eh-on-surface:          var(--jsm-ink,          #0a0a0a);
  --eh-on-surface-variant:  var(--jsm-ink-muted,    #52607a);
  --eh-outline-variant:     var(--jsm-hairline-firm, rgba(10,10,10,0.14));
  --eh-surface-container:   var(--jsm-bg-alt,       #f6f7f9);
  --eh-primary-container:   var(--eh-accent);
  --eh-dur-quick:           var(--jsm-dur-quick,    150ms);
  --eh-dur-fast:            var(--jsm-dur-fast,     250ms);
  --eh-dur-slow:            var(--jsm-dur-slow,     400ms);
  --eh-dur-vslow:           var(--jsm-dur-very-slow,500ms);
  --eh-ease-out:            var(--jsm-ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
  --eh-ease-bounce:         var(--jsm-ease-bounce,  cubic-bezier(0.34, 1.36, 0.64, 1));

  width: 100%; max-width: var(--jsm-column-max, 640px); margin: 0 auto;
  padding: var(--jsm-space-6, 24px) var(--jsm-space-4, 16px) var(--jsm-space-8, 32px);
  display: flex; flex-direction: column; gap: var(--jsm-space-8, 32px);
  background: var(--jsm-bg, #ffffff);
  font-family: var(--font-sans);
  color: var(--eh-on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Area gradient fill: `stop-color` dentro un attributo SVG non legge sempre
   var() su tutti i browser → lo settiamo via CSS su `stop`, che è universale. */
.eh-root .eh-grad-top { stop-color: var(--eh-accent); stop-opacity: 0.14; }
.eh-root .eh-grad-bot { stop-color: var(--eh-accent); stop-opacity: 0; }

.eh-root .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.eh-root .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- hero ---------- */
.eh-hero { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.eh-hero-label {
  margin: 0 0 4px;
  font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--eh-on-surface-variant);
  min-width: 12ch; text-align: center;
  transition: opacity var(--eh-dur-quick) ease-in-out, filter var(--eh-dur-quick) ease-in-out;
}
.eh-balance {
  font-size: 2rem; line-height: 2.5rem; font-weight: 650;
  letter-spacing: -0.025em; margin-bottom: 8px;
  min-width: 7ch; text-align: center;
  text-shadow:
    -0.028em -0.028em 0.028em rgba(255,255,255,0.6),
    0.028em 0.028em 0.028em rgba(0,0,0,0.4),
    0.056em 0.056em 0.056em rgba(0,0,0,0.3),
    0.111em 0.111em 0.111em rgba(0,0,0,0.2),
    0.222em 0.222em 0.333em rgba(0,0,0,0.15);
}
.eh-digit-group { display: inline-flex; align-items: baseline; }
.eh-digit { display: inline-block; will-change: transform, opacity, filter; }
@keyframes eh-digit-pop {
  0% { transform: translateY(8px); opacity: 0; filter: blur(2px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.eh-digit-group.is-animating .eh-digit {
  animation: eh-digit-pop var(--eh-dur-vslow) cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
.eh-digit-group.is-animating .eh-digit[data-stagger="1"] { animation-delay: 70ms; }
.eh-digit-group.is-animating .eh-digit[data-stagger="2"] { animation-delay: 140ms; }

.eh-delta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--eh-accent-read);
  font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600;
  letter-spacing: 0.08em; white-space: nowrap;
  transition: opacity var(--eh-dur-quick) ease-in-out, filter var(--eh-dur-quick) ease-in-out, color var(--eh-dur-quick) ease-in-out;
}
.eh-delta-icon {
  font-size: 0.875rem; line-height: 1; flex: none;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  transition: transform var(--eh-dur-quick) var(--eh-ease-out);
}
.eh-delta.eh-delta-down .eh-delta-icon { transform: rotate(90deg); }
.eh-delta #eh-delta-text { display: inline-block; min-width: 15ch; text-align: left; }

/* ---------- chart ---------- */
.eh-chart-container {
  position: relative; height: 140px; width: 100%;
  cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  padding-block: 12px; margin-block: -12px;
  border-radius: 8px; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.eh-chart-container:focus-visible { outline: 2px solid var(--eh-accent); outline-offset: -4px; }

#eh-chart-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; display: block;
}
#eh-chart-line {
  fill: none; stroke: var(--eh-accent); stroke-width: 2.5px;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: opacity var(--eh-dur-fast) var(--eh-ease-out);
}
#eh-chart-area { pointer-events: none; transition: opacity var(--eh-dur-fast) var(--eh-ease-out); }
.eh-chart-container.is-scrubbing #eh-chart-line { opacity: 0.78; }
.eh-chart-container.is-scrubbing #eh-chart-area { opacity: 0.65; }

/* reveal animation */
@property --eh-reveal { syntax: '<percentage>'; inherits: false; initial-value: 110%; }
#eh-chart-svg.is-revealing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--eh-reveal) - 10%), transparent var(--eh-reveal));
          mask-image: linear-gradient(to right, #000 calc(var(--eh-reveal) - 10%), transparent var(--eh-reveal));
  animation: eh-chart-reveal 800ms var(--eh-ease-out) 300ms both;
}
@keyframes eh-chart-reveal { from { --eh-reveal: 0%; } to { --eh-reveal: 110%; } }

/* entrance rise (hero / chart / tabs / qa / payout rows) */
@keyframes eh-rise-in {
  from { opacity: 0; translate: 0 8px; filter: blur(2px); }
  to   { opacity: 1; translate: 0 0;   filter: blur(0); }
}
.eh-rise {
  animation: eh-rise-in var(--eh-dur-slow) var(--eh-ease-out) both;
  animation-delay: var(--eh-delay, 0ms);
}

.eh-chart-dot {
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffffff; border: 3px solid var(--eh-accent);
  box-sizing: content-box;
  box-shadow: 0 0 0 4px var(--eh-accent-glow-1), 0 4px 14px var(--eh-accent-glow-2);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0; pointer-events: none; z-index: 4;
  will-change: left, top, transform, opacity;
  transition:
    opacity 50ms ease-out, transform 50ms ease-out,
    left 160ms var(--eh-ease-out), top 160ms var(--eh-ease-out);
}
.eh-chart-dot.is-visible {
  transform: translate(-50%, -50%) scale(1); opacity: 1;
  transition:
    opacity var(--eh-dur-quick) ease-out 80ms,
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms,
    left 160ms var(--eh-ease-out), top 160ms var(--eh-ease-out);
}
/* Durante lo scrub il pallino segue il dito/puntatore senza transizione:
   l'inseguimento morbido ritardava la posizione dietro la curva e, con
   gesto veloce, il pallino usciva "nel vuoto". Snap diretto = sempre
   sopra la riga. */
.eh-chart-container.is-scrubbing .eh-chart-dot.is-visible {
  transition:
    opacity var(--eh-dur-quick) ease-out,
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- tabs ---------- */
.eh-tabs-wrap { display: flex; justify-content: center; }
.eh-tabs {
  position: relative; display: inline-flex; align-items: center;
  gap: 3px; padding: 3px; border-radius: 48px; background: transparent;
}
.eh-tab {
  position: relative; appearance: none; border: 0; background: transparent;
  height: 30px; padding: 4px 12px; z-index: 1; cursor: pointer; border-radius: 48px;
  font: 600 0.875rem/1 var(--font-sans);
  letter-spacing: 0.05em; color: var(--eh-on-surface-variant);
  transition: color var(--eh-dur-fast) var(--eh-ease-out);
}
.eh-tab[aria-selected="true"], .eh-tab:hover, .eh-tab:focus-visible { color: var(--eh-accent-read); }
.eh-tab[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
.eh-tab[aria-disabled="true"]:hover, .eh-tab[aria-disabled="true"]:focus-visible { color: var(--eh-on-surface-variant); }
.eh-tabs-pill {
  position: absolute; top: 3px; left: 0; height: 30px; width: 0; z-index: 0;
  background: var(--eh-accent-soft); border-radius: 48px; pointer-events: none;
  transform: translateX(0);
  transition: transform var(--eh-dur-fast) var(--eh-ease-out), width var(--eh-dur-fast) var(--eh-ease-out);
  will-change: transform, width;
}

/* ---------- side (quick actions + payout history) ---------- */
.eh-side { display: flex; flex-direction: column; gap: 32px; }

.eh-quick-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.eh-qa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; min-width: 0; padding: 12px 16px;
  border: 0; border-radius: 16px; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem; line-height: 1.25rem; font-weight: 650;
  transition:
    opacity var(--eh-dur-fast) ease-in-out,
    background-color var(--eh-dur-fast) ease-in-out,
    transform var(--eh-dur-fast) var(--eh-ease-out),
    translate var(--eh-dur-fast) var(--eh-ease-bounce),
    scale var(--eh-dur-fast) var(--eh-ease-bounce);
}
.eh-qa-primary { background: var(--eh-primary-container); color: #ffffff; box-shadow: 0 2px 6px rgba(190, 24, 93, 0.18); }
.eh-qa-primary:hover { opacity: 0.92; }
.eh-qa-secondary { background: transparent; color: var(--eh-on-surface); }
.eh-qa-secondary:hover { background: #e3e1f1; }
@media (hover: hover) and (pointer: fine) {
  .eh-qa-btn:hover { translate: 0 -2px; scale: 1.02; }
}
.eh-qa-btn:active { transform: none; translate: 0 0; scale: 0.98; transition-duration: var(--eh-dur-quick); }
.eh-qa-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.eh-qa-icon-swap {
  display: inline-grid; width: 20px; height: 20px; place-items: center; flex: none;
  transform: translateY(0) scale(1); transform-origin: center;
  transition: transform var(--eh-dur-fast) var(--eh-ease-bounce);
}
.eh-qa-icon-swap .material-symbols-outlined {
  grid-area: 1 / 1;
  font-size: 20px; line-height: 20px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  transition:
    opacity var(--eh-dur-fast) var(--eh-ease-bounce),
    filter var(--eh-dur-fast) var(--eh-ease-bounce),
    transform var(--eh-dur-fast) var(--eh-ease-bounce);
}
.eh-qa-icon-swap .material-symbols-outlined[data-icon="group"]  { opacity: 1; filter: blur(0); transform: scale(1); }
.eh-qa-icon-swap .material-symbols-outlined[data-icon="person"] { opacity: 0; filter: blur(2px); transform: scale(0.5); }
@media (hover: hover) {
  .eh-qa-btn:hover .eh-qa-icon-swap, .eh-qa-btn:focus-visible .eh-qa-icon-swap { transform: translateY(-1px) scale(1.14); }
  .eh-qa-btn:hover .eh-qa-icon-swap .material-symbols-outlined[data-icon="group"],
  .eh-qa-btn:focus-visible .eh-qa-icon-swap .material-symbols-outlined[data-icon="group"] { opacity: 0; filter: blur(2px); transform: scale(0.5); }
  .eh-qa-btn:hover .eh-qa-icon-swap .material-symbols-outlined[data-icon="person"],
  .eh-qa-btn:focus-visible .eh-qa-icon-swap .material-symbols-outlined[data-icon="person"] { opacity: 1; filter: blur(0); transform: scale(1); }
}
.eh-qa-btn:active .eh-qa-icon-swap { transform: translateY(-1px) scale(0.96); transition-duration: var(--eh-dur-quick); }

.eh-qa-btn-icon {
  width: 20px; height: 20px; flex: none;
  font-size: 20px; line-height: 20px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  transition: transform var(--eh-dur-fast) var(--eh-ease-bounce);
}
@media (hover: hover) {
  .eh-qa-btn:hover .eh-qa-btn-icon, .eh-qa-btn:focus-visible .eh-qa-btn-icon { transform: translateY(-1px) scale(1.14); }
}
.eh-qa-btn:active .eh-qa-btn-icon { transform: scale(0.96); transition-duration: var(--eh-dur-quick); }

.eh-chart-empty[hidden] { display: none; }
.eh-chart-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--eh-on-surface-variant); pointer-events: none;
  letter-spacing: 0.02em;
}

/* payout card */
.eh-payout-card { display: flex; flex-direction: column; gap: 8px; position: relative; }
.eh-payout-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.eh-payout-title { margin: 0; font-size: 1rem; line-height: 1.25rem; font-weight: 650; color: var(--eh-on-surface); }

/* Indicatore di scroll: una riga sottile sotto "History payout" che
   compare solo mentre si scorre; cresce da sinistra fino a destra
   proporzionalmente al progresso. */
.eh-scroll-progress {
  position: relative; height: 2px; margin: 0 0 8px;
  background: transparent; border-radius: 2px; overflow: hidden;
  opacity: 0; transition: opacity 180ms ease-out;
  pointer-events: none;
}
.eh-scroll-progress > span {
  display: block; height: 100%;
  width: var(--eh-scroll-progress, 0%);
  background: rgba(197, 196, 219, 0.9);
  border-radius: 2px;
  transition: width 120ms ease-out;
}
.eh-payout-card.is-scrolling .eh-scroll-progress { opacity: 1; }

@property --eh-fade-t { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --eh-fade-b { syntax: '<length>'; inherits: false; initial-value: 0px; }

.eh-payout-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.eh-payout-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 16px 0;
}
.eh-payout-row + .eh-payout-row { border-top: 1px solid rgba(197, 196, 219, 0.5); }
.eh-payout-amt {
  font-size: 1.5rem; line-height: 2rem; font-weight: 650;
  letter-spacing: -0.02em; color: var(--eh-on-surface); white-space: nowrap;
}
.eh-payout-date { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--eh-on-surface-variant); white-space: nowrap; }
.eh-payout-empty { padding: 24px 0; text-align: center; font-size: 0.875rem; color: var(--eh-on-surface-variant); }

/* fade bottom gradient when scrollable */
.eh-payout-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px;
  pointer-events: none;
  background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
}

/* ---------- mobile portrait: scroll interno alla lista ----------
   Come su desktop: la pagina non scorre, scorre solo la cronologia,
   con la stessa maschera di sfumatura sopra/sotto. */
@media (max-width: 1023px) {
  /* Blocca lo scroll della pagina quando siamo in Earnings: la cronologia
     payout è l'unica area con scroll interno. */
  html:has(.eh-root), body:has(.eh-root) {
    overflow: hidden; height: 100%;
    overscroll-behavior: none;
  }
  .eh-payout-list {
    max-height: 320px;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--eh-fade-t), #000 calc(100% - var(--eh-fade-b)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--eh-fade-t), #000 calc(100% - var(--eh-fade-b)), transparent 100%);
    transition: --eh-fade-t var(--eh-dur-quick) ease-out, --eh-fade-b var(--eh-dur-quick) ease-out;
  }
  .eh-payout-card::after { display: none; }
}

/* Scrollbar native fuori: indicatore gestito da .eh-scroll-progress */
.eh-payout-list { scrollbar-width: none !important; scrollbar-gutter: auto !important; padding-right: 0 !important; }
.eh-payout-list::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* ---------- desktop ---------- */
@media (min-width: 640px) {
  .eh-root { padding: 32px 32px 48px; }
  .eh-chart-container { height: auto; aspect-ratio: 327 / 140; }
}
@media (min-width: 1024px) {
  /* Desktop ampio: Earnings usa un grid 2-col con placement esplicito dei
     figli; il titolo "Earnings" (phone/tablet) qui è ridondante perché l'hero
     a sinistra è già il punto focale → nascosto per non rompere il grid. */
  .eh-root > .jsm-page-head { display: none; }
  .eh-root {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 56px; row-gap: 28px;
    align-content: start;
    max-width: none;
    padding: 56px 48px 72px;
  }
  .eh-hero { grid-column: 1; grid-row: 1; align-items: flex-start; padding-top: 0; }
  .eh-chart-container { grid-column: 1; grid-row: 2; aspect-ratio: 2.6 / 1; }
  .eh-tabs-wrap { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .eh-tabs { margin-left: -3px; }

  .eh-hero-label, .eh-balance, .eh-delta { text-align: left; }
  .eh-balance { font-size: 3.5rem; line-height: 1.05; margin-bottom: 12px; }
  .eh-hero-label { margin-bottom: 8px; }
  .eh-delta { font-size: 0.875rem; }
  .eh-delta-icon { width: 1rem; height: 1rem; }

  /* Opzione A: i quick-action vanno sotto le tabs (riga 4, colonna sinistra),
     la History payout a destra occupa tutta l'altezza su 4 righe. */
  .eh-side {
    grid-column: 2; grid-row: 1 / span 4; align-self: stretch;
    min-height: 0; display: flex; flex-direction: column;
  }
  .eh-quick-actions {
    grid-column: 1; grid-row: 4;
    width: 100%; max-width: 420px;
    margin-top: 4px;
  }
  .eh-payout-card { flex: 1 1 0; min-height: 0; }
  .eh-payout-card::after { display: none; }

  .eh-payout-list {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: rgba(197,196,219,0.9) transparent;
    /* la barra di scorrimento vive nel gutter riservato, fuori dalle righe */
    padding-right: 4px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--eh-fade-t), #000 calc(100% - var(--eh-fade-b)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--eh-fade-t), #000 calc(100% - var(--eh-fade-b)), transparent 100%);
    transition: --eh-fade-t var(--eh-dur-quick) ease-out, --eh-fade-b var(--eh-dur-quick) ease-out;
  }
  .eh-payout-list::-webkit-scrollbar { width: 6px; }
  .eh-payout-list::-webkit-scrollbar-thumb {
    background: rgba(197,196,219,0.9); border-radius: 3px;
  }
  .eh-payout-list::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- phone landscape: History payout bloccata ----------
   In landscape il viewport è ~375–430px, già pieno con hero+chart+tab+qa.
   Invece di far sparire la cronologia sotto la pagina, la limito a ~200px
   (2,5 righe visibili + fade mask) così resta ancorata e scorre internamente.
   Il JS alimenta già --eh-fade-t/--eh-fade-b in base allo scroll. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .eh-payout-list {
    max-height: 200px;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(197,196,219,0.9) transparent;
    padding-right: 4px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--eh-fade-t), #000 calc(100% - var(--eh-fade-b)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--eh-fade-t), #000 calc(100% - var(--eh-fade-b)), transparent 100%);
    transition: --eh-fade-t var(--eh-dur-quick) ease-out, --eh-fade-b var(--eh-dur-quick) ease-out;
  }
  .eh-payout-list::-webkit-scrollbar { width: 6px; }
  .eh-payout-list::-webkit-scrollbar-thumb { background: rgba(197,196,219,0.9); border-radius: 3px; }
  .eh-payout-list::-webkit-scrollbar-track { background: transparent; }
  .eh-payout-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eh-tabs-pill, .eh-tab { transition: none !important; }
  .eh-digit-group .eh-digit { animation: none !important; }
  .eh-chart-dot { transition: none !important; }
  .eh-hero-label, #eh-delta-text, #eh-chart-line, #eh-chart-area { transition: none !important; }
  #eh-chart-svg.is-revealing { animation: none !important; -webkit-mask-image: none; mask-image: none; }
  .eh-qa-btn { transition: none !important; translate: none !important; scale: none !important; }
  .eh-payout-list { transition: none !important; }
  .eh-rise { animation: none !important; opacity: 1 !important; translate: none !important; filter: none !important; }
}