/* ============================================================
   dc-ui · tokens.css — КОНТРАКТ дизайн-системы DICOM.

   Единый слой токенов для ВСЕХ продуктов экосистемы (Granit, СуперСистема,
   Ассистент, кабинет DC-Control, Задачник, CRM). Компоненты читают ТОЛЬКО эти
   переменные — ни одного литерала в .dc-*.

   ── АРХИТЕКТУРА: три слоя ──────────────────────────────────
   Слой 0  РУЧКИ ТЕМЫ     — то, чем человек управляет всей схемой. Их мало, они
                            на языке дизайнера. Тема продукта = переопределение
                            этих ручек (themes/<product>.css) или JSON-схема.
   Слой 1  ПРИМИТИВЫ      — вычисляются из ручек через calc(). Ручного ввода нет:
                            крутишь ручку → примитивы пересчитываются, тема «дышит».
   Слой 2  СЕМАНТИКА      — то, что читают компоненты (--dc-card-pad…). Ссылается
                            на примитивы. В .dc-* НЕТ чисел — только var(--dc-*).

   Канон: компонент → семантика → примитив → ручка.

   ── ДВЕ ГЛАВНЫЕ РУЧКИ ──────────────────────────────────────
   --dc-scale    масштаб «крупности»: двигает шрифты, высоты контролов, размеры
                 элементов, смещения теней. scale 1.2 = режим для слабовидящих.
   --dc-density  плотность «воздуха»: двигает охранные зоны/отступы. Меньше = компактно.

   Значения при scale=1 / density=1 совпадают с историческими → апгрейд без «прыжка».
   ============================================================ */

/* Регистрируем ручки как ТИПИЗИРОВАННЫЕ значения. Без этого браузер не пересчитывает
   цепочки calc() при смене ручки (--dc-fs-md → calc(14px * var(--dc-scale)) «застывал»).
   @property делает зависимость надёжной: крутишь ручку → вся схема пересчитывается. */
