/* Скин «Кибер» — слой поверх tokens.css и base.css (выбран заказчиком 30.09.2026, ступень «Средний»).

   Как устроен выбор. Файл подключён всегда, последним; у кого в меню человека выбран «Прежний вид»,
   у того таблица стилей выключена скриптом в base.html (link.disabled) — и сайт рисуется одними
   tokens.css + base.css, как до 30.09. Поэтому здесь НЕТ приставок-селекторов: правила обычные.
   Прежний вид живёт на время привыкания; когда его уберут, этот слой можно влить в base.css.

   Что скин меняет и чего НЕ трогает.
   Меняет каркас и короткие метки: линии вместо теней, прямые углы, уголок-засечка у карточки,
   номер раздела /01, заголовок страницы узким капсом, заголовки карточек и кнопки — моно-капсом,
   главная кнопка чёрная со стрелкой.
   Не трогает то, что читают часами: текст, подписи, таблицы, статусы, реплики чата — гротеск и
   размеры из tokens.css. Это граница, из-за которой 06.08 сняли «Терминал»: моноширинная проза и
   мелкий капс с разрядкой. Капс здесь — только на метках в одно-три слова и не мельче 12px.

   Палитры. Светлая и тёплая — из tokens.css (прежние цвета статусов), но акцент свой: глубокий
   фиолетовый вместо синего (вариант «Б · сдержанный», выбран заказчиком 01.10.2026 по рефу
   кибер-брутализма). Лайм на светлых — только текущий шаг отчёта; статусы — рамкой цвета смысла,
   без заливки, чтобы на экране было меньше цветных пятен. Тёмная переопределена целиком — палитра
   сайта трендвотчинга: нейтральный чёрный, лайм — «живое / ждёт вас», лаванда — акцент. Контрасты
   всех трёх проверяет tests/test_web_skin.py.

   Свои токены скина — с приставкой --cy-; в реестр UI-кита они не входят: реестр описывает
   tokens.css, а это слой с ограниченным сроком сосуществования. */

/* ── То, что в прежнем виде спрятано base.css: номера разделов, полоса шагов сборки ── */
main.container { counter-reset: sec; }
main.container .card > h2:first-child, main.container .slideshead > h2 { counter-increment: sec; }
main.container .accbody > .card > h2:first-child { counter-increment: none; }

.lane { align-items: baseline; gap: var(--s3); font-size: var(--fs-md); color: var(--ink); }
.lane .count { order: -1; line-height: 1; font-weight: 700; color: var(--ink); min-width: 1ch; }
.lane.first .count { color: var(--accent); }

.pbar { display: flex; align-items: center; gap: var(--s3); margin: var(--s1) 0 var(--s3); }
.pbar .segs { flex: 1; display: flex; gap: var(--s1); }
.pbar .seg { flex: 1; height: 4px; background: var(--line); overflow: hidden; position: relative; }
.pbar .seg.done { background: var(--ink); }
.pbar .seg.on::after { content: ""; position: absolute; inset: 0; width: 50%; background: var(--accent); }
.pbar .pn { font: 600 var(--fs-2xs)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Страницы настроек: «Сохранить» залита только там, где человек что-то изменил (класс .dirty
   ставит скрипт в base.html). Семь залитых кнопок подряд не называли главного действия. */
body[data-page="settings"] .card .btn.primary:not(.dirty):hover { filter: none; background: var(--accent-soft); color: var(--accent); }

:root {
  --ground: #f0f1f2; --surface: #fbfbfb; --surface-2: #f1f2f3; --ink: #0c0d0e; --line: #d3d6da; --line-2: #e4e6e9;
  --accent: #5b3fd9; --accent-soft: #eeebfb; --accent-on: #ffffff;
  --card-border: #c4c8cd; --cy-lime: #d9ff3d; --cy-dot: #cdd0d4; --cy-arrow: #9d8cf0; --cy-field: #9da3aa;
  --sh-1: none; --sh-lift: none; --sh-2: 0 0 0 1px var(--ink); --r-sm: 0px; --r: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px;
  --cy-h1: 40px; --cy-h1-sm: 30px; --cy-num: 52px; --cy-name: 21px;
  --cy-mono: "Cascadia Mono", "Cascadia Code", "Lucida Console", Consolas, monospace;
  --cy-cond: Bahnschrift, "Arial Narrow", "Roboto Condensed", sans-serif;
}
body { background-color: var(--ground);
  background-image: radial-gradient(circle, var(--cy-dot) 1px, transparent 1.2px); background-size: 24px 24px; }
.topbar { background: var(--surface); backdrop-filter: none; border-bottom: 1px solid var(--ink); }
.topbar.scrolled { box-shadow: none; border-bottom-color: var(--ink); }
.brand { font: 700 var(--fs-md)/1 var(--cy-mono); text-transform: uppercase; letter-spacing: .04em; }
.brand::after { content: "_"; color: var(--accent); margin-left: -4px; }
/* Знак в шапке — сама иконка вкладки (static/favicon.svg): лаймовый лист отчёта с графиком на
   чёрном. Галочка прежнего вида остаётся в разметке и здесь спрятана. */
.brand .bmark { border-radius: 0; box-shadow: none; background: url("../favicon.svg") center / contain no-repeat; }
.brand .bmark .ico { display: none; }
.brand .sub { order: 3; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.hmenu > summary, .topbar-right > .btn { border-radius: 0; border-color: var(--ink); }
.hmenu .ava { border-radius: 0; }

h1 { font: 700 var(--cy-h1)/1 var(--cy-cond); font-stretch: 78%; text-transform: uppercase; letter-spacing: 0; }
.card, .check, .acc > summary, .accbody, .decide { background: var(--surface); border: 1px solid var(--card-border); position: relative; }
.decide { backdrop-filter: none; border-color: var(--ink); }
.card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px;
  border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); pointer-events: none; }
