/* ============================================================
   CONSIGLIERE · «Опал»
   Язык вида принят 18 августа 2026, сменил «Кабинет». Микс трёх
   языков с разделением ролей по слоям:
     · стекло — только фон: свечение живёт ПОД интерфейсом;
     · лист — несущая структура: плотная карточка, число как герой;
     · пастель — семантика: мягкая плашка, но плотная цифра внутри.

   Закон, который держит микс: чем важнее элемент, тем он
   непрозрачнее. Свечение размыто до неузнаваемости, карточка почти
   сплошная, число — плотный цвет. Нарушить порядок — язык съедет
   в глянцевый шум.

   Приёмы, которые дают ощущение вещи (каждый — свойство того, что
   уже есть, ни один не добавляет элементов на экран):
     · материал вместо заливки — blur + saturate;
     · кант вместо тени — светлая линия по верхнему ребру;
     · вложенные радиусы — внешний = внутренний + отступ;
     · волосяная линия 0.5px в таблицах;
     · крупная цифра легче по весу и плотнее по трекингу;
     · пружина без отскока на всех переходах.

   Две темы: paper (день) и cabinet (ночь). Ночь — не инверсия дня:
   свечение усиливается и несёт глубину, карточки прозрачнее,
   семантика светлеет.
   ============================================================ */

/* ---------- Слой значений ---------- */

:root,
[data-theme="cabinet"] {
  --ground:      #0A0A11;
  --surface:     rgba(255, 255, 255, 0.055);
  --surface-solid:#14141C;
  --raised:      rgba(255, 255, 255, 0.085);
  --sunken:      rgba(255, 255, 255, 0.04);
  --line:        rgba(255, 255, 255, 0.10);
  --line-soft:   rgba(255, 255, 255, 0.06);
  --hair:        rgba(255, 255, 255, 0.10);

  --text:        #EDEDF5;
  --text-2:      #A6A7BC;
  --text-3:      #75768C;
  --text-4:      #55566B;

  --accent:      #8B87F5;
  --accent-dim:  #5B57C7;
  --accent-soft: rgba(139, 135, 245, 0.14);

  --loss:        #FF8497;
  --loss-soft:   rgba(240, 104, 126, 0.14);
  --loss-bar:    #E8556E;
  --gain:        #48D8B8;
  --gain-soft:   rgba(72, 216, 184, 0.13);
  --gain-bar:    #2FB899;

  --bar:         rgba(255, 255, 255, 0.07);
  --bar-now:     var(--accent);
  --fig-total:   #9B97F0;
  --ser-1: #6366F1;
  --ser-2: #DB2777;
  --ser-3: #B45309;
  --ser-4: #0E9384;
  --ser-5: #2563EB;
  --grid:        rgba(255, 255, 255, 0.07);

  --specular:    rgba(255, 255, 255, 0.14);
  --mark-ink:    rgba(255, 255, 255, 0.13);
  --shadow:      0 1px 2px rgba(0,0,0,.40), 0 12px 30px rgba(0,0,0,.30);
  --shadow-hi:   0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.38);

  --glow-1:      #6366F1;
  --glow-2:      #14B8A6;
  --glow-3:      #F43F5E;
  --glow-o1:     .26;
  --glow-o2:     .20;
  --glow-o3:     .14;

  color-scheme: dark;
}

[data-theme="paper"] {
  --ground:      #F6F7FB;
  --surface:     rgba(255, 255, 255, 0.88);
  --surface-solid:#FFFFFF;
  --raised:      #FFFFFF;
  --sunken:      rgba(20, 20, 40, 0.04);
  --line:        rgba(255, 255, 255, 0.72);
  --line-soft:   rgba(20, 20, 40, 0.07);
  --hair:        rgba(20, 20, 45, 0.10);

  --text:        #14141C;
  --text-2:      #55566B;
  --text-3:      #8A8B9E;
  --text-4:      #A9AAB9;

  --accent:      #4F46E5;
  --accent-dim:  #8B87F5;
  --accent-soft: rgba(79, 70, 229, 0.09);

  --loss:        #D02F45;
  --loss-soft:   #FFF0F3;
  --loss-bar:    #F0687E;
  --gain:        #0E9384;
  --gain-soft:   #EBFBF6;
  --gain-bar:    #4FBFA8;

  --bar:         rgba(20, 20, 40, 0.06);
  --bar-now:     var(--accent);
  --fig-total:   #6F6BC4;
  --ser-1: #6366F1;
  --ser-2: #DB2777;
  --ser-3: #B45309;
  --ser-4: #0E9384;
  --ser-5: #2563EB;
  --grid:        rgba(20, 20, 40, 0.07);

  --specular:    rgba(255, 255, 255, 0.90);
  --mark-ink:    rgba(20, 20, 45, 0.11);
  --shadow:      0 1px 2px rgba(20,20,45,.05), 0 10px 26px rgba(20,20,45,.07);
  --shadow-hi:   0 2px 4px rgba(20,20,45,.06), 0 16px 38px rgba(20,20,45,.10);

  --glow-1:      #6366F1;
  --glow-2:      #14B8A6;
  --glow-3:      #F43F5E;
  --glow-o1:     .15;
  --glow-o2:     .12;
  --glow-o3:     .09;

  color-scheme: light;
}

:root {
  /* Гротеск везде, включая числа: засечки в цифре читаются как
     бухгалтерская книга, а не как прибор. Имя --serif сохранено, чтобы
     не переписывать разметку, но ведёт на тот же стек. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, ui-sans-serif, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Латунь ушла, имя осталось алиасом: старые места продолжают работать
     и переезжают на акцент сами. Вычищается по мере правок. */
  --brass:      var(--accent);
  --brass-dim:  var(--accent-dim);
  --brass-soft: var(--accent-soft);

  /* Шкала кегля 1.25 от 15px. Значений семь, больше не заводим. */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 26px;
  --t-3xl: 32px;

  /* Четыре ступени отступа и их половина для тесных мест. */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 26px;
  --s-4: 40px;

  /* Радиусы концентричны: вложенный = внешний − отступ. */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --rail: 236px;

  --spring: cubic-bezier(.32, .72, 0, 1);
  --material: blur(22px) saturate(180%);
}

