/* К-247 — плитки выбора цветовой схемы: окно «Выбор цвета» кабинета и полоса выбора цвета на странице входа (правки
   заказчика 04.10, В2). Вынесено из header-revisions.css без изменения вида: подключается в app.html и login.html.
   Разметку плиток строит colorSwatches() в app/skins/themes.js. У каждой схемы — название и отметка выбранного варианта:
   галочка — рисунок SVG в разметке плитки (colorpick__check), а не символ. */
.colorpick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.colorpick__item {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 5px;
  min-width: 0;
  cursor: pointer;
  background: #fff;
  color: #222;
  border: 1px solid #8A8782;
  border-radius: 8px;
}
.colorpick__item.is-on { box-shadow: 0 0 0 2px #222; }
/* отметка выбранной схемы: белый круг с тёмной галочкой в правом верхнем углу образца */
.colorpick__check { display: none; position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; }
.colorpick__item.is-on .colorpick__check { display: block; }
.colorpick__check circle { fill: #fff; }
.colorpick__check path { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.colorpick__item:focus-visible { outline: 3px solid #1764B0; outline-offset: 3px; }
.colorpick__sample {
  display: block;
  height: 48px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--swatch) 0 50%, #404040 50% 100%);
}
.colorpick__sample--graphite {
  background: linear-gradient(#404040 0 78%, var(--swatch) 78% 100%);
  box-shadow: inset 5px 0 0 var(--swatch);
}
/* цвет образца по ключу схемы — та же палитра, что COLOR_SCHEMES в app/skins/themes.js; классом, а не атрибутом style:
   атрибуты style не пускает Content-Security-Policy (аудит 28.09, N40; сверку палитры держит test/ui-smoke.js) */
.sw-4 { --swatch: #2F5BA8; }
.sw-3 { --swatch: #1CA4DB; }
.sw-12 { --swatch: #6F2F9F; }
.sw-11 { --swatch: #990099; }
.sw-8 { --swatch: #6FAC46; }
.sw-7 { --swatch: #9CF600; }
.sw-2 { --swatch: #FFC000; }
.sw-1 { --swatch: #FFFF00; }
.sw-5 { --swatch: #FF46B8; }
.sw-6 { --swatch: #E70079; }
.sw-9 { --swatch: #7E7F7E; }
.sw-10 { --swatch: #000000; }
.sw-graphite-yellow { --swatch: #FFFF00; }
.sw-graphite-cyan { --swatch: #00B0E8; }
.sw-graphite-pink { --swatch: #FF46B8; }
.sw-graphite-lime { --swatch: #9CF600; }
.colorpick__name { font-size: 11px; line-height: 1.25; }
@media (max-width: 760px) {
  .colorpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}