/* ============================================================================
   FinTechGuru — design system (single source of truth)
   Spec: docs/DESIGN_FINTECHGURU.md · Usage: docs/USING_FINTECHGURU.md
   Every FinTechGuru page links this file with a RELATIVE href: <link rel="stylesheet" href="theme.css">
   (served at fintechguru.danifodemo.ru; Caddy rewrites * -> /fintechguru{uri}).

   Language: calm deep-blue fintech · Inter UI · Tektur display · JetBrains Mono figures ·
   light-first + full dark mode · radii 6/10/14 · hairline borders on flat surfaces ·
   one elevation shadow for floating layers only · red = destructive/alerts only.
   Sibling of Vetric (ui/theme.css) — never mix .fg-* and .vt-* on one page.
   ============================================================================ */

/* --- Self-hosted fonts (cyrillic + latin subsets; no external CDN) --------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tektur';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/tektur-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Tektur';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/tektur-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jbmono-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/jbmono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --- Tokens ----------------------------------------------------------------
   Two layers. Primitives = raw palette, never referenced by components.
   Semantics = the only tokens components use; dark mode overrides semantics only. */
:root{
  /* -- primitives: navy / blue / violet / functional / gray -- */
  --fg-navy-950:#070d1e;
  --fg-navy-900:#0c1530;
  --fg-navy-800:#131e40;
  --fg-navy-700:#1e2a4d;
  --fg-blue-700:#1b46d1;
  --fg-blue-600:#2456f0;   /* electric-blue primary (light) */
  --fg-blue-400:#5c85ff;   /* primary lifted for dark surfaces */
  --fg-violet-600:#6847e8; /* accent, AA-safe as text on white */
  --fg-violet-500:#7c5cff; /* accent, decorative (gradients, washes) */
  --fg-violet-400:#9780ff; /* accent as text on dark surfaces */
  --fg-red-600:#c62b31;    /* destructive/alert text+fill (light) */
  --fg-red-400:#ff7a7e;    /* destructive/alert on dark */
  --fg-green-700:#157a47;  /* success text (light) */
  --fg-green-400:#4ccb8b;  /* success on dark */
  --fg-amber-700:#8a5e0e;  /* warning text (light) */
  --fg-amber-400:#e5b558;  /* warning on dark */
  /* расширение палитры под цветовое кодирование статусов (задача 49, 13.08):
     двух оттенков не хватало, чтобы развести семь семантических групп статусов.
     Контраст обеих пар провалидирован по WCAG AA (≥4.5) на своей подложке. */
  --fg-olive-700:#5d7605;  /* deal terms / money (light) */
  --fg-olive-400:#b5cc4e;  /* the same on dark */
  --fg-indigo-600:#4436c9; /* client's own action: signing, confirmation (light) */
  --fg-indigo-400:#8f8bff; /* the same on dark */
  --fg-gray-050:#f5f7fc;
  --fg-gray-100:#eceff7;
  --fg-gray-200:#e2e7f2;
  --fg-gray-300:#b8c2d9;
  --fg-gray-500:#5b6478;
  --fg-gray-400:#8a93a8;

  /* -- semantics: surfaces & ink -- */
  --fg-bg:var(--fg-gray-050);
  --fg-surface:#ffffff;
  --fg-surface-raised:#ffffff;         /* floating layers: menus, dialogs, toasts */
  --fg-surface-sunken:var(--fg-gray-100); /* wells: table header, code, locked fields */
  --fg-border:var(--fg-gray-200);
  --fg-border-strong:var(--fg-gray-300);
  --fg-ink:var(--fg-navy-900);
  --fg-ink-muted:var(--fg-gray-500);
  --fg-ink-faint:var(--fg-gray-400);   /* placeholders, disabled — non-essential only */

  /* -- semantics: interactive -- */
  --fg-primary:var(--fg-blue-600);
  --fg-primary-hover:var(--fg-blue-700);
  --fg-on-primary:#ffffff;
  --fg-accent:var(--fg-violet-600);    /* sparse: «API»-поля, выделенные линии, НЕ кнопки */
  --fg-danger:var(--fg-red-600);
  --fg-ok:var(--fg-green-700);
  --fg-warn:var(--fg-amber-700);
  --fg-olive:var(--fg-olive-700);      /* status groups only (see .fg-badge--olive) */
  --fg-indigo:var(--fg-indigo-600);    /* status groups only (see .fg-badge--indigo) */
  --fg-focus-ring:0 0 0 3px color-mix(in srgb, var(--fg-primary) 40%, transparent);

  /* -- semantics: status washes (badge/chip backgrounds) -- */
  --fg-wash-info:#e8efff;
  --fg-wash-accent:#efeaff;
  --fg-wash-ok:#e2f6ea;
  --fg-wash-warn:#fdf2dc;
  --fg-wash-danger:#fde8e9;
  --fg-wash-neutral:var(--fg-gray-100);
  --fg-wash-olive:#f1f6d8;
  --fg-wash-indigo:#e9e9fd;

  /* -- futuristic touches (restrained; never animated) -- */
  --fg-gradient-line:linear-gradient(90deg, var(--fg-blue-600), var(--fg-violet-500));
  --fg-dotgrid:radial-gradient(color-mix(in srgb, var(--fg-ink) 14%, transparent) 1px, transparent 1px);

  /* -- elevation: floating layers ONLY (menus/dialogs/toasts); flat = hairline border -- */
  --fg-shadow-pop:0 8px 28px rgba(7,13,30,.16), 0 1px 3px rgba(7,13,30,.10);

  /* -- type -- */
  --fg-font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fg-font-display:'Tektur',var(--fg-font-ui);
  --fg-font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
  /* roles: size/leading pairs (app scale — denser than Vetric's marketing scale) */
  --fg-text-caption:11px;  --fg-leading-caption:16px;
  --fg-text-body-sm:13px;  --fg-leading-body-sm:20px;
  --fg-text-body:14px;     --fg-leading-body:22px;
  --fg-text-body-lg:16px;  --fg-leading-body-lg:24px;
  --fg-text-title:18px;    --fg-leading-title:26px;
  --fg-text-heading:24px;  --fg-leading-heading:34px;
  --fg-text-display:32px;  --fg-leading-display:44px;
  --fg-text-hero:44px;     --fg-leading-hero:58px;
  --fg-fw-regular:400; --fg-fw-medium:500; --fg-fw-semibold:600; --fg-fw-bold:700;

  /* -- spacing (4px base) -- */
  --fg-space-1:4px; --fg-space-2:8px; --fg-space-3:12px; --fg-space-4:16px;
  --fg-space-5:20px; --fg-space-6:24px; --fg-space-8:32px; --fg-space-10:40px;
  --fg-space-12:48px; --fg-space-16:64px;

  /* -- shape -- */
  --fg-radius-sm:6px;   /* chips, badges, small controls */
  --fg-radius-md:10px;  /* buttons, fields, cards */
  --fg-radius-lg:14px;  /* dialogs, large cards */
  --fg-radius-full:999px; /* avatars, counters, switch — ONLY circular-by-nature elements */

  /* -- motion -- */
  --fg-t-fast:120ms; --fg-t-base:180ms;

  /* -- control icons (theme-swapped: data-uri не умеет currentColor) -- */
  --fg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* скрепка — маска (цвет задаёт фон элемента), поэтому одна на обе темы */
  --fg-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 11.05 12.25 20.2a5.5 5.5 0 0 1-7.78-7.78l9.2-9.19a3.67 3.67 0 1 1 5.18 5.18l-9.2 9.2a1.83 1.83 0 0 1-2.6-2.6l8.5-8.48' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* -- layout -- */
  --fg-topbar-h:56px;
  --fg-sidebar-w:248px;
  --fg-calcbar-w:340px;
  --fg-calcbar-head:var(--fg-navy-900);  /* шапка панели-калькулятора */
  --fg-page-max:1280px;

  color-scheme:light;
}

/* Dark theme. Semantics only; primitives never change.
   Default = OS preference; explicit data-theme on <html> wins (fg.js persists it). */
:root[data-theme="dark"]{
  --fg-bg:var(--fg-navy-950);
  --fg-surface:var(--fg-navy-900);
  --fg-surface-raised:var(--fg-navy-800);
  --fg-calcbar-head:var(--fg-navy-800);
  --fg-surface-sunken:#0a1226;
  --fg-border:var(--fg-navy-700);
  --fg-border-strong:#31406e;
  --fg-ink:#e9edf8;
  --fg-ink-muted:#97a3c4;
  --fg-ink-faint:#5f6c8f;
  --fg-primary:var(--fg-blue-400);
  --fg-primary-hover:#7a9bff;
  --fg-on-primary:#0a112b;
  --fg-accent:var(--fg-violet-400);
  --fg-danger:var(--fg-red-400);
  --fg-ok:var(--fg-green-400);
  --fg-warn:var(--fg-amber-400);
  --fg-olive:var(--fg-olive-400);
  --fg-indigo:var(--fg-indigo-400);
  --fg-wash-info:#121c40;
  --fg-wash-accent:#241d4d;
  --fg-wash-ok:#0e2e20;
  --fg-wash-warn:#33270e;
  --fg-wash-danger:#3a1518;
  --fg-wash-neutral:var(--fg-navy-800);
  --fg-wash-olive:#2a2f0d;
  --fg-wash-indigo:#1a1747;
  --fg-gradient-line:linear-gradient(90deg, var(--fg-blue-400), var(--fg-violet-500));
  --fg-shadow-pop:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --fg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397a3c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --fg-bg:var(--fg-navy-950);
    --fg-surface:var(--fg-navy-900);
    --fg-surface-raised:var(--fg-navy-800);
  --fg-calcbar-head:var(--fg-navy-800);
    --fg-surface-sunken:#0a1226;
    --fg-border:var(--fg-navy-700);
    --fg-border-strong:#31406e;
    --fg-ink:#e9edf8;
    --fg-ink-muted:#97a3c4;
    --fg-ink-faint:#5f6c8f;
    --fg-primary:var(--fg-blue-400);
    --fg-primary-hover:#7a9bff;
    --fg-on-primary:#0a112b;
    --fg-accent:var(--fg-violet-400);
    --fg-danger:var(--fg-red-400);
    --fg-ok:var(--fg-green-400);
    --fg-warn:var(--fg-amber-400);
    --fg-olive:var(--fg-olive-400);
    --fg-indigo:var(--fg-indigo-400);
    --fg-wash-info:#121c40;
    --fg-wash-accent:#241d4d;
    --fg-wash-ok:#0e2e20;
    --fg-wash-warn:#33270e;
    --fg-wash-danger:#3a1518;
    --fg-wash-neutral:var(--fg-navy-800);
    --fg-wash-olive:#2a2f0d;
    --fg-wash-indigo:#1a1747;
    --fg-gradient-line:linear-gradient(90deg, var(--fg-blue-400), var(--fg-violet-500));
    --fg-shadow-pop:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
    --fg-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2397a3c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}

/* --- Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fg-font-ui);
  font-size:var(--fg-text-body); line-height:var(--fg-leading-body);
  color:var(--fg-ink); background:var(--fg-bg);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--fg-t-base), color var(--fg-t-base);
}
h1,h2,h3{font-family:var(--fg-font-display);font-weight:var(--fg-fw-semibold);margin:0 0 var(--fg-space-4)}
h1{font-size:var(--fg-text-display);line-height:var(--fg-leading-display)}
h2{font-size:var(--fg-text-heading);line-height:var(--fg-leading-heading)}
h3{font-size:var(--fg-text-title);line-height:var(--fg-leading-title)}
h4,h5,h6{font-family:var(--fg-font-ui);font-weight:var(--fg-fw-semibold);font-size:var(--fg-text-body-lg);line-height:var(--fg-leading-body-lg);margin:0 0 var(--fg-space-3)}
p{margin:0 0 var(--fg-space-3)}
a{color:var(--fg-primary);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in srgb, var(--fg-primary) 25%, transparent)}
:focus-visible{outline:none;box-shadow:var(--fg-focus-ring);border-radius:var(--fg-radius-sm)}
button{font:inherit}

/* --- Полосы прокрутки: единый вид во всём кабинете ---------------------------
   Системная серая полоса со стрелками выбивается из плоского hairline-языка,
   поэтому красим её сами: прозрачный жёлоб + бегунок фирменной линии
   (primary → violet), под курсором ярче.
   ⚠️ Chrome: объявленный `scrollbar-width` ОТКЛЮЧАЕТ ::-webkit-scrollbar и
   возвращает системную полосу — поэтому стандартные свойства отдаём только
   Firefox через @supports, а не пишем их рядом. Ширина 10px с прозрачной
   рамкой у бегунка: попадать мышью легко, а выглядит тонко (3px).
   Блокам со своей нарисованной полоской (напр. ряд банков в карточке заявки)
   это не мешает — они прячут нативную своим ::-webkit-scrollbar{display:none}. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{
  border-radius:var(--fg-radius-full);
  border:3px solid transparent;      /* зона захвата шире видимой полоски */
  background-clip:padding-box;
  background-image:linear-gradient(135deg,
    color-mix(in srgb, var(--fg-primary) 55%, transparent),
    color-mix(in srgb, var(--fg-violet-500) 55%, transparent));
}
::-webkit-scrollbar-thumb:hover{background-image:var(--fg-gradient-line)}
::-webkit-scrollbar-thumb:active{background-image:var(--fg-gradient-line);filter:brightness(.94)}
@supports (-moz-appearance:none){
  *{scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--fg-primary) 55%, transparent) transparent}
}
/* Системная настройка «уменьшить движение» — плавную докрутку не навязываем */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* Все суммы, ИНН, даты, номера — моноширинно, табличные цифры.
   overflow-wrap: длинный неразрывный номер (19-значная закупка, «БГ-…») переносится,
   а не вылезает из контейнера; инертно там, где действует white-space:nowrap. */
.fg-num{font-family:var(--fg-font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;overflow-wrap:anywhere}

/* --- Layout utilities -------------------------------------------------------- */
.fg-container{max-width:var(--fg-page-max);margin:0 auto;padding:0 var(--fg-space-6)}
/* Рабочая область страницы кабинета. Раньше эти же 32px висели инлайном на <main>
   каждой страницы — инлайн медиа-запросом не перебить, и на телефоне под контент
   оставалось 326px из 390. Класс: страница объявляет только свой max-width. */
.fg-main{padding:var(--fg-space-8);min-width:0}
@media (max-width:640px){.fg-main{padding:var(--fg-space-4)}}
.fg-muted{color:var(--fg-ink-muted)}
.fg-eyebrow{
  font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
  font-weight:var(--fg-fw-semibold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-ink-muted);
}
/* Тонкая градиентная линия — фирменный «футуристичный» штрих (topbar, разделители) */
.fg-hairline-gradient{height:2px;background:var(--fg-gradient-line);border:0}
/* Точечная сетка для hero-зон (никогда — под рабочими формами) */
.fg-dotgrid{background-image:var(--fg-dotgrid);background-size:22px 22px}

/* --- Components -------------------------------------------------------------
   Заполняется поэтапно; каждый компонент демонстрируется в index.html. */

/* .fg-btn — кнопки */
.fg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--fg-space-2);
  padding:9px 18px;border-radius:var(--fg-radius-md);
  border:1px solid transparent;cursor:pointer;user-select:none;
  font-weight:var(--fg-fw-semibold);font-size:var(--fg-text-body);line-height:20px;
  background:var(--fg-primary);color:var(--fg-on-primary);
  transition:background-color var(--fg-t-fast), border-color var(--fg-t-fast), color var(--fg-t-fast);
  text-decoration:none;
}
.fg-btn:hover{background:var(--fg-primary-hover);text-decoration:none}
/* Отклик на нажатие: без него клик по кнопке, которая ничего не перерисовывает
   (выбор ветки ответа, повторный клик), выглядел как «не сработало» — замечание
   заказчика 06.08 про «Согласовать счёт». */
.fg-btn:active:not(:disabled){transform:translateY(1px)}
.fg-btn:disabled{opacity:.5;cursor:not-allowed}
.fg-btn--ghost{background:transparent;color:var(--fg-ink);border-color:var(--fg-border-strong)}
.fg-btn--ghost:hover{background:var(--fg-wash-neutral);border-color:var(--fg-ink-muted)}
.fg-btn--danger{background:var(--fg-danger);color:#fff}
:root[data-theme="dark"] .fg-btn--danger{color:#2b0d0e}
.fg-btn--danger:hover{filter:brightness(1.08);background:var(--fg-danger)}
/* Ghost + danger = второстепенное деструктивное действие (контур), не конкурирует с основной красной кнопкой */
.fg-btn--ghost.fg-btn--danger{background:transparent;color:var(--fg-danger);border-color:var(--fg-danger)}
.fg-btn--ghost.fg-btn--danger:hover{background:var(--fg-wash-danger);filter:none}
:root[data-theme="dark"] .fg-btn--ghost.fg-btn--danger{color:var(--fg-danger)}
.fg-btn--sm{padding:5px 12px;font-size:var(--fg-text-body-sm);line-height:18px;border-radius:var(--fg-radius-sm)}
.fg-btn--icon{padding:8px;width:38px;height:38px}
.fg-btn--icon.fg-btn--sm{padding:5px;width:30px;height:30px}
/* Подпись рядом со значком: на телефоне остаётся только значок — пары «значок + подпись»
   в шапке иначе не дают ей уместиться в 320px. */
@media (max-width:640px){.fg-btn__label{display:none}}
/* Пальцем в мишень 28–30px попадают через раз (рекомендация — от 44px). На телефоне
   малые кнопки подрастают до 40px: рисунок тот же, промахов нет. */
@media (max-width:640px){
  .fg-btn--sm{min-height:40px;padding-top:8px;padding-bottom:8px}
  .fg-btn--icon.fg-btn--sm{width:40px;height:40px;padding:8px}
}

/* .fg-card — плоская карточка (hairline, без тени) */
.fg-card{
  background:var(--fg-surface);border:1px solid var(--fg-border);
  border-radius:var(--fg-radius-md);padding:var(--fg-space-5);
}
.fg-card__head{display:flex;align-items:center;gap:var(--fg-space-3);justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--fg-space-3)}
/* длинный заголовок (номер заявки) переносится, а не выталкивает кнопки/бейджи */
.fg-card__head>*{min-width:0}

/* --- Поля форм ------------------------------------------------------------- */
.fg-label{display:flex;align-items:center;gap:6px;font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);font-weight:var(--fg-fw-medium);margin-bottom:6px}
.fg-label .req{color:var(--fg-danger)}
.fg-input,.fg-select,.fg-textarea{
  width:100%;padding:8px 12px;
  border:1px solid var(--fg-border-strong);border-radius:var(--fg-radius-md);
  background:var(--fg-surface);color:var(--fg-ink);
  font-family:inherit;font-size:var(--fg-text-body);line-height:20px;
  transition:border-color var(--fg-t-fast), box-shadow var(--fg-t-fast), background-color var(--fg-t-fast);
}
/* iOS Safari зумит страницу при фокусе в любое поле мельче 16px и обратно уже не
   отъезжает — вёрстка «уползает» вбок. На телефоне поля крупнее ровно до порога. */
@media (max-width:640px){
  .fg-input,.fg-select,.fg-textarea{font-size:16px;line-height:22px}
}
.fg-input::placeholder,.fg-textarea::placeholder{color:var(--fg-ink-faint)}
.fg-input:focus-visible,.fg-select:focus-visible,.fg-textarea:focus-visible{
  outline:none;border-color:var(--fg-primary);box-shadow:var(--fg-focus-ring);border-radius:var(--fg-radius-md);
}
.fg-input:disabled,.fg-select:disabled,.fg-textarea:disabled{
  background:var(--fg-surface-sunken);color:var(--fg-ink-muted);cursor:not-allowed;
}
.fg-textarea{min-height:88px;resize:vertical}
.fg-select{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:var(--fg-chevron);background-repeat:no-repeat;
  background-position:right 10px center;background-size:16px;
}
/* Компактный селект для строки «подпись — значение» (этап лида в диалоге): по
   ширине содержимого, а не во всю колонку. Размер шрифта НЕ трогаем — iOS зумит
   страницу на любом поле мельче 16px и обратно не отъезжает. */
.fg-select--sm{width:auto;padding:5px 30px 5px 10px;border-radius:var(--fg-radius-sm);
  background-position:right 8px center}
.fg-input--invalid,.fg-select--invalid{border-color:var(--fg-danger)}
/* Фокус НЕ гасит ошибку: раньше правило :focus-visible шло позже и красило рамку
   поля с ошибкой в синий — агент вставал в него курсором и признак пропадал
   ровно в тот момент, когда он смотрит на поле. */
.fg-input--invalid:focus-visible,.fg-select--invalid:focus-visible{
  border-color:var(--fg-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg-danger) 18%,transparent);
}
.fg-field{display:flex;flex-direction:column;min-width:0}
/* Stacked form: the container owns the vertical rhythm (.fg-field has no self-margin
   by design). Wrap a stacked form in .fg-form so its field-groups and the submit button
   get consistent spacing — the same container-gap pattern as .demo-grid / .frm. */
.fg-form{display:flex;flex-direction:column;gap:var(--fg-space-4)}
/* A primary action ending a stacked form gets a slightly larger, left-aligned break. */
.fg-form__submit{align-self:flex-start;margin-top:var(--fg-space-2)}
.fg-hint{font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);color:var(--fg-ink-muted);margin-top:4px}
.fg-hint--error{color:var(--fg-danger)}
/* Срок действия БГ в днях — итог по паре дат «начало/окончание» (форма заявки).
   Считается ВКЛЮЧИТЕЛЬНО (день начала считается), как в калькуляторе шапки: по этому
   же числу банк берёт комиссию, и два разных числа на соседних экранах агента путают.
   Пустое состояние (--empty) держит место: плашка не скачет, когда дата ещё не задана. */
.fg-term{display:flex;align-items:baseline;gap:var(--fg-space-2);flex-wrap:wrap;
  padding:var(--fg-space-2) var(--fg-space-3);border-radius:var(--fg-radius-md);
  background:var(--fg-wash-accent);border:1px solid color-mix(in srgb,var(--fg-accent) 22%,transparent)}
.fg-term__n{font-size:var(--fg-text-title);line-height:1.15;font-weight:var(--fg-fw-semibold);color:var(--fg-accent)}
.fg-term__note{color:var(--fg-ink-muted);font-size:var(--fg-text-body-sm)}
.fg-term--empty{background:var(--fg-wash-neutral);border-color:var(--fg-border)}
.fg-term--empty .fg-term__n{color:var(--fg-ink-muted)}
/* Три состояния поля (паттерн из ui/calculator.html):
   обычное · --locked «определяет платформа» (авто по ИНН, недоступно) · --api «нужно для API» */
.fg-field--locked .fg-input,.fg-field--locked .fg-select{background:var(--fg-surface-sunken);color:var(--fg-ink-muted)}
.fg-field--api .fg-input,.fg-field--api .fg-select{border-color:color-mix(in srgb, var(--fg-accent) 55%, var(--fg-border-strong))}
.fg-flag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--fg-radius-sm);font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);font-weight:var(--fg-fw-medium)}
.fg-flag--locked{background:var(--fg-wash-neutral);color:var(--fg-ink-muted)}
.fg-flag--api{background:var(--fg-wash-accent);color:var(--fg-accent)}
/* --added: поле есть в Теледоке, но в нашем прототипе изначально не использовалось (серое, пунктир) */
.fg-field--added .fg-input,.fg-field--added .fg-select,.fg-field--added .fg-textarea{background:var(--fg-surface-sunken);border-style:dashed;color:var(--fg-ink-muted)}
.fg-field--added .fg-choice-group{opacity:.72}
.fg-flag--added{background:var(--fg-wash-neutral);color:var(--fg-ink-muted)}

/* --- Радиокнопки и чекбоксы -------------------------------------------------- */
.fg-radio,.fg-checkbox{display:inline-flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:var(--fg-text-body);line-height:20px}
.fg-radio input,.fg-checkbox input{
  appearance:none;-webkit-appearance:none;flex:none;margin:1px 0 0;
  width:18px;height:18px;border:1.5px solid var(--fg-border-strong);
  background:var(--fg-surface);cursor:pointer;
  transition:border-color var(--fg-t-fast), background-color var(--fg-t-fast), border-width var(--fg-t-fast);
}
.fg-radio input{border-radius:var(--fg-radius-full)}
.fg-radio input:checked{border-color:var(--fg-primary);border-width:5.5px}
.fg-checkbox input{border-radius:5px}
.fg-checkbox input:checked{
  background-color:var(--fg-primary);border-color:var(--fg-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}
.fg-radio input:focus-visible,.fg-checkbox input:focus-visible{outline:none;box-shadow:var(--fg-focus-ring)}
.fg-radio input:disabled,.fg-checkbox input:disabled{opacity:.45;cursor:not-allowed}
.fg-radio input:disabled+span,.fg-checkbox input:disabled+span{opacity:.55}
.fg-choice-group{display:flex;flex-wrap:wrap;gap:var(--fg-space-3) var(--fg-space-5)}
/* Радиокнопки колонками (тип гарантии): раскладка старого ТФ — три колонки по две
   штуки, заполняются сверху вниз, а не слева направо. На телефоне — один столбец. */
.fg-radio-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);
  grid-auto-flow:column;gap:var(--fg-space-2) var(--fg-space-5);
}
@media (max-width:760px){
  .fg-radio-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}
/* Вертикальный список чекбоксов: элементы слева, «?» рядом с подписью (без «лесенки») */
.fg-choice-group--v{flex-direction:column;align-items:flex-start;gap:var(--fg-space-2)}
.fg-choice-group--v>span{display:inline-flex;align-items:center;gap:var(--fg-space-2)}
/* Чекбокс/радио + кнопка «?» в одну строку — «?» не отрывается на новую строку */
.fg-check-row{display:flex;align-items:flex-start;gap:var(--fg-space-2)}
.fg-check-row>.fg-help{flex:none;margin-top:1px}

/* --- Переключатель (switch) --------------------------------------------------- */
.fg-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--fg-text-body)}
.fg-switch input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.fg-switch__track{
  flex:none;width:36px;height:20px;border-radius:var(--fg-radius-full);
  background:var(--fg-border-strong);position:relative;transition:background-color var(--fg-t-fast);
}
.fg-switch__track::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform var(--fg-t-fast);box-shadow:0 1px 2px rgba(7,13,30,.25);
}
.fg-switch input:checked+.fg-switch__track{background:var(--fg-primary)}
.fg-switch input:checked+.fg-switch__track::after{transform:translateX(16px)}
.fg-switch input:focus-visible+.fg-switch__track{box-shadow:var(--fg-focus-ring)}
.fg-switch input:disabled+.fg-switch__track{opacity:.45}

/* --- Бейджи статусов ---------------------------------------------------------- */
.fg-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
  border-radius:var(--fg-radius-sm);font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
  font-weight:var(--fg-fw-semibold);background:var(--fg-wash-neutral);color:var(--fg-ink-muted);white-space:nowrap;
  max-width:100%;min-width:0;
}
/* для длинного содержимого (номер выпущенной БГ): перенос вместо вылезания */
.fg-badge--wrap{white-space:normal;overflow-wrap:anywhere;text-align:left}
.fg-badge--info{background:var(--fg-wash-info);color:var(--fg-primary)}
.fg-badge--accent{background:var(--fg-wash-accent);color:var(--fg-accent)}
.fg-badge--ok{background:var(--fg-wash-ok);color:var(--fg-ok)}
.fg-badge--warn{background:var(--fg-wash-warn);color:var(--fg-warn)}
.fg-badge--danger{background:var(--fg-wash-danger);color:var(--fg-danger)}
/* Цвет бейджа статуса (задача 49, карта утверждена Анатолием 13.08). Групп семь,
   класс — на ГРУППУ, а не на статус: цвет кодирует смысл («ждём банк», «мяч у
   нас», «дело закрыто»), поэтому и повторяется у разных статусов. Пять групп
   уже были семантикой системы и переиспользуют её классы:
     синий  → .fg-badge--info      зелёный → .fg-badge--ok
     янтарь → .fg-badge--warn      красный → .fg-badge--danger
     серый  → голый .fg-badge (нейтральная подложка по умолчанию)
   Две новые — ниже. Какой статус в какой группе, решает бэк
   (`api/services/status_map.py`, STATUS_COLORS): здесь только краска.
   До 13.08 цвет кодировал ступень линейки (.fg-badge--stage1..4); от этого
   отказались — ступеней четыре, и соседние банки красились одинаково. Ступень
   видна кольцом .fg-stagering на иконке банка. */
.fg-badge--olive{background:var(--fg-wash-olive);color:var(--fg-olive)}
.fg-badge--indigo{background:var(--fg-wash-indigo);color:var(--fg-indigo)}
/* Кольцо ступени вокруг иконки банка (задача 68, вместо stagebar-полоски):
   5 дуг = шаги дорожной карты («Прикрепить документы → Заявка на рассмотрении →
   Подписание документов → Одобрена → Выпущена», задача 77 — одна шкала с
   линейкой страницы заявки; до 22.08 дуг было четыре, по чекпойнтам платформы).
   Заполняются по часовой с 12 часов; пройденные — синим, все пять — зелёным
   (те же токены, что были у сегментов). Ступень — свойство банка, кольцо живёт
   на его иконке, а строке возвращается ~90px под имя (после задачи 49 длинные
   статусы перекрывали имена банков). Кольцо БЕЗ модификатора (`--0`) — пустое
   hairline: путь ещё впереди, банк ждёт документы. Отказ/отмена кольца не
   получают вовсе (`stage: null` с бэка) — оборванный путь не измеряют дугами;
   счёт дуг дублируется тултипом с расшифровкой. */
.fg-stagering{position:relative;display:inline-flex;flex:0 0 auto;padding:3px;border-radius:50%}
.fg-stagering::before{content:"";position:absolute;inset:0;border-radius:50%;
  --seg1:var(--fg-border-strong);--seg2:var(--fg-border-strong);
  --seg3:var(--fg-border-strong);--seg4:var(--fg-border-strong);
  --seg5:var(--fg-border-strong);
  /* пять секторов по 72°, зазор 12° между дугами (по 6° с каждой стороны) */
  background:conic-gradient(
    transparent 0 6deg, var(--seg1) 6deg 66deg, transparent 66deg 78deg,
    var(--seg2) 78deg 138deg, transparent 138deg 150deg,
    var(--seg3) 150deg 210deg, transparent 210deg 222deg,
    var(--seg4) 222deg 282deg, transparent 282deg 294deg,
    var(--seg5) 294deg 354deg, transparent 354deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.4px));
}
.fg-stagering--1::before{--seg1:var(--fg-primary)}
.fg-stagering--2::before{--seg1:var(--fg-primary);--seg2:var(--fg-primary)}
.fg-stagering--3::before{--seg1:var(--fg-primary);--seg2:var(--fg-primary);--seg3:var(--fg-primary)}
.fg-stagering--4::before{--seg1:var(--fg-primary);--seg2:var(--fg-primary);
  --seg3:var(--fg-primary);--seg4:var(--fg-primary)}
