/* Светлая тема собрана на токенах корпоративного кита LP (static/lp-kit.css из
   репозитория прототипов, дубль addons/ui): --lp-primary #457ce7, --lp-text
   #232829, серая шкала, тени и радиус 3px.

   Цвета марок данных всё равно прогнаны через validate_palette.js: пара
   #457ce7 + #fe5000 проходит все проверки на фирменной поверхности #fafafa.
   Статусные цвета кита гейт для серий не проходят (#ffb300 имеет L 0.818 против
   допустимых 0.43-0.77) — как заливка со значком и подписью они уместны, но для
   ТЕКСТА статуса нужен тёмный тон, поэтому у warn отдельная роль --warn-ink.

   Тёмной темы кит не даёт, а по правилам скилла её нельзя получить инверсией.
   Поэтому в dark остаются шаги референсной палитры, тоже валидированные.

   Роли, а не сырые hex: светлые и тёмные значения меняются в одном месте.
   Палитра — референсная из скилла dataviz, прогнана через validate_palette.js:
   пара категорийных слотов и обе порядковые рампы (4 и 5 шагов) проходят все
   проверки в light и dark. Светлую 5-шаговую рампу пришлось развести шире —
   на шагах 250/300 валидатор дал FAIL по ΔL (0.047 против минимума 0.06). */
.viz-root {
  color-scheme: light;
  --surface-1: #ffffff;
  --page: #fafafa;
  --text-primary: #232829;
  --text-secondary: #72747a;
  --muted: #72747a;
  --grid: #f1f1f1;
  --baseline: #d7d9d9;
  --border: #d7d9d9;
  --delta-good: #1f8f5f;
  /* подсветка цели перехода по клику на плашку */
  --flash-bg: rgba(69, 124, 231, 0.16);

  --radius: 3px;
  --shadow-float: rgba(149, 157, 165, 0.2) 0 8px 24px;
  --font: 'Montserrat', 'Roboto', Arial, sans-serif;

  --series-1: #457ce7;
  --series-2: #fe5000;

  /* порядковая рампа приоритетов Low→PE */
  --ord4-1: #86b6ef;
  --ord4-2: #5598e7;
  --ord4-3: #2a78d6;
  --ord4-4: #184f95;

  /* порядковая рампа корзин возраста 0-30 → 365+ */
  --ord5-1: #86b6ef;
  --ord5-2: #5598e7;
  --ord5-3: #2a78d6;
  --ord5-4: #1c5cab;
  --ord5-5: #0d366b;

  /* диверджентная пара blue<->red: долг растёт / разгребли */
  --div-pos: #b72d2a;
  --div-neg: #457ce7;

  /* статусы фиксированы и не темизируются */
  --warn-ink: #8a5b00;
  --ok: #31ca88;
  --warn: #ffb300;
  --serious: #fe5000;
  --bad: #b72d2a;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --delta-good: #0ca30c;
    --flash-bg: rgba(57, 135, 229, 0.26);
    --warn-ink: #fab219;
    --series-1: #3987e5;
    --series-2: #d95926;
    --ord4-1: #6da7ec; --ord4-2: #3987e5; --ord4-3: #256abf; --ord4-4: #184f95;
    --ord5-1: #b7d3f6; --ord5-2: #86b6ef; --ord5-3: #5598e7; --ord5-4: #2a78d6; --ord5-5: #184f95;
    --div-pos: #e66767; --div-neg: #3987e5;
  }
}

:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --page: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --delta-good: #0ca30c;
  --flash-bg: rgba(57, 135, 229, 0.26);
  --warn-ink: #fab219;
  --series-1: #3987e5;
  --series-2: #d95926;
  --ord4-1: #6da7ec; --ord4-2: #3987e5; --ord4-3: #256abf; --ord4-4: #184f95;
  --ord5-1: #b7d3f6; --ord5-2: #86b6ef; --ord5-3: #5598e7; --ord5-4: #2a78d6; --ord5-5: #184f95;
  --div-pos: #e66767; --div-neg: #3987e5;
}

* { box-sizing: border-box; }

/* Цвет и фон живут на .viz-root, а не на body: переменные темы объявлены именно
   на .viz-root, а CSS-переменные наследуются вниз, не вверх. На body var(--text-primary)
   не разрешался, цвет падал в чёрный по умолчанию — в светлой теме это выглядело
   правильно случайно, а в тёмной давало чёрный текст на чёрном фоне. */
body {
  margin: 0;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.45;
}

.viz-root {
  min-height: 100vh;
  padding: 20px 24px 64px;
  background: var(--page);
  color: var(--text-primary);
}

