/* ==========================================================================
   jsm-sito.css — Design system per le sezioni private del sito
   (My page, Stats, Earnings, Activity, Settings, Help) + area Fan.

   Scope: ogni regola è prefissata con body[data-jsm="sito"]. Finché quel
   data-attribute non viene impostato (lo farà la Tappa 2), questo file è
   caricato ma inerte: ZERO impatto sulle regole esistenti. Nessun selettore
   generico sul body o su elementi senza scope.

   Non estende e non duplica i vecchi `ios.css` / `cal.css` / `profile-theme.css`:
   quando questo file sarà attivo, quelli non si applicheranno più alle 6
   pagine coperte, perché le viste smetteranno di importarli (Tappa 2) oppure
   verranno disattivate per route (Tappa 5).

   Famiglia font: `--font-sans` di colors_and_type.css (SF/Figtree). Non
   ridichiariamo @font-face: quelli stanno in app/fonts/fonts.css.
   ========================================================================== */

/* ---- tokens ---------------------------------------------------------- */
body[data-jsm="sito"] {
  /* -- Palette superficie: bianco puro ovunque -------------------------- */
  --jsm-bg:            #ffffff;   /* sfondo pagina e card principali      */
  --jsm-bg-alt:        #f6f7f9;   /* fill morbido (hover muted, divider)  */
  --jsm-ink:           #0a0a0a;   /* titoli e testo primario              */
  --jsm-ink-muted:     #52607a;   /* testo secondario (AA ≥4.5:1 su bg)   */
  --jsm-ink-faint:     #8b919d;   /* hint, timestamp, placeholder         */
  --jsm-hairline:      rgba(10,10,10,0.08);  /* bordo card / divisorio    */
  --jsm-hairline-firm: rgba(10,10,10,0.14);  /* bordo input / pressed     */

  /* -- Accent: pilotato da body[data-gender] (vedi override più sotto).
        Default = female perché il sito nasce per creator donne.         */
  --jsm-accent:        #FF69B4;   /* azione primaria, hero number stroke  */
  --jsm-accent-ink:    #be185d;   /* testo su accent-soft (AA)            */
  --jsm-accent-soft:   #fce7f3;   /* pill selected, hover ghost           */
  --jsm-accent-glow:   rgba(255, 105, 180, 0.22); /* shadow su CTA        */

  /* -- Semantica di stato (fisse, non cambiano col gender) -------------- */
  --jsm-success:       #16a34a;
  --jsm-danger:        #dc2626;
  --jsm-warning:       #d97706;

  /* -- Scala spazi (4px base, Builder) ---------------------------------- */
  --jsm-space-0:   0;
  --jsm-space-1:   4px;
  --jsm-space-2:   8px;
  --jsm-space-3:  12px;
  --jsm-space-4:  16px;   /* phone gutter + card padding default          */
  --jsm-space-5:  20px;
  --jsm-space-6:  24px;   /* padding card comoda, sezione                 */
  --jsm-space-8:  32px;   /* ritmo verticale tra blocchi                  */
  --jsm-space-10: 40px;
  --jsm-space-12: 48px;   /* ritmo tra regioni di pagina                  */
  --jsm-space-16: 64px;

  /* -- Radii (consistency con Earnings / Activity già esistenti) -------- */
  --jsm-r-sm:   8px;
  --jsm-r-md:  12px;
  --jsm-r-lg:  16px;   /* default card                                    */
  --jsm-r-xl:  20px;   /* hero / featured                                 */
  --jsm-r-pill: 999px;

  /* -- Elevazione: shadow sulla "orizzontale" (y>0, blur>offset) -------- */
  --jsm-shadow-flat:    none;
  --jsm-shadow-raised:  0 1px 2px rgba(10,10,10,0.06), 0 2px 4px rgba(10,10,10,0.04);
  --jsm-shadow-sticky:  0 1px 2px rgba(10,10,10,0.08);
  --jsm-shadow-float:   0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.06);
  --jsm-shadow-modal:   0 20px 60px rgba(10,10,10,0.3);
  --jsm-shadow-toast:   0 10px 30px rgba(10,10,10,0.18);

  /* -- Scala motion (Builder tokens, uguali al _root.css di transitions-dev) */
  --jsm-dur-stagger:    40ms;
  --jsm-dur-micro:      80ms;
  --jsm-dur-quick:     150ms;
  --jsm-dur-fast:      250ms;
  --jsm-dur-medium:    350ms;
  --jsm-dur-slow:      400ms;
  --jsm-dur-very-slow: 500ms;
  --jsm-ease-smooth-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --jsm-ease-in-out:       ease-in-out;
  --jsm-ease-out:          ease-out;
  --jsm-ease-linear:       linear;
  --jsm-ease-bounce:       cubic-bezier(0.34, 1.36, 0.64, 1);
  --jsm-ease-bounce-strong:cubic-bezier(0.34, 3.85, 0.64, 1);
  --jsm-dist-micro:    4px;
  --jsm-dist-small:    6px;
  --jsm-dist-base:     8px;
  --jsm-dist-medium:  12px;
  --jsm-dist-large:   30px;
  --jsm-scale-large:  0.96;   /* modal pre-scale                           */
  --jsm-scale-medium: 0.97;   /* dropdown open                             */
  --jsm-scale-small:  0.98;   /* tooltip                                   */
  --jsm-scale-tiny:   0.99;   /* dropdown close                            */
  --jsm-blur-small:   2px;    /* panel/icon-swap/text-swap                 */
  --jsm-blur-medium:  3px;    /* page slide, text reveal                   */
  --jsm-blur-large:   8px;    /* success check                             */

  /* -- Focus ring (keyboard-first: sempre visibile) --------------------- */
  --jsm-focus:         var(--jsm-accent);
  --jsm-focus-offset:  2px;
  --jsm-focus-width:   2px;

  /* -- Max width colonna (phone-first, scale ragionevole su desktop) ---- */
  --jsm-column-max:    640px;

  /* -- Safe area iOS (notch + home indicator) --------------------------- */
  --jsm-safe-top:    max(env(safe-area-inset-top), 0px);
  --jsm-safe-bottom: max(env(safe-area-inset-bottom), 0px);

  /* --------------------------------------------------------------------- */
  background: var(--jsm-bg);
  color: var(--jsm-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Gender uomo: accent azzurro #38BDF8 (sky-500). Donna resta pink.
   `data-gender` guida l'area creator (dashboard), `data-fan-gender` guida
   l'area fan (vedi app.js updateChrome). Entrambi colpiscono gli stessi
   token quando body ha jsm="sito". */
body[data-jsm="sito"][data-gender="male"],
body[data-jsm="sito"][data-fan-gender="male"] {
  --jsm-accent:        #38BDF8;
  --jsm-accent-ink:    #0369a1;   /* sky-700, AA su bianco                */
  --jsm-accent-soft:   #e0f2fe;   /* sky-100                              */
  --jsm-accent-glow:   rgba(56, 189, 248, 0.22);
}

/* ---- Tipografia: ricetta unica per le 6 pagine --------------------- */
/* Page title (My page / Activity / Stats / Settings / Help):
   32px / 800 / -0.025em / line-height 1.05, ink pieno.                    */
body[data-jsm="sito"] .jsm-title {
  margin: 0;
  font: 800 32px/1.05 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--jsm-ink);
}
/* Section heading (dentro una pagina, es. "History payout"). */
body[data-jsm="sito"] .jsm-h2 {
  margin: 0;
  font: 700 20px/1.2 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--jsm-ink);
}
/* Row / card headline (es. titolo card, nome fan). */
body[data-jsm="sito"] .jsm-h3 {
  margin: 0;
  font: 700 16px/1.3 var(--font-sans);
  color: var(--jsm-ink);
}
/* Testo di corpo (descrizione card, paragrafi). */
body[data-jsm="sito"] .jsm-body {
  margin: 0;
  font: 400 15px/1.5 var(--font-sans);
  color: var(--jsm-ink);
}
/* Testo secondario (sottotitoli, hint sotto le card). */
body[data-jsm="sito"] .jsm-muted {
  color: var(--jsm-ink-muted);
}
/* Caption (timestamp, metadata, label piccole). */
body[data-jsm="sito"] .jsm-caption {
  margin: 0;
  font: 500 13px/1.3 var(--font-sans);
  color: var(--jsm-ink-muted);
}
/* Label eyebrow: piccola uppercase sopra un numero/hero (es "TOTAL BALANCE"). */
body[data-jsm="sito"] .jsm-eyebrow {
  margin: 0;
  font: 600 13px/1.25 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jsm-ink-muted);
}
/* Numero hero (es. balance in Earnings): tabular, letter-spacing tight. */
body[data-jsm="sito"] .jsm-hero-num {
  margin: 0;
  font: 650 32px/1.25 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--jsm-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Primitives: card ---------------------------------------------- */
body[data-jsm="sito"] .jsm-card {
  background: var(--jsm-bg);
  border: 1px solid var(--jsm-hairline);
  border-radius: var(--jsm-r-lg);
  padding: var(--jsm-space-4);
  box-shadow: var(--jsm-shadow-raised);
  transition:
    transform var(--jsm-dur-fast) var(--jsm-ease-smooth-out),
    box-shadow var(--jsm-dur-fast) var(--jsm-ease-smooth-out);
}
@media (hover: hover) and (pointer: fine) {
  body[data-jsm="sito"] .jsm-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jsm-shadow-float);
  }
}

