/* Общие токены и базовые элементы для экранов участника и ведущего.
   Палитра и типографика — DESIGN.md (снято со слайдов презентации). */

:root {
  /* Палитра слайдов */
  --navy: #092634;
  --navy-2: #103a50;
  --blue: #004d71;
  --paper: #f9f9f9;
  --white: #ffffff;
  --ink: #232323;
  --muted: #595959;
  --line: #e2e2e2;
  --steel: #c9d4da;
  --accent: #ff6e42;

  /* Семантика баллов: 0–1 — accent, 2 — жёлтый, 3 — зелёный */
  --score-low: var(--accent);
  --score-mid: #d9a400;
  --score-high: #2e7d5b;

  /* Текст на тёмном */
  --on-dark: #ffffff;
  --on-dark-muted: #b9c6cf;
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* Полупрозрачные подложки: заливка вариантов, бейджи, метки проверок */
  --accent-tint: rgba(255, 110, 66, 0.16);
  --blue-tint: rgba(0, 77, 113, 0.14);
  --mid-tint: rgba(217, 164, 0, 0.16);
  --high-tint: rgba(46, 125, 91, 0.16);

  /* Совместимость со старыми именами (используются точечно) */
  --good: var(--score-high);
  --warn: var(--score-mid);
  --bad: var(--accent);

  --radius: 12px;
  --radius-sm: 8px;
  --font: "Manrope", Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --tap: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--navy);
  color: var(--on-dark);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body { line-height: 1.35; }

h1, h2, h3, p { margin: 0; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--accent); }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled { cursor: default; opacity: 0.55; }

input {
  font: inherit;
  color: inherit;
}

[hidden] { display: none !important; }

.muted { color: var(--muted); }

/* Эйбров: капс с трекингом, оранжевый и на тёмном, и на светлом */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* Кнопки: основная — accent с белым текстом, вторичная — прозрачная с границей */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--steel);
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-block { width: 100%; }

/* На светлой карточке вторичная кнопка — с границей --line, текст --ink */
.card .btn:not(.btn-primary) { border-color: var(--line); color: var(--ink); }

/* Полоски распределения */
.bar {
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 4px;
  background: var(--blue);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Спиннер */
.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--steel);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}