@property --dc-scale           { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-density         { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-space-unit      { syntax: "<length>"; inherits: true; initial-value: 4px; }
@property --dc-gap-outer-k     { syntax: "<number>"; inherits: true; initial-value: 4; }
@property --dc-pad-inner-k     { syntax: "<number>"; inherits: true; initial-value: 6; }
@property --dc-btn-pad-x-k     { syntax: "<number>"; inherits: true; initial-value: 4; }
@property --dc-btn-pad-y-k     { syntax: "<number>"; inherits: true; initial-value: 2.5; }
@property --dc-shadow-strength { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-surface-alpha   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-glass-blur      { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --dc-glass-saturate  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-gradient-angle  { syntax: "<angle>";  inherits: true; initial-value: 135deg; }
@property --dc-bg-grad-angle   { syntax: "<angle>";  inherits: true; initial-value: 135deg; }
@property --dc-bg-grad-opacity { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --dc-radius-base     { syntax: "<length>"; inherits: true; initial-value: 12px; }
@property --dc-border-width    { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --dc-focus-strength  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-transition-speed{ syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-heading-scale   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-fw-heading      { syntax: "<number>"; inherits: true; initial-value: 700; }
@property --dc-fs-base         { syntax: "<length>"; inherits: true; initial-value: 14px; }
@property --dc-shadow-blur     { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-shadow-offset   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dc-btn-radius      { syntax: "<length>"; inherits: true; initial-value: 8px; }
@property --dc-field-radius    { syntax: "<length>"; inherits: true; initial-value: 8px; }
@property --dc-ease-x1         { syntax: "<number>"; inherits: true; initial-value: 0.4; }
@property --dc-ease-y1         { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --dc-ease-x2         { syntax: "<number>"; inherits: true; initial-value: 0.2; }
@property --dc-ease-y2         { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {

  /* ════════════════════════════════════════════════════════
     СЛОЙ 0 · РУЧКИ ТЕМЫ  (правь эти — и меняется вся схема)
     ════════════════════════════════════════════════════════ */

  /* ---------- Крупность / воздух / форма / глубина ---------- */
  --dc-scale:            1;      /* масштаб: шрифт+геометрия (1 базово, 1.2 крупно) */
  --dc-density:          1;      /* плотность отступов (1 базово, .85 компактно, 1.2 просторно) */
  --dc-radius-base:      12px;   /* общее скругление элементов темы */
  --dc-border-width:     1px;    /* толщина рамок/хайрлайнов */
  --dc-shadow-strength:  1;      /* глубина/интенсивность теней (0 = плоско, 1.4 = глубоко) */
  --dc-shadow-color:     #16233E; /* цвет тени */
  --dc-shadow-blur:      1;       /* множитель размытия тени */
  --dc-shadow-offset:    1;       /* множитель смещения тени */
  --dc-focus-strength:   1;      /* интенсивность фокус-кольца */
  --dc-transition-speed: 1;      /* множитель скорости анимаций (0.5 = быстрее, 2 = медленнее) */
  --dc-heading-scale:    1;      /* крупность заголовков H1–H3 поверх масштаба */
  --dc-fw-heading:       700;    /* насыщенность заголовков (H2/H3 = −100) */
  --dc-heading-tracking: 0em;    /* трекинг (letter-spacing) заголовков */

  /* ---------- Бренд / акцент (остальная палитра — производная) ---------- */
  --dc-color-primary:        #2B8FEA;
  --dc-color-primary-strong: #1C77D2;
  --dc-color-primary-soft:   #E8F2FE;
  --dc-color-primary-light:  #5AA6F0;  /* сплошной светлый оттенок акцента */
  --dc-color-primary-tint:   color-mix(in srgb, var(--dc-color-primary) 22%, white);  /* СОФТ-заливка из акцента (видимая) — фон primary-кнопки */
  --dc-color-on-primary:     #FFFFFF;
  --dc-gradient-angle:       135deg;                                     /* угол градиента (кнопки, акценты) */
  --dc-gradient-brand:       linear-gradient(var(--dc-gradient-angle), color-mix(in srgb, var(--dc-color-primary) 85%, white) 0%, var(--dc-color-primary-strong) 100%);

  /* ---------- Пер-контекстные акценты (по умолчанию = ОБЩИЙ акцент, можно отвязать) ----------
     Человек может задать кнопкам один акцент, ссылкам/навигации — другой, заголовкам — свой цвет. */
  --dc-accent-btn:    var(--dc-color-primary);
  --dc-accent-link:   var(--dc-color-primary);
  --dc-accent-nav:    var(--dc-color-primary);
  --dc-accent-field:  var(--dc-color-primary);
  --dc-heading-color: var(--dc-color-text);
  /* Заливка/текст primary-кнопки выводятся из акцента кнопок (при дефолте ≈ прежний вид). */
  --dc-btn-fill: color-mix(in srgb, var(--dc-accent-btn) 22%, white);
  --dc-btn-ink:  color-mix(in srgb, var(--dc-accent-btn) 88%, #0a2540);


  /* ════════════════════════════════════════════════════════
     ПАЛИТРА · семантика статусов, текст, поверхности
     ════════════════════════════════════════════════════════ */

  /* ---------- Статусы ---------- */
  --dc-color-success:      #1FA971;
  --dc-color-success-soft: #E4F6EE;
  --dc-color-warning:      #C77A0A;
  --dc-color-warning-soft: #FBF0DD;
  --dc-color-danger:       #C0392B;
  --dc-color-danger-soft:  #FBEAE8;
  --dc-color-info:         #2B8FEA;
  --dc-color-info-soft:    #E8F2FE;

  /* ---------- Текст ---------- */
  --dc-color-text:       #16233E;
  --dc-color-text-soft:  #5B6577;
  --dc-color-text-muted: #9098A8;
  --dc-color-text-invert:#FFFFFF;

  /* ---------- Поверхности ---------- */
  --dc-color-bg:            #F7F9FC;  /* фон приложения */
  --dc-color-surface:       #FFFFFF;  /* карточка/панель */
  --dc-color-surface-alt:   #F2F5FA;  /* второстепенная поверхность (thead, hover) */
  --dc-color-border:        #ECEFF4;
  --dc-color-border-strong: #E1E6EE;

  /* Прозрачность и стекло поверхностей (ручки Слоя 0).
     alpha=1 — плотная поверхность; ниже — просвечивает. blur>0 — размывает фон за ней (эффект стекла). */
  --dc-surface-alpha:    1;
  --dc-glass-blur:       0px;
  --dc-glass-saturate:   1;
  --dc-surface-bg:       color-mix(in srgb, var(--dc-color-surface)     calc(var(--dc-surface-alpha) * 100%), transparent);
  --dc-surface-alt-bg:   color-mix(in srgb, var(--dc-color-surface-alt) calc(var(--dc-surface-alpha) * 100%), transparent);
  --dc-glass:            blur(var(--dc-glass-blur)) saturate(var(--dc-glass-saturate));

  /* Градиент фона приложения (ручки Слоя 0). Интенсивность=0 → фон сплошной (var(--dc-color-bg)).
     Тот же приём, что у кнопочного градиента (--dc-gradient-*): угол + два цвета. */
  --dc-bg-grad-angle:    135deg;
  --dc-bg-grad-opacity:  0;
  --dc-bg-from:          var(--dc-color-primary);
  --dc-bg-to:            var(--dc-color-bg);
  --dc-bg:               linear-gradient(var(--dc-bg-grad-angle),
                           color-mix(in srgb, var(--dc-bg-from) calc(var(--dc-bg-grad-opacity) * 100%), transparent) 0%,
                           color-mix(in srgb, var(--dc-bg-to)   calc(var(--dc-bg-grad-opacity) * 100%), transparent) 100%);

  /* Базовый «тёмный» тон — канал RGB для теней/подложек (tint из него). */
  --dc-color-shadow-rgb:    22, 35, 62;
  --dc-color-overlay:       rgba(var(--dc-color-shadow-rgb), .48); /* подложка модалки */


  /* ════════════════════════════════════════════════════════
     ТИПОГРАФИКА · якоря × масштаб
     Якорь (px) — единственная точка определения размера; scale его множит.
     ════════════════════════════════════════════════════════ */
  --dc-font:      'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dc-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --dc-fs-base: 14px;   /* базовый размер шрифта (ручка) — от него строится вся шкала */
  --dc-fs-xs:  calc(var(--dc-fs-base) * 0.821 * var(--dc-scale));   /* ≈11.5 */
  --dc-fs-sm:  calc(var(--dc-fs-base) * 0.929 * var(--dc-scale));   /* ≈13 */
  --dc-fs-md:  calc(var(--dc-fs-base) * var(--dc-scale));           /* базовый размер интерфейса */
  --dc-fs-lg:  calc(var(--dc-fs-base) * 1.143 * var(--dc-scale));   /* ≈16 */
  --dc-fs-xl:  calc(var(--dc-fs-base) * 1.429 * var(--dc-scale) * var(--dc-heading-scale));   /* ≈20 */
  --dc-fs-2xl: calc(var(--dc-fs-base) * 1.857 * var(--dc-scale) * var(--dc-heading-scale));   /* ≈26 */
  --dc-fs-3xl: calc(var(--dc-fs-base) * 2.429 * var(--dc-scale) * var(--dc-heading-scale));   /* ≈34 */

  --dc-lh-tight:   1.2;
  --dc-lh-normal:  1.5;
  --dc-fw-normal:   400;
  --dc-fw-medium:   500;
  --dc-fw-semibold: 600;
  --dc-fw-bold:     700;


  /* ════════════════════════════════════════════════════════
     ОХРАННЫЕ ЗОНЫ (ВОЗДУХ) · шаг × номер × плотность
     Ритм отступов. Всё кратно шагу; density сжимает/расширяет разом.
     ════════════════════════════════════════════════════════ */
  --dc-space-unit: 4px;                                                   /* базовый шаг ритма */
  --dc-space-0:    0;
  --dc-space-2xs:  calc(var(--dc-space-unit) *  .5 * var(--dc-density));  /* 2  — хайрлайн-воздух */
  --dc-space-1:    calc(var(--dc-space-unit) *  1  * var(--dc-density));  /* 4  */
  --dc-space-1h:   calc(var(--dc-space-unit) * 1.5 * var(--dc-density));  /* 6  — частый мелкий gap */
  --dc-space-2:    calc(var(--dc-space-unit) *  2  * var(--dc-density));  /* 8  */
  --dc-space-3:    calc(var(--dc-space-unit) *  3  * var(--dc-density));  /* 12 */
  --dc-space-4:    calc(var(--dc-space-unit) *  4  * var(--dc-density));  /* 16 */
  --dc-space-5:    calc(var(--dc-space-unit) *  6  * var(--dc-density));  /* 24 */
  --dc-space-6:    calc(var(--dc-space-unit) *  8  * var(--dc-density));  /* 32 */
  --dc-space-7:    calc(var(--dc-space-unit) * 12  * var(--dc-density));  /* 48 */
  --dc-space-8:    calc(var(--dc-space-unit) * 16  * var(--dc-density));  /* 64 */

  /* Семантические зоны — база × чистый коэффициент × плотность.
     Правишь коэффициент (не «прыгающую» шкалу): сколько базовых шагов воздуха. */
  --dc-gap-outer-k: 4;                                                          /* внешняя зона: между блоками */
  --dc-gap-outer:  calc(var(--dc-space-unit) * var(--dc-gap-outer-k) * var(--dc-density));
  --dc-pad-inner-k: 6;                                                          /* внутренняя зона: паддинг блока */
  --dc-pad-inner:  calc(var(--dc-space-unit) * var(--dc-pad-inner-k) * var(--dc-density));
  --dc-btn-pad-x-k: 4;                                                          /* воздух кнопки по горизонтали */
  --dc-btn-pad-x:  calc(var(--dc-space-unit) * var(--dc-btn-pad-x-k) * var(--dc-density));
  --dc-btn-pad-y-k: 2.5;                                                        /* воздух кнопки по вертикали */
  --dc-btn-pad-y:  calc(var(--dc-space-unit) * var(--dc-btn-pad-y-k) * var(--dc-density));


  /* ════════════════════════════════════════════════════════
     ФОРМА · скругление и границы (от ручки --dc-radius-base)
     ════════════════════════════════════════════════════════ */
  --dc-radius-xs:    calc(var(--dc-radius-base) * .5);    /* 6  */
  --dc-radius-sm:    calc(var(--dc-radius-base) * .667);  /* 8  */
  --dc-radius:       var(--dc-radius-base);               /* 12 */
  --dc-radius-lg:    calc(var(--dc-radius-base) * 1.5);   /* 18 */
  --dc-radius-pill:  999px;
  /* --dc-border-width — ручка Слоя 0 (толщина рамок). */


  /* ════════════════════════════════════════════════════════
     ТЕНИ · смещение/блюр × масштаб, альфа × сила
     Цвет тени — единый тёмный канал; сила регулирует прозрачность.
     ════════════════════════════════════════════════════════ */
  --dc-shadow-xs:
      0 calc(1px * var(--dc-scale) * var(--dc-shadow-offset)) calc(2px * var(--dc-scale) * var(--dc-shadow-blur))
      color-mix(in srgb, var(--dc-shadow-color) calc(5% * var(--dc-shadow-strength)), transparent);
  --dc-shadow-sm:
      0 calc(2px * var(--dc-scale) * var(--dc-shadow-offset)) calc(8px * var(--dc-scale) * var(--dc-shadow-blur))
      color-mix(in srgb, var(--dc-shadow-color) calc(6% * var(--dc-shadow-strength)), transparent),
      0 calc(1px * var(--dc-scale) * var(--dc-shadow-offset)) calc(2px * var(--dc-scale) * var(--dc-shadow-blur))
      color-mix(in srgb, var(--dc-shadow-color) calc(4% * var(--dc-shadow-strength)), transparent);
  --dc-shadow-md:
      0 calc(12px * var(--dc-scale) * var(--dc-shadow-offset)) calc(32px * var(--dc-scale) * var(--dc-shadow-blur))
      color-mix(in srgb, var(--dc-shadow-color) calc(10% * var(--dc-shadow-strength)), transparent);
  --dc-shadow-lg:
      0 calc(24px * var(--dc-scale) * var(--dc-shadow-offset)) calc(56px * var(--dc-scale) * var(--dc-shadow-blur))
      color-mix(in srgb, var(--dc-shadow-color) calc(16% * var(--dc-shadow-strength)), transparent);
  /* Фирменное «свечение» — мягкая цветная тень от акцента. */
  --dc-shadow-glow:
      0 calc(4px * var(--dc-scale)) calc(12px * var(--dc-scale))
      color-mix(in srgb, var(--dc-color-primary) calc(14% * var(--dc-shadow-strength)), transparent);
  --dc-shadow-glow-lg:
      0 calc(8px * var(--dc-scale)) calc(20px * var(--dc-scale))
      color-mix(in srgb, var(--dc-color-primary) calc(22% * var(--dc-shadow-strength)), transparent);

  /* Текст-тень (напр. инициалы на обложке карточки). */
  --dc-text-shadow: 0 1px 3px rgba(var(--dc-color-shadow-rgb), .25);

  /* Фокус-кольцо — от акцента; интенсивность = ручка focus-strength. */
  --dc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--dc-color-primary) calc(35% * var(--dc-focus-strength)), transparent);


  /* ════════════════════════════════════════════════════════
     РАЗМЕРЫ · фиксированные габариты элементов × масштаб
     ════════════════════════════════════════════════════════ */
  /* Высоты управляющих элементов (кнопка/поле) */
  --dc-control-height:    calc(38px * var(--dc-scale));
  --dc-control-height-sm: calc(30px * var(--dc-scale));
  --dc-control-height-lg: calc(46px * var(--dc-scale));

  /* Иконки и штучные размеры компонентов */
  --dc-size-icon:       calc(18px * var(--dc-scale));   /* svg внутри кнопок/панелей */
  --dc-size-tile:       calc(32px * var(--dc-scale));   /* иконка-плитка раздела */
  --dc-size-check:      calc(17px * var(--dc-scale));   /* чекбокс/радио */
  --dc-size-avatar:     calc(36px * var(--dc-scale));
  --dc-size-avatar-lg:  calc(52px * var(--dc-scale));
  --dc-size-spinner:    calc(18px * var(--dc-scale));
  --dc-size-dot:        calc(6px  * var(--dc-scale));   /* точка-индикатор (chip/health) */
  --dc-size-bar:        calc(6px  * var(--dc-scale));   /* высота прогресс-полос */

  /* Переключатель (switch) */
  --dc-switch-w:     calc(40px * var(--dc-scale));
  --dc-switch-h:     calc(22px * var(--dc-scale));
  --dc-switch-thumb: calc(18px * var(--dc-scale));

  /* Канбан-колонка (десктоп / узкий экран) */
  --dc-kanban-col:    calc(264px * var(--dc-scale));
  --dc-kanban-col-sm: calc(240px * var(--dc-scale));


  /* ════════════════════════════════════════════════════════
     ДВИЖЕНИЕ · переходы и hover-лифт
     ════════════════════════════════════════════════════════ */
  /* Кривая движения (Безье) — 4 ручки контрольных точек. */
  --dc-ease-x1: 0.4;  --dc-ease-y1: 0;
  --dc-ease-x2: 0.2;  --dc-ease-y2: 1;
  --dc-ease: cubic-bezier(var(--dc-ease-x1), var(--dc-ease-y1), var(--dc-ease-x2), var(--dc-ease-y2));
  --dc-transition:      calc(180ms * var(--dc-transition-speed)) var(--dc-ease);
  --dc-transition-slow: calc(320ms * var(--dc-transition-speed)) var(--dc-ease);
  --dc-lift-1: -1px;   /* приподнятие при hover — уровни */
  --dc-lift-2: -2px;
  --dc-lift-3: -3px;


  /* ════════════════════════════════════════════════════════
     СЛОИ (z-index)
     ════════════════════════════════════════════════════════ */
  --dc-z-base:     1;
  --dc-z-dropdown: 1000;
  --dc-z-sticky:   1100;
  --dc-z-modal:    1300;
  --dc-z-toast:    1500;
  --dc-z-tooltip:  1700;


  /* ════════════════════════════════════════════════════════
     СЛОЙ 2 · СЕМАНТИКА КОМПОНЕНТОВ  (что читают .dc-*)
     Здесь связываем понятие компонента с примитивом. Хочешь особый радиус
     карточки — правишь тут, не трогая примитивы.
     ════════════════════════════════════════════════════════ */
  /* Скругление по элементам (в продуктах следуют за темой; в редакторе — отдельные ручки) */
  --dc-btn-radius:   var(--dc-radius-sm);   /* скругление кнопок */
  --dc-field-radius: var(--dc-radius-sm);   /* скругление полей */
  /* Поле / форма */
  --dc-field-bg:           var(--dc-color-bg);            /* фон поля/textarea — отдельный от карточки (утопленный) */
  --dc-field-gap:          var(--dc-space-1h);            /* воздух метка ↔ контрол */
  --dc-field-textarea-min: calc(96px * var(--dc-scale));  /* мин. высота textarea */
  /* Бейдж */
  --dc-badge-pad-y: var(--dc-space-2xs);
  --dc-badge-pad-x: var(--dc-space-2);
  /* Чат */
  --dc-chat-feed-max-h:  480px;                           /* высота ленты сообщений */
  --dc-chat-input-min-h: calc(44px * var(--dc-scale));
  /* Канбан */
  --dc-kanban-min-h:      calc(120px * var(--dc-scale));  /* мин. высота доски */
  --dc-kanban-drop-min-h: calc(60px * var(--dc-scale));   /* мин. высота пустой колонки-дропзоны */
  /* Габариты попапов — фиксированные (не масштабируются, чтобы не распухали) */
  --dc-menu-min-w:      190px;
  --dc-modal-w:         520px;
  --dc-modal-w-sm:      400px;
  --dc-modal-w-lg:      760px;
  --dc-toast-min-w:     260px;
  --dc-toast-max-w:     380px;
  --dc-tooltip-max-w:   240px;
  --dc-popover-w:       280px;                            /* ширина панели поповера */
  --dc-datepicker-w:    280px;                            /* ширина панели датапикера */
  --dc-form-narrow-max: 640px;                            /* читаемая ширина колонки формы */
  --dc-stepper-w:       120px;                            /* ширина числового степпера по умолчанию */
  --dc-cal-cell:        calc(34px * var(--dc-scale));     /* сторона ячейки дня в календаре */


  /* ── РЕЕСТР БРЕЙКПОИНТОВ ────────────────────────────────────
     CSS не читает var() внутри @media, поэтому брейкпоинты живут числами.
     Единый набор для всей системы (правь синхронно в компонентах):
        440px · 640px · 900px · 1200px · 1400px
     ─────────────────────────────────────────────────────────── */
}

/* ════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА — переопределения токенов при data-theme="dark".
   Ставится на <html data-theme="dark">. Акценты/статусы наследуются (читаются на тёмном),
   меняются поверхности, текст, границы, тени и мягкие фоны.
   ════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --dc-color-bg:            #0F1622;
  --dc-color-surface:       #17202E;
  --dc-color-surface-alt:   #1E2A3A;
  --dc-color-border:        #29374B;
  --dc-color-border-strong: #384A63;
  --dc-color-text:          #E7ECF5;
  --dc-color-text-soft:     #A6B1C4;
  --dc-color-text-muted:    #6F7C92;
  --dc-color-text-invert:   #0F1622;
  --dc-color-shadow-rgb:    0, 0, 0;
  --dc-shadow-color:        #000000;
  --dc-color-overlay:       rgba(0, 0, 0, .6);
  /* Мягкие фоны — тёмные тинты из соответствующего цвета. */
  --dc-color-primary-soft:  color-mix(in srgb, var(--dc-color-primary) 26%, #17202E);
  --dc-color-primary-tint:  color-mix(in srgb, var(--dc-color-primary) 30%, #17202E);
  --dc-color-success-soft:  color-mix(in srgb, var(--dc-color-success) 22%, #17202E);
  --dc-color-warning-soft:  color-mix(in srgb, var(--dc-color-warning) 22%, #17202E);
  --dc-color-danger-soft:   color-mix(in srgb, var(--dc-color-danger)  22%, #17202E);
  --dc-color-info-soft:     color-mix(in srgb, var(--dc-color-info)    22%, #17202E);
  /* Primary-кнопка на тёмном. */
  --dc-btn-fill: color-mix(in srgb, var(--dc-accent-btn) 28%, #17202E);
  --dc-btn-ink:  color-mix(in srgb, var(--dc-accent-btn) 62%, white);
}
/* ============================================================
   dc-ui · base.css — сброс, типографика, сетка, утилиты.
   Читает только токены из tokens.css. Подключать ПОСЛЕ tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

.dc, .dc * { font-family: var(--dc-font); }

/* Корневой контейнер приложения (необязателен, но задаёт базовые цвета/шрифт). */
.dc-app {
  font-family: var(--dc-font);
  font-size: var(--dc-fs-md);
  line-height: var(--dc-lh-normal);
  color: var(--dc-color-text);
  background-color: var(--dc-color-bg);
  background-image: var(--dc-bg);
}

/* ---------- Типографика ---------- */
.dc-h1 { font-size: var(--dc-fs-3xl); line-height: var(--dc-lh-tight); font-weight: var(--dc-fw-heading); letter-spacing: var(--dc-heading-tracking); color: var(--dc-heading-color); margin: 0 0 var(--dc-space-4); }
.dc-h2 { font-size: var(--dc-fs-2xl); line-height: var(--dc-lh-tight); font-weight: max(100, calc(var(--dc-fw-heading) - 100)); letter-spacing: var(--dc-heading-tracking); color: var(--dc-heading-color); margin: 0 0 var(--dc-space-3); }
.dc-h3 { font-size: var(--dc-fs-xl);  line-height: var(--dc-lh-tight); font-weight: max(100, calc(var(--dc-fw-heading) - 100)); letter-spacing: var(--dc-heading-tracking); color: var(--dc-heading-color); margin: 0 0 var(--dc-space-3); }
.dc-text      { color: var(--dc-color-text); }
.dc-text-soft { color: var(--dc-color-text-soft); }
.dc-muted     { color: var(--dc-color-text-muted); }
.dc-lead      { font-size: var(--dc-fs-lg); color: var(--dc-color-text-soft); line-height: var(--dc-lh-normal); }
.dc-small     { font-size: var(--dc-fs-sm); }
.dc-code {
  font-family: var(--dc-font-mono); font-size: .88em;
  background: var(--dc-color-surface-alt); color: var(--dc-color-primary-strong);
  padding: 2px 7px; border-radius: var(--dc-radius-xs);
}
.dc-link { color: var(--dc-accent-link); text-decoration: none; transition: color var(--dc-transition); }
.dc-link:hover { text-decoration: underline; }

/* ---------- Сетка (flex, 12 колонок) ---------- */
.dc-row { display: flex; flex-wrap: wrap; gap: var(--dc-space-4); }
.dc-row--tight { gap: var(--dc-space-2); }
.dc-row--loose { gap: var(--dc-space-6); }
.dc-col { flex: 1 1 0; min-width: 0; }
.dc-col-auto { flex: 0 0 auto; }
.dc-col-1  { flex: 0 0 calc(8.3333%  - var(--dc-space-4)); }
.dc-col-2  { flex: 0 0 calc(16.6667% - var(--dc-space-4)); }
.dc-col-3  { flex: 0 0 calc(25%      - var(--dc-space-4)); }
.dc-col-4  { flex: 0 0 calc(33.3333% - var(--dc-space-4)); }
.dc-col-5  { flex: 0 0 calc(41.6667% - var(--dc-space-4)); }
.dc-col-6  { flex: 0 0 calc(50%      - var(--dc-space-4)); }
.dc-col-7  { flex: 0 0 calc(58.3333% - var(--dc-space-4)); }
.dc-col-8  { flex: 0 0 calc(66.6667% - var(--dc-space-4)); }
.dc-col-9  { flex: 0 0 calc(75%      - var(--dc-space-4)); }
.dc-col-10 { flex: 0 0 calc(83.3333% - var(--dc-space-4)); }
.dc-col-12 { flex: 0 0 100%; }
@media (max-width: 720px) {
  [class*="dc-col-"] { flex: 0 0 100%; }
}

/* Автосетка равных карточек. */
.dc-grid { display: grid; gap: var(--dc-gap-outer); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---------- Стек / кластер ---------- */
.dc-stack { display: flex; flex-direction: column; gap: var(--dc-space-3); }
.dc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dc-space-2); }
.dc-between { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-3); }
.dc-spacer { flex: 1 1 auto; }

/* ---------- Утилиты ---------- */
.dc-hidden { display: none !important; }
.dc-block  { display: block; }
.dc-flex   { display: flex; }
.dc-w-full { width: 100%; }
.dc-nowrap { white-space: nowrap; }
.dc-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dc-ta-left   { text-align: left; }
.dc-ta-center { text-align: center; }
.dc-ta-right  { text-align: right; }

.dc-mt-0 { margin-top: 0; }        .dc-mt-2 { margin-top: var(--dc-space-2); }
.dc-mt-3 { margin-top: var(--dc-space-3); } .dc-mt-4 { margin-top: var(--dc-space-4); }
.dc-mt-5 { margin-top: var(--dc-space-5); } .dc-mt-6 { margin-top: var(--dc-space-6); }
.dc-mb-0 { margin-bottom: 0; }     .dc-mb-2 { margin-bottom: var(--dc-space-2); }
.dc-mb-3 { margin-bottom: var(--dc-space-3); } .dc-mb-4 { margin-bottom: var(--dc-space-4); }
.dc-mb-5 { margin-bottom: var(--dc-space-5); } .dc-mb-6 { margin-bottom: var(--dc-space-6); }

/* Общая утилита фокуса для кастомных интерактивных элементов. */
.dc-focusable:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
/* ============================================================
   dc-ui · components.css — интерфейсные компоненты.
   Читают ТОЛЬКО токены — ни одного числового литерала (КАНОН «ноль магии»).
   Подключать ПОСЛЕ tokens.css + base.css. Namespace классов — .dc-*.
   Интерактив (модалка/дропдаун/табы/тост/тултип/сортировка таблиц) поднимает
   dc-ui.js по data-атрибутам.

   ЕДИНСТВЕННОЕ исключение — брейкпоинты @media: CSS не читает var() внутри
   media-запросов, поэтому пороги живут числами. Реестр (правь синхронно):
        440px · 640px · 900px · 1200px · 1400px
   ============================================================ */

/* ============== Кнопки ============== */
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-space-2);
  min-height: var(--dc-control-height); padding: var(--dc-btn-pad-y) var(--dc-btn-pad-x);
  font-family: var(--dc-font); font-size: var(--dc-fs-md); font-weight: var(--dc-fw-medium); line-height: 1;
  border: var(--dc-border-width) solid transparent; border-radius: var(--dc-btn-radius);
  background: var(--dc-color-surface-alt); color: var(--dc-color-text);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dc-transition), color var(--dc-transition), border-color var(--dc-transition), box-shadow var(--dc-transition), transform var(--dc-transition);
}
/* Hover нейтральной кнопки — ТОЛЬКО для дефолтной .dc-btn (без цветного варианта),
   иначе серый фон перебивал бы цветные варианты (баг: primary/danger сереют). */
.dc-btn:not([class*="dc-btn--"]):hover { background: var(--dc-color-border); }
.dc-btn:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
.dc-btn:disabled, .dc-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; transform: none; }

/* Фирменная CTA: ЛЁГКАЯ заливка из акцента схемы (не яркий акцент) + акцентный текст +
   лёгкий подъём. Тень — нейтральная серая (не акцентная). */
.dc-btn--primary { background: var(--dc-btn-fill); color: var(--dc-btn-ink); box-shadow: var(--dc-shadow-sm); }
.dc-btn--primary:hover { background: color-mix(in srgb, var(--dc-accent-btn) 36%, white); color: var(--dc-btn-ink); transform: translateY(var(--dc-lift-1)); box-shadow: var(--dc-shadow-md); }
.dc-btn--primary:active { transform: translateY(0); }
/* Опциональная градиентная версия — только если продукт САМ задал --dc-gradient-brand. */
.dc-btn--gradient { background: var(--dc-gradient-brand); color: var(--dc-color-on-primary); box-shadow: var(--dc-shadow-glow); }
.dc-btn--gradient:hover { transform: translateY(var(--dc-lift-1)); box-shadow: var(--dc-shadow-glow-lg); filter: saturate(1.06); }
.dc-btn--gradient:active { transform: translateY(0); }
.dc-btn--outline { background: transparent; border-color: var(--dc-color-border-strong); color: var(--dc-color-text); }
.dc-btn--outline:hover { border-color: var(--dc-color-primary); color: var(--dc-color-primary); background: var(--dc-color-primary-soft); }
.dc-btn--ghost { background: transparent; color: var(--dc-color-text-soft); }
.dc-btn--ghost:hover { background: var(--dc-color-surface-alt); color: var(--dc-color-text); }
.dc-btn--danger { background: var(--dc-color-danger); color: var(--dc-color-text-invert); }
.dc-btn--danger:hover { filter: brightness(.94); }
/* Приглушённое деструктивное действие (напр. «Удал.» в строках таблицы): контур, не заливка. */
.dc-btn--danger-ghost { background: var(--dc-color-surface); color: var(--dc-color-danger); border-color: color-mix(in srgb, var(--dc-color-danger) 34%, var(--dc-color-border)); }
.dc-btn--danger-ghost:hover { background: var(--dc-color-danger-soft); border-color: var(--dc-color-danger); }
.dc-btn--success { background: var(--dc-color-success); color: var(--dc-color-text-invert); }

.dc-btn--sm { height: var(--dc-control-height-sm); padding: 0 var(--dc-space-3); font-size: var(--dc-fs-sm); }
.dc-btn--lg { height: var(--dc-control-height-lg); padding: 0 var(--dc-space-5); font-size: var(--dc-fs-lg); }
.dc-btn--pill { border-radius: var(--dc-radius-pill); }
.dc-btn--block { width: 100%; }
.dc-btn--icon { width: var(--dc-control-height); padding: 0; }
.dc-btn--icon.dc-btn--sm { width: var(--dc-control-height-sm); }

/* ============== Карточка / панель ============== */
.dc-card {
  background: var(--dc-surface-bg); border: var(--dc-border-width) solid var(--dc-color-border);
  -webkit-backdrop-filter: var(--dc-glass); backdrop-filter: var(--dc-glass);
  border-radius: var(--dc-radius); box-shadow: var(--dc-shadow-sm);
  padding: var(--dc-pad-inner);
  transition: box-shadow var(--dc-transition), transform var(--dc-transition), border-color var(--dc-transition);
}
.dc-card--flat { box-shadow: none; }
.dc-card--pad-0 { padding: 0; }
/* Интерактивная карточка (ссылка/кнопка-плитка): подъём + свечение при наведении. */
.dc-card--hover { cursor: pointer; }
.dc-card--hover:hover { transform: translateY(var(--dc-lift-3)); box-shadow: var(--dc-shadow-md); border-color: color-mix(in srgb, var(--dc-color-primary) 40%, var(--dc-color-border)); }

.dc-panel {
  background: var(--dc-surface-bg); border: var(--dc-border-width) solid var(--dc-color-border);
  -webkit-backdrop-filter: var(--dc-glass); backdrop-filter: var(--dc-glass);
  border-radius: var(--dc-radius); box-shadow: var(--dc-shadow-sm); overflow: hidden;
}
.dc-panel__head {
  display: flex; align-items: center; gap: var(--dc-space-3);
  padding: var(--dc-space-4) var(--dc-space-5); border-bottom: var(--dc-border-width) solid var(--dc-color-border);
}
/* Фирменная иконка-плитка раздела: акцент из схемы + мягкое свечение (тоже из акцента). */
.dc-panel__ico { flex: none; width: var(--dc-size-tile); height: var(--dc-size-tile); border-radius: var(--dc-radius-sm); display: grid; place-items: center; background: var(--dc-color-primary); color: var(--dc-color-on-primary); box-shadow: var(--dc-shadow-glow); }
.dc-panel__ico svg { width: var(--dc-size-icon); height: var(--dc-size-icon); }
.dc-panel__title { font-weight: var(--dc-fw-semibold); font-size: var(--dc-fs-lg); }
.dc-panel__title .sub { text-transform: none; letter-spacing: 0; font-weight: var(--dc-fw-normal); font-size: var(--dc-fs-sm); color: var(--dc-color-text-muted); margin-left: var(--dc-space-2); }
/* Блок действий в шапке панели — прижат вправо. */
.dc-panel__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--dc-space-2); }
.dc-panel__body { padding: var(--dc-pad-inner); }
.dc-panel__body--flush { padding: 0; }
.dc-panel__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dc-space-4); padding: var(--dc-space-4) var(--dc-space-5); border-top: var(--dc-border-width) solid var(--dc-color-border); background: var(--dc-color-surface-alt); }

/* ============== Бейджи / чипы / теги ============== */
.dc-badge {
  display: inline-flex; align-items: center; gap: var(--dc-space-1);
  padding: var(--dc-badge-pad-y) var(--dc-badge-pad-x); font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-semibold);
  border-radius: var(--dc-radius-pill); background: var(--dc-color-surface-alt); color: var(--dc-color-text-soft);
  text-transform: uppercase; letter-spacing: .03em;
}
.dc-badge--primary { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); }
.dc-badge--success { background: var(--dc-color-success-soft); color: var(--dc-color-success); }
.dc-badge--warning { background: var(--dc-color-warning-soft); color: var(--dc-color-warning); }
.dc-badge--danger  { background: var(--dc-color-danger-soft);  color: var(--dc-color-danger); }
/* Бейдж-тип (напр. имя компонента блока): мягкий акцент из схемы, без градиента. */
.dc-badge--brand { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); }
.dc-badge--dot::before { content: ""; width: var(--dc-size-dot); height: var(--dc-size-dot); border-radius: 50%; background: currentColor; }

/* Чип/тег — ТРИ размера: `--lg` (крупный), базовый (средний), `--sm` (мелкий тег, напр. цветная
   метка). Цвет тега задаётся инлайном/классом поверх — bg/color/border перекрывают базовые. */
.dc-chip {
  display: inline-flex; align-items: center; gap: var(--dc-space-2); white-space: nowrap;
  height: var(--dc-control-height-sm); padding: 0 var(--dc-space-3); line-height: 1;
  font-size: var(--dc-fs-sm); font-weight: var(--dc-fw-medium); border-radius: var(--dc-radius-pill);
  background: var(--dc-color-surface-alt); color: var(--dc-color-text); border: var(--dc-border-width) solid var(--dc-color-border);
}
.dc-chip--lg { height: var(--dc-control-height); padding: 0 var(--dc-space-4); font-size: var(--dc-fs-md); }
.dc-chip--sm { height: auto; padding: var(--dc-space-2xs) var(--dc-space-3); gap: var(--dc-space-1); font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-semibold); }
/* Активный/выбранный чип-фильтр — залит акцентом схемы. */
.dc-chip--active { background: var(--dc-color-primary); border-color: var(--dc-color-primary); color: var(--dc-color-on-primary); }
.dc-chip--active:hover { border-color: var(--dc-color-primary); }
.dc-chip__x { cursor: pointer; color: var(--dc-color-text-muted); font-size: var(--dc-fs-md); line-height: 1; background: none; border: 0; padding: 0; }
.dc-chip--sm .dc-chip__x { font-size: var(--dc-fs-sm); }
.dc-chip__x:hover { color: var(--dc-color-danger); }

/* ============== Алерты ============== */
.dc-alert {
  display: flex; gap: var(--dc-space-3); align-items: flex-start;
  padding: var(--dc-space-3) var(--dc-space-4); border-radius: var(--dc-radius-sm);
  border: var(--dc-border-width) solid var(--dc-color-border); background: var(--dc-color-surface-alt);
  font-size: var(--dc-fs-md);
}
.dc-alert--info    { background: var(--dc-color-info-soft);    border-color: color-mix(in srgb, var(--dc-color-info) 25%, transparent); }
.dc-alert--success { background: var(--dc-color-success-soft); border-color: color-mix(in srgb, var(--dc-color-success) 25%, transparent); }
.dc-alert--warning { background: var(--dc-color-warning-soft); border-color: color-mix(in srgb, var(--dc-color-warning) 30%, transparent); }
.dc-alert--danger  { background: var(--dc-color-danger-soft);  border-color: color-mix(in srgb, var(--dc-color-danger) 25%, transparent); }

/* ============== Формы ============== */
.dc-field { display: flex; flex-direction: column; gap: var(--dc-field-gap); }
.dc-label { font-size: var(--dc-fs-sm); font-weight: var(--dc-fw-medium); color: var(--dc-color-text-soft); }
.dc-label__req { color: var(--dc-color-danger); }
.dc-hint { font-size: var(--dc-fs-xs); color: var(--dc-color-text-muted); }
.dc-error-text { font-size: var(--dc-fs-xs); color: var(--dc-color-danger); }

.dc-input, .dc-select, .dc-textarea {
  width: 100%; font-family: var(--dc-font); font-size: var(--dc-fs-md); color: var(--dc-color-text);
  background: var(--dc-field-bg); border: var(--dc-border-width) solid var(--dc-color-border-strong);
  border-radius: var(--dc-field-radius); transition: border-color var(--dc-transition), box-shadow var(--dc-transition);
}
.dc-input, .dc-select { height: var(--dc-control-height); padding: 0 var(--dc-space-3); }
.dc-textarea { padding: var(--dc-space-3); min-height: var(--dc-field-textarea-min); resize: vertical; line-height: var(--dc-lh-normal); }
.dc-input:focus, .dc-select:focus, .dc-textarea:focus { outline: none; border-color: var(--dc-accent-field); box-shadow: var(--dc-focus-ring); }
.dc-input:disabled, .dc-select:disabled, .dc-textarea:disabled { background: var(--dc-color-surface-alt); opacity: .7; cursor: not-allowed; }
.dc-input.is-invalid, .dc-select.is-invalid, .dc-textarea.is-invalid { border-color: var(--dc-color-danger); }
.dc-input::placeholder, .dc-textarea::placeholder { color: var(--dc-color-text-muted); }
.dc-input--sm { height: var(--dc-control-height-sm); font-size: var(--dc-fs-sm); }

/* Чекбокс / радио */
.dc-check { display: inline-flex; align-items: center; gap: var(--dc-space-2); cursor: pointer; font-size: var(--dc-fs-md); }
.dc-check input { width: var(--dc-size-check); height: var(--dc-size-check); accent-color: var(--dc-color-primary); cursor: pointer; }

/* Форма — вертикальный контейнер полей `.dc-field` с комфортным интервалом; `.dc-form__actions` —
   ряд кнопок снизу. Интервал между полями даёт контейнер (у `.dc-field` своего низа нет). */
.dc-form { display: flex; flex-direction: column; gap: var(--dc-space-5); }
.dc-form--narrow { max-width: var(--dc-form-narrow-max); }
.dc-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dc-space-3); }

