/* ═══════════════════════════════════════════════════════════════════════════
   ОБЩИЙ ЯЗЫК ОФОРМЛЕНИЯ — готовые детали интерфейса.
   Требует tokens.css, подключать ПОСЛЕ него.

   Все имена начинаются на «y-» (язык) — чтобы не столкнуться с тем, что уже
   написано в проектах: у Klivox детали зовутся k-*, у остальных свои.
   Новый экран собирается ИЗ ЭТИХ деталей, а не рисуется заново — отсюда
   и берётся ощущение «работа одной команды».

   Каждая деталь слушается пометки слоя на корне страницы (data-sloy) сама:
   ничего дополнительно указывать не нужно.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ОСНОВА СТРАНИЦЫ ─── */
.y-page {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-tekst);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:root[data-sloy="rabota"] .y-page, .y-page[data-sloy="rabota"] { font-family: var(--f-ekran); }
.y-page *, .y-page *::before, .y-page *::after { box-sizing: border-box; }

/* Цифры в столбцах обязаны быть одной ширины — иначе столбец «пляшет» */
.y-num { font-variant-numeric: tabular-nums; }

/* ─── ЗАГОЛОВКИ ─── */
.y-h1, .y-h2, .y-h3 {
  font-family: var(--f-zagolovok);
  font-weight: var(--sloy-ves);
  text-transform: var(--sloy-caps);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.y-h1 { font-size: var(--t-2xl); line-height: 1.05; }
.y-h2 { font-size: var(--t-xl); line-height: 1.1; }
.y-h3 { font-size: var(--t-md); line-height: 1.25; text-transform: none; font-weight: 800; }

/* Мелкая подпись над блоком: шапка таблицы, название группы в меню */
.y-podpis {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
/* Пояснение под заголовком: «что этот экран отвечает и чего он не знает» */
.y-poyasnenie { font-size: var(--t-sm); color: var(--c-text-3); }

/* ─── ПЛИТА: карточка, окно, любой обособленный участок ─── */
.y-plita {
  background: var(--c-surface);
  border: var(--sloy-ramka) solid var(--sloy-ramka-cvet);
  box-shadow: var(--sloy-ten);
  padding: var(--sloy-otstup);
}
.y-plita-tihaya { box-shadow: none; }
/* Чернильная плита: чёрная в светлой теме, светлая в тёмной */
.y-plita-ink { background: var(--c-ink); color: var(--c-ink-text); border-color: var(--c-border); }

/* ЗАПРЕТ: Наклона карточек в этом языке НЕТ.
   Решение Юрия 10.08.2026 дословно: «перекошенных карточек или чего-то подобного
   нигде быть не должно, всё должно быть ровным». Ни на компьютере, ни на телефоне.
   Стережёт prove_yazyk.py — ищет rotate у любой детали. */

/* ─── КНОПКИ ─── */
.y-knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--o-2);
  min-height: var(--vysota-knopki);
  padding: 0 var(--o-3);
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  background: var(--c-surface); color: var(--c-text);
  border: 2px solid var(--c-line-strong);
  border-radius: var(--skruglenie);
  cursor: pointer;
  transition: background .12s ease, box-shadow .08s ease, transform .08s ease;
}
.y-knopka:hover { background: var(--c-surface-2); }
.y-knopka:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* Главное действие экрана. На экране оно ОДНО — иначе главного нет. */
.y-knopka-glavnaya {
  background: var(--c-primary); color: var(--c-primary-ink);
  border-color: var(--c-border); box-shadow: var(--sloy-ten-udar);
  font-weight: 800;
}
.y-knopka-glavnaya:hover { background: var(--c-primary-hover); }
.y-knopka-glavnaya:active { transform: translate(2px, 2px); box-shadow: none; }