/* ---------- Основа ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "kern" 1;
  position: relative;
}

/* Свечение — самый нижний слой языка. Оно живёт ПОД интерфейсом и
   размыто до неузнаваемости: цвет чувствуется, пятна не читаются.
   fixed, чтобы длинная страница не тащила пятна за собой. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(360px 360px at 4% -8%,   var(--glow-1) 0%, transparent 70%),
    radial-gradient(320px 320px at 98% 106%, var(--glow-2) 0%, transparent 70%),
    radial-gradient(260px 260px at 88% 4%,   var(--glow-3) 0%, transparent 72%);
  opacity: var(--glow-o1);
  filter: blur(28px);
}
/* Всё содержимое лежит над свечением. */
body > * { position: relative; z-index: 1; }

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--text); }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

::selection { background: var(--brass-soft); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

.num, .ts { font-variant-numeric: tabular-nums; }
.small { font-size: var(--t-sm); color: var(--text-3); }
.meta { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.sep { color: var(--text-4); }

/* Надзаголовок раздела: единственный капслок в продукте */
.eyebrow,
.report-eyebrow,
.drawer-eyebrow,
.bc-title,
.accounting-header h2 {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Оболочка ---------- */

/* Оболочка: борт появляется не на всех экранах, поэтому колонку под него
   резервируем только когда он действительно есть. */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;   /* иначе площадь не дотягивается до низа окна */
  min-height: 100vh;
}
.app.has-sidebar { grid-template-columns: var(--rail) 1fr; }

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Обёртки экранов между площадью и содержимым: без них строка вопроса
   зависает посреди пустоты — площадь кончается там, где кончился текст. */
.chat-screen, .report-screen, .accounting-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.app-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; color: var(--text-3); font-size: var(--t-md);
}

.content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Борт */
.sidebar {
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
  background: var(--surface-solid);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-brand {
  padding: var(--s-3) var(--s-3) var(--s-2);
  font-family: var(--serif);
  font-size: var(--t-xl);
  letter-spacing: 0.01em;
  color: var(--text);
}
/* Имя клиента — имя, не рубрика: капс тут кричит и съедает регистр. */
.sidebar-brand span {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--text-3);
}

.sidebar-nav { padding: var(--s-1) 14px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-group {
  margin: var(--s-2) var(--s-3) 6px;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-4);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 14px;
  text-align: left;
  width: 100%;
}
.sidebar-item:hover { background: var(--raised); color: var(--text); }
.sidebar-item.active {
  background: var(--raised);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--brass);
}
.sidebar-item-icon { display: none; }
.sidebar-item-label { flex: 1; }

.sidebar-footer {
  margin-top: auto;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--text-3);
}
.sidebar-footer b { display: block; color: var(--text-2); font-weight: 500; }
.sidebar-footer .ts { font-family: var(--mono); font-size: var(--t-xs); }
.sidebar-logout {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-3);
}
.sidebar-logout:hover { color: var(--loss); }

.sidebar-backdrop { display: none; }

/* Шапка выпуска */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--line);
}
.topbar-brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topbar-brand-name {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.topbar-meta { font-size: var(--t-lg); color: var(--text-3); }
.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }
.topbar-burger { display: none; color: var(--text-2); }

/* Переключатель показа — текстовый, без пилюль */
.view-toggle { display: flex; gap: var(--s-2); }
.view-toggle button {
  font-size: var(--t-sm);
  color: var(--text-3);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.view-toggle button:hover { color: var(--text-2); }
.view-toggle button.active { color: var(--text); border-bottom-color: var(--brass); }

/* Кто и когда */
.settings-trigger {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--t-sm); color: var(--text-2);
}
.settings-trigger:hover { color: var(--text); }
.settings-icon { display: none; }
.settings-label { display: flex; align-items: baseline; gap: 8px; }
.settings-label-client { color: var(--text); }
.settings-label-sep { color: var(--text-4); }
.settings-label-date { color: var(--text-3); }

/* ---------- Выпуск ---------- */

/* Рабочая площадь экрана: поля одинаковые у всех, и площадь занимает всё
   свободное место — иначе строка вопроса зависает посреди пустоты. */
.report-body, .welcome, .welcome-stub, .chat-main, .accounting-screen, .bc-screen, .report-classic {
  padding: var(--s-3) var(--s-4) var(--s-4);
  min-width: 0;
  flex: 1 1 auto;
}
.report-classic { padding-top: 0; }

.report-header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: end;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.report-eyebrow { grid-column: 1 / -1; }
@media (max-width: 1080px) {
  .report-header { grid-template-columns: 1fr; gap: var(--s-2); }
}
.report-title {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 620;
  margin-top: 12px;
  text-wrap: balance;
  max-width: 30ch;
}
.report-summary {
  margin-top: 0;
  font-family: var(--serif);
  font-size: var(--t-xl);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 62ch;
}

/* Что решать сегодня */
.decisions { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line-soft);
}
.decision:first-of-type { border-top: 0; }
.decision-what { font-size: var(--t-lg); line-height: 1.45; }
.decision-what b { color: var(--text); font-weight: 600; }
.decision-what span { display: block; margin-top: 5px; font-size: var(--t-sm); color: var(--text-3); max-width: 72ch; }
.decision-sum { text-align: right; font-size: var(--t-xl); color: var(--text); }
.decision-sum em { display: block; font-style: normal; font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; }
.decision.urgent .decision-sum { color: var(--loss); }
.decision-act { grid-column: 2; text-align: right; margin-top: 10px; }
.decision-act button, .decision-act a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  color: var(--brass);
  font-size: var(--t-sm);
}
.decision-act button:hover, .decision-act a:hover {
  background: var(--brass); color: var(--ground); border-color: var(--brass);
}

