/* ==========================================================================
   Subscribers — styles for the "deepseek" pink pill-tabs listing (new design).
   Scoped under .sm-root to avoid leaking into the dashboard shell.
   ========================================================================== */

.sm-root {
  /* Tappa 4bis: --sm-* diventano alias dei token jsm-sito.css. */
  --sm-accent:              var(--jsm-accent,       #FF69B4);
  --sm-accent-read:         var(--jsm-accent-ink,   #be185d);
  --sm-accent-soft:         var(--jsm-accent-soft,  #fce7f3);
  --sm-bg:                  var(--jsm-bg,           #ffffff);
  --sm-on-surface:          var(--jsm-ink,          #0a0a0a);
  --sm-on-surface-variant:  var(--jsm-ink-muted,    #52607a);
  --sm-warn-read:           #b45309;                /* stato warning, non jsm */
  --sm-outline-variant:     var(--jsm-hairline-firm, #c5c4db);
  --sm-pad: var(--jsm-space-4, 16px);
  --sm-dur-quick:           var(--jsm-dur-quick,    150ms);
  --sm-dur-fast:            var(--jsm-dur-fast,     250ms);
  --sm-dur-slow:            var(--jsm-dur-slow,     400ms);
  --sm-ease-out:            var(--jsm-ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

  width: 100%; max-width: var(--jsm-column-max, 640px); margin: 0 auto;
  padding: var(--jsm-space-6, 24px) var(--sm-pad) var(--jsm-space-12, 48px);
  font-family: var(--font-sans);
  color: var(--sm-on-surface);
  background: var(--sm-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- back button floating (mockup non lo prevede: lo mettiamo
   fuori dal flusso per non invadere lo spazio sopra "Monthly earnings") ---------- */
.sm-root { position: relative; }
.sm-back-float {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 36px; height: 36px; display: inline-grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--sm-on-surface); cursor: pointer;
  transition: background-color var(--sm-dur-quick) ease;
}
.sm-back-float:hover, .sm-back-float:focus-visible { background: var(--sm-accent-soft); outline: none; }
.sm-back-float svg { width: 22px; height: 22px; }

/* ---------- total ---------- */
.sm-total-wrap { margin-bottom: 32px; }
.sm-total-label {
  margin: 0 0 4px;
  font-size: 0.75rem; line-height: 1.25rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sm-on-surface-variant);
}
.sm-total {
  margin: 0 0 8px;
  font-size: 2.25rem; line-height: 2.5rem; font-weight: 650;
  letter-spacing: -0.02em;
  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);
}
.sm-delta {
  display: flex; align-items: center; gap: 4px;
  color: var(--sm-accent-read);
  font-size: 0.75rem; line-height: 1.25rem; font-weight: 600;
  letter-spacing: 0.08em;
}
.sm-delta svg { width: 0.875rem; height: 0.875rem; flex: none; }

/* ---------- tabs ---------- */
.sm-tabs {
  position: relative; display: flex; align-items: center; gap: 3px;
  margin: -7px calc(var(--sm-pad) * -1) 8px;
  padding: 7px calc(var(--sm-pad) - 3px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sm-pad), #000 calc(100% - var(--sm-pad)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--sm-pad), #000 calc(100% - var(--sm-pad)), transparent 100%);
}
.sm-tabs::-webkit-scrollbar { display: none; }
.sm-tab {
  position: relative; flex: none; appearance: none; border: 0; background: transparent;
  height: 30px; padding: 4px 12px; border-radius: 48px; z-index: 1; cursor: pointer;
  font: 600 0.875rem/1 var(--font-sans);
  letter-spacing: 0.05em; white-space: nowrap;
  color: var(--sm-on-surface-variant);
  transition: color var(--sm-dur-fast) var(--sm-ease-out);
}
.sm-tab::after { content: ""; position: absolute; inset: -7px 0; }
.sm-tab:hover, .sm-tab:focus-visible, .sm-tab[aria-selected="true"] { color: var(--sm-accent-read); }
.sm-tab[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
.sm-tab[aria-disabled="true"]:hover, .sm-tab[aria-disabled="true"]:focus-visible { color: var(--sm-on-surface-variant); }
.sm-tab small { font: inherit; font-weight: 500; margin-left: 2px; font-variant-numeric: tabular-nums; }
.sm-tabs-pill {
  position: absolute; top: 7px; left: 0; height: 30px; width: 0; z-index: 0;
  pointer-events: none;
  background: var(--sm-accent-soft); border-radius: 48px;
  will-change: transform, width;
  transition: transform var(--sm-dur-fast) var(--sm-ease-out), width var(--sm-dur-fast) var(--sm-ease-out);
}

/* ---------- list head ---------- */
.sm-list-head {
  display: flex; justify-content: flex-start;
  padding-block: 8px 4px;
}
.sm-list-head span {
  font-size: 1rem; line-height: 1.25rem; font-weight: 650;
  color: var(--sm-on-surface);
}

/* ---------- list ---------- */
.sm-list { list-style: none; margin: 0; padding: 0; }
.sm-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: 16px; padding: 12px 0;
}
.sm-row + .sm-row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: rgba(197, 196, 219, 0.3);
}
.sm-info { min-width: 0; display: flex; flex-direction: column; }
.sm-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sm-name {
  min-width: 0;
  font-size: 1rem; line-height: 1.25rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-tag {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; line-height: 1.25rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sm-on-surface);
}
.sm-sub {
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--sm-on-surface-variant);
}
.sm-amt { display: flex; flex-direction: column; align-items: flex-end; }
.sm-chip {
  text-align: right; white-space: nowrap;
  font-size: 1rem; line-height: 1.25rem; font-weight: 650;
  background: transparent; color: var(--sm-on-surface);
}
.sm-chip-fading { color: var(--sm-on-surface-variant); }
.sm-end {
  white-space: nowrap;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--sm-warn-read);
}
.sm-empty {
  padding: 40px 0; text-align: center;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: var(--sm-on-surface-variant);
}

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

/* ---------- scrollable panel with fade ---------- */
@property --sm-fade-t { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sm-fade-b { syntax: '<length>'; inherits: false; initial-value: 0px; }

#sm-panel { outline: none; }
#sm-panel:focus-visible {
  outline-offset: -2px; border-radius: 8px;
  outline: 2px solid var(--sm-accent);
}

@media (min-height: 520px) {
  #sm-panel {
    max-height: calc(100vh - 320px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(197,196,219,0.9) transparent;
    margin-inline: calc(var(--sm-pad) * -1);
    padding-inline: var(--sm-pad);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sm-fade-t), #000 calc(100% - var(--sm-fade-b)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sm-fade-t), #000 calc(100% - var(--sm-fade-b)), transparent 100%);
    transition: --sm-fade-t var(--sm-dur-quick) ease-out, --sm-fade-b var(--sm-dur-quick) ease-out;
  }
}

/* ---------- desktop ---------- */
@media (min-width: 640px) {
  .sm-root { --sm-pad: 32px; padding-block: 32px 64px; }
}
@media (min-width: 1024px) {
  .sm-root { padding-block: 64px 80px; }
  .sm-total-label { margin-bottom: 8px; }
  .sm-total { font-size: 3.5rem; line-height: 1.05; margin-bottom: 12px; }
  .sm-delta { font-size: 0.875rem; }
  .sm-delta svg { width: 1rem; height: 1rem; }
  .sm-list-head span { line-height: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-tabs-pill, .sm-tab { transition: none !important; }
  .sm-rise { animation: none !important; opacity: 1 !important; filter: none !important; translate: none !important; }
  #sm-panel { transition: none !important; }
}