/* Опасное действие — коралл. ЗАПРЕТ: Красного нет. */
.y-knopka-opasnaya { background: var(--c-accent); color: #14161a; border-color: var(--c-border); }
.y-knopka-opasnaya:hover { background: var(--c-accent); filter: brightness(.94); }

/* Тихая кнопка в строке таблицы */
.y-knopka-melkaya { min-height: 24px; padding: 0 var(--o-2); font-size: var(--t-xs); }

.y-knopka[disabled], .y-knopka[aria-disabled="true"] {
  opacity: .5; cursor: default; box-shadow: none;
}

/* ЗАПРЕТ: Кнопки НАД списком, а не под ним (правило Юрия).
   Строка кнопок ставится перед таблицей: заголовок -> кнопки -> таблица. */
.y-ryad-knopok {
  display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap;
  margin-bottom: var(--o-3);
}

/* ─── ПОЛЕ ВВОДА ─── */
.y-pole {
  width: 100%; min-height: var(--vysota-knopki);
  padding: 0 var(--o-2);
  font: inherit; font-size: var(--t-base);
  background: var(--c-surface); color: var(--c-text);
  border: 2px solid var(--c-line-strong);
  border-radius: var(--skruglenie);
  outline: none;
}
.y-pole::placeholder { color: var(--c-text-3); opacity: 1; }
.y-pole:focus { border-color: var(--c-border); box-shadow: var(--sloy-ten-udar); }
/* Поле, где ждут число: цифры вправо и одной ширины */
.y-pole-chislo { text-align: right; font-variant-numeric: tabular-nums; }
/* Поле с несохранённым значением — видно, что оно ждёт нажатия */
.y-pole-nesohraneno { border-color: var(--c-primary); box-shadow: var(--sloy-ten-udar); }
/* ЗАПРЕТ: Крутилок (стрелочек вверх/вниз) у числовых полей в этом языке НЕТ.
   Решение Юрия 11.08.2026. Они съедают ширину, налезают на подпись, а на экране
   пересчёта склада касание стрелочки молча меняет посчитанное человеком число.
   Запрет стоит на самом ПРИЗНАКЕ, а не на классе `y-pole`: класс — наше внутреннее
   соглашение, и первый же экран, собранный мимо него, выпал бы из-под запрета молча.
   Именно так и вышло в фулфилменте — запрет был написан полтора месяца назад и не
   работал ровно там, где вреднее всего. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* ─── ФЛАЖОК ─── */
.y-flazhok {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 18px; height: 18px; position: relative;
  background: var(--c-surface); border: 2px solid var(--c-border); outline: none; cursor: pointer;
}
.y-flazhok:checked { background: var(--c-primary); }
.y-flazhok:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid var(--c-primary-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.y-flazhok:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* ─── МЕТКА СОСТОЯНИЯ ─── */
/* Четыре и только четыре: в порядке · отстаёт · сломано · не знаем. */
.y-metka {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--o-2);
  font-size: var(--t-xs); font-weight: 800; white-space: nowrap;
  border: 1.5px solid transparent;
}
.y-metka-poryadok { background: var(--s-ok-bg);   color: var(--s-ok-ink);   border-color: var(--s-ok-mark); }
.y-metka-otstaet  { background: var(--s-warn-bg); color: var(--s-warn-ink); border-color: var(--s-warn-mark); }
.y-metka-slomano  { background: var(--s-bad-bg);  color: var(--s-bad-ink);  border-color: var(--s-bad-mark); }
.y-metka-neznaem  { background: var(--s-off-bg);  color: var(--s-off-ink);  border-color: var(--s-off-mark); }

/* Точка состояния — единственное круглое место в языке, круглая по смыслу */
.y-tochka { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; display: inline-block; }
.y-tochka-poryadok { background: var(--s-ok-mark); }
.y-tochka-otstaet  { background: var(--s-warn-mark); }
.y-tochka-slomano  { background: var(--s-bad-mark); }
.y-tochka-neznaem  { background: var(--s-off-mark); }

/* ─── ПЛИТКА-ИТОГ: одно число крупно ─── */
.y-plitki { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: var(--o-2); }
.y-plitka {
  background: var(--c-surface); border: 2px solid var(--c-line);
  padding: var(--o-2) var(--o-3);
}
.y-plitka .y-plitka-k { font-size: var(--t-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-3); }
.y-plitka .y-plitka-v { font-family: var(--f-zagolovok); font-size: var(--t-xl); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.y-plitka .y-plitka-d { font-size: var(--t-xs); color: var(--c-text-3); }
.y-plitka-slomano { border-color: var(--s-bad-mark); background: var(--s-bad-bg); }
.y-plitka-slomano .y-plitka-v { color: var(--s-bad-ink); }
.y-plitka-otstaet { border-color: var(--s-warn-mark); background: var(--s-warn-bg); }
.y-plitka-otstaet .y-plitka-v { color: var(--s-warn-ink); }

/* ─── ТАБЛИЦА ─── */
.y-tablica-obertka { overflow-x: auto; border: 2px solid var(--c-line); background: var(--c-surface); }
.y-tablica { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.y-tablica th {
  text-align: left; padding: var(--o-2) var(--o-3);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-text-3); background: var(--c-surface-2);
  border-bottom: 2px solid var(--c-line-strong); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.y-tablica td { padding: var(--o-2) var(--o-3); border-bottom: 1px solid var(--c-line); height: var(--vysota-stroki); }
.y-tablica tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-surface-2) 45%, var(--c-surface)); }
.y-tablica tbody tr:hover { background: var(--c-primary-soft); }
.y-tablica .y-vpravo { text-align: right; }
.y-tablica .y-po-centru { text-align: center; }