/* Числа выпуска */
.kpi-wrap, .pnl-cards, .classic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * var(--s-4)) var(--s-3);
}
.kpi-head, .pnl-card, .fixed-kpi {
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--line);
  text-align: left;
}
.kpi-head:last-child, .pnl-card:last-child, .fixed-kpi:last-child { border-right: 0; }
.kpi-title, .pnl-label, .fixed-kpi-title {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-bottom: 12px;
}
.kpi-value, .pnl-value, .fixed-kpi-value {
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-toggle { margin-top: 10px; font-size: var(--t-sm); color: var(--text-2); text-align: left; }
.kpi-toggle.up, .ok { color: var(--gain); }
.kpi-toggle.down, .err { color: var(--loss); }

/* Разворот: рассказ и таблица */
.report-classic, .charts, .chat-charts {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 1080px) {
  .report-classic, .charts, .chat-charts { grid-template-columns: 1fr; gap: var(--s-3); }
}

.section, .chart-section, .table-section, .fixed-chart {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--specular);
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
  transition: transform .34s var(--spring), box-shadow .34s var(--spring);
}
.section:hover, .chart-section:hover, .table-section:hover, .fixed-chart:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hi), inset 0 1px 0 var(--specular);
}
.classic-header { padding: 0 0 var(--s-3); min-width: 0; }
/* Секции идут лентой с шагом языка, а не разделяются пустотой. */
.report-story, .report-tables { display: flex; flex-direction: column; gap: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.section-head-text { min-width: 0; }
.section-num { display: none; }
.section-title, .classic-title, .fixed-title, .chat-table-title {
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  font-weight: 600;
}
.section-subtitle, .classic-subtitle, .fixed-subtitle { font-size: var(--t-sm); color: var(--text-3); margin-top: 6px; }

.section-narrative, .narrative, .drawer-narrative, .report-story .section-narrative {
  font-size: var(--t-md);
  line-height: 1.68;
  color: var(--text-2);
  max-width: 64ch;
}

/* Контейнер выпуска: во всю площадь. Меру строки держат абзацы внутри. */
.report-narrative {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-3) var(--s-4) 0;
}
.section-narrative p + p, .report-narrative p + p, .narrative p + p { margin-top: 13px; }
.section-narrative b, .report-narrative b, .narrative b { color: var(--text); font-weight: 600; }

/* Первый абзац разбора — голосом, а не сводкой */
.narrative-lead {
  font-family: var(--serif);
  font-size: var(--t-xl);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 13px;
}

/* Чего я не знаю */
.gap-note {
  margin-top: var(--s-2);
  padding: 14px 18px;
  background: var(--surface);
  border-left: 2px solid var(--brass-dim);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-2);
}
.gap-note b {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
  font-weight: 500;
}

/* ---------- Таблицы ---------- */

.table-container, .chat-table-scroll, .chat-table-wrap { overflow-x: auto; }

.data-table, .fixed-table, .chat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.data-table th, .fixed-table th, .chat-table th {
  font-size: var(--t-sm);
  color: var(--text-3);
  font-weight: 400;
  text-align: right;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table th:first-child, .fixed-table th:first-child, .chat-table th:first-child { text-align: left; }
.data-table td, .fixed-table td, .chat-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  color: var(--text-2);
}
.data-table td:first-child, .fixed-table td:first-child, .chat-table td:first-child {
  text-align: left; color: var(--text);
}
.data-table tbody tr:hover td, .chat-table tbody tr:hover td { background: var(--brass-soft); }
.data-table td + td, .chat-table td + td, .fixed-table td + td { padding-left: var(--s-3); white-space: nowrap; }
.data-table th + th, .chat-table th + th, .fixed-table th + th { padding-left: var(--s-3); }
.data-table td:first-child, .chat-table td:first-child, .fixed-table td:first-child { padding-right: var(--s-2); }

/* Живая таблица: шапка липнет, числа считаются числами, строки ищутся. */
.dt { margin: var(--s-2) 0; }
.dt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.dt-title { font-size: var(--t-sm); color: var(--text-2); }
.dt-search {
  flex: 0 1 240px; min-width: 0;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 10px; font-size: var(--t-sm); color: var(--text); outline: none;
}
.dt-search:focus { border-color: var(--brass-dim); }
.dt-scroll { overflow: auto; max-height: 60vh; margin-top: var(--s-1); }
/* В артефакте панель прокручивается сама — второй скролл внутри лишний. */
.chat-artifact-panel-body .dt-scroll { max-height: none; overflow-x: auto; overflow-y: visible; }
.dt-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
.dt-th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-solid);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  text-align: left; font-weight: 400; white-space: nowrap;
}
.dt-th.num { text-align: right; }
/* Зазор между колонками задаётся один раз слева — иначе соседние ячейки
   слипаются: «СУММА ДОЛГАПОСЛЕДНЯЯ ОТГРУЗКА». */
.dt-table th + th, .dt-table td + td { padding-left: var(--s-3); }
.dt-sort { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.dt-sort:hover { color: var(--text); }
.dt-mark { color: var(--brass); }
.dt-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-2);
  vertical-align: baseline;
}
.dt-table td.num { text-align: right; white-space: nowrap; }
.dt-table td:first-child { color: var(--text); }
.dt-table tbody tr:hover td { background: var(--brass-soft); }
.dt-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding-top: 10px;
}
.dt-count { font-size: var(--t-xs); color: var(--text-4); }
.dt-actions { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.dt-toggle, .dt-csv { font-size: var(--t-sm); color: var(--text-3); }
.dt-toggle:hover, .dt-csv:hover { color: var(--brass); }


.bar-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--text); font-variant-numeric: tabular-nums; }
.category-label { font-family: var(--sans); font-size: 12.5px; fill: var(--text-2); }
.axis-label { font-family: var(--sans); font-size: 12px; fill: var(--text-3); }
.category-label { font-size: 12px; fill: var(--text-2); }

/* ---------- Графики ---------- */

.chart, .chart-container, .fixed-chart-body { width: 100%; }
.chart svg, .fixed-chart-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.gridline { stroke: var(--grid); stroke-width: 1; }

/* Заголовок графика идёт как надзаголовок раздела */
.chart-title {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: var(--s-2);
  display: block;
}
.chart-subtitle { font-size: var(--t-sm); color: var(--text-3); margin: -10px 0 var(--s-2); }

