/* DetoxScore™ shared gauge + tier styles
 * Light-mode brand surface · Three-tier surface contrast system.
 * Locked May 18, 2026 (gauge instrument + tier ranges); surface system added in subsequent commit.
 */

:root {
  /* Three-tier surface system (darker-than-page card hierarchy).
   * page → card → inset, each step darker. Cards sit INTO the page,
   * not floating above it; shadows stay subtle. */
  --ds-bg: #F4F5F7;                       /* page bg — lightest tier */
  --ds-card-bg: #ECEEF1;                  /* primary cards — one step darker than page */
  --ds-inset-bg: rgba(0,0,0,0.03);        /* inset / secondary panels inside cards — one more step darker */
  --ds-card-border: rgba(0,0,0,0.08);
  --ds-inset-border: rgba(0,0,0,0.06);
  --ds-card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);

  /* Ambient gradient (kept subtle, on page bg) */
  --ds-ambient: radial-gradient(ellipse at 50% 25%, rgba(2,132,199,0.06), transparent 55%);

  /* Brand accent — reserved for: wordmark "Score", DetoxScale™ callouts,
     "73 out of 88" hero callout, primary CTAs, gauge hub center dot. */
  --ds-accent: #0284C7;

  /* Typography hierarchy */
  --ds-text: #000000;                     /* headlines, pure black */
  --ds-text-body: rgba(0,0,0,0.78);       /* body copy */
  --ds-text-2: rgba(0,0,0,0.55);          /* tertiary labels, mono section labels, supporting metadata */
  --ds-text-3: rgba(0,0,0,0.45);          /* very faint metadata (timestamps, dim helper text) */

  /* RAG (light surfaces — gauge arc + glow underlayer + score numbers) */
  --ds-rag-green: #16A34A;
  --ds-rag-yellow: #E5B800;          /* deeper pure yellow, NOT gold/amber */
  --ds-rag-red: #DC2626;
  /* Score-number alias (kept equal to --ds-rag-yellow). */
  --ds-score-yellow: #E5B800;

  /* RAG (dark — for use inside the .ds-score-card charcoal wrapper) */
  --ds-rag-green-dark: #34D399;
  --ds-rag-yellow-dark: #FFCC00;     /* pure bright yellow on black */
  --ds-rag-red-dark: #FF4444;

  /* Input borders */
  --ds-input-border: rgba(0,0,0,0.12);
}

/* Brand wordmark — Detox near-black, Score deeper sky-blue. NEVER override. */
.ds-wordmark { font-weight: 500; letter-spacing: -0.01em; }
.ds-wordmark .ds-w-detox { color: var(--ds-text); }
.ds-wordmark .ds-w-score { color: var(--ds-accent); }

/* Tier color classes — applied to score numbers and labels. */
.tier-precision, .tier-low { color: var(--ds-rag-green); }
.tier-moderate { color: var(--ds-score-yellow); }
.tier-high { color: var(--ds-rag-red); }

/* Softened pulse — light-bg friendly (1 ↔ 1.08 instead of 1.15). */
@keyframes ds-pulseRed {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}
.tier-high.ds-pulse { animation: ds-pulseRed 2.6s 1s infinite ease-in-out; }

/* Helper card — uses inset surface treatment (one step darker than card). */
.ds-helper-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--ds-inset-bg);
  border: 1px solid var(--ds-inset-border);
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 420px;
  margin: 1rem auto 0;
}
.ds-helper-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; font-size: 14px; line-height: 1;
  flex-shrink: 0;
}
.ds-helper-icon.tier-precision, .ds-helper-icon.tier-low {
  background: rgba(22,163,74,0.10);
  color: var(--ds-rag-green);
  border: 1px solid rgba(22,163,74,0.30);
}
.ds-helper-icon.tier-moderate {
  background: rgba(229,184,0,0.12);
  color: var(--ds-score-yellow);
  border: 1px solid rgba(229,184,0,0.40);
}
.ds-helper-icon.tier-high {
  background: rgba(220,38,38,0.10);
  color: var(--ds-rag-red);
  border: 1px solid rgba(220,38,38,0.30);
}
.ds-helper-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ds-text);
  text-align: left;
}

/* Gauge container — 220px design size, FLUID below it. A fixed 220px box
 * cannot shrink when the card gets narrower than 220 (small phones, zoom):
 * margin:auto resolves to 0, the box pins left and overflows right, and the
 * gauge lands right of center. width:100% + max-width keeps the locked look
 * everywhere it fits and shrinks gracefully where it doesn't. */
