/* Скрепка документов в строке списка («Приём», «История площадок», «Метчинг»).
 *
 * Разметку строит `js/ui/detecto/docClip.js`; макет — владельца 27.09.2026,
 * раздел 3 «Скрепка в списках». Свой корень токенов от ГЛОБАЛЬНЫХ токенов темы
 * (`--text`, `--muted`, `--primary`, `--page-bg-2`): скрепка живёт у трёх
 * хозяев со своими словарями (`--pv-*`, `--ph-*`, `--mx-*`), и опираться на
 * чужие значило бы потерять цвет у двух из трёх.
 *
 * Цвета значат одно на всех страницах: зелёный — подлинный и сошлось;
 * янтарный — подлинный, но чего-то не смотрели; красный — не прошёл, нюансы
 * или расхождение; синий — идёт проверка; серый — проверки не было.
 *
 * Состояние — атрибутом `data-s`, размер — переменной `--dclip-size`: хозяин
 * меняет размер одной строкой и не спорит со специфичностью цветов. */

/* Токены — и у плавающей подсказки в `body` (`.dclip-float`, `docClipPop.js`):
   она живёт вне обёртки скрепки, и без своего блока переменных у неё не было
   бы ни цвета, ни фона. */
.dclip-float,
.dclip-wrap {
  --dclip-size: 32px;
  --dclip-fg: var(--muted);
  --dclip-bg: color-mix(in srgb, var(--text) 7%, transparent);
  --dclip-bg-h: color-mix(in srgb, var(--text) 12%, transparent);
  --dclip-ring: var(--page-bg-2);
  --dclip-ok: var(--primary);
  --dclip-warn: #e0a83c;
  --dclip-bad: #ff6b63;
  --dclip-busy: #86b4ff;
  --dclip-dim: color-mix(in srgb, var(--text) 36%, transparent);
  --dclip-pop-bg: var(--page-bg-2);
  --dclip-pop-line: color-mix(in srgb, var(--text) 12%, transparent);
}

.dclip-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}

[data-theme="light"] .dclip-float,
[data-theme="light"] .dclip-wrap {
  --dclip-warn: #b7791f;
  --dclip-bad: #d23b33;
  --dclip-busy: #2f6fd8;
}

/* Запас там, где color-mix не поддержан; условие ОБЯЗАНО содержать свойство
   (без него `@supports not` истинно всегда — обжигались 19.08.2026). */
@supports not (color: color-mix(in srgb, white 50%, black)) {
  .dclip-float,
  .dclip-wrap {
    --dclip-bg: rgba(255, 255, 255, .07);
    --dclip-bg-h: rgba(255, 255, 255, .12);
    --dclip-dim: rgba(255, 255, 255, .36);
    --dclip-pop-line: rgba(255, 255, 255, .12);
  }
  [data-theme="light"] .dclip-float,
  [data-theme="light"] .dclip-wrap {
    --dclip-bg: rgba(15, 20, 17, .06);
    --dclip-bg-h: rgba(15, 20, 17, .12);
    --dclip-dim: rgba(15, 20, 17, .42);
    --dclip-pop-line: rgba(15, 20, 17, .14);
  }
}

/* `min-height: 0` — ловушка №5: `mobile.css` поднимает ВСЕМ `button` 40 px.
   Правило вне media, специфичность (0,1,0) выше `button` (0,0,1) при любом
   порядке файлов. Тач-цель, если нужна, хозяин задаёт через `--dclip-size`. */
.dclip {
  --c: var(--dclip-dim);
  position: relative;
  box-sizing: border-box;
  width: var(--dclip-size);
  height: var(--dclip-size);
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: calc(var(--dclip-size) * .28);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--dclip-fg);
  background-color: var(--dclip-bg);
  transition: background-color .2s, color .2s;
}
.dclip:hover { background-color: var(--dclip-bg-h); color: var(--text); }
.dclip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
.dclip__ico { width: calc(var(--dclip-size) * .5); height: calc(var(--dclip-size) * .5); pointer-events: none; }

.dclip[data-s="ok"],
.dclip[data-s="ok"]:hover { --c: var(--dclip-ok); color: var(--dclip-ok); background-color: color-mix(in srgb, var(--dclip-ok) 14%, transparent); }
.dclip[data-s="warn"],
.dclip[data-s="warn"]:hover { --c: var(--dclip-warn); color: var(--dclip-warn); background-color: color-mix(in srgb, var(--dclip-warn) 14%, transparent); }
.dclip[data-s="bad"],
.dclip[data-s="bad"]:hover { --c: var(--dclip-bad); color: var(--dclip-bad); background-color: color-mix(in srgb, var(--dclip-bad) 14%, transparent); }
.dclip[data-s="busy"],
.dclip[data-s="busy"]:hover { --c: var(--dclip-busy); color: var(--dclip-busy); background-color: color-mix(in srgb, var(--dclip-busy) 14%, transparent); }
/* «Не проверяли» — серый КОНТУР: отличим от «проверяем» и без цвета. */
.dclip[data-s="none"] { box-shadow: inset 0 0 0 1px var(--dclip-pop-line); }