/* Кольцо и легенда: подписи в столбик, значение под именем */
.chart-pie-body {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
}
.chart-pie-svg { width: 100%; height: auto; max-width: 220px; }
.chart-pie-hole { fill: var(--ground); }
.chart-legend { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chart-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  font-size: var(--t-sm);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.chart-legend-row:last-child { border-bottom: 0; padding-bottom: 0; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: block; }
.chart-legend-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend-value { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 700px) {
  .chart-pie-body { grid-template-columns: 1fr; }
}

/* ---------- Ссылки на первичку ---------- */

.refs, .source-docs, .drawer-sources { margin-top: var(--s-2); }
.drawer-names { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-2); }
.drawer-name {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  color: var(--text-2);
}
.refs-label, .source-docs-label, .drawer-sources-label {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}
.ref-tag, .source-tag {
  display: inline-block;
  font-size: var(--t-sm);
  color: var(--text-2);
  border-bottom: 1px dotted var(--text-4);
  margin: 0 var(--s-2) 6px 0;
}
.ref-tag:hover, .source-tag:hover { color: var(--brass); border-bottom-color: var(--brass); }
.source-doc-row, .drawer-doc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.source-doc-label, .drawer-doc-label { font-size: var(--t-sm); color: var(--text-2); }
.drawer-doc-amount { font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- Чат ---------- */

.chat-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-messages { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-3); }

.chat-msg { display: grid; grid-template-columns: 84px 1fr; gap: var(--s-2); align-items: baseline; }
.chat-msg-label {
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-4); padding-top: 4px;
}
.chat-msg.assistant .chat-msg-label { color: var(--brass-dim); }
.chat-msg-body { font-size: var(--t-md); line-height: 1.68; color: var(--text-2); max-width: 68ch; }
.chat-msg.role-user .chat-msg-body, .chat-msg.user .chat-msg-body { color: var(--text); }
.chat-msg-meta { margin-top: 6px; font-size: var(--t-xs); color: var(--text-4); font-family: var(--mono); }

.chat-empty { padding: var(--s-4) 0; max-width: 62ch; }
.chat-empty-title { font-family: var(--serif); font-size: var(--t-2xl); color: var(--text); }
.chat-empty-hint { margin-top: 10px; font-size: var(--t-md); color: var(--text-3); }

/* Подсказки — колонкой по левому краю, без пузырей */
.chat-quick-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: var(--s-3); }
.chat-quick-chip {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text-2);
  font-size: var(--t-md);
  text-align: left;
  width: 100%;
  max-width: 62ch;
}
.chat-quick-chip:hover { color: var(--brass); }
.chat-quick-chip:last-child { border-bottom: 1px solid var(--line-soft); }

.chat-toolbar, .chat-mode-switch { display: flex; gap: var(--s-3); margin-bottom: var(--s-2); }
.chat-toolbar-btn, .chat-mode-switch button {
  font-size: var(--t-sm); color: var(--text-3); padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.chat-toolbar-btn:hover { color: var(--text-2); }
.chat-toolbar-btn.active, .chat-mode-switch button.active { color: var(--text); border-bottom-color: var(--brass); }

/* Строка вопроса */
/* Строка вопроса всегда внизу площади, во всю её ширину */
.chat-input-row {
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
  border-top: 1px solid var(--line);
  background: var(--surface-solid);
  margin-top: auto;
}
/* Док — сам строка: flex стоял на обёртке, и поле ввода сжималось
   до своей внутренней ширины вместо всей площади. */
.chat-dock {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 14px var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
/* Строка вопроса тянется во всю ширину площади: поля площади она
   компенсирует отрицательным полем, иначе выглядит вставленным блоком. */
.chat-input-row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 14px var(--s-4);
  margin: var(--s-3) calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
}
/* Док стоит прямо в площади — компенсировать чужие поля ему нечем. */
.chat-dock-wrap { display: block; padding: 0; margin: auto 0 0; border-top: 0; background: transparent; }
.chat-dock .chat-input-row { margin: 0; }
.chat-input, .chat-textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--text);
  min-height: 26px;
  max-height: 160px;
}
.chat-input::placeholder, .chat-textarea::placeholder { color: var(--text-4); }
.chat-send, .chat-send-btn {
  font-size: var(--t-sm);
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  padding: 6px 14px;
}
.chat-send:hover, .chat-send-btn:hover { background: var(--brass); color: var(--ground); }
.chat-send:disabled, .chat-send-btn:disabled { color: var(--text-4); border-color: var(--line); cursor: default; background: none; }
.chat-icon { display: none; }

.chat-thinking, .pending, .loading {
  font-size: var(--t-sm); color: var(--text-3);
}
/* Три точки ожидания: без них строка ответа висит пустой всё время счёта. */
.chat-typing { grid-column: 2; display: inline-flex; align-items: center; gap: 5px; padding-top: 6px; }
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-4);
                 animation: typing-dot 1.1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.chat-md p + p { margin-top: 11px; }
.chat-md ul, .bullets { margin: 10px 0 10px 18px; color: var(--text-2); }
.chat-md li, .bullets li { margin-bottom: 5px; }
.chat-md code, .sql, .chat-sql-query {
  font-family: var(--mono); font-size: var(--t-sm);
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2px 6px; color: var(--text-2);
}
.chat-sql-list { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.chat-sql-query { display: block; padding: 12px 14px; white-space: pre-wrap; }
.chat-sql-idx { color: var(--text-4); font-family: var(--mono); font-size: var(--t-xs); }
.chat-sql-details summary { font-size: var(--t-sm); color: var(--text-3); cursor: pointer; }
.chat-sql-details summary:hover { color: var(--text-2); }

.chat-answer {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: var(--s-2);
}

/* Артефакт — вторая колонка рядом с лентой, а не блок под ней:
   раньше геометрии не было вовсе и таблица открывалась внизу экрана. */
.chat-screen.with-artifact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 48%);
  gap: 0;
}
.chat-screen.with-artifact .chat-main { min-width: 0; }
.chat-artifact-panel {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.chat-artifact-panel-body { flex: 1; min-height: 0; overflow-y: auto; }
.chat-artifact-panel-actions { display: flex; align-items: center; gap: var(--s-2); }

.chat-answer-head, .chat-artifact-panel-head, .chat-artifact-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: 12px var(--s-2); border-bottom: 1px solid var(--line);
}
.chat-answer-title, .chat-artifact-panel-title {
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.chat-answer-body, .chat-artifact-panel-body { padding: var(--s-2); }
.chat-answer-close, .chat-artifact-close, .drawer-close {
  font-size: var(--t-sm); color: var(--text-3);
}
.chat-answer-close:hover, .chat-artifact-close:hover, .drawer-close:hover { color: var(--text); }
/* Карточка ответа — кнопка, а кнопка по умолчанию центрирует текст:
   без этого превью стояло по центру и читалось как заголовок. */
.chat-artifact-card {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-top: var(--s-1); background: var(--surface);
}
.chat-artifact-card.active { border-color: var(--brass-dim); }
.chat-artifact-card .chat-artifact-head { padding: 0 0 8px; }
.chat-artifact-preview {
  font-size: var(--t-md); line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-artifact-kind, .chat-artifact-icon { font-size: var(--t-xs); color: var(--text-3); letter-spacing: 0.14em; text-transform: uppercase; }
.chat-artifact-open { font-size: var(--t-sm); color: var(--brass); }
.chat-table-toggle { font-size: var(--t-sm); color: var(--text-3); }

/* ---------- Ящик подробностей ---------- */

/* Панель — сам ящик, не его содержимое: раньше fixed стоял на теле,
   и шапка с заголовком оставалась внизу страницы. */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw);
  display: flex; flex-direction: column;
  background: var(--surface-solid); border-left: 1px solid var(--line);
  transform: translateX(101%);
  transition: transform 200ms ease;
  z-index: 40;
}
.drawer.open { transform: none; }

