/* Golos Text (OFL, ParaType) — вариативный, self-hosted: webfonts/. Кириллица + латиница,
     остальное падает в системный стек. Не npm-зависимость — статический ассет, как uPlot. */
  @font-face {
    font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(fonts/golos-cyrillic.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(fonts/golos-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
  }
  /* Lora (OFL, Cyreal) — вариативный, self-hosted: webfonts/. Только редакционные
     заголовки публичной витрины; интерфейс, формы и числа остаются на Golos Text.
     Те же два субсета, что у Golos: кириллица + латиница, остальное падает в системный serif. */
  @font-face {
    font-family: "Lora"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url(fonts/lora-cyrillic.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "Lora"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url(fonts/lora-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
  }
  :root {
    color-scheme: light;
    /* светлая тема — «спокойный агентский дашборд»: графитово-синий бренд, один акцент, воздух */
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #eef1f6;     /* шапки таблиц, вторые планы */
    --fg: #101828;
    --muted: #5b6472;         /* 4.5:1+ на белом и на --surface-2 */
    --border: #e3e7ee;
    --brand: #14213d;         /* шапка/бренд */
    --brand-fg: #f5f7fb;
    --brand-muted: #aab6d3;
    --accent: #2f6bdb;
    --accent-soft: #e8effc;
    --accent-strong: #1e3a8a;
    /* текст НА акцентной заливке. В тёмной теме акцент светлеет (#6b9aef), и белый на нём
       даёт 2.8:1 — поэтому там подпись тёмная, а не «белая как в светлой». */
    --accent-fg: #ffffff;
    --success: #15803d;       /* green-700: 4.5:1 на белом */
    --success-soft: #e6f6ec;
    --success-strong: #14532d;
    --warn: #b45309;
    --warn-soft: #fdf3e1;
    --warn-strong: #78350f;
    --danger: #dc2626;
    --danger-soft: #fdeaea;
    --danger-strong: #991b1b;
    --focus-ring: #1d4ed8;
    --r-sm: 8px; --r-md: 12px;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-2: 0 4px 12px rgba(16, 24, 40, .07);
    /* совместимость со старым именем токена */
    --primary: var(--accent);
  }
  * { box-sizing: border-box; }
  body {
    font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0; background: var(--bg); color: var(--fg);
    line-height: 1.5;
  }
  a { color: var(--accent); }
  :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
  header { background: var(--brand); color: var(--brand-fg); padding: 10px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  main { max-width: 1100px; margin: 0 auto; padding: 24px; }
  h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
  h2 { font-size: 16px; color: var(--accent); margin: 28px 0 10px; }
  h3 { font-size: 15px; margin: 18px 0 8px; }
  .muted { color: var(--muted); font-size: 13px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-1); transition: border-color .15s ease, box-shadow .15s ease; }
  .card a { text-decoration: none; color: inherit; display: block; }
  /* Карточка-ссылка (список клиентов) кликабельна целиком — но выглядела статичной */
  .card:has(a):hover, .card:focus-within { border-color: var(--accent); box-shadow: var(--shadow-2); }
  .metric { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
  .metric b { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .card .src { color: var(--muted); font-size: 12px; margin-top: 6px; }
  .feed { list-style: none; padding: 0; margin: 0; }
  .feed li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 8px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
  .feed li.bad { border-color: var(--danger); background: var(--danger-soft); }
  .day { color: var(--fg); font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
  .delta-up { color: var(--success); font-weight: 600; }
  .delta-down { color: var(--danger); font-weight: 600; }
  /* Дельта-чип: цвет плюс мягкий фон — заметнее голого текста, но не кричит */
  .delta-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  .delta-chip.up { color: var(--success-strong); background: var(--success-soft); }
  .delta-chip.down { color: var(--danger-strong); background: var(--danger-soft); }
  /* Легенда графика — вне SVG: цветная плашка плюс подпись словами (цвет один смысла не несёт) */
  .ch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
  .ch-key { display: inline-flex; align-items: center; gap: 6px; }
  .ch-key i { width: 12px; height: 3px; border-radius: 2px; }
  .empty { color: var(--muted); padding: 28px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
  .empty .src { margin-top: 8px; font-size: 12px; }
  /* Пустота ВНУТРИ таблицы — не карточка: рамка и тень внутри ячейки выглядели вложенным
     блоком-в-блоке. Тот же текст, но без корпуса. */
  td.empty-cell { color: var(--muted); text-align: center; padding: 24px 16px; }
  td.empty-cell .src { display: block; margin-top: 6px; font-size: 12px; }
  /* Сообщение операции (сохранение статуса, ошибка формы) — рядом с действием, а не в alert() */
  .note { font-size: 14px; margin: 8px 0 0; }
  ul.plain { padding-left: 20px; margin: 6px 0; }
  .wrap-anywhere { overflow-wrap: anywhere; }
  .nowrap { white-space: nowrap; }
  /* подпись только для скринридера: у select есть видимый первый пункт («все биржи»),
     но безымянный select читается как «список» без указания, чего именно */
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mt-8 { margin-top: 8px; }
  .data-summary { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
  .data-summary b { color: var(--fg); font-size: 16px; font-variant-numeric: tabular-nums; }
  /* заголовок внутри карточки не отбивается сверху — рамка карточки уже отделяет блок */
  .card h2 { margin-top: 0; }
  /* карточка с текстом, а не с цифрой: ширина по читаемой строке */
  .card-prose { max-width: 68ch; }
  .steps { margin: 8px 0; padding-left: 22px; line-height: 1.9; }
  /* Кнопки статуса в карточке канбана: переносятся строкой, не прижимаются друг к другу */
  .opp-actions .btn { margin: 6px 6px 0 0; }
  /* Рабочая очередь — максимум две колонки: обязательства в работе и следующие задачи.
     Завершённое — история ниже, а не третья колонка, которая растягивала страницу при пустой очереди. */
  .work-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; align-items: start; margin: 16px 0; }
  .work-board h2 { margin-top: 0; }
  .work-board .card { margin-bottom: 10px; }
  .history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 10px 0 18px; }
  .history-grid .card { margin: 0; }
  /* Длинные справки не стоят между заголовком и данными: раскрываются по запросу. */
  .context-details { margin: 8px 0 14px; }
  .context-details > summary { color: var(--accent); font-weight: 600; }
  .context-details .legend, .context-details .plain { margin-top: 6px; }
  /* Широкая таблица (матрица ИИ-видимости) не помещается в телефон и планшет:
     строка становится карточкой, подписи берутся из data-label — иначе вердикты
     остались бы значениями без контекста. */
  @media (max-width: 900px) {
    .work-board { grid-template-columns: 1fr; }
    .opps, .opps tbody, .opps tr, .opps td { display: block; width: 100%; }
    .opps thead { display: none; }
    .opps tr { border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 10px; padding: 10px 12px; background: var(--surface); }
    .opps tbody tr:nth-child(even) td, .opps tbody tr:hover td { background: var(--surface); }
    .opps td { border: 0; padding: 3px 0; }
    .opps td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
    /* вопрос — заголовок карточки, движки — строки «название: вердикт» */
    .aivis td.q { padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
    .aivis td.q::before { content: none; }
  }
  @media (max-width: 640px) { main { padding: 16px; } header { padding: 8px 16px; } h1 { font-size: 20px; } }
  /* Палец — не курсор: на телефоне у всего интерактивного минимум 44px по высоте (Apple HIG). */
  @media (pointer: coarse) {
    .btn, summary { min-height: 44px; }
    summary { padding-top: 11px; padding-bottom: 11px; }
    .mform input, .mform select, .qfilter input, .qfilter button, .qfilter select { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }