/**
 * RFH — дизайн-система: токены, база, утилиты.
 *
 * Стили разложены по файлам, каждый — не длиннее ~400 строк. Порядок
 * подключения задан в index.html и важен: base → stars → controls → shell →
 * dock → файлы вкладок. Один файл вкладки соответствует одному
 * js/<вкладка>.js — ищешь стиль карточки пака, открываешь css/cards.css
 * рядом с js/cards.js.
 *
 * Тема одна: фиолетовая по чёрному, с живым звёздным небом под содержимым
 * (css/stars.css). Поверхности поэтому полупрозрачные — сквозь них видно
 * фон, и панель не выглядит наклейкой поверх картинки.
 *
 * Плотность выкручена намеренно: панель показывает одиннадцать аккаунтов,
 * пять циклов и два десятка заданий разом, и каждый лишний пиксель отступа
 * стоит одной видимой строки. Шрифты только системные — CSP в
 * deploy/nginx-front.conf запрещает всё внешнее.
 */

:root {
  color-scheme: dark;

  /* Поверхности. Чёрный с фиолетовым подмесом; ступени полупрозрачные,
     чтобы звёзды просвечивали, но текст оставался читаемым. */
  --bg:     #06050b;
  --bg-1:   rgba(19, 16, 34, .72);
  --bg-2:   rgba(28, 23, 48, .78);
  --bg-3:   rgba(39, 32, 66, .85);
  --solid-1: #100d1d;
  --solid-2: #171331;
  --line:   rgba(124, 92, 214, .18);
  --line-2: rgba(139, 111, 224, .34);

  --text:      #ece9f8;
  --text-dim:  #a9a0cc;
  --text-mute: #7e75a6;

  /* Акцент — фиолетовый. Заливка идёт от светлого к глубокому: белый текст
     держит контраст только на тёмной половине градиента. */
  --accent:      #a855f7;
  --accent-hi:   #c79bff;
  --accent-2:    #7c3aed;
  --accent-dim:  rgba(168, 85, 247, .14);
  --accent-line: rgba(168, 85, 247, .45);
  --on-accent:   #fff;

  --ok:        #34d399;
  --ok-dim:    rgba(52, 211, 153, .13);
  --ok-line:   rgba(52, 211, 153, .36);
  --warn:      #fbbf24;
  --warn-dim:  rgba(251, 191, 36, .13);
  --warn-line: rgba(251, 191, 36, .36);
  --err:       #fb7185;
  --err-dim:   rgba(251, 113, 133, .13);
  --err-line:  rgba(251, 113, 133, .36);
  --info:      #38bdf8;
  --info-dim:  rgba(56, 189, 248, .13);
  --info-line: rgba(56, 189, 248, .36);

  /* Шкала отступов — плотная, только эти значения. */
  --s1: 3px;  --s2: 6px;  --s3: 10px;
  --s4: 14px; --s5: 20px; --s6: 28px;

  --r-sm: 6px; --r: 9px; --r-lg: 14px; --r-pill: 999px;

  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Inter,
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", SFMono-Regular, "JetBrains Mono", Consolas, monospace;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-3: 0 30px 90px rgba(0, 0, 0, .7);
  --glow: 0 0 18px rgba(168, 85, 247, .35);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, .05);

  --dur: .15s;
  --ease: cubic-bezier(.32, .72, .35, 1);
}

/* ── База ─────────────────────────────────────────────────────────────── */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 12.5px/1.45 var(--sans);
  /* Цифр в панели больше, чем букв: моноширинные не дают колонкам дёргаться
     при каждом обновлении балансов. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h2 { font-size: 16px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
h3 { font-size: 11px; font-weight: 600; margin: 0; }
p  { margin: 0 0 var(--s2); }
b, strong { font-weight: 640; }

code {
  font: 500 11px/1 var(--mono);
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--accent-hi);
}

a, .link {
  color: var(--accent-hi);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-line);
  cursor: pointer;
}
a:hover, .link:hover { color: #fff; border-bottom-style: solid; }

:where(button, a, [tabindex], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

::selection { background: rgba(168, 85, 247, .35); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: #3b3164 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #332a56;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #4c3f7d; background-clip: content-box; }

/* ── Утилиты ──────────────────────────────────────────────────────────── */

.hidden { display: none !important; }
.muted  { color: var(--text-dim); font-size: 11.5px; }
p.muted { max-width: 90ch; line-height: 1.5; }
.warn   { color: var(--warn); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: var(--s2) 0;
}

/* Заголовок раздела — капслок-метка с линией до правого края: разделы видно,
   не читая слов. */
.sub-h {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s4) 0 var(--s2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.sub-h::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
}
.sub-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.stub {
  padding: var(--s4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  color: var(--text-dim);
  text-align: center;
  font-size: 12px;
  background: rgba(255, 255, 255, .015);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s2);
  font-size: 10.5px;
  color: var(--text-mute);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* Точка состояния: живёт в легендах календаря и графика — общая. */
.adv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.adv-dot.done   { background: var(--ok); }
.adv-dot.today  { background: var(--accent); }
.adv-dot.lost   { background: var(--err); }
.adv-dot.future { background: var(--text-mute); }

/* Анимации — украшение, а не смысл: кому они мешают, тот их не увидит. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}