.card::after { content: "+"; position: absolute; top: -9px; right: -5px; font: 400 var(--fs-md)/1 var(--cy-mono); color: var(--ink-3); pointer-events: none; }
.project-card::after { content: "↗"; top: var(--s3); right: var(--s3); font-size: var(--fs-lg); color: var(--accent); }

/* Заголовок карточки — моно-капсом: это короткая метка, а не чтение */
main.container .card > h2:first-child, main.container .slideshead > h2 { font: 700 var(--fs-xs)/1.3 var(--cy-mono); text-transform: uppercase; letter-spacing: .07em; }
main.container .card > h2:first-child::before, main.container .slideshead > h2::before {
  content: "/" counter(sec, decimal-leading-zero); background: none; padding: 0; color: var(--accent); font: 700 var(--fs-xs)/1.3 var(--cy-mono); vertical-align: 0; margin-right: var(--s2); }
main.container .card > h2:first-child .pill, main.container .card > h2:first-child .count { text-transform: none; letter-spacing: 0; }

/* Кнопки — моно-капсом; главная чёрная со стрелкой */
.btn { font: 600 var(--fs-2xs)/1.5 var(--cy-mono); text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: var(--surface); }
.btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn.primary, body[data-page="settings"] .card .btn.primary.dirty { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: none; }
.btn.primary::after { content: "↗"; color: var(--cy-arrow); font-size: var(--fs-md); line-height: 1; margin-left: var(--s2); order: 10; }
.btn.primary:hover { filter: none; background: var(--accent); border-color: var(--accent); color: var(--accent-on); box-shadow: none; }
.btn.primary:hover::after { color: var(--accent-on); }
body[data-page="settings"] .card .btn.primary:not(.dirty) { background: var(--surface); color: var(--ink); border-color: var(--ink); }
body[data-page="settings"] .card .btn.primary:not(.dirty)::after { display: none; }
.btn.danger { color: var(--crit); border-color: var(--crit); }
/* Стрелка — «дальше»; у необратимого в окне подтверждения её нет. */
.confirm.danger .cgo::after { display: none; }
.btn kbd, .btn.primary kbd { background: transparent; border: 1px solid currentColor; opacity: .6; color: inherit; border-radius: 0; }
.btn[disabled], .btn[aria-disabled="true"] { border-style: dashed; }

/* Метки: форма строгая, цвет и шрифт прежние */
.pill, .chip, .cnt, .st { border-radius: 0; }
.chip.on { background: var(--ink); color: var(--surface); }

.field, input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], input[type="email"], input[type="url"], select, textarea { border-color: var(--cy-field); border-radius: 0; background-color: var(--surface); }
input[type="file"]::file-selector-button { border-radius: 0; border-color: var(--ink); font: 600 var(--fs-2xs)/1.5 var(--cy-mono); text-transform: uppercase; }

thead th { border-bottom: 1px solid var(--ink); }
th, td { border-bottom: 1px solid var(--line-2); }
td.muted { font-family: var(--mono); font-size: var(--fs-2xs); }

/* Главная */
.lane { border-top: 1px solid var(--ink); padding-top: var(--s3); align-items: baseline; }
.lane .count { font: 700 var(--cy-num)/.85 var(--cy-cond); font-stretch: 78%; }
.project-card.waiting { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--accent); }
.project-card:hover { transform: none; border-color: var(--accent); box-shadow: none; }
.project-name { font: 700 var(--cy-name)/1.05 var(--cy-cond); font-stretch: 82%; text-transform: uppercase; padding-right: var(--s5); }
.project-name .go { display: none; }

/* Путь отчёта: текущий шаг — лаймовой плашкой, единственное место кислотного цвета */
.path { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s1) 0; }
.path .st { font-size: var(--fs-xs); }
.path .st .n { border: 0; background: none; width: auto; font-family: var(--cy-mono); color: var(--ink-3); border-radius: 0; }
.path .st .n::before { content: "/"; }
.path .st.done .n { background: none; color: var(--good); }
.path .st.on { color: #0c0d0e; background: var(--cy-lime); padding: var(--s1) var(--s3); }
.path .st.on .n { background: none; color: #0c0d0e; box-shadow: none; }
.path .sep { background: var(--line); width: 24px; margin: 0 var(--s2); }

.check > .chead { background: transparent; border-bottom: 1px solid var(--crit); font: 700 var(--fs-2xs)/1.5 var(--cy-mono); text-transform: uppercase; letter-spacing: .07em; }
.check > .chead .tally { font-family: var(--sans); }
.crow .mk { border-radius: 0; }
.slidestage, .slidethumb { border-color: var(--ink); border-radius: 0; }
.slidenav { border-radius: 0; border-color: var(--ink); box-shadow: none; color: var(--ink); }
.cbubble { border-radius: 0; }
.cmsg.sys .cbubble { background: transparent; border: 1px solid var(--card-border); }
.chatform { border: 1px solid var(--ink); border-radius: 0; }
.chatform .cbtn { border-radius: 0; }
.chatform .chatsend::after { display: none; }
.chatform .chatinput, .chatform .chatinput:focus { border: 0; background: transparent; }
.footer { border-top: 1px solid var(--line); padding-top: var(--s4); }

/* Светлые фоны (светлый и тёплый): меньше цветных пятен, один шрифт у меток одного ряда */
:root:not([data-pal="dark"]) .hmenu > summary { font: 600 var(--fs-2xs)/1.5 var(--cy-mono); text-transform: uppercase; letter-spacing: .05em; }
:root:not([data-pal="dark"]) .pill { background: transparent; border: 1px solid currentColor; font-weight: 600; }
:root:not([data-pal="dark"]) .pill.muted { border-color: var(--line); }
:root:not([data-pal="dark"]) .pill.acc { background: var(--accent-soft); }
:root:not([data-pal="dark"]) .project-card.waiting { box-shadow: inset 0 -4px 0 var(--ink); }
/* Сети в отчёте — названия, а не статус «норма»: нейтральные метки в рамке */
:root:not([data-pal="dark"]) .meta-line .pill.good { color: var(--ink-2); border-color: var(--line); font: 600 var(--fs-2xs)/1.6 var(--cy-mono); text-transform: uppercase; letter-spacing: .04em; }
:root:not([data-pal="dark"]) .group-filter .chip { background: transparent; border: 1px solid var(--line); font: 600 var(--fs-2xs)/1.6 var(--cy-mono); text-transform: uppercase; letter-spacing: .04em; }
:root:not([data-pal="dark"]) .group-filter .chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
/* «Удалить» в строке таблицы — редкое действие: тихое, красное только при наведении */
:root:not([data-pal="dark"]) td .btn.danger { border-color: transparent; color: var(--ink-3); }
:root:not([data-pal="dark"]) td .btn.danger:hover { border-color: var(--crit); color: var(--crit); background: var(--crit-soft); }

/* Тёплая тема: статусы из tokens.css, акцент — тот же фиолетовый, свои точки фона и рамки. */
:root[data-pal="warm"] { --accent: #5b3fd9; --accent-soft: #ebe5f6; --accent-on: #ffffff;
  --card-border: #cbc4b8; --cy-dot: #d8d1c5; --cy-field: #a39b8e; }

/* Телефон: капс-кнопки длиннее обычных — ужимаем разрядку и поля, заголовок меньше. */
@media (max-width: 700px) {
  h1 { font-size: var(--cy-h1-sm); }
  .btn { letter-spacing: .02em; padding-left: var(--s3); padding-right: var(--s3); }
  .decide .btn.primary::after { display: none; }
  .lane .count { font-size: var(--cy-h1); }
  .path .st.on { padding: var(--s0) var(--s2); }
  .path .sep { width: 12px; margin: 0 var(--s1); }
  body { background-size: 20px 20px; }
}

/* ───────── Тёмная тема — палитра сайта трендвотчинга: нейтральный чёрный, белый текст,
   лайм — «живое/ждёт», лаванда — акцент и метки. Синевы в фоне и тексте нет. ───────── */
:root[data-pal="dark"] {
  --ground: #121213; --surface: #19191b; --surface-2: #1f1f22; --ink: #ececec; --ink-2: #b8b8b8; --ink-3: #9c9c9c;
  --line: #2b2b2e; --line-2: #232326; --accent: #b9a0ff; --accent-soft: #2a2340; --accent-on: #111111;
  --accent-on-soft: rgba(17, 17, 17, .4);
  --good: #c7f000; --good-soft: #252c0c; --warn: #e6b450; --warn-soft: #30280f; --crit: #ff8a80; --crit-soft: #3a1f1d;
  --muted-soft: #232326; --label: #b8b8b8; --card-border: #303034; --cy-dot: #1d1d20; --cy-arrow: #111111; --cy-field: #46464b;
  --cy-lime: #c7f000;
}
:root[data-pal="dark"] .btn.primary, :root[data-pal="dark"] body[data-page="settings"] .card .btn.primary.dirty {
  background: var(--accent); border-color: var(--accent); color: #111; }
:root[data-pal="dark"] .btn.primary:hover { background: var(--cy-lime); border-color: var(--cy-lime); color: #111; }
:root[data-pal="dark"] .btn.primary:hover::after { color: #111; }
:root[data-pal="dark"] .btn:not(.primary):not(.danger):hover { background: var(--accent-soft); color: #e6deff; border-color: var(--accent); }
:root[data-pal="dark"] .btn, :root[data-pal="dark"] .hmenu > summary, :root[data-pal="dark"] .topbar-right > .btn { border-color: #5a5a60; }
:root[data-pal="dark"] .topbar, :root[data-pal="dark"] .lane, :root[data-pal="dark"] thead th { border-color: #3a3a3f; }
:root[data-pal="dark"] .pill.acc { background: #3a2f5c; color: #e6deff; }
:root[data-pal="dark"] .chip.on { background: var(--accent); color: #111; }
:root[data-pal="dark"] .lane.first .count { color: var(--cy-lime); }
:root[data-pal="dark"] .project-card.waiting { border-color: #5a5a60; box-shadow: inset 0 -4px 0 var(--cy-lime); }
:root[data-pal="dark"] .active-run.attention { color: var(--ink); }
:root[data-pal="dark"] .active-run.attention::before { background: var(--cy-lime); }
:root[data-pal="dark"] .path .st.on .n { color: #111; }
:root[data-pal="dark"] .path .st:not(.on) { background: none; }
:root[data-pal="dark"] .pbar .seg.on::after { background: var(--cy-lime); }
:root[data-pal="dark"] .pbar .seg.done { background: var(--cy-lime); }
:root[data-pal="dark"] .steps .s.on .ic::after { border-top-color: var(--cy-lime); }
:root[data-pal="dark"] .steps .s.on { color: var(--ink); }
:root[data-pal="dark"] .cmsg.pm .cbubble { background: #2a2340; color: #ece6ff; }
:root[data-pal="dark"] .slidestage, :root[data-pal="dark"] .slidethumb, :root[data-pal="dark"] .slidenav,
:root[data-pal="dark"] .chatform, :root[data-pal="dark"] .decide { border-color: #5a5a60; }
:root[data-pal="dark"] .card::before { border-color: var(--ink); }