/* ============================================================================
   Фирменный слой soloweyai поверх ui.css.

   Выбран вариант Б: рама кабинета — фирменный графит с жёлтым, рабочее полотно
   остаётся светлым. Жёлтый занимает ровно две роли — главное действие и
   активный пункт меню; статусы (зелёный, янтарный, красный) он не трогает,
   иначе исход звонка перестаёт читаться с одного взгляда.

   Токены сняты с боевого сайта soloweyai.com:
     #262A35 фон · #2F3441 поверхность · #3A404F границы
     #FFFFFF текст · #B9BFCC вторичный · #8D95A6 подписи
     #FFDD2D акцент · #262A35 текст на акценте
   Шрифты те же: Rubik (интерфейс) + IBM Plex Mono (лейблы капсом и цифры).

   ГЛАВНОЕ ПРАВИЛО ЖЁЛТОГО: он заливка, а не цвет текста. Жёлтые буквы на белом
   нечитаемы. Там, где акцент нужен именно текстом, работает --accent-ink —
   тёмная охра #6B5A10 из палитры сайта, она держит контраст 7:1.
   ========================================================================== */

:root {
  --font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --accent:#FFDD2D; --accent-hover:#FFD000; --accent-soft:#FFF7D4; --accent-text:#262A35;
  --accent-ink:#6B5A10;          /* акцент, когда он именно текст на светлом */

  /* Цвет данных: полосы, столбцы, тепловая карта. Жёлтая заливка на белом
     даёт контраст 1.34:1 — полосу прогресса на ней просто не видно, поэтому
     данные рисуем графитом, а жёлтый оставляем действию. На тёмной теме
     всё наоборот: там графит сливается с фоном, а чистый жёлтый читается.
     На светлом берём густое золото #A87E00 — это та же жёлтая семья, но
     3.7:1 к белому, то есть полосу видно (WCAG 1.4.11 требует 3:1). */
  --data:#A87E00;

  /* Шкала аналитики остаётся жёлтой в обеих темах: воронка и тепловая карта —
     сплошные заливки без текста внутри, контраст букв им не нужен, зато
     фирменное пятно на странице сохраняется. Полос прогресса это не касается:
     они тонкие, и жёлтым их не видно. */
  --heat:#FFDD2D;

  /* Тёплая карточка для денежных блоков: бледно-жёлтая заливка вместо белой.
     Деньги — единственное, что клиент ищет на странице глазами, пусть блок
     будет тёплым пятном. */
  --warm-line:#F0DFA4;

  /* Рама: одинакова в обеих темах — это и есть узнаваемость. */
  --chrome:#262A35; --chrome-2:#2F3441; --chrome-line:#3A404F;
  --chrome-fg:#FFFFFF; --chrome-dim:#B9BFCC; --chrome-mute:#8D95A6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent-soft:#3A3312; --accent-ink:#FFDD2D;
                                   --data:#FFDD2D; --warm-line:#5A4E17; }
}
:root[data-theme="dark"] { --accent-soft:#3A3312; --accent-ink:#FFDD2D; --data:#FFDD2D;
                           --warm-line:#5A4E17; }

/* --- Типографика бренда ------------------------------------------------- */
h1, h2, h3 { font-weight: 500; }
h1 { letter-spacing: -.04em; }
h2 { letter-spacing: -.03em; }
/* Надзаголовок капсом в моно — фирменный приём сайта. */
.tile__label, .sidebar__group, .table th {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .14em; font-size: 10px; font-weight: 500;
}
/* Цифры моноширинные: суммы и минуты выстраиваются по разрядам. */
.tile__value, .hero__value, .num { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.hero__value, .tile__value { font-weight: 500; letter-spacing: -.03em; }

/* --- Знак: соловей с сайта ---------------------------------------------- */
.sidebar__mark {
  background: none; background-image: none; border-radius: 0;
  width: 30px; height: 30px; color: var(--accent);
}
.mark__bird { width: 30px; height: 30px; display: block; }
.sidebar__brand { gap: 9px; font-weight: 500; letter-spacing: -.01em; }

/* --- Акцент текстом: только тёмной охрой -------------------------------- */
.step__n, .chip--on, .chip--on .chip__n, .tipbtn { color: var(--accent-ink); }
.tipbtn { font-weight: 550; text-decoration: underline; text-underline-offset: 3px;
          text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.tipbtn:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* --- Рама: боковое меню -------------------------------------------------- */
.sidebar { background: var(--chrome); border-right-color: var(--chrome-line); color: var(--chrome-fg); }
.sidebar__brand { color: var(--chrome-fg); border-bottom-color: var(--chrome-line); }
.sidebar__group { color: var(--chrome-mute); }
.navlink { color: var(--chrome-dim); }
.navlink:hover { background: var(--chrome-2); color: var(--chrome-fg); }
.navlink[aria-current="page"] { background: var(--chrome-2); color: var(--accent); }
.navlink[aria-current="page"]::before { background: var(--accent); }
.sidebar__foot { border-top-color: var(--chrome-line); }
.who__name { color: var(--chrome-fg); }
.who__org { color: var(--chrome-mute); }
.who__av { background: var(--chrome-2); color: var(--accent); }
.sidebar .btn--ghost { color: var(--chrome-dim); }
.sidebar .btn--ghost:hover { background: var(--chrome-2); color: var(--chrome-fg); }

/* --- Рама: верхняя панель ------------------------------------------------ */
.topbar { background: var(--chrome); color: var(--chrome-fg); border-bottom-color: var(--chrome-line); }
.topbar .iconbtn { color: var(--chrome-dim); }
.topbar .iconbtn:hover { background: var(--chrome-2); color: var(--chrome-fg); }
.topsearch { background: var(--chrome-2); border-color: var(--chrome-line); color: var(--chrome-fg); }
.topsearch input { color: var(--chrome-fg); }
.topsearch input::placeholder { color: var(--chrome-mute); }
.topsearch:focus-within { border-color: var(--accent); }
.topbar .btn--sec { background: var(--chrome-2); color: var(--chrome-fg); border-color: var(--chrome-line); }
.topbar .btn--sec:hover { background: var(--chrome-line); }

/* --- Кнопки-пилюли, как на сайте ---------------------------------------- */
.btn { border-radius: var(--r-pill); font-weight: 500; }

/* --- Проценты ------------------------------------------------------------
   Знак процента мельче и тише самого числа: читается число, а «%» только
   поясняет единицу. Тонкий отбив не даёт цифре слипнуться со знаком. */
.pct { font-size: .78em; color: var(--text-3); margin-left: .12em; font-weight: 400; }
.tile__value .pct, .hero__value .pct { color: var(--text-2); }

/* --- Обязательные поля ---------------------------------------------------
   Звёздочка — знак для посвящённых: мелкая, красная, ничего не объясняет.
   Пишем словом и держим приглушённым, чтобы не спорило с заголовком поля. */
.req {
  font-family: var(--font); font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 2px 8px; margin-left: 8px; vertical-align: 2px;
}

/* Знак на экранах без рамы (вход, согласие, ссылка на запись): там фон
   тёмный, поэтому соловей жёлтый — как в шапке сайта. */
.auth__mark { color: var(--accent); display: inline-flex; }
.auth__brand { font-weight: 500; letter-spacing: -.01em; }

/* --- Данные рисуем цветом данных, а не акцентом ------------------------- */
.bar__fill { background: var(--data); }
.empty__ico, .empty__art { color: var(--accent-ink); }

/* --- Фокус и активные рамки ----------------------------------------------
   Жёлтая обводка на белом — 1.34:1, то есть её нет. Рамку фокуса рисуем
   охрой: она и видна, и остаётся жёлтой по смыслу. В тёмной раме
   (верхний поиск) наоборот — там фон графитовый, и жёлтый читается.  */
:focus-visible,
.rcard:focus-visible,
.result:focus-visible { outline-color: var(--accent-ink); }
.input:focus, .select:focus, .textarea:focus,
.repeat__row.is-over,
.searchbox__form:focus-within { border-color: var(--accent-ink); }
/* Клетка тепловой карты сама жёлтая — обводку по ней даём графитом. */
.heat__cell:hover { outline-color: var(--text); }
.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 18%, transparent);
}


/* --- Фирменная линия важного блока ---------------------------------------
   Была сине-фиолетовой от прежнего акцента — теперь жёлтая с уходом в золото. */
.card--accent::before, .tile--accent::before {
  background: linear-gradient(90deg, var(--accent), var(--data) 55%, transparent);
}

/* --- Тёплый блок: деньги -------------------------------------------------- */
.card--warm { background: var(--accent-soft); border-color: var(--warm-line); }
.card--warm .tile__hint, .card--warm .hint { color: var(--accent-ink); opacity: .85; }
.card--warm .btn--sec { background: transparent; border-color: var(--warm-line); }
.card--warm .btn--sec:hover { background: rgba(0,0,0,.05); }

/* --- Рельс доли: тонкая шкала под показателем ---------------------------- */
.rail { height: 4px; border-radius: 999px; background: var(--surface-2); margin-top: 10px;
        overflow: hidden; }
.rail__fill { height: 100%; background: var(--data); border-radius: inherit; }