/* ============================================================
   revamp.css — the app skin, rebuilt to match usestandby.com EXACTLY.
   Editorial dark register: obsidian canvas + a fluid chromatic aurora,
   Newsreader display serif for headings & big numbers, Inter for UI,
   JetBrains Mono for tracked labels, ONE white-pill action, chromatic
   colour reserved for data-viz (cyan momentum / amber combo / sky XP).
   Clean flat cards — no glass blur, no neon glow. Loaded last.
   ============================================================ */

:root, :root[data-theme="dark"] {
  --bg: #0f1011;
  --bg-tint: #121316;
  --card: #0b0c0e;
  --card-solid: #0c0d10;
  --card-2: #15161a;
  --surface-2: #1b1d22;
  --well: linear-gradient(180deg, #121317, #0b0c0e);
  --well-edge: rgba(245, 245, 247, 0.10);
  --well-glow: transparent;
  --hairline: rgba(245, 245, 247, 0.09);
  --hairline-strong: rgba(245, 245, 247, 0.16);
  --highlight: rgba(245, 245, 247, 0.04);
  --fill-subtle: rgba(245, 245, 247, 0.04);
  --fill: rgba(245, 245, 247, 0.08);

  --text: #f5f7f8;     /* bone */
  --text-2: #9fa1a3;   /* frost */
  --text-3: #6a6b6b;   /* mist */
  --text-4: #46484c;

  --accent: #00b3dd;        /* cyan — the live/data accent (matches site product UI) */
  --accent-press: #0a93b5;
  --signal-bright: #34ccef;
  --blue: #90b8f0;          /* sky */
  --orange: #e6b25c;        /* amber */
  --pink: #dd90d8;          /* orchid */
  --violet: #847dff;        /* amethyst */
  --danger: #e0735c;
  --warn: #e6b25c;
  --gold: #e6b25c;
  --ring-m: #00b3dd;        /* momentum — cyan */
  --ring-c: #e6b25c;        /* combo — amber */
  --ring-x: #90b8f0;        /* call XP — sky */

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;   /* clean geometric display for app headings + metrics */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --tracking-wide: 0.16em;

  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 16px; --r-pill: 999px;
}

/* ---- type: serif headings & big numbers, weight 300 (the site's whisper register) ---- */
h1, h2, h3, .card-head h2, .rings-score, .rings-grade, .meter-value, .w-val,
.sc-grade-num, .scorecard h2, .sheet h2, .cm-score {
  font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em;
}
.card-head h2 { font-size: 1.2rem; }
.card-head h2::before { display: none; }
body { background: var(--bg); color: var(--text-2); font-family: var(--font); letter-spacing: -0.006em; }
.muted, .empty-state, .nb-text, .dim-name { color: var(--text-2); }

/* ============================================================
   AURORA — the exact fluid chromatic wash from the site, behind everything.
   ============================================================ */
.ambient, .grain { display: none; }
body { position: relative; }
body::before, body::after { content: ""; position: fixed; inset: -28%; z-index: -2; pointer-events: none; will-change: transform; }
body::before {
  background:
    radial-gradient(38% 46% at 22% 24%, rgba(132, 125, 255, 0.26), transparent 62%),
    radial-gradient(42% 42% at 82% 16%, rgba(0, 179, 221, 0.22), transparent 62%),
    radial-gradient(46% 50% at 70% 84%, rgba(144, 184, 240, 0.18), transparent 62%),
    radial-gradient(40% 46% at 24% 86%, rgba(221, 144, 216, 0.18), transparent 62%);
  filter: blur(50px); animation: app-aurora-a 26s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(40% 48% at 62% 32%, rgba(75, 73, 170, 0.22), transparent 60%),
    radial-gradient(44% 44% at 30% 62%, rgba(0, 179, 221, 0.13), transparent 60%);
  filter: blur(64px); animation: app-aurora-b 34s ease-in-out infinite alternate;
}
@keyframes app-aurora-a { 0% { transform: translate(0,0) rotate(0) scale(1); } 100% { transform: translate(-5%,4%) rotate(10deg) scale(1.14); } }
@keyframes app-aurora-b { 0% { transform: translate(0,0) rotate(0) scale(1.06); } 100% { transform: translate(6%,-4%) rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* ============================================================
   FIX: kill the momentum-wheel glow / blur entirely.
   ============================================================ */
.ring-momentum, .ring-combo, .ring-xp { filter: none !important; }
.rings-wrap::before { display: none !important; }
.score-panel::after { display: none !important; }
.rings-bloom { display: none !important; }
.rings-score {
  background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important;
  font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em;
}

/* ---- buttons: ONE white-pill action (matches the site) ---- */
.btn { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--r-pill); font-weight: 400; }
.btn-primary { background: #fff; color: #0c0d10; box-shadow: 0 14px 24px -14px rgba(0,0,0,0.7); text-shadow: none; }
.btn-primary::after { display: none; }
.btn-primary:hover { background: #f0f0f2; filter: none; transform: translateY(-1px); }
.btn-primary.is-live { background: var(--danger); color: #fff; }
.btn-secondary, .btn-ghost { background: rgba(245,245,247,0.04); border-color: var(--hairline-strong); color: var(--text); box-shadow: none; }
.btn-secondary:hover, .btn-ghost:hover { background: rgba(245,245,247,0.08); }
.btn-tertiary { background: rgba(245,245,247,0.05); color: var(--text); }
.btn-send { background: #fff; color: #0c0d10; border-radius: var(--r-md); box-shadow: none; }
.btn-dot { background: #0c0d10; }
.btn-primary.is-live .btn-dot { background: #fff; }

/* ---- mono technical labels ---- */
.field-label, .rings-label, .meter-label, .nb-label, .nb-source, .w-label,
.mic-state, .lg, .cm-label, .spark-label, .tx-who, .listen-pill .listen-text, .brand-tag, .bf-tag {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 400;
}

/* ---- clean flat cards (no glass, no glow) ---- */
.card { background: var(--card-solid); border-radius: var(--r-2xl); border-color: var(--hairline); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card::before { display: none; }
.card:hover { border-color: var(--hairline-strong); }
.score-panel { background: var(--card-solid); border-color: var(--hairline); box-shadow: none; }
.widget { background: var(--card-solid); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: none; }
.widget:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.meter { background: var(--card-solid); border-radius: var(--r-lg); border-color: var(--hairline); box-shadow: none; }
.w-val { font-family: var(--font-display); font-weight: 300; color: var(--text); }
.widget[data-tone="accent"] .w-val { color: var(--accent); }
.widget[data-tone="orange"] .w-val { color: var(--orange); }

/* ---- transcript bubbles: flat ---- */
.tx-line { box-shadow: none !important; }
.tx-line.rep { background: var(--accent); color: #06222b; }
.tx-line.rep .tx-who { color: #06222b; opacity: 0.62; }
.tx-line.prospect { background: var(--card-2); color: var(--text); }

/* ---- segmented + inputs ---- */
.segmented { background: rgba(0,0,0,0.28); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 3px; }
.segmented .mode, .segmented .spk { border-radius: var(--r-sm); }
.mode-active, .spk-active { background: var(--surface-2); box-shadow: none; }
.select, .text-input { background: rgba(0,0,0,0.24); border-color: var(--hairline); border-radius: var(--r-md); }
.select:focus, .text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,179,221,0.16); }

/* ---- dims / meters: calm, cyan ---- */
.dim-fill { box-shadow: none !important; }
.cm-fill { box-shadow: none !important; }
.spark-line { stroke: var(--accent); }
.coach-pulse.active { box-shadow: 0 0 0 3px rgba(0,179,221,0.16) !important; }

/* ---- accents ---- */
.listen-pill.on { color: var(--accent); border-color: rgba(0,179,221,0.4); }
.listen-pill.on .listen-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
/* capture available but no live call — calmer than the green 'Listening' state */
.listen-pill.ready { color: var(--text-2); border-color: rgba(0,179,221,0.22); }
.listen-pill.ready .listen-dot { background: var(--blue); }
::selection { background: #fff; color: #0c0d10; }

/* ---- brand ---- */
.app-wordmark { height: 16px; width: auto; }
.app-wordmark .brand__logo-accent { fill: var(--text); }
.app-wordmark [fill-opacity="0.5"] { fill-opacity: 1; }

/* ============================================================
   SCORING WHEEL — redesigned: a clean, sharp centred score that never
   collides with the ring, thinner rings, the grade as a quiet pill below.
   ============================================================ */
.rings-wrap { width: min(236px, 76%); }
.ring-momentum, .ring-track-m { stroke-width: 12 !important; }
.ring-combo, .ring-xp { stroke-width: 8 !important; }
.rings-center { gap: 0; padding: 0 22%; }
.rings-score {
  font-family: var(--font) !important; font-weight: 600 !important;
  font-size: 2.15rem !important; letter-spacing: -0.02em !important; line-height: 1 !important;
  font-variant-numeric: tabular-nums; background: none !important;
  -webkit-text-fill-color: var(--text) !important; color: var(--text) !important;
}
.rings-label { font-family: var(--font-mono) !important; font-size: 0.44rem !important; letter-spacing: 0.3em !important; color: var(--text-3) !important; margin-top: 7px; font-weight: 400 !important; }
.rings-grade { margin-top: 11px; font-family: var(--font-display); font-weight: 400; font-size: 0.8rem; padding: 2px 14px; border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--hairline); color: var(--text); box-shadow: none; }
/* the close-o-meter score sits on its track — keep it crisp, not serif */
.cm-score { font-family: var(--font) !important; font-weight: 600 !important; }

/* ============================================================
   ICONS — our own line-icons replace the emoji set; align them cleanly.
   ============================================================ */
.spk { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; }
.spk svg { flex: none; opacity: 0.85; }
.spk.spk-active svg { opacity: 1; }
.w-icon { color: var(--text-3); display: grid; place-items: center; opacity: 1; }
.w-icon svg { display: block; }
.widget[data-tone="accent"] .w-icon { color: var(--accent); }
.widget[data-tone="orange"] .w-icon { color: var(--orange); }
.tailor-btn { display: inline-flex; align-items: center; gap: 6px; }
.tailor-btn svg { flex: none; }
.btn.icon-text svg { flex: none; }
.widget-add svg { display: block; }