/* Дуга «проверяем». Статичный сегмент рамки виден и без движения —
   вращение сверху, и при `prefers-reduced-motion` оно снимается, а дуга
   остаётся. */
.dclip[data-s="busy"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--dclip-size) * .28 + 2px);
  border: 1.5px solid transparent;
  border-top-color: var(--dclip-busy);
  pointer-events: none;
  animation: dclip-rot .9s linear infinite;
}
@keyframes dclip-rot { to { transform: rotate(360deg); } }

.dclip__bd {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font: 700 9px/1 var(--font-ui, system-ui);
  font-variant-numeric: tabular-nums;
  color: #0b0c0e;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--dclip-ring);
  pointer-events: none;
}
.dclip[data-s="none"] .dclip__bd { color: var(--text); background: var(--dclip-bg-h); }
.dclip[data-s="bad"] .dclip__bd { animation: dclip-throb 2.4s ease-in-out infinite; }
@keyframes dclip-throb {
  0%, 100% { box-shadow: 0 0 0 2px var(--dclip-ring), 0 0 0 2px transparent; }
  50% { box-shadow: 0 0 0 2px var(--dclip-ring), 0 0 0 5px color-mix(in srgb, var(--dclip-bad) 30%, transparent); }
}

/* ---------- подсказка-карточка ----------
   Абсолютная, поверх строки: размер строки наведение НЕ меняет (ловушка №4).
   Только CSS, обработчиков на документе нет. */
.dclip-pop {
  --c: var(--dclip-dim);
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 280px;
  max-width: min(280px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: default;
  color: var(--muted);
  background: var(--dclip-pop-bg);
  box-shadow: 0 0 0 1px var(--dclip-pop-line), 0 18px 40px -16px rgba(0, 0, 0, .6);
  font: 400 12px/1.45 var(--font-ui, system-ui);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s;
}
.dclip-wrap:hover .dclip-pop,
.dclip-wrap:focus-within .dclip-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.dclip-pop[data-s="ok"] { --c: var(--dclip-ok); }
.dclip-pop[data-s="warn"] { --c: var(--dclip-warn); }
.dclip-pop[data-s="bad"] { --c: var(--dclip-bad); }
.dclip-pop[data-s="busy"] { --c: var(--dclip-busy); }
.dclip-pop__head { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 12.5px; color: var(--text); }
.dclip-pop__head i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--c); }
.dclip-pop__list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dclip-pop__file { --c: var(--dclip-dim); display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.dclip-pop__file[data-s="ok"] { --c: var(--dclip-ok); }
.dclip-pop__file[data-s="warn"] { --c: var(--dclip-warn); }
.dclip-pop__file[data-s="bad"] { --c: var(--dclip-bad); }
.dclip-pop__file[data-s="busy"] { --c: var(--dclip-busy); }
.dclip-pop__file i { width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--c); }
.dclip-pop__file b { display: block; color: var(--text); font-weight: 500; font-size: 11.5px; }
.dclip-pop__foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--dclip-pop-line); font-size: 11.5px; color: var(--dclip-dim); }
/* Причина тревоги — первой строкой, красным (реквизит не наш, операция не
   выполнена; решение владельца 27.09.2026). */
.dclip-pop__reason { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 12.5px; color: var(--dclip-bad); }
.dclip-pop__reason i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 10px/1 var(--font-ui, system-ui);
  font-style: normal;
  color: #0b0c0e;
  background: var(--dclip-bad);
}

/* ---------- плавающая подсказка (списки) ----------
   В строке подсказка — только источник разметки: списки обрезают выступающее.
   Показывает её `docClipPop.js` узлом в `body`. `display: none` здесь сильнее
   раскрытия по `:hover` — то меняет лишь видимость и прозрачность. */
.dclip-wrap--float .dclip-pop { display: none; }

/* Слой в `body`: свой `z-index` (контекст `position: fixed`), место между
   10001 и 10020 — над страницей, под окнами и сайдбаром-шторкой не прячется.
   Мышь подсказку не трогает: она лишь говорит, клик — у скрепки. */
.dclip-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10012;
  width: 280px;
  max-width: calc(100vw - 16px);
  pointer-events: none;
}
.dclip-float[hidden] { display: none !important; }
.dclip-float .dclip-pop {
  position: static;
  width: auto;
  max-width: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dclip,
  .dclip-pop { transition: none; }
  .dclip[data-s="busy"]::after,
  .dclip[data-s="bad"] .dclip__bd { animation: none; }
}