/* Аккордеон — единый блок (шапка-ссылка + раскрываемое тело в одной рамке). На нативных
   <details>/<summary>: работает БЕЗ JS. Шапка = `<summary class="dc-collapse__head">` (акцент-ссылка
   + «+», поворачивается в «×» при раскрытии); тело = `.dc-collapse__body`; разделитель под шапкой
   появляется в раскрытом виде. */
.dc-collapse { border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); background: var(--dc-color-surface); overflow: hidden; }
.dc-collapse__head { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-3);
  padding: var(--dc-space-3) var(--dc-space-4); cursor: pointer; list-style: none;
  font-size: var(--dc-fs-md); font-weight: var(--dc-fw-medium); color: var(--dc-color-primary); }
.dc-collapse__head::-webkit-details-marker { display: none; }
.dc-collapse__head::marker { content: ""; }
.dc-collapse__plus { flex-shrink: 0; font-size: var(--dc-fs-xl); line-height: 1; color: var(--dc-color-primary); transition: transform var(--dc-transition); }
.dc-collapse[open] .dc-collapse__plus { transform: rotate(45deg); }
.dc-collapse[open] .dc-collapse__head { border-bottom: var(--dc-border-width) solid var(--dc-color-border); }
.dc-collapse__body { padding: var(--dc-space-4); }

