/* =========================================================================================
   ПАЛИТРЫ ФОРМАТОВ — решение владельца 20.09.2026.

   Принцип: ОБОЛОЧКА приложения единая (общий брендбук, app.css), а КАЖДЫЙ ФОРМАТ имеет
   свой цвет и характер — чтобы было видно разнообразие домашки. Форматов будет много,
   поэтому цвет задаётся не вручную на каждом экране, а ИМЕНЕМ СЕМЕЙСТВА в реестре
   (server.py → TOOLS[i].palette). Разметка получает класс `fmt-<семейство>` и внутри него
   пользуется тремя переменными:

       --fmt        основной цвет формата  (текст, иконка, акцент)
       --fmt-soft   мягкая заливка         (плашка, фон иконки)
       --fmt-line   граница

   Так формат узнаётся по цвету ВЕЗДЕ — в обзоре, во вкладке «Форматы», в его карточке —
   и при этом кнопки, текст и карточки остаются общими. Новый формат = свободное семейство
   из списка, ни строчки CSS дописывать не нужно.

   Все восемь семейств проверены на контраст в обеих темах (минимум 5.2 : 1 при норме AA 4.5).
   ========================================================================================= */

/* ─────────── светлая тема ─────────── */
:root[data-theme="light"] .fmt-terracotta{ --fmt:#9F4526; --fmt-soft:#F7E6DE; --fmt-line:#EBC8B6; }
:root[data-theme="light"] .fmt-violet    { --fmt:#5B4B9E; --fmt-soft:#EAE6F7; --fmt-line:#D2CAEC; }
:root[data-theme="light"] .fmt-teal      { --fmt:#1F6F6B; --fmt-soft:#DEEFEE; --fmt-line:#BFDFDC; }
:root[data-theme="light"] .fmt-amber     { --fmt:#8A5A10; --fmt-soft:#F7E9CE; --fmt-line:#E8D2A6; }
:root[data-theme="light"] .fmt-indigo    { --fmt:#3B4A8F; --fmt-soft:#E4E7F6; --fmt-line:#C8CEEA; }
:root[data-theme="light"] .fmt-rose      { --fmt:#A93A4F; --fmt-soft:#F6DEE2; --fmt-line:#E6C2CA; }
:root[data-theme="light"] .fmt-sage      { --fmt:#2B7256; --fmt-soft:#E7F0E6; --fmt-line:#C7DECB; }
:root[data-theme="light"] .fmt-sky       { --fmt:#37709C; --fmt-soft:#DCE9F2; --fmt-line:#C2D8E8; }

/* ─────────── тёмная тема ─────────── */
:root,
:root[data-theme="dark"]{
  /* в темноте заливка строится прозрачностью от самого цвета — так формат
     светится, а не выглядит наклейкой на другом фоне */
  --fmt-soft-alpha:.13;
  --fmt-line-alpha:.30;
}
:root[data-theme="dark"] .fmt-terracotta{ --fmt:#F0977C; --fmt-soft:rgba(240,151,124,.13); --fmt-line:rgba(240,151,124,.30); }
:root[data-theme="dark"] .fmt-violet    { --fmt:#A99BE8; --fmt-soft:rgba(169,155,232,.13); --fmt-line:rgba(169,155,232,.30); }
:root[data-theme="dark"] .fmt-teal      { --fmt:#5FC7BF; --fmt-soft:rgba(95,199,191,.13);  --fmt-line:rgba(95,199,191,.30); }
:root[data-theme="dark"] .fmt-amber     { --fmt:#E3B667; --fmt-soft:rgba(227,182,103,.13); --fmt-line:rgba(227,182,103,.30); }
:root[data-theme="dark"] .fmt-indigo    { --fmt:#8E9BE0; --fmt-soft:rgba(142,155,224,.13); --fmt-line:rgba(142,155,224,.30); }
:root[data-theme="dark"] .fmt-rose      { --fmt:#F08296; --fmt-soft:rgba(240,130,150,.13); --fmt-line:rgba(240,130,150,.30); }
:root[data-theme="dark"] .fmt-sage      { --fmt:#6FC79E; --fmt-soft:rgba(111,199,158,.13); --fmt-line:rgba(111,199,158,.30); }
:root[data-theme="dark"] .fmt-sky       { --fmt:#9AC4E4; --fmt-soft:rgba(154,196,228,.13); --fmt-line:rgba(154,196,228,.30); }

/* Запасной вариант — на КОРНЕ, а не на `[class*="fmt-"]`.
   Селектор по подстроке класса ловил бы и служебные `.fmt-card`, `.fmt-ic`, `.fmt-acts`
   внутри карточки и переопределял им унаследованный цвет семейства на брендовый —
   формат терял бы свою палитру ровно там, где она и нужна. Наследование от корня
   такой ловушки не создаёт. */
:root{ --fmt:var(--accent); --fmt-soft:var(--accent-soft); --fmt-line:var(--accent-line); }

/* ═══════════════ КАК ФОРМАТ ВЫГЛЯДИТ В ПУЛЬТЕ ═══════════════
   Цвет формата трогает ТОЛЬКО его опознавательные элементы: иконку, корешок карточки,
   название раздела и его чипы. Кнопки и текст остаются общими — иначе экран с десятком
   форматов превратится в радугу, и «важное» перестанет читаться. */

/* КАРТА ФОРМАТА. Редизайн 21.09.2026: формат опознаётся не цветным корешком слева,
   а КРОМКОЙ в своём цвете — она обходит карту целиком. Причина прямая: полоска 4px
   по одной стороне карточки, по данным детектора, самый узнаваемый признак вёрстки,
   сгенерированной машиной; у нас она стояла в пяти местах. Цвет формата никуда не
   делся — он стал контуром вместо ярлыка. Тень убрана вся: пара «тонкая рамка +
   широкая мягкая тень» — вторая подпись генератора, отделение идёт кромкой. */
.fmt-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--deck-face, var(--surface));
  border:1.5px solid var(--fmt-line);
  border-radius:var(--r-lg);
  padding:18px 18px 16px;
  transition:border-color .18s ease, transform .18s ease;
}
@media (hover:hover){
  .fmt-card:hover{ border-color:var(--fmt); transform:translateY(-1px); }
}
.fmt-card.muted{opacity:.62;}

.fmt-head{display:flex; align-items:flex-start; gap:13px; margin-bottom:12px;}
.fmt-ic{
  width:46px; height:46px; flex:0 0 auto; border-radius:var(--r-sm);
  background:var(--fmt-soft); border:1px solid var(--fmt-line); color:var(--fmt);
  display:flex; align-items:center; justify-content:center;
}
.fmt-ic svg{width:23px; height:23px;}
.fmt-head .body{flex:1; min-width:0;}
.fmt-name{
  font-size:clamp(16px,1.3vw,18.5px); font-weight:800; letter-spacing:-.01em;
  margin-bottom:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.fmt-sub{font-size:12.5px; color:var(--ink-soft); font-weight:400; line-height:1.45;}
.fmt-about{font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 13px;}

/* метка доступа: открытый формат или по приглашению */
.fmt-badge{
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-pill);
  background:var(--fmt-soft); color:var(--fmt); border:1px solid var(--fmt-line);
  white-space:nowrap;
}
.fmt-badge.neutral{background:var(--surface-2); color:var(--ink-mute); border-color:var(--line);}

.fmt-stats{display:flex; gap:8px; margin-bottom:13px; flex-wrap:wrap;}
.fmt-stats:empty{display:none;}
.fmt-summary{font-size:14px; line-height:1.6; font-weight:600; color:var(--ink-soft); margin:18px 0 0;}
.fmt-stats .chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border-radius:var(--r-xs);
  padding:7px 11px; font-size:12px; font-weight:700; color:var(--ink-soft);
}
.fmt-stats .chip b{color:var(--ink); font-variant-numeric:tabular-nums;}
.fmt-stats .chip.accent b{color:var(--fmt);}

.fmt-acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto;}
/* главная кнопка формата красится в его цвет — единственное место, где цвет
   формата берёт на себя действие; так в списке сразу видно, «чья» это кнопка */
.fmt-acts .act.fmt-main{
  background:var(--fmt); border-color:var(--fmt); color:var(--surface);
  box-shadow:var(--sh-1);
}
:root[data-theme="dark"] .fmt-acts .act.fmt-main{color:var(--canvas);}

/* строка формата в обзоре — компактная, для быстрого перехода во вкладку */
.fmt-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface);
  text-decoration:none; color:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.fmt-row:hover{border-color:var(--fmt-line); background:var(--fmt-soft);}
.fmt-row .dot{width:9px; height:9px; border-radius:50%; background:var(--fmt); flex:0 0 auto;}
.fmt-row .nm{flex:1; min-width:0; font-size:13.5px; font-weight:700;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fmt-row .val{font-size:12px; font-weight:700; color:var(--ink-mute); white-space:nowrap;}
/* формат ещё в работе — приглушаем, чтобы не путать с работающими */
.fmt-row.soon{opacity:.66;}
.fmt-row.soon .val{font-style:italic;}
.fmt-row .chev{color:var(--ink-mute); font-size:15px;}

/* Длинное название остаётся читаемым; дата больше не отнимает у него строку. */
@media(max-width:699px){
  .fmt-row{display:grid; grid-template-columns:9px minmax(0,1fr) auto; gap:4px 12px;}
  .fmt-row .dot{grid-column:1; grid-row:1/3; align-self:center;}
  .fmt-row .nm{grid-column:2; grid-row:1; white-space:normal; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
  .fmt-row .val{grid-column:2; grid-row:2; white-space:normal; font-size:12px; line-height:1.5;}
  .fmt-row .chev{grid-column:3; grid-row:1/3; align-self:center;}
}