.drawer-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 var(--s-3) var(--s-4);
}
/* Надзаголовок стоит НАД заголовком, крестик — справа от обоих. */
.drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.drawer-head .drawer-eyebrow { grid-column: 1; grid-row: 1; }
.drawer-head .drawer-title { grid-column: 1; grid-row: 2; }
.drawer-head .drawer-close { grid-column: 2; grid-row: 1 / span 2; }
.drawer-title { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 500; color: var(--text); }
.drawer-chat { margin-top: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.drawer-chat-label { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); }
.drawer-chat-bubble { margin-top: var(--s-2); font-size: var(--t-md); line-height: 1.65; color: var(--text-2); }
.drawer-chat-bubble-clear { font-size: var(--t-sm); color: var(--text-3); }
.drawer-chat-input-row { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2);
                         border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.drawer-chat-input { flex: 1; background: transparent; border: 0; outline: none; font-family: var(--serif); font-size: var(--t-lg); }
.drawer-chat-send { font-size: var(--t-sm); color: var(--brass); }

/* ---------- Настройки, клиент, тема ---------- */

.settings-backdrop, .sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50;
}
.settings-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, 92vw); background: var(--surface-solid);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3); z-index: 51;
}
.settings-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); }
.settings-title { font-family: var(--serif); font-size: var(--t-xl); }
.settings-body { display: flex; flex-direction: column; gap: var(--s-3); }
.settings-field { display: flex; flex-direction: column; gap: 8px; }
.settings-hint { font-size: var(--t-sm); color: var(--text-3); }
.settings-date-input, .bc-input, .bc-select, .bc-textarea, .login-input {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  font-size: var(--t-md);
  width: 100%;
}
.settings-date-input:focus, .bc-input:focus, .login-input:focus { border-color: var(--brass-dim); outline: none; }
.settings-footer { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }

.client-options { display: flex; flex-direction: column; }
.client-option {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--line-soft); text-align: left; width: 100%; color: var(--text-2);
}
.client-option:hover { color: var(--text); }
.client-option-dot { display: none; }
.client-option-name { flex: 1; }
.client-option-badge { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.client-empty { padding: var(--s-2) 0; color: var(--text-3); font-size: var(--t-sm); }

.theme-picker-wrap { position: relative; }
.theme-trigger { font-size: var(--t-sm); color: var(--text-3); }
.theme-trigger:hover { color: var(--text-2); }
.theme-popover {
  display: none; position: absolute; right: 0; top: calc(100% + 10px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 210px; padding: 6px; z-index: 30;
}
.theme-popover.open { display: block; }
.theme-option { display: flex; flex-direction: column; padding: 9px 12px; border-radius: var(--radius); width: 100%; text-align: left; }
.theme-option:hover { background: var(--raised); }
.theme-option-name { font-size: 14px; color: var(--text); }
.theme-option-description { font-size: var(--t-sm); color: var(--text-3); }
.theme-swatch { display: none; }

/* ---------- Вход ---------- */

.login-screen {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
  align-content: center; justify-items: start;
  padding: 0 clamp(24px, 12vw, 200px);
  background: var(--ground);
}
.login-card { width: min(420px, 100%); }
.login-title { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.02em; }
.login-subtitle { margin-top: 10px; font-size: var(--t-md); color: var(--text-3); }
.login-input { margin-top: var(--s-3); background: transparent; border: 0; border-bottom: 1px solid var(--line);
               border-radius: 0; padding: 10px 0; font-family: var(--serif); font-size: var(--t-lg); }
.login-input:focus { border-bottom-color: var(--brass); }
.login-btn {
  margin-top: var(--s-3); padding: 10px 22px;
  border: 1px solid var(--brass-dim); border-radius: var(--radius);
  color: var(--brass); font-size: var(--t-md);
}
.login-btn:hover { background: var(--brass); color: var(--ground); }
.login-hint { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--text-4); max-width: 46ch; }
.login-error { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--loss); }

/* ---------- Приветствие без данных ---------- */