.ds-gauge-wrap {
  width: 100%;
  max-width: 220px;
  min-width: 0;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* SVG follows the wrap exactly: fluid width, ratio-preserving height.
 * min-width:0 is load-bearing — without it the SVG's intrinsic width wins
 * inside flex/grid parents and it overflows instead of shrinking. */
.ds-gauge-wrap svg {
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  display: block;
  margin: 0 auto;
}
.ds-gauge-subtitle {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ds-text-2);
  text-align: center;
  margin-top: 0.5rem;
}

/* ─── Charcoal score card ──────────────────────────────────────────
 * Used wherever the score widget is displayed: landing demo, quiz
 * reveal, paywall hero, dashboard score-hero, certified gauge block.
 * Everything inside flips to dark-mode treatments via the nested
 * selectors below — pass theme:'dark' to DetoxGauge.buildGaugeSVG so
 * the gauge matches. */
.ds-score-card {
  background: linear-gradient(180deg, #121216 0%, #0A0A0A 45%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 48px rgba(0,0,0,0.20),
    0 4px 12px rgba(0,0,0,0.10);
  padding: 48px;
  color: #FFFFFF;
  text-align: center;
}
@media (min-width: 720px) {
  .ds-score-card { padding: 56px 64px; }
}

/* Wordmark — bright sky-blue on dark */
.ds-score-card .ds-wordmark .ds-w-detox { color: #FFFFFF; }
.ds-score-card .ds-wordmark .ds-w-score { color: #38BDF8; }

/* Subtitle ("YOUR TOXIC BURDEN") + supporting labels */
.ds-score-card .ds-gauge-subtitle { color: rgba(255,255,255,0.55); }
.ds-score-card .ds-helper-text   { color: #FFFFFF; }

/* Tier-coded text (score number, tier label) — use BRIGHT dark palette */
.ds-score-card .tier-precision,
.ds-score-card .tier-low      { color: var(--ds-rag-green-dark)  !important; }
.ds-score-card .tier-moderate { color: var(--ds-rag-yellow-dark) !important; }
.ds-score-card .tier-high     { color: var(--ds-rag-red-dark)    !important; }

/* Pulse animation (red) — softened a touch more on charcoal */
.ds-score-card .tier-high.ds-pulse {
  animation: ds-pulseRed 2.6s 1s infinite ease-in-out;
}

/* Helper on charcoal — de-boxed: quiet icon + text directly on the card.
 * The CTA below is the only boxed element, so the box means "press me". */
.ds-score-card .ds-helper-card {
  background: transparent;
  border: none;
  padding: 6px 0 0;
  margin-top: 1rem;
  justify-content: center;
}
.ds-score-card .ds-helper-text {
  color: rgba(255,255,255,0.82);
  /* Shrinkable: on narrow phones the icon+text row must fit the card,
   * otherwise centered overflow clips the icon left and the text right. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;
}

/* Primary CTA on charcoal — solid white, the one unmistakable action.
 * Nested radius rule: card 24px − 12px visual gap = 12px. */
.ds-score-card .ds-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 0.9rem 1rem;
  background: #FFFFFF;
  color: #0A0A0A;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 1.125rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ds-score-card .ds-cta .ds-cta-arrow { transition: transform 0.18s ease; }
.ds-score-card .ds-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.12);
}
.ds-score-card .ds-cta:hover .ds-cta-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .ds-score-card .ds-cta, .ds-score-card .ds-cta .ds-cta-arrow { transition: none; }
  .ds-score-card .ds-cta:hover { transform: none; }
}
.ds-score-card .ds-helper-icon.tier-precision,
.ds-score-card .ds-helper-icon.tier-low {
  background: rgba(52,211,153,0.12);
  color: var(--ds-rag-green-dark);
  border-color: rgba(52,211,153,0.30);
}
.ds-score-card .ds-helper-icon.tier-moderate {
  background: rgba(255,204,0,0.12);
  color: var(--ds-rag-yellow-dark);
  border-color: rgba(255,204,0,0.40);
}
.ds-score-card .ds-helper-icon.tier-high {
  background: rgba(255,68,68,0.12);
  color: var(--ds-rag-red-dark);
  border-color: rgba(255,68,68,0.30);
}

/* Tier pill badge inside the charcoal card. Use the .ds-tier-pill class
 * and a tier modifier (e.g. .ds-tier-pill--moderate) to apply the right tint. */
.ds-score-card .ds-tier-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 20px;
  border: 1px solid currentColor;
}
.ds-score-card .ds-tier-pill--precision,
.ds-score-card .ds-tier-pill--low      { color: var(--ds-rag-green-dark);  background: rgba(52,211,153,0.12); }
.ds-score-card .ds-tier-pill--moderate { color: var(--ds-rag-yellow-dark); background: rgba(255,204,0,0.12); }
.ds-score-card .ds-tier-pill--high     { color: var(--ds-rag-red-dark);    background: rgba(255,68,68,0.12); }