/* Чат — лента сообщений + поле ввода (проектный чат, чат поддержки в кабинетах всех продуктов).
   Поллинг/отправка — на продукте (свои endpoints); компонент даёт вид. Свои сообщения (`--mine`) —
   справа акцентом, чужие — слева. `.dc-chat` (рамка) для standalone; в панели используют
   `.dc-chat__feed`/`__form` без обёртки. Тело сообщения рендерить через textContent (XSS-safe). */
.dc-chat { display: flex; flex-direction: column; border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); background: var(--dc-color-surface); overflow: hidden; }
.dc-chat__feed { display: flex; flex-direction: column; gap: var(--dc-space-3); padding: var(--dc-space-4); max-height: var(--dc-chat-feed-max-h); overflow-y: auto; }
.dc-chat__empty { text-align: center; padding: var(--dc-space-5) 0; color: var(--dc-color-text-muted); }
.dc-chat__msg { max-width: 78%; align-self: flex-start; padding: var(--dc-space-2) var(--dc-space-3);
  background: var(--dc-color-surface-alt); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); }
.dc-chat__msg--mine { align-self: flex-end; background: var(--dc-color-primary-soft); border-color: color-mix(in srgb, var(--dc-color-primary) 35%, transparent); }
.dc-chat__msg-head { display: flex; align-items: center; gap: var(--dc-space-2); margin-bottom: var(--dc-space-1); font-size: var(--dc-fs-xs); color: var(--dc-color-text-soft); }
.dc-chat__msg-author { font-weight: var(--dc-fw-semibold); color: var(--dc-color-text); }
.dc-chat__msg-time { color: var(--dc-color-text-muted); }
.dc-chat__msg-del { margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0 var(--dc-space-2xs); line-height: 1; font-size: var(--dc-fs-lg); color: var(--dc-color-text-muted); }
.dc-chat__msg-del:hover { color: var(--dc-color-danger); }
.dc-chat__msg-body { font-size: var(--dc-fs-md); white-space: pre-wrap; word-break: break-word; }
.dc-chat__form { display: flex; flex-direction: column; gap: var(--dc-space-3); padding: var(--dc-space-4); border-top: var(--dc-border-width) solid var(--dc-color-border); }
.dc-chat__form .dc-btn { align-self: flex-start; }
.dc-chat__in { min-height: var(--dc-chat-input-min-h); resize: vertical; }