.welcome-stub, .welcome-stub-card { max-width: 62ch; }
.welcome-stub-title, .greeting {
  font-family: var(--serif); font-size: var(--t-3xl); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance;
}
.welcome-stub-sub { margin-top: 12px; font-size: var(--t-lg); color: var(--text-3); }
.welcome-stub-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: var(--s-3); }
.welcome-stub-btn {
  display: block; width: 100%; max-width: 62ch; text-align: left;
  padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.welcome-stub-btn:last-child { border-bottom: 1px solid var(--line-soft); }
.welcome-stub-btn:hover .welcome-stub-btn-title { color: var(--brass); }
.welcome-stub-btn-title { font-size: var(--t-lg); color: var(--text); }
.welcome-stub-btn-sub { font-size: var(--t-sm); color: var(--text-3); margin-top: 4px; }

.cta { margin-top: var(--s-3); }
.cta-text { font-size: var(--t-md); color: var(--text-2); }
.primary {
  padding: 9px 18px; border: 1px solid var(--brass-dim); border-radius: var(--radius);
  color: var(--brass); font-size: var(--t-md);
}
.primary:hover { background: var(--brass); color: var(--ground); }

/* ---------- Рассылки ---------- */

.bc-screen { display: flex; flex-direction: column; gap: var(--s-3); }
.bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.bc-subtitle { font-size: var(--t-sm); color: var(--text-3); }
.bc-list { display: flex; flex-direction: column; }
/* Четыре ячейки в ряд: время, вопрос, переключатель, удаление.
   С двумя колонками ряд ломался пополам и вопрос уезжал вправо. */
.bc-item { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto;
           align-items: start; gap: var(--s-2); padding: var(--s-2) 0;
           border-top: 1px solid var(--line-soft); }
.bc-item-time { padding-top: 2px; font-variant-numeric: tabular-nums; }
.bc-item-toggle { display: inline-flex; align-items: center; gap: 6px; }
.bc-item-toggle input { accent-color: var(--brass); }
.bc-item.disabled { opacity: 0.5; }
.bc-item-question { font-size: var(--t-md); color: var(--text); }
.bc-item-time, .bc-item-mode { font-size: var(--t-sm); color: var(--text-3); }
.bc-item-body { display: flex; flex-direction: column; gap: 4px; }
.bc-item-toggle, .bc-item-delete { font-size: var(--t-sm); color: var(--text-3); }
.bc-item-delete:hover { color: var(--loss); }
.bc-add { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.bc-add-title { font-size: var(--t-md); color: var(--text); margin-bottom: var(--s-2); }
.bc-add-row { display: grid; grid-template-columns: 160px 200px; gap: var(--s-2); align-items: end; margin-bottom: var(--s-2); }
.bc-field { display: flex; flex-direction: column; gap: 6px; }
.bc-field-label { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.bc-save-btn, .bc-add-btn, .export-pdf-btn, .export-html-btn, .open-browser-btn, .error-card-retry {
  padding: 8px 16px; border: 1px solid var(--brass-dim); border-radius: var(--radius);
  color: var(--brass); font-size: var(--t-sm);
}
.bc-save-btn:hover, .bc-add-btn:hover, .export-pdf-btn:hover, .export-html-btn:hover,
.open-browser-btn:hover, .error-card-retry:hover { background: var(--brass); color: var(--ground); }
.bc-empty, .bc-status, .bc-footer { font-size: var(--t-sm); color: var(--text-3); }

/* ---------- Бухгалтерия ---------- */

.accounting-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.accounting-period { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-3); }
.accounting-period input[type="date"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--t-sm);
  padding: 4px 0;
}
.accounting-period input[type="date"]:focus { border-bottom-color: var(--brass); outline: none; }
.accounting-period button {
  font-size: var(--t-sm);
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  padding: 5px 12px;
}
.accounting-period button:hover { background: var(--brass); color: var(--ground); }

/* ---------- Состояния ---------- */

.error, .error-card {
  border: 1px solid var(--line);
  border-left: 2px solid var(--loss);
  border-radius: var(--radius);
  background: var(--surface-solid);
  padding: var(--s-2) var(--s-3);
  color: var(--text-2);
  max-width: 62ch;
}
.error-card-head, .error-card-title { color: var(--text); font-size: var(--t-lg); }
.error-card-icon { display: none; }
.error-card-message { margin-top: 8px; font-size: var(--t-md); color: var(--text-2); }
.error-card-retry { margin-top: var(--s-2); }

.dev-banner {
  padding: 8px var(--s-4); background: var(--brass-soft);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--text-2);
}

/* ---------- Узкий экран ---------- */

@media (max-width: 900px) {
  :root { --s-4: 20px; }
  .app, .app.has-sidebar { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail);
    transform: translateX(-100%); transition: transform 160ms ease; z-index: 60;
  }
  .sidebar.open { transform: none; }
  .sidebar-backdrop { display: block; }
  .topbar-burger { display: block; }
  .topbar { flex-wrap: wrap; gap: var(--s-2); }
  .decision { grid-template-columns: 1fr; gap: 8px; }
  .decision-sum, .decision-act { text-align: left; }
  .decision-act { grid-column: 1; margin-top: 0; }
  .kpi-wrap, .pnl-cards, .classic-grid { grid-template-columns: 1fr 1fr; margin: 0 0 var(--s-3); }
  .kpi-head, .pnl-card { padding: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Блоки единого контракта представления · язык «Опал».

   Один вид на все каналы: утренний отчёт, чат, рассылка. Модель
   выбирает блок и данные — оформление живёт здесь и больше нигде.

   Карточка блока несёт четыре приёма разом: материал (blur+saturate),
   кант по верхнему ребру, концентричный радиус и пружину на переходах.
   ══════════════════════════════════════════════════════════════════════ */

.blockpage {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Общая поверхность блока. */
.blk-verdict,
.blk-fig,
.blk-kpi,
.blk-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--specular);
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
  transition: transform .34s var(--spring), box-shadow .34s var(--spring);
}
.blk-verdict:hover,
.blk-fig:hover,
.blk-kpi:hover,
.blk-table:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hi), inset 0 1px 0 var(--specular);
}

/* Вердикт — первое, что читает владелец. */
.blk-verdict-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.blk-verdict p {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.018em;
  font-weight: 500;
  max-width: 58ch;
}