/* ─── ВКЛАДКИ ─── */
.y-vkladki { display: flex; gap: 0; overflow-x: auto; border-bottom: 2px solid var(--c-line-strong); }
.y-vkladka {
  padding: var(--o-2) var(--o-3);
  font-family: inherit; font-size: var(--t-base); font-weight: 700;
  color: var(--c-text-3); background: none; white-space: nowrap; cursor: pointer;
  border: 0; border-bottom: 3px solid transparent;
}
.y-vkladka:hover { color: var(--c-text); }
.y-vkladka-aktivnaya { color: var(--c-text); border-bottom-color: var(--c-primary); }
.y-vkladka:focus-visible { outline: 3px solid var(--c-primary); outline-offset: -3px; }

/* ─── БОКОВОЙ СПИСОК ─── */
.y-bokovoy { background: var(--c-surface-2); border-right: 2px solid var(--c-border); padding: var(--o-3) var(--o-2); }
.y-punkt {
  display: flex; align-items: center; gap: var(--o-2);
  padding: 6px var(--o-2); font-size: var(--t-base); font-weight: 600;
  border: 2px solid transparent; cursor: pointer; color: inherit; background: none; width: 100%; text-align: left;
}
.y-punkt:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
.y-punkt-aktivnyy {
  background: var(--c-primary); color: var(--c-primary-ink);
  border-color: var(--c-border); box-shadow: var(--sloy-ten-udar); font-weight: 800;
}
.y-punkt-schetchik {
  margin-left: auto; font-size: var(--t-xs); font-weight: 800; padding: 0 6px;
  background: var(--c-surface); border: 1.5px solid var(--c-line-strong);
}
.y-punkt-schetchik-goryachiy { background: var(--s-bad-mark); color: #fff; border-color: var(--s-bad-mark); }

/* ─── ЛЕНТА СОБЫТИЙ ─── */
/* Полоса слева вместо заливки строки: цвет говорит «насколько срочно»,
   а буквы остаются читаемыми. Заливка целой строки делает текст хуже. */
.y-lenta { border: 2px solid var(--c-line); background: var(--c-surface); }
.y-sobytie {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--o-3);
  align-items: center; padding: var(--o-2) var(--o-3);
  border-top: 1px solid var(--c-line);
}
.y-sobytie:first-child { border-top: 0; }
.y-sobytie-polosa { width: 4px; align-self: stretch; margin: calc(var(--o-2) * -1) 0 calc(var(--o-2) * -1) calc(var(--o-3) * -1); background: var(--s-off-mark); }
.y-sobytie-slomano .y-sobytie-polosa { background: var(--s-bad-mark); }
.y-sobytie-otstaet .y-sobytie-polosa { background: var(--s-warn-mark); }
.y-sobytie-poryadok .y-sobytie-polosa { background: var(--s-ok-mark); }
.y-sobytie-zagolovok { font-weight: 700; font-size: var(--t-base); line-height: 1.3; }
.y-sobytie-pod { font-size: var(--t-sm); color: var(--c-text-3); }
.y-sobytie-kogda { font-size: var(--t-xs); color: var(--c-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Метка происхождения события: проект, раздел, смысл */
.y-yarlyk {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 1px 5px; margin-right: 6px;
  border: 1.5px solid var(--c-line-strong); color: var(--c-text-3);
}

/* ─── ШТОРКА: повтор одного и того же схлопнут в одну строку ─── */
/* Образец — вкладка «События» в МП Кабинете: 43 строки свернулись в 16.
   ВНИМАНИЕ: Срочное в шторку не убирается НИКОГДА. */
.y-shtorka {
  display: flex; align-items: center; gap: var(--o-2);
  padding: var(--o-2) var(--o-3);
  background: var(--c-surface-2); border-top: 1px solid var(--c-line);
  font-size: var(--t-sm); color: var(--c-text-3); cursor: pointer; width: 100%; text-align: left; border-left: 0; border-right: 0; border-bottom: 0;
}
.y-shtorka:hover { color: var(--c-text); }
.y-shtorka b { color: var(--c-text); }

/* ─── ПОЛОСА ПРЕДУПРЕЖДЕНИЯ: над работой, а не поверх неё ─── */
.y-polosa {
  display: flex; align-items: center; gap: var(--o-2);
  padding: var(--o-2) var(--o-3);
  border: 2px solid var(--s-warn-mark); background: var(--s-warn-bg); color: var(--s-warn-ink);
  font-size: var(--t-sm); font-weight: 600;
}
.y-polosa-slomano { border-color: var(--s-bad-mark); background: var(--s-bad-bg); color: var(--s-bad-ink); }
.y-polosa-neznaem { border-color: var(--s-off-mark); background: var(--s-off-bg); color: var(--s-off-ink); }

/* ─── ПУСТОЕ СОСТОЯНИЕ ─── */
/* Пусто обязано говорить, ПОЧЕМУ пусто: «всё разобрано» и «не смогли прочитать» —
   разные вещи, и выглядеть одинаково они не должны. */
.y-pusto {
  padding: var(--o-8) var(--o-4); text-align: center;
  color: var(--c-text-3); font-size: var(--t-base);
  border: 2px dashed var(--c-line-strong);
}
.y-pusto b { display: block; color: var(--c-text); font-size: var(--t-md); margin-bottom: var(--o-1); }

/* ─── ВСПЛЫВАЮЩЕЕ ОКНО ─── */
/* ЗАПРЕТ: Серых окон самого браузера нет: ни вопросов, ни подтверждений. */
.y-zatemnenie {
  position: fixed; inset: 0; background: color-mix(in srgb, #000 45%, transparent);
  display: flex; align-items: center; justify-content: center; padding: var(--o-4); z-index: 100;
}
.y-okno {
  background: var(--c-surface); color: var(--c-text);
  border: 3px solid var(--c-border); box-shadow: var(--sloy-ten-sloy);
  max-width: 560px; width: 100%; max-height: 84vh; display: flex; flex-direction: column;
}
.y-okno-shapka { display: flex; align-items: center; gap: var(--o-2); padding: var(--o-3); border-bottom: 2px solid var(--c-line); font-weight: 800; }
.y-okno-telo { padding: var(--o-3); overflow: auto; }
.y-okno-niz { display: flex; gap: var(--o-2); justify-content: flex-end; padding: var(--o-3); border-top: 2px solid var(--c-line); }

/* ─── ПОДСКАЗКА «i» ─── */
/* ЗАПРЕТ: Абзацев-пояснений на экране нет — вместо них значок и подсказка.
   ВНИМАНИЕ: Подсказка живёт ОТДЕЛЬНЫМ слоем поверх страницы, а не внутри значка:
   внутри значка её обрезает горизонтальная прокрутка таблиц. На этом уже
   обожглись 09.08.2026 — из 145 значков 30 показать было физически негде.
   Разметку слоя ставит скрипт проекта; здесь только вид. */
.y-znachok-podskazki {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 auto;
  color: var(--c-text-3); cursor: help; vertical-align: middle;
}
.y-znachok-podskazki:hover { color: var(--c-text); }
.y-podskazka {
  position: fixed; z-index: 200; max-width: 340px;
  padding: var(--o-2) var(--o-3);
  background: var(--c-ink); color: var(--c-ink-text);
  border: 2px solid var(--c-border); box-shadow: var(--sloy-ten-sloy);
  font-size: var(--t-sm); line-height: 1.45; white-space: pre-line; pointer-events: none;
}

/* ─── ЗНАЧКИ ─── */
/* ЗАПРЕТ: Эмодзи-значков нет нигде и никогда. Только контурные значки одного набора. */
.y-ic { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.y-ic-melkiy { width: 13px; height: 13px; }
.y-ic-krupnyy { width: 19px; height: 19px; }

/* ─── ПРИБОР: показатель с движением ─── */
/* Цифра, её изменение и как было раньше. Живёт внутри клетки карты. */
.y-pribor { border: 2px solid var(--c-line); background: var(--c-surface); padding: var(--o-3); display: flex; flex-direction: column; gap: var(--o-2); }
.y-pribor-slomano { border-color: var(--s-bad-mark); box-shadow: 3px 3px 0 var(--s-bad-mark); }
.y-pribor-k { font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.y-pribor-v { font-family: var(--f-zagolovok); font-weight: 900; font-size: var(--t-2xl); line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--o-2); }
.y-pribor-sdvig { font-size: var(--t-sm); font-weight: 800; font-family: var(--f-ekran); }
.y-pribor-sdvig-hudshe { color: var(--s-bad-ink); }
.y-pribor-sdvig-luchshe { color: var(--s-ok-ink); }
.y-pribor-n { font-size: var(--t-sm); color: var(--c-text-3); line-height: 1.35; }

/* ─── КЛЕТКА КАРТЫ: первый экран «Пульта» ─── */
/* Строки — проекты, столбцы — пять разделов. Одно число в клетке. */
.y-karta { border-collapse: collapse; width: 100%; }
.y-karta th { font-size: var(--t-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-3); padding: var(--o-2); text-align: center; vertical-align: bottom; }
.y-karta th.y-karta-stroka { text-align: left; }
.y-karta td { padding: var(--o-1); }
.y-kletka {
  border: 2px solid var(--c-line); background: var(--c-surface);
  padding: var(--o-2); min-height: 62px; width: 100%;
  display: flex; flex-direction: column; gap: 3px; justify-content: center; text-align: center;
  cursor: pointer; font-family: inherit; color: inherit;
}
.y-kletka-chislo { font-family: var(--f-zagolovok); font-weight: 900; font-size: var(--t-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.y-kletka-pod { font-size: var(--t-xs); color: var(--c-text-3); line-height: 1.2; }
.y-kletka-slomano { background: var(--s-bad-bg); border-color: var(--s-bad-mark); box-shadow: 3px 3px 0 var(--s-bad-mark); }
.y-kletka-slomano .y-kletka-chislo { color: var(--s-bad-ink); }
.y-kletka-otstaet { background: var(--s-warn-bg); border-color: var(--s-warn-mark); }
.y-kletka-otstaet .y-kletka-chislo { color: var(--s-warn-ink); }
.y-kletka-neznaem { background: var(--s-off-bg); border-color: var(--s-off-mark); }
.y-kletka-neznaem .y-kletka-chislo { color: var(--s-off-ink); }
/* «Такого раздела у этого проекта нет» — не то же самое, что «есть, но молчит» */
.y-kletka-netu { background: none; border-style: dashed; border-color: var(--c-line); cursor: default; }
.y-kletka-netu .y-kletka-chislo { color: var(--c-text-3); font-weight: 700; }

/* ─── ДОСТУПНОСТЬ И ДВИЖЕНИЕ ─── */
@media (prefers-reduced-motion: reduce) {
  .y-knopka, .y-pole, .y-kletka { transition: none !important; animation: none !important; }
}