/* Переключатель (switch) */
.dc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--dc-space-2); cursor: pointer; }
.dc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dc-switch__track { width: var(--dc-switch-w); height: var(--dc-switch-h); border-radius: var(--dc-radius-pill); background: var(--dc-color-border-strong); transition: background var(--dc-transition); position: relative; flex: 0 0 auto; }
.dc-switch__track::after { content: ""; position: absolute; top: var(--dc-space-2xs); left: var(--dc-space-2xs); width: var(--dc-switch-thumb); height: var(--dc-switch-thumb); border-radius: 50%; background: var(--dc-color-surface); box-shadow: var(--dc-shadow-xs); transition: transform var(--dc-transition); }
.dc-switch input:checked + .dc-switch__track { background: var(--dc-color-primary); }
.dc-switch input:checked + .dc-switch__track::after { transform: translateX(calc(var(--dc-switch-w) - var(--dc-switch-thumb) - var(--dc-space-2xs) * 2)); }
.dc-switch input:focus-visible + .dc-switch__track { box-shadow: var(--dc-focus-ring); }

/* ============== Таблица (умная) ============== */
.dc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); }
.dc-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--dc-color-surface); font-size: var(--dc-fs-md); }
.dc-table th, .dc-table td { text-align: left; padding: var(--dc-space-3) var(--dc-space-4); border-bottom: var(--dc-border-width) solid var(--dc-color-border); vertical-align: middle; }
.dc-table thead th {
  font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-semibold); text-transform: uppercase; letter-spacing: .05em;
  color: var(--dc-color-text-muted); background: var(--dc-color-surface-alt); position: sticky; top: 0; z-index: var(--dc-z-base);
}
.dc-table tbody tr { transition: background var(--dc-transition); }
.dc-table tbody tr:hover { background: var(--dc-color-surface-alt); }
.dc-table tr:last-child td { border-bottom: 0; }
.dc-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--dc-color-surface-alt) 55%, transparent); }
.dc-table td.dc-actions { white-space: nowrap; text-align: right; }
.dc-table td.dc-actions > * { vertical-align: middle; }
.dc-table td.dc-actions > * + * { margin-left: var(--dc-space-2); }
.dc-table td.dc-actions form { margin: 0; display: inline-flex; } /* кнопка-в-форме (напр. удаление) — в один ряд */
/* Сортируемый заголовок (dc-ui.js вешает aria-sort) */
.dc-table th[data-dc-sort] { cursor: pointer; user-select: none; }
.dc-table th[data-dc-sort]::after { content: "↕"; opacity: .35; margin-left: var(--dc-space-1h); font-size: var(--dc-fs-xs); }
.dc-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.dc-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }

/* ============== Табы ============== */
.dc-tabs__nav { display: flex; gap: var(--dc-space-1); border-bottom: var(--dc-border-width) solid var(--dc-color-border); }
.dc-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--dc-space-3) var(--dc-space-4); font-family: var(--dc-font); font-size: var(--dc-fs-md);
  color: var(--dc-color-text-soft); border-bottom: calc(var(--dc-border-width) * 2) solid transparent; margin-bottom: calc(var(--dc-border-width) * -1); transition: color var(--dc-transition), border-color var(--dc-transition);
}
.dc-tab:hover { color: var(--dc-color-text); }
.dc-tab.is-active { color: var(--dc-accent-nav); border-bottom-color: var(--dc-accent-nav); font-weight: var(--dc-fw-medium); }
.dc-tabpanel { padding-top: var(--dc-space-4); }
.dc-tabpanel[hidden] { display: none; }

/* ============== Сегментированный переключатель (разделы, фильтр-пресеты) ==============
   Активный сегмент — мягкий акцент из схемы (не яркая заливка). Для табов-разделов
   (`.dc-segmented`) и групп фильтр-кнопок (`.dc-segmented--sm`). */
.dc-segmented { display: inline-flex; border: var(--dc-border-width) solid var(--dc-color-border-strong); border-radius: var(--dc-radius-sm); overflow: hidden; font-weight: var(--dc-fw-medium); font-size: var(--dc-fs-md); vertical-align: middle; }
.dc-segmented__item { display: inline-flex; align-items: center; gap: var(--dc-space-1h); padding: var(--dc-space-2) var(--dc-space-4); color: var(--dc-color-text-soft); text-decoration: none; background: transparent; border: 0; border-right: var(--dc-border-width) solid var(--dc-color-border); cursor: pointer; font: inherit; transition: background var(--dc-transition), color var(--dc-transition); }
.dc-segmented__item:last-child { border-right: 0; }
.dc-segmented__item:hover { color: var(--dc-color-text); background: var(--dc-color-surface-alt); }
.dc-segmented__item.is-active { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); font-weight: var(--dc-fw-semibold); }
.dc-segmented--sm .dc-segmented__item { padding: var(--dc-space-2) var(--dc-space-3); font-size: var(--dc-fs-sm); }
@media (max-width: 640px) { .dc-segmented { flex-wrap: wrap; } .dc-segmented__item { flex: 1 1 auto; justify-content: center; } }

/* ============== Панель инструментов (toolbar) ==============
   Строка действий и фильтров: группы + вертикальный разделитель; правую группу
   отодвигает `--right` (margin-left:auto). */
.dc-toolbar { display: flex; align-items: center; gap: var(--dc-space-3); flex-wrap: wrap; background: var(--dc-color-surface); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); padding: var(--dc-space-3) var(--dc-space-4); }
.dc-toolbar__group { display: flex; align-items: center; gap: var(--dc-space-2); flex-wrap: wrap; }
.dc-toolbar__group--right { margin-left: auto; }
.dc-toolbar__divider { width: var(--dc-border-width); align-self: stretch; min-height: var(--dc-space-5); background: var(--dc-color-border); margin: 0 var(--dc-space-1); }

/* ============== Меню / дропдаун ============== */
.dc-dropdown { position: relative; display: inline-block; }
.dc-menu {
  position: absolute; z-index: var(--dc-z-dropdown); min-width: var(--dc-menu-min-w); margin-top: var(--dc-space-1h);
  background: var(--dc-color-surface); border: var(--dc-border-width) solid var(--dc-color-border);
  border-radius: var(--dc-radius-sm); box-shadow: var(--dc-shadow-md); padding: var(--dc-space-2);
}
.dc-menu[hidden] { display: none; }
.dc-menu__item {
  display: flex; align-items: center; gap: var(--dc-space-2); width: 100%;
  padding: var(--dc-space-2) var(--dc-space-3); border-radius: var(--dc-radius-xs);
  font-size: var(--dc-fs-md); color: var(--dc-color-text); background: transparent; border: 0; text-align: left; cursor: pointer; text-decoration: none;
}
.dc-menu__item:hover { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); }
.dc-menu__item--danger:hover { background: var(--dc-color-danger-soft); color: var(--dc-color-danger); }
.dc-menu__sep { height: var(--dc-border-width); background: var(--dc-color-border); margin: var(--dc-space-2) 0; }

/* ============== Модалка / попап ============== */
.dc-modal-overlay {
  position: fixed; inset: 0; z-index: var(--dc-z-modal); display: flex; align-items: center; justify-content: center;
  padding: var(--dc-space-5); background: var(--dc-color-overlay); opacity: 0; transition: opacity var(--dc-transition);
}
.dc-modal-overlay.is-open { opacity: 1; }
.dc-modal-overlay[hidden] { display: none; }
.dc-modal {
  width: 100%; max-width: var(--dc-modal-w); max-height: 90vh; overflow: auto;
  background: var(--dc-color-surface); border-radius: var(--dc-radius-lg); box-shadow: var(--dc-shadow-lg);
  transform: translateY(var(--dc-space-2)) scale(.98); transition: transform var(--dc-transition);
}
.dc-modal-overlay.is-open .dc-modal { transform: none; }
.dc-modal--sm { max-width: var(--dc-modal-w-sm); }
.dc-modal--lg { max-width: var(--dc-modal-w-lg); }
.dc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-3); padding: var(--dc-space-4) var(--dc-space-5); border-bottom: var(--dc-border-width) solid var(--dc-color-border); }
.dc-modal__title { font-size: var(--dc-fs-xl); font-weight: var(--dc-fw-semibold); }
.dc-modal__x { background: transparent; border: 0; cursor: pointer; font-size: var(--dc-fs-xl); line-height: 1; color: var(--dc-color-text-muted); }
.dc-modal__x:hover { color: var(--dc-color-text); }
.dc-modal__body { padding: var(--dc-space-5); }
.dc-modal__foot { display: flex; justify-content: flex-end; gap: var(--dc-space-3); padding: var(--dc-space-4) var(--dc-space-5); border-top: var(--dc-border-width) solid var(--dc-color-border); }

/* ============== Модалка с закладками: вертикальный рельс (КАНОН) ==============
   Любой попап получает боковые закладки-«шевроны» (иконка + подпись; активная — акцентный бар
   слева + мягкая заливка). Разметка: .dc-modal.dc-modal--tabbed → .dc-tabs.dc-tabs--rail с
   .dc-tabs__nav (кнопки [data-dc-tab="#pane"] c .dc-tab__ico) слева и .dc-modal__panes (.dc-tabpanel)
   справа. Переключение — штатный initTabs ([data-dc-tab]); панели ищутся по id глобально, вложенность
   свободна. Ничего доп. подключать не нужно — свойство доступно ВСЕМ попапам dc-ui. */
.dc-modal--tabbed .dc-tabs--rail { display: flex; align-items: stretch; }
.dc-tabs--rail > .dc-tabs__nav {
  flex: 0 0 auto; flex-direction: column; gap: var(--dc-space-1); min-width: 176px;
  border-bottom: 0; border-right: var(--dc-border-width) solid var(--dc-color-border);
  padding: var(--dc-space-3); background: var(--dc-color-surface-alt);
}
.dc-tabs--rail .dc-tab {
  display: flex; align-items: center; gap: var(--dc-space-2); width: 100%; text-align: left;
  padding: var(--dc-space-2) var(--dc-space-3); border-radius: var(--dc-radius);
  border-bottom: 0; margin-bottom: 0; border-left: calc(var(--dc-border-width) * 2) solid transparent;
}
.dc-tabs--rail .dc-tab:hover { background: var(--dc-color-surface); }
.dc-tabs--rail .dc-tab.is-active {
  color: var(--dc-accent-nav); background: var(--dc-color-primary-soft);
  border-left-color: var(--dc-accent-nav); border-bottom-color: transparent; font-weight: var(--dc-fw-medium);
}
.dc-tab__ico { display: inline-flex; flex: 0 0 auto; width: 18px; height: 18px; }
.dc-tab__ico svg { width: 100%; height: 100%; display: block; }
.dc-tabs--rail > .dc-modal__panes { flex: 1 1 auto; min-width: 0; }
.dc-tabs--rail .dc-tabpanel { padding: var(--dc-space-5); }
.dc-tabs--rail .dc-tabpanel[hidden] { display: none; }

/* Узкий экран — рельс схлопывается в верхнюю горизонтальную ленту. */
@media (max-width: 560px) {
  .dc-modal--tabbed .dc-tabs--rail { flex-direction: column; }
  .dc-tabs--rail > .dc-tabs__nav {
    flex-direction: row; overflow-x: auto; min-width: 0;
    border-right: 0; border-bottom: var(--dc-border-width) solid var(--dc-color-border);
  }
  .dc-tabs--rail .dc-tab { width: auto; border-left: 0; border-bottom: calc(var(--dc-border-width) * 2) solid transparent; }
  .dc-tabs--rail .dc-tab.is-active { border-left-color: transparent; border-bottom-color: var(--dc-accent-nav); }
}

/* ============== Тосты ============== */
.dc-toasts { position: fixed; z-index: var(--dc-z-toast); bottom: var(--dc-space-5); right: var(--dc-space-5); display: flex; flex-direction: column; gap: var(--dc-space-2); }
.dc-toast {
  display: flex; align-items: flex-start; gap: var(--dc-space-3); min-width: var(--dc-toast-min-w); max-width: var(--dc-toast-max-w);
  padding: var(--dc-space-3) var(--dc-space-4); border-radius: var(--dc-radius-sm);
  background: var(--dc-color-text); color: var(--dc-color-text-invert); box-shadow: var(--dc-shadow-md);
  transform: translateX(var(--dc-space-4)); opacity: 0; transition: transform var(--dc-transition), opacity var(--dc-transition);
}
.dc-toast.is-open { transform: none; opacity: 1; }
.dc-toast--success { background: var(--dc-color-success); }
.dc-toast--warning { background: var(--dc-color-warning); }
.dc-toast--danger  { background: var(--dc-color-danger); }
.dc-toast__x { margin-left: auto; cursor: pointer; opacity: .8; }
.dc-toast__x:hover { opacity: 1; }

/* ============== Тултип ============== */
.dc-tooltip-bubble {
  position: fixed; z-index: var(--dc-z-tooltip); pointer-events: none;
  background: var(--dc-color-text); color: var(--dc-color-text-invert); font-size: var(--dc-fs-xs);
  padding: var(--dc-space-1) var(--dc-space-2); border-radius: var(--dc-radius-xs); box-shadow: var(--dc-shadow-sm);
  opacity: 0; transition: opacity var(--dc-transition); max-width: var(--dc-tooltip-max-w);
}
.dc-tooltip-bubble.is-open { opacity: 1; }

/* ============== Аватар ============== */
.dc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--dc-size-avatar); height: var(--dc-size-avatar); border-radius: 50%; overflow: hidden;
  background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong);
  font-weight: var(--dc-fw-semibold); font-size: var(--dc-fs-sm);
}
.dc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dc-avatar--lg { width: var(--dc-size-avatar-lg); height: var(--dc-size-avatar-lg); font-size: var(--dc-fs-lg); }

/* ============== Спиннер / прогресс ============== */
.dc-spinner {
  display: inline-block; width: var(--dc-size-spinner); height: var(--dc-size-spinner); border-radius: 50%;
  border: calc(var(--dc-border-width) * 2) solid var(--dc-color-border-strong); border-top-color: var(--dc-color-primary);
  animation: dc-spin .7s linear infinite;
}
@keyframes dc-spin { to { transform: rotate(360deg); } }
.dc-progress { height: var(--dc-space-2); border-radius: var(--dc-radius-pill); background: var(--dc-color-surface-alt); overflow: hidden; }
.dc-progress__bar { height: 100%; background: var(--dc-color-primary); border-radius: inherit; transition: width var(--dc-transition-slow); }

/* ============== Канбан (КАНОН экосистемы — из доски DC-Task) ==============
   Доска = колонки-статусы + карточки. Перетаскивание — за ручку-хват (курсор
   «взять» только на грипе, не на всей карточке). Прогрессивное улучшение:
   без JS показывается фолбэк (напр. дропдаун смены статуса), с JS — drag-n-drop
   (dc-ui.js вешает класс `.dc-kanban--dnd` на доску и прячет `.dc-kanban__fallback`).
   Событие при drop — `dc:kanban:move` (detail: card, toColumn, cardId). */
.dc-kanban { display: flex; gap: var(--dc-space-4); align-items: flex-start; overflow-x: auto; padding-bottom: var(--dc-space-1); min-height: var(--dc-kanban-min-h); }
.dc-kanban__col { flex: 0 0 var(--dc-kanban-col); width: var(--dc-kanban-col); background: var(--dc-color-bg); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); display: flex; flex-direction: column; }
.dc-kanban__col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-2); padding: var(--dc-space-3); border-bottom: var(--dc-border-width) solid var(--dc-color-border); }
.dc-kanban__count { color: var(--dc-color-text-muted); font-size: var(--dc-fs-sm); }
.dc-kanban__cards { display: flex; flex-direction: column; gap: var(--dc-space-3); padding: var(--dc-space-3); min-height: var(--dc-kanban-drop-min-h); flex: 1; transition: background var(--dc-transition); }
.dc-kanban__cards.is-drop-target { background: var(--dc-color-primary-soft); border-radius: var(--dc-radius-sm); }
.dc-kanban__card { position: relative; background: var(--dc-color-surface); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius-sm); box-shadow: var(--dc-shadow-xs); padding: var(--dc-space-3) var(--dc-space-3) var(--dc-space-3) var(--dc-space-5); display: flex; flex-direction: column; gap: var(--dc-space-1h); }
.dc-kanban__card.is-dragging { opacity: .5; }
.dc-kanban__grip { position: absolute; left: var(--dc-space-2); top: var(--dc-space-2); color: var(--dc-color-text-muted); font-size: var(--dc-fs-sm); line-height: 1; letter-spacing: -.15em; cursor: grab; user-select: none; }
.dc-kanban__grip:active, .dc-kanban__card.is-dragging .dc-kanban__grip { cursor: grabbing; }
.dc-kanban__card:hover .dc-kanban__grip { color: var(--dc-color-primary); }
.dc-kanban__card-key { font-size: var(--dc-fs-xs); text-decoration: none; color: var(--dc-color-primary); }
.dc-kanban__card-title { font-weight: var(--dc-fw-semibold); font-size: var(--dc-fs-md); text-decoration: none; color: var(--dc-color-text); line-height: 1.35; }
.dc-kanban__card-title:hover { text-decoration: underline; }
.dc-kanban__card-meta { display: flex; flex-wrap: wrap; gap: var(--dc-space-1h); align-items: center; }
.dc-kanban__card-labels { display: flex; flex-wrap: wrap; gap: var(--dc-space-1); }
.dc-kanban--dnd .dc-kanban__fallback { display: none; }
@media (max-width: 640px) { .dc-kanban__col { flex: 0 0 var(--dc-kanban-col-sm); width: var(--dc-kanban-col-sm); } }

/* ============== Раскрывающаяся карточка (КАНОН экосистемы — из списка проектов DC-Task) ==============
   Сетка карточек, раскрывающихся при наведении: вторая половина (`.dc-xcard__aside`) выезжает
   ОВЕРЛЕЕМ поверх соседа — сетка НЕ перестраивается (соседи не «уезжают» из-под курсора и не
   открывается не та карточка). У крайних справа карточек панель открывается влево (dc-ui.js вешает
   `.dc-xcard--flip` по краю сетки → последняя колонка не переносит соседей на новую строку).
   Раскрытие — с ЗАДЕРЖКОЙ (класс `.is-open` ставит dc-ui.js на mouseenter через data-dc-open-delay,
   снимает мгновенно на mouseleave), чтобы при быстром проведении мышью интерфейс не дёргался. Панель
   строго по высоте карточки; длинный контент скроллится внутри секции `--grow`. Заголовок — резерв
   места под 3 строки (карточки в ряду выровнены), шрифт ужимается JS-ом, иначе многоточие (line-clamp).
   Разметка: [data-dc-cards] на .dc-xcard-grid; карточка .dc-xcard(>.dc-xcard__main + .dc-xcard__aside). */
.dc-xcard-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--dc-space-4); align-items: start; }
@media (max-width: 1400px) { .dc-xcard-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1200px) { .dc-xcard-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .dc-xcard-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .dc-xcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .dc-xcard-grid { grid-template-columns: 1fr; } }

.dc-xcard { position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--dc-color-surface); border: var(--dc-border-width) solid var(--dc-color-border);
  border-radius: var(--dc-radius);
  transition: border-color var(--dc-transition), box-shadow var(--dc-transition), transform var(--dc-transition); }
.dc-xcard:hover { border-color: color-mix(in srgb, var(--dc-color-primary) 40%, var(--dc-color-border)); }
.dc-xcard.is-open { box-shadow: var(--dc-shadow-md); transform: translateY(var(--dc-lift-2)); z-index: var(--dc-z-base);
  border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dc-xcard--flip.is-open { border-radius: var(--dc-radius); border-top-left-radius: 0; border-bottom-left-radius: 0; }

.dc-xcard__main { display: flex; flex-direction: column; min-width: 0; }
.dc-xcard__cover { position: relative; width: 100%; aspect-ratio: 16 / 6; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--dc-color-surface-alt);
  border-top-left-radius: calc(var(--dc-radius) - var(--dc-border-width)); border-top-right-radius: calc(var(--dc-radius) - var(--dc-border-width)); }
.dc-xcard__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-xcard__cover-initials { font-size: var(--dc-fs-3xl); font-weight: var(--dc-fw-bold);
  color: var(--dc-color-text-invert); letter-spacing: .04em; text-shadow: var(--dc-text-shadow); }

.dc-xcard__body { display: flex; flex-direction: column; gap: var(--dc-space-2);
  padding: var(--dc-space-3) var(--dc-space-4) var(--dc-space-4); }
/* Заголовок: всегда резервирует место под 3 строки (min-height) — сводки в ряду на одной линии. */
.dc-xcard__title { display: flex; align-items: flex-start; gap: var(--dc-space-2);
  min-height: calc(var(--dc-lh-tight) * 3em); font-size: var(--dc-fs-lg); font-weight: var(--dc-fw-bold);
  line-height: var(--dc-lh-tight); color: var(--dc-color-text); }