/* Фигура: заголовок, полотно, подпись. */
.blk-fig { margin: 0; }
.blk-head { margin-bottom: 14px; }
.blk-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.blk-subtitle { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.blk-fig figcaption {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 12px;
  max-width: 66ch;
}

.blk-svg { overflow-x: auto; }
.blk-svg svg { display: block; width: 100%; height: auto; }
.blk-empty { font-size: 13px; color: var(--text-3); padding: 12px 0; }

/* Проза внутри страницы — интерпретация, без разметки. */
.blk-prose {
  margin: 0;
  max-width: 68ch;
  line-height: 1.62;
  color: var(--text-2);
  padding: 0 22px;
}

/* Плитка показателя: число — герой. Крупная цифра идёт легче по весу
   и плотнее по трекингу — на большом кегле жир читается как крик. */
.blk-kpi { padding: 16px 18px; }
.blk-kpi-t { font-size: 12px; color: var(--text-3); letter-spacing: 0.005em; }
.blk-kpi-v {
  font-size: 32px;
  font-weight: 590;
  letter-spacing: -0.042em;
  line-height: 1.06;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
/* Дельта — мягкая плашка с плотной цифрой внутри: тон спокойный,
   сигнал различимый. */
.blk-kpi-d {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.blk-kpi-d.up { background: var(--gain-soft); color: var(--gain); }
.blk-kpi-d.down { background: var(--loss-soft); color: var(--loss); }
.blk-kpi-d.flat { background: var(--sunken); color: var(--text-3); }
.blk-kpi.tone-alarming { border-color: color-mix(in oklab, var(--loss) 40%, var(--line)); }
.blk-kpi.tone-positive { border-color: color-mix(in oklab, var(--gain) 40%, var(--line)); }

/* Строка доверия: откуда взяты числа. */
.blk-source {
  font-size: 12px;
  color: var(--text-3);
  padding: 2px 22px 0;
  font-variant-numeric: tabular-nums;
}

.blk-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.blk-ref-name {
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: 2px 9px;
}

/* Таблица внутри блока: волосяная линия вместо рамки — данные читаются
   сгруппированными, а не расчерченными. */
.blk-fig .data-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.blk-fig .data-table th {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  padding: 0 14px 9px 0;
  border-bottom: none;
}
.blk-fig .data-table td {
  padding: 10px 14px 10px 0;
  border-top: .5px solid var(--hair);
  border-bottom: none;
  color: var(--text-2);
}
.blk-fig .data-table tbody tr:first-child td { border-top: .5px solid var(--hair); }
.blk-fig .data-table td:first-child { color: var(--text); font-weight: 500; }
.blk-fig .table-container { overflow-x: auto; }

/* ── Общий язык SVG-фигур ─────────────────────────────────────────── */

.fig-grid line { stroke: var(--grid); stroke-width: 1; }
.fig-base { stroke: var(--line-soft); stroke-width: 1; }
.fig-axis { stroke: var(--text-4); stroke-width: 1; }
.fig-connector line {
  stroke: var(--text-4);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.fig-ax { font-family: var(--sans); font-size: 10.5px; fill: var(--text-3); }
.fig-lbl { font-family: var(--sans); font-size: 11.5px; fill: var(--text-2); }
.fig-val {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.fig-val.minus { fill: var(--loss); }
.fig-val.plus { fill: var(--gain); }

/* Цвет столбца несёт знак операции. Категорию несёт позиция — поэтому
   в каскаде нет ни легенды, ни набора цветов по статьям. */
.fig-bar { transition: opacity .2s var(--spring); }
.fig-bar:hover { opacity: .78; }
/* Итог — приглушённый тон, не акцент: акцент принадлежит действиям,
   а не данным. Знак операции несут пастельные минус и плюс. */
.fig-bar.total { fill: var(--fig-total); }
.fig-bar.minus { fill: var(--loss-bar); }
.fig-bar.plus { fill: var(--gain-bar); }

/* ── Появление ────────────────────────────────────────────────────── */

/* Блоки поднимаются по очереди, полосы вырастают из нуля. Пружина без
   отскока: движение читается как отклик вещества, а не мультипликация. */
@keyframes blk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.blockpage > * { animation: blk-rise .5s var(--spring) both; }
.blockpage > *:nth-child(1) { animation-delay: .02s; }
.blockpage > *:nth-child(2) { animation-delay: .07s; }
.blockpage > *:nth-child(3) { animation-delay: .12s; }
.blockpage > *:nth-child(4) { animation-delay: .17s; }
.blockpage > *:nth-child(5) { animation-delay: .22s; }
.blockpage > *:nth-child(6) { animation-delay: .27s; }
.blockpage > *:nth-child(n+7) { animation-delay: .32s; }

@media (max-width: 640px) {
  .blk-verdict p { font-size: 17px; }
  .blk-kpi-v { font-size: 27px; }
  .fig-lbl { font-size: 10px; }
}

/* Витрина блоков (?blocks=1) — внутренний экран, не часть продукта. */
.showcase {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}
.showcase-head { margin-bottom: 28px; }
.showcase-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}
.showcase-head h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.showcase-head p {
  color: var(--text-2);
  margin: 0;
  max-width: 62ch;
}

/* Плитка показателя не должна растягиваться на всю страницу. */
.blockpage > .blk-kpi { max-width: 260px; }


/* ── Серии графиков отчёта ────────────────────────────────────────────
   Цвет серий живёт здесь, а не в константах Rust: только так он
   переключается вместе с темой. Пятёрка — та же, что у chart_svg,
   проверенная валидатором в обеих темах. */

.ser-1 { fill: var(--ser-1); }
.ser-2 { fill: var(--ser-2); }
.ser-3 { fill: var(--ser-3); }
.ser-4 { fill: var(--ser-4); }
.ser-5 { fill: var(--ser-5); }
.ser-pos  { fill: var(--gain-bar); }
.ser-neg  { fill: var(--loss-bar); }
.ser-warn { fill: var(--ser-3); }

/* Линия: заливка снята явно — класс сильнее presentation-атрибута. */
.ser-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ser-1-s    { stroke: var(--ser-1); }
.ser-pos-s  { stroke: var(--gain-bar); }
.ser-neg-s  { stroke: var(--loss-bar); }
.ser-warn-s { stroke: var(--ser-3); }

/* ══════════════════════════════════════════════════════════════════════
   Артефакт — документ, открытый по ссылке.

   У страницы нет боковой панели, входа и навигации: её открывает человек,
   которому прислали ссылку, и всё, что ему нужно, — прочитать документ.
   ══════════════════════════════════════════════════════════════════════ */

.artifact-page { max-width: 900px; margin: 0 auto; padding: 48px 24px 96px; }

.artifact-head { margin-bottom: 26px; }
.artifact-kind {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.artifact-head h1 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 620;
  margin: 10px 0 0;
  text-wrap: balance;
}
.artifact-q { margin: 10px 0 0; color: var(--text-2); font-size: 16px; max-width: 62ch; }
.artifact-meta {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.artifact-foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: .5px solid var(--hair);
  font-size: 12px;
  color: var(--text-3);
  max-width: 66ch;
}

/* Экран без содержимого: код, истёкший срок, отказ. */
.artifact-note {
  max-width: 520px;
  margin: 14vh auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--specular);
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
}
.artifact-note h1 { font-size: 22px; letter-spacing: -.025em; font-weight: 620; margin: 8px 0 10px; }
.artifact-note p { color: var(--text-2); margin: 0; }

.artifact-code-row { display: flex; gap: 10px; margin-top: 18px; }
.artifact-code {
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: .28em;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text);
}
.artifact-code:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Публикация ────────────────────────────────────────────────────── */

.pub-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(6, 6, 12, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pub-card {
  width: min(460px, 92vw);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-hi), inset 0 1px 0 var(--specular);
}
.pub-card h3 { font-size: 18px; font-weight: 620; letter-spacing: -.02em; margin: 0 0 4px; }
.pub-card .hint { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
.pub-opts { display: flex; flex-direction: column; gap: 8px; }
.pub-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .2s var(--spring), background .2s var(--spring);
}
.pub-opt:hover { background: var(--sunken); }
.pub-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.pub-opt b { font-size: 13.5px; font-weight: 600; }
.pub-opt span { font-size: 12.5px; color: var(--text-3); }
.pub-life { display: flex; gap: 6px; margin-top: 14px; }
.pub-life button {
  flex: 1 1 auto;
  font-size: 12.5px;
  padding: 7px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
}
.pub-life button.on { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.pub-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.pub-result { margin-top: 16px; }
.pub-link {
  font-family: var(--mono);
  font-size: 12.5px;
  word-break: break-all;
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
}
.pub-code {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .3em;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.pub-warn { font-size: 12px; color: var(--text-3); margin-top: 10px; }

/* Свежесть данных в подписи источника. Отставание — не техническая деталь,
   а условие, при котором цифры вообще имеют смысл. */
.blk-fresh { font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.blk-fresh.stale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--loss);
  background: var(--loss-soft);
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 6px;
}
.blk-fresh.stale::before { content: "!"; font-weight: 700; opacity: .8; }
.blk-pinned {
  margin-left: 8px;
  font-weight: 600;
  color: var(--gain);
  background: var(--gain-soft);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
}

/* Ход работы над ответом. Свёрнут: владельцу он нужен не всегда, но должен
   быть под рукой в тот момент, когда цифра удивила. */
.steps-box { margin-bottom: 12px; }
.steps-box summary {
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  padding: 5px 0;
  list-style: none;
}
.steps-box summary::-webkit-details-marker { display: none; }
.steps-box summary::before { content: "▸ "; color: var(--accent); }
.steps-box[open] summary::before { content: "▾ "; }
.steps-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 2px; }
.step-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 5px 0;
  border-top: .5px solid var(--hair);
}
.step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); align-self: center; }
.step-dot[data-kind="metric"] { background: var(--gain); }
.step-dot[data-kind="render"] { background: var(--text-4); }
.step-row.failed .step-dot { background: var(--loss); }
.step-row.failed .step-label { color: var(--loss); }
.step-ms { font-family: var(--mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.step-detail {
  grid-column: 2 / -1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--sunken);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Водяной знак: диагональная сетка поверх полотна, не мешающая чтению.
   Он не защищает от снимка экрана — он делает снимок именным. */
.artifact { position: relative; }
.artifact-mark {
  /* Знак фиксирован поверх всего полотна: карточки блоков создают
     собственный контекст наложения (материал и тень), и знак внутри потока
     оказывался под ними — виден только на полях. */
  position: fixed;
  inset: -20%;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 90px;
  transform: rotate(-24deg);
  overflow: hidden;
}
.artifact-mark span {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  /* Цвет задаём прозрачностью самого текста, а не всего слоя: под общим
     opacity знак пропадал на белой карточке и был виден только на фоне. */
  color: var(--mark-ink);
  letter-spacing: .04em;
}
/* Запрет копирования — знак вежливости, а не преграда: он говорит получателю,
   что документ дан для чтения. Обходится за минуту и не претендует на большее. */
.artifact.no-copy { user-select: none; -webkit-user-select: none; }
@media print {
  .artifact.no-copy { display: none; }
  .artifact.no-copy::after {
    content: "Печать этого документа не разрешена отправителем";
    display: block;
    font-size: 16px;
  }
}
.blk-recon { margin-left: 8px; font-weight: 600; border-radius: 999px; padding: 2px 9px; font-size: 11px; }
.blk-recon.ok { color: var(--gain); background: var(--gain-soft); }
.blk-recon.bad { color: var(--loss); background: var(--loss-soft); }
/* Вторая колонка сообщения: одно место для шагов, ответа, графиков и мет. */
.chat-msg-col { min-width: 0; display: flex; flex-direction: column; }

/* ── Треды ─────────────────────────────────────────────────────────────
   Каждый вопрос открывает свой разговор. Панель сверху — не навигация
   ради навигации: она отделяет один разбор от другого и там же собирает
   разговор в документ. */

.thread-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  border-bottom: .5px solid var(--hair);
  margin-bottom: 14px;
  min-width: 0;
}
.thread-new {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: inset 0 1px 0 var(--specular);
  transition: transform .3s var(--spring);
}
.thread-new:hover { transform: translateY(-1px); }
.thread-new:active { transform: scale(.97); }

.thread-list { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding-bottom: 2px; }
.thread-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 230px;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--sunken);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  transition: border-color .25s var(--spring), background .25s var(--spring);
}
.thread-chip:hover { background: var(--surface); }
.thread-chip.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}
.thread-title { overflow: hidden; text-overflow: ellipsis; }
.thread-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-solid);
  border-radius: 999px;
  padding: 0 6px;
}
.pub-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pub-check input { margin-top: 2px; }
.pub-check b { display: block; font-size: 13.5px; font-weight: 600; }
.pub-check em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }