/* ===========================================================================
   labels.css — 10 цветов меток Trello + режим для дальтоников.
   Требует tokens.css.

   Тема одна — тёмная (см. шапку tokens.css), поэтому палитра здесь одна:
   ни @media (prefers-color-scheme), ни [data-theme] в файле больше нет.

   Разметка (три формы одного компонента):

     <span class="label label--green">Баг</span>              — с текстом
     <span class="label label--green label--compact"          — полоска на
           aria-label="Метка: зелёная — Баг"></span>            карточке
     <button class="label label--green label--select" …>      — выбор в поповере

   Каждый класс цвета задаёт четыре переменные и больше ничего:
     --label-bg      заливка
     --label-fg      текст на заливке (проверен ≥4.5:1, число в комментарии)
     --label-edge    внутренняя обводка 1px — отделяет чип от поверхности
     --label-letter  буква-индикатор для режима дальтоника

   Ключевое правило: цвет никогда не остаётся единственным носителем смысла.
   Полоска без текста несёт aria-label, а в режиме [data-colorblind="on"]
   получает и узор, и букву.

   Метка — не стеклянный элемент. На доске их десятки, и прозрачный чип на
   прозрачной колонке дал бы цвет, который зависит от того, что проехало под
   ним при скролле; посчитать такой контраст нельзя. Заливка непрозрачная.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Базовый чип
   --------------------------------------------------------------------------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  max-width: 100%;
  min-height: 20px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-xs);
  background-color: var(--label-bg);
  box-shadow: inset 0 0 0 1px var(--label-edge);
  color: var(--label-fg);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Полоска на лицевой стороне карточки. Ровно как в Trello: цвет без текста,
   пока пользователь не раскроет метки. Размеры кратны 4px. */
.label--compact {
  width: 40px;
  min-height: 8px;
  height: 8px;
  padding: 0;
  font-size: 0; /* текст внутри есть — он для скринридера, но не рисуется */
}

/* Кликабельный вариант в поповере выбора меток. */
.label--select {
  width: 100%;
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  justify-content: flex-start;
  font-size: var(--text-md);
  cursor: pointer;
  transition: filter var(--dur-instant) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.label--select:hover  { filter: brightness(0.94); }
.label--select:active { transform: translateY(1px); }
.label--select[aria-pressed="true"]::after {
  content: "";
  margin-left: auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  /* «галочка» — маска, не эмодзи: наследует --label-fg и потому всегда читаема */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.4 11.2 3.6 8.4l-1 1L6.4 13.2 14 5.6l-1-1z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.4 11.2 3.6 8.4l-1 1L6.4 13.2 14 5.6l-1-1z"/></svg>') center / contain no-repeat;
}

/* Контейнер меток на карточке. */
.label-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Выбор фона доски в меню: десять цветов по всей ширине растягивали меню на
   пол-экрана, и «Закрыть доску» с «Удалить доску» уезжали за нижний край —
   до них приходилось прокручивать. Сеткой те же десять образцов занимают два
   ряда, а название цвета остаётся в aria-label и в подсказке. */
.label-row--swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
}
.label-row--swatches .label--select {
  width: auto;
  min-height: var(--control-lg);
  padding: 0;
  font-size: 0;                    /* название читает скринридер, не глаз */
  justify-content: center;
}
.label-row--swatches .label--select[aria-pressed="true"]::after {
  margin-left: 0;                  /* галочка по центру образца */
}


/* ---------------------------------------------------------------------------
   2. ПАЛИТРА
      Заливки приглушены примерно на 12% относительно трелловских: чистый
      Trello-зелёный на почти чёрном фоне слепит. Чернила — #101418.

      Первое число — текст на заливке. Второе — сам чип против самой светлой
      поверхности, на которой он может оказаться: это не карточка #22272B, а
      непрозрачный эквивалент плотного стекла --glass-thick-solid #232931
      (поповер выбора меток). Худший случай — «чёрная» метка: 3.93 при
      требовании 3:1 к нетекстовой графике.

      Обводка на тёмном фоне косметическая — край чипа и так различим, —
      поэтому одно значение rgba(0,0,0,.35) на все десять цветов.
   --------------------------------------------------------------------------- */