/* ---- Primitives: button ------------------------------------------- */
body[data-jsm="sito"] .jsm-btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--jsm-space-2);
  min-height: 44px;                       /* touch target 44×44 */
  padding: 0 var(--jsm-space-5);
  border: 0;
  border-radius: var(--jsm-r-pill);
  font: 650 16px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  background: var(--jsm-bg-alt);
  color: var(--jsm-ink);
  transition:
    background var(--jsm-dur-fast) var(--jsm-ease-smooth-out),
    transform var(--jsm-dur-fast) var(--jsm-ease-smooth-out),
    box-shadow var(--jsm-dur-fast) var(--jsm-ease-smooth-out);
  -webkit-tap-highlight-color: transparent;
}
body[data-jsm="sito"] .jsm-btn:active { transform: scale(0.98); }
body[data-jsm="sito"] .jsm-btn-primary {
  background: var(--jsm-accent);
  color: #ffffff;
  box-shadow: 0 2px 6px var(--jsm-accent-glow);
}
body[data-jsm="sito"] .jsm-btn-primary:hover { opacity: 0.92; }
body[data-jsm="sito"] .jsm-btn-ghost { background: transparent; }
body[data-jsm="sito"] .jsm-btn-ghost:hover { background: var(--jsm-bg-alt); }

