/* ==========================================================================
   fw-tokens.css — общий слой дизайн-токенов бэк-офиса Mercher.
   Значения выверены по захвату FW creator-dashboard (SingleFile,
   my-agent/output/fw-shots/) — тёмная половина light-dark()-пар.
   Подключается ПЕРЕД account.css / admin.css. Правки палитры — только здесь.
   ========================================================================== */
:root {
  /* Поверхности: тёплый near-black (зеленоватый подтон) */
  --fw-bg:        #161712;
  --fw-surface:   #242521;
  --fw-surface-2: #252621;
  --fw-line:      #252621;  /* hairline на bg */
  --fw-line-2:    #343531;  /* hairline на surface / сильный */

  /* Текст */
  --fw-text:   #fdfcfb;
  --fw-text-2: #b5b3b0;
  --fw-muted:  #8e8e89;
  --fw-faint:  #6e6e68;

  /* Акцент (bg-brand FW) */
  --fw-blue:        #4557ff;
  --fw-blue-hover:  #3444dc;
  --fw-blue-active: #2937bd;
  --fw-blue-soft:   #7c89ff;  /* детали/подчёркивания на тёмном */
  --fw-blue-12:     rgba(69, 87, 255, .14);
  --fw-blue-24:     rgba(69, 87, 255, .30);

  /* Статусы */
  --fw-green:      #28bda2;
  --fw-green-deep: #13392f;   /* тёмная подложка зелёных баннеров */
  --fw-yellow:     #e6aa19;
  --fw-red:        #d04343;

  /* Радиусы: у FW почти острые углы */
  --fw-radius:      4px;
  --fw-radius-full: 9999px;

  /* Подложка тултипа «?» — светлая, читается на тёмном фоне бэк-офиса */
  --fw-tip-bg: #e8e7e4;
}

/* Масштаб бэк-офиса (29.09): вёрстка кабинета/админки в px мельче FW примерно
   на 20%, на 125% браузерного зума владельцу комфортно — это и делает zoom.
   Только на оболочках с <html class="bo-zoom"> (account/_layout, admin/_layout);
   редакторы с iframe-превью (сайт, дизайнер) не зумятся. Под zoom 100vh/dvh
   растягиваются на ×zoom — высоты от вьюпорта писать calc(100dvh / var(--bo-zoom, 1)).
   JS, пишущий в style координаты из getBoundingClientRect, делит на el.currentCSSZoom. */
@media (min-width: 1100px) { html.bo-zoom { --bo-zoom: 1.125; zoom: var(--bo-zoom); } }
@media (min-width: 1440px) { html.bo-zoom { --bo-zoom: 1.25; } }
/* Призрак Sortable (forceFallback) ставится по rect в экранных px — под zoom
   уезжал от курсора в 1.25 раза; обратный zoom возвращает 1:1. */
.bo-zoom .sortable-fallback { zoom: calc(1 / var(--bo-zoom, 1)); }

/* Единый скроллбар бэк-офиса (кабинет, админка, редакторы) — тонкий серый,
   как в дизайнере. Локальные скроллбар-правила не заводить. */
* { scrollbar-width: thin; scrollbar-color: var(--fw-line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fw-line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fw-muted); }

/* ==========================================================================
   .hint — общая подсказка «?» бэк-офиса (замена native title, стиль FW):
   всплывает мгновенно по hover/focus, без задержки, гаснет плавно ~120мс.
   Раньше было 2 независимых класса (.pe-tip в account.css, .ed-hint в
   design-editor.css) с title — сведены в один компонент здесь, т.к. подсказка
   нужна везде в бэк-офисе одинаковой.
   ========================================================================== */
.hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--fw-line-2);
  border-radius: 50%;
  background: none;
  color: var(--fw-muted);
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}
.hint:hover,
.hint:focus-visible {
  color: var(--fw-text);
}
.hint::after,
.bo-tooltip {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: var(--fw-radius);
  background: var(--fw-tip-bg);
  color: var(--fw-bg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}
.hint--left::after {
  left: auto;
  right: 0;
}
.hint:hover::after,
.hint:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hint::after { transition: opacity .12s ease, visibility .12s; transform: none; }
}

/* Preserve the light reference style; the shared script handles viewport edges. */
.bo-tips-ready .hint::after { display: none; }
.bo-tooltip {
  position: fixed;
  content: normal;
  z-index: 2147483647;
  box-sizing: border-box;
  font-family: Onest, system-ui, sans-serif;
  margin: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  overflow: auto;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.bo-tooltip[hidden] { display: none; }