.label--green  { --label-bg: #45BC8A; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "З"; } /* текст 7.76 | чип 6.15 */
.label--yellow { --label-bg: #DCB935; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "Ж"; } /* текст 9.72 | чип 7.70 */
.label--orange { --label-bg: #E59355; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "О"; } /* текст 7.61 | чип 6.03 */
.label--red    { --label-bg: #E1655D; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "К"; } /* текст 5.48 | чип 4.34 */
.label--purple { --label-bg: #8F80D8; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "Ф"; } /* текст 5.50 | чип 4.36 */
.label--blue   { --label-bg: #4E8DE6; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "С"; } /* текст 5.53 | чип 4.38 */
.label--sky    { --label-bg: #61AFC9; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "Г"; } /* текст 7.47 | чип 5.92 */
.label--lime   { --label-bg: #85B33F; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "Л"; } /* текст 7.50 | чип 5.94 */
.label--pink   { --label-bg: #D067A8; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "Р"; } /* текст 5.45 | чип 4.32 */
.label--black  { --label-bg: #7A8598; --label-fg: #101418; --label-edge: rgba(0,0,0,.35); --label-letter: "Ч"; } /* текст 4.96 | чип 3.93 */

/* Цвет обложки карточки повторяет палитру меток — это те же десять значений
   из dto.Card.CoverColor, поэтому отдельного набора переменных нет. */

/* ---------------------------------------------------------------------------
   2а. ЧИП, КОТОРОМУ ЗАЛИВКА ПРИШЛА ИНЛАЙНОМ

   Три выбора цвета в разметке рисуются классом .label, но заливку получают не
   от .label--*, а из атрибута style (viewmodel.ColorVar задаёт только
   --label-bg): обложка карточки, цвет колонки и фон доски. Класса цвета у них
   нет, значит --label-fg задать некому — а `color: var(--label-fg)` без
   значения не «пропускается», он делает объявление невычислимым, и цвет
   молча наследуется от поповера, то есть становится светлым. На светлых
   заливках палитры это 1.31–2.38:1: подпись «жёлтая» на жёлтом не читается,
   а галочка выбранного варианта (background-color: currentColor) не видна.

   Чернила назначаются по атрибуту, который в разметке уже есть, — трогать
   шаблоны не потребовалось. Пустое значение (кнопки «Без обложки» и «Без
   цвета») исключено: заливки у них нет, и текст там обязан остаться светлым.

     обложка и колонка — палитра меток, заливки светлые → чернила 4.96–9.72;
     фон доски        — BoardColors тёмные → белый 4.66–7.65
                        (унаследованный --text давал 4.00 на зелёном).
   --------------------------------------------------------------------------- */
.label[data-card-cover]:not([data-card-cover=""]),
.label[data-list-color]:not([data-list-color=""]) {
  --label-fg: #101418;
  --label-edge: rgba(0,0,0,.35);
}
.label[data-board-color] {
  --label-fg: var(--text-on-board);
  --label-edge: rgba(0,0,0,.35);
}

/* ---------------------------------------------------------------------------
   3. РЕЖИМ ДЛЯ ДАЛЬТОНИКОВ — <html data-colorblind="on">

   Настройка доступности, а не оформления: она пережила уход светлой темы и
   живёт в localStorage под ключом trololo.colorblind.

   Две независимые подсказки поверх цвета:
     а) узор — десять различимых по форме заливок (наклон, шаг, точки, сетка);
     б) буква — первая буква русского названия цвета: З Ж О К Ф С Г Л Р Ч.

   Все десять заливок светлые, чернила тёмные, поэтому полоса узора всегда
   белая: она уводит фон ОТ цвета текста, а не к нему, и контраст только
   растёт. Худший случай — красная #E1655D под белым 50% → #F0B2AE,
   текст #101418 = 10.29 (было 5.48).
   --------------------------------------------------------------------------- */
:root[data-colorblind="on"] .label {
  --label-pattern: rgba(255, 255, 255, 0.5);
  background-image: var(--label-texture);
  background-size: var(--label-texture-size, auto);
}

/* Десять узоров. Различаются наклоном, шагом и типом (полоса / точка / сетка),
   а не цветом — именно это и требуется при дейтеранопии и протанопии. */
:root[data-colorblind="on"] .label--green {
  --label-texture: repeating-linear-gradient(45deg,
      var(--label-pattern) 0 3px, transparent 3px 8px);
}
:root[data-colorblind="on"] .label--yellow {
  --label-texture: repeating-linear-gradient(-45deg,
      var(--label-pattern) 0 3px, transparent 3px 8px);
}
:root[data-colorblind="on"] .label--orange {
  --label-texture: repeating-linear-gradient(90deg,
      var(--label-pattern) 0 2px, transparent 2px 7px);
}
:root[data-colorblind="on"] .label--red {
  --label-texture: repeating-linear-gradient(0deg,
      var(--label-pattern) 0 2px, transparent 2px 6px);
}
:root[data-colorblind="on"] .label--purple {
  --label-texture: radial-gradient(var(--label-pattern) 1.5px, transparent 1.6px);
  --label-texture-size: 7px 7px;
}
:root[data-colorblind="on"] .label--blue {
  --label-texture:
      repeating-linear-gradient(45deg,  var(--label-pattern) 0 1.5px, transparent 1.5px 7px),
      repeating-linear-gradient(-45deg, var(--label-pattern) 0 1.5px, transparent 1.5px 7px);
}
:root[data-colorblind="on"] .label--sky {
  --label-texture: repeating-linear-gradient(45deg,
      var(--label-pattern) 0 1.5px, transparent 1.5px 12px);
}
:root[data-colorblind="on"] .label--lime {
  --label-texture:
      repeating-linear-gradient(0deg,  var(--label-pattern) 0 1.5px, transparent 1.5px 8px),
      repeating-linear-gradient(90deg, var(--label-pattern) 0 1.5px, transparent 1.5px 8px);
}
:root[data-colorblind="on"] .label--pink {
  --label-texture: radial-gradient(var(--label-pattern) 1px, transparent 1.1px);
  --label-texture-size: 4px 4px;
}
:root[data-colorblind="on"] .label--black {
  --label-texture: repeating-linear-gradient(135deg,
      var(--label-pattern) 0 4px, transparent 4px 9px);
}

/* Буква перед текстом метки. */
:root[data-colorblind="on"] .label::before {
  content: var(--label-letter, "");
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--label-fg);
  color: var(--label-bg);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* Полоска без текста в режиме дальтоника вырастает, чтобы вместить букву:
   8px → 16px по высоте, ширина по содержимому, но не меньше 24px. */
:root[data-colorblind="on"] .label--compact {
  height: 16px;
  min-height: 16px;
  width: auto;
  min-width: 24px;
  padding: 0 var(--space-1);
  font-size: 0;
}
:root[data-colorblind="on"] .label--compact::before { margin: 0 auto; }

/* ---------------------------------------------------------------------------
   4. Печать — узор и буква включаются всегда: на монохромном принтере цвет
      исчезает совсем.
   --------------------------------------------------------------------------- */
@media print {
  .label {
    background-image: repeating-linear-gradient(45deg,
        rgba(0, 0, 0, 0.35) 0 3px, transparent 3px 8px);
    box-shadow: none;
    border: 1px solid #000;
    color: #000;
  }
}