/* ============================================================================
   EMAX Score V1 — reusable component CSS
   Source of truth: thresholds 45 / 71 / 86 (mirror engine/score_palette.py).
   Locked 08.05.2026 from research/score-inventory/visual-system-viewer.html.
   ============================================================================ */

:root {
  /* Bucket colors (solid) */
  --score-red:          #dc2626;
  --score-orange:       #f59e0b;
  --score-green:        #22c55e;
  --score-violet:       #7c3aed;   /* EMAX brand — excellent only */
  --score-violet-light: #a78bfa;   /* gradient top */
  --score-violet-deep:  #5b21b6;   /* gradient bottom */

  /* Bucket glow colors (drop-shadow filter) */
  --score-red-glow:     rgba(220, 38, 38, 0.45);
  --score-orange-glow:  rgba(245, 158, 11, 0.45);
  --score-green-glow:   rgba(34, 197, 94, 0.45);
  --score-violet-glow:  rgba(124, 58, 237, 0.6);

  /* Track (unfilled ring) — soft neutral, works on light + dark backgrounds */
  --score-track:        #2a2a35;

  /* Animation tuning */
  --score-font:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --score-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --score-duration:     1100ms;
}

/* ----------------------------------------------------------------------------
   Component
   Markup contract:
     <div class="emax-score" data-size="md|sm|lg" data-score="0..100"></div>
   JS (emaxScoreInit) builds the inner SVG + label and animates ring + counter.
   ---------------------------------------------------------------------------- */

.emax-score {
  position: relative;
  display: inline-grid;
  place-items: center;
  font-family: var(--score-font);
  font-feature-settings: "tnum" 1;
}
.emax-score svg {
  width: 100%;
  height: 100%;
  display: block;
}
.emax-score circle.track {
  fill: none;
  stroke: var(--score-track);
  stroke-width: var(--ring-stroke);
}
.emax-score circle.fill {
  fill: none;
  stroke: var(--score-color);
  stroke-width: var(--ring-stroke);
  transition: stroke-dasharray var(--score-duration) var(--score-ease),
              stroke 300ms ease-out;
}
.emax-score .value {
  position: absolute;
  inset: 0;
}
.emax-score .num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--score-color);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 300ms ease-out;
  text-align: center;
  white-space: nowrap;
  paint-order: stroke fill;
  /* Uniform white stroke across all buckets — see size variants for width */
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.75);
}
.emax-score[data-size="sm"] .num { -webkit-text-stroke-width: 0.7px; }
.emax-score[data-size="md"] .num { -webkit-text-stroke-width: 1.4px; }
.emax-score[data-size="lg"] .num { -webkit-text-stroke-width: 2.2px; }

.emax-score .lab {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translateX(-50%);
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
  line-height: 1;     /* don't inherit body's 1.5 — would balloon the label bbox */
  /* font-size set per size below — em-against-body-default was always ~5px */
}
/* Sized so label sits between number-bottom and inner ring stroke.
   sm 56px:  number 18.4px (bottom 37.2px), inner stroke edge ~49px → 8px label at 70%
   md 140px: number 45.6px (bottom 92.8px), inner stroke edge ~119px → 14px label at 70%
   lg 280px: number 89.6px (bottom 184.8px), inner stroke edge ~221px → 22px label at 68% */
.emax-score[data-size="sm"] .lab { font-size: 7px;  letter-spacing: 0.12em; top: 68%; }
.emax-score[data-size="md"] .lab { font-size: 14px; letter-spacing: 0.16em; top: 70%; }
.emax-score[data-size="lg"] .lab { font-size: 22px; letter-spacing: 0.14em; top: 68%; }

/* ----------------------------------------------------------------------------
   Sizes
   sm = 56px (inline / email badge)
   md = 140px (card / PDF)
   lg = 280px (hero / OG image)
   ---------------------------------------------------------------------------- */
.emax-score[data-size="sm"] {
  width: 56px;
  height: 56px;
  --ring-stroke: 5px;
}
.emax-score[data-size="sm"] .num { font-size: 1.15rem; }

.emax-score[data-size="md"] {
  width: 140px;
  height: 140px;
  --ring-stroke: 10px;
}
.emax-score[data-size="md"] .num { font-size: 2.85rem; }

.emax-score[data-size="lg"] {
  width: 280px;
  height: 280px;
  --ring-stroke: 22px;
  filter: drop-shadow(0 0 32px var(--score-color-glow));
}
.emax-score[data-size="lg"] .num { font-size: 5.6rem; }

/* Three-digit (score = 100) — shrink number so it stays inside the ring */
.emax-score.three-digit[data-size="sm"] .num {
  font-size: 0.92rem;
  letter-spacing: -0.04em;
}
.emax-score.three-digit[data-size="md"] .num {
  font-size: 2.25rem;
  letter-spacing: -0.04em;
}
.emax-score.three-digit[data-size="lg"] .num {
  font-size: 4.4rem;
  letter-spacing: -0.04em;
}

/* ----------------------------------------------------------------------------
   Buckets — colors only. Thresholds live in JS (score.js) + Python (score_palette.py).
   ---------------------------------------------------------------------------- */
.emax-score[data-bucket="critical"] {
  --score-color: var(--score-red);
  --score-color-glow: var(--score-red-glow);
}
.emax-score[data-bucket="grow"] {
  --score-color: var(--score-orange);
  --score-color-glow: var(--score-orange-glow);
}
.emax-score[data-bucket="strong"] {
  --score-color: var(--score-green);
  --score-color-glow: var(--score-green-glow);
}

/* Excellent = brand violet with gradient ring + gradient counter + drop-shadow pulse */
.emax-score[data-bucket="excellent"] {
  --score-color: var(--score-violet);
  --score-color-glow: var(--score-violet-glow);
}
.emax-score[data-bucket="excellent"] circle.fill {
  /* References the <linearGradient id="emax-violet-gradient"> snippet
     that must be present once on the page (see emaxScoreInit). */
  stroke: url(#emax-violet-gradient);
}
.emax-score[data-bucket="excellent"] .num {
  background: linear-gradient(
    135deg,
    var(--score-violet-light) 0%,
    var(--score-violet) 50%,
    var(--score-violet-deep) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.emax-score[data-bucket="excellent"][data-size="lg"] {
  filter: drop-shadow(0 0 28px var(--score-violet-glow))
          drop-shadow(0 0 48px rgba(124, 58, 237, 0.3));
  animation: emax-excellent-pulse 2400ms var(--score-ease) infinite;
}
/* Gradient text renders white-stroke twice (inside + outside) — halve to match red */
.emax-score[data-bucket="excellent"][data-size="sm"] .num { -webkit-text-stroke-width: 0.4px; }
.emax-score[data-bucket="excellent"][data-size="md"] .num { -webkit-text-stroke-width: 0.8px; }
.emax-score[data-bucket="excellent"][data-size="lg"] .num { -webkit-text-stroke-width: 1.2px; }

@keyframes emax-excellent-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 28px var(--score-violet-glow))
            drop-shadow(0 0 48px rgba(124, 58, 237, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 36px var(--score-violet-glow))
            drop-shadow(0 0 72px rgba(167, 139, 250, 0.4));
  }
}

/* Reduced-motion: kill ring transition + excellent pulse */
@media (prefers-reduced-motion: reduce) {
  .emax-score circle.fill { transition: none; }
  .emax-score[data-bucket="excellent"][data-size="lg"] { animation: none; }
}