/* ---- Focus ring: keyboard-first, sempre visibile ------------------ */
body[data-jsm="sito"] :focus-visible {
  outline: var(--jsm-focus-width) solid var(--jsm-focus);
  outline-offset: var(--jsm-focus-offset);
}

/* ---- Entrance: rise in (texts-reveal del catalog Builder) --------- */
@keyframes jsm-rise-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
}
body[data-jsm="sito"] .jsm-rise {
  animation: jsm-rise-in var(--jsm-dur-slow) var(--jsm-ease-smooth-out) both;
  animation-delay: var(--jsm-rise-delay, 0ms);
}

/* ---- Layout: shell colonna phone-first --------------------------- */
body[data-jsm="sito"] .jsm-page {
  width: 100%;
  max-width: var(--jsm-column-max);
  margin-inline: auto;
  padding: calc(var(--jsm-safe-top) + var(--jsm-space-6))
           var(--jsm-space-4)
           calc(var(--jsm-safe-bottom) + var(--jsm-space-10));
  display: flex; flex-direction: column;
  gap: var(--jsm-space-6);
  background: var(--jsm-bg);
}
body[data-jsm="sito"] .jsm-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--jsm-space-4);
  /* Ritmo verticale uniforme del titolone (My page / Earnings / Activity /
     Settings / Help). 24px sopra, 16px sotto: stessa altezza di `.mp-head`
     dell'Activity, così tutti i titoli atterrano allo stesso Y. */
  padding: var(--jsm-space-6) 0 var(--jsm-space-4);
}
/* Quando la testata ha un sottotitolo (es. Layout: "Drag to reorder…"),
   stacca titolo e sottotitolo in colonna: la riga sarebbe troppo stretta e
   il paragrafo finisce a destra del titolone o rotto su più righe. */
body[data-jsm="sito"] .jsm-page-head:has(.jsm-page-sub) {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jsm-space-2);
}
body[data-jsm="sito"] .jsm-section {
  display: flex; flex-direction: column;
  gap: var(--jsm-space-3);
}

/* ---- Prefers reduced motion: niente blur/translate su entrata ---- */
@media (prefers-reduced-motion: reduce) {
  body[data-jsm="sito"] .jsm-rise {
    animation: none;
    opacity: 1; transform: none; filter: none;
  }
  body[data-jsm="sito"] .jsm-card,
  body[data-jsm="sito"] .jsm-btn {
    transition: none;
  }
}