.fg-stagering--5::before{--seg1:var(--fg-ok);--seg2:var(--fg-ok);--seg3:var(--fg-ok);
  --seg4:var(--fg-ok);--seg5:var(--fg-ok)}

/* Маркер типа приоритетной открытой задачи банка (задача 25). Бейдж рядом
   говорит, ГДЕ банк в процессе; маркер — ЧТО от нас ждут прямо сейчас
   (документы, подпись, счёт, ответ). Иконка на семейство задач, точный текст —
   в подсказке. */
.fg-taskmark{
  flex:0 0 auto;display:inline-block;width:15px;height:15px;
  color:var(--fg-warn);background:currentColor;vertical-align:-2px;
}
.fg-taskmark{-webkit-mask:var(--fg-taskmark) center/contain no-repeat;
  mask:var(--fg-taskmark) center/contain no-repeat}
/* Оттенок маркера = цвет ТЕКСТА бейджа его группы статуса (Хан, 13.08,
   доработка задачи 49): «что за задача» говорит форма иконки, цвет — единая
   принадлежность строке. Класс вешает LK.taskMark по `status_color` с бэка;
   ответ без поля (старый кэш) остаётся на warn из базового правила выше. */
.fg-taskmark--c-blue{color:var(--fg-primary)}
.fg-taskmark--c-green{color:var(--fg-ok)}
.fg-taskmark--c-amber{color:var(--fg-warn)}
.fg-taskmark--c-red{color:var(--fg-danger)}
.fg-taskmark--c-indigo{color:var(--fg-indigo)}
.fg-taskmark--c-olive{color:var(--fg-olive)}
.fg-taskmark--c-gray{color:var(--fg-ink-muted)}
.fg-taskmark--docs{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.2 1.6H4.6A1.6 1.6 0 0 0 3 3.2v9.6a1.6 1.6 0 0 0 1.6 1.6h6.8a1.6 1.6 0 0 0 1.6-1.6V5.4z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9.2 1.6v3.8H13' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M5.6 8.4h4.8M5.6 11h3.2' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
.fg-taskmark--signing{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.9 1.7 14 4.8 5.9 12.9 2 14l1.1-3.9z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9.4 3.2 12.5 6.3' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E")}
.fg-taskmark--project{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.9 4.6 3.3 6l2.5-2.8M1.9 11.2l1.4 1.4 2.5-2.8' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.4 4.7h5.7M8.4 11.3h5.7' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.fg-taskmark--bill{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M6.1 12V4.7h2.2a2.05 2.05 0 0 1 0 4.1H5.2M5.2 10.5h3.4' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fg-taskmark--comment{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 9.4a2.3 2.3 0 0 1-2.3 2.3H5.4L2.3 14V4a2.3 2.3 0 0 1 2.3-2.3h7.1A2.3 2.3 0 0 1 14 4z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fg-taskmark--question{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M6.2 6.2a1.85 1.85 0 1 1 2.4 1.85c-.45.16-.6.5-.6 1v.35' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='.85' fill='black'/%3E%3C/svg%3E")}
.fg-taskmark--other{--fg-taskmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.3' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M8 4.5v4.2' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='.85' fill='black'/%3E%3C/svg%3E")}

/* --- .fg-ico — значки интерфейса ---------------------------------------------------
   Одна сетка 24, штрих 2, скруглённые концы и стыки — вес совпадает с оптическим
   весом значков задач (.fg-taskmark: 1.4 на сетке 16 = те же 1.4 пикселя на экране).
   Рисунок собран «по узлам сетки»: опорные точки кратны шагу, лучи одной длины,
   клавиши с равным шагом. У калькулятора вместо клавиатуры знак «равно»: россыпь точек в 16px
   давала силуэт телефона (замечание Беса 25.08.2026, вариант E из восьми проверенных в рабочем
   размере). Раньше на этих местах стояли системные эмодзи (🔔 🌗 🧮) —
   они рисовались шрифтом ОС, не подчинялись currentColor и в каждой системе выглядели
   по-разному (решение Беса 24.08.2026, вариант «Чище: всё на узлах сетки»).

   Реализованы масками, а не инлайн-SVG: цвет берётся из currentColor кнопки, поэтому
   тёмная тема, наведение и состояние «выключено» работают сами, а разметка на всех
   35 страницах остаётся одинаковой строкой. */
:root{
  --fg-ico-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16 Q6.95 13.27 7.5 9.5 A4.5 4.5 0 0 1 16.5 9.5 Q17.05 13.27 18 16Z'/%3E%3Cpath d='M10 16.9a2 1.7 0 0 0 4 0'/%3E%3C/svg%3E");
  --fg-ico-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.16 A8.6 8.6 0 1 1 11.84 3.4 A6.71 6.71 0 0 0 20.6 12.16Z'/%3E%3C/svg%3E");
  --fg-ico-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Cpath d='M12 5.9L12 3.9M16.31 7.69L17.73 6.27M18.1 12L20.1 12M16.31 16.31L17.73 17.73M12 18.1L12 20.1M7.69 16.31L6.27 17.73M5.9 12L3.9 12M7.69 7.69L6.27 6.27'/%3E%3C/svg%3E");
  --fg-ico-calc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.25' width='15' height='17.5' rx='2.6'/%3E%3Crect x='7.5' y='5.75' width='9' height='3' rx='1.3'/%3E%3Cpath d='M9 13.6h6M9 17.2h6'/%3E%3C/svg%3E");
  /* Флажок «прочитано» в хронике задач — единственный значок, взятый из Material
     Design (`flag` / `outlined_flag`, 24px): рисованные вручную остальные пять этой
     формы не дают, а тянуть ради неё icon pack незачем. Залитый — у прочитанной
     записи. Заливка вместо обводки маске безразлична: видна её непрозрачная часть. */
  --fg-ico-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z'/%3E%3C/svg%3E");
  --fg-ico-flag-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z'/%3E%3C/svg%3E");
  /* Колокольчик «поставить напоминание» на карточке «Хроники» — второй значок из
     Material Design (`notifications`, 24px) и по той же причине, что флажок рядом:
     в одной плашке с ним рисованный обводочный колокольчик шапки спорил бы по весу.
     Тот, что в шапке (`--fg-ico-bell`), не трогаем — он из своего набора и живёт
     в своём ряду. */
  --fg-ico-bell-add:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S10.5 3.17 10.5 4v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
  /* Копирование в буфер — значок у ИНН/ОГРН карточки компании и у кнопки
     «Скопировать реквизиты» (задача 322). Две рамки со сдвигом: нижняя
     обрезана, иначе в 14px клетки сливаются. */
  --fg-ico-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.6' y='8.6' width='11' height='11' rx='2.4'/%3E%3Cpath d='M5.4 15.4h-.3A1.6 1.6 0 0 1 3.5 13.8V5.1A1.6 1.6 0 0 1 5.1 3.5h8.7a1.6 1.6 0 0 1 1.6 1.6v.3'/%3E%3C/svg%3E");
  --fg-ico-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5L17.5 17.5M17.5 6.5L6.5 17.5'/%3E%3C/svg%3E");
}

.fg-ico{
  display:inline-block;flex:none;width:16px;height:16px;
  background:currentColor;
  -webkit-mask:var(--fg-ico) center/contain no-repeat;
          mask:var(--fg-ico) center/contain no-repeat;
}
/* Мелкий размер — для крестика внутри чипа и кнопки-фильтра: там значок 16px
   спорит с подписью. Мишень при этом не уменьшается (её держит .fg-chip__x). */
.fg-ico--xs{width:12px;height:12px}
.fg-ico--bell{--fg-ico:var(--fg-ico-bell)}
.fg-ico--bell-add{--fg-ico:var(--fg-ico-bell-add)}
.fg-ico--calc{--fg-ico:var(--fg-ico-calc)}
.fg-ico--close{--fg-ico:var(--fg-ico-close)}
.fg-ico--copy{--fg-ico:var(--fg-ico-copy)}
.fg-ico--flag{--fg-ico:var(--fg-ico-flag)}
.fg-ico--flag-on{--fg-ico:var(--fg-ico-flag-on)}
/* Значок темы показывает, что произойдёт по нажатию: в светлой теме — луна, в тёмной —
   солнце. Три состояния, как у остальных токенов темы: без выбора действует системная
   настройка, явный data-theme её перебивает. */
.fg-ico--theme{--fg-ico:var(--fg-ico-moon)}
:root[data-theme="dark"] .fg-ico--theme{--fg-ico:var(--fg-ico-sun)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .fg-ico--theme{--fg-ico:var(--fg-ico-sun)}
}

/* --- Строка фильтров (поиск + селекты + «?») ---------------------------------------
   На десктопе — обычный ряд по содержимому. На телефоне ряд рвался на три неравные
   строки (у каждого селекта своя ширина по тексту), поэтому там это сетка: поиск во
   всю ширину, фильтры по два в ряд, на самых узких — по одному. */
.fg-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fg-space-3)}
.fg-filters__item{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%}
/* select без явной ширины растягивается по самой длинной опции («Московский Кредитный
   Банк» в фильтре банков) — здесь это распирало строку фильтров, а на телефоне и всю
   страницу; ширину задаёт колонка, а не содержимое списка. */
.fg-filters .fg-select{width:auto;min-width:0;max-width:100%;flex:1 1 auto}
@media (max-width:640px){
  .fg-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--fg-space-2)}
  .fg-filters>*{min-width:0}
  .fg-filters .fg-search{grid-column:1/-1;min-width:0}
  .fg-filters .fg-select,.fg-filters .fg-input{width:100%}
  /* Фильтр из нескольких полей (пара дат «Заведён с — по») в половине строки не
     помещается: два input:100% распирали страницу вбок, и вместе с шапкой она
     скроллилась на телефоне. Такому фильтру — вся строка, поля делят её поровну. */
  .fg-filters__wide{grid-column:1/-1;flex-wrap:wrap}
  .fg-filters__wide .fg-input{width:auto;flex:1 1 0}
}
@media (max-width:380px){
  .fg-filters{grid-template-columns:minmax(0,1fr)}
}
/* Вариант с подписанными полями (журналы: аудит, внешний обмен) — те же две колонки,
   но выравнивание по нижнему краю, а широкому полю даётся вся строка. */
.fg-filters--fields{align-items:flex-end}
.fg-filters--fields .fg-field{margin:0}
@media (max-width:640px){
  .fg-filters--fields{align-items:end}
  .fg-filters--fields .fg-input,.fg-filters--fields .fg-select{width:100%}
}

/* --- Чипы (файлы, фильтры) ----------------------------------------------------- */
.fg-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid var(--fg-border);border-radius:var(--fg-radius-sm);
  background:var(--fg-surface);font-size:var(--fg-text-body-sm);line-height:18px;color:var(--fg-ink);
}
button.fg-chip{cursor:pointer;transition:border-color var(--fg-t-fast), background-color var(--fg-t-fast)}
button.fg-chip:hover{border-color:var(--fg-border-strong);background:var(--fg-wash-neutral)}
.fg-chip--active{border-color:var(--fg-primary);background:var(--fg-wash-info);color:var(--fg-primary)}
.fg-chip--file{border-style:dashed;border-color:var(--fg-border-strong)}       /* «Прикрепить файлы» */
.fg-chip--saved{border-style:solid;background:var(--fg-wash-accent);border-color:transparent;color:var(--fg-accent)} /* «Сохранённый файл» */
/* Приложенный файл — тот же чип, что в строке запрошенного документа: тип слева,
   имя одной строкой, вес справа. Пунктирный вариант тут не годился — пунктир в
   системе значит «сюда можно бросить файл», то есть приложенный файл выглядел как
   пустая дропзона, а длинное имя ломало чип на две строки (замечание Беса 06.08).
   Клик по чипу скачивает: мишень — весь чип, а не значок. */
.fg-chip--doc{max-width:100%;text-decoration:none;cursor:pointer;
  transition:background-color var(--fg-t-fast), color var(--fg-t-fast)}
a.fg-chip--doc:hover{background:color-mix(in srgb, var(--fg-accent) 20%, transparent);text-decoration:none}
.fg-chip--doc:focus-visible{outline:none;box-shadow:var(--fg-focus-ring)}
.fg-chip__type{flex:none;font-family:var(--fg-font-mono);font-size:10px;line-height:14px;letter-spacing:.04em;opacity:.9}
.fg-chip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fg-chip__size{flex:none;font-variant-numeric:tabular-nums;opacity:.75}
/* без ссылки (файл ещё не доехал до хранилища) чип не притворяется кликабельным */
span.fg-chip--doc{cursor:default}
/* Документ банка, который этот пользователь ещё не открывал (решение Беса 07.08:
   точка КРАСНАЯ, как в ЛК Теледока — единственное место, где красный не значит
   «необратимое»; смысл метки дублирован текстом в title, цвет тут не единственный
   носитель). Гаснет от скачивания: бэк пишет отметку при отдаче файла. */
.fg-chip--unseen{position:relative}
.fg-chip--unseen::after{
  content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  /* кольцо под цвет поверхности: чип лежит на цветной подложке блока выпуска,
     без него точка сливается с сиреневым фоном самого чипа */
  background:var(--fg-danger);box-shadow:0 0 0 2px var(--fg-surface);
}
/* В строке запрошенного документа имя документа длинное и жадное: без нижнего порога
   чип сжимался до «Ещё о…» — от имени файла не оставалось ничего. */
.fg-upload--row .fg-upload__files{min-width:min(230px,48%)}
@media (max-width:640px){.fg-upload--row .fg-upload__files{min-width:0}}
.fg-chip__x{
  appearance:none;border:0;background:none;padding:0;margin-left:4px;cursor:pointer;
  color:inherit;opacity:.55;font-size:14px;line-height:1;
  display:inline-flex;align-items:center;   /* значок вместо глифа: без этого он «висит» на базовой линии */
}
.fg-chip__x:hover{opacity:1}
/* Крестик рисуется 14px — пальцем не попасть. Зона нажатия расширяется невидимым
   псевдоэлементом: мишень 38px, а сам чип по размеру не меняется. */
@media (max-width:640px){
  .fg-chip__x{position:relative}
  .fg-chip__x::after{content:"";position:absolute;inset:-12px}
}