.dc-xcard__name { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* Панель-оверлей той же ширины, что карточка; строго по её высоте (top/bottom -1px). */
.dc-xcard__aside { display: none; position: absolute; top: calc(var(--dc-border-width) * -1); bottom: calc(var(--dc-border-width) * -1); left: 100%; width: 100%;
  box-sizing: border-box; flex-direction: column; gap: var(--dc-space-4); padding: var(--dc-space-4);
  overflow: hidden; border: var(--dc-border-width) solid var(--dc-color-border); border-left: 0;
  border-radius: 0 var(--dc-radius) var(--dc-radius) 0; background: var(--dc-color-bg); }
.dc-xcard.is-open .dc-xcard__aside { display: flex; }
.dc-xcard--flip .dc-xcard__aside { left: auto; right: 100%;
  border-left: var(--dc-border-width) solid var(--dc-color-border); border-right: 0;
  border-radius: var(--dc-radius) 0 0 var(--dc-radius); }
.dc-xcard__aside-sec { display: flex; flex-direction: column; gap: var(--dc-space-1); min-width: 0; }
/* Секция, забирающая всё свободное место панели и скроллящая контент внутри (напр. описание). */
.dc-xcard__aside-sec--grow { flex: 1 1 0; min-height: 0; }
.dc-xcard__aside-sec--grow .dc-xcard__aside-text { flex: 1 1 0; min-height: 0; overflow: auto; }
.dc-xcard__aside-label { font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-semibold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--dc-color-text-muted); }
.dc-xcard__aside-text { font-size: var(--dc-fs-sm); line-height: var(--dc-lh-normal);
  color: var(--dc-color-text); overflow-wrap: anywhere; white-space: pre-line; }
/* Мини-полоса прогресса (готово/всего) внутри панели. */
.dc-xcard__bar { display: block; height: var(--dc-size-bar); border-radius: var(--dc-radius-pill);
  background: var(--dc-color-surface-alt); overflow: hidden; }
.dc-xcard__bar-fill { display: block; height: 100%; border-radius: var(--dc-radius-pill);
  background: var(--dc-color-success); }

/* Узкая раскладка (1 колонка): оверлею некуда ехать — панель встаёт в поток под карточкой. */
@media (max-width: 440px) {
  .dc-xcard.is-open { border-radius: var(--dc-radius); }
  .dc-xcard__aside { display: flex; position: static; width: auto; border: 0;
    border-top: var(--dc-border-width) solid var(--dc-color-border); border-radius: 0; }
  .dc-xcard__aside-sec--grow { flex: none; }
  .dc-xcard__aside-sec--grow .dc-xcard__aside-text { flex: none; overflow: visible; }
}

/* ============== План: таймлайн + Гант (КАНОН экосистемы — из вкладки «План» DC-Task) ==============
   Framework-agnostic: сервер кладёт данные в дочерний <script type="application/json">,
   dc-ui.js рисует SVG (initTimeline / initGantt). Цвета берутся из токенов темы продукта
   через getComputedStyle, поэтому акцент = бренд продукта, а здоровье = семантика success/
   warning/danger (зелёный «в графике» / жёлтый «отставание» / красный «провал», как в
   трекинге проектов DICOM). */
.dc-plan { display: flex; flex-direction: column; gap: var(--dc-space-5); }
.dc-plan__label { font-size: var(--dc-fs-xs); font-weight: var(--dc-fw-semibold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--dc-color-text-muted);
  margin: 0 0 var(--dc-space-2); }

.dc-timeline, .dc-gantt { width: 100%; }
.dc-timeline svg, .dc-gantt svg { display: block; font-family: inherit; }
.dc-timeline svg { width: 100%; height: auto; }
.dc-gantt__scroll { width: 100%; overflow-x: auto; }        /* длинный проект → горизонтальный скролл */

/* Переключатель масштаба Ганта (дни/недели/месяцы). */
.dc-gantt__ctrls { display: flex; justify-content: flex-end; margin: 0 0 var(--dc-space-2); }
.dc-plan__scale { display: inline-flex; align-items: center; gap: var(--dc-space-2); }
.dc-plan__scale-lbl { font-size: var(--dc-fs-sm); color: var(--dc-color-text-muted); }
.dc-plan__scale-btns { display: inline-flex; border: var(--dc-border-width) solid var(--dc-color-border-strong);
  border-radius: var(--dc-radius-sm); overflow: hidden; }
.dc-plan__scale-btns button { border: 0; background: transparent; cursor: pointer;
  padding: var(--dc-space-1) var(--dc-space-3); font: inherit; font-size: var(--dc-fs-sm); color: var(--dc-color-text-soft);
  border-left: var(--dc-border-width) solid var(--dc-color-border); }
.dc-plan__scale-btns button:first-child { border-left: 0; }
.dc-plan__scale-btns button:hover { background: var(--dc-color-surface-alt); }
.dc-plan__scale-btns button.is-active { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); }
.dc-gantt a text, .dc-timeline a text { text-decoration: none; }
.dc-gantt a:hover text.dc-gantt__key { text-decoration: underline; }

/* Здоровье по срокам: бейдж проекта/задачи. */
.dc-health { display: inline-flex; align-items: center; gap: var(--dc-space-1);
  font-size: var(--dc-fs-sm); font-weight: var(--dc-fw-medium);
  padding: var(--dc-space-2xs) var(--dc-space-3); border-radius: var(--dc-radius-pill); white-space: nowrap; }
.dc-health__dot { width: var(--dc-size-dot); height: var(--dc-size-dot); border-radius: 50%; background: currentColor; }
.dc-health--ok   { background: var(--dc-color-success-soft); color: var(--dc-color-success); }
.dc-health--warn { background: var(--dc-color-warning-soft); color: var(--dc-color-warning); }
.dc-health--fail { background: var(--dc-color-danger-soft);  color: var(--dc-color-danger); }
.dc-health--done { background: var(--dc-color-surface-alt);  color: var(--dc-color-text-soft); }

/* Плашки-виновники отставания (рядом с бейджем, как в трекере). */
.dc-plan__slips { display: flex; flex-wrap: wrap; gap: var(--dc-space-2); }
.dc-plan__slip { font-size: var(--dc-fs-xs); padding: var(--dc-space-2xs) var(--dc-space-2); border-radius: var(--dc-radius-xs); }
.dc-plan__slip--warn { background: var(--dc-color-warning-soft); color: var(--dc-color-warning); }
.dc-plan__slip--fail { background: var(--dc-color-danger-soft);  color: var(--dc-color-danger); }

/* Легенда (рендерится dc-ui.js под Гантом). */
.dc-plan__legend { display: flex; flex-wrap: wrap; gap: var(--dc-space-4);
  font-size: var(--dc-fs-sm); color: var(--dc-color-text-soft); margin-top: var(--dc-space-3); }
.dc-plan__legend-item { display: inline-flex; align-items: center; gap: var(--dc-space-1); }

.dc-plan__empty { color: var(--dc-color-text-muted); font-size: var(--dc-fs-sm); }

/* ============== Числовой степпер (.dc-stepper) ==============
   − [поле] + для количеств. Поведение (клампинг/шаг) поднимает dc-ui.js по `data-dc-stepper`.
   Поле — обычный <input>, так что форма отправляет значение как есть. */
.dc-stepper { display: inline-flex; align-items: stretch; width: var(--dc-stepper-w); border: var(--dc-border-width) solid var(--dc-color-border-strong); border-radius: var(--dc-field-radius); background: var(--dc-field-bg); overflow: hidden; }
.dc-stepper__btn { flex: 0 0 auto; width: var(--dc-control-height); border: 0; background: transparent; color: var(--dc-color-text-soft); font-size: var(--dc-fs-lg); line-height: 1; cursor: pointer; transition: background var(--dc-transition), color var(--dc-transition); }
.dc-stepper__btn:hover { background: var(--dc-color-surface-alt); color: var(--dc-color-primary-strong); }
.dc-stepper__btn:disabled { opacity: .45; cursor: not-allowed; }
.dc-stepper__btn:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
.dc-stepper__input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; border-left: var(--dc-border-width) solid var(--dc-color-border); border-right: var(--dc-border-width) solid var(--dc-color-border); background: transparent; color: var(--dc-color-text); text-align: center; font: inherit; font-size: var(--dc-fs-md); font-variant-numeric: tabular-nums; padding: var(--dc-space-2) 0; -moz-appearance: textfield; }
.dc-stepper__input::-webkit-outer-spin-button, .dc-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dc-stepper__input:focus { outline: none; }
.dc-stepper--sm { width: calc(var(--dc-stepper-w) * .85); }
.dc-stepper--sm .dc-stepper__btn { width: var(--dc-control-height-sm); font-size: var(--dc-fs-md); }

/* ============== Шаги-визард (.dc-steps) ==============
   Горизонтальный индикатор прогресса: кружок-номер + подпись, соединители между шагами.
   Состояния на пункте: `.is-done` (пройден, галочка) · `.is-current` (текущий). */
.dc-steps { display: flex; align-items: flex-start; gap: 0; list-style: none; margin: 0; padding: 0; }
.dc-steps__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; gap: var(--dc-space-1h); min-width: 0; }
.dc-steps__item::before, .dc-steps__item::after { content: ""; position: absolute; top: calc(var(--dc-size-tile) / 2); height: var(--dc-border-width); background: var(--dc-color-border-strong); z-index: 0; }
.dc-steps__item::before { left: 0; right: 50%; }
.dc-steps__item::after  { left: 50%; right: 0; }
.dc-steps__item:first-child::before { display: none; }
.dc-steps__item:last-child::after { display: none; }
.dc-steps__item.is-done::after, .dc-steps__item.is-done::before, .dc-steps__item.is-current::before { background: var(--dc-color-primary); }
.dc-steps__marker { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--dc-size-tile); height: var(--dc-size-tile); border-radius: 50%; background: var(--dc-color-surface); border: 2px solid var(--dc-color-border-strong); color: var(--dc-color-text-muted); font-size: var(--dc-fs-sm); font-weight: var(--dc-fw-semibold); }
.dc-steps__item.is-current .dc-steps__marker { border-color: var(--dc-color-primary); color: var(--dc-color-primary-strong); box-shadow: var(--dc-shadow-glow); }
.dc-steps__item.is-done .dc-steps__marker { background: var(--dc-color-primary); border-color: var(--dc-color-primary); color: var(--dc-color-on-primary); }
.dc-steps__label { font-size: var(--dc-fs-sm); color: var(--dc-color-text-soft); padding: 0 var(--dc-space-1); }
.dc-steps__item.is-current .dc-steps__label { color: var(--dc-color-text); font-weight: var(--dc-fw-medium); }
@media (max-width: 640px) {
  .dc-steps { flex-direction: column; align-items: stretch; gap: var(--dc-space-3); }
  .dc-steps__item { flex-direction: row; text-align: left; gap: var(--dc-space-3); }
  .dc-steps__item::before, .dc-steps__item::after { display: none; }
}

/* ============== Поповер (.dc-popover) ==============
   Плавающая панель с ПРОИЗВОЛЬНЫМ содержимым (в отличие от текстового тултипа), по клику.
   Триггер — `[data-dc-popover="#id"]`; панель позиционирует dc-ui.js. Со стрелкой-указателем. */