header.top {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 4px;
}
header.top h1 { font-size: 20px; margin: 0; font-weight: 650; }
header.top .sub { color: var(--text-secondary); }
header.top .spacer { flex: 1; }
/* На узком экране распорка прижимает имя и кнопки в одну строку, и «Тема»
   уезжает за край. Без неё они переносятся сами. */
@media (max-width: 620px) {
  header.top .spacer { display: none; }
}

button, select {
  font: inherit; color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius, 3px); padding: 6px 12px; cursor: pointer;
}
button:hover, select:hover { border-color: var(--baseline); }

/* фильтры одной строкой над графиками */
.filters {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 14px 0 18px; padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius, 3px);
}
.filters label { color: var(--text-secondary); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius, 3px);
  padding: 14px 16px 8px;
  margin-bottom: 18px;
}
.card h2 { font-size: 15px; margin: 0 0 2px; font-weight: 620; }
.card .note { color: var(--muted); font-size: 12px; margin: 0 0 10px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius, 3px); padding: 12px 14px; }
.kpi .name { color: var(--text-secondary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* пара «42 / 23» не разрывается: сжиматься должен спарклайн, а не число */
.kpi .val { font-size: 28px; font-weight: 640; letter-spacing: -0.5px; white-space: nowrap; }
.kpi .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi .delta { font-size: 12px; color: var(--text-secondary); }
.kpi .delta.up-good, .kpi .delta.down-good { color: var(--delta-good); }
.kpi .delta.worse { color: var(--bad); }
/* Плитка сужается до 190px, а подпись бывает длинной («задачи / баги · 54.8%
   багов от задач»): без min-width колонка с текстом не сжимается и выталкивает
   спарклайн за карточку. Спарклайн масштабируется по viewBox, а не держит 90px. */
.kpi .row > div { min-width: 0; }
.kpi .spark { flex: 0 1 auto; min-width: 0; }
.kpi .spark svg { max-width: 100%; height: auto; display: block; }
.kpi .cap { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Плашка ведёт к деталям метрики: есть у неё график — к графику, нет — к строке
   в табличном виде. Клик по самому числу остаётся ссылкой в Jira. */
.kpi[data-key] { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.kpi[data-key]:hover { border-color: var(--series-1); box-shadow: var(--shadow-float); }
.kpi[data-key]:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
/* стрелка появляется на hover: подсказывает, что плашка ведёт дальше, но не
   занимает место в спокойном состоянии */
.kpi[data-key] .name::after { content: " →"; opacity: 0; color: var(--series-1); }
.kpi[data-key]:hover .name::after, .kpi[data-key]:focus-visible .name::after { opacity: 1; }

/* Куда прыгнули: в таблице на 62 строки без подсветки цель не найти. */
.flash { animation: flash-ring 1.8s ease-out; }
@keyframes flash-ring {
  from { box-shadow: 0 0 0 3px var(--series-1); }
  to { box-shadow: 0 0 0 3px transparent; }
}
/* у строки таблицы тень не рисуется — подсвечиваем фон ячеек */
tr.flash > td { animation: flash-cell 1.8s ease-out; }
@keyframes flash-cell {
  from { background: var(--flash-bg); }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; box-shadow: 0 0 0 3px var(--series-1); }
  tr.flash > td { animation: none; background: var(--flash-bg); }
}

/* статус всегда со значком и подписью — цветом одним смысл не передаём */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 7px 1px 5px; border-radius: 999px; border: 1px solid var(--border); }
.pill .ic { font-weight: 700; }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn-ink); } .pill.bad { color: var(--bad); }
.pill.none { color: var(--muted); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 2px 0 6px; font-size: 12px; color: var(--text-secondary); }
.legend .item { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 12px; height: 3px; border-radius: 2px; }
.legend .swatch.box { height: 11px; width: 11px; border-radius: 2px; }