/* --- Счётчики (навигация, табы, колокольчик) ------------------------------------ */
.fg-counter{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--fg-radius-full);
  background:var(--fg-primary);color:var(--fg-on-primary);
  font-family:var(--fg-font-mono);font-size:11px;font-weight:var(--fg-fw-medium);line-height:1;
}
.fg-counter--muted{background:var(--fg-wash-neutral);color:var(--fg-ink-muted)}
.fg-counter--danger{background:var(--fg-danger);color:#fff}
:root[data-theme="dark"] .fg-counter--danger{color:#2b0d0e}

/* --- Аватар (инициалы пользователя/организации) --------------------------------- */
.fg-avatar{
  flex:none;width:32px;height:32px;border-radius:var(--fg-radius-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fg-wash-info);color:var(--fg-primary);
  font-size:12px;font-weight:var(--fg-fw-semibold);letter-spacing:.02em;user-select:none;
}
.fg-avatar--grad{background:var(--fg-gradient-line);color:#fff}
.fg-avatar--sm{width:24px;height:24px;font-size:10px}
.fg-avatar--lg{width:40px;height:40px;font-size:14px}
/* Логотип банка: фирменные SVG рисованы под светлое — подложка всегда белая
   (и в dark), hairline-борт отделяет от фона. Паддинг: 40×40 иконки впритык. */
.fg-avatar--bank{background:#fff;border:1px solid var(--fg-border);overflow:hidden}
.fg-avatar--bank img{width:100%;height:100%;object-fit:contain;padding:2px;display:block}

/* --- Поиск ------------------------------------------------------------------- */
.fg-search{position:relative}
.fg-search .fg-input{padding-left:34px}
.fg-search::before{
  content:"";position:absolute;left:11px;top:50%;translate:0 -50%;width:15px;height:15px;
  background:var(--fg-ink-faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10.8 10.8 L15 15' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10.8 10.8 L15 15' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}

/* --- Подсказки: tooltip + круглая «?» -------------------------------------------- */
/* Показ: наведение и клавиатурный фокус, а на тач-экранах — тап (fg.js вешает
   .is-tip-open, там же считает сдвиг --fg-tip-x, чтобы плашка не вылезала за край
   экрана: раньше у крайних элементов она уходила за вьюпорт и давала боковой скролл). */
[data-fg-tip]{position:relative}
/* Плашка-псевдоэлемент живёт ВНУТРИ элемента, поэтому контейнер с прокруткой
   (overflow:auto) её обрезает — так было бы в рейке фактов отчёта. Для таких
   мест есть всплывающий вариант: тот же текст в общей плашке position:fixed,
   её ставит fg.js. Разметка помечается [data-fg-tip-float], а псевдоэлемент
   у неё гасится — иначе подсказка нарисовалась бы дважды. */
[data-fg-tip][data-fg-tip-float]:hover::after,
[data-fg-tip][data-fg-tip-float]:focus-visible::after,
[data-fg-tip][data-fg-tip-float].is-tip-open::after{content:none}
.fg-tip-pop{
  position:fixed;z-index:60;max-width:min(250px, calc(100vw - 24px));padding:6px 10px;
  border-radius:var(--fg-radius-sm);background:var(--fg-ink);color:var(--fg-bg);
  font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
  text-align:left;box-shadow:var(--fg-shadow-pop);pointer-events:none;
}
.fg-tip-pop[hidden]{display:none}
[data-fg-tip]:hover::after,[data-fg-tip]:focus-visible::after,[data-fg-tip].is-tip-open::after{
  content:attr(data-fg-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(calc(-50% + var(--fg-tip-x, 0px)));
  width:max-content;max-width:min(250px, calc(100vw - 24px));padding:6px 10px;border-radius:var(--fg-radius-sm);
  background:var(--fg-ink);color:var(--fg-bg);
  font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);font-weight:var(--fg-fw-regular);
  text-align:left;white-space:normal;box-shadow:var(--fg-shadow-pop);z-index:50;pointer-events:none;
}
.fg-help{
  appearance:none;flex:none;width:18px;height:18px;padding:0;border-radius:var(--fg-radius-full);
  border:1px solid var(--fg-border-strong);background:transparent;color:var(--fg-ink-muted);
  font-size:11px;font-weight:var(--fg-fw-semibold);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color var(--fg-t-fast), border-color var(--fg-t-fast);
}
.fg-help:hover{border-color:var(--fg-primary);color:var(--fg-primary)}
/* Кружок 18px — визуально правильный размер и полностью непопадаемый пальцем;
   мишень расширяем невидимой зоной, рисунок не трогаем. */
@media (max-width:640px){
  .fg-help::after{content:"";position:absolute;inset:-11px;border-radius:var(--fg-radius-full)}
}

/* --- Табы со счётчиками ---------------------------------------------------------- */
/* Лента табов уезжает вбок, когда не влезает. Системная полоса прокрутки на телефоне
   не показывается вовсе, поэтому обрезанный на полслове таб читался как «всё, что есть»:
   край растворяем с той стороны, где ещё что-то осталось (классы ставит fg.js —
   тот же приём, что у ряда банков в карточке заявки). */
.fg-tabs{display:flex;gap:2px;border-bottom:1px solid var(--fg-border);overflow-x:auto;
  scrollbar-width:none;scroll-snap-type:x proximity}
.fg-tabs::-webkit-scrollbar{display:none}
.fg-tabs.is-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.fg-tabs.is-back{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
  mask-image:linear-gradient(90deg,transparent,#000 28px)}
.fg-tabs.is-back.is-more{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.fg-tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:10px 14px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;
  scroll-snap-align:start;
  font-size:var(--fg-text-body);font-weight:var(--fg-fw-medium);color:var(--fg-ink-muted);
  transition:color var(--fg-t-fast), border-color var(--fg-t-fast);
}
.fg-tab:hover{color:var(--fg-ink)}
.fg-tab[aria-selected="true"]{color:var(--fg-primary);border-bottom-color:var(--fg-primary);font-weight:var(--fg-fw-semibold)}
.fg-tab[aria-selected="true"] .fg-counter--muted{background:var(--fg-wash-info);color:var(--fg-primary)}
[role="tabpanel"][hidden]{display:none}

/* --- Радиокарточки (режимы приоритета, «Популярный») ------------------------------- */
.fg-radio-card{
  position:relative;display:block;padding:var(--fg-space-4);cursor:pointer;
  background:var(--fg-surface);border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);
  transition:border-color var(--fg-t-fast), box-shadow var(--fg-t-fast);
}
.fg-radio-card input{position:absolute;opacity:0;pointer-events:none}
.fg-radio-card:hover{border-color:var(--fg-border-strong)}
.fg-radio-card:has(input:checked){border-color:var(--fg-primary);box-shadow:inset 0 0 0 1px var(--fg-primary)}
.fg-radio-card:has(input:focus-visible){box-shadow:var(--fg-focus-ring)}
.fg-radio-card__title{display:flex;align-items:center;gap:8px;font-weight:var(--fg-fw-semibold)}
.fg-radio-card__desc{font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);color:var(--fg-ink-muted);margin-top:4px}

/* --- Сегментный переключатель (взаимоисключающий выбор одной строкой) --------------
   Для 2–5 равнозначных вариантов, когда выбор разворачивает форму дальше (тип гарантии,
   вид закупки). Внутри — обычные radio: клавиатура, форма и :checked работают сами.
   `--fill` растягивает бар на всю ширину поля; последний нечётный сегмент на узком
   экране занимает строку целиком, чтобы полоса не заканчивалась дырой. */
.fg-seg{
  display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;
  background:var(--fg-surface-sunken);border:1px solid var(--fg-border);
  border-radius:var(--fg-radius-md);
}
.fg-seg__item{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fg-space-2);
  padding:7px 14px;border-radius:var(--fg-radius-sm);cursor:pointer;white-space:nowrap;
  font-size:var(--fg-text-body);line-height:20px;color:var(--fg-ink);
  transition:color var(--fg-t-fast), background-color var(--fg-t-fast);
}
.fg-seg__item input{position:absolute;opacity:0;pointer-events:none}
/* Пока ничего не выбрано, бар — сплошное серое поле без единой границы, и приглушённый
   текст читался как «заблокировано» (замечание Беса 06.08). Лечим двумя приёмами:
   обычный цвет текста (muted остаётся ТОЛЬКО признаком disabled) и волосяные
   разделители между вариантами — видно, что это ряд кликабельных сегментов. Линия
   лишняя там, где уже есть подложка выбранного: гасим у него и у соседа справа. */
.fg-seg__item + .fg-seg__item::before{
  content:"";position:absolute;left:-2px;top:22%;bottom:22%;width:1px;
  background:var(--fg-border-strong);transition:opacity var(--fg-t-fast);
}
.fg-seg__item:hover{background:var(--fg-surface);box-shadow:inset 0 0 0 1px var(--fg-border)}
.fg-seg__item:hover::before,
.fg-seg__item:hover + .fg-seg__item::before,
.fg-seg__item:has(input:checked)::before,
.fg-seg__item:has(input:checked) + .fg-seg__item::before{opacity:0}
.fg-seg__item:has(input:checked){
  background:var(--fg-surface);color:var(--fg-ink);font-weight:var(--fg-fw-semibold);
  box-shadow:inset 0 0 0 1px var(--fg-border-strong);
}
.fg-seg__item:has(input:focus-visible){box-shadow:var(--fg-focus-ring)}
.fg-seg__item:has(input:disabled){opacity:.45;color:var(--fg-ink-muted);cursor:not-allowed}
.fg-seg__item:has(input:disabled):hover{background:none;box-shadow:none}
.fg-seg--fill{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
.fg-seg--fill .fg-seg__item{white-space:normal;text-align:center;padding:9px 10px}
@media (max-width:900px){
  .fg-seg--fill{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto}
  .fg-seg--fill .fg-seg__item:last-child:nth-child(odd){grid-column:1 / -1}
  /* в две колонки линия нужна только у правого сегмента строки: у левого она повисла
     бы на краю бара. Последний нечётный занимает строку целиком — там её тоже нет. */
  .fg-seg--fill .fg-seg__item::before{display:none}
  .fg-seg--fill .fg-seg__item:nth-child(even)::before{display:block}
}
.fg-seg--invalid{border-color:var(--fg-danger)}

/* --- Выбор одного варианта чипами (.fg-pick) --------------------------------------
   Ответ по задаче банка: «Согласовать счёт» / «Предложить изменения» / … Это ВЫБОР,
   а не действие, поэтому радио, а не кнопки — как в ЛК Теледока (там `decision` —
   radiogroup). Кнопками ряд читался как «нажал и отправил»: агент кликал по уже
   выбранному варианту, ничего не менялось, и он не понимал, нажалось ли (замечание
   заказчика 06.08). Галочка занимает место всегда — при выборе чип не прыгает.
   Отличие от `.fg-seg` выше: там равнозначные режимы просмотра в общем жёлобе, здесь —
   разные по весу ДЕЙСТВИЯ (одно необратимое), поэтому отдельные чипы и сильный акцент
   на выбранном. */
.fg-pick-group{display:flex;flex-wrap:wrap;gap:var(--fg-space-2)}
.fg-pick{position:relative;display:inline-flex}
.fg-pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fg-pick span{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border:1px solid var(--fg-border-strong);border-radius:var(--fg-radius-sm);
  background:var(--fg-surface);color:var(--fg-ink);
  font-size:var(--fg-text-body-sm);line-height:18px;font-weight:var(--fg-fw-medium);
  user-select:none;
  transition:background-color var(--fg-t-fast), border-color var(--fg-t-fast), color var(--fg-t-fast);
}
.fg-pick span::before{content:"✓";font-size:12px;opacity:0;transition:opacity var(--fg-t-fast)}
.fg-pick input:hover:not(:disabled)+span{background:var(--fg-wash-neutral);border-color:var(--fg-ink-muted)}
.fg-pick input:checked+span{background:var(--fg-primary);border-color:var(--fg-primary);color:var(--fg-on-primary)}
.fg-pick input:checked+span::before{opacity:1}
.fg-pick input:active:not(:disabled)+span{transform:translateY(1px)}
.fg-pick input:focus-visible+span{box-shadow:var(--fg-focus-ring)}
.fg-pick input:disabled{cursor:not-allowed}
.fg-pick input:disabled+span{opacity:.5}
@media (max-width:640px){.fg-pick span{min-height:40px;padding-top:8px;padding-bottom:8px}}

/* --- Степпер мастера («Заполнение данных → Выбор банков → Загрузка документов») ----- */
.fg-stepper{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fg-space-2);counter-reset:fgstep}
.fg-step{
  display:flex;align-items:center;gap:8px;counter-increment:fgstep;
  font-size:var(--fg-text-body-sm);font-weight:var(--fg-fw-medium);color:var(--fg-ink-muted);
}
.fg-step::before{
  content:counter(fgstep);flex:none;width:24px;height:24px;border-radius:var(--fg-radius-full);
  border:1.5px solid var(--fg-border-strong);display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fg-font-mono);font-size:12px;
}
.fg-step--active{color:var(--fg-ink)}
.fg-step--active::before{background:var(--fg-primary);border-color:var(--fg-primary);color:var(--fg-on-primary)}
.fg-step--done::before{content:"✓";background:var(--fg-wash-ok);border-color:transparent;color:var(--fg-ok)}
.fg-step:not(:last-child)::after{content:"";flex:none;width:28px;height:1.5px;background:var(--fg-border);margin-left:var(--fg-space-2)}

/* --- Дорожная карта заявки (задача 51) ---------------------------------------------
   Виджет один — `.fg-line`, линейка с весами: вся карта на экране, текст только
   у текущего шага. Второй вариант («лунная фаза») показывали заказчикам живьём
   вместе с этим и на созвоне 17.08 отклонили — вместе с ним убран и тумблер.
   Шаги — набор Анатолия (services/status_map.ROADMAP_STEPS). Исходы (отказ/отмена)
   и повторяемый доп. запрос шагами не являются: первое обрывает карту, второе —
   режим текущего шага (.fg-roadnote) и вставные строки полной карты. */
.fg-roadmap{display:flex;align-items:center;gap:var(--fg-space-2);flex-wrap:wrap;margin-top:var(--fg-space-3)}
/* контейнер виджета: поповеры позиционируются от него, поэтому relative обязателен */
.fg-roadmap-stage{position:relative}

/* Поповер: полная карта / метро-схема */
.fg-pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;min-width:300px;max-width:min(420px, 92vw);
  background:var(--fg-surface-raised);border:1px solid var(--fg-border);border-radius:var(--fg-radius-lg);
  box-shadow:var(--fg-shadow-pop);padding:var(--fg-space-4) var(--fg-space-5);
}
/* Мост через зазор до кнопки: без него курсор «выпадает» из ховера по дороге к
   плашке и она гаснет на полпути (грабля, найденная на макете). */
.fg-pop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.fg-pop__title{
  font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);font-weight:var(--fg-fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-ink-muted);margin-bottom:var(--fg-space-3);
}
/* Вертикальный таймлайн полной карты с датами. Сейчас на странице заявки не
   рисуется: вход в него жил на «лунной фазе», а её убрали (задача 157). Классы
   оставлены — вернуть полную карту линейке дешевле, чем восстанавливать вёрстку. */
.fg-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fg-tl__row{position:relative;display:flex;align-items:flex-start;gap:10px;padding:5px 0 5px 2px}
.fg-tl__row::before{content:"";position:absolute;left:10px;top:26px;bottom:-8px;width:1.5px;background:var(--fg-border)}
.fg-tl__row:last-child::before{display:none}
.fg-tl__mark{
  flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:var(--fg-fw-bold);margin-top:2px;
  background:var(--fg-surface);border:1.5px solid var(--fg-border-strong);color:transparent;
}
.fg-tl__row--done .fg-tl__mark{background:var(--fg-wash-ok);border-color:transparent;color:var(--fg-ok)}
.fg-tl__row--now .fg-tl__mark{background:var(--fg-primary);border-color:var(--fg-primary);color:var(--fg-on-primary)}
.fg-tl__row--warn .fg-tl__mark{background:var(--fg-wash-warn);border-color:transparent;color:var(--fg-warn)}
.fg-tl__row--end-danger .fg-tl__mark{background:var(--fg-wash-danger);border-color:transparent;color:var(--fg-danger)}
.fg-tl__row--end-neutral .fg-tl__mark{background:var(--fg-wash-neutral);border-color:transparent;color:var(--fg-ink-muted)}
.fg-tl__body{min-width:0;display:flex;align-items:baseline;gap:10px;flex:1;justify-content:space-between}
.fg-tl__label{font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm)}
.fg-tl__row--now .fg-tl__label{font-weight:var(--fg-fw-semibold)}
.fg-tl__row--future .fg-tl__label{color:var(--fg-ink-faint)}
.fg-tl__row--warn .fg-tl__label{color:var(--fg-warn)}
.fg-tl__row--end-danger .fg-tl__label{color:var(--fg-danger);font-weight:var(--fg-fw-semibold)}
.fg-tl__row--end-neutral .fg-tl__label{color:var(--fg-ink-muted);font-weight:var(--fg-fw-semibold)}
.fg-tl__date{font-size:var(--fg-text-caption);color:var(--fg-ink-faint);flex:none}