.dc-popover { position: absolute; z-index: var(--dc-z-dropdown); width: var(--dc-popover-w); max-width: calc(100vw - var(--dc-space-5)); background: var(--dc-color-surface); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); box-shadow: var(--dc-shadow-lg); padding: var(--dc-space-4); color: var(--dc-color-text); font-size: var(--dc-fs-md); }
.dc-popover[hidden] { display: none; }
.dc-popover__arrow { position: absolute; width: 10px; height: 10px; background: var(--dc-color-surface); border-left: var(--dc-border-width) solid var(--dc-color-border); border-top: var(--dc-border-width) solid var(--dc-color-border); transform: rotate(45deg); }
.dc-popover__title { font-weight: var(--dc-fw-semibold); margin: 0 0 var(--dc-space-2); }
.dc-popover__foot { display: flex; justify-content: flex-end; gap: var(--dc-space-2); margin-top: var(--dc-space-3); }

/* ============== Аккордеон-группа (.dc-accordion) ==============
   Набор секций `.dc-collapse` (нативные <details>) в общей рамке. С `data-dc-accordion="single"`
   dc-ui.js держит открытой только одну секцию. Без JS — обычные независимые <details>. */
.dc-accordion { display: flex; flex-direction: column; border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); overflow: hidden; background: var(--dc-color-surface); }
.dc-accordion > .dc-collapse { border: 0; border-radius: 0; }
.dc-accordion > .dc-collapse + .dc-collapse { border-top: var(--dc-border-width) solid var(--dc-color-border); }

/* ============== Датапикер (.dc-datepicker) ==============
   Поле-обёртка + всплывающий календарь (месячная сетка). Строит и позиционирует dc-ui.js
   по `data-dc-datepicker`; выбранная дата пишется в связанный <input> (значение — ISO YYYY-MM-DD,
   видимый текст — как задано `data-display`). Календарь на токенах, следует за схемой. */
.dc-datepicker { position: relative; display: inline-block; }
.dc-calendar { position: absolute; z-index: var(--dc-z-dropdown); width: var(--dc-datepicker-w); background: var(--dc-color-surface); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); box-shadow: var(--dc-shadow-lg); padding: var(--dc-space-3); }
.dc-calendar[hidden] { display: none; }
.dc-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-2); margin-bottom: var(--dc-space-2); }
.dc-calendar__title { font-weight: var(--dc-fw-semibold); font-size: var(--dc-fs-md); color: var(--dc-color-text); text-transform: capitalize; }
.dc-calendar__nav { width: var(--dc-control-height-sm); height: var(--dc-control-height-sm); border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius-sm); background: var(--dc-color-surface); color: var(--dc-color-text-soft); cursor: pointer; font-size: var(--dc-fs-md); line-height: 1; }
.dc-calendar__nav:hover { background: var(--dc-color-surface-alt); color: var(--dc-color-primary-strong); }
.dc-calendar__nav:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
.dc-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dc-calendar__dow { text-align: center; font-size: var(--dc-fs-xs); color: var(--dc-color-text-muted); padding: var(--dc-space-1) 0; text-transform: uppercase; }
.dc-calendar__day { height: var(--dc-cal-cell); border: 0; border-radius: var(--dc-radius-sm); background: transparent; color: var(--dc-color-text); font: inherit; font-size: var(--dc-fs-sm); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--dc-transition), color var(--dc-transition); }
.dc-calendar__day:hover { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); }
.dc-calendar__day:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
.dc-calendar__day--out { color: var(--dc-color-text-muted); opacity: .55; }
.dc-calendar__day--today { box-shadow: inset 0 0 0 var(--dc-border-width) var(--dc-color-border-strong); }
.dc-calendar__day--sel { background: var(--dc-color-primary); color: var(--dc-color-on-primary); font-weight: var(--dc-fw-semibold); }
.dc-calendar__day--sel:hover { background: var(--dc-color-primary-strong); color: var(--dc-color-on-primary); }
.dc-calendar__day:disabled { opacity: .3; cursor: not-allowed; }
.dc-calendar__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--dc-space-2); padding-top: var(--dc-space-2); border-top: var(--dc-border-width) solid var(--dc-color-border); }

/* ============== Пагинатор (.dc-pager) ==============
   Самостоятельный компонент: ‹ страницы › + инфо. Используется в расширенной таблице,
   но пригоден отдельно. Поведение — на продукте либо в .dc-datatable. */
.dc-pager { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dc-space-2); }
.dc-pager__btn { min-width: var(--dc-control-height-sm); height: var(--dc-control-height-sm); padding: 0 var(--dc-space-2); border: var(--dc-border-width) solid var(--dc-color-border-strong); border-radius: var(--dc-radius-sm); background: var(--dc-color-surface); color: var(--dc-color-text); font: inherit; font-size: var(--dc-fs-sm); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--dc-transition), color var(--dc-transition), border-color var(--dc-transition); }
.dc-pager__btn:hover:not(:disabled) { background: var(--dc-color-surface-alt); border-color: var(--dc-color-primary); color: var(--dc-color-primary-strong); }
.dc-pager__btn.is-active { background: var(--dc-color-primary); border-color: var(--dc-color-primary); color: var(--dc-color-on-primary); font-weight: var(--dc-fw-semibold); }
.dc-pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.dc-pager__btn:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
.dc-pager__gap { color: var(--dc-color-text-muted); padding: 0 var(--dc-space-1); }
.dc-pager__info { color: var(--dc-color-text-soft); font-size: var(--dc-fs-sm); }

/* ============== Расширенная таблица (.dc-datatable) ==============
   Обёртка над `.dc-table`: панель (поиск + выбор колонок) сверху и пагинатор снизу строит
   dc-ui.js по `data-dc-datatable` (data-page-size). Сортировка — прежняя (data-dc-sort). */
.dc-datatable { display: flex; flex-direction: column; gap: var(--dc-space-3); }
.dc-datatable__bar { display: flex; align-items: center; gap: var(--dc-space-3); flex-wrap: wrap; }
.dc-datatable__bar .dc-datatable__search { width: 240px; max-width: 100%; }
.dc-datatable__bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--dc-space-2); }
.dc-datatable__cols { max-height: 260px; overflow-y: auto; }
.dc-datatable__cols .dc-check { display: flex; padding: var(--dc-space-1) var(--dc-space-2); border-radius: var(--dc-radius-sm); font-size: var(--dc-fs-sm); }
.dc-datatable__cols .dc-check:hover { background: var(--dc-color-surface-alt); }
.dc-datatable__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-3); flex-wrap: wrap; }
.dc-datatable__empty { text-align: center; color: var(--dc-color-text-muted); padding: var(--dc-space-5); }
.dc-datatable[data-dc-datatable] tbody tr[hidden] { display: none; }

/* ============== Канбан «в полный рост»: лимиты, добавление, свёртка, свимлейны ============== */
/* WIP-лимит: счётчик n/limit; при превышении шапка колонки краснеет. */
.dc-kanban__limit { font-variant-numeric: tabular-nums; }
.dc-kanban__col--over .dc-kanban__col-head { background: var(--dc-color-danger-soft); }
.dc-kanban__col--over .dc-kanban__count { color: var(--dc-color-danger); font-weight: var(--dc-fw-semibold); }
/* Кнопка «+ добавить» в подвале колонки (событие dc:kanban:add). */
.dc-kanban__add { margin: 0 var(--dc-space-3) var(--dc-space-3); padding: var(--dc-space-2); border: var(--dc-border-width) dashed var(--dc-color-border-strong); border-radius: var(--dc-radius-sm); background: transparent; color: var(--dc-color-text-soft); font: inherit; font-size: var(--dc-fs-sm); cursor: pointer; transition: background var(--dc-transition), color var(--dc-transition), border-color var(--dc-transition); }
.dc-kanban__add:hover { background: var(--dc-color-primary-soft); color: var(--dc-color-primary-strong); border-color: var(--dc-color-primary); }
.dc-kanban__add:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); }
/* Свернуть колонку в узкий столбик (кнопка в шапке). */
.dc-kanban__collapse { border: 0; background: none; color: var(--dc-color-text-muted); cursor: pointer; font-size: var(--dc-fs-md); line-height: 1; padding: 0 var(--dc-space-1); }
.dc-kanban__collapse:hover { color: var(--dc-color-primary-strong); }
.dc-kanban__col--collapsed { flex-basis: var(--dc-control-height); width: var(--dc-control-height); }
.dc-kanban__col--collapsed .dc-kanban__cards, .dc-kanban__col--collapsed .dc-kanban__add { display: none; }
.dc-kanban__col--collapsed .dc-kanban__col-head { flex-direction: column; gap: var(--dc-space-2); writing-mode: vertical-rl; height: 100%; }
/* Меню/редактор карточки: кнопка ⋯ (событие dc:kanban:edit). */
.dc-kanban__card-menu { position: absolute; right: var(--dc-space-2); top: var(--dc-space-2); border: 0; background: none; color: var(--dc-color-text-muted); cursor: pointer; font-size: var(--dc-fs-md); line-height: 1; padding: 0 var(--dc-space-1); opacity: 0; transition: opacity var(--dc-transition); }
.dc-kanban__card:hover .dc-kanban__card-menu, .dc-kanban__card-menu:focus-visible { opacity: 1; }
.dc-kanban__card-menu:focus-visible { outline: none; box-shadow: var(--dc-focus-ring); border-radius: var(--dc-radius-xs); }
/* Свимлейны: горизонтальные дорожки, каждая — подписанная строка колонок. */
.dc-kanban-lanes { display: flex; flex-direction: column; gap: var(--dc-space-4); }
.dc-kanban__lane { border: var(--dc-border-width) solid var(--dc-color-border); border-radius: var(--dc-radius); overflow: hidden; }
.dc-kanban__lane-head { display: flex; align-items: center; gap: var(--dc-space-2); padding: var(--dc-space-2) var(--dc-space-3); background: var(--dc-color-surface-alt); border-bottom: var(--dc-border-width) solid var(--dc-color-border); font-weight: var(--dc-fw-semibold); font-size: var(--dc-fs-sm); }
.dc-kanban__lane .dc-kanban { padding: var(--dc-space-3); min-height: auto; }
.dc-kanban__lane .dc-kanban__col { background: var(--dc-color-bg); }

/* ============== Доступность: единое фокус-кольцо + учёт «меньше движения» ==============
   Клавиатурный фокус для всех интерактивных .dc-*, у которых своего кольца ещё не было.
   Кольцо — токен --dc-focus-ring (следует за схемой/плотностью). */
.dc-tab:focus-visible,
.dc-segmented__item:focus-visible,
.dc-menu__item:focus-visible,
.dc-chip:focus-visible,
.dc-chip__x:focus-visible,
.dc-modal__x:focus-visible,
.dc-toast__x:focus-visible,
.dc-collapse__head:focus-visible,
.dc-kanban__card:focus-visible,
.dc-avatar:focus-visible,
.dc-link:focus-visible {
  outline: none;
  box-shadow: var(--dc-focus-ring);
  border-radius: var(--dc-radius-xs);
}
.dc-check input:focus-visible { outline: var(--dc-focus-width, 2px) solid var(--dc-accent-field); outline-offset: 2px; }
.dc-collapse__head:focus-visible { border-radius: var(--dc-radius-sm); }
/* Клавиатурный фокус пунктов меню виден на фоне поверхности. */
.dc-menu__item:focus-visible { background: var(--dc-color-surface-alt); }

/* Уважать системную настройку «уменьшить движение»: гасим переходы/анимации/подъёмы,
   но оставляем мгновенную смену состояний (доступность важнее эффекта). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .dc-card--hover:hover,
  .dc-btn:hover,
  .dc-panel:hover,
  .sw:hover { transform: none !important; }
}