svg { display: block; width: 100%; height: auto; overflow: visible; }
.grid line { stroke: var(--grid); stroke-width: 1; }
.axis text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.axis line { stroke: var(--baseline); stroke-width: 1; }
.serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.target { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.dot { r: 4; }
.endlabel { font-size: 11px; font-weight: 600; }
.crosshair { stroke: var(--baseline); stroke-width: 1; }

.tooltip {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--surface-1, #ffffff); color: var(--text-primary, #232829);
  border: 1px solid var(--baseline, #d7d9d9); border-radius: var(--radius, 3px);
  padding: 7px 9px; font-size: 12px; box-shadow: var(--shadow-float, 0 4px 14px rgba(0,0,0,.14));
  max-width: 280px;
}
.tooltip .t { color: var(--text-secondary); margin-bottom: 3px; }
.tooltip .r { display: flex; gap: 8px; justify-content: space-between; }
.tooltip .r b { font-variant-numeric: tabular-nums; }

.smalls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.smalls .panel h3 { font-size: 13px; margin: 0 0 1px; font-weight: 600; }
.smalls .panel .cap { font-size: 11px; color: var(--muted); margin: 0 0 4px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; }
thead th { color: var(--text-secondary); font-weight: 600; font-size: 12px; }
tbody tr:hover { background: var(--page); }

.points { display: grid; gap: 10px; }
.point { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius, 3px); padding: 9px 12px; }
.point.warn { border-left-color: var(--warn); }
.point.bad { border-left-color: var(--bad); }
.point.info { border-left-color: var(--series-1); }
.point .h { font-weight: 600; }
.point .d { color: var(--text-secondary); font-size: 13px; }
.point a { color: var(--series-1); font-size: 12px; }

.login { max-width: 380px; margin: 12vh auto; }
.login input { font: inherit; width: 100%; padding: 8px 10px; border-radius: var(--radius, 3px); border: 1px solid var(--baseline); background: var(--surface-1); color: inherit; }
.login .err { color: var(--bad); font-size: 13px; min-height: 18px; }

.hint { color: var(--muted); font-size: 12px; }
.hidden { display: none !important; }

/* названия метрик с пояснением: пунктирное подчёркивание как приглашение навести */
[data-hint] { border-bottom: 1px dotted var(--muted); cursor: help; }
.kpi .name[data-hint] { display: inline-block; max-width: 100%; }

/* кнопки в стиле кита: фирменный синий, радиус 3px */
button { background: var(--surface-1); }
button:hover { border-color: var(--series-1); color: var(--series-1); }
#theme, #toggle-table { font-weight: 500; }
.login button { background: var(--series-1); color: #fff; border-color: var(--series-1); font-weight: 500; }
.login button:hover { filter: brightness(0.94); color: #fff; }

/* ссылки на Jira-фильтры: подчёркивание только при наведении, чтобы не рябило в числах */
a.jira { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
a.jira:hover { color: var(--series-1); border-bottom-color: var(--series-1); }
.kpi .val a.jira:hover { color: var(--series-1); }

/* мини-таблицы по блокам: заголовок блока отделяет их друг от друга */
.tbl-h { font-size: 13px; font-weight: 600; margin: 18px 0 6px; color: var(--text-secondary); }
.tbl-h:first-child { margin-top: 4px; }

/* Светофор в таблице: фоновая подложка, как в самой Google-таблице, чтобы команда
   читала привычно. Цвет не единственный носитель смысла — рядом идёт значок, это
   требование доступности: статусный цвет не должен работать в одиночку.
   Подложки полупрозрачные, поэтому цифра сохраняет контраст в обеих темах. */
td.st-ok { background: rgba(49, 202, 136, 0.16); }
td.st-warn { background: rgba(255, 179, 0, 0.20); }
td.st-bad { background: rgba(183, 45, 42, 0.14); }
:root[data-theme="dark"] .viz-root td.st-bad { background: rgba(230, 103, 103, 0.20); }
.st-glyph { font-size: 10px; margin-left: 5px; opacity: 0.75; font-weight: 700; }

/* колонка цели: приглушена, чтобы не спорить с данными */
th.goal, td.goal { text-align: left; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Графики по два в ряд. minmax(0, 1fr) обязателен: без него SVG внутри грида
   не даёт колонке сжаться и вторая уезжает за экран. На узком экране — в одну. */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.chart-grid > .card { margin-bottom: 0; }
@media (max-width: 1100px) { .chart-grid { grid-template-columns: minmax(0, 1fr); } }

/* заголовки рядов шапки */
.row-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 8px; }
.row-title + .kpis { margin-bottom: 18px; }

/* сдвоенная карточка: второе число тише первого, оно контекст, а не главный показатель */
.pair-sep { color: var(--muted); font-weight: 400; margin: 0 2px; }
.pair-second { color: var(--series-2); }

/* четвёрка «в этом месяце» */
.spot-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; color: var(--muted); }
.kpi.spot-good { border-left: 3px solid var(--ok); }
.kpi.spot-bad { border-left: 3px solid var(--bad); }

/* тексты выводов под заголовками разделов */
.ai-note { font-size: 13px; line-height: 1.5; color: var(--text-primary);
  background: var(--page); border-left: 2px solid var(--series-1);
  padding: 8px 12px; margin: 0 0 10px; border-radius: var(--radius, 3px); }

/* одинаковая сетка во всех мини-таблицах */
table.fixed { table-layout: fixed; width: 100%; }
table.fixed td, table.fixed th { overflow: hidden; text-overflow: ellipsis; }

/* кнопка Google в фирменном синем */
.gbtn { display: inline-block; background: var(--series-1); color: #fff; text-decoration: none;
  padding: 9px 16px; border-radius: var(--radius, 3px); font-weight: 500; }
.gbtn:hover { filter: brightness(0.94); }