/* Линейка с неравными весами — единственный вид карты */
.fg-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fg-space-2)}
.fg-lnode{display:flex;align-items:center;gap:8px;font-size:var(--fg-text-body-sm);font-weight:var(--fg-fw-medium);color:var(--fg-ink-muted)}
.fg-lnode__c{
  flex:none;width:24px;height:24px;border-radius:var(--fg-radius-full);border:1.5px solid var(--fg-border-strong);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fg-font-mono);font-size:12px;background:var(--fg-surface);
}
.fg-lnode--done .fg-lnode__c{background:var(--fg-wash-ok);border-color:transparent;color:var(--fg-ok)}
.fg-lnode--now{color:var(--fg-ink);font-weight:var(--fg-fw-semibold)}
.fg-lnode--now .fg-lnode__c{background:var(--fg-primary);border-color:var(--fg-primary);color:var(--fg-on-primary)}
.fg-lnode--now.fg-lnode--warn .fg-lnode__c{background:var(--fg-warn);border-color:var(--fg-warn);color:var(--fg-surface)}
.fg-lnode--dim{opacity:.45}
.fg-line__joint{flex:none;width:26px;height:1.5px;background:var(--fg-border)}
.fg-line__joint--done{background:var(--fg-ok);opacity:.5}
.fg-line__joint--dim{opacity:.4}

/* Подпись под картой: доп. запрос / чем оборвался путь */
.fg-roadnote{margin:6px 0 0;font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);color:var(--fg-warn)}
.fg-roadnote--muted{color:var(--fg-ink-muted)}

/* Метро-схема пути заявки в поповере «?» */
.fg-metro{overflow-x:auto}
.fg-metro svg{display:block;min-width:640px}
.fg-metro .st{fill:var(--fg-surface);stroke:var(--fg-primary);stroke-width:2.4}
.fg-metro .st--now{fill:var(--fg-primary)}
.fg-metro .st--end-danger{stroke:var(--fg-danger)}
.fg-metro .st--end-neutral{stroke:var(--fg-ink-faint)}
.fg-metro .rail{stroke:var(--fg-primary);stroke-width:3;fill:none}
.fg-metro .rail--branch{stroke:var(--fg-ink-faint);stroke-width:1.8;stroke-dasharray:4 5;fill:none}
.fg-metro .lbl{fill:var(--fg-ink-muted);font-family:var(--fg-font-ui);font-size:11px}
.fg-metro .lbl--strong{fill:var(--fg-ink);font-weight:600}
.fg-metro .lbl--danger{fill:var(--fg-danger);font-weight:600}
.fg-metro .loop{stroke:var(--fg-warn);stroke-width:1.8;fill:none}
.fg-metro .loop-lbl{fill:var(--fg-warn);font-family:var(--fg-font-ui);font-size:10.5px}

/* Движения у карты нет (поповер появляется, а не выезжает) — гасим оставшиеся
   переходы цвета: при reduce они читаются как ненужное «дотягивание» подсветки. */
@media (prefers-reduced-motion: reduce){
  .fg-lnode__c,.fg-line__joint,.fg-tl__mark{transition:none}
}

/* --- Строки заявок внутри карточки (банк · статус · дата · меню) --------------------- */
.fg-demand-row{display:flex;align-items:center;gap:var(--fg-space-3);padding:10px 0;border-top:1px solid var(--fg-border)}
.fg-demand-row__name{flex:1;min-width:0;font-weight:var(--fg-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* на узких экранах имя банка занимает свою строку — иначе сжимается до нуля
   (бейдж/дата/кебаб не сжимаются) и банк в списке невозможно опознать */
@media (max-width:640px){
  .fg-demand-row{flex-wrap:wrap;row-gap:4px}
  /* имя делит первую строку с аватаром (~30px+gap); бейдж/дата/меню уходят на вторую */
  .fg-demand-row__name{flex:1 1 calc(100% - 46px)}
}
/* Строка авто-проверки контрагента (РНП, банкротство) */
.fg-compliance{display:inline-flex;align-items:center;gap:7px;font-size:var(--fg-text-body-sm);color:var(--fg-ok)}
.fg-compliance::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fg-compliance--bad{color:var(--fg-danger)}

/* «Светофор» надёжности принципала (задача 23): четыре точки у ИНН — банкротство,
   РНП, налоговая задолженность, исполнительные производства. Красный здесь — не
   действие, а тревожный статус (ДС, п.«Красный запрещён вне … тревожных статусов»).
   Порядок точек постоянный, поэтому «неизвестно» — не пропуск, а полая точка:
   у большинства принципалов снимка Фокуса ещё нет, и это состояние массовое.
   Что за признак и на какую дату — в подсказке [data-fg-tip] на каждой точке. */
.fg-lights{display:inline-flex;align-items:center;gap:6px}
.fg-light{
  /* 10px, а не 8: на 8 точки читались как пыль у ИНН и признак приходилось искать
     наведением (задачи 23, 156) */
  flex:0 0 auto;width:10px;height:10px;border-radius:var(--fg-radius-full);
  background:var(--fg-ink-muted);border:1px solid transparent;
  /* якорь для мишени ::before. У точки с подсказкой его давал [data-fg-tip], у точки
     без подсказки (плитки «Надёжности» в профиле компании) якоря не было вовсе —
     и невидимая мишень растягивалась до ближайшего позиционированного предка. */
  position:relative;
}
/* мишень под палец: рисунок 10px, попадать надо в 14 (тот же приём, что у .fg-help) */
.fg-light::before{content:"";position:absolute;inset:-2px;border-radius:var(--fg-radius-full)}
.fg-light--ok{background:var(--fg-ok)}
.fg-light--bad{background:var(--fg-danger)}
.fg-light--unknown{background:transparent;border-color:var(--fg-border-strong)}
/* Точка-ссылка (задача 70): ведёт в досье контрагента, на вкладку своего признака.
   Остаётся ТОЧКОЙ — ни подчёркивания, ни рамки, ни цвета ссылки; что она живая,
   говорят курсор и кольцо вокруг мишени (то же кольцо, что у фокуса). */
a.fg-light{display:block;cursor:pointer;text-decoration:none}
a.fg-light:hover{box-shadow:var(--fg-focus-ring)}
a.fg-light:focus-visible{border-radius:var(--fg-radius-full)}

/* --- Таблица (Банк | Ставка | Цена) ------------------------------------------------ */
/* Тень у бокового края = «таблица шире экрана, её можно листать». Чистый CSS:
   две «шторки» цвета поверхности приклеены к содержимому (background-attachment:local)
   и уезжают вместе с ним, а две тени приклеены к рамке — поэтому тень видна ровно с той
   стороны, где ещё есть колонки. Без JS и без обёрток в разметке. */
.fg-table-wrap{border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);overflow:auto;
  background:
    linear-gradient(90deg, var(--fg-surface) 30%, transparent),
    linear-gradient(270deg, var(--fg-surface) 30%, transparent),
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--fg-ink) 16%, transparent), transparent),
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--fg-ink) 16%, transparent), transparent)
    var(--fg-surface);
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-attachment:local, local, scroll, scroll}
/* Затухание нижнего края у прокручиваемого блока. Высота строки зависит от
   шрифта, поэтому предел по высоте почти всегда режет последнюю строку пополам —
   и полустрока читается как недоделка, а не как «есть ещё». Класс вешает JS
   только пока снизу реально есть что прокручивать (см. fgScrollFade в lk.js). */
/* Длинный справочник: таблица прокручивается в своём окне, страница не растёт.
   На телефоне окно снимается (см. мобильный блок ниже) — там листается страница. */
.fg-table-wrap--tall{max-height:calc(100vh - 320px);max-height:calc(100dvh - 320px)}
.fg-scroll-fade{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
/* Прокрутка перетаскиванием (initDragScroll в lk.js): курсор — единственный
   признак, по которому человек понимает, что содержимое можно тащить рукой.
   Ставим «хват» только когда есть куда тащить — класс вешает сам обработчик. */
.fg-dragscroll{overflow-x:auto;cursor:grab}
.fg-dragscroll.fg-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
@media (hover:none){.fg-dragscroll{cursor:auto}}   /* на тач-экране палец и так листает */
.fg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fg-text-body)}
.fg-table th{
  position:sticky;top:0;z-index:1;background:var(--fg-surface-sunken);
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--fg-border);white-space:nowrap;
  font-size:var(--fg-text-body-sm);font-weight:var(--fg-fw-semibold);color:var(--fg-ink-muted);
}
.fg-table td{padding:10px 14px;border-bottom:1px solid var(--fg-border);vertical-align:middle}
.fg-table tbody tr:last-child td{border-bottom:0}
/* Зебра (.fg-table--striped) — для длинных однотипных выборок вроде таблицы лидов:
   на сотне строк глаз теряет строку между колонками. Стоит ВЫШЕ :hover и
   [aria-selected]: специфичность у них та же, побеждает последний — иначе полоса
   перебивала бы и подсветку под курсором, и открытую строку. Ниже 640px строки
   разворачиваются в карточки (.fg-table--cards) — там полосе нечего разделять. */
@media (min-width:641px){
  .fg-table--striped tbody tr:nth-child(even){background:color-mix(in srgb, var(--fg-ink) 3%, transparent)}
}
.fg-table tbody tr{transition:background-color var(--fg-t-fast)}
.fg-table tbody tr:hover{background:color-mix(in srgb, var(--fg-primary) 5%, transparent)}
.fg-table tbody tr[aria-selected="true"]{background:var(--fg-wash-info)}
.fg-table .num{font-family:var(--fg-font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fg-table th.num{text-align:right}
.fg-table__sort{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.fg-table__sort:hover{color:var(--fg-ink)}

/* --- Таблица карточками на телефоне (.fg-table--cards) --------------------------------
   Рабочие таблицы (условия банков, пользователи, вознаграждение, очередь проверки) —
   это 7–9 колонок: на 390px от них видно две, остальное за кадром. На ≤640 строка
   разворачивается в карточку «подпись → значение»; подпись берётся из data-label
   у ячейки (её ставит рендер страницы), первая ячейка — заголовок карточки.
   Служебные журналы (аудит, ошибки, обмен) остаются таблицей: там важен ряд целиком. */
@media (max-width:640px){
  /* max-height у прокручиваемой таблицы на телефоне не нужен — карточки листаются
     страницей, а «окно в окне» на маленьком экране только мешает */
  .fg-table-wrap:has(.fg-table--cards){border:0;background:none;overflow:visible;max-height:none}
  .fg-table--cards,.fg-table--cards tbody,.fg-table--cards tr,.fg-table--cards td{display:block;width:auto}
  .fg-table--cards thead{display:none}
  .fg-table--cards tr{
    background:var(--fg-surface);border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);
    padding:var(--fg-space-3) var(--fg-space-4);margin-bottom:var(--fg-space-3);
  }
  .fg-table--cards tbody tr:hover{background:var(--fg-surface)}   /* ховера пальцем нет */
  /* таблица уже лежит в карточке (пользователи, очередь проверки) — вторая рамка
     вокруг каждой строки выглядит как карточка в карточке; хватает волоска */
  .fg-card .fg-table--cards tr{
    background:none;border:0;border-top:1px solid var(--fg-border);border-radius:0;
    padding:var(--fg-space-3) 0;margin:0;
  }
  .fg-card .fg-table--cards tr:first-child{border-top:0;padding-top:0}
  /* Подпись — строкой над значением (тот же приём, что у .fg-dl на узком экране).
     Строкой «подпись слева — значение справа» ряд бейджей ФЗ не помещался и распирал
     страницу: в блочной раскладке содержимое переносится само. */
  .fg-table--cards td{border-bottom:0;padding:3px 0;text-align:left}
  .fg-table--cards td::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);color:var(--fg-ink-muted);
  }
  .fg-table--cards td:not([data-label])::before{display:none}
  /* первая ячейка — шапка карточки: имя банка/пользователя во всю ширину, без подписи */
  .fg-table--cards td:first-child{
    display:block;text-align:left;font-weight:var(--fg-fw-semibold);
    padding:0 0 var(--fg-space-2);margin-bottom:var(--fg-space-2);
    border-bottom:1px solid var(--fg-border);
  }
  .fg-table--cards td:first-child::before{display:none}
  .fg-table--cards .num{text-align:left;white-space:normal}
}

/* --- Список загрузки документов ----------------------------------------------------- */
.fg-upload-list{display:flex;flex-direction:column;gap:var(--fg-space-3)}
.fg-upload{
  display:flex;align-items:flex-start;gap:var(--fg-space-4);justify-content:space-between;
  padding:var(--fg-space-4);background:var(--fg-surface);
  border:1px dashed var(--fg-border-strong);border-radius:var(--fg-radius-md);
}
.fg-upload__name{display:flex;align-items:center;gap:8px;font-weight:var(--fg-fw-medium);flex-wrap:wrap}
.fg-upload__desc{font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted);margin-top:2px}

/* Компактная строка слота: название слева, мишень — вторичной кнопкой справа.
   Карточка .fg-attach внутри пунктирной рамки давала «коробку в коробке» и
   полосу пустоты справа (её потолок — 340px), поэтому в списке запрошенных
   документов слот собирается строкой. Мишень — <label> со скрытым input. */
.fg-upload--row{align-items:center;padding:var(--fg-space-3) var(--fg-space-4)}
.fg-upload__main{flex:1 1 auto;min-width:0}
.fg-upload__files{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.fg-upload__lim{font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);color:var(--fg-ink-muted);margin-top:2px}
/* Уточнение банка к документу (`description`) и его бланк — строка под названием
   слота. Пустой не бывает: блок рисуется, только если есть что показать. */
.fg-upload__extra{display:flex;align-items:center;gap:var(--fg-space-2);flex-wrap:wrap;margin-top:3px;min-width:0}
.fg-upload__descr{font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);color:var(--fg-ink-muted);min-width:0}

/* Шаблон документа — форма банка, которую надо заполнить (`requestedDocuments[].template`).
   Подпись «Шаблон» — слово Теледока (в его карточке слота строка подписана так же).
   Сплошная hairline-борда, а НЕ пунктир: пунктир в системе значит «сюда можно бросить
   файл», и шаблон выглядел бы дропзоной. Нейтральная поверхность, а не заливка чипа
   `--saved`: та закреплена за «файл в слоте уже лежит» — спутать эти два смысла
   значит принять пустой слот за закрытый (задача 175). В ЛК Теледока шаблон рисуется
   ровно тем же компонентом, что приложенный файл; этот кусок паритета мы сознательно
   не берём. */
.fg-tmpl{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;
  padding:3px 9px;border:1px solid var(--fg-border);border-radius:var(--fg-radius-sm);
  background:var(--fg-surface);color:var(--fg-ink-muted);text-decoration:none;
  font-size:var(--fg-text-body-sm);line-height:18px;
  transition:border-color var(--fg-t-fast), color var(--fg-t-fast), background-color var(--fg-t-fast);
}
.fg-tmpl:hover{border-color:var(--fg-border-strong);background:var(--fg-wash-neutral);
  color:var(--fg-ink);text-decoration:none}
.fg-tmpl:focus-visible{outline:none;box-shadow:var(--fg-focus-ring)}
.fg-tmpl svg{flex:none}
.fg-tmpl__label{flex:none;font-weight:var(--fg-fw-medium);color:var(--fg-ink)}
/* имя файла — второй строкой смысла: длинное обрезаем, полное остаётся в title */
.fg-tmpl__file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fg-upload__act{flex:none;cursor:pointer;white-space:nowrap}
.fg-upload__act:focus-within{outline:none;box-shadow:var(--fg-focus-ring)}
/* скрепка — та же маска-токен, что у карточки: цвет берётся от текста кнопки */
.fg-upload__clip{
  flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--fg-clip) center/16px no-repeat;mask:var(--fg-clip) center/16px no-repeat;
}
@media (max-width:640px){
  .fg-upload--row{flex-direction:column;align-items:stretch;gap:var(--fg-space-3)}
  .fg-upload__act{justify-content:center}
}

/* --- Приём файла броском (.fg-drop-over) ----------------------------------------------
   Слот принимает файл перетаскиванием ВДОБАВОК к кнопке. В покое подсказки нет: в
   списке из восьми документов восемь одинаковых надписей «перетащите файл» — шум,
   а мишень и так очевидна кнопкой. Подпись подменяется на «Отпустите…» ровно в тот
   момент, когда файл уже подняли (класс вешает JS на dragenter). Кнопка на это время
   гаснет — она бы спорила с зоной за внимание, а действие уже выбрано.
   Состояние — сплошная рамка и заливка, как у hover мишени: цвет тут значит «сюда». */
.fg-drop-over{border-style:solid;border-color:var(--fg-primary);background:var(--fg-wash-info)}
.fg-drop-over .fg-upload__lim{color:var(--fg-primary);font-weight:var(--fg-fw-semibold)}
.fg-drop-over .fg-upload__act{opacity:.35}
.fg-drop-word{display:none}
.fg-drop-over .fg-drop-word{display:inline}
.fg-drop-over .fg-drop-rest{display:none}
/* закрытый слот: предела в подписи нет, строка появляется только на время броска */
.fg-upload__lim--drop-only{display:none}
.fg-drop-over .fg-upload__lim--drop-only{display:block}
/* карточка-мишень: подписи у неё блочные, поэтому подмена — тоже блоком */
.fg-attach.fg-drop-over{background:var(--fg-wash-info)}
.fg-attach .fg-drop-word{display:none}
.fg-attach.fg-drop-over .fg-drop-word{display:block;color:var(--fg-primary);font-weight:var(--fg-fw-semibold)}

/* --- Ход отправки файла (.fg-uploading) -----------------------------------------------
   Между кликом и ответом сервера страница молчала: на скане в 20 МБ это читается как
   «не сработало», и документ уходит дважды. Полоса — тот же .fg-progress, что у «Работы
   с файлами»; цифры моноширинные (.fg-num), чтобы не дёргались при каждом проценте.
   Ход ОТПРАВКИ даёт только XHR (LK.upload) — fetch показывает лишь ответ. */
.fg-upload__meter{display:flex;align-items:center;gap:var(--fg-space-2);margin-top:6px}
.fg-upload__meter .fg-progress{flex:1 1 auto;max-width:260px}
.fg-upload__pct{
  font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
  color:var(--fg-ink-muted);white-space:nowrap;
}
.fg-upload__pct b{color:var(--fg-primary);font-weight:var(--fg-fw-semibold)}
/* мишень занята: подсветка мёртвая, курсор обычный — тыкать бесполезно */
.fg-uploading{cursor:default}
.fg-uploading .fg-upload__clip,
.fg-uploading .fg-attach__ic{display:none}
.fg-attach.fg-uploading:hover{border-color:var(--fg-border);background:var(--fg-surface)}
/* карточка-мишень: полоса встаёт под ней, отступ — как у соседних подписей */
.fg-attach + .fg-upload__meter{margin-top:var(--fg-space-2)}

/* Спиннер: единственная крутящаяся вещь в кабинете — только для отправки, которую
   нельзя отменить. Цвет берётся от текста, поэтому годится и в кнопке, и в карточке. */
.fg-spin{
  flex:none;width:14px;height:14px;border-radius:var(--fg-radius-full);
  border:2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color:currentColor;animation:fg-spin .7s linear infinite;
}
@keyframes fg-spin{to{transform:rotate(360deg)}}
/* prefers-reduced-motion: не убираем вовсе (индикатор обязан жить), но замедляем */
@media (prefers-reduced-motion: reduce){.fg-spin{animation-duration:2.4s}}

/* --- Мишень «приложить файл» (.fg-attach) ---------------------------------------------
   Раньше это был пунктирный чип с эмодзи-скрепкой: значок зависел от устройства
   (на части — «тофу» □, на iOS — цветная картинка Apple), а сама мишень читалась как
   метка, не как действие — чипы в кабинете означают состояние и фильтр.
   Карточка: фирменная линия сверху (единственное место, где градиент работает как
   акцент действия), значок в квадрате-washe и подпись с реальным пределом загрузки.
   Разметка: <label class="fg-attach"> + скрытый <input type="file">. */
.fg-attach{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;margin-top:var(--fg-space-3);
  background:var(--fg-surface);border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);
  overflow:hidden;font:inherit;color:inherit;padding:0;
  transition:border-color var(--fg-t-fast), background-color var(--fg-t-fast);
}
.fg-attach::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--fg-gradient-line)}
.fg-attach:hover{border-color:var(--fg-primary);background:var(--fg-wash-info)}
.fg-attach:focus-within{outline:none;box-shadow:var(--fg-focus-ring)}
.fg-attach__in{display:flex;align-items:center;gap:var(--fg-space-3);padding:12px 14px}
/* значок — маской, как поиск и шеврон: data-uri не умеет currentColor, а цвет нужен темный/светлый */
.fg-attach__ic{
  flex:none;width:36px;height:36px;border-radius:var(--fg-radius-sm);
  background:var(--fg-wash-accent);position:relative;
}
.fg-attach__ic::after{
  content:"";position:absolute;inset:0;background:var(--fg-accent);
  -webkit-mask:var(--fg-clip) center/18px no-repeat;
  mask:var(--fg-clip) center/18px no-repeat;
}
/* На десктопе мишень не тянется во всю панель: пять слотов подряд превращались в
   «полосатый» список из длинных градиентных линий. На телефоне — во всю ширину. */
@media (min-width:641px){.fg-attach{max-width:340px}}
.fg-attach__t{display:block;font-size:var(--fg-text-body-sm);line-height:18px;font-weight:var(--fg-fw-semibold)}
.fg-attach__s{display:block;font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);color:var(--fg-ink-muted);margin-top:2px}
/* слот уже заполнен: линия гаснет — действие вторичное, «заменить», а не «сделай это» */
.fg-attach--filled::before{background:var(--fg-border)}
.fg-attach--filled .fg-attach__ic{background:var(--fg-wash-neutral)}
.fg-attach--filled .fg-attach__ic::after{background:var(--fg-ink-muted)}

/* --- Диалог (нативный <dialog>) ------------------------------------------------------ */
.fg-dialog{
  border:1px solid var(--fg-border);border-radius:var(--fg-radius-lg);
  background:var(--fg-surface-raised);color:var(--fg-ink);
  padding:0;width:min(520px, calc(100vw - 32px));box-shadow:var(--fg-shadow-pop);
}
/* оверлей с таблицей (выбор банков): в 520px пять колонок ломают строку банка */
.fg-dialog--wide{width:min(720px, calc(100vw - 32px))}
/* Ящик: тот же нативный <dialog>, но прижат к правому краю во всю высоту — доска
   канбана за ним остаётся видна. Центрирование у модального диалога делает UA
   (margin:auto), поэтому поля и inset перебиваем явно. */
.fg-dialog--drawer{
  margin:0;inset:0 0 0 auto;            /* top right bottom left: прижат вправо */
  width:min(640px, 100%);max-width:none;
  /* UA-стиль диалога — height:fit-content: без явной высоты ящик не растягивается
     между top и bottom, а перерастает экран и вместо своей прокрутки обрезается. */
  height:100%;max-height:none;
  border-radius:0;border-width:0 0 0 1px;
  overflow-y:auto;overscroll-behavior:contain;
}
/* Панель прокручивается целиком, и без липкой шапки имя карточки и крестик
   уезжают за верх экрана уже на пятом банке. Волосяная линия обязательна: без неё
   уходящий под шапку текст обрезается вплотную к имени лида. */
.fg-dialog--drawer .fg-dialog__head{
  position:sticky;top:0;z-index:1;
  background:var(--fg-surface-raised);padding-bottom:var(--fg-space-4);
  border-bottom:1px solid var(--fg-border);
}
.fg-dialog--drawer .fg-dialog__head+.fg-dialog__body{padding-top:var(--fg-space-5)}
/* Осознанное ограничение: выезд играет только на открытие. Обратный проигрыш
   требует отложенного close() в JS у каждой страницы-владельца — если понадобится,
   переводить на transition + @starting-style с allow-discrete, а не на таймеры. */
@keyframes fg-drawer-in{from{transform:translateX(100%)}}
.fg-dialog--drawer[open]{animation:fg-drawer-in .18s ease-out}
@media (prefers-reduced-motion:reduce){.fg-dialog--drawer[open]{animation:none}}
/* На телефоне — во весь экран. Именно `inset:0` и авто-размеры, а не 100vw/100dvh:
   у страницы с горизонтальным выносом (шапка кабинета за 390px) вьюпорт-единицы
   меряют ОДНО (ширину экрана), а right:0 отсчитывается от ДРУГОГО (ширины документа),
   и ящик уезжал вбок, не закрывая левый край. */
@media (max-width:640px){.fg-dialog--drawer{inset:0;width:auto;border-left:0}}
.fg-dialog::backdrop{background:rgba(7,13,30,.55)}
.fg-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:var(--fg-space-4);padding:var(--fg-space-5) var(--fg-space-5) 0}
.fg-dialog__head h3{margin:0}
.fg-dialog__body{padding:var(--fg-space-4) var(--fg-space-5) var(--fg-space-5)}
/* Информация о заявке — definition list */
.fg-dl{display:grid;grid-template-columns:minmax(140px,40%) 1fr;gap:8px 16px;margin:0;font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm)}
/* min-width:0 — grid-дети сжимаются; длинные номера/ссылки переносятся внутри колонки */
.fg-dl dt,.fg-dl dd{min-width:0}
.fg-dl dt{color:var(--fg-ink-muted)}
.fg-dl dd{margin:0;overflow-wrap:anywhere}
/* На узком экране колонка подписей съедает 140px из 320, и номер закупки рвётся
   посреди цифр — подпись встаёт над значением. */
@media (max-width:560px){
  .fg-dl{grid-template-columns:minmax(0,1fr);gap:var(--fg-space-3) 0}
  .fg-dl dt{margin-bottom:2px}
}

/* --- Меню (кебаб, фильтры) — всплывающий слой ----------------------------------------- */
.fg-menu{position:relative;display:inline-block}
.fg-menu__list{
  position:absolute;top:calc(100% + 4px);right:0;min-width:190px;z-index:40;display:none;
  padding:4px;background:var(--fg-surface-raised);
  border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);box-shadow:var(--fg-shadow-pop);
}
.fg-menu.is-open .fg-menu__list{display:block}
.fg-menu__list--left{right:auto;left:0}
.fg-menu__item{
  display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;cursor:pointer;
  border-radius:var(--fg-radius-sm);font-size:var(--fg-text-body);color:var(--fg-ink);text-decoration:none;
}
.fg-menu__item:hover{background:var(--fg-wash-neutral);text-decoration:none;color:var(--fg-ink)}
/* Шапка меню — кто вы и в какой роли; не пункт, не кликается */
.fg-menu__label{
  margin:0;padding:8px 10px 6px;font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);
  font-weight:var(--fg-fw-semibold);color:var(--fg-ink);border-bottom:1px solid var(--fg-border);
}
.fg-menu__item--danger{color:var(--fg-danger)}
.fg-menu__item--danger:hover{background:var(--fg-wash-danger);color:var(--fg-danger)}

/* --- Комбобокс (автокомплит ИНН, переключатель организаций) ---------------------------- */
.fg-combobox{position:relative}
.fg-combobox__list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;display:none;max-height:260px;overflow:auto;
  padding:4px;background:var(--fg-surface-raised);
  border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);box-shadow:var(--fg-shadow-pop);
}
.fg-combobox.is-open .fg-combobox__list{display:block}
.fg-combobox__opt{
  display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;cursor:pointer;
  border-radius:var(--fg-radius-sm);font-size:var(--fg-text-body);color:var(--fg-ink);
}
.fg-combobox__opt:hover,.fg-combobox__opt[aria-selected="true"]{background:var(--fg-wash-info);color:var(--fg-primary)}
.fg-combobox__opt .fg-num{display:block;font-size:var(--fg-text-caption);color:var(--fg-ink-muted)}
.fg-combobox__empty{padding:8px 10px;font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted)}
/* Действие внутри списка («+ Добавить клиента с ИНН …»): выглядит как опция, но
   читается как действие — акцентный цвет и полужирное начертание. Отдельный класс
   принципиален: общий обработчик комбобокса в fg.js ловит `.fg-combobox__opt` и
   вписал бы текст такой строки в поле ввода. */
.fg-combobox__action{
  display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;cursor:pointer;
  border-radius:var(--fg-radius-sm);font-size:var(--fg-text-body);font-weight:600;color:var(--fg-primary);
}
.fg-combobox__action:hover{background:var(--fg-wash-info)}

/* --- Верхняя панель -------------------------------------------------------------------- */
/* z-index 60 — выше бэкдропа мобильного меню (49) и самого drawer (50): при открытом
   меню шапка остаётся живой, и закрыть его можно той же кнопкой, которой открыл.
   Раньше шапка была под затемнением — бургер не нажимался. */
.fg-topbar{position:sticky;top:0;z-index:60;background:var(--fg-surface);border-bottom:1px solid var(--fg-border)}
.fg-topbar__in{position:relative;display:flex;align-items:center;gap:var(--fg-space-4);height:var(--fg-topbar-h);padding:0 var(--fg-space-6)}
.fg-topbar__actions{margin-left:auto;display:flex;align-items:center;gap:var(--fg-space-3);min-width:0}
/* имя агента: одна строка с многоточием — длинное ФИО не распирает топбар на мобильном */
.fg-topbar__user{max-width:min(260px,26vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Подпись раздела на странице с боковой колонкой встаёт на левый край контента (ширина
   сайдбара + отступ .fg-main), а не просто следом за логотипом: шапка и тело читаются
   по одной вертикали. Страницы без сайдбара (action, guarantee — центрированный .wrap)
   привязывать не к чему, там подпись остаётся в потоке. */
body:has(.fg-shell) .fg-topbar__in>.fg-eyebrow{position:absolute;left:calc(var(--fg-sidebar-w) + var(--fg-space-8));top:50%;transform:translateY(-50%)}
/* Сайдбар прячется на 900px — привязывать подпись становится не к чему, а на узком экране
   она и так необязательна: убираем её тем же порогом (заодно и на страницах без сайдбара).
   Привязанная к сетке подпись выходит из потока, поэтому «подвинуть» её правый блок шапки уже
   не может — до 1100px прячем её на shell-страницах совсем: при плотном правом блоке (поиск,
   меню пользователя, тема) она иначе залезает под него. */
@media (max-width:900px){.fg-topbar__in>.fg-eyebrow{display:none}}
@media (max-width:1100px){body:has(.fg-shell) .fg-topbar__in>.fg-eyebrow{display:none}}
@media (max-width:640px){
  .fg-topbar__in{gap:var(--fg-space-2);padding:0 var(--fg-space-3)}
  .fg-topbar__user{display:none}
}
/* логотип ТФ: квадрат и вордмарк — пары «латиница/кириллица», лежат друг на друге в grid-ячейке
   (бокс шириной самого широкого варианта) и меняются прозрачностью по наведению — раскладка шапки
   не двигается. Квадраты режет scripts/make_brand_assets.py из docs/brand/; вордмарк — текст Tektur
   с градиентом темы (шрифт заказчика совпадает с нашим дисплейным).
   Посимвольный «перебор глифов» вместо фейда пробовали 10.09 и сняли: Tektur пропорциональный,
   ширина строки во время перебора скачет. */
.fg-brand{--fg-brand-h:28px;display:inline-flex;align-items:center;gap:6px;height:var(--fg-brand-h);flex:none;color:inherit;text-decoration:none}
.fg-brand:hover{text-decoration:none}
.fg-brand__mark,.fg-brand__word{display:grid;align-items:center;flex:none}
.fg-brand__mark>*,.fg-brand__word>*{grid-area:1/1;transition:opacity .18s ease}
.fg-brand__mark{height:var(--fg-brand-h);width:var(--fg-brand-h)}
.fg-brand__mark img{height:100%;width:100%}
.fg-brand__word{font-family:var(--fg-font-display);font-weight:var(--fg-fw-semibold);font-size:16px;line-height:1;letter-spacing:-0.01em;white-space:nowrap}
.fg-brand__word>span{background:var(--fg-gradient-line);-webkit-background-clip:text;background-clip:text;color:transparent}
.fg-brand .fg-brand__ru{opacity:0}
.fg-brand:hover .fg-brand__en,.fg-brand:focus-visible .fg-brand__en{opacity:0}
.fg-brand:hover .fg-brand__ru,.fg-brand:focus-visible .fg-brand__ru{opacity:1}
@media (prefers-reduced-motion:reduce){.fg-brand__mark>*,.fg-brand__word>*{transition:none}}
/* Вордмарк — 178px в несжимаемом .fg-brand: вместе с правым блоком кнопок он распирал
   шапку до 486px при экране 390, и вбок скроллилась КАЖДАЯ страница кабинета. Наружу
   это вылезло ящиком лида (281): документ шире экрана — и прижатый к правому краю
   ДОКУМЕНТА ящик уезжает левым краем за экран. На телефоне бренд держит квадрат:
   наведения, ради которого вордмарк меняет раскладку (280), там всё равно нет.
   Правило стоит ПОСЛЕ блока .fg-brand — выше по файлу его перебивал display:grid. */
@media (max-width:640px){.fg-brand__word{display:none}}
.fg-bell{position:relative}
.fg-bell .fg-counter{position:absolute;top:-5px;right:-7px}
/* выпадающий список уведомлений (lk.js оборачивает кнопку в .fg-menu) */
.fg-bell-menu{width:min(360px,calc(100vw - 24px));max-height:min(440px,70vh);overflow-y:auto;padding:0}
.fg-bell-menu__head{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--fg-space-2);
  padding:8px 12px;background:var(--fg-surface-raised);border-bottom:1px solid var(--fg-border);
}
.fg-bell-menu__item{
  display:block;padding:8px 12px;border-bottom:1px solid var(--fg-border);
  font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);
  color:var(--fg-ink);text-decoration:none;
}
.fg-bell-menu__item:last-child{border-bottom:0}
a.fg-bell-menu__item:hover{background:var(--fg-wash-neutral);text-decoration:none;color:var(--fg-ink)}
.fg-bell-menu__item.is-unread{background:var(--fg-wash-info)}
.fg-bell-menu__title{display:block;font-weight:var(--fg-fw-semibold)}
.fg-bell-menu__body{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--fg-ink-muted);
}
.fg-bell-menu__time{display:block;margin-top:2px;font-size:var(--fg-text-caption);color:var(--fg-ink-muted)}
.fg-bell-menu__empty{margin:0;padding:16px 12px;font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted)}
/* узкий экран: колокольчик в середине топбара, и панель, растущая от него влево,
   вылезала за левый край вьюпорта — крепим её к экрану, а не к кнопке */
@media (max-width:640px){
  .fg-bell-menu{position:fixed;left:12px;right:12px;top:calc(var(--fg-topbar-h) + 6px);width:auto}
}

/* --- Боковая навигация + каркас приложения ---------------------------------------------- */
.fg-shell{display:grid;grid-template-columns:var(--fg-sidebar-w) minmax(0,1fr);align-items:start}
/* dvh, а не vh: на телефоне 100vh считается по экрану без учёта адресной строки,
   и низ навигации уезжает под неё. Строка с vh оставлена фолбэком для старых браузеров. */
.fg-sidebar{
  position:sticky;top:calc(var(--fg-topbar-h) + 2px);height:calc(100vh - var(--fg-topbar-h) - 2px);
  height:calc(100dvh - var(--fg-topbar-h) - 2px);overflow-y:auto;
  border-right:1px solid var(--fg-border);background:var(--fg-surface);padding:var(--fg-space-4);
}
.fg-sidenav{display:flex;flex-direction:column;gap:2px}
.fg-sidenav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--fg-radius-sm);color:var(--fg-ink);font-weight:var(--fg-fw-medium);text-decoration:none;
  transition:background-color var(--fg-t-fast), color var(--fg-t-fast);
}
.fg-sidenav a:hover{background:var(--fg-wash-neutral);color:var(--fg-ink);text-decoration:none}
.fg-sidenav a.is-active{background:var(--fg-wash-info);color:var(--fg-primary)}
.fg-sidenav .fg-counter{margin-left:auto}
.fg-sidenav__group{margin:0 0 var(--fg-space-1);padding:var(--fg-space-4) 10px var(--fg-space-1);border-top:1px solid var(--fg-border)}
/* Подпункт раздела в боковом меню: отступ и короткая чёрточка вместо второго
   уровня списка — уровней всего два, и рисовать ради этого дерево незачем.
   Показывается только на страницах своего родителя (см. `under` в lk.js). */
/* селектор с элементом: `.fg-sidenav a` задаёт padding и по специфичности
   перебивает одиночный класс — отступ подпункта не применялся вовсе */
.fg-sidenav a.fg-sidenav__sub{padding-left:28px;font-size:var(--fg-text-body-sm);
  font-weight:var(--fg-fw-regular);color:var(--fg-ink-muted);position:relative}
.fg-sidenav a.fg-sidenav__sub.is-active{color:var(--fg-primary)}
.fg-sidenav a.fg-sidenav__sub::before{content:"";position:absolute;left:14px;top:50%;
  width:7px;height:1px;background:var(--fg-border)}
.fg-sidenav__group:first-child{padding-top:var(--fg-space-1);border-top:0}
@media (max-width:900px){.fg-shell{grid-template-columns:1fr}.fg-sidebar{display:none}}

/* --- Мобильная навигация: бургер в топбаре + сайдбар-drawer (инжектится fg.js) ----------- */
.fg-nav-toggle,.fg-nav-backdrop{display:none}
@media (max-width:900px){
  .fg-nav-toggle{display:inline-flex;flex:none}
  /* drawer — всплывающий слой: единственное место с тенью, как у меню/диалогов.
     padding-bottom с env() — чтобы последний пункт не попадал под home-indicator. */
  .fg-shell.is-nav-open .fg-sidebar{
    display:block;position:fixed;top:calc(var(--fg-topbar-h) + 2px);left:0;bottom:0;height:auto;
    width:min(280px,80vw);z-index:50;box-shadow:var(--fg-shadow-pop);
    padding-bottom:calc(var(--fg-space-4) + env(safe-area-inset-bottom));
  }
  /* затемнение — только под шапкой (z-60): бургер остаётся нажимаемым */
  .fg-shell.is-nav-open .fg-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:49;background:rgba(7,13,30,.55);
  }
}
/* пока drawer открыт, страница под ним не прокручивается (класс ставит fg.js) */
html.fg-nav-locked,html.fg-nav-locked body{overflow:hidden}

/* --- Тосты ------------------------------------------------------------------------------ */
.fg-toasts{position:fixed;bottom:16px;right:16px;z-index:60;display:flex;flex-direction:column;gap:8px}
.fg-toast{
  min-width:260px;max-width:380px;padding:12px 16px;
  background:var(--fg-surface-raised);border:1px solid var(--fg-border);border-left:3px solid var(--fg-primary);
  border-radius:var(--fg-radius-md);box-shadow:var(--fg-shadow-pop);
  font-size:var(--fg-text-body-sm);line-height:var(--fg-leading-body-sm);
}
/* На телефоне тост во всю ширину и выше home-indicator: колонка 380px у правого края
   наезжала на кнопки действий, а нижний отступ 16px тонул в системной полосе. */
@media (max-width:640px){
  .fg-toasts{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .fg-toast{min-width:0;max-width:none}
}
.fg-toast--ok{border-left-color:var(--fg-ok)}
.fg-toast--warn{border-left-color:var(--fg-warn)}
.fg-toast--danger{border-left-color:var(--fg-danger)}

/* --- Скелетоны -------------------------------------------------------------------------- */
.fg-skeleton{
  display:inline-block;min-height:1em;border-radius:var(--fg-radius-sm);color:transparent!important;user-select:none;
  background:linear-gradient(90deg, var(--fg-wash-neutral) 25%, color-mix(in srgb, var(--fg-wash-neutral) 40%, var(--fg-surface)) 37%, var(--fg-wash-neutral) 63%);
  background-size:400% 100%;animation:fg-shimmer 1.4s ease infinite;
}
@keyframes fg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.fg-skeleton{animation:none}}

/* --- Пустое состояние --------------------------------------------------------------------- */
.fg-empty{
  text-align:center;padding:var(--fg-space-12) var(--fg-space-6);color:var(--fg-ink-muted);
  border:1px dashed var(--fg-border-strong);border-radius:var(--fg-radius-md);
}
.fg-empty h3{font-family:var(--fg-font-ui);font-size:var(--fg-text-body-lg);color:var(--fg-ink);margin-bottom:var(--fg-space-2)}

/* --- Прогресс (FG Files: загрузка/обработка) ----------------------------------------------
   Детерминированный бар: ширина .fg-progress__bar ставится из JS (style.width='42%').
   Цвет — primary; ошибки НЕ красят бар в красный (красный = только destructive-кнопки),
   ошибку показывает текст рядом. */
.fg-progress{
  height:6px;background:var(--fg-wash-neutral);border-radius:var(--fg-radius-full);
  overflow:hidden;
}
.fg-progress__bar{
  height:100%;width:0;background:var(--fg-primary);border-radius:var(--fg-radius-full);
  transition:width 180ms ease;
}
@media (prefers-reduced-motion: reduce){.fg-progress__bar{transition:none}}

/* --- Дроп-зона (FG Files) ------------------------------------------------------------------
   [data-fg-dropzone] вешает подсветку is-over при перетаскивании файлов из ОС
   и пробрасывает клик на вложенный input[type=file]. */
.fg-dropzone{
  display:flex;flex-direction:column;align-items:center;gap:var(--fg-space-2);
  padding:var(--fg-space-10) var(--fg-space-6);text-align:center;cursor:pointer;
  border:1px dashed var(--fg-border-strong);border-radius:var(--fg-radius-md);
  color:var(--fg-ink-muted);background:var(--fg-surface);
  transition:border-color 120ms ease, background 120ms ease;
}
.fg-dropzone.is-over{border-color:var(--fg-primary);background:var(--fg-wash-info)}
.fg-dropzone strong{color:var(--fg-ink)}

/* --- Плитка файлов/страниц (FG Files) -----------------------------------------------------
   Одна карточка на файл (merge) или на страницу PDF (split): бокс превью 3/4 с
   подложкой, оверлей действий по наведению, подпись под ним. Геометрия общая — она
   и задаёт узнаваемый размер плитки; страницы добавляют своё поверх (курсор,
   состояние выбора, повороты превью). Ширина трека 168px согласована с шириной
   серверных миниатюр (pdftoppm -scale-to-x 240: с запасом на 2× экран). */
.fg-filetile-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--fg-space-4);margin:var(--fg-space-6) 0;
}
/* cursor НЕ задаём: на merge карточку тащат (grab), на split — выбирают (pointer) */
.fg-filetile{
  position:relative;display:flex;flex-direction:column;gap:var(--fg-space-2);
  padding:var(--fg-space-3);background:var(--fg-surface);border:1px solid var(--fg-border);
  border-radius:var(--fg-radius-md);
}
.fg-filetile:hover{border-color:var(--fg-primary)}
.fg-filetile__thumb{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/4;overflow:hidden;background:var(--fg-surface-sunken);
  border:1px solid var(--fg-border);border-radius:var(--fg-radius-sm);
}
/* вписываем целиком (не cover): страница документа важна вся, обрезать её нельзя */
.fg-filetile__thumb img{display:block;max-width:100%;max-height:100%}
/* до onload картинку прячет атрибут hidden — но авторский display:block выше бьёт
   UA-правило [hidden]{display:none}, поэтому проговариваем его явно */
.fg-filetile__thumb img[hidden]{display:none}
/* заглушка, пока превью не загрузилось (тип файла или номер страницы) */
.fg-filetile__ph{font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted);letter-spacing:.08em}
.fg-filetile__badge{
  position:absolute;left:6px;top:6px;z-index:2;min-width:22px;height:22px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--fg-radius-full);
  background:var(--fg-surface);border:1px solid var(--fg-border);
  font-size:var(--fg-text-caption);color:var(--fg-ink-muted);
}
/* Оверлей действий: opacity + pointer-events (не visibility/display) — иначе кнопки
   выпадают из Tab-обхода и до них не добраться с клавиатуры; :focus-within их покажет. */
.fg-filetile__acts{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--fg-space-2);
  background:rgba(7,13,30,.55);opacity:0;pointer-events:none;transition:opacity .12s ease;
}
.fg-filetile:hover .fg-filetile__acts,
.fg-filetile:focus-within .fg-filetile__acts{opacity:1;pointer-events:auto}
.fg-filetile__acts .fg-btn{
  background:var(--fg-surface);border-color:var(--fg-border-strong);color:var(--fg-ink);
  cursor:pointer;
}
.fg-filetile__row{display:flex;gap:var(--fg-space-2)}
.fg-filetile__name{
  font-weight:var(--fg-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fg-filetile__meta{font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted)}
@media (prefers-reduced-motion: reduce){.fg-filetile__acts{transition:none}}

/* Просмотр файла/страницы из плитки: широкая модалка со встроенным просмотрщиком
   браузера. PDF грузится во фрейм ТОЛЬКО blob-ссылкой — см. комментарий в
   tools-merge.html (Caddy отдаёт X-Frame-Options: DENY на все ответы). */
.fg-dialog--file{width:min(960px, calc(100vw - 32px))}
.fg-fileview{
  width:100%;height:70vh;border:0;border-radius:var(--fg-radius-sm);
  background:var(--fg-surface-sunken);
}
.fg-fileview--img{display:flex;align-items:center;justify-content:center;overflow:hidden}
.fg-fileview--img img{display:block;max-width:100%;max-height:100%}

/* --- Сортируемый список (FG Files: порядок слияния) ---------------------------------------
   [data-fg-sortable] — pointer-перетаскивание прямых детей (колонка или плитка с
   переносом строк); во время драга элемент получает .is-drag. Клавиатурная
   альтернатива — кнопки ↑/↓ (←/→) в разметке страницы. */
[data-fg-sortable] > *{touch-action:pan-y}
/* Взятая карточка (позиционирование ставит скрипт: fixed + translate за курсором) —
   приподнята тенью и чуть завалена, как на доске trello: сразу видно, что она «в
   руке», а не лежит в сетке. */
[data-fg-sortable] .is-drag{
  opacity:.95;box-shadow:var(--fg-shadow-pop);cursor:grabbing;
}
/* Дырка на месте будущей вставки: соседи разъезжаются к ней анимацией (FLIP в fg.js) */
.fg-sort-ph{
  box-sizing:border-box;border:1px dashed var(--fg-border-strong);
  border-radius:var(--fg-radius-md);background:var(--fg-wash-neutral);
}
/* Пока идёт перенос, контейнер помечен .is-sorting: карточка «в руке» прозрачна для
   мыши, поэтому наведение достаётся соседям под ней — страницы по этому классу
   гасят свои hover-состояния, чтобы под рукой ничего не подмигивало. */
[data-fg-sortable].is-sorting,
[data-fg-sortable].is-sorting *{cursor:grabbing}
/* оверлей действий соседней плитки во время переноса не всплывает */
[data-fg-sortable].is-sorting .fg-filetile__acts{opacity:0;pointer-events:none}
/* touch-action:none только на ручке: у карточек оставляем pan-y, иначе палец на
   плитке перестаёт прокручивать страницу */
.fg-sort-handle{cursor:grab;user-select:none;color:var(--fg-ink-muted);flex:none;touch-action:none}
.fg-sort-handle:active{cursor:grabbing}

/* --- Канбан лидов (CRM) -----------------------------------------------------------------
   Доска прокручивается вбок, а не ломает страницу: на телефоне колонка занимает почти
   весь экран, на десктопе их видно четыре-пять. Своей сетки не заводим — flex с
   фиксированной шириной колонки делает и то, и другое.
   Перенос карточек — нативный HTML5 drag&drop на самой странице: общий .fg-sort*
   (fg.js) сортирует ВНУТРИ одного контейнера, а канбану нужен перенос МЕЖДУ ними. */
.fg-board{display:flex;gap:var(--fg-space-4);overflow-x:auto;padding-bottom:var(--fg-space-3);
  scroll-snap-type:x proximity}
.fg-board__col{flex:0 0 min(300px,82vw);display:flex;flex-direction:column;gap:var(--fg-space-3);
  scroll-snap-align:start;border:1px solid var(--fg-border);border-radius:var(--fg-radius-md);
  padding:var(--fg-space-3);background:var(--fg-surface-sunken)}
.fg-board__head{display:flex;align-items:center;gap:var(--fg-space-2);justify-content:space-between}
.fg-board__col.is-over{border-color:var(--fg-accent);background:var(--fg-wash-accent)}
.fg-board__drop{min-height:60px;display:flex;flex-direction:column;gap:var(--fg-space-3)}
.fg-lead{padding:var(--fg-space-3);cursor:grab}
.fg-lead.is-drag{opacity:.45}
.fg-lead__row{display:flex;gap:var(--fg-space-2);align-items:center;flex-wrap:wrap}
/* Ряды «подпись — контрол» в диалоге лида не липнут друг к другу: отступ у РЯДА,
   а не инлайном у того, кто оказался вторым. */
.fg-lead__row+.fg-lead__row{margin-top:var(--fg-space-3)}
/* Контролы ряда — одной высоты (32px). У .fg-input по умолчанию padding 8px против
   5px у sm-контролов, а у .fg-btn--sm line-height на 2px меньше, чем у .fg-select--sm.
   Правим ЛОКАЛЬНО: `.fg-btn--sm` стоит в UI сотнями, и на телефоне у неё свой
   тач-размер (min-height:40px), который правка line-height не ломает. */
/* Высота задана явно: у `datetime-local` внутренняя вёрстка со значком календаря
   выше строки, и одними отступами он остаётся на 2px крупнее селекта. */
.fg-lead__row .fg-input{width:auto;height:32px;padding:4px 10px;
  border-radius:var(--fg-radius-sm)}
.fg-lead__row .fg-btn--sm{line-height:20px}
/* На телефоне поля крупнее (iOS-порог 16px), поэтому и высота ряда другая; кнопки
   там держат свой тач-размер 40px и в этот ряд по высоте не встают — так и задумано. */
@media (max-width:640px){.fg-lead__row .fg-input{height:34px}}
/* Подписи одной ширины — иначе три ряда выстраиваются лесенкой по длине слова
   («Этап» / «Перезвонить» / «Ответственный»), и контролы не читаются колонкой. */
.fg-lead__row>.fg-label{min-width:116px;margin:0}
/* Отложенный лид (C2): «перезвонить через месяц» — ждёт своей даты, поэтому
   приглушён, но остаётся в своей колонке. Скрывать нельзя: воронка обязана
   показывать всё, что в работе. */
.fg-lead--snoozed{opacity:.62}
.fg-lead__due{margin-top:var(--fg-space-2);font-size:var(--fg-text-body-sm);
  color:var(--fg-ink-muted)}
/* Срок наступил — лид «горит»: красный здесь не destructive-действие, а просрочка,
   ровно как «Просрочена» у задач продавца. */
.fg-lead__due--hot{color:var(--fg-danger);font-weight:600}
/* Карточка целиком открывает подробности, поэтому она фокусируемая: без видимого
   кольца клавиатурный путь становится невидимым. */
.fg-lead:focus-visible{outline:2px solid var(--fg-primary);outline-offset:2px}
/* Строка «банк — статус» в диалоге лида: на карточке банки — ряд логотипов с
   подсказкой, полный список построчно живёт только здесь. */
.fg-lead__bankrow{display:flex;gap:var(--fg-space-2);align-items:center;flex-wrap:wrap;
  padding:2px 0}
/* Хвост списка банков — ссылкой, а не кнопкой: это переключатель показа, а рядом
   в диалоге уже стоят кнопки действий над лидом. Отступ сверху отделяет её от
   последней строки списка. */
.fg-lead__bankmore{appearance:none;background:none;border:0;padding:0;font:inherit;
  color:var(--fg-primary);cursor:pointer;margin-top:var(--fg-space-3)}
.fg-lead__bankmore:hover{text-decoration:underline}
/* Исход заявки на карточке лида (задача 246, C4): логотипы банков, сумма, срок. */
.fg-lead__banks{display:flex;gap:var(--fg-space-2);align-items:center;flex-wrap:wrap;
  margin-top:var(--fg-space-3)}
/* Сумма и срок — отдельной строкой с воздухом: вплотную к ряду логотипов они
   читались как подпись под иконками, а это факты о сделке, а не о банках. */
.fg-lead__meta{margin-top:var(--fg-space-2);font-size:var(--fg-text-body-sm)}

/* Логотип банка в обводке ГРУППЫ СТАТУСА. Цвет тот же, что у бейджа и маркера
   задачи (задача 49): считает его бэк, фронт знает только класс. Обводка, а не
   точка рядом: на карточке лида важно «кто именно отказал и кто выпустил», а
   безымянные точки этого не говорили — приходилось наводить на каждую.
   Своё кольцо, а не .fg-stagering: то показывает ступени дорожной карты, здесь
   же цвет один и означает статус. */
.fg-bankdot{display:inline-flex;padding:2px;border-radius:var(--fg-radius-full);
  border:2px solid currentColor;color:var(--fg-ink-muted);line-height:0}
.fg-bankdot--c-blue{color:var(--fg-primary)}
.fg-bankdot--c-green{color:var(--fg-ok)}
.fg-bankdot--c-amber{color:var(--fg-warn)}
.fg-bankdot--c-indigo{color:var(--fg-indigo)}
.fg-bankdot--c-olive{color:var(--fg-olive)}
.fg-bankdot--c-red{color:var(--fg-danger)}
.fg-bankdot--c-gray{color:var(--fg-ink-muted)}
/* Хвост ряда: «+3» вместо шестого и дальше логотипов (кто в хвосте — в подсказке). */
.fg-bankdot-more{font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted);
  font-family:var(--fg-font-mono);cursor:default}

/* Точка ГРУППЫ СТАТУСА банка — те же семь групп, что у бейджа и маркера задачи
   (задача 49): цвет считает бэк (`status_color`), фронт знает только класс.
   Живёт здесь, а не в <style> списка заявок: палитра групп — часть дизайн-системы,
   и её копия на странице разъехалась бы с обводкой банка на карточке лида
   (.fg-bankdot ниже) ровно так же, как когда-то разъезжались метки статусов и их
   цвета. Точками сейчас рисуется свод банков в списке заявок. */
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;
  background:currentColor}
.status-dot--blue{color:var(--fg-primary)}
.status-dot--green{color:var(--fg-ok)}
.status-dot--amber{color:var(--fg-warn)}
.status-dot--indigo{color:var(--fg-indigo)}
.status-dot--olive{color:var(--fg-olive)}
.status-dot--red{color:var(--fg-danger)}
.status-dot--gray{color:var(--fg-ink-muted)}

/* --- Ролевая видимость -------------------------------------------------------------------
   lk.js ставит data-fg-role на <html> после auth/session; .fg-staff-only прячет
   агентские элементы (CTA «Создать заявку» и т.п.) в клиентском кабинете.
   Это UX-слой: настоящая защита — 403/фильтры на бэке. */
html[data-fg-role="client"] .fg-staff-only{display:none!important}

/* Атрибут hidden всегда побеждает display компонентов (.fg-field{display:flex} и т.п.);
   обобщение точечного правила [role="tabpanel"][hidden] выше. */
[hidden]{display:none!important}

/* --- Калькулятор «срок и комиссия» (задача 130) -------------------------------------------
   Панель выезжает справа поверх любой страницы кабинета; разметку собирает lk.js.
   Ширина фиксированная — контент страницы отодвигается на неё (.fg-shell.is-calc-open),
   а на узком экране панель занимает всё окно и ничего не двигает. */
.fg-calcbar{
  position:fixed;top:var(--fg-topbar-h);right:0;bottom:0;width:var(--fg-calcbar-w);
  background:var(--fg-surface);border-left:1px solid var(--fg-border);
  overflow-y:auto;overscroll-behavior:contain;z-index:40;
}
.fg-calcbar[hidden]{display:none!important}
.fg-calcbar__head{
  background:var(--fg-calcbar-head);padding:var(--fg-space-4);color:#fff;
  border-bottom:1px solid var(--fg-border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.fg-calcbar__head h2{margin:0;font-size:var(--fg-text-title);line-height:1.2;color:#fff}
.fg-calcbar__head p{margin:4px 0 0;font-size:var(--fg-text-body-sm);color:var(--fg-gray-300)}
.fg-calcbar__close{color:#fff;flex:none}
.fg-calcbar__body{padding:var(--fg-space-4)}
.fg-calcbar h3{font-size:var(--fg-text-title);margin:0 0 2px}
.fg-calcbar__sub{margin:0 0 var(--fg-space-3);font-size:var(--fg-text-body-sm);color:var(--fg-ink-muted)}
.fg-calcbar__field{margin-bottom:var(--fg-space-3)}
/* Поле и его замок — одна строка; подпись «рассчитано» лежит под ними и ничего не двигает */
.fg-calcbar__row{display:flex;align-items:center;gap:8px}
.fg-calcbar__box{flex:1;min-width:0}
/* Единица измерения лежит поверх правого края поля — поле остаётся во всю ширину строки */
.fg-calcbar__unit{position:relative}
.fg-calcbar__unit::after{
  content:attr(data-unit);position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--fg-ink-muted);font-size:var(--fg-text-body-sm);pointer-events:none;
}
.fg-calcbar__unit .fg-input{padding-right:26px}
/* Замок-переключатель: отмечает поле, которое считаем из двух других */
.fg-calcbar__lock{
  flex:none;width:34px;height:34px;border-radius:999px;border:1px solid var(--fg-border);
  background:var(--fg-surface);color:var(--fg-ink-faint);display:flex;align-items:center;
  justify-content:center;cursor:pointer;
}
.fg-calcbar__lock:hover{border-color:var(--fg-border-strong);color:var(--fg-ink-muted)}
.fg-calcbar__lock.is-on{border-color:var(--fg-primary);color:var(--fg-primary);background:var(--fg-wash-info)}
/* Вычисленное поле — та же подача, что у досчитанных значений в отчёте аналитика:
   заливка, уголок и подпись «рассчитано» (решение 18.08). */
.fg-calcbar__derived{position:relative}
.fg-calcbar__derived .fg-input{background:var(--fg-wash-info);border-color:var(--fg-primary)}
.fg-calcbar__derived::after{
  content:"";position:absolute;top:0;right:0;border:6px solid transparent;
  border-top-color:var(--fg-primary);border-right-color:var(--fg-primary);
  border-radius:0 var(--fg-radius-sm) 0 0;
}
.fg-calcbar__note{
  border-left:3px solid var(--fg-primary);background:var(--fg-wash-info);
  border-radius:0 8px 8px 0;padding:10px 12px;font-size:var(--fg-text-body-sm);
  line-height:18px;color:var(--fg-ink);margin-bottom:var(--fg-space-4);
}
/* Расшифровка расчёта: откуда взялось вычисленное значение */
.fg-calcbar__formula{
  font-size:var(--fg-text-caption);line-height:var(--fg-leading-caption);
  color:var(--fg-ink-muted);margin:0 0 var(--fg-space-4);
}
.fg-calcbar__formula[hidden]{display:none}
/* Страница отодвигается ровно на ширину панели — на десктопе она ничего не перекрывает */
@media (min-width:901px){
  .fg-shell.is-calc-open .fg-main{padding-right:calc(var(--fg-calcbar-w) + var(--fg-space-6))}
}
@media (max-width:900px){
  .fg-calcbar{width:100%;border-left:0}
}